@undp/data-viz 1.3.0 → 1.4.0

package/dist/DataCards.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataCards.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"DataCards.js","sources":["../node_modules/@undp/design-system-react/dist/chevron-left-CYk8BtgP.js","../node_modules/@undp/design-system-react/dist/ellipsis-DI18Y_N_.js","../node_modules/@undp/design-system-react/dist/chevron-right-C7tecYKo.js","../node_modules/@undp/design-system-react/dist/Pagination.js","../node_modules/@undp/design-system-react/dist/Input.js","../node_modules/@undp/design-system-react/dist/Search.js","../src/Components/Graphs/DataCards/Graph.tsx","../src/Components/Graphs/DataCards/index.tsx"],"sourcesContent":["import { c as e } from \"./createLucideIcon-C8GTh_Qx.js\";\n/**\n * @license lucide-react v0.488.0 - ISC\n *\n * This source code is licensed under the ISC license.\n * See the LICENSE file in the root directory of this source tree.\n */\nconst o = [[\"path\", { d: \"m15 18-6-6 6-6\", key: \"1wnfg3\" }]], t = e(\"chevron-left\", o);\nexport {\n  t as C\n};\n//# sourceMappingURL=chevron-left-CYk8BtgP.js.map\n","import { c } from \"./createLucideIcon-C8GTh_Qx.js\";\n/**\n * @license lucide-react v0.488.0 - ISC\n *\n * This source code is licensed under the ISC license.\n * See the LICENSE file in the root directory of this source tree.\n */\nconst e = [\n  [\"circle\", { cx: \"12\", cy: \"12\", r: \"1\", key: \"41hilf\" }],\n  [\"circle\", { cx: \"19\", cy: \"12\", r: \"1\", key: \"1wjl8i\" }],\n  [\"circle\", { cx: \"5\", cy: \"12\", r: \"1\", key: \"1pcz8c\" }]\n], r = c(\"ellipsis\", e);\nexport {\n  r as E\n};\n//# sourceMappingURL=ellipsis-DI18Y_N_.js.map\n","import { c as o } from \"./createLucideIcon-C8GTh_Qx.js\";\n/**\n * @license lucide-react v0.488.0 - ISC\n *\n * This source code is licensed under the ISC license.\n * See the LICENSE file in the root directory of this source tree.\n */\nconst t = [[\"path\", { d: \"m9 18 6-6-6-6\", key: \"mthhwq\" }]], e = o(\"chevron-right\", t);\nexport {\n  e as C\n};\n//# sourceMappingURL=chevron-right-C7tecYKo.js.map\n","import { j as e } from \"./jsx-runtime-OVHDjVDe.js\";\nimport x, { useState as u, useEffect as P } from \"react\";\nimport { c as n } from \"./utils-D_Pof5Gy.js\";\nimport { C } from \"./chevron-left-CYk8BtgP.js\";\nimport { E } from \"./ellipsis-DI18Y_N_.js\";\nimport { C as R } from \"./chevron-right-C7tecYKo.js\";\nfunction d({ className: a, ...r }) {\n  return /* @__PURE__ */ e.jsx(\n    \"nav\",\n    {\n      ...r,\n      role: \"navigation\",\n      \"aria-label\": \"pagination\",\n      className: n(\"mx-auto flex w-full justify-center\", a)\n    }\n  );\n}\nd.displayName = \"PaginationUnit\";\nconst f = x.forwardRef(\n  ({ className: a, ...r }, i) => /* @__PURE__ */ e.jsx(\n    \"ul\",\n    {\n      ...r,\n      ref: i,\n      className: n(\"flex flex-row items-center gap-1 list-none\", a)\n    }\n  )\n);\nf.displayName = \"PaginationContent\";\nconst m = x.forwardRef(\n  ({ className: a, ...r }, i) => /* @__PURE__ */ e.jsx(\"li\", { ...r, ref: i, className: n(\"mr-2 last:mr-0\", a) })\n);\nm.displayName = \"PaginationItem\";\nfunction p({\n  className: a,\n  children: r,\n  ...i\n}) {\n  return /* @__PURE__ */ e.jsx(\n    \"button\",\n    {\n      ...i,\n      type: \"button\",\n      className: n(\n        \"p-4 text-base text-primary-black dark:text-primary-gray-100 dark:hover:bg-primary-gray-600\",\n        a\n      ),\n      children: r\n    }\n  );\n}\np.displayName = \"PaginationLink\";\nfunction h({ className: a, ...r }) {\n  return /* @__PURE__ */ e.jsx(\n    p,\n    {\n      ...r,\n      \"aria-label\": \"Go to previous page\",\n      className: n(\n        \"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\",\n        a\n      ),\n      children: /* @__PURE__ */ e.jsx(C, { className: \"h-6 w-6 stroke-primary-gray-700 dark:stroke-primary-gray-100\" })\n    }\n  );\n}\nh.displayName = \"PaginationPrevious\";\nfunction b({ className: a, ...r }) {\n  return /* @__PURE__ */ e.jsx(\n    p,\n    {\n      ...r,\n      \"aria-label\": \"Go to next page\",\n      className: n(\n        \"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\",\n        a\n      ),\n      children: /* @__PURE__ */ e.jsx(R, { className: \"h-6 w-6 stroke-primary-gray-700 dark:stroke-primary-gray-100\" })\n    }\n  );\n}\nb.displayName = \"PaginationNext\";\nfunction j({ className: a, ...r }) {\n  return /* @__PURE__ */ e.jsxs(\n    \"span\",\n    {\n      ...r,\n      \"aria-hidden\": !0,\n      className: n(\"flex h-9 w-9 items-center justify-center\", a),\n      children: [\n        /* @__PURE__ */ e.jsx(E, { className: \"h-4 w-4 text-primary-gray-700 dark:text-primary-gray-100\" }),\n        /* @__PURE__ */ e.jsx(\"span\", { className: \"sr-only\", children: \"More pages\" })\n      ]\n    }\n  );\n}\nj.displayName = \"PaginationEllipsis\";\nconst g = (a, r) => {\n  const i = [];\n  return r <= 7 ? Array.from({ length: r }, (y, t) => t + 1) : (i.push(1), a <= 3 ? i.push(2, 3, 4, \"ellipsis\") : a >= r - 2 ? i.push(\"ellipsis\", r - 3, r - 2, r - 1) : i.push(\"ellipsis\", a - 1, a, a + 1, \"ellipsis\"), i.push(r), i);\n};\nfunction U(a) {\n  const { defaultPage: r = 1, total: i, pageSize: y, onChange: t, className: N } = a, o = Math.ceil(i / y), [s, c] = u(r), [k, v] = u(\n    g(r, o)\n  );\n  return P(() => {\n    v(g(s, o));\n  }, [s, o]), /* @__PURE__ */ e.jsx(d, { className: n(\"select-none\", N), children: /* @__PURE__ */ e.jsxs(f, { children: [\n    /* @__PURE__ */ e.jsx(m, { children: /* @__PURE__ */ e.jsx(\n      h,\n      {\n        onClick: () => {\n          s > 1 && (t(s - 1), c(s - 1));\n        },\n        className: n(\n          \"cursor-pointer\",\n          s <= 1 && \"cursor-not-allowed pointer-events-none opacity-35\"\n        )\n      }\n    ) }),\n    k.map((l, w) => /* @__PURE__ */ e.jsx(m, { children: l === \"ellipsis\" ? /* @__PURE__ */ e.jsx(j, {}) : /* @__PURE__ */ e.jsx(\n      p,\n      {\n        onClick: () => {\n          c(l), t(l);\n        },\n        className: n(\n          \"cursor-pointer w-[32px] h-[32px] flex items-center justify-center rounded-full hover:bg-primary-gray-300\",\n          l === s && \"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\"\n        ),\n        children: l\n      }\n    ) }, w)),\n    /* @__PURE__ */ e.jsx(m, { children: /* @__PURE__ */ e.jsx(\n      b,\n      {\n        onClick: () => {\n          s < o && (t(s + 1), c(s + 1));\n        },\n        className: n(\n          \"cursor-pointer\",\n          s >= o && \"cursor-not-allowed pointer-events-none opacity-35\"\n        )\n      }\n    ) })\n  ] }) });\n}\nexport {\n  U as Pagination\n};\n//# sourceMappingURL=Pagination.js.map\n","import { j as o } from \"./jsx-runtime-OVHDjVDe.js\";\nimport p from \"react\";\nimport { c as l } from \"./index-CHPV5EwG.js\";\nimport { c as m } from \"./utils-D_Pof5Gy.js\";\nconst s = l(\n  \"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\",\n  {\n    variants: {\n      variant: {\n        light: \"border border-primary-gray-400 dark:border-primary-gray-500\",\n        normal: \"border-2 border-primary-black dark:border-primary-gray-300\"\n      },\n      inputSize: {\n        sm: \"px-2.5 py-1\",\n        base: \"p-2.5\"\n      }\n    },\n    defaultVariants: {\n      inputSize: \"base\",\n      variant: \"normal\"\n    }\n  }\n), d = p.forwardRef(({ className: r, inputSize: a, variant: i, ...t }, e) => /* @__PURE__ */ o.jsx(\"input\", { ...t, ref: e, className: m(s({ inputSize: a, variant: i }), r) }));\nd.displayName = \"Input\";\nexport {\n  d as Input\n};\n//# sourceMappingURL=Input.js.map\n","import { j as e } from \"./jsx-runtime-OVHDjVDe.js\";\nimport t from \"react\";\nimport { Button as g } from \"./Button.js\";\nimport { Input as k } from \"./Input.js\";\nimport { c as w } from \"./utils-D_Pof5Gy.js\";\nimport { c as _ } from \"./createLucideIcon-C8GTh_Qx.js\";\n/**\n * @license lucide-react v0.488.0 - ISC\n *\n * This source code is licensed under the ISC license.\n * See the LICENSE file in the root directory of this source tree.\n */\nconst q = [\n  [\"circle\", { cx: \"11\", cy: \"11\", r: \"8\", key: \"4ej97u\" }],\n  [\"path\", { d: \"m21 21-4.3-4.3\", key: \"1qie3q\" }]\n], l = _(\"search\", q), F = t.forwardRef(\n  ({\n    className: n,\n    inputClassName: m,\n    buttonClassName: p,\n    onSearch: r,\n    searchOnlyOnClick: u,\n    buttonVariant: d,\n    buttonChildren: c,\n    showSearchButton: x,\n    inputVariant: f,\n    inputSize: o,\n    placeholder: y,\n    ...j\n  }, h) => {\n    const [a, v] = t.useState(void 0), [N, i] = t.useState(!1);\n    return /* @__PURE__ */ e.jsxs(\"div\", { className: w(\"flex gap-0\", n), ref: h, children: [\n      /* @__PURE__ */ e.jsxs(\"div\", { className: \"relative w-full\", children: [\n        /* @__PURE__ */ e.jsx(\n          k,\n          {\n            ...j,\n            variant: f,\n            type: \"text\",\n            className: m,\n            onChange: (s) => {\n              v(s.target.value), u || r?.(s.target.value);\n            },\n            inputSize: o,\n            onKeyDown: (s) => {\n              s.key === \"Enter\" && r?.(a);\n            },\n            onFocus: () => i(!0),\n            onBlur: () => i(!1)\n          }\n        ),\n        !N && (a === \"\" || !a) && /* @__PURE__ */ e.jsxs(\"div\", { className: \"absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none\", children: [\n          c ? null : /* @__PURE__ */ e.jsx(l, { className: \"h-4 w-4 text-primary-gray-500 dark:text-primary-gray-400 mr-2\" }),\n          /* @__PURE__ */ e.jsx(\"span\", { className: \"text-primary-gray-500 dark:text-primary-gray-400\", children: y || \"Search...\" })\n        ] })\n      ] }),\n      x === !1 ? null : /* @__PURE__ */ e.jsx(\n        g,\n        {\n          variant: d || \"icon\",\n          className: p,\n          padding: o,\n          onClick: () => {\n            r?.(a);\n          },\n          children: c || /* @__PURE__ */ e.jsx(l, { className: \"stroke-2\" })\n        }\n      )\n    ] });\n  }\n);\nF.displayName = \"Search\";\nexport {\n  F as Search\n};\n//# sourceMappingURL=Search.js.map\n","import { Modal } from '@undp/design-system-react/Modal';\r\nimport { useState } from 'react';\r\n\r\nimport { CsvDownloadButton } from '@/Components/Actions/CsvDownloadButton';\r\nimport { FileDown } from '@/Components/Icons';\r\nimport { StyleObject, ClassNameObject } from '@/Types';\r\nimport { string2HTML } from '@/Utils/string2HTML';\r\n\r\nexport type FilterDataType = {\r\n  column: string;\r\n  label?: string;\r\n  defaultValue?: string;\r\n  excludeValues?: string[];\r\n  width?: string;\r\n};\r\n\r\ninterface Props {\r\n  data: object[];\r\n  cardBackgroundColor?: string;\r\n  styles?: StyleObject;\r\n  classNames?: ClassNameObject;\r\n  width?: number;\r\n  height?: number;\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  cardTemplate: string | ((_d: any) => React.ReactNode);\r\n  cardMinWidth: number;\r\n  noOfItemsInAPage?: number;\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  detailsOnClick?: string | ((_d: any) => React.ReactNode);\r\n  allowDataDownloadOnDetail: boolean | string;\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  onSeriesMouseClick?: (_d: any) => void;\r\n  page: number;\r\n}\r\n\r\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\r\nconst csvData = (data: any) => {\r\n  if (!data) return {};\r\n  const dataForCsv = Object.entries(data).map(([key, value]) => {\r\n    if (Array.isArray(value)) {\r\n      return {\r\n        ' ': key,\r\n        value: `\"${value.join('; ')}\"`,\r\n      };\r\n    }\r\n    return {\r\n      ' ': key,\r\n      value: `\"${value}\"`,\r\n    };\r\n  });\r\n  return dataForCsv;\r\n};\r\n\r\nexport function Graph(props: Props) {\r\n  const {\r\n    width,\r\n    height,\r\n    data,\r\n    onSeriesMouseClick,\r\n    cardTemplate,\r\n    cardBackgroundColor,\r\n    cardMinWidth = 320,\r\n    detailsOnClick,\r\n    noOfItemsInAPage,\r\n    styles,\r\n    classNames,\r\n    page,\r\n    allowDataDownloadOnDetail,\r\n  } = props;\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  const [selectedData, setSelectedData] = useState<any>(undefined);\r\n  return (\r\n    <>\r\n      <div\r\n        className='undp-scrollbar w-full my-0 mx-auto grid gap-4 undp-viz-data-cards-container'\r\n        style={{\r\n          width: width ? `${width}px` : '100%',\r\n          height: height ? `${height}px` : 'auto',\r\n          gridTemplateColumns: `repeat(auto-fill, minmax(${cardMinWidth}px, 1fr))`,\r\n        }}\r\n      >\r\n        {data\r\n          // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n          .filter((_d: any, i: number) =>\r\n            noOfItemsInAPage\r\n              ? i < page * noOfItemsInAPage && i >= (page - 1) * noOfItemsInAPage\r\n              : true,\r\n          )\r\n          // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n          .map((d: any, i: number) => (\r\n            <div\r\n              key={i}\r\n              style={{\r\n                ...(styles?.dataCards || {}),\r\n                ...(cardBackgroundColor && { backgroundColor: cardBackgroundColor }),\r\n              }}\r\n              className={`w-full flex flex-col ${\r\n                onSeriesMouseClick || detailsOnClick ? 'cursor-pointer' : 'cursor-auto'\r\n              }${\r\n                !cardBackgroundColor ? 'bg-primary-gray-200 dark:bg-primary-gray-600' : ''\r\n              } ${classNames?.dataCards || ''}`}\r\n              onClick={() => {\r\n                onSeriesMouseClick?.(d);\r\n                setSelectedData(d);\r\n              }}\r\n              dangerouslySetInnerHTML={\r\n                typeof cardTemplate === 'string'\r\n                  ? { __html: string2HTML(cardTemplate, d) }\r\n                  : undefined\r\n              }\r\n            >\r\n              {typeof cardTemplate === 'function' ? cardTemplate(d) : null}\r\n            </div>\r\n          ))}\r\n      </div>\r\n      {detailsOnClick && selectedData !== undefined ? (\r\n        <Modal\r\n          open={selectedData !== undefined}\r\n          onClose={() => {\r\n            setSelectedData(undefined);\r\n          }}\r\n        >\r\n          <div\r\n            className='graph-modal-content m-0'\r\n            dangerouslySetInnerHTML={\r\n              typeof detailsOnClick === 'string'\r\n                ? { __html: string2HTML(detailsOnClick, selectedData) }\r\n                : undefined\r\n            }\r\n          >\r\n            {typeof detailsOnClick === 'function' ? detailsOnClick(selectedData) : null}\r\n          </div>\r\n          {allowDataDownloadOnDetail ? (\r\n            <div className='flex'>\r\n              <CsvDownloadButton\r\n                csvData={csvData(selectedData)}\r\n                headers={[\r\n                  {\r\n                    label: ' ',\r\n                    key: ' ',\r\n                  },\r\n                  {\r\n                    label: 'value',\r\n                    key: 'value',\r\n                  },\r\n                ]}\r\n                buttonContent={\r\n                  <div className='flex items-center gap-4'>\r\n                    {typeof allowDataDownloadOnDetail === 'string'\r\n                      ? allowDataDownloadOnDetail\r\n                      : null}\r\n                    <FileDown />\r\n                  </div>\r\n                }\r\n              />\r\n            </div>\r\n          ) : null}\r\n        </Modal>\r\n      ) : null}\r\n    </>\r\n  );\r\n}\r\n","import React, { useEffect, useMemo, useState } from 'react';\r\nimport intersection from 'lodash.intersection';\r\nimport flattenDeep from 'lodash.flattendeep';\r\nimport sortBy from 'lodash.sortby';\r\nimport { createFilter, DropdownSelect } from '@undp/design-system-react/DropdownSelect';\r\nimport { cn } from '@undp/design-system-react/cn';\r\nimport { P } from '@undp/design-system-react/Typography';\r\nimport { Pagination } from '@undp/design-system-react/Pagination';\r\nimport { Search } from '@undp/design-system-react/Search';\r\n\r\nimport { Graph } from './Graph';\r\n\r\nimport { Languages, SourcesDataType, StyleObject, ClassNameObject } from '@/Types';\r\nimport { GraphFooter } from '@/Components/Elements/GraphFooter';\r\nimport { GraphHeader } from '@/Components/Elements/GraphHeader';\r\nimport { getUniqValue } from '@/Utils/getUniqValue';\r\nimport { transformDefaultValue } from '@/Utils/transformDataForSelect';\r\n\r\nexport type FilterDataType = {\r\n  column: string;\r\n  label?: string;\r\n  defaultValue?: string;\r\n  excludeValues?: string[];\r\n  width?: string;\r\n};\r\n\r\ninterface Props {\r\n  // Data\r\n  /** Array of data objects */\r\n  data: object[];\r\n\r\n  // Titles, Labels, and Sources\r\n  /** Title of the graph */\r\n  graphTitle?: string | React.ReactNode;\r\n  /** Description of the graph */\r\n  graphDescription?: string | React.ReactNode;\r\n  /** Footnote for the graph */\r\n  footNote?: string | React.ReactNode;\r\n  /** Source data for the graph */\r\n  sources?: SourcesDataType[];\r\n  /** Accessibility label */\r\n  ariaLabel?: string;\r\n\r\n  // Colors and Styling\r\n  /** Background color of each of the card */\r\n  cardBackgroundColor?: string;\r\n  /** Background color of the graph */\r\n  backgroundColor?: string | boolean;\r\n  /** Custom styles for the graph. Each object should be a valid React CSS style object. */\r\n  styles?: StyleObject;\r\n  /** Custom class names */\r\n  classNames?: ClassNameObject;\r\n\r\n  // Size and Spacing\r\n  /** Width of the graph */\r\n  width?: number;\r\n  /** Height of the graph */\r\n  height?: number;\r\n  /** Padding around the graph. Defaults to 0 if no backgroundColor is mentioned else defaults to 1rem */\r\n  padding?: string;\r\n\r\n  // Graph Parameters\r\n  /** Html for each card. If the type is string then this uses the [handlebar](../?path=/docs/misc-handlebars-templates-and-custom-helpers--docs) template to display the data. */\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  cardTemplate: string | ((_d: any) => React.ReactNode);\r\n  /** Allows users to add a dropdown menus, that can be used as filters in the graph. Each filter is an object that specifies the column to filter by, and the default value. All the filters are single select only.  */\r\n  cardFilters?: FilterDataType[];\r\n  /** Allows users to add a dropdown menus, that can be used to sort the cards based on different columns. */\r\n  cardSortingOptions?: {\r\n    defaultValue?: string;\r\n    options: {\r\n      value: string;\r\n      label: string;\r\n      type: 'asc' | 'desc';\r\n    }[];\r\n    width?: string;\r\n  };\r\n  /** Adds a search bar to search the cards list. The array defines all the columns from the data where text is used to search from. */\r\n  cardSearchColumns?: string[];\r\n  /** Min width of the cards for responsiveness. */\r\n  cardMinWidth?: number;\r\n  /** Add a button to download data object when viewing details. If true, data can be downloaded; if a string is provided, it specifies the button label. */\r\n  allowDataDownloadOnDetail?: string | boolean;\r\n  /** Defines the number of items displayed per page. */\r\n  noOfItemsInAPage?: number;\r\n\r\n  // Interactions and Callbacks\r\n  /** Details displayed on the modal when user clicks of a data point. If the type is string then this uses the [handlebar](../?path=/docs/misc-handlebars-templates-and-custom-helpers--docs) template to display the data */\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  detailsOnClick?: string | ((_d: any) => React.ReactNode);\r\n  /** Callback for mouse click event */\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  onSeriesMouseClick?: (_d: any) => void;\r\n\r\n  // Configuration and Options\r\n  /** Language setting  */\r\n  language?: Languages;\r\n  /** Color theme */\r\n  theme?: 'light' | 'dark';\r\n  /** Theme for the UI elements */\r\n  uiMode?: 'light' | 'normal';\r\n  /** Unique ID for the graph */\r\n  graphID?: string;\r\n}\r\n\r\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\r\nconst filterByKeys = (jsonArray: any, keys: string[], substring: string) => {\r\n  if (keys.length === 0) return jsonArray;\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  return jsonArray.filter((item: any) =>\r\n    keys.some(key => item[key]?.toLowerCase().includes(substring.toLowerCase())),\r\n  );\r\n};\r\n\r\nexport function DataCards(props: Props) {\r\n  const {\r\n    width,\r\n    height,\r\n    graphTitle,\r\n    sources,\r\n    graphDescription,\r\n    footNote,\r\n    graphID,\r\n    data,\r\n    onSeriesMouseClick,\r\n    language = 'en',\r\n    theme = 'light',\r\n    ariaLabel,\r\n    cardTemplate,\r\n    cardBackgroundColor,\r\n    cardFilters,\r\n    cardSortingOptions,\r\n    cardSearchColumns,\r\n    cardMinWidth = 320,\r\n    backgroundColor = false,\r\n    padding,\r\n    detailsOnClick,\r\n    allowDataDownloadOnDetail = false,\r\n    noOfItemsInAPage,\r\n    uiMode = 'normal',\r\n    styles,\r\n    classNames,\r\n  } = props;\r\n\r\n  const [cardData, setCardData] = useState(data);\r\n\r\n  const [page, setPage] = useState(1);\r\n\r\n  const [searchQuery, setSearchQuery] = useState('');\r\n  const filterSettings = useMemo(\r\n    () =>\r\n      (cardFilters || []).map(el => ({\r\n        filter: el.column,\r\n        label: el.label || `Filter by ${el.column}`,\r\n        singleSelect: true,\r\n        clearable: true,\r\n        defaultValue: transformDefaultValue(el.defaultValue),\r\n        availableValues: getUniqValue(data, el.column)\r\n          .filter(v => !el.excludeValues?.includes(`${v}`))\r\n          .map(v => ({ value: v, label: v })),\r\n        width: el.width,\r\n      })),\r\n    [cardFilters, data],\r\n  );\r\n\r\n  const [selectedFilters, setSelectedFilters] = useState(\r\n    (cardFilters || []).map(el => ({\r\n      filter: el.column,\r\n      value: transformDefaultValue(el.defaultValue),\r\n    })),\r\n  );\r\n  const [sortedBy, setSortedBy] = useState<\r\n    | {\r\n        value: string;\r\n        label: string;\r\n        type: 'asc' | 'desc';\r\n      }\r\n    | undefined\r\n  >(\r\n    cardSortingOptions\r\n      ? !cardSortingOptions.defaultValue ||\r\n        cardSortingOptions.options.findIndex(el => el.label === cardSortingOptions.defaultValue) ===\r\n          -1\r\n        ? cardSortingOptions.options[0]\r\n        : cardSortingOptions.options[\r\n            cardSortingOptions.options.findIndex(el => el.label === cardSortingOptions.defaultValue)\r\n          ]\r\n      : undefined,\r\n  );\r\n\r\n  const filterConfig = useMemo(\r\n    () => ({\r\n      ignoreCase: true,\r\n      ignoreAccents: true,\r\n      trim: true,\r\n    }),\r\n    [],\r\n  );\r\n\r\n  useEffect(() => {\r\n    setSortedBy(\r\n      cardSortingOptions\r\n        ? !cardSortingOptions.defaultValue ||\r\n          cardSortingOptions.options.findIndex(\r\n            el => el.label === cardSortingOptions.defaultValue,\r\n          ) === -1\r\n          ? cardSortingOptions.options[0]\r\n          : cardSortingOptions.options[\r\n              cardSortingOptions.options.findIndex(\r\n                el => el.label === cardSortingOptions.defaultValue,\r\n              )\r\n            ]\r\n        : undefined,\r\n    );\r\n  }, [cardSortingOptions]);\r\n\r\n  useEffect(() => {\r\n    const filteredData = filterByKeys(data, cardSearchColumns || [], searchQuery).filter(\r\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n      (item: any) =>\r\n        selectedFilters.every(filter =>\r\n          filter.value && flattenDeep([filter.value]).length > 0\r\n            ? intersection(\r\n                flattenDeep([item[filter.filter]]),\r\n                flattenDeep([filter.value]).map(el => el.value),\r\n              ).length > 0\r\n            : true,\r\n        ),\r\n    );\r\n    if (sortedBy) {\r\n      setCardData(sortBy(filteredData, sortedBy?.value, sortedBy?.type));\r\n    } else {\r\n      setCardData(filteredData);\r\n    }\r\n  }, [data, cardSearchColumns, searchQuery, selectedFilters, sortedBy]);\r\n\r\n  useEffect(() => {\r\n    setPage(1);\r\n  }, [cardData]);\r\n\r\n  return (\r\n    <div\r\n      className={`${theme || 'light'} flex  ${width ? 'w-fit grow-0' : 'w-full grow'}`}\r\n      dir={language === 'he' || language === 'ar' ? 'rtl' : undefined}\r\n    >\r\n      <div\r\n        className={cn(\r\n          `${\r\n            !backgroundColor\r\n              ? 'bg-transparent '\r\n              : backgroundColor === true\r\n                ? 'bg-primary-gray-200 dark:bg-primary-gray-650 '\r\n                : ''\r\n          }ml-auto mr-auto flex flex-col grow h-inherit ${language || 'en'}`,\r\n          classNames?.graphContainer,\r\n        )}\r\n        style={{\r\n          ...(styles?.graphContainer || {}),\r\n          ...(backgroundColor && backgroundColor !== true ? { backgroundColor } : {}),\r\n        }}\r\n        id={graphID}\r\n        aria-label={\r\n          ariaLabel ||\r\n          `${graphTitle ? `The graph shows ${graphTitle}. ` : ''}This is an list of cards. ${\r\n            graphDescription ? ` ${graphDescription}` : ''\r\n          }`\r\n        }\r\n      >\r\n        <div\r\n          className='flex grow'\r\n          style={{ padding: backgroundColor ? padding || '1rem' : padding || 0 }}\r\n        >\r\n          <div className='flex flex-col grow gap-3 w-full justify-between'>\r\n            {graphTitle || graphDescription ? (\r\n              <GraphHeader\r\n                styles={{\r\n                  title: styles?.title,\r\n                  description: styles?.description,\r\n                }}\r\n                classNames={{\r\n                  title: classNames?.title,\r\n                  description: classNames?.description,\r\n                }}\r\n                graphTitle={graphTitle}\r\n                graphDescription={graphDescription}\r\n                width={width}\r\n              />\r\n            ) : null}\r\n            {cardSortingOptions || filterSettings.length > 0 ? (\r\n              <div className='flex gap-4 flex-wrap items-start w-full'>\r\n                {cardSortingOptions ? (\r\n                  <div\r\n                    className='grow shrink-0 min-w-[240px]'\r\n                    style={{ width: cardSortingOptions.width || 'calc(25% - 0.75rem)' }}\r\n                  >\r\n                    <P\r\n                      marginBottom='xs'\r\n                      size='sm'\r\n                      className='text-primary-gray-700 dark:text-primary-gray-100'\r\n                    >\r\n                      Sort by\r\n                    </P>\r\n                    <DropdownSelect\r\n                      options={cardSortingOptions.options}\r\n                      isRtl={language === 'he' || language === 'ar'}\r\n                      isSearchable\r\n                      filterOption={createFilter(filterConfig)}\r\n                      // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n                      onChange={(el: any) => {\r\n                        setSortedBy(el || undefined);\r\n                      }}\r\n                      variant={uiMode}\r\n                      size='sm'\r\n                      defaultValue={\r\n                        !cardSortingOptions.defaultValue ||\r\n                        cardSortingOptions.options.findIndex(\r\n                          el => el.label === cardSortingOptions.defaultValue,\r\n                        ) === -1\r\n                          ? cardSortingOptions.options[0]\r\n                          : cardSortingOptions.options[\r\n                              cardSortingOptions.options.findIndex(\r\n                                el => el.label === cardSortingOptions.defaultValue,\r\n                              )\r\n                            ]\r\n                      }\r\n                    />\r\n                  </div>\r\n                ) : null}\r\n                {filterSettings?.map((d, i) => (\r\n                  <div\r\n                    className='grow shrink-0 min-w-[240px]'\r\n                    style={{ width: d.width || 'calc(25% - 0.75rem)' }}\r\n                    key={i}\r\n                  >\r\n                    <P\r\n                      marginBottom='xs'\r\n                      size='sm'\r\n                      className='text-primary-gray-700 dark:text-primary-gray-100'\r\n                    >\r\n                      {d.label}\r\n                    </P>\r\n                    <DropdownSelect\r\n                      options={d.availableValues}\r\n                      isClearable={d.clearable === undefined ? true : d.clearable}\r\n                      isRtl={language === 'he' || language === 'ar'}\r\n                      isSearchable\r\n                      variant={uiMode}\r\n                      size='sm'\r\n                      controlShouldRenderValue\r\n                      filterOption={createFilter(filterConfig)}\r\n                      onChange={el => {\r\n                        setSelectedFilters(prev =>\r\n                          // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n                          prev.map(f => (f.filter === d.filter ? { ...f, value: el as any } : f)),\r\n                        );\r\n                      }}\r\n                      defaultValue={d.defaultValue}\r\n                    />\r\n                  </div>\r\n                ))}\r\n              </div>\r\n            ) : null}\r\n            {(cardSearchColumns || []).length > 0 ? (\r\n              <div style={{ paddingTop: '1px' }}>\r\n                <Search\r\n                  placeholder='Search...'\r\n                  onSearch={e => {\r\n                    setSearchQuery(e || '');\r\n                  }}\r\n                  buttonVariant='icon'\r\n                  inputVariant={uiMode}\r\n                  showSearchButton={false}\r\n                  inputSize='sm'\r\n                />\r\n              </div>\r\n            ) : null}\r\n            <Graph\r\n              data={cardData}\r\n              width={width}\r\n              height={height}\r\n              cardTemplate={cardTemplate}\r\n              cardMinWidth={cardMinWidth}\r\n              page={page}\r\n              cardBackgroundColor={cardBackgroundColor}\r\n              styles={styles}\r\n              classNames={classNames}\r\n              noOfItemsInAPage={noOfItemsInAPage}\r\n              detailsOnClick={detailsOnClick}\r\n              onSeriesMouseClick={onSeriesMouseClick}\r\n              allowDataDownloadOnDetail={allowDataDownloadOnDetail}\r\n            />\r\n            {noOfItemsInAPage ? (\r\n              <Pagination\r\n                total={cardData.length}\r\n                defaultPage={0}\r\n                pageSize={noOfItemsInAPage}\r\n                onChange={setPage}\r\n              />\r\n            ) : null}\r\n            {sources || footNote ? (\r\n              <GraphFooter\r\n                styles={{ footnote: styles?.footnote, source: styles?.source }}\r\n                classNames={{\r\n                  footnote: classNames?.footnote,\r\n                  source: classNames?.source,\r\n                }}\r\n                sources={sources}\r\n                footNote={footNote}\r\n                width={width}\r\n              />\r\n            ) : null}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n"],"names":["o","t","e","r","c","d","a","n","f","x","i","m","p","h","C","b","R","j","E","g","y","U","N","s","u","k","v","P","l","w","q","_","F","csvData","data","key","value","Graph","props","width","height","onSeriesMouseClick","cardTemplate","cardBackgroundColor","cardMinWidth","detailsOnClick","noOfItemsInAPage","styles","classNames","page","allowDataDownloadOnDetail","selectedData","setSelectedData","useState","jsxs","Fragment","jsx","_d","string2HTML","Modal","CsvDownloadButton","FileDown","filterByKeys","jsonArray","keys","substring","item","DataCards","graphTitle","sources","graphDescription","footNote","graphID","language","theme","ariaLabel","cardFilters","cardSortingOptions","cardSearchColumns","backgroundColor","padding","uiMode","cardData","setCardData","setPage","searchQuery","setSearchQuery","filterSettings","useMemo","el","transformDefaultValue","getUniqValue","selectedFilters","setSelectedFilters","sortedBy","setSortedBy","filterConfig","useEffect","filteredData","filter","flattenDeep","intersection","sortBy","cn","GraphHeader","DropdownSelect","createFilter","prev","Search","Pagination","GraphFooter"],"mappings":"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","x_google_ignoreList":[0,1,2,3,4,5]}

