luos/resources/assets/js/home/TaskMetrics/VueChartLvOne.vue

<template>
	<div id="v-pm-charts" ref="v-pm-charts" class="v-pm-charts vp-inline-block">
		<div class="p-1 v-flex">
			<h6 class="v-search-title">Number of tasks per Task Status</h6>
			<div>
				<label class="vp-inline-block">{{ $t("ID_PROCESS_CATEGORY") }}</label>
				<div class="vp-width-p40 vp-inline-block">
					<multiselect
						v-model="category"
						:options="optionsCategory"
						:searchable="false"
						:close-on-select="false"
						:show-labels="false"
						placeholder="Pick a value"
					></multiselect>
				</div>
			</div>
			<apexchart
				ref="apexchart1"
				:width="width"
				:options="optionsBar"
				:series="seriesBar"
			></apexchart>
		</div>
	</div>
</template>

<script>
import _ from "lodash";
import Api from "../../api/index";
import Multiselect from "vue-multiselect";

export default {
	name: "VueChartLvOne",
	mixins: [],
	components: {
		Multiselect,
	},
	props: [],
	data() {
		let that = this;
		return {
			category: null,
			optionsCategory: [],
			width: 0,
			seriesBar: [
				{
					data: [400, 430, 448, 470],
				},
			],
			optionsBar: {
				chart: {
					type: "bar",
					id: "apexchart2",
					toolbar: {
						show: false,
					},
					events: {
						legendClick: function (chartContext, seriesIndex, config) {
							console.log("click");
						},
					},
				},
				plotOptions: {
					bar: {
						barHeight: "100%",
						distributed: true,
						horizontal: true,
					},
				},
				legend: {
					position: "left",
					offsetY: 50,
					fontSize: "18px",
				},
				colors: ["#33b2df", "#546E7A", "#d4526e", "#13d8aa"],
				dataLabels: {
					enabled: false,
				},
				xaxis: {
					categories: [
						this.$i18n.t("ID_INBOX"),
						this.$i18n.t("ID_DRAFT"),
						this.$i18n.t("ID_PAUSED"),
						this.$i18n.t("ID_UNASSIGNED"),
					],
				},
				tooltip: {
					x: {
						show: false,
					},
					y: {
						title: {
							formatter: function () {
								return "";
							},
						},
					},
				},
			},
		};
	},
	created() {},
	mounted() {
		this.getBodyHeight();
		this.getCategories();
		//this.getDataDonut();
		//this.getData();
	},
	watch: {},
	computed: {},
	updated() {},
	beforeCreate() {},
	methods: {
		/**
		 * Return the height for Vue Card View body
		 */
		getBodyHeight() {
			this.width = window.innerHeight * 0.8;
		},
		/**
		 * Change view - donut/bar
		 */
		changeView(view) {
			this.typeView = view;
			this.getData();
		},
		/**
		 * Get data from rest API
		 */
		getData() {
			let that = this;
			Api.cases
				.listTotalCases()
				.then((response) => {
					that.formatData(response.data);
				})
				.catch((response) => {});
		},
		/**
		 * Format the data for chart
		 */
		formatData(data) {
			let l = [],
				c = [],
				s = [];
			_.each(data, (el) => {
				l.push(el["List Name"]);
				s.push(el["Total"]);
				if (el["Color"] == "green") {
					c.push("#179a6e");
				}
				if (el["Color"] == "yellow") {
					c.push("#feb019");
				}
				if (el["Color"] == "blue") {
					c.push("#008ffb");
				}
				if (el["Color"] == "gray") {
					c.push("#8f99a0");
				}
			});
			this.seriesDonut = s;
			this.seriesBar = [
				{
					data: s,
				},
			];
			this.$refs["apexchart1"].updateOptions({ labels: l, colors: c });
			this.$refs["apexchart2"].updateOptions({ labels: l, colors: c });
			this.$apexcharts.exec("apexchart1", "updateSeries", s);
			this.$apexcharts.exec("apexchart2", "updateSeries", [
				{
					data: s,
				},
			]);
		},
		getCategories() {
			let that = this;
			console.log("jonas");
			Api.process
				.categories({
					name:""
				})
				.then((response) => {
					that.formatDataCategories(response.data);
				})
				.catch((e) => {
					console.error(err);
				});
		},
		formatDataCategories(data) {
			let array = [];
			_.each(data, (el) => {
				array.push(el["cat_name"]);
			});
			this.optionsCategory = array;
			this.category = array[0];
		},
	},
};
</script>
<style>
.vp-task-metrics-label {
	display: inline-block;
}

.vp-width-p40 {
	width: 40%;
}

.vp-inline-block {
	display: inline-block;
}
</style>
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>