1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
|
const BTN_IDS = ["totPop", "perCapita", "women", "juveniles", "occupancy"];
const METRIC_KEYS = ["pop", "rate", "females", "juveniles", "occupancy"];
export function initControls(onMetricChange, onLabelToggle, onReset) {
BTN_IDS.forEach((id, i) => {
const btn = document.getElementById(id);
if (!btn) return;
btn.addEventListener("click", () => {
BTN_IDS.forEach(b => document.getElementById(b)?.classList.remove("active-metric"));
btn.classList.add("active-metric");
onMetricChange(METRIC_KEYS[i]);
});
});
document.querySelector("[data-action='labels']")?.addEventListener("click", e => {
e.preventDefault();
onLabelToggle();
});
document.querySelector("[data-action='reset']")?.addEventListener("click", e => {
e.preventDefault();
onReset();
});
}
// Returns [{label, value, alpha3}] top-5 plus a rest-of-world entry.
export function getTop5(countries, metricKey) {
const valid = Object.entries(countries)
.filter(([, c]) => typeof c[metricKey] === "number" && !isNaN(c[metricKey]))
.sort((a, b) => b[1][metricKey] - a[1][metricKey]);
const top5 = valid.slice(0, 5).map(([alpha3, c]) => ({
label: c.country,
value: c[metricKey],
alpha3,
}));
const restValue = valid.slice(5).reduce((sum, [, c]) => sum + c[metricKey], 0);
if (restValue > 0) {
top5.push({ label: "Rest of World", value: restValue, alpha3: null });
}
return top5;
}
export function formatMetricValue(val, key) {
if (val === "--" || val === null || val === undefined || (typeof val === "number" && isNaN(val))) {
return "N/A";
}
if (key === "pop") return Number(val).toLocaleString("en");
if (key === "rate") return String(val);
if (key === "females" || key === "juveniles" || key === "occupancy") {
return (val * 100).toFixed(1) + "%";
}
return String(val);
}
|
