@undp/data-viz 1.3.1 → 1.4.1

package/dist/index-OCoyy1wG.js

@@ -1,635 +0,0 @@
-import { a as s, m, b as fe, j as i } from "./index-CHPV5EwG-BPSP-7Jg.js";
-import D, { useState as w, useEffect as z, useMemo as Q } from "react";
-import { i as ge } from "./index-C1rRk_50.js";
-import { f as A } from "./index-UV9hjG_S.js";
-import { s as he } from "./index-DxagiOHo.js";
-import { Z as W, H as Z } from "./DropdownSelect-CDC9lEqU.js";
-import { u as X } from "./Typography-Ctgfl1J5.js";
-import { b as P } from "./x-CnsEH4Ox-DDvAJndW.js";
-import { d as xe, e as be } from "./index-BmCqpO1B.js";
-import { X as ve } from "./Modal-CUU6ZK3U.js";
-import { CsvDownloadButton as Ne } from "./CsvDownloadButton.js";
-import { s as J } from "./string2HTML-CWHGfz_d.js";
-import { GraphFooter as je } from "./GraphFooter.js";
-import { GraphHeader as we } from "./GraphHeader.js";
-import { g as ke } from "./getUniqValue-BtUENB2H.js";
-/**
- * @license lucide-react v0.488.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const Ce = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]], Se = P("chevron-left", Ce);
-/**
- * @license lucide-react v0.488.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const $e = [
-  ["circle", { cx: "12", cy: "12", r: "1", key: "41hilf" }],
-  ["circle", { cx: "19", cy: "12", r: "1", key: "1wjl8i" }],
-  ["circle", { cx: "5", cy: "12", r: "1", key: "1pcz8c" }]
-], De = P("ellipsis", $e);
-/**
- * @license lucide-react v0.488.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const Ve = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]], ze = P("chevron-right", Ve);
-function re({ className: a, ...e }) {
-  return /* @__PURE__ */ s.jsx(
-    "nav",
-    {
-      ...e,
-      role: "navigation",
-      "aria-label": "pagination",
-      className: m("mx-auto flex w-full justify-center", a)
-    }
-  );
-}
-re.displayName = "PaginationUnit";
-const te = D.forwardRef(
-  ({ className: a, ...e }, l) => /* @__PURE__ */ s.jsx(
-    "ul",
-    {
-      ...e,
-      ref: l,
-      className: m("flex flex-row items-center gap-1 list-none", a)
-    }
-  )
-);
-te.displayName = "PaginationContent";
-const I = D.forwardRef(
-  ({ className: a, ...e }, l) => /* @__PURE__ */ s.jsx("li", { ...e, ref: l, className: m("mr-2 last:mr-0", a) })
-);
-I.displayName = "PaginationItem";
-function B({
-  className: a,
-  children: e,
-  ...l
-}) {
-  return /* @__PURE__ */ s.jsx(
-    "button",
-    {
-      ...l,
-      type: "button",
-      className: m(
-        "p-4 text-base text-primary-black dark:text-primary-gray-100 dark:hover:bg-primary-gray-600",
-        a
-      ),
-      children: e
-    }
-  );
-}
-B.displayName = "PaginationLink";
-function se({ className: a, ...e }) {
-  return /* @__PURE__ */ s.jsx(
-    B,
-    {
-      ...e,
-      "aria-label": "Go to previous page",
-      className: m(
-        "p-2 bg-primary-gray-300 dark:bg-primary-gray-600 rtl:scale-x-[-1] rounded-full hover:bg-primary-gray-400 dark:hover:bg-primary-gray-550",
-        a
-      ),
-      children: /* @__PURE__ */ s.jsx(Se, { className: "h-6 w-6 stroke-primary-gray-700 dark:stroke-primary-gray-100" })
-    }
-  );
-}
-se.displayName = "PaginationPrevious";
-function le({ className: a, ...e }) {
-  return /* @__PURE__ */ s.jsx(
-    B,
-    {
-      ...e,
-      "aria-label": "Go to next page",
-      className: m(
-        "p-2 bg-primary-gray-300 dark:bg-primary-gray-600 rtl:scale-x-[-1] rounded-full hover:bg-primary-gray-400 dark:hover:bg-primary-gray-550",
-        a
-      ),
-      children: /* @__PURE__ */ s.jsx(ze, { className: "h-6 w-6 stroke-primary-gray-700 dark:stroke-primary-gray-100" })
-    }
-  );
-}
-le.displayName = "PaginationNext";
-function ie({ className: a, ...e }) {
-  return /* @__PURE__ */ s.jsxs(
-    "span",
-    {
-      ...e,
-      "aria-hidden": !0,
-      className: m("flex h-9 w-9 items-center justify-center", a),
-      children: [
-        /* @__PURE__ */ s.jsx(De, { className: "h-4 w-4 text-primary-gray-700 dark:text-primary-gray-100" }),
-        /* @__PURE__ */ s.jsx("span", { className: "sr-only", children: "More pages" })
-      ]
-    }
-  );
-}
-ie.displayName = "PaginationEllipsis";
-const Y = (a, e) => {
-  const l = [];
-  return e <= 7 ? Array.from({ length: e }, (n, c) => c + 1) : (l.push(1), a <= 3 ? l.push(2, 3, 4, "ellipsis") : a >= e - 2 ? l.push("ellipsis", e - 3, e - 2, e - 1) : l.push("ellipsis", a - 1, a, a + 1, "ellipsis"), l.push(e), l);
-};
-function Ie(a) {
-  const { defaultPage: e = 1, total: l, pageSize: n, onChange: c, className: p } = a, u = Math.ceil(l / n), [d, o] = w(e), [h, y] = w(
-    Y(e, u)
-  );
-  return z(() => {
-    y(Y(d, u));
-  }, [d, u]), /* @__PURE__ */ s.jsx(re, { className: m("select-none", p), children: /* @__PURE__ */ s.jsxs(te, { children: [
-    /* @__PURE__ */ s.jsx(I, { children: /* @__PURE__ */ s.jsx(
-      se,
-      {
-        onClick: () => {
-          d > 1 && (c(d - 1), o(d - 1));
-        },
-        className: m(
-          "cursor-pointer",
-          d <= 1 && "cursor-not-allowed pointer-events-none opacity-35"
-        )
-      }
-    ) }),
-    h.map((g, v) => /* @__PURE__ */ s.jsx(I, { children: g === "ellipsis" ? /* @__PURE__ */ s.jsx(ie, {}) : /* @__PURE__ */ s.jsx(
-      B,
-      {
-        onClick: () => {
-          o(g), c(g);
-        },
-        className: m(
-          "cursor-pointer w-[32px] h-[32px] flex items-center justify-center rounded-full hover:bg-primary-gray-300",
-          g === d && "bg-primary-blue-600 hover:bg-primary-blue-700 dark:bg-primary-blue-500 dark:hover:bg-primary-blue-400 hover:text-primary-wite text-primary-white"
-        ),
-        children: g
-      }
-    ) }, v)),
-    /* @__PURE__ */ s.jsx(I, { children: /* @__PURE__ */ s.jsx(
-      le,
-      {
-        onClick: () => {
-          d < u && (c(d + 1), o(d + 1));
-        },
-        className: m(
-          "cursor-pointer",
-          d >= u && "cursor-not-allowed pointer-events-none opacity-35"
-        )
-      }
-    ) })
-  ] }) });
-}
-const Pe = fe(
-  "w-full h-auto bg-primary-white dark:bg-primary-gray-650 text-primary-black dark:text-primary-white text-base transition-colors file:border-0 file:bg-transparent file:font-medium file:text-primary-gray-700 dark:file:text-primary-white focus-visible:outline-hidden focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 placeholder:text-primary-gray-550 dark:placeholder:text-primary-gray-400",
-  {
-    variants: {
-      variant: {
-        light: "border border-primary-gray-400 dark:border-primary-gray-500",
-        normal: "border-2 border-primary-black dark:border-primary-gray-300"
-      },
-      inputSize: {
-        sm: "px-2.5 py-1",
-        base: "p-2.5"
-      }
-    },
-    defaultVariants: {
-      inputSize: "base",
-      variant: "normal"
-    }
-  }
-), ne = D.forwardRef(({ className: a, inputSize: e, variant: l, ...n }, c) => /* @__PURE__ */ s.jsx("input", { ...n, ref: c, className: m(Pe({ inputSize: e, variant: l }), a) }));
-ne.displayName = "Input";
-/**
- * @license lucide-react v0.488.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const Be = [
-  ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }],
-  ["path", { d: "m21 21-4.3-4.3", key: "1qie3q" }]
-], ee = P("search", Be), oe = D.forwardRef(
-  ({
-    className: a,
-    inputClassName: e,
-    buttonClassName: l,
-    onSearch: n,
-    searchOnlyOnClick: c,
-    buttonVariant: p,
-    buttonChildren: u,
-    showSearchButton: d,
-    inputVariant: o,
-    inputSize: h,
-    placeholder: y,
-    ...g
-  }, v) => {
-    const [x, b] = D.useState(void 0), [N, r] = D.useState(!1);
-    return /* @__PURE__ */ s.jsxs("div", { className: m("flex gap-0", a), ref: v, children: [
-      /* @__PURE__ */ s.jsxs("div", { className: "relative w-full", children: [
-        /* @__PURE__ */ s.jsx(
-          ne,
-          {
-            ...g,
-            variant: o,
-            type: "text",
-            className: e,
-            onChange: (f) => {
-              b(f.target.value), c || n?.(f.target.value);
-            },
-            inputSize: h,
-            onKeyDown: (f) => {
-              f.key === "Enter" && n?.(x);
-            },
-            onFocus: () => r(!0),
-            onBlur: () => r(!1)
-          }
-        ),
-        !N && (x === "" || !x) && /* @__PURE__ */ s.jsxs("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none", children: [
-          u ? null : /* @__PURE__ */ s.jsx(ee, { className: "h-4 w-4 text-primary-gray-500 dark:text-primary-gray-400 mr-2" }),
-          /* @__PURE__ */ s.jsx("span", { className: "text-primary-gray-500 dark:text-primary-gray-400", children: y || "Search..." })
-        ] })
-      ] }),
-      d === !1 ? null : /* @__PURE__ */ s.jsx(
-        xe,
-        {
-          variant: p || "icon",
-          className: l,
-          padding: h,
-          onClick: () => {
-            n?.(x);
-          },
-          children: u || /* @__PURE__ */ s.jsx(ee, { className: "stroke-2" })
-        }
-      )
-    ] });
-  }
-);
-oe.displayName = "Search";
-const Oe = (a) => a ? Object.entries(a).map(([l, n]) => Array.isArray(n) ? {
-  " ": l,
-  value: `"${n.join("; ")}"`
-} : {
-  " ": l,
-  value: `"${n}"`
-}) : {};
-function Fe(a) {
-  const {
-    width: e,
-    height: l,
-    data: n,
-    onSeriesMouseClick: c,
-    cardTemplate: p,
-    cardBackgroundColor: u,
-    cardMinWidth: d = 320,
-    detailsOnClick: o,
-    noOfItemsInAPage: h,
-    styles: y,
-    classNames: g,
-    page: v,
-    allowDataDownloadOnDetail: x
-  } = a, [b, N] = w(void 0);
-  return /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
-    /* @__PURE__ */ i.jsx(
-      "div",
-      {
-        className: "undp-scrollbar w-full my-0 mx-auto grid gap-4 undp-viz-data-cards-container",
-        style: {
-          width: e ? `${e}px` : "100%",
-          height: l ? `${l}px` : "auto",
-          gridTemplateColumns: `repeat(auto-fill, minmax(${d}px, 1fr))`
-        },
-        children: n.filter(
-          (r, f) => h ? f < v * h && f >= (v - 1) * h : !0
-        ).map((r, f) => /* @__PURE__ */ i.jsx(
-          "div",
-          {
-            style: {
-              ...y?.dataCards || {},
-              ...u && { backgroundColor: u }
-            },
-            className: `w-full flex flex-col ${c || o ? "cursor-pointer" : "cursor-auto"}${u ? "" : "bg-primary-gray-200 dark:bg-primary-gray-600"} ${g?.dataCards || ""}`,
-            onClick: () => {
-              c?.(r), N(r);
-            },
-            dangerouslySetInnerHTML: typeof p == "string" ? { __html: J(p, r) } : void 0,
-            children: typeof p == "function" ? p(r) : null
-          },
-          f
-        ))
-      }
-    ),
-    o && b !== void 0 ? /* @__PURE__ */ i.jsxs(
-      ve,
-      {
-        open: b !== void 0,
-        onClose: () => {
-          N(void 0);
-        },
-        children: [
-          /* @__PURE__ */ i.jsx(
-            "div",
-            {
-              className: "graph-modal-content m-0",
-              dangerouslySetInnerHTML: typeof o == "string" ? { __html: J(o, b) } : void 0,
-              children: typeof o == "function" ? o(b) : null
-            }
-          ),
-          x ? /* @__PURE__ */ i.jsx("div", { className: "flex", children: /* @__PURE__ */ i.jsx(
-            Ne,
-            {
-              csvData: Oe(b),
-              headers: [
-                {
-                  label: " ",
-                  key: " "
-                },
-                {
-                  label: "value",
-                  key: "value"
-                }
-              ],
-              buttonContent: /* @__PURE__ */ i.jsxs("div", { className: "flex items-center gap-4", children: [
-                typeof x == "string" ? x : null,
-                /* @__PURE__ */ i.jsx(be, {})
-              ] })
-            }
-          ) }) : null
-        ]
-      }
-    ) : null
-  ] });
-}
-function ae(a) {
-  if (a !== void 0)
-    return Array.isArray(a) ? a.map((e) => ({
-      value: e,
-      label: e
-    })) : {
-      value: a,
-      label: a
-    };
-}
-const Me = (a, e, l) => e.length === 0 ? a : a.filter(
-  (n) => e.some((c) => n[c]?.toLowerCase().includes(l.toLowerCase()))
-);
-function Je(a) {
-  const {
-    width: e,
-    height: l,
-    graphTitle: n,
-    sources: c,
-    graphDescription: p,
-    footNote: u,
-    graphID: d,
-    data: o,
-    onSeriesMouseClick: h,
-    language: y = "en",
-    theme: g = "light",
-    ariaLabel: v,
-    cardTemplate: x,
-    cardBackgroundColor: b,
-    cardFilters: N,
-    cardSortingOptions: r,
-    cardSearchColumns: f,
-    cardMinWidth: ce = 320,
-    backgroundColor: k = !1,
-    padding: L,
-    detailsOnClick: de,
-    allowDataDownloadOnDetail: ue = !1,
-    noOfItemsInAPage: O,
-    uiMode: F = "normal",
-    styles: C,
-    classNames: S
-  } = a, [M, _] = w(o), [me, H] = w(1), [q, pe] = w(""), G = Q(
-    () => (N || []).map((t) => ({
-      filter: t.column,
-      label: t.label || `Filter by ${t.column}`,
-      singleSelect: !0,
-      clearable: !0,
-      defaultValue: ae(t.defaultValue),
-      availableValues: ke(o, t.column).filter((j) => !t.excludeValues?.includes(`${j}`)).map((j) => ({ value: j, label: j })),
-      width: t.width
-    })),
-    [N, o]
-  ), [E, ye] = w(
-    (N || []).map((t) => ({
-      filter: t.column,
-      value: ae(t.defaultValue)
-    }))
-  ), [V, U] = w(
-    r ? !r.defaultValue || r.options.findIndex((t) => t.label === r.defaultValue) === -1 ? r.options[0] : r.options[r.options.findIndex((t) => t.label === r.defaultValue)] : void 0
-  ), K = Q(
-    () => ({
-      ignoreCase: !0,
-      ignoreAccents: !0,
-      trim: !0
-    }),
-    []
-  );
-  return z(() => {
-    U(
-      r ? !r.defaultValue || r.options.findIndex(
-        (t) => t.label === r.defaultValue
-      ) === -1 ? r.options[0] : r.options[r.options.findIndex(
-        (t) => t.label === r.defaultValue
-      )] : void 0
-    );
-  }, [r]), z(() => {
-    const t = Me(o, f || [], q).filter(
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (j) => E.every(
-        ($) => $.value && A([$.value]).length > 0 ? ge(
-          A([j[$.filter]]),
-          A([$.value]).map((T) => T.value)
-        ).length > 0 : !0
-      )
-    );
-    _(V ? he(t, V?.value, V?.type) : t);
-  }, [o, f, q, E, V]), z(() => {
-    H(1);
-  }, [M]), /* @__PURE__ */ i.jsx(
-    "div",
-    {
-      className: `${g || "light"} flex  ${e ? "w-fit grow-0" : "w-full grow"}`,
-      dir: y === "he" || y === "ar" ? "rtl" : void 0,
-      children: /* @__PURE__ */ i.jsx(
-        "div",
-        {
-          className: m(
-            `${k ? k === !0 ? "bg-primary-gray-200 dark:bg-primary-gray-650 " : "" : "bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${y || "en"}`,
-            S?.graphContainer
-          ),
-          style: {
-            ...C?.graphContainer || {},
-            ...k && k !== !0 ? { backgroundColor: k } : {}
-          },
-          id: d,
-          "aria-label": v || `${n ? `The graph shows ${n}. ` : ""}This is an list of cards. ${p ? ` ${p}` : ""}`,
-          children: /* @__PURE__ */ i.jsx(
-            "div",
-            {
-              className: "flex grow",
-              style: { padding: k ? L || "1rem" : L || 0 },
-              children: /* @__PURE__ */ i.jsxs("div", { className: "flex flex-col grow gap-3 w-full justify-between", children: [
-                n || p ? /* @__PURE__ */ i.jsx(
-                  we,
-                  {
-                    styles: {
-                      title: C?.title,
-                      description: C?.description
-                    },
-                    classNames: {
-                      title: S?.title,
-                      description: S?.description
-                    },
-                    graphTitle: n,
-                    graphDescription: p,
-                    width: e
-                  }
-                ) : null,
-                r || G.length > 0 ? /* @__PURE__ */ i.jsxs("div", { className: "flex gap-4 flex-wrap items-start w-full", children: [
-                  r ? /* @__PURE__ */ i.jsxs(
-                    "div",
-                    {
-                      className: "grow shrink-0 min-w-[240px]",
-                      style: { width: r.width || "calc(25% - 0.75rem)" },
-                      children: [
-                        /* @__PURE__ */ i.jsx(
-                          X,
-                          {
-                            marginBottom: "xs",
-                            size: "sm",
-                            className: "text-primary-gray-700 dark:text-primary-gray-100",
-                            children: "Sort by"
-                          }
-                        ),
-                        /* @__PURE__ */ i.jsx(
-                          W,
-                          {
-                            options: r.options,
-                            isRtl: y === "he" || y === "ar",
-                            isSearchable: !0,
-                            filterOption: Z(K),
-                            onChange: (t) => {
-                              U(t || void 0);
-                            },
-                            variant: F,
-                            size: "sm",
-                            defaultValue: !r.defaultValue || r.options.findIndex(
-                              (t) => t.label === r.defaultValue
-                            ) === -1 ? r.options[0] : r.options[r.options.findIndex(
-                              (t) => t.label === r.defaultValue
-                            )]
-                          }
-                        )
-                      ]
-                    }
-                  ) : null,
-                  G?.map((t, j) => /* @__PURE__ */ i.jsxs(
-                    "div",
-                    {
-                      className: "grow shrink-0 min-w-[240px]",
-                      style: { width: t.width || "calc(25% - 0.75rem)" },
-                      children: [
-                        /* @__PURE__ */ i.jsx(
-                          X,
-                          {
-                            marginBottom: "xs",
-                            size: "sm",
-                            className: "text-primary-gray-700 dark:text-primary-gray-100",
-                            children: t.label
-                          }
-                        ),
-                        /* @__PURE__ */ i.jsx(
-                          W,
-                          {
-                            options: t.availableValues,
-                            isClearable: t.clearable === void 0 ? !0 : t.clearable,
-                            isRtl: y === "he" || y === "ar",
-                            isSearchable: !0,
-                            variant: F,
-                            size: "sm",
-                            controlShouldRenderValue: !0,
-                            filterOption: Z(K),
-                            onChange: ($) => {
-                              ye(
-                                (T) => (
-                                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                                  T.map((R) => R.filter === t.filter ? { ...R, value: $ } : R)
-                                )
-                              );
-                            },
-                            defaultValue: t.defaultValue
-                          }
-                        )
-                      ]
-                    },
-                    j
-                  ))
-                ] }) : null,
-                (f || []).length > 0 ? /* @__PURE__ */ i.jsx("div", { style: { paddingTop: "1px" }, children: /* @__PURE__ */ i.jsx(
-                  oe,
-                  {
-                    placeholder: "Search...",
-                    onSearch: (t) => {
-                      pe(t || "");
-                    },
-                    buttonVariant: "icon",
-                    inputVariant: F,
-                    showSearchButton: !1,
-                    inputSize: "sm"
-                  }
-                ) }) : null,
-                /* @__PURE__ */ i.jsx(
-                  Fe,
-                  {
-                    data: M,
-                    width: e,
-                    height: l,
-                    cardTemplate: x,
-                    cardMinWidth: ce,
-                    page: me,
-                    cardBackgroundColor: b,
-                    styles: C,
-                    classNames: S,
-                    noOfItemsInAPage: O,
-                    detailsOnClick: de,
-                    onSeriesMouseClick: h,
-                    allowDataDownloadOnDetail: ue
-                  }
-                ),
-                O ? /* @__PURE__ */ i.jsx(
-                  Ie,
-                  {
-                    total: M.length,
-                    defaultPage: 0,
-                    pageSize: O,
-                    onChange: H
-                  }
-                ) : null,
-                c || u ? /* @__PURE__ */ i.jsx(
-                  je,
-                  {
-                    styles: { footnote: C?.footnote, source: C?.source },
-                    classNames: {
-                      footnote: S?.footnote,
-                      source: S?.source
-                    },
-                    sources: c,
-                    footNote: u,
-                    width: e
-                  }
-                ) : null
-              ] })
-            }
-          )
-        }
-      )
-    }
-  );
-}
-export {
-  Je as D,
-  ae as t
-};
-//# sourceMappingURL=index-OCoyy1wG.js.map