Map Attributes: value type Calendar done, but have event bubbling error.

src/components/Discover/Map/Filter/Attributes.vue

@@ -54,18 +54,19 @@
           </DataTable>
         </div>
         <!-- type: value -->
-        <div v-else>
+        <div v-else-if="valueTypes.includes(selectedAttName?.type)">
+          <!-- Chart.js -->
           <div class="h-3/5 relative">
-            <!-- <canvas id="chartCanvasId"></canvas> -->
             <Chart type="line" :data="chartData" :options="chartOptions" class="h-30rem" id="chartCanvasId"/>
             <div id="chart-mask-left" class="absolute bg-neutral-10/50"></div>
             <div id="chart-mask-right" class="absolute bg-neutral-10/50"></div>
           </div>
+          <!-- Slider -->
           <div class="px-2 py-3">
             <Slider v-model="selectArea" :step="1" :min="0" :max="selectRange" range class="mx-2" @change="changeSelectArea($event)"/>
           </div>
           <!-- Calendar group -->
-          <!-- <div class="flex justify-center items-center space-x-2 w-full">
+          <div class="flex justify-center items-center space-x-2 w-full">
             <div>
               <span class="block mb-2">Start time</span>
               <Calendar v-model="startTime" dateFormat="yy/mm/dd" :panelProps="panelProps" :minDate="startMinDate" :maxDate="startMaxDate" showTime showIcon hourFormat="24" @date-select="sliderTimeRange($event, 'start')" id="startCalendar" />
@@ -75,7 +76,7 @@
               <span class="block mb-2">End time</span>
               <Calendar v-model="endTime" dateFormat="yy/mm/dd" :panelProps="panelProps" :minDate="endMinDate" :maxDate="endMaxDate" showTime showIcon hourFormat="24" @date-select="sliderTimeRange($event, 'end')" id="endCalendar"/>
             </div>
-          </div> -->
+          </div>
         </div>
       </div>
     </div>
@@ -119,6 +120,11 @@ export default {
       headerClass: '!bg-neutral-10 !border-neutral-500 !py-2 sticky top-0 left-0 z-10 bg-neutral-10',
       bodyModeClass: '!p-2 !border-0',
       bodyClass: 'break-words !py-2 !border-0',
+      panelProps: {
+        onClick: (event) => {
+          event.stopPropagation();
+        },
+      },
     }
   },
   computed: {
@@ -199,11 +205,33 @@ export default {
 
       return sliderData;
     },
+    // user select time start and end
+    attValueTypeStartEnd: function() {
+      let start = getMoment(this.startTime).format('YYYY-MM-DDTHH:mm:ss');
+      let end = getMoment(this.endTime).format('YYYY-MM-DDTHH:mm:ss');
+      // this.selectTimeFrame = [start, end]; // 傳給後端的資料
+      // this.$emit('on-row-select', e.data);
+
+      return [start, end];
+    },
   },
   methods: {
     onRowSelect(e) {
-      if(this.valueData) this.createChart();
-      // this.$emit('on-row-select', e.data)
+      if(this.valueData) {
+        // 初始化: Calendar
+        this.startMinDate = new Date(getMoment(this.valueData.chart.x_axis.min).format());
+        this.startMaxDate = new Date(getMoment(this.valueData.chart.x_axis.max).format());
+        this.endMinDate = new Date(getMoment(this.valueData.chart.x_axis.min).format());
+        this.endMaxDate = new Date(getMoment(this.valueData.chart.x_axis.max).format());
+        // 初始化: 讓日曆的範圍等於時間軸的範圍
+        this.startTime = this.startMinDate;
+        this.endTime = this.startMaxDate;
+        this.attValueTypeStartEnd;
+        // 建立圖表
+        this.createChart();
+      } else {
+        // this.$emit('on-row-select', e.data);
+      }
     },
     /**
      * set progress bar width
@@ -338,8 +366,6 @@ export default {
           },
         },
       };
-
-
     },
     /**
      * 滑塊改變的時候
@@ -359,11 +385,37 @@ export default {
       // 重新算圖
       this.resizeMask(this.chartComplete);
       // 執行 timeFrameStartEnd 才會改變數據
-      // this.timeFrameStartEnd;
+      this.attValueTypeStartEnd;
+    },
+    /**
+     * 選取開始或結束時間時，要改變滑塊跟圖表
+     * @param {object} e Tue Jan 25 2022 00:00:00 GMT+0800 (台北標準時間)
+     * @param {string} direction start or end
+     */
+     sliderTimeRange(e, direction) {
+      // 找到最鄰近的 index，時間格式: 毫秒時間戳
+      let sliderData = this.sliderData;
+      const targetTime = [new Date(this.attValueTypeStartEnd[0]).getTime(), new Date(this.attValueTypeStartEnd[1]).getTime()];
+      const closestIndexes = targetTime.map(target => {
+        let closestIndex = 0;
+        closestIndex = ((target - sliderData[0])/(sliderData[sliderData.length-1]-sliderData[0])) * sliderData.length;
+        let result = Math.round(Math.abs(closestIndex));
+        result = result > this.selectRange ? this.selectRange : result;
+        return result
+      });
+
+      // 改變滑塊
+      this.selectArea = closestIndexes;
+      // 重新設定 start end 日曆選取範圍
+      if(direction === 'start') this.endMinDate = e;
+      else if(direction === 'end') this.startMaxDate = e;
+      // 重新算圖
+      if(!isNaN(closestIndexes[0]) && !isNaN(closestIndexes[1])) this.resizeMask(this.chartComplete);
+      else return;
     },
   },
   mounted() {
-    // this.setChartData();
+    // Slider
     this.selectArea = [0, this.selectRange]; // 初始化滑塊
   }
 }