@undp/data-viz 1.5.8 → 1.5.9

package/dist/BiVariateChoroplethMap.js

@@ -1,87 +1,90 @@
-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 { g as Ie, x as Le } from "./getSliderMarks-9cNoRkDx.js";
-import { y as ze } from "./Spinner-C85UF28E.js";
-import { p as We, f as Te } from "./parse-DlCRUFh_.js";
+import { j as t, m as Le } from "./index-CHPV5EwG-DBWUSD9b.js";
+import { useState as v, useRef as ie, useEffect as be } from "react";
+import { g as Ie, x as ze } from "./getSliderMarks-_pYOWEtO.js";
+import { y as We } from "./Spinner-Bpz70q_g.js";
+import { p as Te, f as Be } from "./parse-DlCRUFh_.js";
 import { i as Ae } from "./index-Bwrro8-q.js";
-import { z as Be, t as Ve, g as _e, a as Fe, b as He, c as Xe, d as Re } from "./zoom-QipiAl5W.js";
+import { z as Ve, t as _e, g as Fe, a as He, b as Re, c as Xe, d as Ge } from "./zoom-QipiAl5W.js";
 import { t as Ue } from "./index-9tDEUqOZ.js";
-import { X as Ye } from "./Modal-DVVwpKhP.js";
-import { u as Ne } from "./Typography-Ctgfl1J5.js";
-import { n as De } from "./numberFormattingFunction-14YCbkN2.js";
-import { T as qe } from "./Tooltip-CVCGWyzw.js";
-import { s as Ge } from "./string2HTML-oFCROsus.js";
-import { c as Me } from "./checkIfNullOrUndefined-DmfiKkNw.js";
-import { X as Je, P as Ke, f as Ze } from "./index-BmCqpO1B.js";
-import { s as $e } from "./select-DKy99ogv.js";
-import { t as Se } from "./threshold-DFfqcDMa.js";
-import { u as Qe } from "./use-in-view-yS6jzJAp.js";
-import { m as oe } from "./proxy-CkpFesk1.js";
-import { A as et } from "./index-CNvov0eg.js";
-import { GraphHeader as tt } from "./GraphHeader.js";
-import { GraphFooter as rt } from "./GraphFooter.js";
-import { Colors as Ce } from "./Colors.js";
-import { f as at } from "./fetchAndParseData-sapWbnYk.js";
-import { g as Ee } from "./getJenks-BbngDoBQ.js";
-import { u as ot } from "./uniqBy-BHy4I8PK.js";
-import { s as it } from "./sort-DfK1b0F5.js";
-import { c as nt } from "./init-BhZylTFx.js";
-function st(be) {
+import { G as Ye } from "./Modal-Cg8daIlV.js";
+import { u as De } from "./Typography-LmZ9LEpe.js";
+import { n as Me } from "./numberFormattingFunction-14YCbkN2.js";
+import { T as qe } from "./Tooltip-6LIdPQGC.js";
+import { s as Je } from "./string2HTML-oFCROsus.js";
+import { c as Se } from "./checkIfNullOrUndefined-DmfiKkNw.js";
+import { X as Ke, P as Ze, f as Qe } from "./index-zZjQEHlm.js";
+import { s as Ce } from "./select-DKy99ogv.js";
+import { t as Ee } from "./threshold-DFfqcDMa.js";
+import { u as et } from "./use-in-view-DR-UTB96.js";
+import { m as oe } from "./proxy-BYIC9BuT.js";
+import { A as tt } from "./index-Cwgh7i7X.js";
+import { GraphHeader as rt } from "./GraphHeader.js";
+import { GraphFooter as at } from "./GraphFooter.js";
+import { Colors as Ne } from "./Colors.js";
+import { f as ot } from "./fetchAndParseData-sapWbnYk.js";
+import { g as Oe } from "./getJenks-BbngDoBQ.js";
+import { u as it } from "./uniqBy-BHy4I8PK.js";
+import { s as nt } from "./sort-DfK1b0F5.js";
+import { c as st } from "./init-BhZylTFx.js";
+function lt(ke) {
   const {
     data: b,
     xDomain: C,
-    mapData: f,
-    xColorLegendTitle: E,
-    yDomain: W,
-    yColorLegendTitle: T,
+    mapData: u,
+    xColorLegendTitle: P,
+    yDomain: B,
+    yColorLegendTitle: A,
     width: d,
     height: s,
-    colors: q,
-    scale: G,
+    colors: Y,
+    scale: q,
     centerPoint: N,
-    mapBorderWidth: A,
-    mapNoDataColor: O,
+    mapBorderWidth: V,
+    mapNoDataColor: L,
     mapBorderColor: ne,
     tooltip: se,
     onSeriesMouseOver: le,
     zoomScaleExtend: ce,
-    zoomTranslateExtend: ke,
-    highlightedIds: B,
+    zoomTranslateExtend: we,
+    highlightedIds: _,
     onSeriesMouseClick: k,
-    mapProperty: V,
+    mapProperty: F,
     resetSelectionOnDoubleClick: w,
     detailsOnClick: M,
     showColorScale: me,
-    styles: we,
-    classNames: je,
-    mapProjection: _,
-    zoomInteraction: P,
+    styles: je,
+    classNames: $e,
+    mapProjection: H,
+    zoomInteraction: I,
     animate: j,
-    dimmedOpacity: F,
-    customLayers: de
-  } = be, [pe, J] = v(!(d < 680)), [H, X] = v(void 0), [g, K] = v(void 0), [R, Z] = v(void 0), [he, $] = v(void 0), [D, Q] = v(void 0), I = ie(null), U = Qe(I, {
+    dimmedOpacity: R,
+    customLayers: de,
+    collapseColorScaleByDefault: J
+  } = ke, [pe, he] = v(
+    J === void 0 ? !(d < 680) : !J
+  ), [S, x] = v(void 0), [z, K] = v(void 0), [X, Z] = v(void 0), [D, $] = v(void 0), [ge, Q] = v(void 0), E = ie(null), ee = et(E, {
     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");
+  }), ye = ie(null), h = ie(null);
+  be(() => {
+    const e = Ce(ye.current), n = Ce(E.current), r = (a) => {
+      if (I === "noZoom") return !1;
+      if (I === "button") return !a.type.includes("wheel");
       const i = a.type === "wheel", m = a.type.startsWith("touch"), l = a.type === "mousedown" || a.type === "mousemove";
-      return m ? !0 : i ? P === "scroll" ? !0 : a.ctrlKey : l && !a.button && !a.ctrlKey;
-    }, o = Be().scaleExtent(ce).translateExtent(
-      ke || [
+      return m ? !0 : i ? I === "scroll" ? !0 : a.ctrlKey : l && !a.button && !a.ctrlKey;
+    }, o = Ve().scaleExtent(ce).translateExtent(
+      we || [
         [-20, -20],
         [d + 20, s + 20]
       ]
     ).filter(r).on("zoom", ({ transform: a }) => {
       e.attr("transform", a);
     });
-    n.call(o), ee.current = o;
-  }, [s, d, P]);
-  const p = Ve(f), y = Ue(f), ye = p[2] - p[0], te = p[3] - p[1], ue = d * 190 / 960 * 360 / ye, L = s * 190 / 678 * 180 / te, z = G * Math.min(ue, L), c = _ === "mercator" ? _e().rotate([0, 0]).center(N || y.geometry.coordinates).translate([d / 2, s / 2]).scale(z) : _ === "equalEarth" ? Fe().rotate([0, 0]).center(N || y.geometry.coordinates).translate([d / 2, s / 2]).scale(z) : _ === "naturalEarth" ? He().rotate([0, 0]).center(N || y.geometry.coordinates).translate([d / 2, s / 2]).scale(z) : _ === "orthographic" ? Xe().rotate([0, 0]).center(N || y.geometry.coordinates).translate([d / 2, s / 2]).scale(z) : Re().rotate([0, 0]).center(N || y.geometry.coordinates).translate([d / 2, s / 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);
+    n.call(o), h.current = o;
+  }, [s, d, I]);
+  const G = _e(u), g = Ue(u), ue = G[2] - G[0], te = G[3] - G[1], fe = d * 190 / 960 * 360 / ue, W = s * 190 / 678 * 180 / te, T = q * Math.min(fe, W), c = H === "mercator" ? Fe().rotate([0, 0]).center(N || g.geometry.coordinates).translate([d / 2, s / 2]).scale(T) : H === "equalEarth" ? He().rotate([0, 0]).center(N || g.geometry.coordinates).translate([d / 2, s / 2]).scale(T) : H === "naturalEarth" ? Re().rotate([0, 0]).center(N || g.geometry.coordinates).translate([d / 2, s / 2]).scale(T) : H === "orthographic" ? Xe().rotate([0, 0]).center(N || g.geometry.coordinates).translate([d / 2, s / 2]).scale(T) : Ge().rotate([0, 0]).center(N || g.geometry.coordinates).translate([d / 2, s / 2]).scale(T), re = Array.from({ length: C.length }, (e, n) => n), ae = Array.from({ length: B.length }, (e, n) => n), U = Ee().domain(C).range(re), xe = Ee().domain(B).range(ae), O = (e) => {
+    if (!E.current || !h.current) return;
+    Ce(E.current).call(h.current.scaleBy, e === "in" ? 1.2 : 1 / 1.2);
   };
   return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
     /* @__PURE__ */ t.jsxs("div", { className: "relative", children: [
@@ -91,24 +94,24 @@ function st(be) {
           viewBox: `0 0 ${d} ${s}`,
           width: `${d}px`,
           height: `${s}px`,
-          ref: I,
+          ref: E,
           direction: "ltr",
-          children: /* @__PURE__ */ t.jsxs("g", { ref: ge, children: [
+          children: /* @__PURE__ */ t.jsxs("g", { ref: ye, children: [
             de.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(
+            u.features.map((e, n) => b.findIndex((o) => o.id === e.properties[F]) !== -1 ? null : /* @__PURE__ */ t.jsx(
               oe.g,
               {
-                opacity: H ? F : B.length !== 0 ? B.indexOf(e.properties[V]) !== -1 ? 1 : F : 1,
+                opacity: S ? R : _.length !== 0 ? _.indexOf(e.properties[F]) !== -1 ? 1 : R : 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((m) => {
                       let l = " M";
-                      m.forEach((h, u) => {
-                        const x = c([h[0], h[1]]);
-                        u !== m.length - 1 ? l = `${l}${x[0]} ${x[1]}L` : l = `${l}${x[0]} ${x[1]}`;
+                      m.forEach((p, y) => {
+                        const f = c([p[0], p[1]]);
+                        y !== m.length - 1 ? l = `${l}${f[0]} ${f[1]}L` : l = `${l}${f[0]} ${f[1]}`;
                       }), i += l;
                     }), /* @__PURE__ */ t.jsx(
                       "path",
@@ -116,8 +119,8 @@ function st(be) {
                         d: i,
                         style: {
                           stroke: ne,
-                          strokeWidth: A,
-                          fill: O
+                          strokeWidth: V,
+                          fill: L
                         }
                       },
                       a
@@ -128,16 +131,16 @@ function st(be) {
                   e.geometry.coordinates.map((o, a) => {
                     let i = "M";
                     return o.forEach((m, l) => {
-                      const h = c([m[0], m[1]]);
-                      l !== o.length - 1 ? i = `${i}${h[0]} ${h[1]}L` : i = `${i}${h[0]} ${h[1]}`;
+                      const p = c([m[0], m[1]]);
+                      l !== o.length - 1 ? i = `${i}${p[0]} ${p[1]}L` : i = `${i}${p[0]} ${p[1]}`;
                     }), /* @__PURE__ */ t.jsx(
                       "path",
                       {
                         d: i,
                         style: {
                           stroke: ne,
-                          strokeWidth: A,
-                          fill: O
+                          strokeWidth: V,
+                          fill: L
                         }
                       },
                       a
@@ -147,29 +150,29 @@ function st(be) {
               },
               n
             )),
-            /* @__PURE__ */ t.jsx(et, { children: b.map((e) => {
-              const n = f.features.findIndex(
+            /* @__PURE__ */ t.jsx(tt, { children: b.map((e) => {
+              const n = u.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;
+                (i) => e.id === i.properties[F]
+              ), r = Se(e.x) ? void 0 : U(e.x), o = Se(e.y) ? void 0 : xe(e.y), a = r !== void 0 && o !== void 0 ? Y[o][r] : L;
               return /* @__PURE__ */ t.jsx(
                 oe.g,
                 {
                   variants: {
                     initial: { opacity: 0 },
                     whileInView: {
-                      opacity: H ? H === a ? 1 : F : B.length !== 0 ? B.indexOf(e.id) !== -1 ? 1 : F : 1,
+                      opacity: S ? S === a ? 1 : R : _.length !== 0 ? _.indexOf(e.id) !== -1 ? 1 : R : 1,
                       transition: { duration: j.duration }
                     }
                   },
                   initial: "initial",
-                  animate: U ? "whileInView" : "initial",
+                  animate: ee ? "whileInView" : "initial",
                   exit: { opacity: 0, transition: { duration: j.duration } },
                   onMouseEnter: (i) => {
                     Z(e), Q(i.clientY), $(i.clientX), le?.(e);
                   },
                   onClick: () => {
-                    (k || M) && (Ae(g, e) && w ? (K(void 0), k?.(void 0)) : (K(e), k?.(e)));
+                    (k || M) && (Ae(z, e) && w ? (K(void 0), k?.(void 0)) : (K(e), k?.(e)));
                   },
                   onMouseMove: (i) => {
                     Z(e), Q(i.clientY), $(i.clientX);
@@ -177,16 +180,16 @@ function st(be) {
                   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(
+                  children: n === -1 ? null : u.features[n].geometry.type === "MultiPolygon" ? u.features[n].geometry.coordinates.map(
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     (i, m) => {
                       let l = "";
-                      return i.forEach((h) => {
-                        let u = " M";
-                        h.forEach((x, Oe) => {
-                          const xe = c([x[0], x[1]]);
-                          Oe !== h.length - 1 ? u = `${u}${xe[0]} ${xe[1]}L` : u = `${u}${xe[0]} ${xe[1]}`;
-                        }), l += u;
+                      return i.forEach((p) => {
+                        let y = " M";
+                        p.forEach((f, Pe) => {
+                          const ve = c([f[0], f[1]]);
+                          Pe !== p.length - 1 ? y = `${y}${ve[0]} ${ve[1]}L` : y = `${y}${ve[0]} ${ve[1]}`;
+                        }), l += y;
                       }), /* @__PURE__ */ t.jsx(
                         oe.path,
                         {
@@ -199,24 +202,24 @@ function st(be) {
                             }
                           },
                           initial: "initial",
-                          animate: U ? "whileInView" : "initial",
+                          animate: ee ? "whileInView" : "initial",
                           exit: { opacity: 0, transition: { duration: j.duration } },
                           d: l,
-                          className: `${a === O ? "stroke-primary-gray-400 dark:stroke-primary-gray-500" : "stroke-primary-white dark:stroke-primary-gray-650"}`,
+                          className: `${a === L ? "stroke-primary-gray-400 dark:stroke-primary-gray-500" : "stroke-primary-white dark:stroke-primary-gray-650"}`,
                           style: {
-                            strokeWidth: A
+                            strokeWidth: V
                           }
                         },
                         `${e.id}-${m}`
                       );
                     }
-                  ) : f.features[n].geometry.coordinates.map(
+                  ) : u.features[n].geometry.coordinates.map(
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     (i, m) => {
                       let l = "M";
-                      return i.forEach((h, u) => {
-                        const x = c([h[0], h[1]]);
-                        u !== i.length - 1 ? l = `${l}${x[0]} ${x[1]}L` : l = `${l}${x[0]} ${x[1]}`;
+                      return i.forEach((p, y) => {
+                        const f = c([p[0], p[1]]);
+                        y !== i.length - 1 ? l = `${l}${f[0]} ${f[1]}L` : l = `${l}${f[0]} ${f[1]}`;
                       }), /* @__PURE__ */ t.jsx(
                         oe.path,
                         {
@@ -230,11 +233,11 @@ function st(be) {
                             }
                           },
                           initial: "initial",
-                          animate: U ? "whileInView" : "initial",
+                          animate: ee ? "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"}`,
+                          className: `${a === L ? "stroke-primary-gray-400 dark:stroke-primary-gray-500" : "stroke-primary-white dark:stroke-primary-gray-650"}`,
                           style: {
-                            strokeWidth: A
+                            strokeWidth: V
                           }
                         },
                         `${e.id}-${m}`
@@ -245,18 +248,18 @@ function st(be) {
                 e.id
               );
             }) }),
-            R ? f.features.filter(
+            X ? u.features.filter(
               // eslint-disable-next-line @typescript-eslint/no-explicit-any
-              (e) => e.properties[V] === R.id
+              (e) => e.properties[F] === X.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 m = " M";
-                  i.forEach((l, h) => {
-                    const u = c([l[0], l[1]]);
-                    h !== i.length - 1 ? m = `${m}${u[0]} ${u[1]}L` : m = `${m}${u[0]} ${u[1]}`;
+                  i.forEach((l, p) => {
+                    const y = c([l[0], l[1]]);
+                    p !== i.length - 1 ? m = `${m}${y[0]} ${y[1]}L` : m = `${m}${y[0]} ${y[1]}`;
                   }), a += m;
                 }), /* @__PURE__ */ t.jsx(
                   "path",
@@ -302,34 +305,22 @@ function st(be) {
         /* @__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"
-            },
+            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: () => {
-              J(!1);
+              he(!1);
             },
-            children: /* @__PURE__ */ t.jsx(Je, {})
+            children: /* @__PURE__ */ t.jsx(Ke, {})
           }
         ),
         /* @__PURE__ */ t.jsxs(
           "div",
           {
-            className: "p-2",
-            style: { backgroundColor: "rgba(240,240,240, 0.7)", width: "175px" },
+            className: "color-legend-box p-2 bg-[rgba(240,240,240,0.7)] dark:bg-[rgba(30,30,30,0.7)]",
+            style: { 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(
+                  Y.map((e, n) => /* @__PURE__ */ t.jsx("g", { transform: `translate(0,${100 - n * 25})`, children: e.map((r, o) => /* @__PURE__ */ t.jsx(
                     "rect",
                     {
                       y: 1,
@@ -337,19 +328,19 @@ function st(be) {
                       fill: r,
                       width: 23,
                       height: 23,
-                      strokeWidth: H === r ? 2 : 0.25,
+                      strokeWidth: S === r ? 2 : 0.25,
                       style: { cursor: "pointer" },
                       onMouseOver: () => {
-                        X(r);
+                        x(r);
                       },
                       onMouseLeave: () => {
-                        X(void 0);
+                        x(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(
+                  /* @__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 : Me(e, "NA") }, n)) }),
+                  B.map((e, n) => /* @__PURE__ */ t.jsx(
                     "g",
                     {
                       transform: `translate(${Math.max(Math.min(C.length + 1, 5), 4) * 25 + 10},${100 - n * 25})`,
@@ -361,7 +352,7 @@ function st(be) {
                           y: 0,
                           fontSize: 10,
                           textAnchor: "middle",
-                          children: typeof e == "string" || e < 1 ? e : De(e, "NA")
+                          children: typeof e == "string" || e < 1 ? e : Me(e, "NA")
                         }
                       )
                     },
@@ -369,7 +360,7 @@ function st(be) {
                   ))
                 ] }) }),
                 /* @__PURE__ */ t.jsx(
-                  Ne,
+                  De,
                   {
                     marginBottom: "none",
                     size: "xs",
@@ -383,12 +374,12 @@ function st(be) {
                       height: "8.5rem",
                       transform: "rotate(180deg)"
                     },
-                    children: T
+                    children: A
                   }
                 )
               ] }),
               /* @__PURE__ */ t.jsx(
-                Ne,
+                De,
                 {
                   marginBottom: "none",
                   size: "xs",
@@ -400,7 +391,7 @@ function st(be) {
                     WebkitBoxOrient: "vertical",
                     overflow: "hidden"
                   },
-                  children: E
+                  children: P
                 }
               )
             ]
@@ -412,45 +403,45 @@ function st(be) {
           type: "button",
           className: "mb-0 border-0 bg-transparent p-0 self-start",
           onClick: () => {
-            J(!0);
+            he(!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" })
+          children: /* @__PURE__ */ t.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" })
         }
       ) }),
-      P === "button" && /* @__PURE__ */ t.jsxs("div", { className: "absolute left-4 top-4 flex flex-col", children: [
+      I === "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 text-primary-gray-700 border-primary-gray-400 bg-primary-gray-200 dark:border-primary-gray-400 dark:bg-primary-gray-600 dark:text-primary-gray-100",
+            onClick: () => O("in"),
+            className: "leading-0 px-2 py-3.5 border text-primary-gray-700 border-primary-gray-400 bg-primary-gray-200 dark:border-primary-gray-550 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 text-primary-gray-700 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",
+            onClick: () => O("out"),
+            className: "leading-0 px-2 py-3.5 border text-primary-gray-700 border-t-0 border-primary-gray-400 bg-primary-gray-200 dark:border-primary-gray-550 dark:bg-primary-gray-600 dark:text-primary-gray-100",
             children: "–"
           }
         )
       ] })
     ] }),
-    R && se && he && D ? /* @__PURE__ */ t.jsx(
+    X && se && D && ge ? /* @__PURE__ */ t.jsx(
       qe,
       {
-        data: R,
+        data: X,
         body: se,
-        xPos: he,
-        yPos: D,
-        backgroundStyle: we?.tooltip,
-        className: je?.tooltip
+        xPos: D,
+        yPos: ge,
+        backgroundStyle: je?.tooltip,
+        className: $e?.tooltip
       }
     ) : null,
-    M && g !== void 0 ? /* @__PURE__ */ t.jsx(
+    M && z !== void 0 ? /* @__PURE__ */ t.jsx(
       Ye,
       {
-        open: g !== void 0,
+        open: z !== void 0,
         onClose: () => {
           K(void 0);
         },
@@ -458,153 +449,154 @@ function st(be) {
           "div",
           {
             className: "graph-modal-content m-0",
-            dangerouslySetInnerHTML: typeof M == "string" ? { __html: Ge(M, g) } : void 0,
-            children: typeof M == "function" ? M(g) : null
+            dangerouslySetInnerHTML: typeof M == "string" ? { __html: Je(M, z) } : void 0,
+            children: typeof M == "function" ? M(z) : null
           }
         )
       }
     ) : null
   ] });
 }
-function Wt(be) {
+function Tt(ke) {
   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,
+    mapData: u = "https://raw.githubusercontent.com/UNDP-Data/dv-country-geojson/refs/heads/main/worldMap.json",
+    colors: P = Ne.light.bivariateColors.colors05x05,
+    sources: B,
+    graphDescription: A,
     height: d,
     width: s,
-    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,
+    footNote: Y = "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: q,
     yDomain: N,
-    xColorLegendTitle: A = "X Color key",
-    yColorLegendTitle: O = "Y Color key",
+    xColorLegendTitle: V = "X Color key",
+    yColorLegendTitle: L = "Y Color key",
     tooltip: ne,
     scale: se = 0.95,
     centerPoint: le,
     padding: ce,
-    mapBorderWidth: ke = 0.5,
-    mapNoDataColor: B = Ce.light.graphNoData,
+    mapBorderWidth: we = 0.5,
+    mapNoDataColor: _ = Ne.light.graphNoData,
     backgroundColor: k = !1,
-    mapBorderColor: V = Ce.light.grays["gray-500"],
+    mapBorderColor: F = Ne.light.grays["gray-500"],
     relativeHeight: w,
     onSeriesMouseOver: M,
     isWorldMap: me = !0,
-    zoomScaleExtend: we = [0.8, 6],
-    zoomTranslateExtend: je,
-    graphID: _,
-    showColorScale: P = !0,
+    zoomScaleExtend: je = [0.8, 6],
+    zoomTranslateExtend: $e,
+    graphID: H,
+    showColorScale: I = !0,
     highlightedIds: j = [],
-    onSeriesMouseClick: F,
+    onSeriesMouseClick: R,
     mapProperty: de = "ISO3",
-    graphDownload: pe = !1,
-    dataDownload: J = !1,
-    showAntarctica: H = !1,
-    language: X = "en",
-    minHeight: g = 0,
-    theme: K = "light",
-    ariaLabel: R,
-    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, [y, ye] = v(0), [te, ue] = v(0), [L, z] = v(p.autoplay), c = it(
-    ot(b, "date", !0).map(
-      (r) => We(`${r}`, p.dateFormat || "yyyy", /* @__PURE__ */ new Date()).getTime()
+    graphDownload: J = !1,
+    dataDownload: pe = !1,
+    showAntarctica: he = !1,
+    language: S = "en",
+    minHeight: x = 0,
+    theme: z = "light",
+    ariaLabel: K,
+    resetSelectionOnDoubleClick: X = !0,
+    detailsOnClick: Z,
+    styles: D,
+    classNames: $,
+    mapProjection: ge,
+    zoomInteraction: Q = "button",
+    animate: E = !1,
+    dimmedOpacity: ee = 0.3,
+    customLayers: ye = [],
+    timeline: h = { enabled: !1, autoplay: !1, showOnlyActiveDate: !0 },
+    collapseColorScaleByDefault: G
+  } = ke, [g, ue] = v(0), [te, fe] = v(0), [W, T] = v(h.autoplay), c = nt(
+    it(b, "date", !0).map(
+      (r) => Te(`${r}`, h.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(() => {
+    (r, o) => st(r, o)
+  ), [re, ae] = v(h.autoplay ? 0 : c.length - 1), [U, xe] = v(void 0), O = ie(null), e = ie(null);
+  be(() => {
     const r = new ResizeObserver((o) => {
-      ye(s || o[0].contentRect.width || 760), ue(d || o[0].target.clientHeight || 480);
+      ue(s || o[0].contentRect.width || 760), fe(d || o[0].target.clientHeight || 480);
     });
-    return S.current && (ue(S.current.clientHeight || 480), ye(S.current.clientWidth || 760), s || r.observe(S.current)), () => r.disconnect();
-  }, [s, d]), ve(() => {
-    typeof f == "string" ? at(f).then((o) => {
-      fe(o);
-    }) : fe(f);
-  }, [f]), ve(() => {
+    return O.current && (fe(O.current.clientHeight || 480), ue(O.current.clientWidth || 760), s || r.observe(O.current)), () => r.disconnect();
+  }, [s, d]), be(() => {
+    typeof u == "string" ? ot(u).then((o) => {
+      xe(o);
+    }) : xe(u);
+  }, [u]), be(() => {
     const r = setInterval(
       () => {
         ae((o) => o < c.length - 1 ? o + 1 : 0);
       },
-      (p.speed || 2) * 1e3
+      (h.speed || 2) * 1e3
     );
-    return L || clearInterval(r), () => clearInterval(r);
-  }, [c, L, p.speed]);
+    return W || clearInterval(r), () => clearInterval(r);
+  }, [c, W, h.speed]);
   const n = Ie(
     c,
     re,
-    p.showOnlyActiveDate,
-    p.dateFormat || "yyyy"
+    h.showOnlyActiveDate,
+    h.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(
+  return q && N && (q.length !== P[0].length - 1 || N.length !== P.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  ${s ? "w-fit grow-0" : "w-full grow"}`,
-      dir: X === "he" || X === "ar" ? "rtl" : void 0,
+      className: `${z || "light"} flex  ${s ? "w-fit grow-0" : "w-full grow"}`,
+      dir: S === "he" || S === "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 ${X || "en"}`,
+          className: Le(
+            `${k ? k === !0 ? "bg-primary-gray-200 dark:bg-primary-gray-650 " : "" : "bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${S || "en"}`,
             s ? "w-fit" : "w-full",
-            D?.graphContainer
+            $?.graphContainer
           ),
           style: {
-            ...$?.graphContainer || {},
+            ...D?.graphContainer || {},
             ...k && k !== !0 ? { backgroundColor: k } : {}
           },
-          id: _,
+          id: H,
           ref: e,
-          "aria-label": R || `${C ? `The graph shows ${C}. ` : ""}This is bi-variate choropleth map where geographic areas are colored in proportion to two variables.${T ? ` ${T}` : ""}`,
+          "aria-label": K || `${C ? `The graph shows ${C}. ` : ""}This is bi-variate choropleth map where geographic areas are colored in proportion to two variables.${A ? ` ${A}` : ""}`,
           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(
-                  tt,
+                C || A || J || pe ? /* @__PURE__ */ t.jsx(
+                  rt,
                   {
                     styles: {
-                      title: $?.title,
-                      description: $?.description
-                    },
-                    classNames: {
                       title: D?.title,
                       description: D?.description
                     },
+                    classNames: {
+                      title: $?.title,
+                      description: $?.description
+                    },
                     graphTitle: C,
-                    graphDescription: T,
+                    graphDescription: A,
                     width: s,
-                    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
+                    graphDownload: J ? e.current : void 0,
+                    dataDownload: pe ? 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: [
+                h.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);
+                        T(!W);
                       },
                       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(Ke, {}) : /* @__PURE__ */ t.jsx(Ze, {})
+                      "aria-label": W ? "Click to pause animation" : "Click to play animation",
+                      children: W ? /* @__PURE__ */ t.jsx(Ze, {}) : /* @__PURE__ */ t.jsx(Qe, {})
                     }
                   ),
                   /* @__PURE__ */ t.jsx(
-                    Le,
+                    ze,
                     {
                       min: c[0],
                       max: c[c.length - 1],
@@ -626,86 +618,87 @@ function Wt(be) {
                   "div",
                   {
                     className: "flex flex-col grow justify-center leading-0",
-                    ref: S,
+                    ref: O,
                     "aria-label": "Map area",
-                    children: (s || y) && (d || te) && Y ? /* @__PURE__ */ t.jsx(
-                      st,
+                    children: (s || g) && (d || te) && U ? /* @__PURE__ */ t.jsx(
+                      lt,
                       {
                         data: b.filter(
-                          (r) => p.enabled ? r.date === Te(new Date(c[re]), p.dateFormat || "yyyy") : r
+                          (r) => h.enabled ? r.date === Be(new Date(c[re]), h.dateFormat || "yyyy") : r
                         ),
-                        mapData: H ? Y : {
-                          ...Y,
-                          features: Y.features.filter(
+                        mapData: he ? U : {
+                          ...U,
+                          features: U.features.filter(
                             // eslint-disable-next-line @typescript-eslint/no-explicit-any
                             (r) => r.properties.NAME !== "Antarctica"
                           )
                         },
-                        xDomain: G || Ee(
+                        xDomain: q || Oe(
                           b.map((r) => r.x),
-                          E[0].length
+                          P[0].length
                         ),
-                        yDomain: N || Ee(
+                        yDomain: N || Oe(
                           b.map((r) => r.y),
-                          E.length
+                          P.length
                         ),
-                        width: s || y,
+                        width: s || g,
                         height: Math.max(
-                          g,
-                          d || (w ? g ? (s || y) * w > g ? (s || y) * w : g : (s || y) * w : te)
+                          x,
+                          d || (w ? x ? (s || g) * w > x ? (s || g) * w : x : (s || g) * w : te)
                         ),
                         scale: se,
                         centerPoint: le,
-                        colors: E,
-                        xColorLegendTitle: A,
-                        yColorLegendTitle: O,
-                        mapBorderWidth: ke,
-                        mapNoDataColor: B,
-                        mapBorderColor: V,
+                        colors: P,
+                        xColorLegendTitle: V,
+                        yColorLegendTitle: L,
+                        mapBorderWidth: we,
+                        mapNoDataColor: _,
+                        mapBorderColor: F,
                         tooltip: ne,
                         onSeriesMouseOver: M,
                         isWorldMap: me,
-                        zoomScaleExtend: we,
-                        zoomTranslateExtend: je,
-                        onSeriesMouseClick: F,
+                        zoomScaleExtend: je,
+                        zoomTranslateExtend: $e,
+                        onSeriesMouseClick: R,
                         mapProperty: de,
                         highlightedIds: j,
-                        resetSelectionOnDoubleClick: Z,
-                        styles: $,
-                        showColorScale: P,
-                        classNames: D,
-                        mapProjection: Q || (me ? "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
+                        resetSelectionOnDoubleClick: X,
+                        styles: D,
+                        showColorScale: I,
+                        classNames: $,
+                        mapProjection: ge || (me ? "naturalEarth" : "mercator"),
+                        detailsOnClick: Z,
+                        zoomInteraction: Q,
+                        animate: E === !0 ? { duration: 0.5, once: !0, amount: 0.5 } : E || { duration: 0, once: !0, amount: 0 },
+                        dimmedOpacity: ee,
+                        customLayers: ye,
+                        collapseColorScaleByDefault: G
                       }
                     ) : /* @__PURE__ */ t.jsx(
                       "div",
                       {
                         style: {
                           height: `${Math.max(
-                            g,
-                            d || (w ? g ? (s || y) * w > g ? (s || y) * w : g : (s || y) * w : te)
+                            x,
+                            d || (w ? x ? (s || g) * w > x ? (s || g) * w : x : (s || g) * w : te)
                           )}px`
                         },
                         className: "flex items-center justify-center",
-                        children: /* @__PURE__ */ t.jsx(ze, { "aria-label": "Loading graph" })
+                        children: /* @__PURE__ */ t.jsx(We, { "aria-label": "Loading graph" })
                       }
                     )
                   }
                 ),
-                W || q ? /* @__PURE__ */ t.jsx(
-                  rt,
+                B || Y ? /* @__PURE__ */ t.jsx(
+                  at,
                   {
-                    styles: { footnote: $?.footnote, source: $?.source },
+                    styles: { footnote: D?.footnote, source: D?.source },
                     classNames: {
-                      footnote: D?.footnote,
-                      source: D?.source
+                      footnote: $?.footnote,
+                      source: $?.source
                     },
-                    sources: W,
-                    footNote: q,
+                    sources: B,
+                    footNote: Y,
                     width: s
                   }
                 ) : null
@@ -718,6 +711,6 @@ function Wt(be) {
   );
 }
 export {
-  Wt as BiVariateChoroplethMap
+  Tt as BiVariateChoroplethMap
 };
 //# sourceMappingURL=BiVariateChoroplethMap.js.map