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

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