@undp/data-viz 1.2.8 → 1.3.1

package/dist/DifferenceLineChart.js

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