@undp/data-viz 1.5.6 → 1.5.8

package/dist/MultiLineChart.js

@@ -29,10 +29,10 @@ import { E as ne } from "./EmptyState-DdTp-Mdn.js";
 import { g as se } from "./generateRandomString-za3IQGfQ.js";
 function re(dt) {
   const {
-    data: T,
-    width: D,
+    data: $,
+    width: L,
     height: V,
-    lineColors: $,
+    lineColors: C,
     dateFormat: l,
     noOfXTicks: xt,
     labels: j,
@@ -41,16 +41,16 @@ function re(dt) {
     bottomMargin: J,
     suffix: H,
     prefix: R,
-    leftMargin: C,
+    leftMargin: b,
     tooltip: X,
     onSeriesMouseOver: E,
-    showValues: L,
+    showValues: T,
     showColorLegendAtTop: gt,
     refValues: K,
     highlightAreaSettings: ft,
     minValue: F,
     maxValue: Q,
-    highlightedLines: A,
+    highlightedLines: O,
     animate: o,
     rtl: G,
     strokeWidth: ut,
@@ -74,9 +74,9 @@ function re(dt) {
   } = dt, at = ht(null), h = te(at, {
     once: o.once,
     amount: o.amount
-  }), [b, Ct] = Y(!1);
+  }), [A, Ct] = Y(!1);
   Dt(() => {
-    if (h && !b) {
+    if (h && !A) {
       const t = setTimeout(
         () => {
           Ct(!0);
@@ -85,14 +85,14 @@ function re(dt) {
       );
       return () => clearTimeout(t);
     }
-  }, [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 = {
+  }, [h, A, o.duration]);
+  const bt = N === "linear" ? zt : N === "step" ? Ut : N === "stepAfter" ? _t : N === "stepBefore" ? qt : Jt, [y, D] = Y(void 0), [ot, nt] = Y(void 0), [st, rt] = Y(void 0), w = {
     top: m,
     bottom: J,
-    left: Z ? C + 30 : C,
+    left: Z ? b + 30 : b,
     right: I
   }, _ = ht(null), n = Mt(
-    T.map((t) => ({
+    $.map((t) => ({
       ...t,
       date: u(`${t.date}`, l, /* @__PURE__ */ new Date())
     })),
@@ -112,7 +112,7 @@ function re(dt) {
     coordinates: t.coordinates.map(
       (i, a) => a % 2 === 0 ? u(`${i}`, l, /* @__PURE__ */ new Date()) : i
     )
-  })), 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(
+  })), g = L - 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) => !x(i)))
     )
@@ -143,18 +143,18 @@ function re(dt) {
         s.invert(Zt(a)[0]),
         0
       )];