package/dist/DataTable.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./index-CHPV5EwG-DDoeWRVt.cjs"),H=require("./index-BXns0-ng.cjs"),l=require("react"),M=require("./index-BzeLQvXk.cjs"),Z=require("./index-Ds0uHjK9.cjs"),y=require("./Typography-k-kOjICQ.cjs"),R=require("./numberFormattingFunction-02t-wJta.cjs"),_=require("./GraphFooter.cjs"),tt=require("./GraphHeader.cjs"),j=require("./index-BW_-wD2k.cjs"),S=require("./getTextColorBasedOnBgColor-nqY-bsM_.cjs"),V=v=>v.map(c=>c||1).reduce((c,b)=>c+b,0);function rt(v){const{width:p,height:N,graphTitle:c,sources:b,graphDescription:C,footNote:B,graphID:X,data:d,columnData:n,onSeriesMouseClick:I,language:k="en",theme:L="light",ariaLabel:Y,backgroundColor:u=!1,padding:F,resetSelectionOnDoubleClick:J=!0,styles:x,classNames:g,minWidth:D,naLabel:E="NA",precision:w=2}=v,[m,T]=l.useState(void 0),[q,z]=l.useState(void 0),[h,W]=l.useState("asc"),[f,G]=l.useState(void 0),[K,Q]=l.useState({}),[a,P]=l.useState(n.filter(r=>r.filterOptions&&r.filterOptions.length>0).map(r=>({id:r.columnId,option:r.filterOptions}))),[U,A]=l.useState(d);return l.useEffect(()=>{const r=[];d.forEach(s=>{let t=!0;a.forEach(e=>{if(typeof s[e.id]!="object"&&typeof s[e.id]!="function"&&typeof s[e.id]!="symbol")if(n[n.findIndex(i=>i.columnId===e.id)].separator){const i=s[e.id].split(n[n.findIndex($=>$.columnId===e.id)].separator);Z.intersection(i,e.option).length===0&&(t=!1)}else e.option.indexOf(s[e.id])===-1&&(t=!1)}),t&&r.push(s)}),A(m&&d?h==="asc"?M.sortBy(r,[m]):M.sortBy(r,[m]).reverse():r)},[m,h,d,a,n]),o.jsxRuntimeExports.jsx("div",{className:`${L||"light"} flex  ${p?"w-fit grow-0":"w-full grow"}`,dir:k==="he"||k==="ar"?"rtl":void 0,children:o.jsxRuntimeExports.jsx("div",{className:o.mo(`${u?u===!0?"bg-primary-gray-200 dark:bg-primary-gray-650 ":"":"bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${k||"en"} w-full`,g?.graphContainer),style:{...x?.graphContainer||{},...u&&u!==!0?{backgroundColor:u}:{}},id:X,"aria-label":Y||`${c?`The graph shows ${c}. `:""}This is an data table. ${C?` ${C}`:""}`,children:o.jsxRuntimeExports.jsxs("div",{className:"flex grow",style:{padding:u?F||"1rem":F||0},children:[o.jsxRuntimeExports.jsxs("div",{className:"flex flex-col gap-3 w-full justify-between grow",children:[c||C?o.jsxRuntimeExports.jsx(tt.GraphHeader,{styles:{title:x?.title,description:x?.description},classNames:{title:g?.title,description:g?.description},graphTitle:c,graphDescription:C,width:p}):null,o.jsxRuntimeExports.jsx("div",{className:"grow flex flex-col justify-center",children:o.jsxRuntimeExports.jsx("div",{className:"undp-scrollbar",style:{width:p?`${p}px`:"100%",height:N?`${N}px`:"auto"},children:o.jsxRuntimeExports.jsx("div",{style:D?{minWidth:D}:void 0,children:d?o.jsxRuntimeExports.jsxs("table",{className:"w-full",style:{borderCollapse:"collapse"},children:[o.jsxRuntimeExports.jsx("thead",{className:"text-left bg-primary-gray-300 dark:bg-primary-gray-550",children:o.jsxRuntimeExports.jsx("tr",{children:n?.map((r,s)=>o.jsxRuntimeExports.jsx("th",{className:"text-primary-gray-700 dark:text-primary-gray-100 text-sm",style:{width:`calc(${100*(r.columnWidth||1)/V(n.map(t=>t.columnWidth||1))}%`},children:o.jsxRuntimeExports.jsxs("div",{className:"flex gap-2 justify-between items-center p-4",children:[o.jsxRuntimeExports.jsx(y.u,{size:"sm",marginBottom:"none",className:`w-fit grow text-${r.align||"left"} font-bold`,children:r.columnTitle||r.columnId}),r.sortable?o.jsxRuntimeExports.jsx("button",{type:"button",className:"bg-transparent cursor-pointer p-0 m-0 border-0",onClick:()=>{m===r.columnId?(h==="asc"&&W("desc"),h==="desc"&&T(void 0)):(T(r.columnId),W("asc"))},children:m===r.columnId?h==="asc"?o.jsxRuntimeExports.jsx(j.SortingIconAscending,{}):o.jsxRuntimeExports.jsx(j.SortingIconDescending,{}):o.jsxRuntimeExports.jsx(j.SortingIcon,{})}):null,r.filterOptions&&r.filterOptions.length?o.jsxRuntimeExports.jsx("button",{type:"button",className:"bg-transparent cursor-pointer m-0 p-0 border-0",onClick:t=>{if(f===r.columnId)G(void 0);else if(t.currentTarget){G(r.columnId);const e=t.currentTarget.getBoundingClientRect();Q({top:e.bottom+window.scrollY,left:e.left+window.scrollX-160<0?e.left+window.scrollX:e.left+window.scrollX-160,width:"10rem"})}},children:a[a.findIndex(t=>t.id===r.columnId)].option.length===r.filterOptions?.length?o.jsxRuntimeExports.jsx(j.FilterIcon,{}):o.jsxRuntimeExports.jsx(j.FilterIconApplied,{})}):null]})},s))})}),o.jsxRuntimeExports.jsx("tbody",{children:U?.map((r,s)=>o.jsxRuntimeExports.jsx("tr",{className:`cursor-${I?"pointer":"auto"} border-b border-b-primary-gray-400 dark:border-b-primary-gray-500 ${H.isEqual(q,r)?"bg-primary-gray-200 dark:bg-primary-gray-600":"bg-transparent"}`,style:r.rowStyle,onClick:()=>{I&&(H.isEqual(q,r)&&J?(z(void 0),I(void 0)):(z(r),I(r)))},children:n.map((t,e)=>o.jsxRuntimeExports.jsx("td",{className:`text-primary-gray-700 dark:text-primary-gray-100 text-sm text-${t.align||"left"}`,style:{width:`calc(${100*(r.columnWidth||1)/V(n.map(i=>i.columnWidth||1))}%`},children:o.jsxRuntimeExports.jsx("div",{className:`text-primary-gray-700 dark:text-primary-gray-100 flex p-4 ${t.align==="right"?"justify-end":t.align==="center"?"justify-center":"justify-start"}`,children:typeof r[t.columnId]=="number"?o.jsxRuntimeExports.jsx(y.u,{marginBottom:"none",size:"sm",className:`text-primary-gray-700 dark:text-primary-gray-100 w-fit ${t.chip?"grow-0 rounded-sm p-2":"grow rounded-none p-0"} text-${t.align||"left"} ${t.chip?t.chipColors?"":"bg-primary-gray-300 dark:bg-primary-gray-500":"bg-transparent"}`,style:{...t.chip&&t.chipColors?{backgroundColor:t.chipColors[t.chipColors.findIndex(i=>i.value===r[t.chipColumnId||t.columnId])].color,color:S.getTextColorBasedOnBgColor(t.chipColors[t.chipColors.findIndex(i=>i.value===r[t.chipColumnId||t.columnId])].color)}:{}},children:R.numberFormattingFunction(r[t.columnId],E,w,t.prefix,t.suffix)}):typeof r[t.columnId]=="string"?t.separator?o.jsxRuntimeExports.jsx("div",{className:"text-primary-gray-700 dark:text-primary-gray-100 flex flex-wrap gap-2",children:r[t.columnId].split(t.separator).map((i,$)=>o.jsxRuntimeExports.jsx(y.u,{marginBottom:"none",size:"sm",className:`text-primary-gray-700 dark:text-primary-gray-100 w-fit ${t.chip?"grow-0 rounded-sm p-2":"grow rounded-none p-0"} text-${t.align||"left"} ${t.chip?t.chipColors?"":"bg-primary-gray-300 dark:bg-primary-gray-500":"bg-transparent"}`,style:{...t.chip&&t.chipColors?{backgroundColor:t.chipColors[t.chipColors.findIndex(O=>O.value===(t.chipColumnId?r[t.chipColumnId]:i))].color,color:S.getTextColorBasedOnBgColor(t.chipColors[t.chipColors.findIndex(O=>O.value===(t.chipColumnId?r[t.chipColumnId]:i))].color)}:{}},children:R.numberFormattingFunction(i,E,w,t.prefix,t.suffix)},$))}):o.jsxRuntimeExports.jsx(y.u,{marginBottom:"none",size:"sm",className:`text-primary-gray-700 dark:text-primary-gray-100 w-fit ${t.chip?"grow-0 rounded-sm p-2":"grow rounded-none p-0"} text-${t.align||"left"} ${t.chip?t.chipColors?"":"bg-primary-gray-300 dark:bg-primary-gray-500":"bg-transparent"}`,style:{...t.chip&&t.chipColors?{backgroundColor:t.chipColors[t.chipColors.findIndex(i=>i.value===r[t.chipColumnId||t.columnId])].color,color:S.getTextColorBasedOnBgColor(t.chipColors[t.chipColors.findIndex(i=>i.value===r[t.chipColumnId||t.columnId])].color)}:{}},children:R.numberFormattingFunction(r[t.columnId],E,w,t.prefix,t.suffix)}):o.jsxRuntimeExports.jsx("div",{children:R.numberFormattingFunction(r[t.columnId],E,w,t.prefix,t.suffix)})})},e))},s))})]}):null})})}),b||B?o.jsxRuntimeExports.jsx(_.GraphFooter,{styles:{footnote:x?.footnote,source:x?.source},classNames:{footnote:g?.footnote,source:g?.source},sources:b,footNote:B,width:p}):null]}),f&&o.jsxRuntimeExports.jsx("div",{style:K,className:"absolute p-3 border z-[1000] rounded-sm bg-primary-white dark:bg-primary-gray-700 border-primary-gray-300 dark:border-primary-gray-550",children:o.jsxRuntimeExports.jsxs("div",{className:"max-w-60",children:[o.jsxRuntimeExports.jsx(y.u,{size:"sm",marginBottom:"2xs",className:"font-bold",children:"Filter data by"}),o.jsxRuntimeExports.jsx("div",{className:"flex flex-col gap-2",children:n[n.findIndex(r=>r.columnId===f)].filterOptions?.map((r,s)=>o.jsxRuntimeExports.jsx("div",{children:o.jsxRuntimeExports.jsxs("label",{className:"undp-viz-label",children:[o.jsxRuntimeExports.jsx("input",{type:"checkbox",className:"undp-viz-checkbox",checked:a[a.findIndex(t=>t.id===f)].option.indexOf(r)!==-1,onChange:()=>{const t=a.findIndex(i=>i.id===f),e=[...a[t].option];if(e.indexOf(r)!==-1){e.splice(e.indexOf(r),1);const i=[...a];i[t].option=e,P(i)}else{e.push(r);const i=[...a];i[t].option=e,P(i)}}}),r]},s)},s))})]})})]})})})}exports.DataTable=rt;
+//# sourceMappingURL=DataTable.cjs.map

package/dist/DataTable.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.cjs","sources":["../src/Components/Graphs/DataTable/index.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\r\nimport isEqual from 'fast-deep-equal';\r\nimport { useEffect, useState } from 'react';\r\nimport sortBy from 'lodash.sortby';\r\nimport intersection from 'lodash.intersection';\r\nimport { cn } from '@undp/design-system-react/cn';\r\nimport { P } from '@undp/design-system-react/Typography';\r\n\r\nimport {\r\n  DataTableColumnDataType,\r\n  Languages,\r\n  SourcesDataType,\r\n  StyleObject,\r\n  ClassNameObject,\r\n} from '@/Types';\r\nimport { numberFormattingFunction } from '@/Utils/numberFormattingFunction';\r\nimport { GraphFooter } from '@/Components/Elements/GraphFooter';\r\nimport { GraphHeader } from '@/Components/Elements/GraphHeader';\r\nimport {\r\n  FilterIcon,\r\n  FilterIconApplied,\r\n  SortingIcon,\r\n  SortingIconAscending,\r\n  SortingIconDescending,\r\n} from '@/Components/Icons';\r\nimport { getTextColorBasedOnBgColor } from '@/Utils/getTextColorBasedOnBgColor';\r\n\r\ninterface Props {\r\n  // Data\r\n  /** Array of data objects. If the data have a object for ket `rowStyle` then that is use to style the row of the table. */\r\n  data: object[];\r\n\r\n  // Titles, Labels, and Sources\r\n  /** Title of the graph */\r\n  graphTitle?: string | React.ReactNode;\r\n  /** Description of the graph */\r\n  graphDescription?: string | React.ReactNode;\r\n  /** Footnote for the graph */\r\n  footNote?: string | React.ReactNode;\r\n  /** Source data for the graph */\r\n  sources?: SourcesDataType[];\r\n  /** Accessibility label */\r\n  ariaLabel?: string;\r\n\r\n  // Colors and Styling\r\n  /** Background color of the graph */\r\n  backgroundColor?: string | boolean;\r\n  /** Custom styles for the graph. Each object should be a valid React CSS style object. */\r\n  styles?: StyleObject;\r\n  /** Custom class names */\r\n  classNames?: ClassNameObject;\r\n\r\n  // Size and Spacing\r\n  /** Width of the graph */\r\n  width?: number;\r\n  /** Minimum width of the table as string in px */\r\n  minWidth?: string;\r\n  /** Height of the graph */\r\n  height?: number;\r\n  /** Padding around the graph. Defaults to 0 if no backgroundColor is mentioned else defaults to 1rem */\r\n  padding?: string;\r\n\r\n  // Graph Parameters\r\n  /** Column settings for each column shown in the table. */\r\n  columnData: DataTableColumnDataType[];\r\n  /** Specifies the number of decimal places to display in the value. */\r\n  precision?: number;\r\n  /** Defines how “NA” values should be displayed/labelled in the graph */\r\n  naLabel?: string;\r\n  /** Reset selection on double-click. Only applicable when used in a dashboard context with filters. */\r\n  resetSelectionOnDoubleClick?: boolean;\r\n\r\n  // Interactions and Callbacks\r\n  /** Callback for mouse click event */\r\n  onSeriesMouseClick?: (_d: any) => void;\r\n\r\n  // Configuration and Options\r\n  /** Language setting  */\r\n  language?: Languages;\r\n  /** Color theme */\r\n  theme?: 'light' | 'dark';\r\n  /** Unique ID for the graph */\r\n  graphID?: string;\r\n}\r\n\r\nconst TotalWidth = (columns: (number | undefined)[]) => {\r\n  const columnWidth = columns.map(d => d || 1);\r\n  const sum = columnWidth.reduce((acc, cur) => acc + cur, 0);\r\n  return sum;\r\n};\r\n\r\nexport function DataTable(props: Props) {\r\n  const {\r\n    width,\r\n    height,\r\n    graphTitle,\r\n    sources,\r\n    graphDescription,\r\n    footNote,\r\n    graphID,\r\n    data,\r\n    columnData,\r\n    onSeriesMouseClick,\r\n    language = 'en',\r\n    theme = 'light',\r\n    ariaLabel,\r\n    backgroundColor = false,\r\n    padding,\r\n    resetSelectionOnDoubleClick = true,\r\n    styles,\r\n    classNames,\r\n    minWidth,\r\n    naLabel = 'NA',\r\n    precision = 2,\r\n  } = props;\r\n  const [columnSortBy, setColumnSortBy] = useState<string | undefined>(undefined);\r\n\r\n  const [mouseClickData, setMouseClickData] = useState<any>(undefined);\r\n  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc');\r\n  const [popupVisible, setPopupVisible] = useState<string | undefined>(undefined);\r\n  const [popupStyle, setPopupStyle] = useState({});\r\n  const [filterOption, setFilterOption] = useState(\r\n    columnData\r\n      .filter(d => d.filterOptions && d.filterOptions.length > 0)\r\n      .map(d => ({ id: d.columnId, option: d.filterOptions as string[] })),\r\n  );\r\n  const [sortedData, setSortedData] = useState(data);\r\n  useEffect(() => {\r\n    const dataFiltered: any = [];\r\n\r\n    data.forEach((d: any) => {\r\n      let filter = true;\r\n      filterOption.forEach(el => {\r\n        if (\r\n          typeof d[el.id] !== 'object' &&\r\n          typeof d[el.id] !== 'function' &&\r\n          typeof d[el.id] !== 'symbol'\r\n        ) {\r\n          if (columnData[columnData.findIndex(cd => cd.columnId === el.id)].separator) {\r\n            const arr = d[el.id].split(\r\n              columnData[columnData.findIndex(cd => cd.columnId === el.id)].separator,\r\n            );\r\n            if (intersection(arr, el.option).length === 0) filter = false;\r\n          } else if (el.option.indexOf(d[el.id]) === -1) filter = false;\r\n        }\r\n      });\r\n      if (filter) dataFiltered.push(d);\r\n    });\r\n    if (columnSortBy && data) {\r\n      setSortedData(\r\n        sortDirection === 'asc'\r\n          ? sortBy(dataFiltered, [columnSortBy])\r\n          : sortBy(dataFiltered, [columnSortBy]).reverse(),\r\n      );\r\n    } else {\r\n      setSortedData(dataFiltered);\r\n    }\r\n  }, [columnSortBy, sortDirection, data, filterOption, columnData]);\r\n  return (\r\n    <div\r\n      className={`${theme || 'light'} flex  ${width ? 'w-fit grow-0' : 'w-full grow'}`}\r\n      dir={language === 'he' || language === 'ar' ? 'rtl' : undefined}\r\n    >\r\n      <div\r\n        className={cn(\r\n          `${\r\n            !backgroundColor\r\n              ? 'bg-transparent '\r\n              : backgroundColor === true\r\n                ? 'bg-primary-gray-200 dark:bg-primary-gray-650 '\r\n                : ''\r\n          }ml-auto mr-auto flex flex-col grow h-inherit ${language || 'en'} w-full`,\r\n          classNames?.graphContainer,\r\n        )}\r\n        style={{\r\n          ...(styles?.graphContainer || {}),\r\n          ...(backgroundColor && backgroundColor !== true ? { backgroundColor } : {}),\r\n        }}\r\n        id={graphID}\r\n        aria-label={\r\n          ariaLabel ||\r\n          `${graphTitle ? `The graph shows ${graphTitle}. ` : ''}This is an data table. ${\r\n            graphDescription ? ` ${graphDescription}` : ''\r\n          }`\r\n        }\r\n      >\r\n        <div\r\n          className='flex grow'\r\n          style={{ padding: backgroundColor ? padding || '1rem' : padding || 0 }}\r\n        >\r\n          <div className='flex flex-col gap-3 w-full justify-between grow'>\r\n            {graphTitle || graphDescription ? (\r\n              <GraphHeader\r\n                styles={{\r\n                  title: styles?.title,\r\n                  description: styles?.description,\r\n                }}\r\n                classNames={{\r\n                  title: classNames?.title,\r\n                  description: classNames?.description,\r\n                }}\r\n                graphTitle={graphTitle}\r\n                graphDescription={graphDescription}\r\n                width={width}\r\n              />\r\n            ) : null}\r\n            <div className='grow flex flex-col justify-center'>\r\n              <div\r\n                className='undp-scrollbar'\r\n                style={{\r\n                  width: width ? `${width}px` : '100%',\r\n                  height: height ? `${height}px` : 'auto',\r\n                }}\r\n              >\r\n                <div style={minWidth ? { minWidth } : undefined}>\r\n                  {data ? (\r\n                    <table className='w-full' style={{ borderCollapse: 'collapse' }}>\r\n                      <thead className='text-left bg-primary-gray-300 dark:bg-primary-gray-550'>\r\n                        <tr>\r\n                          {columnData?.map((d, i) => (\r\n                            <th\r\n                              className='text-primary-gray-700 dark:text-primary-gray-100 text-sm'\r\n                              style={{\r\n                                width: `calc(${\r\n                                  (100 * (d.columnWidth || 1)) /\r\n                                  TotalWidth(columnData.map(cd => cd.columnWidth || 1))\r\n                                }%`,\r\n                              }}\r\n                              key={i}\r\n                            >\r\n                              <div className='flex gap-2 justify-between items-center p-4'>\r\n                                <P\r\n                                  size='sm'\r\n                                  marginBottom='none'\r\n                                  className={`w-fit grow text-${d.align || 'left'} font-bold`}\r\n                                >\r\n                                  {d.columnTitle || d.columnId}\r\n                                </P>\r\n                                {d.sortable ? (\r\n                                  <button\r\n                                    type='button'\r\n                                    className='bg-transparent cursor-pointer p-0 m-0 border-0'\r\n                                    onClick={() => {\r\n                                      if (columnSortBy === d.columnId) {\r\n                                        if (sortDirection === 'asc') {\r\n                                          setSortDirection('desc');\r\n                                        }\r\n                                        if (sortDirection === 'desc') {\r\n                                          setColumnSortBy(undefined);\r\n                                        }\r\n                                      } else {\r\n                                        setColumnSortBy(d.columnId);\r\n                                        setSortDirection('asc');\r\n                                      }\r\n                                    }}\r\n                                  >\r\n                                    {columnSortBy === d.columnId ? (\r\n                                      sortDirection === 'asc' ? (\r\n                                        <SortingIconAscending />\r\n                                      ) : (\r\n                                        <SortingIconDescending />\r\n                                      )\r\n                                    ) : (\r\n                                      <SortingIcon />\r\n                                    )}\r\n                                  </button>\r\n                                ) : null}\r\n                                {d.filterOptions && d.filterOptions.length ? (\r\n                                  <button\r\n                                    type='button'\r\n                                    className='bg-transparent cursor-pointer m-0 p-0 border-0'\r\n                                    onClick={event => {\r\n                                      if (popupVisible === d.columnId) {\r\n                                        setPopupVisible(undefined);\r\n                                      } else if (event.currentTarget) {\r\n                                        setPopupVisible(d.columnId);\r\n                                        const rect = event.currentTarget.getBoundingClientRect();\r\n                                        setPopupStyle({\r\n                                          top: rect.bottom + window.scrollY,\r\n                                          left:\r\n                                            rect.left + window.scrollX - 160 < 0\r\n                                              ? rect.left + window.scrollX\r\n                                              : rect.left + window.scrollX - 160,\r\n                                          width: '10rem',\r\n                                        });\r\n                                      }\r\n                                    }}\r\n                                  >\r\n                                    {filterOption[\r\n                                      filterOption.findIndex(el => el.id === d.columnId)\r\n                                    ].option.length === d.filterOptions?.length ? (\r\n                                      <FilterIcon />\r\n                                    ) : (\r\n                                      <FilterIconApplied />\r\n                                    )}\r\n                                  </button>\r\n                                ) : null}\r\n                              </div>\r\n                            </th>\r\n                          ))}\r\n                        </tr>\r\n                      </thead>\r\n                      <tbody>\r\n                        {sortedData?.map((d: any, i: number) => (\r\n                          <tr\r\n                            key={i}\r\n                            className={`cursor-${\r\n                              onSeriesMouseClick ? 'pointer' : 'auto'\r\n                            } border-b border-b-primary-gray-400 dark:border-b-primary-gray-500 ${\r\n                              isEqual(mouseClickData, d)\r\n                                ? 'bg-primary-gray-200 dark:bg-primary-gray-600'\r\n                                : 'bg-transparent'\r\n                            }`}\r\n                            style={d.rowStyle}\r\n                            onClick={() => {\r\n                              if (onSeriesMouseClick) {\r\n                                if (isEqual(mouseClickData, d) && resetSelectionOnDoubleClick) {\r\n                                  setMouseClickData(undefined);\r\n                                  onSeriesMouseClick(undefined);\r\n                                } else {\r\n                                  setMouseClickData(d);\r\n                                  onSeriesMouseClick(d);\r\n                                }\r\n                              }\r\n                            }}\r\n                          >\r\n                            {columnData.map((el, j) => (\r\n                              <td\r\n                                key={j}\r\n                                className={`text-primary-gray-700 dark:text-primary-gray-100 text-sm text-${\r\n                                  el.align || 'left'\r\n                                }`}\r\n                                style={{\r\n                                  width: `calc(${\r\n                                    (100 * (d.columnWidth || 1)) /\r\n                                    TotalWidth(columnData.map(cd => cd.columnWidth || 1))\r\n                                  }%`,\r\n                                }}\r\n                              >\r\n                                <div\r\n                                  className={`text-primary-gray-700 dark:text-primary-gray-100 flex p-4 ${\r\n                                    el.align === 'right'\r\n                                      ? 'justify-end'\r\n                                      : el.align === 'center'\r\n                                        ? 'justify-center'\r\n                                        : 'justify-start'\r\n                                  }`}\r\n                                >\r\n                                  {typeof d[el.columnId] === 'number' ? (\r\n                                    <P\r\n                                      marginBottom='none'\r\n                                      size='sm'\r\n                                      className={`text-primary-gray-700 dark:text-primary-gray-100 w-fit ${\r\n                                        el.chip ? 'grow-0 rounded-sm p-2' : 'grow rounded-none p-0'\r\n                                      } text-${el.align || 'left'} ${\r\n                                        el.chip\r\n                                          ? !el.chipColors\r\n                                            ? 'bg-primary-gray-300 dark:bg-primary-gray-500'\r\n                                            : ''\r\n                                          : 'bg-transparent'\r\n                                      }`}\r\n                                      style={{\r\n                                        ...(el.chip && el.chipColors\r\n                                          ? {\r\n                                              backgroundColor:\r\n                                                el.chipColors[\r\n                                                  el.chipColors.findIndex(\r\n                                                    c =>\r\n                                                      c.value === d[el.chipColumnId || el.columnId],\r\n                                                  )\r\n                                                ].color,\r\n                                              color: getTextColorBasedOnBgColor(\r\n                                                el.chipColors[\r\n                                                  el.chipColors.findIndex(\r\n                                                    c =>\r\n                                                      c.value === d[el.chipColumnId || el.columnId],\r\n                                                  )\r\n                                                ].color,\r\n                                              ),\r\n                                            }\r\n                                          : {}),\r\n                                      }}\r\n                                    >\r\n                                      {numberFormattingFunction(\r\n                                        d[el.columnId],\r\n                                        naLabel,\r\n                                        precision,\r\n                                        el.prefix,\r\n                                        el.suffix,\r\n                                      )}\r\n                                    </P>\r\n                                  ) : typeof d[el.columnId] === 'string' ? (\r\n                                    el.separator ? (\r\n                                      <div className='text-primary-gray-700 dark:text-primary-gray-100 flex flex-wrap gap-2'>\r\n                                        {d[el.columnId]\r\n                                          .split(el.separator)\r\n                                          .map((element: string, indx: number) => (\r\n                                            <P\r\n                                              key={indx}\r\n                                              marginBottom='none'\r\n                                              size='sm'\r\n                                              className={`text-primary-gray-700 dark:text-primary-gray-100 w-fit ${\r\n                                                el.chip\r\n                                                  ? 'grow-0 rounded-sm p-2'\r\n                                                  : 'grow rounded-none p-0'\r\n                                              } text-${el.align || 'left'} ${\r\n                                                el.chip\r\n                                                  ? !el.chipColors\r\n                                                    ? 'bg-primary-gray-300 dark:bg-primary-gray-500'\r\n                                                    : ''\r\n                                                  : 'bg-transparent'\r\n                                              }`}\r\n                                              style={{\r\n                                                ...(el.chip && el.chipColors\r\n                                                  ? {\r\n                                                      backgroundColor:\r\n                                                        el.chipColors[\r\n                                                          el.chipColors.findIndex(\r\n                                                            c =>\r\n                                                              c.value ===\r\n                                                              (el.chipColumnId\r\n                                                                ? d[el.chipColumnId]\r\n                                                                : element),\r\n                                                          )\r\n                                                        ].color,\r\n                                                      color: getTextColorBasedOnBgColor(\r\n                                                        el.chipColors[\r\n                                                          el.chipColors.findIndex(\r\n                                                            c =>\r\n                                                              c.value ===\r\n                                                              (el.chipColumnId\r\n                                                                ? d[el.chipColumnId]\r\n                                                                : element),\r\n                                                          )\r\n                                                        ].color,\r\n                                                      ),\r\n                                                    }\r\n                                                  : {}),\r\n                                              }}\r\n                                            >\r\n                                              {numberFormattingFunction(\r\n                                                element,\r\n                                                naLabel,\r\n                                                precision,\r\n                                                el.prefix,\r\n                                                el.suffix,\r\n                                              )}\r\n                                            </P>\r\n                                          ))}\r\n                                      </div>\r\n                                    ) : (\r\n                                      <P\r\n                                        marginBottom='none'\r\n                                        size='sm'\r\n                                        className={`text-primary-gray-700 dark:text-primary-gray-100 w-fit ${\r\n                                          el.chip\r\n                                            ? 'grow-0 rounded-sm p-2'\r\n                                            : 'grow rounded-none p-0'\r\n                                        } text-${el.align || 'left'} ${\r\n                                          el.chip\r\n                                            ? !el.chipColors\r\n                                              ? 'bg-primary-gray-300 dark:bg-primary-gray-500'\r\n                                              : ''\r\n                                            : 'bg-transparent'\r\n                                        }`}\r\n                                        style={{\r\n                                          ...(el.chip && el.chipColors\r\n                                            ? {\r\n                                                backgroundColor:\r\n                                                  el.chipColors[\r\n                                                    el.chipColors.findIndex(\r\n                                                      c =>\r\n                                                        c.value ===\r\n                                                        d[el.chipColumnId || el.columnId],\r\n                                                    )\r\n                                                  ].color,\r\n                                                color: getTextColorBasedOnBgColor(\r\n                                                  el.chipColors[\r\n                                                    el.chipColors.findIndex(\r\n                                                      c =>\r\n                                                        c.value ===\r\n                                                        d[el.chipColumnId || el.columnId],\r\n                                                    )\r\n                                                  ].color,\r\n                                                ),\r\n                                              }\r\n                                            : {}),\r\n                                        }}\r\n                                      >\r\n                                        {numberFormattingFunction(\r\n                                          d[el.columnId],\r\n                                          naLabel,\r\n                                          precision,\r\n                                          el.prefix,\r\n                                          el.suffix,\r\n                                        )}\r\n                                      </P>\r\n                                    )\r\n                                  ) : (\r\n                                    <div>\r\n                                      {numberFormattingFunction(\r\n                                        d[el.columnId],\r\n                                        naLabel,\r\n                                        precision,\r\n                                        el.prefix,\r\n                                        el.suffix,\r\n                                      )}\r\n                                    </div>\r\n                                  )}\r\n                                </div>\r\n                              </td>\r\n                            ))}\r\n                          </tr>\r\n                        ))}\r\n                      </tbody>\r\n                    </table>\r\n                  ) : null}\r\n                </div>\r\n              </div>\r\n            </div>\r\n            {sources || footNote ? (\r\n              <GraphFooter\r\n                styles={{ footnote: styles?.footnote, source: styles?.source }}\r\n                classNames={{\r\n                  footnote: classNames?.footnote,\r\n                  source: classNames?.source,\r\n                }}\r\n                sources={sources}\r\n                footNote={footNote}\r\n                width={width}\r\n              />\r\n            ) : null}\r\n          </div>\r\n          {popupVisible && (\r\n            <div\r\n              style={popupStyle}\r\n              className='absolute p-3 border z-[1000] rounded-sm bg-primary-white dark:bg-primary-gray-700 border-primary-gray-300 dark:border-primary-gray-550'\r\n            >\r\n              <div className='max-w-60'>\r\n                <P size='sm' marginBottom='2xs' className='font-bold'>\r\n                  Filter data by\r\n                </P>\r\n                <div className='flex flex-col gap-2'>\r\n                  {columnData[\r\n                    columnData.findIndex(d => d.columnId === popupVisible)\r\n                  ].filterOptions?.map((el, i) => (\r\n                    <div key={i}>\r\n                      <label key={i} className='undp-viz-label'>\r\n                        <input\r\n                          type='checkbox'\r\n                          className='undp-viz-checkbox'\r\n                          checked={\r\n                            filterOption[\r\n                              filterOption.findIndex(d => d.id === popupVisible)\r\n                            ].option.indexOf(el) !== -1\r\n                          }\r\n                          onChange={() => {\r\n                            const indx = filterOption.findIndex(d => d.id === popupVisible);\r\n                            const opt = [...filterOption[indx].option];\r\n                            if (opt.indexOf(el) !== -1) {\r\n                              opt.splice(opt.indexOf(el), 1);\r\n                              const filterOptionDuplicate = [...filterOption];\r\n                              filterOptionDuplicate[indx].option = opt;\r\n                              setFilterOption(filterOptionDuplicate);\r\n                            } else {\r\n                              opt.push(el);\r\n                              const filterOptionDuplicate = [...filterOption];\r\n                              filterOptionDuplicate[indx].option = opt;\r\n                              setFilterOption(filterOptionDuplicate);\r\n                            }\r\n                          }}\r\n                        />\r\n                        {el}\r\n                      </label>\r\n                    </div>\r\n                  ))}\r\n                </div>\r\n              </div>\r\n            </div>\r\n          )}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n"],"names":["TotalWidth","columns","d","acc","cur","DataTable","props","width","height","graphTitle","sources","graphDescription","footNote","graphID","data","columnData","onSeriesMouseClick","language","theme","ariaLabel","backgroundColor","padding","resetSelectionOnDoubleClick","styles","classNames","minWidth","naLabel","precision","columnSortBy","setColumnSortBy","useState","mouseClickData","setMouseClickData","sortDirection","setSortDirection","popupVisible","setPopupVisible","popupStyle","setPopupStyle","filterOption","setFilterOption","sortedData","setSortedData","useEffect","dataFiltered","filter","el","cd","arr","intersection","sortBy","jsx","cn","jsxs","GraphHeader","i","P","SortingIconAscending","SortingIconDescending","SortingIcon","event","rect","FilterIcon","FilterIconApplied","isEqual","j","c","getTextColorBasedOnBgColor","numberFormattingFunction","element","indx","GraphFooter","opt","filterOptionDuplicate"],"mappings":"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"}

package/dist/DataTable.js

@@ -1,2 +1,332 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./index-BHm2KTjD-D8FylaKc.cjs"),H=require("./index-BXns0-ng.cjs"),p=require("react"),M=require("./index-BzeLQvXk.cjs"),Z=require("./index-Ds0uHjK9.cjs"),m=require("./Typography-CDR-DAHH.cjs"),R=require("./numberFormattingFunction.js"),_=require("./GraphFooter.js"),tt=require("./GraphHeader.js"),j=require("./index-CEc_9zWy.cjs"),S=require("./getTextColorBasedOnBgColor.js"),X=v=>v.map(c=>c||1).reduce((c,b)=>c+b,0);function rt(v){const{width:l,height:N,graphTitle:c,sources:b,graphDescription:C,footNote:T,graphID:L,data:d,columnData:n,onSeriesMouseClick:E,language:$="en",theme:V="light",ariaLabel:K,backgroundColor:u=!1,padding:B,resetSelectionOnDoubleClick:Y=!0,styles:g,classNames:h,minWidth:F,naLabel:I="NA",precision:w=2}=v,[x,D]=p.useState(void 0),[q,z]=p.useState(void 0),[y,P]=p.useState("asc"),[f,W]=p.useState(void 0),[J,Q]=p.useState({}),[a,G]=p.useState(n.filter(r=>r.filterOptions&&r.filterOptions.length>0).map(r=>({id:r.columnId,option:r.filterOptions}))),[U,A]=p.useState(d);return p.useEffect(()=>{const r=[];d.forEach(s=>{let t=!0;a.forEach(e=>{if(typeof s[e.id]!="object"&&typeof s[e.id]!="function"&&typeof s[e.id]!="symbol")if(n[n.findIndex(i=>i.columnId===e.id)].separator){const i=s[e.id].split(n[n.findIndex(k=>k.columnId===e.id)].separator);Z.intersection(i,e.option).length===0&&(t=!1)}else e.option.indexOf(s[e.id])===-1&&(t=!1)}),t&&r.push(s)}),A(x&&d?y==="asc"?M.sortBy(r,[x]):M.sortBy(r,[x]).reverse():r)},[x,y,d,a,n]),o.jsxRuntimeExports.jsx("div",{className:`${V||"light"} flex  ${l?"w-fit grow-0":"w-full grow"}`,dir:$==="he"||$==="ar"?"rtl":void 0,children:o.jsxRuntimeExports.jsx("div",{className:m.cnExports.cn(`${u?u===!0?"bg-primary-gray-200 dark:bg-primary-gray-650 ":"":"bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${$||"en"} w-full`,h?.graphContainer),style:{...g?.graphContainer||{},...u&&u!==!0?{backgroundColor:u}:{}},id:L,"aria-label":K||`${c?`The graph shows ${c}. `:""}This is an data table. ${C?` ${C}`:""}`,children:o.jsxRuntimeExports.jsxs("div",{className:"flex grow",style:{padding:u?B||"1rem":B||0},children:[o.jsxRuntimeExports.jsxs("div",{className:"flex flex-col gap-3 w-full justify-between grow",children:[c||C?o.jsxRuntimeExports.jsx(tt.GraphHeader,{styles:{title:g?.title,description:g?.description},classNames:{title:h?.title,description:h?.description},graphTitle:c,graphDescription:C,width:l}):null,o.jsxRuntimeExports.jsx("div",{className:"grow flex flex-col justify-center",children:o.jsxRuntimeExports.jsx("div",{className:"undp-scrollbar",style:{width:l?`${l}px`:"100%",height:N?`${N}px`:"auto"},children:o.jsxRuntimeExports.jsx("div",{style:F?{minWidth:F}:void 0,children:d?o.jsxRuntimeExports.jsxs("table",{className:"w-full",style:{borderCollapse:"collapse"},children:[o.jsxRuntimeExports.jsx("thead",{className:"text-left bg-primary-gray-300 dark:bg-primary-gray-550",children:o.jsxRuntimeExports.jsx("tr",{children:n?.map((r,s)=>o.jsxRuntimeExports.jsx("th",{className:"text-primary-gray-700 dark:text-primary-gray-100 text-sm",style:{width:`calc(${100*(r.columnWidth||1)/X(n.map(t=>t.columnWidth||1))}%`},children:o.jsxRuntimeExports.jsxs("div",{className:"flex gap-2 justify-between items-center p-4",children:[o.jsxRuntimeExports.jsx(m.TypographyExports.P,{size:"sm",marginBottom:"none",className:`w-fit grow text-${r.align||"left"} font-bold`,children:r.columnTitle||r.columnId}),r.sortable?o.jsxRuntimeExports.jsx("button",{type:"button",className:"bg-transparent cursor-pointer p-0 m-0 border-0",onClick:()=>{x===r.columnId?(y==="asc"&&P("desc"),y==="desc"&&D(void 0)):(D(r.columnId),P("asc"))},children:x===r.columnId?y==="asc"?o.jsxRuntimeExports.jsx(j.SortingIconAscending,{}):o.jsxRuntimeExports.jsx(j.SortingIconDescending,{}):o.jsxRuntimeExports.jsx(j.SortingIcon,{})}):null,r.filterOptions&&r.filterOptions.length?o.jsxRuntimeExports.jsx("button",{type:"button",className:"bg-transparent cursor-pointer m-0 p-0 border-0",onClick:t=>{if(f===r.columnId)W(void 0);else if(t.currentTarget){W(r.columnId);const e=t.currentTarget.getBoundingClientRect();Q({top:e.bottom+window.scrollY,left:e.left+window.scrollX-160<0?e.left+window.scrollX:e.left+window.scrollX-160,width:"10rem"})}},children:a[a.findIndex(t=>t.id===r.columnId)].option.length===r.filterOptions?.length?o.jsxRuntimeExports.jsx(j.FilterIcon,{}):o.jsxRuntimeExports.jsx(j.FilterIconApplied,{})}):null]})},s))})}),o.jsxRuntimeExports.jsx("tbody",{children:U?.map((r,s)=>o.jsxRuntimeExports.jsx("tr",{className:`cursor-${E?"pointer":"auto"} border-b border-b-primary-gray-400 dark:border-b-primary-gray-500 ${H.isEqual(q,r)?"bg-primary-gray-200 dark:bg-primary-gray-600":"bg-transparent"}`,style:r.rowStyle,onClick:()=>{E&&(H.isEqual(q,r)&&Y?(z(void 0),E(void 0)):(z(r),E(r)))},children:n.map((t,e)=>o.jsxRuntimeExports.jsx("td",{className:`text-primary-gray-700 dark:text-primary-gray-100 text-sm text-${t.align||"left"}`,style:{width:`calc(${100*(r.columnWidth||1)/X(n.map(i=>i.columnWidth||1))}%`},children:o.jsxRuntimeExports.jsx("div",{className:`text-primary-gray-700 dark:text-primary-gray-100 flex p-4 ${t.align==="right"?"justify-end":t.align==="center"?"justify-center":"justify-start"}`,children:typeof r[t.columnId]=="number"?o.jsxRuntimeExports.jsx(m.TypographyExports.P,{marginBottom:"none",size:"sm",className:`text-primary-gray-700 dark:text-primary-gray-100 w-fit ${t.chip?"grow-0 rounded-sm p-2":"grow rounded-none p-0"} text-${t.align||"left"} ${t.chip?t.chipColors?"":"bg-primary-gray-300 dark:bg-primary-gray-500":"bg-transparent"}`,style:{...t.chip&&t.chipColors?{backgroundColor:t.chipColors[t.chipColors.findIndex(i=>i.value===r[t.chipColumnId||t.columnId])].color,color:S.getTextColorBasedOnBgColor(t.chipColors[t.chipColors.findIndex(i=>i.value===r[t.chipColumnId||t.columnId])].color)}:{}},children:R.numberFormattingFunction(r[t.columnId],I,w,t.prefix,t.suffix)}):typeof r[t.columnId]=="string"?t.separator?o.jsxRuntimeExports.jsx("div",{className:"text-primary-gray-700 dark:text-primary-gray-100 flex flex-wrap gap-2",children:r[t.columnId].split(t.separator).map((i,k)=>o.jsxRuntimeExports.jsx(m.TypographyExports.P,{marginBottom:"none",size:"sm",className:`text-primary-gray-700 dark:text-primary-gray-100 w-fit ${t.chip?"grow-0 rounded-sm p-2":"grow rounded-none p-0"} text-${t.align||"left"} ${t.chip?t.chipColors?"":"bg-primary-gray-300 dark:bg-primary-gray-500":"bg-transparent"}`,style:{...t.chip&&t.chipColors?{backgroundColor:t.chipColors[t.chipColors.findIndex(O=>O.value===(t.chipColumnId?r[t.chipColumnId]:i))].color,color:S.getTextColorBasedOnBgColor(t.chipColors[t.chipColors.findIndex(O=>O.value===(t.chipColumnId?r[t.chipColumnId]:i))].color)}:{}},children:R.numberFormattingFunction(i,I,w,t.prefix,t.suffix)},k))}):o.jsxRuntimeExports.jsx(m.TypographyExports.P,{marginBottom:"none",size:"sm",className:`text-primary-gray-700 dark:text-primary-gray-100 w-fit ${t.chip?"grow-0 rounded-sm p-2":"grow rounded-none p-0"} text-${t.align||"left"} ${t.chip?t.chipColors?"":"bg-primary-gray-300 dark:bg-primary-gray-500":"bg-transparent"}`,style:{...t.chip&&t.chipColors?{backgroundColor:t.chipColors[t.chipColors.findIndex(i=>i.value===r[t.chipColumnId||t.columnId])].color,color:S.getTextColorBasedOnBgColor(t.chipColors[t.chipColors.findIndex(i=>i.value===r[t.chipColumnId||t.columnId])].color)}:{}},children:R.numberFormattingFunction(r[t.columnId],I,w,t.prefix,t.suffix)}):o.jsxRuntimeExports.jsx("div",{children:R.numberFormattingFunction(r[t.columnId],I,w,t.prefix,t.suffix)})})},e))},s))})]}):null})})}),b||T?o.jsxRuntimeExports.jsx(_.GraphFooter,{styles:{footnote:g?.footnote,source:g?.source},classNames:{footnote:h?.footnote,source:h?.source},sources:b,footNote:T,width:l}):null]}),f&&o.jsxRuntimeExports.jsx("div",{style:J,className:"absolute p-3 border z-[1000] rounded-sm bg-primary-white dark:bg-primary-gray-700 border-primary-gray-300 dark:border-primary-gray-550",children:o.jsxRuntimeExports.jsxs("div",{className:"max-w-60",children:[o.jsxRuntimeExports.jsx(m.TypographyExports.P,{size:"sm",marginBottom:"2xs",className:"font-bold",children:"Filter data by"}),o.jsxRuntimeExports.jsx("div",{className:"flex flex-col gap-2",children:n[n.findIndex(r=>r.columnId===f)].filterOptions?.map((r,s)=>o.jsxRuntimeExports.jsx("div",{children:o.jsxRuntimeExports.jsxs("label",{className:"undp-viz-label",children:[o.jsxRuntimeExports.jsx("input",{type:"checkbox",className:"undp-viz-checkbox",checked:a[a.findIndex(t=>t.id===f)].option.indexOf(r)!==-1,onChange:()=>{const t=a.findIndex(i=>i.id===f),e=[...a[t].option];if(e.indexOf(r)!==-1){e.splice(e.indexOf(r),1);const i=[...a];i[t].option=e,G(i)}else{e.push(r);const i=[...a];i[t].option=e,G(i)}}}),r]},s)},s))})]})})]})})})}exports.DataTable=rt;
+import { j as i, m as U } from "./index-CHPV5EwG-BPSP-7Jg.js";
+import { i as M } from "./index-27yTRcko.js";
+import { useState as l, useEffect as Z } from "react";
+import { s as P } from "./index-DxagiOHo.js";
+import { i as _ } from "./index-C1rRk_50.js";
+import { u as y } from "./Typography-Ctgfl1J5.js";
+import { n as v } from "./numberFormattingFunction-14YCbkN2.js";
+import { GraphFooter as rr } from "./GraphFooter.js";
+import { GraphHeader as or } from "./GraphHeader.js";
+import { S as ir, a as tr, b as sr, F as er, c as ar } from "./index-BmCqpO1B.js";
+import { g as S } from "./getTextColorBasedOnBgColor-B6Nk2WBf.js";
+const R = (N) => N.map((c) => c || 1).reduce((c, b) => c + b, 0);
+function yr(N) {
+  const {
+    width: p,
+    height: k,
+    graphTitle: c,
+    sources: b,
+    graphDescription: j,
+    footNote: B,
+    graphID: V,
+    data: u,
+    columnData: a,
+    onSeriesMouseClick: I,
+    language: $ = "en",
+    theme: q = "light",
+    ariaLabel: H,
+    backgroundColor: d = !1,
+    padding: F,
+    resetSelectionOnDoubleClick: Y = !0,
+    styles: f,
+    classNames: g,
+    minWidth: T,
+    naLabel: C = "NA",
+    precision: w = 2
+  } = N, [m, z] = l(void 0), [W, E] = l(void 0), [h, A] = l("asc"), [x, X] = l(void 0), [J, K] = l({}), [n, G] = l(
+    a.filter((o) => o.filterOptions && o.filterOptions.length > 0).map((o) => ({ id: o.columnId, option: o.filterOptions }))
+  ), [Q, L] = l(u);
+  return Z(() => {
+    const o = [];
+    u.forEach((e) => {
+      let r = !0;
+      n.forEach((s) => {
+        if (typeof e[s.id] != "object" && typeof e[s.id] != "function" && typeof e[s.id] != "symbol")
+          if (a[a.findIndex((t) => t.columnId === s.id)].separator) {
+            const t = e[s.id].split(
+              a[a.findIndex((O) => O.columnId === s.id)].separator
+            );
+            _(t, s.option).length === 0 && (r = !1);
+          } else s.option.indexOf(e[s.id]) === -1 && (r = !1);
+      }), r && o.push(e);
+    }), L(
+      m && u ? h === "asc" ? P(o, [m]) : P(o, [m]).reverse() : o
+    );
+  }, [m, h, u, n, a]), /* @__PURE__ */ i.jsx(
+    "div",
+    {
+      className: `${q || "light"} flex  ${p ? "w-fit grow-0" : "w-full grow"}`,
+      dir: $ === "he" || $ === "ar" ? "rtl" : void 0,
+      children: /* @__PURE__ */ i.jsx(
+        "div",
+        {
+          className: U(
+            `${d ? d === !0 ? "bg-primary-gray-200 dark:bg-primary-gray-650 " : "" : "bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${$ || "en"} w-full`,
+            g?.graphContainer
+          ),
+          style: {
+            ...f?.graphContainer || {},
+            ...d && d !== !0 ? { backgroundColor: d } : {}
+          },
+          id: V,
+          "aria-label": H || `${c ? `The graph shows ${c}. ` : ""}This is an data table. ${j ? ` ${j}` : ""}`,
+          children: /* @__PURE__ */ i.jsxs(
+            "div",
+            {
+              className: "flex grow",
+              style: { padding: d ? F || "1rem" : F || 0 },
+              children: [
+                /* @__PURE__ */ i.jsxs("div", { className: "flex flex-col gap-3 w-full justify-between grow", children: [
+                  c || j ? /* @__PURE__ */ i.jsx(
+                    or,
+                    {
+                      styles: {
+                        title: f?.title,
+                        description: f?.description
+                      },
+                      classNames: {
+                        title: g?.title,
+                        description: g?.description
+                      },
+                      graphTitle: c,
+                      graphDescription: j,
+                      width: p
+                    }
+                  ) : null,
+                  /* @__PURE__ */ i.jsx("div", { className: "grow flex flex-col justify-center", children: /* @__PURE__ */ i.jsx(
+                    "div",
+                    {
+                      className: "undp-scrollbar",
+                      style: {
+                        width: p ? `${p}px` : "100%",
+                        height: k ? `${k}px` : "auto"
+                      },
+                      children: /* @__PURE__ */ i.jsx("div", { style: T ? { minWidth: T } : void 0, children: u ? /* @__PURE__ */ i.jsxs("table", { className: "w-full", style: { borderCollapse: "collapse" }, children: [
+                        /* @__PURE__ */ i.jsx("thead", { className: "text-left bg-primary-gray-300 dark:bg-primary-gray-550", children: /* @__PURE__ */ i.jsx("tr", { children: a?.map((o, e) => /* @__PURE__ */ i.jsx(
+                          "th",
+                          {
+                            className: "text-primary-gray-700 dark:text-primary-gray-100 text-sm",
+                            style: {
+                              width: `calc(${100 * (o.columnWidth || 1) / R(a.map((r) => r.columnWidth || 1))}%`
+                            },
+                            children: /* @__PURE__ */ i.jsxs("div", { className: "flex gap-2 justify-between items-center p-4", children: [
+                              /* @__PURE__ */ i.jsx(
+                                y,
+                                {
+                                  size: "sm",
+                                  marginBottom: "none",
+                                  className: `w-fit grow text-${o.align || "left"} font-bold`,
+                                  children: o.columnTitle || o.columnId
+                                }
+                              ),
+                              o.sortable ? /* @__PURE__ */ i.jsx(
+                                "button",
+                                {
+                                  type: "button",
+                                  className: "bg-transparent cursor-pointer p-0 m-0 border-0",
+                                  onClick: () => {
+                                    m === o.columnId ? (h === "asc" && A("desc"), h === "desc" && z(void 0)) : (z(o.columnId), A("asc"));
+                                  },
+                                  children: m === o.columnId ? h === "asc" ? /* @__PURE__ */ i.jsx(ir, {}) : /* @__PURE__ */ i.jsx(tr, {}) : /* @__PURE__ */ i.jsx(sr, {})
+                                }
+                              ) : null,
+                              o.filterOptions && o.filterOptions.length ? /* @__PURE__ */ i.jsx(
+                                "button",
+                                {
+                                  type: "button",
+                                  className: "bg-transparent cursor-pointer m-0 p-0 border-0",
+                                  onClick: (r) => {
+                                    if (x === o.columnId)
+                                      X(void 0);
+                                    else if (r.currentTarget) {
+                                      X(o.columnId);
+                                      const s = r.currentTarget.getBoundingClientRect();
+                                      K({
+                                        top: s.bottom + window.scrollY,
+                                        left: s.left + window.scrollX - 160 < 0 ? s.left + window.scrollX : s.left + window.scrollX - 160,
+                                        width: "10rem"
+                                      });
+                                    }
+                                  },
+                                  children: n[n.findIndex((r) => r.id === o.columnId)].option.length === o.filterOptions?.length ? /* @__PURE__ */ i.jsx(er, {}) : /* @__PURE__ */ i.jsx(ar, {})
+                                }
+                              ) : null
+                            ] })
+                          },
+                          e
+                        )) }) }),
+                        /* @__PURE__ */ i.jsx("tbody", { children: Q?.map((o, e) => /* @__PURE__ */ i.jsx(
+                          "tr",
+                          {
+                            className: `cursor-${I ? "pointer" : "auto"} border-b border-b-primary-gray-400 dark:border-b-primary-gray-500 ${M(W, o) ? "bg-primary-gray-200 dark:bg-primary-gray-600" : "bg-transparent"}`,
+                            style: o.rowStyle,
+                            onClick: () => {
+                              I && (M(W, o) && Y ? (E(void 0), I(void 0)) : (E(o), I(o)));
+                            },
+                            children: a.map((r, s) => /* @__PURE__ */ i.jsx(
+                              "td",
+                              {
+                                className: `text-primary-gray-700 dark:text-primary-gray-100 text-sm text-${r.align || "left"}`,
+                                style: {
+                                  width: `calc(${100 * (o.columnWidth || 1) / R(a.map((t) => t.columnWidth || 1))}%`
+                                },
+                                children: /* @__PURE__ */ i.jsx(
+                                  "div",
+                                  {
+                                    className: `text-primary-gray-700 dark:text-primary-gray-100 flex p-4 ${r.align === "right" ? "justify-end" : r.align === "center" ? "justify-center" : "justify-start"}`,
+                                    children: typeof o[r.columnId] == "number" ? /* @__PURE__ */ i.jsx(
+                                      y,
+                                      {
+                                        marginBottom: "none",
+                                        size: "sm",
+                                        className: `text-primary-gray-700 dark:text-primary-gray-100 w-fit ${r.chip ? "grow-0 rounded-sm p-2" : "grow rounded-none p-0"} text-${r.align || "left"} ${r.chip ? r.chipColors ? "" : "bg-primary-gray-300 dark:bg-primary-gray-500" : "bg-transparent"}`,
+                                        style: {
+                                          ...r.chip && r.chipColors ? {
+                                            backgroundColor: r.chipColors[r.chipColors.findIndex(
+                                              (t) => t.value === o[r.chipColumnId || r.columnId]
+                                            )].color,
+                                            color: S(
+                                              r.chipColors[r.chipColors.findIndex(
+                                                (t) => t.value === o[r.chipColumnId || r.columnId]
+                                              )].color
+                                            )
+                                          } : {}
+                                        },
+                                        children: v(
+                                          o[r.columnId],
+                                          C,
+                                          w,
+                                          r.prefix,
+                                          r.suffix
+                                        )
+                                      }
+                                    ) : typeof o[r.columnId] == "string" ? r.separator ? /* @__PURE__ */ i.jsx("div", { className: "text-primary-gray-700 dark:text-primary-gray-100 flex flex-wrap gap-2", children: o[r.columnId].split(r.separator).map((t, O) => /* @__PURE__ */ i.jsx(
+                                      y,
+                                      {
+                                        marginBottom: "none",
+                                        size: "sm",
+                                        className: `text-primary-gray-700 dark:text-primary-gray-100 w-fit ${r.chip ? "grow-0 rounded-sm p-2" : "grow rounded-none p-0"} text-${r.align || "left"} ${r.chip ? r.chipColors ? "" : "bg-primary-gray-300 dark:bg-primary-gray-500" : "bg-transparent"}`,
+                                        style: {
+                                          ...r.chip && r.chipColors ? {
+                                            backgroundColor: r.chipColors[r.chipColors.findIndex(
+                                              (D) => D.value === (r.chipColumnId ? o[r.chipColumnId] : t)
+                                            )].color,
+                                            color: S(
+                                              r.chipColors[r.chipColors.findIndex(
+                                                (D) => D.value === (r.chipColumnId ? o[r.chipColumnId] : t)
+                                              )].color
+                                            )
+                                          } : {}
+                                        },
+                                        children: v(
+                                          t,
+                                          C,
+                                          w,
+                                          r.prefix,
+                                          r.suffix
+                                        )
+                                      },
+                                      O
+                                    )) }) : /* @__PURE__ */ i.jsx(
+                                      y,
+                                      {
+                                        marginBottom: "none",
+                                        size: "sm",
+                                        className: `text-primary-gray-700 dark:text-primary-gray-100 w-fit ${r.chip ? "grow-0 rounded-sm p-2" : "grow rounded-none p-0"} text-${r.align || "left"} ${r.chip ? r.chipColors ? "" : "bg-primary-gray-300 dark:bg-primary-gray-500" : "bg-transparent"}`,
+                                        style: {
+                                          ...r.chip && r.chipColors ? {
+                                            backgroundColor: r.chipColors[r.chipColors.findIndex(
+                                              (t) => t.value === o[r.chipColumnId || r.columnId]
+                                            )].color,
+                                            color: S(
+                                              r.chipColors[r.chipColors.findIndex(
+                                                (t) => t.value === o[r.chipColumnId || r.columnId]
+                                              )].color
+                                            )
+                                          } : {}
+                                        },
+                                        children: v(
+                                          o[r.columnId],
+                                          C,
+                                          w,
+                                          r.prefix,
+                                          r.suffix
+                                        )
+                                      }
+                                    ) : /* @__PURE__ */ i.jsx("div", { children: v(
+                                      o[r.columnId],
+                                      C,
+                                      w,
+                                      r.prefix,
+                                      r.suffix
+                                    ) })
+                                  }
+                                )
+                              },
+                              s
+                            ))
+                          },
+                          e
+                        )) })
+                      ] }) : null })
+                    }
+                  ) }),
+                  b || B ? /* @__PURE__ */ i.jsx(
+                    rr,
+                    {
+                      styles: { footnote: f?.footnote, source: f?.source },
+                      classNames: {
+                        footnote: g?.footnote,
+                        source: g?.source
+                      },
+                      sources: b,
+                      footNote: B,
+                      width: p
+                    }
+                  ) : null
+                ] }),
+                x && /* @__PURE__ */ i.jsx(
+                  "div",
+                  {
+                    style: J,
+                    className: "absolute p-3 border z-[1000] rounded-sm bg-primary-white dark:bg-primary-gray-700 border-primary-gray-300 dark:border-primary-gray-550",
+                    children: /* @__PURE__ */ i.jsxs("div", { className: "max-w-60", children: [
+                      /* @__PURE__ */ i.jsx(y, { size: "sm", marginBottom: "2xs", className: "font-bold", children: "Filter data by" }),
+                      /* @__PURE__ */ i.jsx("div", { className: "flex flex-col gap-2", children: a[a.findIndex((o) => o.columnId === x)].filterOptions?.map((o, e) => /* @__PURE__ */ i.jsx("div", { children: /* @__PURE__ */ i.jsxs("label", { className: "undp-viz-label", children: [
+                        /* @__PURE__ */ i.jsx(
+                          "input",
+                          {
+                            type: "checkbox",
+                            className: "undp-viz-checkbox",
+                            checked: n[n.findIndex((r) => r.id === x)].option.indexOf(o) !== -1,
+                            onChange: () => {
+                              const r = n.findIndex((t) => t.id === x), s = [...n[r].option];
+                              if (s.indexOf(o) !== -1) {
+                                s.splice(s.indexOf(o), 1);
+                                const t = [...n];
+                                t[r].option = s, G(t);
+                              } else {
+                                s.push(o);
+                                const t = [...n];
+                                t[r].option = s, G(t);
+                              }
+                            }
+                          }
+                        ),
+                        o
+                      ] }, e) }, e)) })
+                    ] })
+                  }
+                )
+              ]
+            }
+          )
+        }
+      )
+    }
+  );
+}
+export {
+  yr as DataTable
+};
 //# sourceMappingURL=DataTable.js.map