@sckyzo/cosmos-charts 0.2.0 → 0.3.0

package/dist/WorldMap.js

@@ -0,0 +1,603 @@
+"use client";
+import { TooltipCard } from './chunk-VIOSQN4Z.js';
+import { PANEL, TEXT, TRACK, SEQUENTIAL, MUTED, BORDER } from './chunk-UATB2IRY.js';
+import { geoNaturalEarth1, geoPath } from 'd3-geo';
+import { useRef, useMemo, useState } from 'react';
+import { feature } from 'topojson-client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/world-map-codes.ts
+var NUMERIC_TO_ALPHA2 = {
+  "004": "AF",
+  "008": "AL",
+  "010": "AQ",
+  "012": "DZ",
+  "016": "AS",
+  "020": "AD",
+  "024": "AO",
+  "028": "AG",
+  "031": "AZ",
+  "032": "AR",
+  "036": "AU",
+  "040": "AT",
+  "044": "BS",
+  "048": "BH",
+  "050": "BD",
+  "051": "AM",
+  "052": "BB",
+  "056": "BE",
+  "060": "BM",
+  "064": "BT",
+  "068": "BO",
+  "070": "BA",
+  "072": "BW",
+  "074": "BV",
+  "076": "BR",
+  "084": "BZ",
+  "086": "IO",
+  "090": "SB",
+  "092": "VG",
+  "096": "BN",
+  "100": "BG",
+  "104": "MM",
+  "108": "BI",
+  "112": "BY",
+  "116": "KH",
+  "120": "CM",
+  "124": "CA",
+  "132": "CV",
+  "136": "KY",
+  "140": "CF",
+  "144": "LK",
+  "148": "TD",
+  "152": "CL",
+  "156": "CN",
+  "158": "TW",
+  "162": "CX",
+  "166": "CC",
+  "170": "CO",
+  "174": "KM",
+  "175": "YT",
+  "178": "CG",
+  "180": "CD",
+  "184": "CK",
+  "188": "CR",
+  "191": "HR",
+  "192": "CU",
+  "196": "CY",
+  "203": "CZ",
+  "204": "BJ",
+  "208": "DK",
+  "212": "DM",
+  "214": "DO",
+  "218": "EC",
+  "222": "SV",
+  "226": "GQ",
+  "231": "ET",
+  "232": "ER",
+  "233": "EE",
+  "234": "FO",
+  "238": "FK",
+  "239": "GS",
+  "242": "FJ",
+  "246": "FI",
+  "248": "AX",
+  "250": "FR",
+  "254": "GF",
+  "258": "PF",
+  "260": "TF",
+  "262": "DJ",
+  "266": "GA",
+  "268": "GE",
+  "270": "GM",
+  "275": "PS",
+  "276": "DE",
+  "288": "GH",
+  "292": "GI",
+  "296": "KI",
+  "300": "GR",
+  "304": "GL",
+  "308": "GD",
+  "312": "GP",
+  "316": "GU",
+  "320": "GT",
+  "324": "GN",
+  "328": "GY",
+  "332": "HT",
+  "334": "HM",
+  "336": "VA",
+  "340": "HN",
+  "344": "HK",
+  "348": "HU",
+  "352": "IS",
+  "356": "IN",
+  "360": "ID",
+  "364": "IR",
+  "368": "IQ",
+  "372": "IE",
+  "376": "IL",
+  "380": "IT",
+  "384": "CI",
+  "388": "JM",
+  "392": "JP",
+  "398": "KZ",
+  "400": "JO",
+  "404": "KE",
+  "408": "KP",
+  "410": "KR",
+  "414": "KW",
+  "417": "KG",
+  "418": "LA",
+  "422": "LB",
+  "426": "LS",
+  "428": "LV",
+  "430": "LR",
+  "434": "LY",
+  "438": "LI",
+  "440": "LT",
+  "442": "LU",
+  "446": "MO",
+  "450": "MG",
+  "454": "MW",
+  "458": "MY",
+  "462": "MV",
+  "466": "ML",
+  "470": "MT",
+  "474": "MQ",
+  "478": "MR",
+  "480": "MU",
+  "484": "MX",
+  "492": "MC",
+  "496": "MN",
+  "498": "MD",
+  "499": "ME",
+  "500": "MS",
+  "504": "MA",
+  "508": "MZ",
+  "512": "OM",
+  "516": "NA",
+  "520": "NR",
+  "524": "NP",
+  "528": "NL",
+  "531": "CW",
+  "533": "AW",
+  "534": "SX",
+  "535": "BQ",
+  "540": "NC",
+  "548": "VU",
+  "554": "NZ",
+  "558": "NI",
+  "562": "NE",
+  "566": "NG",
+  "570": "NU",
+  "574": "NF",
+  "578": "NO",
+  "580": "MP",
+  "581": "UM",
+  "583": "FM",
+  "584": "MH",
+  "585": "PW",
+  "586": "PK",
+  "591": "PA",
+  "598": "PG",
+  "600": "PY",
+  "604": "PE",
+  "608": "PH",
+  "612": "PN",
+  "616": "PL",
+  "620": "PT",
+  "624": "GW",
+  "626": "TL",
+  "630": "PR",
+  "634": "QA",
+  "638": "RE",
+  "642": "RO",
+  "643": "RU",
+  "646": "RW",
+  "652": "BL",
+  "654": "SH",
+  "659": "KN",
+  "660": "AI",
+  "662": "LC",
+  "663": "MF",
+  "666": "PM",
+  "670": "VC",
+  "674": "SM",
+  "678": "ST",
+  "682": "SA",
+  "686": "SN",
+  "688": "RS",
+  "690": "SC",
+  "694": "SL",
+  "702": "SG",
+  "703": "SK",
+  "704": "VN",
+  "705": "SI",
+  "706": "SO",
+  "710": "ZA",
+  "716": "ZW",
+  "724": "ES",
+  "728": "SS",
+  "729": "SD",
+  "732": "EH",
+  "740": "SR",
+  "744": "SJ",
+  "748": "SZ",
+  "752": "SE",
+  "756": "CH",
+  "760": "SY",
+  "762": "TJ",
+  "764": "TH",
+  "768": "TG",
+  "772": "TK",
+  "776": "TO",
+  "780": "TT",
+  "784": "AE",
+  "788": "TN",
+  "792": "TR",
+  "795": "TM",
+  "796": "TC",
+  "798": "TV",
+  "800": "UG",
+  "804": "UA",
+  "807": "MK",
+  "818": "EG",
+  "826": "GB",
+  "831": "GG",
+  "832": "JE",
+  "833": "IM",
+  "834": "TZ",
+  "840": "US",
+  "850": "VI",
+  "854": "BF",
+  "858": "UY",
+  "860": "UZ",
+  "862": "VE",
+  "876": "WF",
+  "882": "WS",
+  "887": "YE",
+  "894": "ZM"
+};
+
+// src/world-map.ts
+var STEPS = 5;
+var clamp = (value, min, max) => Math.min(Math.max(value, min ?? -Infinity), max ?? Infinity);
+var scaleOf = (values, min, max) => {
+  const [low, high] = min !== void 0 && max !== void 0 && min > max ? [max, min] : [min, max];
+  const sorted = values.filter(Number.isFinite).map((value) => clamp(value, low, high)).sort((a, b) => a - b);
+  if (sorted.length === 0) return void 0;
+  const thresholds = [1, 2, 3, 4].map((q) => sorted[Math.floor(sorted.length * q / STEPS)]);
+  return { thresholds, bounds: [low ?? sorted[0], ...thresholds], min: low, max: high };
+};
+var stepOf = (value, scale) => {
+  const clamped = clamp(value, scale.min, scale.max);
+  return scale.thresholds.filter((threshold) => clamped >= threshold).length;
+};
+var ranked = (countries) => countries.filter((country) => country.value !== void 0).sort((a, b) => b.value - a.value || a.name.localeCompare(b.name));
+var walk = (order, current, delta) => {
+  const index = order.findIndex((country) => country.code === current);
+  if (index < 0) return order[0];
+  return order[Math.min(Math.max(index + delta, 0), order.length - 1)];
+};
+var VIEW_WIDTH = 960;
+var MARGIN = 2;
+var ANTARCTICA = "010";
+var TIP_GAP = 6;
+var POINTER_GAP = 14;
+var HIDDEN = {
+  position: "absolute",
+  width: 1,
+  height: 1,
+  margin: -1,
+  padding: 0,
+  overflow: "hidden",
+  clipPath: "inset(50%)",
+  whiteSpace: "nowrap",
+  border: 0
+};
+var shapesOf = (geography) => {
+  const countries = geography.objects.countries;
+  if (!countries) {
+    throw new Error("WorldMap: `geography` has no `countries` object");
+  }
+  const collection = feature(geography, countries);
+  const features = (collection.type === "FeatureCollection" ? collection.features : [collection]).filter((item) => String(item.id).padStart(3, "0") !== ANTARCTICA);
+  const world = { type: "FeatureCollection", features };
+  const projection = geoNaturalEarth1().fitWidth(VIEW_WIDTH - 2 * MARGIN, world);
+  const [x, y] = projection.translate();
+  projection.translate([x + MARGIN, y + MARGIN]);
+  const path = geoPath(projection);
+  const [, [, bottom]] = path.bounds(world);
+  const shapes = features.flatMap((item) => {
+    const d = path(item);
+    if (!d) return [];
+    const name = item.properties?.name;
+    return [
+      {
+        code: item.id === void 0 ? void 0 : NUMERIC_TO_ALPHA2[String(item.id).padStart(3, "0")],
+        name: typeof name === "string" ? name : "",
+        d
+      }
+    ];
+  });
+  return { shapes, viewHeight: Math.ceil(bottom) + MARGIN };
+};
+var WorldMap = ({
+  data,
+  geography,
+  formatValue = String,
+  label,
+  min,
+  max,
+  showLegend = true,
+  onSelect,
+  ariaLabel,
+  height,
+  width
+}) => {
+  const frame = useRef(null);
+  const { shapes, viewHeight } = useMemo(() => shapesOf(geography), [geography]);
+  const [hover, setHover] = useState();
+  const [focus, setFocus] = useState();
+  const [lastKey, setLastKey] = useState();
+  const valued = shapes.map((shape) => {
+    const value = shape.code === void 0 ? void 0 : data[shape.code];
+    return { ...shape, value: Number.isFinite(value) ? value : void 0 };
+  });
+  const order = ranked(
+    valued.filter((country) => country.code !== void 0)
+  );
+  const scale = scaleOf(
+    order.map((country) => country.value),
+    min,
+    max
+  );
+  const countries = valued.map((country) => ({
+    ...country,
+    step: scale && country.value !== void 0 ? stepOf(country.value, scale) : void 0
+  }));
+  const byCode = new Map(
+    countries.flatMap((country) => country.code ? [[country.code, country]] : [])
+  );
+  const interactive = order.length > 0;
+  const stepColor = (step) => step === void 0 ? TRACK : SEQUENTIAL[step];
+  const name = ariaLabel ?? (interactive ? `World map, ${label ?? "value"} by country, from ${formatValue(order[order.length - 1].value)} to ${formatValue(order[0].value)}` : "World map");
+  const tip = hover ?? focus;
+  const tipCountry = tip && byCode.get(tip.code);
+  const anchor = (code, x, top, bottom, gap) => {
+    const host = frame.current.getBoundingClientRect();
+    const middle = x - host.left;
+    const align = middle < host.width / 3 ? "start" : middle > 2 * host.width / 3 ? "end" : "center";
+    return {
+      code,
+      x: middle,
+      top: top - host.top - gap,
+      bottom: bottom - host.top + gap,
+      align,
+      // Not enough room above for the card: it goes under.
+      below: top - host.top < 90
+    };
+  };
+  const tipAtPointer = (code, event) => anchor(code, event.clientX, event.clientY, event.clientY, POINTER_GAP - TIP_GAP);
+  const tipAtCountry = (code) => {
+    const element = frame.current?.querySelector(`[data-code="${code}"]`);
+    if (!element) return void 0;
+    const box = element.getBoundingClientRect();
+    const middle = box.top + box.height / 2;
+    return anchor(code, box.left + box.width / 2, middle, middle, 0);
+  };
+  const goTo = (country) => {
+    if (!country) return;
+    setLastKey(country.code);
+    setFocus(tipAtCountry(country.code));
+  };
+  const keyDown = (event) => {
+    const current = focus?.code ?? lastKey;
+    const targets = {
+      ArrowRight: () => walk(order, current, 1),
+      ArrowDown: () => walk(order, current, 1),
+      ArrowLeft: () => walk(order, current, -1),
+      ArrowUp: () => walk(order, current, -1),
+      Home: () => order[0],
+      End: () => order[order.length - 1]
+    };
+    if (targets[event.key]) {
+      event.preventDefault();
+      goTo(targets[event.key]());
+    } else if (onSelect && (event.key === "Enter" || event.key === " ") && focus) {
+      event.preventDefault();
+      onSelect(focus.code);
+    }
+  };
+  const focusIn = (event) => {
+    if (event.target === event.currentTarget && event.currentTarget.matches(":focus-visible")) {
+      goTo(order.find((country) => country.code === lastKey) ?? order[0]);
+    }
+  };
+  const focusOut = (event) => {
+    if (!event.currentTarget.contains(event.relatedTarget)) setFocus(void 0);
+  };
+  const tipStyle = tip && {
+    position: "absolute",
+    left: tip.x,
+    top: tip.below ? tip.bottom : tip.top,
+    transform: `translate(${{ start: "0", center: "-50%", end: "-100%" }[tip.align]}, ${tip.below ? "0" : "-100%"})`,
+    zIndex: 10,
+    pointerEvents: "none"
+  };
+  const active = tipCountry?.value === void 0 ? void 0 : tipCountry;
+  const legend = showLegend && scale && /* @__PURE__ */ jsx(Legend, { scale, format: formatValue });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-world-map": "",
+      style: {
+        position: "relative",
+        display: "flex",
+        flexDirection: "column",
+        gap: "0.75rem",
+        width: width ?? "100%",
+        height,
+        maxWidth: "100%",
+        minWidth: 0
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: frame,
+            role: interactive ? "application" : void 0,
+            "aria-label": interactive ? name : void 0,
+            tabIndex: interactive ? 0 : void 0,
+            onKeyDown: interactive ? keyDown : void 0,
+            onFocus: interactive ? focusIn : void 0,
+            onBlur: interactive ? focusOut : void 0,
+            style: {
+              position: "relative",
+              flex: height === void 0 ? void 0 : "1 1 0",
+              minHeight: 0,
+              // The country outline and the tooltip show where the keyboard is.
+              outline: "none"
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                "svg",
+                {
+                  role: "img",
+                  "aria-label": name,
+                  viewBox: `0 0 ${VIEW_WIDTH} ${viewHeight}`,
+                  style: {
+                    display: "block",
+                    width: "100%",
+                    height: height === void 0 ? "auto" : "100%"
+                  },
+                  children: [
+                    countries.map((country, i) => {
+                      const code = country.code;
+                      const has = code !== void 0 && country.value !== void 0;
+                      return /* @__PURE__ */ jsx(
+                        "path",
+                        {
+                          d: country.d,
+                          "data-code": has ? code : void 0,
+                          "data-step": country.step,
+                          fill: stepColor(country.step),
+                          stroke: PANEL,
+                          strokeWidth: 0.5,
+                          strokeLinejoin: "round",
+                          style: has && onSelect ? { cursor: "pointer" } : void 0,
+                          onMouseEnter: has ? (event) => setHover(tipAtPointer(code, event)) : void 0,
+                          onMouseMove: has ? (event) => setHover(tipAtPointer(code, event)) : void 0,
+                          onMouseLeave: has ? () => setHover(void 0) : void 0,
+                          onClick: has && onSelect ? () => onSelect(code) : void 0
+                        },
+                        i
+                      );
+                    }),
+                    active && // The same outline for the pointer and the keyboard, in the text color:
+                    // an accent one would vanish on the darkest steps. Drawn last to sit
+                    // above the neighbors' borders.
+                    /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        d: active.d,
+                        "data-world-active": "",
+                        fill: "none",
+                        stroke: TEXT,
+                        strokeWidth: 1.6,
+                        strokeLinejoin: "round",
+                        pointerEvents: "none"
+                      }
+                    )
+                  ]
+                }
+              ),
+              tip && tipCountry && tipCountry.value !== void 0 && tipStyle && /* @__PURE__ */ jsx("div", { "data-world-tooltip": "", "aria-hidden": true, style: tipStyle, children: /* @__PURE__ */ jsx(
+                TooltipCard,
+                {
+                  title: tipCountry.name,
+                  rows: [
+                    {
+                      name: label ?? "Value",
+                      value: formatValue(tipCountry.value),
+                      color: stepColor(tipCountry.step)
+                    }
+                  ]
+                }
+              ) }),
+              interactive && /* @__PURE__ */ jsx("span", { "data-world-status": "", role: "status", "aria-live": "polite", style: HIDDEN, children: focus && tipCountry && tipCountry.value !== void 0 ? `${tipCountry.name}, ${label ?? "Value"}: ${formatValue(tipCountry.value)}` : "" })
+            ]
+          }
+        ),
+        interactive && /* @__PURE__ */ jsx("div", { style: HIDDEN, children: /* @__PURE__ */ jsxs("table", { "data-world-table": "", children: [
+          /* @__PURE__ */ jsx("caption", { children: name }),
+          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+            /* @__PURE__ */ jsx("th", { scope: "col", children: "Country" }),
+            /* @__PURE__ */ jsx("th", { scope: "col", children: label ?? "Value" })
+          ] }) }),
+          /* @__PURE__ */ jsx("tbody", { children: order.map((country) => /* @__PURE__ */ jsxs("tr", { children: [
+            /* @__PURE__ */ jsx("th", { scope: "row", children: country.name }),
+            /* @__PURE__ */ jsx("td", { children: formatValue(country.value) })
+          ] }, country.code)) })
+        ] }) }),
+        legend
+      ]
+    }
+  );
+};
+var Legend = ({ scale, format }) => /* @__PURE__ */ jsxs(
+  "ul",
+  {
+    "data-world-legend": "",
+    style: {
+      display: "flex",
+      flexWrap: "wrap",
+      alignItems: "flex-end",
+      columnGap: 2,
+      rowGap: "0.5rem",
+      margin: 0,
+      padding: 0,
+      listStyle: "none",
+      fontSize: "var(--text-2xs, 0.6875rem)",
+      color: MUTED
+    },
+    children: [
+      SEQUENTIAL.map((color, i) => /* @__PURE__ */ jsxs("li", { style: { display: "flex", flexDirection: "column", gap: 4, minWidth: "2.75rem" }, children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            "data-world-swatch": "",
+            style: { height: 10, borderRadius: 2, background: color }
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { style: { fontVariantNumeric: "tabular-nums", whiteSpace: "nowrap" }, children: [
+          format(scale.bounds[i]),
+          "+"
+        ] })
+      ] }, i)),
+      /* @__PURE__ */ jsxs("li", { style: { display: "flex", flexDirection: "column", gap: 4, marginLeft: "0.75rem" }, children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            "data-world-swatch": "",
+            style: {
+              width: "1.75rem",
+              height: 10,
+              borderRadius: 2,
+              background: TRACK,
+              border: `1px solid ${BORDER}`,
+              boxSizing: "border-box"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { style: { whiteSpace: "nowrap" }, children: "No data" })
+      ] })
+    ]
+  }
+);
+
+export { WorldMap };
+//# sourceMappingURL=WorldMap.js.map
+//# sourceMappingURL=WorldMap.js.map