{isIdle
? <>Klik Muat Data untuk fetch tren search dari Google Trends · cache 24 jam, hemat kuota
: isLive && state.stale
? <>Quota SerpAPI bulan ini habis ({state.quota?.used}/{state.quota?.limit}) — menampilkan cache lama dari {ageLabel(state.ageMs)}
: isLive
? <>Data live untuk {data.brand} & kompetitor · {data.period} · {ageLabel(state.ageMs)}{state.quota ? ` · ${state.quota.used}/${state.quota.limit} kuota terpakai` : ''}
: isQuotaOnly
? <>Quota SerpAPI bulan ini habis ({state.quota?.used}/{state.quota?.limit}) — naikan limit di Super Admin → Integrasi atau tunggu reset bulan depan
: state.configured
? <>Tidak bisa fetch ke SerpAPI: {state.error}
: <>Set SerpAPI key di Super Admin → Integrasi untuk aktifkan data live
}
{/* Range toggle — tampil setelah configured (nggak ngerti gunanya kalau masih demo) */}
{(isLive || isIdle) && (
Tiap fetch ke Google Trends pakai 3 search dari kuota SerpAPI bulanan kamu. Klik tombol di atas hanya kalau kamu memang butuh lihat data Trends di campaign ini — hasilnya di-cache 24 jam.
) : isQuotaOnly ? (
🔒
Kuota SerpAPI bulan ini habis
Terpakai {state.quota?.used} dari limit {state.quota?.limit}. Reset otomatis tanggal 1 bulan depan, atau upgrade plan SerpAPI dan naikan limit di Super Admin → Integrasi.
{/* ─── Per Wilayah ───────────────────────────────────── */}
{data.regionalBreakdown?.length > 0 && (
)}
{isDemo && (
Aktifkan integrasi untuk data nyata:
Setelah SerpAPI key di-set, panel ini akan tampilkan tren search asli dari Google Trends untuk brand kamu — termasuk gap detection antara Survey TOM dan search behavior.
)}
)}
);
}
function ageLabel(ms) {
if (!ms || ms < 60_000) return 'baru saja diperbarui';
const min = Math.floor(ms / 60_000);
if (min < 60) return `diperbarui ${min} mnt lalu`;
const hr = Math.floor(min / 60);
return `diperbarui ${hr} jam lalu`;
}
// Catmull-Rom → cubic Bézier untuk smooth curves yang natural-looking.
// Tidak boros memori dan tidak butuh chart library.
function smoothPath(points) {
if (points.length < 2) return '';
if (points.length === 2) {
return `M ${points[0][0]} ${points[0][1]} L ${points[1][0]} ${points[1][1]}`;
}
let d = `M ${points[0][0]} ${points[0][1]}`;
for (let i = 0; i < points.length - 1; i++) {
const p0 = points[i - 1] ?? points[i];
const p1 = points[i];
const p2 = points[i + 1];
const p3 = points[i + 2] ?? points[i + 1];
const c1x = p1[0] + (p2[0] - p0[0]) / 6;
const c1y = p1[1] + (p2[1] - p0[1]) / 6;
const c2x = p2[0] - (p3[0] - p1[0]) / 6;
const c2y = p2[1] - (p3[1] - p1[1]) / 6;
d += ` C ${c1x.toFixed(1)} ${c1y.toFixed(1)}, ${c2x.toFixed(1)} ${c2y.toFixed(1)}, ${p2[0]} ${p2[1]}`;
}
return d;
}
function TrendsLineChart({ data }) {
const W = 760, H = 280;
const PAD = { top: 18, right: 130, bottom: 32, left: 36 };
const innerW = W - PAD.left - PAD.right;
const innerH = H - PAD.top - PAD.bottom;
const max = 100;
const series = data.series ?? [];
const weeks = data.weeks ?? [];
const svgRef = React.useRef(null);
const [hoverIdx, setHoverIdx] = React.useState(null);
if (!series.length || !weeks.length) {
return (