// Beef US Tab — Edgebeef sazonal diário + Ciclo do Boi US
const MONTH_DOY = [0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334];
// ── Daily stats helper ────────────────────────────────────────────────────────
function buildDailyStats(byYear, histYears) {
const byDoy = {};
for (const yr of histYears) {
for (const pt of (byYear[yr] || [])) {
if (!byDoy[pt.doy]) byDoy[pt.doy] = [];
byDoy[pt.doy].push(pt.value);
}
}
const stats = {};
for (const [doy, vals] of Object.entries(byDoy)) {
if (vals.length < 2) continue;
const sorted = [...vals].sort((a, b) => a - b);
stats[Number(doy)] = {
min: sorted[0], max: sorted[sorted.length - 1],
mean: vals.reduce((a, b) => a + b, 0) / vals.length,
p25: sorted[Math.floor(sorted.length * 0.25)],
p75: sorted[Math.floor(sorted.length * 0.75)],
n: sorted.length,
};
}
return stats;
}
// ── Edgebeef Seasonal Chart (pure rendering) ──────────────────────────────────
const EdgebeeefChart = ({
byYear, allYears, selectedYears, pinnedYear, setPinnedYear,
chartStyle, showStats, showEvents, events, accent,
}) => {
const W = 1000, H = 380;
const padL = 64, padR = 24, padT = 20, padB = 32;
const chartW = W - padL - padR;
const chartH = H - padT - padB;
const latestYear = Math.max(...selectedYears);
const sortedAsc = [...selectedYears].sort((a, b) => a - b);
const { displayYears, isLeaving } = window.useTrackedYears(selectedYears);
const { shouldRender: showAreaRender, isLeaving: areaLeaving } = window.useFadeOut(chartStyle === 'area', 400);
const { shouldRender: showStatsRender, isLeaving: statsLeaving } = window.useFadeOut(showStats, 500);
const [hover, setHover] = React.useState(null);
React.useEffect(() => { setHover(null); }, [selectedYears.join(',')]);
// Y range
const { vMin, vMax, step } = React.useMemo(() => {
let lo = Infinity, hi = -Infinity;
for (const yr of selectedYears) {
for (const p of (byYear[yr] || [])) {
if (p.value < lo) lo = p.value;
if (p.value > hi) hi = p.value;
}
}
if (!isFinite(lo)) { lo = -100; hi = 100; }
const range = hi - lo;
const step = range > 800 ? 200 : range > 400 ? 100 : range > 200 ? 50 : 25;
return {
vMin: Math.floor((lo - range * 0.05) / step) * step,
vMax: Math.ceil((hi + range * 0.15) / step) * step,
step,
};
}, [byYear, selectedYears.join(',')]);
// Stats
const stats = React.useMemo(() => {
if (!showStatsRender) return {};
const latest = Math.max(...allYears);
const fromYr = Math.max(allYears[0], latest - 10);
const histYears = allYears.filter(y => y >= fromYr && y < latest);
return buildDailyStats(byYear, histYears);
}, [byYear, allYears, showStatsRender]);
const x = doy => padL + ((doy - 1) / 364) * chartW;
const y = v => padT + (1 - (v - vMin) / (vMax - vMin)) * chartH;
// (ii) Cada ano mantém sua cor de paleta ao ser pinado; só o latestYear recebe
// o accent quando nenhum ano está pinado — igual ao SeasonalChart do BeefBR.
const yearColor = yr => {
const palette = ['oklch(0.75 0.15 200)','oklch(0.68 0.16 255)','oklch(0.74 0.15 310)','oklch(0.78 0.17 35)','oklch(0.80 0.15 60)','oklch(0.72 0.16 0)','oklch(0.76 0.13 170)'];
const age = latestYear - yr;
if (age === 0) return accent; // ano mais recente = accent
return age - 1 < palette.length ? palette[age - 1] : 'oklch(0.48 0.01 260)';
};
const seriesOpacity = yr => {
if (!pinnedYear) return yr === latestYear ? 1 : 0.7;
return yr === pinnedYear ? 1 : 0.1;
};
const seriesWidth = yr => {
if (pinnedYear) return yr === pinnedYear ? 2.5 : 1;
return yr === latestYear ? 2 : 1.25;
};
const buildPath = pts =>
pts.map((p, i) => `${i === 0 ? 'M' : 'L'}${x(p.doy).toFixed(1)},${y(p.value).toFixed(1)}`).join(' ');
const buildArea = (pts) => {
if (!pts.length) return '';
const top = pts.map((p, i) => `${i === 0 ? 'M' : 'L'}${x(p.doy).toFixed(1)},${y(p.value).toFixed(1)}`).join(' ');
return top + ` L${x(pts[pts.length-1].doy).toFixed(1)},${y(vMin).toFixed(1)} L${x(pts[0].doy).toFixed(1)},${y(vMin).toFixed(1)} Z`;
};
const yTicks = [];
for (let v = vMin; v <= vMax; v += step) yTicks.push(v);
// Stats band paths
const statsDoys = Object.keys(stats).map(Number).sort((a,b)=>a-b);
const statsMaxPath = statsDoys.map((d,i) => `${i===0?'M':'L'}${x(d).toFixed(1)},${y(stats[d].max).toFixed(1)}`).join(' ');
const statsMinPath = [...statsDoys].reverse().map(d => `L${x(d).toFixed(1)},${y(stats[d].min).toFixed(1)}`).join(' ');
const statsP75Path = statsDoys.map((d,i) => `${i===0?'M':'L'}${x(d).toFixed(1)},${y(stats[d].p75).toFixed(1)}`).join(' ');
const statsP25Path = [...statsDoys].reverse().map(d => `L${x(d).toFixed(1)},${y(stats[d].p25).toFixed(1)}`).join(' ');
const statsMeanPath = statsDoys.map((d,i) => `${i===0?'M':'L'}${x(d).toFixed(1)},${y(stats[d].mean).toFixed(1)}`).join(' ');
// Events: position at mid-month doy
const { shouldRender: showEventsRender, isLeaving: eventsLeaving } = window.useFadeOut(showEvents, 400);
const eventsInView = React.useMemo(() => {
if (!showEventsRender) return [];
return (events || []).filter(e => selectedYears.includes(e.year) && (!pinnedYear || e.year === pinnedYear));
}, [showEventsRender, selectedYears, pinnedYear, events]);
const EVENT_COLOR = 'oklch(0.85 0.18 80)';
const getHoverPoint = (yr, doy) => {
const pts = byYear[yr] || [];
let best = null, bestD = Infinity;
for (const p of pts) {
const d = Math.abs(p.doy - doy);
if (d < bestD) { bestD = d; best = p; }
}
return bestD <= 4 ? best : null;
};
const doyToLabel = doy => {
let mo = 0;
for (let m = 11; m >= 0; m--) { if (doy > MONTH_DOY[m]) { mo = m; break; } }
return `${doy - MONTH_DOY[mo]} ${window.MONTHS_PT[mo]}`;
};
const [mouseY, setMouseY] = React.useState(0);
const onMove = e => {
const rect = e.currentTarget.getBoundingClientRect();
const px = (e.clientX - rect.left) * (W / rect.width);
const py = (e.clientY - rect.top) * (H / rect.height);
const doy = Math.round(1 + ((px - padL) / chartW) * 364);
setHover(Math.max(1, Math.min(365, doy)));
setMouseY(py);
};
const gradId = 'edge-grad';
return (
{/* Hover card */}
{hover != null && (() => {
const rows = [...sortedAsc].reverse()
.map(yr => ({ yr, pt: getHoverPoint(yr, hover) }))
.filter(r => r.pt);
if (!rows.length) return null;
const statEntry = stats[hover] || stats[hover-1] || stats[hover+1];
let hoverMo = 0;
for (let i = 11; i >= 0; i--) { if (hover > MONTH_DOY[i]) { hoverMo = i; break; } }
const nearEvents = showEvents
? (events||[]).filter(ev => ev.month - 1 === hoverMo && selectedYears.includes(ev.year))
: [];
const xPos = x(hover);
const isRightSide = xPos > chartW * 0.75;
return (
{doyToLabel(hover)}
{rows.map(({yr, pt}) => (
{yr}
{pt.value.toFixed(1)} USD/cwt
))}
{showStats && statEntry && (
média {statEntry.n}a
{statEntry.mean.toFixed(1)}
)}
{nearEvents.length > 0 && (
{nearEvents.map((ev, i) => (
{ev.year}
{ev.label}
))}
)}
);
})()}
{/* Legend */}
{[...selectedYears].sort((a,b)=>b-a).map(yr => (
setPinnedYear(p => p === yr ? null : yr)}
style={{
cursor:'pointer', userSelect:'none', padding:'2px 6px',
opacity: pinnedYear && pinnedYear !== yr ? 0.3 : yr === latestYear ? 1 : 0.7,
outline: pinnedYear === yr ? `1px solid ${yearColor(yr)}` : 'none',
borderRadius: 4,
}}>
{yr}
))}
{showStats && (
<>
Média histórica
P25–P75
Mín–Máx
)}
);
};
// ── Edgebeef Controls — componente separado, igual ao ChartControls do BeefBR ──
function EdgebeeefControls({
years, selectedYears, setSelectedYears,
showStats, setShowStats,
showEvents, setShowEvents,
chartStyle, setChartStyle,
}) {
const { useState, useEffect, useRef } = React;
const [dropOpen, setDropOpen] = useState(false);
const dropRef = useRef(null);
const presets = [
{ label: '3a', yrs: years.slice(-3) },
{ label: '5a', yrs: years.slice(-5) },
{ label: '10a', yrs: years.slice(-10) },
{ label: 'Todos', yrs: years },
];
const activePreset = presets.find(p => {
const valid = p.yrs.filter(y => years.includes(y));
return valid.length === selectedYears.length && valid.every(y => selectedYears.includes(y));
});
const toggleYear = yr => setSelectedYears(prev =>
prev.includes(yr)
? (prev.length === 1 ? prev : prev.filter(y => y !== yr))
: [...prev, yr].sort((a, b) => a - b)
);
useEffect(() => {
if (!dropOpen) return;
const handler = e => {
if (dropRef.current && !dropRef.current.contains(e.target)) setDropOpen(false);
};
document.addEventListener('mousedown', handler);
return () => document.removeEventListener('mousedown', handler);
}, [dropOpen]);
return (
{/* Row 1: presets de ano + dropdown */}
{presets.map(p => (
))}
{dropOpen && (
{years.slice().reverse().map(yr => (
toggleYear(yr)}>
{selectedYears.includes(yr) ? '✓' : ''}
{yr}
))}
)}
{/* Row 2: toggles + estilo */}
Bloomberg · EDGEBEEF Index · Margem dos Frigoríficos
EdgeBeef
{latestRaw && (<>
{latestRaw.value.toFixed(1)}
USD/cwt
= 0 ? 'is-up' : 'is-down'}`}>
{fmtPct(yoy)} YoY
{window.MONTHS_PT[latestRaw.month - 1]}/{String(latestRaw.year).slice(-2)}
)}
);
};
// ── Ciclo do Boi US ───────────────────────────────────────────────────────────
const CicloBoiUS = ({ data, accent, events = [], showEvents = true }) => {
const W = 1000, H = 340;
const padL = 56, padR = 64, padT = 20, padB = 40;
const chartW = W - padL - padR;
const chartH = H - padT - padB;
// Mesma lógica de cores do CicloDoBoi do BeefBR
function accentHue(c) {
const m = /oklch\([^)]+\)/.exec(c);
if (!m) return 160;
const parts = m[0].match(/[\d.]+/g);
return parts ? parseFloat(parts[2]) : 160;
}
const rawColor = `oklch(0.60 0.07 ${accentHue(accent) + 200})`;
const femPoints = React.useMemo(() => {
return (data.beef_us || [])
.filter(r => r.pct_femeas != null)
.sort((a, b) => a.year !== b.year ? a.year - b.year : a.month - b.month)
.map(r => ({ year: r.year, month: r.month, t: r.year + (r.month - 1) / 12, v: r.pct_femeas }));
}, [data]);
const boiPoints = React.useMemo(() => {
return (data.beef_us || [])
.filter(r => r.boi_bezerro_mm12 != null && typeof r.boi_bezerro_mm12 === 'number')
.sort((a, b) => a.year !== b.year ? a.year - b.year : a.month - b.month)
.map(r => ({ year: r.year, month: r.month, t: r.year + (r.month - 1) / 12, v: r.boi_bezerro_mm12 }));
}, [data]);
const [hover, setHover] = React.useState(null);
const { shouldRender: showEventsRender, isLeaving: eventsLeaving } = window.useFadeOut(showEvents, 400);
const tMin = femPoints.length ? femPoints[0].t : 2000;
const tMax = femPoints.length ? femPoints[femPoints.length - 1].t : 2026;
if (!femPoints.length) {
return (
Aguardando dados do ciclo...
);
}
const femVals = femPoints.map(p => p.v);
const femPad = (Math.max(...femVals) - Math.min(...femVals)) * 0.15;
const vLeftMin = Math.floor((Math.min(...femVals) - femPad) / 2) * 2;
const vLeftMax = Math.ceil((Math.max(...femVals) + femPad) / 2) * 2;
const boiVals = boiPoints.map(p => p.v);
const boiPad = (Math.max(...boiVals) - Math.min(...boiVals)) * 0.15;
const vRightMin = Math.floor((Math.min(...boiVals) - boiPad) * 20) / 20;
const vRightMax = Math.ceil((Math.max(...boiVals) + boiPad) * 20) / 20;
const xs = t => padL + ((t - tMin) / ((tMax - tMin) || 1)) * chartW;
const ysLeft = v => padT + (1 - (v - vLeftMin) / ((vLeftMax - vLeftMin) || 1)) * chartH;
const ysRight = v => padT + (1 - (v - vRightMin) / ((vRightMax - vRightMin) || 1)) * chartH;
const femPath = femPoints.map((p, i) => `${i===0?'M':'L'}${xs(p.t).toFixed(1)},${ysLeft(p.v).toFixed(1)}`).join(' ');
const boiPath = boiPoints.map((p, i) => `${i===0?'M':'L'}${xs(p.t).toFixed(1)},${ysRight(p.v).toFixed(1)}`).join(' ');
const leftTicks = [], rightTicks = [];
for (let v = Math.ceil(vLeftMin/2)*2; v <= vLeftMax; v += 2) leftTicks.push(v);
const rStep = 0.05;
for (let v = Math.round(vRightMin/rStep)*rStep; v <= vRightMax+0.001; v = Math.round((v+rStep)*1000)/1000) rightTicks.push(v);
const xTicks = [];
for (let yr = Math.ceil(tMin); yr <= Math.floor(tMax); yr++) {
if (yr % 2 === 0) xTicks.push(yr);
}
const [mouseY, setMouseY] = React.useState(0);
const onMove = e => {
const rect = e.currentTarget.getBoundingClientRect();
const px = (e.clientX - rect.left) * (W / rect.width);
const py = (e.clientY - rect.top) * (H / rect.height);
const t = tMin + ((px - padL) / chartW) * (tMax - tMin);
let best = null, bestDist = Infinity;
for (const p of femPoints) {
const d = Math.abs(p.t - t);
if (d < bestDist) { bestDist = d; best = p; }
}
setHover(best);
setMouseY(py);
};
const hoverBoi = hover ? boiPoints.find(p => p.year === hover.year && p.month === hover.month) : null;
const EVENT_COLOR = 'oklch(0.85 0.18 80)';
// Evento mais próximo do hover (tolerância ±1 mês)
const nearEvent = hover && showEvents
? events.find(ev => {
const evT = ev.year + (ev.month - 1) / 12;
return Math.abs(hover.t - evT) < 0.09;
})
: null;
return (
{hover && (() => {
const xPos = xs(hover.t);
const isRightSide = xPos > chartW * 0.75;
const style = {
left: `${(xPos / W * 100).toFixed(1)}%`,
top: Math.max(10, Math.min(H - 120, mouseY - 40)),
transform: isRightSide ? 'translateX(calc(-100% - 16px))' : 'translateX(16px)',
};
return (
{window.MONTHS_PT[hover.month-1]}/{hover.year}
%Fêmeas
{hover.v.toFixed(1)} %
{hoverBoi && (
Boi/Bezerro
{hoverBoi.v.toFixed(3)}
)}
{nearEvent && (
{nearEvent.year}
{nearEvent.label}
)}
);
})()}
%Fêmeas (mensal)
Boi/Bezerro MM12M (eixo direito)
);
};
// ── Tab ───────────────────────────────────────────────────────────────────────
function BeefUSTab({ data, accent }) {
const chartAccent = 'oklch(0.78 0.15 160)';
const [showEventsCiclo, setShowEventsCiclo] = React.useState(true);
const [prodPairIdx, setProdPairIdx] = React.useState(0);
return (
USDA · Ciclo pecuário
Ciclo do Boi
%Fêmeas no Abate + Boi/Bezerro MM12M
);
}
Object.assign(window, { BeefUSTab });