Discover: SidebarFilter Trace fix traceList trace.ratio value & Trace done.

src/components/Discover/Filter/Trace.vue

@@ -12,9 +12,6 @@
         <p class="py-4">Select percentage of case <span class=" float-right">{{ caseTotalPercent }}%</span></p>
         <Slider v-model="selectArea" :step="1" :min="0" :max="traceTotal" range class="mx-2" />
       </div>
-      <br/><br/>{{ this.traces.map(trace => this.getPercentLabel(trace.ratio)).slice(this.selectArea[0], this.selectArea[1]) }}
-      <br/>
-      {{ selectArea }}
     </section>
     <!-- Trace List -->
     <section class="h-full min-w-[48%] py-2 space-y-2">
@@ -91,38 +88,41 @@ export default {
     traceTotal: function() {
       return this.traces.length;
     },
+    traceCountTotal: function() {
+      return this.traces.map(trace => trace.count).reduce((acc, cur) => acc + cur, 0);
+    },
     traceList: function() {
+      let sum = this.traces.map(trace => trace.count).reduce((acc, cur) => acc + cur, 0);
+
       return this.traces.map(trace => {
         return {
           id: trace.id,
           value: Number((trace.ratio * 100).toFixed(1)),
           count: trace.count,
-          ratio: this.getPercentLabel(trace.ratio),
+          ratio: this.getPercentLabel(trace.count / this.traceCountTotal),
         };
       }).sort((x, y) => x.id - y.id)
         .slice(this.selectArea[0], this.selectArea[1]);
     },
     caseTotalPercent: function() {
-      let sum = 0;
-      this.traceList.forEach(trace => sum += Number(trace.ratio));
-
-      let str = sum.toFixed(1).toString();
-      let lastDigit = str[str.length - 1]; // 取得小數點後的第一位數字
-
-      return lastDigit === '0' ? sum.toFixed(0) : sum.toFixed(1)
+      let countSum = this.traces.map(trace => trace.count).reduce((acc, cur) => acc + cur, 0);
+      let ratioSum = this.traceList.map(trace => trace.count).reduce((acc, cur) => acc + cur, 0) / this.traceCountTotal;
+      return this.getPercentLabel(ratioSum)
     },
     chartData: function() {
       const start = this.selectArea[0];
       const end = this.selectArea[1]-1;
-      let selectAreaData = this.traces.map((trace, index) => index >= start && index<= end ? 'rgba(0,153,255)' : 'rgba(203, 213, 225)');
+      const labels = this.traces.map(trace => `#${trace.id}`);
+      const data = this.traces.map(trace => this.getPercentLabel(trace.count / this.traceCountTotal));
+      const selectAreaData = this.traces.map((trace, index) => index >= start && index<= end ? 'rgba(0,153,255)' : 'rgba(203, 213, 225)');
 
       return {
         // 要呈現的資料
-        labels: this.traces.map(trace => ''),
+        labels,
         datasets: [
           {
             label: 'Trace', // 資料的標題標籤
-            data: this.traces.map(trace => this.getPercentLabel(trace.ratio)),
+            data,
             backgroundColor: selectAreaData,
             categoryPercentage: 1.0,
             barPercentage: 1.0

src/components/Discover/SidebarTraces.vue

@@ -83,12 +83,14 @@ export default {
       return this.traces.length;
     },
     traceList: function() {
+      let sum = this.traces.map(trace => trace.count).reduce((acc, cur) => acc + cur, 0);
+
       return this.traces.map(trace => {
         return {
           id: trace.id,
           value: Number((trace.ratio * 100).toFixed(1)),
           count: trace.count,
-          ratio: this.getPercentLabel(trace.ratio),
+          ratio: this.getPercentLabel(trace.count / sum),
         };
       }).sort((x, y) => x.id - y.id);
     },