@undp/data-viz 1.2.8 → 1.3.1

package/dist/MultiGraphDashboardWideToLongFormat.d.ts

@@ -0,0 +1,128 @@
+import { JSX } from 'react/jsx-runtime';
+
+declare interface AxesClassNameObject {
+    gridLines?: string;
+    labels?: string;
+    title?: string;
+    axis?: string;
+}
+
+declare interface AxesStyleObject {
+    gridLines?: React.CSSProperties;
+    labels?: React.CSSProperties;
+    title?: React.CSSProperties;
+    axis?: React.CSSProperties;
+}
+
+declare interface ClassNameObject {
+    title?: string;
+    footnote?: string;
+    source?: string;
+    description?: string;
+    tooltip?: string;
+    xAxis?: AxesClassNameObject;
+    yAxis?: AxesClassNameObject;
+    legend?: string;
+    graphContainer?: string;
+    graphObjectValues?: string;
+    dataConnectors?: string;
+    mouseOverLine?: string;
+    regLine?: string;
+    dataCards?: string;
+}
+
+declare interface ColumnConfigurationDataType {
+    column: string;
+    delimiter?: string;
+}
+
+declare type DashboardFromWideToLongFormatColumnDataType = {
+    graphType: 'donutChart' | 'barChart' | 'unitChart' | 'treeMap' | 'circlePacking';
+    columnWidth?: number;
+    dataFilters?: DataFilterDataType[];
+    settings?: any;
+    graphDataConfiguration?: GraphConfigurationDataType[];
+};
+
+declare type DashboardFromWideToLongFormatLayoutDataType = {
+    title?: string;
+    description?: string;
+    dropdownLabel?: string;
+    padding?: string;
+    backgroundColor?: string | boolean;
+    language?: Languages;
+    rows: {
+        columns: DashboardFromWideToLongFormatColumnDataType[];
+        height?: number;
+    }[];
+};
+
+declare interface DataFilterDataType {
+    column: string;
+    includeValues?: (string | number | boolean | null | undefined)[];
+    excludeValues?: (string | number | boolean | null | undefined)[];
+}
+
+declare interface DataSettingsWideToLongDataType {
+    dataURL?: string | FileSettingsDataType[];
+    fileType?: 'csv' | 'json' | 'api';
+    delimiter?: string;
+    data?: any;
+    keyColumn: string;
+    idColumnTitle?: string;
+    dataTransformation?: string;
+    apiHeaders?: any;
+}
+
+declare interface FileSettingsDataType {
+    dataURL: string;
+    idColumnName: string;
+    fileType?: 'csv' | 'json' | 'api';
+    delimiter?: string;
+    columnsToArray?: ColumnConfigurationDataType[];
+    apiHeaders?: any;
+    dataTransformation?: string;
+}
+
+declare interface GraphConfigurationDataType {
+    columnId: string | string[];
+    chartConfigId: string;
+}
+
+declare type Languages = 'en' | 'ar' | 'az' | 'bn' | 'cy' | 'he' | 'hi' | 'jp' | 'ka' | 'km' | 'ko' | 'my' | 'ne' | 'zh' | 'custom';
+
+export declare function MultiGraphDashboardWideToLongFormat(props: Props): JSX.Element;
+
+declare interface Props {
+    dashboardID?: string;
+    dashboardLayout: DashboardFromWideToLongFormatLayoutDataType;
+    dataSettings: DataSettingsWideToLongDataType;
+    debugMode?: boolean;
+    theme?: 'dark' | 'light';
+    readableHeader?: {
+        value: string;
+        label: string;
+    }[];
+    dataFilters?: DataFilterDataType[];
+    uiMode?: 'light' | 'normal';
+    graphStyles?: StyleObject;
+    graphClassNames?: ClassNameObject;
+}
+
+declare interface StyleObject {
+    title?: React.CSSProperties;
+    footnote?: React.CSSProperties;
+    source?: React.CSSProperties;
+    description?: React.CSSProperties;
+    graphContainer?: React.CSSProperties;
+    tooltip?: React.CSSProperties;
+    xAxis?: AxesStyleObject;
+    yAxis?: AxesStyleObject;
+    graphObjectValues?: React.CSSProperties;
+    dataConnectors?: React.CSSProperties;
+    mouseOverLine?: React.CSSProperties;
+    regLine?: React.CSSProperties;
+    dataCards?: React.CSSProperties;
+}
+
+export { }

package/dist/MultiGraphDashboardWideToLongFormat.js

