feat: Performance timeLabel done.

src/module/cytoscapeMap.js

@@ -3,7 +3,7 @@ import dagre from 'cytoscape-dagre';
 import tippy from 'tippy.js';
 import 'tippy.js/dist/tippy.css';
 import Gradient from 'javascript-color-gradient'; // 多個色階產生器
-import TimeLabel from '@/module/timeLabel.js'; // 時間格式轉換器
+import { getTimeLabel } from '@/module/timeLabel.js'; // 時間格式轉換器
 
 cytoscape.use( dagre );
 
@@ -122,8 +122,8 @@ export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, cu
                   // Relative %
                   let textDurRel = text + (optionValue * 100).toFixed(2) + "%";
                   // Timelabel
-                  let timeLabelInt = text + TimeLabel(optionValue);
-                  let timeLabelFloat = text + TimeLabel(optionValue.toFixed(2));
+                  let timeLabelInt = text + getTimeLabel(optionValue);
+                  let timeLabelFloat = text + getTimeLabel(optionValue.toFixed(2));
 
                   // 判斷是否為整數，若非整數要取小數點後面兩個值。
                   let textTimeLabel = Math.trunc(optionValue) === optionValue ? timeLabelInt : timeLabelFloat;
@@ -180,8 +180,8 @@ export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, cu
                 // Relative %
                 let edgeDurRel = (optionValue * 100).toFixed(2) + "%";
                 // Timelabel
-                let timeLabelInt = TimeLabel(optionValue);
-                let timeLabelFloat = TimeLabel(optionValue.toFixed(2));
+                let timeLabelInt = getTimeLabel(optionValue);
+                let timeLabelFloat = getTimeLabel(optionValue.toFixed(2));
                 let edgeTimeLabel = Math.trunc(optionValue) === optionValue ? timeLabelInt : timeLabelFloat;
 
                 result = dataLayerOption === 'rel_duration' ? edgeDurRel : edgeTimeLabel;

src/module/setChartData.js

@@ -5,7 +5,7 @@ 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} isPercent 是否以百分比顯示
+ * @param   {boolean} isPercent 是否以百分比顯示
  * @param   {number} yMax case
  * @param   {number} yMin case
  * @returns {array} 可直接套入 chart.js 的 data
@@ -54,10 +54,8 @@ export function setLineChartData(baseData, xMax, xMin, isPercent, yMax, yMin) {
   return data;
 };
 /**
- * 將後端的 chart data 加入最大、最小值，長條圖
+ * 將後端的 chart data x 值轉換時間格式，長條圖
  * @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) {

src/module/timeLabel.js

@@ -3,7 +3,7 @@
  * @param   {number} Second
  * @returns {string}        轉換完的格式(ex: 1 day, 6.8 hrs)
  */
-export default function TimeLabel(Second) {
+export function getTimeLabel(Second) {
   var day = 24 * 60 * 60
   var hour = 60 * 60
   var minutes = 60
@@ -24,3 +24,65 @@ export default function TimeLabel(Second) {
   }
   return Second + " secs"
 }
+/**
+ * 將秒數轉換成帶有縮寫時間單位的格式
+ * @param   {number} second
+ * @param   {number} fixedNumber 小數點後幾位
+ * @returns {string}        轉換完的格式(ex: 1 d, 6.8 h)
+ */
+export function simpleTimeLabel(second, fixedNumber = 0) {
+  const day = 24 * 60 * 60;
+  const hour = 60 * 60;
+  const minutes = 60;
+  const dd = Math.floor(second / day);
+  const hh = Math.floor((second % day) / hour);
+  const mm = Math.floor((second % hour) / minutes);
+
+  if(dd > 0){
+      return (second / day).toFixed(fixedNumber) + "d"
+  }
+  else if(hh > 0){
+      return ((second % day) / hour).toFixed(fixedNumber) + "h"
+  }
+  else if(mm > 0){
+      return ((second % hour) / minutes).toFixed(fixedNumber) + "m"
+  }
+  if(second == 0){
+      return second + "s"
+  }
+  return second + "s"
+}
+/**
+ * 跟隨最大值的時間單位，將秒數轉換成帶有縮寫時間單位的格式
+ * @param   {number} second 要轉換單位的秒數
+ * @param   {number} max 該 data 中的最大值
+ * @param   {number} fixedNumber 小數點後幾位
+ * @returns {string}        轉換完的格式(ex: 1 d, 6.8 h)
+ */
+export function followTimeLabel(second, max, fixedNumber = 0) {
+  const day = 24 * 60 * 60;
+  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);
+  let maxUnit = '';
+  let result;
+
+  maxUnit = dd > 0 ? 'd' : hh > 0 ? 'h' : mm > 0 ? 'm' : 's';
+  switch (maxUnit) {
+    case 'd':
+      result = (second / day).toFixed(fixedNumber) + 'd';
+      break;
+    case 'h':
+      result = ((second % day) / hour).toFixed(fixedNumber) + 'h';
+      break;
+    case 'm':
+      result = ((second % hour) / minutes).toFixed(fixedNumber) + 'm';
+      break;
+    case 's':
+      result = second.toFixed(fixedNumber) + 's';
+      break;
+  }
+  return result;
+}