From a93fca36f59318f645503d58c265b65b7e25e518 Mon Sep 17 00:00:00 2001
From: chiayin <chiayin.kuo@dsp.im>
Date: Wed, 4 Oct 2023 16:54:19 +0800
Subject: [PATCH] Issue #166: Done.

---
 .../Discover/Conformance/MoreModal.vue          |  4 ++--
 .../Discover/Conformance/StatusBar.vue          | 17 ++++++++---------
 src/components/Discover/Map/Filter/ActOcc.vue   |  2 +-
 .../Discover/Map/Filter/ActOccCase.vue          |  4 ++--
 src/components/Discover/Map/Filter/Trace.vue    |  3 +--
 src/components/Discover/Map/SidebarFilter.vue   |  8 ++++++--
 src/components/Discover/Map/SidebarState.vue    | 15 ++++-----------
 src/components/Discover/Map/SidebarTraces.vue   |  3 +--
 src/module/numberLabel.js                       |  1 +
 9 files changed, 26 insertions(+), 31 deletions(-)

diff --git a/src/components/Discover/Conformance/MoreModal.vue b/src/components/Discover/Conformance/MoreModal.vue
index 3584bda..db73627 100644
--- a/src/components/Discover/Conformance/MoreModal.vue
+++ b/src/components/Discover/Conformance/MoreModal.vue
@@ -58,7 +58,6 @@
 import { storeToRefs } from 'pinia';
 import ConformanceStore from '@/stores/conformance.js';
 import cytoscapeMapTrace from '@/module/cytoscapeMapTrace.js';
-import getNumberLabel from '@/module/numberLabel.js';
 
 export default {
   props: ['listModal', 'listNo', 'traceId', 'firstCases', 'listTraces', 'taskSeq', 'cases', 'category'],
@@ -92,7 +91,8 @@ export default {
         return {
           id: trace.id,
           value: Number((this.getPercentLabel(trace.count / sum))),
-          count: getNumberLabel(trace.count),
+          count: trace.count.toLocaleString('en-US'),
+          count_base: trace.count,
           ratio: this.getPercentLabel(trace.count / sum),
         };
       }).sort((x, y) => x.id - y.id);
diff --git a/src/components/Discover/Conformance/StatusBar.vue b/src/components/Discover/Conformance/StatusBar.vue
index f517d4f..bc58d49 100644
--- a/src/components/Discover/Conformance/StatusBar.vue
+++ b/src/components/Discover/Conformance/StatusBar.vue
@@ -85,7 +85,6 @@
 <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';
 
