WIP same as the previoius commit. Tried to extract out an independent vue component to prevent shared primevue option.

X axis is with bug now.

src/views/Discover/Performance/index.vue

@@ -118,6 +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">
@@ -354,6 +355,11 @@ export default {
           }        
       });
 
+      // special case, freq chart case
+      if(whichCaller === "freqChartCaller") {
+        this.setFreqChartXData({ minX, maxX, xData, content});
+      }
+      
       primeVueSetData = {
         labels: xData,
         datasets: [
@@ -393,6 +399,7 @@ export default {
         },
         scales: customizedScaleOption,
       };
+      const {resultStepSize, unitToUse} = getStepSizeOfYTicks(maxY);
       switch (yUnit) {
         case 'date':
           primeVueSetOption.plugins.tooltip.callbacks.label = function(context) {
@@ -400,19 +407,12 @@ export default {
           };
           primeVueSetOption.scales.x.min = minX;
           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) {
-            switch(whichCaller){
-              case "freqChartCaller":
-                console.log('freqChartCaller', freqChartCaller);
-                return value;
-              default:
-                 return getYTicksByIndex(YTickStepSize, index, unitToUse);
-            }
-            return;
+            return getYTicksByIndex(resultStepSize, index, unitToUse);
           };
           break;
         case 'count':
+        default:
           primeVueSetOption.scales.y.ticks.precision = 0; // y 軸顯示小數點後 0 位
           primeVueSetOption.plugins.tooltip.callbacks.label = function(context) {
             return `${content.y}: ${context.parsed.y}`;
@@ -420,6 +420,7 @@ export default {
           break;
       }
 
+
       return [primeVueSetData, primeVueSetOption]
     },
     /**
@@ -749,8 +750,11 @@ export default {
           },
       };       
     },
-    ...mapActions(PerformanceStore, ['setFreqChartData']),
-    ...mapActions(PerformanceStore, ['setFreqChartOptions']),
+    ...mapActions(PerformanceStore, [
+      'setFreqChartData',
+      'setFreqChartOptions',
+      'setFreqChartXData'
+    ]),
   },
   async created() {
     this.isLoading = true; // moubeted 才停止 loading
@@ -792,8 +796,8 @@ export default {
     }
     [this.freqData, this.freqOptions] = this.getLineChart(this.performanceData.freq.cases, this.contentData.freq, 'count', "freqChartCaller");
 
-this.setFreqChartData(this.freqData);
-this.setFreqChartOptions(this.freqOptions);
+    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');