From c0c455c55c7be14cd718705427bd7b3c7b27a149 Mon Sep 17 00:00:00 2001
From: Cindy Chang <cindy.chang@dsp.im>
Date: Thu, 6 Jun 2024 15:16:43 +0800
Subject: [PATCH] refine performance code layout

---
 src/stores/conformanceData.js            | 14 ++++
 src/views/Discover/Performance/index.vue | 86 ++++++++++++++++++------
 2 files changed, 80 insertions(+), 20 deletions(-)

diff --git a/src/stores/conformanceData.js b/src/stores/conformanceData.js
index 2907dd2..a2a2b28 100644
--- a/src/stores/conformanceData.js
+++ b/src/stores/conformanceData.js
@@ -21,5 +21,19 @@ export default defineStore('conformanceDataStore', {
     setConformanceData(userInputObj){
       this.dataToSave = {...userInputObj};
     },
+    /**
+     * Set the starting time of time range to be saved later
+     * @param {string} startStr 
+     */
+    setConformanceDataStart(startStr){
+      this.dataToSave.start = startStr;
+    },
+    /**
+     * Set the ending time of time range to be saved later
+     * @param {string} startStr 
+     */
+    setConformanceDataEnd(endStr){
+      this.dataToSave.end = endStr;
+    },
   },
 })
\ No newline at end of file
diff --git a/src/views/Discover/Performance/index.vue b/src/views/Discover/Performance/index.vue
index baa4208..625cec4 100644
--- a/src/views/Discover/Performance/index.vue
+++ b/src/views/Discover/Performance/index.vue
@@ -8,13 +8,21 @@
             <div>
               <p class="h1">Time Usage</p>
               <ul class="list-disc list-inside text-sm leading-5 pl-3">
-                <li v-for="(item, index) in timeUsageData" :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>
+                <li v-for="(item, index) in timeUsageData" :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>
             </div>
             <div>
               <p class="h1">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>
+                <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>
             </div>
           </section>
@@ -22,7 +30,11 @@
         <!-- graph -->
         <article class="w-full h-full overflow-x-hidden overflow-y-auto scrollbar scroll-smooth">
           <section>
-            <p class="h1 px-4 border-b border-neutral-900"><span class="material-symbols-outlined mr-2 align-middle">schedule</span>Time Usage</p>
+            <p class="h1 px-4 border-b border-neutral-900"><span class="material-symbols-outlined mr-2 align-middle">
+                schedule
+              </span>
+              Time Usage
+            </p>
           </section>
           <section>
             <ul class="list-disc list-inside px-4 pl-7 text-sm">
@@ -30,11 +42,16 @@
                 <span class="inline-block py-4">Cycle Time & Efficiency</span>
                 <ul>
                   <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>
+                    <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 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>
+                    <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>
@@ -43,12 +60,17 @@
                 <span class="inline-block py-4">Processing Time</span>
                 <ul>
                   <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>
+                    <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 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 }"/>
+                    <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>
@@ -56,13 +78,25 @@
                 <span class="inline-block py-4">Waiting Time</span>
                 <ul>
                   <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 class="material-symbols-outlined align-middle ml-2 cursor-pointer !text-base" v-tooltip.bottom="tooltip.avgWaitingTime">info</span></span>
+                    <span class="block font-bold text-sm leading-loose text-center my-2">
+                      {{ contentData.avgWaitingTime.title }}
+                      <span class="material-symbols-outlined align-middle ml-2 cursor-pointer !text-base"
+                        v-tooltip.bottom="tooltip.avgWaitingTime">
+                        info
+                      </span></span>
                     <Chart type="line" :data="avgWaitingTimeData" :options="avgWaitingTimeOptions" class="h-96" />
                   </li>
                   <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>
+                    <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>
                     <div>
