improve

src/components/charts.ts

@@ -230,47 +230,49 @@ const acwrAxisColorPlugin = {
 // Register the axis color plugin
 Chart.register(acwrAxisColorPlugin);
 
-// Plugin to draw Monday vertical lines
-const mondayGridPlugin = {
-    id: 'mondayGrid',
-    beforeDatasetsDraw(chart: Chart) {
-        const ctx = chart.ctx;
-        const chartArea = chart.chartArea;
-        const xScale = chart.scales['x'];
-
-        if (!xScale || !chartArea) return;
-
-        ctx.save();
-        ctx.strokeStyle = 'rgba(148, 163, 184, 0.3)';
-        ctx.lineWidth = 1;
-
-        // Draw a line for each Monday in the data
-        const labels = chart.data.labels || [];
-        labels.forEach((label, index) => {
-            if (typeof label === 'string') {
-                const [year, month, day] = label.split('-').map(Number);
-                const date = new Date(year, month - 1, day);
-                const dayOfWeek = date.getDay();
-
-                // If it's Monday, draw a vertical line
-                if (dayOfWeek === 1) {
-                    const x = xScale.getPixelForValue(index);
-                    if (x >= chartArea.left && x <= chartArea.right) {
-                        ctx.beginPath();
-                        ctx.moveTo(x, chartArea.top);
-                        ctx.lineTo(x, chartArea.bottom);
-                        ctx.stroke();
+// Plugin to draw one vertical lines per week
+function weekGridPlugin(dayOfWeek = 1) { // 0:sunday, 1:monday, ... , 6:saturday
+    return {
+        id: 'weekGrid',
+        beforeDatasetsDraw(chart: Chart) {
+            const ctx = chart.ctx;
+            const chartArea = chart.chartArea;
+            const xScale = chart.scales['x'];
+
+            if (!xScale || !chartArea) return;
+
+            ctx.save();
+            ctx.strokeStyle = 'rgba(148, 163, 184, 0.3)';
+            ctx.lineWidth = 1;
+
+            // Draw a line for each matching day in the data
+            const labels = chart.data.labels || [];
+            labels.forEach((label, index) => {
+                if (typeof label === 'string') {
+                    const [year, month, day] = label.split('-').map(Number);
+                    const date = new Date(year, month - 1, day);
+
+                    // If it's Monday, draw a vertical line
+                    if (date.getDay() === dayOfWeek) {
+                        const x = xScale.getPixelForValue(index);
+                        if (x >= chartArea.left && x <= chartArea.right) {
+                            ctx.beginPath();
+                            ctx.moveTo(x, chartArea.top);
+                            ctx.lineTo(x, chartArea.bottom);
+                            ctx.stroke();
+                        }
                     }
                 }
-            }
-        });
+            });
 
-        ctx.restore();
-    },
+            ctx.restore();
+        },
+    }
 };
 
-// Register the Monday grid plugin
-Chart.register(mondayGridPlugin);
+// Register the week grid plugin
+const GRID_DAY_OF_WEEK = 0;//sunday
+Chart.register(weekGridPlugin(GRID_DAY_OF_WEEK));
 
 // Function to get activity emoji based on type
 function getActivityEmoji(activityType: string): string {
@@ -458,6 +460,20 @@ const commonOptions = {
             borderWidth: 1,
             padding: 12,
             displayColors: true,
+            callbacks: {
+                label: function (context: any) {
+                    const label = context.dataset.label || '';
+                    const value = context.parsed.y;
+
+                    // For daily values (scatter datasets), show only the value
+                    if (label.includes('Daily')) {
+                        return `${label}: ${value !== null ? value.toFixed(2) : 'N/A'}`;
+                    }
+
+                    // For other datasets, show default format
+                    return `${label}: ${value !== null ? value.toFixed(2) : 'N/A'}`;
+                }
+            }
         },
     },
     scales: {
@@ -474,8 +490,20 @@ const commonOptions = {
                 font: {
                     size: 10,
                 },
-                autoSkip: true,
-                maxTicksLimit: 20,
+                autoSkip: false,
+                callback: function (_value: any, index: number): string {
+                    const labels = (this as any).chart.data.labels || [];
+                    const label = labels[index];
+                    if (typeof label === 'string') {
+                        const [year, month, day] = label.split('-').map(Number);
+                        const date = new Date(year, month - 1, day);
+                        // Show tick only on vertical grid lines
+                        if (date.getDay() === GRID_DAY_OF_WEEK) {
+                            return `${day}/${month}`;
+                        }
+                    }
+                    return '';
+                },
             },
         },
     },