);
}
// ============================================================
// Donut chart (single value)
// ============================================================
function Donut({ value, max = 100, size = 100, stroke = 8, color = "var(--accent)", label, sub }) {
const dark = useDarkMode();
const r = (size - stroke) / 2;
const c = 2 * Math.PI * r;
const pct = Math.min(100, Math.max(0, (value / max) * 100));
const dash = (pct / 100) * c;
return (
{label || `${pct.toFixed(0)}%`}
{sub && {sub}}
);
}
// Export to window so other babel files can use
Object.assign(window, {
fmt, PH, Icon, Btn, IconBtn, SectionHead, Delta, KPI, Tabs, Modal, ToastProvider, useToast,
Spark, BarChart, LineChart, Progress, Empty, Donut, useDarkMode,
DualDelta, KPIDual, HealthScore, RadarChart, Narrative, PeriodPills,
Tooltip, InfoDot, GLOSSARY,
});
// ============================================================
// Tooltip — lightweight hover/focus popup (positioned on top)
// ============================================================
function Tooltip({ children, content, side = "top", width = 260, delay = 200 }) {
const [show, setShow] = useState(false);
const [pos, setPos] = useState({ top: 0, left: 0, side: side });
const ref = useRef(null);
const timer = useRef(null);
// Cálculo via getBoundingClientRect + auto-flip + clamp.
// - Auto-flip: se side="top" não cabe acima do anchor, flipa pra "bottom" (e vice-versa)
// - Clamp horizontal: tooltip nunca vaza pelas bordas esquerda/direita da viewport
// - Tooltip é portalizado no document.body, então coords são em viewport puro
// (escapa de qualquer transform ancestral — necessário pra tablet preview)
const computePos = useCallback(() => {
if (!ref.current) return;
const r = ref.current.getBoundingClientRect();
const margin = 8;
const half = width / 2;
// Estimativa conservadora de altura do tooltip (não temos a altura real antes do render)
const estimatedHeight = 100;
// Auto-flip vertical
let effSide = side;
if (side === "top" && r.top < estimatedHeight + margin) effSide = "bottom";
if (side === "bottom" && r.bottom + estimatedHeight + margin > window.innerHeight) effSide = "top";
// Clamp horizontal
let cx = r.left + r.width / 2;
const minCx = half + margin;
const maxCx = window.innerWidth - half - margin;
if (cx < minCx) cx = minCx;
if (cx > maxCx) cx = maxCx;
const top = effSide === "top" ? r.top - 8 : r.bottom + 8;
setPos({ top, left: cx, side: effSide });
}, [side, width]);
const open = useCallback(() => {
clearTimeout(timer.current);
timer.current = setTimeout(() => {
computePos();
setShow(true);
}, delay);
}, [delay, computePos]);
const close = useCallback(() => {
clearTimeout(timer.current);
setShow(false);
}, []);
useEffect(() => () => clearTimeout(timer.current), []);
// Reposiciona em scroll/resize enquanto aberto
useEffect(() => {
if (!show) return;
const handler = () => computePos();
window.addEventListener("scroll", handler, true);
window.addEventListener("resize", handler);
return () => {
window.removeEventListener("scroll", handler, true);
window.removeEventListener("resize", handler);
};
}, [show, computePos]);
// Tooltip portalizado no document.body — necessário pra escapar de qualquer
// transform ancestral (ex: tablet preview tem scale). Position: fixed dentro
// de um ancestral com transform é resolvido relativo ao bezel transformado,
// NÃO ao viewport. Portal pro body é a única solução correta.
const effSide = pos.side;
const tooltipNode = show && typeof document !== "undefined"
? ReactDOM.createPortal(
{content}
{/* arrow */}
,
document.body
)
: null;
return (
{children}
{tooltipNode}
);
}
// ============================================================
// InfoDot — small (i) icon that shows a tooltip with the explanation
// ============================================================
function InfoDot({ children, content, side = "top", width = 280 }) {
return (
Info
);
}
// ============================================================
// GLOSSARY — central source of truth for metric definitions
// Used by Tooltip / InfoDot throughout the app.
// ============================================================
const GLOSSARY = {
pa: { title: "P.A. · Peças por Atendimento", desc: "Média de peças vendidas por cliente atendido. Quanto maior, melhor o cross-sell." },
tkm: { title: "T.K.M. · Ticket Médio do Atendimento", desc: "Faturamento total ÷ número de atendimentos. Indica o valor médio gasto por cliente." },
pm: { title: "P.M. · Preço Médio", desc: "Faturamento total ÷ peças vendidas. Reflete posicionamento e mix vendido." },
mkp: { title: "MKP · Markup", desc: "Preço de venda ÷ custo. 2,42× significa que o preço é 2,42 vezes o custo. Quanto maior, melhor a margem." },
yoy: { title: "YoY · Year over Year", desc: "Comparativo com o mesmo período do ano anterior. Indica o crescimento real, descontada a sazonalidade." },
cobertura: { title: "Cobertura de estoque", desc: "Estoque atual ÷ venda média diária. Em quantos dias o estoque atual aguenta se a venda continuar no ritmo médio." },
ruptura: { title: "Ruptura", desc: "SKUs com estoque zerado ÷ SKUs ativos. Mede a indisponibilidade da rede e impacto direto em vendas perdidas." },
conv: { title: "Conversão", desc: "Atendimentos com venda ÷ total de atendimentos. Mede a eficiência da equipe em fechar a venda." },
mape: { title: "MAPE · Mean Absolute Percentage Error", desc: "Erro médio absoluto em % entre o previsto e o realizado. Quanto menor, mais preciso o modelo." },
meta: { title: "Meta", desc: "Objetivo de venda definido para o período. Cobrança proporcional ao dia/semana corrente." },
margem: { title: "Margem", desc: "(Venda - custo) ÷ venda. Diferente de MKP, expressa o percentual de lucro sobre o preço final." },
health: { title: "Saúde da operação", desc: (
Nota composta de 0 a 100, atualizada a cada 15 min:
• Vendas vs. meta · 30%
• Crescimento YoY · 25%
• Ruptura (inversa) · 20%
• Cobertura · 15%
• MKP médio · 10%
) },
confianca: { title: "Confiança da previsão", desc: "Probabilidade de o valor real cair dentro do intervalo previsto. 90% significa que em 9 de 10 períodos a venda real ficará entre os limites Lo e Hi." },
};
// ============================================================
// DualDelta — two stacked YoY values (vs período anterior + vs ano anterior)
// ============================================================
function DualDelta({ vsPrev, vsYear, prevLabel = "vs. anterior", yearLabel = "vs. 2025", inversed = false }) {
// inversed: when "down is good" (e.g., ruptura)
const colorOf = (v) => {
const positive = inversed ? v <= 0 : v >= 0;
return positive ? "var(--pos)" : "var(--neg)";
};
const arrowOf = (v) => {
if (inversed) return v <= 0 ? "trending-down" : "trending-up";
return v >= 0 ? "trending-up" : "trending-down";
};
const Row = ({ v, label }) => (
{v > 0 ? "+" : ""}{v.toFixed(1)}%{label}
);
return (
{vsPrev != null && }
{vsYear != null && }
);
}
// ============================================================
// KPIDual — KPI tile with dual YoY (vs prev + vs year)
// ============================================================
function KPIDual({ label, value, vsPrev, vsYear, icon, accent = false, format = "money", compact = true, hint, inversed = false, info }) {
const display = typeof value === "string" ? value
: format === "money" ? fmt.money(value, { compact })
: format === "int" ? fmt.int(value)
: format === "pct" ? fmt.pct(value)
: format === "num" ? fmt.num(value)
: value;
return (