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

Cleanup charts

Browse Source
This commit is contained in:
James Cole
2023-08-12 07:53:11 +02:00
parent daf753d76e
commit 024e16bf4b
15 changed files with 392 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -18,20 +18,20 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
//import ApexCharts from "apexcharts";
import {getVariable} from "../../store/get-variable.js";
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/v2/model/account/get.js";
//import Chart from "chart.js/auto";
import {Chart} from "chart.js";
import {Chart} from 'chart.js';
import {getDefaultChartSettings} from "../../support/default-chart-settings.js";
// this is very ugly, but I have no better ideas at the moment to save the currency info
// for each series.
let currencies = [];
let chart = null;
let chartData = null;
let chart = null;
let chartData = null;
let afterPromises = false;
export default () => ({
loading: false,
loadingAccounts: false,
@@ -47,22 +47,18 @@ export default () => ({
dashboard.dashboard(new Date(window.store.get('start')), new Date(window.store.get('end')), null).then((response) => {
this.chartData = response.data;
this.drawChart(this.generateOptions(this.chartData));
this.loading = false;
});
},
generateOptions(data) {
currencies = [];
let options = {
type: 'line',
data: {
labels: [],
datasets: []
},
};
currencies = [];
let options = getDefaultChartSettings('line');
for (let i = 0; i < data.length; i++) {
if (data.hasOwnProperty(i)) {
let current = data[i];
let dataset = {};
let yAxis = 'y';
let current = data[i];
let dataset = {};
let collection = [];
// if index = 0, push all keys as labels:
@@ -74,22 +70,43 @@ export default () => ({
// use the "native" currency code and use the "native_entries" as array
if (this.autoConversion) {
currencies.push(current.native_code);
dataset.currency_code = current.native_code;
collection = Object.values(current.native_entries);
yAxis = 'y' + current.native_code;
}
if (!this.autoConversion) {
yAxis = 'y' + current.currency_code;
dataset.currency_code = current.currency_code;
currencies.push(current.currency_code);
collection = Object.values(current.entries);
}
dataset.yAxisID = yAxis;
dataset.data = collection;
for (const [ii, value] of Object.entries(collection)) {
//entry.push({x: format(new Date(ii), 'yyyy-MM-dd'), y: parseFloat(value)});
}
// add data set to the correct Y Axis:
options.data.datasets.push(dataset);
//options.series.push({name: current.label, data: entry});
}
}
// for each entry in currencies, add a new y-axis:
for (let currency in currencies) {
if (currencies.hasOwnProperty(currency)) {
let code = 'y' + currencies[currency];
if (!options.options.scales.hasOwnProperty(code)) {
options.options.scales[code] = {
id: currency,
type: 'linear',
position: 1 === parseInt(currency) ? 'right' : 'left',
ticks: {
callback: function (value, index, values) {
return formatMoney(value, currencies[currency]);
}
}
};
}
}
}
return options;
},
loadChart() {
@@ -108,31 +125,33 @@ export default () => ({
drawChart(options) {
if (null !== chart) {
// chart already in place, refresh:
chart.data.datasets = options.data.datasets;
chart.options = options.options;
chart.data = options.data;
chart.update();
return;
}
chart = new Chart(document.querySelector("#account-chart"), options);
},
loadAccounts() {
console.log('loadAccounts');
// console.log('loadAccounts');
if (true === this.loadingAccounts) {
console.log('loadAccounts CANCELLED');
// console.log('loadAccounts CANCELLED');
return;
}
this.loadingAccounts = true;
if (this.accountList.length > 0) {
console.log('NO need to load account data');
// console.log('NO need to load account data');
this.loadingAccounts = false;
return;
}
console.log('loadAccounts continue!');
const max = 10;
// console.log('loadAccounts continue!');
const max = 10;
let totalAccounts = 0;
let count = 0;
let accounts = [];
let count = 0;
let accounts = [];
Promise.all([getVariable('frontpageAccounts'),]).then((values) => {
totalAccounts = values[0].length;
//console.log(values[0]);
for (let i in values[0]) {
let account = values[0];
if (account.hasOwnProperty(i)) {
@@ -149,7 +168,7 @@ export default () => ({
break;
}
let current = response.data.data[ii];
let group = {
let group = {
title: null === current.attributes.group_title ? '' : current.attributes.group_title,
id: current.id,
transactions: [],
@@ -158,25 +177,26 @@ export default () => ({
let currentTransaction = current.attributes.transactions[iii];
//console.log(currentTransaction);
group.transactions.push({
description: currentTransaction.description,
id: current.id,
amount: formatMoney(currentTransaction.amount, currentTransaction.currency_code),
native_amount: formatMoney(currentTransaction.native_amount, currentTransaction.native_code),
});
description: currentTransaction.description,
id: current.id,
amount: formatMoney(currentTransaction.amount, currentTransaction.currency_code),
native_amount: formatMoney(currentTransaction.native_amount, currentTransaction.native_code),
});
}
groups.push(group);
}
console.log(parent);
// console.log(parent);
accounts.push({
name: parent.attributes.name,
id: parent.id,
balance: formatMoney(parent.attributes.current_balance, parent.attributes.currency_code),
native_balance: formatMoney(parent.attributes.native_current_balance, parent.attributes.native_code),
groups: groups,
});
name: parent.attributes.name,
id: parent.id,
balance: formatMoney(parent.attributes.current_balance, parent.attributes.currency_code),
native_balance: formatMoney(parent.attributes.native_current_balance, parent.attributes.native_code),
groups: groups,
});
count++;
if (count === totalAccounts) {
this.accountList = accounts;
this.loadingAccounts = false;
}
});
});
@@ -187,20 +207,31 @@ export default () => ({
},
init() {
// console.log('accounts init');
Promise.all([getVariable('viewRange', '1M'), getVariable('autoConversion', false),]).then((values) => {
//console.log('accounts after promises');
this.autoConversion = values[1];
afterPromises = true;
// main dashboard chart:
this.loadChart();
this.loadAccounts();
});
window.store.observe('end', () => {
chartData = null;
if (!afterPromises) {
return;
}
// console.log('accounts observe end');
chartData = null;
this.accountList = [];
// main dashboard chart:
this.loadChart();
this.loadAccounts();
});
window.store.observe('autoConversion', () => {
if (!afterPromises) {
return;
}
// console.log('accounts observe autoconversion');
this.loadChart();
this.loadAccounts();
});

21
resources/assets/v2/pages/dashboard/boxes.js
View File

@@ -23,6 +23,7 @@ import {format} from "date-fns";
import {getVariable} from "../../store/get-variable.js";
import formatMoney from "../../util/format-money.js";
let afterPromises = false;
export default () => ({
balanceBox: {amounts: [], subtitles: []},
@@ -173,35 +174,43 @@ export default () => ({
this.balanceBox.subtitles.push(subtitles[i]);
}
}
this.loading = false;
},
loadBoxes() {
if (true === this.loading) {
return;
}
this.loading = true;
if (null === this.boxData) {
this.getFreshData();
return;
}
if (null !== this.boxData) {
this.generateOptions(this.boxData);
//this.drawChart();
}
this.generateOptions(this.boxData);
this.loading = false;
},
// Getter
init() {
// console.log('boxes init');
Promise.all([getVariable('viewRange'), getVariable('autoConversion', false)]).then((values) => {
// console.log('boxes after promises');
afterPromises = true;
this.autoConversion = values[1];
this.loadBoxes();
});
window.store.observe('end', () => {
if (!afterPromises) {
return;
}
// console.log('boxes observe end');
this.boxData = null;
this.loadBoxes();
});
window.store.observe('autoConversion', (newValue) => {
if (!afterPromises) {
return;
}
// console.log('boxes observe autoConversion');
this.autoConversion = newValue;
this.loadBoxes();
});

36
resources/assets/v2/pages/dashboard/budgets.js
View File

@@ -19,14 +19,26 @@
*/
import {getVariable} from "../../store/get-variable.js";
import Dashboard from "../../api/v2/chart/budget/dashboard.js";
// todo optimize
import Chart from 'chart.js/auto';
import {getDefaultChartSettings} from "../../support/default-chart-settings.js";
import formatMoney from "../../util/format-money.js";
import {Chart} from 'chart.js';
import {I18n} from "i18n-js";
let currencies = [];
let chart = null;
let chartData = null;
let afterPromises = false;
let language;
let i18n; // for translating items in the chart.
async function loadTranslations(i18n, locale) {
const response = await fetch(`./v2/i18n/${locale}.json`);
const translations = await response.json();
i18n.store(translations);
}
export default () => ({
loading: false,
@@ -136,19 +148,37 @@ export default () => ({
init() {
Promise.all([getVariable('autoConversion', false),]).then((values) => {
// console.log('budgets init');
Promise.all([getVariable('autoConversion', false), getVariable('language', 'en-US')]).then((values) => {
i18n = new I18n();
loadTranslations(i18n, values[1]);
// load translations.
//i18n = require('../../lang/' + values[1] + '.js').default;
//import lang from '../../lang/' + values[1] + '.js';
//language = values[1];
this.autoConversion = values[0];
afterPromises = true;
if (false === this.loading) {
this.loadChart();
}
});
window.store.observe('end', () => {
if (!afterPromises) {
return;
}
// console.log('boxes observe end');
if (false === this.loading) {
this.chartData = null;
this.loadChart();
}
});
window.store.observe('autoConversion', (newValue) => {
if (!afterPromises) {
return;
}
// console.log('boxes observe autoConversion');
this.autoConversion = newValue;
if (false === this.loading) {
this.loadChart();

14
resources/assets/v2/pages/dashboard/categories.js
View File

@@ -19,15 +19,13 @@
*/
import {getVariable} from "../../store/get-variable.js";
import Dashboard from "../../api/v2/chart/category/dashboard.js";
//import ApexCharts from "apexcharts";
import formatMoney from "../../util/format-money.js";
import {getDefaultChartSettings} from "../../support/default-chart-settings.js";
import Chart from "chart.js/auto";
import {Chart} from "chart.js";
let currencies = [];
let chart = null;
let chartData = null;
let afterPromises = false;
export default () => ({
loading: false,
@@ -142,15 +140,23 @@ export default () => ({
this.getFreshData();
},
init() {
// console.log('categories init');
Promise.all([getVariable('autoConversion', false),]).then((values) => {
this.autoConversion = values[0];
afterPromises = true;
this.loadChart();
});
window.store.observe('end', () => {
if (!afterPromises) {
return;
}
this.chartData = null;
this.loadChart();
});
window.store.observe('autoConversion', (newValue) => {
if (!afterPromises) {
return;
}
this.autoConversion = newValue;
this.loadChart();
});

15
resources/assets/v2/pages/dashboard/piggies.js
View File

@@ -19,10 +19,10 @@
*/
import {getVariable} from "../../store/get-variable.js";
import Get from "../../api/v2/model/piggy-bank/get.js";
let currencies = [];
import {Chart} from 'chart.js';
let apiData = {};
let afterPromises = false;
export default () => ({
loading: false,
@@ -106,16 +106,27 @@ export default () => ({
this.getFreshData();
},
init() {
// console.log('piggies init');
apiData = [];
Promise.all([getVariable('autoConversion', false)]).then((values) => {
// console.log('piggies after promises');
afterPromises = true;
this.autoConversion = values[0];
this.loadPiggyBanks();
});
window.store.observe('end', () => {
if (!afterPromises) {
return;
}
// console.log('piggies observe end');
apiData = [];
this.loadPiggyBanks();
});
window.store.observe('autoConversion', (newValue) => {
if (!afterPromises) {
return;
}
// console.log('piggies observe autoConversion');
this.autoConversion = newValue;
this.loadPiggyBanks();
});

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

@@ -20,14 +20,15 @@
import {getVariable} from "../../store/get-variable.js";
import Get from "../../api/v2/model/transaction/get.js";
import {getDefaultChartSettings} from "../../support/default-chart-settings.js";
import Chart from "chart.js/auto";
import {Chart} from 'chart.js';
import {Flow, SankeyController} from 'chartjs-chart-sankey';
Chart.register(SankeyController, Flow);
Chart.register({SankeyController, Flow});
let currencies = [];
let chart = null;
let afterPromises = false;
let chart = null;
let transactions = [];
// little helper
@@ -107,17 +108,17 @@ export default () => ({
// variables collected for the sankey chart:
let amounts = {};
let bigBox = 'TODO All money';
let labels = {};
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)) {
// properties of the transaction, used in the generation of the chart:
let transaction = group.attributes.transactions[ii];
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 amount = this.autoConversion ? parseFloat(transaction.native_amount) : parseFloat(transaction.amount);
let flowKey;
/*
@@ -127,11 +128,11 @@ export default () => ({
*/
if ('deposit' === transaction.type) {
// 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);
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;
flowKey = revenueAccount + '-' + category + '-' + currencyCode;
if (!amounts.hasOwnProperty(flowKey)) {
amounts[flowKey] = {
from: revenueAccount,
@@ -160,9 +161,9 @@ export default () => ({
*/
if ('withdrawal' === transaction.type) {
// 1.
let budget = getObjectName('budget', transaction.budget_name, 'out', currencyCode);
let budget = getObjectName('budget', transaction.budget_name, 'out', currencyCode);
labels[budget] = getLabelName('budget', transaction.budget_name, currencyCode);
flowKey = bigBox + '-' + budget + '-' + currencyCode;
flowKey = bigBox + '-' + budget + '-' + currencyCode;
if (!amounts.hasOwnProperty(flowKey)) {
amounts[flowKey] = {
@@ -175,9 +176,9 @@ export default () => ({
// 2.
let category = getObjectName('category', transaction.category_name, 'out', currencyCode);
let category = getObjectName('category', transaction.category_name, 'out', currencyCode);
labels[category] = getLabelName('category', transaction.category_name, currencyCode);
flowKey = budget + '-' + category + '-' + currencyCode;
flowKey = budget + '-' + category + '-' + currencyCode;
if (!amounts.hasOwnProperty(flowKey)) {
amounts[flowKey] = {
@@ -189,9 +190,9 @@ export default () => ({
amounts[flowKey].amount += amount;
// 3.
let expenseAccount = getObjectName('account', transaction.destination_name, 'out', currencyCode);
let expenseAccount = getObjectName('account', transaction.destination_name, 'out', currencyCode);
labels[expenseAccount] = getLabelName('account', transaction.destination_name, currencyCode);
flowKey = category + '-' + expenseAccount + '-' + currencyCode;
flowKey = category + '-' + expenseAccount + '-' + currencyCode;
if (!amounts.hasOwnProperty(flowKey)) {
amounts[flowKey] = {
@@ -208,32 +209,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'
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
};
// 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];
@@ -297,24 +298,31 @@ export default () => ({
this.getFreshData();
},
init() {
// console.log('sankey init');
transactions = [];
Promise.all([getVariable('autoConversion', false), getVariable('sankeyGrouping', 'account')]).then((values) => {
// console.log('sankey after promises');
afterPromises = true;
this.autoConversion = values[0];
this.sankeyGrouping = values[1];
this.loadChart();
});
window.store.observe('end', () => {
if (!afterPromises) {
return;
}
// console.log('sankey observe end');
this.transactions = [];
this.loadChart();
});
window.store.observe('autoConversion', (newValue) => {
if (!afterPromises) {
return;
}
// console.log('sankey observe autoConversion');
this.autoConversion = newValue;
this.loadChart();
});
window.store.observe('sankeyGrouping', (newValue) => {
this.sankeyGrouping = newValue;
this.loadChart();
});
},
});

38
resources/assets/v2/pages/dashboard/subscriptions.js
View File

@@ -19,14 +19,13 @@
*/
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";
import {Chart} from 'chart.js';
let currencies = [];
let chart = null;
let chartData = null;
let chart = null;
let chartData = null;
let afterPromises = false;
export default () => ({
loading: false,
@@ -54,7 +53,7 @@ export default () => ({
},
getFreshData() {
const getter = new Get();
let params = {
let params = {
start: format(new Date(window.store.get('start')), 'y-MM-dd'),
end: format(new Date(window.store.get('end')), 'y-MM-dd')
};
@@ -63,23 +62,23 @@ export default () => ({
let paidData = response.data;
getter.unpaid(params).then((response) => {
let unpaidData = response.data;
let chartData = {paid: paidData, unpaid: unpaidData};
let chartData = {paid: paidData, unpaid: unpaidData};
this.drawChart(this.generateOptions(chartData));
this.loading = false;
});
});
},
generateOptions(data) {
let options = getDefaultChartSettings('pie');
let options = getDefaultChartSettings('pie');
// console.log(data);
options.data.labels = ['TODO paid', 'TODO unpaid'];
options.data.labels = ['TODO paid', 'TODO unpaid'];
options.data.datasets = [];
let collection = {};
let collection = {};
for (let i in data.paid) {
if (data.paid.hasOwnProperty(i)) {
let current = data.paid[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;
let amount = this.autoConversion ? current.native_sum : current.sum;
if (!collection.hasOwnProperty(currencyCode)) {
collection[currencyCode] = {
paid: 0,
@@ -93,9 +92,9 @@ export default () => ({
// unpaid
for (let i in data.unpaid) {
if (data.unpaid.hasOwnProperty(i)) {
let current = data.unpaid[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;
let amount = this.autoConversion ? current.native_sum : current.sum;
if (!collection.hasOwnProperty(currencyCode)) {
collection[currencyCode] = {
paid: 0,
@@ -129,19 +128,30 @@ export default () => ({
init() {
// console.log('subscriptions init');
Promise.all([getVariable('autoConversion', false),]).then((values) => {
// console.log('subscriptions after promises');
this.autoConversion = values[0];
afterPromises = true;
if (false === this.loading) {
this.loadChart();
}
});
window.store.observe('end', () => {
if (!afterPromises) {
return;
}
// console.log('subscriptions observe end');
if (false === this.loading) {
this.chartData = null;
this.loadChart();
}
});
window.store.observe('autoConversion', (newValue) => {
if (!afterPromises) {
return;
}
// console.log('subscriptions observe autoConversion');
this.autoConversion = newValue;
if (false === this.loading) {
this.loadChart();