Discover: sidebarfilter slider control to chart done.

src/assets/vendors.css

@@ -49,3 +49,13 @@
 .p-inputswitch .p-inputswitch-slider:before {
   @apply !w-5 !h-5 !left-0.5
 }
+/* slider 拉霸 */
+.p-slider .p-slider-handle {
+  @apply !h-3.5 !w-3.5 !border !border-primary
+}
+.p-slider.p-slider-horizontal .p-slider-handle {
+  @apply !-my-2
+}
+.p-slider.p-slider-horizontal {
+  @apply !h-1
+}

src/components/Discover/Filter/Trace.vue

@@ -2,21 +2,27 @@
 <div class="flex justify-between items-start bg-neutral-10 border border-neutral-300 rounded-xl px-4 w-full h-full">
 
     <!-- Range Selection -->
-    <section>
+    <section class="py-2 space-y-2 text-sm w-1/2 h-full">
       <p class="h2">Range Selection</p>
       <div class="text-primary h2 flex items-center justify-start">
-        <span class="material-symbols-outlined m-2">info</span>
+        <span class="material-symbols-outlined mr-2 text-base">info</span>
         <p>Select a percentage range.</p>
       </div>
-      <Chart type="line" :data="chartData" :options="chartOptions" class="h-30rem" />
-      <p class="my-6">Select percentage of case <span class=" float-right">{{ caseTotalPercent }}%</span></p>
-      <Slider v-model="selectArea" :step="1" :min="1" :max="traceTotal" range class="w-14rem" />
+      <Chart type="bar" :data="chartData" :options="chartOptions" class="h-2/5" />
+      <div class="px-2">
+        <p class="py-2">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" />
+      </div>
+      <!-- @change="chartData = setChartData(traceList)" -->
+      <br/><br/>{{ this.traces.map(trace => this.getPercentLabel(trace.ratio)).slice(this.selectArea[0]-1, this.selectArea[1]) }}
+      <br/>
+      {{ selectArea }}
     </section>
     <!-- Trace List -->
-    <section class="h-full">
-      <p class="h2 px-2 mb-2">Trace List ({{ traceTotal }})</p>
+    <section class="h-full py-2 space-y-2">
+      <p class="h2">Trace List ({{ traceTotal }})</p>
       <p class="text-primary h2 flex items-center justify-start">
-        <span class="material-symbols-outlined m-2">info</span>Click trace number to see more.
+        <span class="material-symbols-outlined mr-2 text-base">info</span>Click trace number to see more.
       </p>
       <div class="overflow-y-scroll overflow-x-hidden scrollbar mx-[-8px] max-h-[calc(100%_-_96px)]" >
         <table class="border-separate border-spacing-x-2 text-sm">
@@ -79,10 +85,8 @@ export default {
         edges:[],
       },
       showTraceId: null,
-
-      chartData: null,
       chartOptions: null,
-      selectArea: [1, 1]
+      selectArea: [1, 2]
     }
   },
   computed: {
@@ -109,23 +113,108 @@ export default {
 
       return lastDigit === '0' ? sum.toFixed(0) : sum.toFixed(1)
       // return sum.toFixed(1);
-    }
     },
