Code for front page

frontend/src/components/charts/DataConverter.vue

@@ -0,0 +1,60 @@
+<template>
+
+</template>
+
+<script>
+    export default {
+        name: "DataConverter",
+        data() {
+            return {
+                dataSet: null,
+                newDataSet: null,
+            }
+        },
+        methods: {
+            convertChart(dataSet) {
+                this.dataSet = dataSet;
+                this.newDataSet = {
+                    count: 0,
+                    labels: [],
+                    datasets: []
+                }
+                this.getLabels();
+                this.getDataSets();
+                this.newDataSet.count = this.newDataSet.datasets.length;
+                return this.newDataSet;
+            },
+            getLabels() {
+                let firstSet = this.dataSet[0];
+                for (const entryLabel in firstSet.entries) {
+                    if (firstSet.entries.hasOwnProperty(entryLabel)) {
+                        this.newDataSet.labels.push(entryLabel);
+                    }
+                }
+            },
+            getDataSets() {
+                for (const setKey in this.dataSet) {
+                    if (this.dataSet.hasOwnProperty(setKey)) {
+                        let newSet = {};
+                        let oldSet = this.dataSet[setKey];
+                        newSet.label = oldSet.label;
+                        newSet.type = oldSet.type;
+                        newSet.currency_symbol = oldSet.currency_symbol;
+                        newSet.yAxisID = oldSet.yAxisID;
+                        newSet.data = [];
+                        for (const entryLabel in oldSet.entries) {
+                            if (oldSet.entries.hasOwnProperty(entryLabel)) {
+                                newSet.data.push(oldSet.entries[entryLabel]);
+                            }
+                        }
+                        this.newDataSet.datasets.push(newSet);
+                    }
+                }
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

frontend/src/components/dashboard/MainAccount.vue

@@ -5,7 +5,7 @@
         </div>
         <div class="card-body">
             <div class="main-account-chart">
-                <main-account-chart :styles="myStyles" :options="datacollection.options" :chart-data="datacollection"></main-account-chart>
+                <main-account-chart v-if="loaded" :styles="myStyles" :options="chartOptions" :chart-data="chartData"></main-account-chart>
             </div>
         </div>
         <div class="card-footer">
@@ -16,6 +16,7 @@
 
 <script>
     import MainAccountChart from "./MainAccountChart";
+    import DataConverter from "../charts/DataConverter";
 
     export default {
         components: {
@@ -23,36 +24,27 @@
         },
         data() {
             return {
-                datacollection: null
+                chartData: null,
+                loaded: false,
+                chartOptions: null,
             }
         },
         mounted() {
-            this.fillData()
+            this.chartOptions = {
+                responsive: true,
+                maintainAspectRatio: false
+            };
+
+            this.loaded = false;
+            axios.get('./api/v1/chart/account/overview?start=' + window.sessionStart + '&end=' + window.sessionEnd)
+                .then(response => {
+                    this.chartData = DataConverter.methods.convertChart(response.data);
+                    console.log(this.chartData);
+                    this.loaded = true
+                });
         },
         methods: {
-            fillData() {
-                this.datacollection = {
-                    options: {
-                        responsive: true,
-                        maintainAspectRatio: false
-                    },
-                    labels: [this.getRandomInt(), this.getRandomInt()],
-                    datasets: [
-                        {
-                            label: 'Data One',
-                            backgroundColor: '#f87979',
-                            data: [this.getRandomInt(), this.getRandomInt()]
-                        }, {
-                            label: 'Data One',
-                            backgroundColor: '#f87979',
-                            data: [this.getRandomInt(), this.getRandomInt()]
-                        }
-                    ]
-                }
-            },
-            getRandomInt() {
-                return Math.floor(Math.random() * (50 - 5 + 1)) + 5
-            }
+
         },
         computed: {
             myStyles() {