@undp/data-viz 1.5.8 → 2.0.0

package/dist/ThreeDGlobe.js

@@ -1,555 +1,384 @@
-import { j as r, m as xe } from "./index-CHPV5EwG-BPSP-7Jg.js";
-import { useState as N, useRef as ge, useEffect as D, useCallback as me } from "react";
-import { y as ve } from "./Spinner-C85UF28E.js";
-import we from "react-globe.gl";
-import { i as be } from "./index-Bwrro8-q.js";
-import * as P from "three";
-import { X as Ce } from "./Modal-DVVwpKhP.js";
-import { u as ue } from "./Typography-Ctgfl1J5.js";
-import { T as je } from "./Tooltip-CVCGWyzw.js";
-import { n as ke } from "./numberFormattingFunction-14YCbkN2.js";
-import { X as Se } from "./index-BmCqpO1B.js";
-import { s as De } from "./string2HTML-oFCROsus.js";
-import { g as Ne } from "./getCentroidCoordinates-Dfk6IqEG.js";
-import { o as Le } from "./ordinal-w9Lu4Stb.js";
-import { t as Me } from "./threshold-DFfqcDMa.js";
-import { GraphHeader as ze } from "./GraphHeader.js";
-import { GraphFooter as Oe } from "./GraphFooter.js";
-import { f as Pe } from "./fetchAndParseData-sapWbnYk.js";
-import { Colors as A } from "./Colors.js";
-import { g as Re } from "./getUniqValue-DiCh_MOD.js";
-import { g as Te } from "./getJenks-BbngDoBQ.js";
-function Ee(e) {
-  let a;
-  switch (e.type) {
+import { j as a, m as rt, c as at } from "./index-CHPV5EwG-Curnpaqc.js";
+import { useState as T, useRef as Xe, useEffect as A, useCallback as st, useEffectEvent as it } from "react";
+import { w as nt } from "./Spinner-D7rnnwnA.js";
+import lt from "react-globe.gl";
+import { i as ct } from "./index-Bwrro8-q.js";
+import * as H from "three";
+import { l as dt } from "./Modal-DGcuAHyK.js";
+import { j as Ye } from "./Typography-PxtFcnJb.js";
+import { T as pt } from "./Tooltip-CwWUegPB.js";
+import { n as ht } from "./numberFormattingFunction-14YCbkN2.js";
+import { X as mt } from "./index-D491FEn1.js";
+import { s as ut } from "./string2HTML-DhG75NqA.js";
+import { g as gt } from "./getCentroidCoordinates-D7r34N4w.js";
+import { o as ft } from "./ordinal-P77xw8aL.js";
+import { t as yt } from "./threshold-Bgr20hik.js";
+import { GraphHeader as vt } from "./GraphHeader.js";
+import { GraphFooter as bt } from "./GraphFooter.js";
+import { f as xt } from "./fetchAndParseData-BpqkBPQL.js";
+import { Colors as K } from "./Colors.js";
+import { g as wt } from "./getUniqValue-BKHCm3zE.js";
+import { g as Ct } from "./getJenks-BbngDoBQ.js";
+import { a as St, G as kt } from "./GraphContainer-CRqzdKu2.js";
+function Dt(t) {
+  let e;
+  switch (t.type) {
     case "ambient":
-      a = new P.AmbientLight(e.color, e.intensity);
+      e = new H.AmbientLight(t.color, t.intensity);
       break;
     case "directional":
-      a = new P.DirectionalLight(e.color, e.intensity), e.position && (e.position === "camera" ? a.position.set(0, 0, 0) : a.position.set(e.position.x, e.position.y, e.position.z)), (e.target || e.position === "camera") && a.target.position.set(
-        e.target?.x || 0,
-        e.target?.y || 0,
-        e.target?.z === void 0 ? -1 : e.target.z
-      ), e.castShadow && (a.castShadow = !0, e.shadow && (a.shadow.mapSize.width = e.shadow.mapSize.width, a.shadow.mapSize.height = e.shadow.mapSize.height, a.shadow.camera.near = e.shadow.camera.near, a.shadow.camera.far = e.shadow.camera.far));
+      e = new H.DirectionalLight(t.color, t.intensity), t.position && (t.position === "camera" ? e.position.set(0, 0, 0) : e.position.set(t.position.x, t.position.y, t.position.z)), (t.target || t.position === "camera") && e.target.position.set(t.target?.x || 0, t.target?.y || 0, t.target?.z === void 0 ? -1 : t.target.z), t.castShadow && (e.castShadow = !0, t.shadow && (e.shadow.mapSize.width = t.shadow.mapSize.width, e.shadow.mapSize.height = t.shadow.mapSize.height, e.shadow.camera.near = t.shadow.camera.near, e.shadow.camera.far = t.shadow.camera.far));
       break;
     case "point":
-      a = new P.PointLight(
-        e.color,
-        e.intensity,
-        e.distance || 0,
-        e.decay || 2
-      ), e.position && (e.position === "camera" ? a.position.set(0, 0, 0) : a.position.set(e.position.x, e.position.y, e.position.z));
+      e = new H.PointLight(t.color, t.intensity, t.distance || 0, t.decay || 2), t.position && (t.position === "camera" ? e.position.set(0, 0, 0) : e.position.set(t.position.x, t.position.y, t.position.z));
       break;
     case "spot":
-      a = new P.SpotLight(
-        e.color,
-        e.intensity,
-        e.distance || 0,
-        e.angle || Math.PI / 3,
-        e.penumbra || 0,
-        e.decay || 2
-      ), e.position && (e.position === "camera" ? a.position.set(0, 0, 0) : a.position.set(e.position.x, e.position.y, e.position.z)), (e.target || e.position === "camera") && a.target.position.set(
-        e.target?.x || 0,
-        e.target?.y || 0,
-        e.target?.z || 0
-      ), e.castShadow && (a.castShadow = !0, e.shadow && (a.shadow.mapSize.width = e.shadow.mapSize.width, a.shadow.mapSize.height = e.shadow.mapSize.height, a.shadow.camera.near = e.shadow.camera.near, a.shadow.camera.far = e.shadow.camera.far));
+      e = new H.SpotLight(t.color, t.intensity, t.distance || 0, t.angle || Math.PI / 3, t.penumbra || 0, t.decay || 2), t.position && (t.position === "camera" ? e.position.set(0, 0, 0) : e.position.set(t.position.x, t.position.y, t.position.z)), (t.target || t.position === "camera") && e.target.position.set(t.target?.x || 0, t.target?.y || 0, t.target?.z || 0), t.castShadow && (e.castShadow = !0, t.shadow && (e.shadow.mapSize.width = t.shadow.mapSize.width, e.shadow.mapSize.height = t.shadow.mapSize.height, e.shadow.camera.near = t.shadow.camera.near, e.shadow.camera.far = t.shadow.camera.far));
       break;
     default:
       throw new Error("Unknown light type");
   }
-  return a;
+  return e;
 }
-function Ae(e) {
+function jt(t) {
   const {
-    width: a,
-    autoRotate: x,
-    data: v,
-    enableZoom: H,
-    categorical: R,
-    colorDomain: h,
-    colors: l,
-    globeMaterial: c,
-    height: V,
-    polygonData: $,
-    mapProperty: d,
-    mapBorderColor: F,
-    atmosphereColor: X,
-    tooltip: Z,
-    styles: C,
-    classNames: re,
-    mapNoDataColor: u,
-    colorLegendTitle: G,
+    width: e,
+    autoRotate: d,
+    data: b,
+    enableZoom: x,
+    categorical: S,
+    colorDomain: f,
+    colors: p,
+    globeMaterial: D,
+    height: n,
+    polygonData: B,
+    mapProperty: l,
+    mapBorderColor: Q,
+    atmosphereColor: ye,
+    tooltip: F,
+    styles: ve,
+    classNames: ee,
+    mapNoDataColor: te,
+    colorLegendTitle: u,
     showColorScale: oe,
-    hoverStrokeColor: ae,
-    detailsOnClick: w,
-    onSeriesMouseClick: L,
-    onSeriesMouseOver: y,
-    resetSelectionOnDoubleClick: T,
-    highlightedIds: J,
-    scale: g,
-    globeOffset: j,
-    polygonAltitude: I,
-    centerLng: B,
+    hoverStrokeColor: re,
+    detailsOnClick: j,
+    onSeriesMouseClick: I,
+    onSeriesMouseOver: be,
+    resetSelectionOnDoubleClick: xe,
+    highlightedIds: ae,
+    scale: O,
+    globeOffset: h,
+    polygonAltitude: m,
+    centerLng: _,
     centerLat: U,
-    atmosphereAltitude: _,
-    globeCurvatureResolution: ie,
-    fogSettings: M,
+    atmosphereAltitude: se,
+    globeCurvatureResolution: W,
+    fogSettings: P,
     lights: z,
-    highlightedAltitude: Y,
-    selectedId: f
-  } = e, [K, se] = N(!1), n = ge(void 0), [k, E] = N(void 0), [ne, Q] = N(!(a < 680)), [ee, le] = N({ x: 0, y: 0 }), [S, de] = N(void 0), W = R ? Le().domain(h).range(l) : Me().domain(h).range(l);
-  D(() => {
-    n.current && (n.current.controls().enableZoom = H);
-  }, [H]), D(() => {
-    n.current && (S || f ? n.current.controls().autoRotate = !1 : (n.current.controls().autoRotate = x !== 0, n.current.controls().autoRotateSpeed = x));
-  }, [S, f, x]), D(() => {
-    if (n.current && f) {
-      const t = $.find(
-        (m) => m.properties[d] === f
-      ), [o, s] = Ne(t);
-      n.current.pointOfView({ lat: s, lng: o, altitude: g }, 1e3);
+    highlightedAltitude: ie,
+    selectedId: y,
+    collapseColorScaleByDefault: q
+  } = t, [V, Z] = T(!1), i = Xe(void 0), [N, L] = T(void 0), [we, ne] = T(q === void 0 ? !(e < 680) : !q), [le, ce] = T({
+    x: 0,
+    y: 0
+  }), [w, de] = T(void 0), $ = S ? ft().domain(f).range(p) : yt().domain(f).range(p);
+  A(() => {
+    i.current && (i.current.controls().enableZoom = x);
+  }, [x]), A(() => {
+    i.current && (w || y ? i.current.controls().autoRotate = !1 : (i.current.controls().autoRotate = d !== 0, i.current.controls().autoRotateSpeed = d));
+  }, [w, y, d]), A(() => {
+    if (i.current && y) {
+      const o = B.find((v) => v.properties[l] === y), [r, s] = gt(o);
+      i.current.pointOfView({
+        lat: s,
+        lng: r,
+        altitude: O
+      }, 1e3);
     }
-  }, [f, g, $, d]), D(() => {
-    const t = n.current?.renderer().domElement;
-    if (!t) return;
-    const o = (s) => {
-      le({ x: s.clientX, y: s.clientY });
+  }, [y, O, B, l]), A(() => {
+    const o = i.current?.renderer().domElement;
+    if (!o) return;
+    const r = (s) => {
+      ce({
+        x: s.clientX,
+        y: s.clientY
+      });
     };
-    return t.addEventListener("mousemove", o), () => t.removeEventListener("mousemove", o);
-  }, []), D(() => {
-    n.current && n.current.pointOfView({ lat: U, lng: B, altitude: g }, 1e3);
-  }, [g, B, U]);
-  const q = c || new P.MeshBasicMaterial({
+    return o.addEventListener("mousemove", r), () => o.removeEventListener("mousemove", r);
+  }, []), A(() => {
+    i.current && i.current.pointOfView({
+      lat: U,
+      lng: _,
+      altitude: O
+    }, 1e3);
+  }, [O, _, U]);
+  const C = D || new H.MeshBasicMaterial({
     color: "#FFF"
-  }), p = me(() => {
-    if (!n.current) return;
-    const t = n.current.scene(), o = n.current.camera();
+  }), R = st(() => {
+    if (!i.current) return;
+    const o = i.current.scene(), r = i.current.camera();
     let s = [];
-    t.traverse((i) => {
-      i instanceof P.Light && s.push(i);
-    }), s = [...s, ...o.children], s.forEach((i) => i.parent?.remove(i)), z.map((i) => Ee(i)).forEach((i, b) => {
-      z[b].type !== "ambient" && z[b].position === "camera" ? (o.add(i), z[b].type !== "point" && o.add(i.target)) : t.add(i);
-    }), M && (t.fog = new P.Fog(M.color, M.near, M.far));
-  }, [z, M]), te = me(() => {
-    se(!0), p();
-  }, [p]);
-  return D(() => {
-    K && p();
-  }, [K, p]), /* @__PURE__ */ r.jsxs("div", { className: "relative", children: [
-    /* @__PURE__ */ r.jsx(
-      we,
-      {
-        ref: n,
-        height: V,
-        width: a,
-        globeOffset: j,
-        lineHoverPrecision: 0,
-        polygonsData: $,
-        polygonAltitude: (t) => J.includes(t?.properties?.[d]) || t?.properties?.[d] === f ? Y * (t?.properties?.[d] === f ? 2 : 1) : t?.properties?.[d] === S?.id || t?.properties?.[d] === k?.id ? Y : I,
-        polygonCapColor: (t) => {
-          const o = t?.properties?.[d], s = v.find((m) => m.id === o)?.x;
-          return s != null ? W(s) : u;
-        },
-        polygonSideColor: (t) => {
-          const o = t?.properties?.[d], s = v.find((i) => i.id === o)?.x, m = s != null ? W(s) : u;
-          return J.includes(t?.properties?.[d]) || t?.properties?.[d] === f ? m : "rgba(100,100,100,0)";
-        },
-        polygonStrokeColor: (t) => t?.properties?.[d] === S?.id ? ae : F,
-        onGlobeClick: () => {
-          E(void 0);
-        },
-        onPolygonClick: (t) => {
-          const o = t?.properties?.[d] ? v.find((s) => s.id === t?.properties?.[d]) : void 0;
-          (L || w) && (be(k, o) && T && o ? (E(void 0), L?.(void 0)) : (E(o), L?.(o)));
-        },
-        onPolygonHover: (t) => {
-          const o = t?.properties?.[d] ? v.find((s) => s.id === t?.properties?.[d]) : void 0;
-          de(o), y?.(o);
-        },
-        atmosphereColor: X,
-        atmosphereAltitude: _,
-        globeCurvatureResolution: ie,
-        globeMaterial: q,
-        backgroundColor: "rgba(0, 0, 0, 0)",
-        polygonsTransitionDuration: 100,
-        onGlobeReady: () => {
-          if (n.current) {
-            n.current.pointOfView({
-              lat: U,
-              lng: B
-            });
-            const t = n.current.scene();
-            setTimeout(() => {
-              (t.children[3]?.children[0]?.children[4]?.children || []).forEach((m) => {
-                const i = m.children[1];
-                i.renderOrder = 2;
-              });
-            }, 300);
-            const o = n.current.camera();
-            t.add(o), te();
-          }
-        }
-      }
-    ),
-    oe === !1 ? null : /* @__PURE__ */ r.jsx("div", { className: "absolute left-4 bottom-4", children: ne ? /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
-      /* @__PURE__ */ r.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: () => {
-            Q(!1);
-          },
-          children: /* @__PURE__ */ r.jsx(Se, {})
-        }
-      ),
-      /* @__PURE__ */ r.jsxs(
-        "div",
-        {
-          className: "p-2",
-          style: {
-            backgroundColor: "rgba(240,240,240, 0.7)",
-            width: R ? void 0 : "340px"
-          },
-          children: [
-            G && G !== "" ? /* @__PURE__ */ r.jsx(
-              ue,
-              {
-                size: "xs",
-                marginBottom: "xs",
-                className: "p-0 leading-normal overflow-hidden text-primary-gray-700 dark:text-primary-gray-300",
-                style: {
-                  display: "-webkit-box",
-                  WebkitLineClamp: "1",
-                  WebkitBoxOrient: "vertical"
-                },
-                children: G
-              }
-            ) : null,
-            R ? /* @__PURE__ */ r.jsx("div", { className: "flex flex-col gap-3", children: h.map((t, o) => /* @__PURE__ */ r.jsxs("div", { className: "flex gap-2 items-center", children: [
-              /* @__PURE__ */ r.jsx(
-                "div",
-                {
-                  className: "w-2 h-2 rounded-full",
-                  style: { backgroundColor: l[o % l.length] }
-                }
-              ),
-              /* @__PURE__ */ r.jsx(ue, { size: "sm", marginBottom: "none", leading: "none", children: t })
-            ] }, o)) }) : /* @__PURE__ */ r.jsx("svg", { width: "100%", viewBox: "0 0 320 30", direction: "ltr", children: /* @__PURE__ */ r.jsxs("g", { children: [
-              h.map((t, o) => /* @__PURE__ */ r.jsxs("g", { className: "cursor-pointer", children: [
-                /* @__PURE__ */ r.jsx(
-                  "rect",
-                  {
-                    x: o * 320 / l.length + 1,
-                    y: 1,
-                    width: 320 / l.length - 2,
-                    height: 8,
-                    style: {
-                      fill: l[o],
-                      stroke: l[o]
-                    }
-                  }
-                ),
-                /* @__PURE__ */ r.jsx(
-                  "text",
-                  {
-                    x: (o + 1) * 320 / l.length,
-                    y: 25,
-                    className: "fill-primary-gray-700 dark:fill-primary-gray-300 text-xs",
-                    style: { textAnchor: "middle" },
-                    children: ke(t, "NA")
-                  }
-                )
-              ] }, o)),
-              /* @__PURE__ */ r.jsx("g", { children: /* @__PURE__ */ r.jsx(
-                "rect",
-                {
-                  x: h.length * 320 / l.length + 1,
-                  y: 1,
-                  width: 320 / l.length - 2,
-                  height: 8,
-                  style: {
-                    fill: l[h.length],
-                    stroke: l[h.length]
-                  }
-                }
-              ) })
-            ] }) })
-          ]
-        }
-      )
-    ] }) : /* @__PURE__ */ r.jsx(
-      "button",
-      {
-        type: "button",
-        className: "mb-0 border-0 bg-transparent p-0 self-start",
-        onClick: () => {
-          Q(!0);
-        },
-        children: /* @__PURE__ */ r.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" })
-      }
-    ) }),
-    S && Z ? /* @__PURE__ */ r.jsx(
-      je,
-      {
-        data: S,
-        body: Z,
-        xPos: ee.x,
-        yPos: ee.y,
-        backgroundStyle: C?.tooltip,
-        className: re?.tooltip
-      }
-    ) : null,
-    w && k !== void 0 ? /* @__PURE__ */ r.jsx(
-      Ce,
-      {
-        open: k !== void 0,
-        onClose: () => {
-          E(void 0);
-        },
-        children: /* @__PURE__ */ r.jsx(
-          "div",
-          {
-            className: "graph-modal-content m-0",
-            dangerouslySetInnerHTML: typeof w == "string" ? { __html: De(w, k) } : void 0,
-            children: typeof w == "function" ? w(k) : null
-          }
-        )
+    o.traverse((c) => {
+      c instanceof H.Light && s.push(c);
+    }), s = [...s, ...r.children], s.forEach((c) => c.parent?.remove(c)), z.map((c) => Dt(c)).forEach((c, G) => {
+      z[G].type !== "ambient" && z[G].position === "camera" ? (r.add(c), z[G].type !== "point" && r.add(c.target)) : o.add(c);
+    }), P && (o.fog = new H.Fog(P.color, P.near, P.far));
+  }, [z, P]), M = () => {
+    Z(!0), R();
+  };
+  return A(() => {
+    V && R();
+  }, [V, R]), /* @__PURE__ */ a.jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ a.jsx(lt, { ref: i, height: n, width: e, globeOffset: h, lineHoverPrecision: 0, polygonsData: B, polygonAltitude: (o) => ae.includes(o?.properties?.[l]) || o?.properties?.[l] === y ? ie * (o?.properties?.[l] === y ? 2 : 1) : o?.properties?.[l] === w?.id || o?.properties?.[l] === N?.id ? ie : m, polygonCapColor: (o) => {
+      const r = o?.properties?.[l], s = b.find((v) => v.id === r)?.x;
+      return s != null ? $(s) : te;
+    }, polygonSideColor: (o) => {
+      const r = o?.properties?.[l], s = b.find((c) => c.id === r)?.x, v = s != null ? $(s) : te;
+      return ae.includes(o?.properties?.[l]) || o?.properties?.[l] === y ? v : "rgba(100,100,100,0)";
+    }, polygonStrokeColor: (o) => o?.properties?.[l] === w?.id ? re : Q, onGlobeClick: () => {
+      L(void 0);
+    }, onPolygonClick: (o) => {
+      const r = o?.properties?.[l] ? b.find((s) => s.id === o?.properties?.[l]) : void 0;
+      (I || j) && (ct(N, r) && xe && r ? (L(void 0), I?.(void 0)) : (L(r), I?.(r)));
+    }, onPolygonHover: (o) => {
+      const r = o?.properties?.[l] ? b.find((s) => s.id === o?.properties?.[l]) : void 0;
+      de(r), be?.(r);
+    }, atmosphereColor: ye, atmosphereAltitude: se, globeCurvatureResolution: W, globeMaterial: C, backgroundColor: "rgba(0, 0, 0, 0)", polygonsTransitionDuration: 100, onGlobeReady: () => {
+      if (i.current) {
+        i.current.pointOfView({
+          lat: U,
+          lng: _
+        });
+        const o = i.current.scene();
+        setTimeout(() => {
+          (o.children[3]?.children[0]?.children[4]?.children || []).forEach((v) => {
+            const c = v.children[1];
+            c.renderOrder = 2;
+          });
+        }, 300);
+        const r = i.current.camera();
+        o.add(r), M();
       }
-    ) : null
+    } }),
+    oe === !1 ? null : /* @__PURE__ */ a.jsx("div", { className: rt("absolute left-4 bottom-4 map-color-legend", ee?.colorLegend), children: we ? /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
+      /* @__PURE__ */ a.jsx("div", { className: "color-legend-close-button bg-[rgba(240,240,240,0.7)] dark:bg-[rgba(30,30,30,0.7)] border border-[var(--gray-400)] rounded-full w-6 h-6 p-[3px] cursor-pointer z-10 absolute right-[-0.75rem] top-[-0.75rem]", onClick: () => {
+        ne(!1);
+      }, children: /* @__PURE__ */ a.jsx(mt, {}) }),
+      /* @__PURE__ */ a.jsxs("div", { className: "color-legend-box p-2 bg-[rgba(240,240,240,0.7)] dark:bg-[rgba(30,30,30,0.7)]", style: {
+        width: S ? void 0 : "340px"
+      }, children: [
+        u && u !== "" ? /* @__PURE__ */ a.jsx(Ye, { size: "xs", marginBottom: "xs", className: "p-0 leading-normal overflow-hidden text-primary-gray-700 dark:text-primary-gray-300", style: {
+          display: "-webkit-box",
+          WebkitLineClamp: "1",
+          WebkitBoxOrient: "vertical"
+        }, children: u }) : null,
+        S ? /* @__PURE__ */ a.jsx("div", { className: "flex flex-col gap-3", children: f.map((o, r) => /* @__PURE__ */ a.jsxs("div", { className: "flex gap-2 items-center", children: [
+          /* @__PURE__ */ a.jsx("div", { className: "w-2 h-2 rounded-full", style: {
+            backgroundColor: p[r % p.length]
+          } }),
+          /* @__PURE__ */ a.jsx(Ye, { size: "sm", marginBottom: "none", leading: "none", children: o })
+        ] }, r)) }) : /* @__PURE__ */ a.jsx("svg", { width: "100%", viewBox: "0 0 320 30", direction: "ltr", children: /* @__PURE__ */ a.jsxs("g", { children: [
+          f.map((o, r) => /* @__PURE__ */ a.jsxs("g", { className: "cursor-pointer", children: [
+            /* @__PURE__ */ a.jsx("rect", { x: r * 320 / p.length + 1, y: 1, width: 320 / p.length - 2, height: 8, style: {
+              fill: p[r],
+              stroke: p[r]
+            } }),
+            /* @__PURE__ */ a.jsx("text", { x: (r + 1) * 320 / p.length, y: 25, className: "fill-primary-gray-700 dark:fill-primary-gray-300 text-xs", style: {
+              textAnchor: "middle"
+            }, children: ht(o, "NA") })
+          ] }, r)),
+          /* @__PURE__ */ a.jsx("g", { children: /* @__PURE__ */ a.jsx("rect", { x: f.length * 320 / p.length + 1, y: 1, width: 320 / p.length - 2, height: 8, style: {
+            fill: p[f.length],
+            stroke: p[f.length]
+          } }) })
+        ] }) })
+      ] })
+    ] }) : /* @__PURE__ */ a.jsx("button", { type: "button", className: "mb-0 border-0 bg-transparent p-0 self-start", onClick: () => {
+      ne(!0);
+    }, children: /* @__PURE__ */ a.jsx("div", { className: "show-color-legend-button 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-600 border-primary-gray-400 dark:border-primary-gray-500", children: "Show Legend" }) }) }),
+    w && F ? /* @__PURE__ */ a.jsx(pt, { data: w, body: F, xPos: le.x, yPos: le.y, backgroundStyle: ve?.tooltip, className: ee?.tooltip }) : null,
+    j && N !== void 0 ? /* @__PURE__ */ a.jsx(dt, { open: N !== void 0, onClose: () => {
+      L(void 0);
+    }, children: /* @__PURE__ */ a.jsx("div", { className: "graph-modal-content m-0", dangerouslySetInnerHTML: typeof j == "string" ? {
+      __html: ut(j, N)
+    } : void 0, children: typeof j == "function" ? j(N) : null }) }) : null
   ] });
 }
