From d89c5ff4d8fb95560ccf1d74d248d24dc61dbf34 Mon Sep 17 00:00:00 2001
From: chiayin <chiayin.kuo@dsp.im>
Date: Thu, 1 Feb 2024 12:33:11 +0800
Subject: [PATCH] feat: Performance timeLabel done.

---
 cypress/e2e/fileUploadEtc.cy.js              |  34 +-
 src/components/Discover/Map/SidebarState.vue |   2 +-
 src/components/Discover/StatusBar.vue        |   2 +-
 src/module/cytoscapeMap.js                   |  10 +-
 src/module/setChartData.js                   |   6 +-
 src/module/timeLabel.js                      |  64 ++-
 src/router/index.js                          |  20 +-
 src/stores/files.js                          |   4 +
 src/views/Discover/Performance/index.vue     | 397 ++++++++++++++++++-
 9 files changed, 481 insertions(+), 58 deletions(-)

diff --git a/cypress/e2e/fileUploadEtc.cy.js b/cypress/e2e/fileUploadEtc.cy.js
index d9912b5..be9df07 100644
--- a/cypress/e2e/fileUploadEtc.cy.js
+++ b/cypress/e2e/fileUploadEtc.cy.js
@@ -136,24 +136,24 @@ describe('File Upload etc', () => {
   //     .should('include', 'rightFile');
   // });
 
-  it('Donwload file.', () => {
-    const downloadsFolder = Cypress.config('downloadsFolder');
-    const path = require('path');
-    const filename = path.join(downloadsFolder, 'rightFile.csv');
+  // it('Donwload file.', () => {
+  //   const downloadsFolder = Cypress.config('downloadsFolder');
+  //   const path = require('path');
+  //   const filename = path.join(downloadsFolder, 'rightFile.csv');
 
-    // 選取檔案
-    cy.get('table tbody tr:first-child td:first-child')
-      .contains('rightFile')
-      .rightclick();
-    cy.get('.p-contextmenu')
-      .find('li')
-      .filter(':contains("Download")')
-      .click();
-    cy.wait(2000);
-    // download to '/cypress/downloads'
-    cy.readFile(filename);
-    cy.wait(2000);
-  })
+  //   // 選取檔案
+  //   cy.get('table tbody tr:first-child td:first-child')
+  //     .contains('rightFile')
+  //     .rightclick();
+  //   cy.get('.p-contextmenu')
+  //     .find('li')
+  //     .filter(':contains("Download")')
+  //     .click();
+  //   cy.wait(2000);
+  //   // download to '/cypress/downloads'
+  //   cy.readFile(filename);
+  //   cy.wait(2000);
+  // });
 
   // it('Delete file.', () => {
   //   // select file
diff --git a/src/components/Discover/Map/SidebarState.vue b/src/components/Discover/Map/SidebarState.vue
index 38cd418..1ef3a50 100644
--- a/src/components/Discover/Map/SidebarState.vue
+++ b/src/components/Discover/Map/SidebarState.vue
@@ -164,7 +164,7 @@
 </template>
 
 <script>
-import getTimeLabel from '@/module/timeLabel.js';
+import { getTimeLabel } from '@/module/timeLabel.js';
 import getMoment from 'moment';
 
 export default {
diff --git a/src/components/Discover/StatusBar.vue b/src/components/Discover/StatusBar.vue
index 7878fd2..03ae5d1 100644
--- a/src/components/Discover/StatusBar.vue
+++ b/src/components/Discover/StatusBar.vue
@@ -85,7 +85,7 @@
 <script>
 import { storeToRefs } from 'pinia';
 import AllMapDataStore from '@/stores/allMapData.js';
-import getTimeLabel from '@/module/timeLabel.js';
+import { getTimeLabel } from '@/module/timeLabel.js';
 import getMoment from 'moment';
 
 export default {
diff --git a/src/module/cytoscapeMap.js b/src/module/cytoscapeMap.js
index 32c5ecc..84c0e12 100644
--- a/src/module/cytoscapeMap.js
+++ b/src/module/cytoscapeMap.js
@@ -3,7 +3,7 @@ import dagre from 'cytoscape-dagre';
 import tippy from 'tippy.js';
 import 'tippy.js/dist/tippy.css';
 import Gradient from 'javascript-color-gradient'; // 多個色階產生器
-import TimeLabel from '@/module/timeLabel.js'; // 時間格式轉換器
+import { getTimeLabel } from '@/module/timeLabel.js'; // 時間格式轉換器
 
 cytoscape.use( dagre );
 
@@ -122,8 +122,8 @@ export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, cu
                   // Relative %
                   let textDurRel = text + (optionValue * 100).toFixed(2) + "%";
                   // Timelabel
-                  let timeLabelInt = text + TimeLabel(optionValue);
-                  let timeLabelFloat = text + TimeLabel(optionValue.toFixed(2));
+                  let timeLabelInt = text + getTimeLabel(optionValue);
+                  let timeLabelFloat = text + getTimeLabel(optionValue.toFixed(2));
 
                   // 判斷是否為整數，若非整數要取小數點後面兩個值。
                   let textTimeLabel = Math.trunc(optionValue) === optionValue ? timeLabelInt : timeLabelFloat;
@@ -180,8 +180,8 @@ export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, cu
                 // Relative %
                 let edgeDurRel = (optionValue * 100).toFixed(2) + "%";
                 // Timelabel
-                let timeLabelInt = TimeLabel(optionValue);
-                let timeLabelFloat = TimeLabel(optionValue.toFixed(2));
+                let timeLabelInt = getTimeLabel(optionValue);
+                let timeLabelFloat = getTimeLabel(optionValue.toFixed(2));
                 let edgeTimeLabel = Math.trunc(optionValue) === optionValue ? timeLabelInt : timeLabelFloat;
 
                 result = dataLayerOption === 'rel_duration' ? edgeDurRel : edgeTimeLabel;
diff --git a/src/module/setChartData.js b/src/module/setChartData.js
index 3583690..b1210fb 100644
--- a/src/module/setChartData.js
+++ b/src/module/setChartData.js
@@ -5,7 +5,7 @@ import getMoment from 'moment';
  * @param   {array} baseData 後端給的 10 個時間點
  * @param   {number} xMax 2022-05-23T18:00:00
  * @param   {number} xMin 2022-05-23T08:00:00
- * @param   {number} isPercent 是否以百分比顯示
+ * @param   {boolean} isPercent 是否以百分比顯示
  * @param   {number} yMax case
  * @param   {number} yMin case
  * @returns {array} 可直接套入 chart.js 的 data
@@ -54,10 +54,8 @@ export function setLineChartData(baseData, xMax, xMin, isPercent, yMax, yMin) {
   return data;
 };
 /**
- * 將後端的 chart data 加入最大、最小值，長條圖
+ * 將後端的 chart data x 值轉換時間格式，長條圖
  * @param   {array} baseData 後端給的 10 個時間點
- * @param   {number} xMax 2022-05-23T18:00:00
- * @param   {number} xMin 2022-05-23T08:00:00
  * @returns {array} 可直接套入 chart.js 的 data
  */
 export function setBarChartData(baseData) {
diff --git a/src/module/timeLabel.js b/src/module/timeLabel.js
index ed97468..39fec70 100644
--- a/src/module/timeLabel.js
+++ b/src/module/timeLabel.js
@@ -3,7 +3,7 @@
  * @param   {number} Second
  * @returns {string}        轉換完的格式(ex: 1 day, 6.8 hrs)
  */
-export default function TimeLabel(Second) {
+export function getTimeLabel(Second) {
   var day = 24 * 60 * 60
   var hour = 60 * 60
   var minutes = 60
@@ -24,3 +24,65 @@ export default function TimeLabel(Second) {
   }
   return Second + " secs"
 }
+/**
+ * 將秒數轉換成帶有縮寫時間單位的格式
+ * @param   {number} second
+ * @param   {number} fixedNumber 小數點後幾位
+ * @returns {string}        轉換完的格式(ex: 1 d, 6.8 h)
+ */
+export function simpleTimeLabel(second, fixedNumber = 0) {
+  const day = 24 * 60 * 60;
+  const hour = 60 * 60;
+  const minutes = 60;
+  const dd = Math.floor(second / day);
+  const hh = Math.floor((second % day) / hour);
+  const mm = Math.floor((second % hour) / minutes);
+
+  if(dd > 0){
+      return (second / day).toFixed(fixedNumber) + "d"
+  }
+  else if(hh > 0){
+      return ((second % day) / hour).toFixed(fixedNumber) + "h"
+  }
+  else if(mm > 0){
+      return ((second % hour) / minutes).toFixed(fixedNumber) + "m"
+  }
+  if(second == 0){
+      return second + "s"
+  }
+  return second + "s"
+}
+/**
+ * 跟隨最大值的時間單位，將秒數轉換成帶有縮寫時間單位的格式
+ * @param   {number} second 要轉換單位的秒數
+ * @param   {number} max 該 data 中的最大值
+ * @param   {number} fixedNumber 小數點後幾位
+ * @returns {string}        轉換完的格式(ex: 1 d, 6.8 h)
+ */
+export function followTimeLabel(second, max, fixedNumber = 0) {
+  const day = 24 * 60 * 60;
+  const hour = 60 * 60;
+  const minutes = 60;
+  const dd = Math.floor(max / day);
+  const hh = Math.floor((max % day) / hour);
+  const mm = Math.floor((max % hour) / minutes);
+  let maxUnit = '';
+  let result;
+
+  maxUnit = dd > 0 ? 'd' : hh > 0 ? 'h' : mm > 0 ? 'm' : 's';
+  switch (maxUnit) {
+    case 'd':
+      result = (second / day).toFixed(fixedNumber) + 'd';
+      break;
+    case 'h':
+      result = ((second % day) / hour).toFixed(fixedNumber) + 'h';
+      break;
+    case 'm':
+      result = ((second % hour) / minutes).toFixed(fixedNumber) + 'm';
+      break;
+    case 's':
+      result = second.toFixed(fixedNumber) + 's';
+      break;
+  }
+  return result;
+}
diff --git a/src/router/index.js b/src/router/index.js
index fefbfcf..588ff77 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -79,11 +79,11 @@ const routes = [
             component: Conformance,
             props: true,
           },
-          {
-            path: "/discover/performance/:type/:fileId",
-            name: "Performance",
-            component: Performance,
-          }
+          // {
+          //   path: "/discover/performance/:type/:fileId",
+          //   name: "Performance",
+          //   component: Performance,
+          // }
         ]
       },
     ]
@@ -93,11 +93,11 @@ const routes = [
     name: "NotFound404",
     component: NotFound404,
   },
-  // {
-  //   path: "/discover/performance",
-  //   name: "Performance",
-  //   component: Performance,
-  // }
+  {
+    path: "/discover/performance",
+    name: "Performance",
+    component: Performance,
+  }
 ];
 
 const base_url = import.meta.env.BASE_URL;
diff --git a/src/stores/files.js b/src/stores/files.js
index e19d1ac..97bc082 100644
--- a/src/stores/files.js
+++ b/src/stores/files.js
@@ -258,6 +258,10 @@ export default defineStore('filesStore', {
     async deleteFile(type, id) {
       let api;
 
+      if(id == null || isNaN(id)) {
+        console.error('Delete File API:', id);
+        return $toast.default('Delete File API Error.', {position: 'bottom'});
+      };
       loading.isLoading = true;
       switch (type) {
         case 'log':
diff --git a/src/views/Discover/Performance/index.vue b/src/views/Discover/Performance/index.vue
index 9b68a1d..0e71f63 100644
--- a/src/views/Discover/Performance/index.vue
+++ b/src/views/Discover/Performance/index.vue
@@ -28,26 +28,34 @@
             <ul class="list-disc list-inside px-4 pl-7">
               <li id="cycleTime" class="scroll-smooth">
                 <span class="inline-block py-4">Cycle Time & Efficiency</span>
-                <div class="">
-                  圖 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed reiciendis nemo natus sit iste fugiat ratione dolores ipsam minus animi voluptates iure obcaecati error, id laboriosam omnis voluptatum. Voluptatum, molestias!
-                  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed reiciendis nemo natus sit iste fugiat ratione dolores ipsam minus animi voluptates iure obcaecati error, id laboriosam omnis voluptatum. Voluptatum, molestias!Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed reiciendis nemo natus sit iste fugiat ratione dolores ipsam minus animi voluptates iure obcaecati error, id laboriosam omnis voluptatum. Voluptatum, molestias!
-                  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed reiciendis nemo natus sit iste fugiat ratione dolores ipsam minus animi voluptates iure obcaecati error, id laboriosam omnis voluptatum. Voluptatum, molestias!
+                <div>
+                  <div class="card bg-neutral-10 mb-4">
+                    <Chart type="line" :data="avgCycleTimeData" :options="avgCycleTimeOptions" class="h-96" />
+                  </div>
+                  <div class="card bg-neutral-10">
+                    <Chart type="bar" :data="avgCycleEfficiencyData" :options="avgCycleEfficiencyOptions" class="h-96" />
+                  </div>
+                  <!-- <div class="flex justify-start items-center">
+                    <div class="card">
+                      <Chart type="line" :data="avgCycleTimeData" :options="avgCycleTimeOptions" class="h-96" />
+                    </div>
+                    <div class="card">
+                      <Chart type="line" :data="avgCycleTimeData" :options="avgCycleTimeOptions" class="h-96" />
+                    </div>
+                  </div> -->
                 </div>
               </li>
               <li id="processingTime">
                 <span class="inline-block py-4">Processing Time</span>
                 <div class="">
-                  圖 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed reiciendis nemo natus sit iste fugiat ratione dolores ipsam minus animi voluptates iure obcaecati error, id laboriosam omnis voluptatum. Voluptatum, molestias!
-                  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed reiciendis nemo natus sit iste fugiat ratione dolores ipsam minus animi voluptates iure obcaecati error, id laboriosam omnis voluptatum. Voluptatum, molestias!Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed reiciendis nemo natus sit iste fugiat ratione dolores ipsam minus animi voluptates iure obcaecati error, id laboriosam omnis voluptatum. Voluptatum, molestias!
-                  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed reiciendis nemo natus sit iste fugiat ratione dolores ipsam minus animi voluptates iure obcaecati error, id laboriosam omnis voluptatum. Voluptatum, molestias!
+                  <div class="card bg-neutral-10">
+                    <Chart type="bar" :data="avgProcessTimeByTaskData" :options="avgProcessTimeByTaskOptions" class="h-96" />
+                  </div>
                 </div>
               </li>
               <li id="waitingTime">
                 <span class="inline-block py-4">Waiting Time</span>
                 <div class="">
-                  圖 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed reiciendis nemo natus sit iste fugiat ratione dolores ipsam minus animi voluptates iure obcaecati error, id laboriosam omnis voluptatum. Voluptatum, molestias!
-                  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed reiciendis nemo natus sit iste fugiat ratione dolores ipsam minus animi voluptates iure obcaecati error, id laboriosam omnis voluptatum. Voluptatum, molestias!Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed reiciendis nemo natus sit iste fugiat ratione dolores ipsam minus animi voluptates iure obcaecati error, id laboriosam omnis voluptatum. Voluptatum, molestias!
-                  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed reiciendis nemo natus sit iste fugiat ratione dolores ipsam minus animi voluptates iure obcaecati error, id laboriosam omnis voluptatum. Voluptatum, molestias!
                 </div>
               </li>
             </ul>
@@ -58,9 +66,6 @@
               <li id="cases">
                 <span class="inline-block py-4">Number of Cases</span>
                 <div class="">
-                  圖 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed reiciendis nemo natus sit iste fugiat ratione dolores ipsam minus animi voluptates iure obcaecati error, id laboriosam omnis voluptatum. Voluptatum, molestias!
-                  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed reiciendis nemo natus sit iste fugiat ratione dolores ipsam minus animi voluptates iure obcaecati error, id laboriosam omnis voluptatum. Voluptatum, molestias!Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed reiciendis nemo natus sit iste fugiat ratione dolores ipsam minus animi voluptates iure obcaecati error, id laboriosam omnis voluptatum. Voluptatum, molestias!
-                  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed reiciendis nemo natus sit iste fugiat ratione dolores ipsam minus animi voluptates iure obcaecati error, id laboriosam omnis voluptatum. Voluptatum, molestias!
                 </div>
               </li>
             </ul>
@@ -76,6 +81,8 @@ import { storeToRefs } from 'pinia';
 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';
 
 export default {
   setup() {
@@ -101,17 +108,369 @@ export default {
         // {tagId: '#trace', label: 'Number of Trace'},
         // {tagId: '#resource', label: 'Resource'},
       ],
-      isActive: null
+      isActive: null,
+      avgCycleTimeData: null,
+      avgCycleTimeOptions: null,
+      avgCycleEfficiencyData: null,
+      avgCycleEfficiencyOptions: null,
+      avgProcessTimeByTaskData: null,
+      avgProcessTimeByTaskOptions: null,
+      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_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 } },
+          "avg_waiting_time_by_edge": { "data": [ { "x": [ "a", "a" ], "y": 6446 }, { "x": [ "a", "d" ], "y": 7507.8 }, { "x": [ "a", "f" ], "y": 5966.8 }, { "x": [ "a", "g" ], "y": 5175.375 }, { "x": [ "a", "i" ], "y": 6291.333333 }, { "x": [ "b", "a" ], "y": 6802 }, { "x": [ "b", "b" ], "y": 3509 }, { "x": [ "b", "g" ], "y": 7283.727273 }, { "x": [ "b", "i" ], "y": 6278.2 }, { "x": [ "c", "g" ], "y": 11503 }, { "x": [ "c", "h" ], "y": 6819.978261 }, { "x": [ "c", "k" ], "y": 13494 }, { "x": [ "d", "c" ], "y": 11750 }, { "x": [ "d", "e" ], "y": 7165.741525 }, { "x": [ "d", "g" ], "y": 8087.666667 }, { "x": [ "d", "i" ], "y": 3619 }, { "x": [ "e", "a" ], "y": 7262.875 }, { "x": [ "e", "d" ], "y": 6765.5 }, { "x": [ "e", "f" ], "y": 7288.326271 }, { "x": [ "e", "g" ], "y": 14073 }, { "x": [ "e", "k" ], "y": 13620 }, { "x": [ "e", "l" ], "y": 3795 }, { "x": [ "f", "d" ], "y": 10125 }, { "x": [ "f", "e" ], "y": 3936 }, { "x": [ "f", "g" ], "y": 6984.864486 }, { "x": [ "f", "j" ], "y": 8172.772727 }, { "x": [ "f", "l" ], "y": 6675.375 }, { "x": [ "g", "c" ], "y": 2392 }, { "x": [ "g", "e" ], "y": 11883 }, { "x": [ "g", "f" ], "y": 5305.75 }, { "x": [ "g", "g" ], "y": 11411 }, { "x": [ "g", "h" ], "y": 7590.358974 }, { "x": [ "g", "i" ], "y": 7135.5 }, { "x": [ "g", "k" ], "y": 8113.822222 }, { "x": [ "g", "l" ], "y": 7452.894737 }, { "x": [ "h", "i" ], "y": 7289.611111 }, { "x": [ "h", "l" ], "y": 6945 }, { "x": [ "i", "a" ], "y": 8895 }, { "x": [ "i", "b" ], "y": 5872 }, { "x": [ "i", "c" ], "y": 5462 }, { "x": [ "i", "d" ], "y": 7711.462687 }, { "x": [ "i", "e" ], "y": 9128.666667 }, { "x": [ "i", "g" ], "y": 8648.333333 }, { "x": [ "i", "i" ], "y": 6343.4 }, { "x": [ "i", "k" ], "y": 3218 }, { "x": [ "i", "l" ], "y": 7190.90625 } ], "x_axis": { "labels": [ [ "a", "a" ], [ "a", "d" ], [ "a", "f" ], [ "a", "g" ], [ "a", "i" ], [ "b", "a" ], [ "b", "b" ], [ "b", "g" ], [ "b", "i" ], [ "c", "g" ], [ "c", "h" ], [ "c", "k" ], [ "d", "c" ], [ "d", "e" ], [ "d", "g" ], [ "d", "i" ], [ "e", "a" ], [ "e", "d" ], [ "e", "f" ], [ "e", "g" ], [ "e", "k" ], [ "e", "l" ], [ "f", "d" ], [ "f", "e" ], [ "f", "g" ], [ "f", "j" ], [ "f", "l" ], [ "g", "c" ], [ "g", "e" ], [ "g", "f" ], [ "g", "g" ], [ "g", "h" ], [ "g", "i" ], [ "g", "k" ], [ "g", "l" ], [ "h", "i" ], [ "h", "l" ], [ "i", "a" ], [ "i", "b" ], [ "i", "c" ], [ "i", "d" ], [ "i", "e" ], [ "i", "g" ], [ "i", "i" ], [ "i", "k" ], [ "i", "l" ] ] }, "y_axis": { "min": 0, "max": 14073 } } },
+          "freq": { "cases": { "data": [ { "x": "2022-01-21T03:22:13.850000", "y": 30 }, { "x": "2022-02-26T08:13:51.550000", "y": 25 }, { "x": "2022-04-03T13:05:29.250000", "y": 30 }, { "x": "2022-05-09T17:57:06.950000", "y": 26 }, { "x": "2022-06-14T22:48:44.650000", "y": 28 }, { "x": "2022-07-21T03:40:22.350000", "y": 27 }, { "x": "2022-08-26T08:32:00.050000", "y": 17 }, { "x": "2022-10-01T13:23:37.750000", "y": 24 }, { "x": "2022-11-06T18:15:15.450000", "y": 28 }, { "x": "2022-12-12T23:06:53.150000", "y": 17 } ], "x_axis": { "min": "2022-01-03T00:56:25", "max": "2022-12-31T01:32:42" }, "y_axis": { "min": 0, "max": 30 } },
+          "cases_by_task": { "data": [ { "x": "a", "y": 184 }, { "x": "b", "y": 32 }, { "x": "c", "y": 48 }, { "x": "d", "y": 241 }, { "x": "e", "y": 249 }, { "x": "f", "y": 249 }, { "x": "g", "y": 250 }, { "x": "h", "y": 163 }, { "x": "i", "y": 175 }, { "x": "j", "y": 22 }, { "x": "k", "y": 48 }, { "x": "l", "y": 182 } ], "x_axis": { "labels": [ "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l" ] }, "y_axis": { "min": 0, "max": 250 } } }
+      }
     }
   },
+  methods: {
+    xLabelsData(valueData) {
+      let min = new Date(valueData.min).getTime();
+      let max = new Date(valueData.max).getTime();
+      let numPoints = 12;
+      let step = (max - min) / (numPoints - 1);
+      let data = [];
+      for(let i = 0; i< numPoints; i++) {
+        const x = min + i * step;
+        data.push(x);
+      }
+      return data;
+    },
+    getAvgCycleTime() {
+      let data = this.data.time.avg_cycle_time;
+      let datasets = setLineChartData(data.data, data.x_axis.max, data.x_axis.min, false, data.y_axis.max, data.y_axis.min);
+      let minX = data.x_axis.min;
+      let maxX = data.x_axis.max;
+      let maxY = data.y_axis.max;
+      let xData = this.xLabelsData(data.x_axis)
+      const getMoment = (time)=> {
+        return this.$moment(time).format('YYYY/M/D hh:mm:ss')
+      };
+      const getSimpleTimeLabel = simpleTimeLabel;
+      const getFollowTimeLabel = followTimeLabel;
+
+      this.avgCycleTimeData = {
+        labels: xData,
+        datasets: [
+          {
+            label: 'Average Cycle Time',
+            data: datasets,
+            fill: false,
+            tension: 0, // 貝茲曲線張力
+            borderColor: '#0099FF',
+          }
+        ]
+      };
+      this.avgCycleTimeOptions = {
+        responsive: true,
+        maintainAspectRatio: false,
+        layout: {
+          padding: {
+            top: 16,
+            left: 8,
+            right: 8,
+          }
+        },
+        plugins: {
+          legend: false, // 圖例
+          tooltip: {
+            displayColors: false,
+            callbacks: {
+              title: function(context) {
+                return getMoment(context[0].parsed.x);
+              },
+              label: function(context) {
+                return `Cycle time: ${getSimpleTimeLabel(context.parsed.y, 2)}`;
+              }
+            },
+          },
+          title: {
+            display: true,
+            text: 'Average Cycle Time',
+            color: '#334155',
+            padding: {
+              bottom: 16
+            },
+            font: {
+              size: 14,
+              lineHeight: 2
+            }
+          },
+        },
+        scales: {
+          x: {
+            type: 'time',
+            min: minX,
+            max: maxX,
+            title: {
+              display: true,
+              text: 'Date',
+              color: '#334155',
+              font: {
+                size: 12,
+                lineHeight: 2
+              }
+            },
+            time: {
+              displayFormats: {
+                day: 'yyyy/M/d'
+              }
+            },
+            ticks: {
+              display: true,
+              maxRotation: 0, // 不旋轉 lable 0~50
+              color: '#64748b',
+              source: 'labels', // 依比例彈性顯示 label 數量
+            },
+            border: {
+              color: '#64748b',
+            },
+          },
+          y: {
+            beginAtZero: true, // scale 包含 0
+            title: {
+              display: true,
+              text: 'Cycle time',
+              color: '#334155',
+              font: {
+                size: 12,
+                lineHeight: 2
+              },
+            },
+            ticks:{
+              color: '#64748b',
+              padding: 8,
+              callback: function (value, index, ticks) {
+                return getFollowTimeLabel(value, maxY, 1)
+              }
+            },
+            grid: {
+              color: '#64748b',
+            },
+            border: {
+              display: false, // 隱藏左側多出來的線
+            },
+          },
+        },
+      };
+    },
+    getAvgCycleEfficiency() {
+      let data = this.data.time.avg_cycle_efficiency;
+      let datasets = data.data;
+      const getMoment = (time)=> {
+        return this.$moment(time).format('YYYY/M/D hh:mm:ss')
+      };
+
+      datasets = datasets.map(value => {
+        return {
+          x: getMoment(value.x),
+          y: value.y * 100
+        }
+      }); // 轉為百分比
+
+      this.avgCycleEfficiencyData = {
+        datasets: [
+          {
+            label: 'Cycle Efficiency',
+            data: datasets,
+            backgroundColor: '#0099FF'
+          }
+        ]
+      };
+      this.avgCycleEfficiencyOptions = {
+        responsive: true,
+        maintainAspectRatio: false,
+        layout: {
+          padding: {
+            top: 16,
+            left: 8,
+            right: 8,
+          }
+        },
+        plugins: {
+          legend: false, // 圖例
+          tooltip: {
+            displayColors: false,
+            callbacks: {
+              label: function(context) {
+                return `Cycle efficiency(%): ${context.parsed.y.toFixed(2)}`;
+              }
+            },
+          },
+          title: {
+            display: true,
+            text: 'Cycle Efficiency',
+            color: '#334155',
+            padding: {
+              bottom: 16
+            },
+            font: {
+              size: 14,
+              lineHeight: 2
+            }
+          },
+        },
+        scales: {
+          x: {
+            title: {
+              display: true,
+              text: 'Date',
+              color: '#334155',
+              font: {
+                size: 12,
+                lineHeight: 2
+              }
+            },
+            ticks: {
+              display: true,
+              color: '#64748b',
+            },
+            border: {
+              color: '#64748b',
+            },
+          },
+          y: {
+            beginAtZero: true, // scale 包含 0
+            title: {
+              display: true,
+              text: 'Cycle efficiency(%)',
+              color: '#334155',
+              font: {
+                size: 12,
+                lineHeight: 2
+              },
+            },
+            ticks:{
+              color: '#64748b',
+              padding: 8,
+            },
+            grid: {
+              color: '#64748b',
+            },
+            border: {
+              display: false, // 隱藏左側多出來的線
+            },
+          },
+        },
+      };
+    },
+    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;
+
+      this.avgProcessTimeByTaskData = {
+        labels: xData,
+        datasets: [
+          {
+            label: 'Average Processing Time by Activity',
+            data: datasets,
+            backgroundColor: '#0099FF',
+          }
+        ]
+      };
+      this.avgProcessTimeByTaskOptions = {
+        responsive: true,
+        maintainAspectRatio: false,
+        layout: {
+          padding: {
+            top: 16,
+            left: 8,
+            right: 8,
+          }
+        },
+        plugins: {
+          legend: false, // 圖例
+          tooltip: {
+            displayColors: false,
+            callbacks: {
+              label: function(context) {
+                return `Processing time: ${getSimpleTimeLabel(context.parsed.y, 2)}`;
+              }
+            },
+          },
+          title: {
+            display: true,
+            text: 'Average Processing Time by Activity',
+            color: '#334155',
+            padding: {
+              bottom: 16
+            },
+            font: {
+              size: 14,
+              lineHeight: 2
+            }
+          },
+        },
+        scales: {
+          x: {
+            title: {
+              display: true,
+              text: 'Activity',
+              color: '#334155',
+              font: {
+                size: 12,
+                lineHeight: 2
+              }
+            },
+            ticks: {
+              display: true,
+              // maxRotation: 0, // 不旋轉 lable 0~50
+              color: '#64748b',
+            },
+            border: {
+              color: '#64748b',
+            },
+          },
+          y: {
+            // beginAtZero: true, // scale 包含 0
+            title: {
+              display: true,
+              text: 'Processing time',
+              color: '#334155',
+              font: {
+                size: 12,
+                lineHeight: 2
+              },
+            },
+            ticks:{
+              color: '#64748b',
+              padding: 8,
+              callback: function (value, index, ticks) {
+                return getFollowTimeLabel(value, maxY, 1)
+              }
+            },
+            grid: {
+              color: '#64748b',
+            },
+            border: {
+              display: false, // 隱藏左側多出來的線
+            },
+          },
+        },
+      };
+    },
+
+  },
   async created() {
     this.isLoading = true;
-    const routeParams = this.$route.params;
-    let id = routeParams.fileId;
-    let type = routeParams.type;
+    // const routeParams = this.$route.params;
+    // let id = routeParams.fileId;
+    // let type = routeParams.type;
 
-    // 取得 Performance Data
-    await this.performanceStore.getPerformance(type, id);
+    // // 取得 Performance Data
+    // await this.performanceStore.getPerformance(type, id);
+    this.getAvgCycleTime();
+    this.getAvgCycleEfficiency();
+    this.getAvgProcessTimeByTask();
     this.isLoading = false;
   }
 }