Conformance: Time Trend Chart incomplete.
This commit is contained in:
chiayin
@@ -132,7 +132,7 @@
|
|||||||
<p class="h2 text-base">Non-conformance Issues</p>
|
<p class="h2 text-base">Non-conformance Issues</p>
|
||||||
<div class="flex gap-4 w-full">
|
<div class="flex gap-4 w-full">
|
||||||
<!-- Issues chart -->
|
<!-- Issues chart -->
|
||||||
<div class="border rounded border-neutral-300 p-2 bg-neutral-10 w-full" >
|
<div v-if="null" class="border rounded border-neutral-300 p-2 bg-neutral-10 w-full" >
|
||||||
<!-- v-if="data.timeTrend.chart == null" -->
|
<!-- v-if="data.timeTrend.chart == null" -->
|
||||||
<p class="h2 pl-2 flex justify-between items-center">
|
<p class="h2 pl-2 flex justify-between items-center">
|
||||||
<span>Time Trend<span class="material-symbols-outlined text-sm align-middle ml-2">info</span></span>
|
<span>Time Trend<span class="material-symbols-outlined text-sm align-middle ml-2">info</span></span>
|
||||||
@@ -234,6 +234,7 @@ export default {
|
|||||||
loopNo: null,
|
loopNo: null,
|
||||||
looptraceId: null,
|
looptraceId: null,
|
||||||
loopFirstCases: null,
|
loopFirstCases: null,
|
||||||
|
selectDurationTime: null,
|
||||||
tooltip: {
|
tooltip: {
|
||||||
results: {
|
results: {
|
||||||
value: 'This page will perform a conformance check based on the filtering results of the map.',
|
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),
|
loops: isNullLoops(data.loops),
|
||||||
issues: isNullIsssue(data.issues),
|
issues: isNullIsssue(data.issues),
|
||||||
timeTrend: {
|
// timeTrend: {
|
||||||
not_conforming: getNumberLabel(data.counts.not_conforming),
|
// not_conforming: getNumberLabel(data.counts.not_conforming),
|
||||||
total: getNumberLabel(sum),
|
// 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),
|
// 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,
|
// xMax: data.charts.time.x_axis.max,
|
||||||
xMin: data.charts.time.x_axis.min,
|
// xMin: data.charts.time.x_axis.min,
|
||||||
yMax: data.charts.time.y_axis.max,
|
// yMax: data.charts.time.y_axis.max,
|
||||||
yMin: data.charts.time.y_axis.min,
|
// yMin: data.charts.time.y_axis.min,
|
||||||
}
|
// }
|
||||||
};
|
};
|
||||||
|
|
||||||
this.setRateChartData(result.charts.rate.data); // 建立圖表 Rate Chart.js
|
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.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;
|
return result;
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
@@ -574,72 +575,101 @@ export default {
|
|||||||
// let max = yMax * 1.1;
|
// let max = yMax * 1.1;
|
||||||
let max = 29 * 1.1;
|
let max = 29 * 1.1;
|
||||||
|
|
||||||
// data = [
|
data = [
|
||||||
// {
|
{
|
||||||
// "x": 434,
|
x: 434,
|
||||||
// "y": 16
|
y: 16
|
||||||
// },
|
},
|
||||||
// {
|
{
|
||||||
// "x": 13365.55,
|
x: 13365,
|
||||||
// "y": 19
|
y: 19
|
||||||
// },
|
},
|
||||||
// {
|
{
|
||||||
// "x": 39228.649999999994,
|
x: 39228,
|
||||||
// "y": 22
|
y: 22
|
||||||
// },
|
},
|
||||||
// {
|
{
|
||||||
// "x": 65091.75,
|
x: 65091,
|
||||||
// "y": 18
|
y: 18
|
||||||
// },
|
},
|
||||||
// {
|
{
|
||||||
// "x": 90954.84999999999,
|
x: 90954,
|
||||||
// "y": 14
|
y: 14
|
||||||
// },
|
},
|
||||||
// {
|
{
|
||||||
// "x": 116817.95,
|
x: 116817,
|
||||||
// "y": 21
|
y: 21
|
||||||
// },
|
},
|
||||||
// {
|
{
|
||||||
// "x": 142681.05,
|
x: 142681,
|
||||||
// "y": 18
|
y: 18
|
||||||
// },
|
},
|
||||||
// {
|
{
|
||||||
// "x": 168544.15,
|
x: 168544,
|
||||||
// "y": 16
|
y: 16
|
||||||
// },
|
},
|
||||||
// {
|
{
|
||||||
// "x": 194407.25,
|
x: 194407,
|
||||||
// "y": 20
|
y: 20
|
||||||
// },
|
},
|
||||||
// {
|
{
|
||||||
// "x": 220270.34999999998,
|
x: 220270,
|
||||||
// "y": 10
|
y: 10
|
||||||
// },
|
},
|
||||||
// {
|
{
|
||||||
// "x": 246133.44999999998,
|
x: 246133,
|
||||||
// "y": 29
|
y: 29
|
||||||
// },
|
},
|
||||||
// {
|
{
|
||||||
// "x": 259065,
|
x: 259065,
|
||||||
// "y": 29
|
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(xMax);
|
||||||
// console.log(xMin);
|
// console.log(xMin);
|
||||||
this.timeChartData = {
|
this.timeChartData = {
|
||||||
labels: [],
|
// labels: [],
|
||||||
|
// labels: [434, 13365, 39228, 65091, 90954, 116817, 142681, 168544, 194407, 220270, 246133, 259065],
|
||||||
datasets: [
|
datasets: [
|
||||||
{
|
{
|
||||||
label: 'Case',
|
label: 'Conforming',
|
||||||
data: data,
|
data: data,
|
||||||
fill: 'start',
|
// data: [16,19,22,18,14,21,18,16,20,10,29,29],
|
||||||
showLine: false,
|
fill: true,
|
||||||
|
// showLine: false,
|
||||||
tension: 0.4,
|
tension: 0.4,
|
||||||
backgroundColor: 'rgba(0,153,255)',
|
backgroundColor: 'rgba(0,153,255)',
|
||||||
pointRadius: 0,
|
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',
|
x: 'x',
|
||||||
y: 'y',
|
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: {
|
plugins: {
|
||||||
legend: false, // 圖例
|
legend: false, // 圖例
|
||||||
filler: {
|
tooltip: false,
|
||||||
propagate: false
|
|
||||||
},
|
|
||||||
title: false
|
|
||||||
},
|
},
|
||||||
// animation: {
|
// animation: {
|
||||||
// onComplete: e => {
|
// onComplete: e => {
|
||||||
// this.resizeMask(e.chart);
|
// this.resizeMask(e.chart);
|
||||||
// }
|
// }
|
||||||
// },
|
// },
|
||||||
// interaction: {
|
|
||||||
// intersect: true,
|
|
||||||
// },
|
|
||||||
scales: {
|
scales: {
|
||||||
x: {
|
x: {
|
||||||
type: 'time',
|
type: 'time',
|
||||||
ticks: {
|
ticks: {
|
||||||
autoSkip: false,
|
// autoSkip: false,
|
||||||
maxRotation: 0, // 不旋轉 lable 0~50
|
maxRotation: 0, // 不旋轉 lable 0~50
|
||||||
color: '#334155',
|
color: '#334155',
|
||||||
display: true,
|
display: true,
|
||||||
@@ -680,6 +704,11 @@ export default {
|
|||||||
grid: {
|
grid: {
|
||||||
display: false, // 隱藏 x 軸網格
|
display: false, // 隱藏 x 軸網格
|
||||||
},
|
},
|
||||||
|
title: {
|
||||||
|
display: true,
|
||||||
|
text: 'Time',
|
||||||
|
color: 'rgba(100,116,139)',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
y: {
|
y: {
|
||||||
beginAtZero: true, // scale 包含 0
|
beginAtZero: true, // scale 包含 0
|
||||||
@@ -690,10 +719,16 @@ export default {
|
|||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
color: 'rgba(100,116,139)',
|
color: 'rgba(100,116,139)',
|
||||||
|
drawTicks: false // 隱藏左側多的空間
|
||||||
},
|
},
|
||||||
border: {
|
border: {
|
||||||
display: false, // 隱藏左側多出來的線
|
display: false, // 隱藏左側多出來的線
|
||||||
}
|
},
|
||||||
|
title: {
|
||||||
|
display: true,
|
||||||
|
text: 'Occurrences',
|
||||||
|
color: 'rgba(100,116,139)',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
@@ -703,7 +738,9 @@ export default {
|
|||||||
this.$emitter.on('coverPlate', boolean => {
|
this.$emitter.on('coverPlate', boolean => {
|
||||||
this.isCoverPlate = boolean;
|
this.isCoverPlate = boolean;
|
||||||
});
|
});
|
||||||
this.setTimeChartData();
|
// this.$emitter.on('timeRangeMaxMin', data => this.selectDurationTime = data);
|
||||||
|
// this.selectDurationTime = { min: 86834, max: 176265};
|
||||||
|
// this.setTimeChartData();
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -235,6 +235,7 @@ export default {
|
|||||||
min: this.selectTimeRangeMin,
|
min: this.selectTimeRangeMin,
|
||||||
max: this.selectTimeRangeMax
|
max: this.selectTimeRangeMax
|
||||||
};
|
};
|
||||||
|
this.$emitter.emit('timeRangeMaxMin', this.selectDurationTime);
|
||||||
console.log('this.selectDurationTime', this.selectDurationTime);
|
console.log('this.selectDurationTime', this.selectDurationTime);
|
||||||
|
|
||||||
switch (this.selectedRuleType) {
|
switch (this.selectedRuleType) {
|
||||||
|
|||||||
Reference in New Issue
Block a user