85 lines
1.7 KiB
Vue
85 lines
1.7 KiB
Vue
<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)
|
|
} 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>
|