From ac9e13d067b3242e427bd2ff11387bf43f6595b2 Mon Sep 17 00:00:00 2001
From: chiayin <chiayin.kuo@dsp.im>
Date: Tue, 6 Feb 2024 16:47:54 +0800
Subject: [PATCH] feat: Performance done.

---
 src/views/Discover/Performance/index.vue | 126 +++++++++++------------
 1 file changed, 58 insertions(+), 68 deletions(-)

diff --git a/src/views/Discover/Performance/index.vue b/src/views/Discover/Performance/index.vue
index e3334c8..2f689ce 100644
--- a/src/views/Discover/Performance/index.vue
+++ b/src/views/Discover/Performance/index.vue
@@ -12,7 +12,7 @@
               </ul>
             </div>
             <div>
-              <p class="h2 text-base">Time Usage</p>
+              <p class="h2 text-base">Frequency</p>
               <ul class="list-disc list-inside text-sm leading-5 pl-3">
                 <li v-for="(item, index) in frequencyData" :key="index" :class="{active: isActive === item.tagId}" @click="isActive = item.tagId" class="cursor-pointer hover:text-primary"><a :href="item.tagId">{{ item.label }}</a></li>
               </ul>
@@ -29,10 +29,12 @@
               <li id="cycleTime" class="scroll-smooth">
                 <span class="inline-block py-4">Cycle Time & Efficiency</span>
                 <ul>
-                  <li class="bg-neutral-10 mb-4">
+                  <li class="bg-neutral-10 mb-4 p-1 border border-neutral-300 rounded">
+                    <span class="block font-bold text-sm leading-loose text-center my-2">{{ contentData.avgCycleTime.title }}</span>
                     <Chart type="line" :data="avgCycleTimeData" :options="avgCycleTimeOptions" class="h-96" />
                   </li>
-                  <li class="bg-neutral-10">
+                  <li class="bg-neutral-10 p-1 border border-neutral-300 rounded">
+                    <span class="block font-bold text-sm leading-loose text-center my-2">{{ contentData.avgCycleEfficiency.title }}<span class="material-symbols-outlined align-middle ml-2 cursor-pointer text-base" v-tooltip.bottom="tooltip.avgCycleEfficiency">info</span></span>
                     <Chart type="bar" :data="avgCycleEfficiencyData" :options="avgCycleEfficiencyOptions" class="h-96" />
                   </li>
                 </ul>
@@ -40,22 +42,26 @@
               <li id="processingTime">
                 <span class="inline-block py-4">Processing Time</span>
                 <ul>
-                  <li class="bg-neutral-10 mb-4">
+                  <li class="bg-neutral-10 mb-4 p-1 border border-neutral-300 rounded">
+                    <span class="block font-bold text-sm leading-loose text-center my-2">{{ contentData.avgProcessTime.title }}</span>
                     <Chart type="line" :data="avgProcessTimeData" :options="avgProcessTimeOptions" class="h-96" />
                   </li>
-                  <li class="bg-neutral-10">
-                    <Chart type="bar" :data="avgProcessTimeByTaskData" :options="avgProcessTimeByTaskOptions" :height="horizontalBar"/>
+                  <li class="bg-neutral-10 p-1 border border-neutral-300 rounded">
+                    <span class="block font-bold text-sm leading-loose text-center my-2">{{ contentData.avgProcessTimeByTask.title }}</span>
+                    <Chart type="bar" :data="avgProcessTimeByTaskData" :options="avgProcessTimeByTaskOptions" class="h-[500px]" :style="{ height: avgProcessTimeByTaskHeight }"/>
                   </li>
                 </ul>
               </li>
               <li id="waitingTime">
                 <span class="inline-block py-4">Waiting Time</span>
                 <ul>
-                  <li class="bg-neutral-10 mb-4">
+                  <li class="bg-neutral-10 mb-4 p-1 border border-neutral-300 rounded">
+                    <span class="block font-bold text-sm leading-loose text-center my-2">{{ contentData.avgWaitingTime.title }}</span>
                     <Chart type="line" :data="avgWaitingTimeData" :options="avgWaitingTimeOptions" class="h-96" />
                   </li>
