@undp/data-viz 1.2.8 → 1.3.1

package/dist/LineChartWithConfidenceInterval.js

@@ -0,0 +1,819 @@
+import { j as i, m as B } from "./index-CHPV5EwG-BPSP-7Jg.js";
+import { useRef as mt, useState as R, useEffect as Vt } from "react";
+import { p as u, f as Rt } from "./parse-DlCRUFh_.js";
+import { s as Wt } from "./index-DxagiOHo.js";
+import { l as Ft, a as Ht } from "./simple-statistics-flVzqVtt.js";
+import { n as lt } from "./numberFormattingFunction-14YCbkN2.js";
+import { T as Yt } from "./Tooltip-DyM5snqx.js";
+import { c as v } from "./checkIfNullOrUndefined-DmfiKkNw.js";
+import { C as Pt, g as Et, A as Xt } from "./customArea-CaxScFmW.js";
+import { A as Gt } from "./AxisTitle-BmHLMRJZ.js";
+import { A as Bt } from "./Axis-Ddg-seDi.js";
+import { R as zt } from "./ReferenceLine-C1GpoG9d.js";
+import { R as Ut } from "./RegressionLine-BFwDCTUU.js";
+import { Y as qt } from "./YTicksAndGridLines-B6ah7CRf.js";
+import { H as Jt } from "./index-n_RI8T0n.js";
+import { u as Kt } from "./use-in-view-BAHrBy6b.js";
+import { t as Qt } from "./time-BzJP5SPC.js";
+import { a as Zt } from "./linear-DUdu7l2G.js";
+import { l as Ot, c as _t } from "./line-CPfhohvF.js";
+import { c as ti, s as ii, a as ei, m as ai } from "./step-BrDul-H4.js";
+import { a as ni } from "./area-BE2wo7fv.js";
+import { s as oi } from "./select-DKy99ogv.js";
+import { m as g } from "./proxy-DJxJg1kD.js";
+import { a as ri } from "./init-BhZylTFx.js";
+import { p as si } from "./pointer-CWRWOsrb.js";
+import { GraphFooter as li } from "./GraphFooter.js";
+import { GraphHeader as ci } from "./GraphHeader.js";
+import { Colors as ct } from "./Colors.js";
+import { ColorLegend as mi } from "./ColorLegend.js";
+import { E as yi } from "./EmptyState-DdTp-Mdn.js";
+function xi(yt) {
+  const {
+    data: V,
+    width: C,
+    height: W,
+    lineColor: k,
+    suffix: L,
+    prefix: f,
+    dateFormat: s,
+    highlightAreaSettings: h,
+    showValues: z,
+    noOfXTicks: xt,
+    rightMargin: ht,
+    leftMargin: j,
+    topMargin: b,
+    bottomMargin: U,
+    tooltip: q,
+    onSeriesMouseOver: F,
+    refValues: J,
+    minValue: K,
+    maxValue: Q,
+    animate: n,
+    rtl: Z,
+    strokeWidth: ut,
+    showDots: $,
+    annotations: pt,
+    customHighlightAreaSettings: gt,
+    regressionLine: H,
+    showIntervalDots: dt,
+    showIntervalValues: ft,
+    intervalLineStrokeWidth: Y,
+    intervalLineColors: A,
+    intervalAreaColor: wt,
+    intervalAreaOpacity: vt,
+    yAxisTitle: _,
+    noOfYTicks: jt,
+    minDate: P,
+    maxDate: E,
+    curveType: D,
+    styles: c,
+    classNames: m,
+    precision: N,
+    customLayers: tt
+  } = yt, it = mt(null), l = Kt(it, {
+    once: n.once,
+    amount: n.amount
+  }), [y, Mt] = R(!1);
+  Vt(() => {
+    if (l && !y) {
+      const t = setTimeout(
+        () => {
+          Mt(!0);
+        },
+        (n.duration + 0.5) * 1e3
+      );
+      return () => clearTimeout(t);
+    }
+  }, [l, y, n.duration]);
+  const S = D === "linear" ? _t : D === "step" ? ti : D === "stepAfter" ? ii : D === "stepBefore" ? ei : ai, [I, et] = R(void 0), [at, nt] = R(void 0), [X, G] = R(void 0), d = {
+    top: b,
+    bottom: U,
+    left: _ ? j + 30 : j,
+    right: ht
+  }, M = mt(null), a = Wt(
+    V.filter((t) => !v(t.y)).map((t) => ({
+      date: u(`${t.date}`, s, /* @__PURE__ */ new Date()),
+      y: t.y,
+      yMin: v(t.yMin) ? t.y : t.yMin,
+      yMax: v(t.yMax) ? t.y : t.yMax,
+      data: t.data
+    })),
+    "date"
+  ), Ct = h.map((t) => ({
+    ...t,
+    coordinates: [
+      t.coordinates[0] === null ? null : u(`${t.coordinates[0]}`, s, /* @__PURE__ */ new Date()),
+      t.coordinates[1] === null ? null : u(`${t.coordinates[1]}`, s, /* @__PURE__ */ new Date())
+    ]
+  })), bt = gt.map((t) => ({
+    ...t,
+    coordinates: t.coordinates.map(
+      (p, O) => O % 2 === 0 ? u(`${p}`, s, /* @__PURE__ */ new Date()) : p
+    )
+  })), r = C - d.left - d.right, w = W - d.top - d.bottom, ot = P ? u(`${P}`, s, /* @__PURE__ */ new Date()) : a[0].date, rt = E ? u(`${E}`, s, /* @__PURE__ */ new Date()) : a[a.length - 1].date, x = v(K) ? Math.min(...a.map((t) => Math.min(t.y, t.yMax, t.yMin))) ? Math.min(...a.map((t) => Math.min(t.y, t.yMax, t.yMin))) > 0 ? 0 : Math.min(...a.map((t) => Math.min(t.y, t.yMax, t.yMin))) : 0 : K, T = Math.max(...a.map((t) => Math.max(t.y, t.yMax, t.yMin))) ? Math.max(...a.map((t) => Math.max(t.y, t.yMax, t.yMin))) : 0, e = Qt().domain([ot, rt]).range([0, r]), o = Zt().domain([
+    x,
+    v(Q) ? T > 0 ? T : 0 : Q
+  ]).range([w, 0]).nice(), Lt = Ot().x((t) => e(t.date)).y((t) => o(t.y)).curve(S), Dt = Ot().x((t) => e(t.date)).y((t) => o(t.yMin)).curve(S), Nt = Ot().x((t) => e(t.date)).y((t) => o(t.yMax)).curve(S), It = ni().x((t) => e(t.date)).y0((t) => o(t.yMin)).y1((t) => o(t.yMax)).curve(S), kt = o.ticks(jt), St = e.ticks(xt);
+  Vt(() => {
+    const t = (O) => {
+      const st = a[ri(
+        a.map((At) => At.date),
+        e.invert(si(O)[0]),
+        1
+      )];
+      et(st || a[a.length - 1]), F?.(st || a[a.length - 1]), G(O.clientY), nt(O.clientX);
+    }, p = () => {
+      et(void 0), nt(void 0), G(void 0), F?.(void 0);
+    };
+    oi(M.current).on("mousemove", t).on("mouseout", p);
+  }, [e, a, F]);
+  const Tt = Ft(
+    a.filter((t) => !v(t.date) && !v(t.y)).map((t) => [e(t.date), o(t.y)])
+  ), $t = Ht(Tt);
+  return /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
+    /* @__PURE__ */ i.jsx(
+      g.svg,
+      {
+        width: `${C}px`,
+        height: `${W}px`,
+        viewBox: `0 0 ${C} ${W}`,
+        direction: "ltr",
+        ref: it,
+        children: /* @__PURE__ */ i.jsxs("g", { transform: `translate(${d.left},${d.top})`, children: [
+          /* @__PURE__ */ i.jsx(
+            Jt,
+            {
+              areaSettings: Ct,
+              width: r,
+              height: w,
+              scale: e,
+              animate: n,
+              isInView: l
+            }
+          ),
+          /* @__PURE__ */ i.jsx(
+            Pt,
+            {
+              areaSettings: bt,
+              scaleX: e,
+              scaleY: o,
+              animate: n,
+              isInView: l
+            }
+          ),
+          /* @__PURE__ */ i.jsxs("g", { children: [
+            /* @__PURE__ */ i.jsx(
+              qt,
+              {
+                values: kt.filter((t) => t !== 0),
+                y: kt.filter((t) => t !== 0).map((t) => o(t)),
+                x1: 0 - j,
+                x2: r + d.right,
+                styles: {
+                  gridLines: c?.yAxis?.gridLines,
+                  labels: c?.yAxis?.labels
+                },
+                classNames: {
+                  gridLines: m?.yAxis?.gridLines,
+                  labels: m?.yAxis?.labels
+                },
+                suffix: L,
+                prefix: f,
+                labelType: "secondary",
+                showGridLines: !0,
+                labelPos: "vertical",
+                precision: N
+              }
+            ),
+            /* @__PURE__ */ i.jsx(
+              Bt,
+              {
+                y1: o(x < 0 ? 0 : x),
+                y2: o(x < 0 ? 0 : x),
+                x1: 0 - j,
+                x2: r + d.right,
+                label: lt(
+                  x < 0 ? 0 : x,
+                  "NA",
+                  N,
+                  f,
+                  L
+                ),
+                labelPos: {
+                  x: 0 - j,
+                  y: o(x < 0 ? 0 : x),
+                  dx: 0,
+                  dy: T < 0 ? "1em" : -5
+                },
+                classNames: {
+                  axis: m?.xAxis?.axis,
+                  label: m?.yAxis?.labels
+                },
+                styles: {
+                  axis: c?.xAxis?.axis,
+                  label: c?.yAxis?.labels
+                }
+              }
+            ),
+            /* @__PURE__ */ i.jsx(
+              Gt,
+              {
+                x: 0 - j + 15,
+                y: w / 2,
+                style: c?.yAxis?.title,
+                className: m?.yAxis?.title,
+                text: _,
+                rotate90: !0
+              }
+            )
+          ] }),
+          /* @__PURE__ */ i.jsx("g", { children: St.map((t, p) => /* @__PURE__ */ i.jsx("g", { children: /* @__PURE__ */ i.jsx(
+            "text",
+            {
+              y: w,
+              x: e(t),
+              style: { textAnchor: "middle" },
+              className: "fill-primary-gray-700 dark:fill-primary-gray-300 xs:max-[360px]:hidden text-[9px] md:text-[10px] lg:text-xs",
+              dy: 15,
+              children: Rt(t, s)
+            }
+          ) }, p)) }),
+          tt.filter((t) => t.position === "before").map((t) => t.layer),
+          /* @__PURE__ */ i.jsx(
+            g.path,
+            {
+              style: {
+                fill: wt
+              },
+              exit: { opacity: 0, transition: { duration: n.duration } },
+              variants: {
+                initial: { opacity: 0, d: It(a) || "" },
+                whileInView: {
+                  opacity: vt,
+                  d: It(a) || "",
+                  transition: { duration: n.duration }
+                }
+              },
+              initial: "initial",
+              animate: l ? "whileInView" : "initial"
+            }
+          ),
+          Y ? /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
+            /* @__PURE__ */ i.jsx(
+              g.path,
+              {
+                style: {
+                  stroke: A[0],
+                  fill: "none",
+                  strokeWidth: Y
+                },
+                exit: { opacity: 0, transition: { duration: n.duration } },
+                variants: {
+                  initial: {
+                    pathLength: 0,
+                    d: Dt(a) || "",
+                    opacity: 1
+                  },
+                  whileInView: {
+                    pathLength: 1,
+                    d: Dt(a) || "",
+                    opacity: 1,
+                    transition: { duration: n.duration }
+                  }
+                },
+                initial: "initial",
+                animate: l ? "whileInView" : "initial"
+              }
+            ),
+            /* @__PURE__ */ i.jsx(
+              g.path,
+              {
+                style: {
+                  stroke: A[1],
+                  fill: "none",
+                  strokeWidth: Y
+                },
+                exit: { opacity: 0, transition: { duration: n.duration } },
+                variants: {
+                  initial: {
+                    pathLength: 0,
+                    d: Nt(a) || "",
+                    opacity: 1
+                  },
+                  whileInView: {
+                    pathLength: 1,
+                    d: Nt(a) || "",
+                    opacity: 1,
+                    transition: { duration: n.duration }
+                  }
+                },
+                initial: "initial",
+                animate: l ? "whileInView" : "initial"
+              }
+            )
+          ] }) : null,
+          /* @__PURE__ */ i.jsx(
+            g.path,
+            {
+              style: {
+                stroke: k,
+                fill: "none",
+                strokeWidth: ut
+              },
+              exit: { opacity: 0, transition: { duration: n.duration } },
+              variants: {
+                initial: {
+                  pathLength: 0,
+                  d: Lt(a) || "",
+                  opacity: 1
+                },
+                whileInView: {
+                  pathLength: 1,
+                  d: Lt(a) || "",
+                  opacity: 1,
+                  transition: { duration: n.duration }
+                }
+              },
+              initial: "initial",
+              animate: l ? "whileInView" : "initial"
+            }
+          ),
+          I ? /* @__PURE__ */ i.jsx(
+            "line",
+            {
+              y1: 0,
+              y2: w,
+              x1: e(I.date),
+              x2: e(I.date),
+              className: B(
+                "undp-tick-line stroke-primary-gray-700 dark:stroke-primary-gray-100",
+                m?.mouseOverLine
+              ),
+              style: c?.mouseOverLine
+            }
+          ) : null,
+          /* @__PURE__ */ i.jsx("g", { children: a.map((t, p) => /* @__PURE__ */ i.jsx(g.g, { children: v(t.y) ? null : /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
+            $ ? /* @__PURE__ */ i.jsx(
+              g.circle,
+              {
+                r: r / a.length < 5 ? 0 : r / a.length < 20 ? 2 : 4,
+                style: { fill: k },
+                exit: { opacity: 0, transition: { duration: n.duration } },
+                variants: {
+                  initial: { opacity: 0, cx: e(t.date), cy: o(t.y) },
+                  whileInView: {
+                    opacity: 1,
+                    transition: {
+                      duration: y ? n.duration : 0.5,
+                      delay: y ? 0 : n.duration
+                    },
+                    cx: e(t.date),
+                    cy: o(t.y)
+                  }
+                },
+                initial: "initial",
+                animate: l ? "whileInView" : "initial"
+              }
+            ) : null,
+            dt ? /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
+              /* @__PURE__ */ i.jsx(
+                g.circle,
+                {
+                  r: r / a.length < 5 ? 0 : r / a.length < 20 ? 2 : 4,
+                  style: { fill: A[0] },
+                  exit: { opacity: 0, transition: { duration: n.duration } },
+                  variants: {
+                    initial: { opacity: 0, cx: e(t.date), cy: o(t.yMin) },
+                    whileInView: {
+                      opacity: 1,
+                      transition: {
+                        duration: y ? n.duration : 0.5,
+                        delay: y ? 0 : n.duration
+                      },
+                      cx: e(t.date),
+                      cy: o(t.yMin)
+                    }
+                  },
+                  initial: "initial",
+                  animate: l ? "whileInView" : "initial"
+                }
+              ),
+              /* @__PURE__ */ i.jsx(
+                g.circle,
+                {
+                  r: r / a.length < 5 ? 0 : r / a.length < 20 ? 2 : 4,
+                  style: { fill: A[1] },
+                  exit: { opacity: 0, transition: { duration: n.duration } },
+                  variants: {
+                    initial: { opacity: 0, cx: e(t.date), cy: o(t.yMax) },
+                    whileInView: {
+                      opacity: 1,
+                      transition: {
+                        duration: y ? n.duration : 0.5,
+                        delay: y ? 0 : n.duration
+                      },
+                      cx: e(t.date),
+                      cy: o(t.yMax)
+                    }
+                  },
+                  initial: "initial",
+                  animate: l ? "whileInView" : "initial"
+                }
+              )
+            ] }) : null,
+            z ? /* @__PURE__ */ i.jsx(
+              g.text,
+              {
+                dy: -8,
+                style: {
+                  fill: k,
+                  textAnchor: "middle",
+                  ...c?.graphObjectValues || {}
+                },
+                className: B(
+                  "graph-value text-xs font-bold",
+                  m?.graphObjectValues
+                ),
+                exit: { opacity: 0, transition: { duration: n.duration } },
+                variants: {
+                  initial: { opacity: 0, x: e(t.date), y: o(t.y) },
+                  whileInView: {
+                    opacity: 1,
+                    x: e(t.date),
+                    y: o(t.y),
+                    transition: {
+                      duration: y ? n.duration : 0.5,
+                      delay: y ? 0 : n.duration
+                    }
+                  }
+                },
+                initial: "initial",
+                animate: l ? "whileInView" : "initial",
+                children: lt(t.y, "NA", N, f, L)
+              }
+            ) : null,
+            ft ? /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
+              /* @__PURE__ */ i.jsx(
+                g.text,
+                {
+                  dy: "1em",
+                  style: {
+                    fill: A[0],
+                    textAnchor: "middle",
+                    ...c?.graphObjectValues || {}
+                  },
+                  className: B("text-xs font-bold", m?.graphObjectValues),
+                  exit: { opacity: 0, transition: { duration: n.duration } },
+                  variants: {
+                    initial: { opacity: 0, x: e(t.date), y: o(t.yMin) },
+                    whileInView: {
+                      opacity: 1,
+                      x: e(t.date),
+                      y: o(t.yMin),
+                      transition: {
+                        duration: y ? n.duration : 0.5,
+                        delay: y ? 0 : n.duration
+                      }
+                    }
+                  },
+                  initial: "initial",
+                  animate: l ? "whileInView" : "initial",
+                  children: lt(t.yMin, "NA", N, f, L)
+                }
+              ),
+              /* @__PURE__ */ i.jsx(
+                g.text,
+                {
+                  dy: -8,
+                  style: {
+                    fill: A[1],
+                    textAnchor: "middle",
+                    ...c?.graphObjectValues || {}
+                  },
+                  className: B("text-xs font-bold", m?.graphObjectValues),
+                  exit: { opacity: 0, transition: { duration: n.duration } },
+                  variants: {
+                    initial: { opacity: 0, x: e(t.date), y: o(t.yMax) },
+                    whileInView: {
+                      opacity: 1,
+                      x: e(t.date),
+                      y: o(t.yMax),
+                      transition: {
+                        duration: y ? n.duration : 0.5,
+                        delay: y ? 0 : n.duration
+                      }
+                    }
+                  },
+                  initial: "initial",
+                  animate: l ? "whileInView" : "initial",
+                  children: lt(t.yMax, "NA", N, f, L)
+                }
+              )
+            ] }) : null
+          ] }) }, p)) }),
+          J ? /* @__PURE__ */ i.jsx(i.Fragment, { children: J.map((t, p) => /* @__PURE__ */ i.jsx(
+            zt,
+            {
+              text: t.text,
+              color: t.color,
+              y: o(t.value),
+              x1: 0 - j,
+              x2: r + d.right,
+              classNames: t.classNames,
+              styles: t.styles,
+              animate: n,
+              isInView: l
+            },
+            p
+          )) }) : null,
+          /* @__PURE__ */ i.jsx("g", { children: pt.map((t, p) => {
+            const O = Et(
+              {
+                x: t.xCoordinate ? e(u(`${t.xCoordinate}`, s, /* @__PURE__ */ new Date())) + (t.xOffset || 0) : 0 + (t.xOffset || 0),
+                y: t.yCoordinate ? o(t.yCoordinate) + (t.yOffset || 0) - 8 : 0 + (t.yOffset || 0) - 8
+              },
+              {
+                x: t.xCoordinate ? e(u(`${t.xCoordinate}`, s, /* @__PURE__ */ new Date())) : 0,
+                y: t.yCoordinate ? o(t.yCoordinate) : 0
+              },
+              v(t.connectorRadius) ? 3.5 : t.connectorRadius
+            ), st = t.showConnector ? {
+              y1: O.y,
+              x1: O.x,
+              y2: t.yCoordinate ? o(t.yCoordinate) + (t.yOffset || 0) : 0 + (t.yOffset || 0),
+              x2: t.xCoordinate ? e(u(`${t.xCoordinate}`, s, /* @__PURE__ */ new Date())) + (t.xOffset || 0) : 0 + (t.xOffset || 0),
+              cy: t.yCoordinate ? o(t.yCoordinate) : 0,
+              cx: t.xCoordinate ? e(u(`${t.xCoordinate}`, s, /* @__PURE__ */ new Date())) : 0,
+              circleRadius: v(t.connectorRadius) ? 3.5 : t.connectorRadius,
+              strokeWidth: t.showConnector === !0 ? 2 : Math.min(t.showConnector || 0, 1)
+            } : void 0, At = {
+              y: t.yCoordinate ? o(t.yCoordinate) + (t.yOffset || 0) - 8 : 0 + (t.yOffset || 0) - 8,
+              x: Z ? 0 : t.xCoordinate ? e(u(`${t.xCoordinate}`, s, /* @__PURE__ */ new Date())) + (t.xOffset || 0) : 0 + (t.xOffset || 0),
+              width: Z ? t.xCoordinate ? e(u(`${t.xCoordinate}`, s, /* @__PURE__ */ new Date())) + (t.xOffset || 0) : 0 + (t.xOffset || 0) : r - (t.xCoordinate ? e(u(`${t.xCoordinate}`, s, /* @__PURE__ */ new Date())) + (t.xOffset || 0) : 0 + (t.xOffset || 0)),
+              maxWidth: t.maxWidth,
+              fontWeight: t.fontWeight,
+              align: t.align
+            };
+            return /* @__PURE__ */ i.jsx(
+              Xt,
+              {
+                color: t.color,
+                connectorsSettings: st,
+                labelSettings: At,
+                text: t.text,
+                classNames: t.classNames,
+                styles: t.styles,
+                animate: n,
+                isInView: l
+              },
+              p
+            );
+          }) }),
+          /* @__PURE__ */ i.jsx("g", { children: H ? /* @__PURE__ */ i.jsx(
+            Ut,
+            {
+              x1: 0,
+              x2: r,
+              y1: $t(0),
+              y2: $t(r),
+              graphHeight: w,
+              graphWidth: r,
+              className: m?.regLine,
+              style: c?.regLine,
+              color: typeof H == "string" ? H : void 0,
+              animate: n,
+              isInView: l
+            }
+          ) : null }),
+          tt.filter((t) => t.position === "after").map((t) => t.layer),
+          /* @__PURE__ */ i.jsx(
+            "rect",
+            {
+              ref: M,
+              style: {
+                fill: "none",
+                pointerEvents: "all"
+              },
+              width: r,
+              height: w
+            }
+          )
+        ] })
+      }
+    ),
+    I && q && at && X ? /* @__PURE__ */ i.jsx(
+      Yt,
+      {
+        data: I,
+        body: q,
+        xPos: at,
+        yPos: X,
+        backgroundStyle: c?.tooltip,
+        className: m?.tooltip
+      }
+    ) : null
+  ] });
+}
+function Xi(yt) {
+  const {
+    data: V,
+    graphTitle: C,
+    suffix: W = "",
+    sources: k,
+    prefix: L = "",
+    graphDescription: f,
+    height: s,
+    width: h,
+    footNote: z,
+    noOfXTicks: xt = 10,
+    dateFormat: ht = "yyyy",
+    showValues: j = !1,
+    backgroundColor: b = !1,
+    padding: U,
+    lineColor: q,
+    leftMargin: F = 30,
+    rightMargin: J = 30,
+    topMargin: K = 20,
+    bottomMargin: Q = 25,
+    tooltip: n,
+    refValues: Z = [],
+    highlightAreaSettings: ut = [],
+    relativeHeight: $,
+    onSeriesMouseOver: pt,
+    graphID: gt,
+    minValue: H,
+    maxValue: dt,
+    regressionLine: ft = !1,
+    showIntervalDots: Y = !1,
+    showIntervalValues: A = !1,
+    intervalLineStrokeWidth: wt = 0,
+    intervalLineColors: vt = [ct.light.grays["gray-500"], ct.light.grays["gray-500"]],
+    intervalAreaColor: _ = ct.primaryColors["blue-100"],
+    intervalAreaOpacity: jt = 0.4,
+    graphDownload: P = !1,
+    dataDownload: E = !1,
+    animate: D = !1,
+    language: c = "en",
+    minHeight: m = 0,
+    strokeWidth: N = 2,
+    showDots: tt = !0,
+    annotations: it = [],
+    customHighlightAreaSettings: l = [],
+    theme: y = "light",
+    ariaLabel: Mt,
+    yAxisTitle: S,
+    noOfYTicks: I = 5,
+    minDate: et,
+    maxDate: at,
+    colorLegendTitle: nt,
+    colorLegendColors: X,
+    colorLegendDomain: G,
+    curveType: d = "curve",
+    styles: M,
+    classNames: a,
+    precision: Ct = 2,
+    customLayers: bt = []
+  } = yt, [r, w] = R(0), [ot, rt] = R(0), x = mt(null), T = mt(null);
+  return Vt(() => {
+    const e = new ResizeObserver((o) => {
+      w(h || o[0].target.clientWidth || 620), rt(s || o[0].target.clientHeight || 480);
+    });
+    return x.current && (rt(x.current.clientHeight || 480), w(x.current.clientWidth || 620), h || e.observe(x.current)), () => e.disconnect();
+  }, [h, s]), /* @__PURE__ */ i.jsx(
+    "div",
+    {
+      className: `${y || "light"} flex  ${h ? "w-fit grow-0" : "w-full grow"}`,
+      dir: c === "he" || c === "ar" ? "rtl" : void 0,
+      children: /* @__PURE__ */ i.jsx(
+        "div",
+        {
+          className: B(
+            `${b ? b === !0 ? "bg-primary-gray-200 dark:bg-primary-gray-650 " : "" : "bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${c || "en"}`,
+            a?.graphContainer
+          ),
+          style: {
+            ...M?.graphContainer || {},
+            ...b && b !== !0 ? { backgroundColor: b } : {}
+          },
+          id: gt,
+          ref: T,
+          "aria-label": Mt || `${C ? `The graph shows ${C}. ` : ""}This is a line chart that highlights the difference between two datasets over time.${f ? ` ${f}` : ""}`,
+          children: /* @__PURE__ */ i.jsx(
+            "div",
+            {
+              className: "flex grow",
+              style: { padding: b ? U || "1rem" : U || 0 },
+              children: /* @__PURE__ */ i.jsxs("div", { className: "flex flex-col w-full gap-4 grow justify-between", children: [
+                C || f || P || E ? /* @__PURE__ */ i.jsx(
+                  ci,
+                  {
+                    styles: {
+                      title: M?.title,
+                      description: M?.description
+                    },
+                    classNames: {
+                      title: a?.title,
+                      description: a?.description
+                    },
+                    graphTitle: C,
+                    graphDescription: f,
+                    width: h,
+                    graphDownload: P ? T.current : void 0,
+                    dataDownload: E ? V.map((e) => e.data).filter((e) => e !== void 0).length > 0 ? V.map((e) => e.data).filter((e) => e !== void 0) : V.filter((e) => e !== void 0) : null
+                  }
+                ) : null,
+                /* @__PURE__ */ i.jsx("div", { className: "grow flex flex-col justify-center gap-3 w-full", children: V.length === 0 ? /* @__PURE__ */ i.jsx(yi, {}) : /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
+                  X && G ? /* @__PURE__ */ i.jsx(
+                    mi,
+                    {
+                      width: h,
+                      colorLegendTitle: nt,
+                      colors: X,
+                      colorDomain: G,
+                      showNAColor: !1
+                    }
+                  ) : null,
+                  /* @__PURE__ */ i.jsx(
+                    "div",
+                    {
+                      className: "flex flex-col grow justify-center leading-0",
+                      ref: x,
+                      "aria-label": "Graph area",
+                      children: (h || r) && (s || ot) ? /* @__PURE__ */ i.jsx(
+                        xi,
+                        {
+                          data: V,
+                          lineColor: q || ct.primaryColors["blue-600"],
+                          width: h || r,
+                          height: Math.max(
+                            m,
+                            s || ($ ? m ? (h || r) * $ > m ? (h || r) * $ : m : (h || r) * $ : ot)
+                          ),
+                          suffix: W,
+                          prefix: L,
+                          dateFormat: ht,
+                          showValues: j,
+                          noOfXTicks: xt,
+                          leftMargin: F,
+                          rightMargin: J,
+                          topMargin: K,
+                          bottomMargin: Q,
+                          tooltip: n,
+                          highlightAreaSettings: ut,
+                          onSeriesMouseOver: pt,
+                          refValues: Z,
+                          minValue: H,
+                          maxValue: dt,
+                          animate: D === !0 ? { duration: 0.5, once: !0, amount: 0.5 } : D || { duration: 0, once: !0, amount: 0 },
+                          rtl: c === "he" || c === "ar",
+                          strokeWidth: N,
+                          showDots: tt,
+                          annotations: it,
+                          customHighlightAreaSettings: l,
+                          regressionLine: ft,
+                          showIntervalDots: Y,
+                          showIntervalValues: A,
+                          intervalLineStrokeWidth: wt,
+                          intervalLineColors: vt,
+                          intervalAreaColor: _,
+                          intervalAreaOpacity: jt,
+                          yAxisTitle: S,
+                          noOfYTicks: I,
+                          minDate: et,
+                          maxDate: at,
+                          curveType: d,
+                          styles: M,
+                          classNames: a,
+                          precision: Ct,
+                          customLayers: bt
+                        }
+                      ) : null
+                    }
+                  )
+                ] }) }),
+                k || z ? /* @__PURE__ */ i.jsx(
+                  li,
+                  {
+                    styles: { footnote: M?.footnote, source: M?.source },
+                    classNames: {
+                      footnote: a?.footnote,
+                      source: a?.source
+                    },
+                    sources: k,
+                    footNote: z,
+                    width: h
+                  }
+                ) : null
+              ] })
+            }
+          )
+        }
+      )
+    }
+  );
+}
+export {
+  Xi as LineChartWithConfidenceInterval
+};
+//# sourceMappingURL=LineChartWithConfidenceInterval.js.map