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

src/views/Compare/Dashboard/index.vue

@@ -200,14 +200,16 @@ 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 datasetsPrimary = setLineChartData(chartData.data[0].data, chartData.x_axis.max, chartData.x_axis.min, false, chartData.y_axis.max, chartData.y_axis.min);
+      console.log('chartData:', chartData);
-      let datasetsSecondary = setLineChartData(chartData.data[1].data, chartData.x_axis.max, chartData.x_axis.min, false, chartData.y_axis.max, chartData.y_axis.min);
+      let datasetsPrimary;
+      let datasetsSecondary;
       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 labelPrimary = chartData.data[0].label;
       let labelSecondary = chartData.data[1].label;
       let setData = {};
@@ -218,6 +220,18 @@ export default {
       const getSimpleTimeLabel = simpleTimeLabel;
       const getFollowTimeLabel = followTimeLabel;
 
+      switch (yUnit) {
+        case 'date':
+          datasetsPrimary = setLineChartData(chartData.data[0].data, chartData.x_axis.max, chartData.x_axis.min, false, chartData.y_axis.max, chartData.y_axis.min);
+          datasetsSecondary = setLineChartData(chartData.data[1].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 個點
+          datasetsPrimary = chartData.data[0].data;
+          datasetsSecondary = chartData.data[1].data;
+          xData = chartData.data[0].data.map(item => new Date(item.x).getTime());
+          break;
+      }
       setData = {
         labels: xData,
         datasets: [
@@ -259,16 +273,6 @@ export default {
               title: function(context) {
                 return `${content.x}: ${getMoment(context[0].parsed.x)}`;
               },
-              label: function(context) {
-                let value = getSimpleTimeLabel(context.parsed.y, 2);
-
-                switch (context.datasetIndex) {
-                  case 0: // Primary
-                    return `${labelPrimary}: ${value}`;
-                  case 1: // Secondary
-                    return `${labelSecondary}: ${value}`;
-                }
-              }
             },
           },
           title: {
@@ -278,8 +282,6 @@ export default {
         scales: {
           x: {
             type: 'time',
-            min: minX,
-            max: maxX,
             title: {
               display: true,
               text: content.x,
@@ -321,9 +323,6 @@ export default {
             ticks:{
               color: '#64748b',
               padding: 8,
-              callback: function (value, index, ticks) {
-                return getFollowTimeLabel(value, maxY, 1)
-              }
             },
             grid: {
               color: '#64748b',
@@ -334,6 +333,37 @@ export default {
           },
         },
       };
+      switch (yUnit) {
+        case 'date':
+          setOption.plugins.tooltip.callbacks.label = function(context) {
+            let value = getSimpleTimeLabel(context.parsed.y, 2);
+
+            switch (context.datasetIndex) {
+              case 0: // Primary
+                return `${labelPrimary}: ${value}`;
+              case 1: // Secondary
+                return `${labelSecondary}: ${value}`;
+            }
+          };
+          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) {
+            let value = context.parsed.y;
+
+            switch (context.datasetIndex) {
+              case 0: // Primary
+                return `${labelPrimary}: ${value}`;
+              case 1: // Secondary
+                return `${labelSecondary}: ${value}`;
+            }
+          };
+          break;
+      }
 
       return [setData, setOption]
     },
@@ -553,6 +583,7 @@ export default {
             // displayColors: false,
             mode: 'index', // 可顯示全部的 data label
             titleFont: {weight: 'normal'},
+            callbacks: {}
           },
           title: {
             display: false,
@@ -610,36 +641,32 @@ export default {
       };
       switch (xUnit) {
         case 'date':
-          setOption.plugins.tooltip.callbacks = {
+          setOption.plugins.tooltip.callbacks.label = function(context) {
-            label: function(context) {
+            let value = context.parsed.y;
-              let value = context.parsed.y;
 
-                value = context.parsed.x === null ? "n/a" : getSimpleTimeLabel(context.parsed.x, 2);
+              value = context.parsed.x === null ? "n/a" : getSimpleTimeLabel(context.parsed.x, 2);
-                switch (context.datasetIndex) {
+              switch (context.datasetIndex) {
-                  case 0: // Primary
+                case 0: // Primary
-                    return `${labelPrimary}: ${value}`;
+                  return `${labelPrimary}: ${value}`;
-                  case 1: // Secondary
+                case 1: // Secondary
-                    return `${labelSecondary}: ${value}`;
+                  return `${labelSecondary}: ${value}`;
-                }
+              }
-            }
           };
           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) {
+            let value = context.parsed.y;
-              let value = context.parsed.y;
 
-                value = context.parsed.x === null ? "n/a" : context.parsed.x;
+              value = context.parsed.x === null ? "n/a" : context.parsed.x;
-                switch (context.datasetIndex) {
+              switch (context.datasetIndex) {
-                  case 0: // Primary
+                case 0: // Primary
-                    return `${labelPrimary}: ${value}`;
+                  return `${labelPrimary}: ${value}`;
-                  case 1: // Secondary
+                case 1: // Secondary
-                    return `${labelSecondary}: ${value}`;
+                  return `${labelSecondary}: ${value}`;
-                }
+              }
-            }
           };
           break;
       }
@@ -697,15 +724,15 @@ export default {
     this.casesByTaskHeight = await this.getHorizontalBarHeight(this.compareDashboardData.freq.cases_by_task);
     // create chart
     [this.avgCycleEfficiencyData, this.avgCycleEfficiencyOptions] = this.getBarChart(this.compareDashboardData.time.avg_cycle_efficiency, this.contentData.avgCycleEfficiency);
-    [this.avgProcessTimeData, this.avgProcessTimeOptions] = this.getLineChart(this.compareDashboardData.time.avg_process_time, this.contentData.avgProcessTime);
+    [this.avgProcessTimeData, this.avgProcessTimeOptions] = this.getLineChart(this.compareDashboardData.time.avg_process_time, this.contentData.avgProcessTime, 'date');
     [this.avgProcessTimeByTaskData, this.avgProcessTimeByTaskOptions] = this.getHorizontalBarChart(this.compareDashboardData.time.avg_process_time_by_task, this.contentData.avgProcessTimeByTask, true, 'date');
-    [this.avgWaitingTimeData, this.avgWaitingTimeOptions] = this.getLineChart(this.compareDashboardData.time.avg_waiting_time, this.contentData.avgWaitingTime);
+    [this.avgWaitingTimeData, this.avgWaitingTimeOptions] = this.getLineChart(this.compareDashboardData.time.avg_waiting_time, this.contentData.avgWaitingTime, 'date');
     if(this.compareDashboardData.time.avg_waiting_time_by_edge !== null) {
       [this.avgWaitingTimeByEdgeData, this.avgWaitingTimeByEdgeOptions] = this.getHorizontalBarChart(this.compareDashboardData.time.avg_waiting_time_by_edge, this.contentData.avgWaitingTimeByEdge, false, 'date');
     } else {
       [this.avgWaitingTimeByEdgeData, this.avgWaitingTimeByEdgeOptions] = [null, null]
     }
-    [this.freqData, this.freqOptions] = this.getLineChart(this.compareDashboardData.freq.cases, this.contentData.freq);
+    [this.freqData, this.freqOptions] = this.getLineChart(this.compareDashboardData.freq.cases, this.contentData.freq, 'count');
     [this.casesByTaskData, this.casesByTaskOptions] = this.getHorizontalBarChart(this.compareDashboardData.freq.cases_by_task, this.contentData.casesByTask, true, 'count');
   },
   mounted() {

src/views/Discover/Performance/index.vue

@@ -206,7 +206,7 @@ export default {
      * @param { string } yUnit y 軸單位 date | count
      */
     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 datasets;
       let minX = chartData.x_axis.min;
       let maxX = chartData.x_axis.max;
       let maxY = chartData.y_axis.max;