-                  <li class="bg-neutral-10">
-                    <Chart type="bar" :data="avgWaitingTimeByEdgeData" :options="avgWaitingTimeByEdgeOptions" :height="horizontalBar"/>
+                  <li class="bg-neutral-10 p-1 border border-neutral-300 rounded">
+                    <span class="block font-bold text-sm leading-loose text-center my-2">{{ contentData.avgWaitingTimeByEdge.title }}<span class="material-symbols-outlined align-middle ml-2 cursor-pointer text-base" v-tooltip.bottom="tooltip.avgWaitingTimeByEdge">info</span></span>
+                    <Chart type="bar" :data="avgWaitingTimeByEdgeData" :options="avgWaitingTimeByEdgeOptions" :style="{ height: avgWaitingTimeByEdgeHeight }" class="h-[500px]" />
                   </li>
                 </ul>
               </li>
@@ -67,11 +73,14 @@
               <li id="cases">
                 <span class="inline-block py-4">Number of Cases</span>
                 <ul>
-                  <li class="bg-neutral-10 mb-4">
+                  <li class="bg-neutral-10 mb-4 p-1 border border-neutral-300 rounded">
+                    <span class="block font-bold text-sm leading-loose text-center my-2">{{ contentData.freq.title }}</span>
                     <Chart type="line" :data="freqData" :options="freqOptions" class="h-96" />
                   </li>
-                  <li class="bg-neutral-10">
-                    <Chart type="bar" :data="casesByTaskData" :options="casesByTaskOptions" :height="horizontalBar"/>
+                  <li class="bg-neutral-10 p-1 border border-neutral-300 rounded">
+                    <span class="block font-bold text-sm leading-loose text-center my-2">{{ contentData.casesByTask.title }}</span>
+                    <Chart type="bar" :data="casesByTaskData" :options="casesByTaskOptions"
+                    :style="{ height: casesByTaskHeight }" class="h-[500px]"/>
                   </li>
                 </ul>
               </li>
@@ -80,7 +89,7 @@
         </article>
       </div>
     </div>
-    <!-- <StatusBar></StatusBar> -->
+    <StatusBar></StatusBar>
   </main>
 </template>
 <script>
@@ -125,6 +134,19 @@ export default {
         freq: {title: 'New Cases', x: 'Date', y: 'Count'},
         casesByTask: {title: 'Number of Cases by Activity', x: 'Count', y: 'Activity'},
       },
+      tooltip: {
+        avgCycleEfficiency: {
+          value: 'Cycle Efficiency: The ratio of the total productive time to the total cycle time of a process. Productive time refers to the time during which value-adding activities are performed, while cycle time is the total time from the start to the end of the process, including both productive and non-productive periods.',
+          class: '!max-w-[212px] !text-[10px] !opacity-80',
+          autoHide: false,
+        },
+        avgWaitingTimeByEdge: {
+          value: 'Average Waiting Time Between Activities : The average duration during which a task or an item (like a work order, a product, or a piece of information) is on hold or idle before the next step in the process can begin.  This time does not contribute to the active progression of the task but is instead a period of inactivity.',
+          class: '!max-w-[212px] !text-[10px] !opacity-80',
+          autoHide: false,
+        }
+
+      },
       isActive: null,
       avgCycleTimeData: null,
       avgCycleTimeOptions: null,
@@ -143,18 +165,9 @@ export default {
       casesByTaskData: null,
       casesByTaskOptions: null,
       horizontalBarHeight: 500, // horizontal Bar default height
-      horizontalBar: 500,
-      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-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": "ime", "y": 132695.481328 }, { "x": " Time", "y": 124443.590361 }, { "x": "f", "y": 127175.068273 }, { "x": "g", "y": 127628.964427 }, { "x": "hProcessing TimeProcessing TimeProcessing TimeProcessing TimeProcessing Time", "y": 128165.104294 }, { "x": "i", "y": 125586.248649 }, { "x": "j", "y": 101297.681818 }, { "x": "k Processing Time", "y": 142538.479167 }, { "x": "l", "y": 138069.642857 }, { "x": "a", "y": 131148.320856 }, { "x": "b", "y": 136626.705882 }, { "x": "c", "y": 133260.041667 }, { "x": "ime", "y": 132695.481328 }, { "x": " Time", "y": 124443.590361 }, { "x": "f", "y": 127175.068273 }, { "x": "g", "y": 127628.964427 }, { "x": "hProcessing TimeProcessing TimeProcessing TimeProcessing TimeProcessing Time", "y": 128165.104294 }, { "x": "i", "y": 125586.248649 }, { "x": "j", "y": 101297.681818 }, { "x": "k Processing Time", "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": [ "a123456789123456789", "a123456789" ], "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 } } }
-      }
+      avgProcessTimeByTaskHeight: 500,
+      avgWaitingTimeByEdgeHeight: 500,
+      casesByTaskHeight: 500
     }
   },
   methods: {
@@ -170,6 +183,14 @@ export default {
       }
       return data;
     },
