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

Conformance: Time Trend chart done.

Browse Source
This commit is contained in:
chiayin
2023-09-04 10:22:06 +08:00
parent 5f16c4ac58
commit 3f0d1b9e05
2 changed files with 190 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

180
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 v-if="null" class="border rounded border-neutral-300 p-2 bg-neutral-10 w-full" >
<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>
@@ -176,7 +176,7 @@ import ConformanceStore from '@/stores/conformance.js';
import iconNA from '@/components/icons/IconNA.vue';
import MoreModal from './MoreModal.vue';
import getNumberLabel from '@/module/numberLabel.js';
import { setLineChartData, setBarChartData } from '@/module/setChartData.js';
import { setLineChartData, setBarChartData, timeRange, yTimeRange, getXIndex, formatTime } from '@/module/setChartData.js';
import abbreviateNumber from '@/module/abbreviateNumber.js';
import getMoment from 'moment';
@@ -374,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, result.timeTrend.yMax, result.timeTrend.yMin); // 建立圖表 Time Chart.js
return result;
},
/**
@@ -571,105 +571,91 @@ export default {
* time chart
*/
setTimeChartData(data, xMax, xMin, yMax, yMin) {
console.log(data);
// let max = yMax * 1.1;
let max = 29 * 1.1;
let max = yMax * 1.1;
// let max = 29 * 1.1;
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;
// 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
// }
// ]
yMax = 29;
let xVal = timeRange(434, 259065, 100);
let yVal = yTimeRange(data, 100, yMin, yMax);
// console.log(xVal);
data = xVal.map((x, index) => ({ x, y: yVal[index] }));
let formattedXVal = xVal.map(value => formatTime(value));
let selectTimeMinIndex = getXIndex(xVal, this.selectDurationTime.min);
let selectTimeMaxIndex = getXIndex(xVal, this.selectDurationTime.max);
const start = selectTimeMinIndex;
const end = selectTimeMaxIndex;
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: [434, 13365, 39228, 65091, 90954, 116817, 142681, 168544, 194407, 220270, 246133, 259065],
labels: formattedXVal,
datasets: [
{
label: 'Conforming',
data: data,
// data: [16,19,22,18,14,21,18,16,20,10,29,29],
data: yVal,
fill: true,
// showLine: false,
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),
backgroundColor: ctx => inside(ctx, 'rgb(0,153,255)') || outside(ctx, 'rgb(255,170,68)'),
},
// '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',
// },
]
};
@@ -687,16 +673,11 @@ export default {
legend: false, // 圖例
tooltip: false,
},
// animation: {
// onComplete: e => {
// this.resizeMask(e.chart);
// }
// },
scales: {
x: {
type: 'time',
ticks: {
// autoSkip: false,
align: 'center',
maxRotation: 0, // 不旋轉 lable 0~50
color: '#334155',
display: true,
@@ -738,7 +719,7 @@ export default {
this.$emitter.on('coverPlate', boolean => {
this.isCoverPlate = boolean;
});
// this.$emitter.on('timeRangeMaxMin', data => this.selectDurationTime = data);
this.$emitter.on('timeRangeMaxMin', data => this.selectDurationTime = data);
// this.selectDurationTime = { min: 86834, max: 176265};
// this.setTimeChartData();
},
@@ -752,5 +733,4 @@ export default {
'GRAD' 0,
'opsz' 20
}
</style>