added historical to dashboard chart

types/types.go

@@ -28,5 +28,9 @@ type HumanLegibleTransaction struct {
 
 type ChartjsData struct {
     Labels []string `json:"labels"`
+    DataSets []DataSet `json:"datasets"`
+}
+
+type DataSet struct {
     Data   []int    `json:"data"`
 }

web/data_endpoints.go

@@ -39,9 +39,14 @@ func getTransactions(w http.ResponseWriter, req *http.Request) {
 }
 
 func getExpenditureChart(w http.ResponseWriter, req *http.Request) {
-    data_package := types.ChartjsData {
+    data_package := struct{
+        Labels []string `json:"labels"`
+        IncomeDataset []int `json:"income_data"`
+        ExpensesDataset []int `json:"expenses_data"`
+    } {
         Labels: []string{"Income", "Expenses"},
-        Data: []int{500, 200},
+        IncomeDataset: []int {300, 250},
+        ExpensesDataset: []int {200, 100},
     };
 
     json_data, err := json.Marshal(data_package);

web/static/chart_functions.js

@@ -1,3 +1,31 @@
+function createDiagonalPattern(color = '#ffffff') {
+    // create a 10x10 px canvas for the pattern's base shape
+    let shape = document.createElement('canvas')
+    shape.width = 10
+    shape.height = 10
+
+    // get the context for drawing
+    let c = shape.getContext('2d')
+
+    c.fillStyle = color + "60";
+    c.fillRect(0, 0, shape.width, shape.height);
+
+    // draw 1st line of the shape 
+    c.strokeStyle = color;
+    c.lineWidth = 3;
+    c.lineCap = "round";
+    c.beginPath()
+    c.moveTo(2, 0)
+    c.lineTo(10, 8)
+    c.stroke()
+    // draw 2nd line of the shape 
+    c.beginPath()
+    c.moveTo(0, 8)
+    c.lineTo(2, 10)
+    c.stroke()
+    // create the pattern from the shape
+    return c.createPattern(shape, 'repeat')
+}
 
 function fill_charts() {
     const style = getComputedStyle(document.body);
@@ -20,10 +48,25 @@ function fill_charts() {
                 data: {
                     labels: jsonData.labels,
                     datasets: [{
-                        data: jsonData.data,
+                        label: "Historical",
+                        data: [
+                            jsonData.income_data[0],
+                            jsonData.expenses_data[0]
+                        ],
+                        backgroundColor: [
+                            createDiagonalPattern(green_color),
+                            createDiagonalPattern(red_color)
+                        ]
+                    },
+                    {
+                        label: "Last 30 Days",
+                        data: [
+                            jsonData.income_data[1],
+                            jsonData.expenses_data[1]
+                        ],
                         backgroundColor: [
                             green_color,
-                            red_color,
+                            red_color
                         ]
                     }]
                 },
@@ -37,7 +80,24 @@ function fill_charts() {
                     },
                     plugins: {
                         legend: {
-                            display: false
+                            display: true,
+                            labels: {
+                                boxWidth: 20,
+                                position: "bottom",
+                                generateLabels: function(chart) {
+                                    var labels = Chart.defaults.plugins.legend.labels.generateLabels(chart);
+                                    for (var key in labels) {
+                                        if (labels[key].text == "Historical") {
+                                            labels[key].fillStyle  = createDiagonalPattern("#888888");
+                                        } else {
+                                            labels[key].fillStyle = "#88888840"
+                                        }
+
+                                      labels[key].strokeStyle = "rgba(33, 44, 22, 0.7)"; 
+                                    }
+                                    return labels;
+                                  }
+                            }
                         }
                     }
                 }