@undp/data-viz 1.2.8 → 1.3.1

package/dist/BiVariateChoroplethMap.js

@@ -0,0 +1,721 @@
+import { j as t, m as Pe } from "./index-CHPV5EwG-BPSP-7Jg.js";
+import { useState as v, useRef as ie, useEffect as ve } from "react";
+import { s as Ie, g as Le, x as ze } from "./getSliderMarks-C0jptXeP.js";
+import { y as We } from "./Spinner-C85UF28E.js";
+import { p as Te, f as Ae } from "./parse-DlCRUFh_.js";
+import { u as Be } from "./index-CaAIPGZo.js";
+import { i as Ve } from "./index-27yTRcko.js";
+import { z as Fe, t as He, a as Xe, g as Re, b as _e, c as Ue, d as Ye, e as qe } from "./zoom-_lqdiGoI.js";
+import { X as Ge } from "./Modal-CUU6ZK3U.js";
+import { u as Ne } from "./Typography-Ctgfl1J5.js";
+import { n as De } from "./numberFormattingFunction-14YCbkN2.js";
+import { T as Je } from "./Tooltip-DyM5snqx.js";
+import { s as Ke } from "./string2HTML-CWHGfz_d.js";
+import { c as Me } from "./checkIfNullOrUndefined-DmfiKkNw.js";
+import { X as Ze, P as Qe, f as et } from "./index-BmCqpO1B.js";
+import { u as tt } from "./use-in-view-BAHrBy6b.js";
+import { s as $e } from "./select-DKy99ogv.js";
+import { t as Se } from "./threshold-DFfqcDMa.js";
+import { m as oe } from "./proxy-DJxJg1kD.js";
+import { A as rt } from "./index-BxAUvrua.js";
+import { GraphHeader as at } from "./GraphHeader.js";
+import { GraphFooter as ot } from "./GraphFooter.js";
+import { Colors as Ce } from "./Colors.js";
+import { f as it } from "./fetchAndParseData-Bcmr659B.js";
+import { g as Ee } from "./getJenks-VhM3GIoC.js";
+import { c as nt } from "./init-BhZylTFx.js";
+function st(be) {
+  const {
+    data: b,
+    xDomain: C,
+    mapData: f,
+    xColorLegendTitle: E,
+    yDomain: W,
+    yColorLegendTitle: T,
+    width: m,
+    height: l,
+    colors: q,
+    scale: G,
+    centerPoint: N,
+    mapBorderWidth: A,
+    mapNoDataColor: O,
+    mapBorderColor: ne,
+    tooltip: se,
+    onSeriesMouseOver: le,
+    zoomScaleExtend: ce,
+    zoomTranslateExtend: ke,
+    highlightedIds: B,
+    onSeriesMouseClick: k,
+    mapProperty: V,
+    resetSelectionOnDoubleClick: w,
+    detailsOnClick: M,
+    showColorScale: de,
+    styles: we,
+    classNames: je,
+    mapProjection: F,
+    zoomInteraction: P,
+    animate: j,
+    dimmedOpacity: H,
+    customLayers: me
+  } = be, [pe, J] = v(!(m < 680)), [X, R] = v(void 0), [g, K] = v(void 0), [_, Z] = v(void 0), [he, $] = v(void 0), [D, Q] = v(void 0), I = ie(null), U = tt(I, {
+    once: j.once,
+    amount: j.amount
+  }), ge = ie(null), ee = ie(null);
+  ve(() => {
+    const e = $e(ge.current), n = $e(I.current), r = (a) => {
+      if (P === "noZoom") return !1;
+      if (P === "button") return !a.type.includes("wheel");
+      const i = a.type === "wheel", d = a.type.startsWith("touch"), s = a.type === "mousedown" || a.type === "mousemove";
+      return d ? !0 : i ? P === "scroll" ? !0 : a.ctrlKey : s && !a.button && !a.ctrlKey;
+    }, o = Fe().scaleExtent(ce).translateExtent(
+      ke || [
+        [-20, -20],
+        [m + 20, l + 20]
+      ]
+    ).filter(r).on("zoom", ({ transform: a }) => {
+      e.attr("transform", a);
+    });
+    n.call(o), ee.current = o;
+  }, [l, m, P]);
+  const p = He(f), u = Xe(f), ue = p[2] - p[0], te = p[3] - p[1], ye = m * 190 / 960 * 360 / ue, L = l * 190 / 678 * 180 / te, z = G * Math.min(ye, L), c = F === "mercator" ? Re().rotate([0, 0]).center(N || u.geometry.coordinates).translate([m / 2, l / 2]).scale(z) : F === "equalEarth" ? _e().rotate([0, 0]).center(N || u.geometry.coordinates).translate([m / 2, l / 2]).scale(z) : F === "naturalEarth" ? Ue().rotate([0, 0]).center(N || u.geometry.coordinates).translate([m / 2, l / 2]).scale(z) : F === "orthographic" ? Ye().rotate([0, 0]).center(N || u.geometry.coordinates).translate([m / 2, l / 2]).scale(z) : qe().rotate([0, 0]).center(N || u.geometry.coordinates).translate([m / 2, l / 2]).scale(z), re = Array.from({ length: C.length }, (e, n) => n), ae = Array.from({ length: W.length }, (e, n) => n), Y = Se().domain(C).range(re), fe = Se().domain(W).range(ae), S = (e) => {
+    if (!I.current || !ee.current) return;
+    $e(I.current).call(ee.current.scaleBy, e === "in" ? 1.2 : 1 / 1.2);
+  };
+  return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    /* @__PURE__ */ t.jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ t.jsx(
+        oe.svg,
+        {
+          viewBox: `0 0 ${m} ${l}`,
+          width: `${m}px`,
+          height: `${l}px`,
+          ref: I,
+          direction: "ltr",
+          children: /* @__PURE__ */ t.jsxs("g", { ref: ge, children: [
+            me.filter((e) => e.position === "before").map((e) => e.layer),
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            f.features.map((e, n) => b.findIndex((o) => o.id === e.properties[V]) !== -1 ? null : /* @__PURE__ */ t.jsx(
+              oe.g,
+              {
+                opacity: X ? H : B.length !== 0 ? B.indexOf(e.properties[V]) !== -1 ? 1 : H : 1,
+                children: e.geometry.type === "MultiPolygon" ? (
+                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                  e.geometry.coordinates.map((o, a) => {
+                    let i = "";
+                    return o.forEach((d) => {
+                      let s = " M";
+                      d.forEach((h, y) => {
+                        const x = c([h[0], h[1]]);
+                        y !== d.length - 1 ? s = `${s}${x[0]} ${x[1]}L` : s = `${s}${x[0]} ${x[1]}`;
+                      }), i += s;
+                    }), /* @__PURE__ */ t.jsx(
+                      "path",
+                      {
+                        d: i,
+                        style: {
+                          stroke: ne,
+                          strokeWidth: A,
+                          fill: O
+                        }
+                      },
+                      a
+                    );
+                  })
+                ) : (
+                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                  e.geometry.coordinates.map((o, a) => {
+                    let i = "M";
+                    return o.forEach((d, s) => {
+                      const h = c([d[0], d[1]]);
+                      s !== o.length - 1 ? i = `${i}${h[0]} ${h[1]}L` : i = `${i}${h[0]} ${h[1]}`;
+                    }), /* @__PURE__ */ t.jsx(
+                      "path",
+                      {
+                        d: i,
+                        style: {
+                          stroke: ne,
+                          strokeWidth: A,
+                          fill: O
+                        }
+                      },
+                      a
+                    );
+                  })
+                )
+              },
+              n
+            )),
+            /* @__PURE__ */ t.jsx(rt, { children: b.map((e) => {
+              const n = f.features.findIndex(
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                (i) => e.id === i.properties[V]
+              ), r = Me(e.x) ? void 0 : Y(e.x), o = Me(e.y) ? void 0 : fe(e.y), a = r !== void 0 && o !== void 0 ? q[o][r] : O;
+              return /* @__PURE__ */ t.jsx(
+                oe.g,
+                {
+                  variants: {
+                    initial: { opacity: 0 },
+                    whileInView: {
+                      opacity: X ? X === a ? 1 : H : B.length !== 0 ? B.indexOf(e.id) !== -1 ? 1 : H : 1,
+                      transition: { duration: j.duration }
+                    }
+                  },
+                  initial: "initial",
+                  animate: U ? "whileInView" : "initial",
+                  exit: { opacity: 0, transition: { duration: j.duration } },
+                  onMouseEnter: (i) => {
+                    Z(e), Q(i.clientY), $(i.clientX), le?.(e);
+                  },
+                  onClick: () => {
+                    (k || M) && (Ve(g, e) && w ? (K(void 0), k?.(void 0)) : (K(e), k?.(e)));
+                  },
+                  onMouseMove: (i) => {
+                    Z(e), Q(i.clientY), $(i.clientX);
+                  },
+                  onMouseLeave: () => {
+                    Z(void 0), $(void 0), Q(void 0), le?.(void 0);
+                  },
+                  children: n === -1 ? null : f.features[n].geometry.type === "MultiPolygon" ? f.features[n].geometry.coordinates.map(
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    (i, d) => {
+                      let s = "";
+                      return i.forEach((h) => {
+                        let y = " M";
+                        h.forEach((x, Oe) => {
+                          const xe = c([x[0], x[1]]);
+                          Oe !== h.length - 1 ? y = `${y}${xe[0]} ${xe[1]}L` : y = `${y}${xe[0]} ${xe[1]}`;
+                        }), s += y;
+                      }), /* @__PURE__ */ t.jsx(
+                        oe.path,
+                        {
+                          variants: {
+                            initial: { fill: a, opacity: 0 },
+                            whileInView: {
+                              fill: a,
+                              opacity: 1,
+                              transition: { duration: j.duration }
+                            }
+                          },
+                          initial: "initial",
+                          animate: U ? "whileInView" : "initial",
+                          exit: { opacity: 0, transition: { duration: j.duration } },
+                          d: s,
+                          className: `${a === O ? "stroke-primary-gray-400 dark:stroke-primary-gray-500" : "stroke-primary-white dark:stroke-primary-gray-650"}`,
+                          style: {
+                            strokeWidth: A
+                          }
+                        },
+                        `${e.id}-${d}`
+                      );
+                    }
+                  ) : f.features[n].geometry.coordinates.map(
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    (i, d) => {
+                      let s = "M";
+                      return i.forEach((h, y) => {
+                        const x = c([h[0], h[1]]);
+                        y !== i.length - 1 ? s = `${s}${x[0]} ${x[1]}L` : s = `${s}${x[0]} ${x[1]}`;
+                      }), /* @__PURE__ */ t.jsx(
+                        oe.path,
+                        {
+                          d: s,
+                          variants: {
+                            initial: { fill: a, opacity: 0 },
+                            whileInView: {
+                              fill: a,
+                              opacity: 1,
+                              transition: { duration: j.duration }
+                            }
+                          },
+                          initial: "initial",
+                          animate: U ? "whileInView" : "initial",
+                          exit: { opacity: 0, transition: { duration: j.duration } },
+                          className: `${a === O ? "stroke-primary-gray-400 dark:stroke-primary-gray-500" : "stroke-primary-white dark:stroke-primary-gray-650"}`,
+                          style: {
+                            strokeWidth: A
+                          }
+                        },
+                        `${e.id}-${d}`
+                      );
+                    }
+                  )
+                },
+                e.id
+              );
+            }) }),
+            _ ? f.features.filter(
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              (e) => e.properties[V] === _.id
+            ).map((e, n) => /* @__PURE__ */ t.jsx("g", { children: e.geometry.type === "MultiPolygon" ? (
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              e.geometry.coordinates.map((r, o) => {
+                let a = "";
+                return r.forEach((i) => {
+                  let d = " M";
+                  i.forEach((s, h) => {
+                    const y = c([s[0], s[1]]);
+                    h !== i.length - 1 ? d = `${d}${y[0]} ${y[1]}L` : d = `${d}${y[0]} ${y[1]}`;
+                  }), a += d;
+                }), /* @__PURE__ */ t.jsx(
+                  "path",
+                  {
+                    d: a,
+                    className: "stroke-primary-gray-700 dark:stroke-primary-gray-300",
+                    style: {
+                      fill: "none",
+                      fillOpacity: 0,
+                      strokeWidth: "0.5"
+                    }
+                  },
+                  o
+                );
+              })
+            ) : (
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              e.geometry.coordinates.map((r, o) => {
+                let a = "M";
+                return r.forEach((i, d) => {
+                  const s = c([i[0], i[1]]);
+                  d !== r.length - 1 ? a = `${a}${s[0]} ${s[1]}L` : a = `${a}${s[0]} ${s[1]}`;
+                }), /* @__PURE__ */ t.jsx(
+                  "path",
+                  {
+                    d: a,
+                    className: "stroke-primary-gray-700 dark:stroke-primary-gray-300",
+                    style: {
+                      fill: "none",
+                      fillOpacity: 0,
+                      strokeWidth: "0.5"
+                    }
+                  },
+                  o
+                );
+              })
+            ) }, n)) : null,
+            me.filter((e) => e.position === "after").map((e) => e.layer)
+          ] })
+        }
+      ),
+      de === !1 ? null : /* @__PURE__ */ t.jsx("div", { className: "absolute left-4 bottom-4", children: pe ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+        /* @__PURE__ */ t.jsx(
+          "div",
+          {
+            style: {
+              backgroundColor: "rgba(240,240,240, 0.7)",
+              border: "1px solid var(--gray-400)",
+              borderRadius: "999px",
+              width: "24px",
+              height: "24px",
+              padding: "3px",
+              cursor: "pointer",
+              zIndex: 10,
+              position: "absolute",
+              right: "-0.75rem",
+              top: "-0.75rem"
+            },
+            onClick: () => {
+              J(!1);
+            },
+            children: /* @__PURE__ */ t.jsx(Ze, {})
+          }
+        ),
+        /* @__PURE__ */ t.jsxs(
+          "div",
+          {
+            className: "p-2",
+            style: { backgroundColor: "rgba(240,240,240, 0.7)", width: "175px" },
+            children: [
+              /* @__PURE__ */ t.jsxs("div", { className: "flex gap-1 items-center", children: [
+                /* @__PURE__ */ t.jsx("svg", { width: "136px", viewBox: "0 0 136 136", className: "shrink-0", children: /* @__PURE__ */ t.jsxs("g", { children: [
+                  q.map((e, n) => /* @__PURE__ */ t.jsx("g", { transform: `translate(0,${100 - n * 25})`, children: e.map((r, o) => /* @__PURE__ */ t.jsx(
+                    "rect",
+                    {
+                      y: 1,
+                      x: o * 25 + 1,
+                      fill: r,
+                      width: 23,
+                      height: 23,
+                      strokeWidth: X === r ? 2 : 0.25,
+                      style: { cursor: "pointer" },
+                      onMouseOver: () => {
+                        R(r);
+                      },
+                      onMouseLeave: () => {
+                        R(void 0);
+                      }
+                    },
+                    o
+                  )) }, n)),
+                  /* @__PURE__ */ t.jsx("g", { transform: "translate(0,125)", children: C.map((e, n) => /* @__PURE__ */ t.jsx("text", { y: 10, x: (n + 1) * 25, fontSize: 10, textAnchor: "middle", children: typeof e == "string" || e < 1 ? e : De(e, "NA") }, n)) }),
+                  W.map((e, n) => /* @__PURE__ */ t.jsx(
+                    "g",
+                    {
+                      transform: `translate(${Math.max(Math.min(C.length + 1, 5), 4) * 25 + 10},${100 - n * 25})`,
+                      children: /* @__PURE__ */ t.jsx(
+                        "text",
+                        {
+                          x: 0,
+                          transform: "rotate(-90)",
+                          y: 0,
+                          fontSize: 10,
+                          textAnchor: "middle",
+                          children: typeof e == "string" || e < 1 ? e : De(e, "NA")
+                        }
+                      )
+                    },
+                    n
+                  ))
+                ] }) }),
+                /* @__PURE__ */ t.jsx(
+                  Ne,
+                  {
+                    marginBottom: "none",
+                    size: "xs",
+                    className: "leading-normal text-center shrink-0",
+                    style: {
+                      display: "-webkit-box",
+                      WebkitLineClamp: "1",
+                      WebkitBoxOrient: "vertical",
+                      overflow: "hidden",
+                      writingMode: "vertical-rl",
+                      height: "8.5rem",
+                      transform: "rotate(180deg)"
+                    },
+                    children: T
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ t.jsx(
+                Ne,
+                {
+                  marginBottom: "none",
+                  size: "xs",
+                  className: "mt-1 leading-normal text-center",
+                  style: {
+                    display: "-webkit-box",
+                    WebkitLineClamp: "1",
+                    width: "8.5rem",
+                    WebkitBoxOrient: "vertical",
+                    overflow: "hidden"
+                  },
+                  children: E
+                }
+              )
+            ]
+          }
+        )
+      ] }) : /* @__PURE__ */ t.jsx(
+        "button",
+        {
+          type: "button",
+          className: "mb-0 border-0 bg-transparent p-0 self-start",
+          onClick: () => {
+            J(!0);
+          },
+          children: /* @__PURE__ */ t.jsx("div", { className: "items-start text-sm font-medium cursor-pointer p-2 mb-0 flex text-primary-black dark:text-primary-gray-300 bg-primary-gray-300 dark:bg-primary-gray-550 border-primary-gray-400 dark:border-primary-gray-500", children: "Show Legend" })
+        }
+      ) }),
+      P === "button" && /* @__PURE__ */ t.jsxs("div", { className: "absolute left-4 top-4 flex flex-col", children: [
+        /* @__PURE__ */ t.jsx(
+          "button",
+          {
+            onClick: () => S("in"),
+            className: "leading-0 px-2 py-3.5 border border-primary-gray-400 bg-primary-gray-200 dark:border-primary-gray-400 dark:bg-primary-gray-600 dark:text-primary-gray-100",
+            children: "+"
+          }
+        ),
+        /* @__PURE__ */ t.jsx(
+          "button",
+          {
+            onClick: () => S("out"),
+            className: "leading-0 px-2 py-3.5 border border-t-0 border-primary-gray-400 bg-primary-gray-200 dark:border-primary-gray-400 dark:bg-primary-gray-600 dark:text-primary-gray-100",
+            children: "–"
+          }
+        )
+      ] })
+    ] }),
+    _ && se && he && D ? /* @__PURE__ */ t.jsx(
+      Je,
+      {
+        data: _,
+        body: se,
+        xPos: he,
+        yPos: D,
+        backgroundStyle: we?.tooltip,
+        className: je?.tooltip
+      }
+    ) : null,
+    M && g !== void 0 ? /* @__PURE__ */ t.jsx(
+      Ge,
+      {
+        open: g !== void 0,
+        onClose: () => {
+          K(void 0);
+        },
+        children: /* @__PURE__ */ t.jsx(
+          "div",
+          {
+            className: "graph-modal-content m-0",
+            dangerouslySetInnerHTML: typeof M == "string" ? { __html: Ke(M, g) } : void 0,
+            children: typeof M == "function" ? M(g) : null
+          }
+        )
+      }
+    ) : null
+  ] });
+}
+function Lt(be) {
+  const {
+    data: b,
+    graphTitle: C,
+    mapData: f = "https://raw.githubusercontent.com/UNDP-Data/dv-country-geojson/refs/heads/main/worldMap.json",
+    colors: E = Ce.light.bivariateColors.colors05x05,
+    sources: W,
+    graphDescription: T,
+    height: m,
+    width: l,
+    footNote: q = "The designations employed and the presentation of material on this map do not imply the expression of any opinion whatsoever on the part of the Secretariat of the United Nations or UNDP concerning the legal status of any country, territory, city or area or its authorities, or concerning the delimitation of its frontiers or boundaries.",
+    xDomain: G,
+    yDomain: N,
+    xColorLegendTitle: A = "X Color key",
+    yColorLegendTitle: O = "Y Color key",
+    tooltip: ne,
+    scale: se = 0.95,
+    centerPoint: le,
+    padding: ce,
+    mapBorderWidth: ke = 0.5,
+    mapNoDataColor: B = Ce.light.graphNoData,
+    backgroundColor: k = !1,
+    mapBorderColor: V = Ce.light.grays["gray-500"],
+    relativeHeight: w,
+    onSeriesMouseOver: M,
+    isWorldMap: de = !0,
+    zoomScaleExtend: we = [0.8, 6],
+    zoomTranslateExtend: je,
+    graphID: F,
+    showColorScale: P = !0,
+    highlightedIds: j = [],
+    onSeriesMouseClick: H,
+    mapProperty: me = "ISO3",
+    graphDownload: pe = !1,
+    dataDownload: J = !1,
+    showAntarctica: X = !1,
+    language: R = "en",
+    minHeight: g = 0,
+    theme: K = "light",
+    ariaLabel: _,
+    resetSelectionOnDoubleClick: Z = !0,
+    detailsOnClick: he,
+    styles: $,
+    classNames: D,
+    mapProjection: Q,
+    zoomInteraction: I = "button",
+    animate: U = !1,
+    dimmedOpacity: ge = 0.3,
+    customLayers: ee = [],
+    timeline: p = { enabled: !1, autoplay: !1, showOnlyActiveDate: !0 }
+  } = be, [u, ue] = v(0), [te, ye] = v(0), [L, z] = v(p.autoplay), c = Ie(
+    Be(
+      b.filter((r) => r.date !== void 0 && r.date !== null),
+      (r) => r.date
+    ).map((r) => Te(`${r.date}`, p.dateFormat || "yyyy", /* @__PURE__ */ new Date()).getTime()),
+    (r, o) => nt(r, o)
+  ), [re, ae] = v(p.autoplay ? 0 : c.length - 1), [Y, fe] = v(void 0), S = ie(null), e = ie(null);
+  ve(() => {
+    const r = new ResizeObserver((o) => {
+      ue(l || o[0].contentRect.width || 760), ye(m || o[0].target.clientHeight || 480);
+    });
+    return S.current && (ye(S.current.clientHeight || 480), ue(S.current.clientWidth || 760), l || r.observe(S.current)), () => r.disconnect();
+  }, [l, m]), ve(() => {
+    typeof f == "string" ? it(f).then((o) => {
+      fe(o);
+    }) : fe(f);
+  }, [f]), ve(() => {
+    const r = setInterval(
+      () => {
+        ae((o) => o < c.length - 1 ? o + 1 : 0);
+      },
+      (p.speed || 2) * 1e3
+    );
+    return L || clearInterval(r), () => clearInterval(r);
+  }, [c, L, p.speed]);
+  const n = Le(
+    c,
+    re,
+    p.showOnlyActiveDate,
+    p.dateFormat || "yyyy"
+  );
+  return G && N && (G.length !== E[0].length - 1 || N.length !== E.length - 1) ? (console.error("the xDomain and yDomain array length don't match to the color array length"), null) : /* @__PURE__ */ t.jsx(
+    "div",
+    {
+      className: `${K || "light"} flex  ${l ? "w-fit grow-0" : "w-full grow"}`,
+      dir: R === "he" || R === "ar" ? "rtl" : void 0,
+      children: /* @__PURE__ */ t.jsx(
+        "div",
+        {
+          className: Pe(
+            `${k ? k === !0 ? "bg-primary-gray-200 dark:bg-primary-gray-650 " : "" : "bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${R || "en"}`,
+            D?.graphContainer
+          ),
+          style: {
+            ...$?.graphContainer || {},
+            ...k && k !== !0 ? { backgroundColor: k } : {}
+          },
+          id: F,
+          ref: e,
+          "aria-label": _ || `${C ? `The graph shows ${C}. ` : ""}This is bi-variate choropleth map where geographic areas are colored in proportion to two variables.${T ? ` ${T}` : ""}`,
+          children: /* @__PURE__ */ t.jsx(
+            "div",
+            {
+              className: "flex grow",
+              style: { padding: k ? ce || "1rem" : ce || 0 },
+              children: /* @__PURE__ */ t.jsxs("div", { className: "flex flex-col w-full gap-4 grow justify-between", children: [
+                C || T || pe || J ? /* @__PURE__ */ t.jsx(
+                  at,
+                  {
+                    styles: {
+                      title: $?.title,
+                      description: $?.description
+                    },
+                    classNames: {
+                      title: D?.title,
+                      description: D?.description
+                    },
+                    graphTitle: C,
+                    graphDescription: T,
+                    width: l,
+                    graphDownload: pe ? e.current : void 0,
+                    dataDownload: J ? b.map((r) => r.data).filter((r) => r !== void 0).length > 0 ? b.map((r) => r.data).filter((r) => r !== void 0) : b.filter((r) => r !== void 0) : null
+                  }
+                ) : null,
+                p.enabled && c.length > 0 && n ? /* @__PURE__ */ t.jsxs("div", { className: "flex gap-6 items-center", dir: "ltr", children: [
+                  /* @__PURE__ */ t.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => {
+                        z(!L);
+                      },
+                      className: "p-0 border-0 cursor-pointer bg-transparent",
+                      "aria-label": L ? "Click to pause animation" : "Click to play animation",
+                      children: L ? /* @__PURE__ */ t.jsx(Qe, {}) : /* @__PURE__ */ t.jsx(et, {})
+                    }
+                  ),
+                  /* @__PURE__ */ t.jsx(
+                    ze,
+                    {
+                      min: c[0],
+                      max: c[c.length - 1],
+                      marks: n,
+                      step: null,
+                      defaultValue: c[c.length - 1],
+                      value: c[re],
+                      onChangeComplete: (r) => {
+                        ae(c.indexOf(r));
+                      },
+                      onChange: (r) => {
+                        ae(c.indexOf(r));
+                      },
+                      "aria-label": "Time slider. Use arrow keys to adjust selected time period."
+                    }
+                  )
+                ] }) : null,
+                /* @__PURE__ */ t.jsx(
+                  "div",
+                  {
+                    className: "flex flex-col grow justify-center leading-0",
+                    ref: S,
+                    "aria-label": "Map area",
+                    children: (l || u) && (m || te) && Y ? /* @__PURE__ */ t.jsx(
+                      st,
+                      {
+                        data: b.filter(
+                          (r) => p.enabled ? r.date === Ae(new Date(c[re]), p.dateFormat || "yyyy") : r
+                        ),
+                        mapData: X ? Y : {
+                          ...Y,
+                          features: Y.features.filter(
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            (r) => r.properties.NAME !== "Antarctica"
+                          )
+                        },
+                        xDomain: G || Ee(
+                          b.map((r) => r.x),
+                          E[0].length
+                        ),
+                        yDomain: N || Ee(
+                          b.map((r) => r.y),
+                          E.length
+                        ),
+                        width: l || u,
+                        height: Math.max(
+                          g,
+                          m || (w ? g ? (l || u) * w > g ? (l || u) * w : g : (l || u) * w : te)
+                        ),
+                        scale: se,
+                        centerPoint: le,
+                        colors: E,
+                        xColorLegendTitle: A,
+                        yColorLegendTitle: O,
+                        mapBorderWidth: ke,
+                        mapNoDataColor: B,
+                        mapBorderColor: V,
+                        tooltip: ne,
+                        onSeriesMouseOver: M,
+                        isWorldMap: de,
+                        zoomScaleExtend: we,
+                        zoomTranslateExtend: je,
+                        onSeriesMouseClick: H,
+                        mapProperty: me,
+                        highlightedIds: j,
+                        resetSelectionOnDoubleClick: Z,
+                        styles: $,
+                        showColorScale: P,
+                        classNames: D,
+                        mapProjection: Q || (de ? "naturalEarth" : "mercator"),
+                        detailsOnClick: he,
+                        zoomInteraction: I,
+                        animate: U === !0 ? { duration: 0.5, once: !0, amount: 0.5 } : U || { duration: 0, once: !0, amount: 0 },
+                        dimmedOpacity: ge,
+                        customLayers: ee
+                      }
+                    ) : /* @__PURE__ */ t.jsx(
+                      "div",
+                      {
+                        style: {
+                          height: `${Math.max(
+                            g,
+                            m || (w ? g ? (l || u) * w > g ? (l || u) * w : g : (l || u) * w : te)
+                          )}px`
+                        },
+                        className: "flex items-center justify-center",
+                        children: /* @__PURE__ */ t.jsx(We, { "aria-label": "Loading graph" })
+                      }
+                    )
+                  }
+                ),
+                W || q ? /* @__PURE__ */ t.jsx(
+                  ot,
+                  {
+                    styles: { footnote: $?.footnote, source: $?.source },
+                    classNames: {
+                      footnote: D?.footnote,
+                      source: D?.source
+                    },
+                    sources: W,
+                    footNote: q,
+                    width: l
+                  }
+                ) : null
+              ] })
+            }
+          )
+        }
+      )
+    }
+  );
+}
+export {
+  Lt as BiVariateChoroplethMap
+};
+//# sourceMappingURL=BiVariateChoroplethMap.js.map