From 963645f07187547b891f0f90f0b9bccd5de60553 Mon Sep 17 00:00:00 2001
From: Cindy Chang <cindy.chang@dsp.im>
Date: Tue, 25 Jun 2024 09:03:18 +0800
Subject: [PATCH] fix: performance page linechart tooltip time display with
 time unit

---
 src/module/timeLabel.js                  |   4 +-
 src/views/Discover/Performance/index.vue | 127 +----------------------
 2 files changed, 5 insertions(+), 126 deletions(-)

diff --git a/src/module/timeLabel.js b/src/module/timeLabel.js
index 5e14612..d37f268 100644
--- a/src/module/timeLabel.js
+++ b/src/module/timeLabel.js
@@ -127,8 +127,8 @@ export function simpleTimeLabel(second, fixedNumber = 0) {
   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);
+  const hh = Math.floor((second / hour) / day);
+  const mm = Math.floor((second / hour) / minutes);
 
   if(dd > 0){
       return (second / day).toFixed(fixedNumber) + "d";
diff --git a/src/views/Discover/Performance/index.vue b/src/views/Discover/Performance/index.vue
index 72689c8..b7f027c 100644
--- a/src/views/Discover/Performance/index.vue
+++ b/src/views/Discover/Performance/index.vue
@@ -313,123 +313,7 @@ export default {
       if(totalBars > 10) horizontalBar = (totalBars - 10) * 16 + this.horizontalBarHeight;
 
       return horizontalBar + 'px'
-    },
-    /**
-     * 建立折線圖
-     * @param { object } chartData chart data
-     * @param { object } content titels 標題文字
-     * @param { string } yUnit y 軸單位 'date' | 'count'
-     */
-    getLineChart(chartData, content, yUnit, whichCaller) {
-      let datasets;
-      let minX = chartData.x_axis.min;
-      let maxX = chartData.x_axis.max;
-      let maxY = chartData.y_axis.max;
-      let xData;
-      let primeVueSetData = {};
-      let primeVueSetOption = {};
-      const getMoment = (time)=> {
-        return this.$moment(time).format('YYYY/M/D hh:mm:ss')
-      };
-      const getSimpleTimeLabel = simpleTimeLabel;
-      const getFollowTimeLabel = followTimeLabel;
-
-      switch (yUnit) {
-        case 'date':
-          datasets = setLineChartData(chartData.data, chartData.x_axis.max, chartData.x_axis.min, false, chartData.y_axis.max,
-          chartData.y_axis.min);
-          xData = this.setXLabelsData(chartData.x_axis);
-          break;
-        case 'count': // 次數 10 個點
-          datasets = chartData.data;
-          xData = chartData.data.map(item => new Date(item.x).getTime());
-
-          // special case, freq chart case
-          if(whichCaller === "freqChartCaller") {
-            this.setFreqChartXData({ minX, maxX, xData, content});
-          }
-          break;
-      }
-      
-      // Customize X axis ticks due to different differences between min and max of data group
-      // Compare page and Performance page share the same logic
-      const formatToSet = setTimeStringFormatBaseOnTimeDifference(minX, maxX);
-      const ticksOfXAxis = mapTimestampToAxisTicksByFormat(xData, formatToSet);
-      const customizedScaleOption = this.getCustomizedScaleOption(
-        knownScaleLineChartOptions, {
-          customizeOptions: {
-            content, ticksOfXAxis,
-          }        
-      });
-  
-      primeVueSetData = {
-        labels: xData,
-        datasets: [
-          {
-            label: content.title,
-            data: datasets,
-            fill: false,
-            tension: 0, // 貝茲曲線張力
-            borderColor: '#0099FF',
-          }
-        ]
-      };
-      primeVueSetOption = {
-        responsive: true,
-        maintainAspectRatio: false,
-        layout: {
-          padding: {
-            top: 16,
-            left: 8,
-            right: 8,
-          }
-        },
-        plugins: {
-          legend: false, // 圖例
-          tooltip: {
-            displayColors: false,
-            titleFont: {weight: 'normal'},
-            callbacks: {
-              title: function(context) {
-                return `${content.x}: ${getMoment(context[0].parsed.x)}`;
-              }
-            },
-          },
-          title: {
-            display: false,
-          },
-        },
-        scales: customizedScaleOption,
-      };
-      
-      switch (yUnit) {
-        case 'date':
-          primeVueSetOption.plugins.tooltip.callbacks.label = function(context) {
-            return `${content.y}: ${getSimpleTimeLabel(context.parsed.y, 2)}`;
-          };
-          primeVueSetOption.scales.x.min = minX;
-          primeVueSetOption.scales.x.max = maxX;
-          primeVueSetOption.scales.y.ticks.callback = function (value, index, ticks) {
-            // resultStepSize: Y 軸一個刻度的高度的純數值部分，unitToUse則可能是 d,h,m,s 四者之一
-            // ticks.length是動態由 PrimeVue 決定的，例如可能是 6 或是 8
-            const {resultStepSize, unitToUse} = getStepSizeOfYTicks(ticks[ticks.length - 1].value, ticks.length);
-            return getYTicksByIndex(resultStepSize, index, unitToUse);
-          };
-          primeVueSetOption.scales.y.ticks.stepSize = resultStepSize;
-          break;
-        case 'count':
-        default:
-          primeVueSetOption.scales.y.ticks.precision = 0; // y 軸顯示小數點後 0 位
-          primeVueSetOption.plugins.tooltip.callbacks.label = function(context) {
-            return `${content.y}: ${context.parsed.y}`;
-          };
-          break;
-      }
-
-
-      return [primeVueSetData, primeVueSetOption]
-    },
-    
+    },     
     /**
      * 建立長條圖
      * @param { object } chartData chart data
@@ -813,14 +697,9 @@ export default {
             displayColors: false,
             titleFont: {weight: 'normal'},
             callbacks: {
-              title: function(context) {
-                return `${content.x}: ${getMoment(context[0].parsed.x)}`;
+              label: function(context) {
+                return `${content.y}: ${getSimpleTimeLabel(context.parsed.y, 2)}`;
               }
-            //TODO: Not sure which one to apply.  callbacks:{
-            //   label:function(context) {
-            //     return `${content.y}: ${getSimpleTimeLabel(context.parsed.y, 2)}`;
-            //   },
-            // },
             },
           },
           title: {