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

Cleanup charts

Browse Source
This commit is contained in:
James Cole 2023-08-12 07:53:11 +02:00
parent daf753d76e
commit 024e16bf4b
No known key found for this signature in database
GPG Key ID: B49A324B7EAD6D80
15 changed files with 392 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
package-lock.json generated
View File

@ -10,8 +10,10 @@
"alpinejs": "^3.12.3",
"bootstrap": "^5.3.0",
"chart.js": "^4.3.3",
"chartjs-adapter-date-fns": "^3.0.0",
"chartjs-chart-sankey": "^0.12.0",
"date-fns": "^2.30.0",
"i18n-js": "^4.3.0",
"store": "^2.0.12"
},
"devDependencies": {
@ -458,6 +460,14 @@
"proxy-from-env": "^1.1.0"
}
},
"node_modules/bignumber.js": {
"version": "9.1.1",
"resolved": "https://registry.npmjs.org/bignumber.js/-/bignumber.js-9.1.1.tgz",
"integrity": "sha512-pHm4LsMJ6lzgNGVfZHjMoO8sdoRhOzOH4MLmY65Jg70bpxCKu5iOHNJyfF6OyvYw7t8Fpf35RuzUyqnQsj8Vig==",
"engines": {
"node": "*"
}
},
"node_modules/binary-extensions": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
@ -508,6 +518,15 @@
"pnpm": ">=7"
}
},
"node_modules/chartjs-adapter-date-fns": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/chartjs-adapter-date-fns/-/chartjs-adapter-date-fns-3.0.0.tgz",
"integrity": "sha512-Rs3iEB3Q5pJ973J93OBTpnP7qoGwvq3nUnoMdtxO+9aoJof7UFcRbWcIDteXuYd1fgAvct/32T9qaLyLuZVwCg==",
"peerDependencies": {
"chart.js": ">=2.8.0",
"date-fns": ">=2.0.0"
}
},
"node_modules/chartjs-chart-sankey": {
"version": "0.12.0",
"resolved": "https://registry.npmjs.org/chartjs-chart-sankey/-/chartjs-chart-sankey-0.12.0.tgz",
@ -688,6 +707,15 @@
"node": ">= 6"
}
},
"node_modules/i18n-js": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/i18n-js/-/i18n-js-4.3.0.tgz",
"integrity": "sha512-PX93eT6WPV6Ym6mHtFKGDRZB0zwDX7HUPkgprjsZ28J6/Ohw1nvRYuM93or3pWv2VLxs6XfBf7X9Fc/YAZNEtQ==",
"dependencies": {
"bignumber.js": "*",
"make-plural": "*"
}
},
"node_modules/immutable": {
"version": "4.3.2",
"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.2.tgz",
@ -752,6 +780,11 @@
"vite": "^3.0.0 || ^4.0.0"
}
},
"node_modules/make-plural": {
"version": "7.3.0",
"resolved": "https://registry.npmjs.org/make-plural/-/make-plural-7.3.0.tgz",
"integrity": "sha512-/K3BC0KIsO+WK2i94LkMPv3wslMrazrQhfi5We9fMbLlLjzoOSJWr7TAdupLlDWaJcWxwoNosBkhFDejiu5VDw=="
},
"node_modules/mime-db": {
"version": "1.52.0",
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",

2
package.json
View File

@ -17,8 +17,10 @@
"alpinejs": "^3.12.3",
"bootstrap": "^5.3.0",
"chart.js": "^4.3.3",
"chartjs-adapter-date-fns": "^3.0.0",
"chartjs-chart-sankey": "^0.12.0",
"date-fns": "^2.30.0",
"i18n-js": "^4.3.0",
"store": "^2.0.12"
}
}

2
public/build/manifest.json
View File

@ -24,7 +24,7 @@
"src": "node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff2"
},
"resources/assets/v2/dashboard.js": {
"file": "assets/dashboard-9172f6d4.js",
"file": "assets/dashboard-9c513338.js",
"isEntry": true,
"src": "resources/assets/v2/dashboard.js"
},

4
resources/assets/v2/bootstrap.js vendored
View File

