Change leadership graph to line and add linear best fit

2026-02-24 14:00:51 +11:00
parent c21a7890f3
commit 93c6822439
5 changed files with 391 additions and 15 deletions
--- a/app/static/js/charts.js
+++ b/app/static/js/charts.js
@@ -144,3 +144,113 @@ function createComparisonChart(canvasId, names, pctLost) {
        },
    });
 }
+
+
+/**
+ * Create a multi-series progress-over-time line chart with best-fit lines.
+ * @param {string} canvasId - canvas element ID
+ * @param {Array} users - array of { id, name, color, data: [{date, pct_lost}], best_fit: {slope, intercept} }
+ * @returns {Chart} the Chart.js instance
+ */
+function createProgressChart(canvasId, users) {
+    const ctx = document.getElementById(canvasId);
+    if (!ctx) return null;
+
+    const datasets = [];
+
+    users.forEach(user => {
+        // Actual data line
+        datasets.push({
+            label: user.name,
+            data: user.data.map(d => ({ x: d.date, y: d.weight })),
+            borderColor: user.color,
+            backgroundColor: user.color.replace(')', ', 0.1)').replace('hsl(', 'hsla('),
+            fill: false,
+            tension: 0.3,
+            pointBackgroundColor: user.color,
+            pointBorderColor: '#1a2233',
+            pointBorderWidth: 2,
+            pointRadius: 4,
+            pointHoverRadius: 6,
+            borderWidth: 2.5,
+        });
+
+        // Best-fit line (dashed) — only if we have ≥ 2 data points
+        if (user.data.length >= 2) {
+            const baseDate = new Date(user.data[0].date);
+            const firstDay = 0;
+            const lastDay = Math.round(
+                (new Date(user.data[user.data.length - 1].date) - baseDate) / 86400000
+            );
+
+            const fitStart = user.best_fit.intercept + user.best_fit.slope * firstDay;
+            const fitEnd = user.best_fit.intercept + user.best_fit.slope * lastDay;
+
+            datasets.push({
+                label: user.name + ' (trend)',
+                data: [
+                    { x: user.data[0].date, y: Math.round(fitStart * 100) / 100 },
+                    { x: user.data[user.data.length - 1].date, y: Math.round(fitEnd * 100) / 100 },
+                ],
+                borderColor: user.color,
+                borderDash: [6, 4],
+                borderWidth: 2,
+                pointRadius: 0,
+                pointHoverRadius: 0,
+                fill: false,
+                tension: 0,
+            });
+        }
+    });
+
+    return new Chart(ctx, {
+        type: 'line',
+        data: { datasets },
+        options: {
+            ...chartDefaults,
+            scales: {
+                x: {
+                    type: 'time',
+                    time: {
+                        unit: 'day',
+                        tooltipFormat: 'dd MMM yyyy',
+                        displayFormats: { day: 'dd MMM' },
+                    },
+                    grid: { color: 'rgba(42, 53, 72, 0.5)', drawBorder: false },
+                    ticks: { color: '#64748b', font: { size: 11, family: 'Inter' } },
+                },
+                y: {
+                    ...chartDefaults.scales.y,
+                    title: {
+                        display: true,
+                        text: 'Weight (kg)',
+                        color: '#64748b',
+                        font: { size: 12, family: 'Inter' },
+                    },
+                },
+            },
+            plugins: {
+                ...chartDefaults.plugins,
+                legend: {
+                    display: true,
+                    labels: {
+                        color: '#94a3b8',
+                        font: { size: 12, family: 'Inter' },
+                        usePointStyle: true,
+                        pointStyle: 'circle',
+                        padding: 16,
+                        // Hide trend lines from legend
+                        filter: item => !item.text.endsWith('(trend)'),
+                    },
+                },
+                tooltip: {
+                    ...chartDefaults.plugins.tooltip,
+                    callbacks: {
+                        label: ctx => `${ctx.dataset.label}: ${ctx.parsed.y} kg`,
+                    },
+                },
+            },
+        },
+    });
+}
+