@undp/data-viz 1.4.6 → 1.4.8

package/dist/MultiLineAltChart.js

@@ -1,11 +1,11 @@
-import { j as t, m as he } from "./index-CHPV5EwG-BPSP-7Jg.js";
+import { j as t, m as xe } from "./index-CHPV5EwG-BPSP-7Jg.js";
 import { useRef as ge, useState as G, useEffect as Me } from "react";
 import { u as ue } from "./index-CaAIPGZo.js";
 import { p as u, f as Ve } from "./parse-DlCRUFh_.js";
 import { s as $e } from "./index-DxagiOHo.js";
 import { n as Se } from "./numberFormattingFunction-14YCbkN2.js";
 import { T as He } from "./Tooltip-DyM5snqx.js";
-import { c as x } from "./checkIfNullOrUndefined-DmfiKkNw.js";
+import { c as h } from "./checkIfNullOrUndefined-DmfiKkNw.js";
 import { C as We, g as Ie, A as Re } from "./customArea-B-dWU0zZ.js";
 import { A as Ye } from "./AxisTitle-BmHLMRJZ.js";
 import { A as Fe } from "./Axis-Ddg-seDi.js";
@@ -40,7 +40,7 @@ function lt(pe) {
     topMargin: de,
     bottomMargin: B,
     suffix: D,
-    prefix: h,
+    prefix: x,
     leftMargin: O,
     tooltip: ee,
     onSeriesMouseOver: W,
@@ -60,8 +60,8 @@ function lt(pe) {
     minDate: ae,
     maxDate: re,
     curveType: U,
-    styles: v,
-    colorDomain: b,
+    styles: b,
+    colorDomain: C,
     selectedColor: I,
     classNames: p,
     showLabels: R,
@@ -90,7 +90,7 @@ function lt(pe) {
       date: u(`${e.date}`, f, /* @__PURE__ */ new Date())
     })),
     "date"