@@ -0,0 +1,244 @@
+import { j as r } from "./index-CHPV5EwG-BPSP-7Jg.js";
+import { useMemo as N, useState as f, useEffect as j, useCallback as k } from "react";
+import { Z as W, H as R } from "./DropdownSelect-CDC9lEqU.js";
+import { f as A } from "./checkIfMultiple-BB7PlCNh.js";
+import { y as H } from "./Spinner-C85UF28E.js";
+import { SingleGraphDashboard as V } from "./SingleGraphDashboard.js";
+import { f as U, a as $, b as M, c as z, t as E } from "./fetchAndParseData-Bcmr659B.js";
+import { GraphHeader as G } from "./GraphHeader.js";
+import { f as P } from "./filterData-B8ocT57s.js";
+function O(l, n, t, a) {
+  const o = [];
+  return l.forEach((d) => {
+    Object.entries(d).forEach(([s, g]) => {
+      if (s !== n) {
+        const c = {
+          indicator: t.findIndex((u) => u.value === s) !== -1 ? t[t.findIndex((u) => u.value === s)].label : s,
+          value: g
+        };
+        c[n] = d[n], o.push(c);
+      }
+    });
+  }), a && console.log(o), o;
+}
+const b = (l) => l.map((a) => a.columnWidth || 1).reduce((a, o) => a + o, 0);
+function aa(l) {
+  const {
+    dashboardID: n,
+    dashboardLayout: t,
+    dataSettings: a,
+    debugMode: o,
+    theme: d = "light",
+    readableHeader: s,
+    dataFilters: g,
+    uiMode: c = "normal",
+    graphStyles: u,
+    graphClassNames: w
+  } = l, D = N(
+    () => ({
+      ignoreCase: !0,
+      ignoreAccents: !0,
+      trim: !0
+    }),
+    []
+  ), [v, T] = f(void 0), [I, F] = f([]), [h, y] = f(void 0), [p, S] = f(void 0);
+  j(() => {
+    if (p) {
+      const i = p.filter(
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (m) => m[a.keyColumn] === h
+      );
+      T(i);
+    }
+  }, [p, h, a.keyColumn]);
+  const C = k(async () => {
+    if (a)
+      try {
+        const m = await (a.dataURL ? typeof a.dataURL == "string" ? a.fileType === "json" ? U(
+          a.dataURL,
+          void 0,
+          a.dataTransformation,
+          o
+        ) : a.fileType === "api" ? $(
+          a.dataURL,
+          a.apiHeaders,
+          void 0,
+          a.dataTransformation,
+          o
+        ) : M(
+          a.dataURL,
+          a.dataTransformation,
+          void 0,
+          o,
+          a.delimiter,
+          !0
+        ) : z(a.dataURL, a.idColumnTitle) : E(a.data, void 0)), e = P(m, g || []);
+        F(
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          e.map((L) => L[a.keyColumn])
+        ), y(e[0][a.keyColumn]);
+        const x = O(
+          e,
+          a.keyColumn,
+          s || [],
+          o
+        );
+        S(x);
+      } catch (i) {
+        console.error("Data fetching error:", i);
+      }
+  }, [a, o, g, s]);
+  return j(() => {
+    C();
+  }, [C]), /* @__PURE__ */ r.jsx(
+    "div",
+    {
+      className: `${d || "light"} flex grow`,
+      dir: t.language === "he" || t.language === "ar" ? "rtl" : void 0,
+      children: /* @__PURE__ */ r.jsx(
+        "div",
+        {
+          className: `${t?.backgroundColor ? t?.backgroundColor === !0 ? "bg-primary-gray-200 dark:bg-primary-gray-650 " : "" : "bg-transparent "}flex flex-col h-inherit w-full ml-auto mr-auto grow gap-4 ${t?.language || "en"}`,
+          style: {
+            ...t?.backgroundColor && t?.backgroundColor !== !0 ? { backgroundColor: t?.backgroundColor } : {}
+          },
+          id: n,
+          children: /* @__PURE__ */ r.jsx(
+            "div",
+            {
+              className: "flex grow",
+              style: {
+                padding: t.backgroundColor ? t.padding || "1rem" : t.padding || 0
+              },
+              children: /* @__PURE__ */ r.jsxs("div", { className: "flex flex-col w-full gap-4 grow justify-between", children: [
+                t.title || t.description ? /* @__PURE__ */ r.jsx(
+                  G,
+                  {
+                    graphTitle: t.title,
+                    graphDescription: t.description,
+                    isDashboard: !0
+                  }
+                ) : null,
+                v ? /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+                  /* @__PURE__ */ r.jsx(
+                    "div",
+                    {
+                      style: {
+                        display: "flex",
+                        gap: "1rem",
+                        flexWrap: "wrap",
+                        alignItems: "flex-start",
+                        width: "100%"
+                      },
+                      children: /* @__PURE__ */ r.jsxs(
+                        "div",
+                        {
+                          style: {
+                            width: "100%",
+                            flexGrow: 1,
+                            flexShrink: 0,
+                            minWidth: "240px"
+                          },
+                          children: [
+                            t.dropdownLabel ? /* @__PURE__ */ r.jsx(A, { className: "mb-2", children: t.dropdownLabel }) : null,
+                            /* @__PURE__ */ r.jsx(
+                              W,
+                              {
+                                options: I.map((i) => ({
+                                  value: i,
+                                  label: i
+                                })),
+                                size: "sm",
+                                variant: c,
+                                isClearable: !1,
+                                isSearchable: !0,
+                                controlShouldRenderValue: !0,
+                                filterOption: R(D),
+                                onChange: (i) => {
+                                  y(i?.value);
+                                },
+                                defaultValue: {
+                                  value: h,
+                                  label: h
+                                }
+                              }
+                            )
+                          ]
+                        }
+                      )
+                    }
+                  ),
+                  t.rows.map((i, m) => /* @__PURE__ */ r.jsx(
+                    "div",
+                    {
+                      style: {
+                        display: "flex",
+                        gap: "1rem",
+                        alignItems: "stretch",
+                        minHeight: `${i.height || 0}px`,
+                        height: "auto",
+                        width: "100%",
+                        flexWrap: "wrap"
+                      },
+                      children: i.columns.map((e, x) => /* @__PURE__ */ r.jsx(
+                        "div",
+                        {
+                          className: "flex bg-transparent h-inherit grow min-w-60",
+                          style: {
+                            width: `calc(${100 * (e.columnWidth || 1) / b(i.columns)}% - ${(b(i.columns) - (e.columnWidth || 1)) / b(i.columns)}rem)`,
+                            minHeight: "inherit"
+                          },
+                          children: /* @__PURE__ */ r.jsx(
+                            V,
+                            {
+                              graphType: e.graphType,
+                              dataFilters: e.dataFilters,
+                              uiMode: c,
+                              graphSettings: {
+                                ...e.settings || {},
+                                width: void 0,
+                                height: void 0,
+                                radius: e.graphType === "donutChart" ? void 0 : e.settings?.radius,
+                                size: e.graphType === "unitChart" ? e.settings.size : void 0,
+                                language: e.settings?.language || t.language,
+                                theme: e.settings?.theme || d,
+                                styles: e.settings?.styles || u,
+                                classNames: e.settings?.classNames || w
+                              },
+                              dataSettings: { data: v },
+                              graphDataConfiguration: e.graphDataConfiguration ? e.graphDataConfiguration : e.graphType === "unitChart" ? [
+                                {
+                                  columnId: "indicator",
+                                  chartConfigId: "label"
+                                },
+                                { columnId: "value", chartConfigId: "value" }
+                              ] : [
+                                {
+                                  columnId: "indicator",
+                                  chartConfigId: "label"
+                                },
+                                { columnId: "value", chartConfigId: "size" }
+                              ],
+                              debugMode: o,
+                              readableHeader: s || []
+                            }
+                          )
+                        },
+                        x
+                      ))
+                    },
+                    m
+                  ))
+                ] }) : /* @__PURE__ */ r.jsx("div", { className: "w-full flex justify-center p-4", children: /* @__PURE__ */ r.jsx(H, {}) })
+              ] })
+            }
+          )
+        }
+      )
+    }
+  );
+}
+export {
+  aa as MultiGraphDashboardWideToLongFormat
+};
+//# sourceMappingURL=MultiGraphDashboardWideToLongFormat.js.map

