Discover: SidebarFilter Timeframes LineChart Option done.

src/components/Discover/Filter/Timeframes.vue

@@ -1,63 +1,115 @@
 <template>
   <div class="bg-neutral-10 border border-neutral-300 rounded-xl px-4 w-full h-full">
-    <p class="h2">Hello World</p>
-
+    <section class="py-2 space-y-2 text-sm min-w-[48%] h-full">
+      <p class="h2">Range Selection</p>
+      <div class="text-primary h2 flex items-center justify-start">
+        <span class="material-symbols-outlined mr-2 text-base">info</span>
+        <p>Select or fill in a time range.</p>
+      </div>
+      <Chart type="line" :data="chartData" :options="chartOptions" class="h-3/5" />
+      <div class="px-2">
+        <Slider v-model="selectArea" :step="1" :min="1" :max="this.filterTimeframe.data.length" range class="mx-2" />
+        <br/>
+        {{ selectArea }}<br/>
+        total: {{ this.filterTimeframe.data.length }}
+      </div>
+      <div>
+        <div @click.stop.prevent="">
+          <span class="block">Start date</span>
+          <Calendar v-model="date" dateFormat="dd/mm/yy" />
+        </div>
+      </div>
+    </section>
   </div>
 </template>
 <script>
+import { storeToRefs } from 'pinia';
+import AllMapDataStore from '@/stores/allMapData.js';
+import getMoment from 'moment';
+
 export default{
-  methods: {
-    setChartData() {
-      const documentStyle = getComputedStyle(document.documentElement);
+  setup() {
+    const allMapDataStore = AllMapDataStore();
+    const { filterTimeframe } = storeToRefs(allMapDataStore);
+
+    return {allMapDataStore, filterTimeframe}
+  },
+  data() {
+    return {
+      chartOptions: null,
+      selectArea: [1, 2],
+      date: null
+    }
+  },
+  computed: {
+    chartData: function() {
+      let labels = this.filterTimeframe.data.map(time => getMoment(time.x).format("YYYY-MM-DD"));
+      let chartData = this.filterTimeframe.data.map(item => {
+        return {
+          x: getMoment(item.x).format("YYYY-MM-DD"),
+          y: item.y
+        }
+      })
+
       return {
         // 要呈現的資料
-        labels: this.traces.map(trace => ''),
+        // labels,
         datasets: [
           {
-            label: 'Trace', // 資料的標題標籤
-            data: this.traces.map(trace => this.getPercentLabel(trace.ratio)),
+            label: 'Case', // 資料的標題標籤
+            data: chartData,
             fill: true,
-            // borderColor: documentStyle.getPropertyValue('--primary-500'),
             showLine: false,
             tension: 0.4,
-            // backgroundColor: 'rgba(0,153,255)',
-            pointRadius: 0,
+            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,
-          }
+          // {
+          //   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,
+          // }
         ]
       };
+    }
+  },
+  methods: {
+    sss(e){
+      console.log(e);
+      // e.stop();
+      // e.prevent();
+      // e.preventDefault();
+
     },
     setChartOptions() {
-      return {
-        // 自訂屬性設定
+    // 找出 y 軸最大值，乘以 1.1 讓圖的上方多一點空間
+    const max = this.filterTimeframe.y_axis.max * 1.1;
+
+      return { // 自訂屬性設定
         maintainAspectRatio: false,
         aspectRatio: 0.6,
         layout: {
@@ -68,28 +120,48 @@ export default{
             }
         },
         plugins: {
-          legend: { // 圖例
-            display: false,
-          }
+          legend: false // 圖例
         },
+        animations: false, // 取消動畫
         scales: {
           x: {
-            display: false, // 隱藏 x 軸
-          },
-          y: {
-            ticks: { // 設定間隔數值
-              display: false, // 隱藏數值，只顯示格線
-              min: 0,
-              max: this.traceList[0].ratio,
-              stepSize: (this.traceList[0].ratio)/4,
+            ticks: {
+              color: '#0f172a',
             },
             grid: {
-              drawBorder: false
+              // drawOnChartArea: false, // 隱藏 x 軸網格
+              display: false,
+              // drawBorder: false,
+              // drawTicks: false,
+            },
+          },
+          y: {
+            beginAtZero: true, // scale 包含 0
+            max: max,
+            ticks: { // 設定間隔數值
+              display: false, // 隱藏數值，只顯示格線
+              stepSize: max / 4,
+            },
+            grid: {
+              color: 'rgba(100,116,139)',
+              drawBorder: false,
+              z: 1,
+            },
+            border: {
+              display: false,
             }
-          }
+          },
         },
       };
     },
-  }
+  },
+  mounted() {
+    this.chartOptions = this.setChartOptions();
+    this.selectArea = [1, 2];
+    // console.log(Date.parse('2014/11/01 00:34:44'));
+  },
 }
 </script>
+<style>
+canvas{position:relative; z-index:1;}
+</style>

src/main.js

@@ -41,6 +41,7 @@ import Timeline from 'primevue/timeline';
 import InputSwitch from 'primevue/inputswitch';
 import Chart from 'primevue/chart';
 import Slider from 'primevue/slider';
+import Calendar from 'primevue/calendar';
 
 const emitter = mitt();
 const app = createApp(App);
@@ -88,6 +89,7 @@ app.component('Timeline', Timeline);
 app.component('InputSwitch', InputSwitch);
 app.component('Chart', Chart);
 app.component('Slider', Slider);
+app.component('Calendar', Calendar);
 app.component('Draggable', draggable);  // 拖曳
 
 app.mount("#app");