@undp/data-viz 1.4.5 → 1.4.7

package/dist/ThreeDGlobe.js

@@ -3,19 +3,19 @@ import { useRef as ge, useState as L, useEffect as S } from "react";
 import { y as ue } from "./Spinner-C85UF28E.js";
 import fe from "react-globe.gl";
 import { i as ye } from "./index-27yTRcko.js";
-import * as J from "three";
+import * as I from "three";
 import { X as xe } from "./Modal-DVVwpKhP.js";
 import { u as de } from "./Typography-Ctgfl1J5.js";
 import { T as ve } from "./Tooltip-DyM5snqx.js";
 import { n as be } from "./numberFormattingFunction-14YCbkN2.js";
-import { X as je } from "./index-BmCqpO1B.js";
-import { s as we } from "./string2HTML-CWHGfz_d.js";
+import { X as we } from "./index-BmCqpO1B.js";
+import { s as je } from "./string2HTML-CWHGfz_d.js";
 import { o as Ce } from "./ordinal-w9Lu4Stb.js";
 import { t as De } from "./threshold-DFfqcDMa.js";
 import { GraphHeader as ke } from "./GraphHeader.js";
 import { GraphFooter as Ne } from "./GraphFooter.js";
 import { f as Se } from "./fetchAndParseData-4gsYTy6_.js";
