Merge pull request #7 from rsalunga29/analytics-overview

Analytics v2 UI Template

Author: xming13

package-lock.json

@@ -12,7 +12,10 @@
     "animated-number-vue": "^1.0.0",
     "axios": "^0.19.2",
     "core-js": "^3.4.4",
+    "d3": "^5.15.0",
     "flag-icon-css": "^3.4.5",
+    "lodash": "^4.17.15",
+    "popper.js": "^1.16.1",
     "tailwindcss": "^1.1.4",
     "vue": "^2.6.10",
     "vue-backtotop": "^1.6.1",

package.json

@@ -0,0 +1,6 @@
+import axios, { getData } from '../lib/axios';
+
+export const fetchTrendByDate = (start_date, end_date) => {
+  return axios.get(`/analytics/trend?start_date=${start_date}&end_date=${end_date}`)
+    .then(res => getData(res))
+}

src/api/analytics.js

@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <p class="2xl font-bold">Affected countries map chart here</p>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    data: {
+      type: Array,
+      default: null,
+    }
+  },
+
+  data () {
+    return {
+      chart: null,
+    }
+  },
+
+  methods: {
+    renderChart () {
+      //
+    }
+  }
+}
+</script>

src/components/Analytics/AffectedCountry.vue

@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <p class="2xl font-bold">Affected region horizontal-stacked bar chart here</p>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    data: {
+      type: Array,
+      default: null,
+    }
+  },
+
+  data () {
+    return {
+      chart: null,
+    }
+  },
+
+  methods: {
+    renderChart () {
+      //
+    }
+  }
+}
+</script>