From 541c0080aa104aa31c6d906abc79d2ebd0d6fd8c Mon Sep 17 00:00:00 2001
From: Cindy Chang <cindy.chang@dsp.im>
Date: Mon, 17 Jun 2024 21:51:19 +0800
Subject: [PATCH] import moment and declare primevue option

---
 src/views/Discover/Performance/FreqChart.vue | 61 ++++++++++++++++++--
 1 file changed, 57 insertions(+), 4 deletions(-)

diff --git a/src/views/Discover/Performance/FreqChart.vue b/src/views/Discover/Performance/FreqChart.vue
index 7403b8c..815003f 100644
--- a/src/views/Discover/Performance/FreqChart.vue
+++ b/src/views/Discover/Performance/FreqChart.vue
@@ -3,15 +3,68 @@
 </template>
 
 <script>
+import Moment from 'moment';
 import { computed, ref, onMounted } from 'vue';
 import {
   setTimeStringFormatBaseOnTimeDifference,
   mapTimestampToAxisTicksByFormat,
  } from '@/module/timeLabel.js';
- import {
-  knownScaleLineChartOptions,
- } from "@/constants/constants.js";
 
+const knownScaleLineChartOptions =  {
+x: {
+    type: 'time',
+    title: {
+    display: true,
+    color: '#334155',
+    font: {
+        size: 12,
+        lineHeight: 2
+    }
+    },
+    time: {
+    displayFormats: {
+        second: 'h:mm:ss', // ex: 1:11:11
+        minute: 'M/d h:mm', // ex: 1/1 1:11
+        hour: 'M/d h:mm', // ex: 1/1 1:11
+        day: 'M/d h', // ex: 1/1 1
+        month: 'y/M/d', // ex: 1911/1/1
+    },
+    },
+    ticks: {
+    display: true,
+    maxRotation: 0, // 不旋轉 lable 0~50
+    color: '#64748b',
+    source: 'labels', // 依比例彈性顯示 label 數量
+    },
+    border: {
+    color: '#64748b',
+    },
+    grid: {
+    tickLength: 0, // 網格是否超過邊線
+    }
+},
+y: {
+    beginAtZero: true, // scale 包含 0
+    title: {
+    display: true,
+    color: '#334155',
+    font: {
+        size: 12,
+        lineHeight: 2
+    },
+    },
+    ticks:{
+    color: '#64748b',
+    padding: 8,
+    },
+    grid: {
+    color: '#64748b',
+    },
+    border: {
+    display: false, // 隱藏左側多出來的線
+    },
+},
+};
 
 // 試著把 chart 獨立成一個 vue component
 // 企圖防止 PrimeVue 誤用其他圖表 option 值的 bug
@@ -125,7 +178,7 @@ export default {
       let primeVueSetData = {};
       let primeVueSetOption = {};
       const getMoment = (time)=> {
-        return this.$moment(time).format('YYYY/M/D hh:mm:ss')
+        return Moment(time).format('YYYY/M/D hh:mm:ss')
       };
 
       // 考慮 chartData.data 的dimension