@ -35,7 +35,9 @@ Promise.all([
}
// save local in window.__ something
window.__localeId__ = values[3];
window.__localeId__ = values[2];
store.set('language', values[3]);
store.set('locale', values[3]);
const event = new Event('firefly-iii-bootstrapped');
document.dispatchEvent(event);

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

@ -28,7 +28,54 @@ import sankey from './pages/dashboard/sankey.js';
import subscriptions from './pages/dashboard/subscriptions.js';
import piggies from './pages/dashboard/piggies.js';
const comps = {dates, boxes, accounts, budgets, categories, sankey, subscriptions, piggies};
import {
Chart,
LineController,
LineElement,
PieController,
BarController,
BarElement,
TimeScale,
ArcElement,
LinearScale,
Legend,
Filler,
Colors,
CategoryScale,
PointElement,
Tooltip
} from "chart.js";
import 'chartjs-adapter-date-fns';
// register things
Chart.register({
LineController,
LineElement,
ArcElement,
BarController,
TimeScale,
PieController,
BarElement,
Filler,
Colors,
LinearScale,
CategoryScale,
PointElement,
Tooltip,
Legend
});
const comps = {
dates,
boxes,
accounts,
budgets,
categories,
sankey,
subscriptions,
piggies
};
function loadPage(comps) {
Object.keys(comps).forEach(comp => {

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();

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

@ -18,6 +18,8 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import formatMoney from "../util/format-money.js";
function getDefaultChartSettings(type) {
if ('sankey' === type) {
return {
@ -43,6 +45,7 @@ function getDefaultChartSettings(type) {
datasets: [],
},
options: {
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true
@ -51,7 +54,40 @@ function getDefaultChartSettings(type) {
},
};
}
return [];
if ('line' === type) {
return {
options: {
plugins: {
tooltip: {
callbacks: {
label: function (tooltipItem) {
console.log(tooltipItem);
let currency = tooltipItem.dataset.currency_code;
return formatMoney(tooltipItem.raw, currency);
},
},
},
},
maintainAspectRatio: false,
scales: {
x: {
// The axis for this scale is determined from the first letter of the id as `'x'`
// It is recommended to specify `position` and / or `axis` explicitly.
type: 'time',
time: {
tooltipFormat: 'PP',
}
},
},
},
type: 'line',
data: {
labels: [],
datasets: []
},
};
}
return {};
}
export {getDefaultChartSettings};

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

@ -20,7 +20,7 @@
title="{{ __('firefly.yourAccounts') }}">{{ __('firefly.yourAccounts') }}</a>
</h3>
</div>
<div class="card-body p-0">
<div class="card-body p-0" style="position: relative;height:400px;">
<canvas id="account-chart"></canvas>
</div>
<div class="card-footer text-end">
@ -51,10 +51,8 @@
title="{{ __('firefly.go_to_budgets') }}">{{ __('firefly.budgetsAndSpending') }}</a>
</h3>
</div>
<div class="card-body p-0">
<div>
<canvas id="budget-chart"></canvas>
</div>
<div class="card-body p-0" style="position: relative;height:350px;">
<canvas id="budget-chart"></canvas>
</div>
</div>
@ -68,7 +66,7 @@
title="{{ __('firefly.yourAccounts') }}">{{ __('firefly.categories') }}</a>
</h3>
</div>
<div class="card-body p-0">
<div class="card-body p-0" style="position: relative;height:350px;">
<canvas id="category-chart"></canvas>
</div>
</div>
@ -77,6 +75,11 @@
</div>
<div class="col-xl-4 col-lg-12 col-sm-12 col-xs-12">
<div class="row">
<template x-if="loadingAccounts">
<p class="text-center">
<em class="fa-solid fa-spinner fa-spin"></em>
</p>
</template>
<template x-for="account in accountList">
<div class="col-12 mb-2" x-model="account">
<div class="card">

45
resources/views/v2/partials/dashboard/boxes.blade.php
View File

@ -12,10 +12,16 @@
</span>
</template>
</h3>
<p>
<a href="{{ route('reports.report.default', ['allAssetAccounts',$start->format('Ymd'),$end->format('Ymd')]) }}">{{ __('firefly.in_out_period') }}</a>
</p>
<template x-if="loading">
<p>
<em class="fa-solid fa-spinner fa-spin"></em>
</p>
</template>
<template x-if="!loading">
<p>
<a href="{{ route('reports.report.default', ['allAssetAccounts',$start->format('Ymd'),$end->format('Ymd')]) }}">{{ __('firefly.in_out_period') }}</a>
</p>
</template>
</div>
<span class="small-box-icon">
<i class="fa-solid fa-scale-balanced"></i>
@ -46,7 +52,14 @@
</template>
</h3>
<p><a href="{{ route('bills.index') }}">{{ __('firefly.bills_to_pay') }}</a></p>
<template x-if="loading">
<p>
<em class="fa-solid fa-spinner fa-spin"></em>
</p>
</template>
<template x-if="!loading">
<p><a href="{{ route('bills.index') }}">{{ __('firefly.bills_to_pay') }}</a></p>
</template>
</div>
<span class="small-box-icon">
<em class="fa-regular fa-calendar"></em>
@ -77,7 +90,14 @@
</template>
</h3>
<p><a href="{{ route('budgets.index') }}">{{ __('firefly.left_to_spend') }}</a></p>
<template x-if="loading">
<p>
<em class="fa-solid fa-spinner fa-spin"></em>
</p>
</template>
<template x-if="!loading">
<p><a href="{{ route('budgets.index') }}">{{ __('firefly.left_to_spend') }}</a></p>
</template>
</div>
<span class="small-box-icon">
<em class="fa-solid fa-money-check-dollar"></em>
@ -108,9 +128,16 @@
</template>
</h3>
<p>
<a href="{{ route('reports.report.default', ['allAssetAccounts','currentYearStart','currentYearEnd']) }}">{{ __('firefly.net_worth') }}</a>
</p>
<template x-if="loading">
<p>
<em class="fa-solid fa-spinner fa-spin"></em>
</p>
</template>
<template x-if="!loading">
<p>
<a href="{{ route('reports.report.default', ['allAssetAccounts','currentYearStart','currentYearEnd']) }}">{{ __('firefly.net_worth') }}</a>
</p>
</template>
</div>
<span class="small-box-icon">
<i class="fa-solid fa-chart-line"></i>