// fc-chart.jsx, weight-trajectory instrument, driven by the active pace state.
// Daily dots (raw) · EWMA trend (primary) · dashed projection to weigh-in ·
// dashed goal line. Y-domain is DYNAMIC: it always frames every drawn value plus
// the goal, so a fast cut or a stall can never push the projection off the card.
// All numerics kg, tnum.
function catmullRom(pts, tension = 0.5) {
if (pts.length < 2) return '';
const k = tension;
let d = `M ${pts[0][0].toFixed(2)} ${pts[0][1].toFixed(2)}`;
for (let i = 0; i < pts.length - 1; i++) {
const p0 = pts[Math.max(0, i - 1)], p1 = pts[i], p2 = pts[i + 1], p3 = pts[Math.min(pts.length - 1, i + 2)];
const c1x = p1[0] + (p2[0] - p0[0]) * k / 3, c1y = p1[1] + (p2[1] - p0[1]) * k / 3;
const c2x = p2[0] - (p3[0] - p1[0]) * k / 3, c2y = p2[1] - (p3[1] - p1[1]) * k / 3;
d += ` C ${c1x.toFixed(2)} ${c1y.toFixed(2)}, ${c2x.toFixed(2)} ${c2y.toFixed(2)}, ${p2[0].toFixed(2)} ${p2[1].toFixed(2)}`;
}
return d;
}
const _MO = ['JAN','FEB','MAR','APR','MAY','JUN','JUL','AUG','SEP','OCT','NOV','DEC'];
// Day 0 = camp start, anchored so day campDays lands on weigh-in (day before the
// Jan 1 fight = Dec 31), keeping Start / Today / Weigh-in dates coherent.
const _CAMP_START = new Date(2025, 10, 11); // 11 Nov 2025 → +50d = 31 Dec (weigh-in)
const _dayDate = (d) => { const dt = new Date(_CAMP_START); dt.setDate(dt.getDate() + d); return dt; };
const _fmtDay = (dt) => `${_MO[dt.getMonth()]} ${dt.getDate()}`;
// Round, evenly-spaced kg gridlines covering [min,max], aim for ~4 lines.
function _niceTicks(min, max, target = 5) {
const span = Math.max(0.001, max - min);
const steps = [0.5, 1, 2, 5, 10];
const step = steps.find(s => s >= span / target) || 10;
const out = [];
for (let v = Math.ceil(min / step) * step; v <= max + 1e-9; v += step) out.push(+v.toFixed(1));
return out;
}
function FCChart({ paceKey = 'onTrack', width = 345, height = 250, compact = false, fillMode = 'gradient', showPlan = false, showBand = false, rangeStartDay = 0 }) {
const p = window.computePace(paceKey);
const FC = window.FC;
const planStart = FC.planStart != null ? FC.planStart : 78.4;
const bandKg = 0.7;
const xMinDay = Math.max(0, Math.min(rangeStartDay || 0, FC.todayDay - 5));
const planAt = (day) => planStart + (FC.goalWeight - planStart) * (day / FC.campDays);
const W = width, H = height;
const padL = 30, padR = 52, padT = 16, padB = compact ? 26 : 42;
const innerW = W - padL - padR, innerH = H - padT - padB;
// ── dynamic y-domain ──────────────────────────────────────────────────────
// Frame everything that gets drawn, raw dots, trend, today, projection, goal,
// then add breathing room. Guarantees the projection endpoint stays on-card.
const visHist = p.hist.filter(h => h[0] >= xMinDay);
const visTrend = p.trend.filter(t => t[0] >= xMinDay);
const ys = [...visHist.map(h => h[1]), ...visTrend.map(t => t[1]), p.projected, p.trendingToday, FC.goalWeight];
if (showPlan || showBand) ys.push(planAt(xMinDay));
if (showBand) ys.push(planAt(xMinDay) + bandKg, FC.goalWeight - bandKg);
const dMin = Math.min(...ys), dMax = Math.max(...ys);
const padW = Math.max(0.5, (dMax - dMin) * 0.16);
// More breathing room below the lowest values (goal / projected) so they sit a
// touch higher in the frame; trim the top pad to match.
const yMin = dMin - padW * 1.55, yMax = dMax + padW * 0.85;
const yTicks = _niceTicks(yMin, yMax);
const xS = (d) => padL + ((d - xMinDay) / (FC.campDays - xMinDay)) * innerW;
const yS = (w) => padT + ((yMax - w) / (yMax - yMin)) * innerH;
const baselineY = H - padB; // == yS(yMin)
const trendPts = visTrend.map(q => [xS(q[0]), yS(q[1])]);
const trendPath = catmullRom(trendPts, 0.85);
const projStartX = xS(FC.todayDay), projStartY = yS(p.trendingToday);
const projEndX = xS(FC.campDays), projEndY = yS(p.projected);
// projection bends at fight-week start: gentle (real-weight) to the knee, then a
// steeper fight-week drop sized by the cut strategy (water plans drop hardest).
const _fwDay = Math.max(FC.todayDay + 0.5, FC.campDays - 7);
const _pType = window.planTypeFor ? window.planTypeFor((window.FC && window.FC.sport) || 'MMA', true) : 'camp';
const _kick = _pType === 'walk' ? 0 : _pType === 'minimal' ? 0.18 : 0.42;
const _kFrac = (_fwDay - FC.todayDay) / Math.max(1, FC.campDays - FC.todayDay);
const _kneeW = p.trendingToday + (p.projected - p.trendingToday) * _kFrac * (1 - _kick);
const kneeX = xS(_fwDay), kneeY = yS(_kneeW);
const goalY = yS(FC.goalWeight);
const planX0 = xS(xMinDay), planX1 = xS(FC.campDays), planY0 = yS(planAt(xMinDay));
const offPace = p.tone === 'red';
const projColor = offPace ? 'var(--red)' : p.tone === 'amber' ? 'var(--mustard-deep)' : 'var(--t-green)';
// Right-margin readouts (PROJ / GOAL): dodge each other when close, clamp on-card.
const clampY = (y) => Math.max(padT + 14, Math.min(H - 8, y));
let projLabelY = projEndY, goalLabelY = goalY;
if (Math.abs(projEndY - goalY) < 26) {
const mid = (projEndY + goalY) / 2;
if (projEndY <= goalY) { projLabelY = mid - 14; goalLabelY = mid + 14; }
else { projLabelY = mid + 14; goalLabelY = mid - 14; }
}
projLabelY = clampY(projLabelY); goalLabelY = clampY(goalLabelY);
let approxLen = 0;
for (let i = 1; i < trendPts.length; i++) approxLen += Math.hypot(trendPts[i][0] - trendPts[i-1][0], trendPts[i][1] - trendPts[i-1][1]) * 1.05;
const uid = React.useId().replace(/:/g, '');
const labelX = W - padR + 4;
return (
);
}
// ── FCHealthChart, Apple Health-style axis: y-labels on the RIGHT, faint
// horizontal gridlines + dotted vertical week separators, no heavy baseline,
// a "target zone" band (the plan corridor) with dashed bounds, open-circle
// projection endpoint, solid today dot + scrubber line.
function FCHealthChart({ paceKey = 'onTrack', width = 345, height = 236, rangeStartDay = 0, showZone = true, showDots = true, callout = 'pill', preview = null }) {
const p = window.computePace(paceKey);
const FC = window.FC;
const planStart = FC.planStart != null ? FC.planStart : 78.4;
const bandKg = 0.7;
const xMinDay = Math.max(0, Math.min(rangeStartDay || 0, FC.todayDay - 5));
const planAt = (d) => planStart + (FC.goalWeight - planStart) * (d / FC.campDays);
const W = width, H = height, padL = 14, padR = 38, padT = 14, padB = 36;
const innerW = W - padL - padR, innerH = H - padT - padB;
const visHist = p.hist.filter(h => h[0] >= xMinDay);
const visTrend = p.trend.filter(t => t[0] >= xMinDay);
const ys = [...visHist.map(h => h[1]), ...visTrend.map(t => t[1]), p.projected, p.trendingToday, FC.goalWeight];
if (showZone) ys.push(planAt(xMinDay) + bandKg, planAt(xMinDay) - 0.95, FC.goalWeight - 0.6);
const dMin = Math.min(...ys), dMax = Math.max(...ys);
const padW = Math.max(0.5, (dMax - dMin) * 0.16);
const yMin = dMin - padW, yMax = dMax + padW;
const yTicks = _niceTicks(yMin, yMax);
const xS = (d) => padL + ((d - xMinDay) / (FC.campDays - xMinDay)) * innerW;
const yS = (w) => padT + ((yMax - w) / (yMax - yMin)) * innerH;
const trendPts = visTrend.map(q => [xS(q[0]), yS(q[1])]);
const trendPath = catmullRom(trendPts, 0.85);
const projStartX = xS(FC.todayDay), projStartY = yS(p.trendingToday);
const projEndX = xS(FC.campDays), projEndY = yS(p.projected);
// projection bends at fight-week start: gentle (real-weight) to the knee, then a
// steeper fight-week drop sized by the cut strategy (water plans drop hardest).
const _fwDay = Math.max(FC.todayDay + 0.5, FC.campDays - 7);
const _pType = window.planTypeFor ? window.planTypeFor((window.FC && window.FC.sport) || 'MMA', true) : 'camp';
const _kick = _pType === 'walk' ? 0 : _pType === 'minimal' ? 0.18 : 0.42;
const _kFrac = (_fwDay - FC.todayDay) / Math.max(1, FC.campDays - FC.todayDay);
const _kneeW = p.trendingToday + (p.projected - p.trendingToday) * _kFrac * (1 - _kick);
const kneeX = xS(_fwDay), kneeY = yS(_kneeW);
const goalY = yS(FC.goalWeight);
const projColor = p.tone === 'red' ? 'var(--red)' : p.tone === 'amber' ? 'var(--mustard-deep)' : 'var(--t-green)';
const [sel, setSel] = React.useState(null); // tapped point: {x,y,val,label}
// Safe lane is asymmetric: the UPPER edge closes to the goal at weigh-in (you
// can't be over the limit), the LOWER edge stays a little open (being somewhat
// under still makes weight).
const t01 = (d) => d / FC.campDays;
const upHalf = (d) => bandKg * (1 - t01(d));
const loHalf = (d) => 0.9 * (1 - 0.4 * t01(d));
const zTop = (d) => yS(planAt(d) + upHalf(d)), zBot = (d) => yS(planAt(d) - loHalf(d));
const ptFor = (k) => k === 'today' ? { x: projStartX, y: projStartY, val: p.trendingToday, label: 'Today' }
: k === 'proj' ? { x: projEndX, y: projEndY, val: p.projected, label: 'Weigh-in' }
: (() => { const d = visHist[Math.floor(visHist.length / 2)]; return d ? { x: xS(d[0]), y: yS(d[1]), val: d[1], label: _fmtDay(_dayDate(d[0])) } : null; })();
const eff = sel || (preview ? ptFor(preview) : null);
const weeks = [];
for (let d = Math.ceil(xMinDay / 7) * 7; d <= FC.campDays - 1; d += 7) weeks.push(d);
const uid = React.useId().replace(/:/g, '');
let approxLen = 0;
for (let i = 1; i < trendPts.length; i++) approxLen += Math.hypot(trendPts[i][0] - trendPts[i-1][0], trendPts[i][1] - trendPts[i-1][1]) * 1.05;
return (
);
}
// ── FCChartCard, heading + time-range toggle + legend around the plot. ──────
// `variant` picks the shell styling: 'clean' (iOS segmented), 'editorial'
// (Oswald + underline tabs), 'lab' (mono + bracket tabs). Range windows the
// x-domain; the projection always runs to weigh-in.
function FCRangeToggle({ variant, value, onChange, opts }) {
if (variant === 'editorial') {
return (
{opts.map(o => {
const on = o === value;
return ;
})}
);
}
if (variant === 'lab') {
return (
{opts.map(o => {
const on = o === value;
return ;
})}
);
}
if (variant === 'health') {
// Apple-style full-width sliding segmented control
return (
{opts.map(o => {
const on = o === value;
return ;
})}
);
}
// clean, iOS segmented
return (
{opts.map(o => {
const on = o === value;
return ;
})}
);
}
function FCLegend({ variant, projColor, showZone = false }) {
const items = [
['3-day average', ],
['Projection', ],
];
if (showZone) items.push(['Target zone', ]);
items.push(['Limit', ]);
return (
{items.map(([lbl, sw]) => (
{sw}
{lbl}
))}
);
}
function FCChartCard({ paceKey = 'onTrack', variant = 'clean', heading = 'Weight trend', showZone = true, showDots = true, width = 331 }) {
const [range, setRange] = React.useState('Camp');
const opts = ['2W', '6W', 'Camp'];
const rangeDays = { '2W': 14, '6W': 42, 'Camp': null }[range];
const rangeStartDay = rangeDays == null ? 0 : (window.FC.todayDay - rangeDays);
const p = window.computePace(paceKey);
const projColor = p.tone === 'red' ? 'var(--red)' : p.tone === 'amber' ? 'var(--mustard-deep)' : 'var(--t-green)';
const isHealth = variant === 'health';
const Head = () => {
if (variant === 'editorial') return (
);
if (variant === 'lab') return (
{heading} // 5-day avg
);
if (isHealth) return (
);
return (
{heading}
);
};
return (
{isHealth
?
: }
);
}
// ── FCHealthCard, Apple-Health-axis card with a clean Projected/Goal readout.
// `readout`: 'header' (stats above chart, Apple-callout style) · 'below' (stat
// row under chart) · 'minimal' (chart only). Range toggle + legend included.
function HStat({ label, val, unit = 'kg', color = 'var(--ink)', i = 0 }) {
return (
);
}
function FCHealthCard({ paceKey = 'onTrack', place = 'left', heading = 'Weight trend', showZone = true, showDots = true, callout = 'pill', preview = null, width = 331 }) {
const FC = window.FC;
const [range, setRange] = React.useState('Camp');
const opts = ['2W', '6W', 'Camp'];
const rangeDays = { '2W': 14, '6W': 42, 'Camp': null }[range];
const rangeStartDay = rangeDays == null ? 0 : (FC.todayDay - rangeDays);
const p = window.computePace(paceKey);
const projColor = p.tone === 'red' ? 'var(--red)' : p.tone === 'amber' ? 'var(--mustard-deep)' : 'var(--t-green)';
const lblS = { fontFamily: 'var(--sans)', fontSize: 10.5, fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase', color: 'var(--ink-3)' };
const numS = { fontFamily: 'var(--num)', fontWeight: 400, fontSize: 21, letterSpacing: '-0.02em', marginTop: 4 };
const pairRow = (al, mt = 13) => (
{[['Projected', p.projected.toFixed(1), projColor], ['Limit', FC.goalWeight.toFixed(1), 'var(--ink-2)']].map(([lb, v, c]) => (
))}
{heading}
(kg)
);
return (
{place === 'right' ? (
{heading && headingEl}{pairRow('flex-end')}
) : (
{heading && headingEl}{place === 'left' && pairRow()}
)}
{place === 'below' &&
{pairRow('flex-start', 0)}
}
);
}
Object.assign(window, { FCChart, FCHealthChart, FCHealthCard, HStat, FCChartCard, FCRangeToggle, FCLegend, _dayDate, _fmtDay });