@@ -117,23 +116,23 @@ export default {
     getStatData() {
       this.statData = {
         cases: {
-          count: getNumberLabel(this.stats.cases.count),
-          total: getNumberLabel(this.stats.cases.total),
+          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: getNumberLabel(this.stats.traces.count),
-          total: getNumberLabel(this.stats.traces.total),
+          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: getNumberLabel(this.stats.task_instances.count),
-          total: getNumberLabel(this.stats.task_instances.total),
+          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: getNumberLabel(this.stats.tasks.count),
-          total: getNumberLabel(this.stats.tasks.total),
+          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'),
diff --git a/src/components/Discover/Map/Filter/ActOcc.vue b/src/components/Discover/Map/Filter/ActOcc.vue
index 8595457..09b7cc8 100644
--- a/src/components/Discover/Map/Filter/ActOcc.vue
+++ b/src/components/Discover/Map/Filter/ActOcc.vue
@@ -12,7 +12,7 @@
           <Row>
               <Column selectionMode="single" headerClass="w-8 !p-2 !bg-neutral-10 !border-neutral-500 sticky top-0 left-0 z-10 bg-neutral-10"></Column>
               <Column field="label" header="Activity" headerClass="!bg-neutral-10 !border-neutral-500 !py-2 sticky top-0 left-0 z-10 bg-neutral-10" sortable />
-              <Column field="occ_value" header="Occurrences" headerClass="!bg-neutral-10 !border-neutral-500 !py-2 sticky top-0 left-0 z-10 bg-neutral-10" sortable :colspan="3" />
+              <Column field="occurrences_base" header="Occurrences" headerClass="!bg-neutral-10 !border-neutral-500 !py-2 sticky top-0 left-0 z-10 bg-neutral-10" sortable :colspan="3" />
           </Row>
         </ColumnGroup>
         <Column selectionMode="single" bodyClass="!p-2 !border-0"></Column>
diff --git a/src/components/Discover/Map/Filter/ActOccCase.vue b/src/components/Discover/Map/Filter/ActOccCase.vue
index 70e5044..464e26f 100644
--- a/src/components/Discover/Map/Filter/ActOccCase.vue
+++ b/src/components/Discover/Map/Filter/ActOccCase.vue
@@ -12,8 +12,8 @@
           <Row>
               <Column selectionMode="multiple" headerClass="w-8 !p-2 !bg-neutral-10 !border-neutral-500 sticky top-0 left-0 z-10 bg-neutral-10 allCheckboxAct"></Column>
               <Column field="label" header="Activity" headerClass="!bg-neutral-10 !border-neutral-500 !py-2 sticky top-0 left-0 z-10 bg-neutral-10" sortable />
-              <Column field="occ_value" header="Occurrences" headerClass="!bg-neutral-10 !border-neutral-500 !py-2 sticky top-0 left-0 z-10 bg-neutral-10" sortable :colspan="3" />
-              <Column field="case_value" headerClass="!bg-neutral-10 !border-neutral-500 !py-2 sticky top-0 left-0 z-10 bg-neutral-10" header="Cases with Activity" sortable :colspan="3" />
+              <Column field="occurrences_base" header="Occurrences" headerClass="!bg-neutral-10 !border-neutral-500 !py-2 sticky top-0 left-0 z-10 bg-neutral-10" sortable :colspan="3" />
+              <Column field="cases_base" headerClass="!bg-neutral-10 !border-neutral-500 !py-2 sticky top-0 left-0 z-10 bg-neutral-10" header="Cases with Activity" sortable :colspan="3" />
           </Row>
         </ColumnGroup>
         <Column selectionMode="multiple" bodyClass="!p-2 !border-0"></Column>
diff --git a/src/components/Discover/Map/Filter/Trace.vue b/src/components/Discover/Map/Filter/Trace.vue
index e4a3d71..ca497a0 100644
--- a/src/components/Discover/Map/Filter/Trace.vue
+++ b/src/components/Discover/Map/Filter/Trace.vue
@@ -66,7 +66,6 @@ import { storeToRefs } from 'pinia';
 import AllMapDataStore from '@/stores/allMapData.js';
 import LoadingStore from '@/stores/loading.js';
 import cytoscapeMapTrace from '@/module/cytoscapeMapTrace.js';
-import numberLabel from '@/module/numberLabel.js';
 
 export default {
   expose: ['selectArea', 'showTraceId', 'traceTotal'],
@@ -101,7 +100,7 @@ export default {
         return {
           id: trace.id,
           value: this.progressWidth(Number(((trace.count / this.traceCountTotal) * 100).toFixed(1))),
-          count: numberLabel(trace.count),
+          count: trace.count.toLocaleString(),
           base_count: trace.count,
           ratio: this.getPercentLabel(trace.count / this.traceCountTotal),
         };
diff --git a/src/components/Discover/Map/SidebarFilter.vue b/src/components/Discover/Map/SidebarFilter.vue
index 91d568c..cd62efe 100644
--- a/src/components/Discover/Map/SidebarFilter.vue
+++ b/src/components/Discover/Map/SidebarFilter.vue
@@ -264,12 +264,14 @@ export default {
           label: task.label,
           occ_value: Number(task.occurrence_ratio * 100),
           occurrences: Number(task.occurrences).toLocaleString('en-US'),
+          occurrences_base: task.occurrences,
           occurrence_ratio: this.getPercentLabel(task.occurrence_ratio),
           case_value: Number(task.case_ratio * 100),
           cases: task.cases.toLocaleString('en-US'),
+          cases_base: task.cases,
           case_ratio: this.getPercentLabel(task.case_ratio),
         };
-      }).sort((x, y) => y.occurrences - x.occurrences);
+      }).sort((x, y) => y.occurrences_base - x.occurrences_base);
     },
     // 調整 filterStartData / filterEndData / filterStartToEndData / filterEndToStartData 的內容
     /**
@@ -281,11 +283,13 @@ export default {
         let data = {
           label: task.label,
           occ_value: Number(task.occurrence_ratio * 100),
-          occurrences: Number(task.occurrences).toLocaleString('en-US'),
+          occurrences: task.occurrences.toLocaleString('en-US'),
+          occurrences_base: task.occurrences,
           occurrence_ratio: this.getPercentLabel(task.occurrence_ratio),
         };
         list.push(data);
       });
+      list.sort((x, y) => y.occurrences_base - x.occurrences_base)
       return list;
     },
     /**
diff --git a/src/components/Discover/Map/SidebarState.vue b/src/components/Discover/Map/SidebarState.vue
index b39ba69..5e54bdc 100644
--- a/src/components/Discover/Map/SidebarState.vue
+++ b/src/components/Discover/Map/SidebarState.vue
@@ -14,7 +14,7 @@
           <p class="h2">Cases</p>
           <div class="flex justify-between items-center">
             <div class="w-full mr-8">
-              <span class="block text-sm">{{ numberLabel(stats.cases.count) }} / {{ numberLabel(stats.cases.total) }}</span>
+              <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>
             </div>
             <span class="block text-primary text-2xl font-medium">{{ getPercentLabel(stats.cases.ratio) }}</span>
@@ -24,7 +24,7 @@
           <p class="h2">Traces</p>
           <div class="flex justify-between items-center">
             <div class="w-full mr-8">
-              <span class="block text-sm">{{ numberLabel(stats.traces.count) }} / {{ numberLabel(stats.traces.total) }}</span>
+              <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>
             </div>
             <span class="block text-primary text-2xl font-medium">{{ getPercentLabel(stats.traces.ratio) }}</span>
@@ -34,7 +34,7 @@
           <p class="h2">Activity Instances</p>
           <div class="flex justify-between items-center">
             <div class="w-full mr-8">
-              <span class="block text-sm">{{ numberLabel(stats.task_instances.count) }} / {{ numberLabel(stats.task_instances.total) }}</span>
+              <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>
             </div>
             <span class="block text-primary text-2xl font-medium">{{ getPercentLabel(stats.task_instances.ratio) }}</span>
@@ -44,7 +44,7 @@
           <p class="h2">Activities</p>
           <div class="flex justify-between items-center">
             <div class="w-full mr-8">
-              <span class="block text-sm">{{ numberLabel(stats.tasks.count) }} / {{ numberLabel(stats.tasks.total) }}</span>
+              <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>
             </div>
             <span class="block text-primary text-2xl font-medium">{{ getPercentLabel(stats.tasks.ratio) }}</span>
@@ -164,7 +164,6 @@
 </template>
 
 <script>
-import getNumberLabel from '@/module/numberLabel.js';
 import getTimeLabel from '@/module/timeLabel.js';
 import getMoment from 'moment';
 
@@ -212,12 +211,6 @@ export default {
     moment(time){
       return getMoment(time).format('YYYY-MM-DD HH:mm');
     },
-    /**
-     * @param {number} num use numberLabel.js
-     */
-    numberLabel(num){
-      return getNumberLabel(num);
-    },
     /**
      * Number to percentage
      * @param   {number} val
diff --git a/src/components/Discover/Map/SidebarTraces.vue b/src/components/Discover/Map/SidebarTraces.vue
index 3a055b1..f3d5221 100644
--- a/src/components/Discover/Map/SidebarTraces.vue
+++ b/src/components/Discover/Map/SidebarTraces.vue
@@ -56,7 +56,6 @@
 <script>
 import cytoscapeMapTrace from '@/module/cytoscapeMapTrace.js';
 import AllMapDataStore from '@/stores/allMapData.js';
-import numberLabel from '@/module/numberLabel.js';
 
 export default {
   props: {
@@ -89,7 +88,7 @@ export default {
         return {
           id: trace.id,
           value: this.progressWidth(Number(((trace.count / sum) * 100).toFixed(1))),
-          count: numberLabel(trace.count),
+          count: trace.count.toLocaleString(),
           base_count: trace.count,
           ratio: this.getPercentLabel(trace.count / sum),
         };
diff --git a/src/module/numberLabel.js b/src/module/numberLabel.js
index 6c79d4b..9299d6a 100644
--- a/src/module/numberLabel.js
+++ b/src/module/numberLabel.js
@@ -1,5 +1,6 @@
 /**
  * 將數字轉換成帶有逗號格式(ex: 1000 -> 1,000)
+ * 也可以改用原生 JS 方法 `.toLocaleString('en-US')`
  * @param {number} num
  * @returns
  */