imacat/lucia-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Conformance: Time Trend Chart incomplete.

Browse Source
This commit is contained in:
chiayin
2023-09-01 11:33:38 +08:00
parent 7ee1dac5b1
commit 49230c1b51
2 changed files with 114 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

189
src/components/Discover/Conformance/ConformanceResults.vue
View File

@@ -132,7 +132,7 @@
<p class="h2 text-base">Non-conformance Issues</p>
<div class="flex gap-4 w-full">
<!-- 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" -->
<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>
@@ -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();
},
}
</script>