/* 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 SQL_PERFIS = ["Pro", "Starter", "Qualificado (Sem Faixa)"];
// Rótulo para leads sem origem/perfil preenchido — torna-os selecionáveis
// no filtro (sem isso, filtrar por origem/perfil descartava esses leads).
const BLANK = "(vazio)";
// Opções fixas do filtro de Formulário: "Sim" (coluna preenchida) ou "Não" (vazia).
const FORMULARIO_OPTS = ["Sim", "Não"];
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 && (
)}
);
}
// --------------------------- Calendar (Range Picker) ---------------------------
const DOW_HEADERS = ["D","S","T","Q","Q","S","S"];
const fmtDateShort = (d) => d ? `${String(d.getDate()).padStart(2,"0")}/${String(d.getMonth()+1).padStart(2,"0")}/${d.getFullYear()}` : "";
const dateOnly = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
const dayKey = (d) => d.getFullYear()*10000 + (d.getMonth()+1)*100 + d.getDate();
const addDays = (d, n) => { const x = new Date(d); x.setDate(x.getDate()+n); return x; };
function CalendarPopover({ from, to, onApply, onClose, onClear }) {
const today = useMemo(() => dateOnly(new Date()), []);
const initView = from || to || today;
const [viewY, setViewY] = useState(initView.getFullYear());
const [viewM, setViewM] = useState(initView.getMonth());
const [draftFrom, setDraftFrom] = useState(from);
const [draftTo, setDraftTo] = useState(to);
const prev = () => { const m = viewM-1; if (m < 0) { setViewY(viewY-1); setViewM(11); } else setViewM(m); };
const next = () => { const m = viewM+1; if (m > 11) { setViewY(viewY+1); setViewM(0); } else setViewM(m); };
const onPick = (d) => {
if (!draftFrom || (draftFrom && draftTo)) { setDraftFrom(d); setDraftTo(null); return; }
if (d < draftFrom) { setDraftTo(draftFrom); setDraftFrom(d); return; }
setDraftTo(d);
};
const grid = useMemo(() => {
const first = new Date(viewY, viewM, 1);
const startDow = first.getDay();
const cells = [];
// dias do mês anterior para preencher
for (let i = 0; i < startDow; i++) cells.push(addDays(first, i - startDow));
const lastDay = new Date(viewY, viewM+1, 0).getDate();
for (let d = 1; d <= lastDay; d++) cells.push(new Date(viewY, viewM, d));
while (cells.length % 7 !== 0) cells.push(addDays(cells[cells.length-1], 1));
while (cells.length < 42) cells.push(addDays(cells[cells.length-1], 1));
return cells;
}, [viewY, viewM]);
const inRange = (d) => {
if (!draftFrom) return false;
const dk = dayKey(d), a = dayKey(draftFrom);
const b = draftTo ? dayKey(draftTo) : a;
return dk >= a && dk <= b;
};
const presetRange = (days) => {
const end = today;
const start = addDays(end, -(days-1));
setDraftFrom(start); setDraftTo(end);
setViewY(end.getFullYear()); setViewM(end.getMonth());
};
const presetMonth = (offset) => {
const ref = new Date(today.getFullYear(), today.getMonth()+offset, 1);
const end = new Date(ref.getFullYear(), ref.getMonth()+1, 0);
setDraftFrom(ref); setDraftTo(end);
setViewY(ref.getFullYear()); setViewM(ref.getMonth());
};
return (
{MONTH_LABELS_FULL[viewM]} {viewY}
{DOW_HEADERS.map((d,i) =>
{d}
)}
{grid.map((d, i) => {
const isCurMonth = d.getMonth() === viewM;
const isToday = dayKey(d) === dayKey(today);
const sel = inRange(d);
const isStart = draftFrom && dayKey(d) === dayKey(draftFrom);
const isEnd = draftTo && dayKey(d) === dayKey(draftTo);
const isEdge = isStart || isEnd;
return (
);
})}
{[
{ label: "Hoje", run: () => { setDraftFrom(today); setDraftTo(today); } },
{ label: "Últimos 7d", run: () => presetRange(7) },
{ label: "Últimos 30d", run: () => presetRange(30) },
{ label: "Este mês", run: () => presetMonth(0) },
{ label: "Mês passado", run: () => presetMonth(-1) },
].map(p => (
))}
);
}
function CalendarButton({ from, to, onChange }) {
const [open, setOpen] = useState(false);
const ref = useRef(null);
useClickOutside(ref, () => setOpen(false));
const hasRange = from || to;
const label = hasRange
? (from && to && dayKey(from) === dayKey(to) ? fmtDateShort(from) : `${fmtDateShort(from)} – ${fmtDateShort(to || from)}`)
: "Calendário";
return (
{open && (
onChange(a, b || a)}
onClose={() => setOpen(false)}
onClear={() => onChange(null, null)} />
)}
);
}
// --------------------------- Header ---------------------------
function Header({ total, updatedAt, hasLiveApi, refreshing, refreshedAt, onRefresh }) {
const logout = () => window.VestiAuth.logout();
return (
);
}
// --------------------------- Filters ---------------------------
function Filters({
origens, perfis, formularios, years,
origemSel, setOrigemSel,
perfilSel, setPerfilSel,
formularioSel, setFormularioSel,
year, setYear,
month, setMonth,
dateFrom, dateTo, setDateRange,
onClear,
}) {
const yearOptions = years.map(y => ({ value: y, label: String(y) }));
const monthOptions = MONTH_LABELS_FULL.map((l, i) => ({ value: i + 1, label: l }));
return (
setDateRange(a, b)} />
);
}
// --------------------------- 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: "#a299c6", fontSize: 11 };
const GRID_STROKE = "rgba(255,255,255,0.10)";
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}
);
}
// --------------------------- App ---------------------------
function App() {
const [raw, setRaw] = useState(null);
const [error, setError] = useState(null);
const [origemSel, setOrigemSel] = useState([]);
const [perfilSel, setPerfilSel] = useState([]);
const [formularioSel, setFormularioSel] = useState([]);
const [year, setYear] = useState(null); // null = não inicializado; [] = "Todos"
const [month, setMonth] = useState([]);
const [weekSel, setWeekSel] = useState(null); // 1..6 ou null
const [daySel, setDaySel] = useState(null); // 1..31 ou null
const [dateFrom, setDateFrom] = useState(null); // Date | null
const [dateTo, setDateTo] = useState(null); // Date | null
const setDateRange = useCallback((a, b) => { setDateFrom(a); setDateTo(b); }, []);
const [refreshing, setRefreshing] = useState(false);
const [refreshedAt, setRefreshedAt] = useState(null);
// Detecta se estamos na Cloudflare (tem /api). Fora dela, usa só o snapshot estático.
const hasLiveApi = /(^|\.)pages\.dev$/.test(location.hostname) || location.hostname === "localhost";
const applyJson = useCallback((json) => {
// Normaliza vazios/espaços para o rótulo BLANK, mantendo o valor real caso preenchido.
const norm = (v) => (v != null && String(v).trim()) ? String(v).trim() : BLANK;
const leads = (json.leads || []).map(l => ({
...l,
origem: norm(canonicalOrigem(l.origem)),
perfil: norm(l.perfil),
formulario: l.formulario === "Sim" ? "Sim" : "Não",
_d: parseLeadDate(l.data),
}));
const hasBlankOrigem = leads.some(l => l.origem === BLANK);
const hasBlankPerfil = leads.some(l => l.perfil === BLANK);
// Opções: só valores preenchidos; acrescenta "(vazio)" ao final se houver leads sem preenchimento.
const origens = [...new Set((json.origens || []).map(canonicalOrigem).filter(o => o && String(o).trim()))]
.sort((a, b) => a.localeCompare(b, "pt-BR"));
if (hasBlankOrigem) origens.push(BLANK);
const perfis = [...new Set((json.perfis || []).filter(p => p && String(p).trim()))];
if (hasBlankPerfil) perfis.push(BLANK);
const origem_counts = {};
for (const [k, v] of Object.entries(json.origem_counts || {})) {
const ck = norm(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 = norm(canonicalOrigem(k));
sql_by_origem[ck] = (sql_by_origem[ck] || 0) + v;
}
setRaw({ ...json, leads, origens, perfis, origem_counts, sql_by_origem });
}, []);
const loadData = useCallback(async (fresh) => {
// fresh=true e com API → puxa ao vivo; senão o snapshot estático.
const url = (fresh && hasLiveApi) ? "/api/dados?fresh=1" : "data/data.json";
if (fresh) setRefreshing(true);
try {
const r = await fetch(url, { cache: "no-store" });
if (!r.ok) throw new Error(`HTTP ${r.status}`);
applyJson(await r.json());
setError(null);
if (fresh) setRefreshedAt(new Date());
} catch (e) {
if (fresh) {
// Falhou o ao vivo → mantém o que está na tela (snapshot já carregado).
setRefreshedAt(null);
} else {
setError(e.message || String(e));
}
} finally {
if (fresh) setRefreshing(false);
}
}, [applyJson, hasLiveApi]);
// Load inicial: snapshot estático (rápido, sem custo de API).
useEffect(() => { loadData(false); }, [loadData]);
// Init background canvas once
useEffect(() => { window.initLeadsCanvas && window.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 : [];
const fromK = dateFrom ? dayKey(dateFrom) : null;
const toK = dateTo ? dayKey(dateTo) : null;
const hasDateFilter = fromK != null || toK != null;
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 (formularioSel.length > 0 && !formularioSel.includes(l.formulario)) 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 (hasDateFilter) {
const k = dayKey(l._d);
if (fromK != null && k < fromK) return false;
if (toK != null && k > toK) return false;
}
} else if (ySel.length > 0 || month.length > 0 || hasDateFilter) {
return false;
}
return true;
});
}, [raw, origemSel, perfilSel, formularioSel, year, month, dateFrom, dateTo]);
// 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 : [];
const fromK = dateFrom ? dayKey(dateFrom) : null;
const toK = dateTo ? dayKey(dateTo) : null;
const hasDateFilter = fromK != null || toK != null;
return raw.leads.filter(l => {
if (perfilSel.length > 0 && !perfilSel.includes(l.perfil)) return false;
if (formularioSel.length > 0 && !formularioSel.includes(l.formulario)) 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 (hasDateFilter) {
const k = dayKey(l._d);
if (fromK != null && k < fromK) return false;
if (toK != null && k > toK) 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 || hasDateFilter) {
return false;
}
return true;
});
}, [raw, perfilSel, formularioSel, year, month, weekSel, daySel, dateFrom, dateTo]);
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]);
// Range chart — quando o filtro de calendário está ativo
const rangeInfo = useMemo(() => {
if (!dateFrom && !dateTo) return null;
const from = dateOnly(dateFrom || dateTo);
const to = dateOnly(dateTo || dateFrom);
const totalDays = Math.round((to - from) / 86400000) + 1;
if (totalDays <= 0 || totalDays > 366) return null;
const buckets = Array(totalDays).fill(null).map((_, i) => {
const d = addDays(from, i);
return { date: d, leads: 0, sqls: 0 };
});
for (const l of baseFiltered) {
if (!l._d) continue;
const idx = Math.round((dateOnly(l._d) - from) / 86400000);
if (idx < 0 || idx >= totalDays) continue;
buckets[idx].leads++;
if (isSqlLead(l)) buckets[idx].sqls++;
}
const crossMonth = from.getMonth() !== to.getMonth() || from.getFullYear() !== to.getFullYear();
return {
data: buckets.map(b => ({
label: crossMonth
? `${String(b.date.getDate()).padStart(2,"0")}/${String(b.date.getMonth()+1).padStart(2,"0")}`
: String(b.date.getDate()).padStart(2,"0"),
day: b.date.getDate(),
dow: DOW_SHORT[b.date.getDay()],
leads: b.leads,
sqls: b.sqls,
})),
subtitle: `${fmtDateShort(from)} – ${fmtDateShort(to)} · por dia${totalDays > 1 ? ` · ${totalDays} dias` : ""}`,
};
}, [baseFiltered, dateFrom, dateTo]);
// --- 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([]); setFormularioSel([]);
setYear([]); setMonth([]);
setWeekSel(null);
setDaySel(null);
setDateFrom(null); setDateTo(null);
}, []);
// --------------------------- render ---------------------------
if (error) {
return (
<>
loadData(true)} />
Falha ao carregar os dados
{error}
);
}
if (!raw) {
return (
<>
loadData(true)} />
Carregando dados…
);
}
return (
<>
loadData(true)} />
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}
/>
{rangeInfo ? (
) : (
<>
{dailyInfo && (
)}
)}
);
}
const rootEl = document.getElementById("root");
ReactDOM.createRoot(rootEl).render();
})();