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

src/stores/performance.js

@@ -4,6 +4,8 @@ import apiError from '@/module/apiError.js';
 export default defineStore('performanceStore', {
   state: () => ({
     allPerformanceData: null,
+    freqChartData: null,
+    freqChartOptions: null,
   }),
   getters: {
     performanceData: state => {
@@ -33,6 +35,20 @@ export default defineStore('performanceStore', {
       } catch(error) {
         apiError(error, 'Failed to load the Performance.');
       }
-    }
+    },
+    /**
+     * In PrimeVue format
+     * @param {object} freqChartData 
+     */
+    setFreqChartData(freqChartData){
+      this.freqChartData = freqChartData;
+    },
+    /**
+     * In PrimeVue format
+     * @param {object} freqChartOptions 
+     */
+    setFreqChartOptions(freqChartOptions){
+      this.freqChartOptions = freqChartOptions;
+    },
   },
 })

src/views/Discover/Performance/FreqChart.vue

@@ -0,0 +1,25 @@
+<template>
+    <Chart type="line" :data="freqChartData" :options="freqChartOptions" class="h-96" />
+</template>
+
+<script>
+import { computed } from 'vue';
+import  { mapState, mapActions } from 'pinia';
+import usePerformanceStore from "@/stores/performance.js";
+
+// 如果把 chart 獨立成一個 vue component
+// 是否可以防止 PrimeVue 誤用其他圖表 option 值的 bug?
+export default {
+  setup() {
+    const performanceStore = usePerformanceStore();
+
+    const freqChartData = computed(() => performanceStore.freqChartData);
+    const freqChartOptions = computed(() => performanceStore.freqChartOptions);
+
+    return {
+      freqChartData,
+      freqChartOptions,
+    };
+  }
+};
+</script>

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