IntenseFinance/firefly-iii
3
0
Fork 0
mirror of https://github.com/firefly-iii/firefly-iii.git synced 2025-02-25 18:45:27 -06:00
Code Issues Packages Projects Releases Wiki Activity

Expand views

Browse Source
This commit is contained in:
James Cole 2023-08-09 14:13:32 +02:00
parent deb51bd8de
commit 3925077223
No known key found for this signature in database
GPG Key ID: B49A324B7EAD6D80
7 changed files with 322 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
resources/assets/v2/api/v2/model/subscription/get.js Normal file
View File

@ -0,0 +1,42 @@
/*
* get.js
* Copyright (c) 2023 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/>.
*/
import {api} from "../../../../boot/axios";
export default class Get {
/**
*
* @param params
* @returns {Promise<AxiosResponse<any>>}
*/
get(params) {
return api.get('/api/v2/subscriptions', {params: params});
}
paid(params) {
return api.get('/api/v2/subscriptions/sum/paid', {params: params});
}
unpaid(params) {
return api.get('/api/v2/subscriptions/sum/unpaid', {params: params});
}
}

3
resources/assets/v2/dashboard.js
View File

@ -25,8 +25,9 @@ import accounts from './pages/dashboard/accounts.js';
import budgets from './pages/dashboard/budgets.js';
import categories from './pages/dashboard/categories.js';
import sankey from './pages/dashboard/sankey.js';
import subscriptions from './pages/dashboard/subscriptions.js';
const comps = {dates, boxes, accounts, budgets, categories, sankey};
const comps = {dates, boxes, accounts, budgets, categories, sankey, subscriptions};
function loadPage(comps) {
Object.keys(comps).forEach(comp => {

3
resources/assets/v2/pages/dashboard/accounts.js
View File

@ -24,7 +24,8 @@ import {setVariable} from "../../store/set-variable.js";
import Dashboard from "../../api/v2/chart/account/dashboard.js";
import formatMoney from "../../util/format-money.js";
import Get from "../../api/v1/accounts/get.js";
import Chart from "chart.js/auto";
//import Chart from "chart.js/auto";
import {Chart, LineController, LineElement, PointElement, CategoryScale, LinearScale} from "chart.js";
// this is very ugly, but I have no better ideas at the moment to save the currency info
// for each series.

188
resources/assets/v2/pages/dashboard/sankey.js
View File

@ -27,46 +27,72 @@ Chart.register(SankeyController, Flow);
let currencies = [];
let chart = null;
let chart = null;
let transactions = [];
// little helper
function getObjectName(type, name, direction) {
function getObjectName(type, name, direction, code) {
// category 4x
if ('category' === type && null !== name && 'in' === direction) {
return 'Category "' + name + '" (in)';
return 'Category "' + name + '" (in ' + code + ')';
}
if ('category' === type && null === name && 'in' === direction) {
return 'Unknown category (in)';
return 'Unknown category (in ' + code + ')';
}
if ('category' === type && null !== name && 'out' === direction) {
return 'Category "' + name + '" (out)';
return 'Category "' + name + '" (out ' + code + ')';
}
if ('category' === type && null === name && 'out' === direction) {
return 'Unknown category (out)';
return 'Unknown category (out ' + code + ')';
}
// category 4x
// account 4x
if ('account' === type && null === name && 'in' === direction) {
return 'Unknown source account';
return 'Unknown source account ' + code + '';
}
if ('account' === type && null !== name && 'in' === direction) {
return name + ' (in)';
return name + ' (in ' + code + ')';
}
if ('account' === type && null === name && 'out' === direction) {
return 'Unknown destination account';
return 'Unknown destination account ' + code + '';
}
if ('account' === type && null !== name && 'out' === direction) {
return name + ' (out)';
return name + ' (out ' + code + ')';
}
// budget 4x
// budget 2x
if ('budget' === type && null !== name && 'out' === direction) {
return 'Budget "' + name + '" (out)';
return 'Budget "' + name + '" (out ' + code + ')';
}
if ('budget' === type && null === name && 'out' === direction) {
return 'Unknown budget';
return 'Unknown budget (' + code + ')';
}
console.error('Cannot handle: type:"' + type + '",dir: "' + direction + '"');
console.error('Cannot handle: type:"' + type + '", dir: "' + direction + '"');
}
function getLabelName(type, name, code) {
// category
if ('category' === type && null !== name) {
return 'Category "' + name + '" (' + code + ')';
}
if ('category' === type && null === name) {
return 'Unknown category (' + code + ')';
}
// account
if ('account' === type && null === name) {
return 'Unknown account (' + code + ')';
}
if ('account' === type && null !== name) {
return name + ' (' + code + ')';
}
// budget 2x
if ('budget' === type && null !== name) {
return 'Budget "' + name + '" (' + code + ')';
}
if ('budget' === type && null === name) {
return 'Unknown budget (' + code + ')';
}
console.error('Cannot handle: type:"' + type + '"');
}
export default () => ({
@ -74,38 +100,38 @@ export default () => ({
autoConversion: false,
sankeyGrouping: 'account',
generateOptions(data) {
currencies = [];
console.log('generate options');
let options = getDefaultChartSettings('sankey');
// temp code for first sankey
const colors = {
a: 'red',
b: 'green',
c: 'blue',
d: 'gray'
};
const getColor = (key) => colors[key];
// end of temp code for first sankey
// reset currencies
currencies = [];
// variables collected for the sankey chart:
let amounts = {};
let sort = '10';
let bigBox = 'TODO All money';
let bigBox = 'TODO All money';
let labels = {};
for (let i in transactions) {
if (transactions.hasOwnProperty(i)) {
let group = transactions[i];
for (let ii in group.attributes.transactions) {
if (group.attributes.transactions.hasOwnProperty(ii)) {
let transaction = group.attributes.transactions[ii];
let amount = this.autoConversion ? parseFloat(transaction.native_amount) : parseFloat(transaction.amount);
console.log(transaction);
// properties of the transaction, used in the generation of the chart:
let transaction = group.attributes.transactions[ii];
let currencyCode = this.autoConversion ? transaction.native_code : transaction.currency_code;
let amount = this.autoConversion ? parseFloat(transaction.native_amount) : parseFloat(transaction.amount);
let flowKey;
/*
Two entries in the sankey diagram for deposits:
1. From the revenue account (source) to a category (in).
2. From the category (in) to the big inbox.
*/
if ('deposit' === transaction.type) {
let category = getObjectName('category', transaction.category_name, 'in');
let revenueAccount = getObjectName('account', transaction.source_name, 'in');
// first: money flows from a revenue account to a category.
flowKey = sort + '-' + revenueAccount + '-' + category;
// nr 1
let category = getObjectName('category', transaction.category_name, 'in', currencyCode);
let revenueAccount = getObjectName('account', transaction.source_name, 'in', currencyCode);
labels[category] = getLabelName('category', transaction.category_name, currencyCode);
labels[revenueAccount] = getLabelName('account', transaction.source_name, currencyCode);
flowKey = revenueAccount + '-' + category + '-' + currencyCode;
if (!amounts.hasOwnProperty(flowKey)) {
amounts[flowKey] = {
from: revenueAccount,
@ -115,8 +141,8 @@ export default () => ({
}
amounts[flowKey].amount += amount;
// second: money flows from category to the big inbox.
flowKey = sort + '-' + category + '-' + bigBox;
// nr 2
flowKey = category + '-' + bigBox + '-' + currencyCode;
if (!amounts.hasOwnProperty(flowKey)) {
amounts[flowKey] = {
from: category,
@ -126,11 +152,17 @@ export default () => ({
}
amounts[flowKey].amount += amount;
}
/*
Three entries in the sankey diagram for withdrawals:
1. From the big box to a budget.
2. From a budget to a category.
3. From a category to an expense account.
*/
if ('withdrawal' === transaction.type) {
sort = '11';
// from bigBox to budget
let budget = getObjectName('budget', transaction.budget_name, 'out');
flowKey = sort + '-' + bigBox + '-' + budget;
// 1.
let budget = getObjectName('budget', transaction.budget_name, 'out', currencyCode);
labels[budget] = getLabelName('budget', transaction.budget_name, currencyCode);
flowKey = bigBox + '-' + budget + '-' + currencyCode;
if (!amounts.hasOwnProperty(flowKey)) {
amounts[flowKey] = {
@ -142,9 +174,10 @@ export default () => ({
amounts[flowKey].amount += amount;
// then, it goes from a budget (in) to a category (out)
let category = getObjectName('category', transaction.category_name, 'out');
flowKey = sort + '-' + budget + '-' + category;
// 2.
let category = getObjectName('category', transaction.category_name, 'out', currencyCode);
labels[category] = getLabelName('category', transaction.category_name, currencyCode);
flowKey = budget + '-' + category + '-' + currencyCode;
if (!amounts.hasOwnProperty(flowKey)) {
amounts[flowKey] = {
@ -155,9 +188,10 @@ export default () => ({
}
amounts[flowKey].amount += amount;
// if set, from a category (in) to a specific revenue account (out)
let expenseAccount = getObjectName('account', transaction.destination_name, 'out');
flowKey = sort + '-' + category + '-' + expenseAccount;
// 3.
let expenseAccount = getObjectName('account', transaction.destination_name, 'out', currencyCode);
labels[expenseAccount] = getLabelName('account', transaction.destination_name, currencyCode);
flowKey = category + '-' + expenseAccount + '-' + currencyCode;
if (!amounts.hasOwnProperty(flowKey)) {
amounts[flowKey] = {
@ -174,32 +208,32 @@ export default () => ({
}
let dataSet =
// sankey chart has one data set.
{
label: 'My sankey',
data: [],
//colorFrom: (c) => getColor(c.dataset.data[c.dataIndex].from),
//colorTo: (c) => getColor(c.dataset.data[c.dataIndex].to),
colorMode: 'gradient', // or 'from' or 'to'
/* optional labels */
// labels: {
// a: 'Label A',
// b: 'Label B',
// c: 'Label C',
// d: 'Label D'
// },
/* optional priority */
// priority: {
// b: 1,
// d: 0
// },
/* optional column overrides */
// column: {
// d: 1
// },
size: 'max', // or 'min' if flow overlap is preferred
};
// sankey chart has one data set.
{
label: 'My sankey',
data: [],
//colorFrom: (c) => getColor(c.dataset.data[c.dataIndex].from),
//colorTo: (c) => getColor(c.dataset.data[c.dataIndex].to),
colorMode: 'gradient', // or 'from' or 'to'
labels: labels,
/* optional labels */
// labels: {
// a: 'Label A',
// b: 'Label B',
// c: 'Label C',
// d: 'Label D'
// },
/* optional priority */
// priority: {
// b: 1,
// d: 0
// },
/* optional column overrides */
// column: {
// d: 1
// },
size: 'max', // or 'min' if flow overlap is preferred
};
for (let i in amounts) {
if (amounts.hasOwnProperty(i)) {
let amount = amounts[i];
@ -229,7 +263,7 @@ export default () => ({
this.downloadTransactions(params);
},
downloadTransactions(params) {
console.log('Downloading page ' + params.page + '...');
//console.log('Downloading page ' + params.page + '...');
const getter = new Get();
getter.get(params).then((response) => {
transactions = [...transactions, ...response.data.data];
@ -242,8 +276,8 @@ export default () => ({
return;
}
// continue to next step.
console.log('Final page!');
console.log(transactions);
//console.log('Final page!');
//console.log(transactions);
this.drawChart(this.generateOptions());
this.loading = false;
});

154
resources/assets/v2/pages/dashboard/subscriptions.js Normal file
View File

@ -0,0 +1,154 @@
/*
* budgets.js
* Copyright (c) 2023 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/>.
*/
import {getVariable} from "../../store/get-variable.js";
import Get from "../../api/v2/model/subscription/get.js";
import Chart from 'chart.js/auto';
import {getDefaultChartSettings} from "../../support/default-chart-settings.js";
import formatMoney from "../../util/format-money.js";
import {format} from "date-fns";
let currencies = [];
let chart = null;
let chartData = null;
export default () => ({
loading: false,
autoConversion: false,
loadChart() {
if (true === this.loading) {
return;
}
this.loading = true;
if (null !== chartData) {
this.drawChart(this.generateOptions(chartData));
this.loading = false;
return;
}
this.getFreshData();
},
drawChart(options) {
if (null !== chart) {
chart.data.datasets = options.data.datasets;
chart.update();
return;
}
chart = new Chart(document.querySelector("#subscriptions-chart"), options);
},
getFreshData() {
const getter = new Get();
let params = {
start: format(new Date(window.store.get('start')), 'y-MM-dd'),
end: format(new Date(window.store.get('end')), 'y-MM-dd')
};
getter.paid(params).then((response) => {
let paidData = response.data;
getter.unpaid(params).then((response) => {
let unpaidData = response.data;
let chartData = {paid: paidData, unpaid: unpaidData};
this.drawChart(this.generateOptions(chartData));
this.loading = false;
});
});
},
generateOptions(data) {
let options = getDefaultChartSettings('pie');
console.log(data);
options.data.labels = ['TODO paid', 'TODO unpaid'];
options.data.datasets = [];
let collection = {};
for (let i in data.paid) {
if (data.paid.hasOwnProperty(i)) {
let current = data.paid[i];
let currencyCode = this.autoConversion ? current.native_code : current.currency_code;
let amount = this.autoConversion ? current.native_sum : current.sum;
if (!collection.hasOwnProperty(currencyCode)) {
collection[currencyCode] = {
paid: 0,
unpaid: 0,
};
}
// in case of paid, add to "paid":
collection[currencyCode].paid += (parseFloat(amount) * -1);
}
}
// unpaid
for (let i in data.unpaid) {
if (data.unpaid.hasOwnProperty(i)) {
let current = data.unpaid[i];
let currencyCode = this.autoConversion ? current.native_code : current.currency_code;
let amount = this.autoConversion ? current.native_sum : current.sum;
if (!collection.hasOwnProperty(currencyCode)) {
collection[currencyCode] = {
paid: 0,
unpaid: 0,
};
}
console.log(current);
// in case of paid, add to "paid":
collection[currencyCode].unpaid += parseFloat(amount);
}
}
for (let currencyCode in collection) {
if (collection.hasOwnProperty(currencyCode)) {
let current = collection[currencyCode];
options.data.datasets.push(
{
label: currencyCode,
data: [current.paid, current.unpaid],
backgroundColor: [
'rgb(54, 162, 235)', // green (paid)
'rgb(255, 99, 132)', // red (unpaid_
],
//hoverOffset: 4
}
)
}
}
return options;
},
init() {
Promise.all([getVariable('autoConversion', false),]).then((values) => {
this.autoConversion = values[0];
if (false === this.loading) {
this.loadChart();
}
});
window.store.observe('end', () => {
if (false === this.loading) {
this.chartData = null;
this.loadChart();
}
});
window.store.observe('autoConversion', (newValue) => {
this.autoConversion = newValue;
if (false === this.loading) {
this.loadChart();
}
});
},
});

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

@ -27,6 +27,14 @@ function getDefaultChartSettings(type) {
}
}
}
if ('pie' === type) {
return {
type: 'pie',
data: {
datasets: [],
}
}
}
if ('column' === type) {
return {
type: 'bar',

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

@ -161,10 +161,10 @@
<div class="col">
<div class="card">
<div class="card-header">
<h3 class="card-title"><a href="#" title="Something">Bills</a></h3>
<h3 class="card-title"><a href="#" title="Something">Subscriptions</a></h3>
</div>
<div class="card-body">
<div class="card-body" x-data="subscriptions">
<canvas id="subscriptions-chart"></canvas>
</div>
</div>
</div>