feat: Performance timeLabel done.

cypress/e2e/fileUploadEtc.cy.js

@@ -136,24 +136,24 @@ describe('File Upload etc', () => {
   //     .should('include', 'rightFile');
   // });
 
-  it('Donwload file.', () => {
+  // it('Donwload file.', () => {
-    const downloadsFolder = Cypress.config('downloadsFolder');
+  //   const downloadsFolder = Cypress.config('downloadsFolder');
-    const path = require('path');
+  //   const path = require('path');
-    const filename = path.join(downloadsFolder, 'rightFile.csv');
+  //   const filename = path.join(downloadsFolder, 'rightFile.csv');
 
-    // 選取檔案
+  //   // 選取檔案
-    cy.get('table tbody tr:first-child td:first-child')
+  //   cy.get('table tbody tr:first-child td:first-child')
-      .contains('rightFile')
+  //     .contains('rightFile')
-      .rightclick();
+  //     .rightclick();
-    cy.get('.p-contextmenu')
+  //   cy.get('.p-contextmenu')
-      .find('li')
+  //     .find('li')
-      .filter(':contains("Download")')
+  //     .filter(':contains("Download")')
-      .click();
+  //     .click();
-    cy.wait(2000);
+  //   cy.wait(2000);
-    // download to '/cypress/downloads'
+  //   // download to '/cypress/downloads'
-    cy.readFile(filename);
+  //   cy.readFile(filename);
-    cy.wait(2000);
+  //   cy.wait(2000);
-  })
+  // });
 
   // it('Delete file.', () => {
   //   // select file

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 {

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 {

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 timeLabelInt = text + getTimeLabel(optionValue);
-                  let timeLabelFloat = text + TimeLabel(optionValue.toFixed(2));
+                  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 timeLabelInt = getTimeLabel(optionValue);
-                let timeLabelFloat = TimeLabel(optionValue.toFixed(2));
+                let timeLabelFloat = getTimeLabel(optionValue.toFixed(2));
                 let edgeTimeLabel = Math.trunc(optionValue) === optionValue ? timeLabelInt : timeLabelFloat;
 
                 result = dataLayerOption === 'rel_duration' ? edgeDurRel : edgeTimeLabel;

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) {

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;
+}

src/router/index.js

@@ -79,11 +79,11 @@ const routes = [
             component: Conformance,
             props: true,
           },
-          {
+          // {
-            path: "/discover/performance/:type/:fileId",
+          //   path: "/discover/performance/:type/:fileId",
-            name: "Performance",
+          //   name: "Performance",
-            component: Performance,
+          //   component: Performance,
-          }
+          // }
         ]
       },
     ]
@@ -93,11 +93,11 @@ const routes = [
     name: "NotFound404",
     component: NotFound404,
   },
-  // {
+  {
-  //   path: "/discover/performance",
+    path: "/discover/performance",
-  //   name: "Performance",
+    name: "Performance",
-  //   component: Performance,
+    component: Performance,
-  // }
+  }
 ];
 
 const base_url = import.meta.env.BASE_URL;

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':

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="">
+                <div>
-                  圖 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 mb-4">
-                  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!
+                    <Chart type="line" :data="avgCycleTimeData" :options="avgCycleTimeOptions" class="h-96" />
-                  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">
+                    <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!
+                  <div class="card bg-neutral-10">
-                  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!
+                    <Chart type="bar" :data="avgProcessTimeByTaskData" :options="avgProcessTimeByTaskOptions" class="h-96" />
-                  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>
               </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;
+    // const routeParams = this.$route.params;
-    let id = routeParams.fileId;
+    // let id = routeParams.fileId;
-    let type = routeParams.type;
+    // let type = routeParams.type;
 
-    // 取得 Performance Data
+    // // 取得 Performance Data
-    await this.performanceStore.getPerformance(type, id);
+    // await this.performanceStore.getPerformance(type, id);
+    this.getAvgCycleTime();
+    this.getAvgCycleEfficiency();
+    this.getAvgProcessTimeByTask();
     this.isLoading = false;
   }
 }