Feat(home): over time tag spending comparison

This commit is contained in:
Bertrand Benjamin 2019-01-27 07:18:50 +01:00
parent cd313264af
commit 7fc1675052
5 changed files with 213 additions and 61 deletions

View File

@ -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>

View File

@ -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>

View File

@ -29,8 +29,48 @@ export function formatDate (row, field = 'Date') {
row[field] = moment(row[field], 'DD/MM/YYYY', true)
}
export function total (row, field = 'Montant') {
var sum = row.map(x => parseFloat(x[field]))
export function total (rows, field = 'Montant') {
var sum = rows.map(x => parseFloat(x[field]))
.reduce((sum, x) => sum + x, 0)
return Math.round(sum)
}
export function tag_filter (rows, tags, invert=false) {
// filter rows by tags
// invert inverts the selection
return rows.filter(row => {
if (invert) {
return tags.some(t => {
return row.tags.map(t => t.name.toLowerCase())
.indexOf(t.toLowerCase()) < 0
})
} else {
return tags.every(t => {
return row.tags.map(t => t.name.toLowerCase())
.indexOf(t.toLowerCase()) > -1
})
}
})
}
function objectMap (object, mapFn) {
// map a function on object value
return Object.keys(object).reduce(function(result, key) {
result[key] = mapFn(object[key])
return result
}, {})
}
export function groupBy (rows, grouping, agg) {
// Group rows by field then apply agg
var groups = rows.reduce((stock, row) => {
var group = grouping(row)
if (stock[group]) {
stock[group].push(row)
} else {
stock[group] = [row]
}
return stock
}, {})
return objectMap(groups, group => agg(group))
}

View File

@ -3,7 +3,7 @@ import Vue from 'vue'
import path from 'path'
import Papa from 'papaparse'
import moment from 'moment'
import { appendTag, formatDate } from '../../libs/data_processing'
import { appendTag, formatDate, tag_filter } from '../../libs/data_processing'
export default {
namespaced: true,
@ -57,27 +57,25 @@ export default {
return moment(x.Date).isSame(state.month, 'month')
})
},
tag_filter_rows: (state, getters) => (tags, invert) => {
// return rows filtered by date then by tags
if (tags) {
return getters.date_filter_rows.filter(row => {
if (invert) {
return tags.some(t => {
return row.tags.map(t => t.name.toLowerCase())
.indexOf(t.toLowerCase()) < 0
})
tag_filter_rows: (state, getters) => (tags, invert, dateFilter = true) => {
// return rows filtered by tags
// by default it filters rows by date
// to disable date filtering set date_filter to false
var rows
if (dateFilter) {
rows = getters.date_filter_rows
} else {
return tags.every(t => {
return row.tags.map(t => t.name.toLowerCase())
.indexOf(t.toLowerCase()) > -1
})
rows = getters.spending_rows
}
})
if (tags.length > 0) {
return tag_filter(rows, tags, invert)
} else {
if (invert) {
return []
return rows.filter(r => {
return r.tags.map(t => t.name.toLowerCase()).toString() === ["cb"].toString()
})
} else {
return getters.date_filter_rows
return rows
}
}
},
@ -99,7 +97,12 @@ export default {
})
})
}
},
months: (state, getters) => {
// Set of month
return [... new Set(getters.rows.map(x => moment(x.Date).format('MMMM YYYY')))]
}
},
mutations: {
CLEAR_DATA: (state) => {

View File

@ -2,6 +2,10 @@
<div class="import">
<h1>Analyse</h1>
<div class="analysis" v-if="datas_present">
<h2> Sur le temps </h2>
<graph-time></graph-time>
<h2> Par mois</h2>
<b-container fluid>
<b-row class="date-selector">
<b-button @click="prev_month" variant="link">
@ -54,6 +58,7 @@
import { mapGetters, mapActions } from 'vuex'
import box from '../components/box'
import tagsComparison from '../components/tags_comparison'
import graphTime from '../components/graph_time'
import moment from 'moment'
moment.locale('fr')
@ -62,7 +67,8 @@ export default {
name: 'home',
components: {
box: box,
tagsComparison: tagsComparison
tagsComparison: tagsComparison,
graphTime: graphTime
},
data () {
return {
@ -98,6 +104,7 @@ export default {
'tag_filter_rows': 'datas/tag_filter_rows',
'datas_present': 'datas/present',
'month': 'datas/month',
'months': 'datas/months',
'tags': 'config/tags'
}),
filtered_rows () {