From 339657879a8bdc3eef1d682c1f6ea2368264d6f3 Mon Sep 17 00:00:00 2001
From: Cindy Chang <cindy.chang@dsp.im>
Date: Wed, 12 Jun 2024 12:27:51 +0800
Subject: [PATCH] fix #287 by using simple division

---
 src/module/timeLabel.js                  | 64 ++++++++++++++++++++++++
 src/views/Compare/Dashboard/index.vue    |  5 +-
 src/views/Discover/Performance/index.vue |  5 +-
 3 files changed, 72 insertions(+), 2 deletions(-)

diff --git a/src/module/timeLabel.js b/src/module/timeLabel.js
index ef01d14..c9916bb 100644
--- a/src/module/timeLabel.js
+++ b/src/module/timeLabel.js
@@ -1,4 +1,68 @@
 import moment from 'moment';
+const NUM_OF_PARTS_TO_SPLIT = 6;
+
+/**
+ * 若想要有等差的Y軸刻度，則必須確保index是乘以一個共通的被乘數
+ * 此被乘數就是 stepSize
+ * @param {number} maxTimeInSecond 
+ * @returns {object} {resultStepSize, unitToUse}
+ */
+export const getStepSizeOfYTicks = (maxTimeInSecond) => {
+  const numOfParts = NUM_OF_PARTS_TO_SPLIT;
+  const {unitToUse, timeValue} = getTimeUnitAndValueToUse(maxTimeInSecond);
+  let resultStepSize;
+  resultStepSize = Math.floor(timeValue / numOfParts);
+
+  return {resultStepSize, unitToUse};
+}
+
+/**
+ * Convert second to possibly day or hour or mins.
+ * @param {number} secondToDecide 
+ * @returns {object} {unitToUse, timeValue} where timeValue is measured in unitToUse
+ */
+const getTimeUnitAndValueToUse = (secondToDecide) => {
+  const day = 24 * 60 * 60;
+  const hour = 60 * 60;
+  const minutes = 60;
+  const dd = secondToDecide / day;
+  const hh = (secondToDecide % day) / hour;
+  const mm = (secondToDecide % hour) / minutes;
+
+  if (dd > 0 && dd > 1) {
+    return {
+      unitToUse: "d",
+      timeValue: secondToDecide / day,
+    };
+  } else if (hh > 0 && hh > 1) {
+    return {
+      unitToUse: "h",
+      timeValue: (secondToDecide % day) / hour,
+    };
+  } else if (mm > 0 && mm > 1) {
+    return {
+      unitToUse: "m",
+      timeValue: (secondToDecide % hour) / minutes,
+    };
+  } else {
+    return {
+      unitToUse: "s",
+      timeValue: secondToDecide,
+    }
+  }
+};
+
+/**
+ * For the display of PrimeVue chart.
+ * According to the max time of the data given,
+ * split the Y axis into equal part as ticks.
+ * @param {number} stepSize stepSize of Y axis
+ * @param {number} index index of current visiting tick on Y axis
+ * @param {string} unitToUse time unit to display; "dhms" usually
+ */
+export function getYTicksByIndex(stepSize, index, unitToUse){
+  return `${stepSize * index}${unitToUse}`;
+};
 
 /**
  * 將秒數轉換成帶有時間單位的格式
diff --git a/src/views/Compare/Dashboard/index.vue b/src/views/Compare/Dashboard/index.vue
index 689e142..7e70cb7 100644
--- a/src/views/Compare/Dashboard/index.vue
+++ b/src/views/Compare/Dashboard/index.vue
@@ -158,6 +158,8 @@ import { setLineChartData } from '@/module/setChartData.js';
 import { simpleTimeLabel, followTimeLabel, dateLabel,
   setTimeStringFormatBaseOnTimeDifference,
   mapTimestampToAxisTicksByFormat,
+  getStepSizeOfYTicks,
+  getYTicksByIndex,
  } from '@/module/timeLabel.js';
 import i18next from '@/i18n/i18n';
 
@@ -549,8 +551,9 @@ export default {
           };
           primeVueSetOption.scales.x.min = minX;
           primeVueSetOption.scales.x.max = maxX;
+          const {resultStepSize: YTickStepSize, unitToUse} = getStepSizeOfYTicks(maxY); // Stepsize only needs to be calculated once
           primeVueSetOption.scales.y.ticks.callback = function (value, index, ticks) {
-            return getFollowTimeLabel(value, maxY, 1)
+            return getYTicksByIndex(YTickStepSize, index, unitToUse); 
           }
           break;
         case 'count':
diff --git a/src/views/Discover/Performance/index.vue b/src/views/Discover/Performance/index.vue
index ed440ea..88f0ccd 100644
--- a/src/views/Discover/Performance/index.vue
+++ b/src/views/Discover/Performance/index.vue
@@ -146,6 +146,8 @@ import { setLineChartData } from '@/module/setChartData.js';
 import { simpleTimeLabel, followTimeLabel, dateLabel,
   setTimeStringFormatBaseOnTimeDifference,
   mapTimestampToAxisTicksByFormat,
+  getStepSizeOfYTicks,
+  getYTicksByIndex,
  } from '@/module/timeLabel.js';
 
 const knownScaleLineChartOptions = {
@@ -394,8 +396,9 @@ export default {
           };
           primeVueSetOption.scales.x.min = minX;
           primeVueSetOption.scales.x.max = maxX;
+          const {resultStepSize: YTickStepSize, unitToUse} = getStepSizeOfYTicks(maxY); // Stepsize only needs to be calculated once
           primeVueSetOption.scales.y.ticks.callback = function (value, index, ticks) {
-            return getFollowTimeLabel(value, maxY, 1)
+            return getYTicksByIndex(YTickStepSize, index, unitToUse); 
           };
           break;
         case 'count':