@undp/data-viz 1.3.0 → 1.4.0

package/dist/DataCards.js

@@ -1,2 +1,625 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("./index-BHm2KTjD-D8FylaKc.cjs");require("react");require("./index-Ds0uHjK9.cjs");require("./index-B0rbzOoC.cjs");require("./index-BzeLQvXk.cjs");require("./DropdownSelect-CuzV7gdj.cjs");require("./Typography-CDR-DAHH.cjs");const e=require("./index-BGMGC-HN.cjs");require("./GraphFooter.js");require("./GraphHeader.js");require("./getUniqValue.js");exports.DataCards=e.DataCards;
+import { a as s, m, b as ye, j as i } from "./index-CHPV5EwG-BPSP-7Jg.js";
+import $, { useState as w, useEffect as z, useMemo as Q } from "react";
+import { i as ge } from "./index-C1rRk_50.js";
+import { f as L } 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";
+import { t as Y } from "./transformDataForSelect-D8AuvYdf.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 Ve = [
+  ["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" }]
+], $e = P("ellipsis", Ve);
+/**
+ * @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 De = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]], ze = P("chevron-right", De);
+function re({ className: t, ...e }) {
+  return /* @__PURE__ */ s.jsx(
+    "nav",
+    {
+      ...e,
+      role: "navigation",
+      "aria-label": "pagination",
+      className: m("mx-auto flex w-full justify-center", t)
+    }
+  );
+}
+re.displayName = "PaginationUnit";
+const te = $.forwardRef(
+  ({ className: t, ...e }, l) => /* @__PURE__ */ s.jsx(
+    "ul",
+    {
+      ...e,
+      ref: l,
+      className: m("flex flex-row items-center gap-1 list-none", t)
+    }
+  )
+);
+te.displayName = "PaginationContent";
+const I = $.forwardRef(
+  ({ className: t, ...e }, l) => /* @__PURE__ */ s.jsx("li", { ...e, ref: l, className: m("mr-2 last:mr-0", t) })
+);
+I.displayName = "PaginationItem";
+function B({
+  className: t,
+  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",
+        t
+      ),
+      children: e
+    }
+  );
+}
+B.displayName = "PaginationLink";
+function se({ className: t, ...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",
+        t
+      ),
+      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: t, ...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",
+        t
+      ),
+      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: t, ...e }) {
+  return /* @__PURE__ */ s.jsxs(
+    "span",
+    {
+      ...e,
+      "aria-hidden": !0,
+      className: m("flex h-9 w-9 items-center justify-center", t),
+      children: [
+        /* @__PURE__ */ s.jsx($e, { 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 ee = (t, e) => {
+  const l = [];
+  return e <= 7 ? Array.from({ length: e }, (n, c) => c + 1) : (l.push(1), t <= 3 ? l.push(2, 3, 4, "ellipsis") : t >= e - 2 ? l.push("ellipsis", e - 3, e - 2, e - 1) : l.push("ellipsis", t - 1, t, t + 1, "ellipsis"), l.push(e), l);
+};
+function Ie(t) {
+  const { defaultPage: e = 1, total: l, pageSize: n, onChange: c, className: p } = t, u = Math.ceil(l / n), [d, o] = w(e), [h, f] = w(
+    ee(e, u)
+  );
+  return z(() => {
+    f(ee(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 = ye(
+  "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 = $.forwardRef(({ className: t, inputSize: e, variant: l, ...n }, c) => /* @__PURE__ */ s.jsx("input", { ...n, ref: c, className: m(Pe({ inputSize: e, variant: l }), t) }));
+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" }]
+], ae = P("search", Be), oe = $.forwardRef(
+  ({
+    className: t,
+    inputClassName: e,
+    buttonClassName: l,
+    onSearch: n,
+    searchOnlyOnClick: c,
+    buttonVariant: p,
+    buttonChildren: u,
+    showSearchButton: d,
+    inputVariant: o,
+    inputSize: h,
+    placeholder: f,
+    ...g
+  }, v) => {
+    const [x, b] = $.useState(void 0), [N, a] = $.useState(!1);
+    return /* @__PURE__ */ s.jsxs("div", { className: m("flex gap-0", t), ref: v, children: [
+      /* @__PURE__ */ s.jsxs("div", { className: "relative w-full", children: [
+        /* @__PURE__ */ s.jsx(
+          ne,
+          {
+            ...g,
+            variant: o,
+            type: "text",
+            className: e,
+            onChange: (y) => {
+              b(y.target.value), c || n?.(y.target.value);
+            },
+            inputSize: h,
+            onKeyDown: (y) => {
+              y.key === "Enter" && n?.(x);
+            },
+            onFocus: () => a(!0),
+            onBlur: () => a(!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(ae, { 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: f || "Search..." })
+        ] })
+      ] }),
+      d === !1 ? null : /* @__PURE__ */ s.jsx(
+        xe,
+        {
+          variant: p || "icon",
+          className: l,
+          padding: h,
+          onClick: () => {
+            n?.(x);
+          },
+          children: u || /* @__PURE__ */ s.jsx(ae, { className: "stroke-2" })
+        }
+      )
+    ] });
+  }
+);
+oe.displayName = "Search";
+const Oe = (t) => t ? Object.entries(t).map(([l, n]) => Array.isArray(n) ? {
+  " ": l,
+  value: `"${n.join("; ")}"`
+} : {
+  " ": l,
+  value: `"${n}"`
+}) : {};
+function Fe(t) {
+  const {
+    width: e,
+    height: l,
+    data: n,
+    onSeriesMouseClick: c,
+    cardTemplate: p,
+    cardBackgroundColor: u,
+    cardMinWidth: d = 320,
+    detailsOnClick: o,
+    noOfItemsInAPage: h,
+    styles: f,
+    classNames: g,
+    page: v,
+    allowDataDownloadOnDetail: x
+  } = t, [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(
+          (a, y) => h ? y < v * h && y >= (v - 1) * h : !0
+        ).map((a, y) => /* @__PURE__ */ i.jsx(
+          "div",
+          {
+            style: {
+              ...f?.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?.(a), N(a);
+            },
+            dangerouslySetInnerHTML: typeof p == "string" ? { __html: J(p, a) } : void 0,
+            children: typeof p == "function" ? p(a) : null
+          },
+          y
+        ))
+      }
+    ),
+    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
+  ] });
+}
+const Me = (t, e, l) => e.length === 0 ? t : t.filter(
+  (n) => e.some((c) => n[c]?.toLowerCase().includes(l.toLowerCase()))
+);
+function Ye(t) {
+  const {
+    width: e,
+    height: l,
+    graphTitle: n,
+    sources: c,
+    graphDescription: p,
+    footNote: u,
+    graphID: d,
+    data: o,
+    onSeriesMouseClick: h,
+    language: f = "en",
+    theme: g = "light",
+    ariaLabel: v,
+    cardTemplate: x,
+    cardBackgroundColor: b,
+    cardFilters: N,
+    cardSortingOptions: a,
+    cardSearchColumns: y,
+    cardMinWidth: ce = 320,
+    backgroundColor: k = !1,
+    padding: _,
+    detailsOnClick: de,
+    allowDataDownloadOnDetail: ue = !1,
+    noOfItemsInAPage: O,
+    uiMode: F = "normal",
+    styles: C,
+    classNames: S
+  } = t, [M, H] = w(o), [me, q] = w(1), [A, pe] = w(""), G = Q(
+    () => (N || []).map((r) => ({
+      filter: r.column,
+      label: r.label || `Filter by ${r.column}`,
+      singleSelect: !0,
+      clearable: !0,
+      defaultValue: Y(r.defaultValue),
+      availableValues: ke(o, r.column).filter((j) => !r.excludeValues?.includes(`${j}`)).map((j) => ({ value: j, label: j })),
+      width: r.width
+    })),
+    [N, o]
+  ), [E, fe] = w(
+    (N || []).map((r) => ({
+      filter: r.column,
+      value: Y(r.defaultValue)
+    }))
+  ), [D, U] = w(
+    a ? !a.defaultValue || a.options.findIndex((r) => r.label === a.defaultValue) === -1 ? a.options[0] : a.options[a.options.findIndex((r) => r.label === a.defaultValue)] : void 0
+  ), K = Q(
+    () => ({
+      ignoreCase: !0,
+      ignoreAccents: !0,
+      trim: !0
+    }),
+    []
+  );
+  return z(() => {
+    U(
+      a ? !a.defaultValue || a.options.findIndex(
+        (r) => r.label === a.defaultValue
+      ) === -1 ? a.options[0] : a.options[a.options.findIndex(
+        (r) => r.label === a.defaultValue
+      )] : void 0
+    );
+  }, [a]), z(() => {
+    const r = Me(o, y || [], A).filter(
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (j) => E.every(
+        (V) => V.value && L([V.value]).length > 0 ? ge(
+          L([j[V.filter]]),
+          L([V.value]).map((T) => T.value)
+        ).length > 0 : !0
+      )
+    );
+    H(D ? he(r, D?.value, D?.type) : r);
+  }, [o, y, A, E, D]), z(() => {
+    q(1);
+  }, [M]), /* @__PURE__ */ i.jsx(
+    "div",
+    {
+      className: `${g || "light"} flex  ${e ? "w-fit grow-0" : "w-full grow"}`,
+      dir: f === "he" || f === "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 ${f || "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 ? _ || "1rem" : _ || 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,
+                a || G.length > 0 ? /* @__PURE__ */ i.jsxs("div", { className: "flex gap-4 flex-wrap items-start w-full", children: [
+                  a ? /* @__PURE__ */ i.jsxs(
+                    "div",
+                    {
+                      className: "grow shrink-0 min-w-[240px]",
+                      style: { width: a.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: a.options,
+                            isRtl: f === "he" || f === "ar",
+                            isSearchable: !0,
+                            filterOption: Z(K),
+                            onChange: (r) => {
+                              U(r || void 0);
+                            },
+                            variant: F,
+                            size: "sm",
+                            defaultValue: !a.defaultValue || a.options.findIndex(
+                              (r) => r.label === a.defaultValue
+                            ) === -1 ? a.options[0] : a.options[a.options.findIndex(
+                              (r) => r.label === a.defaultValue
+                            )]
+                          }
+                        )
+                      ]
+                    }
+                  ) : null,
+                  G?.map((r, j) => /* @__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: r.label
+                          }
+                        ),
+                        /* @__PURE__ */ i.jsx(
+                          W,
+                          {
+                            options: r.availableValues,
+                            isClearable: r.clearable === void 0 ? !0 : r.clearable,
+                            isRtl: f === "he" || f === "ar",
+                            isSearchable: !0,
+                            variant: F,
+                            size: "sm",
+                            controlShouldRenderValue: !0,
+                            filterOption: Z(K),
+                            onChange: (V) => {
+                              fe(
+                                (T) => (
+                                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                  T.map((R) => R.filter === r.filter ? { ...R, value: V } : R)
+                                )
+                              );
+                            },
+                            defaultValue: r.defaultValue
+                          }
+                        )
+                      ]
+                    },
+                    j
+                  ))
+                ] }) : null,
+                (y || []).length > 0 ? /* @__PURE__ */ i.jsx("div", { style: { paddingTop: "1px" }, children: /* @__PURE__ */ i.jsx(
+                  oe,
+                  {
+                    placeholder: "Search...",
+                    onSearch: (r) => {
+                      pe(r || "");
+                    },
+                    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: q
+                  }
+                ) : 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 {
+  Ye as DataCards
+};
 //# sourceMappingURL=DataCards.js.map