Conformance: Time Trend Chart Scales-y Option done.
This commit is contained in:
chiayin
@@ -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>
|
||||
|
||||
@@ -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 的行為
|
||||
|
||||
@@ -5,9 +5,11 @@ import getMoment from 'moment';
|
||||
* @param {array} baseData 後端給的 10 個時間點
|
||||
* @param {number} xMax 2022-05-23T18:00:00
|
||||
* @param {number} xMin 2022-05-23T08:00:00
|
||||
* @param {number} yMax case
|
||||
* @param {number} yMin case
|
||||
* @returns {array} 可直接套入 chart.js 的 data
|
||||
*/
|
||||
export function setLineChartData(baseData, xMax, xMin) {
|
||||
export function setLineChartData(baseData, xMax, xMin, isPercent, yMax, yMin) {
|
||||
let data = baseData.map(i=>({x:i.x,y:i.y}))
|
||||
// y 軸斜率計算請參考 ./public/timeFrameSlope 的圖
|
||||
// x 值為 0 ~ 11,
|
||||
@@ -23,7 +25,8 @@ export function setLineChartData(baseData, xMax, xMin) {
|
||||
let e = 2;
|
||||
let f = baseData[1].y;
|
||||
b = (e*d - a*d - f*a - f*c) / (e - c - a)
|
||||
b = b > 1 ? 1 : b < 0 ? 0 : b;
|
||||
if(isPercent) b = b >= 1 ? 1 : b <= 0 ? 0 : b;
|
||||
else b = b >= yMax ? yMax : b <= yMin ? yMin : b;
|
||||
|
||||
// y 軸最大值
|
||||
let ma = 9;
|
||||
@@ -33,7 +36,8 @@ export function setLineChartData(baseData, xMax, xMin) {
|
||||
let me = 11;
|
||||
let mf;
|
||||
mf = (mb*me - mb*mc -md*me + md*ma) / (ma - mc);
|
||||
mf = mf > 1 ? 1 : mf < 0 ? 0 : mf;
|
||||
if(isPercent) mf = mf >= 1 ? 1 : mf <= 0 ? 0 : mf;
|
||||
else mf = mf >= yMax ? yMax : mf <= yMin ? yMin : mf;
|
||||
|
||||
// 添加最小值
|
||||
data.unshift({
|
||||
|
||||
Reference in New Issue
Block a user