update level one
This commit is contained in:
Henry Jordan
@@ -1,339 +1,216 @@
|
||||
<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>
|
||||
<apexchart
|
||||
v-show="typeView === 'donut'"
|
||||
ref="apexchart1"
|
||||
:width="width"
|
||||
:options="chartOptions1"
|
||||
:series="series1"
|
||||
></apexchart>
|
||||
<apexchart
|
||||
v-show="typeView === 'bar'"
|
||||
ref="apexchart2"
|
||||
:width="width"
|
||||
:options="chartOptions2"
|
||||
:series="series2"
|
||||
></apexchart>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm vp-center">
|
||||
<button
|
||||
@click="changeView('donut')"
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
>
|
||||
<i class="fas fa-chart-pie"></i
|
||||
><span class="vp-padding-l10">View</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-sm">
|
||||
<button
|
||||
@click="changeView('bar')"
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
>
|
||||
<i class="fas fa-chart-bar"></i
|
||||
><span class="vp-padding-l10">View</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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: {},
|
||||
props: [],
|
||||
data() {
|
||||
let that = this;
|
||||
return {
|
||||
typeView: "bar",
|
||||
width: 0,
|
||||
series1: [],
|
||||
chartOptions1: {
|
||||
labels: ["Team A", "Team B", "Team C", "Team D", "Team E"],
|
||||
chart: {
|
||||
id: "apexchart1",
|
||||
type: "pie",
|
||||
},
|
||||
},
|
||||
series2: [
|
||||
{
|
||||
name: "Inflation",
|
||||
data: [2.3, 3.1, 4.0, 10.1, 4.0, 3.6, 3.2, 2.3, 1.4, 0.8, 0.5, 0.2],
|
||||
},
|
||||
],
|
||||
chartOptions2: {
|
||||
chart: {
|
||||
id: "apexchart2",
|
||||
type: "bar",
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 10,
|
||||
dataLabels: {
|
||||
position: "top", // top, center, bottom
|
||||
},
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
formatter: function (val) {
|
||||
return val + "%";
|
||||
},
|
||||
offsetY: -20,
|
||||
style: {
|
||||
fontSize: "12px",
|
||||
colors: ["#304758"],
|
||||
},
|
||||
},
|
||||
|
||||
xaxis: {
|
||||
categories: [
|
||||
"Jan",
|
||||
"Feb",
|
||||
"Mar",
|
||||
"Apr",
|
||||
"May",
|
||||
"Jun",
|
||||
"Jul",
|
||||
"Aug",
|
||||
"Sep",
|
||||
"Oct",
|
||||
"Nov",
|
||||
"Dec",
|
||||
],
|
||||
position: "top",
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
crosshairs: {
|
||||
fill: {
|
||||
type: "gradient",
|
||||
gradient: {
|
||||
colorFrom: "#D8E3F0",
|
||||
colorTo: "#BED1E6",
|
||||
stops: [0, 100],
|
||||
opacityFrom: 0.4,
|
||||
opacityTo: 0.5,
|
||||
},
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
enabled: true,
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
labels: {
|
||||
show: false,
|
||||
formatter: function (val) {
|
||||
return val + "%";
|
||||
},
|
||||
},
|
||||
},
|
||||
title: {
|
||||
text: "Monthly Inflation in Argentina, 2002",
|
||||
floating: true,
|
||||
offsetY: 330,
|
||||
align: "center",
|
||||
style: {
|
||||
color: "#444",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.getBodyHeight();
|
||||
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;
|
||||
if (view == "donut") {
|
||||
this.getDataDonut();
|
||||
} else {
|
||||
//this.getDataBar();
|
||||
}
|
||||
},
|
||||
getDataDonut() {
|
||||
this.chartOptions1 = {
|
||||
labels: ["Team A", "Team B", "Team C", "Team D", "Team E"],
|
||||
chart: {
|
||||
id: "apexchart1",
|
||||
type: "donut",
|
||||
},
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 480,
|
||||
options: {
|
||||
chart: {
|
||||
width: 200,
|
||||
},
|
||||
legend: {
|
||||
position: "bottom",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
this.series1 = [44, 55, 41, 17, 15];
|
||||
},
|
||||
getDataBar() {
|
||||
this.chartOptions2 = {
|
||||
chart: {
|
||||
id: "apexchart2",
|
||||
type: "bar",
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 10,
|
||||
dataLabels: {
|
||||
position: "top", // top, center, bottom
|
||||
},
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
formatter: function (val) {
|
||||
return val + "%";
|
||||
},
|
||||
offsetY: -20,
|
||||
style: {
|
||||
fontSize: "12px",
|
||||
colors: ["#304758"],
|
||||
},
|
||||
},
|
||||
|
||||
xaxis: {
|
||||
categories: [
|
||||
"Jan",
|
||||
"Feb",
|
||||
"Mar",
|
||||
"Apr",
|
||||
"May",
|
||||
"Jun",
|
||||
"Jul",
|
||||
"Aug",
|
||||
"Sep",
|
||||
"Oct",
|
||||
"Nov",
|
||||
"Dec",
|
||||
],
|
||||
position: "top",
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
crosshairs: {
|
||||
fill: {
|
||||
type: "gradient",
|
||||
gradient: {
|
||||
colorFrom: "#D8E3F0",
|
||||
colorTo: "#BED1E6",
|
||||
stops: [0, 100],
|
||||
opacityFrom: 0.4,
|
||||
opacityTo: 0.5,
|
||||
},
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
enabled: true,
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
labels: {
|
||||
show: false,
|
||||
formatter: function (val) {
|
||||
return val + "%";
|
||||
},
|
||||
},
|
||||
},
|
||||
title: {
|
||||
text: "Monthly Inflation in Argentina, 2002",
|
||||
floating: true,
|
||||
offsetY: 330,
|
||||
align: "center",
|
||||
style: {
|
||||
color: "#444",
|
||||
},
|
||||
},
|
||||
};
|
||||
/*
|
||||
this.$apexcharts.exec("apexchart2", "updateSeries", [
|
||||
{
|
||||
name: "Inflation",
|
||||
data: [2.3, 3.1, 4.0, 10.1, 4.0, 3.6, 3.2, 2.3, 1.4, 0.8, 0.5, 0.2],
|
||||
},
|
||||
]);*/
|
||||
|
||||
/*this.series2 = [
|
||||
{
|
||||
name: "Inflation",
|
||||
data: [2.3, 3.1, 4.0, 10.1, 4.0, 3.6, 3.2, 2.3, 1.4, 0.8, 0.5, 0.2],
|
||||
},
|
||||
];*/
|
||||
},
|
||||
getData() {
|
||||
Api.cases
|
||||
.listTotalCases()
|
||||
.then((response) => {
|
||||
console.log("response");
|
||||
console.log(response);
|
||||
})
|
||||
.catch((response) => {
|
||||
console.log("error");
|
||||
console.log(response);
|
||||
});
|
||||
},
|
||||
},
|
||||
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-center {
|
||||
text-align: center;
|
||||
.vp-task-metrics-label {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.vp-padding-l10 {
|
||||
padding-left: 10px;
|
||||
.vp-width-p40 {
|
||||
width: 40%;
|
||||
}
|
||||
</style>
|
||||
|
||||
.vp-inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
|
||||
Reference in New Issue
Block a user