kenmirrors/firefly-iii
1
0
Fork 0
mirror of https://github.com/firefly-iii/firefly-iii.git synced 2025-10-24 04:41:01 +00:00
Code Issues Projects Releases Wiki Activity

Improved budget chart.

Browse Source
This commit is contained in:
James Cole
2025-07-26 06:47:21 +02:00
parent f62e49090c
commit 46395e350a
7 changed files with 93 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
resources/assets/v2/src/pages/dashboard/budgets.js
View File

@@ -60,7 +60,8 @@ export default () => ({
const start = new Date(window.store.get('start'));
const end = new Date(window.store.get('end'));
const cacheKey = getCacheKey('ds_bdg_chart', {start: start, end: end});
const cacheValid = window.store.get('cacheValid');
//const cacheValid = window.store.get('cacheValid');
const cacheValid = false;
let cachedData = window.store.get(cacheKey);
if (cacheValid && typeof cachedData !== 'undefined') {
@@ -80,7 +81,7 @@ export default () => ({
},
generateOptions(data) {
currencies = [];
let options = getDefaultChartSettings('column');
let options = getDefaultChartSettings('bar');
options.options.locale = window.store.get('locale').replace('_', '-');
options.options.plugins = {
tooltip: {
@@ -94,7 +95,7 @@ export default () => ({
if (label) {
label += ': ';
}
return label + ' ' + formatMoney(context.parsed.y, currencies[context.parsed.x] ?? 'EUR');
return label + ' ' + formatMoney(context.parsed.x, currencies[context.parsed.x] ?? 'EUR');
}
}
}
@@ -103,55 +104,40 @@ export default () => ({
labels: [],
datasets: [
{
label: i18next.t('firefly.budgeted'),
data: [],
borderWidth: 1,
backgroundColor: getColors('budgeted', 'background'),
borderColor: getColors('budgeted', 'border'),
},
{
//label: i18next.t('firefly.budgeted'),
label: i18next.t('firefly.spent'),
data: [],
borderWidth: 1,
stack: 1,
backgroundColor: getColors('spent', 'background'),
borderColor: getColors('spent', 'border'),
},
{
label: i18next.t('firefly.left'),
data: [],
borderWidth: 1,
stack: 1,
backgroundColor: getColors('left', 'background'),
borderColor: getColors('left', 'border'),
},
{
label: i18next.t('firefly.overspent'),
data: [],
borderWidth: 1,
stack: 1,
backgroundColor: getColors('overspent', 'background'),
borderColor: getColors('overspent', 'border'),
}
]
};
for (const i in data) {
if (data.hasOwnProperty(i)) {
let current = data[i];
console.log('Now at');
console.log(current);
// // convert to EUR yes no?
let label = current.label + ' (' + current.currency_code + ')';
options.data.labels.push(label);
if (this.convertToNative) {
currencies.push(current.native_currency_code);
// series 0: spent
options.data.datasets[0].data.push(parseFloat(current.native_entries.spent) * -1);
// series 1: left
options.data.datasets[1].data.push(parseFloat(current.native_entries.left));
// series 2: overspent
options.data.datasets[2].data.push(parseFloat(current.native_entries.overspent));
}
if (!this.convertToNative) {
currencies.push(current.currency_code);
// series 0: spent
options.data.datasets[0].data.push(parseFloat(current.entries.spent) * -1);
// series 1: left
options.data.datasets[1].data.push(parseFloat(current.entries.left));
// series 2: overspent
options.data.datasets[2].data.push(parseFloat(current.entries.overspent));
}
// label = current.label + ' (' + current.currency_code + ') b';
// options.data.labels.push(label);
currencies.push(current.currency_code);
// series 0: budgeted
options.data.datasets[0].data.push(parseFloat(current.entries.budgeted));
// series 1: spent
options.data.datasets[1].data.push(parseFloat(current.entries.spent) * -1);
// series 2: overspent
// options.data.datasets[2].data.push(parseFloat(current.entries.overspent));
}
}
// the currency format callback for the Y axis is AlWAYS based on whatever the first currency is.
@@ -160,9 +146,10 @@ export default () => ({
options.options.scales = {
y: {
ticks: {
callback: function (context) {
return formatMoney(context, currencies[0] ?? 'EUR');
}
// callback: function (context) {
// return 'abc';
// return formatMoney(context, currencies[0] ?? 'EUR');
// }
}
}
};

30
resources/assets/v2/src/support/default-chart-settings.js
View File

@@ -62,6 +62,36 @@ function getDefaultChartSettings(type) {
},
};
}
if('bar' === type) {
return {
type: 'bar',
data: {
labels: [],
datasets: [],
},
options: {
maintainAspectRatio: false,
indexAxis: 'y',
// Elements options apply to all the options unless overridden in a dataset
// In this case, we are setting the border of each horizontal bar to be 2px wide
elements: {
bar: {
borderWidth: 2,
}
},
responsive: true,
plugins: {
legend: {
position: 'right',
},
title: {
display: true,
text: 'Chart.js Horizontal Bar Chart'
}
}
},
};
}
if ('line' === type) {
return {
options: {

8
resources/assets/v2/src/support/get-colors.js
View File

@@ -92,6 +92,14 @@ function getColors(type, field) {
backgroundColor: background.rgbString(),
};
break;
case 'budgeted':
background = new Color(green.rgbString());
background.lighten(0.38);
colors = {
borderColor: green.rgbString(),
backgroundColor: background.rgbString(),
};
break;
case 'overspent':
background = new Color(red.rgbString());
background.lighten(0.22);

4
resources/views/v2/index.blade.php
View File

@@ -37,11 +37,11 @@
<div class="col">
<div class="card">
<div class="card-header">
<h3 class="card-title"><a href="#" title="Something">recurring? rules? tags?</a></h3>
<h3 class="card-title"><a href="#" title="Something">Income + sum</a></h3>
</div>
<div class="card-body">
<p>
TODO
List of income + sum
</p>
</div>
</div>

3
resources/views/v2/partials/dashboard/subscriptions.blade.php
View File

@@ -10,6 +10,7 @@
</div>
<div class="card-body">
<div class="row mb-2">
<!--
<template x-for="pie in group.payment_info">
<div :class='group.col_size'>
<canvas :id='"pie_" + group.id + "_" + pie.currency_code'
@@ -17,6 +18,8 @@
x-init="drawPieChart(group.id, group.title, pie)"></canvas>
</div>
</template>
-->
Here was chart.
</div>
<div class="row mb-2">
<table class="table table-striped table-hover">