kenmirrors/firefly-iii
1
0
Fork 0
mirror of https://github.com/firefly-iii/firefly-iii.git synced 2025-11-18 07:38:29 +00:00
Code Issues Projects Releases Wiki Activity

Budget and category charts in new layout.

Browse Source
This commit is contained in:
James Cole
2020-07-04 12:08:38 +02:00
parent d33c87c565
commit f48bc8d299
32 changed files with 704 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
frontend/src/components/charts/DataConverter.vue
View File

@@ -100,9 +100,11 @@
},
getLabels() {
let firstSet = this.dataSet[0];
for (const entryLabel in firstSet.entries) {
if (firstSet.entries.hasOwnProperty(entryLabel)) {
this.newDataSet.labels.push(entryLabel);
if (typeof firstSet !== 'undefined') {
for (const entryLabel in firstSet.entries) {
if (firstSet.entries.hasOwnProperty(entryLabel)) {
this.newDataSet.labels.push(entryLabel);
}
}
}
},
@@ -111,18 +113,20 @@
if (this.dataSet.hasOwnProperty(setKey)) {
let newSet = {};
let oldSet = this.dataSet[setKey];
newSet.label = oldSet.label;
newSet.type = oldSet.type;
newSet.currency_symbol = oldSet.currency_symbol;
newSet.currency_code = oldSet.currency_code;
newSet.yAxisID = oldSet.yAxisID;
newSet.data = [];
for (const entryLabel in oldSet.entries) {
if (oldSet.entries.hasOwnProperty(entryLabel)) {
newSet.data.push(oldSet.entries[entryLabel]);
if (typeof oldSet !== 'undefined') {
newSet.label = oldSet.label;
newSet.type = oldSet.type;
newSet.currency_symbol = oldSet.currency_symbol;
newSet.currency_code = oldSet.currency_code;
newSet.yAxisID = oldSet.yAxisID;
newSet.data = [];
for (const entryLabel in oldSet.entries) {
if (oldSet.entries.hasOwnProperty(entryLabel)) {
newSet.data.push(oldSet.entries[entryLabel]);
}
}
this.newDataSet.datasets.push(newSet);
}
this.newDataSet.datasets.push(newSet);
}
}
}

148
frontend/src/components/charts/DefaultBarOptions.vue Normal file
View File

@@ -0,0 +1,148 @@
<!--
- DefaultLineOptions.vue
- Copyright (c) 2020 james@firefly-iii.org
-
- This file is part of Firefly III (https://github.com/firefly-iii).
-
- This program is free software: you can redistribute it and/or modify
- it under the terms of the GNU Affero General Public License as
- published by the Free Software Foundation, either version 3 of the
- License, or (at your option) any later version.
-
- This program is distributed in the hope that it will be useful,
- but WITHOUT ANY WARRANTY; without even the implied warranty of
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- GNU Affero General Public License for more details.
-
- You should have received a copy of the GNU Affero General Public License
- along with this program. If not, see <https://www.gnu.org/licenses/>.
-->
<template>
</template>
<script>
export default {
name: "DefaultBarOptions",
data() {
return {}
},
methods: {
/**
* Takes a string phrase and breaks it into separate phrases no bigger than 'maxwidth', breaks are made at complete words.
* https://stackoverflow.com/questions/21409717/chart-js-and-long-labels
*
* @param str
* @param maxwidth
* @returns {Array}
*/
formatLabel(str, maxwidth) {
var sections = [];
str = String(str);
var words = str.split(" ");
var temp = "";
words.forEach(function (item, index) {
if (temp.length > 0) {
var concat = temp + ' ' + item;
if (concat.length > maxwidth) {
sections.push(temp);
temp = "";
} else {
if (index === (words.length - 1)) {
sections.push(concat);
return;
} else {
temp = concat;
return;
}
}
}
if (index === (words.length - 1)) {
sections.push(item);
return;
}
if (item.length < maxwidth) {
temp = item;
} else {
sections.push(item);
}
});
return sections;
},
getDefaultOptions() {
console.log('getDefaultOptions()');
return {
legend: {
display: false,
},
animation: {
duration: 0,
},
responsive: true,
maintainAspectRatio: false,
elements: {
line: {
cubicInterpolationMode: 'monotone'
}
},
scales: {
xAxes: [
{
stacked: true,
gridLines: {
display: false
},
ticks: {
// break ticks when too long.
callback: function (value, index, values) {
//return this.formatLabel(value, 20);
return value;
}
}
}
],
yAxes: [{
display: true,
ticks: {
callback: function (tickValue) {
"use strict";
let currencyCode = this.chart.data.datasets[0].currency_code ? this.chart.data.datasets[0].currency_code : 'EUR';
return new Intl.NumberFormat(window.localeValue, {style: 'currency', currency: currencyCode}).format(tickValue);
},
beginAtZero: true
}
}]
},
tooltips: {
mode: 'label',
callbacks: {
label: function (tooltipItem, data) {
"use strict";
let currencyCode = data.datasets[tooltipItem.datasetIndex].currency_code ? data.datasets[tooltipItem.datasetIndex].currency_code : 'EUR';
let nrString =
new Intl.NumberFormat(window.localeValue, {style: 'currency', currency: currencyCode}).format(tooltipItem.yLabel)
return data.datasets[tooltipItem.datasetIndex].label + ': ' + nrString;
}
}
}
};
}
}
}
</script>
<style scoped>
</style>

4
frontend/src/components/dashboard/Dashboard.vue
View File

@@ -30,10 +30,10 @@
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<main-budget-chart/>
<main-budget/>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<main-category-chart/>
<main-category />
</div>
</div>

11
frontend/src/components/dashboard/MainAccount.vue
View File

@@ -24,8 +24,8 @@
<h3 class="card-title">{{ $t('firefly.yourAccounts') }}</h3>
</div>
<div class="card-body">
<div class="main-account-chart">
<main-account-chart v-if="loaded" :styles="myStyles" :options="chartOptions" :chart-data="chartData"></main-account-chart>
<div>
<main-account-chart v-if="loaded" :styles="chartStyles" :options="chartOptions" :chart-data="chartData"></main-account-chart>
</div>
</div>
<div class="card-footer">
@@ -67,7 +67,7 @@
},
computed: {
myStyles() {
chartStyles() {
return {
height: '400px',
'max-height': '400px',
@@ -79,8 +79,3 @@
name: "MainAccount"
}
</script>
<style scoped>
.main-account-chart {
}
</style>

82
frontend/src/components/dashboard/MainBudget.vue Normal file
View File

@@ -0,0 +1,82 @@
<!--
- MainBudgetChart.vue
- Copyright (c) 2020 james@firefly-iii.org
-
- This file is part of Firefly III (https://github.com/firefly-iii).
-
- This program is free software: you can redistribute it and/or modify
- it under the terms of the GNU Affero General Public License as
- published by the Free Software Foundation, either version 3 of the
- License, or (at your option) any later version.
-
- This program is distributed in the hope that it will be useful,
- but WITHOUT ANY WARRANTY; without even the implied warranty of
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- GNU Affero General Public License for more details.
-
- You should have received a copy of the GNU Affero General Public License
- along with this program. If not, see <https://www.gnu.org/licenses/>.
-->
<template>
<div class="card">
<div class="card-header">
<h3 class="card-title">{{ $t('firefly.budgets') }}</h3>
</div>
<div class="card-body">
<div>
<main-budget-chart v-if="loaded" :styles="chartStyles" :options="chartOptions" :chart-data="chartData"></main-budget-chart>
</div>
</div>
<div class="card-footer">
<a href="./budgets" class="btn btn-default button-sm"><i class="far fa-money-bill-alt"></i> {{ $t('firefly.go_to_budgets') }}</a>
</div>
</div>
</template>
<script>
import MainBudgetChart from "./MainBudgetChart";
import DefaultBarOptions from "../charts/DefaultBarOptions";
import DataConverter from "../charts/DataConverter";
export default {
name: "MainBudget",
components: {
MainBudgetChart
},
data() {
return {
chartData: null,
loaded: false,
chartOptions: null,
}
},
mounted() {
this.chartOptions = DefaultBarOptions.methods.getDefaultOptions();
this.loaded = false;
axios.get('./api/v1/chart/budget/overview?start=' + window.sessionStart + '&end=' + window.sessionEnd)
.then(response => {
this.chartData = response.data;
//this.chartData = DataConverter.methods.colorizeData(this.chartData);
this.chartData = DataConverter.methods.convertChart(this.chartData);
this.loaded = true
});
},
methods: {
},
computed: {
chartStyles() {
return {
height: '400px',
'max-height': '400px',
position: 'relative',
display: 'block',
}
}
},
}
</script>
<style scoped>
</style>

26
frontend/src/components/dashboard/MainBudgetChart.vue
View File

@@ -18,25 +18,17 @@
- along with this program. If not, see <https://www.gnu.org/licenses/>.
-->
<template>
<div class="card">
<div class="card-header">
<h3 class="card-title">I am a card</h3>
</div>
<div class="card-body">
<p>
I am card body
</p>
</div>
</div>
</template>
<script>
import {Line} from 'vue-chartjs'
export default {
name: "MainBudgetChart"
name: "MainBudgetChart",
extends: Line,
props: ['options', 'chartData'],
mounted() {
this.renderChart(this.chartData, this.options)
}
}
</script>
<style scoped>
</style>

81
frontend/src/components/dashboard/MainCategory.vue Normal file
View File

@@ -0,0 +1,81 @@
<!--
- MainCategoryChart.vue
- Copyright (c) 2020 james@firefly-iii.org
-
- This file is part of Firefly III (https://github.com/firefly-iii).
-
- This program is free software: you can redistribute it and/or modify
- it under the terms of the GNU Affero General Public License as
- published by the Free Software Foundation, either version 3 of the
- License, or (at your option) any later version.
-
- This program is distributed in the hope that it will be useful,
- but WITHOUT ANY WARRANTY; without even the implied warranty of
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- GNU Affero General Public License for more details.
-
- You should have received a copy of the GNU Affero General Public License
- along with this program. If not, see <https://www.gnu.org/licenses/>.
-->
<template>
<div class="card">
<div class="card-header">
<h3 class="card-title">{{ $t('firefly.categories') }}</h3>
</div>
<div class="card-body">
<div>
<main-category-chart v-if="loaded" :styles="chartStyles" :options="chartOptions" :chart-data="chartData"></main-category-chart>
</div>
</div>
<div class="card-footer">
<a href="./categories" class="btn btn-default button-sm"><i class="far fa-money-bill-alt"></i> {{ $t('firefly.go_to_categories') }}</a>
</div>
</div>
</template>
<script>
import MainCategoryChart from "./MainCategoryChart";
import DefaultBarOptions from "../charts/DefaultBarOptions";
import DataConverter from "../charts/DataConverter";
export default {
name: "MainCategory",
components: {
MainCategoryChart
},
data() {
return {
chartData: null,
loaded: false,
chartOptions: null,
}
},
mounted() {
this.chartOptions = DefaultBarOptions.methods.getDefaultOptions();
this.loaded = false;
axios.get('./api/v1/chart/category/overview?start=' + window.sessionStart + '&end=' + window.sessionEnd)
.then(response => {
this.chartData = response.data;
this.chartData = DataConverter.methods.convertChart(this.chartData);
this.loaded = true
});
},
methods: {
},
computed: {
chartStyles() {
return {
height: '400px',
'max-height': '400px',
position: 'relative',
display: 'block',
}
}
},
}
</script>
<style scoped>
</style>

24
frontend/src/components/dashboard/MainCategoryChart.vue
View File

@@ -17,23 +17,17 @@
- You should have received a copy of the GNU Affero General Public License
- along with this program. If not, see <https://www.gnu.org/licenses/>.
-->
<template>
<div class="card">
<div class="card-header">
<h3 class="card-title">I am a card</h3>
</div>
<div class="card-body">
<p>
I am card body
</p>
</div>
</div>
</template>
<script>
import {Line} from "vue-chartjs";
export default {
name: "MainCategoryChart"
name: "MainCategoryChart",
extends: Line,
props: ['options', 'chartData'],
mounted() {
this.renderChart(this.chartData, this.options)
}
}
</script>

8
frontend/src/components/transactions/TransactionListLarge.vue
View File

@@ -64,10 +64,14 @@
</span>
</td>
<td>
cat
<span v-for="tr in transaction.attributes.transactions">
<a :href="'categories/show/' + transaction.category_id" v-if="0!==tr.category_id">{{ tr.category_name }}</a><br />
</span>
</td>
<td>
bud
<span v-for="tr in transaction.attributes.transactions">
<a :href="'budgets/show/' + transaction.budget_id" v-if="0!==tr.budget_id">{{ tr.budget_name }}</a><br />
</span>
</td>
</tr>
</tbody>