-      O(P || n[n.length - 1]), rt(a.clientY), nt(a.clientX), E?.(P || n[n.length - 1]);
+      D(P || n[n.length - 1]), rt(a.clientY), nt(a.clientX), E?.(P || n[n.length - 1]);
     }, i = () => {
-      O(void 0), nt(void 0), rt(void 0);
+      D(void 0), nt(void 0), rt(void 0);
     };
     Kt(_.current).on("mousemove", t).on("mouseout", i), E?.(void 0);
   }, [s, n, E]), /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx(
       S.svg,
       {
-        width: `${D}px`,
+        width: `${L}px`,
         height: `${V}px`,
-        viewBox: `0 0 ${D} ${V}`,
+        viewBox: `0 0 ${L} ${V}`,
         direction: "ltr",
         ref: at,
         children: /* @__PURE__ */ e.jsxs("g", { transform: `translate(${w.left},${w.top})`, children: [
@@ -202,7 +202,7 @@ function re(dt) {
               {
                 values: Tt.filter((t) => t !== 0),
                 y: Tt.filter((t) => t !== 0).map((t) => r(t)),
-                x1: 0 - C,
+                x1: 0 - b,
                 x2: g + w.right,
                 styles: {
                   gridLines: c?.yAxis?.gridLines,
@@ -225,7 +225,7 @@ function re(dt) {
               {
                 y1: r(v < 0 ? 0 : v),
                 y2: r(v < 0 ? 0 : v),
-                x1: 0 - C,
+                x1: 0 - b,
                 x2: g + w.right,
                 label: Nt(
                   v < 0 ? 0 : v,
@@ -235,7 +235,7 @@ function re(dt) {
                   H
                 ),
                 labelPos: {
-                  x: 0 - C,
+                  x: 0 - b,
                   y: r(v < 0 ? 0 : v),
                   dx: 0,
                   dy: At < 0 ? "1em" : -5
@@ -253,7 +253,7 @@ function re(dt) {
             /* @__PURE__ */ e.jsx(
               Rt,
               {
-                x: 0 - C - 15,
+                x: 0 - b - 15,
                 y: f / 2,
                 style: c?.yAxis?.title,
                 className: p?.yAxis?.title,
@@ -295,10 +295,10 @@ function re(dt) {
                 exit: { opacity: 0, transition: { duration: o.duration } },
                 variants: {
                   initial: {
-                    opacity: A.length !== 0 ? A.indexOf(j[i]) !== -1 ? 1 : k : 1
+                    opacity: O.length !== 0 ? O.indexOf(j[i]) !== -1 ? 1 : k : 1
                   },
                   whileInView: {
-                    opacity: A.length !== 0 ? A.indexOf(j[i]) !== -1 ? 1 : k : 1,
+                    opacity: O.length !== 0 ? O.indexOf(j[i]) !== -1 ? 1 : k : 1,
                     transition: { duration: o.duration }
                   }
                 },
@@ -321,7 +321,7 @@ function re(dt) {
                             t.filter((a) => !x(a.y))
                           ) || "",
                           opacity: 1,
-                          stroke: $[i]
+                          stroke: C[i]
                         },
                         whileInView: {
                           ...U.length === 0 ? { pathLength: 1 } : {},
@@ -329,7 +329,7 @@ function re(dt) {
                             t.filter((a) => !x(a.y))
                           ) || "",
                           opacity: 1,
-                          stroke: $[i],
+                          stroke: C[i],
                           transition: { duration: o.duration }
                         }
                       },
@@ -343,15 +343,20 @@ function re(dt) {
                       S.circle,
                       {
                         r: g / n.length < 5 ? 0 : g / n.length < 20 ? 2 : 4,
-                        style: { fill: $[i] },
                         exit: { opacity: 0, transition: { duration: o.duration } },
                         variants: {
-                          initial: { opacity: 0, cx: s(a.date), cy: r(a.y) },
+                          initial: {
+                            opacity: 0,
+                            fill: C[i],
+                            cx: s(a.date),
+                            cy: r(a.y)
+                          },
                           whileInView: {
                             opacity: 1,
+                            fill: C[i],
                             transition: {
-                              duration: b ? o.duration : 0.5,
-                              delay: b ? 0 : o.duration
+                              duration: A ? o.duration : 0.5,
+                              delay: A ? 0 : o.duration
                             },
                             cx: s(a.date),
                             cy: r(a.y)
@@ -361,12 +366,11 @@ function re(dt) {
                         animate: h ? "whileInView" : "initial"
                       }
                     ) : null,
-                    L ? /* @__PURE__ */ e.jsx(
+                    T ? /* @__PURE__ */ e.jsx(
                       S.text,
                       {
                         dy: -8,
                         style: {
-                          fill: $[i],
                           textAnchor: "middle",
                           ...c?.graphObjectValues || {}
                         },
@@ -376,14 +380,20 @@ function re(dt) {
                         ),
                         exit: { opacity: 0, transition: { duration: o.duration } },
                         variants: {
-                          initial: { opacity: 0, x: s(a.date), y: r(a.y) },
+                          initial: {
+                            opacity: 0,
+                            fill: C[i],
+                            x: s(a.date),
+                            y: r(a.y)
+                          },
                           whileInView: {
                             opacity: 1,
+                            fill: C[i],
                             x: s(a.date),
                             y: r(a.y),
                             transition: {
-                              duration: b ? o.duration : 0.5,
-                              delay: b ? 0 : o.duration
+                              duration: A ? o.duration : 0.5,
+                              delay: A ? 0 : o.duration
                             }
                           }
                         },
@@ -396,7 +406,6 @@ function re(dt) {
                   gt || jt.includes(j[i]) ? null : /* @__PURE__ */ e.jsx(
                     S.text,
                     {
-                      style: { fill: $[i] },
                       className: "text-xs",
                       dx: 5,
                       dy: 4,
@@ -404,16 +413,18 @@ function re(dt) {
                       variants: {
                         initial: {
                           opacity: 0,
+                          fill: C[i],
                           x: s(t[t.length - 1].date),
                           y: r(t[t.length - 1].y)
                         },
                         whileInView: {
                           opacity: 1,
+                          fill: C[i],
                           x: s(t[t.length - 1].date),
                           y: r(t[t.length - 1].y),
                           transition: {
-                            duration: b ? o.duration : 0.5,
-                            delay: b ? 0 : o.duration
+                            duration: A ? o.duration : 0.5,
+                            delay: A ? 0 : o.duration
                           }
                         }
                       },
@@ -447,7 +458,7 @@ function re(dt) {
               text: t.text,
               color: t.color,
               y: r(t.value),
-              x1: 0 - C,
+              x1: 0 - b,
               x2: g + w.right,
               classNames: t.classNames,
               styles: t.styles,
@@ -530,10 +541,10 @@ function re(dt) {
 }
 function Re(dt) {
   const {
-    data: T,
-    graphTitle: D,
+    data: $,
+    graphTitle: L,
     lineColors: V = oe.light.categoricalColors.colors,
-    suffix: $ = "",
+    suffix: C = "",
     sources: l,
     prefix: xt = "",
     graphDescription: j,
@@ -542,16 +553,16 @@ function Re(dt) {
     footNote: J,
     noOfXTicks: H = 10,
     dateFormat: R = "yyyy",
-    labels: C,
+    labels: b,
     padding: X,
     showValues: E = !1,
-    backgroundColor: L = !1,
+    backgroundColor: T = !1,
     leftMargin: gt = 30,
     rightMargin: K = 50,
     topMargin: ft = 20,
     bottomMargin: F = 25,
     tooltip: Q,
-    relativeHeight: A,
+    relativeHeight: O,
     onSeriesMouseOver: o,
     showColorLegendAtTop: G = !1,
     refValues: ut = [],
@@ -574,11 +585,11 @@ function Re(dt) {
     ariaLabel: it,
     yAxisTitle: at,
     noOfYTicks: h = 5,
-    minDate: b,
+    minDate: A,
     maxDate: Ct,
     curveType: bt = "curve",
     styles: y,
-    classNames: O,
+    classNames: D,
     dimmedOpacity: ot = 0.3,
     precision: nt = 2,
     customLayers: st = [],
@@ -601,24 +612,24 @@ function Re(dt) {
         "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"}`,
+            `${T ? T === !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
+            D?.graphContainer
           ),
           style: {
             ...y?.graphContainer || {},
-            ...L && L !== !0 ? { backgroundColor: L } : {}
+            ...T && T !== !0 ? { backgroundColor: T } : {}
           },
           id: yt,
           ref: mt,
-          "aria-label": it || `${D ? `The graph shows ${D}. ` : ""}This is a multi-line chart that shows trends over time.${j ? ` ${j}` : ""}`,
+          "aria-label": it || `${L ? `The graph shows ${L}. ` : ""}This is a multi-line chart that shows trends over time.${j ? ` ${j}` : ""}`,
           children: /* @__PURE__ */ e.jsx(
             "div",
             {
               className: "flex grow",
-              style: { padding: L ? X || "1rem" : X || 0 },
+              style: { padding: T ? X || "1rem" : X || 0 },
               children: /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col w-full gap-4 grow justify-between", children: [
-                D || j || B || z ? /* @__PURE__ */ e.jsx(
+                L || j || B || z ? /* @__PURE__ */ e.jsx(
                   ie,
                   {
                     styles: {
@@ -626,21 +637,21 @@ function Re(dt) {
                       description: y?.description
                     },
                     classNames: {
-                      title: O?.title,
-                      description: O?.description
+                      title: D?.title,
+                      description: D?.description
                     },
-                    graphTitle: D,
+                    graphTitle: L,
                     graphDescription: j,
                     width: m,
                     graphDownload: B ? mt.current : void 0,
-                    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
+                    dataDownload: z ? $.map((d) => d.data).filter((d) => d !== void 0).length > 0 ? $.map((d) => d.data).filter((d) => d !== void 0) : $.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: [
+                /* @__PURE__ */ e.jsx("div", { className: "grow flex flex-col justify-center gap-3 w-full", children: $.length === 0 ? /* @__PURE__ */ e.jsx(ne, {}) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
                   G && n ? /* @__PURE__ */ e.jsx(
                     ae,
                     {
-                      colorDomain: C,
+                      colorDomain: b,
                       colorLegendTitle: p,
                       labelsToBeHidden: _,
                       colors: V,
@@ -650,12 +661,12 @@ function Re(dt) {
                   /* @__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,
+                      data: $,
                       lineColors: V,
                       width: m || M,
                       height: Math.max(
                         k,
-                        I || (A ? k ? (m || M) * A > k ? (m || M) * A : k : (m || M) * A : ct)
+                        I || (O ? k ? (m || M) * O > k ? (m || M) * O : k : (m || M) * O : ct)
                       ),
                       dateFormat: R,
                       noOfXTicks: H,
@@ -663,12 +674,12 @@ function Re(dt) {
                       rightMargin: K,
                       topMargin: ft,
                       bottomMargin: F,
-                      labels: C,
+                      labels: b,
                       tooltip: Q,
                       onSeriesMouseOver: o,
                       showColorLegendAtTop: n ? G : !0,
                       showValues: E,
-                      suffix: $,
+                      suffix: C,
                       prefix: xt,
                       highlightAreaSettings: pt,
                       refValues: ut,
@@ -683,11 +694,11 @@ function Re(dt) {
                       customHighlightAreaSettings: et,
                       yAxisTitle: at,
                       noOfYTicks: h,
-                      minDate: b,
+                      minDate: A,
                       maxDate: Ct,
                       curveType: bt,
                       styles: y,
-                      classNames: O,
+                      classNames: D,
                       dimmedOpacity: ot,
                       precision: nt,
                       customLayers: st,
@@ -703,8 +714,8 @@ function Re(dt) {
                   {
                     styles: { footnote: y?.footnote, source: y?.source },
                     classNames: {
-                      footnote: O?.footnote,
-                      source: O?.source
+                      footnote: D?.footnote,
+                      source: D?.source
                     },
                     sources: l,
                     footNote: J,