first commit

src/components/Chart.vue

@@ -0,0 +1,43 @@
+<template>
+  <div ref="chart">chart</div>
+</template>
+<script>
+export default {
+  props: ['window', 'type'],
+  data() {
+    return {
+      data: []
+    }
+  },
+  methods: {
+    async fetchData() {
+      if (this.window.label) {
+        try {
+          const [start, end] = [this.window.getStart(), this.window.getEnd()]
+          const sample = Math.round(((end - start) / 60) / 288) || 1
+          const host = 'http://localhost:3000'
+          const fetchUrl = `${host}/type/${this.type}/startDate/${start}/endDate/${end}/sample/${sample}`
+          const response = await fetch(fetchUrl)
+          this.data = await response.json()
+        } catch (err) {
+          console.log(err)
+        }
+      }
+    },
+    renderChart() {
+      console.log('render chart', this.data)
+    }
+  },
+  watch: {
+    window() {
+      this.fetchData()
+    },
+    type() {
+      this.fetchData()
+    },
+    data() {
+      this.renderChart()
+    }
+  }
+}
+</script>