WIP

BudgetApp/wwwroot/js/chart-interop.js

@@ -2,7 +2,7 @@ window.chartInterop = {
     chartInstances: {},
     transactionLabels: {},
 
-    createOrUpdateChart: function (canvasId, labels, datasets, dayTransactionLabels, highlightIndex, currencySymbol) {
+    createOrUpdateChart: function (canvasId, labels, datasets, dayTransactionLabels, highlightIndex, salaryDayIndices, currencySymbol) {
         const canvas = document.getElementById(canvasId);
         if (!canvas) return;
 
@@ -88,6 +88,32 @@ window.chartInterop = {
         };
 
         const storedLabels = this.transactionLabels[canvasId];
+        const salaryIndices = salaryDayIndices || [];
+
+        // Salary payday highlight plugin — subtle green band + 💰 marker
+        const salaryPlugin = {
+            id: 'salaryDays',
+            afterDraw: (chart) => {
+                const indices = chart.config._salaryDayIndices;
+                if (!indices || indices.length === 0) return;
+                const meta = chart.getDatasetMeta(0);
+                if (!meta) return;
+                const ctx = chart.ctx;
+                const top = chart.chartArea.top;
+                const bottom = chart.chartArea.bottom;
+                indices.forEach(idx => {
+                    if (!meta.data[idx]) return;
+                    const x = meta.data[idx].x;
+                    ctx.save();
+                    ctx.fillStyle = 'rgba(25, 135, 84, 0.10)';
+                    ctx.fillRect(x - 6, top, 12, bottom - top);
+                    ctx.font = '11px sans-serif';
+                    ctx.textAlign = 'center';
+                    ctx.fillText('💰', x, top + 14);
+                    ctx.restore();
+                });
+            }
+        };
 
         const chartInstance = new Chart(canvas, {
             type: 'line',
@@ -140,11 +166,12 @@ window.chartInterop = {
                     }
                 }
             },
-            plugins: [highlightPlugin, crosshairPlugin]
+            plugins: [highlightPlugin, crosshairPlugin, salaryPlugin]
         });
 
         chartInstance.config._highlightIndex = (highlightIndex != null && highlightIndex >= 0) ? highlightIndex : null;
-        if (highlightIndex != null && highlightIndex >= 0) {
+        chartInstance.config._salaryDayIndices = salaryIndices;
+        if ((highlightIndex != null && highlightIndex >= 0) || salaryIndices.length > 0) {
             chartInstance.update();
         }