fix: Issues #278 done.

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,

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: {
+        avgWaitingTime: {
-          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.',
+          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,