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/FreqChart.vue

@@ -3,22 +3,151 @@
 </template>
 
 <script>
-import { computed } from 'vue';
-import  { mapState, mapActions } from 'pinia';
+import { computed, ref, watch, onMounted } from 'vue';
 import usePerformanceStore from "@/stores/performance.js";
+import {
+  setTimeStringFormatBaseOnTimeDifference,
+  mapTimestampToAxisTicksByFormat,
+ } from '@/module/timeLabel.js';
+ import {
+  knownScaleLineChartOptions,
+ } from "@/constants/constants.js";
 
-// 如果把 chart 獨立成一個 vue component
-// 是否可以防止 PrimeVue 誤用其他圖表 option 值的 bug?
+
+const cloneDeep = (obj) => JSON.parse(JSON.stringify(obj));
+
+// 試著把 chart 獨立成一個 vue component
+// 企圖防止 PrimeVue 誤用其他圖表 option 值的 bug
 export default {
   setup() {
     const performanceStore = usePerformanceStore();
 
     const freqChartData = computed(() => performanceStore.freqChartData);
-    const freqChartOptions = computed(() => performanceStore.freqChartOptions);
+    const originalFreqChartOptions = computed(() => performanceStore.freqChartOptions);
+    const minX = computed(() => performanceStore.freqChartXData.minX);
+    const maxX = computed(() => performanceStore.freqChartXData.maxX);
+    const xData = computed(() => performanceStore.freqChartXData.xData);
+    const content = computed(() => performanceStore.freqChartXData.content);
+    const customizedScaleOption = computed(() => {});
+
+    const updatedFreqChartOptions = ref(cloneDeep(originalFreqChartOptions.value));
+
+    const customizeOptionsFunc = () => {
+        // Customize X axis ticks due to different differences between min and max of data group
+        // Compare page and Performance page share the same logic
+      const formatToSet = setTimeStringFormatBaseOnTimeDifference(minX.value, maxX.value);
+      const ticksOfXAxis = mapTimestampToAxisTicksByFormat(xData.value, formatToSet);
+
+
+      customizedScaleOption.value = getCustomizedScaleOption(
+        knownScaleLineChartOptions, {
+            customizeOptions: {
+            content, ticksOfXAxis,
+            }        
+        });
+    };
+
+    const newTicksCallback = (value, index, values) => {
+      return value; // 沒有單位，只有數值，因為是取計算數量
+    };
+
+    const updateTicksCallback = () => {
+
+        //在這裡額外宣告本圖表的 callback， 區分跟其他圖表的 callback，避免共用 option 造成不預期的共用與混淆
+      if (updatedFreqChartOptions.value.scales && updatedFreqChartOptions.value.scales.y) {
+        updatedFreqChartOptions.value = customizedScaleOption;
+        updatedFreqChartOptions.value.scales.y.ticks.callback = newTicksCallback;
+      }
+    };
+
+    watch(originalFreqChartOptions, (newOptions) => {
+      updatedFreqChartOptions.value = cloneDeep(newOptions);
+    });
+
+    
+    /**
+     * Compare page and Performance have this same function.
+     * @param whichScaleObj PrimeVue scale option object to reference to
+     * @param customizeOptions 
+     * @param customizeOptions.content
+     * @param customizeOptions.ticksOfXAxis
+     */
+     const getCustomizedScaleOption = (whichScaleObj, {customizeOptions: {
+          content,
+          ticksOfXAxis,
+        },
+      }) => {
+      let resultScaleObj;
+      resultScaleObj = customizeScaleChartOptionTitleByContent(whichScaleObj, content);
+      resultScaleObj = customizeScaleChartOptionTicks(resultScaleObj, ticksOfXAxis);
+      return resultScaleObj;
+    };
+
+    /**
+     * Compare page and Performance have this same function.
+     * @param {object} scaleObjectToAlter this object follows the format of prive vue chart
+     * @param {Array<string>} ticksOfXAxis For example, ['05/06', '05,07', '05/08']
+     * or ['08:03:01', '08:11:18', '09:03:41', ], and so on.
+     */
+     const customizeScaleChartOptionTicks = (scaleObjectToAlter, ticksOfXAxis) => {
+      return {
+        ...scaleObjectToAlter,
+        x: {
+          ...scaleObjectToAlter.x,
+            ticks: {
+              ...scaleObjectToAlter.x.ticks,
+                callback: function(value, index) {
+                  // console.log('根據不同的級距客製化 x 軸的時間刻度');
+                  return ticksOfXAxis[index];
+                },
+            },
+          },
+      };       
+    };
+
+    /** Compare page and Performance have this same function.
+     * 在一個基本的物件上加以客製化這個物件，客製化的參照來源是 content 的內容
+     * 之所以有辦法這樣撰寫，是因為我們知道物件的順序是先 x 再 title 再 text
+     * This function alters the title property of known scales object of Chart option
+     * This is based on the fact that we know the order must be x -> title -> text.
+     * @param {object} whichScaleObj PrimeVue scale option object to reference to
+     * @param content whose property includes x and y and stand for titles
+     * 
+     * @returns { object } an object modified with two titles
+     */
+     const customizeScaleChartOptionTitleByContent = (whichScaleObj, content) => {
+      if (!content) {
+        // Early return
+        return whichScaleObj;
+      }
+
+      return {
+        ...whichScaleObj,
+          x: {
+            ...whichScaleObj.x,
+            title: {
+              ...whichScaleObj.x.title,
+              text: content.x
+            }
+          },
+          y: {
+            ...whichScaleObj.y,
+            title: {
+              ...whichScaleObj.y.title,
+              text: content.y
+            }
+          }
+        };
+    };
+
+    onMounted(() => {
+      customizeOptionsFunc();
+    });
 
     return {
       freqChartData,
-      freqChartOptions,
+      updatedFreqChartOptions,
+      updateTicksCallback,
     };
   }
 };