@undp/data-viz 1.4.13 → 1.4.14

package/dist/MultiLineChart.js

@@ -1,10 +1,10 @@
 import { j as e, m as q } from "./index-CHPV5EwG-BPSP-7Jg.js";
 import { useRef as ht, useState as Y, useEffect as Dt } from "react";
-import { p as f, f as kt } from "./parse-DlCRUFh_.js";
+import { p as u, f as kt } from "./parse-DlCRUFh_.js";
 import { s as Mt } from "./index-DxagiOHo.js";
 import { n as Nt } from "./numberFormattingFunction-14YCbkN2.js";
 import { T as St } from "./Tooltip-DyM5snqx.js";
-import { c as d } from "./checkIfNullOrUndefined-DmfiKkNw.js";
+import { c as x } from "./checkIfNullOrUndefined-DmfiKkNw.js";
 import { C as Vt, g as It, A as Ht } from "./customArea-B-dWU0zZ.js";
 import { A as Rt } from "./AxisTitle-BmHLMRJZ.js";
 import { A as Ft } from "./Axis-Ddg-seDi.js";
@@ -37,7 +37,7 @@ function re(dt) {
     noOfXTicks: xt,
     labels: j,
     rightMargin: I,
-    topMargin: x,
+    topMargin: m,
     bottomMargin: J,
     suffix: H,
     prefix: R,
@@ -47,13 +47,13 @@ function re(dt) {
     showValues: L,
     showColorLegendAtTop: gt,
     refValues: K,
-    highlightAreaSettings: ut,
+    highlightAreaSettings: ft,
     minValue: F,
     maxValue: Q,
     highlightedLines: A,
     animate: o,
     rtl: G,
-    strokeWidth: ft,
+    strokeWidth: ut,
     showDots: pt,
     annotations: yt,
     customHighlightAreaSettings: wt,
@@ -71,12 +71,12 @@ function re(dt) {
     dashSettings: et,
     labelsToBeHidden: jt,
     revealClipId: it
-  } = dt, at = ht(null), m = te(at, {
+  } = dt, at = ht(null), h = te(at, {
     once: o.once,
     amount: o.amount
   }), [b, Ct] = Y(!1);
   Dt(() => {
-    if (m && !b) {
+    if (h && !b) {
       const t = setTimeout(
         () => {
           Ct(!0);
@@ -85,56 +85,56 @@ function re(dt) {
       );
       return () => clearTimeout(t);
     }
-  }, [m, b, o.duration]);
+  }, [h, b, o.duration]);
   const bt = N === "linear" ? zt : N === "step" ? Ut : N === "stepAfter" ? _t : N === "stepBefore" ? qt : Jt, [y, O] = Y(void 0), [ot, nt] = Y(void 0), [st, rt] = Y(void 0), w = {
-    top: x,
+    top: m,
     bottom: J,
     left: Z ? C + 30 : C,
     right: I
   }, _ = ht(null), n = Mt(
     T.map((t) => ({
       ...t,
-      date: f(`${t.date}`, l, /* @__PURE__ */ new Date())
+      date: u(`${t.date}`, l, /* @__PURE__ */ new Date())
     })),
     "date"
   ), M = n[0].y.map((t, i) => n.map((a) => ({
     ...a,
     y: a.y[i]
-  })).filter((a) => !d(a.y))), lt = ut.map((t) => ({
+  })).filter((a) => !x(a.y))), lt = ft.map((t) => ({
     ...t,
     coordinates: [
-      t.coordinates[0] === null ? null : f(`${t.coordinates[0]}`, l, /* @__PURE__ */ new Date()),
-      t.coordinates[1] === null ? null : f(`${t.coordinates[1]}`, l, /* @__PURE__ */ new Date())
+      t.coordinates[0] === null ? null : u(`${t.coordinates[0]}`, l, /* @__PURE__ */ new Date()),
+      t.coordinates[1] === null ? null : u(`${t.coordinates[1]}`, l, /* @__PURE__ */ new Date())
     ]
   })), ct = wt.map((t) => ({
     ...t,
     coordinates: t.coordinates.map(
-      (i, a) => a % 2 === 0 ? f(`${i}`, l, /* @__PURE__ */ new Date()) : i
+      (i, a) => a % 2 === 0 ? u(`${i}`, l, /* @__PURE__ */ new Date()) : i
     )
-  })), g = D - w.left - w.right, u = V - w.top - w.bottom, mt = B ? f(`${B}`, l, /* @__PURE__ */ new Date()) : n[0].date, h = z ? f(`${z}`, l, /* @__PURE__ */ new Date()) : n[n.length - 1].date, v = d(F) ? Math.min(
+  })), g = D - w.left - w.right, f = V - w.top - w.bottom, mt = B ? u(`${B}`, l, /* @__PURE__ */ new Date()) : n[0].date, d = z ? u(`${z}`, l, /* @__PURE__ */ new Date()) : n[n.length - 1].date, v = x(F) ? Math.min(
     ...n.map(
-      (t) => Math.min(...t.y.filter((i) => !d(i)))
+      (t) => Math.min(...t.y.filter((i) => !x(i)))
     )
   ) ? Math.min(
     ...n.map(
-      (t) => Math.min(...t.y.filter((i) => !d(i)))
+      (t) => Math.min(...t.y.filter((i) => !x(i)))
     )
   ) > 0 ? 0 : Math.min(
     ...n.map(
-      (t) => Math.min(...t.y.filter((i) => !d(i)))
+      (t) => Math.min(...t.y.filter((i) => !x(i)))
     )
   ) : 0 : F, At = Math.max(
     ...n.map(
-      (t) => Math.max(...t.y.filter((i) => !d(i)))
+      (t) => Math.max(...t.y.filter((i) => !x(i)))
     )
   ) ? Math.max(
     ...n.map(
-      (t) => Math.max(...t.y.filter((i) => !d(i)))
+      (t) => Math.max(...t.y.filter((i) => !x(i)))
     )
-  ) : 0, s = Et().domain([mt, h]).range([0, g]), r = Gt().domain([
-    d(F) ? v : F,
-    d(Q) ? At > 0 ? At : 0 : Q
-  ]).range([u, 0]).nice(), Lt = Bt().x((t) => s(t.date)).y((t) => r(t.y)).curve(bt), Tt = r.ticks(vt), $t = s.ticks(xt);
+  ) : 0, s = Et().domain([mt, d]).range([0, g]), r = Gt().domain([
+    x(F) ? v : F,
+    x(Q) ? At > 0 ? At : 0 : Q
+  ]).range([f, 0]).nice(), Lt = Bt().x((t) => s(t.date)).y((t) => r(t.y)).curve(bt), Tt = r.ticks(vt), $t = s.ticks(xt);
   return Dt(() => {
     const t = (a) => {
       const P = n[Qt(
@@ -162,7 +162,7 @@ function re(dt) {
             {
               x: 0,
               y: 0,
-              height: u,
+              height: f,
               variants: {
                 initial: { width: 0 },
                 whileInView: {
@@ -171,7 +171,7 @@ function re(dt) {
                 }
               },
               initial: "initial",
-              animate: m ? "whileInView" : "initial"
+              animate: h ? "whileInView" : "initial"
             }
           ) }) }),
           /* @__PURE__ */ e.jsx(
@@ -179,10 +179,10 @@ function re(dt) {
             {
               areaSettings: lt,
               width: g,
-              height: u,
+              height: f,
               scale: s,
               animate: o,
-              isInView: m
+              isInView: h
             }
           ),
           /* @__PURE__ */ e.jsx(
@@ -192,7 +192,7 @@ function re(dt) {
               scaleX: s,
               scaleY: r,
               animate: o,
-              isInView: m
+              isInView: h
             }
           ),
           /* @__PURE__ */ e.jsxs("g", { children: [
@@ -253,7 +253,7 @@ function re(dt) {
               Rt,
               {
                 x: 0 - C - 15,
-                y: u / 2,
+                y: f / 2,
                 style: c?.yAxis?.title,
                 className: p?.yAxis?.title,
                 text: Z,
@@ -267,7 +267,7 @@ function re(dt) {
               values: $t.map((t) => kt(t, l)),
               x: $t.map((t) => s(t)),
               y1: 0,
-              y2: u,
+              y2: f,
               styles: {
                 gridLines: c?.xAxis?.gridLines,
                 labels: c?.xAxis?.labels
@@ -302,14 +302,14 @@ function re(dt) {
                   }
                 },
                 initial: "initial",
-                animate: m ? "whileInView" : "initial",
+                animate: h ? "whileInView" : "initial",
                 children: [
                   /* @__PURE__ */ e.jsx(
                     S.path,
                     {
                       style: {
                         fill: "none",
-                        strokeWidth: ft
+                        strokeWidth: ut
                       },
                       clipPath: `url(#${it})`,
                       exit: { opacity: 0, transition: { duration: o.duration } },
@@ -317,7 +317,7 @@ function re(dt) {
                         initial: {
                           ...U.length === 0 ? { pathLength: 0 } : {},
                           d: Lt(
-                            t.filter((a) => !d(a.y))
+                            t.filter((a) => !x(a.y))
                           ) || "",
                           opacity: 1,
                           stroke: $[i]
@@ -325,7 +325,7 @@ function re(dt) {
                         whileInView: {
                           ...U.length === 0 ? { pathLength: 1 } : {},
                           d: Lt(
-                            t.filter((a) => !d(a.y))
+                            t.filter((a) => !x(a.y))
                           ) || "",
                           opacity: 1,
                           stroke: $[i],
@@ -334,10 +334,10 @@ function re(dt) {
                       },
                       strokeDasharray: U.includes(j[i]) ? et[i % et.length] : void 0,
                       initial: "initial",
-                      animate: m ? "whileInView" : "initial"
+                      animate: h ? "whileInView" : "initial"
                     }
                   ),
-                  t.map((a, P) => /* @__PURE__ */ e.jsx("g", { children: d(a.y) ? null : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+                  t.map((a, P) => /* @__PURE__ */ e.jsx("g", { children: x(a.y) ? null : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
                     pt ? /* @__PURE__ */ e.jsx(
                       S.circle,
                       {
@@ -357,7 +357,7 @@ function re(dt) {
                           }
                         },
                         initial: "initial",
-                        animate: m ? "whileInView" : "initial"
+                        animate: h ? "whileInView" : "initial"
                       }
                     ) : null,
                     L ? /* @__PURE__ */ e.jsx(
@@ -387,7 +387,7 @@ function re(dt) {
                           }
                         },
                         initial: "initial",
-                        animate: m ? "whileInView" : "initial",
+                        animate: h ? "whileInView" : "initial",
                         children: Nt(a.y, "NA", W, R, H)
                       }
                     ) : null
@@ -417,7 +417,7 @@ function re(dt) {
                         }
                       },
                       initial: "initial",
-                      animate: m ? "whileInView" : "initial",
+                      animate: h ? "whileInView" : "initial",
                       children: j[i]
                     }
                   )
@@ -429,7 +429,7 @@ function re(dt) {
               "line",
               {
                 y1: 0,
-                y2: u,
+                y2: f,
                 x1: s(y.date),
                 x2: s(y.date),
                 className: q(
@@ -451,34 +451,34 @@ function re(dt) {
               classNames: t.classNames,
               styles: t.styles,
               animate: o,
-              isInView: m
+              isInView: h
             },
             i
           )) }) : null,
           /* @__PURE__ */ e.jsx("g", { children: yt.map((t, i) => {
             const a = It(
               {
-                x: t.xCoordinate ? s(f(`${t.xCoordinate}`, l, /* @__PURE__ */ new Date())) + (t.xOffset || 0) : 0 + (t.xOffset || 0),
+                x: t.xCoordinate ? s(u(`${t.xCoordinate}`, l, /* @__PURE__ */ new Date())) + (t.xOffset || 0) : 0 + (t.xOffset || 0),
                 y: t.yCoordinate ? r(t.yCoordinate) + (t.yOffset || 0) - 8 : 0 + (t.yOffset || 0) - 8
               },
               {
-                x: t.xCoordinate ? s(f(`${t.xCoordinate}`, l, /* @__PURE__ */ new Date())) : 0,
+                x: t.xCoordinate ? s(u(`${t.xCoordinate}`, l, /* @__PURE__ */ new Date())) : 0,
                 y: t.yCoordinate ? r(t.yCoordinate) : 0
               },
-              d(t.connectorRadius) ? 3.5 : t.connectorRadius
+              x(t.connectorRadius) ? 3.5 : t.connectorRadius
             ), P = t.showConnector ? {
               y1: a.y,
               x1: a.x,
               y2: t.yCoordinate ? r(t.yCoordinate) + (t.yOffset || 0) : 0 + (t.yOffset || 0),
-              x2: t.xCoordinate ? s(f(`${t.xCoordinate}`, l, /* @__PURE__ */ new Date())) + (t.xOffset || 0) : 0 + (t.xOffset || 0),
+              x2: t.xCoordinate ? s(u(`${t.xCoordinate}`, l, /* @__PURE__ */ new Date())) + (t.xOffset || 0) : 0 + (t.xOffset || 0),
               cy: t.yCoordinate ? r(t.yCoordinate) : 0,
-              cx: t.xCoordinate ? s(f(`${t.xCoordinate}`, l, /* @__PURE__ */ new Date())) : 0,
-              circleRadius: d(t.connectorRadius) ? 3.5 : t.connectorRadius,
+              cx: t.xCoordinate ? s(u(`${t.xCoordinate}`, l, /* @__PURE__ */ new Date())) : 0,
+              circleRadius: x(t.connectorRadius) ? 3.5 : t.connectorRadius,
               strokeWidth: t.showConnector === !0 ? 2 : Math.min(t.showConnector || 0, 1)
             } : void 0, Ot = {
               y: t.yCoordinate ? r(t.yCoordinate) + (t.yOffset || 0) - 8 : 0 + (t.yOffset || 0) - 8,
-              x: G ? 0 : t.xCoordinate ? s(f(`${t.xCoordinate}`, l, /* @__PURE__ */ new Date())) + (t.xOffset || 0) : 0 + (t.xOffset || 0),
-              width: G ? t.xCoordinate ? s(f(`${t.xCoordinate}`, l, /* @__PURE__ */ new Date())) + (t.xOffset || 0) : 0 + (t.xOffset || 0) : g + w.right - (t.xCoordinate ? s(f(`${t.xCoordinate}`, l, /* @__PURE__ */ new Date())) + (t.xOffset || 0) : 0 + (t.xOffset || 0)),
+              x: G ? 0 : t.xCoordinate ? s(u(`${t.xCoordinate}`, l, /* @__PURE__ */ new Date())) + (t.xOffset || 0) : 0 + (t.xOffset || 0),
+              width: G ? t.xCoordinate ? s(u(`${t.xCoordinate}`, l, /* @__PURE__ */ new Date())) + (t.xOffset || 0) : 0 + (t.xOffset || 0) : g + w.right - (t.xCoordinate ? s(u(`${t.xCoordinate}`, l, /* @__PURE__ */ new Date())) + (t.xOffset || 0) : 0 + (t.xOffset || 0)),
               maxWidth: t.maxWidth,
               fontWeight: t.fontWeight,
               align: t.align
@@ -493,7 +493,7 @@ function re(dt) {
                 classNames: t.classNames,
                 styles: t.styles,
                 animate: o,
-                isInView: m
+                isInView: h
               },
               i
             );
@@ -508,7 +508,7 @@ function re(dt) {
                 pointerEvents: "all"
               },
               width: g,
-              height: u
+              height: f
             }
           )
         ] })
@@ -537,7 +537,7 @@ function Re(dt) {
     prefix: xt = "",
     graphDescription: j,
     height: I,
-    width: x,
+    width: m,
     footNote: J,
     noOfXTicks: H = 10,
     dateFormat: R = "yyyy",
@@ -547,13 +547,13 @@ function Re(dt) {
     backgroundColor: L = !1,
     leftMargin: gt = 30,
     rightMargin: K = 50,
-    topMargin: ut = 20,
+    topMargin: ft = 20,
     bottomMargin: F = 25,
     tooltip: Q,
     relativeHeight: A,
     onSeriesMouseOver: o,
     showColorLegendAtTop: G = !1,
-    refValues: ft = [],
+    refValues: ut = [],
     highlightAreaSettings: pt = [],
     graphID: yt,
     minValue: wt,
@@ -572,7 +572,7 @@ function Re(dt) {
     theme: jt = "light",
     ariaLabel: it,
     yAxisTitle: at,
-    noOfYTicks: m = 5,
+    noOfYTicks: h = 5,
     minDate: b,
     maxDate: Ct,
     curveType: bt = "curve",
@@ -585,22 +585,23 @@ function Re(dt) {
     dashSettings: w = ["5 5"],
     labelsToBeHidden: _ = [],
     showColorScale: n = !0
-  } = dt, [M, lt] = Y(0), [ct, g] = Y(0), u = ht(null), mt = ht(null);
+  } = dt, [M, lt] = Y(0), [ct, g] = Y(0), f = ht(null), mt = ht(null);
   return Dt(() => {
-    const h = new ResizeObserver((v) => {
-      lt(x || v[0].target.clientWidth || 620), g(I || v[0].target.clientHeight || 480);
+    const d = new ResizeObserver((v) => {
+      lt(m || v[0].target.clientWidth || 620), g(I || v[0].target.clientHeight || 480);
     });
-    return u.current && (g(u.current.clientHeight || 480), lt(u.current.clientWidth || 620), x || h.observe(u.current)), () => h.disconnect();
-  }, [x, I]), /* @__PURE__ */ e.jsx(
+    return f.current && (g(f.current.clientHeight || 480), lt(f.current.clientWidth || 620), m || d.observe(f.current)), () => d.disconnect();
+  }, [m, I]), /* @__PURE__ */ e.jsx(
     "div",
     {
-      className: `${jt || "light"} flex  ${x ? "w-fit grow-0" : "w-full grow"}`,
+      className: `${jt || "light"} flex  ${m ? "w-fit grow-0" : "w-full grow"}`,
       dir: c === "he" || c === "ar" ? "rtl" : void 0,
       children: /* @__PURE__ */ e.jsx(
         "div",
         {
           className: q(
             `${L ? L === !0 ? "bg-primary-gray-200 dark:bg-primary-gray-650 " : "" : "bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${c || "en"}`,
+            m ? "w-fit" : "w-full",
             O?.graphContainer
           ),
           style: {
@@ -629,9 +630,9 @@ function Re(dt) {
                     },
                     graphTitle: D,
                     graphDescription: j,
-                    width: x,
+                    width: m,
                     graphDownload: B ? mt.current : void 0,
-                    dataDownload: z ? T.map((h) => h.data).filter((h) => h !== void 0).length > 0 ? T.map((h) => h.data).filter((h) => h !== void 0) : T.filter((h) => h !== void 0) : null
+                    dataDownload: z ? T.map((d) => d.data).filter((d) => d !== void 0).length > 0 ? T.map((d) => d.data).filter((d) => d !== void 0) : T.filter((d) => d !== void 0) : null
                   }
                 ) : null,
                 /* @__PURE__ */ e.jsx("div", { className: "grow flex flex-col justify-center gap-3 w-full", children: T.length === 0 ? /* @__PURE__ */ e.jsx(ne, {}) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
@@ -645,21 +646,21 @@ function Re(dt) {
                       showNAColor: !1
                     }
                   ) : null,
-                  /* @__PURE__ */ e.jsx("div", { className: "w-full grow leading-0", ref: u, "aria-label": "Graph area", children: (x || M) && (I || ct) ? /* @__PURE__ */ e.jsx(
+                  /* @__PURE__ */ e.jsx("div", { className: "w-full grow leading-0", ref: f, "aria-label": "Graph area", children: (m || M) && (I || ct) ? /* @__PURE__ */ e.jsx(
                     re,
                     {
                       data: T,
                       lineColors: V,
-                      width: x || M,
+                      width: m || M,
                       height: Math.max(
                         k,
-                        I || (A ? k ? (x || M) * A > k ? (x || M) * A : k : (x || M) * A : ct)
+                        I || (A ? k ? (m || M) * A > k ? (m || M) * A : k : (m || M) * A : ct)
                       ),
                       dateFormat: R,
                       noOfXTicks: H,
                       leftMargin: gt,
                       rightMargin: K,
-                      topMargin: ut,
+                      topMargin: ft,
                       bottomMargin: F,
                       labels: C,
                       tooltip: Q,
@@ -669,7 +670,7 @@ function Re(dt) {
                       suffix: $,
                       prefix: xt,
                       highlightAreaSettings: pt,
-                      refValues: ft,
+                      refValues: ut,
                       minValue: wt,
                       maxValue: Z,
                       highlightedLines: vt,
@@ -680,7 +681,7 @@ function Re(dt) {
                       annotations: U,
                       customHighlightAreaSettings: et,
                       yAxisTitle: at,
-                      noOfYTicks: m,
+                      noOfYTicks: h,
                       minDate: b,
                       maxDate: Ct,
                       curveType: bt,
@@ -706,7 +707,7 @@ function Re(dt) {
                     },
                     sources: l,
                     footNote: J,
-                    width: x
+                    width: m
                   }
                 ) : null
               ] })