Initial commit

2026-02-22 22:53:22 +11:00
commit ccdb3d8dc7
26 changed files with 2238 additions and 0 deletions
--- a/app/static/js/charts.js
+++ b/app/static/js/charts.js
@@ -0,0 +1,146 @@
+/**
+ * Chart.js configurations for WeightTracker
+ * Uses a consistent dark theme with accent colors
+ */
+
+const chartDefaults = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+        legend: {
+            display: false,
+        },
+        tooltip: {
+            backgroundColor: '#1a2233',
+            titleColor: '#f1f5f9',
+            bodyColor: '#94a3b8',
+            borderColor: '#2a3548',
+            borderWidth: 1,
+            cornerRadius: 8,
+            padding: 10,
+            displayColors: false,
+        },
+    },
+    scales: {
+        x: {
+            grid: { color: 'rgba(42, 53, 72, 0.5)', drawBorder: false },
+            ticks: { color: '#64748b', font: { size: 11, family: 'Inter' } },
+        },
+        y: {
+            grid: { color: 'rgba(42, 53, 72, 0.5)', drawBorder: false },
+            ticks: { color: '#64748b', font: { size: 11, family: 'Inter' } },
+        },
+    },
+};
+
+
+function createWeightChart(canvasId, labels, weights) {
+    const ctx = document.getElementById(canvasId);
+    if (!ctx) return;
+
+    new Chart(ctx, {
+        type: 'line',
+        data: {
+            labels: labels,
+            datasets: [{
+                label: 'Weight (kg)',
+                data: weights,
+                borderColor: '#3b82f6',
+                backgroundColor: 'rgba(59, 130, 246, 0.1)',
+                fill: true,
+                tension: 0.3,
+                pointBackgroundColor: '#3b82f6',
+                pointBorderColor: '#1a2233',
+                pointBorderWidth: 2,
+                pointRadius: 4,
+                pointHoverRadius: 6,
+            }],
+        },
+        options: {
+            ...chartDefaults,
+            plugins: {
+                ...chartDefaults.plugins,
+                tooltip: {
+                    ...chartDefaults.plugins.tooltip,
+                    callbacks: {
+                        label: ctx => `${ctx.parsed.y} kg`,
+                    },
+                },
+            },
+        },
+    });
+}
+
+
+function createWeeklyChangeChart(canvasId, labels, changes) {
+    const ctx = document.getElementById(canvasId);
+    if (!ctx) return;
+
+    const colors = changes.map(c => c <= 0 ? '#10b981' : '#ef4444');
+    const bgColors = changes.map(c => c <= 0 ? 'rgba(16, 185, 129, 0.7)' : 'rgba(239, 68, 68, 0.7)');
+
+    new Chart(ctx, {
+        type: 'bar',
+        data: {
+            labels: labels,
+            datasets: [{
+                label: 'Change (kg)',
+                data: changes,
+                backgroundColor: bgColors,
+                borderColor: colors,
+                borderWidth: 1,
+                borderRadius: 4,
+            }],
+        },
+        options: {
+            ...chartDefaults,
+            plugins: {
+                ...chartDefaults.plugins,
+                tooltip: {
+                    ...chartDefaults.plugins.tooltip,
+                    callbacks: {
+                        label: ctx => `${ctx.parsed.y > 0 ? '+' : ''}${ctx.parsed.y} kg`,
+                    },
+                },
+            },
+        },
+    });
+}
+
+
+function createComparisonChart(canvasId, names, pctLost) {
+    const ctx = document.getElementById(canvasId);
+    if (!ctx) return;
+
+    const hues = [210, 160, 270, 30, 340, 190];
+    const bgColors = pctLost.map((_, i) => `hsla(${hues[i % hues.length]}, 70%, 55%, 0.7)`);
+    const borderColors = pctLost.map((_, i) => `hsl(${hues[i % hues.length]}, 70%, 55%)`);
+
+    new Chart(ctx, {
+        type: 'bar',
+        data: {
+            labels: names,
+            datasets: [{
+                label: '% Lost',
+                data: pctLost,
+                backgroundColor: bgColors,
+                borderColor: borderColors,
+                borderWidth: 1,
+                borderRadius: 6,
+            }],
+        },
+        options: {
+            ...chartDefaults,
+            indexAxis: names.length > 5 ? 'y' : 'x',
+            plugins: {
+                ...chartDefaults.plugins,
+                tooltip: {
+                    ...chartDefaults.plugins.tooltip,
+                    callbacks: {
+                        label: ctx => `${ctx.parsed.y || ctx.parsed.x}% lost`,
+                    },
+                },
+            },
+        },
+    });
+}