// Main app — 2 tabs (Preços/Spreads, Abates) const { useState, useEffect, useMemo, useRef, useCallback } = React; const PALETTES = { neon: { name: 'Néon', accent: 'oklch(0.82 0.18 155)' }, cyan: { name: 'Ciano', accent: 'oklch(0.78 0.14 210)' }, amber: { name: 'Âmbar', accent: 'oklch(0.78 0.16 75)' }, magenta: { name: 'Magenta', accent: 'oklch(0.72 0.20 340)' }, terracotta: { name: 'Terracota', accent: 'oklch(0.65 0.13 45)' }, ice: { name: 'Gelo', accent: 'oklch(0.88 0.04 240)' }, }; const TYPE_STACKS = { modern: { name: 'Moderno', sans: '"Inter Tight", system-ui, sans-serif', mono: '"Geist Mono", ui-monospace, monospace' }, editorial: { name: 'Editorial', sans: '"Instrument Serif", Georgia, serif', mono: '"JetBrains Mono", monospace' }, swiss: { name: 'Suíça', sans: '"Space Grotesk", system-ui, sans-serif', mono: '"Space Mono", ui-monospace, monospace' }, humanist: { name: 'Humanista', sans: '"Work Sans", system-ui, sans-serif', mono: '"IBM Plex Mono", ui-monospace, monospace' }, }; function App({ data: propData, initialData, initialMeta }) { const TWEAK_DEFAULTS = { palette: 'neon', typography: 'modern', density: 'comfortable', theme: 'aurora' }; // ── Todos os hooks ANTES de qualquer return condicional ────────────────────── const [data, setData] = useState(propData || initialData); const [meta, setMeta] = useState(initialMeta || null); const [tweaks, setTweaks] = useState(TWEAK_DEFAULTS); const [editMode, setEditMode] = useState(false); const [tab, setTab] = useState('precos'); const [activeDataset, setActiveDataset] = useState('beef_br'); useEffect(() => { const onUpload = (e) => { if (e.detail?.data) { setData(e.detail.data); setMeta(e.detail.meta || null); } }; window.addEventListener('dashboard-data-updated', onUpload); return () => window.removeEventListener('dashboard-data-updated', onUpload); }, []); // Cross-tab navigation from the ticker (clicking ABATES on Preços tab → switch // to Abates and let the ticker re-trigger the scroll once the card is mounted). useEffect(() => { const onGoto = (e) => { const t = e.detail?.target || ''; const precosCards = ['card-cattle','card-carne-mi','card-carne-me','card-spread-mi','card-spread-me']; const abatesCards = ['card-abates','card-femeas','card-ciclo']; const poultryCards = ['card-frango-mi','card-frango-me','card-feed-grain','card-spread-mi-frango','card-spread-me-frango','card-abates-frango','card-chick-placed']; if (poultryCards.includes(t)) { setActiveDataset('poultry_br'); setTab(['card-abates-frango','card-chick-placed'].includes(t) ? 'abates' : 'precos'); } else { if (activeDataset !== 'beef_br') setActiveDataset('beef_br'); if (precosCards.includes(t)) setTab('precos'); else if (abatesCards.includes(t)) setTab('abates'); } }; window.addEventListener('rx-goto-card', onGoto); return () => window.removeEventListener('rx-goto-card', onGoto); }, [activeDataset]); useEffect(() => { const onMsg = (e) => { const m = e.data; if (!m || typeof m !== 'object') return; if (m.type === '__activate_edit_mode') setEditMode(true); else if (m.type === '__deactivate_edit_mode') setEditMode(false); }; window.addEventListener('message', onMsg); window.parent.postMessage({ type: '__edit_mode_available' }, '*'); return () => window.removeEventListener('message', onMsg); }, []); const updateTweak = (key, val) => { setTweaks(prev => { const next = { ...prev, [key]: val }; window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [key]: val } }, '*'); return next; }); }; // chartAccent — cor passada aos gráficos (linha do ano mais recente, barras) // Poultry BR usa o mesmo verde/tema dos outros; só o UI fica âmbar const accent = activeDataset === 'beef_us' ? 'oklch(0.72 0.18 240)' : tweaks.accent || PALETTES[tweaks.palette].accent; // uiAccent — CSS var, sidebar highlights, logo box const uiAccent = activeDataset === 'beef_us' ? 'oklch(0.72 0.18 240)' : activeDataset === 'poultry_br' ? 'oklch(0.78 0.18 85)' : accent; const typeStack = TYPE_STACKS[tweaks.typography]; useEffect(() => { document.documentElement.dataset.density = tweaks.density; document.documentElement.dataset.theme = tweaks.theme || 'refined'; const themeAccent = (window.THEMES && window.THEMES[tweaks.theme]?.accent) || uiAccent; const finalAccent = activeDataset === 'beef_us' ? 'oklch(0.72 0.18 240)' : activeDataset === 'poultry_br' ? 'oklch(0.78 0.18 85)' : themeAccent; document.documentElement.style.setProperty('--accent', finalAccent); document.documentElement.style.setProperty('--font-sans', typeStack.sans); document.documentElement.style.setProperty('--font-mono', typeStack.mono); }, [uiAccent, typeStack, tweaks.density, tweaks.theme, activeDataset]); const onUpload = (d, m) => { setData(d); setMeta(m); window.__dashboardData = d; window.__dashboardMeta = m; }; if (!data) { return (

