Discover: SidebarFilter Timeframes div & slider done.

src/components/Discover/Filter/Timeframes.vue

@@ -6,9 +6,7 @@
         <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"  ref="TimeChart" /> -->
       <div class="chartContainer">
-        <!-- <Chart type="line" :data="chartData" :options="chartOptions" class="h-3/5"  ref="TimeChart" /> -->
         <canvas id="chartCanvasId"></canvas>
         <div id="chart-mask-left"></div>
         <div id="chart-mask-right"></div>
@@ -16,10 +14,9 @@
 
       <div class="px-2">
         <!-- <Slider v-model="selectArea" :step="1" :min="1" :max="timeFrameTotal" range class="mx-2"/> -->
-        <Slider v-model="selectArea" :step="1" :min="0" :max="100" range class="mx-2" @change="changeSelectArea($event)"/>
+        <Slider v-model="selectArea" :step="1" :min="0" :max="selectRange" range class="mx-2" @change="changeSelectArea($event)"/>
         <br/>
         {{ selectArea }}<br/>
-        total: {{ timeFrameData.length }}<br/>
       </div>
       <div>
         <div @click.stop.prevent="">
@@ -34,11 +31,8 @@
 <script>
 import { storeToRefs } from 'pinia';
 import AllMapDataStore from '@/stores/allMapData.js';
-import getMoment from 'moment';
-import { timeRange, yTimeRange } from '@/module/timeframes.js';
 import { Chart, registerables } from 'chart.js';
 import 'chartjs-adapter-date-fns';
