Feat(home): over time tag spending comparison

src/components/charjs_line.vue

@@ -0,0 +1,17 @@
+<script>
+import { Line, mixins } from 'vue-chartjs'
+const { reactiveProp } = mixins
+
+export default {
+  name: 'chartline',
+  extends: Line,
+  mixins: [reactiveProp],
+  props: ['chartData', 'options'],
+  mounted () {
+    this.renderChart(this.chartData, this.options)
+  }
+}
+</script>
+
+<style scope>
+</style>

src/components/graph_time.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="container">
+    <chartline :chart-data="datasets" :options="options" v-if="datasets[0] !== 0"></chartline>
+  </div>
+</template>
+
+<script>
+import moment from 'moment'
+import chartline from './charjs_line'
+import { mapGetters } from 'vuex'
+import { total, groupBy } from '../libs/data_processing'
+
+export default {
+  name: 'graphTime',
+  components: {
+    'chartline': chartline
+  },
+  data () {
+    return {
+      selected_tags: [
+        'virements',
+        'cash',
+        'autoroute',
+        'train',
+        'essence',
+        'courses',
+        'sans tags'
+      ],
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        legend: {
+          position: 'left'
+        }
+      }
+    }
+  },
+  computed: {
+    ...mapGetters('datas', {
+      'months': 'months',
+      'tag_filter_rows': 'tag_filter_rows'
+    }),
+    ...mapGetters('config', [
+      'tag'
+    ]),
+    datasets () {
+      var datas = []
+      this.selected_tags.forEach(t => {
+        var rows = []
+        if (t === 'sans tags') {
+          rows = this.tag_filter_rows([], true, false)
+          console.log(rows)
+        } else {
+          rows = this.tag_filter_rows([t], false, false)
+        }
+        var dateGrouped = groupBy(rows,
+          row => moment(row.Date).format('MMMM YYYY'),
+          total)
+        datas.push({
+          label: t,
+          borderColor: (this.tag(t) ? this.tag(t).color : '#A9A9A9'),
+          data: this.months.map(month => {
+            return (dateGrouped[month] ? dateGrouped[month] : 0)
+          }),
+          fill: false
+        })
+      })
+      return {
+        labels: this.months,
+        datasets: datas
+      }
+    }
+  },
+  methods: {
+  }
+}
+
+</script>
+
+<style scope>
+.container {
+  position: relative;
+  height: 420px;
+}
+</style>