WIP #300 Performance page done. Use ref() instead of reactive() in independant Vue3 component.

src/views/Discover/Performance/index.vue

@@ -119,7 +119,7 @@
                   <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/>
+                    <FreqChart v-if="performanceData" :chartData="performanceData?.freq?.cases" :content="contentData?.freq" yUnit="count"/>
                   </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>
@@ -152,8 +152,6 @@ import { simpleTimeLabel, followTimeLabel, dateLabel,
  } from '@/module/timeLabel.js';
 import FreqChart from './FreqChart.vue';
 
-const myCloneDeep = (obj) => JSON.parse(JSON.stringify(obj));
-
 const knownScaleLineChartOptions = {
   x: {
     type: 'time',
@@ -219,7 +217,7 @@ export default {
   },
   components: {
     StatusBar,
-    FreqChart
+    FreqChart,
   },
   data() {
     return {
@@ -341,6 +339,11 @@ export default {
         case 'count': // 次數 10 個點
           datasets = chartData.data;
           xData = chartData.data.map(item => new Date(item.x).getTime());
+
+          // special case, freq chart case
+          if(whichCaller === "freqChartCaller") {
+            this.setFreqChartXData({ minX, maxX, xData, content});
+          }
           break;
       }
       
@@ -354,12 +357,7 @@ export default {
             content, ticksOfXAxis,
           }        
       });
-
-      // special case, freq chart case
-      if(whichCaller === "freqChartCaller") {
-        this.setFreqChartXData({ minX, maxX, xData, content});
-      }
-      
+  
       primeVueSetData = {
         labels: xData,
         datasets: [
@@ -794,10 +792,6 @@ export default {
     } else {
       [this.avgWaitingTimeByEdgeData, this.avgWaitingTimeByEdgeOptions] = [null, null]
     }
-    [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');