// fc-instruments.jsx, production chart instruments rolled into the app.
// FCBurndownChart , kg-to-go vs days-to-go, ideal vs actual (Trend tab)
// FCConeChart , cycle-aware projection cone (honest "will I make it")
// FCTimeDriftChart , weigh-in time-of-day vs your set window (adherence)
// FCCyclePhaseChart, weight trend with phase bands + plan undulating w/ cycle
// Plus recentLog(), enriched weigh-in rows (time, off-window, double readings).
// All theme-aware via CSS vars; tone follows computePace().
function _isp(pts, k = 0.7) {
if (pts.length < 2) return '';
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)];
d += ` C ${(p1[0] + (p2[0] - p0[0]) * k / 3).toFixed(2)} ${(p1[1] + (p2[1] - p0[1]) * k / 3).toFixed(2)}, ${(p2[0] - (p3[0] - p1[0]) * k / 3).toFixed(2)} ${(p2[1] - (p3[1] - p1[1]) * k / 3).toFixed(2)}, ${p2[0].toFixed(2)} ${p2[1].toFixed(2)}`;
}
return d;
}
const _ilin = (pts) => 'M ' + pts.map(p => `${p[0].toFixed(2)} ${p[1].toFixed(2)}`).join(' L ');
const _toneCol = (tone) => tone === 'red' ? 'var(--red)' : tone === 'amber' ? 'var(--mustard-deep)' : 'var(--t-green)';
// ═══ shared card chrome ═══════════════════════════════════════════════════
function InstrumentCard({ eyebrow, eyebrowColor = 'var(--accent)', headline, children, foot = null }) {
return (
{eyebrow}
{headline &&
{headline}
}
{children}
{foot}
);
}
// ═══ 1 · BURNDOWN ═════════════════════════════════════════════════════════
function FCBurndownChart({ paceKey = 'onTrack', width = 331, height = 184 }) {
const FC = window.FC, p = window.computePace(paceKey);
const W = width, H = height, padL = 8, padR = 40, padT = 16, padB = 28;
const innerW = W - padL - padR, innerH = H - padT - padB;
const rem = (w) => Math.max(0, w - FC.goalWeight);
const startRem = rem(FC.planStart);
const maxY = startRem * 1.08;
const xS = (d) => padL + (d / FC.campDays) * innerW;
const yS = (kg) => padT + (1 - kg / maxY) * innerH;
const baseY = yS(0);
const ideal = [[xS(0), yS(startRem)], [xS(FC.campDays), yS(0)]];
const actualPts = p.trend.map(t => [xS(t[0]), yS(rem(t[1]))]);
const todayPt = actualPts[actualPts.length - 1];
const projPts = [[xS(FC.todayDay), yS(rem(p.trendingToday))], [xS(FC.campDays), yS(rem(p.projected))]];
const idealRemNow = startRem * (1 - FC.todayDay / FC.campDays);
const behind = rem(p.trendingToday) - idealRemNow; // + = behind the line
const col = _toneCol(p.tone);
const uid = React.useId().replace(/:/g, '');
return (
);
}
function FCBurndownCard({ paceKey = 'onTrack', width = 331 }) {
const FC = window.FC, p = window.computePace(paceKey);
const daysLeft = FC.campDays - FC.todayDay;
const idealRemNow = (FC.planStart - FC.goalWeight) * (1 - FC.todayDay / FC.campDays);
const behind = (p.trendingToday - FC.goalWeight) - idealRemNow;
const ahead = behind <= 0.05;
const head = ahead
? `${Math.abs(p.toGo).toFixed(1)} kg to go, ${daysLeft} days out, on or ahead of the line.`
: `${Math.abs(p.toGo).toFixed(1)} kg to go in ${daysLeft} days, ${behind.toFixed(1)} kg behind the line.`;
return (
);
}
// ═══ 2 · PROJECTION CONE (cycle-aware) ════════════════════════════════════
function FCConeChart({ paceKey = 'onTrack', width = 331, height = 210 }) {
const FC = window.FC, p = window.computePace(paceKey);
const W = width, H = height, padL = 8, padR = 44, padT = 16, padB = 30;
const innerW = W - padL - padR, innerH = H - padT - padB;
const daysLeft = FC.campDays - FC.todayDay;
// cone half-width grows with horizon; upper edge also carries the weigh-in water offset
const halfEnd = 0.45 + daysLeft * 0.035;
const upEnd = p.projected + halfEnd + Math.max(0, p.weighInOffset);
const loEnd = p.projected - halfEnd;
const visTrend = p.trend.filter(t => t[0] >= 0);
const ys = [...visTrend.map(t => t[1]), upEnd, loEnd, FC.goalWeight];
const dMin = Math.min(...ys), dMax = Math.max(...ys), padW = (dMax - dMin) * 0.18 || 0.5;
const yMin = dMin - padW, yMax = dMax + padW;
const xS = (d) => padL + (d / FC.campDays) * innerW;
const yS = (w) => padT + ((yMax - w) / (yMax - yMin)) * innerH;
const trendPts = visTrend.map(t => [xS(t[0]), yS(t[1])]);
const tx = xS(FC.todayDay), ty = yS(p.trendingToday), ex = xS(FC.campDays);
const goalY = yS(FC.goalWeight);
const col = _toneCol(p.tone);
const conePoly = `${tx},${ty} ${ex},${yS(upEnd)} ${ex},${yS(loEnd)}`;
const clears = upEnd <= FC.goalWeight + 0.02;
const misses = loEnd >= FC.goalWeight - 0.02;
const uid = React.useId().replace(/:/g, '');
return (
);
}
function FCConeCard({ paceKey = 'onTrack', width = 331 }) {
const FC = window.FC, p = window.computePace(paceKey);
const daysLeft = FC.campDays - FC.todayDay;
const halfEnd = 0.45 + daysLeft * 0.035;
const upEnd = p.projected + halfEnd + Math.max(0, p.weighInOffset);
const loEnd = p.projected - halfEnd;
const clears = upEnd <= FC.goalWeight + 0.02;
const misses = loEnd >= FC.goalWeight - 0.02;
const tone = clears ? 'var(--t-green)' : misses ? 'var(--red)' : 'var(--mustard-deep)';
const head = clears ? `Likely ${loEnd.toFixed(1)}–${upEnd.toFixed(1)} kg, clears the limit even with cycle water.`
: misses ? `Likely ${loEnd.toFixed(1)}–${upEnd.toFixed(1)} kg, the whole range misses the limit.`
: `Likely ${loEnd.toFixed(1)}–${upEnd.toFixed(1)} kg, the range still straddles the limit.`;
return (
0.05 ? Upper edge includes +{p.weighInOffset.toFixed(1)} kg of luteal water expected at weigh-in. Your true-weight target is {p.trueTarget.toFixed(1)} kg.
: null}>
);
}
// ═══ 3 · WEIGH-IN TIME DRIFT ══════════════════════════════════════════════
function FCTimeDriftChart({ width = 331, height = 168, days = 20 }) {
const FC = window.FC, target = FC.weighInTargetHour;
const W = width, H = height, padL = 34, padR = 12, padT = 14, padB = 26;
const innerW = W - padL - padR, innerH = H - padT - padB;
const yLo = target - 1.6, yHi = target + 3.2; // morning window; outliers clamp to top
const xS = (i) => padL + (i / (days - 1)) * innerW;
const yS = (h) => padT + ((Math.min(yHi, Math.max(yLo, h)) - yLo) / (yHi - yLo)) * innerH; // note: larger hour = lower on screen? invert:
const yInv = (h) => padT + (1 - (Math.min(yHi, Math.max(yLo, h)) - yLo) / (yHi - yLo)) * innerH;
const startDay = FC.todayDay - days + 1;
const ticks = [target - 1, target, target + 1, target + 2];
const doubleDay = FC.todayDay - window.FC_DOUBLE_DAY_OFFSET;
const dots = [];
for (let i = 0; i < days; i++) {
const day = startDay + i, h = window.weighInClock(day), off = window.weighInOffWindow(day);
const clamped = h > yHi;
dots.push(
{clamped
?
: }
{clamped && {window.fmtClock(h).replace(' ', '')}}
{day === doubleDay && !clamped && }
);
}
return (
);
}
function FCTimeDriftCard({ width = 331, days = 20, onChangeTime = null }) {
const FC = window.FC;
const startDay = FC.todayDay - days + 1;
let off = 0; for (let d = startDay; d <= FC.todayDay; d++) if (window.weighInOffWindow(d)) off++;
const inWin = days - off;
return (
Off-window readings are noisier. Same time daily beats the perfect time.
}>
);
}
// ═══ 4 · CYCLE-PHASE TREND (plan undulates with cycle) ════════════════════
function FCCyclePhaseChart({ paceKey = 'onTrack', width = 331, height = 210 }) {
const FC = window.FC, p = window.computePace(paceKey), CP = window.CYCLE_PHASE;
const W = width, H = height, padL = 8, padR = 40, padT = 26, padB = 30;
const innerW = W - padL - padR, innerH = H - padT - padB;
// true plan heads to trueTarget; expected SCALE plan = true plan + cycle water → undulates, lands on goal
const truePlan = (d) => FC.planStart + (p.trueTarget - FC.planStart) * (d / FC.campDays);
const scalePlan = (d) => truePlan(d) + window.cycleOffsetKg(d);
const visTrend = p.trend.filter(t => t[0] >= 0);
const planSamples = []; for (let d = 0; d <= FC.campDays; d += 2) planSamples.push(d);
const ys = [...visTrend.map(t => t[1]), ...planSamples.map(scalePlan), FC.goalWeight, p.trueTarget];
const dMin = Math.min(...ys), dMax = Math.max(...ys), padW = (dMax - dMin) * 0.16 || 0.5;
const yMin = dMin - padW, yMax = dMax + padW;
const xS = (d) => padL + (d / FC.campDays) * innerW;
const yS = (w) => padT + ((yMax - w) / (yMax - yMin)) * innerH;
const trendPts = visTrend.map(t => [xS(t[0]), yS(t[1])]);
const scalePts = planSamples.map(d => [xS(d), yS(scalePlan(d))]);
const goalY = yS(FC.goalWeight);
const col = _toneCol(p.tone);
// phase bands across camp
const bands = [];
let segStart = 0, segPhase = window.cyclePhaseAt(0);
for (let d = 1; d <= FC.campDays; d++) {
const ph = window.cyclePhaseAt(d);
if (ph !== segPhase || d === FC.campDays) {
bands.push([segStart, d, segPhase]); segStart = d; segPhase = ph;
}
}
const wiPhase = window.cyclePhaseAt(FC.campDays);
return (
);
}
function FCCyclePhaseCard({ paceKey = 'onTrack', width = 331 }) {
const FC = window.FC, p = window.computePace(paceKey), CP = window.CYCLE_PHASE;
const wiPhase = CP[window.cyclePhaseAt(FC.campDays)];
const buf = p.cycleBuffer;
const head = buf > 0.05
? `Weigh-in lands in your ${wiPhase.label.toLowerCase()} phase, plan holds ${buf.toFixed(1)} kg of buffer.`
: `Weigh-in lands in your ${wiPhase.label.toLowerCase()} phase, low water, no extra buffer needed.`;
return (
The plan line rises and dips with your cycle so a normal hormonal swing never reads as falling behind. True-weight target: {p.trueTarget.toFixed(1)} kg.}>
);
}
// ═══ enriched recent log (time + off-window + double readings) ════════════
const _WDl = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
const _MOl = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
function recentLog(paceKey, n = 8) {
const p = window.computePace(paceKey);
const doubleDay = window.FC.todayDay - window.FC_DOUBLE_DAY_OFFSET;
const rows = [...p.hist].reverse().slice(0, n).map(([day, w], i, a) => {
const dt = window._dayDate(day);
const prev = a[i + 1] ? a[i + 1][1] : w;
const h = window.weighInClock(day);
const row = {
day, dayLabel: `${_WDl[dt.getDay()]} ${dt.getDate()} ${_MOl[dt.getMonth()]}`,
w, d: w - prev, time: window.fmtClock(h), off: window.weighInOffWindow(day),
};
if (day === doubleDay) {
// a second, later reading that day, context only, not used for the trend
row.second = { time: window.fmtClock(h + 11.5), w: +(w + 0.6).toFixed(1) };
}
return row;
});
return rows;
}
Object.assign(window, {
FCBurndownChart, FCBurndownCard, FCConeChart, FCConeCard,
FCTimeDriftChart, FCTimeDriftCard, FCCyclePhaseChart, FCCyclePhaseCard,
InstrumentCard, recentLog,
});