@undp/data-viz 1.2.8 → 1.3.1

package/dist/SimpleLineChart.js

@@ -0,0 +1,620 @@
+import { j as t, m as Y } from "./index-CHPV5EwG-BPSP-7Jg.js";
+import { useRef as oe, useState as M, useEffect as de } from "react";
+import { p as h, f as Oe } from "./parse-DlCRUFh_.js";
+import { s as De } from "./index-DxagiOHo.js";
+import { l as Le, a as $e } from "./simple-statistics-flVzqVtt.js";
+import { n as Ae } from "./numberFormattingFunction-14YCbkN2.js";
+import { T as Ne } from "./Tooltip-DyM5snqx.js";
+import { c as k } from "./checkIfNullOrUndefined-DmfiKkNw.js";
+import { C as ke, g as Te, A as Se } from "./customArea-CaxScFmW.js";
+import { A as Me } from "./Axis-Ddg-seDi.js";
+import { A as Ve } from "./AxisTitle-BmHLMRJZ.js";
+import { X as Re } from "./XTicksAndGridLines-Bn9u5gOM.js";
+import { R as He } from "./ReferenceLine-C1GpoG9d.js";
+import { R as Ie } from "./RegressionLine-BFwDCTUU.js";
+import { Y as We } from "./YTicksAndGridLines-B6ah7CRf.js";
+import { H as Fe } from "./index-n_RI8T0n.js";
+import { u as Ye } from "./use-in-view-BAHrBy6b.js";
+import { t as Pe } from "./time-BzJP5SPC.js";
+import { a as Xe } from "./linear-DUdu7l2G.js";
+import { l as Ee, c as Ge } from "./line-CPfhohvF.js";
+import { c as Be, s as ze, a as Ue, m as qe } from "./step-BrDul-H4.js";
+import { s as Je } from "./select-DKy99ogv.js";
+import { m as F } from "./proxy-DJxJg1kD.js";
+import { a as Ke } from "./init-BhZylTFx.js";
+import { p as Qe } from "./pointer-CWRWOsrb.js";
+import { GraphFooter as Ze } from "./GraphFooter.js";
+import { GraphHeader as _e } from "./GraphHeader.js";
+import { Colors as et } from "./Colors.js";
+import { E as tt } from "./EmptyState-DdTp-Mdn.js";
+function it(re) {
+  const {
+    data: D,
+    width: A,
+    height: V,
+    lineColor: P,
+    suffix: L,
+    prefix: T,
+    dateFormat: o,
+    highlightAreaSettings: S,
+    showValues: m,
+    noOfXTicks: X,
+    rightMargin: ne,
+    leftMargin: d,
+    topMargin: le,
+    bottomMargin: E,
+    tooltip: v,
+    onSeriesMouseOver: R,
+    refValues: G,
+    minValue: B,
+    maxValue: z,
+    animate: a,
+    rtl: U,
+    strokeWidth: ce,
+    showDots: me,
+    annotations: xe,
+    customHighlightAreaSettings: fe,
+    regressionLine: H,
+    yAxisTitle: q,
+    noOfYTicks: he,
+    maxDate: I,
+    minDate: W,
+    curveType: $,
+    styles: n,
+    classNames: x,
+    precision: w,
+    customLayers: J
+  } = re, K = oe(null), g = Ye(K, {
+    once: a.once,
+    amount: a.amount
+  }), [C, ge] = M(!1);
+  de(() => {
+    if (g && !C) {
+      const e = setTimeout(
+        () => {
+          ge(!0);
+        },
+        (a.duration + 0.5) * 1e3
+      );
+      return () => clearTimeout(e);
+    }
+  }, [g, C, a.duration]);
+  const ue = $ === "linear" ? Ge : $ === "step" ? Be : $ === "stepAfter" ? ze : $ === "stepBefore" ? Ue : qe, [N, Q] = M(void 0), [Z, _] = M(void 0), [j, b] = M(void 0), p = {
+    top: le,
+    bottom: E,
+    left: q ? d + 30 : d,
+    right: ne
+  }, ee = oe(null), i = De(
+    D.map((e) => ({
+      ...e,
+      date: h(`${e.date}`, o, /* @__PURE__ */ new Date())
+    })),
+    "date"
+  ), te = S.map((e) => ({
+    ...e,
+    coordinates: [
+      e.coordinates[0] === null ? null : h(`${e.coordinates[0]}`, o, /* @__PURE__ */ new Date()),
+      e.coordinates[1] === null ? null : h(`${e.coordinates[1]}`, o, /* @__PURE__ */ new Date())
+    ]
+  })), ie = fe.map((e) => ({
+    ...e,
+    coordinates: e.coordinates.map(
+      (y, O) => O % 2 === 0 ? h(`${y}`, o, /* @__PURE__ */ new Date()) : y
+    )
+  })), l = A - p.left - p.right, f = V - p.top - p.bottom, ae = W ? h(`${W}`, o, /* @__PURE__ */ new Date()) : i[0].date, c = I ? h(`${I}`, o, /* @__PURE__ */ new Date()) : i[i.length - 1].date, u = k(B) ? Math.min(...i.map((e) => e.y).filter((e) => e != null)) !== 1 / 0 ? Math.min(...i.map((e) => e.y).filter((e) => e != null)) > 0 ? 0 : Math.min(...i.map((e) => e.y).filter((e) => e != null)) : 0 : B, pe = Math.max(...i.map((e) => e.y).filter((e) => e != null)) !== 1 / 0 ? Math.max(...i.map((e) => e.y).filter((e) => e != null)) : 0, s = Pe().domain([ae, c]).range([0, l]), r = Xe().domain([
+    u,
+    k(z) ? pe > 0 ? pe : 0 : z
+  ]).range([f, 0]).nice(), ve = Ee().x((e) => s(e.date)).y((e) => r(e.y)).curve(ue), we = r.ticks(he), je = s.ticks(X);
+  de(() => {
+    const e = (O) => {
+      const se = i[Ke(
+        i.map((ye) => ye.date),
+        s.invert(Qe(O)[0]),
+        1
+      )];
+      Q(se || i[i.length - 1]), R?.(se || i[i.length - 1]), b(O.clientY), _(O.clientX);
+    }, y = () => {
+      Q(void 0), _(void 0), b(void 0), R?.(void 0);
+    };
+    Je(ee.current).on("mousemove", e).on("mouseout", y);
+  }, [s, i, R]);
+  const Ce = Le(
+    i.filter((e) => !k(e.date) && !k(e.y)).map((e) => [s(e.date), r(e.y)])
+  ), be = $e(Ce);
+  return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    /* @__PURE__ */ t.jsx(
+      F.svg,
+      {
+        width: `${A}px`,
+        height: `${V}px`,
+        viewBox: `0 0 ${A} ${V}`,
+        direction: "ltr",
+        ref: K,
+        children: /* @__PURE__ */ t.jsxs("g", { transform: `translate(${p.left},${p.top})`, children: [
+          /* @__PURE__ */ t.jsx(
+            Fe,
+            {
+              areaSettings: te,
+              width: l,
+              height: f,
+              scale: s,
+              animate: a,
+              isInView: g
+            }
+          ),
+          /* @__PURE__ */ t.jsx(
+            ke,
+            {
+              areaSettings: ie,
+              scaleX: s,
+              scaleY: r,
+              animate: a,
+              isInView: g
+            }
+          ),
+          /* @__PURE__ */ t.jsxs("g", { children: [
+            /* @__PURE__ */ t.jsx(
+              We,
+              {
+                values: we.filter((e) => e !== 0),
+                y: we.filter((e) => e !== 0).map((e) => r(e)),
+                x1: 0 - d,
+                x2: l + p.right,
+                styles: {
+                  gridLines: n?.yAxis?.gridLines,
+                  labels: n?.yAxis?.labels
+                },
+                classNames: {
+                  gridLines: x?.yAxis?.gridLines,
+                  labels: x?.yAxis?.labels
+                },
+                suffix: L,
+                prefix: T,
+                labelType: "secondary",
+                showGridLines: !0,
+                labelPos: "vertical",
+                precision: w
+              }
+            ),
+            /* @__PURE__ */ t.jsx(
+              Me,
+              {
+                y1: r(u < 0 ? 0 : u),
+                y2: r(u < 0 ? 0 : u),
+                x1: 0 - d,
+                x2: l + p.right,
+                label: Ae(
+                  u < 0 ? 0 : u,
+                  "NA",
+                  w,
+                  T,
+                  L
+                ),
+                labelPos: {
+                  x: 0 - d,
+                  y: r(u < 0 ? 0 : u),
+                  dx: 0,
+                  dy: pe < 0 ? "1em" : -5
+                },
+                classNames: {
+                  axis: x?.xAxis?.axis,
+                  label: x?.yAxis?.labels
+                },
+                styles: {
+                  axis: n?.xAxis?.axis,
+                  label: n?.yAxis?.labels
+                }
+              }
+            ),
+            /* @__PURE__ */ t.jsx(
+              Ve,
+              {
+                x: 0 - d - 15,
+                y: f / 2,
+                style: n?.yAxis?.title,
+                className: x?.yAxis?.title,
+                text: q,
+                rotate90: !0
+              }
+            )
+          ] }),
+          /* @__PURE__ */ t.jsx(
+            Re,
+            {
+              values: je.map((e) => Oe(e, o)),
+              x: je.map((e) => s(e)),
+              y1: 0,
+              y2: f,
+              styles: {
+                gridLines: n?.xAxis?.gridLines,
+                labels: n?.xAxis?.labels
+              },
+              classNames: {
+                gridLines: Y("opacity-0", x?.xAxis?.gridLines),
+                labels: Y(
+                  "fill-primary-gray-700 dark:fill-primary-gray-300 xs:max-[360px]:hidden text-[9px] md:text-[10px] lg:text-xs",
+                  x?.xAxis?.labels
+                )
+              },
+              suffix: L,
+              prefix: T,
+              labelType: "primary",
+              showGridLines: !0,
+              precision: w
+            }
+          ),
+          J.filter((e) => e.position === "before").map((e) => e.layer),
+          /* @__PURE__ */ t.jsxs("g", { children: [
+            /* @__PURE__ */ t.jsx(
+              F.path,
+              {
+                style: {
+                  stroke: P,
+                  fill: "none",
+                  strokeWidth: ce
+                },
+                exit: { opacity: 0, transition: { duration: a.duration } },
+                variants: {
+                  initial: {
+                    pathLength: 0,
+                    d: ve(i) || "",
+                    opacity: 1
+                  },
+                  whileInView: {
+                    pathLength: 1,
+                    d: ve(i) || "",
+                    opacity: 1,
+                    transition: { duration: a.duration }
+                  }
+                },
+                initial: "initial",
+                animate: g ? "whileInView" : "initial"
+              }
+            ),
+            N ? /* @__PURE__ */ t.jsx(
+              "line",
+              {
+                y1: 0,
+                y2: f,
+                x1: s(N.date),
+                x2: s(N.date),
+                className: Y(
+                  "undp-tick-line stroke-primary-gray-700 dark:stroke-primary-gray-100",
+                  x?.mouseOverLine
+                ),
+                style: n?.mouseOverLine
+              }
+            ) : null
+          ] }),
+          /* @__PURE__ */ t.jsx("g", { children: i.map((e, y) => /* @__PURE__ */ t.jsx(F.g, { children: k(e.y) ? null : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+            me ? /* @__PURE__ */ t.jsx(
+              F.circle,
+              {
+                r: l / i.length < 5 ? 0 : l / i.length < 20 ? 2 : 4,
+                style: { fill: P },
+                exit: { opacity: 0, transition: { duration: a.duration } },
+                variants: {
+                  initial: { opacity: 0, cx: s(e.date), cy: r(e.y) },
+                  whileInView: {
+                    opacity: 1,
+                    transition: {
+                      duration: C ? a.duration : 0.5,
+                      delay: C ? 0 : a.duration
+                    },
+                    cx: s(e.date),
+                    cy: r(e.y)
+                  }
+                },
+                initial: "initial",
+                animate: g ? "whileInView" : "initial"
+              }
+            ) : null,
+            m ? /* @__PURE__ */ t.jsx(
+              F.text,
+              {
+                dy: -8,
+                style: {
+                  textAnchor: "middle",
+                  ...n?.graphObjectValues || {}
+                },
+                className: Y(
+                  "graph-value text-xs font-bold",
+                  x?.graphObjectValues
+                ),
+                exit: { opacity: 0, transition: { duration: a.duration } },
+                variants: {
+                  initial: { opacity: 0, x: s(e.date), y: r(e.y) },
+                  whileInView: {
+                    opacity: 1,
+                    x: s(e.date),
+                    y: r(e.y),
+                    transition: {
+                      duration: C ? a.duration : 0.5,
+                      delay: C ? 0 : a.duration
+                    }
+                  }
+                },
+                initial: "initial",
+                animate: g ? "whileInView" : "initial",
+                children: Ae(e.y, "NA", w, T, L)
+              }
+            ) : null
+          ] }) }, y)) }),
+          G ? /* @__PURE__ */ t.jsx(t.Fragment, { children: G.map((e, y) => /* @__PURE__ */ t.jsx(
+            He,
+            {
+              text: e.text,
+              color: e.color,
+              y: r(e.value),
+              x1: 0 - d,
+              x2: l + p.right,
+              classNames: e.classNames,
+              styles: e.styles,
+              animate: a,
+              isInView: g
+            },
+            y
+          )) }) : null,
+          /* @__PURE__ */ t.jsx("g", { children: xe.map((e, y) => {
+            const O = Te(
+              {
+                x: e.xCoordinate ? s(h(`${e.xCoordinate}`, o, /* @__PURE__ */ new Date())) + (e.xOffset || 0) : 0 + (e.xOffset || 0),
+                y: e.yCoordinate ? r(e.yCoordinate) + (e.yOffset || 0) - 8 : 0 + (e.yOffset || 0) - 8
+              },
+              {
+                x: e.xCoordinate ? s(h(`${e.xCoordinate}`, o, /* @__PURE__ */ new Date())) : 0,
+                y: e.yCoordinate ? r(e.yCoordinate) : 0
+              },
+              k(e.connectorRadius) ? 3.5 : e.connectorRadius
+            ), se = e.showConnector ? {
+              y1: O.y,
+              x1: O.x,
+              y2: e.yCoordinate ? r(e.yCoordinate) + (e.yOffset || 0) : 0 + (e.yOffset || 0),
+              x2: e.xCoordinate ? s(h(`${e.xCoordinate}`, o, /* @__PURE__ */ new Date())) + (e.xOffset || 0) : 0 + (e.xOffset || 0),
+              cy: e.yCoordinate ? r(e.yCoordinate) : 0,
+              cx: e.xCoordinate ? s(h(`${e.xCoordinate}`, o, /* @__PURE__ */ new Date())) : 0,
+              circleRadius: k(e.connectorRadius) ? 3.5 : e.connectorRadius,
+              strokeWidth: e.showConnector === !0 ? 2 : Math.min(e.showConnector || 0, 1)
+            } : void 0, ye = {
+              y: e.yCoordinate ? r(e.yCoordinate) + (e.yOffset || 0) - 8 : 0 + (e.yOffset || 0) - 8,
+              x: U ? 0 : e.xCoordinate ? s(h(`${e.xCoordinate}`, o, /* @__PURE__ */ new Date())) + (e.xOffset || 0) : 0 + (e.xOffset || 0),
+              width: U ? e.xCoordinate ? s(h(`${e.xCoordinate}`, o, /* @__PURE__ */ new Date())) + (e.xOffset || 0) : 0 + (e.xOffset || 0) : l - (e.xCoordinate ? s(h(`${e.xCoordinate}`, o, /* @__PURE__ */ new Date())) + (e.xOffset || 0) : 0 + (e.xOffset || 0)),
+              maxWidth: e.maxWidth,
+              fontWeight: e.fontWeight,
+              align: e.align
+            };
+            return /* @__PURE__ */ t.jsx(
+              Se,
+              {
+                color: e.color,
+                connectorsSettings: se,
+                labelSettings: ye,
+                text: e.text,
+                classNames: e.classNames,
+                styles: e.styles,
+                animate: a,
+                isInView: g
+              },
+              y
+            );
+          }) }),
+          /* @__PURE__ */ t.jsx("g", { children: H ? /* @__PURE__ */ t.jsx(
+            Ie,
+            {
+              x1: 0,
+              x2: l,
+              y1: be(0),
+              y2: be(l),
+              graphHeight: f,
+              graphWidth: l,
+              className: x?.regLine,
+              style: n?.regLine,
+              color: typeof H == "string" ? H : void 0,
+              animate: a,
+              isInView: g
+            }
+          ) : null }),
+          J.filter((e) => e.position === "after").map((e) => e.layer),
+          /* @__PURE__ */ t.jsx(
+            "rect",
+            {
+              ref: ee,
+              style: {
+                fill: "none",
+                pointerEvents: "all"
+              },
+              width: l,
+              height: f
+            }
+          )
+        ] })
+      }
+    ),
+    N && v && Z && j ? /* @__PURE__ */ t.jsx(
+      Ne,
+      {
+        data: N,
+        body: v,
+        xPos: Z,
+        yPos: j,
+        backgroundStyle: n?.tooltip,
+        className: x?.tooltip
+      }
+    ) : null
+  ] });
+}
+function St(re) {
+  const {
+    data: D,
+    graphTitle: A,
+    lineColor: V,
+    suffix: P = "",
+    sources: L,
+    prefix: T = "",
+    graphDescription: o,
+    height: S,
+    width: m,
+    footNote: X,
+    noOfXTicks: ne = 10,
+    dateFormat: d = "yyyy",
+    showValues: le = !1,
+    padding: E,
+    backgroundColor: v = !1,
+    leftMargin: R = 30,
+    rightMargin: G = 30,
+    topMargin: B = 20,
+    bottomMargin: z = 25,
+    relativeHeight: a,
+    tooltip: U,
+    onSeriesMouseOver: ce,
+    highlightAreaSettings: me = [],
+    graphID: xe,
+    minValue: fe,
+    maxValue: H,
+    maxDate: q,
+    minDate: he,
+    graphDownload: I = !1,
+    dataDownload: W = !1,
+    animate: $ = !1,
+    language: n = "en",
+    refValues: x = [],
+    minHeight: w = 0,
+    strokeWidth: J = 2,
+    showDots: K = !0,
+    annotations: g = [],
+    customHighlightAreaSettings: C = [],
+    theme: ge = "light",
+    ariaLabel: ue,
+    regressionLine: N = !1,
+    yAxisTitle: Q,
+    noOfYTicks: Z = 5,
+    curveType: _ = "curve",
+    styles: j,
+    classNames: b,
+    precision: p = 2,
+    customLayers: ee = []
+  } = re, [i, te] = M(0), [ie, l] = M(0), f = oe(null), ae = oe(null);
+  return de(() => {
+    const c = new ResizeObserver((u) => {
+      te(m || u[0].target.clientWidth || 620), l(S || u[0].target.clientHeight || 480);
+    });
+    return f.current && (l(f.current.clientHeight || 480), te(f.current.clientWidth || 620), m || c.observe(f.current)), () => c.disconnect();
+  }, [m, S]), /* @__PURE__ */ t.jsx(
+    "div",
+    {
+      className: `${ge || "light"} flex  ${m ? "w-fit grow-0" : "w-full grow"}`,
+      dir: n === "he" || n === "ar" ? "rtl" : void 0,
+      children: /* @__PURE__ */ t.jsx(
+        "div",
+        {
+          className: Y(
+            `${v ? v === !0 ? "bg-primary-gray-200 dark:bg-primary-gray-650 " : "" : "bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${n || "en"}`,
+            b?.graphContainer
+          ),
+          style: {
+            ...j?.graphContainer || {},
+            ...v && v !== !0 ? { backgroundColor: v } : {}
+          },
+          id: xe,
+          ref: ae,
+          "aria-label": ue || `${A ? `The graph shows ${A}. ` : ""}This is a line chart that shows trends over time.${o ? ` ${o}` : ""}`,
+          children: /* @__PURE__ */ t.jsx(
+            "div",
+            {
+              className: "flex grow",
+              style: { padding: v ? E || "1rem" : E || 0 },
+              children: /* @__PURE__ */ t.jsxs("div", { className: "flex flex-col w-full gap-4 grow justify-between", children: [
+                A || o || I || W ? /* @__PURE__ */ t.jsx(
+                  _e,
+                  {
+                    styles: {
+                      title: j?.title,
+                      description: j?.description
+                    },
+                    classNames: {
+                      title: b?.title,
+                      description: b?.description
+                    },
+                    graphTitle: A,
+                    graphDescription: o,
+                    width: m,
+                    graphDownload: I ? ae.current : void 0,
+                    dataDownload: W ? D.map((c) => c.data).filter((c) => c !== void 0).length > 0 ? D.map((c) => c.data).filter((c) => c !== void 0) : D.filter((c) => c !== void 0) : null
+                  }
+                ) : null,
+                D.length === 0 ? /* @__PURE__ */ t.jsx("div", { className: "grow flex flex-col justify-center gap-3 w-full", children: /* @__PURE__ */ t.jsx(tt, {}) }) : /* @__PURE__ */ t.jsx(
+                  "div",
+                  {
+                    className: "flex flex-col grow justify-center leading-0",
+                    ref: f,
+                    "aria-label": "Graph area",
+                    children: (m || i) && (S || ie) ? /* @__PURE__ */ t.jsx(
+                      it,
+                      {
+                        data: D,
+                        lineColor: V || et.primaryColors["blue-600"],
+                        width: m || i,
+                        height: Math.max(
+                          w,
+                          S || (a ? w ? (m || i) * a > w ? (m || i) * a : w : (m || i) * a : ie)
+                        ),
+                        suffix: P,
+                        prefix: T,
+                        dateFormat: d,
+                        showValues: le,
+                        noOfXTicks: ne,
+                        leftMargin: R,
+                        rightMargin: G,
+                        topMargin: B,
+                        bottomMargin: z,
+                        tooltip: U,
+                        highlightAreaSettings: me,
+                        onSeriesMouseOver: ce,
+                        refValues: x,
+                        minValue: fe,
+                        maxValue: H,
+                        animate: $ === !0 ? { duration: 0.5, once: !0, amount: 0.5 } : $ || { duration: 0, once: !0, amount: 0 },
+                        rtl: n === "he" || n === "ar",
+                        strokeWidth: J,
+                        showDots: K,
+                        annotations: g,
+                        customHighlightAreaSettings: C,
+                        regressionLine: N,
+                        yAxisTitle: Q,
+                        noOfYTicks: Z,
+                        maxDate: q,
+                        minDate: he,
+                        curveType: _,
+                        styles: j,
+                        classNames: b,
+                        precision: p,
+                        customLayers: ee
+                      }
+                    ) : null
+                  }
+                ),
+                L || X ? /* @__PURE__ */ t.jsx(
+                  Ze,
+                  {
+                    styles: { footnote: j?.footnote, source: j?.source },
+                    classNames: {
+                      footnote: b?.footnote,
+                      source: b?.source
+                    },
+                    sources: L,
+                    footNote: X,
+                    width: m
+                  }
+                ) : null
+              ] })
+            }
+          )
+        }
+      )
+    }
+  );
+}
+export {
+  St as SimpleLineChart
+};
+//# sourceMappingURL=SimpleLineChart.js.map