Conformance: StatusBar done.

src/components/Discover/Conformance/StatusBar.vue

@@ -1,7 +1,7 @@
 <template>
 <section class="w-full top-0 absolute shadow-[0px_6px_6px_inset_rgba(0,0,0,0.1)]">
   <!-- status content -->
-  <ul class="bg-neutral-100 flex justify-start shadow-[0px_1px_4px_rgba(0,0,0,0.2)] gap-3 p-3 text-sm overflow-x-auto scrollbar duration-700" :class="isPanel?'':'hidden'">
+  <ul class="bg-neutral-100 flex justify-start shadow-[0px_1px_4px_rgba(0,0,0,0.2)] gap-3 p-3 text-sm overflow-x-auto scrollbar duration-700" v-show="isPanel"  v-if="statData">
     <li class="bg-neutral-10 rounded p-3 w-full">
       <div class="flex justify-between items-center mb-5">
         <p class="font-bold text-sm leading-8">Cases</p>
@@ -9,10 +9,10 @@
       </div>
       <div class="flex justify-between items-center">
         <div class="mr-2 w-full">
-          <span class="block text-sm mb-2">1.9K / 98.3K</span>
-          <ProgressBar :value="80" :showValue="false" class="!h-1.5 min-w-[136px] rounded !bg-neutral-200"></ProgressBar>
+          <span class="block text-sm mb-2">{{ statData.cases.count }} / {{ statData.cases.total }}</span>
+          <ProgressBar :value="statData.cases.ratio" :showValue="false" class="!h-1.5 min-w-[136px] rounded !bg-neutral-200"></ProgressBar>
         </div>
-        <span class="block text-2xl font-medium">100%</span>
+        <span class="block text-2xl font-medium">{{ statData.cases.ratio }}%</span>
       </div>
     </li>
     <li class="bg-neutral-10 rounded p-3 w-full">
@@ -22,10 +22,10 @@
       </div>
       <div class="flex justify-between items-center">
         <div class="mr-2 w-full">
-          <span class="block text-sm mb-2">1.9K / 98.3K</span>
-          <ProgressBar :value="80" :showValue="false" class="!h-1.5 min-w-[136px] rounded !bg-neutral-200"></ProgressBar>
+          <span class="block text-sm mb-2">{{ statData.traces.count }} / {{ statData.traces.total }}</span>
+          <ProgressBar :value="statData.traces.ratio" :showValue="false" class="!h-1.5 min-w-[136px] rounded !bg-neutral-200"></ProgressBar>
         </div>
-        <span class="block text-2xl font-medium">100%</span>
+        <span class="block text-2xl font-medium">{{ statData.traces.ratio }}%</span>
       </div>
     </li>
     <li class="bg-neutral-10 rounded p-3 w-full">
@@ -35,10 +35,10 @@
       </div>
       <div class="flex justify-between items-center">
         <div class="mr-2 w-full">
-          <span class="block text-sm mb-2">1.9K / 98.3K</span>
-          <ProgressBar :value="80" :showValue="false" class="!h-1.5 min-w-[136px] rounded !bg-neutral-200"></ProgressBar>
+          <span class="block text-sm mb-2">{{ statData.task_instances.count }} / {{ statData.task_instances.total }}</span>
+          <ProgressBar :value="statData.task_instances.ratio" :showValue="false" class="!h-1.5 min-w-[136px] rounded !bg-neutral-200"></ProgressBar>
         </div>
-        <span class="block text-2xl font-medium">100%</span>
+        <span class="block text-2xl font-medium">{{ statData.task_instances.ratio }}%</span>
       </div>
     </li>
     <li class="bg-neutral-10 rounded p-3 w-full">
@@ -48,29 +48,29 @@
       </div>
       <div class="flex justify-between items-center">
         <div class="mr-2 w-full">
