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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
|
let _pendingResult = false;
export function initCompare(countries) {
const opts = Object.entries(countries)
.sort((a, b) => a[1].country.localeCompare(b[1].country))
.map(([key, val]) => `<option value="${key}">${val.country}</option>`)
.join("");
document.getElementById("compare-select-1").innerHTML = opts;
document.getElementById("compare-select-2").innerHTML = opts;
document.getElementById("compare-go-btn").addEventListener("click", () => {
const k1 = document.getElementById("compare-select-1").value;
const k2 = document.getElementById("compare-select-2").value;
if (k1 === k2) {
document.getElementById("compare-alert").innerHTML =
"<div class='alert alert-danger'>Please select two different countries.</div>";
return;
}
document.getElementById("compare-alert").innerHTML = "";
_prepareResult(countries[k1], countries[k2]);
_pendingResult = true;
const cm = document.getElementById("compareModal");
(bootstrap.Modal.getInstance(cm) || new bootstrap.Modal(cm)).hide();
});
// Show result modal only after compareModal finishes hiding
document.getElementById("compareModal").addEventListener("hidden.bs.modal", () => {
if (_pendingResult) {
_pendingResult = false;
const rm = document.getElementById("compareResultModal");
(bootstrap.Modal.getInstance(rm) || new bootstrap.Modal(rm)).show();
}
});
}
function _prepareResult(c1, c2) {
document.getElementById("compare-result-c1").textContent = c1.country;
document.getElementById("compare-result-c2").textContent = c2.country;
const rows = [
["Prison Population", _fmt(c1.pop, "pop"), _fmt(c2.pop, "pop")],
["Rate per 100,000", _fmt(c1.rate, "rate"), _fmt(c2.rate, "rate")],
["Females", _fmt(c1.females, "pct"), _fmt(c2.females, "pct")],
["Juveniles", _fmt(c1.juveniles, "pct"), _fmt(c2.juveniles, "pct")],
["Occupancy", _fmt(c1.occupancy, "pct"), _fmt(c2.occupancy, "pct")],
["Government", _fmtGov(c1.government), _fmtGov(c2.government)],
];
document.getElementById("compare-result-body").innerHTML = rows
.map(([label, v1, v2]) =>
`<tr><td><b>${label}</b></td><td>${v1}</td><td>${v2}</td></tr>`
)
.join("");
}
function _fmt(val, type) {
if (val === "--" || val === null || val === undefined || (typeof val === "number" && isNaN(val))) {
return "<span class='text-danger'>N/A</span>";
}
if (type === "pop") return Number(val).toLocaleString("en");
if (type === "rate") return String(val);
if (type === "pct") return (val * 100).toFixed(2) + " %";
return String(val);
}
function _fmtGov(val) {
return (!val || val === "--") ? "<span class='text-danger'>N/A</span>" : val;
}
|
