@undp/data-viz 1.2.8 → 1.3.1

package/dist/MultiLineAltChart.js

@@ -0,0 +1,690 @@
+import { j as t, m as he } 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 We, g as Ie, A as Re } from "./customArea-CaxScFmW.js";
+import { A as Ye } from "./AxisTitle-BmHLMRJZ.js";
+import { A as Fe } from "./Axis-Ddg-seDi.js";
+import { X as Xe } from "./XTicksAndGridLines-Bn9u5gOM.js";
+import { R as Pe } from "./ReferenceLine-C1GpoG9d.js";
+import { Y as Ee } from "./YTicksAndGridLines-B6ah7CRf.js";
+import { H as Ge } from "./index-n_RI8T0n.js";
+import { Colors as T } from "./Colors.js";
+import { u as Be } from "./use-in-view-BAHrBy6b.js";
+import { t as ze } from "./time-BzJP5SPC.js";
+import { a as qe } from "./linear-DUdu7l2G.js";
+import { D as Ue } from "./delaunay-C1uAf38t.js";
+import { l as Je, c as Ke } from "./line-CPfhohvF.js";
+import { c as Qe, s as Ze, a as _e, m as et } from "./step-BrDul-H4.js";
+import { s as tt } from "./select-DKy99ogv.js";
+import { m as E } from "./proxy-DJxJg1kD.js";
+import { a as it } from "./init-BhZylTFx.js";
+import { p as ot } from "./pointer-CWRWOsrb.js";
+import { GraphFooter as at } from "./GraphFooter.js";
+import { GraphHeader as rt } from "./GraphHeader.js";
+import { E as nt } from "./EmptyState-DdTp-Mdn.js";
+import { ColorLegendWithMouseOver as st } from "./ColorLegendWithMouseOver.js";
+function lt(pe) {
+  const {
+    data: n,
+    width: S,
+    height: K,
+    lineColors: s,
+    dateFormat: f,
+    noOfXTicks: ye,
+    rightMargin: _,
+    topMargin: de,
+    bottomMargin: B,
+    suffix: D,
+    prefix: h,
+    leftMargin: O,
+    tooltip: ee,
+    onSeriesMouseOver: W,
+    refValues: Q,
+    highlightAreaSettings: k,
+    minValue: z,
+    maxValue: te,
+    highlightedLines: L,
+    animate: a,
+    rtl: ie,
+    strokeWidth: $,
+    showDots: q,
+    annotations: we,
+    customHighlightAreaSettings: ve,
+    yAxisTitle: oe,
+    noOfYTicks: be,
+    minDate: ae,
+    maxDate: re,
+    curveType: U,
+    styles: v,
+    colorDomain: b,
+    selectedColor: I,
+    classNames: p,
+    showLabels: R,
+    dimmedOpacity: j,
+    precision: M,
+    naLabel: Ce,
+    customLayers: ne
+  } = pe, se = ge(null), y = Be(se, {
+    once: a.once,
+    amount: a.amount
+  }), [A, Oe] = G(!1);
+  Me(() => {
+    if (y && !A) {
+      const e = setTimeout(
+        () => {
+          Oe(!0);
+        },
+        (a.duration + 0.5) * 1e3
+      );
+      return () => clearTimeout(e);
+    }
+  }, [y, A, a.duration]);
+  const je = U === "linear" ? Ke : U === "step" ? Qe : U === "stepAfter" ? Ze : U === "stepBefore" ? _e : et, l = $e(
+    n.map((e) => ({
+      ...e,
+      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(
+    $e(
+      n.map((e) => ({
+        ...e,
+        date: u(`${e.date}`, f, /* @__PURE__ */ new Date())
+      })),
+      "date"
+    ),
+    (e) => e.date
+  ).map((e) => e.date), [g, d] = G(void 0), [N, Y] = G(void 0), [le, F] = G(void 0), C = {
+    top: de,
+    bottom: B,
+    left: oe ? O + 30 : O,
+    right: _
+  }, X = ge(null), ce = Ae.map(
+    (e) => $e(
+      l.filter((o) => o.label == e),
+      "date"
+    )
+  ), me = k.map((e) => ({
+    ...e,
+    coordinates: [
+      e.coordinates[0] === null ? null : u(`${e.coordinates[0]}`, f, /* @__PURE__ */ new Date()),
+      e.coordinates[1] === null ? null : u(`${e.coordinates[1]}`, f, /* @__PURE__ */ new Date())
+    ]
+  })), fe = ve.map((e) => ({
+    ...e,
+    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))
+  ) > 0 ? 0 : Math.min(
+    ...l.map((e) => e.y).filter((e) => !x(e))
+  ) : 0 : z, J = Math.max(
+    ...l.map((e) => e.y).filter((e) => !x(e))
+  ) ? Math.max(
+    ...l.map((e) => e.y).filter((e) => !x(e))
+  ) : 0, r = ze().domain([P, xe]).range([0, w]), c = qe().domain([
+    x(z) ? i : z,
+    x(te) ? J > 0 ? J : 0 : te
+  ]).range([V, 0]).nice(), ke = Ue.from(
+    l.filter((e) => !x(e.date) && !x(e.y)),
+    (e) => r(e.date),
+    (e) => c(e.y)
+  ).voronoi([0, 0, w < 0 ? 0 : w, V < 0 ? 0 : V]), De = Je().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[it(
+        l.map((Le) => Le.date),
+        r.invert(ot(m)[0]),
+        1
+      )];
+      d(H || l[l.length - 1]), F(m.clientY), Y(m.clientX), W?.(H || l[l.length - 1]);
+    }, o = () => {
+      d(void 0), Y(void 0), F(void 0);
+    };
+    tt(X.current).on("mousemove", e).on("mouseout", o), W?.(void 0);
+  }, [r, l, W]), /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    /* @__PURE__ */ t.jsx(
+      E.svg,
+      {
+        width: `${S}px`,
+        height: `${K}px`,
+        viewBox: `0 0 ${S} ${K}`,
+        direction: "ltr",
+        ref: se,
+        children: /* @__PURE__ */ t.jsxs("g", { transform: `translate(${C.left},${C.top})`, children: [
+          /* @__PURE__ */ t.jsx(
+            Ge,
+            {
+              areaSettings: me,
+              width: w,
+              height: V,
+              scale: r,
+              animate: a,
+              isInView: y
+            }
+          ),
+          /* @__PURE__ */ t.jsx(
+            We,
+            {
+              areaSettings: fe,
+              scaleX: r,
+              scaleY: c,
+              animate: a,
+              isInView: y
+            }
+          ),
+          /* @__PURE__ */ t.jsxs("g", { children: [
+            /* @__PURE__ */ t.jsx(
+              Ee,
+              {
+                values: Ne.filter((e) => e !== 0),
+                y: Ne.filter((e) => e !== 0).map((e) => c(e)),
+                x1: 0 - O,
+                x2: w + C.right,
+                styles: {
+                  gridLines: v?.yAxis?.gridLines,
+                  labels: v?.yAxis?.labels
+                },
+                classNames: {
+                  gridLines: p?.yAxis?.gridLines,
+                  labels: p?.yAxis?.labels
+                },
+                suffix: D,
+                prefix: h,
+                labelType: "secondary",
+                showGridLines: !0,
+                labelPos: "vertical",
+                precision: M
+              }
+            ),
+            /* @__PURE__ */ t.jsx(
+              Fe,
+              {
+                y1: c(i < 0 ? 0 : i),
+                y2: c(i < 0 ? 0 : i),
+                x1: 0 - O,
+                x2: w + C.right,
+                label: Se(
+                  i < 0 ? 0 : i,
+                  "NA",
+                  M,
+                  h,
+                  D
+                ),
+                labelPos: {
+                  x: 0 - O,
+                  y: c(i < 0 ? 0 : i),
+                  dx: 0,
+                  dy: J < 0 ? "1em" : -5
+                },
+                classNames: {
+                  axis: p?.xAxis?.axis,
+                  label: p?.yAxis?.labels
+                },
+                styles: {
+                  axis: v?.xAxis?.axis,
+                  label: v?.yAxis?.labels
+                }
+              }
+            ),
+            /* @__PURE__ */ t.jsx(
+              Ye,
+              {
+                x: 0 - O - 15,
+                y: V / 2,
+                style: v?.yAxis?.title,
+                className: p?.yAxis?.title,
+                text: oe,
+                rotate90: !0
+              }
+            )
+          ] }),
+          /* @__PURE__ */ t.jsx("g", { children: /* @__PURE__ */ t.jsx(
+            Xe,
+            {
+              values: Te.map((e) => Ve(e, f)),
+              x: Te.map((e) => r(e)),
+              y1: 0,
+              y2: V,
+              styles: {
+                gridLines: v?.xAxis?.gridLines,
+                labels: v?.xAxis?.labels
+              },
+              classNames: {
+                gridLines: he("opacity-0", p?.xAxis?.gridLines),
+                labels: he(
+                  "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,
+              labelType: "primary",
+              showGridLines: !0,
+              precision: M
+            }
+          ) }),
+          ne.filter((e) => e.position === "before").map((e) => e.layer),
+          /* @__PURE__ */ t.jsxs(E.g, { children: [
+            ce.map((e) => /* @__PURE__ */ t.jsxs(
+              E.g,
+              {
+                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
+                  },
+                  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,
+                    transition: { duration: a.duration }
+                  }
+                },
+                initial: "initial",
+                animate: y ? "whileInView" : "initial",
+                children: [
+                  /* @__PURE__ */ t.jsx(
+                    E.path,
+                    {
+                      d: De(
+                        e.filter((o) => !x(o.y))
+                      ) || "",
+                      style: {
+                        fill: "none",
+                        strokeWidth: g ? e[0].label === g.label ? $ + Math.max(2, 0.5 * $) : $ : L.length !== 0 && L.indexOf(e[0].label) !== -1 ? $ + Math.max(2, 0.5 * $) : $
+                      },
+                      exit: { opacity: 0, transition: { duration: a.duration } },
+                      variants: {
+                        initial: {
+                          pathLength: 0,
+                          d: De(
+                            e.filter((o) => !x(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
+                        },
+                        whileInView: {
+                          pathLength: 1,
+                          d: De(
+                            e.filter((o) => !x(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,
+                          transition: { duration: a.duration }
+                        }
+                      },
+                      initial: "initial",
+                      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.circle,
+                    {
+                      r: w / e.length < 5 ? 0 : w / 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,
+                          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,
+                          transition: {
+                            duration: A ? a.duration : 0.5,
+                            delay: A ? 0 : a.duration
+                          },
+                          cx: r(o.date),
+                          cy: c(o.y)
+                        }
+                      },
+                      initial: "initial",
+                      animate: y ? "whileInView" : "initial"
+                    }
+                  ) : null }) }, m)),
+                  (L.indexOf(e[0].label) !== -1 || g?.label === e[0].label) && R ? /* @__PURE__ */ t.jsx(
+                    E.text,
+                    {
+                      style: {
+                        fill: n.filter((o) => o.color).length === 0 ? s[0] : e[0].color ? s[b.indexOf(e[0].color)] : T.gray
+                      },
+                      className: "text-sm font-bold",
+                      dx: 5,
+                      dy: 4,
+                      exit: { opacity: 0, transition: { duration: a.duration } },
+                      variants: {
+                        initial: {
+                          opacity: 0,
+                          x: r(e[e.length - 1].date),
+                          y: c(e[e.length - 1].y)
+                        },
+                        whileInView: {
+                          opacity: 1,
+                          x: r(e[e.length - 1].date),
+                          y: c(e[e.length - 1].y),
+                          transition: {
+                            duration: A ? a.duration : 0.5,
+                            delay: A ? 0 : a.duration
+                          }
+                        }
+                      },
+                      initial: "initial",
+                      animate: y ? "whileInView" : "initial",
+                      children: e[0].label
+                    }
+                  ) : null
+                ]
+              },
+              e[0].label
+            )),
+            g ? /* @__PURE__ */ t.jsx(
+              "text",
+              {
+                y: c(g.y) - 8,
+                x: r(g.date),
+                className: he("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,
+                  textAnchor: "middle",
+                  ...v?.graphObjectValues || {}
+                },
+                children: Se(g.y, Ce, M, h, D)
+              }
+            ) : null
+          ] }),
+          l.filter((e) => !x(e.y)).map((e, o) => /* @__PURE__ */ t.jsx("g", { children: /* @__PURE__ */ t.jsx(
+            "path",
+            {
+              d: ke.renderCell(
+                l.findIndex((m) => m.label === e.label && m.date === e.date)
+              ),
+              opacity: 0,
+              onMouseEnter: (m) => {
+                d(e), F(m.clientY), Y(m.clientX), W?.(e);
+              },
+              onMouseMove: (m) => {
+                d(e), F(m.clientY), Y(m.clientX);
+              },
+              onMouseLeave: () => {
+                d(void 0), Y(void 0), F(void 0), W?.(void 0);
+              }
+            }
+          ) }, o)),
+          Q ? /* @__PURE__ */ t.jsx(t.Fragment, { children: Q.map((e, o) => /* @__PURE__ */ t.jsx(
+            Pe,
+            {
+              text: e.text,
+              color: e.color,
+              y: c(e.value),
+              x1: 0 - O,
+              x2: w + C.right,
+              classNames: e.classNames,
+              styles: e.styles,
+              animate: a,
+              isInView: y
+            },
+            o
+          )) }) : null,
+          /* @__PURE__ */ t.jsx("g", { children: we.map((e, o) => {
+            const m = Ie(
+              {
+                x: e.xCoordinate ? r(u(`${e.xCoordinate}`, f, /* @__PURE__ */ new Date())) + (e.xOffset || 0) : 0 + (e.xOffset || 0),
+                y: e.yCoordinate ? c(e.yCoordinate) + (e.yOffset || 0) - 8 : 0 + (e.yOffset || 0) - 8
+              },
+              {
+                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.showConnector ? {
+              y1: m.y,
+              x1: m.x,
+              y2: e.yCoordinate ? c(e.yCoordinate) + (e.yOffset || 0) : 0 + (e.yOffset || 0),
+              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,
+              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)),
+              maxWidth: e.maxWidth,
+              fontWeight: e.fontWeight,
+              align: e.align
+            };
+            return /* @__PURE__ */ t.jsx(
+              Re,
+              {
+                color: e.color,
+                connectorsSettings: H,
+                labelSettings: Le,
+                text: e.text,
+                classNames: e.classNames,
+                styles: e.styles,
+                animate: a,
+                isInView: y
+              },
+              o
+            );
+          }) }),
+          ne.filter((e) => e.position === "after").map((e) => e.layer)
+        ] })
+      }
+    ),
+    g && ee && N && le ? /* @__PURE__ */ t.jsx(
+      He,
+      {
+        data: g,
+        body: ee,
+        xPos: N,
+        yPos: le,
+        backgroundStyle: v?.tooltip,
+        className: p?.tooltip
+      }
+    ) : null
+  ] });
+}
+function Yt(pe) {
+  const {
+    data: n,
+    graphTitle: S,
+    showNAColor: K = !0,
+    colors: s,
+    colorDomain: f,
+    suffix: ye = "",
+    sources: _,
+    prefix: de = "",
+    graphDescription: B,
+    height: D,
+    width: h,
+    footNote: O,
+    noOfXTicks: ee = 10,
+    dateFormat: W = "yyyy",
+    padding: Q,
+    backgroundColor: k = !1,
+    leftMargin: z = 30,
+    rightMargin: te = 50,
+    topMargin: L = 20,
+    bottomMargin: a = 25,
+    showColorScale: ie = !0,
+    tooltip: $,
+    relativeHeight: q,
+    onSeriesMouseOver: we,
+    showLabels: ve = !0,
+    refValues: oe = [],
+    highlightAreaSettings: be = [],
+    graphID: ae,
+    minValue: re,
+    maxValue: U,
+    highlightedLines: v = [],
+    graphDownload: b = !1,
+    dataDownload: I = !1,
+    animate: p = !1,
+    language: R = "en",
+    colorLegendTitle: j,
+    minHeight: M = 0,
+    strokeWidth: Ce = 2,
+    showDots: ne = !0,
+    annotations: se = [],
+    customHighlightAreaSettings: y = [],
+    theme: A = "light",
+    ariaLabel: Oe,
+    yAxisTitle: je,
+    noOfYTicks: l = 5,
+    minDate: Ae,
+    maxDate: Z,
+    curveType: g = "curve",
+    styles: d,
+    classNames: N,
+    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);
+  return Me(() => {
+    const i = new ResizeObserver((J) => {
+      ce(h || 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(
+    "div",
+    {
+      className: `${A || "light"} flex  ${h ? "w-fit grow-0" : "w-full grow"}`,
+      dir: R === "he" || R === "ar" ? "rtl" : void 0,
+      children: /* @__PURE__ */ t.jsx(
+        "div",
+        {
+          className: he(
+            `${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
+          ),
+          style: {
+            ...d?.graphContainer || {},
+            ...k && k !== !0 ? { backgroundColor: k } : {}
+          },
+          id: ae,
+          ref: xe,
+          "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",
+            {
+              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(
+                  rt,
+                  {
+                    styles: {
+                      title: d?.title,
+                      description: d?.description
+                    },
+                    classNames: {
+                      title: N?.title,
+                      description: N?.description
+                    },
+                    graphTitle: S,
+                    graphDescription: B,
+                    width: h,
+                    graphDownload: b ? xe.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,
+                /* @__PURE__ */ t.jsx("div", { className: "grow flex flex-col justify-center gap-3 w-full", children: n.length === 0 ? /* @__PURE__ */ t.jsx(nt, {}) : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+                  ie && n.filter((i) => i.color).length !== 0 ? /* @__PURE__ */ t.jsx(
+                    st,
+                    {
+                      width: h,
+                      colorLegendTitle: j,
+                      colors: s || T[A].categoricalColors.colors,
+                      colorDomain: f || ue(
+                        n.filter((i) => i.color),
+                        "color"
+                      ).map((i) => i.color).filter((i) => i !== void 0),
+                      setSelectedColor: V,
+                      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(
+                    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,
+                      height: Math.max(
+                        M,
+                        D || (q ? M ? (h || X) * q > M ? (h || X) * q : M : (h || X) * q : me)
+                      ),
+                      dateFormat: W,
+                      noOfXTicks: ee,
+                      leftMargin: z,
+                      rightMargin: te,
+                      topMargin: L,
+                      bottomMargin: a,
+                      tooltip: $,
+                      onSeriesMouseOver: we,
+                      suffix: ye,
+                      prefix: de,
+                      highlightAreaSettings: be,
+                      refValues: oe,
+                      minValue: re,
+                      maxValue: U,
+                      highlightedLines: v,
+                      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,
+                      showDots: ne,
+                      annotations: se,
+                      customHighlightAreaSettings: y,
+                      yAxisTitle: je,
+                      noOfYTicks: l,
+                      minDate: Ae,
+                      maxDate: Z,
+                      curveType: g,
+                      styles: d,
+                      classNames: N,
+                      selectedColor: w,
+                      showLabels: ve,
+                      colorDomain: n.filter((i) => i.color).length === 0 ? [] : f || ue(
+                        n.filter((i) => i.color),
+                        "color"
+                      ).map((i) => i.color),
+                      dimmedOpacity: Y,
+                      precision: le,
+                      customLayers: F,
+                      naLabel: C
+                    }
+                  ) : null })
+                ] }) }),
+                _ || O ? /* @__PURE__ */ t.jsx(
+                  at,
+                  {
+                    styles: { footnote: d?.footnote, source: d?.source },
+                    classNames: {
+                      footnote: N?.footnote,
+                      source: N?.source
+                    },
+                    sources: _,
+                    footNote: O,
+                    width: h
+                  }
+                ) : null
+              ] })
+            }
+          )
+        }
+      )
+    }
+  );
+}
+export {
+  Yt as MultiLineAltChart
+};
+//# sourceMappingURL=MultiLineAltChart.js.map