fix #300 handle compare page by handling data[0], data[1]

src/views/Discover/Performance/FreqChart.vue

@@ -3,8 +3,7 @@
 </template>
 
 <script>
-import { computed, ref, watch, onMounted } from 'vue';
-import usePerformanceStore from "@/stores/performance.js";
+import { computed, ref, onMounted } from 'vue';
 import {
   setTimeStringFormatBaseOnTimeDifference,
   mapTimestampToAxisTicksByFormat,
@@ -14,8 +13,6 @@ import {
  } from "@/constants/constants.js";
 
 
-const cloneDeep = (obj) => JSON.parse(JSON.stringify(obj));
-
 // 試著把 chart 獨立成一個 vue component
 // 企圖防止 PrimeVue 誤用其他圖表 option 值的 bug
 export default {
@@ -29,13 +26,17 @@ export default {
     yUnit: {
       type: String,
     },
+    pageName: {
+      type: String,
+    },
   }, 
   setup(props) {
-    const performanceStore = usePerformanceStore();
 
     const customizedScaleOption = computed(() => {});
     const primeVueSetDataState = ref(null);
     const primeVueSetOptionsState = ref(null);
+    const colorPrimary = ref('#0099FF');
+    const colorSecondary = ref('#FFAA44');
     
     /**
      * Compare page and Performance have this same function.
@@ -112,8 +113,11 @@ export default {
         };
     };
 
-    const getLineChartPrimeVueSetting = (chartData, content) => {
+    const getLineChartPrimeVueSetting = (chartData, content, pageName) => {
+      let datasetsArr;
       let datasets;
+      let datasetsPrimary; // For Compare page case
+      let datasetsSecondary; // For Compare page case
       let minX = chartData?.x_axis?.min;
       let maxX = chartData?.x_axis?.max;
       let maxY = chartData?.y_axis?.max;
@@ -124,8 +128,45 @@ export default {
         return this.$moment(time).format('YYYY/M/D hh:mm:ss')
       };
 
-      datasets = chartData.data;
-      xData = chartData.data.map(item => new Date(item.x).getTime());
+      // 考慮 chartData.data 的dimension
+      // 當我們遇到了 Compare 頁面的案例
+      if(pageName === "Compare"){
+        datasetsPrimary = chartData.data[0].data;
+        datasetsSecondary = chartData.data[1].data;
+
+        datasetsArr = [
+          {
+            label: chartData.data[0].label,
+            data: datasetsPrimary,
+            fill: false,
+            tension: 0, // 貝茲曲線張力
+            borderColor: colorPrimary,
+            pointBackgroundColor: colorPrimary,
+          },
+          {
+            label: chartData.data[1].label,
+            data: datasetsSecondary,
+            fill: false,
+            tension: 0, // 貝茲曲線張力
+            borderColor: colorSecondary,
+            pointBackgroundColor: colorSecondary,
+          }
+        ];
+        xData = chartData.data[0].data.map(item => new Date(item.x).getTime());        
+      } else {
+        datasets = chartData.data;
+        datasetsArr = [
+          {
+            label: content.title,
+            data: datasets,
+            fill: false,
+            tension: 0, // 貝茲曲線張力
+            borderColor: '#0099FF',
+          }
+        ];
+        xData = chartData.data.map(item => new Date(item.x).getTime());
+      }   
+      
       
       // Customize X axis ticks due to different differences between min and max of data group
       // Compare page and Performance page share the same logic
@@ -140,15 +181,7 @@ export default {
   
       primeVueSetData = {
         labels: xData,
-        datasets: [
-          {
-            label: content.title,
-            data: datasets,
-            fill: false,
-            tension: 0, // 貝茲曲線張力
-            borderColor: '#0099FF',
-          }
-        ]
+        datasets: datasetsArr,
       };
       primeVueSetOption = {
         responsive: true,
@@ -183,14 +216,14 @@ export default {
         return `${content.y}: ${context.parsed.y}`;
       };
       primeVueSetOption.scales.y.ticks.callback = function (value, index, ticks) {
-        return value;
+        return value; //這裡的Y軸刻度沒有後綴代表時間的英文字母
       };
       primeVueSetDataState.value = primeVueSetData;
       primeVueSetOptionsState.value = primeVueSetOption;
     };
 
     onMounted(() => {
-      getLineChartPrimeVueSetting(props.chartData, props.content);
+      getLineChartPrimeVueSetting(props.chartData, props.content, props.pageName);
     });
 
     return {

src/views/Discover/Performance/index.vue

@@ -119,7 +119,9 @@
                   <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 v-if="performanceData" :chartData="performanceData?.freq?.cases" :content="contentData?.freq" yUnit="count"/>
+                    <FreqChart v-if="performanceData" :chartData="performanceData?.freq?.cases" :content="contentData?.freq" yUnit="count"
+                      pageName="Performance"
+                    />
                   </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>