From 85ed1f84b7c07044d153a80c56cd03af7a26eb47 Mon Sep 17 00:00:00 2001
From: chiayin <chiayin.kuo@dsp.im>
Date: Tue, 16 May 2023 11:17:08 +0800
Subject: [PATCH] Discover: SidebarFilter Trace Slider control to table and
 chart done.

---
 src/components/Discover/Filter/Trace.vue | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/components/Discover/Filter/Trace.vue b/src/components/Discover/Filter/Trace.vue
index 66bcb27..82bbead 100644
--- a/src/components/Discover/Filter/Trace.vue
+++ b/src/components/Discover/Filter/Trace.vue
@@ -10,10 +10,9 @@
       <Chart type="bar" :data="chartData" :options="chartOptions" class="h-2/5" />
       <div class="px-2">
         <p class="py-4">Select percentage of case <span class=" float-right">{{ caseTotalPercent }}%</span></p>
-        <Slider v-model="selectArea" :step="1" :min="1" :max="traceTotal" range class="mx-2" />
+        <Slider v-model="selectArea" :step="1" :min="0" :max="traceTotal" range class="mx-2" />
       </div>
-      <!-- @change="chartData = setChartData(traceList)" -->
-      <br/><br/>{{ this.traces.map(trace => this.getPercentLabel(trace.ratio)).slice(this.selectArea[0]-1, this.selectArea[1]) }}
+      <br/><br/>{{ this.traces.map(trace => this.getPercentLabel(trace.ratio)).slice(this.selectArea[0], this.selectArea[1]) }}
       <br/>
       {{ selectArea }}
     </section>
@@ -47,7 +46,7 @@
       </div>
     </section>
     <!-- Trace item Table -->
-    <section v-show="showTraceId" class="pl-4 h-full min-w-full">
+    <section v-show="showTraceId" class="pl-4 h-full min-w-full py-2 space-y-2">
       <p class="h2 mb-2">Trace #{{ showTraceId }}</p>
       <div class="h-52 w-full px-2 mb-2 border border-neutral-300 rounded">
         <div class="h-full w-full">
@@ -85,7 +84,7 @@ export default {
       },
       showTraceId: null,
       chartOptions: null,
-      selectArea: [1, 2]
+      selectArea: [0, 1]
     }
   },
   computed: {
@@ -101,7 +100,7 @@ export default {
           ratio: this.getPercentLabel(trace.ratio),
         };
       }).sort((x, y) => x.id - y.id)
-        .slice(this.selectArea[0]-1, this.selectArea[1]);
+        .slice(this.selectArea[0], this.selectArea[1]);
     },
     caseTotalPercent: function() {
       let sum = 0;
@@ -113,7 +112,7 @@ export default {
       return lastDigit === '0' ? sum.toFixed(0) : sum.toFixed(1)
     },
     chartData: function() {
-      const start = this.selectArea[0]-1;
+      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)');
 
@@ -336,7 +335,7 @@ export default {
     this.chartOptions = this.barOptions();
     // this.chartData = this.setChartData();
     // this.chartOptions = this.setChartOptions();
-    this.selectArea = [1, this.traceTotal]
+    this.selectArea = [0, this.traceTotal]
   },
 }
 </script>