diff --git a/src/components/Discover/Map/Filter/Attributes.vue b/src/components/Discover/Map/Filter/Attributes.vue index 2c52492..a38478a 100644 --- a/src/components/Discover/Map/Filter/Attributes.vue +++ b/src/components/Discover/Map/Filter/Attributes.vue @@ -54,30 +54,31 @@ -
+
+
-
+
- +
- + @@ -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]; // 初始化滑塊 } } diff --git a/src/components/Discover/Map/Filter/Timeframes.vue b/src/components/Discover/Map/Filter/Timeframes.vue index aa7bd63..b96a4ab 100644 --- a/src/components/Discover/Map/Filter/Timeframes.vue +++ b/src/components/Discover/Map/Filter/Timeframes.vue @@ -17,8 +17,8 @@
- Start time - + Start time +
~
diff --git a/src/components/Discover/Map/SidebarFilter.vue b/src/components/Discover/Map/SidebarFilter.vue index d76638b..ddc9af5 100644 --- a/src/components/Discover/Map/SidebarFilter.vue +++ b/src/components/Discover/Map/SidebarFilter.vue @@ -1,5 +1,5 @@