Add calendars to histogramSlider (#30)

Add calendars in the computer view #8

package.json

@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@vuepic/vue-datepicker": "^3.2.1",
     "core-js": "^3.6.5",
     "d3-array": "^2.12.1",
     "d3-brush": "^2.1.0",

src/Store.ts

@@ -82,6 +82,11 @@ export const store = {
     this.state.histogramSlider.updateHistogram(this.allData.map(d => d.date.getTime()), this)
   },
 
+  updateHistogramSliderFromTo (): void {
+    this.state.histogramSlider.updateSlider(this.state.minDate.valueOf(), this.state.maxDate.valueOf())
+    this.updateHistogramSlider()
+  },
+
   updateStats (): void {
     updateStats(this.state)
   }

src/classes/HistogramSlider.ts

@@ -140,4 +140,11 @@ export class HistogramSlider {
       this.transitionDuration + 10
     )
   }
+
+  updateSlider(from: number, to: number): void {
+    this.ionRangeSlider.options.from = from
+    this.ionRangeSlider.options.to = to
+    this.ionRangeSlider.updateResult()
+    this.ionRangeSlider.update(this.ionRangeSlider.options)
+  }
 }

src/components/Date.vue

@@ -0,0 +1,78 @@
+<template>
+  <div v-if="visible">
+    <div class="z-100 fixed top-0 left-0 w-screen h-screen bg-black bg-opacity-50"></div>
+    <div id="popUpDate"
+      class="z-100 fixed top-0 left-0 w-screen h-screen flex items-center justify-center transform transition-transform duration-300">
+      <div class="bg-white rounded-3xl p-6">
+        <div class="flex justify-between mb-5">
+          <h1 class="font-bold text-secondary">Filter date</h1>
+          <button id="dateCloseButton" type="button" class="focus:outline-none text-grayClose" @click="toggleVisible">X</button>
+        </div>
+        <Datepicker v-model="date" @update:modelValue="handleDate" inline autoApply/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { store } from "@/Store"
+import Datepicker from "@vuepic/vue-datepicker"
+import { defineComponent } from "vue"
+import "@vuepic/vue-datepicker/dist/main.css"
+
+export default defineComponent({
+  components: {
+    Datepicker
+  },
+  name: "Date",
+
+  props: {
+    visible: Boolean,
+    toggleVisible: Function,
+    isMinDate: Boolean
+  },
+  data (): { date: Date, isVisible: boolean } {
+    if (this.isMinDate) {
+      return { date: store.state.minDate, isVisible: false }
+    } else {
+      return { date: store.state.maxDate, isVisible: false }
+    }
+  },
+  methods: {
+    handleDate (modelData: Date): void {
+      if (this.isMinDate) {
+        store.state.minDate = modelData
+      } else {
+        store.state.maxDate = modelData
+      }
+      store.filterData(store.state.minDate, store.state.maxDate)
+      store.updateHistogramSliderFromTo()
+    }
+  }
+})
+
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h1 {
+  font-size: x-large;
+}
+
+p, span {
+  color: var(--text-color);
+}
+
+.text-3xs {
+  font-size: 0.5rem;
+  line-height: 0.5rem;
+}
+
+.vertical-separator {
+  border-right: 1px solid;
+}
+
+button {
+  left: 100%;
+}
+</style>

src/components/HistogramSlider.vue

@@ -1,10 +1,16 @@
 <template>
-  <div :style="style" class="h-16 mx-auto md:h-32 md:absolute md:bottom-5 md:bg-white md:opacity-80 md:p-6 md:rounded-2xl">
-    <svg :id="'vue-histogram'" class="hidden md:block md:w-full"/>
-    <div class="slider-wrapper">
-      <input type="text" :id="'histogram-slider'" :name="'histogram-slider'" value=""/>
+  <div :style="style" class="h-16 mx-auto flex md:h-32 md:absolute md:bottom-5 md:bg-white md:opacity-80 md:p-6 md:rounded-2xl">
+    <span class="hidden md:block icon icon-calendar text-4xl text-right color-secondary cursor-pointer" @click="toggleMinDateVisibility"/>
+    <div class="w-full">
+      <svg :id="'vue-histogram'" class="hidden md:block md:w-full"/>
+      <div class="slider-wrapper">
+        <input type="text" :id="'histogram-slider'" :name="'histogram-slider'" value=""/>
+      </div>
     </div>
+    <span class="hidden md:block icon icon-calendar text-4xl text-right color-secondary cursor-pointer" @click="toggleMaxDateVisibility"/>
   </div>
+  <Date :visible="minDateVisibility" :toggleVisible="toggleMinDateVisibility" :isMinDate="true"/>
+  <Date :visible="maxDateVisibility" :toggleVisible="toggleMaxDateVisibility" :isMinDate="false" />
 </template>
 
 <script lang='ts'>
@@ -15,21 +21,35 @@ import { computed, defineComponent, onBeforeUnmount, onMounted, ref } from "vue"
 
 // eslint-disable-next-line
 import $ from "jquery"
+import Date from "./Date.vue"
 
 export default defineComponent({
+  components: {
+    Date
+  },
   setup () {
     const getWidth = () => {
       return 0.75 * window.innerWidth
     }
 
     const width = ref(getWidth())
+    const minDateVisibility = ref(false)
+    const maxDateVisibility = ref(false)
 
     const onResize = () => {
       width.value = getWidth()
       store.setWidthHistogramSlider(width.value)
       store.updateHistogramSlider()
     }
 
+    const toggleMinDateVisibility = () => {
+      minDateVisibility.value = !minDateVisibility.value
+    }
+
+    const toggleMaxDateVisibility = () => {
+      maxDateVisibility.value = !maxDateVisibility.value
+    }
+
     const style = computed(() => {
       return `
         width: ${width.value}px;
@@ -57,7 +77,7 @@ export default defineComponent({
     })
 
     return {
-      style
+      style, minDateVisibility, toggleMinDateVisibility, maxDateVisibility, toggleMaxDateVisibility
     }
   }
 })