From 83bcf173643622374849be46ea3ef4090907f60e Mon Sep 17 00:00:00 2001
From: Cindy Chang <cindy.chang@dsp.im>
Date: Fri, 16 Aug 2024 11:10:20 +0800
Subject: [PATCH] almost all summary are done

---
 src/components/Discover/Map/SidebarState.vue | 65 +++++++++-----------
 1 file changed, 28 insertions(+), 37 deletions(-)

diff --git a/src/components/Discover/Map/SidebarState.vue b/src/components/Discover/Map/SidebarState.vue
index e32d8ef..12e1210 100644
--- a/src/components/Discover/Map/SidebarState.vue
+++ b/src/components/Discover/Map/SidebarState.vue
@@ -15,8 +15,8 @@
       <ul class="pb-4 border-b border-neutral-300">
         <li>
           <p class="h2">{{ i18next.t("Map.FileName") }}</p>
-          <div class="flex justify-between items-center">
-            <span>{{ currentMapFile }}</span>
+          <div class="flex items-center">
+            <div class="blue-dot w-3 h-3 bg-[#0099FF] rounded-full mr-2"></div><span>{{ currentMapFile }}</span>
           </div>
         </li>
       </ul>      
@@ -25,49 +25,52 @@
           <p class="h2">Cases</p>
           <div class="flex justify-between items-center">
             <div class="w-full mr-8">
-              <span class="block text-sm">{{ stats.cases.count.toLocaleString() }} / {{ stats.cases.total.toLocaleString() }}</span>
-              <ProgressBar :value="valueCases" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300"></ProgressBar>
+              <span class="block text-[12px]">{{ stats.cases.count.toLocaleString() }} / {{ stats.cases.total.toLocaleString() }}</span>
+              <ProgressBar :value="valueCases" :showValue="false" class="!h-2 !rounded-full my-1 !bg-neutral-300"></ProgressBar>
             </div>
-            <span class="block text-primary text-2xl text-right font-medium basis-28">{{ getPercentLabel(stats.cases.ratio) }}</span>
+            <span class="block text-primary text-[20px] text-right font-medium basis-28">{{ getPercentLabel(stats.cases.ratio) }}</span>
           </div>
         </li>
         <li>
           <p class="h2">Traces</p>
           <div class="flex justify-between items-center">
             <div class="w-full mr-8">
-              <span class="block text-sm">{{ stats.traces.count.toLocaleString() }} / {{ stats.traces.total.toLocaleString() }}</span>
-              <ProgressBar :value="valueTraces" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300"></ProgressBar>
+              <span class="block text-[12px]">{{ stats.traces.count.toLocaleString() }} / {{ stats.traces.total.toLocaleString() }}</span>
+              <ProgressBar :value="valueTraces" :showValue="false" class="!h-2 !rounded-full my-1 !bg-neutral-300"></ProgressBar>
             </div>
-            <span class="block text-primary text-2xl text-right font-medium basis-28">{{ getPercentLabel(stats.traces.ratio) }}</span>
+            <span class="block text-primary text-[20px] text-right font-medium basis-28">{{ getPercentLabel(stats.traces.ratio) }}</span>
           </div>
         </li>
         <li>
           <p class="h2">Activity Instances</p>
           <div class="flex justify-between items-center">
             <div class="w-full mr-8">
-              <span class="block text-sm">{{ stats.task_instances.count.toLocaleString() }} / {{ stats.task_instances.total.toLocaleString() }}</span>
-              <ProgressBar :value="valueTaskInstances" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300"></ProgressBar>
+              <span class="block text-[12px]">{{ stats.task_instances.count.toLocaleString() }} / {{ stats.task_instances.total.toLocaleString() }}</span>
+              <ProgressBar :value="valueTaskInstances" :showValue="false" class="!h-2 !rounded-full my-1 !bg-neutral-300"></ProgressBar>
             </div>
