firefly-iii/resources/assets/v2/pages/dashboard/accounts.js

/*
 * accounts.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 {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';
import {getDefaultChartSettings} from "../../support/default-chart-settings.js";
import {getColors} from "../../support/get-colors.js";
import {getCacheKey} from "../../support/get-cache-key.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 afterPromises = false;

export default () => ({
    loading: false,
    loadingAccounts: false,
    accountList: [],
    autoConversion: false,
    chartOptions: null,
    switchAutoConversion() {
        this.autoConversion = !this.autoConversion;
        setVariable('autoConversion', this.autoConversion);
    },
    getFreshData() {
        const start = new Date(window.store.get('start'));
        const end = new Date(window.store.get('end'));
        const chartCacheKey = getCacheKey('dashboard-accounts-chart', start, end)

        const cacheValid = window.store.get('cacheValid');
        let cachedData = window.store.get(chartCacheKey);

        if (cacheValid && typeof cachedData !== 'undefined') {
            console.log(cachedData);
            this.drawChart(this.generateOptions(cachedData));
            this.loading = false;
            return;
        }
        const dashboard = new Dashboard();
        dashboard.dashboard(start, end, null).then((response) => {
            this.chartData = response.data;
            // cache generated options:
            window.store.set(chartCacheKey, response.data);
            console.log(response.data);
            this.drawChart(this.generateOptions(this.chartData));
            this.loading = false;
        });

    },
    generateOptions(data) {
        currencies = [];
        let options = getDefaultChartSettings('line');

        for (let i = 0; i < data.length; i++) {
            if (data.hasOwnProperty(i)) {
                let yAxis = 'y';
                let current = data[i];
                let dataset = {};
                let collection = [];

                // if index = 0, push all keys as labels:
                if (0 === i) {
                    options.data.labels = Object.keys(current.entries);
                }
                dataset.label = current.label;

                // use the "native" currency code and use the "native_entries" as array
                if (this.autoConversion) {
                    currencies.push(current.native_currency_code);
                    dataset.currency_code = current.native_currency_code;
                    collection = Object.values(current.native_entries);
                    yAxis = 'y' + current.native_currency_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;

                // add colors:
                //dataset.backgroundColor = getColors(null, 'background');
                //dataset.borderColor = getColors(null, 'background');

                // add data set to the correct Y Axis:

                options.data.datasets.push(dataset);
            }
        }
        // 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() {
        if (true === this.loading) {
            return;
        }
        this.loading = true;
        if (null === chartData) {
            this.getFreshData();
            return;
        }
        this.drawChart(this.generateOptions(chartData));
        this.loading = false;

    },
    drawChart(options) {
        if (null !== chart) {
            // chart already in place, refresh:
            chart.options = options.options;
            chart.data = options.data;
            chart.update();
            return;
        }
        chart = new Chart(document.querySelector("#account-chart"), options);
    },
    loadAccounts() {
        if (true === this.loadingAccounts) {
            return;
        }
        this.loadingAccounts = true;
        if (this.accountList.length > 0) {
            this.loadingAccounts = false;
            return;
        }
        const start = new Date(window.store.get('start'));
        const end = new Date(window.store.get('end'));
        const accountCacheKey = getCacheKey('dashboard-accounts-data', start, end);

        const cacheValid = window.store.get('cacheValid');
        let cachedData = window.store.get(accountCacheKey);

        if (cacheValid && typeof cachedData !== 'undefined') {
            this.accountList = cachedData;
            this.loadingAccounts = false;
            return;
        }

        // console.log('loadAccounts continue!');
        const max = 10;
        let totalAccounts = 0;
        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)) {
                    let accountId = account[i];
                    // grab account info for box:
                    (new Get).get(accountId, new Date(window.store.get('end'))).then((response) => {
                        let parent = response.data.data;

                        // get groups for account:
                        const params = {
                            page: 1,
                            start: new Date(window.store.get('start')),
                            end: new Date(window.store.get('end')),
                        };
                        (new Get).transactions(parent.id, params).then((response) => {
                            let groups = [];
                            for (let ii = 0; ii < response.data.data.length; ii++) {
                                if (ii >= max) {
                                    break;
                                }
                                let current = response.data.data[ii];
                                let group = {
                                    title: null === current.attributes.group_title ? '' : current.attributes.group_title,
                                    id: current.id,
                                    transactions: [],
                                };
                                for (let iii = 0; iii < current.attributes.transactions.length; iii++) {
                                    let currentTransaction = current.attributes.transactions[iii];
                                    //console.log(currentTransaction);
                                    const nativeAmountRaw = 'withdrawal' === currentTransaction.type ? parseFloat(currentTransaction.native_amount) * -1 : parseFloat(currentTransaction.native_amount);
                                    const amountRaw = 'withdrawal' === currentTransaction.type ? parseFloat(currentTransaction.amount) * -1 : parseFloat(currentTransaction.amount);
                                    group.transactions.push({
                                        description: currentTransaction.description,
                                        id: current.id,
                                        type: currentTransaction.type,
                                        amount_raw: amountRaw,
                                        amount: formatMoney(amountRaw, currentTransaction.currency_code),
                                        native_amount_raw: nativeAmountRaw,
                                        native_amount: formatMoney(nativeAmountRaw, currentTransaction.native_currency_code),
                                    });
                                }
                                groups.push(group);
                            }
                            // console.log(parent);
                            accounts.push({
                                name: parent.attributes.name,
                                order: parent.attributes.order,
                                id: parent.id,
                                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_currency_code),
                                groups: groups,
                            });
                            // console.log(parent.attributes);
                            count++;
                            if (count === totalAccounts) {
                                accounts.sort((a, b) => a.order - b.order); // b - a for reverse sort

                                this.accountList = accounts;
                                this.loadingAccounts = false;
                                window.store.set(accountCacheKey, accounts);
                            }
                        });
                    });
                }
            }
            //this.loadingAccounts = false;
        });
    },

    init() {
        // console.log('accounts init');
        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();
        });
        window.store.observe('end', () => {
            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();
        });
    },
});