From ff2956714cbe8d5325a431741b6f0adb2e0005bc Mon Sep 17 00:00:00 2001 From: Henry Jordan Date: Fri, 30 Jul 2021 20:18:11 +0000 Subject: [PATCH 1/9] task metrics --- resources/assets/js/api/Cases.js | 11 + resources/assets/js/api/Services.js | 3 +- resources/assets/js/home/Home.vue | 4 +- resources/assets/js/home/Inbox/Todo.vue | 1 + .../assets/js/home/Inbox/defaultMixins.js | 3 + .../assets/js/home/TaskMetrics/DrillDown.vue | 151 ++++++++ .../js/home/TaskMetrics/TaskMetrics.vue | 57 +++ .../js/home/TaskMetrics/VueChartLvOne.vue | 339 ++++++++++++++++++ .../assets/js/home/TaskMetrics/VueCharts.vue | 37 ++ .../js/home/TaskMetrics/defaultMixins.js | 21 ++ resources/assets/js/home/main.js | 9 +- 11 files changed, 632 insertions(+), 4 deletions(-) create mode 100644 resources/assets/js/home/TaskMetrics/DrillDown.vue create mode 100644 resources/assets/js/home/TaskMetrics/TaskMetrics.vue create mode 100644 resources/assets/js/home/TaskMetrics/VueChartLvOne.vue create mode 100644 resources/assets/js/home/TaskMetrics/VueCharts.vue create mode 100644 resources/assets/js/home/TaskMetrics/defaultMixins.js diff --git a/resources/assets/js/api/Cases.js b/resources/assets/js/api/Cases.js index ea0003d1f..a64b57909 100644 --- a/resources/assets/js/api/Cases.js +++ b/resources/assets/js/api/Cases.js @@ -293,6 +293,17 @@ export let cases = { window.config.SYS_URI + `cases/debug_triggers?r=${r}&_dc=${dc}`); }, + /** + * Make a search request to the Api service + * @param {object} dt - filter parameters + */ + listTotalCases(dt) { + return Api.get({ + service: "LIST_TOTAL_CASES", + params: {}, + keys: {} + }) + }, }; export let casesHeader = { diff --git a/resources/assets/js/api/Services.js b/resources/assets/js/api/Services.js index 95bcdcedb..a5e857cee 100644 --- a/resources/assets/js/api/Services.js +++ b/resources/assets/js/api/Services.js @@ -67,5 +67,6 @@ USERS: "/home/users", TASKS: "/home/tasks", CATEGORIES: "/home/categories", - DEBUG_STATUS: "/home/process-debug-status?processUid={prj_uid}" + DEBUG_STATUS: "/home/process-debug-status?processUid={prj_uid}", + LIST_TOTAL_CASES: "/metrics/list-total-cases" }; \ No newline at end of file diff --git a/resources/assets/js/home/Home.vue b/resources/assets/js/home/Home.vue index ce8ab8d90..b3ad7bf01 100644 --- a/resources/assets/js/home/Home.vue +++ b/resources/assets/js/home/Home.vue @@ -44,6 +44,7 @@ import Todo from "./Inbox/Todo.vue"; import Paused from "./Paused/Paused.vue"; import Draft from "./Draft/Draft.vue"; import Unassigned from "./Unassigned/Unassigned.vue"; +import TaskMetrics from "./TaskMetrics/TaskMetrics.vue"; import BatchRouting from "./BatchRouting"; import CaseDetail from "./CaseDetail"; import XCase from "./XCase"; @@ -68,7 +69,8 @@ export default { Paused, Unassigned, CaseDetail, - LegacyFrame + LegacyFrame, + TaskMetrics }, data() { return { diff --git a/resources/assets/js/home/Inbox/Todo.vue b/resources/assets/js/home/Inbox/Todo.vue index 5ff1debd1..eb59216d2 100644 --- a/resources/assets/js/home/Inbox/Todo.vue +++ b/resources/assets/js/home/Inbox/Todo.vue @@ -1,6 +1,7 @@ @@ -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; + } + }, }, }; From 7b97de3ba759a4278fe36ff66c2f6ec06580a2b0 Mon Sep 17 00:00:00 2001 From: Henry Jordan Date: Mon, 16 Aug 2021 18:55:54 +0000 Subject: [PATCH 4/9] update package json --- package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 341f2492c..72a97e191 100644 --- a/package.json +++ b/package.json @@ -20,10 +20,10 @@ "vue-template-compiler": "^2.6.10" }, "dependencies": { - "apexcharts": "^3.27.3", "@fortawesome/fontawesome-svg-core": "^1.2.35", "@fortawesome/free-solid-svg-icons": "^5.15.3", "@fortawesome/vue-fontawesome": "^2.0.2", + "apexcharts": "^3.27.3", "axios": "^0.15.3", "bootstrap": "^4.5.3", "bootstrap-colorpicker": "^3.0.3", @@ -38,6 +38,7 @@ "idempotent-babel-polyfill": "^7.4.4", "jquery": "^3.1.1", "lodash": "^4.17.20", + "moment": "^2.29.1", "muuri": "^0.7.1", "npm-font-open-sans": "^1.1.0", "popper.js": "^1.12", From 95b5f7a3fc724c5d2d98ef09d7d456642116cab2 Mon Sep 17 00:00:00 2001 From: Henry Jordan Date: Tue, 17 Aug 2021 18:46:57 +0000 Subject: [PATCH 5/9] update Vue CHart --- .../js/home/TaskMetrics/VueChartLvThree.vue | 327 ++++++++++++++++++ .../js/home/TaskMetrics/VueChartLvTwo.vue | 38 +- .../assets/js/home/TaskMetrics/VueCharts.vue | 9 + 3 files changed, 355 insertions(+), 19 deletions(-) create mode 100644 resources/assets/js/home/TaskMetrics/VueChartLvThree.vue diff --git a/resources/assets/js/home/TaskMetrics/VueChartLvThree.vue b/resources/assets/js/home/TaskMetrics/VueChartLvThree.vue new file mode 100644 index 000000000..cca308532 --- /dev/null +++ b/resources/assets/js/home/TaskMetrics/VueChartLvThree.vue @@ -0,0 +1,327 @@ + + + + + \ No newline at end of file diff --git a/resources/assets/js/home/TaskMetrics/VueChartLvTwo.vue b/resources/assets/js/home/TaskMetrics/VueChartLvTwo.vue index 3177e9ad3..c0aab9fec 100644 --- a/resources/assets/js/home/TaskMetrics/VueChartLvTwo.vue +++ b/resources/assets/js/home/TaskMetrics/VueChartLvTwo.vue @@ -85,12 +85,6 @@ export default { ], dataCasesByRange: [], width: 0, - series: [ - { - name: "Process", - data: [], - }, - ], options: { chart: { type: "area", @@ -98,29 +92,35 @@ export default { enabled: false, }, id: "LevelTwoChart", + events: { + markerClick: function (event, chartContext, config) { + that.currentSelection = that.dataCasesByRange[config.seriesIndex]; + that.$emit("updateDataLevel", { + id: that.currentSelection["PRO_ID"], + name: that.currentSelection["PRO_TITLE"], + level: 2, + data: that.currentSelection, + }); + }, + }, }, dataLabels: { - enabled: true, + enabled: false, }, stroke: { - curve: "straight", + curve: "smooth", }, - - title: { - text: "", - align: "left", - }, - labels: [], xaxis: { type: "datetime", }, - yaxis: { - opposite: false, - }, - legend: { - horizontalAlign: "left", + tooltip: { + fixed: { + enabled: false, + position: "topRight", + }, }, }, + series: [], }; }, created() {}, diff --git a/resources/assets/js/home/TaskMetrics/VueCharts.vue b/resources/assets/js/home/TaskMetrics/VueCharts.vue index 8aee19de9..d3a5e0367 100644 --- a/resources/assets/js/home/TaskMetrics/VueCharts.vue +++ b/resources/assets/js/home/TaskMetrics/VueCharts.vue @@ -17,6 +17,13 @@ v-show="level === 2" :data="data" @onChangeLevel="onChangeLevel" + @updateDataLevel="updateDataLevel" + :breadCrumbs="dataBreadCrumbs()" + /> +
@@ -26,6 +33,7 @@ import VueChartLvZero from "./VueChartLvZero.vue"; import VueChartLvOne from "./VueChartLvOne.vue"; import VueChartLvTwo from "./VueChartLvTwo.vue"; +import VueChartLvThree from "./VueChartLvThree.vue"; export default { name: "VueCharts", @@ -34,6 +42,7 @@ export default { VueChartLvZero, VueChartLvOne, VueChartLvTwo, + VueChartLvThree, }, props: [], data() { From 4732ffc6b3d7c4843c8a12f34c52fe96820e35a0 Mon Sep 17 00:00:00 2001 From: Henry Jordan Date: Thu, 26 Aug 2021 20:33:59 +0000 Subject: [PATCH 6/9] last updates --- resources/assets/js/api/Process.js | 10 +- resources/assets/js/api/Services.js | 1 + .../assets/js/components/utils/BreadCrumb.vue | 7 +- resources/assets/js/home/Home.vue | 11 +- resources/assets/js/home/Inbox/Inbox.vue | 1 - .../assets/js/home/Inbox/defaultMixins.js | 3 - .../js/home/TaskMetrics/VueChartLvOne.vue | 12 +- .../js/home/TaskMetrics/VueChartLvThree.vue | 468 ++++++++++++------ .../js/home/TaskMetrics/VueChartLvTwo.vue | 11 +- .../js/home/TaskMetrics/VueChartLvZero.vue | 12 +- .../assets/js/home/TaskMetrics/VueCharts.vue | 8 +- .../assets/js/home/modal/ModalClaimCase.vue | 7 +- .../assets/js/home/modal/ModalUnpauseCase.vue | 4 +- .../translations/english/processmaker.en.po | 27 +- workflow/engine/data/mysql/insert.sql | 4 + 15 files changed, 406 insertions(+), 180 deletions(-) diff --git a/resources/assets/js/api/Process.js b/resources/assets/js/api/Process.js index b9e38c03f..987d4b85c 100644 --- a/resources/assets/js/api/Process.js +++ b/resources/assets/js/api/Process.js @@ -35,5 +35,13 @@ export let process = { params: dt, keys: {} }); - } + }, + totalCasesByRisk(dt) { + return Api.get({ + service: "CASES_RISK", + 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 e61bf724b..0ba4e2c83 100644 --- a/resources/assets/js/api/Services.js +++ b/resources/assets/js/api/Services.js @@ -71,6 +71,7 @@ LIST_TOTAL_CASES: "/metrics/list-total-cases", TOTAL_CASES_BY_PROCESS:"/metrics/total-cases-by-process", TOTAL_CASES_BY_RANGE:"/metrics/process-total-cases", + CASES_RISK:"/metrics/cases-risk", 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 54790b5cf..c8181a131 100644 --- a/resources/assets/js/components/utils/BreadCrumb.vue +++ b/resources/assets/js/components/utils/BreadCrumb.vue @@ -19,7 +19,12 @@ :key="item.id" class="vp-bread-crumbs-settings vp-float-right vp-inline-block" > - +
diff --git a/resources/assets/js/home/Home.vue b/resources/assets/js/home/Home.vue index 710aa8cb4..98d9d63d5 100644 --- a/resources/assets/js/home/Home.vue +++ b/resources/assets/js/home/Home.vue @@ -120,9 +120,15 @@ export default { parseInt(window.config.FORMATS.casesListRefreshTime) * 1000 ); // adding eventBus listener - eventBus.$on('sort-menu', (data) => { + eventBus.$on('sort-menu', (data) => { that.updateUserSettings('customCasesList', data); }); + eventBus.$on('home-update-page', (data) => { + that.onUpdatePage(data); + }); + eventBus.$on('home-update-datacase', (data) => { + that.onUpdateDataCase(data); + }); }, methods: { /** @@ -242,6 +248,7 @@ export default { mappingMenu(data) { var i, j, + that = this, newData = data, auxId; for (i = 0; i < data.length; i += 1) { @@ -263,7 +270,7 @@ export default { hiddenOnCollapse: data[i].hiddenOnCollapse, icon: 'pie-chart-fill', onClick: function (item) { - // TODO click evet handler + that.onUpdatePage("task-metrics"); } } } diff --git a/resources/assets/js/home/Inbox/Inbox.vue b/resources/assets/js/home/Inbox/Inbox.vue index 8faa078d5..a8c3ae1f2 100644 --- a/resources/assets/js/home/Inbox/Inbox.vue +++ b/resources/assets/js/home/Inbox/Inbox.vue @@ -1,7 +1,6 @@ @@ -68,20 +110,35 @@ import Api from "../../api/index"; import Multiselect from "vue-multiselect"; import BreadCrumb from "../../components/utils/BreadCrumb.vue"; import moment from "moment"; +import ModalUnpauseCase from "../modal/ModalUnpauseCase.vue"; +import ModalClaimCase from "../modal/ModalClaimCase.vue"; + export default { name: "VueChartLvThree", mixins: [], components: { Multiselect, BreadCrumb, + ModalUnpauseCase, + ModalClaimCase, }, props: ["data", "breadCrumbs"], data() { let that = this; return { + currentSelection: null, dateFrom: "", dateTo: "", - size: "all", + dateNow: "", + size: { name: this.$t("ID_ALL"), id: "all" }, + riskType: "ON_TIME", + settingsBreadcrumbs: [ + { + class: "fas fa-info-circle", + tooltip: this.$t("ID_TASK_RISK_LEVEL3_INFO"), + onClick() {}, + }, + ], sizeOptions: [ { name: this.$t("ID_ALL"), id: "all" }, { name: "5", id: "5" }, @@ -89,137 +146,48 @@ export default { { name: "15", id: "15" }, { name: "20", id: "20" }, ], - dataCasesByRange: [], + dataCasesByRisk: [], width: 0, - series: [ - { - name: "SAMPLE A", - data: [ - [16.4, 5.4], - [21.7, 2], - [25.4, 3], - [19, 2], - [10.9, 1], - [13.6, 3.2], - [10.9, 7.4], - [10.9, 0], - [10.9, 8.2], - [16.4, 0], - [16.4, 1.8], - [13.6, 0.3], - [13.6, 0], - [29.9, 0], - [27.1, 2.3], - [16.4, 0], - [13.6, 3.7], - [10.9, 5.2], - [16.4, 6.5], - [10.9, 0], - [24.5, 7.1], - [10.9, 0], - [8.1, 4.7], - [19, 0], - [21.7, 1.8], - [27.1, 0], - [24.5, 0], - [27.1, 0], - [29.9, 1.5], - [27.1, 0.8], - [22.1, 2], - ], - }, - { - name: "SAMPLE B", - data: [ - [36.4, 13.4], - [1.7, 11], - [5.4, 8], - [9, 17], - [1.9, 4], - [3.6, 12.2], - [1.9, 14.4], - [1.9, 9], - [1.9, 13.2], - [1.4, 7], - [6.4, 8.8], - [3.6, 4.3], - [1.6, 10], - [9.9, 2], - [7.1, 15], - [1.4, 0], - [3.6, 13.7], - [1.9, 15.2], - [6.4, 16.5], - [0.9, 10], - [4.5, 17.1], - [10.9, 10], - [0.1, 14.7], - [9, 10], - [12.7, 11.8], - [2.1, 10], - [2.5, 10], - [27.1, 10], - [2.9, 11.5], - [7.1, 10.8], - [2.1, 12], - ], - }, - { - name: "SAMPLE C", - data: [ - [21.7, 3], - [23.6, 3.5], - [24.6, 3], - [29.9, 3], - [21.7, 20], - [23, 2], - [10.9, 3], - [28, 4], - [27.1, 0.3], - [16.4, 4], - [13.6, 0], - [19, 5], - [22.4, 3], - [24.5, 3], - [32.6, 3], - [27.1, 4], - [29.6, 6], - [31.6, 8], - [21.6, 5], - [20.9, 4], - [22.4, 0], - [32.6, 10.3], - [29.7, 20.8], - [24.5, 0.8], - [21.4, 0], - [21.7, 6.9], - [28.6, 7.7], - [15.4, 0], - [18.1, 0], - [33.4, 0], - [16.4, 0], - ], - }, - ], + series: [], options: { chart: { height: 350, - type: "scatter", + type: "bubble", zoom: { enabled: true, type: "xy", }, - }, - xaxis: { - tickAmount: 10, - labels: { - formatter: function (val) { - return parseFloat(val).toFixed(1); + id: "LevelThreeChart", + events: { + markerClick: function (event, chartContext, config) { + that.currentSelection = that.dataCasesByRisk[config.seriesIndex]; + that.onClickCaseMarker(that.currentSelection); }, }, }, + legend: { + show: false, + }, + dataLabels: { + enabled: true, + formatter: function (val, opt) { + if (that.dataCasesByRisk.length > 0) { + return that.dataCasesByRisk[opt["seriesIndex"]]["number_case"]; + } + return ""; + }, + offsetX: 0, + }, + xaxis: { + type: "datetime", + }, yaxis: { - tickAmount: 7, + tickAmount: 1, + }, + tooltip: { + custom: function ({ series, seriesIndex, dataPointIndex, w }) { + return that.customTooltip(series, seriesIndex, dataPointIndex, w); + }, }, }, }; @@ -237,7 +205,7 @@ export default { * Return the height for Vue Card View body */ getBodyHeight() { - this.width = window.innerHeight; + this.width = window.innerHeight * 0.95; }, /** * Change datepickers or radio button @@ -245,16 +213,18 @@ export default { changeOption() { let that = this, dt; - if (this.dateFrom && this.dateTo && this.period) { + if (this.dateFrom && this.dateTo) { dt = { - processId: this.data[1].id, + process: this.data[1].id, caseList: this.data[0].id.toLowerCase(), dateFrom: moment(this.dateFrom).format("DD/MM/YYYY"), dateTo: moment(this.dateTo).format("DD/MM/YYYY"), - groupBy: this.period, + riskStatus: this.riskType, }; + this.size.id != "all" ? (dt["topCases"] = this.size.id) : null; + this.dateNow = moment().format("DD/MM/YYYY h:mm:ss a"); Api.process - .totalCasesByRange(dt) + .totalCasesByRisk(dt) .then((response) => { that.formatDataRange(response.data); }) @@ -267,42 +237,172 @@ export default { * Format response fromn API */ formatDataRange(data) { - let labels = [], + let that = this, serie = []; - - this.dataCasesByRange = data; + this.dataCasesByRisk = data; _.each(data, (el) => { - serie.push(el["TOTAL"]); - labels.push(el["dateGroup"]); + //Format the response to risk type Overdue/At risk/ On time + switch (that.riskType) { + case "OVERDUE": + serie.push({ + name: el["number_case"].toString(), + data: [ + [moment(el["due_date"]).toDate().getTime(), el["days"], 20], + ], + }); + break; + case "AT_RISK": + serie.push({ + name: el["number_case"].toString(), + data: [ + [moment(el["delegated"]).toDate().getTime(), -el["days"], 20], + ], + }); + break; + case "ON_TIME": + serie.push({ + name: el["number_case"].toString(), + data: [ + [moment(el["delegated"]).toDate().getTime(), -el["days"], 20], + ], + }); + break; + } }); - this.$refs["LevelTwoChart"].updateOptions({ - labels: labels, - title: { - text: this.data[0]["PRO_TITLE"], - align: "left", - }, - }); - this.$apexcharts.exec("LevelTwoChart", "updateSeries", [ - { - name: this.data[0]["PRO_TITLE"], - data: serie, - }, - ]); - }, - generateDayWiseTimeSeries(baseval, count, yrange) { - var i = 0; - var series = []; - while (i < count) { - var y = - Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + - yrange.min; - series.push([baseval, y]); - baseval += 86400000; - i++; + this.updateApexchartAxis(); + if (this.data[0].id.toLowerCase() == "draft") { + this.series = []; // Draft is empty + } else { + this.series = serie; } - console.log(series); - return series; + }, + updateApexchartAxis() { + switch (this.riskType) { + case "OVERDUE": + this.$refs["LevelThreeChart"].updateOptions({ + yaxis: { + min: 0, + }, + title: { + text: "Overdue days", + }, + }); + break; + case "AT_RISK": + this.$refs["LevelThreeChart"].updateOptions({ + yaxis: { + max: 0, + }, + title: { + text: "Days before being Overdue", + }, + }); + break; + case "ON_TIME": + this.$refs["LevelThreeChart"].updateOptions({ + yaxis: { + max: 0, + }, + title: { + text: "Days before being At-Risk", + }, + }); + break; + } + }, + customTooltip(series, seriesIndex, dataPointIndex, w) { + let obj = this.dataCasesByRisk[seriesIndex]; + return `
+
+ ${"Number Case"} : ${obj["number_case"]} +
+
+
+
+ + Delegated : ${ + obj["delegated"] + } +
+
+ + At Risk : ${ + obj["at_risk"] + } +
+
+ + Due Date : ${ + obj["due_date"] + } +
+
+
+
`; + }, + /** + * Open selected cases in the inbox + * + * @param {object} item + */ + openCase(item) { + this.$parent.$parent.$emit("onUpdateDataCase", { + APP_UID: item.APP_UID, + DEL_INDEX: item.DEL_INDEX, + PRO_UID: item.PRO_UID, + TAS_UID: item.TAS_UID, + ACTION: "todo", + }); + this.$parent.$parent.$emit("onUpdatePage", "XCase"); + }, + onClickCaseMarker(selection) { + let process = this.data[1].id, + caseList = this.data[0].id.toLowerCase(); + switch (caseList) { + case "inbox": + case "draft": + this.openCase({ + APP_UID: selection["app_uid"], + DEL_INDEX: selection["del_index"], + PRO_UID: process, + TAS_UID: selection["tas_uid"], + }); + break; + case "paused": + this.showModalUnpauseCase({ + APP_UID: selection["app_uid"], + DEL_INDEX: selection["del_index"], + PRO_UID: process, + TAS_UID: selection["tas_uid"], + }); + break; + case "unassigned": + this.showModalClaimCase({ + APP_UID: selection["app_uid"], + DEL_INDEX: selection["del_index"], + PRO_UID: process, + TAS_UID: selection["tas_uid"], + }); + break; + } + }, + showModalUnpauseCase(item) { + this.$refs["modal-unpause-case"].data = item; + this.$refs["modal-unpause-case"].show(); + }, + /** + * Claim case + * @param {object} item + */ + showModalClaimCase(item) { + let that = this; + api.cases.open(_.extend({ ACTION: "unassigned" }, item)).then(() => { + api.cases.cases_open(_.extend({ ACTION: "todo" }, item)).then(() => { + that.$refs["modal-claim-case"].data = item; + that.$refs["modal-claim-case"].show(); + }); + }); }, }, }; @@ -323,5 +423,57 @@ export default { .vp-padding-l20 { padding-left: 20px; } + +.vp-width-p100 { + width: 100%; +} + +.vp-text-align-center { + text-align: center; +} + +.vp-btn-success { + color: #fff; + background-color: #368b48; + border-color: #368b48; +} +.vp-btn-success:hover { + color: #fff; + background-color: #255a30; + border-color: #368b48; +} + +.vp-btn-warning { + color: #fff; + background-color: #c99e11; + border-color: #a1831d; +} +.vp-btn-warning:hover { + color: #fff; + background-color: #886c0e; + border-color: #a1831d; +} +.vp-btn-danger { + color: #fff; + background-color: #b63b32; + border-color: #b63b32; +} + +.vp-btn-danger:hover { + color: #fff; + background-color: #832923; + border-color: #b63b32; +} + +.vp-form-label { + display: inline-block; + font-family: Helvetica, Arial, sans-serif; + text-anchor: start; + font-size: 14px; + font-weight: 900; + fill: rgb(15 17 18); + margin-top: 0.5rem; + color: #7d7f93; +} \ No newline at end of file diff --git a/resources/assets/js/home/TaskMetrics/VueChartLvTwo.vue b/resources/assets/js/home/TaskMetrics/VueChartLvTwo.vue index c0aab9fec..00e5a3914 100644 --- a/resources/assets/js/home/TaskMetrics/VueChartLvTwo.vue +++ b/resources/assets/js/home/TaskMetrics/VueChartLvTwo.vue @@ -1,11 +1,11 @@