feat: Performance dateLabel done.

src/module/timeLabel.js

@@ -1,3 +1,5 @@
+import moment from 'moment';
+
 /**
  * 將秒數轉換成帶有時間單位的格式
  * @param   {number} Second
@@ -86,3 +88,41 @@ export function followTimeLabel(second, max, fixedNumber = 0) {
   }
   return result;
 }
+/**
+ * 將時間轉換成不同日期單位的格式
+ * @param { string } date 日期
+ * @param { string } maxX 該 data 最大的日期
+ * @param { string } minX 該 data 最小的日期
+ */
+export function dateLabel(date, maxDate, minDate) {
+  // 將時間字串轉換為時間物件
+  // new Date(time) 之後不用 getTime()，因為在JavaScript中，日期物件是以時間戳記（timestamp）的形式存儲的。當創建一個新的日期物件時，它內部會自動轉換時間字串為時間戳記。
+  date = new Date(date);
+  maxDate = new Date(maxDate);
+  minDate = new Date(minDate);
+
+  // 計算時間差距
+  let timeDiff = maxDate - minDate;
+
+  // 計算相差的月份
+  var diffMonths = (maxDate.getFullYear() - minDate.getFullYear()) * 12;
+  diffMonths -= minDate.getMonth();
+  diffMonths += maxDate.getMonth();
+  console.log(diffMonths);
+
+  // 計算相差的日期，要取整數才能接續下方的邏輯判斷 `diffDays > 0`
+  // 毫秒 * 秒 * 分鐘 * 小時 = 一天的時間量
+  var diffDays = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
+
+  // 計算相差的小時、分鐘、秒
+  var diffHours = Math.floor(timeDiff / (1000 * 60 * 60));
+  var diffMinutes = Math.floor(timeDiff / (1000 * 60));
+  var diffSeconds = Math.floor(timeDiff / 1000);
+
+  // 顯示結果
+  if (diffMonths > 0) return moment(date).format('YYYY/MM/DD');
+  else if (diffDays > 0) return moment(date).format('MM/DD');
+  else if (diffHours > 0) return moment(date).format('MM/DD hh:00');
+  else if (diffMinutes > 0) return moment(date).format('MM/DD hh:mm');
+  else return moment(date).format('hh:mm:ss');
+}

src/views/Discover/Performance/index.vue

@@ -82,7 +82,7 @@ import LoadingStore from '@/stores/loading.js';
 import PerformanceStore from '@/stores/performance.js';
 import StatusBar from '@/components/Discover/StatusBar.vue';
 import { setLineChartData } from '@/module/setChartData.js';
