fix: Issues #256 fix Performance Line Chart Y unit to 'Count' done.

src/views/Discover/Performance/index.vue

@@ -203,13 +203,14 @@ export default {
      * 建立折線圖
      * @param { object } chartData chart data
      * @param { object } content titels
+     * @param { string } yUnit y 軸單位 date | count
      */
-    getLineChart(chartData, content) {
+    getLineChart(chartData, content, yUnit) {
       let datasets = setLineChartData(chartData.data, chartData.x_axis.max, chartData.x_axis.min, false, chartData.y_axis.max, chartData.y_axis.min);
       let minX = chartData.x_axis.min;
       let maxX = chartData.x_axis.max;
       let maxY = chartData.y_axis.max;
-      let xData = this.xLabelsData(chartData.x_axis)
+      let xData;
       let setData = {};
       let setOption = {};
       const getMoment = (time)=> {
@@ -218,6 +219,16 @@ export default {
       const getSimpleTimeLabel = simpleTimeLabel;
       const getFollowTimeLabel = followTimeLabel;
 
+      switch (yUnit) {
+        case 'date':
+          datasets = setLineChartData(chartData.data, chartData.x_axis.max, chartData.x_axis.min, false, chartData.y_axis.max, chartData.y_axis.min);
+          xData = this.xLabelsData(chartData.x_axis);
+          break;
+        case 'count': // 次數 10 個點
+          datasets = chartData.data;
+          xData = chartData.data.map(item => new Date(item.x).getTime());
+          break;
+      }
       setData = {
         labels: xData,
         datasets: [
@@ -248,9 +259,6 @@ export default {
             callbacks: {
               title: function(context) {
                 return `${content.x}: ${getMoment(context[0].parsed.x)}`;
-              },
-              label: function(context) {
-                return `${content.y}: ${getSimpleTimeLabel(context.parsed.y, 2)}`;
               }
             },
           },
@@ -261,8 +269,6 @@ export default {
         scales: {
           x: {
             type: 'time',
-            min: minX,
-            max: maxX,
             title: {
               display: true,
               text: content.x,
@@ -301,9 +307,6 @@ export default {
             ticks:{
               color: '#64748b',
               padding: 8,
-              callback: function (value, index, ticks) {
-                return getFollowTimeLabel(value, maxY, 1)
-              }
             },
             grid: {
               color: '#64748b',
@@ -314,6 +317,23 @@ export default {
           },
         },
       };
+      switch (yUnit) {
+        case 'date':
+          setOption.plugins.tooltip.callbacks.label = function(context) {
+            return `${content.y}: ${getSimpleTimeLabel(context.parsed.y, 2)}`;
+          };
+          setOption.scales.x.min = minX;
+          setOption.scales.x.max = maxX;
+          setOption.scales.y.ticks.callback = function (value, index, ticks) {
+            return getFollowTimeLabel(value, maxY, 1)
+          };
+          break;
+        case 'count':
+          setOption.plugins.tooltip.callbacks.label = function(context) {
+            return `${content.y}: ${context.parsed.y}`;
+          };
+          break;
+      }
 
       return [setData, setOption]
     },
@@ -476,6 +496,7 @@ export default {
           tooltip: {
             displayColors: false,
             titleFont: {weight: 'normal'},
+            callbacks: {}
           },
           title: {
             display: false,
@@ -532,21 +553,17 @@ export default {
       };
       switch (xUnit) {
         case 'date':
-          setOption.plugins.tooltip.callbacks = {
+          setOption.plugins.tooltip.callbacks.label = function(context) {
-            label: function(context) {
+            return `${content.x}: ${getSimpleTimeLabel(context.parsed.x, 2)}`;
-              return `${content.x}: ${getSimpleTimeLabel(context.parsed.x, 2)}`;
-            }
           };
           setOption.scales.x.ticks.callback = function (value, index, ticks) {
             return getFollowTimeLabel(value, maxY, 1)
           };
           break;
         case 'count':
-          setOption.plugins.tooltip.callbacks = {
+          setOption.plugins.tooltip.callbacks.label = function(context) {
-            label: function(context) {
+            return `${content.x}: ${context.parsed.x}`;
-              return `${content.x}: ${context.parsed.x}`;
+          }
-            }
-          };
           break;
       }
       if(isSingle) { // 設定一個活動的 y label、提示框文字
@@ -587,13 +604,13 @@ export default {
     this.avgWaitingTimeByEdgeHeight = await this.getHorizontalBarHeight(this.performanceData.time.avg_waiting_time_by_edge);
     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.contentData.avgCycleTime);
+    [this.avgCycleTimeData, this.avgCycleTimeOptions] = this.getLineChart(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);
-    [this.avgProcessTimeData, this.avgProcessTimeOptions] = this.getLineChart(this.performanceData.time.avg_process_time, this.contentData.avgProcessTime);
+    [this.avgProcessTimeData, this.avgProcessTimeOptions] = this.getLineChart(this.performanceData.time.avg_process_time, this.contentData.avgProcessTime, 'date');
     [this.avgProcessTimeByTaskData, this.avgProcessTimeByTaskOptions] = this.getHorizontalBarChart(this.performanceData.time.avg_process_time_by_task, this.contentData.avgProcessTimeByTask, true, 'date');
-    [this.avgWaitingTimeData, this.avgWaitingTimeOptions] = this.getLineChart(this.performanceData.time.avg_waiting_time, this.contentData.avgWaitingTime);
+    [this.avgWaitingTimeData, this.avgWaitingTimeOptions] = this.getLineChart(this.performanceData.time.avg_waiting_time, this.contentData.avgWaitingTime, 'date');
     [this.avgWaitingTimeByEdgeData, this.avgWaitingTimeByEdgeOptions] = this.getHorizontalBarChart(this.performanceData.time.avg_waiting_time_by_edge, this.contentData.avgWaitingTimeByEdge, false, 'date');
-    [this.freqData, this.freqOptions] = this.getLineChart(this.performanceData.freq.cases, this.contentData.freq);
+    [this.freqData, this.freqOptions] = this.getLineChart(this.performanceData.freq.cases, this.contentData.freq, 'count');
     [this.casesByTaskData, this.casesByTaskOptions] = this.getHorizontalBarChart(this.performanceData.freq.cases_by_task, this.contentData.casesByTask, true, 'count');
     // 停止 loading
     this.isLoading = false;