-  methods: {
-    setChartData() {
-            const documentStyle = getComputedStyle(document.documentElement);
+    chartData: function() {
+      const start = this.selectArea[0]-1;
+      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)');
 
       return {
         // 要呈現的資料
-                labels: ['', '', '', '', '', '', ''], // 水平軸
+        labels: this.traces.map(trace => ''),
         datasets: [
           {
-                        label: 'Trace List', // 資料的標題標籤
-                        data: [12, 51, 62, 33, 21, 100, 45],
+            label: 'Trace', // 資料的標題標籤
+            data: this.traces.map(trace => this.getPercentLabel(trace.ratio)),
+            backgroundColor: selectAreaData,
+            categoryPercentage: 1.0,
+            barPercentage: 1.0
+          },
+        ]
+      };
+    }
+  },
+  methods: {
+    barOptions(){
+      return {
+        maintainAspectRatio: false,
+        aspectRatio: 0.8,
+        layout: {
+          padding: {
+            top: 16,
+            left: 8,
+            right: 8,
+          }
+        },
+        plugins: {
+          legend: { // 圖例
+            display: false,
+          }
+        },
+        animations: false,
+        scales: {
+          x: {
+            display:false
+          },
+          y: {
+            ticks: { // 設定間隔數值
+              display: false, // 隱藏數值，只顯示格線
+              min: 0,
+              max: this.traceList[0].ratio,
+              stepSize: (this.traceList[0].ratio)/4,
+            },
+            grid: {
+              color: 'rgba(148,163,184)',
+              drawBorder: false
+            }
+          }
+        }
+      };
+    },
+    setChartData() {
+      const documentStyle = getComputedStyle(document.documentElement);
+      return {
+        // 要呈現的資料
+        labels: this.traces.map(trace => ''),
+        datasets: [
+          {
+            label: 'Trace', // 資料的標題標籤
+            data: this.traces.map(trace => this.getPercentLabel(trace.ratio)),
             fill: true,
-                        borderColor: documentStyle.getPropertyValue('--orange-500'),
+            // borderColor: documentStyle.getPropertyValue('--primary-500'),
+            showLine: false,
             tension: 0.4,
-                        backgroundColor: 'rgba(255,167,38,0.2)'
+            // backgroundColor: 'rgba(0,153,255)',
+            pointRadius: 0,
+
+          },
+          {
+            label: 'Selected Trace',
+            // data: [
+            //   {x: 0, y:37.8},
+            //   {x: 0, y:29.5},
+            //   {x: 0, y:17.9},
+            //   {x: 0, y:8.8},
+            //   {x: 0, y:3.2},
+            //   {x: 0, y:0.8},
+            //   {x: 0, y:0.4},
+            //   {x: 0, y:0.4},
+            //   {x: 0, y:0.4},
+            //   {x: 0, y:0.4},
+            //   {x: 0, y:0.4},
+            // ],
+            data: [
+              {x: 0, y:37.8},
+              {x: 0, y:29.5},
+              {x: null, y:17.9},
+            ],
+            // data: this.traces.map(trace=>trace.ratio),
+            fill: true,
+            // borderColor: documentStyle.getPropertyValue('--primary-500'),
+            showLine: false,
+            tension: 0.4,
+            backgroundColor: documentStyle.getPropertyValue('--primary-500'),
+            pointRadius: 0,
           }
         ]
       };
@@ -135,6 +224,13 @@ export default {
         // 自訂屬性設定
         maintainAspectRatio: false,
         aspectRatio: 0.6,
+        layout: {
+            padding: {
+              top: 16,
+              left: 8,
+              right: 8,
+            }
+        },
         plugins: {
           legend: { // 圖例
             display: false,
@@ -148,10 +244,11 @@ export default {
             ticks: { // 設定間隔數值
               display: false, // 隱藏數值，只顯示格線
               min: 0,
-                            max: 100,
-                            stepSize: 25,
+              max: this.traceList[0].ratio,
+              stepSize: (this.traceList[0].ratio)/4,
             },
             grid: {
+              drawBorder: false
             }
           }
         },
@@ -238,8 +335,10 @@ export default {
     this.setNodesData();
     this.setEdgesData();
     this.createCy();
-    this.chartData = this.setChartData();
-    this.chartOptions = this.setChartOptions();
+    // this.chartData = this.barData();
+    this.chartOptions = this.barOptions();
+    // this.chartData = this.setChartData();
+    // this.chartOptions = this.setChartOptions();
     this.selectArea = [1, this.traceTotal]
   },
 }
@@ -248,7 +347,7 @@ export default {
 <style scoped>
 /* 進度條顏色 */
 :deep(.p-progressbar .p-progressbar-value) {
-  @apply bg-primary
+  @apply !bg-primary
 }
 /* Table set */
 :deep(.p-datatable-thead th) {

src/components/Discover/SidebarTraces.vue

@@ -67,8 +67,6 @@ export default {
   },
   setup() {
     const allMapDataStore = AllMapDataStore();
-    // const { traces, traceTaskSeq, cases } = storeToRefs(allMapDataStore);
-
     return {allMapDataStore}
   },
   data() {