+
+
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({