@undp/data-viz 1.5.1 → 1.5.3

package/dist/SlopeChart.js

@@ -1,22 +1,22 @@
 import { j as o, m as j } from "./index-CHPV5EwG-BPSP-7Jg.js";
-import { u as ri } from "./index-AqnpA7_O.js";
 import { useRef as ii, useState as I, useEffect as yi } from "react";
-import { i as mi } from "./index-Bwrro8-q.js";
-import { X as xi } from "./Modal-DVVwpKhP.js";
-import { T as fi } from "./Tooltip-CVCGWyzw.js";
+import { i as xi } from "./index-Bwrro8-q.js";
+import { X as mi } from "./Modal-DVVwpKhP.js";
+import { T as hi } from "./Tooltip-CVCGWyzw.js";
 import { c as J } from "./checkIfNullOrUndefined-DmfiKkNw.js";
 import { Colors as n } from "./Colors.js";
-import { s as hi } from "./string2HTML-oFCROsus.js";
-import { A as ai } from "./Axis-Ddg-seDi.js";
-import { A as ni } from "./AxisTitle-BmHLMRJZ.js";
+import { s as fi } from "./string2HTML-oFCROsus.js";
+import { A as ri } from "./Axis-Ddg-seDi.js";
+import { A as ai } from "./AxisTitle-BmHLMRJZ.js";
 import { a as gi } from "./linear-DUdu7l2G.js";
 import { u as ui } from "./use-in-view-yS6jzJAp.js";
 import { m as O } from "./proxy-CkpFesk1.js";
-import { A as pi } from "./index-CNvov0eg.js";
-import { GraphFooter as di } from "./GraphFooter.js";
+import { A as di } from "./index-CNvov0eg.js";
+import { GraphFooter as pi } from "./GraphFooter.js";
 import { GraphHeader as wi } from "./GraphHeader.js";
 import { ColorLegendWithMouseOver as vi } from "./ColorLegendWithMouseOver.js";
 import { E as bi } from "./EmptyState-DdTp-Mdn.js";
