Change leadership graph to line and add linear best fit
This commit is contained in:
Peter Stockings
@@ -814,6 +814,94 @@ tr:hover td {
|
||||
box-shadow: 0 0 0 3px var(--accent-glow);
|
||||
}
|
||||
|
||||
/* ========== CHART FILTERS ========== */
|
||||
.chart-filters {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
align-items: flex-start;
|
||||
padding: 0 0 1rem;
|
||||
}
|
||||
|
||||
.filter-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.filter-group label {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.filter-group input[type="date"] {
|
||||
width: 160px;
|
||||
padding: 0.5rem 0.75rem;
|
||||
background: var(--bg-input);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--text-primary);
|
||||
font-family: inherit;
|
||||
font-size: 0.85rem;
|
||||
outline: none;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.filter-group input[type="date"]:focus {
|
||||
border-color: var(--border-focus);
|
||||
box-shadow: 0 0 0 3px var(--accent-glow);
|
||||
}
|
||||
|
||||
.filter-group-people {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.person-filter-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
max-height: 72px;
|
||||
overflow-y: auto;
|
||||
padding: 0.25rem 0;
|
||||
}
|
||||
|
||||
.person-checkbox {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
padding: 0.3rem 0.65rem;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 100px;
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.person-checkbox:hover {
|
||||
border-color: var(--accent);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.person-checkbox input[type="checkbox"] {
|
||||
accent-color: var(--accent);
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.person-checkbox:has(input:checked) {
|
||||
background: var(--accent-glow);
|
||||
border-color: rgba(59, 130, 246, 0.3);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
/* ========== RESPONSIVE ========== */
|
||||
@media (max-width: 768px) {
|
||||
.navbar {
|
||||
|
||||
@@ -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`,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user