WIP: explicit declare primevue option of one of the chart and the bug is somewhat solved

src/views/Discover/Performance/index.vue

@@ -399,6 +399,7 @@ export default {
         },
         scales: customizedScaleOption,
       };
+      // resultStepSize: Y 軸一個刻度的高度的純數值部分，unitToUse則可能是 d,h,m,s 四者之一
       const {resultStepSize, unitToUse} = getStepSizeOfYTicks(maxY);
       switch (yUnit) {
         case 'date':
@@ -423,6 +424,7 @@ export default {
 
       return [primeVueSetData, primeVueSetOption]
     },
+    
     /**
      * 建立長條圖
      * @param { object } chartData chart data
@@ -743,13 +745,159 @@ export default {
             ticks: {
               ...scaleObjectToAlter.x.ticks,
                 callback: function(value, index) {
-                  // console.log('根據不同的級距客製化 x 軸的時間刻度');
                   return ticksOfXAxis[index];
                 },
             },
           },
       };       
     },
+    getMoment(time){
+        return this.$moment(time).format('YYYY/M/D hh:mm:ss')
+    },    
+    /**
+     * 建立Average Cycle Time折線圖
+     * @param { object } chartData chart data
+     * @param { object } content titels 標題文字
+     * @param { string } yUnit y 軸單位 'date'
+     */
+     getAvgCycleTimeLineChart(chartData, content, yUnit) {
+      let datasets;
+      let minX = chartData.x_axis.min;
+      let maxX = chartData.x_axis.max;
+      let maxY = chartData.y_axis.max;
+      let xData;
+      let primeVueSetData = {};
+      let primeVueSetOption = {};
+      const getSimpleTimeLabel = simpleTimeLabel;
+      const getFollowTimeLabel = followTimeLabel;
+
+      datasets = setLineChartData(chartData.data, chartData.x_axis.max, chartData.x_axis.min, false, chartData.y_axis.max,
+      chartData.y_axis.min);
+      xData = this.setXLabelsData(chartData.x_axis);
+
+      
+      // 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, maxX);
+      const ticksOfXAxis = mapTimestampToAxisTicksByFormat(xData, formatToSet);
+  
+      primeVueSetData = {
+        labels: xData,
+        datasets: [
+          {
+            label: content.title,
+            data: datasets,
+            fill: false,
+            tension: 0, // 貝茲曲線張力
+            borderColor: '#0099FF',
+          }
+        ]
+      };
+      primeVueSetOption = {
+        responsive: true,
+        maintainAspectRatio: false,
+        layout: {
+          padding: {
+            top: 16,
+            left: 8,
+            right: 8,
+          }
+        },
+        plugins: {
+          legend: false, // 圖例
+          tooltip: {
+            displayColors: false,
+            titleFont: {weight: 'normal'},
+            callbacks: {
+              title: function(context) {
+                return `${content.x}: ${this.getMoment(context[0].parsed.x)}`;
+              }
+            },
+          },
+          title: {
+            display: false,
+          },
+        },
+        scales: {
+          x: {
+            min: minX,
+            max: maxX,
+            type: 'time',
+            title: {
+              display: true,
+              color: '#334155',
+              font: {
+                size: 12,
+                lineHeight: 2
+              },
+              text: content.x,              
+            },
+            time: {
+              displayFormats: {
+                second: 'h:mm:ss', // ex: 1:11:11
+                minute: 'M/d h:mm', // ex: 1/1 1:11
+                hour: 'M/d h:mm', // ex: 1/1 1:11
+                day: 'M/d h', // ex: 1/1 1
+                month: 'y/M/d', // ex: 1911/1/1
+              },
+              round: true
+            },
+            ticks: {
+              display: true,
+              maxRotation: 0, // 不旋轉 lable 0~50
+              color: '#64748b',
+              source: 'labels', // 依比例彈性顯示 label 數量
+              callback: function(value, index) {
+                return ticksOfXAxis[index];
+              },
+            },
+            border: {
+              color: '#64748b',
+            },
+          },
+          y: {
+            beginAtZero: true, // scale 包含 0
+            title: {
+              display: true,
+              color: '#334155',
+              font: {
+                size: 12,
+                lineHeight: 2
+              },
+              text: content.y
+            },
+            ticks:{
+              color: '#64748b',
+              padding: 8,
+            },
+            grid: {
+              color: '#64748b',
+            },
+            border: {
+              display: false, // 隱藏左側多出來的線
+            },
+            ticks: {
+              callback: function (value, index, ticks) {
+                // resultStepSize: Y 軸一個刻度的高度的純數值部分，unitToUse則可能是 d,h,m,s 四者之一
+                const {resultStepSize, unitToUse} = getStepSizeOfYTicks(maxY);
+                return getYTicksByIndex(resultStepSize, index, unitToUse);
+              },
+            }
+          },
+        },
+        plugin: {
+          tooltip: {
+            callbacks:{
+              label:function(context) {
+                return `${content.y}: ${getSimpleTimeLabel(context.parsed.y, 2)}`;
+              },
+            },
+          },
+        },
+      };
+
+      return [primeVueSetData, primeVueSetOption]
+    },
     ...mapActions(PerformanceStore, [
       'setFreqChartData',
       'setFreqChartOptions',
@@ -778,7 +926,7 @@ export default {
     }
     this.casesByTaskHeight = await this.getHorizontalBarHeight(this.performanceData.freq.cases_by_task);
     // create chart
-    [this.avgCycleTimeData, this.avgCycleTimeOptions] = this.getLineChart(this.performanceData.time.avg_cycle_time,
+    [this.avgCycleTimeData, this.avgCycleTimeOptions] = this.getAvgCycleTimeLineChart(this.performanceData.time.avg_cycle_time,
       this.contentData.avgCycleTime, 'date');
     [this.avgCycleEfficiencyData, this.avgCycleEfficiencyOptions] = this.getBarChart(
       this.performanceData.time.avg_cycle_efficiency, this.contentData.avgCycleEfficiency);