added charts

flake.nix

@@ -75,7 +75,6 @@
           default = pkgs.mkShell {
             buildInputs = with pkgs; [ 
               air # live go app reloading
-              corepack # npm install for the web folder
               dart-sass
               go
               gopls

web/dashboard.templ

@@ -4,13 +4,14 @@ templ dashboard() {
     <title>Dashboard</title>
     <div class="container"> 
         <div class="row" style="margin-top: -20px">
-            <div class="c-crust col card mx-auto cr-all">
+            <div class="c-crust col card mx-auto cr-all d-flex-col">
-                <div class="c-s0 d-flex w-full cr-top">
+                <div class="c-s0 d-flex w-100 cr-top">
                     <i class="my-auto c-text py-3 ps-3 ms-1" data-feather="arrow-left"></i>
+                    <span class="mx-auto my-auto c-text">Income/Expenses</span>
                     <i class="my-auto c-text py-3 pe-3 me-1 ms-auto" data-feather="arrow-right"></i>
                 </div>
-                <div class="d-flex">
+                <div class="h-100">
-                    <div class="my-auto mx-2 w-75">
+                    <div class="w-50 h-100">
                         <canvas 
                         class="chartjs-chart"  
                         data-chart-endpoint="/web/dashboard/expenditure_chart"
@@ -24,7 +25,7 @@ templ dashboard() {
                 
             </div>
             <div class="c-crust col card mx-auto cr-all">
-                <div class="c-s0 d-flex w-full cr-top">
+                <div class="c-s0 d-flex w-100 cr-top">
                     <i class="my-auto c-text py-3 ps-3 ms-1" data-feather="arrow-left"></i>
                     <i class="my-auto c-text py-3 pe-3 me-1 ms-auto" data-feather="arrow-right"></i>
                 </div>

web/package-lock.json

@@ -1,28 +0,0 @@
-{
-  "name": "web",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {
-    "": {
-      "dependencies": {
-        "chart.js": "^4.4.1"
-      }
-    },
-    "node_modules/@kurkle/color": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz",
-      "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw=="
-    },
-    "node_modules/chart.js": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.1.tgz",
-      "integrity": "sha512-C74QN1bxwV1v2PEujhmKjOZ7iUM4w6BWs23Md/6aOZZSlwMzeCIDGuZay++rBgChYru7/+QFeoQW0fQoP534Dg==",
-      "dependencies": {
-        "@kurkle/color": "^0.3.0"
-      },
-      "engines": {
-        "pnpm": ">=7"
-      }
-    }
-  }
-}

web/package.json

@@ -1,5 +0,0 @@
-{
-  "dependencies": {
-    "chart.js": "^4.4.1"
-  }
-}

web/router.go

@@ -30,6 +30,7 @@ func WebRouter() http.Handler {
     r.Get("/web/transaction_table_rows", getTransactions)
     r.Get("/web/dashboard/expenditure_chart", getExpenditureChart)
     r.Get("/hello", getHello)
+    r.Handle("/chart.js/*", http.StripPrefix("/chart.js/", http.FileServer(http.Dir("web/node_modules/chart.js/"))))
     r.Handle("/static/*", http.StripPrefix("/static/", http.FileServer(http.Dir("web/static/"))))
 	return r
 }

web/sass/utility-classes.scss

@@ -14,6 +14,8 @@ $directions: (
     "b": "bottom"
 );
 
+
+
 @each $size, $val in $sizes {
     .m-#{$size} {
         margin: $val;
@@ -53,18 +55,36 @@ $directions: (
     margin-right: auto;
 }
 
-.w-full {
+$w_h_sizes: (
-    width: 100%;
+  '25': 25%,
+  '50': 50%,
+  '75': 75%,
+  '80': 80%,
+  '100': 100%,
+  'auto': auto,
+);
+
+// Loop through the sizes and generate classes
+@each $name, $value in $w_h_sizes {
+  .h-#{$name} {
+    height: $value;
   }
-.w-75 {
+
-    width: 75%;
+  .w-#{$name} {
+    width: $value;
   }
-.w-50 {
-    width: 50%;
 }
+
 .d-flex {
     display: flex;
 }
+.d-flex-col {
+    display: flex;
+    flex-direction: column;
+}
+.d-block {
+    display: block;
+}
 .cr-all {
     border-radius: $border-radius;
 }

web/static/chart_functions.js

@@ -1,5 +1,8 @@
 
 function fill_charts() {
+    const style = getComputedStyle(document.body);
+    const red_color = style.getPropertyValue("--pf-red");
+    const green_color = style.getPropertyValue("--pf-green");
     document.querySelectorAll(".chartjs-chart").forEach(function (el) {
         var url = el.dataset.chartEndpoint;
         var type = el.dataset.chartType;
@@ -17,18 +20,29 @@ function fill_charts() {
                 data: {
                     labels: jsonData.labels,
                     datasets: [{
-                        data: jsonData.data
+                        data: jsonData.data,
+                        backgroundColor: [
+                            green_color,
+                            red_color,
+                        ]
                     }]
                 },
                 options: {
+                    maintainAspectRatio: false,
+                    responsive: true,
                     scales: {
                         y: {
                             beginAtZero: true
                         }      
+                    },
+                    plugins: {
+                        legend: {
+                            display: false
+                        }
                     }
                 }
             };
-            new Chart(el, config)();
+            new Chart(el, config);
         }).catch(error => {
             console.error("Unable to set up chart: ", error)
         });

web/templates/index.html

@@ -58,6 +58,7 @@
 
         </div>
     </div>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js" integrity="sha512-CQBWl4fJHWbryGE+Pc7UAxWMUMNMWzWxF4SQo9CgkJIN1kx6djDQZjh3Y8SZ1d+6I+1zze6Z7kHXO7q3UyZAWw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
         <script type="module" src="/static/index.js"></script>
         <script type="module">
             import {register_handlers, fill_charts, trigger_table_animation} from "/static/index.js";
@@ -65,7 +66,6 @@
             feather.replace();
             htmx.onLoad(function (element) {
                 if (element.localName === "tr") {
-                    console.log(element);
                     trigger_table_animation();
                 } else {
                     fill_charts();