WIP #300 Tried to extract out an independent vue component to prevent shared primevue option

src/views/Discover/Performance/index.vue

@@ -118,7 +118,7 @@
                 <ul>
                   <li class="bg-neutral-10 mb-4 p-1 border border-neutral-300 rounded">
                     <span class="block font-bold text-sm leading-loose text-center my-2">{{ contentData.freq.title }}</span>
-                    <Chart type="line" :data="freqData" :options="freqOptions" class="h-96" />
+                    <FreqChart/>
                   </li>
                   <li class="bg-neutral-10 p-1 border border-neutral-300 rounded">
                     <span class="block font-bold text-sm leading-loose text-center my-2">{{ contentData.casesByTask.title }}</span>
@@ -136,7 +136,7 @@
   </main>
 </template>
 <script>
-import { storeToRefs } from 'pinia';
+import { storeToRefs, mapActions, } from 'pinia';
 import axios from 'axios';
 import LoadingStore from '@/stores/loading.js';
 import PerformanceStore from '@/stores/performance.js';
@@ -149,6 +149,9 @@ import { simpleTimeLabel, followTimeLabel, dateLabel,
   getStepSizeOfYTicks,
   getYTicksByIndex,
  } from '@/module/timeLabel.js';
+import FreqChart from './FreqChart.vue';
+
+const myCloneDeep = (obj) => JSON.parse(JSON.stringify(obj));
 
 const knownScaleLineChartOptions = {
   x: {
@@ -215,6 +218,7 @@ export default {
   },
   components: {
     StatusBar,
+    FreqChart
   },
   data() {
     return {
@@ -313,7 +317,7 @@ export default {
      * @param { object } content titels 標題文字
      * @param { string } yUnit y 軸單位 'date' | 'count'
      */
-    getLineChart(chartData, content, yUnit) {
+    getLineChart(chartData, content, yUnit, whichCaller) {
       let datasets;
       let minX = chartData.x_axis.min;
       let maxX = chartData.x_axis.max;
@@ -398,7 +402,14 @@ export default {
           primeVueSetOption.scales.x.max = maxX;
           const {resultStepSize: YTickStepSize, unitToUse} = getStepSizeOfYTicks(maxY); // Stepsize only needs to be calculated once
           primeVueSetOption.scales.y.ticks.callback = function (value, index, ticks) {
-            return getYTicksByIndex(YTickStepSize, index, unitToUse); 
+            switch(whichCaller){
+              case "freqChartCaller":
+                console.log('freqChartCaller', freqChartCaller);
+                return value;
+              default:
+                 return getYTicksByIndex(YTickStepSize, index, unitToUse);
+            }
+            return;
           };
           break;
         case 'count':
@@ -738,6 +749,8 @@ export default {
           },
       };       
     },
+    ...mapActions(PerformanceStore, ['setFreqChartData']),
+    ...mapActions(PerformanceStore, ['setFreqChartOptions']),
   },
   async created() {
     this.isLoading = true; // moubeted 才停止 loading
@@ -777,7 +790,11 @@ export default {
     } else {
       [this.avgWaitingTimeByEdgeData, this.avgWaitingTimeByEdgeOptions] = [null, null]
     }
-    [this.freqData, this.freqOptions] = this.getLineChart(this.performanceData.freq.cases, this.contentData.freq, 'count');
+    [this.freqData, this.freqOptions] = this.getLineChart(this.performanceData.freq.cases, this.contentData.freq, 'count', "freqChartCaller");
+
+this.setFreqChartData(this.freqData);
+this.setFreqChartOptions(this.freqOptions);
+
     [this.casesByTaskData, this.casesByTaskOptions] = this.getHorizontalBarChart(this.performanceData.freq.cases_by_task,
       this.contentData.casesByTask, true, 'count');
     // 停止 loading