diff --git a/resources/assets/js/api/Process.js b/resources/assets/js/api/Process.js index d2d84299d..b9e38c03f 100644 --- a/resources/assets/js/api/Process.js +++ b/resources/assets/js/api/Process.js @@ -27,5 +27,13 @@ export let process = { data: {}, keys: {} }); - } + }, + totalCasesByRange(dt) { + return Api.get({ + service: "TOTAL_CASES_BY_RANGE", + method: "get", + params: dt, + keys: {} + }); + } }; \ No newline at end of file diff --git a/resources/assets/js/api/Services.js b/resources/assets/js/api/Services.js index 53a760e7f..e61bf724b 100644 --- a/resources/assets/js/api/Services.js +++ b/resources/assets/js/api/Services.js @@ -70,6 +70,7 @@ DEBUG_STATUS: "/home/process-debug-status?processUid={prj_uid}", LIST_TOTAL_CASES: "/metrics/list-total-cases", TOTAL_CASES_BY_PROCESS:"/metrics/total-cases-by-process", + TOTAL_CASES_BY_RANGE:"/metrics/process-total-cases", CONFIG: "/home/config", GET_CONFIG: "/home/config/{id}/{name}", PAUSE_CASE: "/cases/{app_uid}/pause", diff --git a/resources/assets/js/components/utils/BreadCrumb.vue b/resources/assets/js/components/utils/BreadCrumb.vue index eccd91965..54790b5cf 100644 --- a/resources/assets/js/components/utils/BreadCrumb.vue +++ b/resources/assets/js/components/utils/BreadCrumb.vue @@ -1,6 +1,6 @@ @@ -22,7 +31,7 @@ import _ from "lodash"; export default { name: "BreadCrumb", - props: ["options"], + props: ["options", "settings"], data() { return {}; }, @@ -37,17 +46,42 @@ export default { options[i].classObject = { "breadcrumb-item": true, active: true, + "vp-inline-block": true, }; } else { options[i].classObject = { "breadcrumb-item": true, active: false, + "vp-inline-block": true, }; } } - console.log("aquii"); return options; }, + formatClass(item) { + return item.class; + }, }, }; + diff --git a/resources/assets/js/home/TaskMetrics/DrillDown.vue b/resources/assets/js/home/TaskMetrics/DrillDown.vue index 8bdb7e660..6270d0877 100644 --- a/resources/assets/js/home/TaskMetrics/DrillDown.vue +++ b/resources/assets/js/home/TaskMetrics/DrillDown.vue @@ -1,149 +1,157 @@ \ No newline at end of file diff --git a/resources/assets/js/home/TaskMetrics/TaskMetrics.vue b/resources/assets/js/home/TaskMetrics/TaskMetrics.vue index 28e0b4ceb..afff5e3fa 100644 --- a/resources/assets/js/home/TaskMetrics/TaskMetrics.vue +++ b/resources/assets/js/home/TaskMetrics/TaskMetrics.vue @@ -9,9 +9,13 @@
- +
- +
@@ -49,6 +53,9 @@ export default { changeLevel(lv) { this.level = lv; }, + updateVueChart(lv) { + this.$refs["pm-vue-chart"].onChangeLevel(lv); + }, }, }; diff --git a/resources/assets/js/home/TaskMetrics/VueChartLvOne.vue b/resources/assets/js/home/TaskMetrics/VueChartLvOne.vue index 32707b8bd..0e07069c9 100644 --- a/resources/assets/js/home/TaskMetrics/VueChartLvOne.vue +++ b/resources/assets/js/home/TaskMetrics/VueChartLvOne.vue @@ -3,7 +3,10 @@
Number of Tasks Status per Process
- +
- +
@@ -64,7 +72,7 @@ export default { BreadCrumb, ProcessPopover, }, - props: ["data"], + props: ["data", "breadCrumbs"], data() { let that = this; return { @@ -93,7 +101,6 @@ export default { events: { legendClick: function (chartContext, seriesIndex, config) { that.currentSelection = that.totalCases[seriesIndex]; - console.log("LEGENDDDDDDDDDDDDD"); that.$emit("updateDataLevel", { id: that.currentSelection["PRO_ID"], name: that.currentSelection["PRO_TITLE"], @@ -217,7 +224,6 @@ export default { //Update the labels this.dataProcesses = data; this.updateLabels(data); - console.log("aaaaaaaaaaaaaaaaa aaaaaaa"); }, /** * Change the options in TOTAL CASES BY PROCESS @@ -230,6 +236,7 @@ export default { category: option.id, caseList: this.data[0].id.toLowerCase(), processes: this.selectedProcesses, + top: this.top, }; Api.process .totalCasesByProcess(dt) @@ -257,35 +264,15 @@ export default { serie.push(el["TOTAL"]); labels.push(el["PRO_TITLE"]); }); - + this.$refs["LevelOneChart"].updateOptions({ labels: labels }); - + this.$apexcharts.exec("LevelOneChart", "updateSeries", [ { data: serie, }, ]); }, - dataBreadCrumbs(options) { - let res = [], - that = this; - res.push({ - label: "Start", - onClick() { - console.log("STARTTTTTTTTTT"); - that.$emit("onChangeLevel", 0); - }, - }); - _.each(options, (el) => { - res.push({ - label: el.id, - onClick() { - that.$emit("onChangeLevel", el.level); - }, - }); - }); - return res; - }, /** * Update list processes in chart */ @@ -316,7 +303,14 @@ export default { }); this.$refs["LevelOneChart"].updateOptions({ labels: labels }); }, - + /** + * Force update view when update level + */ + forceUpdateView() { + this.changeOption({ + id: 0, + }); + }, }, }; diff --git a/resources/assets/js/home/TaskMetrics/VueChartLvTwo.vue b/resources/assets/js/home/TaskMetrics/VueChartLvTwo.vue index 4d7211a1f..3177e9ad3 100644 --- a/resources/assets/js/home/TaskMetrics/VueChartLvTwo.vue +++ b/resources/assets/js/home/TaskMetrics/VueChartLvTwo.vue @@ -3,25 +3,53 @@
Number of Tasks Status per Process
- +
- +
- +
- - {{ $t("ID_DAY") }} - {{ - $t("ID_MONTH") - }} - {{ $t("ID_YEAR") }} - +
{ + that.formatDataRange(response.data); + }) + .catch((e) => { + console.error(err); + }); + } }, /** - * Get data from rest API + * Format response fromn 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 = []; + formatDataRange(data) { + let labels = [], + serie = []; + + this.dataCasesByRange = data; _.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"); - } + serie.push(el["TOTAL"]); + labels.push(el["dateGroup"]); }); - this.seriesDonut = s; - this.seriesBar = [ - { - data: s, + console.log("DRWAWWW"); + this.$refs["LevelTwoChart"].updateOptions({ + labels: labels, + title: { + text: this.data[0]["PRO_TITLE"], + align: "left", }, - ]; - 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", [ + }); + this.$apexcharts.exec("LevelTwoChart", "updateSeries", [ { - data: s, + name: this.data[0]["PRO_TITLE"], + data: serie, }, ]); }, - getCategories() { - let that = this; - console.log("jonas"); - Api.filters - .categories() - .then((response) => { - that.formatDataCategories(response.data); - }) - .catch((e) => { - console.error(err); - }); - }, - formatDataCategories(data) { - let array = []; - _.each(data, (el) => { - array.push({ name: el["CATEGORY_NAME"], id: el["CATEGORY_ID"] }); - }); - this.optionsCategory = array; - this.category = array[0]; - }, - changeOption(option) { - console.log("asda sdas d"); - let dt = { - category: option.id, - caseList: - this.data && this.data.dataLv0 - ? this.data.dataLv0["List Name"].toLowerCase() - : "inbox", - }; - - Api.process - .processTotalCases(dt) - .then((response) => { - console.log("asda sdas d11111111111111"); - console.log(response); - }) - .catch((e) => { - console.error(err); - }); - }, - dataBreadCrumbs(options) { - let res = [], - that = this; - res.push({ - label: "Start", - onClick() { - console.log("STARTTTTTTTTTT"); - that.$emit("onChangeLevel", 0); - }, - }); - _.each(options, (el) => { - res.push({ - label: el.name, - onClick() { - that.$emit("onChangeLevel", el.level); - }, - }); - }); - return res; - }, - generateDayWiseTimeSeries(baseval, count, yrange) { var i = 0; var series = []; diff --git a/resources/assets/js/home/TaskMetrics/VueChartLvZero.vue b/resources/assets/js/home/TaskMetrics/VueChartLvZero.vue index 410129984..f0d1862e3 100644 --- a/resources/assets/js/home/TaskMetrics/VueChartLvZero.vue +++ b/resources/assets/js/home/TaskMetrics/VueChartLvZero.vue @@ -2,6 +2,10 @@
Number of tasks per Task Status
+ import _ from "lodash"; import Api from "../../api/index"; +import BreadCrumb from "./../../components/utils/BreadCrumb.vue"; export default { name: "VueChartLvZero", mixins: [], - components: {}, - props: [], + components: { BreadCrumb }, + props: ["breadCrumbs"], data() { let that = this; return { @@ -161,7 +166,7 @@ export default { * Return the height for Vue Card View body */ getBodyHeight() { - this.width = window.innerHeight * 0.9; + this.width = window.innerHeight * 0.8; }, /** * Change view - donut/bar diff --git a/resources/assets/js/home/TaskMetrics/VueCharts.vue b/resources/assets/js/home/TaskMetrics/VueCharts.vue index d26c6df63..8aee19de9 100644 --- a/resources/assets/js/home/TaskMetrics/VueCharts.vue +++ b/resources/assets/js/home/TaskMetrics/VueCharts.vue @@ -3,17 +3,21 @@
@@ -36,8 +40,14 @@ export default { let that = this; return { level: 0, + key1: 1, data: [], - dataBreadCrumbs: [], + settingsBreadCrumbs: [ + { + class: "fas fa-info-circle", + onClick() {}, + }, + ], }; }, created() {}, @@ -53,7 +63,21 @@ export default { updateDataLevel(data) { this.data.push(data); this.level = data.level + 1; - this.$emit("onChangeLevel", this.level); + this.$emit("onChangeLevel", data.level + 1); + this.updateKey(); + }, + updateKey() { + switch (this.level) { + case 0: + break; + case 1: + this.key1++; + break; + case 2: + break; + case 3: + break; + } }, /** @@ -66,10 +90,45 @@ export default { }; }, onChangeLevel(lv) { - console.log("leveeeeeeeeeeeeeee"); + _.remove(this.data, function (n) { + return n.level >= lv; + }); this.level = lv; this.$emit("onChangeLevel", this.level); }, + dataBreadCrumbs() { + let res = [], + that = this, + index = 0; + _.each(this.data, (el) => { + if (index <= that.level) { + res.push({ + label: el.name, + onClick() { + that.onChangeLevel(el.level); + }, + }); + } + }); + res.push({ + label: "Select the drill option", + onClick() {}, + }); + switch (this.level) { + case 0: + return { + data: res, + settings: this.settingsBreadCrumbs, + }; + break; + default: + return { + data: res, + settings: this.settingsBreadCrumbs, + }; + break; + } + }, }, };