-import "chart.js/auto";
 
 export default{
   setup() {
@@ -49,16 +43,15 @@ export default{
   },
   data() {
     return {
-      // timeFrameData: [],
-      chartOptions: null,
-      selectArea: [1, 10],
+      selectRange: 300, // 更改 select 的切分數
+      selectArea: [1,10],
       date: null,
       chart: null,
       canvasId: null,
     }
   },
   computed: {
-    // Set Slider Time Range，滑塊範圍: 最小值 + data(10 個) + 最大值
+    // 加入最大、最小值
     timeFrameData: function(){
       let data = this.filterTimeframe.data.map(i=>({x:i.x,y:i.y}))
       // y 軸斜率計算請參考 ./public/timeFrameSlope 的圖
@@ -97,224 +90,25 @@ export default{
         y: mf,
       })
 
-      let xVal = timeRange(data[0].x, data[data.length-1].x, 100);
-      let yVal = yTimeRange(data, 100); // y 還沒做切分份數
-      let timeData = xVal.map((x, index) => ({ x, y: yVal[index] }));
-
       return data;
-      // return timeData;
     },
-    timeFrameTotal: function() {
-      return this.timeFrameData.length;
-    },
-    chartData: function() {
-      // !!畫面顯示的時間，資料轉換，在這邊最後一個步驟做就好!!
-      let labels = this.timeFrameData.map(time => getMoment(time.x).format("YYYY-MM-DD"));
-      let chartData = this.timeFrameData.map(item => {
-        // return item.y
-        return {
-          x: getMoment(item.x).format("YYYY-MM-DD"),
-          y: item.y,
-          }
-        })
-
-      const start = this.selectArea[0]-1;
-      const end = this.selectArea[1]-1;
-      const inside = (ctx, value) => ctx.p0DataIndex >= start && ctx.p1DataIndex <= end ? value : undefined;
-      const outside = (ctx, value) => ctx.p0DataIndex < start || ctx.p1DataIndex > end ? value : undefined;
-
-      return {
-        // 要呈現的資料
-        // labels:'Data',
-        datasets: [
-          {
-            label: 'Case', // 資料的標題標籤
-            // data: chartData,
-            data: this.timeFrameData,
-            fill: true,
-            showLine: false,
-            tension: 0.4,
-            backgroundColor: 'rgba(203, 213, 225)',
-            pointRadius: 0,
-            spanGaps: true,
-            segment: {
-              backgroundColor: ctx => inside(ctx, 'rgb(0,153,255)') || outside(ctx, 'rgb(203, 213, 225)'),
-              // backgroundColor: ctx => inside(ctx, 'rgb(245,40,145)') || outside(ctx, 'rgb(250, 196, 224)'),
-             },
-            x: 'x',
-            y: 'y',
-          },
-        ]
-      };
-    },
-    options: function() {
-      const max = this.filterTimeframe.y_axis.max * 1.1;
-      return {
-        onResize: (chart, size) => {
-          this.resizeMask(chart, 0.38, 0.72);
-        },
-        responsive: true,
-        maintainAspectRatio: false,
-        layout: {
-          padding: {
-            top: 16,
-            left: 8,
-            right: 8,
-          }
-        },
-        plugins: {
-          legend: false, // 圖例
-          filler: {
-            propagate: false
-          },
-        },
-        animations: false, // 取消動畫
-        interaction: {
-          intersect: false,
-        },
-        scales: {
-          x: {
-            type: 'time',
-            ticks: {
-              color: '#0f172a',
-              display: true,
-            },
-            grid: {
-              display: false, // 隱藏 x 軸網格
-            },
-          },
-          y: {
-            beginAtZero: true, // scale 包含 0
-            max: max,
-            ticks: { // 設定間隔數值
-              display: false, // 隱藏數值，只顯示格線
-              stepSize: max / 4,
-            },
-            grid: {
-              color: 'rgba(100,116,139)',
-              z: 1,
-            },
-            border: {
-              display: false, // 隱藏左側多出來的線
-            }
-          },
-        },
-      }
-    },
-    config: function() {
-      const data = {
-        datasets: [
-          {
-            label: 'Case',
-            data: this.timeFrameData,
-            fill: 'start',
-            showLine: false,
-            tension: 0.4,
-            backgroundColor: 'rgba(0,153,255)',
-            pointRadius: 0,
-            x: 'x',
-            y: 'y',
-          }
-        ]
-      };
-      return {
-        type: 'line',
-        data: data,
-        options: this.options,
-      };
-    }
   },
   methods: {
-    /**
-     * Set bar chart Options
-     */
-    setChartOptions() {
-      // 給取並取得 chart canvas 的 ID
-      // this.$nextTick(() => {
-      //   const canvasId = this.$refs.TimeChart.$el;
-      //   const chartCanvasId = canvasId.querySelector('canvas');
-      //   chartCanvasId.setAttribute('id', 'chartCanvas');
-      // });
-      // console.log(chartCanvasId);
-      // 找出 y 軸最大值，乘以 1.1 讓圖的上方多一點空間
-      const max = this.filterTimeframe.y_axis.max * 1.1;
-
-      const config =  { // 自訂屬性設定
-        // onResize: (chart, size) => {
-        //   this.resizeMask(chart, 0.38, 0.72);
-        // },
-        // responsive: true,
-        maintainAspectRatio: false,
-        aspectRatio: 0.6,
-        layout: {
-            padding: {
-              top: 16,
-              left: 8,
-              right: 8,
-            }
-        },
-        plugins: {
-          legend: false, // 圖例
-          filler: {
-            propagate: false
-          },
-        },
-        animations: false, // 取消動畫
-        scales: {
-          x: {
-            type: 'time',
-            time: {
-              tooltipFormat: 'DD T',
-            },
-            ticks: {
-              color: '#0f172a',
-              display: true,
-            },
-            grid: {
-              display: false, // 隱藏 x 軸網格
-            },
-          },
-          y: {
-            beginAtZero: true, // scale 包含 0
-            max: max,
-            ticks: { // 設定間隔數值
-              display: false, // 隱藏數值，只顯示格線
-              stepSize: max / 4,
-            },
-            grid: {
-              color: 'rgba(100,116,139)',
-              z: 1,
-            },
-            border: {
-              display: false, // 隱藏左側多出來的線
-            }
-          },
-        },
-      };
-      // const myChart = new Chart(chartCanvasId, config);
-      // this.resizeMask(myChart, 0.38, 0.72);
-      // myChart.destroy()
-
-      return config
-    },
-    resizeMask(chart, from, to) {
-      console.log('resizeMask');
-      if (chart.chartArea === undefined) return;
+    resizeMask(chart) {
+      let from = (this.selectArea[0] * 0.01) / (this.selectRange * 0.01);
+      let to = (this.selectArea[1] * 0.01) / (this.selectRange * 0.01);
       this.resizeLeftMask(chart, from);
       this.resizeRightMask(chart, to);
     },
     resizeLeftMask(chart, from) {
-      console.log('resizeLeftMask');
       const canvas = document.getElementById("chartCanvasId");
       const mask = document.getElementById("chart-mask-left");
-      console.log(canvas);
       mask.style.left = `${canvas.offsetLeft + chart.chartArea.left}px`;
       mask.style.width = `${chart.chartArea.width * from}px`;
       mask.style.top = `${canvas.offsetTop + chart.chartArea.top}px`;
       mask.style.height = `${chart.chartArea.height}px`;
     },
     resizeRightMask(chart, to) {
-      console.log('resizeRightMask');
       const canvas = document.getElementById("chartCanvasId");
       const mask = document.getElementById("chart-mask-right");
       mask.style.left = `${canvas.offsetLeft + chart.chartArea.left + chart.chartArea.width * to}px`;
@@ -322,7 +116,7 @@ export default{
       mask.style.top = `${canvas.offsetTop + chart.chartArea.top}px`;
       mask.style.height = `${chart.chartArea.height}px`;
     },
-    createChart(start, end) {
+    createChart() {
       const max = this.filterTimeframe.y_axis.max * 1.1;
 
       const data = {
@@ -341,9 +135,6 @@ export default{
         ]
       };
       const options = {
-        onResize: (chart, size) => {
-          this.resizeMask(chart, start, end);
-        },
         responsive: true,
         maintainAspectRatio: false,
         layout: {
@@ -358,10 +149,16 @@ export default{
           filler: {
             propagate: false
           },
+          title: false
+        },
+        // animations: false, // 取消動畫
+        animation: {
+          onComplete: e => {
+            this.resizeMask(e.chart);
+          }
         },
-        animations: false, // 取消動畫
         interaction: {
-          intersect: false,
+          intersect: true,
         },
         scales: {
           x: {
@@ -398,30 +195,19 @@ export default{
       };
       this.canvasId = document.getElementById("chartCanvasId");
       this.chart = new Chart(this.canvasId, config);
-      this.resizeMask(this.chart, start, end);
     },
     /**
      * 滑塊改變的時候
-     * @param   {array} e [1, 100]
+     * @param {array} e [1, 100]
      */
     changeSelectArea(e) {
-      // const canvas = document.getElementById("chartCanvasId");
-      // window.chartCanvasId.destroy();
-      // const chart = new Chart(canvas, this.config);
-      // const chart = new Chart(this.canvasId, this.config);
-
-      // this.resizeMask(this.chart, e[0]/10, e[1]/10);
-      this.chart.destroy()
-      this.createChart(e[0]*0.01, e[1]*0.01)
+      this.resizeMask(this.chart)
     },
   },
   mounted() {
     Chart.register(...registerables);
-    this.createChart(0.38, 0.72);
-    // this.chartOptions = this.setChartOptions();
-    // this.selectArea = [1, this.timeFrameTotal];
-    this.selectArea = [38, 72]
-
+    this.createChart();
+    this.selectArea = [0, this.selectRange]
   },
 }
 </script>