@undp/data-viz 2.5.4 → 2.6.1

package/dist/SingleGraphDashboardThreeDGraphsFromConfig.js

@@ -1,29 +1,37 @@
-import { c as f, j as s } from "./index-CHPV5EwG-BzibaIRc.js";
-import { useState as p, useEffect as h } from "react";
-import { w as c } from "./Spinner-B2IIKg9r.js";
-import { SingleGraphDashboardThreeDGraphs as S } from "./SingleGraphDashboardThreeDGraphs.js";
-import { f as m } from "./fetchAndParseData-BAXhgTDM.js";
-function F(g) {
-  const e = f.c(19), {
-    config: a
-  } = g, [t, d] = p(void 0);
-  let r, o;
-  if (e[0] !== a ? (r = () => {
-    (async () => {
-      if (typeof a == "string") {
-        const l = await m(a);
-        d(l);
-      } else
-        d(a);
-    })();
-  }, o = [a], e[0] = a, e[1] = r, e[2] = o) : (r = e[1], o = e[2]), h(r, o), !t) {
-    let i;
-    return e[3] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (i = /* @__PURE__ */ s.jsx("div", { className: "w-full flex justify-center p-4", children: /* @__PURE__ */ s.jsx(c, {}) }), e[3] = i) : i = e[3], i;
-  }
-  let n;
-  return e[4] !== t.advancedDataSelectionOptions || e[5] !== t.dataFilters || e[6] !== t.dataSelectionOptions || e[7] !== t.dataSettings || e[8] !== t.dataTransform || e[9] !== t.debugMode || e[10] !== t.filters || e[11] !== t.graphDataConfiguration || e[12] !== t.graphSettings || e[13] !== t.graphType || e[14] !== t.highlightDataPointSettings || e[15] !== t.noOfFiltersPerRow || e[16] !== t.readableHeader || e[17] !== t.uiMode ? (n = /* @__PURE__ */ s.jsx(S, { graphSettings: t.graphSettings, dataSettings: t.dataSettings, filters: t.filters, graphType: t.graphType, dataTransform: t.dataTransform, graphDataConfiguration: t.graphDataConfiguration, dataFilters: t.dataFilters, debugMode: t.debugMode, dataSelectionOptions: t.dataSelectionOptions, advancedDataSelectionOptions: t.advancedDataSelectionOptions, readableHeader: t.readableHeader, noOfFiltersPerRow: t.noOfFiltersPerRow, uiMode: t.uiMode, highlightDataPointSettings: t.highlightDataPointSettings }), e[4] = t.advancedDataSelectionOptions, e[5] = t.dataFilters, e[6] = t.dataSelectionOptions, e[7] = t.dataSettings, e[8] = t.dataTransform, e[9] = t.debugMode, e[10] = t.filters, e[11] = t.graphDataConfiguration, e[12] = t.graphSettings, e[13] = t.graphType, e[14] = t.highlightDataPointSettings, e[15] = t.noOfFiltersPerRow, e[16] = t.readableHeader, e[17] = t.uiMode, e[18] = n) : n = e[18], n;
+import { t as e } from "./jsx-runtime-C76bEyh7.js";
+import { r as t } from "./fetchAndParseData-C50SqMPu.js";
+import { t as n } from "./SingleGraphDashboardThreeDGraphs-BsCgN8DA.js";
+import { useEffect as r, useState as i } from "react";
+import { Spinner as a } from "@undp/design-system-react/Spinner";
+//#region src/Components/Dashboard/PerformanceIntensive/SingleGraphDashboardThreeDGraphsFromConfig.tsx
+var o = e();
+function s(e) {
+	let { config: s } = e, [c, l] = i(void 0);
+	return r(() => {
+		(async () => {
+			l(typeof s == "string" ? await t(s) : s);
+		})();
+	}, [s]), c ? /* @__PURE__ */ (0, o.jsx)(n, {
+		graphSettings: c.graphSettings,
+		dataSettings: c.dataSettings,
+		filters: c.filters,
+		graphType: c.graphType,
+		dataTransform: c.dataTransform,
+		graphDataConfiguration: c.graphDataConfiguration,
+		dataFilters: c.dataFilters,
+		debugMode: c.debugMode,
+		dataSelectionOptions: c.dataSelectionOptions,
+		advancedDataSelectionOptions: c.advancedDataSelectionOptions,
+		readableHeader: c.readableHeader,
+		noOfFiltersPerRow: c.noOfFiltersPerRow,
+		uiMode: c.uiMode,
+		highlightDataPointSettings: c.highlightDataPointSettings
+	}) : /* @__PURE__ */ (0, o.jsx)("div", {
+		className: "w-full flex justify-center p-4",
+		children: /* @__PURE__ */ (0, o.jsx)(a, {})
+	});
 }
-export {
-  F as SingleGraphDashboardThreeDGraphsFromConfig
-};
-//# sourceMappingURL=SingleGraphDashboardThreeDGraphsFromConfig.js.map
+//#endregion
+export { s as SingleGraphDashboardThreeDGraphsFromConfig };
+
+//# sourceMappingURL=SingleGraphDashboardThreeDGraphsFromConfig.js.map

package/dist/SingleGraphDashboardThreeDGraphsFromConfig.js.map

@@ -1 +1 @@
-{"version":3,"file":"SingleGraphDashboardThreeDGraphsFromConfig.js","sources":["../src/Components/Dashboard/PerformanceIntensive/SingleGraphDashboardThreeDGraphsFromConfig.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\r\nimport { Spinner } from '@undp/design-system-react/Spinner';\r\n\r\nimport { SingleGraphDashboardThreeDGraphs } from './SingleGraphDashboardThreeDGraphs';\r\n\r\nimport {\r\n  AdvancedDataSelectionDataType,\r\n  AggregationSettingsDataType,\r\n  DataFilterDataType,\r\n  DataSelectionDataType,\r\n  DataSettingsDataType,\r\n  FilterUiSettingsDataType,\r\n  GraphConfigurationDataType,\r\n  GraphSettingsDataType,\r\n  HighlightDataPointSettingsDataType,\r\n  ThreeDGraphType,\r\n} from '@/Types';\r\nimport { fetchAndParseJSON } from '@/Utils/fetchAndParseData';\r\n\r\ninterface ConfigObject {\r\n  graphSettings?: GraphSettingsDataType;\r\n  dataSettings: DataSettingsDataType;\r\n  filters?: FilterUiSettingsDataType[];\r\n  graphType: ThreeDGraphType;\r\n  noOfFiltersPerRow?: number;\r\n  dataTransform?: {\r\n    keyColumn: string;\r\n    aggregationColumnsSetting?: AggregationSettingsDataType[];\r\n  };\r\n  dataFilters?: DataFilterDataType[];\r\n  graphDataConfiguration?: GraphConfigurationDataType[];\r\n  debugMode?: boolean;\r\n  dataSelectionOptions?: DataSelectionDataType[];\r\n  advancedDataSelectionOptions?: AdvancedDataSelectionDataType[];\r\n  highlightDataPointSettings?: HighlightDataPointSettingsDataType;\r\n  readableHeader?: {\r\n    value: string;\r\n    label: string;\r\n  }[];\r\n  uiMode?: 'light' | 'normal';\r\n}\r\n\r\ninterface Props {\r\n  config: string | ConfigObject;\r\n}\r\n\r\nexport function SingleGraphDashboardThreeDGraphsFromConfig(props: Props) {\r\n  const { config } = props;\r\n  const [configSettings, setConfigSettings] = useState<ConfigObject | undefined>(undefined);\r\n\r\n  useEffect(() => {\r\n    const fetchData = async () => {\r\n      if (typeof config === 'string') {\r\n        const data = await fetchAndParseJSON(config);\r\n        setConfigSettings(data);\r\n      } else {\r\n        setConfigSettings(config);\r\n      }\r\n    };\r\n    fetchData();\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    <SingleGraphDashboardThreeDGraphs\r\n      graphSettings={configSettings.graphSettings}\r\n      dataSettings={configSettings.dataSettings}\r\n      filters={configSettings.filters}\r\n      graphType={configSettings.graphType}\r\n      dataTransform={configSettings.dataTransform}\r\n      graphDataConfiguration={configSettings.graphDataConfiguration}\r\n      dataFilters={configSettings.dataFilters}\r\n      debugMode={configSettings.debugMode}\r\n      dataSelectionOptions={configSettings.dataSelectionOptions}\r\n      advancedDataSelectionOptions={configSettings.advancedDataSelectionOptions}\r\n      readableHeader={configSettings.readableHeader}\r\n      noOfFiltersPerRow={configSettings.noOfFiltersPerRow}\r\n      uiMode={configSettings.uiMode}\r\n      highlightDataPointSettings={configSettings.highlightDataPointSettings}\r\n    />\r\n  );\r\n}\r\n"],"names":["SingleGraphDashboardThreeDGraphsFromConfig","props","$","_c","config","configSettings","setConfigSettings","useState","undefined","t0","t1","fetchData","data","fetchAndParseJSON","useEffect","t2","Symbol","for","jsx","Spinner","advancedDataSelectionOptions","dataFilters","dataSelectionOptions","dataSettings","dataTransform","debugMode","filters","graphDataConfiguration","graphSettings","graphType","highlightDataPointSettings","noOfFiltersPerRow","readableHeader","uiMode","SingleGraphDashboardThreeDGraphs"],"mappings":";;;;;AA8CO,SAAAA,EAAAC,GAAA;AAAA,QAAAC,IAAAC,EAAAA,EAAA,EAAA,GACL;AAAA,IAAAC,QAAAA;AAAAA,EAAAA,IAAmBH,GACnB,CAAAI,GAAAC,CAAA,IAA4CC,EAAmCC,MAAS;AAAE,MAAAC,GAAAC;AAa1F,MAb0FR,SAAAE,KAEhFK,IAAAA,MAAA;AASRE,KARkB,YAAA;AAChB,UAAI,OAAOP,KAAW,UAAQ;AAC5B,cAAAQ,IAAa,MAAMC,EAAkBT,CAAM;AAC3CE,QAAAA,EAAkBM,CAAI;AAAA,MAAC;AAEvBN,QAAAA,EAAkBF,CAAM;AAAA,IACzB,GAEHO;AAAAA,EAAW,GACVD,IAAA,CAACN,CAAM,GAACF,OAAAE,GAAAF,OAAAO,GAAAP,OAAAQ,MAAAD,IAAAP,EAAA,CAAA,GAAAQ,IAAAR,EAAA,CAAA,IAVXY,EAAUL,GAUPC,CAAQ,GACP,CAACL,GAAc;AAAA,QAAAU;AAAA,WAAAb,EAAA,CAAA,MAAAc,uBAAAC,IAAA,2BAAA,KAEfF,IAAAG,gBAAAA,EAAAA,IAAA,OAAA,EAAe,WAAA,kCACb,UAAAA,gBAAAA,MAACC,KAAO,GACV,GAAMjB,OAAAa,KAAAA,IAAAb,EAAA,CAAA,GAFNa;AAAAA,EAEM;AACN,MAAAA;AAAA,SAAAb,EAAA,CAAA,MAAAG,EAAAe,gCAAAlB,EAAA,CAAA,MAAAG,EAAAgB,eAAAnB,SAAAG,EAAAiB,wBAAApB,EAAA,CAAA,MAAAG,EAAAkB,gBAAArB,EAAA,CAAA,MAAAG,EAAAmB,iBAAAtB,EAAA,CAAA,MAAAG,EAAAoB,aAAAvB,EAAA,EAAA,MAAAG,EAAAqB,WAAAxB,UAAAG,EAAAsB,0BAAAzB,EAAA,EAAA,MAAAG,EAAAuB,iBAAA1B,EAAA,EAAA,MAAAG,EAAAwB,aAAA3B,EAAA,EAAA,MAAAG,EAAAyB,8BAAA5B,UAAAG,EAAA0B,qBAAA7B,EAAA,EAAA,MAAAG,EAAA2B,kBAAA9B,EAAA,EAAA,MAAAG,EAAA4B,UAEFlB,0BAACmB,GAAA,EACgB,eAAA7B,EAAcuB,eACf,cAAAvB,EAAckB,cACnB,SAAAlB,EAAcqB,SACZ,WAAArB,EAAcwB,WACV,eAAAxB,EAAcmB,eACL,wBAAAnB,EAAcsB,wBACzB,aAAAtB,EAAcgB,aAChB,WAAAhB,EAAcoB,WACH,sBAAApB,EAAciB,sBACN,8BAAAjB,EAAce,8BAC5B,gBAAAf,EAAc2B,gBACX,mBAAA3B,EAAc0B,mBACzB,QAAA1B,EAAc4B,QACM,4BAAA5B,EAAcyB,4BAA2B,GACrE5B,EAAA,CAAA,IAAAG,EAAAe,8BAAAlB,EAAA,CAAA,IAAAG,EAAAgB,aAAAnB,EAAA,CAAA,IAAAG,EAAAiB,sBAAApB,EAAA,CAAA,IAAAG,EAAAkB,cAAArB,EAAA,CAAA,IAAAG,EAAAmB,eAAAtB,EAAA,CAAA,IAAAG,EAAAoB,WAAAvB,EAAA,EAAA,IAAAG,EAAAqB,SAAAxB,EAAA,EAAA,IAAAG,EAAAsB,wBAAAzB,EAAA,EAAA,IAAAG,EAAAuB,eAAA1B,EAAA,EAAA,IAAAG,EAAAwB,WAAA3B,EAAA,EAAA,IAAAG,EAAAyB,4BAAA5B,EAAA,EAAA,IAAAG,EAAA0B,mBAAA7B,EAAA,EAAA,IAAAG,EAAA2B,gBAAA9B,EAAA,EAAA,IAAAG,EAAA4B,QAAA/B,QAAAa,KAAAA,IAAAb,EAAA,EAAA,GAfFa;AAeE;"}
+{"version":3,"file":"SingleGraphDashboardThreeDGraphsFromConfig.js","names":[],"sources":["../src/Components/Dashboard/PerformanceIntensive/SingleGraphDashboardThreeDGraphsFromConfig.tsx"],"sourcesContent":["import { Spinner } from '@undp/design-system-react/Spinner';\nimport { useEffect, useState } from 'react';\nimport type {\n  AdvancedDataSelectionDataType,\n  AggregationSettingsDataType,\n  DataFilterDataType,\n  DataSelectionDataType,\n  DataSettingsDataType,\n  FilterUiSettingsDataType,\n  GraphConfigurationDataType,\n  GraphSettingsDataType,\n  HighlightDataPointSettingsDataType,\n  ThreeDGraphType,\n} from '@/Types';\nimport { fetchAndParseJSON } from '@/Utils/fetchAndParseData';\nimport { SingleGraphDashboardThreeDGraphs } from './SingleGraphDashboardThreeDGraphs';\n\ninterface ConfigObject {\n  graphSettings?: GraphSettingsDataType;\n  dataSettings: DataSettingsDataType;\n  filters?: FilterUiSettingsDataType[];\n  graphType: ThreeDGraphType;\n  noOfFiltersPerRow?: number;\n  dataTransform?: {\n    keyColumn: string;\n    aggregationColumnsSetting?: AggregationSettingsDataType[];\n  };\n  dataFilters?: DataFilterDataType[];\n  graphDataConfiguration?: GraphConfigurationDataType[];\n  debugMode?: boolean;\n  dataSelectionOptions?: DataSelectionDataType[];\n  advancedDataSelectionOptions?: AdvancedDataSelectionDataType[];\n  highlightDataPointSettings?: HighlightDataPointSettingsDataType;\n  readableHeader?: {\n    value: string;\n    label: string;\n  }[];\n  uiMode?: 'light' | 'normal';\n}\n\ninterface Props {\n  config: string | ConfigObject;\n}\n\nexport function SingleGraphDashboardThreeDGraphsFromConfig(props: Props) {\n  const { config } = props;\n  const [configSettings, setConfigSettings] = useState<ConfigObject | undefined>(undefined);\n\n  useEffect(() => {\n    const fetchData = async () => {\n      if (typeof config === 'string') {\n        const data = await fetchAndParseJSON(config);\n        setConfigSettings(data);\n      } else {\n        setConfigSettings(config);\n      }\n    };\n    fetchData();\n  }, [config]);\n  if (!configSettings)\n    return (\n      <div className='w-full flex justify-center p-4'>\n        <Spinner />\n      </div>\n    );\n  return (\n    <SingleGraphDashboardThreeDGraphs\n      graphSettings={configSettings.graphSettings}\n      dataSettings={configSettings.dataSettings}\n      filters={configSettings.filters}\n      graphType={configSettings.graphType}\n      dataTransform={configSettings.dataTransform}\n      graphDataConfiguration={configSettings.graphDataConfiguration}\n      dataFilters={configSettings.dataFilters}\n      debugMode={configSettings.debugMode}\n      dataSelectionOptions={configSettings.dataSelectionOptions}\n      advancedDataSelectionOptions={configSettings.advancedDataSelectionOptions}\n      readableHeader={configSettings.readableHeader}\n      noOfFiltersPerRow={configSettings.noOfFiltersPerRow}\n      uiMode={configSettings.uiMode}\n      highlightDataPointSettings={configSettings.highlightDataPointSettings}\n    />\n  );\n}\n"],"mappings":";;;;;;;AA4CA,SAAgB,EAA2C,GAAc;CACvE,IAAM,EAAE,cAAW,GACb,CAAC,GAAgB,KAAqB,EAAmC,KAAA,CAAS;CAmBxF,OAjBA,QAAgB;EASd,aAR8B;GAC5B,AAEE,EAFE,OAAO,KAAW,WAEF,MADC,EAAkB,CAAM,IAGzB,CAAM;EAE5B,GACU;CACZ,GAAG,CAAC,CAAM,CAAC,GACN,IAOH,iBAAA,GAAA,EAAA,KAAC,GAAD;EACE,eAAe,EAAe;EAC9B,cAAc,EAAe;EAC7B,SAAS,EAAe;EACxB,WAAW,EAAe;EAC1B,eAAe,EAAe;EAC9B,wBAAwB,EAAe;EACvC,aAAa,EAAe;EAC5B,WAAW,EAAe;EAC1B,sBAAsB,EAAe;EACrC,8BAA8B,EAAe;EAC7C,gBAAgB,EAAe;EAC/B,mBAAmB,EAAe;EAClC,QAAQ,EAAe;EACvB,4BAA4B,EAAe;CAC5C,CAAA,IApBC,iBAAA,GAAA,EAAA,KAAC,OAAD;EAAK,WAAU;YACb,iBAAA,GAAA,EAAA,KAAC,GAAD,CAAU,CAAA;CACP,CAAA;AAoBX"}

package/dist/SlopeChart-BgzrVFpf.js

@@ -0,0 +1,431 @@
+import { o as e } from "./chunk-foFoljWS.js";
+import { t } from "./jsx-runtime-C76bEyh7.js";
+import { Colors as n } from "./Colors.js";
+import { GraphFooter as r } from "./GraphFooter.js";
+import { GraphHeader as i } from "./GraphHeader.js";
+import { t as a } from "./checkIfNullOrUndefined-C5gqSAtF.js";
+import { t as o } from "./uniqBy-feeqYuys.js";
+import { n as s, t as c } from "./GraphContainer-DgEB1AVN.js";
+import { ColorLegendWithMouseOver as l } from "./ColorLegendWithMouseOver.js";
+import { t as ee } from "./EmptyState-DBmT1Adf.js";
+import { t as u } from "./linear-BkosG4OK.js";
+import { t as d } from "./fast-deep-equal--80N92KJ.js";
+import { t as f } from "./proxy-BiRrIImK.js";
+import { t as p } from "./AnimatePresence-CE6xBsMZ.js";
+import { t as te } from "./use-in-view-CjlKdln1.js";
+import { t as m } from "./Axis-B3ai1eeP.js";
+import { t as h } from "./AxisTitle-DqJw_G-f.js";
+import { t as g } from "./DetailsModal-DxUowfkg.js";
+import { t as _ } from "./Tooltip-Y6uTGwkF.js";
+import { cn as v } from "@undp/design-system-react/cn";
+import { useEffect as ne, useRef as y, useState as b } from "react";
+//#region src/Components/Graphs/SlopeChart/Graph.tsx
+var re = /* @__PURE__ */ e(d(), 1), x = t();
+function ie(e) {
+	let { data: t, width: r, height: i, showLabels: o, colors: s, colorDomain: c, radius: l, leftMargin: ee, rightMargin: d, topMargin: ne, bottomMargin: ie, tooltip: S, onSeriesMouseOver: C, axisTitles: w, highlightedDataPoints: T, selectedColor: E, minValue: D, maxValue: O, onSeriesMouseClick: k, resetSelectionOnDoubleClick: ae, detailsOnClick: A, styles: j, classNames: M, animate: N, dimmedOpacity: P, customLayers: F } = e, I = y(null), L = te(I, {
+		once: N.once,
+		amount: N.amount
+	}), [R, z] = b(void 0), [B, V] = b(void 0), [H, U] = b(void 0), [W, G] = b(void 0), K = {
+		top: ne,
+		bottom: ie,
+		left: ee,
+		right: d
+	}, q = r - K.left - K.right, J = i - K.top - K.bottom, Y = Math.min(Math.min(...t.map((e) => e.y1)), Math.min(...t.map((e) => e.y2))), X = Math.max(Math.max(...t.map((e) => e.y1)), Math.max(...t.map((e) => e.y2))), Z = u().domain([a(D) ? Y > 0 ? 0 : Y : D, a(O) ? X > 0 ? X : 0 : O]).range([J, 0]).nice();
+	return /* @__PURE__ */ (0, x.jsxs)(x.Fragment, { children: [
+		/* @__PURE__ */ (0, x.jsx)(f.svg, {
+			width: `${r}px`,
+			height: `${i}px`,
+			viewBox: `0 0 ${r} ${i}`,
+			className: "mx-auto",
+			direction: "ltr",
+			ref: I,
+			children: /* @__PURE__ */ (0, x.jsxs)("g", {
+				transform: `translate(${K.left},${K.top})`,
+				children: [
+					/* @__PURE__ */ (0, x.jsxs)("g", { children: [/* @__PURE__ */ (0, x.jsx)(m, {
+						y1: 0,
+						y2: J,
+						x1: l,
+						x2: l,
+						classNames: { axis: v("stroke-1 stroke-primary-gray-500 dark:stroke-primary-gray-550", M?.yAxis?.axis) }
+					}), /* @__PURE__ */ (0, x.jsx)(h, {
+						x: l,
+						y: J + 15,
+						style: j?.yAxis?.title,
+						className: v("fill-primary-gray-700 dark:fill-primary-gray-300 text-xs", M?.yAxis?.title),
+						text: w[0]
+					})] }),
+					/* @__PURE__ */ (0, x.jsxs)("g", { children: [/* @__PURE__ */ (0, x.jsx)(m, {
+						y1: 0,
+						y2: J,
+						x1: q - l,
+						x2: q - l,
+						classNames: { axis: v("stroke-1 stroke-primary-gray-500 dark:stroke-primary-gray-550", M?.yAxis?.axis) }
+					}), /* @__PURE__ */ (0, x.jsx)(h, {
+						x: q - l,
+						y: J + 15,
+						style: j?.yAxis?.title,
+						className: v("fill-primary-gray-700 dark:fill-primary-gray-300 text-xs", M?.yAxis?.title),
+						text: w[1]
+					})] }),
+					F.filter((e) => e.position === "before").map((e) => e.layer),
+					/* @__PURE__ */ (0, x.jsx)(p, { children: t.map((e) => /* @__PURE__ */ (0, x.jsxs)(f.g, {
+						variants: {
+							initial: { opacity: E ? e.color && s[c.indexOf(`${e.color}`)] === E ? 1 : P : R ? R.label === e.label ? 1 : P : T && T.indexOf(e.label) === -1 ? P : 1 },
+							whileInView: {
+								opacity: E ? e.color && s[c.indexOf(`${e.color}`)] === E ? 1 : P : R ? R.label === e.label ? 1 : P : T && T.indexOf(e.label) === -1 ? P : 1,
+								transition: { duration: N.duration }
+							}
+						},
+						initial: "initial",
+						animate: L ? "whileInView" : "initial",
+						exit: {
+							opacity: 0,
+							transition: { duration: N.duration }
+						},
+						onMouseEnter: (t) => {
+							z(e), G(t.clientY), U(t.clientX), C?.(e);
+						},
+						onMouseMove: (t) => {
+							z(e), G(t.clientY), U(t.clientX);
+						},
+						onMouseLeave: () => {
+							z(void 0), U(void 0), G(void 0), C?.(void 0);
+						},
+						onClick: () => {
+							(k || A) && ((0, re.default)(B, e) && ae ? (V(void 0), k?.(void 0)) : (V(e), k?.(e)));
+						},
+						children: [
+							/* @__PURE__ */ (0, x.jsx)(f.circle, {
+								variants: {
+									initial: {
+										cx: l,
+										cy: Z(e.y1),
+										fill: t.filter((e) => e.color).length === 0 ? s[0] : e.color ? s[c.indexOf(`${e.color}`)] : n.gray,
+										stroke: t.filter((e) => e.color).length === 0 ? s[0] : e.color ? s[c.indexOf(`${e.color}`)] : n.gray,
+										opacity: 0
+									},
+									whileInView: {
+										cx: l,
+										cy: Z(e.y1),
+										fill: t.filter((e) => e.color).length === 0 ? s[0] : e.color ? s[c.indexOf(`${e.color}`)] : n.gray,
+										stroke: t.filter((e) => e.color).length === 0 ? s[0] : e.color ? s[c.indexOf(`${e.color}`)] : n.gray,
+										opacity: 1,
+										transition: { duration: N.duration }
+									}
+								},
+								initial: "initial",
+								animate: L ? "whileInView" : "initial",
+								exit: {
+									opacity: 0,
+									transition: { duration: N.duration }
+								},
+								r: l,
+								style: { fillOpacity: .6 }
+							}),
+							o ? /* @__PURE__ */ (0, x.jsx)(f.text, {
+								variants: {
+									initial: {
+										y: Z(e.y1),
+										fill: t.filter((e) => e.color).length === 0 ? s[0] : e.color ? s[c.indexOf(`${e.color}`)] : n.gray,
+										opacity: 0
+									},
+									whileInView: {
+										y: Z(e.y1),
+										fill: t.filter((e) => e.color).length === 0 ? s[0] : e.color ? s[c.indexOf(`${e.color}`)] : n.gray,
+										opacity: 1,
+										transition: { duration: N.duration }
+									}
+								},
+								initial: "initial",
+								animate: L ? "whileInView" : "initial",
+								exit: {
+									opacity: 0,
+									transition: { duration: N.duration }
+								},
+								style: {
+									textAnchor: "end",
+									...j?.yAxis?.labels || {}
+								},
+								className: v("text-xs", M?.yAxis?.labels),
+								x: 5,
+								dy: "0.33em",
+								textAnchor: "end",
+								dx: 0 - l - 3,
+								children: e.label
+							}) : T ? T.indexOf(e.label) === -1 ? null : /* @__PURE__ */ (0, x.jsx)(f.text, {
+								variants: {
+									initial: {
+										y: Z(e.y1),
+										fill: t.filter((e) => e.color).length === 0 ? s[0] : e.color ? s[c.indexOf(`${e.color}`)] : n.gray,
+										opacity: 0
+									},
+									whileInView: {
+										y: Z(e.y1),
+										fill: t.filter((e) => e.color).length === 0 ? s[0] : e.color ? s[c.indexOf(`${e.color}`)] : n.gray,
+										opacity: 1,
+										transition: { duration: N.duration }
+									}
+								},
+								initial: "initial",
+								animate: L ? "whileInView" : "initial",
+								exit: {
+									opacity: 0,
+									transition: { duration: N.duration }
+								},
+								style: {
+									textAnchor: "end",
+									...j?.yAxis?.labels || {}
+								},
+								className: v("text-xs", M?.yAxis?.labels),
+								x: 5,
+								dy: "0.33em",
+								dx: -3,
+								children: e.label
+							}) : null,
+							/* @__PURE__ */ (0, x.jsx)(f.circle, {
+								variants: {
+									initial: {
+										cx: q - l,
+										cy: Z(e.y2),
+										fill: t.filter((e) => e.color).length === 0 ? s[0] : e.color ? s[c.indexOf(`${e.color}`)] : n.gray,
+										stroke: t.filter((e) => e.color).length === 0 ? s[0] : e.color ? s[c.indexOf(`${e.color}`)] : n.gray,
+										opacity: 0
+									},
+									whileInView: {
+										cx: q - l,
+										cy: Z(e.y2),
+										fill: t.filter((e) => e.color).length === 0 ? s[0] : e.color ? s[c.indexOf(`${e.color}`)] : n.gray,
+										stroke: t.filter((e) => e.color).length === 0 ? s[0] : e.color ? s[c.indexOf(`${e.color}`)] : n.gray,
+										opacity: 1,
+										transition: { duration: N.duration }
+									}
+								},
+								initial: "initial",
+								animate: L ? "whileInView" : "initial",
+								exit: {
+									opacity: 0,
+									transition: { duration: N.duration }
+								},
+								r: l,
+								style: { fillOpacity: .6 }
+							}),
+							o ? /* @__PURE__ */ (0, x.jsx)(f.text, {
+								variants: {
+									initial: {
+										y: Z(e.y2),
+										fill: t.filter((e) => e.color).length === 0 ? s[0] : e.color ? s[c.indexOf(`${e.color}`)] : n.gray,
+										opacity: 0
+									},
+									whileInView: {
+										y: Z(e.y2),
+										fill: t.filter((e) => e.color).length === 0 ? s[0] : e.color ? s[c.indexOf(`${e.color}`)] : n.gray,
+										opacity: 1,
+										transition: { duration: N.duration }
+									}
+								},
+								initial: "initial",
+								animate: L ? "whileInView" : "initial",
+								exit: {
+									opacity: 0,
+									transition: { duration: N.duration }
+								},
+								style: {
+									textAnchor: "start",
+									...j?.yAxis?.labels || {}
+								},
+								className: v("text-xs", M?.yAxis?.labels),
+								x: q - 5,
+								dy: "0.33em",
+								dx: l + 3,
+								children: e.label
+							}) : T ? T.indexOf(e.label) === -1 ? null : /* @__PURE__ */ (0, x.jsx)(f.text, {
+								variants: {
+									initial: {
+										y: Z(e.y2),
+										fill: t.filter((e) => e.color).length === 0 ? s[0] : e.color ? s[c.indexOf(`${e.color}`)] : n.gray,
+										opacity: 0
+									},
+									whileInView: {
+										y: Z(e.y2),
+										fill: t.filter((e) => e.color).length === 0 ? s[0] : e.color ? s[c.indexOf(`${e.color}`)] : n.gray,
+										opacity: 1,
+										transition: { duration: N.duration }
+									}
+								},
+								initial: "initial",
+								animate: L ? "whileInView" : "initial",
+								exit: {
+									opacity: 0,
+									transition: { duration: N.duration }
+								},
+								style: {
+									textAnchor: "start",
+									...j?.yAxis?.labels || {}
+								},
+								className: v("text-xs", M?.yAxis?.labels),
+								x: q - 5,
+								dy: "0.33em",
+								dx: 3,
+								children: e.label
+							}) : null,
+							/* @__PURE__ */ (0, x.jsx)(f.line, {
+								variants: {
+									initial: {
+										x1: l,
+										x2: q - l,
+										y1: Z(e.y1),
+										y2: Z(e.y1),
+										stroke: t.filter((e) => e.color).length === 0 ? s[0] : e.color ? s[c.indexOf(`${e.color}`)] : n.gray
+									},
+									whileInView: {
+										x1: l,
+										x2: q - l,
+										y1: Z(e.y1),
+										y2: Z(e.y2),
+										stroke: t.filter((e) => e.color).length === 0 ? s[0] : e.color ? s[c.indexOf(`${e.color}`)] : n.gray,
+										transition: { duration: N.duration }
+									}
+								},
+								initial: "initial",
+								animate: L ? "whileInView" : "initial",
+								exit: {
+									opacity: 0,
+									transition: { duration: N.duration }
+								},
+								className: M?.dataConnectors,
+								style: {
+									fill: "none",
+									strokeWidth: 1,
+									...j?.dataConnectors
+								}
+							})
+						]
+					}, e.label)) }),
+					F.filter((e) => e.position === "after").map((e) => e.layer)
+				]
+			})
+		}),
+		R && S && H && W ? /* @__PURE__ */ (0, x.jsx)(_, {
+			data: R,
+			body: S,
+			xPos: H,
+			yPos: W,
+			backgroundStyle: j?.tooltip,
+			className: M?.tooltip
+		}) : null,
+		A && B !== void 0 ? /* @__PURE__ */ (0, x.jsx)(g, {
+			body: A,
+			data: B,
+			setData: V,
+			className: M?.modal
+		}) : null
+	] });
+}
+//#endregion
+//#region src/Components/Graphs/SlopeChart/index.tsx
+function S(e) {
+	let { data: t, graphTitle: u, colors: d, sources: f, graphDescription: p, showLabels: te = !1, height: m, width: h, footNote: g, colorDomain: _, colorLegendTitle: v, radius: re = 5, axisTitles: S = ["", ""], padding: C, backgroundColor: w = !1, leftMargin: T = 50, rightMargin: E = 50, topMargin: D = 20, bottomMargin: O = 20, tooltip: k, relativeHeight: ae, onSeriesMouseOver: A, showColorScale: j = !0, highlightedDataPoints: M, graphID: N, minValue: P, maxValue: F, onSeriesMouseClick: I, graphDownload: L = !1, dataDownload: R = !1, fillContainer: z = !0, language: B = "en", showNAColor: V = !0, minHeight: H = 0, theme: U = "light", ariaLabel: W, resetSelectionOnDoubleClick: G = !0, detailsOnClick: K, styles: q, classNames: J, animate: Y = !1, dimmedOpacity: X = .3, customLayers: Z = [] } = e, [Q, oe] = b(0), [se, ce] = b(0), [le, ue] = b(void 0), $ = y(null), de = y(null);
+	return ne(() => {
+		let e = new ResizeObserver((e) => {
+			oe(e[0].target.clientWidth || 620), ce(e[0].target.clientHeight || 480);
+		});
+		return $.current && e.observe($.current), () => e.disconnect();
+	}, []), /* @__PURE__ */ (0, x.jsxs)(s, {
+		className: J?.graphContainer,
+		style: q?.graphContainer,
+		id: N,
+		ref: de,
+		"aria-label": W,
+		backgroundColor: w,
+		theme: U,
+		language: B,
+		minHeight: H,
+		width: z ? void 0 : h,
+		height: m,
+		relativeHeight: ae,
+		padding: C,
+		children: [
+			u || p || L || R ? /* @__PURE__ */ (0, x.jsx)(i, {
+				styles: {
+					title: q?.title,
+					description: q?.description
+				},
+				classNames: {
+					title: J?.title,
+					description: J?.description
+				},
+				graphTitle: u,
+				graphDescription: p,
+				width: h,
+				graphDownload: L ? de : void 0,
+				dataDownload: R ? t.map((e) => e.data).filter((e) => e !== void 0).length > 0 ? t.map((e) => e.data).filter((e) => e !== void 0) : t.filter((e) => e !== void 0) : null
+			}) : null,
+			j && t.filter((e) => e.color).length !== 0 && t.length > 0 ? /* @__PURE__ */ (0, x.jsx)(l, {
+				width: h,
+				colorLegendTitle: v,
+				colors: d || n[U].categoricalColors.colors,
+				colorDomain: _ || o(t, "color", !0),
+				setSelectedColor: ue,
+				showNAColor: V,
+				className: J?.colorLegend
+			}) : null,
+			/* @__PURE__ */ (0, x.jsxs)(c, {
+				ref: $,
+				children: [t.length === 0 && /* @__PURE__ */ (0, x.jsx)(ee, {}), Q && se && t.length > 0 ? /* @__PURE__ */ (0, x.jsx)(ie, {
+					data: t.filter((e) => !a(e.y1) && !a(e.y2)),
+					width: z || !h || Q < h ? Q : h,
+					height: se,
+					colorDomain: t.filter((e) => e.color).length === 0 ? [] : _ || o(t, "color", !0),
+					colors: t.filter((e) => e.color).length === 0 ? d ? [d] : [n.primaryColors["blue-600"]] : d || n[U].categoricalColors.colors,
+					selectedColor: le,
+					axisTitles: S,
+					showLabels: te,
+					radius: re,
+					leftMargin: T,
+					rightMargin: E,
+					topMargin: D,
+					bottomMargin: O,
+					tooltip: k,
+					onSeriesMouseOver: A,
+					highlightedDataPoints: M,
+					minValue: P,
+					maxValue: F,
+					onSeriesMouseClick: I,
+					resetSelectionOnDoubleClick: G,
+					detailsOnClick: K,
+					styles: q,
+					classNames: J,
+					animate: Y === !0 ? {
+						duration: .5,
+						once: !0,
+						amount: .5
+					} : Y || {
+						duration: 0,
+						once: !0,
+						amount: 0
+					},
+					dimmedOpacity: X,
+					customLayers: Z
+				}) : null]
+			}),
+			f || g ? /* @__PURE__ */ (0, x.jsx)(r, {
+				styles: {
+					footnote: q?.footnote,
+					source: q?.source
+				},
+				classNames: {
+					footnote: J?.footnote,
+					source: J?.source
+				},
+				sources: f,
+				footNote: g,
+				width: h
+			}) : null
+		]
+	});
+}
+//#endregion
+export { S as t };
+
+//# sourceMappingURL=SlopeChart-BgzrVFpf.js.map

package/dist/SlopeChart-BgzrVFpf.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlopeChart-BgzrVFpf.js","names":[],"sources":["../src/Components/Graphs/SlopeChart/Graph.tsx","../src/Components/Graphs/SlopeChart/index.tsx"],"sourcesContent":["import { cn } from '@undp/design-system-react/cn';\nimport { scaleLinear } from 'd3-scale';\nimport isEqual from 'fast-deep-equal';\nimport { AnimatePresence, motion, useInView } from 'motion/react';\nimport { useRef, useState } from 'react';\nimport { Colors } from '@/Components/ColorPalette';\nimport { Axis } from '@/Components/Elements/Axes/Axis';\nimport { AxisTitle } from '@/Components/Elements/Axes/AxisTitle';\nimport { DetailsModal } from '@/Components/Elements/DetailsModal';\nimport { Tooltip } from '@/Components/Elements/Tooltip';\nimport type {\n  AnimateDataType,\n  ClassNameObject,\n  CustomLayerDataType,\n  SlopeChartDataType,\n  StyleObject,\n} from '@/Types';\nimport { checkIfNullOrUndefined } from '@/Utils/checkIfNullOrUndefined';\n\ninterface Props {\n  data: SlopeChartDataType[];\n  width: number;\n  height: number;\n  selectedColor?: string;\n  showLabels: boolean;\n  colors: string[];\n  colorDomain: string[];\n  radius: number;\n  leftMargin: number;\n  rightMargin: number;\n  topMargin: number;\n  bottomMargin: number;\n  axisTitles: [string, string];\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  tooltip?: string | ((_d: any) => React.ReactNode);\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  onSeriesMouseOver?: (_d: any) => void;\n  highlightedDataPoints?: (string | number)[];\n  maxValue?: number;\n  minValue?: number;\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  onSeriesMouseClick?: (_d: any) => void;\n  resetSelectionOnDoubleClick: boolean;\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  detailsOnClick?: string | ((_d: any) => React.ReactNode);\n  styles?: StyleObject;\n  classNames?: ClassNameObject;\n  animate: AnimateDataType;\n  dimmedOpacity: number;\n  customLayers: CustomLayerDataType[];\n}\n\nexport function Graph(props: Props) {\n  const {\n    data,\n    width,\n    height,\n    showLabels,\n    colors,\n    colorDomain,\n    radius,\n    leftMargin,\n    rightMargin,\n    topMargin,\n    bottomMargin,\n    tooltip,\n    onSeriesMouseOver,\n    axisTitles,\n    highlightedDataPoints,\n    selectedColor,\n    minValue,\n    maxValue,\n    onSeriesMouseClick,\n    resetSelectionOnDoubleClick,\n    detailsOnClick,\n    styles,\n    classNames,\n    animate,\n    dimmedOpacity,\n    customLayers,\n  } = props;\n  const svgRef = useRef(null);\n  const isInView = useInView(svgRef, {\n    once: animate.once,\n    amount: animate.amount,\n  });\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  const [mouseOverData, setMouseOverData] = useState<any>(undefined);\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  const [mouseClickData, setMouseClickData] = useState<any>(undefined);\n  const [eventX, setEventX] = useState<number | undefined>(undefined);\n  const [eventY, setEventY] = useState<number | undefined>(undefined);\n  const margin = {\n    top: topMargin,\n    bottom: bottomMargin,\n    left: leftMargin,\n    right: rightMargin,\n  };\n  const graphWidth = width - margin.left - margin.right;\n  const graphHeight = height - margin.top - margin.bottom;\n  const minY = Math.min(Math.min(...data.map((d) => d.y1)), Math.min(...data.map((d) => d.y2)));\n  const maxY = Math.max(Math.max(...data.map((d) => d.y1)), Math.max(...data.map((d) => d.y2)));\n  const y = scaleLinear()\n    .domain([\n      checkIfNullOrUndefined(minValue) ? (minY > 0 ? 0 : minY) : (minValue as number),\n      checkIfNullOrUndefined(maxValue) ? (maxY > 0 ? maxY : 0) : (maxValue as number),\n    ])\n    .range([graphHeight, 0])\n    .nice();\n  return (\n    <>\n      <motion.svg\n        width={`${width}px`}\n        height={`${height}px`}\n        viewBox={`0 0 ${width} ${height}`}\n        className='mx-auto'\n        direction='ltr'\n        ref={svgRef}\n      >\n        <g transform={`translate(${margin.left},${margin.top})`}>\n          <g>\n            <Axis\n              y1={0}\n              y2={graphHeight}\n              x1={radius}\n              x2={radius}\n              classNames={{\n                axis: cn(\n                  'stroke-1 stroke-primary-gray-500 dark:stroke-primary-gray-550',\n                  classNames?.yAxis?.axis,\n                ),\n              }}\n            />\n            <AxisTitle\n              x={radius}\n              y={graphHeight + 15}\n              style={styles?.yAxis?.title}\n              className={cn(\n                'fill-primary-gray-700 dark:fill-primary-gray-300 text-xs',\n                classNames?.yAxis?.title,\n              )}\n              text={axisTitles[0]}\n            />\n          </g>\n          <g>\n            <Axis\n              y1={0}\n              y2={graphHeight}\n              x1={graphWidth - radius}\n              x2={graphWidth - radius}\n              classNames={{\n                axis: cn(\n                  'stroke-1 stroke-primary-gray-500 dark:stroke-primary-gray-550',\n                  classNames?.yAxis?.axis,\n                ),\n              }}\n            />\n            <AxisTitle\n              x={graphWidth - radius}\n              y={graphHeight + 15}\n              style={styles?.yAxis?.title}\n              className={cn(\n                'fill-primary-gray-700 dark:fill-primary-gray-300 text-xs',\n                classNames?.yAxis?.title,\n              )}\n              text={axisTitles[1]}\n            />\n          </g>\n          {customLayers.filter((d) => d.position === 'before').map((d) => d.layer)}\n          <AnimatePresence>\n            {data.map((d) => {\n              return (\n                <motion.g\n                  key={d.label}\n                  variants={{\n                    initial: {\n                      opacity: selectedColor\n                        ? d.color\n                          ? colors[colorDomain.indexOf(`${d.color}`)] === selectedColor\n                            ? 1\n                            : dimmedOpacity\n                          : dimmedOpacity\n                        : mouseOverData\n                          ? mouseOverData.label === d.label\n                            ? 1\n                            : dimmedOpacity\n                          : highlightedDataPoints\n                            ? highlightedDataPoints.indexOf(d.label) !== -1\n                              ? 1\n                              : dimmedOpacity\n                            : 1,\n                    },\n                    whileInView: {\n                      opacity: selectedColor\n                        ? d.color\n                          ? colors[colorDomain.indexOf(`${d.color}`)] === selectedColor\n                            ? 1\n                            : dimmedOpacity\n                          : dimmedOpacity\n                        : mouseOverData\n                          ? mouseOverData.label === d.label\n                            ? 1\n                            : dimmedOpacity\n                          : highlightedDataPoints\n                            ? highlightedDataPoints.indexOf(d.label) !== -1\n                              ? 1\n                              : dimmedOpacity\n                            : 1,\n                      transition: { duration: animate.duration },\n                    },\n                  }}\n                  initial='initial'\n                  animate={isInView ? 'whileInView' : 'initial'}\n                  exit={{ opacity: 0, transition: { duration: animate.duration } }}\n                  onMouseEnter={(event) => {\n                    setMouseOverData(d);\n                    setEventY(event.clientY);\n                    setEventX(event.clientX);\n                    onSeriesMouseOver?.(d);\n                  }}\n                  onMouseMove={(event) => {\n                    setMouseOverData(d);\n                    setEventY(event.clientY);\n                    setEventX(event.clientX);\n                  }}\n                  onMouseLeave={() => {\n                    setMouseOverData(undefined);\n                    setEventX(undefined);\n                    setEventY(undefined);\n                    onSeriesMouseOver?.(undefined);\n                  }}\n                  onClick={() => {\n                    if (onSeriesMouseClick || detailsOnClick) {\n                      if (isEqual(mouseClickData, d) && resetSelectionOnDoubleClick) {\n                        setMouseClickData(undefined);\n                        onSeriesMouseClick?.(undefined);\n                      } else {\n                        setMouseClickData(d);\n                        onSeriesMouseClick?.(d);\n                      }\n                    }\n                  }}\n                >\n                  <motion.circle\n                    variants={{\n                      initial: {\n                        cx: radius,\n                        cy: y(d.y1),\n                        fill:\n                          data.filter((el) => el.color).length === 0\n                            ? colors[0]\n                            : !d.color\n                              ? Colors.gray\n                              : colors[colorDomain.indexOf(`${d.color}`)],\n                        stroke:\n                          data.filter((el) => el.color).length === 0\n                            ? colors[0]\n                            : !d.color\n                              ? Colors.gray\n                              : colors[colorDomain.indexOf(`${d.color}`)],\n                        opacity: 0,\n                      },\n                      whileInView: {\n                        cx: radius,\n                        cy: y(d.y1),\n                        fill:\n                          data.filter((el) => el.color).length === 0\n                            ? colors[0]\n                            : !d.color\n                              ? Colors.gray\n                              : colors[colorDomain.indexOf(`${d.color}`)],\n                        stroke:\n                          data.filter((el) => el.color).length === 0\n                            ? colors[0]\n                            : !d.color\n                              ? Colors.gray\n                              : colors[colorDomain.indexOf(`${d.color}`)],\n                        opacity: 1,\n                        transition: { duration: animate.duration },\n                      },\n                    }}\n                    initial='initial'\n                    animate={isInView ? 'whileInView' : 'initial'}\n                    exit={{ opacity: 0, transition: { duration: animate.duration } }}\n                    r={radius}\n                    style={{\n                      fillOpacity: 0.6,\n                    }}\n                  />\n                  {showLabels ? (\n                    <motion.text\n                      variants={{\n                        initial: {\n                          y: y(d.y1),\n                          fill:\n                            data.filter((el) => el.color).length === 0\n                              ? colors[0]\n                              : !d.color\n                                ? Colors.gray\n                                : colors[colorDomain.indexOf(`${d.color}`)],\n                          opacity: 0,\n                        },\n                        whileInView: {\n                          y: y(d.y1),\n                          fill:\n                            data.filter((el) => el.color).length === 0\n                              ? colors[0]\n                              : !d.color\n                                ? Colors.gray\n                                : colors[colorDomain.indexOf(`${d.color}`)],\n                          opacity: 1,\n                          transition: { duration: animate.duration },\n                        },\n                      }}\n                      initial='initial'\n                      animate={isInView ? 'whileInView' : 'initial'}\n                      exit={{ opacity: 0, transition: { duration: animate.duration } }}\n                      style={{\n                        textAnchor: 'end',\n                        ...(styles?.yAxis?.labels || {}),\n                      }}\n                      className={cn('text-xs', classNames?.yAxis?.labels)}\n                      x={5}\n                      dy='0.33em'\n                      textAnchor='end'\n                      dx={0 - radius - 3}\n                    >\n                      {d.label}\n                    </motion.text>\n                  ) : highlightedDataPoints ? (\n                    highlightedDataPoints.indexOf(d.label) !== -1 ? (\n                      <motion.text\n                        variants={{\n                          initial: {\n                            y: y(d.y1),\n                            fill:\n                              data.filter((el) => el.color).length === 0\n                                ? colors[0]\n                                : !d.color\n                                  ? Colors.gray\n                                  : colors[colorDomain.indexOf(`${d.color}`)],\n                            opacity: 0,\n                          },\n                          whileInView: {\n                            y: y(d.y1),\n                            fill:\n                              data.filter((el) => el.color).length === 0\n                                ? colors[0]\n                                : !d.color\n                                  ? Colors.gray\n                                  : colors[colorDomain.indexOf(`${d.color}`)],\n                            opacity: 1,\n                            transition: { duration: animate.duration },\n                          },\n                        }}\n                        initial='initial'\n                        animate={isInView ? 'whileInView' : 'initial'}\n                        exit={{ opacity: 0, transition: { duration: animate.duration } }}\n                        style={{\n                          textAnchor: 'end',\n                          ...(styles?.yAxis?.labels || {}),\n                        }}\n                        className={cn('text-xs', classNames?.yAxis?.labels)}\n                        x={5}\n                        dy='0.33em'\n                        dx={-3}\n                      >\n                        {d.label}\n                      </motion.text>\n                    ) : null\n                  ) : null}\n                  <motion.circle\n                    variants={{\n                      initial: {\n                        cx: graphWidth - radius,\n                        cy: y(d.y2),\n                        fill:\n                          data.filter((el) => el.color).length === 0\n                            ? colors[0]\n                            : !d.color\n                              ? Colors.gray\n                              : colors[colorDomain.indexOf(`${d.color}`)],\n                        stroke:\n                          data.filter((el) => el.color).length === 0\n                            ? colors[0]\n                            : !d.color\n                              ? Colors.gray\n                              : colors[colorDomain.indexOf(`${d.color}`)],\n                        opacity: 0,\n                      },\n                      whileInView: {\n                        cx: graphWidth - radius,\n                        cy: y(d.y2),\n                        fill:\n                          data.filter((el) => el.color).length === 0\n                            ? colors[0]\n                            : !d.color\n                              ? Colors.gray\n                              : colors[colorDomain.indexOf(`${d.color}`)],\n                        stroke:\n                          data.filter((el) => el.color).length === 0\n                            ? colors[0]\n                            : !d.color\n                              ? Colors.gray\n                              : colors[colorDomain.indexOf(`${d.color}`)],\n                        opacity: 1,\n                        transition: { duration: animate.duration },\n                      },\n                    }}\n                    initial='initial'\n                    animate={isInView ? 'whileInView' : 'initial'}\n                    exit={{ opacity: 0, transition: { duration: animate.duration } }}\n                    r={radius}\n                    style={{\n                      fillOpacity: 0.6,\n                    }}\n                  />\n                  {showLabels ? (\n                    <motion.text\n                      variants={{\n                        initial: {\n                          y: y(d.y2),\n                          fill:\n                            data.filter((el) => el.color).length === 0\n                              ? colors[0]\n                              : !d.color\n                                ? Colors.gray\n                                : colors[colorDomain.indexOf(`${d.color}`)],\n                          opacity: 0,\n                        },\n                        whileInView: {\n                          y: y(d.y2),\n                          fill:\n                            data.filter((el) => el.color).length === 0\n                              ? colors[0]\n                              : !d.color\n                                ? Colors.gray\n                                : colors[colorDomain.indexOf(`${d.color}`)],\n                          opacity: 1,\n                          transition: { duration: animate.duration },\n                        },\n                      }}\n                      initial='initial'\n                      animate={isInView ? 'whileInView' : 'initial'}\n                      exit={{ opacity: 0, transition: { duration: animate.duration } }}\n                      style={{\n                        textAnchor: 'start',\n                        ...(styles?.yAxis?.labels || {}),\n                      }}\n                      className={cn('text-xs', classNames?.yAxis?.labels)}\n                      x={graphWidth - 5}\n                      dy='0.33em'\n                      dx={radius + 3}\n                    >\n                      {d.label}\n                    </motion.text>\n                  ) : highlightedDataPoints ? (\n                    highlightedDataPoints.indexOf(d.label) !== -1 ? (\n                      <motion.text\n                        variants={{\n                          initial: {\n                            y: y(d.y2),\n                            fill:\n                              data.filter((el) => el.color).length === 0\n                                ? colors[0]\n                                : !d.color\n                                  ? Colors.gray\n                                  : colors[colorDomain.indexOf(`${d.color}`)],\n                            opacity: 0,\n                          },\n                          whileInView: {\n                            y: y(d.y2),\n                            fill:\n                              data.filter((el) => el.color).length === 0\n                                ? colors[0]\n                                : !d.color\n                                  ? Colors.gray\n                                  : colors[colorDomain.indexOf(`${d.color}`)],\n                            opacity: 1,\n                            transition: { duration: animate.duration },\n                          },\n                        }}\n                        initial='initial'\n                        animate={isInView ? 'whileInView' : 'initial'}\n                        exit={{ opacity: 0, transition: { duration: animate.duration } }}\n                        style={{\n                          textAnchor: 'start',\n                          ...(styles?.yAxis?.labels || {}),\n                        }}\n                        className={cn('text-xs', classNames?.yAxis?.labels)}\n                        x={graphWidth - 5}\n                        dy='0.33em'\n                        dx={3}\n                      >\n                        {d.label}\n                      </motion.text>\n                    ) : null\n                  ) : null}\n                  <motion.line\n                    variants={{\n                      initial: {\n                        x1: radius,\n                        x2: graphWidth - radius,\n                        y1: y(d.y1),\n                        y2: y(d.y1),\n                        stroke:\n                          data.filter((el) => el.color).length === 0\n                            ? colors[0]\n                            : !d.color\n                              ? Colors.gray\n                              : colors[colorDomain.indexOf(`${d.color}`)],\n                      },\n                      whileInView: {\n                        x1: radius,\n                        x2: graphWidth - radius,\n                        y1: y(d.y1),\n                        y2: y(d.y2),\n                        stroke:\n                          data.filter((el) => el.color).length === 0\n                            ? colors[0]\n                            : !d.color\n                              ? Colors.gray\n                              : colors[colorDomain.indexOf(`${d.color}`)],\n                        transition: { duration: animate.duration },\n                      },\n                    }}\n                    initial='initial'\n                    animate={isInView ? 'whileInView' : 'initial'}\n                    exit={{ opacity: 0, transition: { duration: animate.duration } }}\n                    className={classNames?.dataConnectors}\n                    style={{\n                      fill: 'none',\n                      strokeWidth: 1,\n                      ...styles?.dataConnectors,\n                    }}\n                  />\n                </motion.g>\n              );\n            })}\n          </AnimatePresence>\n          {customLayers.filter((d) => d.position === 'after').map((d) => d.layer)}\n        </g>\n      </motion.svg>\n      {mouseOverData && tooltip && eventX && eventY ? (\n        <Tooltip\n          data={mouseOverData}\n          body={tooltip}\n          xPos={eventX}\n          yPos={eventY}\n          backgroundStyle={styles?.tooltip}\n          className={classNames?.tooltip}\n        />\n      ) : null}\n      {detailsOnClick && mouseClickData !== undefined ? (\n        <DetailsModal\n          body={detailsOnClick}\n          data={mouseClickData}\n          setData={setMouseClickData}\n          className={classNames?.modal}\n        />\n      ) : null}\n    </>\n  );\n}\n","import { useEffect, useRef, useState } from 'react';\nimport { Colors } from '@/Components/ColorPalette';\nimport { ColorLegendWithMouseOver } from '@/Components/Elements/ColorLegendWithMouseOver';\nimport { EmptyState } from '@/Components/Elements/EmptyState';\nimport { GraphArea, GraphContainer } from '@/Components/Elements/GraphContainer';\nimport { GraphFooter } from '@/Components/Elements/GraphFooter';\nimport { GraphHeader } from '@/Components/Elements/GraphHeader';\nimport type {\n  AnimateDataType,\n  ClassNameObject,\n  CustomLayerDataType,\n  Languages,\n  SlopeChartDataType,\n  SourcesDataType,\n  StyleObject,\n} from '@/Types';\nimport { checkIfNullOrUndefined } from '@/Utils/checkIfNullOrUndefined';\nimport { uniqBy } from '@/Utils/uniqBy';\nimport { Graph } from './Graph';\n\ninterface Props {\n  // Data\n  /** Array of data objects */\n  data: SlopeChartDataType[];\n\n  // Titles, Labels, and Sources\n  /** Title of the graph */\n  graphTitle?: string | React.ReactNode;\n  /** Description of the graph */\n  graphDescription?: string | React.ReactNode;\n  /** Footnote for the graph */\n  footNote?: string | React.ReactNode;\n  /** Source data for the graph */\n  sources?: SourcesDataType[];\n  /** Accessibility label */\n  ariaLabel?: string;\n\n  // Colors and Styling\n  /** Color or array of colors for circles */\n  colors?: string | string[];\n  /** Domain of colors for the graph */\n  colorDomain?: string[];\n  /** Title for the color legend */\n  colorLegendTitle?: string;\n  /** Background color of the graph */\n  backgroundColor?: string | boolean;\n  /** Custom styles for the graph. Each object should be a valid React CSS style object. */\n  styles?: StyleObject;\n  /** Custom class names */\n  classNames?: ClassNameObject;\n\n  // Size and Spacing\n  /** Width of the graph */\n  width?: number;\n  /** Height of the graph */\n  height?: number;\n  /** Minimum height of the graph */\n  minHeight?: number;\n  /** Relative height scaling factor. This overwrites the height props */\n  relativeHeight?: number;\n  /** Padding around the graph. Defaults to 0 if no backgroundColor is mentioned else defaults to 1rem */\n  padding?: string;\n  /** Left margin of the graph */\n  leftMargin?: number;\n  /** Right margin of the graph */\n  rightMargin?: number;\n  /** Top margin of the graph */\n  topMargin?: number;\n  /** Bottom margin of the graph */\n  bottomMargin?: number;\n  /** Toggles the background to fill the container. This only works if the width of the graph is defined. */\n  fillContainer?: boolean;\n\n  // Values and Ticks\n  /** Maximum value for the chart */\n  maxValue?: number;\n  /** Minimum value for the chart */\n  minValue?: number;\n\n  // Graph Parameters\n  /** Toggle visibility of labels */\n  showLabels?: boolean;\n  /** Radius of the circles */\n  radius?: number;\n  /** Title for the two axis */\n  axisTitles?: [string, string];\n  /** Toggle visibility of color scale. This is only applicable if the data props hae color parameter */\n  showColorScale?: boolean;\n  /** Toggle visibility of NA color in the color scale. This is only applicable if the data props hae color parameter and showColorScale prop is true */\n  showNAColor?: boolean;\n  /** Data points to highlight. Use the label value from data to highlight the data point */\n  highlightedDataPoints?: (string | number)[];\n  /** Defines the opacity of the non-highlighted data */\n  dimmedOpacity?: number;\n  /** Toggles if the graph animates in when loaded.  */\n  animate?: boolean | AnimateDataType;\n  /** Optional SVG <g> element or function that renders custom content behind or in front of the graph. */\n  customLayers?: CustomLayerDataType[];\n  /** Enable graph download option as png */\n  graphDownload?: boolean;\n  /** Enable data download option as a csv */\n  dataDownload?: boolean;\n  /** Reset selection on double-click. Only applicable when used in a dashboard context with filters. */\n  resetSelectionOnDoubleClick?: boolean;\n\n  // Interactions and Callbacks\n  /** Tooltip content. If the type is string then this uses the [handlebar](../?path=/docs/misc-handlebars-templates-and-custom-helpers--docs) template to display the data */\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  tooltip?: string | ((_d: any) => React.ReactNode);\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 */\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  detailsOnClick?: string | ((_d: any) => React.ReactNode);\n  /** Callback for mouse over event */\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  onSeriesMouseOver?: (_d: any) => void;\n  /** Callback for mouse click event */\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  onSeriesMouseClick?: (_d: any) => void;\n\n  // Configuration and Options\n  /** Language setting  */\n  language?: Languages;\n  /** Color theme */\n  theme?: 'light' | 'dark';\n  /** Unique ID for the graph */\n  graphID?: string;\n}\n\nexport function SlopeChart(props: Props) {\n  const {\n    data,\n    graphTitle,\n    colors,\n    sources,\n    graphDescription,\n    showLabels = false,\n    height,\n    width,\n    footNote,\n    colorDomain,\n    colorLegendTitle,\n    radius = 5,\n    axisTitles = ['', ''],\n    padding,\n    backgroundColor = false,\n    leftMargin = 50,\n    rightMargin = 50,\n    topMargin = 20,\n    bottomMargin = 20,\n    tooltip,\n    relativeHeight,\n    onSeriesMouseOver,\n    showColorScale = true,\n    highlightedDataPoints,\n    graphID,\n    minValue,\n    maxValue,\n    onSeriesMouseClick,\n    graphDownload = false,\n    dataDownload = false,\n    fillContainer = true,\n    language = 'en',\n    showNAColor = true,\n    minHeight = 0,\n    theme = 'light',\n    ariaLabel,\n    resetSelectionOnDoubleClick = true,\n    detailsOnClick,\n    styles,\n    classNames,\n    animate = false,\n    dimmedOpacity = 0.3,\n    customLayers = [],\n  } = props;\n\n  const [svgWidth, setSvgWidth] = useState(0);\n  const [svgHeight, setSvgHeight] = useState(0);\n  const [selectedColor, setSelectedColor] = useState<string | undefined>(undefined);\n\n  const graphDiv = useRef<HTMLDivElement>(null);\n  const graphParentDiv = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const resizeObserver = new ResizeObserver((entries) => {\n      setSvgWidth(entries[0].target.clientWidth || 620);\n      setSvgHeight(entries[0].target.clientHeight || 480);\n    });\n    if (graphDiv.current) {\n      resizeObserver.observe(graphDiv.current);\n    }\n    return () => resizeObserver.disconnect();\n  }, []);\n  return (\n    <GraphContainer\n      className={classNames?.graphContainer}\n      style={styles?.graphContainer}\n      id={graphID}\n      ref={graphParentDiv}\n      aria-label={ariaLabel}\n      backgroundColor={backgroundColor}\n      theme={theme}\n      language={language}\n      minHeight={minHeight}\n      width={fillContainer ? undefined : width}\n      height={height}\n      relativeHeight={relativeHeight}\n      padding={padding}\n    >\n      {graphTitle || graphDescription || graphDownload || dataDownload ? (\n        <GraphHeader\n          styles={{\n            title: styles?.title,\n            description: styles?.description,\n          }}\n          classNames={{\n            title: classNames?.title,\n            description: classNames?.description,\n          }}\n          graphTitle={graphTitle}\n          graphDescription={graphDescription}\n          width={width}\n          graphDownload={graphDownload ? graphParentDiv : undefined}\n          dataDownload={\n            dataDownload\n              ? data.map((d) => d.data).filter((d) => d !== undefined).length > 0\n                ? data.map((d) => d.data).filter((d) => d !== undefined)\n                : data.filter((d) => d !== undefined)\n              : null\n          }\n        />\n      ) : null}\n      {showColorScale && data.filter((el) => el.color).length !== 0 && data.length > 0 ? (\n        <ColorLegendWithMouseOver\n          width={width}\n          colorLegendTitle={colorLegendTitle}\n          colors={(colors as string[] | undefined) || Colors[theme].categoricalColors.colors}\n          colorDomain={colorDomain || (uniqBy(data, 'color', true) as string[])}\n          setSelectedColor={setSelectedColor}\n          showNAColor={showNAColor}\n          className={classNames?.colorLegend}\n        />\n      ) : null}\n      <GraphArea ref={graphDiv}>\n        {data.length === 0 && <EmptyState />}\n        {svgWidth && svgHeight && data.length > 0 ? (\n          <Graph\n            data={data.filter(\n              (d) => !checkIfNullOrUndefined(d.y1) && !checkIfNullOrUndefined(d.y2),\n            )}\n            width={fillContainer || !width ? svgWidth : svgWidth < width ? svgWidth : width}\n            height={svgHeight}\n            colorDomain={\n              data.filter((el) => el.color).length === 0\n                ? []\n                : colorDomain || (uniqBy(data, 'color', true) as string[])\n            }\n            colors={\n              data.filter((el) => el.color).length === 0\n                ? colors\n                  ? [colors as string]\n                  : [Colors.primaryColors['blue-600']]\n                : (colors as string[] | undefined) || Colors[theme].categoricalColors.colors\n            }\n            selectedColor={selectedColor}\n            axisTitles={axisTitles}\n            showLabels={showLabels}\n            radius={radius}\n            leftMargin={leftMargin}\n            rightMargin={rightMargin}\n            topMargin={topMargin}\n            bottomMargin={bottomMargin}\n            tooltip={tooltip}\n            onSeriesMouseOver={onSeriesMouseOver}\n            highlightedDataPoints={highlightedDataPoints}\n            minValue={minValue}\n            maxValue={maxValue}\n            onSeriesMouseClick={onSeriesMouseClick}\n            resetSelectionOnDoubleClick={resetSelectionOnDoubleClick}\n            detailsOnClick={detailsOnClick}\n            styles={styles}\n            classNames={classNames}\n            animate={\n              animate === true\n                ? { duration: 0.5, once: true, amount: 0.5 }\n                : animate || { duration: 0, once: true, amount: 0 }\n            }\n            dimmedOpacity={dimmedOpacity}\n            customLayers={customLayers}\n          />\n        ) : null}\n      </GraphArea>\n      {sources || footNote ? (\n        <GraphFooter\n          styles={{ footnote: styles?.footnote, source: styles?.source }}\n          classNames={{\n            footnote: classNames?.footnote,\n            source: classNames?.source,\n          }}\n          sources={sources}\n          footNote={footNote}\n          width={width}\n        />\n      ) : null}\n    </GraphContainer>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAoDA,SAAgB,GAAM,GAAc;CAClC,IAAM,EACJ,SACA,UACA,WACA,eACA,WACA,gBACA,WACA,gBACA,gBACA,eACA,kBACA,YACA,sBACA,eACA,0BACA,kBACA,aACA,aACA,uBACA,iCACA,mBACA,WACA,eACA,YACA,kBACA,oBACE,GACE,IAAS,EAAO,IAAI,GACpB,IAAW,GAAU,GAAQ;EACjC,MAAM,EAAQ;EACd,QAAQ,EAAQ;CAClB,CAAC,GAEK,CAAC,GAAe,KAAoB,EAAc,KAAA,CAAS,GAE3D,CAAC,GAAgB,KAAqB,EAAc,KAAA,CAAS,GAC7D,CAAC,GAAQ,KAAa,EAA6B,KAAA,CAAS,GAC5D,CAAC,GAAQ,KAAa,EAA6B,KAAA,CAAS,GAC5D,IAAS;EACb,KAAK;EACL,QAAQ;EACR,MAAM;EACN,OAAO;CACT,GACM,IAAa,IAAQ,EAAO,OAAO,EAAO,OAC1C,IAAc,IAAS,EAAO,MAAM,EAAO,QAC3C,IAAO,KAAK,IAAI,KAAK,IAAI,GAAG,EAAK,KAAK,MAAM,EAAE,EAAE,CAAC,GAAG,KAAK,IAAI,GAAG,EAAK,KAAK,MAAM,EAAE,EAAE,CAAC,CAAC,GACtF,IAAO,KAAK,IAAI,KAAK,IAAI,GAAG,EAAK,KAAK,MAAM,EAAE,EAAE,CAAC,GAAG,KAAK,IAAI,GAAG,EAAK,KAAK,MAAM,EAAE,EAAE,CAAC,CAAC,GACtF,IAAI,EAAY,EACnB,OAAO,CACN,EAAuB,CAAQ,IAAK,IAAO,IAAI,IAAI,IAAS,GAC5D,EAAuB,CAAQ,IAAK,IAAO,IAAI,IAAO,IAAM,CAC9D,CAAC,EACA,MAAM,CAAC,GAAa,CAAC,CAAC,EACtB,KAAK;CACR,OACE,iBAAA,GAAA,EAAA,MAAA,EAAA,UAAA,EAAA,UAAA;EACE,iBAAA,GAAA,EAAA,KAAC,EAAO,KAAR;GACE,OAAO,GAAG,EAAM;GAChB,QAAQ,GAAG,EAAO;GAClB,SAAS,OAAO,EAAM,GAAG;GACzB,WAAU;GACV,WAAU;GACV,KAAK;aAEL,iBAAA,GAAA,EAAA,MAAC,KAAD;IAAG,WAAW,aAAa,EAAO,KAAK,GAAG,EAAO,IAAI;cAArD;KACE,iBAAA,GAAA,EAAA,MAAC,KAAD,EAAA,UAAA,CACE,iBAAA,GAAA,EAAA,KAAC,GAAD;MACE,IAAI;MACJ,IAAI;MACJ,IAAI;MACJ,IAAI;MACJ,YAAY,EACV,MAAM,EACJ,iEACA,GAAY,OAAO,IACrB,EACF;KACD,CAAA,GACD,iBAAA,GAAA,EAAA,KAAC,GAAD;MACE,GAAG;MACH,GAAG,IAAc;MACjB,OAAO,GAAQ,OAAO;MACtB,WAAW,EACT,4DACA,GAAY,OAAO,KACrB;MACA,MAAM,EAAW;KAClB,CAAA,CACA,EAAA,CAAA;KACH,iBAAA,GAAA,EAAA,MAAC,KAAD,EAAA,UAAA,CACE,iBAAA,GAAA,EAAA,KAAC,GAAD;MACE,IAAI;MACJ,IAAI;MACJ,IAAI,IAAa;MACjB,IAAI,IAAa;MACjB,YAAY,EACV,MAAM,EACJ,iEACA,GAAY,OAAO,IACrB,EACF;KACD,CAAA,GACD,iBAAA,GAAA,EAAA,KAAC,GAAD;MACE,GAAG,IAAa;MAChB,GAAG,IAAc;MACjB,OAAO,GAAQ,OAAO;MACtB,WAAW,EACT,4DACA,GAAY,OAAO,KACrB;MACA,MAAM,EAAW;KAClB,CAAA,CACA,EAAA,CAAA;KACF,EAAa,QAAQ,MAAM,EAAE,aAAa,QAAQ,EAAE,KAAK,MAAM,EAAE,KAAK;KACvE,iBAAA,GAAA,EAAA,KAAC,GAAD,EAAA,UACG,EAAK,KAAK,MAEP,iBAAA,GAAA,EAAA,MAAC,EAAO,GAAR;MAEE,UAAU;OACR,SAAS,EACP,SAAS,IACL,EAAE,SACA,EAAO,EAAY,QAAQ,GAAG,EAAE,OAAO,OAAO,IAC5C,IACA,IAEJ,IACE,EAAc,UAAU,EAAE,QACxB,IACA,IACF,KACE,EAAsB,QAAQ,EAAE,KAAK,MAAM,KAEzC,IADA,EAGZ;OACA,aAAa;QACX,SAAS,IACL,EAAE,SACA,EAAO,EAAY,QAAQ,GAAG,EAAE,OAAO,OAAO,IAC5C,IACA,IAEJ,IACE,EAAc,UAAU,EAAE,QACxB,IACA,IACF,KACE,EAAsB,QAAQ,EAAE,KAAK,MAAM,KAEzC,IADA;QAGV,YAAY,EAAE,UAAU,EAAQ,SAAS;OAC3C;MACF;MACA,SAAQ;MACR,SAAS,IAAW,gBAAgB;MACpC,MAAM;OAAE,SAAS;OAAG,YAAY,EAAE,UAAU,EAAQ,SAAS;MAAE;MAC/D,eAAe,MAAU;OAIvB,AAHA,EAAiB,CAAC,GAClB,EAAU,EAAM,OAAO,GACvB,EAAU,EAAM,OAAO,GACvB,IAAoB,CAAC;MACvB;MACA,cAAc,MAAU;OAGtB,AAFA,EAAiB,CAAC,GAClB,EAAU,EAAM,OAAO,GACvB,EAAU,EAAM,OAAO;MACzB;MACA,oBAAoB;OAIlB,AAHA,EAAiB,KAAA,CAAS,GAC1B,EAAU,KAAA,CAAS,GACnB,EAAU,KAAA,CAAS,GACnB,IAAoB,KAAA,CAAS;MAC/B;MACA,eAAe;OACb,CAAI,KAAsB,QACxB,GAAA,GAAA,SAAY,GAAgB,CAAC,KAAK,MAChC,EAAkB,KAAA,CAAS,GAC3B,IAAqB,KAAA,CAAS,MAE9B,EAAkB,CAAC,GACnB,IAAqB,CAAC;MAG5B;gBArEF;OAuEE,iBAAA,GAAA,EAAA,KAAC,EAAO,QAAR;QACE,UAAU;SACR,SAAS;UACP,IAAI;UACJ,IAAI,EAAE,EAAE,EAAE;UACV,MACE,EAAK,QAAQ,MAAO,EAAG,KAAK,EAAE,WAAW,IACrC,EAAO,KACN,EAAE,QAED,EAAO,EAAY,QAAQ,GAAG,EAAE,OAAO,KADvC,EAAO;UAEf,QACE,EAAK,QAAQ,MAAO,EAAG,KAAK,EAAE,WAAW,IACrC,EAAO,KACN,EAAE,QAED,EAAO,EAAY,QAAQ,GAAG,EAAE,OAAO,KADvC,EAAO;UAEf,SAAS;SACX;SACA,aAAa;UACX,IAAI;UACJ,IAAI,EAAE,EAAE,EAAE;UACV,MACE,EAAK,QAAQ,MAAO,EAAG,KAAK,EAAE,WAAW,IACrC,EAAO,KACN,EAAE,QAED,EAAO,EAAY,QAAQ,GAAG,EAAE,OAAO,KADvC,EAAO;UAEf,QACE,EAAK,QAAQ,MAAO,EAAG,KAAK,EAAE,WAAW,IACrC,EAAO,KACN,EAAE,QAED,EAAO,EAAY,QAAQ,GAAG,EAAE,OAAO,KADvC,EAAO;UAEf,SAAS;UACT,YAAY,EAAE,UAAU,EAAQ,SAAS;SAC3C;QACF;QACA,SAAQ;QACR,SAAS,IAAW,gBAAgB;QACpC,MAAM;SAAE,SAAS;SAAG,YAAY,EAAE,UAAU,EAAQ,SAAS;QAAE;QAC/D,GAAG;QACH,OAAO,EACL,aAAa,GACf;OACD,CAAA;OACA,IACC,iBAAA,GAAA,EAAA,KAAC,EAAO,MAAR;QACE,UAAU;SACR,SAAS;UACP,GAAG,EAAE,EAAE,EAAE;UACT,MACE,EAAK,QAAQ,MAAO,EAAG,KAAK,EAAE,WAAW,IACrC,EAAO,KACN,EAAE,QAED,EAAO,EAAY,QAAQ,GAAG,EAAE,OAAO,KADvC,EAAO;UAEf,SAAS;SACX;SACA,aAAa;UACX,GAAG,EAAE,EAAE,EAAE;UACT,MACE,EAAK,QAAQ,MAAO,EAAG,KAAK,EAAE,WAAW,IACrC,EAAO,KACN,EAAE,QAED,EAAO,EAAY,QAAQ,GAAG,EAAE,OAAO,KADvC,EAAO;UAEf,SAAS;UACT,YAAY,EAAE,UAAU,EAAQ,SAAS;SAC3C;QACF;QACA,SAAQ;QACR,SAAS,IAAW,gBAAgB;QACpC,MAAM;SAAE,SAAS;SAAG,YAAY,EAAE,UAAU,EAAQ,SAAS;QAAE;QAC/D,OAAO;SACL,YAAY;SACZ,GAAI,GAAQ,OAAO,UAAU,CAAC;QAChC;QACA,WAAW,EAAG,WAAW,GAAY,OAAO,MAAM;QAClD,GAAG;QACH,IAAG;QACH,YAAW;QACX,IAAI,IAAI,IAAS;kBAEhB,EAAE;OACQ,CAAA,IACX,IACF,EAAsB,QAAQ,EAAE,KAAK,MAAM,KAuCvC,OAtCF,iBAAA,GAAA,EAAA,KAAC,EAAO,MAAR;QACE,UAAU;SACR,SAAS;UACP,GAAG,EAAE,EAAE,EAAE;UACT,MACE,EAAK,QAAQ,MAAO,EAAG,KAAK,EAAE,WAAW,IACrC,EAAO,KACN,EAAE,QAED,EAAO,EAAY,QAAQ,GAAG,EAAE,OAAO,KADvC,EAAO;UAEf,SAAS;SACX;SACA,aAAa;UACX,GAAG,EAAE,EAAE,EAAE;UACT,MACE,EAAK,QAAQ,MAAO,EAAG,KAAK,EAAE,WAAW,IACrC,EAAO,KACN,EAAE,QAED,EAAO,EAAY,QAAQ,GAAG,EAAE,OAAO,KADvC,EAAO;UAEf,SAAS;UACT,YAAY,EAAE,UAAU,EAAQ,SAAS;SAC3C;QACF;QACA,SAAQ;QACR,SAAS,IAAW,gBAAgB;QACpC,MAAM;SAAE,SAAS;SAAG,YAAY,EAAE,UAAU,EAAQ,SAAS;QAAE;QAC/D,OAAO;SACL,YAAY;SACZ,GAAI,GAAQ,OAAO,UAAU,CAAC;QAChC;QACA,WAAW,EAAG,WAAW,GAAY,OAAO,MAAM;QAClD,GAAG;QACH,IAAG;QACH,IAAI;kBAEH,EAAE;OACQ,CAAA,IAEb;OACJ,iBAAA,GAAA,EAAA,KAAC,EAAO,QAAR;QACE,UAAU;SACR,SAAS;UACP,IAAI,IAAa;UACjB,IAAI,EAAE,EAAE,EAAE;UACV,MACE,EAAK,QAAQ,MAAO,EAAG,KAAK,EAAE,WAAW,IACrC,EAAO,KACN,EAAE,QAED,EAAO,EAAY,QAAQ,GAAG,EAAE,OAAO,KADvC,EAAO;UAEf,QACE,EAAK,QAAQ,MAAO,EAAG,KAAK,EAAE,WAAW,IACrC,EAAO,KACN,EAAE,QAED,EAAO,EAAY,QAAQ,GAAG,EAAE,OAAO,KADvC,EAAO;UAEf,SAAS;SACX;SACA,aAAa;UACX,IAAI,IAAa;UACjB,IAAI,EAAE,EAAE,EAAE;UACV,MACE,EAAK,QAAQ,MAAO,EAAG,KAAK,EAAE,WAAW,IACrC,EAAO,KACN,EAAE,QAED,EAAO,EAAY,QAAQ,GAAG,EAAE,OAAO,KADvC,EAAO;UAEf,QACE,EAAK,QAAQ,MAAO,EAAG,KAAK,EAAE,WAAW,IACrC,EAAO,KACN,EAAE,QAED,EAAO,EAAY,QAAQ,GAAG,EAAE,OAAO,KADvC,EAAO;UAEf,SAAS;UACT,YAAY,EAAE,UAAU,EAAQ,SAAS;SAC3C;QACF;QACA,SAAQ;QACR,SAAS,IAAW,gBAAgB;QACpC,MAAM;SAAE,SAAS;SAAG,YAAY,EAAE,UAAU,EAAQ,SAAS;QAAE;QAC/D,GAAG;QACH,OAAO,EACL,aAAa,GACf;OACD,CAAA;OACA,IACC,iBAAA,GAAA,EAAA,KAAC,EAAO,MAAR;QACE,UAAU;SACR,SAAS;UACP,GAAG,EAAE,EAAE,EAAE;UACT,MACE,EAAK,QAAQ,MAAO,EAAG,KAAK,EAAE,WAAW,IACrC,EAAO,KACN,EAAE,QAED,EAAO,EAAY,QAAQ,GAAG,EAAE,OAAO,KADvC,EAAO;UAEf,SAAS;SACX;SACA,aAAa;UACX,GAAG,EAAE,EAAE,EAAE;UACT,MACE,EAAK,QAAQ,MAAO,EAAG,KAAK,EAAE,WAAW,IACrC,EAAO,KACN,EAAE,QAED,EAAO,EAAY,QAAQ,GAAG,EAAE,OAAO,KADvC,EAAO;UAEf,SAAS;UACT,YAAY,EAAE,UAAU,EAAQ,SAAS;SAC3C;QACF;QACA,SAAQ;QACR,SAAS,IAAW,gBAAgB;QACpC,MAAM;SAAE,SAAS;SAAG,YAAY,EAAE,UAAU,EAAQ,SAAS;QAAE;QAC/D,OAAO;SACL,YAAY;SACZ,GAAI,GAAQ,OAAO,UAAU,CAAC;QAChC;QACA,WAAW,EAAG,WAAW,GAAY,OAAO,MAAM;QAClD,GAAG,IAAa;QAChB,IAAG;QACH,IAAI,IAAS;kBAEZ,EAAE;OACQ,CAAA,IACX,IACF,EAAsB,QAAQ,EAAE,KAAK,MAAM,KAuCvC,OAtCF,iBAAA,GAAA,EAAA,KAAC,EAAO,MAAR;QACE,UAAU;SACR,SAAS;UACP,GAAG,EAAE,EAAE,EAAE;UACT,MACE,EAAK,QAAQ,MAAO,EAAG,KAAK,EAAE,WAAW,IACrC,EAAO,KACN,EAAE,QAED,EAAO,EAAY,QAAQ,GAAG,EAAE,OAAO,KADvC,EAAO;UAEf,SAAS;SACX;SACA,aAAa;UACX,GAAG,EAAE,EAAE,EAAE;UACT,MACE,EAAK,QAAQ,MAAO,EAAG,KAAK,EAAE,WAAW,IACrC,EAAO,KACN,EAAE,QAED,EAAO,EAAY,QAAQ,GAAG,EAAE,OAAO,KADvC,EAAO;UAEf,SAAS;UACT,YAAY,EAAE,UAAU,EAAQ,SAAS;SAC3C;QACF;QACA,SAAQ;QACR,SAAS,IAAW,gBAAgB;QACpC,MAAM;SAAE,SAAS;SAAG,YAAY,EAAE,UAAU,EAAQ,SAAS;QAAE;QAC/D,OAAO;SACL,YAAY;SACZ,GAAI,GAAQ,OAAO,UAAU,CAAC;QAChC;QACA,WAAW,EAAG,WAAW,GAAY,OAAO,MAAM;QAClD,GAAG,IAAa;QAChB,IAAG;QACH,IAAI;kBAEH,EAAE;OACQ,CAAA,IAEb;OACJ,iBAAA,GAAA,EAAA,KAAC,EAAO,MAAR;QACE,UAAU;SACR,SAAS;UACP,IAAI;UACJ,IAAI,IAAa;UACjB,IAAI,EAAE,EAAE,EAAE;UACV,IAAI,EAAE,EAAE,EAAE;UACV,QACE,EAAK,QAAQ,MAAO,EAAG,KAAK,EAAE,WAAW,IACrC,EAAO,KACN,EAAE,QAED,EAAO,EAAY,QAAQ,GAAG,EAAE,OAAO,KADvC,EAAO;SAEjB;SACA,aAAa;UACX,IAAI;UACJ,IAAI,IAAa;UACjB,IAAI,EAAE,EAAE,EAAE;UACV,IAAI,EAAE,EAAE,EAAE;UACV,QACE,EAAK,QAAQ,MAAO,EAAG,KAAK,EAAE,WAAW,IACrC,EAAO,KACN,EAAE,QAED,EAAO,EAAY,QAAQ,GAAG,EAAE,OAAO,KADvC,EAAO;UAEf,YAAY,EAAE,UAAU,EAAQ,SAAS;SAC3C;QACF;QACA,SAAQ;QACR,SAAS,IAAW,gBAAgB;QACpC,MAAM;SAAE,SAAS;SAAG,YAAY,EAAE,UAAU,EAAQ,SAAS;QAAE;QAC/D,WAAW,GAAY;QACvB,OAAO;SACL,MAAM;SACN,aAAa;SACb,GAAG,GAAQ;QACb;OACD,CAAA;MACO;QA3WH,EAAE,KA2WC,CAEb,EACc,CAAA;KAChB,EAAa,QAAQ,MAAM,EAAE,aAAa,OAAO,EAAE,KAAK,MAAM,EAAE,KAAK;IACrE;;EACO,CAAA;EACX,KAAiB,KAAW,KAAU,IACrC,iBAAA,GAAA,EAAA,KAAC,GAAD;GACE,MAAM;GACN,MAAM;GACN,MAAM;GACN,MAAM;GACN,iBAAiB,GAAQ;GACzB,WAAW,GAAY;EACxB,CAAA,IACC;EACH,KAAkB,MAAmB,KAAA,IACpC,iBAAA,GAAA,EAAA,KAAC,GAAD;GACE,MAAM;GACN,MAAM;GACN,SAAS;GACT,WAAW,GAAY;EACxB,CAAA,IACC;CACJ,EAAA,CAAA;AAEN;;;ACnbA,SAAgB,EAAW,GAAc;CACvC,IAAM,EACJ,SACA,eACA,WACA,YACA,qBACA,iBAAa,IACb,WACA,UACA,aACA,gBACA,qBACA,aAAS,GACT,gBAAa,CAAC,IAAI,EAAE,GACpB,YACA,qBAAkB,IAClB,gBAAa,IACb,iBAAc,IACd,eAAY,IACZ,kBAAe,IACf,YACA,oBACA,sBACA,oBAAiB,IACjB,0BACA,YACA,aACA,aACA,uBACA,mBAAgB,IAChB,kBAAe,IACf,mBAAgB,IAChB,cAAW,MACX,iBAAc,IACd,eAAY,GACZ,WAAQ,SACR,cACA,iCAA8B,IAC9B,mBACA,WACA,eACA,aAAU,IACV,mBAAgB,IAChB,kBAAe,CAAC,MACd,GAEE,CAAC,GAAU,MAAe,EAAS,CAAC,GACpC,CAAC,IAAW,MAAgB,EAAS,CAAC,GACtC,CAAC,IAAe,MAAoB,EAA6B,KAAA,CAAS,GAE1E,IAAW,EAAuB,IAAI,GACtC,KAAiB,EAAuB,IAAI;CAYlD,OAVA,SAAgB;EACd,IAAM,IAAiB,IAAI,gBAAgB,MAAY;GAErD,AADA,GAAY,EAAQ,GAAG,OAAO,eAAe,GAAG,GAChD,GAAa,EAAQ,GAAG,OAAO,gBAAgB,GAAG;EACpD,CAAC;EAID,OAHI,EAAS,WACX,EAAe,QAAQ,EAAS,OAAO,SAE5B,EAAe,WAAW;CACzC,GAAG,CAAC,CAAC,GAEH,iBAAA,GAAA,EAAA,MAAC,GAAD;EACE,WAAW,GAAY;EACvB,OAAO,GAAQ;EACf,IAAI;EACJ,KAAK;EACL,cAAY;EACK;EACV;EACG;EACC;EACX,OAAO,IAAgB,KAAA,IAAY;EAC3B;EACQ;EACP;YAbX;GAeG,KAAc,KAAoB,KAAiB,IAClD,iBAAA,GAAA,EAAA,KAAC,GAAD;IACE,QAAQ;KACN,OAAO,GAAQ;KACf,aAAa,GAAQ;IACvB;IACA,YAAY;KACV,OAAO,GAAY;KACnB,aAAa,GAAY;IAC3B;IACY;IACM;IACX;IACP,eAAe,IAAgB,KAAiB,KAAA;IAChD,cACE,IACI,EAAK,KAAK,MAAM,EAAE,IAAI,EAAE,QAAQ,MAAM,MAAM,KAAA,CAAS,EAAE,SAAS,IAC9D,EAAK,KAAK,MAAM,EAAE,IAAI,EAAE,QAAQ,MAAM,MAAM,KAAA,CAAS,IACrD,EAAK,QAAQ,MAAM,MAAM,KAAA,CAAS,IACpC;GAEP,CAAA,IACC;GACH,KAAkB,EAAK,QAAQ,MAAO,EAAG,KAAK,EAAE,WAAW,KAAK,EAAK,SAAS,IAC7E,iBAAA,GAAA,EAAA,KAAC,GAAD;IACS;IACW;IAClB,QAAS,KAAmC,EAAO,GAAO,kBAAkB;IAC5E,aAAa,KAAgB,EAAO,GAAM,SAAS,EAAI;IACrC;IACL;IACb,WAAW,GAAY;GACxB,CAAA,IACC;GACJ,iBAAA,GAAA,EAAA,MAAC,GAAD;IAAW,KAAK;cAAhB,CACG,EAAK,WAAW,KAAK,iBAAA,GAAA,EAAA,KAAC,IAAD,CAAa,CAAA,GAClC,KAAY,MAAa,EAAK,SAAS,IACtC,iBAAA,GAAA,EAAA,KAAC,IAAD;KACE,MAAM,EAAK,QACR,MAAM,CAAC,EAAuB,EAAE,EAAE,KAAK,CAAC,EAAuB,EAAE,EAAE,CACtE;KACA,OAAO,KAAiB,CAAC,KAAmB,IAAW,IAAtB,IAAyC;KAC1E,QAAQ;KACR,aACE,EAAK,QAAQ,MAAO,EAAG,KAAK,EAAE,WAAW,IACrC,CAAC,IACD,KAAgB,EAAO,GAAM,SAAS,EAAI;KAEhD,QACE,EAAK,QAAQ,MAAO,EAAG,KAAK,EAAE,WAAW,IACrC,IACE,CAAC,CAAgB,IACjB,CAAC,EAAO,cAAc,WAAW,IAClC,KAAmC,EAAO,GAAO,kBAAkB;KAE3D;KACH;KACA;KACJ;KACI;KACC;KACF;KACG;KACL;KACU;KACI;KACb;KACA;KACU;KACS;KACb;KACR;KACI;KACZ,SACE,MAAY,KACR;MAAE,UAAU;MAAK,MAAM;MAAM,QAAQ;KAAI,IACzC,KAAW;MAAE,UAAU;MAAG,MAAM;MAAM,QAAQ;KAAE;KAEvC;KACD;IACf,CAAA,IACC,IACK;;GACV,KAAW,IACV,iBAAA,GAAA,EAAA,KAAC,GAAD;IACE,QAAQ;KAAE,UAAU,GAAQ;KAAU,QAAQ,GAAQ;IAAO;IAC7D,YAAY;KACV,UAAU,GAAY;KACtB,QAAQ,GAAY;IACtB;IACS;IACC;IACH;GACR,CAAA,IACC;EACU;;AAEpB"}