-          <span class="block text-sm mb-2">1.9K / 98.3K</span>
-          <ProgressBar :value="80" :showValue="false" class="!h-1.5 min-w-[136px] rounded !bg-neutral-200"></ProgressBar>
+          <span class="block text-sm mb-2">{{ statData.tasks.count }} / {{ statData.tasks.total }}</span>
+          <ProgressBar :value="statData.tasks.ratio" :showValue="false" class="!h-1.5 min-w-[136px] rounded !bg-neutral-200"></ProgressBar>
         </div>
-        <span class="block text-2xl font-medium">100%</span>
+        <span class="block text-2xl font-medium">{{ statData.tasks.ratio }}%</span>
       </div>
     </li>
     <li class="bg-neutral-10 rounded p-3 w-full">
       <p class="font-bold text-sm leading-8 mb-2.5">Log Timeframe</p>
       <div class="px-2 space-y-2 min-w-[140px] h-[40px]">
-        <span class="inline-block">2018.01.01 12:03&nbsp</span>
-        <span class="inline-block">~&nbsp2022.08.05 02:53</span>
+        <span class="inline-block">{{ statData.started_at }}&nbsp</span>
+        <span class="inline-block">~&nbsp{{ statData.completed_at }}</span>
       </div>
     </li>
     <li class="bg-neutral-10 rounded p-3 w-full">
       <p class="font-bold text-sm leading-8">Case Duration</p>
       <div class="flex justify-between items-center space-x-2 min-w-[272px]">
         <div class="space-y-2">
-          <p><Tag value="MAX" class="!text-neutral-900 !bg-neutral-300 mr-2 !w-10 !text-sm !px-2 !py-0"></Tag>11.34 mths</p>
-          <p><Tag value="MIN" class="!text-neutral-900 !bg-neutral-300 mr-2 !w-10 !text-sm !px-2 !py-0"></Tag>instant</p>
+          <p><Tag value="MAX" class="!text-neutral-900 !bg-neutral-300 mr-2 !w-10 !text-sm !px-2 !py-0"></Tag>{{ statData.case_duration.min }}</p>
+          <p><Tag value="MIN" class="!text-neutral-900 !bg-neutral-300 mr-2 !w-10 !text-sm !px-2 !py-0"></Tag>{{ statData.case_duration.average }}</p>
         </div>
         <div class="space-y-2">
-          <p><Tag value="MED" class="!text-neutral-900 !bg-neutral-300 mr-2 !w-10 !text-sm !px-2 !py-0"></Tag>25.71 yrs</p>
-          <p><Tag value="AVG" class="!text-neutral-900 !bg-neutral-300 mr-2 !w-10 !text-sm !px-2 !py-0"></Tag>6.00 days</p>
+          <p><Tag value="MED" class="!text-neutral-900 !bg-neutral-300 mr-2 !w-10 !text-sm !px-2 !py-0"></Tag>{{ statData.case_duration.median }}</p>
+          <p><Tag value="AVG" class="!text-neutral-900 !bg-neutral-300 mr-2 !w-10 !text-sm !px-2 !py-0"></Tag>{{ statData.case_duration.max }}</p>
         </div>
       </div>
     </li>
@@ -83,13 +83,74 @@
 </template>
 
 <script>
