From 7ee1dac5b1429523e7485fc55a617f56d29e3b0d Mon Sep 17 00:00:00 2001 From: chiayin Date: Thu, 31 Aug 2023 15:15:08 +0800 Subject: [PATCH] Conformance: Time Trend Chart Scales-y Option done. --- .../Conformance/ConformanceResults.vue | 161 +++++++++++++++++- .../Conformance/ConformanceSidebar.vue | 1 + src/module/setChartData.js | 10 +- 3 files changed, 165 insertions(+), 7 deletions(-) diff --git a/src/components/Discover/Conformance/ConformanceResults.vue b/src/components/Discover/Conformance/ConformanceResults.vue index 53bfc00..70b3cf0 100644 --- a/src/components/Discover/Conformance/ConformanceResults.vue +++ b/src/components/Discover/Conformance/ConformanceResults.vue @@ -132,11 +132,13 @@

Non-conformance Issues

-
+
+

Time Trendinfo - 3.89K/38.9K + {{ data.timeTrend.not_conforming }}/{{ data.timeTrend.total }}

+
@@ -210,7 +212,12 @@ export default { tasks: null, }, loops: null, - issues: 'reset' + issues: 'reset', + timeTrend: { + not_conforming: '--', + total: '--', + chart: {}, + }, }, isCoverPlate: false, issuesModal: false, @@ -219,6 +226,8 @@ export default { rateChartOptions: null, casesChartData: null, casesChartOptions: null, + timeChartData: null, + timeChartOptions: null, issuesNo: null, traceId: null, firstCases: null, @@ -334,7 +343,7 @@ export default { charts: { rate: { rate: rate, - data: setLineChartData(data.charts.rate.data, data.charts.rate.x_axis.max, data.charts.rate.x_axis.min), + data: setLineChartData(data.charts.rate.data, data.charts.rate.x_axis.max, data.charts.rate.x_axis.min, true), xMax: getMoment(data.charts.rate.x_axis.max).format('YYYY/M/D'), xMin: getMoment(data.charts.rate.x_axis.min).format('YYYY/M/D'), }, @@ -364,9 +373,20 @@ export default { }, loops: isNullLoops(data.loops), issues: isNullIsssue(data.issues), + timeTrend: { + not_conforming: getNumberLabel(data.counts.not_conforming), + total: getNumberLabel(sum), + chart: setLineChartData(data.charts.time.data, data.charts.time.x_axis.max, data.charts.time.x_axis.min, false, data.charts.time.y_axis.max, data.charts.time.y_axis.min), + xMax: data.charts.time.x_axis.max, + xMin: data.charts.time.x_axis.min, + yMax: data.charts.time.y_axis.max, + yMin: data.charts.time.y_axis.min, + } }; + this.setRateChartData(result.charts.rate.data); // 建立圖表 Rate Chart.js this.setCasesChartData(result.charts.cases.data.conforming, result.charts.cases.data.not_conforming, data.charts.cases.x_axis.max, data.charts.cases.x_axis.min); // 建立圖表 Cases Chart.js + this.setTimeChartData(result.timeTrend.chart, result.timeTrend.xMax, result.timeTrend.xMin, result.timeTrend.yMax); // 建立圖表 Time Chart.js return result; }, /** @@ -546,11 +566,144 @@ export default { }, }; }, + /** + * time chart + */ + setTimeChartData(data, xMax, xMin, yMax, yMin) { + console.log(data); + // let max = yMax * 1.1; + let max = 29 * 1.1; + +// data = [ +// { +// "x": 434, +// "y": 16 +// }, +// { +// "x": 13365.55, +// "y": 19 +// }, +// { +// "x": 39228.649999999994, +// "y": 22 +// }, +// { +// "x": 65091.75, +// "y": 18 +// }, +// { +// "x": 90954.84999999999, +// "y": 14 +// }, +// { +// "x": 116817.95, +// "y": 21 +// }, +// { +// "x": 142681.05, +// "y": 18 +// }, +// { +// "x": 168544.15, +// "y": 16 +// }, +// { +// "x": 194407.25, +// "y": 20 +// }, +// { +// "x": 220270.34999999998, +// "y": 10 +// }, +// { +// "x": 246133.44999999998, +// "y": 29 +// }, +// { +// "x": 259065, +// "y": 29 +// } +// ] + // console.log(xMax); + // console.log(xMin); + this.timeChartData = { + labels: [], + datasets: [ + { + label: 'Case', + data: data, + fill: 'start', + showLine: false, + tension: 0.4, + backgroundColor: 'rgba(0,153,255)', + pointRadius: 0, + x: 'x', + y: 'y', + } + ] + }; + + this.timeChartOptions = { + responsive: true, + maintainAspectRatio: false, + layout: { + padding: { + top: 16, + left: 8, + right: 8, + } + }, + plugins: { + legend: false, // 圖例 + filler: { + propagate: false + }, + title: false + }, + // animation: { + // onComplete: e => { + // this.resizeMask(e.chart); + // } + // }, + // interaction: { + // intersect: true, + // }, + scales: { + x: { + type: 'time', + ticks: { + autoSkip: false, + maxRotation: 0, // 不旋轉 lable 0~50 + color: '#334155', + display: true, + }, + grid: { + display: false, // 隱藏 x 軸網格 + }, + }, + y: { + beginAtZero: true, // scale 包含 0 + max: max, + ticks: { // 設定間隔數值 + display: false, // 隱藏數值，只顯示格線 + stepSize: max / 4, + }, + grid: { + color: 'rgba(100,116,139)', + }, + border: { + display: false, // 隱藏左側多出來的線 + } + }, + }, + }; + }, }, created() { this.$emitter.on('coverPlate', boolean => { this.isCoverPlate = boolean; }); + this.setTimeChartData(); }, } diff --git a/src/components/Discover/Conformance/ConformanceSidebar.vue b/src/components/Discover/Conformance/ConformanceSidebar.vue index 79fac6b..59c3bfc 100644 --- a/src/components/Discover/Conformance/ConformanceSidebar.vue +++ b/src/components/Discover/Conformance/ConformanceSidebar.vue @@ -235,6 +235,7 @@ export default { min: this.selectTimeRangeMin, max: this.selectTimeRangeMax }; + console.log('this.selectDurationTime', this.selectDurationTime); switch (this.selectedRuleType) { case 'Have activity': // Rule Type 選 Have activity 的行為 diff --git a/src/module/setChartData.js b/src/module/setChartData.js index e516d37..ff81691 100644 --- a/src/module/setChartData.js +++ b/src/module/setChartData.js @@ -5,9 +5,11 @@ import getMoment from 'moment'; * @param {array} baseData 後端給的 10 個時間點 * @param {number} xMax 2022-05-23T18:00:00 * @param {number} xMin 2022-05-23T08:00:00 + * @param {number} yMax case + * @param {number} yMin case * @returns {array} 可直接套入 chart.js 的 data */ -export function setLineChartData(baseData, xMax, xMin) { +export function setLineChartData(baseData, xMax, xMin, isPercent, yMax, yMin) { let data = baseData.map(i=>({x:i.x,y:i.y})) // y 軸斜率計算請參考 ./public/timeFrameSlope 的圖 // x 值為 0 ~ 11, @@ -23,7 +25,8 @@ export function setLineChartData(baseData, xMax, xMin) { let e = 2; let f = baseData[1].y; b = (e*d - a*d - f*a - f*c) / (e - c - a) - b = b > 1 ? 1 : b < 0 ? 0 : b; + if(isPercent) b = b >= 1 ? 1 : b <= 0 ? 0 : b; + else b = b >= yMax ? yMax : b <= yMin ? yMin : b; // y 軸最大值 let ma = 9; @@ -33,7 +36,8 @@ export function setLineChartData(baseData, xMax, xMin) { let me = 11; let mf; mf = (mb*me - mb*mc -md*me + md*ma) / (ma - mc); - mf = mf > 1 ? 1 : mf < 0 ? 0 : mf; + if(isPercent) mf = mf >= 1 ? 1 : mf <= 0 ? 0 : mf; + else mf = mf >= yMax ? yMax : mf <= yMin ? yMin : mf; // 添加最小值 data.unshift({