fix: #303 of cycle eff tooltip. Change background chart grid lines.

src/constants/constants.js

@@ -1,4 +1,5 @@
 export const PRIME_VUE_TICKS_LIMIT = 6;
+export const GRID_COLOR = '#64748b';
 export const knownLayoutChartOption = {
     padding: {
       top: 16,

src/views/Compare/Dashboard/index.vue

@@ -171,6 +171,7 @@ import {
   knownScaleLineChartOptions,
   knownScaleHorizontalChartOptions,
   knownScaleBarChartOptions,
+  GRID_COLOR,
  } from "@/constants/constants.js";
 import FreqChart from '../../Discover/Performance/FreqChart.vue';
 
@@ -537,7 +538,13 @@ export default {
         primeVueSetOption.scales.y.reverse = true; //不明原因上下顛倒，所以要顛倒過來
         primeVueSetOption.scales.y.ticks.callback = function (value, index, ticks) {
           return 10 * index; //百分比
-        }
+        };
+        primeVueSetOption.scales.y.grid = {
+          color: GRID_COLOR,
+        };
+        primeVueSetOption.scales.x.grid = {
+          display: false,
+        };
       }
 
       return [primeVueSetData, primeVueSetOption]

src/views/Discover/Performance/FreqChart.vue

@@ -249,12 +249,19 @@ export default {
         plugins: {
           legend: false, // 圖例
           tooltip: {
-            displayColors: false,
+            displayColors: true,
             titleFont: {weight: 'normal'},
             callbacks: {
-              title: function(context) {
-                return `${content.x}: ${getMoment(context[0].parsed.x)}`;
-              }
+              label: function(tooltipItem) {
+                  // 取得顏色
+                  const color = tooltipItem.dataset.borderColor;
+                  // 取得數據
+                  const label = tooltipItem.dataset.label || '';
+                  const value = tooltipItem.raw || '';
+
+                  // 建立一個小方塊顯示顏色
+                  return `${label}: ${tooltipItem.parsed.y}`; // 使用 Unicode 方塊表示顏色
+              },
             },
           },
           title: {
@@ -265,9 +272,6 @@ export default {
       };
 
       primeVueSetOption.scales.y.ticks.precision = 0; // y 軸顯示小數點後 0 位
-      primeVueSetOption.plugins.tooltip.callbacks.label = function(context) {
-        return `${content.y}: ${context.parsed.y}`;
-      };
       primeVueSetOption.scales.y.ticks.callback = function (value, index, ticks) {
         return value; //這裡的Y軸刻度沒有後綴代表時間的英文字母
       };

src/views/Discover/Performance/index.vue

@@ -154,7 +154,7 @@ import { simpleTimeLabel, followTimeLabel, getDateLabelByMinMaxDate,
   getYTicksByIndex,
  } from '@/module/timeLabel.js';
 import FreqChart from './FreqChart.vue';
-import { PRIME_VUE_TICKS_LIMIT } from '../../../constants/constants.js';
+import { PRIME_VUE_TICKS_LIMIT, GRID_COLOR } from '../../../constants/constants.js';
 
 const primeVueTicksLimit = PRIME_VUE_TICKS_LIMIT;
 const knownScaleLineChartOptions = {
@@ -513,7 +513,9 @@ export default {
             border: {
               color: '#64748b',
             },
-
+            grid: {
+              display: false,
+            },
           },
           y: {
             beginAtZero: true, // scale 包含 0