Analysis sidebar now shows relevant information for selected category

budgit.client/package-lock.json

@@ -13,9 +13,11 @@
         "@popperjs/core": "^2.10.2",
         "axios": "^0.23.0",
         "bootstrap": "^5.1.3",
+        "chart.js": "^3.8.0",
         "socket.io-client": "^4.1.2",
         "sweetalert2": "^11.1.9",
         "vue": "^3.2.11",
+        "vue-chartjs": "^4.1.1",
         "vue-router": "^4.0.8"
       },
       "devDependencies": {
@@ -674,6 +676,11 @@
         }
       ]
     },
+    "node_modules/chart.js": {
+      "version": "3.8.0",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.8.0.tgz",
+      "integrity": "sha512-cr8xhrXjLIXVLOBZPkBZVF6NDeiVIrPLHcMhnON7UufudL+CNeRrD+wpYanswlm8NpudMdrt3CHoLMQMxJhHRg=="
+    },
     "node_modules/chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -3493,6 +3500,15 @@
         "@vue/shared": "3.2.20"
       }
     },
+    "node_modules/vue-chartjs": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/vue-chartjs/-/vue-chartjs-4.1.1.tgz",
+      "integrity": "sha512-rKIQ3jPrjhwxjKdNJppnYxRuBSrx4QeM3nNHsfIxEqjX6QS4Jq6e6vnZBxh2MDpURDC2uvuI2N0eIt1cWXbBVA==",
+      "peerDependencies": {
+        "chart.js": "^3.7.0",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      }
+    },
     "node_modules/vue-eslint-parser": {
       "version": "7.11.0",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.11.0.tgz",
@@ -4165,6 +4181,11 @@
       "integrity": "sha512-ybhCrjNtkFji1/Wto6SSJKkWk6kZgVQsDq5QI83SafsF6FXv2JB4df9eEdH6g8sdGgqTXrFLjAxqBGgYoU3azQ==",
       "dev": true
     },
+    "chart.js": {
+      "version": "3.8.0",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.8.0.tgz",
+      "integrity": "sha512-cr8xhrXjLIXVLOBZPkBZVF6NDeiVIrPLHcMhnON7UufudL+CNeRrD+wpYanswlm8NpudMdrt3CHoLMQMxJhHRg=="
+    },
     "chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -6144,6 +6165,12 @@
         "@vue/shared": "3.2.20"
       }
     },
+    "vue-chartjs": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/vue-chartjs/-/vue-chartjs-4.1.1.tgz",
+      "integrity": "sha512-rKIQ3jPrjhwxjKdNJppnYxRuBSrx4QeM3nNHsfIxEqjX6QS4Jq6e6vnZBxh2MDpURDC2uvuI2N0eIt1cWXbBVA==",
+      "requires": {}
+    },
     "vue-eslint-parser": {
       "version": "7.11.0",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.11.0.tgz",

budgit.client/package.json

@@ -12,9 +12,11 @@
     "@popperjs/core": "^2.10.2",
     "axios": "^0.23.0",
     "bootstrap": "^5.1.3",
+    "chart.js": "^3.8.0",
     "socket.io-client": "^4.1.2",
     "sweetalert2": "^11.1.9",
     "vue": "^3.2.11",
+    "vue-chartjs": "^4.1.1",
     "vue-router": "^4.0.8"
   },
   "devDependencies": {

budgit.client/src/components/Analysis.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="component">
+  <div class="component p-2">
-    Analysis Container
+    <h3 :class="`text-3xl ${totalSpent() > category.budgeted ? 'text-red-400' : 'text-green-300'}`">{{category.name}}</h3>
-    <p>{{category.name}}</p>
+    <h4 class="text-2xl">Spent: ${{totalSpent()}}</h4>
-
+    <h4 class="text-2xl">Budgeted: ${{category.budgeted}}</h4>
   </div>
 </template>
 
@@ -11,9 +11,20 @@
 import { computed, reactive, onMounted, ref, watchEffect } from "vue";
 import { AppState } from '../AppState'
 
+
 export default {
   setup(){
     return {
+      totalSpent() {
+        let total = 0;
+        if (!this.category.transactions) {
+          return 0
+        }
+        for (let t = 0; t < this.category.transactions.length; t++) {
+          total += this.category.transactions[t].amount // TODO count inflow and outflow seperately
+        }
+        return total
+      },
       category: computed(() => AppState.activeCategory)
     }
   }

budgit.client/src/components/Category.vue

@@ -30,7 +30,7 @@ export default {
           return 0
         }
         for (let t = 0; t < props.category.transactions.length; t++) {
-          total += props.category.transactions[t].amount
+          total += props.category.transactions[t].amount // TODO count inflow and outflow seperately
         }
         return total
       },

budgit.client/src/pages/OverviewPage.vue

@@ -13,7 +13,7 @@
         <Analysis />
       </div>
       <div class="md:w-8/12 md:mr-4">
-        <div class="flex justify-between bg-stone-700 text-green-300 hover:bg-green-200 hover:text-stone-900 mb-2 p-2 pr-0">
+        <div class="flex justify-between bg-stone-700 text-green-300 hover:bg-green-200 hover:text-stone-900 mb-2 p-2 pr-0" @click="viewOverview()">
           <h3 class="text-2xl font-semibold">Category</h3>
           <div class="flex">
             <p class="w-16 font-semibold px-2 border-l-2 border-stone-900">Spent</p>
@@ -39,7 +39,10 @@ export default {
     onMounted(async () => {
       try {
         // console.log(AppState.categories)
+        // console.log('onMounted call')
         await categoriesService.getAll()
+        // AppState.activeCategory = 
+        await categoriesService.getOverview()
         // console.log(AppState.categories)
       } catch (error) {
         logger.log(error)
@@ -54,6 +57,9 @@ export default {
         } catch (error) {
           console.log(error)
         }
+      },
+      async viewOverview() {
+        await categoriesService.getOverview()
       }
     }
   }

budgit.client/src/services/CategoriesService.js

@@ -1,6 +1,7 @@
 import { AppState } from "../AppState"
 import { logger } from "../utils/Logger"
 import { api } from "./AxiosService"
+import { transactionsService } from "./TransactionsService"
 
 
 class CategoriesService {
@@ -14,6 +15,21 @@ class CategoriesService {
     const res = await api.post('api/categories', {name: newCatName})
     AppState.categories.push(res.data)
   }
+
+  async getOverview() {
+    // console.log('categories service call')
+    await transactionsService.getAll()
+    let overview = {
+      name: 'Overview',
+      budgeted: 0,
+      targetAmt: 0, // this should eventually do something
+      transactions: AppState.transactions
+    }
+    for (const c in AppState.categories) {
+      overview.budgeted += AppState.categories[c].budgeted
+    }
+    AppState.activeCategory = overview
+  }
 }
 
 export const categoriesService = new CategoriesService()