Setorial

acompanhamento setorial
Nenhum dado encontrado
Faça upload da planilha BeefBR.xlsm ou BeefUS.xlsm para começar.
); } return (
{activeDataset === 'beef_us' ? ( ) : activeDataset === 'poultry_br' ? ( ) : tab === 'precos' ? ( ) : ( )}
{editMode && }
); } // ---------------- Sidebar ---------------- const SIcon = { bar: , abates: , cow: , pig: , chicken: , }; function Sidebar({ tab, setTab, activeDataset, setActiveDataset }) { const onPick = (ds, sub) => { setActiveDataset(ds); if (sub) setTab(sub); }; const isBR = activeDataset === 'beef_br'; const isUS = activeDataset === 'beef_us'; const isPoultry = activeDataset === 'poultry_br'; return ( ); } function TopBar({ meta, onUpload, activeDataset }) { const title = activeDataset === 'poultry_br' ? 'POULTRY' : 'BEEF'; const suffix = activeDataset === 'beef_us' ? 'US' : 'BR'; const currentMeta = activeDataset === 'beef_us' ? (meta?.us ?? null) : activeDataset === 'poultry_br' ? (meta?.poultry_br ?? null) : (meta?.br ?? (meta?.updated ? meta : null)); return (

{title} {suffix}

); } // ---------------- Preços Tab ---------------- function PrecosTab({ data, accent }) { const computedBeef = useMemo(() => data.beef.map(r => ({ ...r, carcass_mi_usd: (r.beef_carcass_brl_kg != null && r.usdbrl) ? r.beef_carcass_brl_kg / r.usdbrl : null, })), [data]); const computedData = useMemo(() => ({ ...data, beef: computedBeef }), [data, computedBeef]); return (

Spreads

); } // ---------------- Abates Tab ---------------- function AbatesTab({ data, accent }) { const [abatesSource, setAbatesSource] = useState('sidra'); const [showEventsCiclo, setShowEventsCiclo] = useState(true); const abatesDataset = abatesSource === 'sidra' ? 'abates' : 'beef'; const abatesField = abatesSource === 'sidra' ? 'total' : 'abates_total'; const abatesSub = abatesSource === 'sidra' ? 'SIDRA · Cabeças abatidas' : 'SIF · Cabeças abatidas'; return (
} />
SIF · Ciclo pecuário

Ciclo do Boi

Série mensal + média móvel 12 meses (MM12)
); } // ---------------- PriceCard ---------------- function PriceCard({ title, sub, accent, data, dataset, field, usdField, unit, usdUnit, hasUSD, decimals, big, fullWidth, height = 320, headerExtra, cardId, events: eventsProp, footerNote, }) { const eventsData = eventsProp !== undefined ? eventsProp : (window.EVENTS || []); const years = useMemo(() => window.availableYears(data, dataset, field), [data, dataset, field]); const latest = years[years.length - 1]; const defaultYears = useMemo( () => [latest, latest-1, latest-2, latest-3, latest-4].filter(y => years.includes(y)), [latest, years.join(',')] ); const [selectedYears, setSelectedYears] = useState(defaultYears); const [showStats, setShowStats] = useState(false); const [showEvents, setShowEvents] = useState(true); const [chartStyle, setChartStyle] = useState('line'); const [currency, setCurrency] = useState('brl'); const activeField = (hasUSD && currency === 'usd' && usdField) ? usdField : field; const activeUnit = (hasUSD && currency === 'usd') ? (usdUnit || 'US$/kg') : unit; const latestRow = window.latestNonNull(data, dataset, activeField); const latestValue = latestRow?.[activeField]; const prevMonthRow = latestRow ? data[dataset].find(r => { const m2 = latestRow.month === 1 ? 12 : latestRow.month - 1; const y2 = latestRow.month === 1 ? latestRow.year - 1 : latestRow.year; return r.year === y2 && r.month === m2; }) : null; const yoyRow = latestRow ? data[dataset].find(r => r.year === latestRow.year - 1 && r.month === latestRow.month ) : null; const pctChange = (a, b) => (a == null || b == null || b === 0) ? null : (a - b) / Math.abs(b); const mom = pctChange(latestValue, prevMonthRow?.[activeField]); const yoy = pctChange(latestValue, yoyRow?.[activeField]); const fmtPct = (v) => v == null ? '—' : (v >= 0 ? '+' : '') + (v*100).toFixed(1) + '%'; return (
{sub}

