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

update frontend

Browse Source
This commit is contained in:
James Cole
2023-08-12 17:41:56 +02:00
parent 024e16bf4b
commit b11bfb0aae
40 changed files with 1065 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -32,6 +32,7 @@ let currencies = [];
let chart = null;
let chartData = null;
let afterPromises = false;
export default () => ({
loading: false,
loadingAccounts: false,
@@ -208,10 +209,11 @@ export default () => ({
init() {
// console.log('accounts init');
Promise.all([getVariable('viewRange', '1M'), getVariable('autoConversion', false),]).then((values) => {
Promise.all([getVariable('viewRange', '1M'), getVariable('autoConversion', false), getVariable('language', 'en-US')]).then((values) => {
//console.log('accounts after promises');
this.autoConversion = values[1];
afterPromises = true;
// main dashboard chart:
this.loadChart();
this.loadAccounts();

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

@@ -23,22 +23,15 @@ 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";
import {loadTranslations} from "../../support/load-translations.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,
@@ -93,24 +86,23 @@ export default () => ({
}
}
};
options.data = {
labels: [],
datasets: [
{
label: 'TODO spent',
label: i18n.t('firefly.spent'),
data: [],
borderWidth: 1,
stack: 1
},
{
label: 'TODO left',
label: i18n.t('firefly.left'),
data: [],
borderWidth: 1,
stack: 1
},
{
label: 'TODO overspent',
label: i18n.t('firefly.overspent'),
data: [],
borderWidth: 1,
stack: 1
@@ -143,6 +135,19 @@ export default () => ({
}
}
}
// the currency format callback for the Y axis is AlWAYS based on whatever the first currency is.
// start
options.options.scales = {
y: {
ticks: {
callback: function (context) {
return formatMoney(context, currencies[0]);
}
}
}
};
// end
return options;
},
@@ -152,11 +157,8 @@ export default () => ({
Promise.all([getVariable('autoConversion', false), getVariable('language', 'en-US')]).then((values) => {
i18n = new I18n();
i18n.locale = values[1];
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;

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

@@ -21,6 +21,7 @@ import {getVariable} from "../../store/get-variable.js";
import Dashboard from "../../api/v2/chart/category/dashboard.js";
import {getDefaultChartSettings} from "../../support/default-chart-settings.js";
import {Chart} from "chart.js";
import formatMoney from "../../util/format-money.js";
let currencies = [];
let chart = null;
@@ -48,6 +49,7 @@ export default () => ({
if (!series.hasOwnProperty(code)) {
series[code] = {
name: code,
yAxisID: '',
data: {},
};
currencies.push(code);
@@ -58,6 +60,7 @@ export default () => ({
// loop data again to add amounts to each series.
for (const i in data) {
if (data.hasOwnProperty(i)) {
let yAxis = 'y';
let current = data[i];
let code = current.currency_code;
if (this.autoConversion) {
@@ -71,8 +74,10 @@ export default () => ({
if (code === ii) {
// this series' currency matches this column's currency.
amount = parseFloat(current.amount);
yAxis = 'y' + current.currency_code;
if (this.autoConversion) {
amount = parseFloat(current.native_amount);
yAxis = 'y' + current.native_code;
}
}
if (series[ii].data.hasOwnProperty(current.label)) {
@@ -95,22 +100,39 @@ export default () => ({
}
}
// loop the series and create ChartJS-compatible data sets.
let count = 0;
for (const i in series) {
let yAxisID = 'y' + i;
let dataset = {
label: i,
currency_code: i,
yAxisID: yAxisID,
data: [],
}
for (const ii in series[i].data) {
dataset.data.push(series[i].data[ii]);
}
options.data.datasets.push(dataset);
if (!options.options.scales.hasOwnProperty(yAxisID)) {
options.options.scales[yAxisID] = {
beginAtZero: true,
type: 'linear',
position: 1 === count ? 'right' : 'left',
ticks: {
callback: function (value, index, values) {
return formatMoney(value, i);
}
}
};
count++;
}
}
return options;
},
drawChart(options) {
if (null !== chart) {
chart.data.datasets = options.data.datasets;
chart.options = options.options;
chart.data = options.data;
chart.update();
return;
}

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

@@ -19,10 +19,12 @@
*/
import {getVariable} from "../../store/get-variable.js";
import Get from "../../api/v2/model/piggy-bank/get.js";
import {Chart} from 'chart.js';
import {I18n} from "i18n-js";
import {loadTranslations} from "../../support/load-translations.js";
let apiData = {};
let afterPromises = false;
let i18n;
export default () => ({
loading: false,
@@ -62,7 +64,7 @@ export default () => ({
if (0 === current.attributes.percentage) {
continue;
}
let groupName = current.object_group_title ?? '(TODO ungrouped)';
let groupName = current.object_group_title ?? i18n.t('firefly.default_group_title_name_plain');
if (!dataSet.hasOwnProperty(groupName)) {
dataSet[groupName] = {
id: current.object_group_id ?? 0,
@@ -108,7 +110,12 @@ export default () => ({
init() {
// console.log('piggies init');
apiData = [];
Promise.all([getVariable('autoConversion', false)]).then((values) => {
Promise.all([getVariable('autoConversion', false), getVariable('language', 'en-US')]).then((values) => {
i18n = new I18n();
i18n.locale = values[1];
loadTranslations(i18n, values[1]);
// console.log('piggies after promises');
afterPromises = true;
this.autoConversion = values[0];

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

@@ -22,50 +22,96 @@ import Get from "../../api/v2/model/transaction/get.js";
import {getDefaultChartSettings} from "../../support/default-chart-settings.js";
import {Chart} from 'chart.js';
import {Flow, SankeyController} from 'chartjs-chart-sankey';
import {loadTranslations} from "../../support/load-translations.js";
import {I18n} from "i18n-js";
Chart.register({SankeyController, Flow});
let i18n;
let currencies = [];
let afterPromises = false;
let chart = null;
let transactions = [];
let translations = {
category: null,
unknown_category: null,
in: null,
out: null,
// TODO
unknown_source: null,
unknown_dest: null,
unknown_account: null,
expense_account: null,
revenue_account: null,
budget: null,
unknown_budget: null,
all_money: null,
};
const colors = {
a: 'red',
b: 'green',
c: 'blue',
d: 'gray'
};
const getColor = function (key) {
if (key.includes(translations.revenue_account)) {
return 'forestgreen';
}
if (key.includes('(' + translations.in + ',')) {
return 'green';
}
if (key.includes(translations.budget) || key.includes(translations.unknown_budget)) {
return 'Orchid';
}
if (key.includes('(' + translations.out + ',')) {
return 'MediumOrchid';
}
if (key.includes(translations.all_money)) {
return 'blue';
}
return 'red';
}
// little helper
function getObjectName(type, name, direction, code) {
// category 4x
if ('category' === type && null !== name && 'in' === direction) {
return 'Category "' + name + '" (in ' + code + ')';
return translations.category + ' "' + name + '" (' + translations.in + ', ' + code + ')';
}
if ('category' === type && null === name && 'in' === direction) {
return 'Unknown category (in ' + code + ')';
return translations.unknown_category + ' (' + translations.in + ', ' + code + ')';
}
if ('category' === type && null !== name && 'out' === direction) {
return 'Category "' + name + '" (out ' + code + ')';
return translations.category + ' "' + name + '" (' + translations.out + ', ' + code + ')';
}
if ('category' === type && null === name && 'out' === direction) {
return 'Unknown category (out ' + code + ')';
return translations.unknown_category + ' (' + translations.out + ', ' + code + ')';
}
// account 4x
if ('account' === type && null === name && 'in' === direction) {
return 'Unknown source account ' + code + '';
return translations.unknown_source + ' (' + code + ')';
}
if ('account' === type && null !== name && 'in' === direction) {
return name + ' (in ' + code + ')';
return translations.revenue_account + '"' + name + '" (' + code + ')';
}
if ('account' === type && null === name && 'out' === direction) {
return 'Unknown destination account ' + code + '';
return translations.unknown_dest + ' (' + code + ')';
}
if ('account' === type && null !== name && 'out' === direction) {
return name + ' (out ' + code + ')';
return translations.expense_account + ' "' + name + '" (' + code + ')';
}
// budget 2x
if ('budget' === type && null !== name && 'out' === direction) {
return 'Budget "' + name + '" (out ' + code + ')';
if ('budget' === type && null !== name) {
return translations.budget + ' "' + name + '" (' + code + ')';
}
if ('budget' === type && null === name && 'out' === direction) {
return 'Unknown budget (' + code + ')';
if ('budget' === type && null === name) {
return translations.unknown_budget + ' (' + code + ')';
}
console.error('Cannot handle: type:"' + type + '", dir: "' + direction + '"');
}
@@ -73,14 +119,14 @@ function getObjectName(type, name, direction, code) {
function getLabelName(type, name, code) {
// category
if ('category' === type && null !== name) {
return 'Category "' + name + '" (' + code + ')';
return translations.category + ' "' + name + '" (' + code + ')';
}
if ('category' === type && null === name) {
return 'Unknown category (' + code + ')';
return translations.unknown_category + ' (' + code + ')';
}
// account
if ('account' === type && null === name) {
return 'Unknown account (' + code + ')';
return translations.unknown_account + ' (' + code + ')';
}
if ('account' === type && null !== name) {
return name + ' (' + code + ')';
@@ -88,19 +134,19 @@ function getLabelName(type, name, code) {
// budget 2x
if ('budget' === type && null !== name) {
return 'Budget "' + name + '" (' + code + ')';
return translations.budget + ' "' + name + '" (' + code + ')';
}
if ('budget' === type && null === name) {
return 'Unknown budget (' + code + ')';
return translations.unknown_budget + ' (' + code + ')';
}
console.error('Cannot handle: type:"' + type + '"');
}
export default () => ({
loading: false,
autoConversion: false,
sankeyGrouping: 'account',
generateOptions(data) {
generateOptions() {
let options = getDefaultChartSettings('sankey');
// reset currencies
@@ -108,7 +154,6 @@ export default () => ({
// variables collected for the sankey chart:
let amounts = {};
let bigBox = 'TODO All money';
let labels = {};
for (let i in transactions) {
if (transactions.hasOwnProperty(i)) {
@@ -143,11 +188,11 @@ export default () => ({
amounts[flowKey].amount += amount;
// nr 2
flowKey = category + '-' + bigBox + '-' + currencyCode;
flowKey = category + '-' + translations.all_money + '-' + currencyCode;
if (!amounts.hasOwnProperty(flowKey)) {
amounts[flowKey] = {
from: category,
to: bigBox,
to: translations.all_money + ' (' + currencyCode + ')',
amount: 0
};
}
@@ -163,11 +208,11 @@ export default () => ({
// 1.
let budget = getObjectName('budget', transaction.budget_name, 'out', currencyCode);
labels[budget] = getLabelName('budget', transaction.budget_name, currencyCode);
flowKey = bigBox + '-' + budget + '-' + currencyCode;
flowKey = translations.all_money + '-' + budget + '-' + currencyCode;
if (!amounts.hasOwnProperty(flowKey)) {
amounts[flowKey] = {
from: bigBox,
from: translations.all_money + ' (' + currencyCode + ')',
to: budget,
amount: 0
};
@@ -213,27 +258,11 @@ export default () => ({
{
label: 'My sankey',
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].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
size: 'min', // or 'min' if flow overlap is preferred
};
for (let i in amounts) {
if (amounts.hasOwnProperty(i)) {
@@ -300,11 +329,30 @@ export default () => ({
init() {
// console.log('sankey init');
transactions = [];
Promise.all([getVariable('autoConversion', false), getVariable('sankeyGrouping', 'account')]).then((values) => {
Promise.all([getVariable('autoConversion', false), getVariable('language', 'en-US')]).then((values) => {
i18n = new I18n();
i18n.locale = values[1];
loadTranslations(i18n, values[1]).then(() => {
// some translations:
translations.all_money = i18n.t('firefly.all_money');
translations.category = i18n.t('firefly.category');
translations.in = i18n.t('firefly.money_flowing_in');
translations.out = i18n.t('firefly.money_flowing_out');
translations.unknown_category = i18n.t('firefly.unknown_category_plain');
translations.unknown_source = i18n.t('firefly.unknown_source_plain');
translations.unknown_dest = i18n.t('firefly.unknown_dest_plain');
translations.unknown_account = i18n.t('firefly.unknown_any_plain');
translations.unknown_budget = i18n.t('firefly.unknown_budget_plain');
translations.expense_account = i18n.t('firefly.expense_account');
translations.revenue_account = i18n.t('firefly.revenue_account');
translations.budget = i18n.t('firefly.budget');
});
// console.log('sankey after promises');
afterPromises = true;
this.autoConversion = values[0];
this.sankeyGrouping = values[1];
this.loadChart();
});
window.store.observe('end', () => {

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

@@ -22,11 +22,13 @@ 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";
let chart = null;
let chartData = null;
let afterPromises = false;
let i18n; // for translating items in the chart.
export default () => ({
loading: false,
autoConversion: false,
@@ -71,7 +73,7 @@ export default () => ({
generateOptions(data) {
let options = getDefaultChartSettings('pie');
// console.log(data);
options.data.labels = ['TODO paid', 'TODO unpaid'];
options.data.labels = [i18n.t('firefly.paid'), i18n.t('firefly.unpaid')];
options.data.datasets = [];
let collection = {};
for (let i in data.paid) {
@@ -129,10 +131,16 @@ export default () => ({
init() {
// console.log('subscriptions init');
Promise.all([getVariable('autoConversion', false),]).then((values) => {
Promise.all([getVariable('autoConversion', false), getVariable('language', 'en-US')]).then((values) => {
// console.log('subscriptions after promises');
this.autoConversion = values[0];
afterPromises = true;
i18n = new I18n();
i18n.locale = values[1];
loadTranslations(i18n, values[1]);
if (false === this.loading) {
this.loadChart();
}