refactor setChartData - slope calculation

This commit is contained in:
Cindy Chang
2024-07-22 14:25:38 +08:00
parent e5b15957cc
commit 3ef1540f8c

View File

@@ -11,74 +11,87 @@ import getMoment from 'moment';
* @returns {array} 可直接套入 chart.js 的 data * @returns {array} 可直接套入 chart.js 的 data
*/ */
export function setLineChartData(baseData, xMax, xMin, isPercent, yMax, yMin) { export function setLineChartData(baseData, xMax, xMin, isPercent, yMax, yMin) {
let data = baseData.map(i=>({x:i.x,y:i.y})) // 將 baseData 轉換為包含 x 和 y 屬性的物件陣列
// y 軸斜率計算請參考 ./public/timeFrameSlope 的圖 let data = baseData.map(i => ({ x: i.x, y: i.y }));
// 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 軸最小值 // 計算 y 軸最小值
let b = calculateYMin(baseData, isPercent, yMin, yMax);
// 計算 y 軸最大值
let mf = calculateYMax(baseData, isPercent, yMin, yMax);
// 添加最小值
data.unshift({
x: xMin,
y: b,
});
// 添加最大值
data.push({
x: xMax,
y: mf,
});
return data;
};
/**
* 計算 y 軸最小值
*
* 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)
*/
function calculateYMin(baseData, isPercent, yMin, yMax) {
let a = 0; let a = 0;
let b;
let c = 1; let c = 1;
let d = baseData[0].y; let d = baseData[0].y;
let e = 2; let e = 2;
let f = baseData[1].y; let f = baseData[1].y;
b = (e*d - a*d - f*a - f*c) / (e - c - a) let b = (e * d - a * d - f * a - f * c) / (e - c - a);
if(isPercent) { // sonar-qube return clampValue(b, isPercent, yMin, yMax);
if (b >= 1) { };
b = 1; /**
} else if (b <= 0) { * 計算 y 軸最大值
b = 0; *
} else { * x 值為 9 ~ 11,
b = b; * 將三的座標(ax, ay), (bx, by), (cx, cy)命名為 (a, b), (c, d), (e, f)
} * 最大值: (f - b)(e - c) = (f - d)(e - a),求 f = (be - bc -de + da) / (a - c)
} */
else { function calculateYMax(baseData, isPercent, yMin, yMax) {
if (b >= yMax) {
b = yMax;
} else if (b <= yMin) {
b = yMin;
} else {
b = b;
}
}
// y 軸最大值
let ma = 9; let ma = 9;
let mb = baseData[8].y; let mb = baseData[8].y;
let mc = 10; let mc = 10;
let md = baseData[9].y; let md = baseData[9].y;
let me = 11; let me = 11;
let mf; let mf = (mb * me - mb * mc - md * me + md * ma) / (ma - mc);
mf = (mb*me - mb*mc -md*me + md*ma) / (ma - mc); return clampValue(mf, isPercent, yMin, yMax);
};
/**
* 將值限制在指定範圍內
* 如果 isPercent 為 true則將值限制在 0 到 1 之間
* 否則,將值限制在 yMin 和 yMax 之間
*
* @param {number} value 需要被限制的值
* @param {boolean} isPercent 如果為 true表示值應該被限制在百分比範圍內0 到 1
* @param {number} min 非百分比情況下的最小允許值yMin
* @param {number} max 非百分比情況下的最大允許值yMax
* @returns {number} 被限制在指定範圍內的值
*/
function clampValue(value, isPercent, min, max) {
if (isPercent) { if (isPercent) {
if (mf >= 1) { if (value >= 1) {
mf = 1; return 1;
} else if (mf <= 0) { } else if (value <= 0) {
mf = 0; return 0;
} }
} else if (mf >= yMax) { } else {
mf = yMax; if (value >= max) {
} else if (mf <= yMin) { return max;
mf = yMin; } else if (value <= min) {
return min;
} }
}
// 添加最小值 return value;
// The unshift() method of Array instances adds the specified elements to
// the beginning of an array and returns the new length of the array.
data.unshift({
x: xMin,
y: b,
})
// 添加最大值
data.push({
x: xMax,
y: mf,
})
return data;
}; };
/** /**
* 將後端的 chart data x 值轉換時間格式,長條圖 * 將後端的 chart data x 值轉換時間格式,長條圖