kenmirrors/firefly-iii
1
0
Fork 0
mirror of https://github.com/firefly-iii/firefly-iii.git synced 2025-10-15 00:27:30 +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

39
app/Api/V1/Controllers/Chart/BudgetController.php
View File

@@ -49,7 +49,7 @@ class BudgetController extends Controller
use CleansChartData; use CleansChartData;
use ValidatesUserGroupTrait; use ValidatesUserGroupTrait;
protected array $acceptedRoles = [UserRoleEnum::READ_ONLY]; protected array $acceptedRoles = [UserRoleEnum::READ_ONLY];
protected OperationsRepositoryInterface $opsRepository; protected OperationsRepositoryInterface $opsRepository;
private BudgetLimitRepositoryInterface $blRepository; private BudgetLimitRepositoryInterface $blRepository;
@@ -80,13 +80,13 @@ class BudgetController extends Controller
*/ */
public function dashboard(DateRequest $request): JsonResponse public function dashboard(DateRequest $request): JsonResponse
{ {
$params = $request->getAll(); $params = $request->getAll();
/** @var Carbon $start */ /** @var Carbon $start */
$start = $params['start']; $start = $params['start'];
/** @var Carbon $end */ /** @var Carbon $end */
$end = $params['end']; $end = $params['end'];
// code from FrontpageChartGenerator, but not in separate class // code from FrontpageChartGenerator, but not in separate class
$budgets = $this->repository->getActiveBudgets(); $budgets = $this->repository->getActiveBudgets();
@@ -123,7 +123,7 @@ class BudgetController extends Controller
foreach ($rows as $row) { foreach ($rows as $row) {
$current = [ $current = [
'label' => $budget->name, 'label' => $budget->name,
'currency_id' => (string) $row['currency_id'], 'currency_id' => (string)$row['currency_id'],
'currency_code' => $row['currency_code'], 'currency_code' => $row['currency_code'],
'currency_name' => $row['currency_name'], 'currency_name' => $row['currency_name'],
'currency_decimal_places' => $row['currency_decimal_places'], 'currency_decimal_places' => $row['currency_decimal_places'],
@@ -131,6 +131,7 @@ class BudgetController extends Controller
'start' => $row['start'], 'start' => $row['start'],
'end' => $row['end'], 'end' => $row['end'],
'entries' => [ 'entries' => [
'budgeted' => $row['budgeted'],
'spent' => $row['spent'], 'spent' => $row['spent'],
'left' => $row['left'], 'left' => $row['left'],
'overspent' => $row['overspent'], 'overspent' => $row['overspent'],
@@ -163,7 +164,7 @@ class BudgetController extends Controller
* *
* @throws FireflyException * @throws FireflyException
*/ */
private function processExpenses(int $budgetId, array $array, Carbon $start, Carbon $end): array private function processExpenses(int $budgetId, array $spent, Carbon $start, Carbon $end): array
{ {
$return = []; $return = [];
@@ -171,29 +172,30 @@ class BudgetController extends Controller
* This array contains the expenses in this budget. Grouped per currency. * This array contains the expenses in this budget. Grouped per currency.
* The grouping is on the main currency only. * The grouping is on the main currency only.
* *
* @var int $currencyId * @var int $currencyId
* @var array $block * @var array $block
*/ */
foreach ($array as $currencyId => $block) { foreach ($spent as $currencyId => $block) {
$this->currencies[$currencyId] ??= TransactionCurrency::find($currencyId); $this->currencies[$currencyId] ??= TransactionCurrency::find($currencyId);
$return[$currencyId] ??= [ $return[$currencyId] ??= [
'currency_id' => (string) $currencyId, 'currency_id' => (string)$currencyId,
'currency_code' => $block['currency_code'], 'currency_code' => $block['currency_code'],
'currency_name' => $block['currency_name'], 'currency_name' => $block['currency_name'],
'currency_symbol' => $block['currency_symbol'], 'currency_symbol' => $block['currency_symbol'],
'currency_decimal_places' => (int) $block['currency_decimal_places'], 'currency_decimal_places' => (int)$block['currency_decimal_places'],
'start' => $start->toAtomString(), 'start' => $start->toAtomString(),
'end' => $end->toAtomString(), 'end' => $end->toAtomString(),
'budgeted' => '0',
'spent' => '0', 'spent' => '0',
'left' => '0', 'left' => '0',
'overspent' => '0', 'overspent' => '0',
]; ];
$currentBudgetArray = $block['budgets'][$budgetId]; $currentBudgetArray = $block['budgets'][$budgetId];
// var_dump($return); // var_dump($return);
/** @var array $journal */ /** @var array $journal */
foreach ($currentBudgetArray['transaction_journals'] as $journal) { foreach ($currentBudgetArray['transaction_journals'] as $journal) {
$return[$currencyId]['spent'] = bcadd($return[$currencyId]['spent'], (string) $journal['amount']); $return[$currencyId]['spent'] = bcadd($return[$currencyId]['spent'], (string)$journal['amount']);
} }
} }
@@ -229,7 +231,7 @@ class BudgetController extends Controller
private function processLimit(Budget $budget, BudgetLimit $limit): array private function processLimit(Budget $budget, BudgetLimit $limit): array
{ {
Log::debug(sprintf('Created new ExchangeRateConverter in %s', __METHOD__)); Log::debug(sprintf('Created new ExchangeRateConverter in %s', __METHOD__));
$end = clone $limit->end_date; $end = clone $limit->end_date;
$end->endOfDay(); $end->endOfDay();
$spent = $this->opsRepository->listExpenses($limit->start_date, $end, null, new Collection([$budget])); $spent = $this->opsRepository->listExpenses($limit->start_date, $end, null, new Collection([$budget]));
$limitCurrencyId = $limit->transaction_currency_id; $limitCurrencyId = $limit->transaction_currency_id;
@@ -237,16 +239,17 @@ class BudgetController extends Controller
/** @var array $entry */ /** @var array $entry */
// only spent the entry where the entry's currency matches the budget limit's currency // only spent the entry where the entry's currency matches the budget limit's currency
// so $filtered will only have 1 or 0 entries // so $filtered will only have 1 or 0 entries
$filtered = array_filter($spent, fn ($entry) => $entry['currency_id'] === $limitCurrencyId); $filtered = array_filter($spent, fn($entry) => $entry['currency_id'] === $limitCurrencyId);
$result = $this->processExpenses($budget->id, $filtered, $limit->start_date, $end); $result = $this->processExpenses($budget->id, $filtered, $limit->start_date, $end);
if (1 === count($result)) { if (1 === count($result)) {
$compare = bccomp($limit->amount, (string) app('steam')->positive($result[$limitCurrencyId]['spent'])); $compare = bccomp($limit->amount, (string)app('steam')->positive($result[$limitCurrencyId]['spent']));
$result[$limitCurrencyId]['budgeted'] = $limit->amount;
if (1 === $compare) { if (1 === $compare) {
// convert this amount into the native currency: // convert this amount into the native currency:
$result[$limitCurrencyId]['left'] = bcadd($limit->amount, (string) $result[$limitCurrencyId]['spent']); $result[$limitCurrencyId]['left'] = bcadd($limit->amount, (string)$result[$limitCurrencyId]['spent']);
} }
if ($compare <= 0) { if ($compare <= 0) {
$result[$limitCurrencyId]['overspent'] = app('steam')->positive(bcadd($limit->amount, (string) $result[$limitCurrencyId]['spent'])); $result[$limitCurrencyId]['overspent'] = app('steam')->positive(bcadd($limit->amount, (string)$result[$limitCurrencyId]['spent']));
} }
} }

1
config/translations.php
View File

@@ -65,6 +65,7 @@ return [
'interest_calc_half-year', 'interest_calc_half-year',
'interest_calc_quarterly', 'interest_calc_quarterly',
'spent', 'spent',
'budgeted',
'administration_owner', 'administration_owner',
'administration_you', 'administration_you',
'administration_role_owner', 'administration_role_owner',

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

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

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

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

@@ -37,11 +37,11 @@
<div class="col"> <div class="col">
<div class="card"> <div class="card">
<div class="card-header"> <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>
<div class="card-body"> <div class="card-body">
<p> <p>
TODO List of income + sum
</p> </p>
</div> </div>
</div> </div>

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

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