@undp/data-viz 1.4.12 → 1.4.14

package/dist/StripChart.js

@@ -1,4 +1,4 @@
-import { j as r, m as ni } from "./index-CHPV5EwG-BPSP-7Jg.js";
+import { j as l, m as ni } from "./index-CHPV5EwG-BPSP-7Jg.js";
 import { u as gi } from "./index-CaAIPGZo.js";
 import { useRef as si, useState as E, useEffect as ui } from "react";
 import { i as pi } from "./index-27yTRcko.js";
@@ -67,9 +67,9 @@ function Vi(P) {
   }, V = d - O.left - O.right, W = p - O.top - O.bottom, oi = o.map((i, t) => ({ ...i, id: `${t}` })), ei = mi(oi, (i) => {
     const t = (a || []).indexOf(i.label);
     return t === -1 ? 1 / 0 : t;
-  }).reverse(), ri = J(_) ? Math.max(...o.filter((i) => !J(i.position)).map((i) => i.position)) < 0 ? 0 : Math.max(...o.filter((i) => !J(i.position)).map((i) => i.position)) : _, C = J(G) ? Math.min(...o.filter((i) => !J(i.position)).map((i) => i.position)) >= 0 ? 0 : Math.min(...o.filter((i) => !J(i.position)).map((i) => i.position)) : G, z = wi().domain([C, ri]).range([0, V]).nice(), li = Ni(w, V);
-  return /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
-    /* @__PURE__ */ r.jsx(
+  }).reverse(), li = J(_) ? Math.max(...o.filter((i) => !J(i.position)).map((i) => i.position)) < 0 ? 0 : Math.max(...o.filter((i) => !J(i.position)).map((i) => i.position)) : _, C = J(G) ? Math.min(...o.filter((i) => !J(i.position)).map((i) => i.position)) >= 0 ? 0 : Math.min(...o.filter((i) => !J(i.position)).map((i) => i.position)) : G, z = wi().domain([C, li]).range([0, V]).nice(), ri = Ni(w, V);
+  return /* @__PURE__ */ l.jsxs(l.Fragment, { children: [
+    /* @__PURE__ */ l.jsx(
       ai.svg,
       {
         width: `${d}px`,
@@ -77,10 +77,10 @@ function Vi(P) {
         viewBox: `0 0 ${d} ${p}`,
         direction: "ltr",
         ref: q,
-        children: /* @__PURE__ */ r.jsxs("g", { transform: `translate(${O.left},${O.top})`, children: [
+        children: /* @__PURE__ */ l.jsxs("g", { transform: `translate(${O.left},${O.top})`, children: [
           M.filter((i) => i.position === "before").map((i) => i.layer),
-          /* @__PURE__ */ r.jsxs(bi, { children: [
-            ei.map((i) => /* @__PURE__ */ r.jsxs(
+          /* @__PURE__ */ l.jsxs(bi, { children: [
+            ei.map((i) => /* @__PURE__ */ l.jsxs(
               ai.g,
               {
                 className: "undp-viz-g-with-hover",
@@ -113,7 +113,7 @@ function Vi(P) {
                   x(void 0), L(void 0), g(void 0), k?.(void 0);
                 },
                 children: [
-                  Q === "dot" ? /* @__PURE__ */ r.jsx(
+                  Q === "dot" ? /* @__PURE__ */ l.jsx(
                     ai.circle,
                     {
                       cy: 0,
@@ -132,7 +132,7 @@ function Vi(P) {
                       exit: { opacity: 0, transition: { duration: m.duration } },
                       r: h
                     }
-                  ) : /* @__PURE__ */ r.jsx(
+                  ) : /* @__PURE__ */ l.jsx(
                     ai.rect,
                     {
                       y: 0 - h,
@@ -153,7 +153,7 @@ function Vi(P) {
                       exit: { opacity: 0, transition: { duration: m.duration } }
                     }
                   ),
-                  a.length !== 0 && a.indexOf(i.label) !== -1 ? /* @__PURE__ */ r.jsx(
+                  a.length !== 0 && a.indexOf(i.label) !== -1 ? /* @__PURE__ */ l.jsx(
                     ai.text,
                     {
                       x: 0,
@@ -184,13 +184,13 @@ function Vi(P) {
               },
               i.label
             )),
-            li.map((i, t) => /* @__PURE__ */ r.jsx(
+            ri.map((i, t) => /* @__PURE__ */ l.jsx(
               "text",
               {
                 x: i,
                 y: W / 2 + h,
                 style: {
-                  textAnchor: t === 0 ? "start" : t === li.length - 1 ? "end" : "middle",
+                  textAnchor: t === 0 ? "start" : t === ri.length - 1 ? "end" : "middle",
                   ...j?.xAxis?.labels || {}
                 },
                 className: ni(
@@ -207,7 +207,7 @@ function Vi(P) {
         ] })
       }
     ),
-    H && F && U && u ? /* @__PURE__ */ r.jsx(
+    H && F && U && u ? /* @__PURE__ */ l.jsx(
       yi,
       {
         data: H,
@@ -218,14 +218,14 @@ function Vi(P) {
         className: $?.tooltip
       }
     ) : null,
-    N && f !== void 0 ? /* @__PURE__ */ r.jsx(
+    N && f !== void 0 ? /* @__PURE__ */ l.jsx(
       xi,
       {
         open: f !== void 0,
         onClose: () => {
           A(void 0);
         },
-        children: /* @__PURE__ */ r.jsx(
+        children: /* @__PURE__ */ l.jsx(
           "div",
           {
             className: "graph-modal-content m-0",
@@ -286,23 +286,24 @@ function ki(P) {
     noOfTicks: W = 2,
     dimmedOpacity: oi = 0.3,
     precision: ei = 2,
-    customLayers: ri = []
-  } = P, [C, z] = E(0), [li, i] = E(0), [t, fi] = E(void 0), Z = si(null), ci = si(null);
+    customLayers: li = []
+  } = P, [C, z] = E(0), [ri, i] = E(0), [t, fi] = E(void 0), Z = si(null), ci = si(null);
   return ui(() => {
-    const l = new ResizeObserver((hi) => {
+    const r = new ResizeObserver((hi) => {
       z(s || hi[0].target.clientWidth || 620), i(h || hi[0].target.clientHeight || 480);
     });
-    return Z.current && (i(Z.current.clientHeight || 480), z(Z.current.clientWidth || 620), s || l.observe(Z.current)), () => l.disconnect();
-  }, [s, h]), /* @__PURE__ */ r.jsx(
+    return Z.current && (i(Z.current.clientHeight || 480), z(Z.current.clientWidth || 620), s || r.observe(Z.current)), () => r.disconnect();
+  }, [s, h]), /* @__PURE__ */ l.jsx(
     "div",
     {
       className: `${f || "light"} flex  ${s ? "w-fit grow-0" : "w-full grow"}`,
       dir: M === "he" || M === "ar" ? "rtl" : void 0,
-      children: /* @__PURE__ */ r.jsx(
+      children: /* @__PURE__ */ l.jsx(
         "div",
         {
           className: ni(
             `${a ? a === !0 ? "bg-primary-gray-200 dark:bg-primary-gray-650 " : "" : "bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${M || "en"}`,
+            s ? "w-fit" : "w-full",
             g?.graphContainer
           ),
           style: {
@@ -312,13 +313,13 @@ function ki(P) {
           id: ti,
           ref: ci,
           "aria-label": A || `${d ? `The graph shows ${d}. ` : ""}This is a strip chart showing distribution of data along the horizontal axis. Each dot represents an individual data point, helping to visualize the spread and clustering of values.${n ? ` ${n}` : ""}`,
-          children: /* @__PURE__ */ r.jsx(
+          children: /* @__PURE__ */ l.jsx(
             "div",
             {
               className: "flex grow",
               style: { padding: a ? k || "1rem" : k || 0 },
-              children: /* @__PURE__ */ r.jsxs("div", { className: "flex flex-col w-full gap-4 grow justify-between", children: [
-                d || n || I || m ? /* @__PURE__ */ r.jsx(
+              children: /* @__PURE__ */ l.jsxs("div", { className: "flex flex-col w-full gap-4 grow justify-between", children: [
+                d || n || I || m ? /* @__PURE__ */ l.jsx(
                   ji,
                   {
                     styles: {
@@ -333,44 +334,44 @@ function ki(P) {
                     graphDescription: n,
                     width: s,
                     graphDownload: I ? ci.current : void 0,
-                    dataDownload: m ? o.map((l) => l.data).filter((l) => l !== void 0).length > 0 ? o.map((l) => l.data).filter((l) => l !== void 0) : o.filter((l) => l !== void 0) : null
+                    dataDownload: m ? o.map((r) => r.data).filter((r) => r !== void 0).length > 0 ? o.map((r) => r.data).filter((r) => r !== void 0) : o.filter((r) => r !== void 0) : null
                   }
                 ) : null,
-                /* @__PURE__ */ r.jsx("div", { className: "grow flex flex-col justify-center gap-3 w-full", children: o.length === 0 ? /* @__PURE__ */ r.jsx(Di, {}) : /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
-                  y !== !1 && o.filter((l) => l.color).length !== 0 ? /* @__PURE__ */ r.jsx(
+                /* @__PURE__ */ l.jsx("div", { className: "grow flex flex-col justify-center gap-3 w-full", children: o.length === 0 ? /* @__PURE__ */ l.jsx(Di, {}) : /* @__PURE__ */ l.jsxs(l.Fragment, { children: [
+                  y !== !1 && o.filter((r) => r.color).length !== 0 ? /* @__PURE__ */ l.jsx(
                     Mi,
                     {
                       width: s,
                       colorLegendTitle: ii,
                       colors: p || c[f].categoricalColors.colors,
                       colorDomain: Y || gi(
-                        o.filter((l) => l.color),
+                        o.filter((r) => r.color),
                         "color"
-                      ).map((l) => l.color),
+                      ).map((r) => r.color),
                       setSelectedColor: fi,
                       showNAColor: H ?? !0
                     }
                   ) : null,
-                  /* @__PURE__ */ r.jsx(
+                  /* @__PURE__ */ l.jsx(
                     "div",
                     {
                       className: "flex flex-col grow justify-center w-full leading-0",
                       ref: Z,
                       "aria-label": "Graph area",
-                      children: (s || C) && (h || li) ? /* @__PURE__ */ r.jsx(
+                      children: (s || C) && (h || ri) ? /* @__PURE__ */ l.jsx(
                         Vi,
                         {
                           data: o,
                           width: s || C,
                           height: Math.max(
                             x,
-                            h || (b ? x ? (s || C) * b > x ? (s || C) * b : x : (s || C) * b : li)
+                            h || (b ? x ? (s || C) * b > x ? (s || C) * b : x : (s || C) * b : ri)
                           ),
-                          colorDomain: o.filter((l) => l.color).length === 0 ? [] : Y || gi(
-                            o.filter((l) => l.color),
+                          colorDomain: o.filter((r) => r.color).length === 0 ? [] : Y || gi(
+                            o.filter((r) => r.color),
                             "color"
-                          ).map((l) => l.color),
-                          colors: o.filter((l) => l.color).length === 0 ? p ? [p] : [c.primaryColors["blue-600"]] : p || c[f].categoricalColors.colors,
+                          ).map((r) => r.color),
+                          colors: o.filter((r) => r.color).length === 0 ? p ? [p] : [c.primaryColors["blue-600"]] : p || c[f].categoricalColors.colors,
                           selectedColor: t,
                           radius: F,
                           leftMargin: R,
@@ -397,13 +398,13 @@ function ki(P) {
                           noOfTicks: W,
                           dimmedOpacity: oi,
                           precision: ei,
-                          customLayers: ri
+                          customLayers: li
                         }
                       ) : null
                     }
                   )
                 ] }) }),
-                e || X ? /* @__PURE__ */ r.jsx(
+                e || X ? /* @__PURE__ */ l.jsx(
                   Ci,
                   {
                     styles: { footnote: u?.footnote, source: u?.source },
@@ -469,9 +470,9 @@ function Si(P) {
   }, V = d - O.left - O.right, W = p - O.top - O.bottom, oi = o.map((i, t) => ({ ...i, id: `${t}` })), ei = mi(oi, (i) => {
     const t = (a || []).indexOf(i.label);
     return t === -1 ? 1 / 0 : t;
-  }).reverse(), ri = J(_) ? Math.max(...o.filter((i) => !J(i.position)).map((i) => i.position)) < 0 ? 0 : Math.max(...o.filter((i) => !J(i.position)).map((i) => i.position)) : _, C = J(G) ? Math.min(...o.filter((i) => !J(i.position)).map((i) => i.position)) >= 0 ? 0 : Math.min(...o.filter((i) => !J(i.position)).map((i) => i.position)) : G, z = wi().domain([C, ri]).range([W, 0]).nice(), li = Ni(K, W);
-  return /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
-    /* @__PURE__ */ r.jsx(
+  }).reverse(), li = J(_) ? Math.max(...o.filter((i) => !J(i.position)).map((i) => i.position)) < 0 ? 0 : Math.max(...o.filter((i) => !J(i.position)).map((i) => i.position)) : _, C = J(G) ? Math.min(...o.filter((i) => !J(i.position)).map((i) => i.position)) >= 0 ? 0 : Math.min(...o.filter((i) => !J(i.position)).map((i) => i.position)) : G, z = wi().domain([C, li]).range([W, 0]).nice(), ri = Ni(K, W);
+  return /* @__PURE__ */ l.jsxs(l.Fragment, { children: [
+    /* @__PURE__ */ l.jsx(
       ai.svg,
       {
         width: `${d}px`,
@@ -479,10 +480,10 @@ function Si(P) {
         viewBox: `0 0 ${d} ${p}`,
         direction: "ltr",
         ref: q,
-        children: /* @__PURE__ */ r.jsxs("g", { transform: `translate(${O.left},${O.top})`, children: [
+        children: /* @__PURE__ */ l.jsxs("g", { transform: `translate(${O.left},${O.top})`, children: [
           M.filter((i) => i.position === "before").map((i) => i.layer),
-          /* @__PURE__ */ r.jsxs(bi, { children: [
-            ei.map((i) => /* @__PURE__ */ r.jsxs(
+          /* @__PURE__ */ l.jsxs(bi, { children: [
+            ei.map((i) => /* @__PURE__ */ l.jsxs(
               ai.g,
               {
                 className: "undp-viz-g-with-hover",
@@ -515,7 +516,7 @@ function Si(P) {
                   x(void 0), L(void 0), g(void 0), k?.(void 0);
                 },
                 children: [
-                  y === "dot" ? /* @__PURE__ */ r.jsx(
+                  y === "dot" ? /* @__PURE__ */ l.jsx(
                     ai.circle,
                     {
                       cy: 0,
@@ -534,7 +535,7 @@ function Si(P) {
                       exit: { opacity: 0, transition: { duration: w.duration } },
                       r: h
                     }
-                  ) : /* @__PURE__ */ r.jsx(
+                  ) : /* @__PURE__ */ l.jsx(
                     ai.rect,
                     {
                       x: 0 - h,
@@ -555,7 +556,7 @@ function Si(P) {
                       exit: { opacity: 0, transition: { duration: w.duration } }
                     }
                   ),
-                  a.length !== 0 && a.indexOf(i.label) !== -1 ? /* @__PURE__ */ r.jsx(
+                  a.length !== 0 && a.indexOf(i.label) !== -1 ? /* @__PURE__ */ l.jsx(
                     ai.text,
                     {
                       y: 0,
@@ -587,7 +588,7 @@ function Si(P) {
               },
               i.label
             )),
-            li.map((i, t) => /* @__PURE__ */ r.jsx(
+            ri.map((i, t) => /* @__PURE__ */ l.jsx(
               "text",
               {
                 y: i,
@@ -609,7 +610,7 @@ function Si(P) {
         ] })
       }
     ),
-    H && F && U && u ? /* @__PURE__ */ r.jsx(
+    H && F && U && u ? /* @__PURE__ */ l.jsx(
       yi,
       {
         data: H,
@@ -620,14 +621,14 @@ function Si(P) {
         className: I?.tooltip
       }
     ) : null,
-    j && f !== void 0 ? /* @__PURE__ */ r.jsx(
+    j && f !== void 0 ? /* @__PURE__ */ l.jsx(
       xi,
       {
         open: f !== void 0,
         onClose: () => {
           A(void 0);
         },
-        children: /* @__PURE__ */ r.jsx(
+        children: /* @__PURE__ */ l.jsx(
           "div",
           {
             className: "graph-modal-content m-0",
@@ -688,23 +689,24 @@ function $i(P) {
     noOfTicks: W = 2,
     dimmedOpacity: oi = 0.3,
     precision: ei = 2,
-    customLayers: ri = []
-  } = P, [C, z] = E(0), [li, i] = E(0), [t, fi] = E(void 0), Z = si(null), ci = si(null);
+    customLayers: li = []
+  } = P, [C, z] = E(0), [ri, i] = E(0), [t, fi] = E(void 0), Z = si(null), ci = si(null);
   return ui(() => {
-    const l = new ResizeObserver((hi) => {
+    const r = new ResizeObserver((hi) => {
       z(s || hi[0].target.clientWidth || 620), i(h || hi[0].target.clientHeight || 480);
     });
-    return Z.current && (i(Z.current.clientHeight || 480), z(Z.current.clientWidth || 620), s || l.observe(Z.current)), () => l.disconnect();
-  }, [s, h]), /* @__PURE__ */ r.jsx(
+    return Z.current && (i(Z.current.clientHeight || 480), z(Z.current.clientWidth || 620), s || r.observe(Z.current)), () => r.disconnect();
+  }, [s, h]), /* @__PURE__ */ l.jsx(
     "div",
     {
       className: `${f || "light"} flex  ${s ? "w-fit grow-0" : "w-full grow"}`,
       dir: M === "he" || M === "ar" ? "rtl" : void 0,
-      children: /* @__PURE__ */ r.jsx(
+      children: /* @__PURE__ */ l.jsx(
         "div",
         {
           className: ni(
             `${a ? a === !0 ? "bg-primary-gray-200 dark:bg-primary-gray-650 " : "" : "bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${M || "en"}`,
+            s ? "w-fit" : "w-full",
             g?.graphContainer
           ),
           style: {
@@ -714,13 +716,13 @@ function $i(P) {
           id: ti,
           ref: ci,
           "aria-label": A || `${d ? `The graph shows ${d}. ` : ""}This is a strip chart showing distribution of data along the vertical axis. Each dot represents an individual data point, helping to visualize the spread and clustering of values.${n ? ` ${n}` : ""}`,
-          children: /* @__PURE__ */ r.jsx(
+          children: /* @__PURE__ */ l.jsx(
             "div",
             {
               className: "flex grow",
               style: { padding: a ? k || "1rem" : k || 0 },
-              children: /* @__PURE__ */ r.jsxs("div", { className: "flex flex-col w-full gap-4 grow justify-between", children: [
-                d || n || I || m ? /* @__PURE__ */ r.jsx(
+              children: /* @__PURE__ */ l.jsxs("div", { className: "flex flex-col w-full gap-4 grow justify-between", children: [
+                d || n || I || m ? /* @__PURE__ */ l.jsx(
                   ji,
                   {
                     styles: {
@@ -735,43 +737,43 @@ function $i(P) {
                     graphDescription: n,
                     width: s,
                     graphDownload: I ? ci.current : void 0,
-                    dataDownload: m ? o.map((l) => l.data).filter((l) => l !== void 0).length > 0 ? o.map((l) => l.data).filter((l) => l !== void 0) : o.filter((l) => l !== void 0) : null
+                    dataDownload: m ? o.map((r) => r.data).filter((r) => r !== void 0).length > 0 ? o.map((r) => r.data).filter((r) => r !== void 0) : o.filter((r) => r !== void 0) : null
                   }
                 ) : null,
-                /* @__PURE__ */ r.jsx("div", { className: "grow flex flex-col justify-center gap-3 w-full", children: o.length === 0 ? /* @__PURE__ */ r.jsx(Di, {}) : /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
-                  y !== !1 && o.filter((l) => l.color).length !== 0 ? /* @__PURE__ */ r.jsx(
+                /* @__PURE__ */ l.jsx("div", { className: "grow flex flex-col justify-center gap-3 w-full", children: o.length === 0 ? /* @__PURE__ */ l.jsx(Di, {}) : /* @__PURE__ */ l.jsxs(l.Fragment, { children: [
+                  y !== !1 && o.filter((r) => r.color).length !== 0 ? /* @__PURE__ */ l.jsx(
                     Mi,
                     {
                       width: s,
                       colorLegendTitle: ii,
                       colors: p || c[f].categoricalColors.colors,
                       colorDomain: Y || gi(
-                        o.filter((l) => l.color),
+                        o.filter((r) => r.color),
                         "color"
-                      ).map((l) => l.color),
+                      ).map((r) => r.color),
                       setSelectedColor: fi,
                       showNAColor: H
                     }
                   ) : null,
-                  /* @__PURE__ */ r.jsx(
+                  /* @__PURE__ */ l.jsx(
                     "div",
                     {
                       className: "flex flex-col grow justify-center w-full leading-0",
                       ref: Z,
-                      children: (s || C) && (h || li) ? /* @__PURE__ */ r.jsx(
+                      children: (s || C) && (h || ri) ? /* @__PURE__ */ l.jsx(
                         Si,
                         {
                           data: o,
                           width: s || C,
                           height: Math.max(
                             x,
-                            h || (b ? x ? (s || C) * b > x ? (s || C) * b : x : (s || C) * b : li)
+                            h || (b ? x ? (s || C) * b > x ? (s || C) * b : x : (s || C) * b : ri)
                           ),
-                          colorDomain: o.filter((l) => l.color).length === 0 ? [] : Y || gi(
-                            o.filter((l) => l.color),
+                          colorDomain: o.filter((r) => r.color).length === 0 ? [] : Y || gi(
+                            o.filter((r) => r.color),
                             "color"
-                          ).map((l) => l.color),
-                          colors: o.filter((l) => l.color).length === 0 ? p ? [p] : [c.primaryColors["blue-600"]] : p || c[f].categoricalColors.colors,
+                          ).map((r) => r.color),
+                          colors: o.filter((r) => r.color).length === 0 ? p ? [p] : [c.primaryColors["blue-600"]] : p || c[f].categoricalColors.colors,
                           selectedColor: t,
                           radius: F,
                           leftMargin: R,
@@ -798,13 +800,13 @@ function $i(P) {
                           noOfTicks: W,
                           dimmedOpacity: oi,
                           precision: ei,
-                          customLayers: ri
+                          customLayers: li
                         }
                       ) : null
                     }
                   )
                 ] }) }),
-                e || X ? /* @__PURE__ */ r.jsx(
+                e || X ? /* @__PURE__ */ l.jsx(
                   Ci,
                   {
                     styles: { footnote: u?.footnote, source: u?.source },
@@ -874,10 +876,10 @@ function Ki(P) {
     classNames: W,
     animate: oi,
     dimmedOpacity: ei = 0.3,
-    precision: ri,
+    precision: li,
     customLayers: C
   } = P;
-  return O === "vertical" ? /* @__PURE__ */ r.jsx(
+  return O === "vertical" ? /* @__PURE__ */ l.jsx(
     $i,
     {
       data: o,
@@ -926,10 +928,10 @@ function Ki(P) {
       classNames: W,
       animate: oi,
       dimmedOpacity: ei,
-      precision: ri,
+      precision: li,
       customLayers: C
     }
-  ) : /* @__PURE__ */ r.jsx(
+  ) : /* @__PURE__ */ l.jsx(
     ki,
     {
       data: o,
@@ -978,7 +980,7 @@ function Ki(P) {
       classNames: W,
       animate: oi,
       dimmedOpacity: ei,
-      precision: ri,
+      precision: li,
       customLayers: C
     }
   );