Expand layout

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

@@ -22,129 +22,97 @@
 import {getVariable} from "../../store/get-variable.js";
 import {setVariable} from "../../store/set-variable.js";
 import Dashboard from "../../api/v2/chart/account/dashboard.js";
-import formatLocal from "../../util/format.js";
-import {format} from "date-fns";
 import formatMoney from "../../util/format-money.js";
 import Get from "../../api/v1/accounts/get.js";
+import Chart from "chart.js/auto";
 
 // this is very ugly, but I have no better ideas at the moment to save the currency info
 // for each series.
-window.currencies = [];
+let currencies = [];
+let chart = null;
+let chartData = null;
 
 export default () => ({
     loading: false,
     loadingAccounts: false,
     accountList: [],
     autoConversion: false,
-    chart: null,
-    chartData: null,
     chartOptions: null,
     switchAutoConversion() {
         this.autoConversion = !this.autoConversion;
         setVariable('autoConversion', this.autoConversion);
-        this.loadChart();
     },
     getFreshData() {
         const dashboard = new Dashboard();
         dashboard.dashboard(new Date(window.store.get('start')), new Date(window.store.get('end')), null).then((response) => {
             this.chartData = response.data;
-            this.generateOptions(this.chartData);
-            this.drawChart();
+            this.drawChart(this.generateOptions(this.chartData));
         });
     },
     generateOptions(data) {
-        window.currencies = [];
+        currencies = [];
         let options = {
-            legend: {show: false},
-            chart: {
-                height: 400,
-                type: 'line'
-            },
-            series: [],
-            settings: [],
-            xaxis: {
-                categories: [],
-                labels: {
-                    formatter: function (value) {
-                        if (undefined === value) {
-                            return '';
-                        }
-                        const date = new Date(value);
-                        if (date instanceof Date && !isNaN(date)) {
-                            return formatLocal(date, 'PP');
-                        }
-                        console.error('Could not parse "' + value + '", return "".');
-                        return ':(';
-                    }
-                }
-            },
-            yaxis: {
-                labels: {
-                    formatter: function (value, index) {
-                        if (undefined === value) {
-                            return value;
-                        }
-                        if (undefined === index) {
-                            return value;
-                        }
-                        if (typeof index === 'object') {
-                            index = index.seriesIndex;
-                        }
-                        //console.log(index);
-                        let currencyCode = window.currencies[index] ?? 'EUR';
-                        return formatMoney(value, currencyCode);
-                    }
-                }
+            type: 'line',
+            data: {
+                labels: [],
+                datasets: []
             },
         };
-        // render data:
+
         for (let i = 0; i < data.length; i++) {
             if (data.hasOwnProperty(i)) {
                 let current = data[i];
-                let entry = [];
+                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) {
-                    window.currencies.push(current.native_code);
-                    collection = current.native_entries;
+                    currencies.push(current.native_code);
+                    collection = Object.values(current.native_entries);
                 }
                 if (!this.autoConversion) {
-                    window.currencies.push(current.currency_code);
-                    collection = current.entries;
+                    currencies.push(current.currency_code);
+                    collection = Object.values(current.entries);
                 }
+                dataset.data = collection;
 
                 for (const [ii, value] of Object.entries(collection)) {
-                    entry.push({x: format(new Date(ii), 'yyyy-MM-dd'), y: parseFloat(value)});
+                    //entry.push({x: format(new Date(ii), 'yyyy-MM-dd'), y: parseFloat(value)});
                 }
-                options.series.push({name: current.label, data: entry});
+                options.data.datasets.push(dataset);
+                //options.series.push({name: current.label, data: entry});
             }
         }
-        this.chartOptions = options;
+
+        return options;
     },
     loadChart() {
         if (true === this.loading) {
             return;
         }
         this.loading = true;
-        if (null === this.chartData) {
+        if (null === chartData) {
             this.getFreshData();
+            return;
         }
-        if (null !== this.chartData) {
-            this.generateOptions(this.chartData);
-            this.drawChart();
-        }
-
+        this.drawChart(this.generateOptions(chartData));
         this.loading = false;
+
     },
-    drawChart() {
-        if (null !== this.chart) {
+    drawChart(options) {
+        if (null !== chart) {
             // chart already in place, refresh:
-            this.chart.updateOptions(this.chartOptions);
-        }
-        if (null === this.chart) {
-            //this.chart = new ApexCharts(document.querySelector("#account-chart"), this.chartOptions);
-            //this.chart.render();
+            chart.data.datasets = options.data.datasets;
+            chart.update();
+            return;
         }
+        chart = new Chart(document.querySelector("#account-chart"), options);
     },
     loadAccounts() {
         if (true === this.loadingAccounts) {
@@ -211,13 +179,12 @@ export default () => ({
             this.autoConversion = values[1];
             // main dashboard chart:
             this.loadChart();
-            // this.loadAccounts();
+            this.loadAccounts();
         });
         window.store.observe('end', () => {
-            this.chartData = null;
-            this.expenseAccountChart = null;
+            chartData = null;
             // main dashboard chart:
-            // this.loadChart();
+            this.loadChart();
             this.loadAccounts();
         });
     },