-function ot(e) {
-  const {
-    data: a,
-    mapData: x = "https://raw.githubusercontent.com/UNDP-Data/dv-country-geojson/refs/heads/main/worldMap-simplified.json",
-    graphTitle: v,
-    colors: H,
-    sources: R,
-    graphDescription: h,
-    height: l,
-    width: c,
-    footNote: V = "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.",
-    colorDomain: $,
-    colorLegendTitle: d,
-    scaleType: F = "threshold",
-    padding: X,
-    mapNoDataColor: Z = A.light.graphNoData,
-    backgroundColor: C = !1,
-    mapBorderColor: re = A.light.grays["gray-500"],
+function to(t) {
+  const e = at.c(96), {
+    data: d,
+    mapData: b,
+    graphTitle: x,
+    colors: S,
+    sources: f,
+    graphDescription: p,
+    height: D,
+    width: n,
+    footNote: B,
+    colorDomain: l,
+    colorLegendTitle: Q,
+    scaleType: ye,
+    padding: F,
+    mapNoDataColor: ve,
+    backgroundColor: ee,
+    mapBorderColor: te,
     relativeHeight: u,
-    tooltip: G,
-    graphID: oe,
-    mapProperty: ae = "ISO3",
-    dataDownload: w = !1,
-    language: L = "en",
-    minHeight: y = 0,
-    theme: T = "light",
-    ariaLabel: J,
-    styles: g,
-    classNames: j,
-    autoRotate: I = !0,
-    enableZoom: B = !0,
-    globeMaterial: U,
-    centerPoint: _ = [0, 0],
-    atmosphereColor: ie = "#999",
-    showColorScale: M = !0,
-    resetSelectionOnDoubleClick: z = !0,
-    detailsOnClick: Y,
-    onSeriesMouseOver: f,
-    onSeriesMouseClick: K,
-    highlightedIds: se = [],
-    highlightedAltitude: n = 0.1,
-    scale: k = 1,
-    globeOffset: E = [0, 0],
-    polygonAltitude: ne = 0.01,
-    globeCurvatureResolution: Q = 4,
-    atmosphereAltitude: ee = 0.15,
-    fogSettings: le,
-    lights: S = [
-      {
-        type: "ambient",
-        color: 4210752,
-        intensity: 0.4
-      },
-      {
-        type: "directional",
-        color: 16777215,
-        intensity: 1,
-        position: { x: 5, y: 10, z: 5 }
-      }
-    ],
-    selectedId: de
-  } = e, [W, q] = N(void 0), [p, te] = N(0), [t, o] = N(0), s = ge(null);
-  D(() => {
-    const i = new ResizeObserver((b) => {
-      te(c || b[0].target.clientWidth || 760), o(l || b[0].target.clientHeight || 480);
-    });
-    return s.current && (o(s.current.clientHeight || 480), te(s.current.clientWidth || 760), c || i.observe(s.current)), () => i.disconnect();
-  }, [c, l]), D(() => {
-    typeof x == "string" ? Pe(x).then((b) => {
-      if (x === "https://raw.githubusercontent.com/UNDP-Data/dv-country-geojson/refs/heads/main/worldMap-simplified.json") {
-        const ye = b.features.map((O) => {
-          if (O.geometry.type === "Polygon") {
-            const ce = [...O.geometry.coordinates[0]].reverse(), pe = { ...O.geometry, coordinates: [ce] };
-            return { ...O, geometry: pe };
-          }
-          const he = [];
-          O.geometry.coordinates.forEach((ce) => {
-            const pe = [...ce[0]].reverse();
-            he.push([pe]);
-          });
-          const fe = { ...O.geometry, coordinates: he };
-          return { ...O, geometry: fe };
-        });
-        q(ye);
-      } else q(b.features);
-    }) : q(x.features);
-  }, [x]);
-  const m = $ || (F === "categorical" ? Re(a, "x") : Te(
-    a.map((i) => i.x),
-    H?.length || 4
-  ));
-  return /* @__PURE__ */ r.jsx(
-    "div",
-    {
-      className: `${T || "light"} flex  ${c ? "w-fit grow-0" : "w-full grow"}`,
-      dir: L === "he" || L === "ar" ? "rtl" : void 0,
-      children: /* @__PURE__ */ r.jsx(
-        "div",
-        {
-          className: xe(
-            `${C ? C === !0 ? "bg-primary-gray-200 dark:bg-primary-gray-650 " : "" : "bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${L || "en"}`,
-            c ? "w-fit" : "w-full",
-            j?.graphContainer
-          ),
-          style: {
-            ...g?.graphContainer || {},
-            ...C && C !== !0 ? { backgroundColor: C } : {}
-          },
-          id: oe,
-          "aria-label": J || `${v ? `The graph shows ${v}. ` : ""}This is a map.${h ? ` ${h}` : ""}`,
-          children: /* @__PURE__ */ r.jsx(
-            "div",
-            {
-              className: "flex grow",
-              style: { padding: C ? X || "1rem" : X || 0 },
-              children: /* @__PURE__ */ r.jsxs("div", { className: "flex flex-col w-full gap-4 grow justify-between", children: [
-                v || h || w ? /* @__PURE__ */ r.jsx(
-                  ze,
-                  {
-                    styles: {
-                      title: g?.title,
-                      description: g?.description
-                    },
-                    classNames: {
-                      title: j?.title,
-                      description: j?.description
-                    },
-                    graphTitle: v,
-                    graphDescription: h,
-                    width: c,
-                    graphDownload: void 0,
-                    dataDownload: w ? a.map((i) => i.data).filter((i) => i !== void 0).length > 0 ? a.map((i) => i.data).filter((i) => i !== void 0) : a.filter((i) => i !== void 0) : null
-                  }
-                ) : null,
-                /* @__PURE__ */ r.jsx(
-                  "div",
-                  {
-                    className: "flex flex-col grow justify-center leading-0",
-                    ref: s,
-                    "aria-label": "Map area",
-                    children: (c || p) && (l || t) && W ? /* @__PURE__ */ r.jsx(
-                      Ae,
-                      {
-                        data: a,
-                        globeOffset: E,
-                        polygonData: W,
-                        colorDomain: m,
-                        width: c || p,
-                        height: Math.max(
-                          y,
-                          l || (u ? y ? (c || p) * u > y ? (c || p) * u : y : (c || p) * u : t)
-                        ),
-                        colors: H || (F === "categorical" ? A[T].sequentialColors[`neutralColorsx0${m.length}`] : A[T].sequentialColors[`neutralColorsx0${m.length + 1}`]),
-                        mapNoDataColor: Z,
-                        categorical: F === "categorical",
-                        mapBorderColor: re,
-                        tooltip: G,
-                        mapProperty: ae,
-                        styles: g,
-                        classNames: j,
-                        autoRotate: I === !0 ? 1.5 : I === !1 ? 0 : I,
-                        enableZoom: B,
-                        globeMaterial: U,
-                        atmosphereColor: ie,
-                        colorLegendTitle: d,
-                        showColorScale: M,
-                        hoverStrokeColor: T === "light" ? A.light.grays["gray-700"] : A.light.grays["gray-300"],
-                        highlightedIds: se,
-                        resetSelectionOnDoubleClick: z,
-                        detailsOnClick: Y,
-                        onSeriesMouseOver: f,
-                        onSeriesMouseClick: K,
-                        scale: k,
-                        polygonAltitude: ne,
-                        centerLat: _[0],
-                        centerLng: _[1],
-                        atmosphereAltitude: ee,
-                        globeCurvatureResolution: Q,
-                        fogSettings: le,
-                        lights: S,
-                        highlightedAltitude: n,
-                        selectedId: de
-                      }
-                    ) : /* @__PURE__ */ r.jsx(
-                      "div",
-                      {
-                        style: {
-                          height: `${Math.max(
-                            y,
-                            l || (u ? y ? (c || p) * u > y ? (c || p) * u : y : (c || p) * u : t)
-                          )}px`
-                        },
-                        className: "flex items-center justify-center",
-                        children: /* @__PURE__ */ r.jsx(ve, { "aria-label": "Loading graph" })
-                      }
-                    )
-                  }
-                ),
-                R || V ? /* @__PURE__ */ r.jsx(
-                  Oe,
-                  {
-                    styles: { footnote: g?.footnote, source: g?.source },
-                    classNames: {
-                      footnote: j?.footnote,
-                      source: j?.source
-                    },
-                    sources: R,
-                    footNote: V,
-                    width: c
-                  }
-                ) : null
-              ] })
-            }
-          )
-        }
-      )
+    tooltip: oe,
+    graphID: re,
+    mapProperty: j,
+    dataDownload: I,
+    language: be,
+    minHeight: xe,
+    theme: ae,
+    ariaLabel: O,
+    styles: h,
+    classNames: m,
+    autoRotate: _,
+    enableZoom: U,
+    globeMaterial: se,
+    centerPoint: W,
+    atmosphereColor: P,
+    showColorScale: z,
+    resetSelectionOnDoubleClick: ie,
+    detailsOnClick: y,
+    onSeriesMouseOver: q,
+    onSeriesMouseClick: V,
+    highlightedIds: Z,
+    highlightedAltitude: i,
+    scale: N,
+    globeOffset: L,
+    polygonAltitude: we,
+    globeCurvatureResolution: ne,
+    atmosphereAltitude: le,
+    fogSettings: ce,
+    lights: w,
+    selectedId: de,
+    collapseColorScaleByDefault: $
+  } = t, C = b === void 0 ? "https://raw.githubusercontent.com/UNDP-Data/dv-country-geojson/refs/heads/main/worldMap-simplified.json" : b, R = B === void 0 ? "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." : B, M = ye === void 0 ? "threshold" : ye, o = ve === void 0 ? K.light.graphNoData : ve, r = ee === void 0 ? !1 : ee, s = te === void 0 ? K.light.grays["gray-500"] : te, v = j === void 0 ? "ISO3" : j, c = I === void 0 ? !1 : I, G = be === void 0 ? "en" : be, g = xe === void 0 ? 0 : xe, E = ae === void 0 ? "light" : ae, pe = _ === void 0 ? !0 : _, Ae = U === void 0 ? !0 : U;
+  let Ce;
+  e[0] !== W ? (Ce = W === void 0 ? [0, 0] : W, e[0] = W, e[1] = Ce) : Ce = e[1];
+  const Se = Ce, Te = P === void 0 ? "#999" : P, Ge = z === void 0 ? !0 : z, He = ie === void 0 ? !0 : ie;
+  let ke;
+  e[2] !== Z ? (ke = Z === void 0 ? [] : Z, e[2] = Z, e[3] = ke) : ke = e[3];
+  const Be = ke, Fe = i === void 0 ? 0.1 : i, Ie = N === void 0 ? 1 : N;
+  let De;
+  e[4] !== L ? (De = L === void 0 ? [0, 0] : L, e[4] = L, e[5] = De) : De = e[5];
+  const _e = De, Ue = we === void 0 ? 0.01 : we, We = ne === void 0 ? 4 : ne, qe = le === void 0 ? 0.15 : le;
+  let je;
+  e[6] !== w ? (je = w === void 0 ? [{
+    type: "ambient",
+    color: 4210752,
+    intensity: 0.4
+  }, {
+    type: "directional",
+    color: 16777215,
+    intensity: 1,
+    position: {
+      x: 5,
+      y: 10,
+      z: 5
     }
-  );
+  }] : w, e[6] = w, e[7] = je) : je = e[7];
+  const Ve = je, [Ne, Ke] = T(void 0), [k, Qe] = T(0), [he, et] = T(0), Ze = Xe(null), tt = Xe(null);
+  let Le, Me;
+  e[8] === Symbol.for("react.memo_cache_sentinel") ? (Le = () => {
+    const ge = new ResizeObserver((fe) => {
+      Qe(fe[0].target.clientWidth || 620), et(fe[0].target.clientHeight || 480);
+    });
+    return Ze.current && ge.observe(Ze.current), () => ge.disconnect();
+  }, Me = [], e[8] = Le, e[9] = Me) : (Le = e[8], Me = e[9]), A(Le, Me);
+  let Oe;
+  e[10] === Symbol.for("react.memo_cache_sentinel") ? (Oe = (ge) => {
+    Ke(ge);
+  }, e[10] = Oe) : Oe = e[10];
+  const me = it(Oe);
+  let Pe;
+  e[11] !== C || e[12] !== me ? (Pe = () => {
+    typeof C == "string" ? xt(C).then((fe) => {
+      if (C === "https://raw.githubusercontent.com/UNDP-Data/dv-country-geojson/refs/heads/main/worldMap-simplified.json") {
+        const ot = fe.features.map(Rt);
+        me(ot);
+      } else
+        me(fe.features);
+    }) : me(C.features);
+  }, e[11] = C, e[12] = me, e[13] = Pe) : Pe = e[13];
+  let ze;
+  e[14] !== C ? (ze = [C], e[14] = C, e[15] = ze) : ze = e[15], A(Pe, ze);
+  let Re;
+  e[16] !== l || e[17] !== S?.length || e[18] !== d || e[19] !== M ? (Re = l || (M === "categorical" ? wt(d, "x") : Ct(d.map(zt), S?.length || 4)), e[16] = l, e[17] = S?.length, e[18] = d, e[19] = M, e[20] = Re) : Re = e[20];
+  const ue = Re, $e = m?.graphContainer, Je = h?.graphContainer;
+  let J;
+  e[21] !== m?.description || e[22] !== m?.title || e[23] !== d || e[24] !== c || e[25] !== p || e[26] !== x || e[27] !== h?.description || e[28] !== h?.title || e[29] !== n ? (J = x || p || c ? /* @__PURE__ */ a.jsx(vt, { styles: {
+    title: h?.title,
+    description: h?.description
+  }, classNames: {
+    title: m?.title,
+    description: m?.description
+  }, graphTitle: x, graphDescription: p, width: n, graphDownload: void 0, dataDownload: c ? d.map(Pt).filter(Ot).length > 0 ? d.map(Mt).filter(Lt) : d.filter(Nt) : null }) : null, e[21] = m?.description, e[22] = m?.title, e[23] = d, e[24] = c, e[25] = p, e[26] = x, e[27] = h?.description, e[28] = h?.title, e[29] = n, e[30] = J) : J = e[30];
+  let X;
+  e[31] !== qe || e[32] !== Te || e[33] !== pe || e[34] !== Se || e[35] !== m || e[36] !== $ || e[37] !== Q || e[38] !== S || e[39] !== d || e[40] !== y || e[41] !== ue || e[42] !== Ae || e[43] !== ce || e[44] !== We || e[45] !== se || e[46] !== _e || e[47] !== D || e[48] !== Fe || e[49] !== Be || e[50] !== Ve || e[51] !== s || e[52] !== o || e[53] !== v || e[54] !== Ne || e[55] !== g || e[56] !== V || e[57] !== q || e[58] !== Ue || e[59] !== u || e[60] !== He || e[61] !== Ie || e[62] !== M || e[63] !== de || e[64] !== Ge || e[65] !== h || e[66] !== he || e[67] !== k || e[68] !== E || e[69] !== oe || e[70] !== n ? (X = /* @__PURE__ */ a.jsx(St, { ref: Ze, children: k && he && Ne ? /* @__PURE__ */ a.jsx(jt, { data: d, globeOffset: _e, polygonData: Ne, colorDomain: ue, width: n || k, height: Math.max(g, D || (u ? g ? (n || k) * u > g ? (n || k) * u : g : (n || k) * u : he)), colors: S || (M === "categorical" ? K[E].sequentialColors[`neutralColorsx0${ue.length}`] : K[E].sequentialColors[`neutralColorsx0${ue.length + 1}`]), mapNoDataColor: o, categorical: M === "categorical", mapBorderColor: s, tooltip: oe, mapProperty: v, styles: h, classNames: m, autoRotate: pe === !0 ? 1.5 : pe === !1 ? 0 : pe, enableZoom: Ae, globeMaterial: se, atmosphereColor: Te, colorLegendTitle: Q, showColorScale: Ge, hoverStrokeColor: E === "light" ? K.light.grays["gray-700"] : K.light.grays["gray-300"], highlightedIds: Be, resetSelectionOnDoubleClick: He, detailsOnClick: y, onSeriesMouseOver: q, onSeriesMouseClick: V, scale: Ie, polygonAltitude: Ue, centerLat: Se[0], centerLng: Se[1], atmosphereAltitude: qe, globeCurvatureResolution: We, fogSettings: ce, lights: Ve, highlightedAltitude: Fe, selectedId: de, collapseColorScaleByDefault: $ }) : /* @__PURE__ */ a.jsx("div", { style: {
+    height: `${Math.max(g, D || (u ? g ? (n || k) * u > g ? (n || k) * u : g : (n || k) * u : he))}px`
+  }, className: "flex items-center justify-center", children: /* @__PURE__ */ a.jsx(nt, { "aria-label": "Loading graph" }) }) }), e[31] = qe, e[32] = Te, e[33] = pe, e[34] = Se, e[35] = m, e[36] = $, e[37] = Q, e[38] = S, e[39] = d, e[40] = y, e[41] = ue, e[42] = Ae, e[43] = ce, e[44] = We, e[45] = se, e[46] = _e, e[47] = D, e[48] = Fe, e[49] = Be, e[50] = Ve, e[51] = s, e[52] = o, e[53] = v, e[54] = Ne, e[55] = g, e[56] = V, e[57] = q, e[58] = Ue, e[59] = u, e[60] = He, e[61] = Ie, e[62] = M, e[63] = de, e[64] = Ge, e[65] = h, e[66] = he, e[67] = k, e[68] = E, e[69] = oe, e[70] = n, e[71] = X) : X = e[71];
+  let Y;
+  e[72] !== m?.footnote || e[73] !== m?.source || e[74] !== R || e[75] !== f || e[76] !== h?.footnote || e[77] !== h?.source || e[78] !== n ? (Y = f || R ? /* @__PURE__ */ a.jsx(bt, { styles: {
+    footnote: h?.footnote,
+    source: h?.source
+  }, classNames: {
+    footnote: m?.footnote,
+    source: m?.source
+  }, sources: f, footNote: R, width: n }) : null, e[72] = m?.footnote, e[73] = m?.source, e[74] = R, e[75] = f, e[76] = h?.footnote, e[77] = h?.source, e[78] = n, e[79] = Y) : Y = e[79];
+  let Ee;
+  return e[80] !== O || e[81] !== r || e[82] !== re || e[83] !== D || e[84] !== G || e[85] !== g || e[86] !== F || e[87] !== u || e[88] !== $e || e[89] !== Je || e[90] !== J || e[91] !== X || e[92] !== Y || e[93] !== E || e[94] !== n ? (Ee = /* @__PURE__ */ a.jsxs(kt, { className: $e, style: Je, id: re, ref: tt, "aria-label": O, backgroundColor: r, theme: E, language: G, minHeight: g, width: n, height: D, relativeHeight: u, padding: F, children: [
+    J,
+    X,
+    Y
+  ] }), e[80] = O, e[81] = r, e[82] = re, e[83] = D, e[84] = G, e[85] = g, e[86] = F, e[87] = u, e[88] = $e, e[89] = Je, e[90] = J, e[91] = X, e[92] = Y, e[93] = E, e[94] = n, e[95] = Ee) : Ee = e[95], Ee;
+}
+function Nt(t) {
+  return t !== void 0;
+}
+function Lt(t) {
+  return t !== void 0;
+}
+function Mt(t) {
+  return t.data;
+}
+function Ot(t) {
+  return t !== void 0;
+}
+function Pt(t) {
+  return t.data;
+}
+function zt(t) {
+  return t.x;
+}
+function Rt(t) {
+  if (t.geometry.type === "Polygon") {
+    const b = [...t.geometry.coordinates[0]].reverse(), x = {
+      ...t.geometry,
+      coordinates: [b]
+    };
+    return {
+      ...t,
+      geometry: x
+    };
+  }
+  const e = [];
+  t.geometry.coordinates.forEach((b) => {
+    const x = [...b[0]].reverse();
+    e.push([x]);
+  });
+  const d = {
+    ...t.geometry,
+    coordinates: e
+  };
+  return {
+    ...t,
+    geometry: d
+  };
 }
 export {
-  ot as ThreeDGlobe
+  to as ThreeDGlobe
 };
 //# sourceMappingURL=ThreeDGlobe.js.map