Non-conformance Issues
Time Trendinfo @@ -234,6 +234,7 @@ export default { loopNo: null, looptraceId: null, loopFirstCases: null, + selectDurationTime: null, tooltip: { results: { value: 'This page will perform a conformance check based on the filtering results of the map.', @@ -373,20 +374,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, - } + // 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 + // this.setTimeChartData(result.timeTrend.chart, result.timeTrend.xMax, result.timeTrend.xMin, result.timeTrend.yMax); // 建立圖表 Time Chart.js return result; }, /** @@ -574,72 +575,101 @@ export default { // 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 -// } -// ] + data = [ + { + x: 434, + y: 16 + }, + { + x: 13365, + y: 19 + }, + { + x: 39228, + y: 22 + }, + { + x: 65091, + y: 18 + }, + { + x: 90954, + y: 14 + }, + { + x: 116817, + y: 21 + }, + { + x: 142681, + y: 18 + }, + { + x: 168544, + y: 16 + }, + { + x: 194407, + y: 20 + }, + { + x: 220270, + y: 10 + }, + { + x: 246133, + y: 29 + }, + { + x: 259065, + y: 29 + } +] + const start = this.selectDurationTime[0] - 1; + const end = this.selectDurationTime[1] - 1; + const inside = (ctx, value) => ctx.p0DataIndex >= start && ctx.p1DataIndex <= end ? value : undefined; + const outside = (ctx, value) => ctx.p0DataIndex < start || ctx.p1DataIndex > end ? value : undefined; + // console.log(xMax); // console.log(xMin); this.timeChartData = { - labels: [], + // labels: [], + // labels: [434, 13365, 39228, 65091, 90954, 116817, 142681, 168544, 194407, 220270, 246133, 259065], datasets: [ { - label: 'Case', + label: 'Conforming', data: data, - fill: 'start', - showLine: false, + // data: [16,19,22,18,14,21,18,16,20,10,29,29], + fill: true, + // showLine: false, tension: 0.4, backgroundColor: 'rgba(0,153,255)', pointRadius: 0, + pointHitRadius: 0, + spanGaps: true, + segment: { + // backgroundColor: ctx => inside(ctx, 'rgb(0,153,255)') || outside(ctx, 'rgb(203, 213, 225)'), + // backgroundColor: ctx => inside(ctx, 'rgb(245,40,145)') || outside(ctx, 'rgb(250, 196, 224)'), + backgroundColor: ctx => console.log(ctx), + }, + // 'cfm-primary': '#0099FF', + // 'cfm-secondary': '#FFAA44', x: 'x', y: 'y', - } + }, + // { + // label: 'Not Conforming', + // // data: data, + // data: [16,19,22,18,14,21,18,16,20,10,29,29], + // // fill: true, + // // showLine: false, + // tension: 0.4, + // backgroundColor: 'rgba(0,153,255)', + // pointRadius: 0, + // pointHitRadius: 0, + // // x: 'x', + // // y: 'y', + // }, ] }; @@ -655,24 +685,18 @@ export default { }, plugins: { legend: false, // 圖例 - filler: { - propagate: false - }, - title: false + tooltip: false, }, // animation: { // onComplete: e => { // this.resizeMask(e.chart); // } // }, - // interaction: { - // intersect: true, - // }, scales: { x: { type: 'time', ticks: { - autoSkip: false, + // autoSkip: false, maxRotation: 0, // 不旋轉 lable 0~50 color: '#334155', display: true, @@ -680,6 +704,11 @@ export default { grid: { display: false, // 隱藏 x 軸網格 }, + title: { + display: true, + text: 'Time', + color: 'rgba(100,116,139)', + }, }, y: { beginAtZero: true, // scale 包含 0 @@ -690,10 +719,16 @@ export default { }, grid: { color: 'rgba(100,116,139)', + drawTicks: false // 隱藏左側多的空間 }, border: { display: false, // 隱藏左側多出來的線 - } + }, + title: { + display: true, + text: 'Occurrences', + color: 'rgba(100,116,139)', + }, }, }, }; @@ -703,7 +738,9 @@ export default { this.$emitter.on('coverPlate', boolean => { this.isCoverPlate = boolean; }); - this.setTimeChartData(); + // this.$emitter.on('timeRangeMaxMin', data => this.selectDurationTime = data); + // this.selectDurationTime = { min: 86834, max: 176265}; + // this.setTimeChartData(); }, } diff --git a/src/components/Discover/Conformance/ConformanceSidebar.vue b/src/components/Discover/Conformance/ConformanceSidebar.vue index 59c3bfc..9f8a958 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 }; + this.$emitter.emit('timeRangeMaxMin', this.selectDurationTime); console.log('this.selectDurationTime', this.selectDurationTime); switch (this.selectedRuleType) {