-import { Colors as T } from "./Colors.js";
+import { Colors as R } from "./Colors.js";
 import { g as Le } from "./getUniqValue-BtUENB2H.js";
 import { g as Me } from "./getJenks-VhM3GIoC.js";
 function Oe(_) {
@@ -23,42 +23,42 @@ function Oe(_) {
     width: p,
     autoRotate: d,
     data: u,
-    enableZoom: R,
+    enableZoom: E,
     categorical: M,
     colorDomain: l,
     colors: i,
     globeMaterial: s,
-    height: I,
+    height: W,
     polygonData: Y,
     mapProperty: c,
-    mapBorderColor: E,
-    atmosphereColor: W,
-    tooltip: z,
+    mapBorderColor: H,
+    atmosphereColor: z,
+    tooltip: U,
     styles: v,
     classNames: K,
     mapNoDataColor: g,
-    colorLegendTitle: H,
+    colorLegendTitle: $,
     showColorScale: Q,
     hoverStrokeColor: ee,
     detailsOnClick: f,
     onSeriesMouseClick: b,
     onSeriesMouseOver: h,
     resetSelectionOnDoubleClick: O,
-    highlightedIds: U,
+    highlightedIds: q,
     scale: y,
-    globeOffset: j,
-    polygonAltitude: $,
-    centerLng: A,
-    centerLat: F,
-    atmosphereAltitude: q,
+    globeOffset: w,
+    polygonAltitude: A,
+    centerLng: F,
+    centerLat: B,
+    atmosphereAltitude: X,
     globeCurvatureResolution: te,
-    lightColor: B
-  } = _, a = ge(void 0), [D, P] = L(void 0), [oe, X] = L(!(p < 680)), [V, re] = L({ x: 0, y: 0 }), [w, ie] = L(void 0), Z = M ? Ce().domain(l).range(i) : De().domain(l).range(i);
+    lightColor: T
+  } = _, a = ge(void 0), [D, P] = L(void 0), [oe, V] = L(!(p < 680)), [Z, re] = L({ x: 0, y: 0 }), [j, ie] = L(void 0), J = M ? Ce().domain(l).range(i) : De().domain(l).range(i);
   S(() => {
-    a?.current && (a.current.controls().autoRotate = d !== 0, a.current.controls().enableZoom = R, a.current.controls().autoRotateSpeed = d);
-  }, [d, R]), S(() => {
-    a.current && (w ? a.current.controls().autoRotate = !1 : a.current.controls().autoRotate = d !== 0);
-  }, [w, d]), S(() => {
+    a?.current && (a.current.controls().autoRotate = d !== 0, a.current.controls().enableZoom = E, a.current.controls().autoRotateSpeed = d);
+  }, [d, E]), S(() => {
+    a.current && (j ? a.current.controls().autoRotate = !1 : a.current.controls().autoRotate = d !== 0);
+  }, [j, d]), S(() => {
     const e = a.current?.renderer().domElement;
     if (!e) return;
     const o = (r) => {
@@ -66,44 +66,42 @@ function Oe(_) {
     };
     return e.addEventListener("mousemove", o), () => e.removeEventListener("mousemove", o);
   }, []), S(() => {
-    a.current && a.current.pointOfView({ lat: F, lng: A, altitude: y }, 1e3);
-  }, [y, A, F]);
-  const ae = s || new J.MeshPhysicalMaterial({
-    color: "#FFF",
-    roughness: 0.5,
-    reflectivity: 1.2
+    a.current && a.current.pointOfView({ lat: B, lng: F, altitude: y }, 1e3);
+  }, [y, F, B]);
+  const ae = s || new I.MeshBasicMaterial({
+    color: "#FFF"
   });
   return S(() => {
     if (!a.current) return;
     const e = a.current.scene();
     e.children.filter((r) => r.type === "DirectionalLight" || r.type === "AmbientLight").forEach((r) => e.remove(r));
-    const o = new J.AmbientLight(B, 0.2);
+    const o = new I.AmbientLight(T, 0.2);
     e.add(o), setTimeout(() => {
       (e.children[3]?.children[0]?.children[4]?.children || []).forEach((m) => {
         const x = m.children[1];
         x && (x.renderOrder = 2);
       });
-    }, 300);
-  }, [B]), /* @__PURE__ */ t.jsxs("div", { className: "relative", children: [
+    }, 300), e.fog = new I.Fog(T, 150, 300);
+  }, [T]), /* @__PURE__ */ t.jsxs("div", { className: "relative", children: [
     /* @__PURE__ */ t.jsx(
       fe,
       {
         ref: a,
         width: p,
-        height: I,
-        globeOffset: j,
+        height: W,
+        globeOffset: w,
         lineHoverPrecision: 0,
         polygonsData: Y,
-        polygonAltitude: (e) => U.includes(e?.properties?.[c]) ? 0.1 : e?.properties?.[c] === w?.id ? 0.01 : $,
+        polygonAltitude: (e) => q.includes(e?.properties?.[c]) ? 0.1 : e?.properties?.[c] === j?.id ? 0.01 : A,
         polygonCapColor: (e) => {
           const o = e?.properties?.[c], r = u.find((m) => m.id === o)?.x;
-          return r != null ? Z(r) : g;
+          return r != null ? J(r) : g;
         },
         polygonSideColor: (e) => {
-          const o = e?.properties?.[c], r = u.find((x) => x.id === o)?.x, m = r != null ? Z(r) : g;
-          return U.includes(e?.properties?.[c]) ? m : "rgba(100,100,100,0)";
+          const o = e?.properties?.[c], r = u.find((x) => x.id === o)?.x, m = r != null ? J(r) : g;
+          return q.includes(e?.properties?.[c]) ? m : "rgba(100,100,100,0)";
         },
-        polygonStrokeColor: (e) => e?.properties?.[c] === w?.id ? ee : E,
+        polygonStrokeColor: (e) => e?.properties?.[c] === j?.id ? ee : H,
         onPolygonClick: (e) => {
           const o = e?.properties?.[c] ? u.find((r) => r.id === e?.properties?.[c]) : void 0;
           (b || f) && (ye(D, o) && O && o ? (P(void 0), b?.(void 0)) : (P(o), b?.(o))), P(o), b?.(o);
@@ -112,8 +110,8 @@ function Oe(_) {
           const o = e?.properties?.[c] ? u.find((r) => r.id === e?.properties?.[c]) : void 0;
           ie(o), h?.(o);
         },
-        atmosphereColor: W,
-        atmosphereAltitude: q,
+        atmosphereColor: z,
+        atmosphereAltitude: X,
         globeCurvatureResolution: te,
         globeMaterial: ae,
         backgroundColor: "rgba(0, 0, 0, 0)",
@@ -121,21 +119,21 @@ function Oe(_) {
         onGlobeReady: () => {
           if (a.current) {
             a.current.pointOfView({
-              lat: F,
-              lng: A
+              lat: B,
+              lng: F
             });
             const e = a.current.scene();
             setTimeout(() => {
               e.children.filter((C) => C.type === "DirectionalLight").map((C) => {
                 e.remove(C);
               });
-              const m = new J.AmbientLight(B, 0.2);
+              const m = new I.AmbientLight(T, 0.2);
               e.add(m), (e.children[3]?.children[0]?.children[4]?.children || []).forEach((C) => {
                 const k = C.children[1];
                 k.renderOrder = 2;
               });
             }, 300);
-            const o = new J.DirectionalLight(16777215, 0.1), r = a.current.camera();
+            const o = new I.DirectionalLight(16777215, 0.1), r = a.current.camera();
             o.position.set(0, 0, 1), r.add(o), e.add(r);
           }
         }
@@ -159,9 +157,9 @@ function Oe(_) {
             top: "-0.75rem"
           },
           onClick: () => {
-            X(!1);
+            V(!1);
           },
-          children: /* @__PURE__ */ t.jsx(je, {})
+          children: /* @__PURE__ */ t.jsx(we, {})
         }
       ),
       /* @__PURE__ */ t.jsxs(
@@ -173,7 +171,7 @@ function Oe(_) {
             width: M ? void 0 : "340px"
           },
           children: [
-            H && H !== "" ? /* @__PURE__ */ t.jsx(
+            $ && $ !== "" ? /* @__PURE__ */ t.jsx(
               de,
               {
                 size: "xs",
@@ -184,7 +182,7 @@ function Oe(_) {
                   WebkitLineClamp: "1",
                   WebkitBoxOrient: "vertical"
                 },
-                children: H
+                children: $
               }
             ) : null,
             M ? /* @__PURE__ */ t.jsx("div", { className: "flex flex-col gap-3", children: l.map((e, o) => /* @__PURE__ */ t.jsxs("div", { className: "flex gap-2 items-center", children: [
@@ -245,18 +243,18 @@ function Oe(_) {
         type: "button",
         className: "mb-0 border-0 bg-transparent p-0 self-start",
         onClick: () => {
-          X(!0);
+          V(!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" })
       }
     ) }),
-    w && z ? /* @__PURE__ */ t.jsx(
+    j && U ? /* @__PURE__ */ t.jsx(
       ve,
       {
-        data: w,
-        body: z,
-        xPos: V.x,
-        yPos: V.y,
+        data: j,
+        body: U,
+        xPos: Z.x,
+        yPos: Z.y,
         backgroundStyle: v?.tooltip,
         className: K?.tooltip
       }
@@ -272,7 +270,7 @@ function Oe(_) {
           "div",
           {
             className: "graph-modal-content m-0",
-            dangerouslySetInnerHTML: typeof f == "string" ? { __html: we(f, D) } : void 0,
+            dangerouslySetInnerHTML: typeof f == "string" ? { __html: je(f, D) } : void 0,
             children: typeof f == "function" ? f(D) : null
           }
         )
@@ -285,46 +283,46 @@ function _e(_) {
     data: p,
     mapData: d = "https://raw.githubusercontent.com/UNDP-Data/dv-country-geojson/refs/heads/main/worldMap-simplified.json",
     graphTitle: u,
-    colors: R,
+    colors: E,
     sources: M,
     graphDescription: l,
     height: i,
     width: s,
-    footNote: I = "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.",
+    footNote: W = "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: Y,
     colorLegendTitle: c,
-    scaleType: E = "threshold",
-    padding: W,
-    mapNoDataColor: z = T.light.graphNoData,
+    scaleType: H = "threshold",
+    padding: z,
+    mapNoDataColor: U = R.light.graphNoData,
     backgroundColor: v = !1,
-    mapBorderColor: K = T.light.grays["gray-500"],
+    mapBorderColor: K = R.light.grays["gray-500"],
     relativeHeight: g,
-    tooltip: H,
+    tooltip: $,
     graphID: Q,
     mapProperty: ee = "ISO3",
     dataDownload: f = !1,
     language: b = "en",
     minHeight: h = 0,
     theme: O = "light",
-    ariaLabel: U,
+    ariaLabel: q,
     styles: y,
-    classNames: j,
-    autoRotate: $ = !0,
-    enableZoom: A = !0,
-    globeMaterial: F,
-    centerPoint: q = [0, 0],
+    classNames: w,
+    autoRotate: A = !0,
+    enableZoom: F = !0,
+    globeMaterial: B,
+    centerPoint: X = [0, 0],
     atmosphereColor: te = "#999",
-    showColorScale: B = !0,
+    showColorScale: T = !0,
     resetSelectionOnDoubleClick: a = !0,
     detailsOnClick: D,
     onSeriesMouseOver: P,
     onSeriesMouseClick: oe,
-    highlightedIds: X = [],
-    scale: V = 1,
+    highlightedIds: V = [],
+    scale: Z = 1,
     globeOffset: re = [0, 0],
-    polygonAltitude: w = 0.01,
+    polygonAltitude: j = 0.01,
     globeCurvatureResolution: ie = 4,
-    atmosphereAltitude: Z = 0.15,
+    atmosphereAltitude: J = 0.15,
     lightColor: ae = "#dce9fe"
   } = _, [e, o] = L(void 0), [r, m] = L(0), [x, C] = L(0), k = ge(null);
   S(() => {
@@ -352,9 +350,9 @@ function _e(_) {
       } else o(G.features);
     }) : o(d.features);
   }, [d]);
-  const se = Y || (E === "categorical" ? Le(p, "x") : Me(
+  const se = Y || (H === "categorical" ? Le(p, "x") : Me(
     p.map((n) => n.x),
-    R?.length || 4
+    E?.length || 4
   ));
   return /* @__PURE__ */ t.jsx(
     "div",
@@ -366,19 +364,19 @@ function _e(_) {
         {
           className: pe(
             `${v ? v === !0 ? "bg-primary-gray-200 dark:bg-primary-gray-650 " : "" : "bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${b || "en"}`,
-            j?.graphContainer
+            w?.graphContainer
           ),
           style: {
             ...y?.graphContainer || {},
             ...v && v !== !0 ? { backgroundColor: v } : {}
           },
           id: Q,
-          "aria-label": U || `${u ? `The graph shows ${u}. ` : ""}This is a map.${l ? ` ${l}` : ""}`,
+          "aria-label": q || `${u ? `The graph shows ${u}. ` : ""}This is a map.${l ? ` ${l}` : ""}`,
           children: /* @__PURE__ */ t.jsx(
             "div",
             {
               className: "flex grow",
-              style: { padding: v ? W || "1rem" : W || 0 },
+              style: { padding: v ? z || "1rem" : z || 0 },
               children: /* @__PURE__ */ t.jsxs("div", { className: "flex flex-col w-full gap-4 grow justify-between", children: [
                 u || l || f ? /* @__PURE__ */ t.jsx(
                   ke,
@@ -388,8 +386,8 @@ function _e(_) {
                       description: y?.description
                     },
                     classNames: {
-                      title: j?.title,
-                      description: j?.description
+                      title: w?.title,
+                      description: w?.description
                     },
                     graphTitle: u,
                     graphDescription: l,
@@ -416,31 +414,31 @@ function _e(_) {
                           h,
                           i || (g ? h ? (s || r) * g > h ? (s || r) * g : h : (s || r) * g : x)
                         ),
-                        colors: R || (E === "categorical" ? T[O].sequentialColors[`neutralColorsx0${se.length}`] : T[O].sequentialColors[`neutralColorsx0${se.length + 1}`]),
-                        mapNoDataColor: z,
-                        categorical: E === "categorical",
+                        colors: E || (H === "categorical" ? R[O].sequentialColors[`neutralColorsx0${se.length}`] : R[O].sequentialColors[`neutralColorsx0${se.length + 1}`]),
+                        mapNoDataColor: U,
+                        categorical: H === "categorical",
                         mapBorderColor: K,
-                        tooltip: H,
+                        tooltip: $,
                         mapProperty: ee,
                         styles: y,
-                        classNames: j,
-                        autoRotate: $ === !0 ? 1.5 : $ === !1 ? 0 : $,
-                        enableZoom: A,
-                        globeMaterial: F,
+                        classNames: w,
+                        autoRotate: A === !0 ? 1.5 : A === !1 ? 0 : A,
+                        enableZoom: F,
+                        globeMaterial: B,
                         atmosphereColor: te,
                         colorLegendTitle: c,
-                        showColorScale: B,
-                        hoverStrokeColor: O === "light" ? T.light.grays["gray-700"] : T.light.grays["gray-300"],
-                        highlightedIds: X,
+                        showColorScale: T,
+                        hoverStrokeColor: O === "light" ? R.light.grays["gray-700"] : R.light.grays["gray-300"],
+                        highlightedIds: V,
                         resetSelectionOnDoubleClick: a,
                         detailsOnClick: D,
                         onSeriesMouseOver: P,
                         onSeriesMouseClick: oe,
-                        scale: V,
-                        polygonAltitude: w,
-                        centerLat: q[0],
-                        centerLng: q[1],
-                        atmosphereAltitude: Z,
+                        scale: Z,
+                        polygonAltitude: j,
+                        centerLat: X[0],
+                        centerLng: X[1],
+                        atmosphereAltitude: J,
                         globeCurvatureResolution: ie,
                         lightColor: ae
                       }
@@ -459,16 +457,16 @@ function _e(_) {
                     )
                   }
                 ),
-                M || I ? /* @__PURE__ */ t.jsx(
+                M || W ? /* @__PURE__ */ t.jsx(
                   Ne,
                   {
                     styles: { footnote: y?.footnote, source: y?.source },
                     classNames: {
-                      footnote: j?.footnote,
-                      source: j?.source
+                      footnote: w?.footnote,
+                      source: w?.source
                     },
                     sources: M,
-                    footNote: I,
+                    footNote: W,
                     width: s
                   }
                 ) : null