Discover: SidebarFilter Timeframes slider control to line chart done.

src/components/Discover/Filter/Timeframes.vue

@@ -8,17 +8,18 @@
       </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" />
+        <Slider v-model="selectArea" :step="1" :min="1" :max="timeFrameTotal" range class="mx-2" id="canvas"/>
         <br/>
         {{ selectArea }}<br/>
-        total: {{ this.filterTimeframe.data.length }}
+        total: {{ timeFrameData.length }}<br/>
       </div>
       <div>
         <div @click.stop.prevent="">
           <span class="block">Start date</span>
-          <Calendar v-model="date" dateFormat="dd/mm/yy" />
+          <Calendar v-model="date" dateFormat="dd/mm/yy"/>
         </div>
       </div>
+      <canvas id="myChart"></canvas>
     </section>
   </div>
 </template>
@@ -26,6 +27,7 @@
 import { storeToRefs } from 'pinia';
 import AllMapDataStore from '@/stores/allMapData.js';
 import getMoment from 'moment';
+import Chart from 'chart.js/auto'
 
 export default{
   setup() {
@@ -36,24 +38,71 @@ export default{
   },
   data() {
     return {
+      // timeFrameData: [],
       chartOptions: null,
-      selectArea: [1, 2],
+      selectArea: [1, 10],
       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
-        }
+    // Set Slider Time Range，滑塊範圍: 最小值 + data(10 個) + 最大值
+    timeFrameData: function(){
+      let data = [...this.filterTimeframe.data];
+      // y 軸斜率計算請參考 ./public/timeFrameSlope 的圖
+      // x 值為 0 ~ 11,
+      // 將三的座標(ax, ay), (bx, by), (cx, cy)命名為 (a, b), (c, d), (e, f)
+      // 最小值: (f - b)(c - a) = (e - a)(d - b)，求 b = (ed - ad - fa - fc) / (e - c - a)
+      // 最大值: (f - b)(e - c) = (f - d)(e - a)，求 f = (be - bc -de + da) / (a - c)
+
+      // y 軸最小值
+      let a = 0;
+      let b;
+      let c = 1;
+      let d = this.filterTimeframe.data[0].y;
+      let e = 2;
+      let f = this.filterTimeframe.data[1].y;
+      b = (e*d - a*d - f*a - f*c) / (e - c - a)
+      // y 軸最大值
+      let ma = 9;
+      let mb = this.filterTimeframe.data[8].y;
+      let mc = 10;
+      let md = this.filterTimeframe.data[9].y;
+      let me = 11;
+      let mf;
+      mf = (mb*me - mb*mc -md*me + md*ma) / (ma - mc)
+
+      // 添加最小值
+      data.unshift({
+        x: this.filterTimeframe.x_axis.min,
+        y: b,
       })
+      // 添加最大值
+      data.push({
+        x: this.filterTimeframe.x_axis.max,
+        y: mf,
+      })
+
+      return data;
+    },
+    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
+          // x: getMoment(item.x).format("YYYY-MM-DD"),
+      })
+
+      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,
+        labels,
         datasets: [
           {
             label: 'Case', // 資料的標題標籤
@@ -61,50 +110,21 @@ export default{
             fill: true,
             showLine: false,
             tension: 0.4,
-            backgroundColor: 'rgba(0,153,255)',
-            // pointRadius: 0,
-
+            backgroundColor: 'rgba(203, 213, 225)',
+            pointRadius: 0,
+            spanGaps: true,
+            segment: {
+              backgroundColor: ctx => inside(ctx, 'rgb(0,153,255)') || outside(ctx, 'rgb(203, 213, 225)'),
+             },
           },
-          // {
-          //   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();
-
-    },
+    /**
+     * Set bar chart Options
+     */
     setChartOptions() {
     // 找出 y 軸最大值，乘以 1.1 讓圖的上方多一點空間
     const max = this.filterTimeframe.y_axis.max * 1.1;
@@ -120,7 +140,10 @@ export default{
             }
         },
         plugins: {
-          legend: false // 圖例
+          legend: false, // 圖例
+          filler: {
+                propagate: false
+            }
         },
         animations: false, // 取消動畫
         scales: {
@@ -153,11 +176,9 @@ export default{
   },
   mounted() {
     this.chartOptions = this.setChartOptions();
-    this.selectArea = [1, 2];
-    // console.log(Date.parse('2014/11/01 00:34:44'));
+    this.selectArea = [1, this.timeFrameTotal];
   },
 }
 </script>
 <style>
-canvas{position:relative; z-index:1;}
 </style>

src/components/Discover/SidebarFilter.vue

@@ -132,7 +132,7 @@ export default {
         'Mode': ['Directly follows', 'Eventually follows'],
         'ModeAtt': ['Case', 'Activity'],
         'Refine': ['Include', 'Exclude'],
-        'Containment': ['Contained in', 'Started in', 'End in', 'Activity in', 'Trim'],
+        'Containment': ['Contained in', 'Started in', 'Ended in', 'Active in', 'Trim'],
       },
       tab: 'filter', // filter | funnel
       selectValue: {