-  ).filter((e) => !x(e.y)), Ae = ue(l, (e) => e.label).map((e) => e.label), Z = ue(
+  ).filter((e) => !h(e.y)), Ae = ue(l, (e) => e.label).map((e) => e.label), Z = ue(
     $e(
       n.map((e) => ({
         ...e,
@@ -99,7 +99,7 @@ function lt(pe) {
       "date"
     ),
     (e) => e.date
-  ).map((e) => e.date), [g, d] = G(void 0), [N, Y] = G(void 0), [le, F] = G(void 0), C = {
+  ).map((e) => e.date), [g, d] = G(void 0), [N, Y] = G(void 0), [le, F] = G(void 0), w = {
     top: de,
     bottom: B,
     left: oe ? O + 30 : O,
@@ -120,28 +120,28 @@ function lt(pe) {
     coordinates: e.coordinates.map(
       (o, m) => m % 2 === 0 ? u(`${o}`, f, /* @__PURE__ */ new Date()) : o
     )
-  })), w = S - C.left - C.right, V = K - C.top - C.bottom, P = ae ? u(`${ae}`, f, /* @__PURE__ */ new Date()) : Z[0], xe = re ? u(`${re}`, f, /* @__PURE__ */ new Date()) : Z[Z.length - 1], i = x(z) ? Math.min(...l.map((e) => e.y).filter((e) => !x(e))) ? Math.min(
-    ...l.map((e) => e.y).filter((e) => !x(e))
+  })), v = S - w.left - w.right, V = K - w.top - w.bottom, P = ae ? u(`${ae}`, f, /* @__PURE__ */ new Date()) : Z[0], he = re ? u(`${re}`, f, /* @__PURE__ */ new Date()) : Z[Z.length - 1], i = h(z) ? Math.min(...l.map((e) => e.y).filter((e) => !h(e))) ? Math.min(
+    ...l.map((e) => e.y).filter((e) => !h(e))
   ) > 0 ? 0 : Math.min(
-    ...l.map((e) => e.y).filter((e) => !x(e))
+    ...l.map((e) => e.y).filter((e) => !h(e))
   ) : 0 : z, J = Math.max(
-    ...l.map((e) => e.y).filter((e) => !x(e))
+    ...l.map((e) => e.y).filter((e) => !h(e))
   ) ? Math.max(
-    ...l.map((e) => e.y).filter((e) => !x(e))
-  ) : 0, r = Be().domain([P, xe]).range([0, w]), c = ze().domain([
-    x(z) ? i : z,
-    x(te) ? J > 0 ? J : 0 : te
+    ...l.map((e) => e.y).filter((e) => !h(e))
+  ) : 0, r = Be().domain([P, he]).range([0, v]), c = ze().domain([
+    h(z) ? i : z,
+    h(te) ? J > 0 ? J : 0 : te
   ]).range([V, 0]).nice(), ke = qe.from(
-    l.filter((e) => !x(e.date) && !x(e.y)),
+    l.filter((e) => !h(e.date) && !h(e.y)),
     (e) => r(e.date),
     (e) => c(e.y)
-  ).voronoi([0, 0, w < 0 ? 0 : w, V < 0 ? 0 : V]), De = Ue().x((e) => r(e.date)).y((e) => c(e.y)).curve(je), Ne = c.ticks(be), Te = r.ticks(ye);
+  ).voronoi([0, 0, v < 0 ? 0 : v, V < 0 ? 0 : V]), De = Ue().x((e) => r(e.date)).y((e) => c(e.y)).curve(je), Ne = c.ticks(be), Te = r.ticks(ye);
   return Me(() => {
     const e = (m) => {
       const H = l[tt(
         l.map((Le) => Le.date),
         r.invert(it(m)[0]),
-        1
+        0
       )];
       d(H || l[l.length - 1]), F(m.clientY), Y(m.clientX), W?.(H || l[l.length - 1]);
     }, o = () => {
@@ -157,12 +157,12 @@ function lt(pe) {
         viewBox: `0 0 ${S} ${K}`,
         direction: "ltr",
         ref: se,
-        children: /* @__PURE__ */ t.jsxs("g", { transform: `translate(${C.left},${C.top})`, children: [
+        children: /* @__PURE__ */ t.jsxs("g", { transform: `translate(${w.left},${w.top})`, children: [
           /* @__PURE__ */ t.jsx(
             Ge,
             {
               areaSettings: me,
-              width: w,
+              width: v,
               height: V,
               scale: r,
               animate: a,
@@ -186,17 +186,17 @@ function lt(pe) {
                 values: Ne.filter((e) => e !== 0),
                 y: Ne.filter((e) => e !== 0).map((e) => c(e)),
                 x1: 0 - O,
-                x2: w + C.right,
+                x2: v + w.right,
                 styles: {
-                  gridLines: v?.yAxis?.gridLines,
-                  labels: v?.yAxis?.labels
+                  gridLines: b?.yAxis?.gridLines,
+                  labels: b?.yAxis?.labels
                 },
                 classNames: {
                   gridLines: p?.yAxis?.gridLines,
                   labels: p?.yAxis?.labels
                 },
                 suffix: D,
-                prefix: h,
+                prefix: x,
                 labelType: "secondary",
                 showGridLines: !0,
                 labelPos: "vertical",
@@ -209,12 +209,12 @@ function lt(pe) {
                 y1: c(i < 0 ? 0 : i),
                 y2: c(i < 0 ? 0 : i),
                 x1: 0 - O,
-                x2: w + C.right,
+                x2: v + w.right,
                 label: Se(
                   i < 0 ? 0 : i,
                   "NA",
                   M,
-                  h,
+                  x,
                   D
                 ),
                 labelPos: {
@@ -228,8 +228,8 @@ function lt(pe) {
                   label: p?.yAxis?.labels
                 },
                 styles: {
-                  axis: v?.xAxis?.axis,
-                  label: v?.yAxis?.labels
+                  axis: b?.xAxis?.axis,
+                  label: b?.yAxis?.labels
                 }
               }
             ),
@@ -238,7 +238,7 @@ function lt(pe) {
               {
                 x: 0 - O - 15,
                 y: V / 2,
-                style: v?.yAxis?.title,
+                style: b?.yAxis?.title,
                 className: p?.yAxis?.title,
                 text: oe,
                 rotate90: !0
@@ -253,18 +253,18 @@ function lt(pe) {
               y1: 0,
               y2: V,
               styles: {
-                gridLines: v?.xAxis?.gridLines,
-                labels: v?.xAxis?.labels
+                gridLines: b?.xAxis?.gridLines,
+                labels: b?.xAxis?.labels
               },
               classNames: {
-                gridLines: he("opacity-0", p?.xAxis?.gridLines),
-                labels: he(
+                gridLines: xe("opacity-0", p?.xAxis?.gridLines),
+                labels: xe(
                   "fill-primary-gray-700 dark:fill-primary-gray-300 xs:max-[360px]:hidden text-[9px] md:text-[10px] lg:text-xs",
                   p?.xAxis?.labels
                 )
               },
               suffix: D,
-              prefix: h,
+              prefix: x,
               labelType: "primary",
               showGridLines: !0,
               precision: M
@@ -278,10 +278,10 @@ function lt(pe) {
                 exit: { opacity: 0, transition: { duration: a.duration } },
                 variants: {
                   initial: {
-                    opacity: g ? e[0].label === g.label ? 1 : j : I ? e[0].color && s[b.indexOf(e[0].color)] === I ? 1 : j : L.length !== 0 ? L.indexOf(e[0].label) !== -1 ? 1 : j : 1
+                    opacity: g ? e[0].label === g.label ? 1 : j : I ? e[0].color && s[C.indexOf(e[0].color)] === I ? 1 : j : L.length !== 0 ? L.indexOf(e[0].label) !== -1 ? 1 : j : 1
                   },
                   whileInView: {
-                    opacity: g ? e[0].label === g.label ? 1 : j : I ? e[0].color && s[b.indexOf(e[0].color)] === I ? 1 : j : L.length !== 0 ? L.indexOf(e[0].label) !== -1 ? 1 : j : 1,
+                    opacity: g ? e[0].label === g.label ? 1 : j : I ? e[0].color && s[C.indexOf(e[0].color)] === I ? 1 : j : L.length !== 0 ? L.indexOf(e[0].label) !== -1 ? 1 : j : 1,
                     transition: { duration: a.duration }
                   }
                 },
@@ -292,7 +292,7 @@ function lt(pe) {
                     E.path,
                     {
                       d: De(
-                        e.filter((o) => !x(o.y))
+                        e.filter((o) => !h(o.y))
                       ) || "",
                       style: {
                         fill: "none",
@@ -303,18 +303,18 @@ function lt(pe) {
                         initial: {
                           pathLength: 0,
                           d: De(
-                            e.filter((o) => !x(o.y))
+                            e.filter((o) => !h(o.y))
                           ) || "",
                           opacity: 1,
-                          stroke: n.filter((o) => o.color).length === 0 ? s[0] : e[0].color ? s[b.indexOf(e[0].color)] : T.gray
+                          stroke: n.filter((o) => o.color).length === 0 ? s[0] : e[0].color ? s[C.indexOf(e[0].color)] : T.gray
                         },
                         whileInView: {
                           pathLength: 1,
                           d: De(
-                            e.filter((o) => !x(o.y))
+                            e.filter((o) => !h(o.y))
                           ) || "",
                           opacity: 1,
-                          stroke: n.filter((o) => o.color).length === 0 ? s[0] : e[0].color ? s[b.indexOf(e[0].color)] : T.gray,
+                          stroke: n.filter((o) => o.color).length === 0 ? s[0] : e[0].color ? s[C.indexOf(e[0].color)] : T.gray,
                           transition: { duration: a.duration }
                         }
                       },
@@ -322,21 +322,21 @@ function lt(pe) {
                       animate: y ? "whileInView" : "initial"
                     }
                   ),
-                  e.map((o, m) => /* @__PURE__ */ t.jsx(E.g, { children: x(o.y) ? null : /* @__PURE__ */ t.jsx(t.Fragment, { children: q ? /* @__PURE__ */ t.jsx(
+                  e.map((o, m) => /* @__PURE__ */ t.jsx(E.g, { children: h(o.y) ? null : /* @__PURE__ */ t.jsx(t.Fragment, { children: q ? /* @__PURE__ */ t.jsx(
                     E.circle,
                     {
-                      r: w / e.length < 5 ? 0 : w / e.length < 20 ? 2 : 4,
+                      r: v / e.length < 5 ? 0 : v / e.length < 20 ? 2 : 4,
                       exit: { opacity: 0, transition: { duration: a.duration } },
                       variants: {
                         initial: {
                           opacity: 0,
-                          fill: n.filter((H) => H.color).length === 0 ? s[0] : e[0].color ? s[b.indexOf(e[0].color)] : T.gray,
+                          fill: n.filter((H) => H.color).length === 0 ? s[0] : e[0].color ? s[C.indexOf(e[0].color)] : T.gray,
                           cx: r(o.date),
                           cy: c(o.y)
                         },
                         whileInView: {
                           opacity: 1,
-                          fill: n.filter((H) => H.color).length === 0 ? s[0] : e[0].color ? s[b.indexOf(e[0].color)] : T.gray,
+                          fill: n.filter((H) => H.color).length === 0 ? s[0] : e[0].color ? s[C.indexOf(e[0].color)] : T.gray,
                           transition: {
                             duration: A ? a.duration : 0.5,
                             delay: A ? 0 : a.duration
@@ -353,7 +353,7 @@ function lt(pe) {
                     E.text,
                     {
                       style: {
-                        fill: n.filter((o) => o.color).length === 0 ? s[0] : e[0].color ? s[b.indexOf(e[0].color)] : T.gray
+                        fill: n.filter((o) => o.color).length === 0 ? s[0] : e[0].color ? s[C.indexOf(e[0].color)] : T.gray
                       },
                       className: "text-sm font-bold",
                       dx: 5,
@@ -389,17 +389,17 @@ function lt(pe) {
               {
                 y: c(g.y) - 8,
                 x: r(g.date),
-                className: he("graph-value text-sm font-bold", p?.graphObjectValues),
+                className: xe("graph-value text-sm font-bold", p?.graphObjectValues),
                 style: {
-                  fill: n.filter((e) => e.color).length === 0 ? s[0] : g.color ? s[b.indexOf(g.color)] : T.gray,
+                  fill: n.filter((e) => e.color).length === 0 ? s[0] : g.color ? s[C.indexOf(g.color)] : T.gray,
                   textAnchor: "middle",
-                  ...v?.graphObjectValues || {}
+                  ...b?.graphObjectValues || {}
                 },
-                children: Se(g.y, Ce, M, h, D)
+                children: Se(g.y, Ce, M, x, D)
               }
             ) : null
           ] }),
-          l.filter((e) => !x(e.y)).map((e, o) => /* @__PURE__ */ t.jsx("g", { children: /* @__PURE__ */ t.jsx(
+          l.filter((e) => !h(e.y)).map((e, o) => /* @__PURE__ */ t.jsx("g", { children: /* @__PURE__ */ t.jsx(
             "path",
             {
               d: ke.renderCell(
@@ -424,7 +424,7 @@ function lt(pe) {
               color: e.color,
               y: c(e.value),
               x1: 0 - O,
-              x2: w + C.right,
+              x2: v + w.right,
               classNames: e.classNames,
               styles: e.styles,
               animate: a,
@@ -442,7 +442,7 @@ function lt(pe) {
                 x: e.xCoordinate ? r(u(`${e.xCoordinate}`, f, /* @__PURE__ */ new Date())) : 0,
                 y: e.yCoordinate ? c(e.yCoordinate) : 0
               },
-              x(e.connectorRadius) ? 3.5 : e.connectorRadius
+              h(e.connectorRadius) ? 3.5 : e.connectorRadius
             ), H = e.showConnector ? {
               y1: m.y,
               x1: m.x,
@@ -450,12 +450,12 @@ function lt(pe) {
               x2: e.xCoordinate ? r(u(`${e.xCoordinate}`, f, /* @__PURE__ */ new Date())) + (e.xOffset || 0) : 0 + (e.xOffset || 0),
               cy: e.yCoordinate ? c(e.yCoordinate) : 0,
               cx: e.xCoordinate ? r(u(`${e.xCoordinate}`, f, /* @__PURE__ */ new Date())) : 0,
-              circleRadius: x(e.connectorRadius) ? 3.5 : e.connectorRadius,
+              circleRadius: h(e.connectorRadius) ? 3.5 : e.connectorRadius,
               strokeWidth: e.showConnector === !0 ? 2 : Math.min(e.showConnector || 0, 1)
             } : void 0, Le = {
               y: e.yCoordinate ? c(e.yCoordinate) + (e.yOffset || 0) - 8 : 0 + (e.yOffset || 0) - 8,
               x: ie ? 0 : e.xCoordinate ? r(u(`${e.xCoordinate}`, f, /* @__PURE__ */ new Date())) + (e.xOffset || 0) : 0 + (e.xOffset || 0),
-              width: ie ? e.xCoordinate ? r(u(`${e.xCoordinate}`, f, /* @__PURE__ */ new Date())) + (e.xOffset || 0) : 0 + (e.xOffset || 0) : w - (e.xCoordinate ? r(u(`${e.xCoordinate}`, f, /* @__PURE__ */ new Date())) + (e.xOffset || 0) : 0 + (e.xOffset || 0)),
+              width: ie ? e.xCoordinate ? r(u(`${e.xCoordinate}`, f, /* @__PURE__ */ new Date())) + (e.xOffset || 0) : 0 + (e.xOffset || 0) : v + w.right - (e.xCoordinate ? r(u(`${e.xCoordinate}`, f, /* @__PURE__ */ new Date())) + (e.xOffset || 0) : 0 + (e.xOffset || 0)),
               maxWidth: e.maxWidth,
               fontWeight: e.fontWeight,
               align: e.align
@@ -486,7 +486,7 @@ function lt(pe) {
         body: ee,
         xPos: N,
         yPos: le,
-        backgroundStyle: v?.tooltip,
+        backgroundStyle: b?.tooltip,
         className: p?.tooltip
       }
     ) : null
@@ -504,7 +504,7 @@ function Yt(pe) {
     prefix: de = "",
     graphDescription: B,
     height: D,
-    width: h,
+    width: x,
     footNote: O,
     noOfXTicks: ee = 10,
     dateFormat: W = "yyyy",
@@ -524,8 +524,8 @@ function Yt(pe) {
     graphID: ae,
     minValue: re,
     maxValue: U,
-    highlightedLines: v = [],
-    graphDownload: b = !1,
+    highlightedLines: b = [],
+    graphDownload: C = !1,
     dataDownload: I = !1,
     animate: p = !1,
     language: R = "en",
@@ -547,22 +547,22 @@ function Yt(pe) {
     dimmedOpacity: Y = 0.3,
     precision: le = 2,
     customLayers: F = [],
-    naLabel: C = "NA"
-  } = pe, [X, ce] = G(0), [me, fe] = G(0), [w, V] = G(void 0), P = ge(null), xe = ge(null);
+    naLabel: w = "NA"
+  } = pe, [X, ce] = G(0), [me, fe] = G(0), [v, V] = G(void 0), P = ge(null), he = ge(null);
   return Me(() => {
     const i = new ResizeObserver((J) => {
-      ce(h || J[0].target.clientWidth || 620), fe(D || J[0].target.clientHeight || 480);
+      ce(x || J[0].target.clientWidth || 620), fe(D || J[0].target.clientHeight || 480);
     });
-    return P.current && (fe(P.current.clientHeight || 480), ce(P.current.clientWidth || 620), h || i.observe(P.current)), () => i.disconnect();
-  }, [h, D]), /* @__PURE__ */ t.jsx(
+    return P.current && (fe(P.current.clientHeight || 480), ce(P.current.clientWidth || 620), x || i.observe(P.current)), () => i.disconnect();
+  }, [x, D]), /* @__PURE__ */ t.jsx(
     "div",
     {
-      className: `${A || "light"} flex  ${h ? "w-fit grow-0" : "w-full grow"}`,
+      className: `${A || "light"} flex  ${x ? "w-fit grow-0" : "w-full grow"}`,
       dir: R === "he" || R === "ar" ? "rtl" : void 0,
       children: /* @__PURE__ */ t.jsx(
         "div",
         {
-          className: he(
+          className: xe(
             `${k ? k === !0 ? "bg-primary-gray-200 dark:bg-primary-gray-650 " : "" : "bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${R || "en"}`,
             N?.graphContainer
           ),
@@ -571,7 +571,7 @@ function Yt(pe) {
             ...k && k !== !0 ? { backgroundColor: k } : {}
           },
           id: ae,
-          ref: xe,
+          ref: he,
           "aria-label": Oe || `${S ? `The graph shows ${S}. ` : ""}This is a multi-line chart that shows trends over time.${B ? ` ${B}` : ""}`,
           children: /* @__PURE__ */ t.jsx(
             "div",
@@ -579,7 +579,7 @@ function Yt(pe) {
               className: "flex grow",
               style: { padding: k ? Q || "1rem" : Q || 0 },
               children: /* @__PURE__ */ t.jsxs("div", { className: "flex flex-col w-full gap-4 grow justify-between", children: [
-                S || B || b || I ? /* @__PURE__ */ t.jsx(
+                S || B || C || I ? /* @__PURE__ */ t.jsx(
                   rt,
                   {
                     styles: {
@@ -592,8 +592,8 @@ function Yt(pe) {
                     },
                     graphTitle: S,
                     graphDescription: B,
-                    width: h,
-                    graphDownload: b ? xe.current : void 0,
+                    width: x,
+                    graphDownload: C ? he.current : void 0,
                     dataDownload: I ? n.map((i) => i.data).filter((i) => i !== void 0).length > 0 ? n.map((i) => i.data).filter((i) => i !== void 0) : n.filter((i) => i !== void 0) : null
                   }
                 ) : null,
@@ -601,7 +601,7 @@ function Yt(pe) {
                   ie && n.filter((i) => i.color).length !== 0 ? /* @__PURE__ */ t.jsx(
                     st,
                     {
-                      width: h,
+                      width: x,
                       colorLegendTitle: j,
                       colors: s || T[A].categoricalColors.colors,
                       colorDomain: f || ue(
@@ -612,15 +612,15 @@ function Yt(pe) {
                       showNAColor: K
                     }
                   ) : null,
-                  /* @__PURE__ */ t.jsx("div", { className: "w-full grow leading-0", ref: P, "aria-label": "Graph area", children: (h || X) && (D || me) ? /* @__PURE__ */ t.jsx(
+                  /* @__PURE__ */ t.jsx("div", { className: "w-full grow leading-0", ref: P, "aria-label": "Graph area", children: (x || X) && (D || me) ? /* @__PURE__ */ t.jsx(
                     lt,
                     {
                       data: n,
                       lineColors: n.filter((i) => i.color).length === 0 ? s ? [s] : [T.primaryColors["blue-600"]] : s || T[A].categoricalColors.colors,
-                      width: h || X,
+                      width: x || X,
                       height: Math.max(
                         M,
-                        D || (q ? M ? (h || X) * q > M ? (h || X) * q : M : (h || X) * q : me)
+                        D || (q ? M ? (x || X) * q > M ? (x || X) * q : M : (x || X) * q : me)
                       ),
                       dateFormat: W,
                       noOfXTicks: ee,
@@ -636,7 +636,7 @@ function Yt(pe) {
                       refValues: oe,
                       minValue: re,
                       maxValue: U,
-                      highlightedLines: v,
+                      highlightedLines: b,
                       animate: p === !0 ? { duration: 0.5, once: !0, amount: 0.5 } : p || { duration: 0, once: !0, amount: 0 },
                       rtl: R === "he" || R === "ar",
                       strokeWidth: Ce,
@@ -650,7 +650,7 @@ function Yt(pe) {
                       curveType: g,
                       styles: d,
                       classNames: N,
-                      selectedColor: w,
+                      selectedColor: v,
                       showLabels: ve,
                       colorDomain: n.filter((i) => i.color).length === 0 ? [] : f || ue(
                         n.filter((i) => i.color),
@@ -659,7 +659,7 @@ function Yt(pe) {
                       dimmedOpacity: Y,
                       precision: le,
                       customLayers: F,
-                      naLabel: C
+                      naLabel: w
                     }
                   ) : null })
                 ] }) }),
@@ -673,7 +673,7 @@ function Yt(pe) {
                     },
                     sources: _,
                     footNote: O,
-                    width: h
+                    width: x
                   }
                 ) : null
               ] })