/* global React, ReactDOM, Recharts */
(() => {
"use strict";
const { useState, useEffect, useMemo, useRef, useCallback } = React;
const {
ResponsiveContainer,
LineChart, Line,
BarChart, Bar, Cell,
XAxis, YAxis, CartesianGrid, Tooltip,
Legend, LabelList,
} = Recharts;
// --------------------------- constants ---------------------------
const AUTH_KEY = "vesti.auth.ok";
const SQL_PERFIS = ["Pro", "Starter", "Qualificado (Sem Faixa)"];
const MONTH_LABELS_FULL = [
"Janeiro","Fevereiro","Março","Abril","Maio","Junho",
"Julho","Agosto","Setembro","Outubro","Novembro","Dezembro",
];
const MONTH_LABELS_SHORT = ["Jan","Fev","Mar","Abr","Mai","Jun","Jul","Ago","Set","Out","Nov","Dez"];
const DOW_LABELS = ["Domingo","Segunda","Terça","Quarta","Quinta","Sexta","Sábado"];
const DOW_SHORT = ["Dom","Seg","Ter","Qua","Qui","Sex","Sáb"];
const ORIGEM_ALIASES = {
"[SALES] Chanel": "Mídia paga",
"[SALES]Chanel": "Mídia paga",
};
function canonicalOrigem(o) {
return ORIGEM_ALIASES[o] ?? o;
}
// --------------------------- utils ---------------------------
function parseLeadDate(s) {
if (!s) return null;
const parts = String(s).trim().split(/\s+/);
const [dd, mm, yyyy] = (parts[0] || "").split("/");
if (!dd || !mm || !yyyy) return null;
const time = parts[1] || "00:00:00";
const iso = `${yyyy}-${mm.padStart(2,"0")}-${dd.padStart(2,"0")}T${time}`;
const d = new Date(iso);
return isNaN(d.getTime()) ? null : d;
}
// Regra calendário: semana vai de domingo a sábado.
// Semana 1 do mês = do dia 1º até o primeiro sábado (inclusive), mesmo que parcial.
function weekOfMonth(d) {
const day = d.getDate();
const firstDow = new Date(d.getFullYear(), d.getMonth(), 1).getDay(); // 0=Dom..6=Sáb
const firstSatDay = 1 + ((6 - firstDow + 7) % 7); // dia 1..7
if (day <= firstSatDay) return 1;
return 1 + Math.ceil((day - firstSatDay) / 7);
}
function weeksInMonth(year, monthIdx) {
const lastDay = new Date(year, monthIdx + 1, 0).getDate();
return weekOfMonth(new Date(year, monthIdx, lastDay));
}
function weekRange(year, monthIdx, weekNum) {
const firstDow = new Date(year, monthIdx, 1).getDay();
const firstSatDay = 1 + ((6 - firstDow + 7) % 7);
const lastDay = new Date(year, monthIdx + 1, 0).getDate();
let start, end;
if (weekNum === 1) {
start = 1;
end = Math.min(firstSatDay, lastDay);
} else {
start = firstSatDay + 1 + (weekNum - 2) * 7;
end = Math.min(start + 6, lastDay);
}
if (start > lastDay) return null;
return `${String(start).padStart(2,"0")}–${String(end).padStart(2,"0")}`;
}
function fmtNumber(n) {
return (n || 0).toLocaleString("pt-BR");
}
function isSqlLead(lead) {
return SQL_PERFIS.includes(lead.perfil);
}
// --------------------------- UI primitives ---------------------------
function Chevron({ open }) {
return (
);
}
function useClickOutside(ref, onOutside) {
useEffect(() => {
const h = (e) => { if (ref.current && !ref.current.contains(e.target)) onOutside(); };
document.addEventListener("mousedown", h);
return () => document.removeEventListener("mousedown", h);
}, [ref, onOutside]);
}
function MultiSelect({ label, options, selected, onChange, placeholder = "Todas" }) {
const [open, setOpen] = useState(false);
const ref = useRef(null);
useClickOutside(ref, () => setOpen(false));
// Aceita string[] ou {value,label}[]
const opts = useMemo(
() => (options || []).map(o =>
(o !== null && typeof o === "object")
? { value: o.value, label: o.label }
: { value: o, label: String(o) }
),
[options]
);
const values = opts.map(o => o.value);
const allSelected = values.length > 0 && selected.length === values.length;
const noneSelected = selected.length === 0;
const getLabel = (v) => {
const hit = opts.find(o => o.value === v);
return hit ? hit.label : String(v);
};
const summary =
noneSelected || allSelected ? placeholder
: selected.length === 1 ? getLabel(selected[0])
: `${selected.length} selecionadas`;
const toggle = (v) => {
onChange(selected.includes(v) ? selected.filter(s => s !== v) : [...selected, v]);
};
const toggleAll = () => onChange(allSelected ? [] : [...values]);
return (
{open && (
)}
);
}
// --------------------------- Header ---------------------------
function Header({ total, updatedAt }) {
const logout = () => {
try { sessionStorage.removeItem(AUTH_KEY); } catch (_) {}
window.location.replace("login.html");
};
return (
);
}
// --------------------------- Filters ---------------------------
function Filters({
origens, perfis, years,
origemSel, setOrigemSel,
perfilSel, setPerfilSel,
year, setYear,
month, setMonth,
dowSel, setDowSel,
onClear,
}) {
const yearOptions = years.map(y => ({ value: y, label: String(y) }));
const monthOptions = MONTH_LABELS_FULL.map((l, i) => ({ value: i + 1, label: l }));
const dowOptions = DOW_LABELS.map((l, i) => ({ value: i, label: l }));
return (
);
}
// --------------------------- KPI Section ---------------------------
function CentralKpi({ total, sql, sqlPct }) {
return (
Total de Leads
{fmtNumber(total)}
SQL
{fmtNumber(sql)}
{sqlPct.toFixed(1).replace(".", ",")}% da base
Starter + Pro + Qualificado (sem faixa)
);
}
function OriginCard({ name, value, pct, accent }) {
return (
{name}
{fmtNumber(value)}
{pct.toFixed(1).replace(".", ",")}%
);
}
function PerfilSqlCard({ name, value, pct, accent, active, onClick }) {
const clickable = typeof onClick === "function";
return (
onClick(name) : undefined}
role={clickable ? "button" : undefined}
tabIndex={clickable ? 0 : undefined}
onKeyDown={clickable ? (e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onClick(name); } } : undefined}
>
{name}
{fmtNumber(value)}
{pct.toFixed(1).replace(".", ",")}% dos SQLs
{sortedOrigens.map((o, i) => (
0 ? ((originCounts[o] || 0) / total) * 100 : 0}
accent={palette[i % palette.length]}
/>
))}
);
}
// --------------------------- Charts ---------------------------
const AXIS_STYLE = { fill: "#6473A0", fontSize: 11 };
const GRID_STROKE = "rgba(43,12,85,0.08)";
function SqlByOriginChart({ data, onBarClick, activeOrigins }) {
if (data.length === 0) {
return Sem dados para o filtro atual.
;
}
const anyActive = activeOrigins && activeOrigins.length > 0;
return (
[fmtNumber(v), "SQLs"]}
/>
onBarClick && entry && onBarClick(entry.origem)}
style={{ cursor: onBarClick ? "pointer" : "default" }}
>
{data.map((entry) => {
const active = !anyActive || activeOrigins.includes(entry.origem);
return (
|
);
})}
fmtNumber(v)}
/>
);
}
function TrendChart({ data, granularity, onPointClick, selectedWeek }) {
if (data.length === 0) {
return Sem dados para o filtro atual.
;
}
const makeDot = (baseColor) => (props) => {
const { cx, cy, payload, index } = props;
if (cx == null || cy == null) return null;
const isSel = granularity === "week" && selectedWeek != null && payload && payload.week === selectedWeek;
return (
);
};
return (
{
if (!onPointClick || !e || !e.activePayload || !e.activePayload[0]) return;
onPointClick(e.activePayload[0].payload);
}}
style={{ cursor: onPointClick ? "pointer" : "default" }}
>
[fmtNumber(v), name]}
labelFormatter={(l, payload) => {
if (granularity === "week") {
const wNum = String(l).replace(/^S/, "");
const range = payload && payload[0] && payload[0].payload && payload[0].payload.range;
return range ? `Semana ${wNum} (${range})` : `Semana ${wNum}`;
}
return l;
}}
/>
fmtNumber(v)}
/>
fmtNumber(v)}
/>
);
}
function DailyChart({ data, onPointClick, selectedDay }) {
if (!data || data.length === 0) {
return Sem dados para o filtro atual.
;
}
const makeDot = (baseColor) => (props) => {
const { cx, cy, payload, index } = props;
if (cx == null || cy == null) return null;
const isSel = selectedDay != null && payload && payload.day === selectedDay;
return (
);
};
return (
{
if (!onPointClick || !e || !e.activePayload || !e.activePayload[0]) return;
onPointClick(e.activePayload[0].payload);
}}
style={{ cursor: onPointClick ? "pointer" : "default" }}
>
[fmtNumber(v), name]}
labelFormatter={(l, payload) => {
const dow = payload && payload[0] && payload[0].payload && payload[0].payload.dow;
return dow ? `Dia ${l} (${dow})` : `Dia ${l}`;
}}
/>
v > 0 ? fmtNumber(v) : ""}/>
v > 0 ? fmtNumber(v) : ""}/>
);
}
function ChartCard({ title, subtitle, children }) {
return (
{title}
{subtitle && {subtitle}}
{children}
);
}
// --------------------------- Background canvas ---------------------------
function initLeadsCanvas() {
const canvas = document.getElementById("leads-canvas");
if (!canvas || !canvas.getContext) return;
const ctx = canvas.getContext("2d");
let w = 0, h = 0, dpr = Math.min(window.devicePixelRatio || 1, 2);
const nodes = []; const COUNT = 42; const LINK_DIST = 130;
const resize = () => {
w = canvas.clientWidth; h = canvas.clientHeight;
canvas.width = w * dpr; canvas.height = h * dpr;
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
};
const init = () => {
nodes.length = 0;
for (let i = 0; i < COUNT; i++) {
nodes.push({
x: Math.random() * w, y: Math.random() * h,
vx: (Math.random() - 0.5) * 0.25, vy: (Math.random() - 0.5) * 0.25,
r: Math.random() * 1.6 + 0.6,
hue: Math.random() < 0.5 ? "#6A52B3" : "#63C19B",
});
}
};
const step = () => {
ctx.clearRect(0,0,w,h);
for (const n of nodes) { n.x += n.vx; n.y += n.vy;
if (n.x < 0 || n.x > w) n.vx *= -1;
if (n.y < 0 || n.y > h) n.vy *= -1; }
for (let i = 0; i < nodes.length; i++)
for (let j = i + 1; j < nodes.length; j++) {
const a = nodes[i], b = nodes[j];
const d = Math.hypot(a.x - b.x, a.y - b.y);
if (d < LINK_DIST) {
const alpha = (1 - d / LINK_DIST) * 0.3;
ctx.strokeStyle = `rgba(106,82,179,${(alpha * 0.55).toFixed(3)})`;
ctx.lineWidth = 0.6;
ctx.beginPath(); ctx.moveTo(a.x, a.y); ctx.lineTo(b.x, b.y); ctx.stroke();
}
}
for (const n of nodes) {
ctx.fillStyle = n.hue;
ctx.beginPath(); ctx.arc(n.x, n.y, n.r, 0, Math.PI * 2); ctx.fill();
}
requestAnimationFrame(step);
};
const onResize = () => { resize(); init(); };
window.addEventListener("resize", onResize);
resize(); init(); step();
}
// --------------------------- App ---------------------------
function App() {
const [raw, setRaw] = useState(null);
const [error, setError] = useState(null);
const [origemSel, setOrigemSel] = useState([]);
const [perfilSel, setPerfilSel] = useState([]);
const [year, setYear] = useState(null); // null = não inicializado; [] = "Todos"
const [month, setMonth] = useState([]);
const [dowSel, setDowSel] = useState([]); // 0..6 (dom..sáb)
const [weekSel, setWeekSel] = useState(null); // 1..6 ou null
const [daySel, setDaySel] = useState(null); // 1..31 ou null
// Load + parse data
useEffect(() => {
fetch("data/data.json", { cache: "no-store" })
.then(r => { if (!r.ok) throw new Error(`HTTP ${r.status}`); return r.json(); })
.then(json => {
const leads = (json.leads || []).map(l => ({
...l,
origem: canonicalOrigem(l.origem),
_d: parseLeadDate(l.data),
}));
const origens = [...new Set((json.origens || []).map(canonicalOrigem))]
.sort((a, b) => a.localeCompare(b, "pt-BR"));
const origem_counts = {};
for (const [k, v] of Object.entries(json.origem_counts || {})) {
const ck = canonicalOrigem(k);
origem_counts[ck] = (origem_counts[ck] || 0) + v;
}
const sql_by_origem = {};
for (const [k, v] of Object.entries(json.sql_by_origem || {})) {
const ck = canonicalOrigem(k);
sql_by_origem[ck] = (sql_by_origem[ck] || 0) + v;
}
setRaw({ ...json, leads, origens, origem_counts, sql_by_origem });
})
.catch(e => setError(e.message || String(e)));
}, []);
// Init background canvas once
useEffect(() => { initLeadsCanvas(); }, []);
// Available years, default to most recent
const years = useMemo(() => {
if (!raw) return [];
const s = new Set();
for (const l of raw.leads) if (l._d) s.add(l._d.getFullYear());
return [...s].sort((a,b) => b - a);
}, [raw]);
useEffect(() => {
if (year === null && years.length > 0) setYear([years[0]]);
}, [years, year]);
// Filtered leads (sem filtro de semana — usado pelo gráfico de evolução)
const baseFiltered = useMemo(() => {
if (!raw) return [];
const ySel = Array.isArray(year) ? year : [];
return raw.leads.filter(l => {
if (origemSel.length > 0 && !origemSel.includes(l.origem)) return false;
if (perfilSel.length > 0 && !perfilSel.includes(l.perfil)) return false;
if (l._d) {
if (ySel.length > 0 && !ySel.includes(l._d.getFullYear())) return false;
if (month.length > 0 && !month.includes(l._d.getMonth() + 1)) return false;
if (dowSel.length > 0 && !dowSel.includes(l._d.getDay())) return false;
} else if (ySel.length > 0 || month.length > 0 || dowSel.length > 0) {
return false;
}
return true;
});
}, [raw, origemSel, perfilSel, year, month, dowSel]);
// Reset de seleções quando perdem contexto
useEffect(() => {
if (month.length !== 1) {
if (weekSel != null) setWeekSel(null);
if (daySel != null) setDaySel(null);
}
}, [month, weekSel, daySel]);
useEffect(() => {
// Se a semana muda e o dia selecionado não pertence à nova semana, reseta
if (daySel != null && weekSel != null && month.length === 1) {
const ySel = Array.isArray(year) ? year : [];
const calYear = ySel.length === 1 ? ySel[0] : new Date().getFullYear();
const w = weekOfMonth(new Date(calYear, month[0]-1, daySel));
if (w !== weekSel) setDaySel(null);
}
}, [weekSel, daySel, month, year]);
// Camada com semana aplicada (usado pelo gráfico diário)
const withWeek = useMemo(() => {
if (weekSel == null || month.length !== 1) return baseFiltered;
return baseFiltered.filter(l => l._d && weekOfMonth(l._d) === weekSel);
}, [baseFiltered, weekSel, month]);
// Camada com dia aplicado (usado pelo gráfico semanal)
const withDay = useMemo(() => {
if (daySel == null || month.length !== 1) return baseFiltered;
return baseFiltered.filter(l => l._d && l._d.getDate() === daySel);
}, [baseFiltered, daySel, month]);
// Filtered final (semana + dia) — usado por cards/KPIs
const filtered = useMemo(() => {
if (daySel == null || month.length !== 1) return withWeek;
return withWeek.filter(l => l._d && l._d.getDate() === daySel);
}, [withWeek, daySel, month]);
// KPIs
const totalLeads = filtered.length;
const sqlLeads = useMemo(() => filtered.filter(isSqlLead).length, [filtered]);
const sqlPct = totalLeads > 0 ? (sqlLeads / totalLeads) * 100 : 0;
const sqlBreakdown = useMemo(() => {
const counts = { "Pro": 0, "Starter": 0, "Qualificado (Sem Faixa)": 0 };
for (const l of filtered) {
if (counts[l.perfil] !== undefined) counts[l.perfil]++;
}
return counts;
}, [filtered]);
const origensAll = raw?.origens || [];
const perfisAll = raw?.perfis || [];
// Origin counts for cards (use selected origens if any, else all)
const visibleOrigens = origemSel.length > 0 ? origemSel : origensAll;
const originCounts = useMemo(() => {
const m = {};
for (const o of visibleOrigens) m[o] = 0;
for (const l of filtered) {
if (m[l.origem] !== undefined) m[l.origem]++;
}
return m;
}, [filtered, visibleOrigens]);
// Chart 1: SQLs by origin — mostra todas as origens sempre (para permitir
// alternar o filtro entre elas) e ignora o filtro de origem na contagem.
const filteredIgnoringOrigem = useMemo(() => {
if (!raw) return [];
const ySel = Array.isArray(year) ? year : [];
return raw.leads.filter(l => {
if (perfilSel.length > 0 && !perfilSel.includes(l.perfil)) return false;
if (l._d) {
if (ySel.length > 0 && !ySel.includes(l._d.getFullYear())) return false;
if (month.length > 0 && !month.includes(l._d.getMonth() + 1)) return false;
if (dowSel.length > 0 && !dowSel.includes(l._d.getDay())) return false;
if (weekSel != null && month.length === 1 && weekOfMonth(l._d) !== weekSel) return false;
if (daySel != null && month.length === 1 && l._d.getDate() !== daySel) return false;
} else if (ySel.length > 0 || month.length > 0 || dowSel.length > 0) {
return false;
}
return true;
});
}, [raw, perfilSel, year, month, dowSel, weekSel, daySel]);
const sqlsByOriginData = useMemo(() => {
const m = {};
for (const o of origensAll) m[o] = 0;
for (const l of filteredIgnoringOrigem) {
if (isSqlLead(l) && m[l.origem] !== undefined) m[l.origem]++;
}
return Object.entries(m)
.map(([origem, sqls]) => ({ origem, sqls }))
.sort((a,b) => b.sqls - a.sqls);
}, [filteredIgnoringOrigem, origensAll]);
// Chart 2: trend over time — granularity depends on filters
const { trendData, trendGranularity, trendSubtitle } = useMemo(() => {
if (!raw) return { trendData: [], trendGranularity: "month-of-year", trendSubtitle: "" };
const ySel = Array.isArray(year) ? year : [];
// Weekly view — exatamente 1 mês selecionado
if (month.length === 1) {
const monthIdx = month[0] - 1;
// Número de semanas do período exibido. Se houver ano fixo, usa ele;
// senão, pega o máximo entre os anos presentes nos dados filtrados.
let numWeeks = 0;
let calYear = null;
if (ySel.length === 1) {
calYear = ySel[0];
numWeeks = weeksInMonth(calYear, monthIdx);
} else {
const yearsPresent = new Set();
for (const l of baseFiltered) if (l._d && l._d.getMonth() === monthIdx) yearsPresent.add(l._d.getFullYear());
for (const y of yearsPresent) {
const n = weeksInMonth(y, monthIdx);
if (n > numWeeks) { numWeeks = n; calYear = y; }
}
if (numWeeks === 0) { calYear = new Date().getFullYear(); numWeeks = weeksInMonth(calYear, monthIdx); }
}
const buckets = Array(numWeeks).fill(null).map(() => ({ leads: 0, sqls: 0 }));
for (const l of withDay) {
if (!l._d) continue;
const w = weekOfMonth(l._d);
if (w >= 1 && w <= numWeeks) {
buckets[w-1].leads++;
if (isSqlLead(l)) buckets[w-1].sqls++;
}
}
const yearLabel = ySel.length === 1 ? ` · ${ySel[0]}` : "";
const selLabel = weekSel != null ? ` · Semana ${weekSel} selecionada` : "";
return {
trendData: buckets.map((b,i) => ({
label: `S${i+1}`,
week: i+1,
range: weekRange(calYear, monthIdx, i+1),
leads: b.leads,
sqls: b.sqls,
})),
trendGranularity: "week",
trendSubtitle: `${MONTH_LABELS_FULL[month[0]-1]}${yearLabel} · por semana${selLabel}`,
};
}
// Monthly view — exatamente 1 ano selecionado e nenhum mês específico
if (ySel.length === 1 && month.length === 0) {
const buckets = Array(12).fill(null).map(() => ({ leads: 0, sqls: 0 }));
for (const l of baseFiltered) {
if (!l._d) continue;
const mo = l._d.getMonth();
buckets[mo].leads++;
if (isSqlLead(l)) buckets[mo].sqls++;
}
return {
trendData: buckets.map((b,i) => ({
label: MONTH_LABELS_SHORT[i], leads: b.leads, sqls: b.sqls, year: ySel[0], month: i+1,
})),
trendGranularity: "month-of-year",
trendSubtitle: `${ySel[0]} · por mês`,
};
}
// Year-month view — qualquer outro caso
const m = new Map();
for (const l of baseFiltered) {
if (!l._d) continue;
const key = `${l._d.getFullYear()}-${String(l._d.getMonth()+1).padStart(2,"0")}`;
const b = m.get(key) || { leads: 0, sqls: 0 };
b.leads++;
if (isSqlLead(l)) b.sqls++;
m.set(key, b);
}
const sorted = [...m.entries()].sort(([a],[b]) => a.localeCompare(b));
return {
trendData: sorted.map(([k,b]) => {
const [y,mo] = k.split("-");
return { label: `${MONTH_LABELS_SHORT[+mo-1]}/${y.slice(2)}`, leads: b.leads, sqls: b.sqls, year: +y, month: +mo };
}),
trendGranularity: "year-month",
trendSubtitle: ySel.length === 0 ? "Todos os períodos · por mês" : `${ySel.join(", ")} · por mês`,
};
}, [baseFiltered, withDay, year, month, weekSel, raw]);
// Daily chart — visível quando exatamente 1 mês selecionado
const dailyInfo = useMemo(() => {
if (!raw || month.length !== 1) return null;
const ySel = Array.isArray(year) ? year : [];
const monthIdx = month[0] - 1;
let calYear = null;
if (ySel.length === 1) {
calYear = ySel[0];
} else {
for (const l of baseFiltered) {
if (l._d && l._d.getMonth() === monthIdx) {
const y = l._d.getFullYear();
if (calYear == null || y > calYear) calYear = y;
}
}
if (calYear == null) calYear = new Date().getFullYear();
}
const lastDay = new Date(calYear, monthIdx + 1, 0).getDate();
const buckets = Array(lastDay).fill(null).map(() => ({ leads: 0, sqls: 0 }));
for (const l of withWeek) {
if (!l._d) continue;
if (l._d.getFullYear() !== calYear || l._d.getMonth() !== monthIdx) continue;
const day = l._d.getDate();
if (day >= 1 && day <= lastDay) {
buckets[day-1].leads++;
if (isSqlLead(l)) buckets[day-1].sqls++;
}
}
const daySelLabel = daySel != null ? ` · Dia ${String(daySel).padStart(2,"0")} selecionado` : "";
return {
data: buckets.map((b, i) => ({
label: String(i + 1).padStart(2, "0"),
day: i + 1,
dow: DOW_SHORT[new Date(calYear, monthIdx, i + 1).getDay()],
leads: b.leads,
sqls: b.sqls,
})),
subtitle: `${MONTH_LABELS_FULL[monthIdx]} · ${calYear} · por dia${daySelLabel}`,
};
}, [raw, withWeek, baseFiltered, year, month, daySel]);
// --- cross-filter handlers ---
const toggleOrigem = useCallback((o) => {
if (!o) return;
setOrigemSel(sel => sel.includes(o) ? sel.filter(x => x !== o) : [...sel, o]);
}, []);
const togglePerfil = useCallback((p) => {
if (!p) return;
setPerfilSel(sel => sel.includes(p) ? sel.filter(x => x !== p) : [...sel, p]);
}, []);
const handleDailyClick = useCallback((payload) => {
if (!payload || payload.day == null) return;
setDaySel(curr => curr === payload.day ? null : payload.day);
}, []);
const handleTrendClick = useCallback((payload) => {
if (!payload) return;
if (trendGranularity === "week" && payload.week != null) {
setWeekSel(curr => curr === payload.week ? null : payload.week);
return;
}
if (trendGranularity === "month-of-year" && payload.month != null) {
setMonth(m => m.includes(payload.month) ? m.filter(x => x !== payload.month) : [...m, payload.month]);
return;
}
if (trendGranularity === "year-month" && payload.year != null && payload.month != null) {
// drill-in: foca naquele período específico
setYear([payload.year]);
setMonth([payload.month]);
}
}, [trendGranularity]);
const clear = useCallback(() => {
setOrigemSel([]); setPerfilSel([]);
setYear([]); setMonth([]);
setDowSel([]);
setWeekSel(null);
setDaySel(null);
}, []);
// --------------------------- render ---------------------------
if (error) {
return (
<>
Falha ao carregar os dados
{error}
);
}
if (!raw) {
return (
<>
Carregando dados…
);
}
return (
<>
0 ? (sqlBreakdown["Pro"] / sqlLeads) * 100 : 0}
accent="#549E86"
active={perfilSel.length === 0 ? undefined : perfilSel.includes("Pro")}
onClick={togglePerfil}
/>
0 ? (sqlBreakdown["Starter"] / sqlLeads) * 100 : 0}
accent="#63C19B"
active={perfilSel.length === 0 ? undefined : perfilSel.includes("Starter")}
onClick={togglePerfil}
/>
0 ? (sqlBreakdown["Qualificado (Sem Faixa)"] / sqlLeads) * 100 : 0}
accent="#6A52B3"
active={perfilSel.length === 0 ? undefined : perfilSel.includes("Qualificado (Sem Faixa)")}
onClick={togglePerfil}
/>
{dailyInfo && (
)}
);
}
const rootEl = document.getElementById("root");
ReactDOM.createRoot(rootEl).render();
})();