-import { simpleTimeLabel, followTimeLabel } from '@/module/timeLabel.js';
+import { simpleTimeLabel, followTimeLabel, dateLabel } from '@/module/timeLabel.js';
 
 export default {
   setup() {
@@ -118,7 +118,7 @@ export default {
       data: {
         "time": {
           "avg_cycle_time": { "data": [ { "x": "2022-01-21T03:22:13.850000", "y": 980217.631579 }, { "x": "2022-02-26T08:13:51.550000", "y": 1000370.354839 }, { "x": "2022-04-03T13:05:29.250000", "y": 91198.291667 }, { "x": "2022-05-09T17:57:06.950000", "y": 10418.814815 }, { "x": "2022-06-14T22:48:44.650000", "y": 85414.78125 }, { "x": "2022-07-21T03:40:22.350000", "y": 938087.73913 }, { "x": "2022-08-26T08:32:00.050000", "y": 174683.238095 }, { "x": "2022-10-01T13:23:37.750000", "y": 61845.913043 }, { "x": "2022-11-06T18:15:15.450000", "y": 970119.423077 }, { "x": "2022-12-12T23:06:53.150000", "y": 60694.769231 } ], "x_axis": { "min": "2022-01-03T00:56:25", "max": "2022-12-31T01:32:42" }, "y_axis": { "min": 0, "max": 1074683.238095 } },
-          "avg_cycle_efficiency": { "data": [ { "x": "2022-01-21T03:22:13.850000", "y": 0.952810727062303 }, { "x": "2022-02-26T08:13:51.550000", "y": 0.8516609459556336 }, { "x": "2022-04-03T13:05:29.250000", "y": 0.04 }, { "x": "2022-05-09T17:57:06.950000", "y": 0.653723238628633 }, { "x": "2022-06-14T22:48:44.650000", "y": 0.5529137699582065 }, { "x": "2022-07-21T03:40:22.350000", "y": 0.4489519596406311 }, { "x": "2022-08-26T08:32:00.050000", "y": 0.6538608171463852 }, { "x": "2022-10-01T13:23:37.750000", "y": 0.7548918755379221 }, { "x": "2022-11-06T18:15:15.450000", "y": 0.8469898402743924 }, { "x": "2022-12-12T23:06:53.150000", "y": 0.9505515680779113 } ], "x_axis": { "min": "2022-01-03T00:56:25", "max": "2022-12-31T01:32:42" }, "y_axis": { "min": 0, "max": 1 } },
+          "avg_cycle_efficiency": { "data": [ { "x": "2022-01-21T03:22:13.850000", "y": 0.952810727062303 }, { "x": "2022-04-22T08:13:51.550000", "y": 0.8516609459556336 }, { "x": "2022-04-23T13:05:29.250000", "y": 0.04 }, { "x": "2022-05-09T17:57:06.950000", "y": 0.653723238628633 }, { "x": "2022-06-14T22:48:44.650000", "y": 0.5529137699582065 }, { "x": "2022-07-21T03:40:22.350000", "y": 0.4489519596406311 }, { "x": "2022-08-26T08:32:00.050000", "y": 0.6538608171463852 }, { "x": "2022-10-01T13:23:37.750000", "y": 0.7548918755379221 }, { "x": "2022-10-06T18:15:15.450000", "y": 0.8469898402743924 }, { "x": "2023-02-01T23:06:53.150000", "y": 0.9505515680779113 } ], "x_axis": { "min": "2022-01-03T00:56:25", "max": "2023-02-10T01:32:42" }, "y_axis": { "min": 0, "max": 1 } },
           "avg_process_time": { "data": [ { "x": "2022-01-21T03:22:13.850000", "y": 937071.842105 }, { "x": "2022-02-26T08:13:51.550000", "y": 953769.903226 }, { "x": "2022-04-03T13:05:29.250000", "y": 865759.25 }, { "x": "2022-05-09T17:57:06.950000", "y": 994603.814815 }, { "x": "2022-06-14T22:48:44.650000", "y": 939812.375 }, { "x": "2022-07-21T03:40:22.350000", "y": 890924.565217 }, { "x": "2022-08-26T08:32:00.050000", "y": 1026333.285714 }, { "x": "2022-10-01T13:23:37.750000", "y": 1016383.608696 }, { "x": "2022-11-06T18:15:15.450000", "y": 923610.730769 }, { "x": "2022-12-12T23:06:53.150000", "y": 1011539.653846 } ], "x_axis": { "min": "2022-01-03T00:56:25", "max": "2022-12-31T01:32:42" }, "y_axis": { "min": 0, "max": 1026333.285714 } },
           "avg_process_time_by_task": { "data": [ { "x": "a", "y": 131148.320856 }, { "x": "b", "y": 136626.705882 }, { "x": "c", "y": 133260.041667 }, { "x": "d", "y": 132695.481328 }, { "x": "e", "y": 124443.590361 }, { "x": "f", "y": 127175.068273 }, { "x": "g", "y": 127628.964427 }, { "x": "h", "y": 128165.104294 }, { "x": "i", "y": 125586.248649 }, { "x": "j", "y": 101297.681818 }, { "x": "k", "y": 142538.479167 }, { "x": "l", "y": 138069.642857 } ], "x_axis": { "labels": [ "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l" ] }, "y_axis": { "min": 0, "max": 142538.479167 } },
           "avg_waiting_time": { "data": [ { "x": "2022-01-21T03:22:13.850000", "y": 43145.789474 }, { "x": "2022-02-26T08:13:51.550000", "y": 46600.451613 }, { "x": "2022-04-03T13:05:29.250000", "y": 46227.041667 }, { "x": "2022-05-09T17:57:06.950000", "y": 47262 }, { "x": "2022-06-14T22:48:44.650000", "y": 45602.40625 }, { "x": "2022-07-21T03:40:22.350000", "y": 47163.173913 }, { "x": "2022-08-26T08:32:00.050000", "y": 48349.952381 }, { "x": "2022-10-01T13:23:37.750000", "y": 45462.304348 }, { "x": "2022-11-06T18:15:15.450000", "y": 46508.692308 }, { "x": "2022-12-12T23:06:53.150000", "y": 49155.115385 } ], "x_axis": { "min": "2022-01-03T00:56:25", "max": "2022-12-31T01:32:42" }, "y_axis": { "min": 0, "max": 49155.115385 } },
@@ -182,6 +182,7 @@ export default {
             displayColors: false,
             callbacks: {
               title: function(context) {
+              console.log(context);
                 return getMoment(context[0].parsed.x);
               },
               label: function(context) {
@@ -260,11 +261,14 @@ export default {
       };
     },
     getAvgCycleEfficiency() {
-      let data = this.data.time.avg_cycle_efficiency;
+      const data = this.data.time.avg_cycle_efficiency;
+      const maxX = data.x_axis.max;
+      const minX = data.x_axis.min;
+      const getMoment = (time)=> this.$moment(time).format('YYYY/M/D hh:mm:ss');
+      const getDateLabel = dateLabel;
       let datasets = data.data;
-      const getMoment = (time)=> {
+      let xData;
-        return this.$moment(time).format('YYYY/M/D hh:mm:ss')
+      let yData;
-      };
 
       datasets = datasets.map(value => {
         return {
@@ -272,12 +276,15 @@ export default {
           y: value.y * 100
         }
       }); // 轉為百分比
+      xData = datasets.map(i => i.x);
+      yData = datasets.map(i => i.y)
 
       this.avgCycleEfficiencyData = {
+        labels: xData,
         datasets: [
           {
             label: 'Cycle Efficiency',
-            data: datasets,
+            data: yData,
             backgroundColor: '#0099FF'
           }
         ]
@@ -329,6 +336,15 @@ export default {
             ticks: {
               display: true,
               color: '#64748b',
+              callback: function(v, i, t) {
+                // console.log(v);
+                // console.log(i);
+                // console.log(t[0]);
+                let label = xData[i]
+                console.log(label);
+                return getDateLabel(label, maxX, minX)
+                // return v
+              }
             },
             border: {
               color: '#64748b',
@@ -361,23 +377,28 @@ export default {
     },
     getAvgProcessTimeByTask() {
       const data = this.data.time.avg_process_time_by_task;
-      let datasets = data.data;
       const maxY = data.y_axis.max;
-      const xData = data.x_axis.labels;
       const getSimpleTimeLabel = simpleTimeLabel;
       const getFollowTimeLabel = followTimeLabel;
 
+      // 大到小排序
+      data.data.sort((a, b) => b.y - a.y);
+      const xData = data.data.map(item => item.x);
+      const yData = data.data.map(item => item.y);
+
       this.avgProcessTimeByTaskData = {
         labels: xData,
         datasets: [
           {
             label: 'Average Processing Time by Activity',
-            data: datasets,
+            data: yData,
             backgroundColor: '#0099FF',
+            indexAxis: 'y',
           }
         ]
       };
       this.avgProcessTimeByTaskOptions = {
+        indexAxis: 'y',
         responsive: true,
         maintainAspectRatio: false,
         layout: {
@@ -393,7 +414,7 @@ export default {
             displayColors: false,
             callbacks: {
               label: function(context) {
-                return `Processing time: ${getSimpleTimeLabel(context.parsed.y, 2)}`;
+                return `Processing time: ${getSimpleTimeLabel(context.parsed.x, 2)}`;
               }
             },
           },
@@ -423,15 +444,23 @@ export default {
             },
             ticks: {
               display: true,
-              // maxRotation: 0, // 不旋轉 lable 0~50
+              maxRotation: 0, // 不旋轉 lable 0~50
+              color: '#64748b',
+              callback: function (value, index, ticks) {
+                return getFollowTimeLabel(value, maxY, 1)
+              }
+            },
+            grid: {
+              // display:false,
               color: '#64748b',
             },
             border: {
-              color: '#64748b',
+              display:false,
             },
           },
           y: {
-            // beginAtZero: true, // scale 包含 0
+            beginAtZero: true, // scale 包含 0
+            type: 'category',
             title: {
               display: true,
               text: 'Processing time',
@@ -444,11 +473,9 @@ export default {
             ticks:{
               color: '#64748b',
               padding: 8,
-              callback: function (value, index, ticks) {
-                return getFollowTimeLabel(value, maxY, 1)
-              }
             },
             grid: {
+              display:false,
               color: '#64748b',
             },
             border: {