feat: Compare sidebar layout done.

src/components/Compare/SidebarStates.vue

@@ -0,0 +1,277 @@
+<template>
+  <Sidebar :visible="sidebarState" :closeIcon="'pi pi-angle-right'" :modal="false" position="right" :dismissable="false" class="!w-[440px]" @hide="hide" @show="show">
+    <template #header>
+      <p class="pl-2 text-base font-bold text-neutral-900">Summary</p>
+      <!-- <ul class=" pl-4">
+        <li class="h1 text-neutral-900">Summary</li>
+      </ul> -->
+    </template>
+    <!-- header: summary -->
+    <div class="flex justify-start items-start">
+      <!-- 001 -->
+      <section class="w-[204px] box-border pr-4">
+        <div class="mb-4">
+          <p class="h2">File Name</p>
+          <p class="text-sm whitespace-nowrap break-keep overflow-hidden text-ellipsis" title="新光三越信義新天地母親節檔期 新光三越信義新天地母親節檔期 新光三越信義新天地母親節檔期">新光三越信義新天地母親節檔期 新光三越信義新天地母親節檔期 新光三越信義新天地母親節檔期</p>
+        </div>
+        <!-- Stats -->
+        <ul class="pb-4 border-b border-neutral-300">
+          <li>
+            <p class="h2">Cases</p>
+            <div class="flex justify-between items-center">
+              <div class="w-full mr-4">
+                <span class="block text-sm">{{ statData.cases.count }} / {{ statData.cases.total }}</span>
+                <ProgressBar :value="valueCases" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300"></ProgressBar>
+              </div>
+              <span class="block text-primary text-2xl text-right font-medium basis-28">{{ statData.cases.ratio }}%</span>
+            </div>
+          </li>
+          <li>
+            <p class="h2">Traces</p>
+            <div class="flex justify-between items-center">
+              <div class="w-full mr-4">
+                <span class="block text-sm">{{ statData.traces.count }} / {{ statData.traces.total }}</span>
+                <ProgressBar :value="valueTraces" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300"></ProgressBar>
+              </div>
+              <span class="block text-primary text-2xl text-right font-medium basis-28">{{ statData.traces.ratio }}%</span>
+            </div>
+          </li>
+          <li>
+            <p class="h2">Activity Instances</p>
+            <div class="flex justify-between items-center">
+              <div class="w-full mr-4">
+                <span class="block text-sm">{{ statData.task_instances.count }} / {{ statData.task_instances.total }}</span>
+                <ProgressBar :value="valueTaskInstances" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300"></ProgressBar>
+              </div>
+              <span class="block text-primary text-2xl text-right font-medium basis-28">{{ statData.task_instances.ratio }}%</span>
+            </div>
+          </li>
+          <li>
+            <p class="h2">Activities</p>
+            <div class="flex justify-between items-center">
+              <div class="w-full mr-4">
+                <span class="block text-sm">{{ statData.tasks.count }} / {{ statData.tasks.total }}</span>
+                <ProgressBar :value="valueTasks" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300"></ProgressBar>
+              </div>
+              <span class="block text-primary text-2xl text-right font-medium basis-28">{{ statData.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>
+          <div class="space-y-2 text-sm text-center">
+            <span class="block">{{ statData.started_at }}&nbsp</span>
+            <span class="block">~</span>
+            <span class="block">&nbsp{{ statData.completed_at }}</span>
+          </div>
+        </div>
+        <!-- Case Duration -->
+        <div class="pt-1 pb-4">
+          <p class="h2">Case Duration</p>
+          <ul class="space-y-1 text-sm">
+            <li><Tag value="MIN" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ statData.case_duration.min }}</li>
+            <li><Tag value="AVG" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ statData.case_duration.average }}</li>
+            <li><Tag value="MED" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ statData.case_duration.median }}</li>
+            <li><Tag value="MAX" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ statData.case_duration.max }}</li>
+          </ul>
+        </div>
+      </section>
+      <!-- 002 -->
+      <section class="w-[204px] box-border pl-4">
+        <div class="mb-4">
+          <p class="h2">File Name</p>
+          <p class="text-sm whitespace-nowrap break-keep overflow-hidden text-ellipsis" title="新光三越信義新天地母親節檔期 新光三越信義新天地母親節檔期 新光三越信義新天地母親節檔期">新光三越信義新天地母親節檔期 新光三越信義新天地母親節檔期 新光三越信義新天地母親節檔期</p>
+        </div>
+        <!-- Stats -->
+        <ul class="pb-4 border-b border-neutral-300">
+          <li>
+            <p class="h2">Cases</p>
+            <div class="flex justify-between items-center">
+              <div class="w-full mr-4">
+                <span class="block text-sm">{{ statData.cases.count }} / {{ statData.cases.total }}</span>
+                <ProgressBar :value="valueCases" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300"></ProgressBar>
+              </div>
+              <span class="block text-primary text-2xl text-right font-medium basis-28">{{ statData.cases.ratio }}%</span>
+            </div>
+          </li>
+          <li>
+            <p class="h2">Traces</p>
+            <div class="flex justify-between items-center">
+              <div class="w-full mr-4">
+                <span class="block text-sm">{{ statData.traces.count }} / {{ statData.traces.total }}</span>
+                <ProgressBar :value="valueTraces" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300"></ProgressBar>
+              </div>
+              <span class="block text-primary text-2xl text-right font-medium basis-28">{{ statData.traces.ratio }}%</span>
+            </div>
+          </li>
+          <li>
+            <p class="h2">Activity Instances</p>
+            <div class="flex justify-between items-center">
+              <div class="w-full mr-4">
+                <span class="block text-sm">{{ statData.task_instances.count }} / {{ statData.task_instances.total }}</span>
+                <ProgressBar :value="valueTaskInstances" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300"></ProgressBar>
+              </div>
+              <span class="block text-primary text-2xl text-right font-medium basis-28">{{ statData.task_instances.ratio }}%</span>
+            </div>
+          </li>
+          <li>
+            <p class="h2">Activities</p>
+            <div class="flex justify-between items-center">
+              <div class="w-full mr-4">
+                <span class="block text-sm">{{ statData.tasks.count }} / {{ statData.tasks.total }}</span>
+                <ProgressBar :value="valueTasks" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300"></ProgressBar>
+              </div>
+              <span class="block text-primary text-2xl text-right font-medium basis-28">{{ statData.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>
+          <div class="space-y-2 text-sm text-center">
+            <span class="block">{{ statData.started_at }}&nbsp</span>
+            <span class="block">~</span>
+            <span class="block">&nbsp{{ statData.completed_at }}</span>
+          </div>
+        </div>
+        <!-- Case Duration -->
+        <div class="pt-1 pb-4">
+          <p class="h2">Case Duration</p>
+          <ul class="space-y-1 text-sm">
+            <li><Tag value="MIN" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ statData.case_duration.min }}</li>
+            <li><Tag value="AVG" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ statData.case_duration.average }}</li>
+            <li><Tag value="MED" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ statData.case_duration.median }}</li>
+            <li><Tag value="MAX" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ statData.case_duration.max }}</li>
+          </ul>
+        </div>
+      </section>
+    </div>
+  </Sidebar>
+</template>
+
+<script>
+import { storeToRefs } from 'pinia';
+import AllMapDataStore from '@/stores/allMapData.js';
+import { getTimeLabel } from '@/module/timeLabel.js';
+import getMoment from 'moment';
+
+export default {
+  setup() {
+    const allMapDataStore = AllMapDataStore();
+    const { logId, stats, createFilterId } = storeToRefs(allMapDataStore);
+
+    return { logId, stats, createFilterId, allMapDataStore };
+  },
+  props:{
+    sidebarState: {
+      type: Boolean,
+      require: false,
+    },
+  },
+  data() {
+    return {
+      valueCases: 0,
+      valueTraces: 0,
+      valueTaskInstances: 0,
+      valueTasks: 0,
+      statData: null,
+    }
+  },
+  methods: {
+    /**
+     * Number to percentage
+     * @param   {number} val
+     * @returns {string} 轉換完成的百分比字串
+     */
+     getPercentLabel(val){
+      if((val * 100).toFixed(1) >= 100) return 100;
+      else return parseFloat((val * 100).toFixed(1));
+    },
+    /**
+     * setting stats data
+     */
+    getStatData() {
+      this.statData = {
+        cases: {
+          count: this.stats.cases.count.toLocaleString('en-US'),
+          total: this.stats.cases.total.toLocaleString('en-US'),
+          ratio: this.getPercentLabel(this.stats.cases.ratio)
+        },
+        traces: {
+          count: this.stats.traces.count.toLocaleString('en-US'),
+          total: this.stats.traces.total.toLocaleString('en-US'),
+          ratio: this.getPercentLabel(this.stats.traces.ratio)
+        },
+        task_instances: {
+          count: this.stats.task_instances.count.toLocaleString('en-US'),
+          total: this.stats.task_instances.total.toLocaleString('en-US'),
+          ratio: this.getPercentLabel(this.stats.task_instances.ratio)
+        },
+        tasks: {
+          count: this.stats.tasks.count.toLocaleString('en-US'),
+          total: this.stats.tasks.total.toLocaleString('en-US'),
+          ratio: this.getPercentLabel(this.stats.tasks.ratio)
+        },
+        started_at: getMoment(this.stats.started_at).format('YYYY.MM.DD HH:mm'),
+        completed_at: getMoment(this.stats.completed_at).format('YYYY.MM.DD HH:mm'),
+        case_duration: {
+          min: getTimeLabel(this.stats.case_duration.min, 2),
+          max: getTimeLabel(this.stats.case_duration.max, 2),
+          average: getTimeLabel(this.stats.case_duration.average, 2),
+          median: getTimeLabel(this.stats.case_duration.median, 2),
+        }
+      }
+    },
+    /**
+     * Behavior when show
+     */
+    show(){
+      this.valueCases = this.statData.cases.ratio * 100;
+      this.valueTraces=  this.statData.traces.ratio * 100;
+      this.valueTaskInstances = this.statData.task_instances.ratio * 100;
+      this.valueTasks = this.statData.tasks.ratio * 100;
+    },
+    /**
+     * Behavior when hidden
+     */
+    hide(){
+      this.valueCases = 0;
+      this.valueTraces=  0;
+      this.valueTaskInstances = 0;
+      this.valueTasks = 0;
+    },
+  },
+  async mounted() {
+    // log: 695977238 ; filter: 746150051
+    // let params = this.$route.params;
+
+    // switch (params.type) {
+    //   case 'log':
+    //     this.logId = params.fileId;
+    //     break;
+    //   case 'filter':
+    //     this.createFilterId = params.fileId;
+    //     break;
+    //   case 'rule':
+    //     switch (params.checkType) {
+    //       case 'log':
+    //         this.logId = params.checkFileId;
+    //         break;
+    //       case 'filter':
+    //         this.createFilterId = params.checkFileId;
+    //     }
+    //     break;
+    // }
+    this.logId = 695977238;
+    await this.allMapDataStore.getAllMapData();
+    await this.getStatData();
+    this.isPanel = false; // 預設不打開
+  }
+}
+</script>
+<style scoped>
+:deep(.p-progressbar .p-progressbar-value) {
+  @apply bg-primary
+}
+</style>