{title}

{window.fmt(latestValue, {decimals, big})} {activeUnit} = 0 ? 'is-up' : 'is-down'}`}> {fmtPct(mom)} MoM = 0 ? 'is-up' : 'is-down'}`}> {fmtPct(yoy)} YoY {latestRow && ( {window.MONTHS_PT[latestRow.month-1]}/{String(latestRow.year).slice(-2)} )}
{headerExtra}
{footerNote && (
{footerNote}
)}
); } // ---------------- ChartControls ---------------- function ChartControls({ years, selectedYears, setSelectedYears, showStats, setShowStats, showEvents, setShowEvents, chartStyle, setChartStyle, currency, setCurrency, hasUSD, events, }) { const eventsData = events || window.EVENTS || []; const latest = years[years.length - 1]; const [dropOpen, setDropOpen] = useState(false); const [showEventsList, setShowEventsList] = useState(false); const dropRef = useRef(null); const eventsTimerRef = useRef(null); const presets = [ { label: '3a', yrs: [latest, latest-1, latest-2] }, { label: '5a', yrs: [latest, latest-1, latest-2, latest-3, latest-4] }, { label: '10a', yrs: Array.from({length:10}, (_, i) => latest - i) }, { label: 'Todos', yrs: years }, ]; const applyPreset = (yrs) => setSelectedYears(yrs.filter(y => years.includes(y))); 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]); const onEventsEnter = () => { eventsTimerRef.current = setTimeout(() => setShowEventsList(true), 3000); }; const onEventsLeave = () => { clearTimeout(eventsTimerRef.current); setShowEventsList(false); }; const activeEvents = eventsData.filter(e => selectedYears.includes(e.year)); return (
{/* Row 1: year presets as unified segmented control */}
{presets.map(p => ( ))}
{dropOpen && (
{years.slice().reverse().map(yr => (
toggleYear(yr)}> {selectedYears.includes(yr) ? '✓' : ''} {yr}
))}
)}
{/* Row 2: toggles + chart style + currency */}
{showEventsList && (
Eventos nos anos selecionados
{activeEvents.length === 0 ? (
Nenhum evento nos anos selecionados.
) : activeEvents.map((ev, i) => (
{window.MONTHS_PT[ev.month-1]}/{ev.year} {ev.label}
))}
)}
{[['line','Linha'],['area','Área'],['bars','Barras']].map(([v, l]) => ( ))}
{hasUSD && (
)}
); } // ---------------- Toggle ---------------- function Toggle({ label, value, onChange, disabled }) { return ( ); } // ---------------- TweaksPanel ---------------- function TweaksPanel({ tweaks, updateTweak }) { return ( ); } // ---------------- TickerBar ---------------- // Maps each ticker symbol → the data-card-id of the chart card it represents. // The card itself sets that data-card-id (see PriceCard / AbatesTab below). function TickerBar({ data, activeDataset }) { const trackRef = useRef(null); const hoveredRef = useRef(false); const posRef = useRef(0); const velRef = useRef(0.8); const requestRef = useRef(); const items = useMemo(() => { const ds = activeDataset === 'beef_us' ? 'beef_us' : activeDataset === 'poultry_br' ? 'frango' : 'beef'; if (!data[ds] || !data[ds].length) return []; const rows = data[ds]; const fields = activeDataset === 'beef_us' ? [ ['EDGEBEEF', 'edgebeef_value', '$/cwt', 'us-edgebeef'], ['%FÊMEAS', 'pct_femeas', '%', 'us-ciclo'], ['USD/BRL', 'usdbrl', 'R$', null], ['ABATES', 'abates_total', 'cab', 'us-production'], ['BOI', 'preco_boi', '¢/lb', 'us-ciclo'], ['BEZERRO', 'preco_bezerro', '¢/lb', 'us-ciclo'], ] : activeDataset === 'poultry_br' ? [ ['FRANGO·MI', 'frango_mi_brl_kg', 'R$/kg', 'card-frango-mi'], ['FRANGO·ME', 'frango_me_brl_kg', 'R$/kg', 'card-frango-me'], ['FEED·GRAIN', 'feed_grain_brl_kg', 'R$/kg', 'card-feed-grain'], ['SPREAD·MI', 'spread_mi', 'R$/kg', 'card-spread-mi-frango'], ['SPREAD·ME', 'spread_me', 'R$/kg', 'card-spread-me-frango'], ['ABATES·SIF', 'abates_sif', 'cab', 'card-abates-frango'], ['CHICK·PL', 'chick_placed', 'cab', 'card-chick-placed'], ] : [ ['BOI', 'cattle_brl_kg', 'R$/kg', 'card-cattle'], ['CARNE·MI', 'beef_carcass_brl_kg', 'R$/kg', 'card-carne-mi'], ['CARNE·ME', 'beef_me_brl_kg', 'R$/kg', 'card-carne-me'], ['SPREAD·MI', 'spread_mi', 'R$/kg', 'card-spread-mi'], ['SPREAD·ME', 'spread_me', 'R$/kg', 'card-spread-me'], ['USD/BRL', 'usdbrl', 'R$', null], ['ABATES', 'abates_total', 'cab', 'card-abates'], ['%FÊMEAS', 'pct_femeas', '%', 'card-femeas'], ]; return fields.map(([sym, f, u, target]) => { let last = null, prev = null; for (let i = rows.length - 1; i >= 0; i--) { if (rows[i][f] != null) { if (last == null) last = rows[i]; else { prev = rows[i]; break; } } } if (!last) return null; const v = last[f], p = prev?.[f]; const delta = (p == null || p === 0) ? null : (v - p) / Math.abs(p); return { sym, value: v, unit: u, delta, field: f, target }; }).filter(Boolean); }, [data, activeDataset]); const COPIES = 4; // cópias suficientes para sempre ter buffer à direita const oneWidthRef = useRef(0); // largura de uma cópia, medida após mount // Reset posição e largura sempre que o dataset mudar — evita o "tilt" // causado por oneWidthRef desatualizado ao trocar de aba useEffect(() => { posRef.current = 0; oneWidthRef.current = 0; }, [activeDataset]); const animate = useCallback(() => { if (!trackRef.current) { requestRef.current = requestAnimationFrame(animate); return; } const targetVel = hoveredRef.current ? 0 : 0.8; velRef.current += (targetVel - velRef.current) * 0.04; if (hoveredRef.current && velRef.current < 0.001) velRef.current = 0; posRef.current -= velRef.current; // Mede a largura de uma cópia na primeira vez (ou após reset de dataset) if (oneWidthRef.current === 0 && trackRef.current.scrollWidth > 0) { oneWidthRef.current = trackRef.current.scrollWidth / COPIES; } // while em vez de if: corrige qualquer drift acumulado no mesmo frame while (oneWidthRef.current > 0 && posRef.current <= -oneWidthRef.current) { posRef.current += oneWidthRef.current; } trackRef.current.style.transform = `translateX(${posRef.current.toFixed(2)}px)`; requestRef.current = requestAnimationFrame(animate); }, []); useEffect(() => { requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current); }, [animate]); const onMouseEnter = () => { hoveredRef.current = true; }; const onMouseLeave = () => { hoveredRef.current = false; }; const onItemClick = (target) => { if (!target) return; const el = document.querySelector(`[data-card-id="${target}"]`); if (el) { const top = el.getBoundingClientRect().top + window.scrollY - 80; window.scrollTo({ top, behavior: 'smooth' }); // Web Animations API — sem manipular classes CSS, sem interferir com rx-fade-up const accentRaw = getComputedStyle(document.documentElement).getPropertyValue('--accent').trim(); if (el._rxCardAnim) { try { el._rxCardAnim.cancel(); } catch (_) {} } el._rxCardAnim = el.animate([ { boxShadow: `0 0 0 0 color-mix(in oklch, ${accentRaw} 60%, transparent)` }, { boxShadow: `0 0 0 10px color-mix(in oklch, ${accentRaw} 0%, transparent)`, offset: 0.6 }, { boxShadow: '0 0 0 0 transparent' }, ], { duration: 1400, easing: 'cubic-bezier(0.2, 0.8, 0.2, 1)', fill: 'none' }); } else { window.dispatchEvent(new CustomEvent('rx-goto-card', { detail: { target } })); setTimeout(() => onItemClick(target), 80); } }; if (!items.length) return null; const tape = Array.from({ length: COPIES }, () => items).flat(); return (
{tape.map((it, i) => { const fmt = it.unit === 'cab' ? Math.round(it.value).toLocaleString('pt-BR') : it.unit === '%' ? it.value.toFixed(1) : it.value.toFixed(2).replace('.', ','); const dir = it.delta == null ? '' : it.delta >= 0 ? 'is-up' : 'is-down'; const arrow = it.delta == null ? '' : it.delta >= 0 ? '▲' : '▼'; const pct = it.delta == null ? '' : ((it.delta >= 0 ? '+' : '') + (it.delta * 100).toFixed(2) + '%'); return ( onItemClick(it.target)} title={it.target ? 'Ir para o gráfico' : ''}> {it.sym} {fmt} {it.unit} {it.delta != null && ( {arrow} {pct} )} ); })}
); } Object.assign(window, { App, PriceCard });