// Root App — drill-down architecture: World → Continent → Country
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"theme": "light"
}/*EDITMODE-END*/;
const DEFAULT_HS_FILTER = { level: "4d", codes: ["0210"] };
function parseUrlState() {
try {
const sp = new URLSearchParams(window.location.search);
const level = sp.get("hs_level");
const codes = sp.get("hs_codes");
const m = sp.get("metric");
const from = sp.get("from");
const to = sp.get("to");
const state = {};
if (level && codes) {
const validLevels = ["4d","6d","8d"];
if (validLevels.includes(level)) state.hsFilter = { level, codes: codes.split(",").filter(Boolean) };
}
if (m && (m === "vol" || m === "val")) state.metric = m;
if (from && to) {
const f = parseInt(from), t = parseInt(to);
if (!isNaN(f) && !isNaN(t)) state.years = [Math.min(f,t), Math.max(f,t)];
}
return state;
} catch(_) { return {}; }
}
// Derive the single chapter code (backward compat for views & API)
function deriveHs(hsFilter) {
if (hsFilter.codes.length === 0) return "0210";
const first = hsFilter.codes[0];
if (first === "0210" || first.startsWith("021")) return "0210";
if (first === "1601" || first.startsWith("160")) return "1601";
return "0210";
}
function deriveHsLevel(hsFilter) {
return hsFilter.level;
}
function computeHsLabel(hsFilter) {
const { level, codes } = hsFilter;
if (codes.length === 0) return "Sin selección";
if (level === "4d") {
if (codes.includes("0210") && codes.includes("1601")) return "Todos los capítulos";
if (codes.includes("0210")) return window.CF.HS["0210"].label;
if (codes.includes("1601")) return window.CF.HS["1601"].label;
}
const first = codes[0];
if (first.startsWith("021") || first === "0210") return window.CF.HS["0210"].label;
if (first.startsWith("160") || first === "1601") return window.CF.HS["1601"].label;
return first;
}
// ---- Empty HS state ---------------------------------------------------
function EmptyHsState() {
return (
🌿
Sin códigos HS seleccionados
Para ver datos en el dashboard, selecciona al menos un código HS en el filtro superior. Puedes elegir capítulos (4d), subpartidas HS6 o códigos CN8 a 8 dígitos.
);
}
// ---- App ---------------------------------------------------------------
function App() {
const initialUrl = parseUrlState();
const [hsFilter, setHsFilter] = React.useState(initialUrl.hsFilter || DEFAULT_HS_FILTER);
const [metric, setMetric] = React.useState(initialUrl.metric || "val");
const [years, setYears] = React.useState(initialUrl.years || [2019, 2025]);
const [drill, setDrill] = React.useState({ level: "world", continent: null, country: null });
// Preserve scroll position when filters are applied
const contentRef = React.useRef(null);
function keepScroll(setter) {
return (value) => {
const saved = contentRef.current?.scrollTop || 0;
setter(value);
requestAnimationFrame(() => {
if (contentRef.current) contentRef.current.scrollTop = saved;
});
};
}
const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
React.useEffect(() => {
document.body.classList.toggle("dark", t.theme === "dark");
}, [t.theme]);
// URL sync
React.useEffect(() => {
const sp = new URLSearchParams();
sp.set("hs_level", hsFilter.level);
sp.set("hs_codes", hsFilter.codes.join(","));
sp.set("metric", metric);
sp.set("from", Math.min(...years));
sp.set("to", Math.max(...years));
history.replaceState(null, "", "?" + sp.toString());
}, [JSON.stringify(hsFilter), metric, JSON.stringify(years)]);
// Backward-compat derived values for views
const hs = React.useMemo(() => deriveHs(hsFilter), [hsFilter]);
const hsLevel = React.useMemo(() => deriveHsLevel(hsFilter), [hsFilter]);
const hsLabel = React.useMemo(() => computeHsLabel(hsFilter), [hsFilter]);
// Country name resolution (reactive)
const lo = Math.min(...years), hi = Math.max(...years);
const countriesAppApi = window.useApi(
`${window.API_BASE}/api/countries?${window.hsQ(hsFilter.codes)}&from=${lo}&to=${hi}`,
[hsFilter.codes.join(","), lo, hi]
);
const countryNameMap = React.useMemo(() => {
const rows = countriesAppApi.data?.rows || [];
const map = {};
for (const r of rows) {
if (r.iso3) map[r.iso3] = r.name;
window.__iso3toIso2 = window.__iso3toIso2 || {};
window.__countryByIso3 = window.__countryByIso3 || {};
if (r.iso3) {
window.__iso3toIso2[r.iso3] = r.iso2;
window.__countryByIso3[r.iso3] = r;
}
}
return map;
}, [countriesAppApi.data]);
function resolveCountryName(iso3) {
return countryNameMap[iso3]
|| window.CF.COUNTRIES.find(c => c[0] === iso3)?.[1]
|| iso3;
}
const meta = (() => {
if (drill.level === "world") return {
eyebrow: "VISTA GLOBAL",
title: "Exportaciones españolas · " + hsLabel,
desc: "Cuadro de mando para la dirección estratégica. Pulsa un continente, un país, o un importador para profundizar.",
src: "",
};
if (drill.level === "continent") return {
eyebrow: "VISTA REGIONAL",
title: drill.continent,
desc: `Análisis de ${drill.continent.toLowerCase()} · ${hsLabel.toLowerCase()}. Pulsa un país para abrir su ficha de mercado.`,
src: "",
};
const cfRef = window.CF.COUNTRIES.find(c => c[0] === drill.country);
return {
eyebrow: "FICHA DE MERCADO",
title: resolveCountryName(drill.country),
desc: "Detalle de mercado: desglose HS, importadores y exportadores españoles trazados por xNova.",
src: "",
};
})();
const noData = hsFilter.codes.length === 0;
return (