68 lines
1.8 KiB
JavaScript
68 lines
1.8 KiB
JavaScript
import getMoment from 'moment';
|
|
|
|
/**
|
|
* 將後端的 chart data 加入最大、最小值，折線圖
|
|
* @param {array} baseData 後端給的 10 個時間點
|
|
* @param {number} xMax 2022-05-23T18:00:00
|
|
* @param {number} xMin 2022-05-23T08:00:00
|
|
* @returns {array} 可直接套入 chart.js 的 data
|
|
*/
|
|
export function setLineChartData(baseData, xMax, xMin) {
|
|
let data = baseData.map(i=>({x:i.x,y:i.y}))
|
|
// y 軸斜率計算請參考 ./public/timeFrameSlope 的圖
|
|
// x 值為 0 ~ 11,
|
|
// 將三的座標(ax, ay), (bx, by), (cx, cy)命名為 (a, b), (c, d), (e, f)
|
|
// 最小值: (f - b)(c - a) = (e - a)(d - b)，求 b = (ed - ad - fa - fc) / (e - c - a)
|
|
// 最大值: (f - b)(e - c) = (f - d)(e - a)，求 f = (be - bc -de + da) / (a - c)
|
|
|
|
// y 軸最小值
|
|
let a = 0;
|
|
let b;
|
|
let c = 1;
|
|
let d = baseData[0].y;
|
|
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;
|
|
|
|
// y 軸最大值
|
|
let ma = 9;
|
|
let mb = baseData[8].y;
|
|
let mc = 10;
|
|
let md = baseData[9].y;
|
|
let me = 11;
|
|
let mf;
|
|
mf = (mb*me - mb*mc -md*me + md*ma) / (ma - mc);
|
|
mf = mf > 1 ? 1 : mf < 0 ? 0 : mf;
|
|
|
|
// 添加最小值
|
|
data.unshift({
|
|
x: xMin,
|
|
y: b,
|
|
})
|
|
// 添加最大值
|
|
data.push({
|
|
x: xMax,
|
|
y: mf,
|
|
})
|
|
|
|
return data;
|
|
};
|
|
/**
|
|
* 將後端的 chart data 加入最大、最小值，長條圖
|
|
* @param {array} baseData 後端給的 10 個時間點
|
|
* @param {number} xMax 2022-05-23T18:00:00
|
|
* @param {number} xMin 2022-05-23T08:00:00
|
|
* @returns {array} 可直接套入 chart.js 的 data
|
|
*/
|
|
export function setBarChartData(baseData) {
|
|
let data = baseData.map(i =>{
|
|
return {
|
|
x: getMoment(i.x).format('YYYY/M/D hh:mm:ss'),
|
|
y: i.y
|
|
}
|
|
})
|
|
// console.log(data);
|
|
return data
|
|
};
|