src/components/Discover/Performance/ProformanceView.vue

@@ -1,5 +0,0 @@
-<template>
-  <div>
-    <h2>ProformanceView</h2>
-  </div>
-</template>

src/module/timeLabel.js

@@ -2,29 +2,31 @@ import moment from 'moment';
 
 /**
  * 將秒數轉換成帶有時間單位的格式
- * @param   {number} Second
+ * @param   {number} second
+ * @param   {number} fixedNumber 小數點後幾位
  * @returns {string}        轉換完的格式(ex: 1 day, 6.8 hrs)
  */
-export function getTimeLabel(Second) {
-  var day = 24 * 60 * 60
-  var hour = 60 * 60
-  var minutes = 60
-  var dd = Math.floor(Second / day)
-  var hh = Math.floor((Second % day) / hour)
-  var mm = Math.floor((Second % hour) / minutes)
+export function getTimeLabel(second, fixedNumber = 0) {
+  const day = 24 * 60 * 60;
+  const hour = 60 * 60;
+  const minutes = 60;
+  const dd = Math.floor(second / day);
+  const hh = Math.floor((second % day) / hour);
+  const mm = Math.floor((second % hour) / minutes);
+
   if(dd > 0){
-      return dd + " days"
+      return (second / day).toFixed(fixedNumber) + " days"
   }
   else if(hh > 0){
-      return hh + " hrs"
+      return ((second % day) / hour).toFixed(fixedNumber) + " hrs"
   }
   else if(mm > 0){
-      return mm + " mins"
+      return ((second % hour) / minutes).toFixed(fixedNumber) + " mins"
   }
-  if(Second == 0){
-      return Second + " sec"
+  if(second == 0){
+      return second + " sec"
   }
-  return Second + " secs"
+  return second + " sec"
 }
 /**
  * 將秒數轉換成帶有縮寫時間單位的格式

src/router/index.js

@@ -87,6 +87,11 @@ const routes = [
           }
         ]
       },
+      {
+        path: "/compare/dashboard",
+        name: "CompareDashboard",
+        component: CompareDashboard,
+      }
     ]
   },
   {
@@ -94,11 +99,11 @@ const routes = [
     name: "NotFound404",
     component: NotFound404,
   },
-  {
-    path: "/compare/dashboard",
-    name: "CompareDashboard",
-    component: CompareDashboard,
-  }
+  // {
+  //   path: "/compare/dashboard",
+  //   name: "CompareDashboard",
+  //   component: CompareDashboard,
+  // }
 ];
 
 const base_url = import.meta.env.BASE_URL;

src/stores/allMapData.js

@@ -142,7 +142,8 @@ export default defineStore('allMapDataStore', {
         this.allStats = response.data.stats;
         this.allInsights = response.data.insights;
       } catch(error) {
-        apiError(error, 'Failed to load the Map.');
+        console.dir(error)
+        // apiError(error, 'Failed to load the Map.');
       };
     },
     /**

src/views/Compare/Dashboard/index.vue

@@ -23,11 +23,9 @@
         <article class="w-full h-full overflow-x-hidden overflow-y-auto scrollbar scroll-smooth">
           <section>
             <p class="h2 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">
               <li id="cycleTime" class="scroll-smooth">
-                <span class="inline-block py-4">Cycle Efficiency</span>
+                <span class="inline-block py-4 text-sm">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>
@@ -36,7 +34,7 @@
                 </ul>
               </li>
               <li id="processingTime">
-                <span class="inline-block py-4">Processing Time</span>
+                <span class="inline-block py-4 text-sm">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>
@@ -49,7 +47,7 @@
                 </ul>
               </li>
               <li id="waitingTime">
-                <span class="inline-block py-4">Waiting Time</span>
+                <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>
@@ -64,10 +62,10 @@
             </ul>
           </section>
           <section>
-            <p class="h2 px-4 border-b border-neutral-900"><span class="material-symbols-outlined mr-2 align-middle">moving</span>Frequency</p>
+            <p class="h2 px-4 border-b border-neutral-900 mt-2"><span class="material-symbols-outlined mr-2 align-middle">moving</span>Frequency</p>
             <ul class="list-disc list-inside px-4 pl-7">
               <li id="cases">
-                <span class="inline-block py-4">Number of Cases</span>
+                <span class="inline-block py-4 text-sm">Number of Cases</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.freq.title }}</span>
@@ -84,14 +82,26 @@
         </article>
       </div>
     </div>
-    <!-- <StatusBar></StatusBar> -->
+
+    <!-- Sidebar: State -->
+    <div class="bg-transparent py-4 w-14 h-screen-main z-10 bottom-0 right-0 absolute">
+      <ul class="flex flex-col justify-center items-center">
+        <li class="inline-flex items-center justify-center border border-neutral-500  rounded-full w-9 h-9 cursor-pointer bg-neutral-50 drop-shadow hover:border-primary" @click="sidebarState = !sidebarState" :class="{'border-primary': sidebarState}" id="iconState">
+          <span class="material-symbols-outlined text-2xl text-neutral-500 hover:text-primary p-1.5" :class="[sidebarState ? 'text-primary' : 'text-neutral-500']">
+            info
+          </span>
+        </li>
+      </ul>
+    </div>
+    <SidebarStates v-model:visible="sidebarState"></SidebarStates>
+
   </main>
 </template>
 <script>
 import { storeToRefs } from 'pinia';
 import LoadingStore from '@/stores/loading.js';
 import PerformanceStore from '@/stores/performance.js';
-// import StatusBar from '@/components/Discover/StatusBar.vue';
+import SidebarStates from '@/components/Compare/SidebarStates.vue';
 import { setLineChartData } from '@/module/setChartData.js';
 import { simpleTimeLabel, followTimeLabel, dateLabel } from '@/module/timeLabel.js';
 import { compareDashboardData } from '@/views/Compare/Dashboard/data.js';
@@ -105,9 +115,9 @@ export default {
 
     return { isLoading, performanceStore, performanceData }
   },
-  // components: {
-  //   StatusBar,
-  // },
+  components: {
+    SidebarStates,
+  },
   data() {
     return {
       timeUsageData: [
@@ -152,6 +162,7 @@ export default {
       casesByTaskHeight: 500,
       colorPrimary: '#0099FF',
       colorSecondary: '#FFAA44',
+      sidebarState: false, // SideBar: Summary
     }
   },
   methods: {
@@ -277,6 +288,9 @@ export default {
             border: {
               color: '#64748b',
             },
+            grid: {
+              tickLength: 0, // 網格是否超過邊線
+            }
           },
           y: {
             beginAtZero: true, // scale 包含 0
@@ -421,7 +435,9 @@ export default {
             border: {
               color: '#64748b',
             },
-
+            grid: {
+              tickLength: 0, // 網格是否超過邊線
+            }
           },
           y: {
             beginAtZero: true, // scale 包含 0
@@ -549,6 +565,7 @@ export default {
             },
             grid: {
               color: '#64748b',
+              tickLength: 0, // 網格是否超過邊線
             },
             border: {
               display:false,
@@ -612,6 +629,7 @@ export default {
     // [{"log_id":695977238},{"filter_id":746150051}]
     // 要判斷資料有無 null,問貓貓是哪個階層 null?
     //  Activity 會有 0, null 的組合嗎?
+    //  Activity 有 j, 無 j ?
 
     // const routeParams = this.$route.params;
     // console.log(routeParams);