@undp/data-viz 1.2.8 → 1.3.1

package/dist/StripChart.js

@@ -0,0 +1,989 @@
+import { j as r, m as ni } from "./index-CHPV5EwG-BPSP-7Jg.js";
+import { u as gi } from "./index-CaAIPGZo.js";
+import { useRef as si, useState as E, useEffect as ui } from "react";
+import { i as pi } from "./index-27yTRcko.js";
+import { s as mi } from "./index-DxagiOHo.js";
+import { X as xi } from "./Modal-CUU6ZK3U.js";
+import { T as yi } from "./Tooltip-DyM5snqx.js";
+import { c as J } from "./checkIfNullOrUndefined-DmfiKkNw.js";
+import { n as di } from "./numberFormattingFunction-14YCbkN2.js";
+import { Colors as c } from "./Colors.js";
+import { s as vi } from "./string2HTML-CWHGfz_d.js";
+import { u as wi } from "./use-in-view-BAHrBy6b.js";
+import { a as Oi } from "./linear-DUdu7l2G.js";
+import { m as ai } from "./proxy-DJxJg1kD.js";
+import { A as bi } from "./index-BxAUvrua.js";
+import { GraphFooter as Ci } from "./GraphFooter.js";
+import { GraphHeader as ji } from "./GraphHeader.js";
+import { ColorLegendWithMouseOver as Mi } from "./ColorLegendWithMouseOver.js";
+import { E as Di } from "./EmptyState-DdTp-Mdn.js";
+function Ni(P, o) {
+  if (P < 2) return [];
+  const d = o / (P - 1);
+  return Array.from({ length: P }, (p, e) => e * d);
+}
+function Vi(P) {
+  const {
+    data: o,
+    width: d,
+    height: p,
+    colors: e,
+    colorDomain: n,
+    radius: h,
+    leftMargin: s,
+    rightMargin: X,
+    topMargin: Y,
+    bottomMargin: ii,
+    tooltip: F,
+    onSeriesMouseOver: k,
+    highlightedDataPoints: a,
+    selectedColor: R,
+    minValue: G,
+    maxValue: _,
+    onSeriesMouseClick: S,
+    prefix: K,
+    suffix: b,
+    stripType: Q,
+    highlightColor: y,
+    dotOpacity: v,
+    resetSelectionOnDoubleClick: ti,
+    detailsOnClick: N,
+    styles: j,
+    classNames: $,
+    valueColor: I,
+    animate: m,
+    noOfTicks: w,
+    dimmedOpacity: T,
+    precision: B,
+    customLayers: M
+  } = P, q = si(null), D = wi(q, {
+    once: m.once,
+    amount: m.amount
+  }), [H, x] = E(void 0), [f, A] = E(void 0), [U, L] = E(void 0), [u, g] = E(void 0), O = {
+    top: Y,
+    bottom: ii,
+    left: s,
+    right: X
+  }, V = d - O.left - O.right, W = p - O.top - O.bottom, oi = o.map((i, t) => ({ ...i, id: `${t}` })), ei = mi(oi, (i) => {
+    const t = (a || []).indexOf(i.label);
+    return t === -1 ? 1 / 0 : t;
+  }).reverse(), ri = J(_) ? Math.max(...o.filter((i) => !J(i.position)).map((i) => i.position)) < 0 ? 0 : Math.max(...o.filter((i) => !J(i.position)).map((i) => i.position)) : _, C = J(G) ? Math.min(...o.filter((i) => !J(i.position)).map((i) => i.position)) >= 0 ? 0 : Math.min(...o.filter((i) => !J(i.position)).map((i) => i.position)) : G, z = Oi().domain([C, ri]).range([0, V]).nice(), li = Ni(w, V);
+  return /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+    /* @__PURE__ */ r.jsx(
+      ai.svg,
+      {
+        width: `${d}px`,
+        height: `${p}px`,
+        viewBox: `0 0 ${d} ${p}`,
+        direction: "ltr",
+        ref: q,
+        children: /* @__PURE__ */ r.jsxs("g", { transform: `translate(${O.left},${O.top})`, children: [
+          M.filter((i) => i.position === "before").map((i) => i.layer),
+          /* @__PURE__ */ r.jsxs(bi, { children: [
+            ei.map((i) => /* @__PURE__ */ r.jsxs(
+              ai.g,
+              {
+                className: "undp-viz-g-with-hover",
+                variants: {
+                  initial: {
+                    opacity: 0,
+                    x: z(0),
+                    y: W / 2
+                  },
+                  whileInView: {
+                    x: z(i.position),
+                    y: W / 2,
+                    opacity: R ? i.color && e[n.indexOf(i.color)] === R ? 0.95 : T : a.length !== 0 ? a.indexOf(i.label) !== -1 ? 0.95 : T : v,
+                    transition: { duration: m.duration }
+                  }
+                },
+                initial: "initial",
+                animate: D ? "whileInView" : "initial",
+                exit: { opacity: 0, transition: { duration: m.duration } },
+                onMouseEnter: (t) => {
+                  x(i), g(t.clientY), L(t.clientX), k?.(i);
+                },
+                onClick: () => {
+                  (S || N) && (pi(f, i) && ti ? (A(void 0), S?.(void 0)) : (A(i), S?.(i)));
+                },
+                onMouseMove: (t) => {
+                  x(i), g(t.clientY), L(t.clientX);
+                },
+                onMouseLeave: () => {
+                  x(void 0), L(void 0), g(void 0), k?.(void 0);
+                },
+                children: [
+                  Q === "dot" ? /* @__PURE__ */ r.jsx(
+                    ai.circle,
+                    {
+                      cy: 0,
+                      cx: 0,
+                      variants: {
+                        initial: {
+                          fill: y && a ? a.indexOf(i.label) !== -1 ? y : o.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[n.indexOf(i.color)] : c.gray : o.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[n.indexOf(i.color)] : c.gray
+                        },
+                        whileInView: {
+                          fill: y && a ? a.indexOf(i.label) !== -1 ? y : o.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[n.indexOf(i.color)] : c.gray : o.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[n.indexOf(i.color)] : c.gray,
+                          transition: { duration: m.duration }
+                        }
+                      },
+                      initial: "initial",
+                      animate: D ? "whileInView" : "initial",
+                      exit: { opacity: 0, transition: { duration: m.duration } },
+                      r: h
+                    }
+                  ) : /* @__PURE__ */ r.jsx(
+                    ai.rect,
+                    {
+                      y: 0 - h,
+                      x: -1,
+                      height: h * 2,
+                      width: 2,
+                      variants: {
+                        initial: {
+                          fill: y && a ? a.indexOf(i.label) !== -1 ? y : o.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[n.indexOf(i.color)] : c.gray : o.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[n.indexOf(i.color)] : c.gray
+                        },
+                        whileInView: {
+                          fill: y && a ? a.indexOf(i.label) !== -1 ? y : o.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[n.indexOf(i.color)] : c.gray : o.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[n.indexOf(i.color)] : c.gray,
+                          transition: { duration: m.duration }
+                        }
+                      },
+                      initial: "initial",
+                      animate: D ? "whileInView" : "initial",
+                      exit: { opacity: 0, transition: { duration: m.duration } }
+                    }
+                  ),
+                  a.length !== 0 && a.indexOf(i.label) !== -1 ? /* @__PURE__ */ r.jsx(
+                    ai.text,
+                    {
+                      x: 0,
+                      y: 0 - h - 5,
+                      variants: {
+                        initial: { opacity: 0 },
+                        whileInView: {
+                          opacity: 1,
+                          transition: { duration: m.duration }
+                        }
+                      },
+                      initial: "initial",
+                      animate: D ? "whileInView" : "initial",
+                      exit: { opacity: 0, transition: { duration: m.duration } },
+                      style: {
+                        fill: I || (y && a ? a.indexOf(i.label) !== -1 ? y : o.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[n.indexOf(i.color)] : c.gray : o.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[n.indexOf(i.color)] : c.gray),
+                        textAnchor: "middle",
+                        ...j?.graphObjectValues || {}
+                      },
+                      className: ni(
+                        "graph-value text-sm font-bold",
+                        $?.graphObjectValues
+                      ),
+                      children: di(i.position, "NA", B, K, b)
+                    }
+                  ) : null
+                ]
+              },
+              i.label
+            )),
+            li.map((i, t) => /* @__PURE__ */ r.jsx(
+              "text",
+              {
+                x: i,
+                y: W / 2 + h,
+                style: {
+                  textAnchor: t === 0 ? "start" : t === li.length - 1 ? "end" : "middle",
+                  ...j?.xAxis?.labels || {}
+                },
+                className: ni(
+                  "fill-primary-gray-550 dark:fill-primary-gray-500 text-xs",
+                  $?.xAxis?.labels
+                ),
+                dy: "1em",
+                children: di(z.invert(i), "NA", B, K, b)
+              },
+              t
+            ))
+          ] }),
+          M.filter((i) => i.position === "after").map((i) => i.layer)
+        ] })
+      }
+    ),
+    H && F && U && u ? /* @__PURE__ */ r.jsx(
+      yi,
+      {
+        data: H,
+        body: F,
+        xPos: U,
+        yPos: u,
+        backgroundStyle: j?.tooltip,
+        className: $?.tooltip
+      }
+    ) : null,
+    N && f !== void 0 ? /* @__PURE__ */ r.jsx(
+      xi,
+      {
+        open: f !== void 0,
+        onClose: () => {
+          A(void 0);
+        },
+        children: /* @__PURE__ */ r.jsx(
+          "div",
+          {
+            className: "graph-modal-content m-0",
+            dangerouslySetInnerHTML: typeof N == "string" ? { __html: vi(N, f) } : void 0,
+            children: typeof N == "function" ? N(f) : null
+          }
+        )
+      }
+    ) : null
+  ] });
+}
+function ki(P) {
+  const {
+    data: o,
+    graphTitle: d,
+    colors: p,
+    sources: e,
+    graphDescription: n,
+    height: h,
+    width: s,
+    footNote: X,
+    colorDomain: Y,
+    colorLegendTitle: ii,
+    radius: F = 5,
+    padding: k,
+    backgroundColor: a = !1,
+    leftMargin: R = 5,
+    rightMargin: G = 5,
+    topMargin: _ = 10,
+    bottomMargin: S = 10,
+    tooltip: K,
+    relativeHeight: b,
+    onSeriesMouseOver: Q,
+    showColorScale: y = !0,
+    highlightedDataPoints: v = [],
+    graphID: ti,
+    minValue: N,
+    maxValue: j,
+    onSeriesMouseClick: $,
+    graphDownload: I = !1,
+    dataDownload: m = !1,
+    prefix: w = "",
+    suffix: T = "",
+    stripType: B = "dot",
+    language: M = "en",
+    highlightColor: q,
+    dotOpacity: D = 0.3,
+    showNAColor: H = !0,
+    minHeight: x = 0,
+    theme: f = "light",
+    ariaLabel: A,
+    resetSelectionOnDoubleClick: U = !0,
+    detailsOnClick: L,
+    styles: u,
+    classNames: g,
+    valueColor: O,
+    animate: V = !1,
+    noOfTicks: W = 2,
+    dimmedOpacity: oi = 0.3,
+    precision: ei = 2,
+    customLayers: ri = []
+  } = P, [C, z] = E(0), [li, i] = E(0), [t, fi] = E(void 0), Z = si(null), ci = si(null);
+  return ui(() => {
+    const l = new ResizeObserver((hi) => {
+      z(s || hi[0].target.clientWidth || 620), i(h || hi[0].target.clientHeight || 480);
+    });
+    return Z.current && (i(Z.current.clientHeight || 480), z(Z.current.clientWidth || 620), s || l.observe(Z.current)), () => l.disconnect();
+  }, [s, h]), /* @__PURE__ */ r.jsx(
+    "div",
+    {
+      className: `${f || "light"} flex  ${s ? "w-fit grow-0" : "w-full grow"}`,
+      dir: M === "he" || M === "ar" ? "rtl" : void 0,
+      children: /* @__PURE__ */ r.jsx(
+        "div",
+        {
+          className: ni(
+            `${a ? a === !0 ? "bg-primary-gray-200 dark:bg-primary-gray-650 " : "" : "bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${M || "en"}`,
+            g?.graphContainer
+          ),
+          style: {
+            ...u?.graphContainer || {},
+            ...a && a !== !0 ? { backgroundColor: a } : {}
+          },
+          id: ti,
+          ref: ci,
+          "aria-label": A || `${d ? `The graph shows ${d}. ` : ""}This is a strip chart showing distribution of data along the horizontal axis. Each dot represents an individual data point, helping to visualize the spread and clustering of values.${n ? ` ${n}` : ""}`,
+          children: /* @__PURE__ */ r.jsx(
+            "div",
+            {
+              className: "flex grow",
+              style: { padding: a ? k || "1rem" : k || 0 },
+              children: /* @__PURE__ */ r.jsxs("div", { className: "flex flex-col w-full gap-4 grow justify-between", children: [
+                d || n || I || m ? /* @__PURE__ */ r.jsx(
+                  ji,
+                  {
+                    styles: {
+                      title: u?.title,
+                      description: u?.description
+                    },
+                    classNames: {
+                      title: g?.title,
+                      description: g?.description
+                    },
+                    graphTitle: d,
+                    graphDescription: n,
+                    width: s,
+                    graphDownload: I ? ci.current : void 0,
+                    dataDownload: m ? o.map((l) => l.data).filter((l) => l !== void 0).length > 0 ? o.map((l) => l.data).filter((l) => l !== void 0) : o.filter((l) => l !== void 0) : null
+                  }
+                ) : null,
+                /* @__PURE__ */ r.jsx("div", { className: "grow flex flex-col justify-center gap-3 w-full", children: o.length === 0 ? /* @__PURE__ */ r.jsx(Di, {}) : /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+                  y !== !1 && o.filter((l) => l.color).length !== 0 ? /* @__PURE__ */ r.jsx(
+                    Mi,
+                    {
+                      width: s,
+                      colorLegendTitle: ii,
+                      colors: p || c[f].categoricalColors.colors,
+                      colorDomain: Y || gi(
+                        o.filter((l) => l.color),
+                        "color"
+                      ).map((l) => l.color),
+                      setSelectedColor: fi,
+                      showNAColor: H ?? !0
+                    }
+                  ) : null,
+                  /* @__PURE__ */ r.jsx(
+                    "div",
+                    {
+                      className: "flex flex-col grow justify-center w-full leading-0",
+                      ref: Z,
+                      "aria-label": "Graph area",
+                      children: (s || C) && (h || li) ? /* @__PURE__ */ r.jsx(
+                        Vi,
+                        {
+                          data: o,
+                          width: s || C,
+                          height: Math.max(
+                            x,
+                            h || (b ? x ? (s || C) * b > x ? (s || C) * b : x : (s || C) * b : li)
+                          ),
+                          colorDomain: o.filter((l) => l.color).length === 0 ? [] : Y || gi(
+                            o.filter((l) => l.color),
+                            "color"
+                          ).map((l) => l.color),
+                          colors: o.filter((l) => l.color).length === 0 ? p ? [p] : [c.primaryColors["blue-600"]] : p || c[f].categoricalColors.colors,
+                          selectedColor: t,
+                          radius: F,
+                          leftMargin: R,
+                          rightMargin: G,
+                          topMargin: _,
+                          bottomMargin: S,
+                          tooltip: K,
+                          onSeriesMouseOver: Q,
+                          highlightedDataPoints: v,
+                          minValue: N,
+                          maxValue: j,
+                          onSeriesMouseClick: $,
+                          prefix: w,
+                          suffix: T,
+                          stripType: B,
+                          highlightColor: q,
+                          dotOpacity: D,
+                          resetSelectionOnDoubleClick: U,
+                          detailsOnClick: L,
+                          styles: u,
+                          classNames: g,
+                          valueColor: O,
+                          animate: V === !0 ? { duration: 0.5, once: !0, amount: 0.5 } : V || { duration: 0, once: !0, amount: 0 },
+                          noOfTicks: W,
+                          dimmedOpacity: oi,
+                          precision: ei,
+                          customLayers: ri
+                        }
+                      ) : null
+                    }
+                  )
+                ] }) }),
+                e || X ? /* @__PURE__ */ r.jsx(
+                  Ci,
+                  {
+                    styles: { footnote: u?.footnote, source: u?.source },
+                    classNames: {
+                      footnote: g?.footnote,
+                      source: g?.source
+                    },
+                    sources: e,
+                    footNote: X,
+                    width: s
+                  }
+                ) : null
+              ] })
+            }
+          )
+        }
+      )
+    }
+  );
+}
+function Si(P) {
+  const {
+    data: o,
+    width: d,
+    height: p,
+    colors: e,
+    colorDomain: n,
+    radius: h,
+    leftMargin: s,
+    rightMargin: X,
+    topMargin: Y,
+    bottomMargin: ii,
+    tooltip: F,
+    onSeriesMouseOver: k,
+    highlightedDataPoints: a,
+    selectedColor: R,
+    minValue: G,
+    maxValue: _,
+    onSeriesMouseClick: S,
+    noOfTicks: K,
+    prefix: b,
+    suffix: Q,
+    stripType: y,
+    highlightColor: v,
+    dotOpacity: ti,
+    resetSelectionOnDoubleClick: N,
+    detailsOnClick: j,
+    styles: $,
+    classNames: I,
+    valueColor: m,
+    animate: w,
+    dimmedOpacity: T,
+    precision: B,
+    customLayers: M
+  } = P, q = si(null), D = wi(q, {
+    once: w.once,
+    amount: w.amount
+  }), [H, x] = E(void 0), [f, A] = E(void 0), [U, L] = E(void 0), [u, g] = E(void 0), O = {
+    top: Y,
+    bottom: ii,
+    left: s,
+    right: X
+  }, V = d - O.left - O.right, W = p - O.top - O.bottom, oi = o.map((i, t) => ({ ...i, id: `${t}` })), ei = mi(oi, (i) => {
+    const t = (a || []).indexOf(i.label);
+    return t === -1 ? 1 / 0 : t;
+  }).reverse(), ri = J(_) ? Math.max(...o.filter((i) => !J(i.position)).map((i) => i.position)) < 0 ? 0 : Math.max(...o.filter((i) => !J(i.position)).map((i) => i.position)) : _, C = J(G) ? Math.min(...o.filter((i) => !J(i.position)).map((i) => i.position)) >= 0 ? 0 : Math.min(...o.filter((i) => !J(i.position)).map((i) => i.position)) : G, z = Oi().domain([C, ri]).range([W, 0]).nice(), li = Ni(K, W);
+  return /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+    /* @__PURE__ */ r.jsx(
+      ai.svg,
+      {
+        width: `${d}px`,
+        height: `${p}px`,
+        viewBox: `0 0 ${d} ${p}`,
+        direction: "ltr",
+        ref: q,
+        children: /* @__PURE__ */ r.jsxs("g", { transform: `translate(${O.left},${O.top})`, children: [
+          M.filter((i) => i.position === "before").map((i) => i.layer),
+          /* @__PURE__ */ r.jsxs(bi, { children: [
+            ei.map((i) => /* @__PURE__ */ r.jsxs(
+              ai.g,
+              {
+                className: "undp-viz-g-with-hover",
+                variants: {
+                  initial: {
+                    opacity: 0,
+                    x: V / 2,
+                    y: z(0)
+                  },
+                  whileInView: {
+                    x: V / 2,
+                    y: z(i.position),
+                    opacity: R ? i.color && e[n.indexOf(i.color)] === R ? 0.95 : T : a.length !== 0 ? a.indexOf(i.label) !== -1 ? 0.95 : T : ti,
+                    transition: { duration: w.duration }
+                  }
+                },
+                initial: "initial",
+                animate: D ? "whileInView" : "initial",
+                exit: { opacity: 0, transition: { duration: w.duration } },
+                onMouseEnter: (t) => {
+                  x(i), g(t.clientY), L(t.clientX), k?.(i);
+                },
+                onClick: () => {
+                  (S || j) && (pi(f, i) && N ? (A(void 0), S?.(void 0)) : (A(i), S?.(i)));
+                },
+                onMouseMove: (t) => {
+                  x(i), g(t.clientY), L(t.clientX);
+                },
+                onMouseLeave: () => {
+                  x(void 0), L(void 0), g(void 0), k?.(void 0);
+                },
+                children: [
+                  y === "dot" ? /* @__PURE__ */ r.jsx(
+                    ai.circle,
+                    {
+                      cy: 0,
+                      cx: 0,
+                      variants: {
+                        initial: {
+                          fill: v && a ? a.indexOf(i.label) !== -1 ? v : o.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[n.indexOf(i.color)] : c.gray : o.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[n.indexOf(i.color)] : c.gray
+                        },
+                        whileInView: {
+                          fill: v && a ? a.indexOf(i.label) !== -1 ? v : o.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[n.indexOf(i.color)] : c.gray : o.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[n.indexOf(i.color)] : c.gray,
+                          transition: { duration: w.duration }
+                        }
+                      },
+                      initial: "initial",
+                      animate: D ? "whileInView" : "initial",
+                      exit: { opacity: 0, transition: { duration: w.duration } },
+                      r: h
+                    }
+                  ) : /* @__PURE__ */ r.jsx(
+                    ai.rect,
+                    {
+                      x: 0 - h,
+                      y: -1,
+                      width: h * 2,
+                      height: 2,
+                      variants: {
+                        initial: {
+                          fill: v && a ? a.indexOf(i.label) !== -1 ? v : o.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[n.indexOf(i.color)] : c.gray : o.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[n.indexOf(i.color)] : c.gray
+                        },
+                        whileInView: {
+                          fill: v && a ? a.indexOf(i.label) !== -1 ? v : o.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[n.indexOf(i.color)] : c.gray : o.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[n.indexOf(i.color)] : c.gray,
+                          transition: { duration: w.duration }
+                        }
+                      },
+                      initial: "initial",
+                      animate: D ? "whileInView" : "initial",
+                      exit: { opacity: 0, transition: { duration: w.duration } }
+                    }
+                  ),
+                  a.length !== 0 && a.indexOf(i.label) !== -1 ? /* @__PURE__ */ r.jsx(
+                    ai.text,
+                    {
+                      y: 0,
+                      dy: "0.33em",
+                      x: 0 + h + 3,
+                      variants: {
+                        initial: { opacity: 0 },
+                        whileInView: {
+                          opacity: 1,
+                          transition: { duration: w.duration }
+                        }
+                      },
+                      initial: "initial",
+                      animate: D ? "whileInView" : "initial",
+                      exit: { opacity: 0, transition: { duration: w.duration } },
+                      style: {
+                        fill: m || (v && a ? a.indexOf(i.label) !== -1 ? v : o.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[n.indexOf(i.color)] : c.gray : o.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[n.indexOf(i.color)] : c.gray),
+                        textAnchor: "start",
+                        ...$?.graphObjectValues || {}
+                      },
+                      className: ni(
+                        "graph-value text-sm font-bold",
+                        I?.graphObjectValues
+                      ),
+                      children: di(i.position, "NA", B, b, Q)
+                    }
+                  ) : null
+                ]
+              },
+              i.label
+            )),
+            li.map((i, t) => /* @__PURE__ */ r.jsx(
+              "text",
+              {
+                y: i,
+                x: V / 2 + h + 5,
+                style: {
+                  textAnchor: "start",
+                  ...$?.yAxis?.labels || {}
+                },
+                className: ni(
+                  "fill-primary-gray-550 dark:fill-primary-gray-500 text-xs",
+                  I?.yAxis?.labels
+                ),
+                children: di(z.invert(i), "NA", B, b, Q)
+              },
+              t
+            ))
+          ] }),
+          M.filter((i) => i.position === "after").map((i) => i.layer)
+        ] })
+      }
+    ),
+    H && F && U && u ? /* @__PURE__ */ r.jsx(
+      yi,
+      {
+        data: H,
+        body: F,
+        xPos: U,
+        yPos: u,
+        backgroundStyle: $?.tooltip,
+        className: I?.tooltip
+      }
+    ) : null,
+    j && f !== void 0 ? /* @__PURE__ */ r.jsx(
+      xi,
+      {
+        open: f !== void 0,
+        onClose: () => {
+          A(void 0);
+        },
+        children: /* @__PURE__ */ r.jsx(
+          "div",
+          {
+            className: "graph-modal-content m-0",
+            dangerouslySetInnerHTML: typeof j == "string" ? { __html: vi(j, f) } : void 0,
+            children: typeof j == "function" ? j(f) : null
+          }
+        )
+      }
+    ) : null
+  ] });
+}
+function $i(P) {
+  const {
+    data: o,
+    graphTitle: d,
+    colors: p,
+    sources: e,
+    graphDescription: n,
+    height: h,
+    width: s,
+    footNote: X,
+    colorDomain: Y,
+    colorLegendTitle: ii,
+    radius: F = 5,
+    padding: k,
+    backgroundColor: a = !1,
+    leftMargin: R = 20,
+    rightMargin: G = 20,
+    topMargin: _ = 10,
+    bottomMargin: S = 10,
+    tooltip: K,
+    relativeHeight: b,
+    onSeriesMouseOver: Q,
+    showColorScale: y = !0,
+    highlightedDataPoints: v = [],
+    graphID: ti,
+    minValue: N,
+    maxValue: j,
+    onSeriesMouseClick: $,
+    graphDownload: I = !1,
+    dataDownload: m = !1,
+    prefix: w = "",
+    suffix: T = "",
+    stripType: B = "dot",
+    language: M = "en",
+    highlightColor: q,
+    dotOpacity: D = 0.3,
+    showNAColor: H = !0,
+    minHeight: x = 0,
+    theme: f = "light",
+    ariaLabel: A,
+    resetSelectionOnDoubleClick: U = !0,
+    detailsOnClick: L,
+    styles: u,
+    classNames: g,
+    valueColor: O,
+    animate: V = !1,
+    noOfTicks: W = 2,
+    dimmedOpacity: oi = 0.3,
+    precision: ei = 2,
+    customLayers: ri = []
+  } = P, [C, z] = E(0), [li, i] = E(0), [t, fi] = E(void 0), Z = si(null), ci = si(null);
+  return ui(() => {
+    const l = new ResizeObserver((hi) => {
+      z(s || hi[0].target.clientWidth || 620), i(h || hi[0].target.clientHeight || 480);
+    });
+    return Z.current && (i(Z.current.clientHeight || 480), z(Z.current.clientWidth || 620), s || l.observe(Z.current)), () => l.disconnect();
+  }, [s, h]), /* @__PURE__ */ r.jsx(
+    "div",
+    {
+      className: `${f || "light"} flex  ${s ? "w-fit grow-0" : "w-full grow"}`,
+      dir: M === "he" || M === "ar" ? "rtl" : void 0,
+      children: /* @__PURE__ */ r.jsx(
+        "div",
+        {
+          className: ni(
+            `${a ? a === !0 ? "bg-primary-gray-200 dark:bg-primary-gray-650 " : "" : "bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${M || "en"}`,
+            g?.graphContainer
+          ),
+          style: {
+            ...u?.graphContainer || {},
+            ...a && a !== !0 ? { backgroundColor: a } : {}
+          },
+          id: ti,
+          ref: ci,
+          "aria-label": A || `${d ? `The graph shows ${d}. ` : ""}This is a strip chart showing distribution of data along the vertical axis. Each dot represents an individual data point, helping to visualize the spread and clustering of values.${n ? ` ${n}` : ""}`,
+          children: /* @__PURE__ */ r.jsx(
+            "div",
+            {
+              className: "flex grow",
+              style: { padding: a ? k || "1rem" : k || 0 },
+              children: /* @__PURE__ */ r.jsxs("div", { className: "flex flex-col w-full gap-4 grow justify-between", children: [
+                d || n || I || m ? /* @__PURE__ */ r.jsx(
+                  ji,
+                  {
+                    styles: {
+                      title: u?.title,
+                      description: u?.description
+                    },
+                    classNames: {
+                      title: g?.title,
+                      description: g?.description
+                    },
+                    graphTitle: d,
+                    graphDescription: n,
+                    width: s,
+                    graphDownload: I ? ci.current : void 0,
+                    dataDownload: m ? o.map((l) => l.data).filter((l) => l !== void 0).length > 0 ? o.map((l) => l.data).filter((l) => l !== void 0) : o.filter((l) => l !== void 0) : null
+                  }
+                ) : null,
+                /* @__PURE__ */ r.jsx("div", { className: "grow flex flex-col justify-center gap-3 w-full", children: o.length === 0 ? /* @__PURE__ */ r.jsx(Di, {}) : /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+                  y !== !1 && o.filter((l) => l.color).length !== 0 ? /* @__PURE__ */ r.jsx(
+                    Mi,
+                    {
+                      width: s,
+                      colorLegendTitle: ii,
+                      colors: p || c[f].categoricalColors.colors,
+                      colorDomain: Y || gi(
+                        o.filter((l) => l.color),
+                        "color"
+                      ).map((l) => l.color),
+                      setSelectedColor: fi,
+                      showNAColor: H
+                    }
+                  ) : null,
+                  /* @__PURE__ */ r.jsx(
+                    "div",
+                    {
+                      className: "flex flex-col grow justify-center w-full leading-0",
+                      ref: Z,
+                      children: (s || C) && (h || li) ? /* @__PURE__ */ r.jsx(
+                        Si,
+                        {
+                          data: o,
+                          width: s || C,
+                          height: Math.max(
+                            x,
+                            h || (b ? x ? (s || C) * b > x ? (s || C) * b : x : (s || C) * b : li)
+                          ),
+                          colorDomain: o.filter((l) => l.color).length === 0 ? [] : Y || gi(
+                            o.filter((l) => l.color),
+                            "color"
+                          ).map((l) => l.color),
+                          colors: o.filter((l) => l.color).length === 0 ? p ? [p] : [c.primaryColors["blue-600"]] : p || c[f].categoricalColors.colors,
+                          selectedColor: t,
+                          radius: F,
+                          leftMargin: R,
+                          rightMargin: G,
+                          topMargin: _,
+                          bottomMargin: S,
+                          tooltip: K,
+                          onSeriesMouseOver: Q,
+                          highlightedDataPoints: v,
+                          minValue: N,
+                          maxValue: j,
+                          onSeriesMouseClick: $,
+                          prefix: w,
+                          suffix: T,
+                          stripType: B,
+                          highlightColor: q,
+                          dotOpacity: D,
+                          resetSelectionOnDoubleClick: U,
+                          detailsOnClick: L,
+                          styles: u,
+                          classNames: g,
+                          valueColor: O,
+                          animate: V === !0 ? { duration: 0.5, once: !0, amount: 0.5 } : V || { duration: 0, once: !0, amount: 0 },
+                          noOfTicks: W,
+                          dimmedOpacity: oi,
+                          precision: ei,
+                          customLayers: ri
+                        }
+                      ) : null
+                    }
+                  )
+                ] }) }),
+                e || X ? /* @__PURE__ */ r.jsx(
+                  Ci,
+                  {
+                    styles: { footnote: u?.footnote, source: u?.source },
+                    classNames: {
+                      footnote: g?.footnote,
+                      source: g?.source
+                    },
+                    sources: e,
+                    footNote: X,
+                    width: s
+                  }
+                ) : null
+              ] })
+            }
+          )
+        }
+      )
+    }
+  );
+}
+function Ki(P) {
+  const {
+    data: o,
+    graphTitle: d,
+    colors: p,
+    sources: e,
+    graphDescription: n,
+    height: h,
+    width: s,
+    footNote: X,
+    colorDomain: Y,
+    colorLegendTitle: ii,
+    radius: F,
+    padding: k,
+    backgroundColor: a,
+    leftMargin: R,
+    rightMargin: G,
+    topMargin: _,
+    bottomMargin: S,
+    tooltip: K,
+    relativeHeight: b,
+    onSeriesMouseOver: Q,
+    showColorScale: y,
+    highlightedDataPoints: v,
+    graphID: ti,
+    minValue: N,
+    maxValue: j,
+    onSeriesMouseClick: $,
+    noOfTicks: I,
+    graphDownload: m,
+    dataDownload: w,
+    prefix: T,
+    suffix: B,
+    stripType: M,
+    language: q,
+    highlightColor: D,
+    dotOpacity: H,
+    showNAColor: x,
+    minHeight: f,
+    theme: A,
+    ariaLabel: U,
+    valueColor: L,
+    resetSelectionOnDoubleClick: u,
+    detailsOnClick: g,
+    orientation: O = "vertical",
+    styles: V,
+    classNames: W,
+    animate: oi,
+    dimmedOpacity: ei = 0.3,
+    precision: ri,
+    customLayers: C
+  } = P;
+  return O === "vertical" ? /* @__PURE__ */ r.jsx(
+    $i,
+    {
+      data: o,
+      graphTitle: d,
+      colors: p,
+      sources: e,
+      graphDescription: n,
+      height: h,
+      width: s,
+      footNote: X,
+      colorDomain: Y,
+      colorLegendTitle: ii,
+      radius: F,
+      padding: k,
+      backgroundColor: a,
+      leftMargin: R,
+      rightMargin: G,
+      topMargin: _,
+      bottomMargin: S,
+      tooltip: K,
+      relativeHeight: b,
+      onSeriesMouseOver: Q,
+      showColorScale: y,
+      highlightedDataPoints: v,
+      graphID: ti,
+      minValue: N,
+      maxValue: j,
+      onSeriesMouseClick: $,
+      noOfTicks: I,
+      graphDownload: m,
+      dataDownload: w,
+      prefix: T,
+      suffix: B,
+      stripType: M,
+      language: q,
+      highlightColor: D,
+      dotOpacity: H,
+      showNAColor: x,
+      minHeight: f,
+      theme: A,
+      ariaLabel: U,
+      resetSelectionOnDoubleClick: u,
+      styles: V,
+      valueColor: L,
+      detailsOnClick: g,
+      classNames: W,
+      animate: oi,
+      dimmedOpacity: ei,
+      precision: ri,
+      customLayers: C
+    }
+  ) : /* @__PURE__ */ r.jsx(
+    ki,
+    {
+      data: o,
+      graphTitle: d,
+      colors: p,
+      sources: e,
+      graphDescription: n,
+      height: h,
+      width: s,
+      footNote: X,
+      colorDomain: Y,
+      colorLegendTitle: ii,
+      radius: F,
+      padding: k,
+      backgroundColor: a,
+      leftMargin: R,
+      rightMargin: G,
+      topMargin: _,
+      bottomMargin: S,
+      tooltip: K,
+      relativeHeight: b,
+      onSeriesMouseOver: Q,
+      showColorScale: y,
+      highlightedDataPoints: v,
+      graphID: ti,
+      minValue: N,
+      maxValue: j,
+      onSeriesMouseClick: $,
+      noOfTicks: I,
+      graphDownload: m,
+      dataDownload: w,
+      prefix: T,
+      suffix: B,
+      stripType: M,
+      language: q,
+      highlightColor: D,
+      dotOpacity: H,
+      showNAColor: x,
+      minHeight: f,
+      theme: A,
+      ariaLabel: U,
+      resetSelectionOnDoubleClick: u,
+      styles: V,
+      valueColor: L,
+      detailsOnClick: g,
+      classNames: W,
+      animate: oi,
+      dimmedOpacity: ei,
+      precision: ri,
+      customLayers: C
+    }
+  );
+}
+export {
+  Ki as StripChart
+};
+//# sourceMappingURL=StripChart.js.map