@undp/data-viz 1.2.8 → 1.3.1

package/dist/ParetoChart.js

@@ -0,0 +1,637 @@
+import { j as t, m as R } from "./index-CHPV5EwG-BPSP-7Jg.js";
+import { useRef as di, useState as B, useEffect as wi } from "react";
+import { i as fi } from "./index-27yTRcko.js";
+import { X as ji } from "./Modal-CUU6ZK3U.js";
+import { n as ni } from "./numberFormattingFunction-14YCbkN2.js";
+import { T as Ai } from "./Tooltip-DyM5snqx.js";
+import { s as Mi } from "./string2HTML-CWHGfz_d.js";
+import { c as hi } from "./checkIfNullOrUndefined-DmfiKkNw.js";
+import { A as ui } from "./Axis-Ddg-seDi.js";
+import { A as gi } from "./AxisTitle-BmHLMRJZ.js";
+import { X as Ni } from "./XAxesLabels-DQFo_z2R.js";
+import { u as ki } from "./use-in-view-BAHrBy6b.js";
+import { b as $i } from "./band-BEjh2CHI.js";
+import { a as yi } from "./linear-DUdu7l2G.js";
+import { l as Ci, c as Ii } from "./line-CPfhohvF.js";
+import { c as Li, s as Ti, a as Si, m as Vi } from "./step-BrDul-H4.js";
+import { m as D } from "./proxy-DJxJg1kD.js";
+import { A as Oi } from "./index-BxAUvrua.js";
+import { GraphFooter as Pi } from "./GraphFooter.js";
+import { GraphHeader as Di } from "./GraphHeader.js";
+import { ColorLegend as Yi } from "./ColorLegend.js";
+import { Colors as oi } from "./Colors.js";
+import { E as Hi } from "./EmptyState-DdTp-Mdn.js";
+function Xi(li) {
+  const {
+    data: L,
+    width: A,
+    height: Y,
+    barColor: p,
+    lineColor: u,
+    axisTitles: s,
+    sameAxes: y,
+    rightMargin: z,
+    leftMargin: _,
+    topMargin: q,
+    bottomMargin: ci,
+    tooltip: v,
+    showValues: U,
+    onSeriesMouseOver: H,
+    barPadding: mi,
+    truncateBy: J,
+    showLabels: K,
+    onSeriesMouseClick: b,
+    resetSelectionOnDoubleClick: Q,
+    detailsOnClick: d,
+    noOfTicks: Z,
+    lineSuffix: ii,
+    barSuffix: F,
+    linePrefix: G,
+    barPrefix: ti,
+    curveType: X,
+    styles: o,
+    classNames: l,
+    animate: r,
+    precision: E,
+    customLayers: T,
+    naLabel: M
+  } = li, ei = di(null), N = ki(ei, {
+    once: r.once,
+    amount: r.amount
+  }), xi = X === "linear" ? Ii : X === "step" ? Li : X === "stepAfter" ? Ti : X === "stepBefore" ? Si : Vi, [ai, k] = B(void 0), [$, S] = B(void 0), [si, C] = B(void 0), [ri, x] = B(void 0), n = {
+    top: q,
+    bottom: ci,
+    left: _ + 50,
+    right: z + 65
+  }, h = A - n.left - n.right, f = Y - n.top - n.bottom, a = L.map((i, j) => ({ ...i, id: `${j}` })), c = $i().domain(a.map((i) => `${i.id}`)).range([0, h]).paddingInner(mi), w = Math.min(...a.map((i) => i.bar).filter((i) => i != null)) !== 1 / 0 ? Math.min(...a.map((i) => i.bar).filter((i) => i != null)) > 0 ? 0 : Math.min(...a.map((i) => i.bar).filter((i) => i != null)) : 0, W = Math.min(...a.map((i) => i.line).filter((i) => i != null)) !== 1 / 0 ? Math.min(...a.map((i) => i.line).filter((i) => i != null)) > 0 ? 0 : Math.min(...a.map((i) => i.line).filter((i) => i != null)) : 0, V = Math.max(...a.map((i) => i.bar).filter((i) => i != null)) !== 1 / 0 ? Math.max(...a.map((i) => i.bar).filter((i) => i != null)) : 0, O = Math.max(...a.map((i) => i.line).filter((i) => i != null)) !== 1 / 0 ? Math.max(...a.map((i) => i.line).filter((i) => i != null)) : 0, I = w < W ? w : W, P = V > O ? V : O, e = yi().domain([
+    y ? I : w,
+    y ? P > 0 ? P : 0 : V > 0 ? V : 0
+  ]).range([f, 0]).nice(), m = yi().domain([
+    y ? I : W,
+    y ? P > 0 ? P : 0 : O > 0 ? O : 0
+  ]).range([f, 0]).nice(), pi = Ci().defined((i) => !hi(i.line)).x((i) => c(`${i.id}`) + c.bandwidth() / 2).y((i) => m(i.line)).curve(xi), vi = e.ticks(Z), bi = m.ticks(Z);
+  return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    /* @__PURE__ */ t.jsx(
+      D.svg,
+      {
+        width: `${A}px`,
+        height: `${Y}px`,
+        viewBox: `0 0 ${A} ${Y}`,
+        direction: "ltr",
+        ref: ei,
+        children: /* @__PURE__ */ t.jsxs("g", { transform: `translate(${n.left},${n.top})`, children: [
+          /* @__PURE__ */ t.jsxs("g", { children: [
+            vi.map((i, j) => /* @__PURE__ */ t.jsxs("g", { children: [
+              /* @__PURE__ */ t.jsx(
+                "line",
+                {
+                  y1: e(i),
+                  y2: e(i),
+                  x1: -15,
+                  x2: -20,
+                  style: {
+                    stroke: p,
+                    strokeWidth: 1,
+                    ...o?.yAxis?.gridLines || {}
+                  },
+                  className: l?.yAxis?.gridLines
+                }
+              ),
+              /* @__PURE__ */ t.jsx(
+                "text",
+                {
+                  x: -25,
+                  y: e(i),
+                  dy: "0.33em",
+                  className: R("text-xs", l?.yAxis?.labels),
+                  style: {
+                    textAnchor: "end",
+                    fill: p,
+                    ...o?.yAxis?.labels || {}
+                  },
+                  children: ni(i, M, E, ti, F)
+                }
+              )
+            ] }, j)),
+            /* @__PURE__ */ t.jsx(
+              ui,
+              {
+                y1: 0,
+                y2: f,
+                x1: -15,
+                x2: -15,
+                classNames: { axis: l?.xAxis?.axis },
+                styles: { axis: { stroke: p, ...o?.xAxis?.axis || {} } }
+              }
+            ),
+            /* @__PURE__ */ t.jsx(
+              gi,
+              {
+                x: 10 - n.left,
+                y: f / 2,
+                style: { fill: p, ...o?.yAxis?.title || {} },
+                className: l?.yAxis?.title,
+                text: s[0].length > 100 ? `${s[0].substring(0, 100)}...` : s[0],
+                rotate90: !0
+              }
+            )
+          ] }),
+          /* @__PURE__ */ t.jsxs("g", { children: [
+            bi.map((i, j) => /* @__PURE__ */ t.jsxs("g", { children: [
+              /* @__PURE__ */ t.jsx(
+                "line",
+                {
+                  y1: m(i),
+                  y2: m(i),
+                  x1: h + 15,
+                  x2: h + 20,
+                  style: {
+                    stroke: u,
+                    strokeWidth: 1,
+                    ...o?.yAxis?.gridLines || {}
+                  },
+                  className: l?.yAxis?.gridLines
+                }
+              ),
+              /* @__PURE__ */ t.jsx(
+                "text",
+                {
+                  x: h + 25,
+                  y: m(i),
+                  dy: "0.33em",
+                  dx: -2,
+                  style: {
+                    textAnchor: "start",
+                    fill: u,
+                    ...o?.yAxis?.labels || {}
+                  },
+                  className: R("text-xs", l?.yAxis?.labels),
+                  children: ni(i, M, E, G, ii)
+                }
+              )
+            ] }, j)),
+            /* @__PURE__ */ t.jsx(
+              ui,
+              {
+                y1: 0,
+                y2: f,
+                x1: h + 15,
+                x2: h + 15,
+                classNames: { axis: l?.xAxis?.axis },
+                styles: { axis: { stroke: u, ...o?.xAxis?.axis || {} } }
+              }
+            ),
+            /* @__PURE__ */ t.jsx(
+              gi,
+              {
+                x: h + n.right - 15,
+                y: f / 2,
+                style: { fill: u, ...o?.yAxis?.title || {} },
+                className: l?.yAxis?.title,
+                text: s[1].length > 100 ? `${s[1].substring(0, 100)}...` : s[1],
+                rotate90: !0
+              }
+            )
+          ] }),
+          /* @__PURE__ */ t.jsx(
+            ui,
+            {
+              y1: y ? e(0) : f,
+              y2: y ? e(0) : f,
+              x1: -15,
+              x2: h + 15,
+              classNames: { axis: l?.xAxis?.axis },
+              styles: { axis: o?.xAxis?.axis }
+            }
+          ),
+          T.filter((i) => i.position === "before").map((i) => i.layer),
+          /* @__PURE__ */ t.jsxs(Oi, { children: [
+            a.map((i, j) => /* @__PURE__ */ t.jsxs(
+              D.g,
+              {
+                className: "undp-viz-g-with-hover",
+                opacity: 0.85,
+                onMouseEnter: (g) => {
+                  k(i), x(g.clientY), C(g.clientX), H?.(i);
+                },
+                onClick: () => {
+                  (b || d) && (fi($, i) && Q ? (S(void 0), b?.(void 0)) : (S(i), b?.(i)));
+                },
+                onMouseMove: (g) => {
+                  k(i), x(g.clientY), C(g.clientX);
+                },
+                onMouseLeave: () => {
+                  k(void 0), C(void 0), x(void 0), H?.(void 0);
+                },
+                children: [
+                  /* @__PURE__ */ t.jsx(
+                    D.rect,
+                    {
+                      variants: {
+                        initial: {
+                          attrY: e(0),
+                          height: 0,
+                          opacity: 1
+                        },
+                        whileInView: {
+                          attrY: i.bar ? i.bar > 0 ? e(i.bar) : e(0) : 0,
+                          height: i.bar ? Math.abs(e(i.bar) - e(0)) : 0,
+                          opacity: 1,
+                          transition: { duration: r.duration }
+                        }
+                      },
+                      initial: "initial",
+                      animate: N ? "whileInView" : "initial",
+                      exit: {
+                        attrY: e(0),
+                        height: 0,
+                        opacity: 0,
+                        transition: { duration: r.duration }
+                      },
+                      x: c(`${j}`),
+                      width: c.bandwidth(),
+                      style: { fill: p }
+                    }
+                  ),
+                  U && !hi(i.bar) ? /* @__PURE__ */ t.jsx(
+                    D.text,
+                    {
+                      x: c(`${i.id}`) + c.bandwidth() / 2,
+                      exit: {
+                        attrY: e(0),
+                        opacity: 0,
+                        transition: { duration: r.duration }
+                      },
+                      variants: {
+                        initial: {
+                          attrY: e(0),
+                          opacity: 0
+                        },
+                        whileInView: {
+                          attrY: e(i.bar || 0),
+                          opacity: 1,
+                          transition: { duration: r.duration }
+                        }
+                      },
+                      initial: "initial",
+                      animate: N ? "whileInView" : "initial",
+                      style: {
+                        fill: p,
+                        textAnchor: "middle",
+                        ...o?.graphObjectValues || {}
+                      },
+                      className: R("graph-value text-sm", l?.graphObjectValues),
+                      dy: i.bar ? i.bar >= 0 ? "-5px" : "1em" : "-5px",
+                      children: ni(i.bar, M, E, ti, F)
+                    }
+                  ) : null,
+                  K ? /* @__PURE__ */ t.jsx(
+                    Ni,
+                    {
+                      value: `${i.label}`.length < J ? `${i.label}` : `${`${i.label}`.substring(0, J)}...`,
+                      y: f + 5,
+                      x: c(`${i.id}`),
+                      width: c.bandwidth(),
+                      height: n.bottom,
+                      style: o?.xAxis?.labels,
+                      className: l?.xAxis?.labels,
+                      alignment: "top",
+                      animate: r,
+                      isInView: N
+                    }
+                  ) : null
+                ]
+              },
+              i.label
+            )),
+            /* @__PURE__ */ t.jsx(
+              D.path,
+              {
+                exit: {
+                  opacity: 0,
+                  transition: { duration: r.duration }
+                },
+                variants: {
+                  initial: {
+                    d: pi(a.map((i) => ({ ...i, line: 0 }))),
+                    opacity: 0
+                  },
+                  whileInView: {
+                    d: pi(a),
+                    opacity: 1,
+                    transition: { duration: r.duration }
+                  }
+                },
+                initial: "initial",
+                animate: N ? "whileInView" : "initial",
+                style: {
+                  stroke: u,
+                  fill: "none",
+                  strokeWidth: 2
+                }
+              }
+            ),
+            a.map((i, j) => /* @__PURE__ */ t.jsx("g", { children: hi(i.line) ? null : /* @__PURE__ */ t.jsxs(
+              "g",
+              {
+                onMouseEnter: (g) => {
+                  k(i), x(g.clientY), C(g.clientX), H?.(i);
+                },
+                onClick: () => {
+                  (b || d) && (fi($, i) && Q ? (S(void 0), b?.(void 0)) : (S(i), b?.(i)));
+                },
+                onMouseMove: (g) => {
+                  k(i), x(g.clientY), C(g.clientX);
+                },
+                onMouseLeave: () => {
+                  k(void 0), C(void 0), x(void 0), H?.(void 0);
+                },
+                children: [
+                  /* @__PURE__ */ t.jsx(
+                    D.circle,
+                    {
+                      exit: {
+                        cy: m(0),
+                        opacity: 0,
+                        transition: { duration: r.duration }
+                      },
+                      variants: {
+                        initial: {
+                          cy: m(0),
+                          opacity: 0
+                        },
+                        whileInView: {
+                          cy: m(i.line),
+                          opacity: 1,
+                          transition: { duration: r.duration }
+                        }
+                      },
+                      initial: "initial",
+                      animate: N ? "whileInView" : "initial",
+                      cx: c(i.id) + c.bandwidth() / 2,
+                      r: h / a.length < 5 ? 0 : h / a.length < 20 ? 2 : 4,
+                      style: { fill: u }
+                    }
+                  ),
+                  U ? /* @__PURE__ */ t.jsx(
+                    D.text,
+                    {
+                      x: c(`${i.id}`) + c.bandwidth() / 2,
+                      exit: {
+                        y: m(0),
+                        opacity: 0,
+                        transition: { duration: r.duration }
+                      },
+                      style: {
+                        fill: u,
+                        textAnchor: "middle",
+                        ...o?.graphObjectValues || {}
+                      },
+                      variants: {
+                        initial: {
+                          y: m(0),
+                          opacity: 0
+                        },
+                        whileInView: {
+                          y: m(i.line),
+                          opacity: 1,
+                          transition: { duration: r.duration }
+                        }
+                      },
+                      initial: "initial",
+                      animate: N ? "whileInView" : "initial",
+                      className: R("graph-value text-sm", l?.graphObjectValues),
+                      dy: "-5px",
+                      children: ni(
+                        i.line,
+                        M,
+                        E,
+                        G,
+                        ii
+                      )
+                    }
+                  ) : null
+                ]
+              }
+            ) }, j))
+          ] }),
+          T.filter((i) => i.position === "after").map((i) => i.layer)
+        ] })
+      }
+    ),
+    ai && v && si && ri ? /* @__PURE__ */ t.jsx(
+      Ai,
+      {
+        data: ai,
+        body: v,
+        xPos: si,
+        yPos: ri,
+        backgroundStyle: o?.tooltip,
+        className: l?.tooltip
+      }
+    ) : null,
+    d && $ !== void 0 ? /* @__PURE__ */ t.jsx(
+      ji,
+      {
+        open: $ !== void 0,
+        onClose: () => {
+          S(void 0);
+        },
+        children: /* @__PURE__ */ t.jsx(
+          "div",
+          {
+            className: "graph-modal-content m-0",
+            dangerouslySetInnerHTML: typeof d == "string" ? { __html: Mi(d, $) } : void 0,
+            children: typeof d == "function" ? d($) : null
+          }
+        )
+      }
+    ) : null
+  ] });
+}
+function ct(li) {
+  const {
+    data: L,
+    graphTitle: A,
+    sources: Y,
+    graphDescription: p,
+    height: u,
+    width: s,
+    footNote: y,
+    padding: z,
+    lineColor: _ = oi.light.categoricalColors.colors[1],
+    barColor: q = oi.light.categoricalColors.colors[0],
+    sameAxes: ci = !1,
+    backgroundColor: v = !1,
+    leftMargin: U = 80,
+    rightMargin: H = 80,
+    topMargin: mi = 20,
+    bottomMargin: J = 25,
+    lineAxisTitle: K = "Line chart",
+    barAxisTitle: b = "Bar graph",
+    tooltip: Q,
+    relativeHeight: d,
+    onSeriesMouseOver: Z,
+    graphID: ii,
+    graphDownload: F = !1,
+    dataDownload: G = !1,
+    barPadding: ti = 0.25,
+    truncateBy: X = 999,
+    showLabels: o = !0,
+    onSeriesMouseClick: l,
+    language: r = "en",
+    colorLegendTitle: E,
+    minHeight: T = 0,
+    theme: M = "light",
+    ariaLabel: ei,
+    resetSelectionOnDoubleClick: N = !0,
+    detailsOnClick: xi,
+    showValues: ai = !0,
+    noOfTicks: k = 5,
+    lineSuffix: $ = "",
+    barSuffix: S = "",
+    linePrefix: si = "",
+    barPrefix: C = "",
+    curveType: ri = "curve",
+    styles: x,
+    classNames: n,
+    animate: h = !1,
+    precision: f = 2,
+    customLayers: a = [],
+    naLabel: c = "NA"
+  } = li, [w, W] = B(0), [V, O] = B(0), I = di(null), P = di(null);
+  return wi(() => {
+    const e = new ResizeObserver((m) => {
+      W(s || m[0].target.clientWidth || 620), O(u || m[0].target.clientHeight || 480);
+    });
+    return I.current && (O(I.current.clientHeight || 480), W(I.current.clientWidth || 620), s || e.observe(I.current)), () => e.disconnect();
+  }, [s, u]), /* @__PURE__ */ t.jsx(
+    "div",
+    {
+      className: `${M || "light"} flex  ${s ? "w-fit grow-0" : "w-full grow"}`,
+      dir: r === "he" || r === "ar" ? "rtl" : void 0,
+      children: /* @__PURE__ */ t.jsx(
+        "div",
+        {
+          className: R(
+            `${v ? v === !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: {
+            ...x?.graphContainer || {},
+            ...v && v !== !0 ? { backgroundColor: v } : {}
+          },
+          id: ii,
+          ref: P,
+          "aria-label": ei || `${A ? `The graph shows ${A}. ` : ""}This is a pareto chart that shows a variable as bars and another as line chart.${p ? ` ${p}` : ""}`,
+          children: /* @__PURE__ */ t.jsx(
+            "div",
+            {
+              className: "flex grow",
+              style: { padding: v ? z || "1rem" : z || 0 },
+              children: /* @__PURE__ */ t.jsxs("div", { className: "flex flex-col w-full gap-4 grow justify-between", children: [
+                A || p || F || G ? /* @__PURE__ */ t.jsx(
+                  Di,
+                  {
+                    styles: {
+                      title: x?.title,
+                      description: x?.description
+                    },
+                    classNames: {
+                      title: n?.title,
+                      description: n?.description
+                    },
+                    graphTitle: A,
+                    graphDescription: p,
+                    width: s,
+                    graphDownload: F ? P.current : void 0,
+                    dataDownload: G ? L.map((e) => e.data).filter((e) => e !== void 0).length > 0 ? L.map((e) => e.data).filter((e) => e !== void 0) : L.filter((e) => e !== void 0) : null
+                  }
+                ) : null,
+                /* @__PURE__ */ t.jsx("div", { className: "grow flex flex-col justify-center gap-3 w-full", children: L.length === 0 ? /* @__PURE__ */ t.jsx(Hi, {}) : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+                  /* @__PURE__ */ t.jsx(
+                    Yi,
+                    {
+                      colorDomain: [b, K],
+                      colors: [
+                        q || oi[M].categoricalColors.colors[0],
+                        _ || oi[M].categoricalColors.colors[1]
+                      ],
+                      colorLegendTitle: E,
+                      showNAColor: !1
+                    }
+                  ),
+                  /* @__PURE__ */ t.jsx(
+                    "div",
+                    {
+                      className: "flex flex-col grow justify-center leading-0",
+                      ref: I,
+                      "aria-label": "Graph area",
+                      children: (s || w) && (u || V) ? /* @__PURE__ */ t.jsx(
+                        Xi,
+                        {
+                          data: L,
+                          sameAxes: ci,
+                          lineColor: _,
+                          barColor: q,
+                          width: s || w,
+                          height: Math.max(
+                            T,
+                            u || (d ? T ? (s || w) * d > T ? (s || w) * d : T : (s || w) * d : V)
+                          ),
+                          truncateBy: X,
+                          leftMargin: U,
+                          rightMargin: H,
+                          topMargin: mi,
+                          bottomMargin: J,
+                          axisTitles: [b, K],
+                          tooltip: Q,
+                          onSeriesMouseOver: Z,
+                          barPadding: ti,
+                          showLabels: o,
+                          onSeriesMouseClick: l,
+                          resetSelectionOnDoubleClick: N,
+                          detailsOnClick: xi,
+                          noOfTicks: k,
+                          lineSuffix: $,
+                          barSuffix: S,
+                          linePrefix: si,
+                          barPrefix: C,
+                          curveType: ri,
+                          showValues: ai,
+                          styles: x,
+                          classNames: n,
+                          animate: h === !0 ? { duration: 0.5, once: !0, amount: 0.5 } : h || { duration: 0, once: !0, amount: 0 },
+                          precision: f,
+                          customLayers: a,
+                          naLabel: c
+                        }
+                      ) : null
+                    }
+                  )
+                ] }) }),
+                Y || y ? /* @__PURE__ */ t.jsx(
+                  Pi,
+                  {
+                    styles: { footnote: x?.footnote, source: x?.source },
+                    classNames: {
+                      footnote: n?.footnote,
+                      source: n?.source
+                    },
+                    sources: Y,
+                    footNote: y,
+                    width: s
+                  }
+                ) : null
+              ] })
+            }
+          )
+        }
+      )
+    }
+  );
+}
+export {
+  ct as ParetoChart
+};
+//# sourceMappingURL=ParetoChart.js.map