package/dist/MultiGraphDashboardWideToLongFormat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiGraphDashboardWideToLongFormat.js","sources":["../src/Utils/wideToLongTranformation.ts","../src/Components/Dashboard/MultiGraphDashboardWideToLongFormat.tsx"],"sourcesContent":["export function wideToLongTransformation(\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  data: any,\r\n  keyColumn: string,\r\n  readableHeader: {\r\n    value: string;\r\n    label: string;\r\n  }[],\r\n  debugMode?: boolean,\r\n) {\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  const transformedData: any = [];\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  data.forEach((row: any) => {\r\n    Object.entries(row).forEach(([key, value]) => {\r\n      if (key !== keyColumn) {\r\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n        const obj: any = {\r\n          indicator:\r\n            readableHeader.findIndex(d => d.value === key) !== -1\r\n              ? readableHeader[readableHeader.findIndex(d => d.value === key)].label\r\n              : key,\r\n          value,\r\n        };\r\n        obj[keyColumn] = row[keyColumn];\r\n        transformedData.push(obj);\r\n      }\r\n    });\r\n  });\r\n  if (debugMode) {\r\n    // eslint-disable-next-line no-console\r\n    console.log(transformedData);\r\n  }\r\n  return transformedData;\r\n}\r\n","import { useCallback, useEffect, useMemo, useState } from 'react';\r\nimport { createFilter, DropdownSelect } from '@undp/design-system-react/DropdownSelect';\r\nimport { Label } from '@undp/design-system-react/Label';\r\nimport { Spinner } from '@undp/design-system-react/Spinner';\r\n\r\nimport { SingleGraphDashboard } from './SingleGraphDashboard';\r\n\r\nimport {\r\n  ClassNameObject,\r\n  DashboardFromWideToLongFormatColumnDataType,\r\n  DashboardFromWideToLongFormatLayoutDataType,\r\n  DataFilterDataType,\r\n  DataSettingsWideToLongDataType,\r\n  StyleObject,\r\n} from '@/Types';\r\nimport {\r\n  fetchAndParseCSV,\r\n  fetchAndParseJSON,\r\n  fetchAndParseMultipleDataSources,\r\n  fetchAndTransformDataFromAPI,\r\n} from '@/Utils/fetchAndParseData';\r\nimport { GraphHeader } from '@/Components/Elements/GraphHeader';\r\nimport { wideToLongTransformation } from '@/Utils/wideToLongTranformation';\r\nimport { filterData } from '@/Utils/transformData/filterData';\r\nimport { transformColumnsToArray } from '@/Utils/transformData/transformColumnsToArray';\r\n\r\ninterface Props {\r\n  dashboardID?: string;\r\n  dashboardLayout: DashboardFromWideToLongFormatLayoutDataType;\r\n  dataSettings: DataSettingsWideToLongDataType;\r\n  debugMode?: boolean;\r\n  theme?: 'dark' | 'light';\r\n  readableHeader?: {\r\n    value: string;\r\n    label: string;\r\n  }[];\r\n  dataFilters?: DataFilterDataType[];\r\n  uiMode?: 'light' | 'normal';\r\n  graphStyles?: StyleObject;\r\n  graphClassNames?: ClassNameObject;\r\n}\r\n\r\nconst TotalWidth = (columns: DashboardFromWideToLongFormatColumnDataType[]) => {\r\n  const columnWidth = columns.map(d => d.columnWidth || 1);\r\n  const sum = columnWidth.reduce((acc, cur) => acc + cur, 0);\r\n  return sum;\r\n};\r\n\r\nexport function MultiGraphDashboardWideToLongFormat(props: Props) {\r\n  const {\r\n    dashboardID,\r\n    dashboardLayout,\r\n    dataSettings,\r\n    debugMode,\r\n    theme = 'light',\r\n    readableHeader,\r\n    dataFilters,\r\n    uiMode = 'normal',\r\n    graphStyles,\r\n    graphClassNames,\r\n  } = props;\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  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  const [data, setData] = useState<any>(undefined);\r\n  const [filterValues, setFilterValues] = useState<string[]>([]);\r\n  const [selectedFilterValues, setSelectedFilterValues] = useState<string | undefined>(undefined);\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  const [dataFromFile, setDataFromFile] = useState<any>(undefined);\r\n\r\n  useEffect(() => {\r\n    if (dataFromFile) {\r\n      const filteredData = dataFromFile.filter(\r\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n        (item: any) => item[dataSettings.keyColumn] === selectedFilterValues,\r\n      );\r\n      setData(filteredData);\r\n    }\r\n  }, [dataFromFile, selectedFilterValues, dataSettings.keyColumn]);\r\n  const fetchDataHandler = useCallback(async () => {\r\n    if (dataSettings) {\r\n      try {\r\n        const fetchData = dataSettings.dataURL\r\n          ? typeof dataSettings.dataURL === 'string'\r\n            ? dataSettings.fileType === 'json'\r\n              ? fetchAndParseJSON(\r\n                  dataSettings.dataURL,\r\n                  undefined,\r\n                  dataSettings.dataTransformation,\r\n                  debugMode,\r\n                )\r\n              : dataSettings.fileType === 'api'\r\n                ? fetchAndTransformDataFromAPI(\r\n                    dataSettings.dataURL,\r\n                    dataSettings.apiHeaders,\r\n                    undefined,\r\n                    dataSettings.dataTransformation,\r\n                    debugMode,\r\n                  )\r\n                : fetchAndParseCSV(\r\n                    dataSettings.dataURL,\r\n                    dataSettings.dataTransformation,\r\n                    undefined,\r\n                    debugMode,\r\n                    dataSettings.delimiter,\r\n                    true,\r\n                  )\r\n            : fetchAndParseMultipleDataSources(dataSettings.dataURL, dataSettings.idColumnTitle)\r\n          : transformColumnsToArray(dataSettings.data, undefined);\r\n\r\n        const d = await fetchData;\r\n        const filteredData = filterData(d, dataFilters || []);\r\n        setFilterValues(\r\n          // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n          filteredData.map((el: any) => el[dataSettings.keyColumn]),\r\n        );\r\n        setSelectedFilterValues(filteredData[0][dataSettings.keyColumn]);\r\n        const tempData = wideToLongTransformation(\r\n          filteredData,\r\n          dataSettings.keyColumn,\r\n          readableHeader || [],\r\n          debugMode,\r\n        );\r\n        setDataFromFile(tempData);\r\n      } catch (error) {\r\n        console.error('Data fetching error:', error);\r\n      }\r\n    }\r\n  }, [dataSettings, debugMode, dataFilters, readableHeader]);\r\n  useEffect(() => {\r\n    fetchDataHandler();\r\n  }, [fetchDataHandler]);\r\n  return (\r\n    <div\r\n      className={`${theme || 'light'} flex grow`}\r\n      dir={\r\n        dashboardLayout.language === 'he' || dashboardLayout.language === 'ar' ? 'rtl' : undefined\r\n      }\r\n    >\r\n      <div\r\n        className={`${\r\n          !dashboardLayout?.backgroundColor\r\n            ? 'bg-transparent '\r\n            : dashboardLayout?.backgroundColor === true\r\n              ? 'bg-primary-gray-200 dark:bg-primary-gray-650 '\r\n              : ''\r\n        }flex flex-col h-inherit w-full ml-auto mr-auto grow gap-4 ${\r\n          dashboardLayout?.language || 'en'\r\n        }`}\r\n        style={{\r\n          ...(dashboardLayout?.backgroundColor && dashboardLayout?.backgroundColor !== true\r\n            ? { backgroundColor: dashboardLayout?.backgroundColor }\r\n            : {}),\r\n        }}\r\n        id={dashboardID}\r\n      >\r\n        <div\r\n          className='flex grow'\r\n          style={{\r\n            padding: dashboardLayout.backgroundColor\r\n              ? dashboardLayout.padding || '1rem'\r\n              : dashboardLayout.padding || 0,\r\n          }}\r\n        >\r\n          <div className='flex flex-col w-full gap-4 grow justify-between'>\r\n            {dashboardLayout.title || dashboardLayout.description ? (\r\n              <GraphHeader\r\n                graphTitle={dashboardLayout.title}\r\n                graphDescription={dashboardLayout.description}\r\n                isDashboard\r\n              />\r\n            ) : null}\r\n            {data ? (\r\n              <>\r\n                <div\r\n                  style={{\r\n                    display: 'flex',\r\n                    gap: '1rem',\r\n                    flexWrap: 'wrap',\r\n                    alignItems: 'flex-start',\r\n                    width: '100%',\r\n                  }}\r\n                >\r\n                  <div\r\n                    style={{\r\n                      width: '100%',\r\n                      flexGrow: 1,\r\n                      flexShrink: 0,\r\n                      minWidth: '240px',\r\n                    }}\r\n                  >\r\n                    {dashboardLayout.dropdownLabel ? (\r\n                      <Label className='mb-2'>{dashboardLayout.dropdownLabel}</Label>\r\n                    ) : null}\r\n                    <DropdownSelect\r\n                      options={filterValues.map(d => ({\r\n                        value: d,\r\n                        label: d,\r\n                      }))}\r\n                      size='sm'\r\n                      variant={uiMode}\r\n                      isClearable={false}\r\n                      isSearchable\r\n                      controlShouldRenderValue\r\n                      filterOption={createFilter(filterConfig)}\r\n                      // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n                      onChange={(el: any) => {\r\n                        setSelectedFilterValues(el?.value);\r\n                      }}\r\n                      defaultValue={{\r\n                        value: selectedFilterValues as string,\r\n                        label: selectedFilterValues as string,\r\n                      }}\r\n                    />\r\n                  </div>\r\n                </div>\r\n                {dashboardLayout.rows.map((d, i) => (\r\n                  <div\r\n                    key={i}\r\n                    style={{\r\n                      display: 'flex',\r\n                      gap: '1rem',\r\n                      alignItems: 'stretch',\r\n                      minHeight: `${d.height || 0}px`,\r\n                      height: 'auto',\r\n                      width: '100%',\r\n                      flexWrap: 'wrap',\r\n                    }}\r\n                  >\r\n                    {d.columns.map((el, j) => (\r\n                      <div\r\n                        key={j}\r\n                        className='flex bg-transparent h-inherit grow min-w-60'\r\n                        style={{\r\n                          width: `calc(${\r\n                            (100 * (el.columnWidth || 1)) / TotalWidth(d.columns)\r\n                          }% - ${\r\n                            (TotalWidth(d.columns) - (el.columnWidth || 1)) / TotalWidth(d.columns)\r\n                          }rem)`,\r\n                          minHeight: 'inherit',\r\n                        }}\r\n                      >\r\n                        <SingleGraphDashboard\r\n                          graphType={el.graphType}\r\n                          dataFilters={el.dataFilters}\r\n                          uiMode={uiMode}\r\n                          graphSettings={{\r\n                            ...(el.settings || {}),\r\n                            width: undefined,\r\n                            height: undefined,\r\n                            radius: el.graphType === 'donutChart' ? undefined : el.settings?.radius,\r\n                            size: el.graphType === 'unitChart' ? el.settings.size : undefined,\r\n                            language: el.settings?.language || dashboardLayout.language,\r\n                            theme: el.settings?.theme || theme,\r\n                            styles: el.settings?.styles || graphStyles,\r\n                            classNames: el.settings?.classNames || graphClassNames,\r\n                          }}\r\n                          dataSettings={{ data }}\r\n                          graphDataConfiguration={\r\n                            el.graphDataConfiguration\r\n                              ? el.graphDataConfiguration\r\n                              : el.graphType === 'unitChart'\r\n                                ? [\r\n                                    {\r\n                                      columnId: 'indicator',\r\n                                      chartConfigId: 'label',\r\n                                    },\r\n                                    { columnId: 'value', chartConfigId: 'value' },\r\n                                  ]\r\n                                : [\r\n                                    {\r\n                                      columnId: 'indicator',\r\n                                      chartConfigId: 'label',\r\n                                    },\r\n                                    { columnId: 'value', chartConfigId: 'size' },\r\n                                  ]\r\n                          }\r\n                          debugMode={debugMode}\r\n                          readableHeader={readableHeader || []}\r\n                        />\r\n                      </div>\r\n                    ))}\r\n                  </div>\r\n                ))}\r\n              </>\r\n            ) : (\r\n              <div className='w-full flex justify-center p-4'>\r\n                <Spinner />\r\n              </div>\r\n            )}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n"],"names":["wideToLongTransformation","data","keyColumn","readableHeader","debugMode","transformedData","row","key","value","obj","d","TotalWidth","columns","acc","cur","MultiGraphDashboardWideToLongFormat","props","dashboardID","dashboardLayout","dataSettings","theme","dataFilters","uiMode","graphStyles","graphClassNames","filterConfig","useMemo","setData","useState","filterValues","setFilterValues","selectedFilterValues","setSelectedFilterValues","dataFromFile","setDataFromFile","useEffect","filteredData","item","fetchDataHandler","useCallback","fetchAndParseJSON","fetchAndTransformDataFromAPI","fetchAndParseCSV","fetchAndParseMultipleDataSources","transformColumnsToArray","filterData","el","tempData","error","jsx","jsxs","GraphHeader","Fragment","Label","DropdownSelect","createFilter","i","j","SingleGraphDashboard","Spinner"],"mappings":"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"}

package/dist/MultiGraphDashboardWideToLongFormatFromConfig.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("./index-CHPV5EwG-DDoeWRVt.cjs"),o=require("react"),n=require("./Spinner-DA6Z5E4n.cjs"),d=require("./MultiGraphDashboardWideToLongFormat.cjs"),u=require("./fetchAndParseData-DmgQtB9n.cjs");function h(s){const{config:t}=s,[e,r]=o.useState(void 0);return o.useEffect(()=>{typeof t=="string"?u.fetchAndParseJSON(t).then(i=>{r(i)}):r(t)},[t]),e?a.jsxRuntimeExports.jsx(d.MultiGraphDashboardWideToLongFormat,{dashboardID:e.dashboardID,dashboardLayout:e.dashboardLayout,dataSettings:e.dataSettings,debugMode:e.debugMode,theme:e.theme,readableHeader:e.readableHeader,dataFilters:e.dataFilters,uiMode:e.uiMode,graphStyles:e.graphStyles,graphClassNames:e.graphClassNames}):a.jsxRuntimeExports.jsx("div",{className:"w-full flex justify-center p-4",children:a.jsxRuntimeExports.jsx(n.y,{})})}exports.MultiGraphDashboardWideToLongFormatFromConfig=h;
+//# sourceMappingURL=MultiGraphDashboardWideToLongFormatFromConfig.cjs.map

package/dist/MultiGraphDashboardWideToLongFormatFromConfig.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiGraphDashboardWideToLongFormatFromConfig.cjs","sources":["../src/Components/Dashboard/MultiGraphDashboardWideToLongFormatFromConfig.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\r\nimport { Spinner } from '@undp/design-system-react/Spinner';\r\n\r\nimport { MultiGraphDashboardWideToLongFormat } from './MultiGraphDashboardWideToLongFormat';\r\n\r\nimport {\r\n  ClassNameObject,\r\n  DashboardFromWideToLongFormatLayoutDataType,\r\n  DataFilterDataType,\r\n  DataSettingsWideToLongDataType,\r\n  StyleObject,\r\n} from '@/Types';\r\nimport { fetchAndParseJSON } from '@/Utils/fetchAndParseData';\r\n\r\ninterface ConfigObject {\r\n  validateDataAndSettings?: boolean;\r\n  dashboardID?: string;\r\n  dashboardLayout: DashboardFromWideToLongFormatLayoutDataType;\r\n  dataSettings: DataSettingsWideToLongDataType;\r\n  debugMode?: boolean;\r\n  theme?: 'dark' | 'light';\r\n  readableHeader?: {\r\n    value: string;\r\n    label: string;\r\n  }[];\r\n  dataFilters?: DataFilterDataType[];\r\n  uiMode?: 'light' | 'normal';\r\n  graphStyles?: StyleObject;\r\n  graphClassNames?: ClassNameObject;\r\n}\r\n\r\ninterface Props {\r\n  config: string | ConfigObject;\r\n}\r\n\r\nexport function MultiGraphDashboardWideToLongFormatFromConfig(props: Props) {\r\n  const { config } = props;\r\n  const [configSettings, setConfigSettings] = useState<ConfigObject | undefined>(undefined);\r\n\r\n  useEffect(() => {\r\n    if (typeof config === 'string') {\r\n      const fetchData = fetchAndParseJSON(config);\r\n      fetchData.then(d => {\r\n        setConfigSettings(d);\r\n      });\r\n    } else {\r\n      setConfigSettings(config);\r\n    }\r\n  }, [config]);\r\n  if (!configSettings)\r\n    return (\r\n      <div className='w-full flex justify-center p-4'>\r\n        <Spinner />\r\n      </div>\r\n    );\r\n  return (\r\n    <MultiGraphDashboardWideToLongFormat\r\n      dashboardID={configSettings.dashboardID}\r\n      dashboardLayout={configSettings.dashboardLayout}\r\n      dataSettings={configSettings.dataSettings}\r\n      debugMode={configSettings.debugMode}\r\n      theme={configSettings.theme}\r\n      readableHeader={configSettings.readableHeader}\r\n      dataFilters={configSettings.dataFilters}\r\n      uiMode={configSettings.uiMode}\r\n      graphStyles={configSettings.graphStyles}\r\n      graphClassNames={configSettings.graphClassNames}\r\n    />\r\n  );\r\n}\r\n"],"names":["MultiGraphDashboardWideToLongFormatFromConfig","props","config","configSettings","setConfigSettings","useState","useEffect","fetchAndParseJSON","d","jsx","MultiGraphDashboardWideToLongFormat","Spinner"],"mappings":"6RAmCO,SAASA,EAA8CC,EAAc,CAC1E,KAAM,CAAE,OAAAC,GAAWD,EACb,CAACE,EAAgBC,CAAiB,EAAIC,EAAAA,SAAmC,MAAS,EAYxF,OAVAC,EAAAA,UAAU,IAAM,CACV,OAAOJ,GAAW,SACFK,EAAAA,kBAAkBL,CAAM,EAChC,KAAKM,GAAK,CAClBJ,EAAkBI,CAAC,CACrB,CAAC,EAEDJ,EAAkBF,CAAM,CAE5B,EAAG,CAACA,CAAM,CAAC,EACNC,EAOHM,EAAAA,kBAAAA,IAACC,EAAAA,oCAAA,CACC,YAAaP,EAAe,YAC5B,gBAAiBA,EAAe,gBAChC,aAAcA,EAAe,aAC7B,UAAWA,EAAe,UAC1B,MAAOA,EAAe,MACtB,eAAgBA,EAAe,eAC/B,YAAaA,EAAe,YAC5B,OAAQA,EAAe,OACvB,YAAaA,EAAe,YAC5B,gBAAiBA,EAAe,eAAA,CAAA,0BAf/B,MAAA,CAAI,UAAU,iCACb,SAAAM,wBAACE,EAAAA,IAAQ,EACX,CAgBN"}

package/dist/MultiGraphDashboardWideToLongFormatFromConfig.d.ts

@@ -0,0 +1,133 @@
+import { JSX } from 'react/jsx-runtime';
+
+declare interface AxesClassNameObject {
+    gridLines?: string;
+    labels?: string;
+    title?: string;
+    axis?: string;
+}
+
+declare interface AxesStyleObject {
+    gridLines?: React.CSSProperties;
+    labels?: React.CSSProperties;
+    title?: React.CSSProperties;
+    axis?: React.CSSProperties;
+}
+
+declare interface ClassNameObject {
+    title?: string;
+    footnote?: string;
+    source?: string;
+    description?: string;
+    tooltip?: string;
+    xAxis?: AxesClassNameObject;
+    yAxis?: AxesClassNameObject;
+    legend?: string;
+    graphContainer?: string;
+    graphObjectValues?: string;
+    dataConnectors?: string;
+    mouseOverLine?: string;
+    regLine?: string;
+    dataCards?: string;
+}
+
+declare interface ColumnConfigurationDataType {
+    column: string;
+    delimiter?: string;
+}
+
+declare interface ConfigObject {
+    validateDataAndSettings?: boolean;
+    dashboardID?: string;
+    dashboardLayout: DashboardFromWideToLongFormatLayoutDataType;
+    dataSettings: DataSettingsWideToLongDataType;
+    debugMode?: boolean;
+    theme?: 'dark' | 'light';
+    readableHeader?: {
+        value: string;
+        label: string;
+    }[];
+    dataFilters?: DataFilterDataType[];
+    uiMode?: 'light' | 'normal';
+    graphStyles?: StyleObject;
+    graphClassNames?: ClassNameObject;
+}
+
+declare type DashboardFromWideToLongFormatColumnDataType = {
+    graphType: 'donutChart' | 'barChart' | 'unitChart' | 'treeMap' | 'circlePacking';
+    columnWidth?: number;
+    dataFilters?: DataFilterDataType[];
+    settings?: any;
+    graphDataConfiguration?: GraphConfigurationDataType[];
+};
+
+declare type DashboardFromWideToLongFormatLayoutDataType = {
+    title?: string;
+    description?: string;
+    dropdownLabel?: string;
+    padding?: string;
+    backgroundColor?: string | boolean;
+    language?: Languages;
+    rows: {
+        columns: DashboardFromWideToLongFormatColumnDataType[];
+        height?: number;
+    }[];
+};
+
+declare interface DataFilterDataType {
+    column: string;
+    includeValues?: (string | number | boolean | null | undefined)[];
+    excludeValues?: (string | number | boolean | null | undefined)[];
+}
+
+declare interface DataSettingsWideToLongDataType {
+    dataURL?: string | FileSettingsDataType[];
+    fileType?: 'csv' | 'json' | 'api';
+    delimiter?: string;
+    data?: any;
+    keyColumn: string;
+    idColumnTitle?: string;
+    dataTransformation?: string;
+    apiHeaders?: any;
+}
+
+declare interface FileSettingsDataType {
+    dataURL: string;
+    idColumnName: string;
+    fileType?: 'csv' | 'json' | 'api';
+    delimiter?: string;
+    columnsToArray?: ColumnConfigurationDataType[];
+    apiHeaders?: any;
+    dataTransformation?: string;
+}
+
+declare interface GraphConfigurationDataType {
+    columnId: string | string[];
+    chartConfigId: string;
+}
+
+declare type Languages = 'en' | 'ar' | 'az' | 'bn' | 'cy' | 'he' | 'hi' | 'jp' | 'ka' | 'km' | 'ko' | 'my' | 'ne' | 'zh' | 'custom';
+
+export declare function MultiGraphDashboardWideToLongFormatFromConfig(props: Props): JSX.Element;
+
+declare interface Props {
+    config: string | ConfigObject;
+}
+
+declare interface StyleObject {
+    title?: React.CSSProperties;
+    footnote?: React.CSSProperties;
+    source?: React.CSSProperties;
+    description?: React.CSSProperties;
+    graphContainer?: React.CSSProperties;
+    tooltip?: React.CSSProperties;
+    xAxis?: AxesStyleObject;
+    yAxis?: AxesStyleObject;
+    graphObjectValues?: React.CSSProperties;
+    dataConnectors?: React.CSSProperties;
+    mouseOverLine?: React.CSSProperties;
+    regLine?: React.CSSProperties;
+    dataCards?: React.CSSProperties;
+}
+
+export { }

package/dist/MultiGraphDashboardWideToLongFormatFromConfig.js

@@ -0,0 +1,31 @@
+import { j as a } from "./index-CHPV5EwG-BPSP-7Jg.js";
+import { useState as d, useEffect as i } from "react";
+import { y as n } from "./Spinner-C85UF28E.js";
+import { MultiGraphDashboardWideToLongFormat as f } from "./MultiGraphDashboardWideToLongFormat.js";
+import { f as h } from "./fetchAndParseData-Bcmr659B.js";
+function b(r) {
+  const { config: t } = r, [e, o] = d(void 0);
+  return i(() => {
+    typeof t == "string" ? h(t).then((s) => {
+      o(s);
+    }) : o(t);
+  }, [t]), e ? /* @__PURE__ */ a.jsx(
+    f,
+    {
+      dashboardID: e.dashboardID,
+      dashboardLayout: e.dashboardLayout,
+      dataSettings: e.dataSettings,
+      debugMode: e.debugMode,
+      theme: e.theme,
+      readableHeader: e.readableHeader,
+      dataFilters: e.dataFilters,
+      uiMode: e.uiMode,
+      graphStyles: e.graphStyles,
+      graphClassNames: e.graphClassNames
+    }
+  ) : /* @__PURE__ */ a.jsx("div", { className: "w-full flex justify-center p-4", children: /* @__PURE__ */ a.jsx(n, {}) });
+}
+export {
+  b as MultiGraphDashboardWideToLongFormatFromConfig
+};
+//# sourceMappingURL=MultiGraphDashboardWideToLongFormatFromConfig.js.map

package/dist/MultiGraphDashboardWideToLongFormatFromConfig.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiGraphDashboardWideToLongFormatFromConfig.js","sources":["../src/Components/Dashboard/MultiGraphDashboardWideToLongFormatFromConfig.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\r\nimport { Spinner } from '@undp/design-system-react/Spinner';\r\n\r\nimport { MultiGraphDashboardWideToLongFormat } from './MultiGraphDashboardWideToLongFormat';\r\n\r\nimport {\r\n  ClassNameObject,\r\n  DashboardFromWideToLongFormatLayoutDataType,\r\n  DataFilterDataType,\r\n  DataSettingsWideToLongDataType,\r\n  StyleObject,\r\n} from '@/Types';\r\nimport { fetchAndParseJSON } from '@/Utils/fetchAndParseData';\r\n\r\ninterface ConfigObject {\r\n  validateDataAndSettings?: boolean;\r\n  dashboardID?: string;\r\n  dashboardLayout: DashboardFromWideToLongFormatLayoutDataType;\r\n  dataSettings: DataSettingsWideToLongDataType;\r\n  debugMode?: boolean;\r\n  theme?: 'dark' | 'light';\r\n  readableHeader?: {\r\n    value: string;\r\n    label: string;\r\n  }[];\r\n  dataFilters?: DataFilterDataType[];\r\n  uiMode?: 'light' | 'normal';\r\n  graphStyles?: StyleObject;\r\n  graphClassNames?: ClassNameObject;\r\n}\r\n\r\ninterface Props {\r\n  config: string | ConfigObject;\r\n}\r\n\r\nexport function MultiGraphDashboardWideToLongFormatFromConfig(props: Props) {\r\n  const { config } = props;\r\n  const [configSettings, setConfigSettings] = useState<ConfigObject | undefined>(undefined);\r\n\r\n  useEffect(() => {\r\n    if (typeof config === 'string') {\r\n      const fetchData = fetchAndParseJSON(config);\r\n      fetchData.then(d => {\r\n        setConfigSettings(d);\r\n      });\r\n    } else {\r\n      setConfigSettings(config);\r\n    }\r\n  }, [config]);\r\n  if (!configSettings)\r\n    return (\r\n      <div className='w-full flex justify-center p-4'>\r\n        <Spinner />\r\n      </div>\r\n    );\r\n  return (\r\n    <MultiGraphDashboardWideToLongFormat\r\n      dashboardID={configSettings.dashboardID}\r\n      dashboardLayout={configSettings.dashboardLayout}\r\n      dataSettings={configSettings.dataSettings}\r\n      debugMode={configSettings.debugMode}\r\n      theme={configSettings.theme}\r\n      readableHeader={configSettings.readableHeader}\r\n      dataFilters={configSettings.dataFilters}\r\n      uiMode={configSettings.uiMode}\r\n      graphStyles={configSettings.graphStyles}\r\n      graphClassNames={configSettings.graphClassNames}\r\n    />\r\n  );\r\n}\r\n"],"names":["MultiGraphDashboardWideToLongFormatFromConfig","props","config","configSettings","setConfigSettings","useState","useEffect","fetchAndParseJSON","d","jsx","MultiGraphDashboardWideToLongFormat","Spinner"],"mappings":";;;;;AAmCO,SAASA,EAA8CC,GAAc;AAC1E,QAAM,EAAE,QAAAC,MAAWD,GACb,CAACE,GAAgBC,CAAiB,IAAIC,EAAmC,MAAS;AAYxF,SAVAC,EAAU,MAAM;AACd,IAAI,OAAOJ,KAAW,WACFK,EAAkBL,CAAM,EAChC,KAAK,CAAAM,MAAK;AAClB,MAAAJ,EAAkBI,CAAC;AAAA,IACrB,CAAC,IAEDJ,EAAkBF,CAAM;AAAA,EAE5B,GAAG,CAACA,CAAM,CAAC,GACNC,IAOHM,gBAAAA,EAAAA;AAAAA,IAACC;AAAA,IAAA;AAAA,MACC,aAAaP,EAAe;AAAA,MAC5B,iBAAiBA,EAAe;AAAA,MAChC,cAAcA,EAAe;AAAA,MAC7B,WAAWA,EAAe;AAAA,MAC1B,OAAOA,EAAe;AAAA,MACtB,gBAAgBA,EAAe;AAAA,MAC/B,aAAaA,EAAe;AAAA,MAC5B,QAAQA,EAAe;AAAA,MACvB,aAAaA,EAAe;AAAA,MAC5B,iBAAiBA,EAAe;AAAA,IAAA;AAAA,EAAA,0BAf/B,OAAA,EAAI,WAAU,kCACb,UAAAM,gBAAAA,MAACE,KAAQ,GACX;AAgBN;"}

package/dist/MultiLineAltChart.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./index-CHPV5EwG-DDoeWRVt.cjs"),p=require("react"),fe=require("./index-CZbIGs8q.cjs"),d=require("./parse-hMnG_lRV.cjs"),Ae=require("./index-BzeLQvXk.cjs"),Le=require("./numberFormattingFunction-02t-wJta.cjs"),Se=require("./Tooltip-n8z5bfav.cjs"),m=require("./checkIfNullOrUndefined-BCW3Y1ML.cjs"),Ne=require("./customArea-BYNyxAkm.cjs"),Me=require("./AxisTitle-CK9YeovX.cjs"),$e=require("./Axis-DE7dSn1_.cjs"),Te=require("./XTicksAndGridLines-CCzXIV8d.cjs"),Ve=require("./ReferenceLine-CuFMk0cI.cjs"),Ue=require("./YTicksAndGridLines-DBDuz6vb.cjs"),Fe=require("./index-CylX-pWB.cjs"),q=require("./Colors.cjs"),He=require("./use-in-view-BCmzDU2O.cjs"),We=require("./time-Byw_jYQ7.cjs"),Ge=require("./linear-BVckp9RD.cjs"),Ye=require("./delaunay-rcy0HhZi.cjs"),qe=require("./line-DHV4JwCR.cjs"),he=require("./step-BZ3C8QFW.cjs"),Pe=require("./select-Bnfk0lJx.cjs"),Y=require("./proxy-PQd2AItT.cjs"),Xe=require("./init-DU0ybBc_.cjs"),Be=require("./pointer-Dkq5NV1q.cjs"),ze=require("./GraphFooter.cjs"),Je=require("./GraphHeader.cjs"),Ke=require("./EmptyState-d8_8SxeW.cjs"),Qe=require("./ColorLegendWithMouseOver.cjs");function Ze(de){const{data:s,width:I,height:K,lineColors:a,dateFormat:u,noOfXTicks:pe,rightMargin:_,topMargin:ge,bottomMargin:P,suffix:A,prefix:h,leftMargin:C,tooltip:ee,onSeriesMouseOver:T,refValues:Q,highlightAreaSettings:S,minValue:X,maxValue:te,highlightedLines:N,animate:n,rtl:ie,strokeWidth:k,showDots:B,annotations:ye,customHighlightAreaSettings:je,yAxisTitle:oe,noOfYTicks:we,minDate:ne,maxDate:re,curveType:z,styles:b,colorDomain:v,selectedColor:V,classNames:g,showLabels:U,dimmedOpacity:R,precision:D,naLabel:be,customLayers:se}=de,ae=p.useRef(null),y=He.useInView(ae,{once:n.once,amount:n.amount}),[E,ve]=p.useState(!1);p.useEffect(()=>{if(y&&!E){const e=setTimeout(()=>{ve(!0)},(n.duration+.5)*1e3);return()=>clearTimeout(e)}},[y,E,n.duration]);const Oe=z==="linear"?qe.curveLinear:z==="step"?he.curveStep:z==="stepAfter"?he.stepAfter:z==="stepBefore"?he.stepBefore:he.monotoneX,l=Ae.sortBy(s.map(e=>({...e,date:d.parse(`${e.date}`,u,new Date)})),"date").filter(e=>!m.checkIfNullOrUndefined(e.y)),Ce=fe.uniqBy(l,e=>e.label).map(e=>e.label),Z=fe.uniqBy(Ae.sortBy(s.map(e=>({...e,date:d.parse(`${e.date}`,u,new Date)})),"date"),e=>e.date).map(e=>e.date),[f,j]=p.useState(void 0),[L,F]=p.useState(void 0),[le,H]=p.useState(void 0),O={top:ge,bottom:P,left:oe?C+30:C,right:_},W=p.useRef(null),ce=Ce.map(e=>Ae.sortBy(l.filter(o=>o.label==e),"date")),xe=S.map(e=>({...e,coordinates:[e.coordinates[0]===null?null:d.parse(`${e.coordinates[0]}`,u,new Date),e.coordinates[1]===null?null:d.parse(`${e.coordinates[1]}`,u,new Date)]})),ue=je.map(e=>({...e,coordinates:e.coordinates.map((o,x)=>x%2===0?d.parse(`${o}`,u,new Date):o)})),w=I-O.left-O.right,M=K-O.top-O.bottom,G=ne?d.parse(`${ne}`,u,new Date):Z[0],me=re?d.parse(`${re}`,u,new Date):Z[Z.length-1],i=m.checkIfNullOrUndefined(X)?Math.min(...l.map(e=>e.y).filter(e=>!m.checkIfNullOrUndefined(e)))?Math.min(...l.map(e=>e.y).filter(e=>!m.checkIfNullOrUndefined(e)))>0?0:Math.min(...l.map(e=>e.y).filter(e=>!m.checkIfNullOrUndefined(e))):0:X,J=Math.max(...l.map(e=>e.y).filter(e=>!m.checkIfNullOrUndefined(e)))?Math.max(...l.map(e=>e.y).filter(e=>!m.checkIfNullOrUndefined(e))):0,r=We.time().domain([G,me]).range([0,w]),c=Ge.linear().domain([m.checkIfNullOrUndefined(X)?i:X,m.checkIfNullOrUndefined(te)?J>0?J:0:te]).range([M,0]).nice(),Ie=Ye.Delaunay.from(l.filter(e=>!m.checkIfNullOrUndefined(e.date)&&!m.checkIfNullOrUndefined(e.y)),e=>r(e.date),e=>c(e.y)).voronoi([0,0,w<0?0:w,M<0?0:M]),Re=qe.line().x(e=>r(e.date)).y(e=>c(e.y)).curve(Oe),ke=c.ticks(we),De=r.ticks(pe);return p.useEffect(()=>{const e=x=>{const $=l[Xe.bisectCenter(l.map(Ee=>Ee.date),r.invert(Be.pointer(x)[0]),1)];j($||l[l.length-1]),H(x.clientY),F(x.clientX),T?.($||l[l.length-1])},o=()=>{j(void 0),F(void 0),H(void 0)};Pe.select(W.current).on("mousemove",e).on("mouseout",o),T?.(void 0)},[r,l,T]),t.jsxRuntimeExports.jsxs(t.jsxRuntimeExports.Fragment,{children:[t.jsxRuntimeExports.jsx(Y.motion.svg,{width:`${I}px`,height:`${K}px`,viewBox:`0 0 ${I} ${K}`,direction:"ltr",ref:ae,children:t.jsxRuntimeExports.jsxs("g",{transform:`translate(${O.left},${O.top})`,children:[t.jsxRuntimeExports.jsx(Fe.HighlightArea,{areaSettings:xe,width:w,height:M,scale:r,animate:n,isInView:y}),t.jsxRuntimeExports.jsx(Ne.CustomArea,{areaSettings:ue,scaleX:r,scaleY:c,animate:n,isInView:y}),t.jsxRuntimeExports.jsxs("g",{children:[t.jsxRuntimeExports.jsx(Ue.YTicksAndGridLines,{values:ke.filter(e=>e!==0),y:ke.filter(e=>e!==0).map(e=>c(e)),x1:0-C,x2:w+O.right,styles:{gridLines:b?.yAxis?.gridLines,labels:b?.yAxis?.labels},classNames:{gridLines:g?.yAxis?.gridLines,labels:g?.yAxis?.labels},suffix:A,prefix:h,labelType:"secondary",showGridLines:!0,labelPos:"vertical",precision:D}),t.jsxRuntimeExports.jsx($e.Axis,{y1:c(i<0?0:i),y2:c(i<0?0:i),x1:0-C,x2:w+O.right,label:Le.numberFormattingFunction(i<0?0:i,"NA",D,h,A),labelPos:{x:0-C,y:c(i<0?0:i),dx:0,dy:J<0?"1em":-5},classNames:{axis:g?.xAxis?.axis,label:g?.yAxis?.labels},styles:{axis:b?.xAxis?.axis,label:b?.yAxis?.labels}}),t.jsxRuntimeExports.jsx(Me.AxisTitle,{x:0-C-15,y:M/2,style:b?.yAxis?.title,className:g?.yAxis?.title,text:oe,rotate90:!0})]}),t.jsxRuntimeExports.jsx("g",{children:t.jsxRuntimeExports.jsx(Te.XTicksAndGridLines,{values:De.map(e=>d.format(e,u)),x:De.map(e=>r(e)),y1:0,y2:M,styles:{gridLines:b?.xAxis?.gridLines,labels:b?.xAxis?.labels},classNames:{gridLines:t.mo("opacity-0",g?.xAxis?.gridLines),labels:t.mo("fill-primary-gray-700 dark:fill-primary-gray-300 xs:max-[360px]:hidden text-[9px] md:text-[10px] lg:text-xs",g?.xAxis?.labels)},suffix:A,prefix:h,labelType:"primary",showGridLines:!0,precision:D})}),se.filter(e=>e.position==="before").map(e=>e.layer),t.jsxRuntimeExports.jsxs(Y.motion.g,{children:[ce.map(e=>t.jsxRuntimeExports.jsxs(Y.motion.g,{exit:{opacity:0,transition:{duration:n.duration}},variants:{initial:{opacity:f?e[0].label===f.label?1:R:V?e[0].color&&a[v.indexOf(e[0].color)]===V?1:R:N.length!==0?N.indexOf(e[0].label)!==-1?1:R:1},whileInView:{opacity:f?e[0].label===f.label?1:R:V?e[0].color&&a[v.indexOf(e[0].color)]===V?1:R:N.length!==0?N.indexOf(e[0].label)!==-1?1:R:1,transition:{duration:n.duration}}},initial:"initial",animate:y?"whileInView":"initial",children:[t.jsxRuntimeExports.jsx(Y.motion.path,{d:Re(e.filter(o=>!m.checkIfNullOrUndefined(o.y)))||"",style:{fill:"none",strokeWidth:f?e[0].label===f.label?k+Math.max(2,.5*k):k:N.length!==0&&N.indexOf(e[0].label)!==-1?k+Math.max(2,.5*k):k},exit:{opacity:0,transition:{duration:n.duration}},variants:{initial:{pathLength:0,d:Re(e.filter(o=>!m.checkIfNullOrUndefined(o.y)))||"",opacity:1,stroke:s.filter(o=>o.color).length===0?a[0]:e[0].color?a[v.indexOf(e[0].color)]:q.Colors.gray},whileInView:{pathLength:1,d:Re(e.filter(o=>!m.checkIfNullOrUndefined(o.y)))||"",opacity:1,stroke:s.filter(o=>o.color).length===0?a[0]:e[0].color?a[v.indexOf(e[0].color)]:q.Colors.gray,transition:{duration:n.duration}}},initial:"initial",animate:y?"whileInView":"initial"}),e.map((o,x)=>t.jsxRuntimeExports.jsx(Y.motion.g,{children:m.checkIfNullOrUndefined(o.y)?null:t.jsxRuntimeExports.jsx(t.jsxRuntimeExports.Fragment,{children:B?t.jsxRuntimeExports.jsx(Y.motion.circle,{r:w/e.length<5?0:w/e.length<20?2:4,exit:{opacity:0,transition:{duration:n.duration}},variants:{initial:{opacity:0,fill:s.filter($=>$.color).length===0?a[0]:e[0].color?a[v.indexOf(e[0].color)]:q.Colors.gray,cx:r(o.date),cy:c(o.y)},whileInView:{opacity:1,fill:s.filter($=>$.color).length===0?a[0]:e[0].color?a[v.indexOf(e[0].color)]:q.Colors.gray,transition:{duration:E?n.duration:.5,delay:E?0:n.duration},cx:r(o.date),cy:c(o.y)}},initial:"initial",animate:y?"whileInView":"initial"}):null})},x)),(N.indexOf(e[0].label)!==-1||f?.label===e[0].label)&&U?t.jsxRuntimeExports.jsx(Y.motion.text,{style:{fill:s.filter(o=>o.color).length===0?a[0]:e[0].color?a[v.indexOf(e[0].color)]:q.Colors.gray},className:"text-sm font-bold",dx:5,dy:4,exit:{opacity:0,transition:{duration:n.duration}},variants:{initial:{opacity:0,x:r(e[e.length-1].date),y:c(e[e.length-1].y)},whileInView:{opacity:1,x:r(e[e.length-1].date),y:c(e[e.length-1].y),transition:{duration:E?n.duration:.5,delay:E?0:n.duration}}},initial:"initial",animate:y?"whileInView":"initial",children:e[0].label}):null]},e[0].label)),f?t.jsxRuntimeExports.jsx("text",{y:c(f.y)-8,x:r(f.date),className:t.mo("graph-value text-sm font-bold",g?.graphObjectValues),style:{fill:s.filter(e=>e.color).length===0?a[0]:f.color?a[v.indexOf(f.color)]:q.Colors.gray,textAnchor:"middle",...b?.graphObjectValues||{}},children:Le.numberFormattingFunction(f.y,be,D,h,A)}):null]}),l.filter(e=>!m.checkIfNullOrUndefined(e.y)).map((e,o)=>t.jsxRuntimeExports.jsx("g",{children:t.jsxRuntimeExports.jsx("path",{d:Ie.renderCell(l.findIndex(x=>x.label===e.label&&x.date===e.date)),opacity:0,onMouseEnter:x=>{j(e),H(x.clientY),F(x.clientX),T?.(e)},onMouseMove:x=>{j(e),H(x.clientY),F(x.clientX)},onMouseLeave:()=>{j(void 0),F(void 0),H(void 0),T?.(void 0)}})},o)),Q?t.jsxRuntimeExports.jsx(t.jsxRuntimeExports.Fragment,{children:Q.map((e,o)=>t.jsxRuntimeExports.jsx(Ve.RefLineY,{text:e.text,color:e.color,y:c(e.value),x1:0-C,x2:w+O.right,classNames:e.classNames,styles:e.styles,animate:n,isInView:y},o))}):null,t.jsxRuntimeExports.jsx("g",{children:ye.map((e,o)=>{const x=Ne.getLineEndPoint({x:e.xCoordinate?r(d.parse(`${e.xCoordinate}`,u,new Date))+(e.xOffset||0):0+(e.xOffset||0),y:e.yCoordinate?c(e.yCoordinate)+(e.yOffset||0)-8:0+(e.yOffset||0)-8},{x:e.xCoordinate?r(d.parse(`${e.xCoordinate}`,u,new Date)):0,y:e.yCoordinate?c(e.yCoordinate):0},m.checkIfNullOrUndefined(e.connectorRadius)?3.5:e.connectorRadius),$=e.showConnector?{y1:x.y,x1:x.x,y2:e.yCoordinate?c(e.yCoordinate)+(e.yOffset||0):0+(e.yOffset||0),x2:e.xCoordinate?r(d.parse(`${e.xCoordinate}`,u,new Date))+(e.xOffset||0):0+(e.xOffset||0),cy:e.yCoordinate?c(e.yCoordinate):0,cx:e.xCoordinate?r(d.parse(`${e.xCoordinate}`,u,new Date)):0,circleRadius:m.checkIfNullOrUndefined(e.connectorRadius)?3.5:e.connectorRadius,strokeWidth:e.showConnector===!0?2:Math.min(e.showConnector||0,1)}:void 0,Ee={y:e.yCoordinate?c(e.yCoordinate)+(e.yOffset||0)-8:0+(e.yOffset||0)-8,x:ie?0:e.xCoordinate?r(d.parse(`${e.xCoordinate}`,u,new Date))+(e.xOffset||0):0+(e.xOffset||0),width:ie?e.xCoordinate?r(d.parse(`${e.xCoordinate}`,u,new Date))+(e.xOffset||0):0+(e.xOffset||0):w-(e.xCoordinate?r(d.parse(`${e.xCoordinate}`,u,new Date))+(e.xOffset||0):0+(e.xOffset||0)),maxWidth:e.maxWidth,fontWeight:e.fontWeight,align:e.align};return t.jsxRuntimeExports.jsx(Ne.Annotation,{color:e.color,connectorsSettings:$,labelSettings:Ee,text:e.text,classNames:e.classNames,styles:e.styles,animate:n,isInView:y},o)})}),se.filter(e=>e.position==="after").map(e=>e.layer)]})}),f&&ee&&L&&le?t.jsxRuntimeExports.jsx(Se.Tooltip,{data:f,body:ee,xPos:L,yPos:le,backgroundStyle:b?.tooltip,className:g?.tooltip}):null]})}function _e(de){const{data:s,graphTitle:I,showNAColor:K=!0,colors:a,colorDomain:u,suffix:pe="",sources:_,prefix:ge="",graphDescription:P,height:A,width:h,footNote:C,noOfXTicks:ee=10,dateFormat:T="yyyy",padding:Q,backgroundColor:S=!1,leftMargin:X=30,rightMargin:te=50,topMargin:N=20,bottomMargin:n=25,showColorScale:ie=!0,tooltip:k,relativeHeight:B,onSeriesMouseOver:ye,showLabels:je=!0,refValues:oe=[],highlightAreaSettings:we=[],graphID:ne,minValue:re,maxValue:z,highlightedLines:b=[],graphDownload:v=!1,dataDownload:V=!1,animate:g=!1,language:U="en",colorLegendTitle:R,minHeight:D=0,strokeWidth:be=2,showDots:se=!0,annotations:ae=[],customHighlightAreaSettings:y=[],theme:E="light",ariaLabel:ve,yAxisTitle:Oe,noOfYTicks:l=5,minDate:Ce,maxDate:Z,curveType:f="curve",styles:j,classNames:L,dimmedOpacity:F=.3,precision:le=2,customLayers:H=[],naLabel:O="NA"}=de,[W,ce]=p.useState(0),[xe,ue]=p.useState(0),[w,M]=p.useState(void 0),G=p.useRef(null),me=p.useRef(null);return p.useEffect(()=>{const i=new ResizeObserver(J=>{ce(h||J[0].target.clientWidth||620),ue(A||J[0].target.clientHeight||480)});return G.current&&(ue(G.current.clientHeight||480),ce(G.current.clientWidth||620),h||i.observe(G.current)),()=>i.disconnect()},[h,A]),t.jsxRuntimeExports.jsx("div",{className:`${E||"light"} flex  ${h?"w-fit grow-0":"w-full grow"}`,dir:U==="he"||U==="ar"?"rtl":void 0,children:t.jsxRuntimeExports.jsx("div",{className:t.mo(`${S?S===!0?"bg-primary-gray-200 dark:bg-primary-gray-650 ":"":"bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${U||"en"}`,L?.graphContainer),style:{...j?.graphContainer||{},...S&&S!==!0?{backgroundColor:S}:{}},id:ne,ref:me,"aria-label":ve||`${I?`The graph shows ${I}. `:""}This is a multi-line chart that shows trends over time.${P?` ${P}`:""}`,children:t.jsxRuntimeExports.jsx("div",{className:"flex grow",style:{padding:S?Q||"1rem":Q||0},children:t.jsxRuntimeExports.jsxs("div",{className:"flex flex-col w-full gap-4 grow justify-between",children:[I||P||v||V?t.jsxRuntimeExports.jsx(Je.GraphHeader,{styles:{title:j?.title,description:j?.description},classNames:{title:L?.title,description:L?.description},graphTitle:I,graphDescription:P,width:h,graphDownload:v?me.current:void 0,dataDownload:V?s.map(i=>i.data).filter(i=>i!==void 0).length>0?s.map(i=>i.data).filter(i=>i!==void 0):s.filter(i=>i!==void 0):null}):null,t.jsxRuntimeExports.jsx("div",{className:"grow flex flex-col justify-center gap-3 w-full",children:s.length===0?t.jsxRuntimeExports.jsx(Ke.EmptyState,{}):t.jsxRuntimeExports.jsxs(t.jsxRuntimeExports.Fragment,{children:[ie&&s.filter(i=>i.color).length!==0?t.jsxRuntimeExports.jsx(Qe.ColorLegendWithMouseOver,{width:h,colorLegendTitle:R,colors:a||q.Colors[E].categoricalColors.colors,colorDomain:u||fe.uniqBy(s.filter(i=>i.color),"color").map(i=>i.color).filter(i=>i!==void 0),setSelectedColor:M,showNAColor:K}):null,t.jsxRuntimeExports.jsx("div",{className:"w-full grow leading-0",ref:G,"aria-label":"Graph area",children:(h||W)&&(A||xe)?t.jsxRuntimeExports.jsx(Ze,{data:s,lineColors:s.filter(i=>i.color).length===0?a?[a]:[q.Colors.primaryColors["blue-600"]]:a||q.Colors[E].categoricalColors.colors,width:h||W,height:Math.max(D,A||(B?D?(h||W)*B>D?(h||W)*B:D:(h||W)*B:xe)),dateFormat:T,noOfXTicks:ee,leftMargin:X,rightMargin:te,topMargin:N,bottomMargin:n,tooltip:k,onSeriesMouseOver:ye,suffix:pe,prefix:ge,highlightAreaSettings:we,refValues:oe,minValue:re,maxValue:z,highlightedLines:b,animate:g===!0?{duration:.5,once:!0,amount:.5}:g||{duration:0,once:!0,amount:0},rtl:U==="he"||U==="ar",strokeWidth:be,showDots:se,annotations:ae,customHighlightAreaSettings:y,yAxisTitle:Oe,noOfYTicks:l,minDate:Ce,maxDate:Z,curveType:f,styles:j,classNames:L,selectedColor:w,showLabels:je,colorDomain:s.filter(i=>i.color).length===0?[]:u||fe.uniqBy(s.filter(i=>i.color),"color").map(i=>i.color),dimmedOpacity:F,precision:le,customLayers:H,naLabel:O}):null})]})}),_||C?t.jsxRuntimeExports.jsx(ze.GraphFooter,{styles:{footnote:j?.footnote,source:j?.source},classNames:{footnote:L?.footnote,source:L?.source},sources:_,footNote:C,width:h}):null]})})})})}exports.MultiLineAltChart=_e;
+//# sourceMappingURL=MultiLineAltChart.cjs.map