-            <span class="block text-primary text-2xl text-right font-medium basis-28">{{ getPercentLabel(stats.task_instances.ratio) }}</span>
+            <span class="block text-primary text-[20px] text-right font-medium basis-28">{{ getPercentLabel(stats.task_instances.ratio) }}</span>
           </div>
         </li>
         <li>
           <p class="h2">Activities</p>
           <div class="flex justify-between items-center">
             <div class="w-full mr-8">
-              <span class="block text-sm">{{ stats.tasks.count.toLocaleString() }} / {{ stats.tasks.total.toLocaleString() }}</span>
-              <ProgressBar :value="valueTasks" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300"></ProgressBar>
+              <span class="block text-[12px]">{{ stats.tasks.count.toLocaleString() }} / {{ stats.tasks.total.toLocaleString() }}</span>
+              <ProgressBar :value="valueTasks" :showValue="false" class="!h-2 !rounded-full my-1 !bg-neutral-300"></ProgressBar>
             </div>
-            <span class="block text-primary text-2xl text-right font-medium basis-28">{{ getPercentLabel(stats.tasks.ratio) }}</span>
+            <span class="block text-primary text-[20px] text-right font-medium basis-28">{{ getPercentLabel(stats.tasks.ratio) }}</span>
           </div>
         </li>
       </ul>
       <!-- Log Timeframe -->
       <div class="pt-1 pb-4 border-b border-neutral-300">
         <p class="h2">Log Timeframe</p>
-        <p class="text-sm"><span class="px-4">{{ moment(stats.started_at
-  ) }}</span>~<span class="px-4">{{ moment(stats.completed_at
-  ) }}</span></p>
+        <p class="text-sm flex items-center">
+          <div class="blue-dot w-3 h-3 bg-[#0099FF] rounded-full mr-2 flex"></div>
+          <span class="pr-1 flex">{{ moment(stats.started_at) }}</span>
+          ~
+          <span class="pl-1 flex">{{ moment(stats.completed_at) }}</span>
+        </p>
       </div>
       <!-- Case Duration -->
       <div class="pt-1 pb-4">
@@ -80,44 +83,32 @@
               <td>
                 <Tag value="MIN" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>
               </td>
-              <td>
-                {{ timeLabel(stats.case_duration.min)[1] }}
-              </td>
-              <td>
-                {{ timeLabel(stats.case_duration.min)[2] }}
+              <td class="text-[#0099FF] flex w-20 justify-end">
+                {{ timeLabel(stats.case_duration.min)[1] + ' ' + timeLabel(stats.case_duration.min)[2] }}
               </td>
             </tr>
             <tr>
               <td>
                 <Tag value="AVG" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>
               </td>
-              <td>
-                {{ timeLabel(stats.case_duration.average)[1] }}
-              </td>
-              <td>
-                {{ timeLabel(stats.case_duration.average)[2] }}
+              <td class="text-[#0099FF] flex w-20 justify-end">
+                {{ timeLabel(stats.case_duration.average)[1] + ' ' + timeLabel(stats.case_duration.average)[2] }}
               </td>
             </tr>
             <tr>
               <td>
                 <Tag value="MED" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>
               </td>
-              <td>
-                {{ timeLabel(stats.case_duration.median)[1] }}
-              </td>
-              <td>
-                {{ timeLabel(stats.case_duration.median)[2] }}
+              <td class="text-[#0099FF] flex w-20 justify-end">
+                {{ timeLabel(stats.case_duration.median)[1] + ' ' + timeLabel(stats.case_duration.median)[2] }}
               </td>
             </tr>
             <tr>
               <td>
                 <Tag value="MAX" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>
               </td>
-              <td>
-                {{ timeLabel(stats.case_duration.max)[1] }}
-              </td>
-              <td>
-                {{ timeLabel(stats.case_duration.max)[2] }}
+              <td class="text-[#0099FF] flex w-20 justify-end">
+                {{ timeLabel(stats.case_duration.max)[1] + ' ' + timeLabel(stats.case_duration.max)[2] }}
               </td>
             </tr>
           </tbody>