From d117adf54e0c50b0acc032a559a36d9940b9b886 Mon Sep 17 00:00:00 2001 From: Cindy Chang Date: Wed, 12 Jun 2024 09:05:46 +0800 Subject: [PATCH] fix #287, 261 by removing Math.floor() --- src/module/timeLabel.js | 105 +++++++++++++++++---------------- src/stores/conformanceInput.js | 6 ++ 2 files changed, 59 insertions(+), 52 deletions(-) diff --git a/src/module/timeLabel.js b/src/module/timeLabel.js index b436c9f..ef01d14 100644 --- a/src/module/timeLabel.js +++ b/src/module/timeLabel.js @@ -32,7 +32,7 @@ export function getTimeLabel(second, fixedNumber = 0) { return second + " sec"; } -/** +/** UNUSED * Converts seconds into a formatted string with time units. * 將秒數轉換成帶有時間單位的格式 * @@ -43,40 +43,17 @@ export function getTimeLabel(second, fixedNumber = 0) { * @returns {string} - The formatted time string (e.g., 1 day, 6.8 hrs) * 轉換完的格式(ex: 1 day, 6.8 hrs) */ -export function getYAxisTickMark(second, fixedNumber = 0) { - const day = 24 * 60 * 60; - const hour = 60 * 60; - const minutes = 60; - - // Directly convert seconds to the largest unit to ensure equal interval values - // 直接轉換秒數到最大單位，保證數值等差 - - // 1. 首先，我們判斷秒數 second 是否大於或等於一天的秒數 day（一天有86400秒）。 - // 如果是，就把秒數除以一天的秒數，這樣就得到幾天，然後把這個數字格式化， - // 保留 fixedNumber 位小數，最後加上 " days"。 - // 2. 如果秒數小於一天但大於或等於一小時的秒數 hour（一小時有3600秒）， - // 就把秒數除以一小時的秒數，這樣就得到幾小時，然後把這個數字格式化， - // 保留 fixedNumber 位小數，最後加上 " hrs"。 - // 3. 如果秒數小於一小時但大於或等於一分鐘的秒數 minutes（一分鐘有60秒）， - // 就把秒數除以一分鐘的秒數，這樣就得到幾分鐘，然後把這個數字格式化，保留 fixedNumber 位小數，最後加上 " mins"。 - // 4. 如果以上條件都不滿足，說明秒數小於60秒，就直接返回秒數， - // 格式化後保留 fixedNumber 位小數，最後加上 " sec"。 - if (second >= day) { - return (second / day).toFixed(fixedNumber) + " days"; - } else if (second >= hour) { - return (second / hour).toFixed(fixedNumber) + " hrs"; - } else if (second >= minutes) { - return (second / minutes).toFixed(fixedNumber) + " mins"; - } else { - return second.toFixed(fixedNumber) + " sec"; - } -} /** * 將秒數轉換成帶有縮寫時間單位的格式 * @param {number} second 總秒數 * @param {number} fixedNumber 小數點後幾位 * @returns {string} 轉換完的格式(ex: 1 d, 6.8 h) + * 如果秒數（second）大於等於一天（86400 秒），返回以天為單位的時間，帶有 d 標誌。 + * 如果秒數小於一天但大於等於一小時（3600 秒），返回以小時為單位的時間，帶有 h 標誌。 + * 如果秒數小於一小時但大於等於一分鐘（60 秒），返回以分鐘為單位的時間，帶有 m 標誌。 + * 如果秒數等於 0 秒，返回 "0s"。 + * 如果秒數小於 60 秒但大於 0 秒，返回原始秒數，帶有 s 標誌。 */ export function simpleTimeLabel(second, fixedNumber = 0) { const day = 24 * 60 * 60; @@ -87,20 +64,23 @@ export function simpleTimeLabel(second, fixedNumber = 0) { const mm = Math.floor((second % hour) / minutes); if(dd > 0){ - return (second / day).toFixed(fixedNumber) + "d" + return (second / day).toFixed(fixedNumber) + "d"; } else if(hh > 0){ - return ((second % day) / hour).toFixed(fixedNumber) + "h" + return ((second % day) / hour).toFixed(fixedNumber) + "h"; } else if(mm > 0){ - return ((second % hour) / minutes).toFixed(fixedNumber) + "m" + return ((second % hour) / minutes).toFixed(fixedNumber) + "m"; } if(second == 0){ - return second + "s" + return second + "s"; } - return second + "s" + return second + "s"; } /** + * 考慮到每包資料內的時間範圍有的大有的小， + * 需要根據不同時間範圍級別的資料刻劃不同的Y軸座標， + * 因此需要根據最大的時間值來決定Y軸刻度怎麼切分。 * 跟隨最大值的時間單位，將秒數轉換成帶有縮寫時間單位的格式 * @param {number} second 要轉換單位的秒數 * @param {number} max 該 data 中的最大值 @@ -112,12 +92,21 @@ export function followTimeLabel(second, max, fixedNumber = 0) { const hour = 60 * 60; const minutes = 60; - const dd = Math.floor(max / day); - const hh = Math.floor((max % day) / hour); - const mm = Math.floor((max % hour) / minutes); + const dd = max / day; + const hh = (max % day) / hour; + const mm = (max % hour) / minutes; let maxUnit = ''; - let result; - maxUnit = dd > 0 ? 'd' : hh > 0 ? 'h' : mm > 0 ? 'm' : 's'; + let result = ""; + + if (dd > 0) { + maxUnit = 'd'; + } else if (hh > 0) { + maxUnit = 'h'; + } else if (mm > 0) { + maxUnit = 'm'; + } else { + maxUnit = 's'; + } switch (maxUnit) { case 'd': if((second / day) === 0) { @@ -146,11 +135,13 @@ export function followTimeLabel(second, max, fixedNumber = 0) { } return result; } -/** + + +/** UNUSED * 將時間轉換成不同日期單位的格式 * @param { string } date 日期 - * @param { string } maxX 該 data 最大的日期 - * @param { string } minX 該 data 最小的日期 + * @param { string } maxX 該 data 最大的日期，格式是 timestamp + * @param { string } minX 該 data 最小的日期，格式是 timestamp */ export function dateLabel(date, maxDate, minDate) { // 將時間字串轉換為時間物件 @@ -179,21 +170,31 @@ export function dateLabel(date, maxDate, minDate) { const diffSeconds = Math.floor(timeDiff / 1000); // 顯示結果 - if (diffMonths > 0) return moment(date).format('YYYY/MM/DD'); - else if (diffDays > 0) return moment(date).format('MM/DD'); - else if (diffHours > 0) return moment(date).format('MM/DD hh:00'); - else if (diffMinutes > 0) return moment(date).format('MM/DD hh:mm'); - else return moment(date).format('hh:mm:ss'); + if (diffMonths > 0) { + return moment(date).format('YYYY/MM/DD'); + } + else if (diffDays > 0) { + return moment(date).format('MM/DD'); + } + else if (diffHours > 0) { + return moment(date).format('MM/DD hh:00'); + } + else if (diffMinutes > 0) { + return moment(date).format('MM/DD hh:mm'); + } + else { + return moment(date).format('hh:mm:ss'); + } } /** * Select an appropriate time format based on the time difference. * 根據時間差距選擇適合的時間格式 - * 月: 2022/06 - * 日: 06/06 - * 時: 03/05 12:00 - * 分: 03/05 12:15 - * 秒: 09:05:32 + * 舉例 月: 2022/06 + * 舉例 日: 06/06 + * 舉例 時: 03/05 12:00 + * 舉例 分: 03/05 12:15 + * 舉例 秒: 09:05:32 * @param {Array} timestamps - An array of timestamps. * @returns {string} - The suitable time format string. */ diff --git a/src/stores/conformanceInput.js b/src/stores/conformanceInput.js index 4cd5045..0670ef9 100644 --- a/src/stores/conformanceInput.js +++ b/src/stores/conformanceInput.js @@ -1,6 +1,12 @@ import { defineStore } from "pinia"; import moment from 'moment'; +/** + * stores/conformanceInput.js 與 stores/conformance.js 的差別在於 + * 本store側重在暫存使用者的輸入 + * 而後者則側重在 API 的串接之所需 + */ + export default defineStore('conformanceInputStore', { state: () => ({ inputDataToSave: {