/* global React */
const { useState: useStateV, useMemo: useMemoV, useEffect: useEffectV } = React;
const { KpiStrip, CommandBar, ControlBar } = window.__dashAtoms;
const { buildNiches, buildStats } = window.__dashUtils;
// compute global axes for spec bars (one pass)
function globalAxes(niches) {
const prices = niches.flatMap(n => [n.priceMin, n.priceMax]).filter(v => v != null);
const ranges = niches.flatMap(n => [n.rangeMin, n.rangeMax]).filter(v => v != null);
return {
priceMin: 0,
priceMax: prices.length ? Math.max(...prices) : 1,
rangeMin: 0,
rangeMax: ranges.length ? Math.max(...ranges) : 1,
};
}
// ============================================================
// MAKER LEADERBOARD — small support widget under grid
// ============================================================
function MakerLeaderboard({ accent }) {
const map = new Map();
window.UAV_DATA.forEach(m => {
if (!m.maker || m.maker === "—") return;
const e = map.get(m.maker) || { maker: m.maker, count: 0, ours: window.IS_OURS(m.maker), niches: new Set() };
e.count += 1;
e.niches.add(window.TYPE_TO_NICHE[m.type]);
map.set(m.maker, e);
});
const rows = [...map.values()]
.map(e => ({ ...e, niches: e.niches.size }))
.sort((a, b) => b.count - a.count || b.niches - a.niches);
const max = Math.max(...rows.map(r => r.count));
return (
// Виробники в каталозі
{rows.length}
модельний ряд · кількість ніш
{rows.map(r => (
{r.count}
{r.ours && "🍒 "}{r.maker}
{r.niches}н
))}
);
}
// ============================================================
// HEADER (within variant)
// ============================================================
const Header = ({ title, subtitle, tweaks = {} }) => {
const accent = tweaks.accent || "#22c55e";
const upper = tweaks.uppercaseTitles !== false;
const [a, b] = title.split("—");
return (
Огляд каталогу
{a}{b && — {b.trim()}}
{subtitle}
);
};
const Legend = ({ accent }) => (
Є наш продукт
Тільки конкуренти
Біла пляма
↗ клік на нішу — деталі
);
// ============================================================
// SORTING
// ============================================================
function sortNiches(arr, mode) {
const copy = [...arr];
if (mode === "count-desc") copy.sort((a, b) => b.models.length - a.models.length);
else if (mode === "count-asc") copy.sort((a, b) => a.models.length - b.models.length);
else if (mode === "alpha") copy.sort((a, b) => a.title.localeCompare(b.title, "uk"));
else if (mode === "ours-first") copy.sort((a, b) => (b.hasUs - a.hasUs) || (b.models.length - a.models.length));
return copy;
}
// ============================================================
// VARIANTS
// ============================================================
function VariantBento({ niches, onOpen, tweaks = {}, gAxes }) {
const cols = tweaks.columns || 4;
return (
);
}
function VariantClusters({ niches, onOpen, tweaks = {}, gAxes }) {
const cols = tweaks.columns || 4;
const accent = tweaks.accent || "#22c55e";
const clusters = [...new Set(niches.map(n => n.cluster))];
return (
{clusters.map(c => {
const items = niches.filter(n => n.cluster === c);
if (!items.length) return null;
const ours = items.filter(n => n.hasUs).length;
return (
0 ? accent : "rgba(255,255,255,0.6)", fontWeight: 700 }}>// {c}
{ours} наших · {items.length} ніш
{items.map(n => )}
);
})}
);
}
function VariantMatrix({ niches, onOpen, tweaks = {}, gAxes }) {
const platforms = ["Крило", "Коптер", "Ракета", "Інше"];
const purposes = ["Розвідка", "Удар", "Перехоплення", "Носій"];
const placement = {
"plane-recon": { p: "Крило", u: "Розвідка" }, "plane-photo": { p: "Крило", u: "Розвідка" },
"fpv-kamikaze": { p: "Коптер", u: "Удар" }, "fiber": { p: "Коптер", u: "Удар" },
"plane-kami": { p: "Крило", u: "Удар" }, "copter-bomber": { p: "Коптер", u: "Удар" },
"fpv-bomber": { p: "Коптер", u: "Удар" }, "plane-bomber": { p: "Крило", u: "Удар" },
"interceptor-copter": { p: "Коптер", u: "Перехоплення" }, "interceptor-plane": { p: "Крило", u: "Перехоплення" },
"copter-recon": { p: "Коптер", u: "Розвідка" },
"mothership": { p: "Крило", u: "Носій" }, "relay": { p: "Крило", u: "Носій" },
"aerostat": { p: "Інше", u: "Розвідка" }, "decoy": { p: "Інше", u: "Удар" },
};
const accent = tweaks.accent || "#22c55e";
return (
);
}
// ============================================================
// TWEAKS DEFAULTS + APP
// ============================================================
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"variant": "bento",
"accent": "#22c55e",
"background": "#000000",
"columns": 4,
"showCount": true,
"showSpec": true,
"showKpi": true,
"showLeaderboard": true,
"uppercaseTitles": true
}/*EDITMODE-END*/;
function Dashboard({ variant: initialVariant }) {
const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
useEffectV(() => { if (initialVariant) setTweak("variant", initialVariant); }, []);
const [niche, setNiche] = useStateV("Усі");
const [maker, setMaker] = useStateV("Усі");
const [search, setSearch] = useStateV("");
const [presence, setPresence] = useStateV("all");
const [sort, setSort] = useStateV("default");
const [open, setOpen] = useStateV(null);
// Supabase async load
const [dataReady, setDataReady] = useStateV(false);
const [dataError, setDataError] = useStateV(null);
useEffectV(() => {
window.loadUAVData()
.then(() => setDataReady(true))
.catch(e => setDataError(e.message || String(e)));
}, []);
useEffectV(() => { document.body.style.background = t.background; }, [t.background]);
// Re-build niches whenever data arrives
const allNiches = useMemoV(() => buildNiches(), [dataReady]);
const gAxes = useMemoV(() => globalAxes(allNiches), [allNiches]);
const stats = useMemoV(() => buildStats(allNiches), [allNiches]);
// counts for filter pill badges (independent of presence filter itself)
const baseFiltered = useMemoV(() => {
return allNiches.filter(n => {
if (niche !== "Усі" && n.title !== niche) return false;
if (maker !== "Усі") {
const allModels = [...n.ours, ...n.competitors];
if (!allModels.some(m => m.maker === maker)) return false;
}
if (search) {
const q = search.toLowerCase();
const allModels = [...n.ours, ...n.competitors];
const matchModel = allModels.some(m => m.model.toLowerCase().includes(q) || m.maker.toLowerCase().includes(q));
if (!matchModel && !n.title.toLowerCase().includes(q)) return false;
}
return true;
});
}, [allNiches, niche, maker, search]);
const counts = useMemoV(() => ({
all: baseFiltered.length,
ours: baseFiltered.filter(n => n.hasUs).length,
competitor: baseFiltered.filter(n => !n.hasUs && !n.isAbsent).length,
absent: baseFiltered.filter(n => n.isAbsent).length,
}), [baseFiltered]);
const filtered = useMemoV(() => {
let arr = baseFiltered;
if (presence === "ours") arr = arr.filter(n => n.hasUs);
else if (presence === "absent") arr = arr.filter(n => n.isAbsent);
else if (presence === "competitor") arr = arr.filter(n => !n.hasUs && !n.isAbsent);
return sortNiches(arr, sort);
}, [baseFiltered, presence, sort]);
const Variant = t.variant === "clusters" ? VariantClusters : t.variant === "matrix" ? VariantMatrix : VariantBento;
return (
{dataError && (
Помилка завантаження: {dataError}
)}
{!dataReady && !dataError && (
)}
{t.showKpi !== false && }
{t.showLeaderboard !== false && dataReady && }
{open && setOpen(null)} accent={t.accent}/>}
setTweak("variant", v)}/>
setTweak("columns", v)}/>
setTweak("showKpi", v)}/>
setTweak("showSpec", v)}/>
setTweak("showCount", v)}/>
setTweak("showLeaderboard", v)}/>
setTweak("uppercaseTitles", v)}/>
setTweak("accent", v)}/>
setTweak("background", v)}/>
);
}
window.Dashboard = Dashboard;