Discover: SidebarFilter Trace done. But backend need to check creat Map.

src/components/Discover/Filter/Timeframes.vue

@@ -0,0 +1,90 @@
+<template></template>
+<script>
+export default{
+  methods: {
+    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('--primary-500'),
+            showLine: false,
+            tension: 0.4,
+            // 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,
+          }
+        ]
+      };
+    },
+    setChartOptions() {
+      return {
+        // 自訂屬性設定
+        maintainAspectRatio: false,
+        aspectRatio: 0.6,
+        layout: {
+            padding: {
+              top: 16,
+              left: 8,
+              right: 8,
+            }
+        },
+        plugins: {
+          legend: { // 圖例
+            display: false,
+          }
+        },
+        scales: {
+          x: {
+            display: false, // 隱藏 x 軸
+          },
+          y: {
+            ticks: { // 設定間隔數值
+              display: false, // 隱藏數值，只顯示格線
+              min: 0,
+              max: this.traceList[0].ratio,
+              stepSize: (this.traceList[0].ratio)/4,
+            },
+            grid: {
+              drawBorder: false
+            }
+          }
+        },
+      };
+    },
+  }
+}
+</script>

src/components/Discover/Filter/Trace.vue

@@ -112,10 +112,9 @@ export default {
       const end = this.selectArea[1]-1;
       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)');
+      const selectAreaData = this.traces.map((trace, index) => index >= start && index <= end ? 'rgba(0,153,255)' : 'rgba(203, 213, 225)');
 
-      return {
+      return { // 要呈現的資料
-        // 要呈現的資料
         labels,
         datasets: [
           {
@@ -130,6 +129,9 @@ export default {
     }
   },
   methods: {
+    /**
+     * Set bar chart Options
+     */
     barOptions(){
       return {
         maintainAspectRatio: false,
@@ -166,96 +168,12 @@ export default {
         }
       };
     },
-    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('--primary-500'),
-            showLine: false,
-            tension: 0.4,
-            // 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,
-          }
-        ]
-      };
-    },
-    setChartOptions() {
-      return {
-        // 自訂屬性設定
-        maintainAspectRatio: false,
-        aspectRatio: 0.6,
-        layout: {
-            padding: {
-              top: 16,
-              left: 8,
-              right: 8,
-            }
-        },
-        plugins: {
-          legend: { // 圖例
-            display: false,
-          }
-        },
-        scales: {
-          x: {
-            display: false, // 隱藏 x 軸
-          },
-          y: {
-            ticks: { // 設定間隔數值
-              display: false, // 隱藏數值，只顯示格線
-              min: 0,
-              max: this.traceList[0].ratio,
-              stepSize: (this.traceList[0].ratio)/4,
-            },
-            grid: {
-              drawBorder: false
-            }
-          }
-        },
-      };
-    },
     /**
      * Number to percentage
      * @param   {number} val
      * @returns {string}     轉換完成的百分比字串
      */
      getPercentLabel(val){
-      // return (val * 100 === 100) ? `${val * 100}%` : `${(val * 100).toFixed(1)}%`;
       return (val * 100 === 100) ? val * 100 : (val * 100).toFixed(1);
     },
     /**
@@ -331,8 +249,6 @@ export default {
     this.setEdgesData();
     this.createCy();
     this.chartOptions = this.barOptions();
-    // this.chartData = this.setChartData();
-    // this.chartOptions = this.setChartOptions();
     this.selectArea = [0, this.traceTotal]
   },
 }