+    getHorizontalBarHeight(chartData) {
+      const totalBars = chartData.data.length;
+      let horizontalBar = this.horizontalBarHeight;
+
+      if(totalBars > 10) horizontalBar = (totalBars - 10) * 20 + this.horizontalBarHeight;
+
+      return horizontalBar + 'px'
+    },
     getLineChart(chartData, content) {
       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;
@@ -221,17 +242,7 @@ export default {
             },
           },
           title: {
-            display: true,
-            text: content.title,
-            color: '#334155',
-            padding: {
-              bottom: 16
-            },
-            font: {
-              size: 14,
-              lineHeight: 2
-            },
-            fullSize: false, // 並非在畫面的正中間，而是圖表正中間
+            display: false,
           },
         },
         scales: {
@@ -348,17 +359,7 @@ export default {
             },
           },
           title: {
-            display: true,
-            text: content.title,
-            color: '#334155',
-            padding: {
-              bottom: 16
-            },
-            font: {
-              size: 14,
-              lineHeight: 2
-            },
-            fullSize: false, // 並非在畫面的正中間，而是圖表正中間
+            display: false,
           },
         },
         scales: {
@@ -412,7 +413,7 @@ export default {
 
       return [setData, setOption]
     },
-    getHorizontalBarChart(chartData, content, isSingle) {
+    getHorizontalBarChart(chartData, content, isSingle, name) {
       const maxY = chartData.y_axis.max;
       const getSimpleTimeLabel = simpleTimeLabel;
       const getFollowTimeLabel = followTimeLabel;
@@ -423,9 +424,6 @@ export default {
       chartData.data.sort((a, b) => b.y - a.y);
       const xData = chartData.data.map(item => item.x);
       const yData = chartData.data.map(item => item.y);
-      const totalBars = chartData.data.length;
-
-      if(totalBars > 10) this.horizontalBar = (totalBars - 10) * 20 + this.horizontalBarHeight;
 
       setData = {
         labels: xData,
@@ -460,17 +458,7 @@ export default {
             },
           },
           title: {
-            display: true,
-            text: content.title,
-            color: '#334155',
-            padding: {
-              bottom: 16
-            },
-            font: {
-              size: 14,
-              lineHeight: 2
-            },
-            fullSize: false, // 並非在畫面的正中間，而是圖表正中間
+            display: false,
           },
         },
         scales: {
@@ -552,26 +540,28 @@ export default {
     },
   },
   async created() {
-    this.isLoading = true;
+    this.isLoading = true; // moubeted 才停止 loading
     const routeParams = this.$route.params;
     let id = routeParams.fileId;
     let type = routeParams.type;
 
     // 取得 Performance Data
     await this.performanceStore.getPerformance(type, id);
-    console.log(this.performanceData);
-
+    this.avgProcessTimeByTaskHeight = await this.getHorizontalBarHeight(this.performanceData.time.avg_process_time_by_task);
+    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.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.avgProcessTimeByTaskData, this.avgProcessTimeByTaskOptions] = this.getHorizontalBarChart(this.performanceData.time.avg_process_time_by_task, this.contentData.avgProcessTimeByTask, true);
     [this.avgWaitingTimeData, this.avgWaitingTimeOptions] = this.getLineChart(this.performanceData.time.avg_waiting_time, this.contentData.avgWaitingTime);
-    [this.avgWaitingTimeByEdgeData, this.avgWaitingTimeByEdgeOptions] = this.getHorizontalBarChart(this.performanceData.time.avg_waiting_time_by_edge, this.contentData.avgWaitingTimeByEdge, true);
+    [this.avgWaitingTimeByEdgeData, this.avgWaitingTimeByEdgeOptions] = this.getHorizontalBarChart(this.performanceData.time.avg_waiting_time_by_edge, this.contentData.avgWaitingTimeByEdge, false);
     [this.freqData, this.freqOptions] = this.getLineChart(this.performanceData.freq.cases, this.contentData.freq);
     [this.casesByTaskData, this.casesByTaskOptions] = this.getHorizontalBarChart(this.performanceData.freq.cases_by_task, this.contentData.casesByTask, true);
-
+    // 停止 loading
     this.isLoading = false;
-  }
+  },
 }
 </script>
 <style scoped>