147 lines
4.3 KiB
JavaScript
147 lines
4.3 KiB
JavaScript
/**
|
|
* 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`,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
});
|
|
}
|