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

Discover: SidebarFilter Timeframes div & slider done.

Browse Source
This commit is contained in:
chiayin
2023-06-01 14:54:39 +08:00
parent 9927d34099
commit 90a5b7532a
3 changed files with 20 additions and 534 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
src/module/timeframes.js
View File

@@ -1,121 +0,0 @@
/**
* 將一段時間均分成多段的時間點
* @param {string} startTime 開始時間(ex:2017-10-05)
* @param {string} endTime 結束時間(ex:2017-10-06)
* @param {number} amount 切分成多少段
* @returns {array} 均分成多段的時間 array
*/
export function timeRange(minTime, maxTime, amount) {
// x 軸(時間軸)的範圍是最大-最小，從最小值按照 index 累加間距到最大值
const startTime = Date.parse(minTime)/1000; // 計算開始時間的時間戳記(單位:秒)
const endTime = Date.parse(maxTime)/1000; // 計算結束時間的時間戳記(單位:秒)
const timeRange = []; // return數據初始化
const timeGap = (endTime - startTime) / (amount - 1); // 切割後的時間間格
for (let i = 0; i < amount; i++) {
timeRange.push(startTime + timeGap * i);
}
return timeRange;
// min: this.timeFrameData[0].x
// max: this.timeFrameData[this.timeFrameData.length-1].x
}
/**
* 將 y 軸的值分割成跟 x 時間軸一樣的等份，使用統計學 R 語言算出貝茲曲線攻勢
* @param {array} data 切分成多少段
* @param {number} yAmount 切分成多少段
* @returns {array} 均分成多段的時間 array
*/
export function yTimeRange(data, yAmount) {
const yRange = [];
// 貝茲曲線公式
const threebsr = function (t, a1, a2, a3, a4) {
return (
(1 - t) * (1 - t) * (1 - t) * a1 +
3 * t * (1 - t)* (1 - t) * a2 +
3 * t * t * (1 - t) * a3 +
t * t * t * a4
)
}
// console.log(data);
// y min 切 5 份
for (let i = 0; i <= 1; i += 0.25) {
yRange.push(threebsr(i, data[0].y, data[0].y, data[1].y, data[1].y));
}
// console.log(yRange);
// y middle 每段切 6 份，從 0.1 開始
for (let j = 1; j < data.length - 2; j++) {
for (let i = 0.1; i <= 1; i += 0.1) {
yRange.push(threebsr(i, data[j].y, data[j].y, data[j+1].y, data[j+1].y));
}
// console.log(yRange);
}
// y max
for (let i = 0.2; i <= 1; i += 0.2) {
yRange.push(threebsr(i, data[data.length - 2].y, data[data.length - 2].y, data[data.length - 1].y, data[data.length - 1].y));
}
// console.log(yRange);
return yRange;
// y min
// const yMinPercent = 0.05;
// const yMinGap = (data[1].y-data[0].y) / (yAmount * yMinPercent - 1) ;
// for (let i = 0; i < yAmount * yMinPercent; i++) {
// // yRange.push(data[0].y + yMaxGap * i);
// }
// // y middle
// const yMiddlePercent = 0.11;
// for (let j = 1; j < data.length - 2; j++) {
// const yMiddleGap = (data[j + 1].y - data[j].y) / (yAmount * yMiddlePercent - 1);
// for (let i = 1; i < yAmount * yMiddlePercent; i++) {
// yRange.push(data[j].y + yMiddleGap * i);
// }
// }
// // y max
// const yMaxPercent = 0.06;
// const yMaxGap = (data[data.length - 1].y - data[data.length - 2].y) / (yAmount * yMaxPercent - 1);
// for (let i = 1; i < yAmount * yMaxPercent; i++) {
// yRange.push(data[data.length - 2].y + yMaxGap * i);
// }
// return yRange;
// // data: this.timeFrameData
// 貝茲曲線公式
// let threebsr = function (t, a1, a2, a3, a4) {
// return (
// (1 - t) * (1 - t) * (1 - t) * a1 +
// 3 * t * (1 - t)* (1 - t) * a2 +
// 3 * t * t * (1 - t) * a3 +
// t * t * t * a4
// )
// };
// y min
// let y = [
// threebsr(0, 448, 448, 429, 429),
// threebsr(0.1, 448, 448, 429, 429),
// threebsr(0.2, 448, 448, 429, 429),
// threebsr(0.3, 448, 448, 429, 429),
// threebsr(0.4, 448, 448, 429, 429),
// threebsr(0.5, 448, 448, 429, 429),
// threebsr(0.6, 448, 448, 429, 429),
// threebsr(0.7, 448, 448, 429, 429),
// threebsr(0.8, 448, 448, 429, 429),
// threebsr(0.9, 448, 448, 429, 429),
// threebsr(1, 448, 448, 429, 429),
// ]
// let y = []
// for (let i = 0; i <= 1; i += 0.25) {
// y.push(threebsr(i, 448, 448, 429, 429));
// }
// console.log(y);
}