From c608b1cc5209ec1e5a2c2e68657043e976e526be Mon Sep 17 00:00:00 2001
From: chiayin <chiayin.kuo@dsp.im>
Date: Wed, 27 Mar 2024 11:20:54 +0800
Subject: [PATCH] fix: Issues #278 done.

---
 src/views/Compare/Dashboard/index.vue    | 23 ++++++++++++++++++++---
 src/views/Discover/Performance/index.vue | 14 +++++++++-----
 2 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/src/views/Compare/Dashboard/index.vue b/src/views/Compare/Dashboard/index.vue
index 638f852..1f002da 100644
--- a/src/views/Compare/Dashboard/index.vue
+++ b/src/views/Compare/Dashboard/index.vue
@@ -28,7 +28,7 @@
                 <span class="inline-block py-4">Cycle Efficiency</span>
                 <ul>
                   <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>
+                    <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>
@@ -50,11 +50,11 @@
                 <span class="inline-block py-4 text-sm">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>
+                    <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>
+                    <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]" />
                       <div v-else class="h-96 bg-neutral-100 m-4 flex">
@@ -141,6 +141,23 @@ export default {
         freq: {title: 'New Cases', x: 'Date', y: 'Count'},
         casesByTask: {title: 'Number of Cases by Activity', x: 'Times', 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,
+        },
+        avgWaitingTime: {
+          value: 'Average Waiting Time: 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,
+        },
+        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,
diff --git a/src/views/Discover/Performance/index.vue b/src/views/Discover/Performance/index.vue
index 29ab0b0..13c3f56 100644
--- a/src/views/Discover/Performance/index.vue
+++ b/src/views/Discover/Performance/index.vue
@@ -56,7 +56,7 @@
                 <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>
+                    <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">
@@ -147,12 +147,16 @@ export default {
           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.',
+        avgWaitingTime: {
+          value: 'Average Waiting Time: 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,
-        }
-
+        },
+        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,