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

Conformance: Time Trend Chart Scales-y Option done.

Browse Source
This commit is contained in:
chiayin
2023-08-31 15:15:08 +08:00
parent b7c04c9382
commit 7ee1dac5b1
3 changed files with 165 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -132,11 +132,13 @@
<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" v-if="null">
<div 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>
<span class="text-2xl"><span class="text-cfm-secondary">3.89K</span>/38.9K</span>
<span class="text-2xl"><span class="text-cfm-secondary">{{ data.timeTrend.not_conforming }}</span>/{{ data.timeTrend.total }}</span>
</p>
<Chart type="line" :data="timeChartData" :options="timeChartOptions" class=""/>
</div>
<!-- Issues list -->
<div class="border rounded border-neutral-300 p-2 bg-neutral-10 w-full">
@@ -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();
},
}
</script>

1
src/components/Discover/Conformance/ConformanceSidebar.vue
View File

@@ -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 的行為