Add stuff

resources/assets/v2/api/v2/chart/budget/dashboard.js

@@ -0,0 +1,30 @@
+/*
+ * overview.js
+ * Copyright (c) 2022 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 {api} from "../../../../boot/axios";
+import {format} from "date-fns";
+
+export default class Dashboard {
+    dashboard(start, end) {
+        let startStr = format(start, 'y-MM-dd');
+        let endStr = format(end, 'y-MM-dd');
+        return api.get('/api/v2/chart/budget/dashboard', {params: {start: startStr, end: endStr}});
+    }
+}

resources/assets/v2/dashboard.js

@@ -22,8 +22,9 @@ import './bootstrap.js';
 import dates from './pages/shared/dates.js';
 import boxes from './pages/dashboard/boxes.js';
 import accounts from './pages/dashboard/accounts.js';
+import budgets from './pages/dashboard/budgets.js';
 
-const comps = {dates, boxes, accounts};
+const comps = {dates, boxes, accounts, budgets};
 
 function loadPage(comps) {
     Object.keys(comps).forEach(comp => {

resources/assets/v2/pages/dashboard/accounts.js

@@ -57,7 +57,8 @@ export default () => ({
                 legend: {show: false},
                 chart: {
                     height: 400,
-                    toolbar: {tools: {zoom: false, download: false, pan: false}}, type: 'line'
+                    toolbar: {tools: {zoom: false, download: false, pan: false}},
+                    type: 'line'
                 }, series: [],
                 settings: [],
                 xaxis: {
@@ -137,16 +138,11 @@ export default () => ({
                     let accountId = values[0][i];
                     // grab account info for box:
                     (new Get).get(accountId, new Date(window.store.get('end'))).then((response) => {
-                        let current = response.data.data;
+                        let parent = response.data.data;
-                        this.accountList[i] = {
-                            name: current.attributes.name,
-                            id: current.id,
-                            balance: formatMoney(current.attributes.current_balance, current.attributes.currency_code),
-                            groups: [],
-                        };
 
                         // get groups for account:
-                        (new Get).transactions(current.id, 1).then((response) => {
+                        (new Get).transactions(parent.id, 1).then((response) => {
+                            let groups = [];
                             for (let ii = 0; ii < response.data.data.length; ii++) {
                                 if (ii >= max) {
                                     break;
@@ -165,17 +161,19 @@ export default () => ({
                                         amount: formatMoney(currentTransaction.amount, currentTransaction.currency_code),
                                     });
                                 }
-                                this.accountList[i].groups.push(group);
+                                groups.push(group);
                             }
-                            // will become false after the FIRST account is loaded.
+                            this.accountList[i] = {
-                            this.loadingAccounts = false;
+                                name: parent.attributes.name,
+                                id: parent.id,
+                                balance: formatMoney(parent.attributes.current_balance, parent.attributes.currency_code),
+                                groups: groups,
+                            };
                         });
-                    }).then(() => {
-                        // console.log(this.accountList);
                     });
                 }
             }
-
+            this.loadingAccounts = false;
         });
     },
 

resources/assets/v2/pages/dashboard/budgets.js

@@ -0,0 +1,148 @@
+/*
+ * budgets.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 Dashboard from "../../api/v2/chart/budget/dashboard.js";
+import ApexCharts from "apexcharts";
+
+export default () => ({
+    loadingChart: false,
+    chart: null,
+    autoConversion: false,
+    loadChart() {
+        if (this.loadingChart) {
+            return;
+        }
+        // load chart data
+        this.loadingChart = true;
+        const dashboard = new Dashboard();
+        dashboard.dashboard(new Date(window.store.get('start')), new Date(window.store.get('end')), null).then((response) => {
+            console.log(response.data);
+
+            let options = {
+                legend: {show: false},
+                series: [{
+                    name: 'Spent',
+                    data: []
+                }, {
+                    name: 'Left',
+                    data: []
+                }, {
+                    name: 'Overspent',
+                    data: []
+                }],
+                chart: {
+                    type: 'bar',
+                    height: 400,
+                    stacked: true,
+                    toolbar: {tools: {zoom: false, download: false, pan: false}},
+                    zoom: {
+                        enabled: true
+                    }
+                },
+                responsive: [{
+                    breakpoint: 480,
+                    options: {
+                        legend: {
+                            position: 'bottom',
+                            offsetX: -10,
+                            offsetY: 0
+                        }
+                    }
+                }],
+                plotOptions: {
+                    bar: {
+                        horizontal: false,
+                        borderRadius: 10,
+                        dataLabels: {
+                            total: {
+                                enabled: true,
+                                style: {
+                                    fontSize: '13px',
+                                    fontWeight: 900
+                                }
+                            }
+                        }
+                    },
+                },
+                xaxis: {
+                    categories: []
+                },
+                fill: {
+                    opacity: 0.8
+                }
+            };
+
+
+            for (const i in response.data) {
+                if (response.data.hasOwnProperty(i)) {
+                    let current = response.data[i];
+                    // convert to EUR yes no?
+                    let label = current.label + ' (' + current.currency_code + ')';
+                    options.xaxis.categories.push(label);
+                    console.log(current);
+                    if (this.autoConversion) {
+                        // series 0: spent
+                        options.series[0].data.push(parseFloat(current.native_entries.spent) * -1);
+                        // series 1: left
+                        options.series[1].data.push(parseFloat(current.native_entries.left));
+                        // series 2: overspent
+                        options.series[2].data.push(parseFloat(current.native_entries.overspent));
+                    }
+                    if (!this.autoConversion) {
+                        // series 0: spent
+                        options.series[0].data.push(parseFloat(current.entries.spent) * -1);
+                        // series 1: left
+                        options.series[1].data.push(parseFloat(current.entries.left));
+                        // series 2: overspent
+                        options.series[2].data.push(parseFloat(current.entries.overspent));
+                    }
+
+                }
+            }
+
+
+            if (null !== this.chart) {
+                // chart already in place, refresh:
+                this.chart.updateOptions(options);
+            }
+            if (null === this.chart) {
+                this.chart = new ApexCharts(document.querySelector("#budget-chart"), options);
+                this.chart.render();
+            }
+            this.loadingChart = false;
+        });
+
+
+    },
+    init() {
+        console.log('init budgets');
+        Promise.all([getVariable('autoConversion', false),]).then((values) => {
+            this.autoConversion = values[0];
+            console.log('here we are, budgets.');
+            this.loadChart();
+        });
+        window.store.observe('end', () => {
+            this.loadChart();
+        });
+    },
+
+});
+
+

resources/views/v2/index.blade.php

@@ -9,8 +9,8 @@
         <div class="container-fluid">
             @include('partials.dashboard.boxes')
             <!-- row with account data -->
-            <div x-data="accounts">
+            <div>
-                <div class="row">
+                <div class="row" x-data="accounts">
                     <div class="col-xl-8 col-lg-12 col-sm-12 col-xs-12">
                         <div class="row mb-2">
                             <div class="col">
@@ -44,7 +44,7 @@
 
                             </div>
                         </div>
-                        <div class="row mb-2">
+                        <div class="row mb-2" x-data="budgets">
                             <div class="col">
                                 <div class="card">
                                     <div class="card-header">
@@ -78,7 +78,7 @@
                     <div class="col-xl-4 col-lg-12 col-sm-12 col-xs-12">
                         <div class="row">
                             <template x-for="account in accountList">
-                                <div class="col-12 mb-2">
+                                <div class="col-12 mb-2" x-model="account">
                                     <div class="card">
                                         <div class="card-header">
                                             <h3 class="card-title">
@@ -140,6 +140,8 @@
 
                 </div>
             </div>
+            <!-- row with budget chart -->
+
         </div>
 
     </div>