Frontend cleanup

Author: NLxAROSA

src/main/resources/static/assets/js/transactions.js

@@ -17,7 +17,7 @@ var transactionsOverview = new Vue({
         decimalsInFloat: 2
       },
       chart: {
-        height: 300,
+        height: 200,
         type: "area",
       },
       dataLabels: {
@@ -34,7 +34,7 @@ var transactionsOverview = new Vue({
     pieOptions : {
       series: [],
       chart: {
-        height: 300,
+        height: 200,
         type: 'donut',
         options: {
           chart: {
@@ -67,7 +67,7 @@ var transactionsOverview = new Vue({
     this.areaChart.render()
     this.pieChart = new ApexCharts(document.querySelector("#chart"), this.pieOptions);
     this.pieChart.render()
-    this.getTransactions()
+    this.getInitialData()
     this.connect()
   },
   watch: {
@@ -81,7 +81,7 @@ var transactionsOverview = new Vue({
     this.debouncedGetAnswer = _.debounce(this.getAnswer, 100)
   },
   methods: {
-    getTransactions: function () {
+    getInitialData: function () {
       var transactionsUrl = '/api/transactions'
       var vm = this
       axios.get(transactionsUrl)
@@ -93,6 +93,34 @@ var transactionsOverview = new Vue({
         .catch(function (error) {
           console.log('Error! Could not reach the API. ' + error)
         })
+
+        axios.get("/api/balance")
+        .then(function (response) {
+          vm.areaChart.updateSeries([{
+            name: 'value',
+            data: response.data
+          }])
+        })
+        .catch(function (error) {
+          console.log('Error! Could not reach the API. ' + error)
+        })
+
+      axios.get("/api/biggestspenders")
+        .then(function (response) {
+
+          vm.pieOptions.series = response.data.series
+          vm.pieOptions.labels = response.data.labels
+
+          console.log('pieooptons', vm.pieOptions)
+
+          vm.pieChart.destroy()
+          vm.pieChart = new ApexCharts(document.querySelector("#chart"), vm.pieOptions);
+          vm.pieChart.render()
+
+        })
+        .catch(function (error) {
+          console.log('Error! Could not reach the API. ' + error)
+        })
     },
     connect: function () {
       var vm = this

src/main/resources/static/balanceovertime.html

@@ -40,14 +40,7 @@
                         <li class="sidebar-item  ">
                             <a href="index.html" class='sidebar-link'>
                                 <i class="bi bi-grid-fill"></i>
-                                <span>Transaction overview</span>
-                            </a>
-                        </li>
-
-                        <li class="sidebar-item  ">
-                            <a href="index.html" class='sidebar-link'>
-                                <i class="bi bi-bar-chart-fill"></i>
-                                <span>Investment overview</span>
+                                <span>Account overview</span>
                             </a>
                         </li>
                     </ul>
@@ -93,16 +86,12 @@ <h4 class="card-title">Account holder: L.S. Rosenquist, Nieuwegein, The Netherla
                                 </div>
                             </div>
                             <div class="row">
-                                <div class="col-md-6 col-12">
-                                    Current balance: {{ balance }}
+                                <div class="col-md-6 col-12">Current balance:
+                                    <transition name="balance"><label
+                                        :key="balance">{{ balance }}</label></transition>
                                 </div>
                             </div>
                         </div>
-                    </div>
-                    <div class="card">
-                        <div class="card-header">
-                            <h4 class="card-title">How is my money doing?</h4>
-                        </div>
                         <div class="card-content">
                             <div class="card-body">
                                 <div class="row">
@@ -118,7 +107,7 @@ <h4 class="card-title">How is my money doing?</h4>
                             </div>
                         </div>
                     </div>
-
+                    
                 </section>
                 <section>
                     <div class="card">