From 2c6a45232dd704c5a28027a70c47b7399c03ac8b Mon Sep 17 00:00:00 2001
From: chiayin <chiayin.kuo@dsp.im>
Date: Tue, 12 Mar 2024 14:09:28 +0800
Subject: [PATCH] fix: Issues #256 fix Compare Horizontal Bar Chart X unit to
 'Count' done.

---
 src/views/Compare/Dashboard/index.vue    | 60 ++++++++++++++++--------
 src/views/Discover/Performance/index.vue |  6 ---
 2 files changed, 40 insertions(+), 26 deletions(-)

diff --git a/src/views/Compare/Dashboard/index.vue b/src/views/Compare/Dashboard/index.vue
index c9d7b88..6ae25c0 100644
--- a/src/views/Compare/Dashboard/index.vue
+++ b/src/views/Compare/Dashboard/index.vue
@@ -491,8 +491,9 @@ export default {
      * @param { object } chartData chart data
      * @param { object } content titels
      * @param { boolean } isSingle 單個或雙數 activity
+     * @param { string } xUnit x 軸單位 date | count
      */
-    getHorizontalBarChart(chartData, content, isSingle) {
+    getHorizontalBarChart(chartData, content, isSingle, xUnit) {
       const maxY = chartData.y_axis.max;
       const getSimpleTimeLabel = simpleTimeLabel;
       const getFollowTimeLabel = followTimeLabel;
@@ -552,19 +553,6 @@ export default {
             // displayColors: false,
             mode: 'index', // 可顯示全部的 data label
             titleFont: {weight: 'normal'},
-            callbacks: {
-              label: function(context) {
-                let value = context.parsed.y;
-
-                value = context.parsed.x === null ? "n/a" : getSimpleTimeLabel(context.parsed.x, 2);
-                switch (context.datasetIndex) {
-                  case 0: // Primary
-                    return `${labelPrimary}: ${value}`;
-                  case 1: // Secondary
-                    return `${labelSecondary}: ${value}`;
-                }
-              }
-            },
           },
           title: {
             display: false,
@@ -585,9 +573,6 @@ export default {
               display: true,
               maxRotation: 0, // 不旋轉 lable 0~50
               color: '#64748b',
-              callback: function (value, index, ticks) {
-                return getFollowTimeLabel(value, maxY, 1)
-              }
             },
             grid: {
               color: '#64748b',
@@ -623,6 +608,41 @@ export default {
           },
         },
       };
+      switch (xUnit) {
+        case 'date':
+          setOption.plugins.tooltip.callbacks = {
+            label: function(context) {
+              let value = context.parsed.y;
+
+                value = context.parsed.x === null ? "n/a" : getSimpleTimeLabel(context.parsed.x, 2);
+                switch (context.datasetIndex) {
+                  case 0: // Primary
+                    return `${labelPrimary}: ${value}`;
+                  case 1: // Secondary
+                    return `${labelSecondary}: ${value}`;
+                }
+            }
+          };
+          setOption.scales.x.ticks.callback = function (value, index, ticks) {
+            return getFollowTimeLabel(value, maxY, 1)
+          };
+          break;
+        case 'count':
+          setOption.plugins.tooltip.callbacks = {
+            label: function(context) {
+              let value = context.parsed.y;
+
+                value = context.parsed.x === null ? "n/a" : context.parsed.x;
+                switch (context.datasetIndex) {
+                  case 0: // Primary
+                    return `${labelPrimary}: ${value}`;
+                  case 1: // Secondary
+                    return `${labelSecondary}: ${value}`;
+                }
+            }
+          };
+          break;
+      }
       if(isSingle) { // 設定一個活動的 y label、提示框文字
         setOption.plugins.tooltip.callbacks.title = function(context) {
           return `${content.y}: ${context[0].label}`;
@@ -678,15 +698,15 @@ export default {
     // create chart
     [this.avgCycleEfficiencyData, this.avgCycleEfficiencyOptions] = this.getBarChart(this.compareDashboardData.time.avg_cycle_efficiency, this.contentData.avgCycleEfficiency);
     [this.avgProcessTimeData, this.avgProcessTimeOptions] = this.getLineChart(this.compareDashboardData.time.avg_process_time, this.contentData.avgProcessTime);
-    [this.avgProcessTimeByTaskData, this.avgProcessTimeByTaskOptions] = this.getHorizontalBarChart(this.compareDashboardData.time.avg_process_time_by_task, this.contentData.avgProcessTimeByTask, true);
+    [this.avgProcessTimeByTaskData, this.avgProcessTimeByTaskOptions] = this.getHorizontalBarChart(this.compareDashboardData.time.avg_process_time_by_task, this.contentData.avgProcessTimeByTask, true, 'date');
     [this.avgWaitingTimeData, this.avgWaitingTimeOptions] = this.getLineChart(this.compareDashboardData.time.avg_waiting_time, this.contentData.avgWaitingTime);
     if(this.compareDashboardData.time.avg_waiting_time_by_edge !== null) {
-      [this.avgWaitingTimeByEdgeData, this.avgWaitingTimeByEdgeOptions] = this.getHorizontalBarChart(this.compareDashboardData.time.avg_waiting_time_by_edge, this.contentData.avgWaitingTimeByEdge, false);
+      [this.avgWaitingTimeByEdgeData, this.avgWaitingTimeByEdgeOptions] = this.getHorizontalBarChart(this.compareDashboardData.time.avg_waiting_time_by_edge, this.contentData.avgWaitingTimeByEdge, false, 'date');
     } else {
       [this.avgWaitingTimeByEdgeData, this.avgWaitingTimeByEdgeOptions] = [null, null]
     }
     [this.freqData, this.freqOptions] = this.getLineChart(this.compareDashboardData.freq.cases, this.contentData.freq);
-    [this.casesByTaskData, this.casesByTaskOptions] = this.getHorizontalBarChart(this.compareDashboardData.freq.cases_by_task, this.contentData.casesByTask, true);
+    [this.casesByTaskData, this.casesByTaskOptions] = this.getHorizontalBarChart(this.compareDashboardData.freq.cases_by_task, this.contentData.casesByTask, true, 'count');
   },
   mounted() {
     // 停止 loading
diff --git a/src/views/Discover/Performance/index.vue b/src/views/Discover/Performance/index.vue
index a341991..45eadbf 100644
--- a/src/views/Discover/Performance/index.vue
+++ b/src/views/Discover/Performance/index.vue
@@ -476,12 +476,6 @@ export default {
           tooltip: {
             displayColors: false,
             titleFont: {weight: 'normal'},
-            callbacks: {
-              label: function(context) {
-                // return `${content.x}: ${getSimpleTimeLabel(context.parsed.x, 2)}`;
-                return `${content.x}: ${context.parsed.x}`;
-              }
-            },
           },
           title: {
             display: false,