95 lines
2.0 KiB
Vue
95 lines
2.0 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 {
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
scales: {
|
|
xAxes: [{
|
|
type: 'time',
|
|
time: {
|
|
parser: 'MMMM YYYY',
|
|
},
|
|
scaleLabel: {
|
|
display: true,
|
|
format: 'MMMM YYYY',
|
|
labelString: 'Date'
|
|
}
|
|
}]
|
|
},
|
|
legend: {
|
|
position: 'left'
|
|
}
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters('datas', {
|
|
'months': 'months',
|
|
'tag_filter_rows': 'tag_filter_rows'
|
|
}),
|
|
...mapGetters('config', [
|
|
'tag',
|
|
'tags'
|
|
]),
|
|
selected_tags () {
|
|
var sel = Object.keys(this.tags)
|
|
sel.push('sans tags')
|
|
return sel
|
|
},
|
|
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>
|