-                      <Chart v-if="avgWaitingTimeByEdgeData !== null" type="bar" :data="avgWaitingTimeByEdgeData" :options="avgWaitingTimeByEdgeOptions" :style="{ height: avgWaitingTimeByEdgeHeight }" class="h-[500px]" />
+                      <Chart v-if="avgWaitingTimeByEdgeData !== null" type="bar" :data="avgWaitingTimeByEdgeData"
+                        :options="avgWaitingTimeByEdgeOptions" :style="{ height: avgWaitingTimeByEdgeHeight }"
+                          class="h-[500px]" />
                       <div v-else class="h-96 bg-neutral-100 m-4 flex">
                         <p class="h2 text-danger m-auto">No waiting time.</p>
                       </div>
@@ -73,7 +107,11 @@
             </ul>
           </section>
           <section>
-            <p class="h1 px-4 border-b border-neutral-900"><span class="material-symbols-outlined mr-2 align-middle">moving</span>Frequency</p>
+            <p class="h1 px-4 border-b border-neutral-900"><span class="material-symbols-outlined mr-2 align-middle">
+                moving
+              </span>
+                Frequency
+            </p>
             <ul class="list-disc list-inside px-4 pl-7 text-sm">
               <li id="cases">
                 <span class="inline-block py-4">Number of Cases</span>
@@ -232,7 +270,8 @@ export default {
 
       switch (yUnit) {
         case 'date':
-          datasets = setLineChartData(chartData.data, chartData.x_axis.max, chartData.x_axis.min, false, chartData.y_axis.max, chartData.y_axis.min);
+          datasets = setLineChartData(chartData.data, chartData.x_axis.max, chartData.x_axis.min, false, chartData.y_axis.max,
+          chartData.y_axis.min);
           xData = this.xLabelsData(chartData.x_axis);
           break;
         case 'count': // 次數 10 個點
@@ -632,18 +671,25 @@ export default {
     }
     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, 'date');
-    [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, 'date');
-    [this.avgProcessTimeByTaskData, this.avgProcessTimeByTaskOptions] = this.getHorizontalBarChart(this.performanceData.time.avg_process_time_by_task, this.contentData.avgProcessTimeByTask, true, 'date');
-    [this.avgWaitingTimeData, this.avgWaitingTimeOptions] = this.getLineChart(this.performanceData.time.avg_waiting_time, this.contentData.avgWaitingTime, 'date');
+    [this.avgCycleTimeData, this.avgCycleTimeOptions] = this.getLineChart(this.performanceData.time.avg_cycle_time,
+      this.contentData.avgCycleTime, 'date');
+    [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, 'date');
+    [this.avgProcessTimeByTaskData, this.avgProcessTimeByTaskOptions] = this.getHorizontalBarChart(
+      this.performanceData.time.avg_process_time_by_task, this.contentData.avgProcessTimeByTask, true, 'date');
+    [this.avgWaitingTimeData, this.avgWaitingTimeOptions] = this.getLineChart(
+      this.performanceData.time.avg_waiting_time, this.contentData.avgWaitingTime, 'date');
     if(this.performanceData.time.avg_waiting_time_by_edge !== null) {
-      [this.avgWaitingTimeByEdgeData, this.avgWaitingTimeByEdgeOptions] = this.getHorizontalBarChart(this.performanceData.time.avg_waiting_time_by_edge, this.contentData.avgWaitingTimeByEdge, false, 'date');
+      [this.avgWaitingTimeByEdgeData, this.avgWaitingTimeByEdgeOptions] = this.getHorizontalBarChart(
+        this.performanceData.time.avg_waiting_time_by_edge, this.contentData.avgWaitingTimeByEdge, false, 'date');
     } else {
       [this.avgWaitingTimeByEdgeData, this.avgWaitingTimeByEdgeOptions] = [null, null]
     }
     [this.freqData, this.freqOptions] = this.getLineChart(this.performanceData.freq.cases, this.contentData.freq, 'count');
-    [this.casesByTaskData, this.casesByTaskOptions] = this.getHorizontalBarChart(this.performanceData.freq.cases_by_task, this.contentData.casesByTask, true, 'count');
+    [this.casesByTaskData, this.casesByTaskOptions] = this.getHorizontalBarChart(this.performanceData.freq.cases_by_task,
+      this.contentData.casesByTask, true, 'count');
     // 停止 loading
     this.isLoading = false;
   },