@undp/data-viz 1.4.12 → 1.4.14

package/dist/ChoroplethMap.js

@@ -30,12 +30,12 @@ function at(he) {
   const {
     data: k,
     colorDomain: g,
-    colors: l,
+    colors: c,
     mapData: x,
     colorLegendTitle: V,
     categorical: E,
     height: h,
-    width: c,
+    width: s,
     scale: oe,
     centerPoint: T,
     tooltip: ie,
@@ -58,12 +58,12 @@ function at(he) {
     animate: j,
     dimmedOpacity: U,
     customLayers: ne
-  } = he, [w, M] = b(void 0), J = ae(null), [K, v] = b(!(c < 680)), [D, Z] = b(void 0), [_, Q] = b(void 0), [S, $] = b(void 0), [se, ee] = b(void 0), L = ae(null), te = Ye(L, {
+  } = he, [w, M] = b(void 0), J = ae(null), [K, v] = b(!(s < 680)), [D, Z] = b(void 0), [_, Q] = b(void 0), [S, $] = b(void 0), [se, ee] = b(void 0), L = ae(null), te = Ye(L, {
     once: j.once,
     amount: j.amount
-  }), le = ae(null), f = E ? Ge().domain(g).range(l) : Re().domain(g).range(l);
+  }), le = ae(null), f = E ? Ge().domain(g).range(c) : Re().domain(g).range(c);
   pe(() => {
-    const r = be(le.current), s = be(L.current), m = (o) => {
+    const r = be(le.current), l = be(L.current), m = (o) => {
       if (B === "noZoom") return !1;
       if (B === "button") return !o.type.includes("wheel");
       const n = o.type === "wheel", e = o.type.startsWith("touch"), a = o.type === "mousedown" || o.type === "mousemove";
@@ -71,14 +71,14 @@ function at(he) {
     }, i = Ee().scaleExtent(ue).translateExtent(
       I || [
         [-20, -20],
-        [c + 20, h + 20]
+        [s + 20, h + 20]
       ]
     ).filter(m).on("zoom", ({ transform: o }) => {
       r.attr("transform", o);
     });
-    s.call(i), J.current = i;
-  }, [h, c, B]);
-  const u = Pe(x), z = Ie(x), re = u[2] - u[0], ce = u[3] - u[1], A = c * 190 / 960 * 360 / re, ve = h * 190 / 678 * 180 / ce, d = oe * Math.min(A, ve), N = X === "mercator" ? Le().rotate([0, 0]).center(T || z.geometry.coordinates).translate([c / 2, h / 2]).scale(d) : X === "equalEarth" ? ze().rotate([0, 0]).center(T || z.geometry.coordinates).translate([c / 2, h / 2]).scale(d) : X === "naturalEarth" ? We().rotate([0, 0]).center(T || z.geometry.coordinates).translate([c / 2, h / 2]).scale(d) : X === "orthographic" ? Te().rotate([0, 0]).center(T || z.geometry.coordinates).translate([c / 2, h / 2]).scale(d) : Be().rotate([0, 0]).center(T || z.geometry.coordinates).translate([c / 2, h / 2]).scale(d), G = (r) => {
+    l.call(i), J.current = i;
+  }, [h, s, B]);
+  const u = Pe(x), z = Ie(x), re = u[2] - u[0], ce = u[3] - u[1], A = s * 190 / 960 * 360 / re, ve = h * 190 / 678 * 180 / ce, d = oe * Math.min(A, ve), N = X === "mercator" ? Le().rotate([0, 0]).center(T || z.geometry.coordinates).translate([s / 2, h / 2]).scale(d) : X === "equalEarth" ? ze().rotate([0, 0]).center(T || z.geometry.coordinates).translate([s / 2, h / 2]).scale(d) : X === "naturalEarth" ? We().rotate([0, 0]).center(T || z.geometry.coordinates).translate([s / 2, h / 2]).scale(d) : X === "orthographic" ? Te().rotate([0, 0]).center(T || z.geometry.coordinates).translate([s / 2, h / 2]).scale(d) : Be().rotate([0, 0]).center(T || z.geometry.coordinates).translate([s / 2, h / 2]).scale(d), G = (r) => {
     if (!L.current || !J.current) return;
     be(L.current).call(J.current.scaleBy, r === "in" ? 1.2 : 1 / 1.2);
   };
@@ -87,15 +87,15 @@ function at(he) {
       /* @__PURE__ */ t.jsx(
         de.svg,
         {
-          width: `${c}px`,
+          width: `${s}px`,
           height: `${h}px`,
-          viewBox: `0 0 ${c} ${h}`,
+          viewBox: `0 0 ${s} ${h}`,
           ref: L,
           direction: "ltr",
           children: /* @__PURE__ */ t.jsxs("g", { ref: le, children: [
             ne.filter((r) => r.position === "before").map((r) => r.layer),
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            x.features.map((r, s) => k.findIndex((i) => i.id === r.properties[q]) !== -1 ? null : /* @__PURE__ */ t.jsx(
+            x.features.map((r, l) => k.findIndex((i) => i.id === r.properties[q]) !== -1 ? null : /* @__PURE__ */ t.jsx(
               "g",
               {
                 opacity: w ? U : H.length !== 0 ? H.indexOf(r.properties[q]) !== -1 ? 1 : U : 1,
@@ -144,10 +144,10 @@ function at(he) {
                   })
                 )
               },
-              s
+              l
             )),
             /* @__PURE__ */ t.jsx(Je, { children: k.map((r) => {
-              const s = x.features.findIndex(
+              const l = x.features.findIndex(
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 (i) => r.id === i.properties[q]
               ), m = qe(r.x) ? R : (
@@ -179,7 +179,7 @@ function at(he) {
                   onClick: () => {
                     (y || C) && (Oe(D, r) && ye ? (Z(void 0), y?.(void 0)) : (Z(r), y?.(r)));
                   },
-                  children: s === -1 ? null : x.features[s].geometry.type === "MultiPolygon" ? x.features[s].geometry.coordinates.map(
+                  children: l === -1 ? null : x.features[l].geometry.type === "MultiPolygon" ? x.features[l].geometry.coordinates.map(
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     (i, o) => {
                       let n = "";
@@ -212,7 +212,7 @@ function at(he) {
                         `${r.id}-${o}`
                       );
                     }
-                  ) : x.features[s].geometry.coordinates.map(
+                  ) : x.features[l].geometry.coordinates.map(
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     (i, o) => {
                       let n = "M";
@@ -250,7 +250,7 @@ function at(he) {
             _ ? x.features.filter(
               // eslint-disable-next-line @typescript-eslint/no-explicit-any
               (r) => r.properties[q] === _.id
-            ).map((r, s) => /* @__PURE__ */ t.jsx("g", { children: r.geometry.type === "MultiPolygon" ? (
+            ).map((r, l) => /* @__PURE__ */ t.jsx("g", { children: r.geometry.type === "MultiPolygon" ? (
               // eslint-disable-next-line @typescript-eslint/no-explicit-any
               r.geometry.coordinates.map((m, i) => {
                 let o = "";
@@ -295,7 +295,7 @@ function at(he) {
                   i
                 );
               })
-            ) }, s)) : null,
+            ) }, l)) : null,
             ne.filter((r) => r.position === "after").map((r) => r.layer)
           ] })
         }
@@ -346,12 +346,12 @@ function at(he) {
                   children: V
                 }
               ) : null,
-              E ? /* @__PURE__ */ t.jsx("div", { className: "flex flex-col gap-3", children: g.map((r, s) => /* @__PURE__ */ t.jsxs(
+              E ? /* @__PURE__ */ t.jsx("div", { className: "flex flex-col gap-3", children: g.map((r, l) => /* @__PURE__ */ t.jsxs(
                 "div",
                 {
                   className: "flex gap-2 items-center",
                   onMouseOver: () => {
-                    M(l[s % l.length]);
+                    M(c[l % c.length]);
                   },
                   onMouseLeave: () => {
                     M(void 0);
@@ -361,19 +361,19 @@ function at(he) {
                       "div",
                       {
                         className: "w-2 h-2 rounded-full",
-                        style: { backgroundColor: l[s % l.length] }
+                        style: { backgroundColor: c[l % c.length] }
                       }
                     ),
                     /* @__PURE__ */ t.jsx(ke, { size: "sm", marginBottom: "none", leading: "none", children: r })
                   ]
                 },
-                s
+                l
               )) }) : /* @__PURE__ */ t.jsx("svg", { width: "100%", viewBox: "0 0 320 30", direction: "ltr", children: /* @__PURE__ */ t.jsxs("g", { children: [
-                g.map((r, s) => /* @__PURE__ */ t.jsxs(
+                g.map((r, l) => /* @__PURE__ */ t.jsxs(
                   "g",
                   {
                     onMouseOver: () => {
-                      M(l[s]);
+                      M(c[l]);
                     },
                     onMouseLeave: () => {
                       M(void 0);
@@ -383,21 +383,21 @@ function at(he) {
                       /* @__PURE__ */ t.jsx(
                         "rect",
                         {
-                          x: s * 320 / l.length + 1,
+                          x: l * 320 / c.length + 1,
                           y: 1,
-                          width: 320 / l.length - 2,
+                          width: 320 / c.length - 2,
                           height: 8,
-                          className: w === l[s] ? "stroke-primary-gray-700 dark:stroke-primary-gray-300" : "",
+                          className: w === c[l] ? "stroke-primary-gray-700 dark:stroke-primary-gray-300" : "",
                           style: {
-                            fill: l[s],
-                            ...w === l[s] ? {} : { stroke: l[s] }
+                            fill: c[l],
+                            ...w === c[l] ? {} : { stroke: c[l] }
                           }
                         }
                       ),
                       /* @__PURE__ */ t.jsx(
                         "text",
                         {
-                          x: (s + 1) * 320 / l.length,
+                          x: (l + 1) * 320 / c.length,
                           y: 25,
                           className: "fill-primary-gray-700 dark:fill-primary-gray-300 text-xs",
                           style: { textAnchor: "middle" },
@@ -406,25 +406,25 @@ function at(he) {
                       )
                     ]
                   },
-                  s
+                  l
                 )),
                 /* @__PURE__ */ t.jsx("g", { children: /* @__PURE__ */ t.jsx(
                   "rect",
                   {
                     onMouseOver: () => {
-                      M(l[g.length]);
+                      M(c[g.length]);
                     },
                     onMouseLeave: () => {
                       M(void 0);
                     },
-                    x: g.length * 320 / l.length + 1,
+                    x: g.length * 320 / c.length + 1,
                     y: 1,
-                    width: 320 / l.length - 2,
+                    width: 320 / c.length - 2,
                     height: 8,
-                    className: `cursor-pointer ${w === l[g.length] ? "stroke-1 stroke-primary-gray-700 dark:stroke-primary-gray-300" : ""}`,
+                    className: `cursor-pointer ${w === c[g.length] ? "stroke-1 stroke-primary-gray-700 dark:stroke-primary-gray-300" : ""}`,
                     style: {
-                      fill: l[g.length],
-                      ...w === l[g.length] ? {} : { stroke: l[g.length] }
+                      fill: c[g.length],
+                      ...w === c[g.length] ? {} : { stroke: c[g.length] }
                     }
                   }
                 ) })
@@ -496,12 +496,12 @@ function Pt(he) {
   const {
     data: k,
     mapData: g = "https://raw.githubusercontent.com/UNDP-Data/dv-country-geojson/refs/heads/main/worldMap.json",
-    graphTitle: l,
+    graphTitle: c,
     colors: x,
     sources: V,
     graphDescription: E,
     height: h,
-    width: c,
+    width: s,
     footNote: oe = "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: T,
     colorLegendTitle: ie,
@@ -547,16 +547,16 @@ function Pt(he) {
       (e) => e.date
     ).map((e) => Me(`${e.date}`, f.dateFormat || "yyyy", /* @__PURE__ */ new Date()).getTime()),
     (e, a) => rt(e, a)
-  ), [N, G] = b(f.autoplay ? 0 : d.length - 1), [r, s] = b(void 0), m = ae(null), i = ae(null);
+  ), [N, G] = b(f.autoplay ? 0 : d.length - 1), [r, l] = b(void 0), m = ae(null), i = ae(null);
   pe(() => {
     const e = new ResizeObserver((a) => {
-      z(c || a[0].target.clientWidth || 760), ce(h || a[0].target.clientHeight || 480);
+      z(s || a[0].target.clientWidth || 760), ce(h || a[0].target.clientHeight || 480);
     });
-    return m.current && (ce(m.current.clientHeight || 480), z(m.current.clientWidth || 760), c || e.observe(m.current)), () => e.disconnect();
-  }, [c, h]), pe(() => {
+    return m.current && (ce(m.current.clientHeight || 480), z(m.current.clientWidth || 760), s || e.observe(m.current)), () => e.disconnect();
+  }, [s, h]), pe(() => {
     typeof g == "string" ? Qe(g).then((a) => {
-      s(a);
-    }) : s(g);
+      l(a);
+    }) : l(g);
   }, [g]);
   const o = T || (P === "categorical" ? et(k, "x") : tt(
     k.map((e) => e.x),
@@ -580,13 +580,14 @@ function Pt(he) {
   return /* @__PURE__ */ t.jsx(
     "div",
     {
-      className: `${D || "light"} flex  ${c ? "w-fit grow-0" : "w-full grow"}`,
+      className: `${D || "light"} flex  ${s ? "w-fit grow-0" : "w-full grow"}`,
       dir: K === "he" || K === "ar" ? "rtl" : void 0,
       children: /* @__PURE__ */ t.jsx(
         "div",
         {
           className: je(
             `${I ? I === !0 ? "bg-primary-gray-200 dark:bg-primary-gray-650 " : "" : "bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${K || "en"}`,
+            s ? "w-fit" : "w-full",
             $?.graphContainer
           ),
           style: {
@@ -595,14 +596,14 @@ function Pt(he) {
           },
           id: B,
           ref: i,
-          "aria-label": Z || `${l ? `The graph shows ${l}. ` : ""}This is a choropleth map where geographic areas are colored in proportion to a specific variable.${E ? ` ${E}` : ""}`,
+          "aria-label": Z || `${c ? `The graph shows ${c}. ` : ""}This is a choropleth map where geographic areas are colored in proportion to a specific variable.${E ? ` ${E}` : ""}`,
           children: /* @__PURE__ */ t.jsx(
             "div",
             {
               className: "flex grow",
               style: { padding: I ? Y || "1rem" : Y || 0 },
               children: /* @__PURE__ */ t.jsxs("div", { className: "flex flex-col w-full gap-4 grow justify-between", children: [
-                l || E || w || M ? /* @__PURE__ */ t.jsx(
+                c || E || w || M ? /* @__PURE__ */ t.jsx(
                   Ze,
                   {
                     styles: {
@@ -613,9 +614,9 @@ function Pt(he) {
                       title: $?.title,
                       description: $?.description
                     },
-                    graphTitle: l,
+                    graphTitle: c,
                     graphDescription: E,
-                    width: c,
+                    width: s,
                     graphDownload: w ? i.current : void 0,
                     dataDownload: M ? k.map((e) => e.data).filter((e) => e !== void 0).length > 0 ? k.map((e) => e.data).filter((e) => e !== void 0) : k.filter((e) => e !== void 0) : null
                   }
@@ -658,7 +659,7 @@ function Pt(he) {
                     className: "flex flex-col grow justify-center leading-0",
                     ref: m,
                     "aria-label": "Map area",
-                    children: (c || u) && (h || re) && r ? /* @__PURE__ */ t.jsx(
+                    children: (s || u) && (h || re) && r ? /* @__PURE__ */ t.jsx(
                       at,
                       {
                         data: k.filter(
@@ -672,10 +673,10 @@ function Pt(he) {
                           )
                         },
                         colorDomain: o,
-                        width: c || u,
+                        width: s || u,
                         height: Math.max(
                           v,
-                          h || (y ? v ? (c || u) * y > v ? (c || u) * y : v : (c || u) * y : re)
+                          h || (y ? v ? (s || u) * y > v ? (s || u) * y : v : (s || u) * y : re)
                         ),
                         scale: F,
                         centerPoint: R,
@@ -710,7 +711,7 @@ function Pt(he) {
                         style: {
                           height: `${Math.max(
                             v,
-                            h || (y ? v ? (c || u) * y > v ? (c || u) * y : v : (c || u) * y : re)
+                            h || (y ? v ? (s || u) * y > v ? (s || u) * y : v : (s || u) * y : re)
                           )}px`
                         },
                         className: "flex items-center justify-center",
@@ -729,7 +730,7 @@ function Pt(he) {
                     },
                     sources: V,
                     footNote: oe,
-                    width: c
+                    width: s
                   }
                 ) : null
               ] })