+import { storeToRefs } from 'pinia';
+import AllMapDataStore from '@/stores/allMapData.js';
+import getNumberLabel from '@/module/numberLabel.js';
+import getTimeLabel from '@/module/timeLabel.js';
+import getMoment from 'moment';
+
 export default {
+  setup() {
+    const allMapDataStore = AllMapDataStore();
+    const { logId, stats } = storeToRefs(allMapDataStore);
+
+    return { logId, stats, allMapDataStore };
+  },
   data() {
     return {
       isPanel: false,
+      statData: null,
     }
   },
-  created() {
+  methods: {
+    /**
+     * Number to percentage
+     * @param   {number} val
+     * @returns {string} 轉換完成的百分比字串
+     */
+     getPercentLabel(val){
+      return (val * 100 === 100) ? (val * 100) : (val * 100).toFixed(1);
+    },
+    /**
+     * setting stats data
+     */
+    getStatData() {
+      this.statData = {
+        cases: {
+          count: getNumberLabel(this.stats.cases.count),
+          total: getNumberLabel(this.stats.cases.total),
+          ratio: this.getPercentLabel(this.stats.cases.ratio)
+        },
+        traces: {
+          count: getNumberLabel(this.stats.traces.count),
+          total: getNumberLabel(this.stats.traces.total),
+          ratio: this.getPercentLabel(this.stats.tasks.ratio)
+        },
+        task_instances: {
+          count: getNumberLabel(this.stats.task_instances.count),
+          total: getNumberLabel(this.stats.task_instances.total),
+          ratio: this.getPercentLabel(this.stats.task_instances.ratio)
+        },
+        tasks: {
+          count: getNumberLabel(this.stats.tasks.count),
+          total: getNumberLabel(this.stats.tasks.total),
+          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.started_at).format('YYYY-MM-DD HH:mm'),
+        case_duration: {
+          min: getTimeLabel(this.stats.case_duration.min),
+          max: getTimeLabel(this.stats.case_duration.max),
+          average: getTimeLabel(this.stats.case_duration.average),
+          median: getTimeLabel(this.stats.case_duration.median),
+        }
+      }
+    }
+  },
+  async mounted() {
+    if(this.$route.params.type === 'log') this.logId = this.$route.params.fileId;
+    await this.allMapDataStore.getAllMapData();
+    await this.getStatData();
     this.isPanel = true;
   }
 }

src/stores/conformance.js

@@ -11,8 +11,8 @@ let delay = (s = 0) =>  new Promise((resolve, reject) => setTimeout(resolve, s))
 
 export default defineStore('conformanceStore', {
   state: () => ({
-    logId: null,
-    filterId: null,
+    conformanceLogId: null,
+    conformanceFilterId: null,
     allConformanceTask: [],
     selectedRuleType: 'Have activity', // radio
     selectedActivitySequence: 'Start & End', // radio
@@ -31,16 +31,13 @@ export default defineStore('conformanceStore', {
      * fetch Log Conformance Parameters api for Rule Settings.
      */
     async getLogConformanceParams() {
-      let logId = this.logId;
+      let logId = this.conformanceLogId;
       const api = `/api/log-checkers/params?log_id=${logId}`;
 
       try {
         const response = await this.$axios.get(api);
-        console.log(response);
         this.allConformanceTask = response.data.tasks;
-
       } catch(error) {
-        console.log(error);
         await delay();
         loading.isLoading = true;
         await delay(1000);

src/views/Discover/Conformance/index.vue

@@ -1,6 +1,5 @@
 <template>
   <main class="h-screen-main relative">
-    <!-- <StatusBar></StatusBar> -->
     <div class="h-full relative bg-neutral-50">
       <ConformanceSidebar></ConformanceSidebar>
       <ConformanceResults></ConformanceResults>
@@ -21,9 +20,9 @@ export default {
     const loadingStore = LoadingStore();
     const conformanceStore = ConformanceStore();
     const { isLoading } = storeToRefs(loadingStore);
-    const { logId } = storeToRefs(conformanceStore);
+    const { conformanceLogId } = storeToRefs(conformanceStore);
 
-    return { isLoading, logId, conformanceStore }
+    return { isLoading, conformanceLogId, conformanceStore }
   },
   components: {
     StatusBar,
@@ -32,8 +31,7 @@ export default {
   },
   async created() {
     // let logId;
-    if(this.$route.params.type === 'log') this.logId = this.$route.params.fileId;
-    console.log(this.logId);
+    if(this.$route.params.type === 'log') this.conformanceLogId = this.$route.params.fileId;
 
     await this.conformanceStore.getLogConformanceParams();