WIP

BudgetApp/wwwroot/js/chart-interop.js

@@ -164,6 +164,112 @@ window.chartInterop = {
             delete this.chartInstances[canvasId];
             delete this.transactionLabels[canvasId];
         }
+    },
+
+    createOrUpdatePieChart: function (canvasId, labels, data, colors, currencySymbol, chartType) {
+        const canvas = document.getElementById(canvasId);
+        if (!canvas) return;
+
+        if (this.chartInstances[canvasId]) {
+            this.chartInstances[canvasId].destroy();
+        }
+
+        const sym = currencySymbol || '£';
+
+        this.chartInstances[canvasId] = new Chart(canvas, {
+            type: chartType || 'doughnut',
+            data: {
+                labels: labels,
+                datasets: [{
+                    data: data,
+                    backgroundColor: colors,
+                    borderColor: '#fff',
+                    borderWidth: 2
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: {
+                    legend: {
+                        position: 'right',
+                        labels: {
+                            padding: 16,
+                            usePointStyle: true,
+                            pointStyle: 'circle'
+                        }
+                    },
+                    tooltip: {
+                        callbacks: {
+                            label: function (context) {
+                                const value = context.parsed;
+                                const total = context.dataset.data.reduce((a, b) => a + b, 0);
+                                const pct = total > 0 ? ((value / total) * 100).toFixed(1) : 0;
+                                return context.label + ': ' + sym + value.toFixed(2) + ' (' + pct + '%)';
+                            }
+                        }
+                    }
+                }
+            }
+        });
+    },
+
+    createOrUpdateBarChart: function (canvasId, labels, incomeData, expenseData, currencySymbol) {
+        const canvas = document.getElementById(canvasId);
+        if (!canvas) return;
+
+        if (this.chartInstances[canvasId]) {
+            this.chartInstances[canvasId].destroy();
+        }
+
+        const sym = currencySymbol || '£';
+
+        this.chartInstances[canvasId] = new Chart(canvas, {
+            type: 'bar',
+            data: {
+                labels: labels,
+                datasets: [
+                    {
+                        label: 'Income',
+                        data: incomeData,
+                        backgroundColor: 'rgba(40, 167, 69, 0.7)',
+                        borderColor: 'rgba(40, 167, 69, 1)',
+                        borderWidth: 1
+                    },
+                    {
+                        label: 'Expenses',
+                        data: expenseData,
+                        backgroundColor: 'rgba(220, 53, 69, 0.7)',
+                        borderColor: 'rgba(220, 53, 69, 1)',
+                        borderWidth: 1
+                    }
+                ]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: {
+                    legend: { position: 'top' },
+                    tooltip: {
+                        callbacks: {
+                            label: function (context) {
+                                return context.dataset.label + ': ' + sym + context.parsed.y.toFixed(2);
+                            }
+                        }
+                    }
+                },
+                scales: {
+                    y: {
+                        beginAtZero: true,
+                        ticks: {
+                            callback: function (value) {
+                                return sym + value.toFixed(0);
+                            }
+                        }
+                    }
+                }
+            }
+        });
     }
 };