kenmirrors/firefly-iii
1
0
Fork 0
mirror of https://github.com/firefly-iii/firefly-iii.git synced 2025-10-25 05:03:13 +00:00
Code Issues Projects Releases Wiki Activity

Rebuild frontpage with better bills overview.

Browse Source
This commit is contained in:
James Cole
2023-09-17 09:45:34 +02:00
parent 518712d9e8
commit 35b0c20f88
57 changed files with 875 additions and 378 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -84,10 +84,10 @@ 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;
currencies.push(current.native_currency_code);
dataset.currency_code = current.native_currency_code;
collection = Object.values(current.native_entries);
yAxis = 'y' + current.native_code;
yAxis = 'y' + current.native_currency_code;
}
if (!this.autoConversion) {
yAxis = 'y' + current.currency_code;
@@ -208,7 +208,7 @@ export default () => ({
amount_raw: parseFloat(currentTransaction.amount),
amount: formatMoney(currentTransaction.amount, currentTransaction.currency_code),
native_amount_raw: parseFloat(currentTransaction.native_amount),
native_amount: formatMoney(currentTransaction.native_amount, currentTransaction.native_code),
native_amount: formatMoney(currentTransaction.native_amount, currentTransaction.native_currency_code),
});
}
groups.push(group);
@@ -221,7 +221,7 @@ export default () => ({
balance_raw: parseFloat(parent.attributes.current_balance),
balance: formatMoney(parent.attributes.current_balance, parent.attributes.currency_code),
native_balance_raw: parseFloat(parent.attributes.native_current_balance),
native_balance: formatMoney(parent.attributes.native_current_balance, parent.attributes.native_code),
native_balance: formatMoney(parent.attributes.native_current_balance, parent.attributes.native_currency_code),
groups: groups,
});
// console.log(parent.attributes);

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