+import { u as ni } from "./uniqBy-BHy4I8PK.js";
 function Oi(K) {
   const {
     data: l,
@@ -24,16 +24,16 @@ function Oi(K) {
     height: k,
     showLabels: H,
     colors: e,
-    colorDomain: a,
+    colorDomain: r,
     radius: c,
-    leftMargin: x,
+    leftMargin: m,
     rightMargin: X,
     topMargin: G,
     bottomMargin: Q,
     tooltip: R,
     onSeriesMouseOver: F,
     axisTitles: L,
-    highlightedDataPoints: m,
+    highlightedDataPoints: x,
     selectedColor: D,
     minValue: q,
     maxValue: z,
@@ -41,22 +41,22 @@ function Oi(K) {
     resetSelectionOnDoubleClick: Z,
     detailsOnClick: g,
     styles: u,
-    classNames: f,
+    classNames: h,
     animate: s,
-    dimmedOpacity: p,
+    dimmedOpacity: d,
     customLayers: B
-  } = K, _ = ii(null), d = ui(_, {
+  } = K, _ = ii(null), p = ui(_, {
     once: s.once,
     amount: s.amount
   }), [w, S] = I(void 0), [M, N] = I(void 0), [U, C] = I(void 0), [T, W] = I(void 0), A = {
     top: G,
     bottom: Q,
-    left: x,
+    left: m,
     right: X
-  }, v = $ - A.left - A.right, h = k - A.top - A.bottom, b = Math.min(Math.min(...l.map((i) => i.y1)), Math.min(...l.map((i) => i.y2))), P = Math.max(Math.max(...l.map((i) => i.y1)), Math.max(...l.map((i) => i.y2))), y = gi().domain([
+  }, v = $ - A.left - A.right, f = k - A.top - A.bottom, b = Math.min(Math.min(...l.map((i) => i.y1)), Math.min(...l.map((i) => i.y2))), P = Math.max(Math.max(...l.map((i) => i.y1)), Math.max(...l.map((i) => i.y2))), y = gi().domain([
     J(q) ? b > 0 ? 0 : b : q,
     J(z) ? P > 0 ? P : 0 : z
-  ]).range([h, 0]).nice();
+  ]).range([f, 0]).nice();
   return /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
     /* @__PURE__ */ o.jsx(
       O.svg,
@@ -70,29 +70,29 @@ function Oi(K) {
         children: /* @__PURE__ */ o.jsxs("g", { transform: `translate(${A.left},${A.top})`, children: [
           /* @__PURE__ */ o.jsxs("g", { children: [
             /* @__PURE__ */ o.jsx(
-              ai,
+              ri,
               {
                 y1: 0,
-                y2: h,
+                y2: f,
                 x1: c,
                 x2: c,
                 classNames: {
                   axis: j(
                     "stroke-1 stroke-primary-gray-500 dark:stroke-primary-gray-550",
-                    f?.yAxis?.axis
+                    h?.yAxis?.axis
                   )
                 }
               }
             ),
             /* @__PURE__ */ o.jsx(
-              ni,
+              ai,
               {
                 x: c,
-                y: h + 15,
+                y: f + 15,
                 style: u?.yAxis?.title,
                 className: j(
                   "fill-primary-gray-700 dark:fill-primary-gray-300 text-xs",
-                  f?.yAxis?.title
+                  h?.yAxis?.title
                 ),
                 text: L[0]
               }
@@ -100,49 +100,49 @@ function Oi(K) {
           ] }),
           /* @__PURE__ */ o.jsxs("g", { children: [
             /* @__PURE__ */ o.jsx(
-              ai,
+              ri,
               {
                 y1: 0,
-                y2: h,
+                y2: f,
                 x1: v - c,
                 x2: v - c,
                 classNames: {
                   axis: j(
                     "stroke-1 stroke-primary-gray-500 dark:stroke-primary-gray-550",
-                    f?.yAxis?.axis
+                    h?.yAxis?.axis
                   )
                 }
               }
             ),
             /* @__PURE__ */ o.jsx(
-              ni,
+              ai,
               {
                 x: v - c,
-                y: h + 15,
+                y: f + 15,
                 style: u?.yAxis?.title,
                 className: j(
                   "fill-primary-gray-700 dark:fill-primary-gray-300 text-xs",
-                  f?.yAxis?.title
+                  h?.yAxis?.title
                 ),
                 text: L[1]
               }
             )
           ] }),
           B.filter((i) => i.position === "before").map((i) => i.layer),
-          /* @__PURE__ */ o.jsx(pi, { children: l.map((i, V) => /* @__PURE__ */ o.jsxs(
+          /* @__PURE__ */ o.jsx(di, { children: l.map((i, V) => /* @__PURE__ */ o.jsxs(
             O.g,
             {
               variants: {
                 initial: {
-                  opacity: D ? i.color && e[a.indexOf(`${i.color}`)] === D ? 1 : p : w ? w.label === i.label ? 1 : p : m.length !== 0 ? m.indexOf(i.label) !== -1 ? 1 : p : 1
+                  opacity: D ? i.color && e[r.indexOf(`${i.color}`)] === D ? 1 : d : w ? w.label === i.label ? 1 : d : x.length !== 0 ? x.indexOf(i.label) !== -1 ? 1 : d : 1
                 },
                 whileInView: {
-                  opacity: D ? i.color && e[a.indexOf(`${i.color}`)] === D ? 1 : p : w ? w.label === i.label ? 1 : p : m.length !== 0 ? m.indexOf(i.label) !== -1 ? 1 : p : 1,
+                  opacity: D ? i.color && e[r.indexOf(`${i.color}`)] === D ? 1 : d : w ? w.label === i.label ? 1 : d : x.length !== 0 ? x.indexOf(i.label) !== -1 ? 1 : d : 1,
                   transition: { duration: s.duration }
                 }
               },
               initial: "initial",
-              animate: d ? "whileInView" : "initial",
+              animate: p ? "whileInView" : "initial",
               exit: { opacity: 0, transition: { duration: s.duration } },
               onMouseEnter: (t) => {
                 S(i), W(t.clientY), C(t.clientX), F?.(i);
@@ -154,7 +154,7 @@ function Oi(K) {
                 S(void 0), C(void 0), W(void 0), F?.(void 0);
               },
               onClick: () => {
-                (E || g) && (mi(M, i) && Z ? (N(void 0), E?.(void 0)) : (N(i), E?.(i)));
+                (E || g) && (xi(M, i) && Z ? (N(void 0), E?.(void 0)) : (N(i), E?.(i)));
               },
               children: [
                 /* @__PURE__ */ o.jsx(
@@ -164,20 +164,20 @@ function Oi(K) {
                     variants: {
                       initial: {
                         cy: y(i.y1),
-                        fill: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(`${i.color}`)] : n.gray,
-                        stroke: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(`${i.color}`)] : n.gray,
+                        fill: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[r.indexOf(`${i.color}`)] : n.gray,
+                        stroke: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[r.indexOf(`${i.color}`)] : n.gray,
                         opacity: 0
                       },
                       whileInView: {
                         cy: y(i.y1),
-                        fill: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(`${i.color}`)] : n.gray,
-                        stroke: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(`${i.color}`)] : n.gray,
+                        fill: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[r.indexOf(`${i.color}`)] : n.gray,
+                        stroke: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[r.indexOf(`${i.color}`)] : n.gray,
                         opacity: 1,
                         transition: { duration: s.duration }
                       }
                     },
                     initial: "initial",
-                    animate: d ? "whileInView" : "initial",
+                    animate: p ? "whileInView" : "initial",
                     exit: { opacity: 0, transition: { duration: s.duration } },
                     r: c,
                     style: {
@@ -191,54 +191,54 @@ function Oi(K) {
                     variants: {
                       initial: {
                         y: y(i.y1),
-                        fill: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(`${i.color}`)] : n.gray,
+                        fill: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[r.indexOf(`${i.color}`)] : n.gray,
                         opacity: 0
                       },
                       whileInView: {
                         y: y(i.y1),
-                        fill: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(`${i.color}`)] : n.gray,
+                        fill: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[r.indexOf(`${i.color}`)] : n.gray,
                         opacity: 1,
                         transition: { duration: s.duration }
                       }
                     },
                     initial: "initial",
-                    animate: d ? "whileInView" : "initial",
+                    animate: p ? "whileInView" : "initial",
                     exit: { opacity: 0, transition: { duration: s.duration } },
                     style: {
                       textAnchor: "end",
                       ...u?.yAxis?.labels || {}
                     },
-                    className: j("text-xs", f?.yAxis?.labels),
+                    className: j("text-xs", h?.yAxis?.labels),
                     x: 5,
                     dy: "0.33em",
                     textAnchor: "end",
                     dx: 0 - c - 3,
                     children: i.label
                   }
-                ) : m.length !== 0 && m.indexOf(i.label) !== -1 ? /* @__PURE__ */ o.jsx(
+                ) : x.length !== 0 && x.indexOf(i.label) !== -1 ? /* @__PURE__ */ o.jsx(
                   O.text,
                   {
                     variants: {
                       initial: {
                         y: y(i.y1),
-                        fill: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(`${i.color}`)] : n.gray,
+                        fill: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[r.indexOf(`${i.color}`)] : n.gray,
                         opacity: 0
                       },
                       whileInView: {
                         y: y(i.y1),
-                        fill: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(`${i.color}`)] : n.gray,
+                        fill: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[r.indexOf(`${i.color}`)] : n.gray,
                         opacity: 1,
                         transition: { duration: s.duration }
                       }
                     },
                     initial: "initial",
-                    animate: d ? "whileInView" : "initial",
+                    animate: p ? "whileInView" : "initial",
                     exit: { opacity: 0, transition: { duration: s.duration } },
                     style: {
                       textAnchor: "end",
                       ...u?.yAxis?.labels || {}
                     },
-                    className: j("text-xs", f?.yAxis?.labels),
+                    className: j("text-xs", h?.yAxis?.labels),
                     x: 5,
                     dy: "0.33em",
                     dx: -3,
@@ -252,20 +252,20 @@ function Oi(K) {
                     variants: {
                       initial: {
                         cy: y(i.y2),
-                        fill: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(`${i.color}`)] : n.gray,
-                        stroke: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(`${i.color}`)] : n.gray,
+                        fill: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[r.indexOf(`${i.color}`)] : n.gray,
+                        stroke: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[r.indexOf(`${i.color}`)] : n.gray,
                         opacity: 0
                       },
                       whileInView: {
                         cy: y(i.y2),
-                        fill: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(`${i.color}`)] : n.gray,
-                        stroke: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(`${i.color}`)] : n.gray,
+                        fill: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[r.indexOf(`${i.color}`)] : n.gray,
+                        stroke: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[r.indexOf(`${i.color}`)] : n.gray,
                         opacity: 1,
                         transition: { duration: s.duration }
                       }
                     },
                     initial: "initial",
-                    animate: d ? "whileInView" : "initial",
+                    animate: p ? "whileInView" : "initial",
                     exit: { opacity: 0, transition: { duration: s.duration } },
                     r: c,
                     style: {
@@ -279,53 +279,53 @@ function Oi(K) {
                     variants: {
                       initial: {
                         y: y(i.y2),
-                        fill: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(`${i.color}`)] : n.gray,
+                        fill: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[r.indexOf(`${i.color}`)] : n.gray,
                         opacity: 0
                       },
                       whileInView: {
                         y: y(i.y2),
-                        fill: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(`${i.color}`)] : n.gray,
+                        fill: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[r.indexOf(`${i.color}`)] : n.gray,
                         opacity: 1,
                         transition: { duration: s.duration }
                       }
                     },
                     initial: "initial",
-                    animate: d ? "whileInView" : "initial",
+                    animate: p ? "whileInView" : "initial",
                     exit: { opacity: 0, transition: { duration: s.duration } },
                     style: {
                       textAnchor: "start",
                       ...u?.yAxis?.labels || {}
                     },
-                    className: j("text-xs", f?.yAxis?.labels),
+                    className: j("text-xs", h?.yAxis?.labels),
                     x: v - 5,
                     dy: "0.33em",
                     dx: c + 3,
                     children: i.label
                   }
-                ) : m.length !== 0 && m.indexOf(i.label) !== -1 ? /* @__PURE__ */ o.jsx(
+                ) : x.length !== 0 && x.indexOf(i.label) !== -1 ? /* @__PURE__ */ o.jsx(
                   O.text,
                   {
                     variants: {
                       initial: {
                         y: y(i.y2),
-                        fill: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(`${i.color}`)] : n.gray,
+                        fill: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[r.indexOf(`${i.color}`)] : n.gray,
                         opacity: 0
                       },
                       whileInView: {
                         y: y(i.y2),
-                        fill: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(`${i.color}`)] : n.gray,
+                        fill: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[r.indexOf(`${i.color}`)] : n.gray,
                         opacity: 1,
                         transition: { duration: s.duration }
                       }
                     },
                     initial: "initial",
-                    animate: d ? "whileInView" : "initial",
+                    animate: p ? "whileInView" : "initial",
                     exit: { opacity: 0, transition: { duration: s.duration } },
                     style: {
                       textAnchor: "start",
                       ...u?.yAxis?.labels || {}
                     },
-                    className: j("text-xs", f?.yAxis?.labels),
+                    className: j("text-xs", h?.yAxis?.labels),
                     x: v - 5,
                     dy: "0.33em",
                     dx: 3,
@@ -341,19 +341,19 @@ function Oi(K) {
                       initial: {
                         y1: y(i.y1),
                         y2: y(i.y1),
-                        stroke: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(`${i.color}`)] : n.gray
+                        stroke: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[r.indexOf(`${i.color}`)] : n.gray
                       },
                       whileInView: {
                         y1: y(i.y1),
                         y2: y(i.y2),
-                        stroke: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(`${i.color}`)] : n.gray,
+                        stroke: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[r.indexOf(`${i.color}`)] : n.gray,
                         transition: { duration: s.duration }
                       }
                     },
                     initial: "initial",
-                    animate: d ? "whileInView" : "initial",
+                    animate: p ? "whileInView" : "initial",
                     exit: { opacity: 0, transition: { duration: s.duration } },
-                    className: f?.dataConnectors,
+                    className: h?.dataConnectors,
                     style: {
                       fill: "none",
                       strokeWidth: 1,
@@ -370,18 +370,18 @@ function Oi(K) {
       }
     ),
     w && R && U && T ? /* @__PURE__ */ o.jsx(
-      fi,
+      hi,
       {
         data: w,
         body: R,
         xPos: U,
         yPos: T,
         backgroundStyle: u?.tooltip,
-        className: f?.tooltip
+        className: h?.tooltip
       }
     ) : null,
     g && M !== void 0 ? /* @__PURE__ */ o.jsx(
-      xi,
+      mi,
       {
         open: M !== void 0,
         onClose: () => {
@@ -391,7 +391,7 @@ function Oi(K) {
           "div",
           {
             className: "graph-modal-content m-0",
-            dangerouslySetInnerHTML: typeof g == "string" ? { __html: hi(g, M) } : void 0,
+            dangerouslySetInnerHTML: typeof g == "string" ? { __html: fi(g, M) } : void 0,
             children: typeof g == "function" ? g(M) : null
           }
         )
@@ -406,16 +406,16 @@ function Gi(K) {
     colors: k,
     sources: H,
     graphDescription: e,
-    showLabels: a = !1,
+    showLabels: r = !1,
     height: c,
-    width: x,
+    width: m,
     footNote: X,
     colorDomain: G,
     colorLegendTitle: Q,
     radius: R = 5,
     axisTitles: F = ["", ""],
     padding: L,
-    backgroundColor: m = !1,
+    backgroundColor: x = !1,
     leftMargin: D = 50,
     rightMargin: q = 50,
     topMargin: z = 20,
@@ -423,12 +423,12 @@ function Gi(K) {
     tooltip: Z,
     relativeHeight: g,
     onSeriesMouseOver: u,
-    showColorScale: f = !0,
+    showColorScale: h = !0,
     highlightedDataPoints: s = [],
-    graphID: p,
+    graphID: d,
     minValue: B,
     maxValue: _,
-    onSeriesMouseClick: d,
+    onSeriesMouseClick: p,
     graphDownload: w = !1,
     dataDownload: S = !1,
     fillContainer: M = !0,
@@ -439,49 +439,49 @@ function Gi(K) {
     ariaLabel: W,
     resetSelectionOnDoubleClick: A = !0,
     detailsOnClick: v,
-    styles: h,
+    styles: f,
     classNames: b,
     animate: P = !1,
     dimmedOpacity: y = 0.3,
     customLayers: i = []
   } = K, [V, t] = I(0), [ti, ei] = I(0), [si, ci] = I(void 0), Y = ii(null), oi = ii(null);
   return yi(() => {
-    const r = new ResizeObserver((li) => {
-      t(x || li[0].target.clientWidth || 620), ei(c || li[0].target.clientHeight || 480);
+    const a = new ResizeObserver((li) => {
+      t(m || li[0].target.clientWidth || 620), ei(c || li[0].target.clientHeight || 480);
     });
-    return Y.current && (ei(Y.current.clientHeight || 480), t(Y.current.clientWidth || 620), x || r.observe(Y.current)), () => r.disconnect();
-  }, [x, c]), /* @__PURE__ */ o.jsx(
+    return Y.current && (ei(Y.current.clientHeight || 480), t(Y.current.clientWidth || 620), m || a.observe(Y.current)), () => a.disconnect();
+  }, [m, c]), /* @__PURE__ */ o.jsx(
     "div",
     {
-      className: `${T || "light"} flex ${x ? "grow-0" : "grow"} ${M ? "w-full" : "w-fit"} `,
+      className: `${T || "light"} flex ${m ? "grow-0" : "grow"} ${M ? "w-full" : "w-fit"} `,
       dir: N === "he" || N === "ar" ? "rtl" : void 0,
       children: /* @__PURE__ */ o.jsx(
         "div",
         {
           className: j(
-            `${m ? m === !0 ? "bg-primary-gray-200 dark:bg-primary-gray-650 " : "" : "bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${N || "en"}`,
+            `${x ? x === !0 ? "bg-primary-gray-200 dark:bg-primary-gray-650 " : "" : "bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${N || "en"}`,
             M ? "w-full" : "w-fit",
             b?.graphContainer
           ),
           style: {
-            ...h?.graphContainer || {},
-            ...m && m !== !0 ? { backgroundColor: m } : {}
+            ...f?.graphContainer || {},
+            ...x && x !== !0 ? { backgroundColor: x } : {}
           },
-          id: p,
+          id: d,
           ref: oi,
           "aria-label": W || `${$ ? `The graph shows ${$}. ` : ""}This is a slope chart showing changes in data between two category or starting and ending time. Each line represents a different row in data, with lines sloping up or down to show increase or decrease over two categories or time.${e ? ` ${e}` : ""}`,
           children: /* @__PURE__ */ o.jsx(
             "div",
             {
               className: "flex grow",
-              style: { padding: m ? L || "1rem" : L || 0 },
+              style: { padding: x ? L || "1rem" : L || 0 },
               children: /* @__PURE__ */ o.jsxs("div", { className: "flex flex-col w-full gap-4 grow justify-between", children: [
                 $ || e || w || S ? /* @__PURE__ */ o.jsx(
                   wi,
                   {
                     styles: {
-                      title: h?.title,
-                      description: h?.description
+                      title: f?.title,
+                      description: f?.description
                     },
                     classNames: {
                       title: b?.title,
@@ -489,22 +489,19 @@ function Gi(K) {
                     },
                     graphTitle: $,
                     graphDescription: e,
-                    width: x,
+                    width: m,
                     graphDownload: w ? oi.current : void 0,
-                    dataDownload: S ? l.map((r) => r.data).filter((r) => r !== void 0).length > 0 ? l.map((r) => r.data).filter((r) => r !== void 0) : l.filter((r) => r !== void 0) : null
+                    dataDownload: S ? l.map((a) => a.data).filter((a) => a !== void 0).length > 0 ? l.map((a) => a.data).filter((a) => a !== void 0) : l.filter((a) => a !== void 0) : null
                   }
                 ) : null,
                 /* @__PURE__ */ o.jsx("div", { className: "grow flex flex-col justify-center gap-3 w-full", children: l.length === 0 ? /* @__PURE__ */ o.jsx(bi, {}) : /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
-                  f && l.filter((r) => r.color).length !== 0 ? /* @__PURE__ */ o.jsx(
+                  h && l.filter((a) => a.color).length !== 0 ? /* @__PURE__ */ o.jsx(
                     vi,
                     {
-                      width: x,
+                      width: m,
                       colorLegendTitle: Q,
                       colors: k || n[T].categoricalColors.colors,
-                      colorDomain: G || ri(
-                        l.filter((r) => r.color),
-                        "color"
-                      ).map((r) => r.color),
+                      colorDomain: G || ni(l, "color", !0),
                       setSelectedColor: ci,
                       showNAColor: U
                     }
@@ -515,25 +512,22 @@ function Gi(K) {
                       className: "flex flex-col grow justify-center w-full leading-0",
                       ref: Y,
                       "aria-label": "Graph area",
-                      children: (x || V) && (c || ti) ? /* @__PURE__ */ o.jsx(
+                      children: (m || V) && (c || ti) ? /* @__PURE__ */ o.jsx(
                         Oi,
                         {
                           data: l.filter(
-                            (r) => !J(r.y1) && !J(r.y2)
+                            (a) => !J(a.y1) && !J(a.y2)
                           ),
-                          width: x || V,
+                          width: m || V,
                           height: Math.max(
                             C,
-                            c || (g ? C ? (x || V) * g > C ? (x || V) * g : C : (x || V) * g : ti)
+                            c || (g ? C ? (m || V) * g > C ? (m || V) * g : C : (m || V) * g : ti)
                           ),
-                          colorDomain: l.filter((r) => r.color).length === 0 ? [] : G || ri(
-                            l.filter((r) => r.color),
-                            "color"
-                          ).map((r) => r.color),
-                          colors: l.filter((r) => r.color).length === 0 ? k ? [k] : [n.primaryColors["blue-600"]] : k || n[T].categoricalColors.colors,
+                          colorDomain: l.filter((a) => a.color).length === 0 ? [] : G || ni(l, "color", !0),
+                          colors: l.filter((a) => a.color).length === 0 ? k ? [k] : [n.primaryColors["blue-600"]] : k || n[T].categoricalColors.colors,
                           selectedColor: si,
                           axisTitles: F,
-                          showLabels: a,
+                          showLabels: r,
                           radius: R,
                           leftMargin: D,
                           rightMargin: q,
@@ -544,10 +538,10 @@ function Gi(K) {
                           highlightedDataPoints: s,
                           minValue: B,
                           maxValue: _,
-                          onSeriesMouseClick: d,
+                          onSeriesMouseClick: p,
                           resetSelectionOnDoubleClick: A,
                           detailsOnClick: v,
-                          styles: h,
+                          styles: f,
                           classNames: b,
                           animate: P === !0 ? { duration: 0.5, once: !0, amount: 0.5 } : P || { duration: 0, once: !0, amount: 0 },
                           dimmedOpacity: y,
@@ -558,16 +552,16 @@ function Gi(K) {
                   )
                 ] }) }),
                 H || X ? /* @__PURE__ */ o.jsx(
-                  di,
+                  pi,
                   {
-                    styles: { footnote: h?.footnote, source: h?.source },
+                    styles: { footnote: f?.footnote, source: f?.source },
                     classNames: {
                       footnote: b?.footnote,
                       source: b?.source
                     },
                     sources: H,
                     footNote: X,
-                    width: x
+                    width: m
                   }
                 ) : null
               ] })