@@ -134,7 +134,7 @@ export default () => ({
let label = current.label + ' (' + current.currency_code + ')';
options.data.labels.push(label);
if (this.autoConversion) {
currencies.push(current.native_code);
currencies.push(current.native_currency_code);
// series 0: spent
options.data.datasets[0].data.push(parseFloat(current.native_entries.spent) * -1);
// series 1: left

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

@@ -46,7 +46,7 @@ export default () => ({
let code = current.currency_code;
// only use native code when doing auto conversion.
if (this.autoConversion) {
code = current.native_code;
code = current.native_currency_code;
}
if (!series.hasOwnProperty(code)) {
@@ -67,7 +67,7 @@ export default () => ({
let current = data[i];
let code = current.currency_code;
if (this.autoConversion) {
code = current.native_code;
code = current.native_currency_code;
}
// loop series, add 0 if not present or add actual amount.
@@ -80,7 +80,7 @@ export default () => ({
yAxis = 'y' + current.currency_code;
if (this.autoConversion) {
amount = parseFloat(current.native_amount);
yAxis = 'y' + current.native_code;
yAxis = 'y' + current.native_currency_code;
}
}
if (series[ii].data.hasOwnProperty(current.label)) {

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

@@ -96,7 +96,7 @@ export default () => ({
target_amount: this.autoConversion ? current.attributes.native_target_amount : current.attributes.target_amount,
// save per month
save_per_month: this.autoConversion ? current.attributes.native_save_per_month : current.attributes.save_per_month,
currency_code: this.autoConversion ? current.attributes.native_code : current.attributes.currency_code,
currency_code: this.autoConversion ? current.attributes.native_currency_code : current.attributes.currency_code,
};
dataSet[groupName].piggies.push(piggy);

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

@@ -164,7 +164,7 @@ export default () => ({
if (group.attributes.transactions.hasOwnProperty(ii)) {
// 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 currencyCode = this.autoConversion ? transaction.native_currency_code : transaction.currency_code;
let amount = this.autoConversion ? parseFloat(transaction.native_amount) : parseFloat(transaction.amount);
let flowKey;
@@ -260,8 +260,8 @@ export default () => ({
{
label: 'Firefly III dashboard sankey chart',
data: [],
colorFrom: (c) => getColor(c.dataset.data[c.dataIndex].from),
colorTo: (c) => getColor(c.dataset.data[c.dataIndex].to),
colorFrom: (c) => getColor(c.dataset.data[c.dataIndex] ? c.dataset.data[c.dataIndex].from : ''),
colorTo: (c) => getColor(c.dataset.data[c.dataIndex] ? c.dataset.data[c.dataIndex].to : ''),
colorMode: 'gradient', // or 'from' or 'to'
labels: labels,
size: 'min', // or 'min' if flow overlap is preferred

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

@@ -19,59 +19,308 @@
*/
import {getVariable} from "../../store/get-variable.js";
import Get from "../../api/v2/model/subscription/get.js";
import {getDefaultChartSettings} from "../../support/default-chart-settings.js";
import {format} from "date-fns";
import {Chart} from 'chart.js';
import {I18n} from "i18n-js";
import {loadTranslations} from "../../support/load-translations.js";
import {getCacheKey} from "../../support/get-cache-key.js";
import {Chart} from "chart.js";
import formatMoney from "../../util/format-money.js";
//const CACHE_KEY = 'dashboard-subscriptions-data';
const SUBSCRIPTION_CACHE_KEY = 'dashboard-subscriptions-data';
// let chart = null;
// let chartData = null;
let afterPromises = false;
let i18n; // for translating items in the chart.
let apiData = [];
const SUBSCRIPTION_CACHE_KEY = 'subscriptions-data-dashboard';
let subscriptionData = {};
/**
*
*/
function downloadSubscriptions(params) {
console.log('Downloading page ' + params.page + '...');
const getter = new Get();
// function downloadSubscriptions(params) {
// console.log('Downloading page ' + params.page + '...');
// const getter = new Get();
//
// getter.get(params).then((response) => {
// let data = response.data;
// let totalPages = parseInt(data.meta.pagination.total_pages);
// apiData = [...apiData, ...data.data];
// if (totalPages > params.page) {
// params.page++;
// downloadSubscriptions(params);
// }
// console.log('Done! ' + apiData.length + ' items downloaded.');
// });
// }
function downloadSubscriptions(params) {
const getter = new Get();
return getter.get(params)
// first promise: parse the data:
.then((response) => {
let data = response.data.data;
//console.log(data);
for (let i in data) {
if (data.hasOwnProperty(i)) {
let current = data[i];
//console.log(current);
if (current.attributes.active && current.attributes.pay_dates.length > 0) {
let objectGroupId = null === current.attributes.object_group_id ? 0 : current.attributes.object_group_id;
let objectGroupTitle = null === current.attributes.object_group_title ? i18n.t('firefly.default_group_title_name_plain') : current.attributes.object_group_title;
let objectGroupOrder = null === current.attributes.object_group_order ? 0 : current.attributes.object_group_order;
if (!subscriptionData.hasOwnProperty(objectGroupId)) {
subscriptionData[objectGroupId] = {
id: objectGroupId,
title: objectGroupTitle,
order: objectGroupOrder,
payment_info: {},
bills: [],
};
}
// TODO this conversion needs to be inside some kind of a parsing class.
let bill = {
id: current.id,
name: current.attributes.name,
// amount
amount_min: current.attributes.amount_min,
amount_max: current.attributes.amount_max,
amount: (parseFloat(current.attributes.amount_max) + parseFloat(current.attributes.amount_min)) / 2,
currency_code: current.attributes.currency_code,
// native amount
native_amount_min: current.attributes.native_amount_min,
native_amount_max: current.attributes.native_amount_max,
native_amount: (parseFloat(current.attributes.native_amount_max) + parseFloat(current.attributes.native_amount_min)) / 2,
native_currency_code: current.attributes.native_currency_code,
// paid transactions:
transactions: [],
// unpaid moments
pay_dates: current.attributes.pay_dates,
paid: current.attributes.paid_dates.length > 0,
};
// set variables
bill.expected_amount = params.autoConversion ? formatMoney(bill.native_amount, bill.native_currency_code) :
formatMoney(bill.amount, bill.currency_code);
bill.expected_times = i18n.t('firefly.subscr_expected_x_times', {
times: current.attributes.pay_dates.length,
amount: bill.expected_amount
});
// add transactions (simpler version)
for (let iii in current.attributes.paid_dates) {
if (current.attributes.paid_dates.hasOwnProperty(iii)) {
const currentPayment = current.attributes.paid_dates[iii];
let percentage = 100;
// math: -100+(paid/expected)*100
if (params.autoConversion) {
percentage = Math.round(-100 + ((parseFloat(currentPayment.native_amount) * -1) / parseFloat(bill.native_amount)) * 100);
}
if (!params.autoConversion) {
percentage = Math.round(-100 + ((parseFloat(currentPayment.amount) * -1) / parseFloat(bill.amount)) * 100);
}
let currentTransaction = {
amount: params.autoConversion ? formatMoney(currentPayment.native_amount, currentPayment.native_currency_code) : formatMoney(currentPayment.amount, currentPayment.currency_code),
percentage: percentage,
date: format(new Date(currentPayment.date), 'PP'),
foreign_amount: null,
};
if (null !== currentPayment.foreign_currency_code) {
currentTransaction.foreign_amount = params.autoConversion ? currentPayment.foreign_native_amount : currentPayment.foreign_amount;
currentTransaction.foreign_currency_code = params.autoConversion ? currentPayment.native_currency_code : currentPayment.foreign_currency_code;
}
bill.transactions.push(currentTransaction);
}
}
subscriptionData[objectGroupId].bills.push(bill);
if (0 === current.attributes.paid_dates.length) {
// bill is unpaid, count the "pay_dates" and multiply with the "amount".
// since bill is unpaid, this can only be in currency amount and native currency amount.
const totalAmount = current.attributes.pay_dates.length * bill.amount;
const totalNativeAmount = current.attributes.pay_dates.length * bill.native_amount;
// for bill's currency
if (!subscriptionData[objectGroupId].payment_info.hasOwnProperty(bill.currency_code)) {
subscriptionData[objectGroupId].payment_info[bill.currency_code] = {
currency_code: bill.currency_code,
paid: 0,
unpaid: 0,
native_currency_code: bill.native_currency_code,
native_paid: 0,
native_unpaid: 0,
};
}
subscriptionData[objectGroupId].payment_info[bill.currency_code].unpaid += totalAmount;
subscriptionData[objectGroupId].payment_info[bill.currency_code].native_unpaid += totalNativeAmount;
}
if (current.attributes.paid_dates.length > 0) {
for (let ii in current.attributes.paid_dates) {
if (current.attributes.paid_dates.hasOwnProperty(ii)) {
// bill is paid!
// since bill is paid, 3 possible currencies:
// native, currency, foreign currency.
// foreign currency amount (converted to native or not) will be ignored.
let currentJournal = current.attributes.paid_dates[ii];
// new array for the currency
if (!subscriptionData[objectGroupId].payment_info.hasOwnProperty(currentJournal.currency_code)) {
subscriptionData[objectGroupId].payment_info[currentJournal.currency_code] = {
currency_code: bill.currency_code,
paid: 0,
unpaid: 0,
native_currency_code: bill.native_currency_code,
native_paid: 0,
native_unpaid: 0,
};
}
const amount = parseFloat(currentJournal.amount) * -1;
const nativeAmount = parseFloat(currentJournal.native_amount) * -1;
subscriptionData[objectGroupId].payment_info[currentJournal.currency_code].paid += amount;
subscriptionData[objectGroupId].payment_info[currentJournal.currency_code].native_paid += nativeAmount;
}
}
}
}
}
}
// if next page, return the same function + 1 page:
if (parseInt(response.data.meta.pagination.total_pages) > params.page) {
params.page++;
return downloadSubscriptions(params);
}
// otherwise return resolved promise:
return Promise.resolve();
});
getter.get(params).then((response) => {
let data = response.data;
let totalPages = parseInt(data.meta.pagination.total_pages);
apiData = [...apiData, ...data.data];
if (totalPages > params.page) {
params.page++;
downloadSubscriptions(params);
}
console.log('Done! ' + apiData.length + ' items downloaded.');
});
}
//
// function refreshSubscriptions() {
// console.log('refreshSubscriptions');
//
// const cacheValid = window.store.get('cacheValid');
// let cachedData = window.store.get(CACHE_KEY);
//
// // if (cacheValid && typeof cachedData !== 'undefined') {
// // // this.drawChart(this.generateOptions(cachedData));
// // // this.loading = false;
// // // return;
// // }
//
// let params = {
// start: format(new Date(window.store.get('start')), 'y-MM-dd'),
// end: format(new Date(window.store.get('end')), 'y-MM-dd'),
// page: 1,
// };
// downloadSubscriptions(params).then(() => {
// console.log('Done with download!');
// console.log(subscriptionData);
// });
//
//
// //
// // getter.paid(params).then((response) => {
// // let paidData = response.data;
// // getter.unpaid(params).then((response) => {
// // let unpaidData = response.data;
// // let chartData = {paid: paidData, unpaid: unpaidData};
// // window.store.set(CACHE_KEY, chartData);
// // this.drawChart(this.generateOptions(chartData));
// // this.loading = false;
// // });
// // });
// }
export default () => ({
loading: false,
autoConversion: false,
subscriptions: [],
startSubscriptions() {
this.loading = true;
let start = new Date(window.store.get('start'));
let end = new Date(window.store.get('end'));
console.log('here we are');
const cacheValid = window.store.get('cacheValid');
let cachedData = window.store.get(SUBSCRIPTION_CACHE_KEY);
let cachedData = window.store.get(getCacheKey(SUBSCRIPTION_CACHE_KEY, start, end));
if (cacheValid && typeof cachedData !== 'undefined' && false) {
console.error('cannot handle yet');
return;
}
console.log('cache is invalid, must download');
let params = {
start: format(new Date(window.store.get('start')), 'y-MM-dd'),
end: format(new Date(window.store.get('end')), 'y-MM-dd'),
start: format(start, 'y-MM-dd'),
end: format(end, 'y-MM-dd'),
autoConversion: this.autoConversion,
page: 1
};
downloadSubscriptions(params);
downloadSubscriptions(params).then(() => {
console.log('Done with download!');
let set = Object.values(subscriptionData);
// convert subscriptionData to usable data (especially for the charts)
for (let i in set) {
if (set.hasOwnProperty(i)) {
let group = set[i];
const keys = Object.keys(group.payment_info);
// do some parsing here.
group.col_size = 1 === keys.length ? 'col-6 offset-3' : 'col-6';
group.chart_width = 1 === keys.length ? '50%' : '100%';
group.payment_length = keys.length;
// then add to array
this.subscriptions.push(group);
//console.log(group);
}
}
// then assign to this.subscriptions.
this.loading = false;
});
},
drawPieChart(groupId, groupTitle, data) {
let id = '#pie_' + groupId + '_' + data.currency_code;
//console.log(data);
const unpaidAmount = this.autoConversion ? data.native_unpaid : data.unpaid;
const paidAmount = this.autoConversion ? data.native_paid : data.paid;
const currencyCode = this.autoConversion ? data.native_currency_code : data.currency_code;
const chartData = {
labels: [
i18n.t('firefly.paid'),
i18n.t('firefly.unpaid')
],
datasets: [{
label: i18n.t('firefly.subscriptions_in_group', {title: groupTitle}),
data: [paidAmount, unpaidAmount],
backgroundColor: [
'rgb(255, 99, 132)',
'rgb(54, 162, 235)',
],
hoverOffset: 4
}]
};
const config = {
type: 'doughnut',
data: chartData,
options: {
plugins: {
tooltip: {
callbacks: {
label: function (tooltipItem) {
return tooltipItem.dataset.label + ': ' + formatMoney(tooltipItem.raw, currencyCode);
},
},
},
},
}
};
new Chart(document.querySelector(id), config);
},
// loadChart() {
@@ -183,9 +432,9 @@ export default () => ({
init() {
// console.log('subscriptions init');
console.log('subscriptions init');
Promise.all([getVariable('autoConversion', false), getVariable('language', 'en-US')]).then((values) => {
// console.log('subscriptions after promises');
console.log('subscriptions after promises');
this.autoConversion = values[0];
afterPromises = true;
@@ -203,7 +452,7 @@ export default () => ({
if (!afterPromises) {
return;
}
// console.log('subscriptions observe end');
console.log('subscriptions observe end');
if (false === this.loading) {
this.startSubscriptions();
}
@@ -212,7 +461,7 @@ export default () => ({
if (!afterPromises) {
return;
}
// console.log('subscriptions observe autoConversion');
console.log('subscriptions observe autoConversion');
this.autoConversion = newValue;
if (false === this.loading) {
this.startSubscriptions();