@undp/data-viz 2.6.0 → 2.6.1

package/dist/Utils-C5kfxVL2.js

@@ -0,0 +1,56 @@
+//#region src/Utils/generateCodes.ts
+var e = (e) => {
+	let t = "";
+	return e.forEach((e) => {
+		t += `~${`${e}`.replace(/ /g, "+")}`;
+	}), t.substring(1);
+};
+function t(t, n) {
+	let r = "";
+	return n.forEach((t) => {
+		let n = "";
+		switch (typeof t.value) {
+			case "number":
+				n = `${t.value}`;
+				break;
+			case "boolean":
+				n = `${t.value}`;
+				break;
+			case "object":
+				n = e(t.value);
+				break;
+			default: n = `${t.value}`;
+		}
+		r += `&${t.id}=${n.replace(/ /g, "+").replaceAll("'", "_")}`;
+	}), `${t}?${r}`;
+}
+function n(e, n) {
+	return `<iframe src="${t(e, n)}" loading="lazy" style="width: 100%; border: 0px none"></iframe>`;
+}
+//#endregion
+//#region src/Utils/getPercentileValue.ts
+function r(e, t) {
+	let n = e.slice().sort((e, t) => e - t);
+	return n[Math.ceil(t / 100 * n.length) - 1];
+}
+//#endregion
+//#region src/Utils/getQueryParamsFromLink.ts
+function i() {
+	let e = [];
+	return new URL(window.location.href).searchParams.forEach((t, n) => {
+		e.push({
+			param: n,
+			value: t.replaceAll("+", " ").replaceAll("_", "'").split("~").length > 1 ? t.replaceAll("+", " ").replaceAll("_", "'").split("~") : t.replaceAll("+", " ").replaceAll("_", "'")
+		});
+	}), e;
+}
+//#endregion
+//#region src/Utils/removeOutliers.ts
+function a(e, t = 2) {
+	let n = e.reduce((e, t) => e + t, 0) / e.length, r = t * Math.sqrt(e.reduce((e, t) => e + (t - n) ** 2, 0) / e.length);
+	return e.filter((e) => Math.abs(e - n) <= r);
+}
+//#endregion
+export { n as a, t as i, i as n, r, a as t };
+
+//# sourceMappingURL=Utils-C5kfxVL2.js.map

package/dist/Utils-C5kfxVL2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Utils-C5kfxVL2.js","names":[],"sources":["../src/Utils/generateCodes.ts","../src/Utils/getPercentileValue.ts","../src/Utils/getQueryParamsFromLink.ts","../src/Utils/removeOutliers.ts"],"sourcesContent":["/**\n * Converts an array of strings or numbers into a tilde-separated string with spaces replaced by `+`.\n * Example: `['A B', 'C']` → `'A+B~C'`\n */\nconst ArrToString = (d: string[] | number[]) => {\n  let stringValTemp = '';\n  d.forEach((el) => {\n    stringValTemp += `~${`${el}`.replace(/ /g, '+')}`;\n  });\n  const stringVal = stringValTemp.substring(1);\n  return stringVal;\n};\n\n/**\n * Represents a parameter to be embedded in a URL.\n */\ninterface ParamsProps {\n  id: string;\n  value: string | boolean | number | string[] | number[];\n}\n\n/**\n * Generates an embed link with custom query parameters.\n * @param link - The base URL.\n * @param params - An array of parameters to append.\n * @returns A URL string with encoded query parameters.\n */\nexport function generateEmbedLink(link: string, params: ParamsProps[]) {\n  let queryParams = '';\n  params.forEach((d) => {\n    let paramToString = '';\n    switch (typeof d.value) {\n      case 'number':\n        paramToString = `${d.value}`;\n        break;\n      case 'boolean':\n        paramToString = `${d.value}`;\n        break;\n      case 'object':\n        paramToString = ArrToString(d.value as string[] | number[]);\n        break;\n      default:\n        paramToString = `${d.value}`;\n    }\n    queryParams += `&${d.id}=${paramToString.replace(/ /g, '+').replaceAll(\"'\", '_')}`;\n  });\n  return `${link}?${queryParams}`;\n}\n\n/**\n * Generates an iframe HTML string using a base link and parameters.\n * @param link - The base URL.\n * @param params - Parameters to convert into query string.\n * @returns A string of iframe HTML.\n */\nexport function generateIframeCode(link: string, params: ParamsProps[]) {\n  return `<iframe src=\"${generateEmbedLink(\n    link,\n    params,\n  )}\" loading=\"lazy\" style=\"width: 100%; border: 0px none\"></iframe>`;\n}\n","/**\n * Returns the value at the given percentile from a numeric dataset.\n *\n * @param data - An array of numbers to compute the percentile from.\n * @param percentile - The desired percentile (0–100).\n * @returns The value at the specified percentile.\n *\n * @example\n * getPercentileValue([1, 3, 5, 7, 9], 50); // 5\n */\nexport function getPercentileValue(data: number[], percentile: number) {\n  const sortedData = data.slice().sort((a, b) => a - b);\n  const index = Math.ceil((percentile / 100) * sortedData.length) - 1;\n  return sortedData[index];\n}\n","/**\n * Parses query parameters from the current browser URL.\n *\n * @returns An array of objects containing each query parameter and its value.\n * If a value contains the `~` delimiter, it will be returned as a string array.\n *\n * - Replaces `+` with spaces and `_` with `'`.\n * - Splits values by `~` to support array-style data.\n *\n * @example\n * getQueryParamsFromLink();\n */\nexport function getQueryParamsFromLink() {\n  const params: {\n    param: string;\n    value: string | string[];\n  }[] = [];\n  new URL(window.location.href).searchParams.forEach((value, param) => {\n    params.push({\n      param,\n      value:\n        value.replaceAll('+', ' ').replaceAll('_', \"'\").split('~').length > 1\n          ? value.replaceAll('+', ' ').replaceAll('_', \"'\").split('~')\n          : value.replaceAll('+', ' ').replaceAll('_', \"'\"),\n    });\n  });\n  return params;\n}\n","/**\n * Removes statistical outliers from a numeric dataset based on standard deviation.\n *\n * @param data - The array of numbers to filter.\n * @param outlierThreshold - Optional multiplier for standard deviation (default: 2).\n * Values further than `threshold * stdDev` from the mean are considered outliers.\n *\n * @returns A filtered array with outliers removed.\n *\n * @example\n * removeOutliers([1, 2, 3, 100]); // [1, 2, 3]\n * removeOutliers([10, 12, 11, 13, 300], 1.5); // May remove 300\n */\nexport function removeOutliers(data: number[], outlierThreshold = 2) {\n  const mean = data.reduce((acc, val) => acc + val, 0) / data.length;\n  const stdDev = Math.sqrt(data.reduce((acc, val) => acc + (val - mean) ** 2, 0) / data.length);\n  const outlierThresholdWithStdDev = outlierThreshold * stdDev;\n  const filteredData = data.filter((val) => Math.abs(val - mean) <= outlierThresholdWithStdDev);\n\n  return filteredData;\n}\n"],"mappings":";AAIA,IAAM,KAAe,MAA2B;CAC9C,IAAI,IAAgB;CAKpB,OAJA,EAAE,SAAS,MAAO;EAChB,KAAiB,IAAI,GAAG,IAAK,QAAQ,MAAM,GAAG;CAChD,CAAC,GACiB,EAAc,UAAU,CACnC;AACT;AAgBA,SAAgB,EAAkB,GAAc,GAAuB;CACrE,IAAI,IAAc;CAkBlB,OAjBA,EAAO,SAAS,MAAM;EACpB,IAAI,IAAgB;EACpB,QAAQ,OAAO,EAAE,OAAjB;GACE,KAAK;IACH,IAAgB,GAAG,EAAE;IACrB;GACF,KAAK;IACH,IAAgB,GAAG,EAAE;IACrB;GACF,KAAK;IACH,IAAgB,EAAY,EAAE,KAA4B;IAC1D;GACF,SACE,IAAgB,GAAG,EAAE;EACzB;EACA,KAAe,IAAI,EAAE,GAAG,GAAG,EAAc,QAAQ,MAAM,GAAG,EAAE,WAAW,KAAK,GAAG;CACjF,CAAC,GACM,GAAG,EAAK,GAAG;AACpB;AAQA,SAAgB,EAAmB,GAAc,GAAuB;CACtE,OAAO,gBAAgB,EACrB,GACA,CACF,EAAE;AACJ;;;AClDA,SAAgB,EAAmB,GAAgB,GAAoB;CACrE,IAAM,IAAa,EAAK,MAAM,EAAE,MAAM,GAAG,MAAM,IAAI,CAAC;CAEpD,OAAO,EADO,KAAK,KAAM,IAAa,MAAO,EAAW,MAAM,IAAI;AAEpE;;;ACFA,SAAgB,IAAyB;CACvC,IAAM,IAGA,CAAC;CAUP,OATA,IAAI,IAAI,OAAO,SAAS,IAAI,EAAE,aAAa,SAAS,GAAO,MAAU;EACnE,EAAO,KAAK;GACV;GACA,OACE,EAAM,WAAW,KAAK,GAAG,EAAE,WAAW,KAAK,GAAG,EAAE,MAAM,GAAG,EAAE,SAAS,IAChE,EAAM,WAAW,KAAK,GAAG,EAAE,WAAW,KAAK,GAAG,EAAE,MAAM,GAAG,IACzD,EAAM,WAAW,KAAK,GAAG,EAAE,WAAW,KAAK,GAAG;EACtD,CAAC;CACH,CAAC,GACM;AACT;;;ACdA,SAAgB,EAAe,GAAgB,IAAmB,GAAG;CACnE,IAAM,IAAO,EAAK,QAAQ,GAAK,MAAQ,IAAM,GAAK,CAAC,IAAI,EAAK,QAEtD,IAA6B,IADpB,KAAK,KAAK,EAAK,QAAQ,GAAK,MAAQ,KAAO,IAAM,MAAS,GAAG,CAAC,IAAI,EAAK,MAChC;CAGtD,OAFqB,EAAK,QAAQ,MAAQ,KAAK,IAAI,IAAM,CAAI,KAAK,CAE3D;AACT"}

package/dist/Utils-HrtbRBIa.cjs

@@ -0,0 +1,2 @@
+var e=e=>{let t=``;return e.forEach(e=>{t+=`~${`${e}`.replace(/ /g,`+`)}`}),t.substring(1)};function t(t,n){let r=``;return n.forEach(t=>{let n=``;switch(typeof t.value){case`number`:n=`${t.value}`;break;case`boolean`:n=`${t.value}`;break;case`object`:n=e(t.value);break;default:n=`${t.value}`}r+=`&${t.id}=${n.replace(/ /g,`+`).replaceAll(`'`,`_`)}`}),`${t}?${r}`}function n(e,n){return`<iframe src="${t(e,n)}" loading="lazy" style="width: 100%; border: 0px none"></iframe>`}function r(e,t){let n=e.slice().sort((e,t)=>e-t);return n[Math.ceil(t/100*n.length)-1]}function i(){let e=[];return new URL(window.location.href).searchParams.forEach((t,n)=>{e.push({param:n,value:t.replaceAll(`+`,` `).replaceAll(`_`,`'`).split(`~`).length>1?t.replaceAll(`+`,` `).replaceAll(`_`,`'`).split(`~`):t.replaceAll(`+`,` `).replaceAll(`_`,`'`)})}),e}function a(e,t=2){let n=e.reduce((e,t)=>e+t,0)/e.length,r=t*Math.sqrt(e.reduce((e,t)=>e+(t-n)**2,0)/e.length);return e.filter(e=>Math.abs(e-n)<=r)}Object.defineProperty(exports,`a`,{enumerable:!0,get:function(){return n}}),Object.defineProperty(exports,`i`,{enumerable:!0,get:function(){return t}}),Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return r}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return a}});
+//# sourceMappingURL=Utils-HrtbRBIa.cjs.map

package/dist/Utils-HrtbRBIa.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Utils-HrtbRBIa.cjs","names":[],"sources":["../src/Utils/generateCodes.ts","../src/Utils/getPercentileValue.ts","../src/Utils/getQueryParamsFromLink.ts","../src/Utils/removeOutliers.ts"],"sourcesContent":["/**\n * Converts an array of strings or numbers into a tilde-separated string with spaces replaced by `+`.\n * Example: `['A B', 'C']` → `'A+B~C'`\n */\nconst ArrToString = (d: string[] | number[]) => {\n  let stringValTemp = '';\n  d.forEach((el) => {\n    stringValTemp += `~${`${el}`.replace(/ /g, '+')}`;\n  });\n  const stringVal = stringValTemp.substring(1);\n  return stringVal;\n};\n\n/**\n * Represents a parameter to be embedded in a URL.\n */\ninterface ParamsProps {\n  id: string;\n  value: string | boolean | number | string[] | number[];\n}\n\n/**\n * Generates an embed link with custom query parameters.\n * @param link - The base URL.\n * @param params - An array of parameters to append.\n * @returns A URL string with encoded query parameters.\n */\nexport function generateEmbedLink(link: string, params: ParamsProps[]) {\n  let queryParams = '';\n  params.forEach((d) => {\n    let paramToString = '';\n    switch (typeof d.value) {\n      case 'number':\n        paramToString = `${d.value}`;\n        break;\n      case 'boolean':\n        paramToString = `${d.value}`;\n        break;\n      case 'object':\n        paramToString = ArrToString(d.value as string[] | number[]);\n        break;\n      default:\n        paramToString = `${d.value}`;\n    }\n    queryParams += `&${d.id}=${paramToString.replace(/ /g, '+').replaceAll(\"'\", '_')}`;\n  });\n  return `${link}?${queryParams}`;\n}\n\n/**\n * Generates an iframe HTML string using a base link and parameters.\n * @param link - The base URL.\n * @param params - Parameters to convert into query string.\n * @returns A string of iframe HTML.\n */\nexport function generateIframeCode(link: string, params: ParamsProps[]) {\n  return `<iframe src=\"${generateEmbedLink(\n    link,\n    params,\n  )}\" loading=\"lazy\" style=\"width: 100%; border: 0px none\"></iframe>`;\n}\n","/**\n * Returns the value at the given percentile from a numeric dataset.\n *\n * @param data - An array of numbers to compute the percentile from.\n * @param percentile - The desired percentile (0–100).\n * @returns The value at the specified percentile.\n *\n * @example\n * getPercentileValue([1, 3, 5, 7, 9], 50); // 5\n */\nexport function getPercentileValue(data: number[], percentile: number) {\n  const sortedData = data.slice().sort((a, b) => a - b);\n  const index = Math.ceil((percentile / 100) * sortedData.length) - 1;\n  return sortedData[index];\n}\n","/**\n * Parses query parameters from the current browser URL.\n *\n * @returns An array of objects containing each query parameter and its value.\n * If a value contains the `~` delimiter, it will be returned as a string array.\n *\n * - Replaces `+` with spaces and `_` with `'`.\n * - Splits values by `~` to support array-style data.\n *\n * @example\n * getQueryParamsFromLink();\n */\nexport function getQueryParamsFromLink() {\n  const params: {\n    param: string;\n    value: string | string[];\n  }[] = [];\n  new URL(window.location.href).searchParams.forEach((value, param) => {\n    params.push({\n      param,\n      value:\n        value.replaceAll('+', ' ').replaceAll('_', \"'\").split('~').length > 1\n          ? value.replaceAll('+', ' ').replaceAll('_', \"'\").split('~')\n          : value.replaceAll('+', ' ').replaceAll('_', \"'\"),\n    });\n  });\n  return params;\n}\n","/**\n * Removes statistical outliers from a numeric dataset based on standard deviation.\n *\n * @param data - The array of numbers to filter.\n * @param outlierThreshold - Optional multiplier for standard deviation (default: 2).\n * Values further than `threshold * stdDev` from the mean are considered outliers.\n *\n * @returns A filtered array with outliers removed.\n *\n * @example\n * removeOutliers([1, 2, 3, 100]); // [1, 2, 3]\n * removeOutliers([10, 12, 11, 13, 300], 1.5); // May remove 300\n */\nexport function removeOutliers(data: number[], outlierThreshold = 2) {\n  const mean = data.reduce((acc, val) => acc + val, 0) / data.length;\n  const stdDev = Math.sqrt(data.reduce((acc, val) => acc + (val - mean) ** 2, 0) / data.length);\n  const outlierThresholdWithStdDev = outlierThreshold * stdDev;\n  const filteredData = data.filter((val) => Math.abs(val - mean) <= outlierThresholdWithStdDev);\n\n  return filteredData;\n}\n"],"mappings":"AAIA,IAAM,EAAe,GAA2B,CAC9C,IAAI,EAAgB,GAKpB,OAJA,EAAE,QAAS,GAAO,CAChB,GAAiB,IAAI,GAAG,IAAK,QAAQ,KAAM,GAAG,GAChD,CAAC,EACiB,EAAc,UAAU,CACnC,CACT,EAgBA,SAAgB,EAAkB,EAAc,EAAuB,CACrE,IAAI,EAAc,GAkBlB,OAjBA,EAAO,QAAS,GAAM,CACpB,IAAI,EAAgB,GACpB,OAAQ,OAAO,EAAE,MAAjB,CACE,IAAK,SACH,EAAgB,GAAG,EAAE,QACrB,MACF,IAAK,UACH,EAAgB,GAAG,EAAE,QACrB,MACF,IAAK,SACH,EAAgB,EAAY,EAAE,KAA4B,EAC1D,MACF,QACE,EAAgB,GAAG,EAAE,OACzB,CACA,GAAe,IAAI,EAAE,GAAG,GAAG,EAAc,QAAQ,KAAM,GAAG,EAAE,WAAW,IAAK,GAAG,GACjF,CAAC,EACM,GAAG,EAAK,GAAG,GACpB,CAQA,SAAgB,EAAmB,EAAc,EAAuB,CACtE,MAAO,gBAAgB,EACrB,EACA,CACF,EAAE,iEACJ,CClDA,SAAgB,EAAmB,EAAgB,EAAoB,CACrE,IAAM,EAAa,EAAK,MAAM,EAAE,MAAM,EAAG,IAAM,EAAI,CAAC,EAEpD,OAAO,EADO,KAAK,KAAM,EAAa,IAAO,EAAW,MAAM,EAAI,EAEpE,CCFA,SAAgB,GAAyB,CACvC,IAAM,EAGA,CAAC,EAUP,OATA,IAAI,IAAI,OAAO,SAAS,IAAI,EAAE,aAAa,SAAS,EAAO,IAAU,CACnE,EAAO,KAAK,CACV,QACA,MACE,EAAM,WAAW,IAAK,GAAG,EAAE,WAAW,IAAK,GAAG,EAAE,MAAM,GAAG,EAAE,OAAS,EAChE,EAAM,WAAW,IAAK,GAAG,EAAE,WAAW,IAAK,GAAG,EAAE,MAAM,GAAG,EACzD,EAAM,WAAW,IAAK,GAAG,EAAE,WAAW,IAAK,GAAG,CACtD,CAAC,CACH,CAAC,EACM,CACT,CCdA,SAAgB,EAAe,EAAgB,EAAmB,EAAG,CACnE,IAAM,EAAO,EAAK,QAAQ,EAAK,IAAQ,EAAM,EAAK,CAAC,EAAI,EAAK,OAEtD,EAA6B,EADpB,KAAK,KAAK,EAAK,QAAQ,EAAK,IAAQ,GAAO,EAAM,IAAS,EAAG,CAAC,EAAI,EAAK,MAChC,EAGtD,OAFqB,EAAK,OAAQ,GAAQ,KAAK,IAAI,EAAM,CAAI,GAAK,CAE3D,CACT"}

package/dist/WaterfallChart-BKpFUJdY.js

@@ -0,0 +1,380 @@
+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 ee } from "./GraphHeader.js";
+import { t as i } from "./checkIfNullOrUndefined-C5gqSAtF.js";
+import { t as a } from "./uniqBy-feeqYuys.js";
+import { n as o, t as s } from "./GraphContainer-DgEB1AVN.js";
+import { ColorLegendWithMouseOver as c } from "./ColorLegendWithMouseOver.js";
+import { t as l } from "./EmptyState-DBmT1Adf.js";
+import { t as u } from "./linear-BkosG4OK.js";
+import { t as d } from "./band-XivI9IHG.js";
+import { t as f } from "./fast-deep-equal--80N92KJ.js";
+import { t as p } from "./proxy-BiRrIImK.js";
+import { t as te } from "./AnimatePresence-CE6xBsMZ.js";
+import { t as ne } from "./use-in-view-CjlKdln1.js";
+import { t as re } from "./Axis-B3ai1eeP.js";
+import { t as ie } from "./AxisTitle-DqJw_G-f.js";
+import { t as ae } from "./XAxesLabels-DIs04SK7.js";
+import { t as m } from "./numberFormattingFunction-Cha8dhHc.js";
+import { t as h } from "./YTicksAndGridLines-CVTzNJYP.js";
+import { t as g } from "./DetailsModal-DxUowfkg.js";
+import { n as oe } from "./ReferenceLine-C8owKJx1.js";
+import { t as se } from "./Tooltip-Y6uTGwkF.js";
+import { t as _ } from "./getTextColorBasedOnBgColor-Ch7uw_Px.js";
+import { cn as ce } from "@undp/design-system-react/cn";
+import { useEffect as v, useMemo as le, useRef as y, useState as b } from "react";
+//#region src/Components/Graphs/WaterfallChart/Graph.tsx
+var ue = /* @__PURE__ */ e(f(), 1), x = t();
+function de(e) {
+	let t = 0, n = 0, r = 0;
+	for (let ee of e) t += ee || 0, t > n && (n = t), t < r && (r = t);
+	return {
+		max: n,
+		min: r
+	};
+}
+function fe(e) {
+	let { leftMargin: t = 20, rightMargin: r = 20, topMargin: ee = 20, bottomMargin: a = 25, data: o, width: s, height: c, barColor: l, suffix: f, prefix: v, barPadding: fe, showLabels: pe, showValues: me, showTicks: he, colorDomain: S, truncateBy: ge, tooltip: _e, onSeriesMouseOver: ve, refValues: ye, selectedColor: C, maxValue: be, minValue: xe, highlightedDataPoints: w, onSeriesMouseClick: T, labelOrder: E, maxBarThickness: D, minBarThickness: O, detailsOnClick: k, barAxisTitle: A, noOfTicks: Se, styles: j, classNames: M, dimmedOpacity: N, animate: P, precision: F, customLayers: Ce, naLabel: I, hideAxisLine: L, locale: R, padZeros: z } = e, we = y(null), B = ne(we, {
+		once: P.once,
+		amount: P.amount
+	}), V = {
+		top: ee,
+		bottom: a,
+		left: A ? t + 30 : t,
+		right: r
+	}, { max: Te, min: H } = de(o.map((e) => e.size)), U = i(be) ? Te : be, W = i(xe) ? H : xe, [G, K] = b(void 0), [q, J] = b(void 0), [Y, X] = b(void 0), [Ee, De] = b(void 0), Z = s - V.left - V.right, Oe = c - V.top - V.bottom, ke = le(() => {
+		let e = /* @__PURE__ */ new Set(), t = o.map((t, n) => {
+			let r = E ? `${t.label}` : `${n}`;
+			return e.add(r), {
+				...t,
+				id: r
+			};
+		}), n = E ? E.filter((t) => !e.has(t)) : [];
+		return [...t, ...n.map((e) => ({
+			id: e,
+			label: e,
+			color: null,
+			size: null
+		}))];
+	}, [o, E]), Ae = le(() => E ?? ke.map((e) => `${e.id}`), [E, ke]), Q = u().domain([W, U]).range([Oe, 0]).nice(), $ = d().domain(Ae).range([0, O ? Math.max(Z, O * Ae.length) : D ? Math.min(Z, D * Ae.length) : Z]).paddingInner(fe), je = Q.ticks(Se), Me = 0, Ne = ke.map((e) => {
+		let t = Me;
+		return Me += e.size || 0, {
+			...e,
+			start: t,
+			end: Me
+		};
+	});
+	return /* @__PURE__ */ (0, x.jsxs)(x.Fragment, { children: [
+		/* @__PURE__ */ (0, x.jsx)(p.svg, {
+			ref: we,
+			width: `${s}px`,
+			height: `${c}px`,
+			viewBox: `0 0 ${s} ${c}`,
+			direction: "ltr",
+			children: /* @__PURE__ */ (0, x.jsxs)("g", {
+				transform: `translate(${V.left},${V.top})`,
+				children: [
+					/* @__PURE__ */ (0, x.jsx)(re, {
+						y1: Q(W < 0 ? 0 : W),
+						y2: Q(W < 0 ? 0 : W),
+						x1: 0 - t,
+						x2: Z + V.right,
+						hideAxisLine: L,
+						label: he ? m(W < 0 ? 0 : W, void 0, F, v, f, R, z) : void 0,
+						labelPos: {
+							x: 0 - t,
+							dx: 0,
+							dy: U < 0 ? "1em" : -5,
+							y: Q(W < 0 ? 0 : W)
+						},
+						classNames: {
+							axis: M?.xAxis?.axis,
+							label: M?.yAxis?.labels
+						},
+						styles: {
+							axis: j?.xAxis?.axis,
+							label: j?.yAxis?.labels
+						}
+					}),
+					he ? /* @__PURE__ */ (0, x.jsx)(h, {
+						values: je.filter((e) => e !== 0),
+						y: je.filter((e) => e !== 0).map((e) => Q(e)),
+						x1: 0 - t,
+						x2: Z + V.right,
+						styles: {
+							gridLines: j?.yAxis?.gridLines,
+							labels: j?.yAxis?.labels
+						},
+						classNames: {
+							gridLines: M?.yAxis?.gridLines,
+							labels: M?.yAxis?.labels
+						},
+						suffix: f,
+						prefix: v,
+						labelType: "secondary",
+						showGridLines: !0,
+						labelPos: "vertical",
+						precision: F,
+						locale: R,
+						padZeros: z
+					}) : null,
+					/* @__PURE__ */ (0, x.jsx)(ie, {
+						x: 0 - t - 15,
+						y: Oe / 2,
+						style: j?.yAxis?.title,
+						className: M?.yAxis?.title,
+						text: A,
+						rotate90: !0
+					}),
+					Ce.filter((e) => e.position === "before").map((e) => e.layer),
+					/* @__PURE__ */ (0, x.jsxs)(te, { children: [Ne.map((e, t) => i($(e.id)) ? null : /* @__PURE__ */ (0, x.jsxs)(p.g, {
+						className: "undp-viz-g-with-hover",
+						initial: "initial",
+						animate: B ? "whileInView" : "initial",
+						variants: {
+							initial: { opacity: C ? e.color && l[S.indexOf(e.color)] === C ? 1 : N : w && w.indexOf(e.label) === -1 ? N : .85 },
+							whileInView: {
+								opacity: C ? e.color && l[S.indexOf(e.color)] === C ? 1 : N : w && w.indexOf(e.label) === -1 ? N : .85,
+								transition: { duration: P.duration }
+							}
+						},
+						exit: {
+							opacity: 0,
+							transition: { duration: P.duration }
+						},
+						onMouseEnter: (t) => {
+							K(e), De(t.clientY), X(t.clientX), ve?.(e);
+						},
+						onClick: () => {
+							(T || k) && ((0, ue.default)(q, e) ? (J(void 0), T?.(void 0)) : (J(e), T?.(e)));
+						},
+						onMouseMove: (t) => {
+							K(e), De(t.clientY), X(t.clientX);
+						},
+						onMouseLeave: () => {
+							K(void 0), X(void 0), De(void 0), ve?.(void 0);
+						},
+						children: [
+							e.size ? /* @__PURE__ */ (0, x.jsx)(p.rect, {
+								width: $.bandwidth(),
+								initial: "initial",
+								animate: B ? "whileInView" : "initial",
+								variants: {
+									initial: {
+										height: 0,
+										x: $(`${e.id}`),
+										y: Q(e.start),
+										fill: o.filter((e) => e.color).length === 0 ? l[0] : e.color ? l[S.indexOf(e.color)] : n.gray
+									},
+									whileInView: {
+										height: Math.abs(Q(e.start) - Q(e.end)),
+										y: Q(Math.max(e.start, e.end)),
+										x: $(`${e.id}`),
+										fill: o.filter((e) => e.color).length === 0 ? l[0] : e.color ? l[S.indexOf(e.color)] : n.gray,
+										transition: { duration: P.duration }
+									}
+								},
+								exit: {
+									height: 0,
+									y: Q(e.start),
+									transition: { duration: P.duration }
+								}
+							}) : null,
+							pe ? /* @__PURE__ */ (0, x.jsx)(ae, {
+								value: `${e.label}`.length < ge ? `${e.label}` : `${`${e.label}`.substring(0, ge)}...`,
+								y: Q(0) + 5,
+								x: $(`${e.id}`),
+								width: $.bandwidth(),
+								height: V.bottom,
+								style: j?.xAxis?.labels,
+								className: M?.xAxis?.labels,
+								alignment: "top",
+								animate: P,
+								isInView: B
+							}) : null,
+							me && Math.abs(Q(e.start) - Q(e.end)) > 16 ? /* @__PURE__ */ (0, x.jsx)(p.text, {
+								style: {
+									textAnchor: "middle",
+									...j?.graphObjectValues || {}
+								},
+								className: ce("graph-value text-sm", M?.graphObjectValues),
+								dy: "0.33em",
+								variants: {
+									initial: {
+										x: $(`${e.id}`) + $.bandwidth() / 2,
+										y: (Q(e.start) + Q(e.end)) / 2,
+										opacity: 0,
+										fill: o.filter((e) => e.color).length === 0 ? _(l[0]) : e.color ? _(l[S.indexOf(e.color)]) : _(n.gray)
+									},
+									whileInView: {
+										x: $(`${e.id}`) + $.bandwidth() / 2,
+										y: (Q(e.start) + Q(e.end)) / 2,
+										fill: o.filter((e) => e.color).length === 0 ? _(l[0]) : e.color ? _(l[S.indexOf(e.color)]) : _(n.gray),
+										opacity: 1,
+										transition: { duration: P.duration }
+									}
+								},
+								initial: "initial",
+								animate: B ? "whileInView" : "initial",
+								exit: {
+									opacity: 0,
+									transition: { duration: P.duration }
+								},
+								children: m(e.size ? Math.abs(e.size) : e.size, I, F, v, f, R, z)
+							}) : null
+						]
+					}, e.label)), ye?.map((e) => /* @__PURE__ */ (0, x.jsx)(oe, {
+						text: e.text,
+						color: e.color,
+						y: Q(e.value),
+						x1: 0 - t,
+						x2: Z + V.right,
+						classNames: e.classNames,
+						styles: e.styles,
+						animate: P,
+						isInView: B
+					}, e.text))] }),
+					Ce.filter((e) => e.position === "after").map((e) => e.layer)
+				]
+			})
+		}),
+		G && _e && Y && Ee ? /* @__PURE__ */ (0, x.jsx)(se, {
+			data: G,
+			body: _e,
+			xPos: Y,
+			yPos: Ee,
+			backgroundStyle: j?.tooltip,
+			className: M?.tooltip
+		}) : null,
+		k && q !== void 0 ? /* @__PURE__ */ (0, x.jsx)(g, {
+			body: k,
+			data: q,
+			setData: J,
+			className: M?.modal
+		}) : null
+	] });
+}
+//#endregion
+//#region src/Components/Graphs/WaterfallChart/index.tsx
+function pe(e) {
+	let { data: t, graphTitle: u, colors: d, sources: f, graphDescription: p, barPadding: te = .25, showValues: ne = !0, showTicks: re = !0, truncateBy: ie = 999, height: ae, width: m, footNote: h, colorDomain: g, colorLegendTitle: oe, highlightedDataPoints: se, padding: _, backgroundColor: ce = !1, topMargin: le, bottomMargin: ue, leftMargin: de, rightMargin: pe, showLabels: me = !0, relativeHeight: he, tooltip: S, onSeriesMouseOver: ge, refValues: _e, showColorScale: ve = !0, graphID: ye, maxValue: C, minValue: be, onSeriesMouseClick: xe, graphDownload: w = !1, dataDownload: T = !1, labelOrder: E, language: D = "en", showNAColor: O = !0, minHeight: k = 0, theme: A = "light", maxBarThickness: Se, maxNumberOfBars: j, minBarThickness: M, ariaLabel: N, detailsOnClick: P, barAxisTitle: F, noOfTicks: Ce = 5, styles: I, classNames: L, filterNA: R = !0, animate: z = !1, dimmedOpacity: we = .3, customLayers: B = [], naLabel: V = "NA", hideAxisLine: Te = !1, numberDisplayOptions: H } = e, [U, W] = b(0), [G, K] = b(0), [q, J] = b(void 0), Y = y(null), X = y(null);
+	return v(() => {
+		let e = new ResizeObserver((e) => {
+			W(e[0].target.clientWidth || 620), K(e[0].target.clientHeight || 480);
+		});
+		return Y.current && e.observe(Y.current), () => e.disconnect();
+	}, []), /* @__PURE__ */ (0, x.jsxs)(o, {
+		className: L?.graphContainer,
+		style: I?.graphContainer,
+		id: ye,
+		ref: X,
+		"aria-label": N,
+		backgroundColor: ce,
+		theme: A,
+		language: D,
+		minHeight: k,
+		width: m,
+		height: ae,
+		relativeHeight: he,
+		padding: _,
+		children: [
+			u || p || w || T ? /* @__PURE__ */ (0, x.jsx)(ee, {
+				styles: {
+					title: I?.title,
+					description: I?.description
+				},
+				classNames: {
+					title: L?.title,
+					description: L?.description
+				},
+				graphTitle: u,
+				graphDescription: p,
+				width: m,
+				graphDownload: w ? X : void 0,
+				dataDownload: T ? 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,
+			ve && t.filter((e) => e.color).length !== 0 && t.length > 0 ? /* @__PURE__ */ (0, x.jsx)(c, {
+				width: m,
+				colorLegendTitle: oe,
+				colors: d || n[A].categoricalColors.colors,
+				colorDomain: g || a(t, "color", !0),
+				setSelectedColor: J,
+				showNAColor: O,
+				className: L?.colorLegend
+			}) : null,
+			/* @__PURE__ */ (0, x.jsxs)(s, {
+				ref: Y,
+				children: [t.filter((e) => R ? !i(e.size) : e).length === 0 && /* @__PURE__ */ (0, x.jsx)(l, {}), U && G && t.filter((e) => R ? !i(e.size) : e).length > 0 ? /* @__PURE__ */ (0, x.jsx)(fe, {
+					hideAxisLine: Te,
+					data: t.filter((e) => R ? !i(e.size) : e).filter((e, t) => j ? t < j : !0),
+					barColor: t.filter((e) => e.color).length === 0 ? d ? [d] : [n.primaryColors["blue-600"]] : d || n[A].categoricalColors.colors,
+					colorDomain: t.filter((e) => e.color).length === 0 ? [] : g || a(t, "color", !0),
+					selectedColor: q,
+					width: U,
+					height: G,
+					barPadding: te,
+					showValues: ne,
+					showTicks: re,
+					leftMargin: de,
+					rightMargin: pe,
+					topMargin: le,
+					bottomMargin: ue,
+					truncateBy: ie,
+					showLabels: me,
+					tooltip: S,
+					onSeriesMouseOver: ge,
+					refValues: _e,
+					maxValue: C,
+					minValue: be,
+					highlightedDataPoints: se,
+					onSeriesMouseClick: xe,
+					labelOrder: E,
+					rtl: D === "he" || D === "ar",
+					maxBarThickness: Se,
+					minBarThickness: M,
+					detailsOnClick: P,
+					barAxisTitle: F,
+					noOfTicks: Ce,
+					classNames: L,
+					styles: I,
+					animate: z === !0 ? {
+						duration: .5,
+						once: !0,
+						amount: .5
+					} : z || {
+						duration: 0,
+						once: !0,
+						amount: 0
+					},
+					dimmedOpacity: we,
+					customLayers: B,
+					naLabel: V,
+					locale: H?.locale || "en",
+					padZeros: H?.padZeros || !1,
+					suffix: H?.suffix || "",
+					prefix: H?.prefix || "",
+					precision: H?.precision ?? 2
+				}) : null]
+			}),
+			f || h ? /* @__PURE__ */ (0, x.jsx)(r, {
+				sources: f,
+				footNote: h,
+				width: m,
+				styles: {
+					footnote: I?.footnote,
+					source: I?.source
+				},
+				classNames: {
+					footnote: L?.footnote,
+					source: L?.source
+				}
+			}) : null
+		]
+	});
+}
+//#endregion
+export { pe as t };
+
+//# sourceMappingURL=WaterfallChart-BKpFUJdY.js.map

package/dist/WaterfallChart-BKpFUJdY.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WaterfallChart-BKpFUJdY.js","names":[],"sources":["../src/Components/Graphs/WaterfallChart/Graph.tsx","../src/Components/Graphs/WaterfallChart/index.tsx"],"sourcesContent":["import { cn } from '@undp/design-system-react/cn';\nimport { scaleBand, scaleLinear } from 'd3-scale';\nimport isEqual from 'fast-deep-equal';\nimport { AnimatePresence, motion, useInView } from 'motion/react';\nimport { useMemo, useRef, useState } from 'react';\nimport { Colors } from '@/Components/ColorPalette';\nimport { Axis } from '@/Components/Elements/Axes/Axis';\nimport { AxisTitle } from '@/Components/Elements/Axes/AxisTitle';\nimport { XAxesLabels } from '@/Components/Elements/Axes/XAxesLabels';\nimport { YTicksAndGridLines } from '@/Components/Elements/Axes/YTicksAndGridLines';\nimport { DetailsModal } from '@/Components/Elements/DetailsModal';\nimport { RefLineY } from '@/Components/Elements/ReferenceLine';\nimport { Tooltip } from '@/Components/Elements/Tooltip';\nimport type {\n  AnimateDataType,\n  ClassNameObject,\n  CustomLayerDataType,\n  ReferenceDataType,\n  StyleObject,\n  WaterfallChartDataType,\n} from '@/Types';\nimport { checkIfNullOrUndefined } from '@/Utils/checkIfNullOrUndefined';\nimport { getTextColorBasedOnBgColor } from '@/Utils/getTextColorBasedOnBgColor';\nimport { numberFormattingFunction } from '@/Utils/numberFormattingFunction';\n\ninterface Props {\n  data: WaterfallChartDataType[];\n  barColor: string[];\n  colorDomain: string[];\n  suffix: string;\n  prefix: string;\n  barPadding: number;\n  showValues: boolean;\n  showTicks: boolean;\n  leftMargin?: number;\n  rightMargin?: number;\n  topMargin?: number;\n  bottomMargin?: number;\n  showLabels: boolean;\n  truncateBy: number;\n  width: number;\n  height: number;\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  refValues?: ReferenceDataType[];\n  selectedColor?: string;\n  maxValue?: number;\n  minValue?: number;\n  highlightedDataPoints?: (string | number)[];\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  onSeriesMouseClick?: (_d: any) => void;\n  labelOrder?: string[];\n  rtl: boolean;\n  maxBarThickness?: number;\n  minBarThickness?: number;\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  detailsOnClick?: string | ((_d: any) => React.ReactNode);\n  barAxisTitle?: string;\n  noOfTicks: number;\n  styles?: StyleObject;\n  classNames?: ClassNameObject;\n  animate: AnimateDataType;\n  dimmedOpacity: number;\n  precision: number;\n  customLayers: CustomLayerDataType[];\n  naLabel: string;\n  hideAxisLine: boolean;\n  locale: string;\n  padZeros: boolean;\n}\nfunction getWaterfallExtent(values: (number | null | undefined)[]) {\n  let cumulative = 0;\n  let max = 0;\n  let min = 0;\n\n  for (const v of values) {\n    cumulative += v || 0;\n    if (cumulative > max) max = cumulative;\n    if (cumulative < min) min = cumulative;\n  }\n\n  return {\n    max,\n    min,\n  };\n}\n\nexport function Graph(props: Props) {\n  const {\n    leftMargin = 20,\n    rightMargin = 20,\n    topMargin = 20,\n    bottomMargin = 25,\n    data,\n    width,\n    height,\n    barColor,\n    suffix,\n    prefix,\n    barPadding,\n    showLabels,\n    showValues,\n    showTicks,\n    colorDomain,\n    truncateBy,\n    tooltip,\n    onSeriesMouseOver,\n    refValues,\n    selectedColor,\n    maxValue,\n    minValue,\n    highlightedDataPoints,\n    onSeriesMouseClick,\n    labelOrder,\n    maxBarThickness,\n    minBarThickness,\n    detailsOnClick,\n    barAxisTitle,\n    noOfTicks,\n    styles,\n    classNames,\n    dimmedOpacity,\n    animate,\n    precision,\n    customLayers,\n    naLabel,\n    hideAxisLine,\n    locale,\n    padZeros,\n  } = props;\n  const svgRef = useRef(null);\n  const isInView = useInView(svgRef, {\n    once: animate.once,\n    amount: animate.amount,\n  });\n  const margin = {\n    top: topMargin,\n    bottom: bottomMargin,\n    left: barAxisTitle ? leftMargin + 30 : leftMargin,\n    right: rightMargin,\n  };\n\n  const { max, min } = getWaterfallExtent(data.map((d) => d.size));\n\n  const maxVal = !checkIfNullOrUndefined(maxValue) ? (maxValue as number) : max;\n  const minVal = !checkIfNullOrUndefined(minValue) ? (minValue as number) : min;\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 graphWidth = width - margin.left - margin.right;\n  const graphHeight = height - margin.top - margin.bottom;\n\n  const dataWithId = useMemo(() => {\n    const idSet = new Set<string>();\n\n    const dataWithIdWithoutMissingIds = data.map((d, i) => {\n      const id = labelOrder ? `${d.label}` : `${i}`;\n      idSet.add(id);\n      return { ...d, id };\n    });\n\n    const missingIds = labelOrder ? labelOrder.filter((id) => !idSet.has(id)) : [];\n\n    return [\n      ...dataWithIdWithoutMissingIds,\n      ...missingIds.map((id) => ({\n        id,\n        label: id,\n        color: null,\n        size: null,\n      })),\n    ];\n  }, [data, labelOrder]);\n\n  const barOrder = useMemo(() => {\n    return labelOrder ?? dataWithId.map((d) => `${d.id}`);\n  }, [labelOrder, dataWithId]);\n\n  const y = scaleLinear().domain([minVal, maxVal]).range([graphHeight, 0]).nice();\n\n  const x = scaleBand()\n    .domain(barOrder)\n    .range([\n      0,\n      minBarThickness\n        ? Math.max(graphWidth, minBarThickness * barOrder.length)\n        : maxBarThickness\n          ? Math.min(graphWidth, maxBarThickness * barOrder.length)\n          : graphWidth,\n    ])\n    .paddingInner(barPadding);\n  const yTicks = y.ticks(noOfTicks);\n  let running = 0;\n\n  const waterfallData = dataWithId.map((d) => {\n    const start = running;\n    running += d.size || 0;\n    return {\n      ...d,\n      start,\n      end: running,\n    };\n  });\n  return (\n    <>\n      <motion.svg\n        ref={svgRef}\n        width={`${width}px`}\n        height={`${height}px`}\n        viewBox={`0 0 ${width} ${height}`}\n        direction='ltr'\n      >\n        <g transform={`translate(${margin.left},${margin.top})`}>\n          <Axis\n            y1={y(minVal < 0 ? 0 : minVal)}\n            y2={y(minVal < 0 ? 0 : minVal)}\n            x1={0 - leftMargin}\n            x2={graphWidth + margin.right}\n            hideAxisLine={hideAxisLine}\n            label={\n              showTicks\n                ? numberFormattingFunction(\n                    minVal < 0 ? 0 : minVal,\n                    undefined,\n                    precision,\n                    prefix,\n                    suffix,\n                    locale,\n                    padZeros,\n                  )\n                : undefined\n            }\n            labelPos={{\n              x: 0 - leftMargin,\n              dx: 0,\n              dy: maxVal < 0 ? '1em' : -5,\n              y: y(minVal < 0 ? 0 : minVal),\n            }}\n            classNames={{\n              axis: classNames?.xAxis?.axis,\n              label: classNames?.yAxis?.labels,\n            }}\n            styles={{ axis: styles?.xAxis?.axis, label: styles?.yAxis?.labels }}\n          />\n          {showTicks ? (\n            <YTicksAndGridLines\n              values={yTicks.filter((d) => d !== 0)}\n              y={yTicks.filter((d) => d !== 0).map((d) => y(d))}\n              x1={0 - leftMargin}\n              x2={graphWidth + margin.right}\n              styles={{\n                gridLines: styles?.yAxis?.gridLines,\n                labels: styles?.yAxis?.labels,\n              }}\n              classNames={{\n                gridLines: classNames?.yAxis?.gridLines,\n                labels: classNames?.yAxis?.labels,\n              }}\n              suffix={suffix}\n              prefix={prefix}\n              labelType='secondary'\n              showGridLines\n              labelPos='vertical'\n              precision={precision}\n              locale={locale}\n              padZeros={padZeros}\n            />\n          ) : null}\n          <AxisTitle\n            x={0 - leftMargin - 15}\n            y={graphHeight / 2}\n            style={styles?.yAxis?.title}\n            className={classNames?.yAxis?.title}\n            text={barAxisTitle}\n            rotate90\n          />\n          {customLayers.filter((d) => d.position === 'before').map((d) => d.layer)}\n          <AnimatePresence>\n            {waterfallData.map((d, _i) =>\n              !checkIfNullOrUndefined(x(d.id)) ? (\n                <motion.g\n                  className='undp-viz-g-with-hover'\n                  key={d.label}\n                  initial='initial'\n                  animate={isInView ? 'whileInView' : 'initial'}\n                  variants={{\n                    initial: {\n                      opacity: selectedColor\n                        ? d.color\n                          ? barColor[colorDomain.indexOf(d.color)] === selectedColor\n                            ? 1\n                            : dimmedOpacity\n                          : dimmedOpacity\n                        : highlightedDataPoints\n                          ? highlightedDataPoints.indexOf(d.label) !== -1\n                            ? 0.85\n                            : dimmedOpacity\n                          : 0.85,\n                    },\n                    whileInView: {\n                      opacity: selectedColor\n                        ? d.color\n                          ? barColor[colorDomain.indexOf(d.color)] === selectedColor\n                            ? 1\n                            : dimmedOpacity\n                          : dimmedOpacity\n                        : highlightedDataPoints\n                          ? highlightedDataPoints.indexOf(d.label) !== -1\n                            ? 0.85\n                            : dimmedOpacity\n                          : 0.85,\n                      transition: { duration: animate.duration },\n                    },\n                  }}\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                  onClick={() => {\n                    if (onSeriesMouseClick || detailsOnClick) {\n                      if (isEqual(mouseClickData, d)) {\n                        setMouseClickData(undefined);\n                        onSeriesMouseClick?.(undefined);\n                      } else {\n                        setMouseClickData(d);\n                        onSeriesMouseClick?.(d);\n                      }\n                    }\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                >\n                  {d.size ? (\n                    <motion.rect\n                      width={x.bandwidth()}\n                      initial='initial'\n                      animate={isInView ? 'whileInView' : 'initial'}\n                      variants={{\n                        initial: {\n                          height: 0,\n                          x: x(`${d.id}`),\n                          y: y(d.start),\n                          fill:\n                            data.filter((el) => el.color).length === 0\n                              ? barColor[0]\n                              : !d.color\n                                ? Colors.gray\n                                : barColor[colorDomain.indexOf(d.color)],\n                        },\n                        whileInView: {\n                          height: Math.abs(y(d.start) - y(d.end)),\n                          y: y(Math.max(d.start, d.end)),\n                          x: x(`${d.id}`),\n                          fill:\n                            data.filter((el) => el.color).length === 0\n                              ? barColor[0]\n                              : !d.color\n                                ? Colors.gray\n                                : barColor[colorDomain.indexOf(d.color)],\n                          transition: { duration: animate.duration },\n                        },\n                      }}\n                      exit={{\n                        height: 0,\n                        y: y(d.start),\n                        transition: { duration: animate.duration },\n                      }}\n                    />\n                  ) : null}\n                  {showLabels ? (\n                    <XAxesLabels\n                      value={\n                        `${d.label}`.length < truncateBy\n                          ? `${d.label}`\n                          : `${`${d.label}`.substring(0, truncateBy)}...`\n                      }\n                      y={y(0) + 5}\n                      x={x(`${d.id}`) as number}\n                      width={x.bandwidth()}\n                      height={margin.bottom}\n                      style={styles?.xAxis?.labels}\n                      className={classNames?.xAxis?.labels}\n                      alignment='top'\n                      animate={animate}\n                      isInView={isInView}\n                    />\n                  ) : null}\n                  {showValues && Math.abs(y(d.start) - y(d.end)) > 16 ? (\n                    <motion.text\n                      style={{\n                        textAnchor: 'middle',\n                        ...(styles?.graphObjectValues || {}),\n                      }}\n                      className={cn('graph-value text-sm', classNames?.graphObjectValues)}\n                      dy='0.33em'\n                      variants={{\n                        initial: {\n                          x: (x(`${d.id}`) as number) + x.bandwidth() / 2,\n                          y: (y(d.start) + y(d.end)) / 2,\n                          opacity: 0,\n                          fill:\n                            data.filter((el) => el.color).length === 0\n                              ? getTextColorBasedOnBgColor(barColor[0])\n                              : !d.color\n                                ? getTextColorBasedOnBgColor(Colors.gray)\n                                : getTextColorBasedOnBgColor(\n                                    barColor[colorDomain.indexOf(d.color)],\n                                  ),\n                        },\n                        whileInView: {\n                          x: (x(`${d.id}`) as number) + x.bandwidth() / 2,\n                          y: (y(d.start) + y(d.end)) / 2,\n                          fill:\n                            data.filter((el) => el.color).length === 0\n                              ? getTextColorBasedOnBgColor(barColor[0])\n                              : !d.color\n                                ? getTextColorBasedOnBgColor(Colors.gray)\n                                : getTextColorBasedOnBgColor(\n                                    barColor[colorDomain.indexOf(d.color)],\n                                  ),\n                          opacity: 1,\n                          transition: { duration: animate.duration },\n                        },\n                      }}\n                      initial='initial'\n                      animate={isInView ? 'whileInView' : 'initial'}\n                      exit={{\n                        opacity: 0,\n                        transition: { duration: animate.duration },\n                      }}\n                    >\n                      {numberFormattingFunction(\n                        d.size ? Math.abs(d.size) : d.size,\n                        naLabel,\n                        precision,\n                        prefix,\n                        suffix,\n                        locale,\n                        padZeros,\n                      )}\n                    </motion.text>\n                  ) : null}\n                </motion.g>\n              ) : null,\n            )}\n            {refValues?.map((el) => (\n              <RefLineY\n                key={el.text}\n                text={el.text}\n                color={el.color}\n                y={y(el.value as number)}\n                x1={0 - leftMargin}\n                x2={graphWidth + margin.right}\n                classNames={el.classNames}\n                styles={el.styles}\n                animate={animate}\n                isInView={isInView}\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  NumberFormatOptions,\n  ReferenceDataType,\n  SourcesDataType,\n  StyleObject,\n  WaterfallChartDataType,\n} from '@/Types';\nimport { checkIfNullOrUndefined } from '@/Utils';\nimport { uniqBy } from '@/Utils/uniqBy';\nimport { Graph } from './Graph';\n\ninterface Props {\n  // Data\n  /** Array of data objects */\n  data: WaterfallChartDataType[];\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 bars */\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  /** Padding between bars */\n  barPadding?: number;\n  /** Maximum thickness of bars */\n  maxBarThickness?: number;\n  /** Minimum thickness of bars */\n  minBarThickness?: number;\n  /** Maximum number of bars shown in the graph */\n  maxNumberOfBars?: number;\n\n  // Values and Ticks\n  /** Maximum value for the chart */\n  maxValue?: number;\n  /** Minimum value for the chart */\n  minValue?: number;\n  /** Truncate labels by specified length */\n  truncateBy?: number;\n  /** Reference values for comparison */\n  refValues?: ReferenceDataType[];\n  /** Number of ticks on the axis */\n  noOfTicks?: number;\n\n  // Graph Parameters\n  /** Toggle visibility of labels */\n  showLabels?: boolean;\n  /** Toggle visibility of values */\n  showValues?: boolean;\n  /** Custom order for labels */\n  labelOrder?: string[];\n  /** Defines how “NA” values should be displayed/labelled in the graph */\n  naLabel?: string;\n  /** Toggle visibility of axis ticks */\n  showTicks?: boolean;\n  /** Toggle visibility of axis line for the  main axis */\n  hideAxisLine?: boolean;\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  /** Title for the bar axis */\n  barAxisTitle?: string;\n  /** Toggles if data point which are undefined or has value null are filtered out.  */\n  filterNA?: boolean;\n  /** Toggles if the graph animates in when loaded.  */\n  animate?: boolean | AnimateDataType;\n  /** Configuration options for controlling number formatting, localization, prefixes/suffixes, precision, and zero padding. */\n  numberDisplayOptions?: NumberFormatOptions;\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\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 WaterfallChart(props: Props) {\n  const {\n    data,\n    graphTitle,\n    colors,\n    sources,\n    graphDescription,\n    barPadding = 0.25,\n    showValues = true,\n    showTicks = true,\n    truncateBy = 999,\n    height,\n    width,\n    footNote,\n    colorDomain,\n    colorLegendTitle,\n    highlightedDataPoints,\n    padding,\n    backgroundColor = false,\n    topMargin,\n    bottomMargin,\n    leftMargin,\n    rightMargin,\n    showLabels = true,\n    relativeHeight,\n    tooltip,\n    onSeriesMouseOver,\n    refValues,\n    showColorScale = true,\n    graphID,\n    maxValue,\n    minValue,\n    onSeriesMouseClick,\n    graphDownload = false,\n    dataDownload = false,\n    labelOrder,\n    language = 'en',\n    showNAColor = true,\n    minHeight = 0,\n    theme = 'light',\n    maxBarThickness,\n    maxNumberOfBars,\n    minBarThickness,\n    ariaLabel,\n    detailsOnClick,\n    barAxisTitle,\n    noOfTicks = 5,\n    styles,\n    classNames,\n    filterNA = true,\n    animate = false,\n    dimmedOpacity = 0.3,\n    customLayers = [],\n    naLabel = 'NA',\n    hideAxisLine = false,\n    numberDisplayOptions,\n  } = props;\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={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 | number)[])}\n          setSelectedColor={setSelectedColor}\n          showNAColor={showNAColor}\n          className={classNames?.colorLegend}\n        />\n      ) : null}\n      <GraphArea ref={graphDiv}>\n        {data.filter((d) => (filterNA ? !checkIfNullOrUndefined(d.size) : d)).length === 0 && (\n          <EmptyState />\n        )}\n        {svgWidth &&\n        svgHeight &&\n        data.filter((d) => (filterNA ? !checkIfNullOrUndefined(d.size) : d)).length > 0 ? (\n          <Graph\n            hideAxisLine={hideAxisLine}\n            data={data\n              .filter((d) => (filterNA ? !checkIfNullOrUndefined(d.size) : d))\n              .filter((_d, i) => (maxNumberOfBars ? i < maxNumberOfBars : true))}\n            barColor={\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            colorDomain={\n              data.filter((el) => el.color).length === 0\n                ? []\n                : colorDomain || (uniqBy(data, 'color', true) as string[])\n            }\n            selectedColor={selectedColor}\n            width={svgWidth}\n            height={svgHeight}\n            barPadding={barPadding}\n            showValues={showValues}\n            showTicks={showTicks}\n            leftMargin={leftMargin}\n            rightMargin={rightMargin}\n            topMargin={topMargin}\n            bottomMargin={bottomMargin}\n            truncateBy={truncateBy}\n            showLabels={showLabels}\n            tooltip={tooltip}\n            onSeriesMouseOver={onSeriesMouseOver}\n            refValues={refValues}\n            maxValue={maxValue}\n            minValue={minValue}\n            highlightedDataPoints={highlightedDataPoints}\n            onSeriesMouseClick={onSeriesMouseClick}\n            labelOrder={labelOrder}\n            rtl={language === 'he' || language === 'ar'}\n            maxBarThickness={maxBarThickness}\n            minBarThickness={minBarThickness}\n            detailsOnClick={detailsOnClick}\n            barAxisTitle={barAxisTitle}\n            noOfTicks={noOfTicks}\n            classNames={classNames}\n            styles={styles}\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            naLabel={naLabel}\n            locale={numberDisplayOptions?.locale || 'en'}\n            padZeros={numberDisplayOptions?.padZeros || false}\n            suffix={numberDisplayOptions?.suffix || ''}\n            prefix={numberDisplayOptions?.prefix || ''}\n            precision={numberDisplayOptions?.precision ?? 2}\n          />\n        ) : null}\n      </GraphArea>\n      {sources || footNote ? (\n        <GraphFooter\n          sources={sources}\n          footNote={footNote}\n          width={width}\n          styles={{ footnote: styles?.footnote, source: styles?.source }}\n          classNames={{\n            footnote: classNames?.footnote,\n            source: classNames?.source,\n          }}\n        />\n      ) : null}\n    </GraphContainer>\n  );\n}\n"],"mappings":"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"}

package/dist/WaterfallChart-cJ5pGsDu.cjs

@@ -0,0 +1,2 @@
+const e=require(`./chunk-gGpyby2o.cjs`),t=require(`./jsx-runtime-Cd1vCQjn.cjs`),n=require(`./Colors.cjs`),r=require(`./GraphFooter.cjs`),ee=require(`./GraphHeader.cjs`),i=require(`./checkIfNullOrUndefined-DYvc3fz_.cjs`),te=require(`./uniqBy-DTdieuuc.cjs`),a=require(`./GraphContainer-7xAPK4Tb.cjs`),o=require(`./ColorLegendWithMouseOver.cjs`),s=require(`./EmptyState-Bq7ZJmZB.cjs`),c=require(`./linear-B93YyHf_.cjs`),l=require(`./band-BWpW41la.cjs`),u=require(`./fast-deep-equal-DN3ilkVq.cjs`),d=require(`./proxy-DaRMphjR.cjs`),ne=require(`./AnimatePresence-CapU-Sxd.cjs`),re=require(`./use-in-view-C4EPQfwM.cjs`),ie=require(`./Axis-BbfI4T5K.cjs`),ae=require(`./AxisTitle-Co2DmqOy.cjs`),oe=require(`./XAxesLabels-BvzqZwll.cjs`),f=require(`./numberFormattingFunction-Caf5NyIo.cjs`),p=require(`./YTicksAndGridLines-CRW_R845.cjs`),m=require(`./DetailsModal-CtGqGcX9.cjs`),se=require(`./ReferenceLine-Dltt-xtO.cjs`),ce=require(`./Tooltip-CO_iOj_w.cjs`),h=require(`./getTextColorBasedOnBgColor-B0B-azeJ.cjs`);let le=require(`@undp/design-system-react/cn`),g=require(`react`);var ue=e.a(u.t(),1),_=t.t();function de(e){let t=0,n=0,r=0;for(let ee of e)t+=ee||0,t>n&&(n=t),t<r&&(r=t);return{max:n,min:r}}function v(e){let{leftMargin:t=20,rightMargin:r=20,topMargin:ee=20,bottomMargin:te=25,data:a,width:o,height:s,barColor:u,suffix:v,prefix:y,barPadding:fe,showLabels:pe,showValues:me,showTicks:b,colorDomain:x,truncateBy:he,tooltip:ge,onSeriesMouseOver:S,refValues:_e,selectedColor:C,maxValue:ve,minValue:w,highlightedDataPoints:T,onSeriesMouseClick:E,labelOrder:D,maxBarThickness:O,minBarThickness:k,detailsOnClick:A,barAxisTitle:j,noOfTicks:M,styles:N,classNames:P,dimmedOpacity:F,animate:I,precision:L,customLayers:R,naLabel:z,hideAxisLine:B,locale:V,padZeros:H}=e,ye=(0,g.useRef)(null),U=re.t(ye,{once:I.once,amount:I.amount}),W={top:ee,bottom:te,left:j?t+30:t,right:r},{max:G,min:be}=de(a.map(e=>e.size)),xe=i.t(ve)?G:ve,K=i.t(w)?be:w,[Se,q]=(0,g.useState)(void 0),[J,Y]=(0,g.useState)(void 0),[X,Ce]=(0,g.useState)(void 0),[we,Te]=(0,g.useState)(void 0),Z=o-W.left-W.right,Ee=s-W.top-W.bottom,De=(0,g.useMemo)(()=>{let e=new Set,t=a.map((t,n)=>{let r=D?`${t.label}`:`${n}`;return e.add(r),{...t,id:r}}),n=D?D.filter(t=>!e.has(t)):[];return[...t,...n.map(e=>({id:e,label:e,color:null,size:null}))]},[a,D]),Oe=(0,g.useMemo)(()=>D??De.map(e=>`${e.id}`),[D,De]),Q=c.t().domain([K,xe]).range([Ee,0]).nice(),$=l.t().domain(Oe).range([0,k?Math.max(Z,k*Oe.length):O?Math.min(Z,O*Oe.length):Z]).paddingInner(fe),ke=Q.ticks(M),Ae=0,je=De.map(e=>{let t=Ae;return Ae+=e.size||0,{...e,start:t,end:Ae}});return(0,_.jsxs)(_.Fragment,{children:[(0,_.jsx)(d.t.svg,{ref:ye,width:`${o}px`,height:`${s}px`,viewBox:`0 0 ${o} ${s}`,direction:`ltr`,children:(0,_.jsxs)(`g`,{transform:`translate(${W.left},${W.top})`,children:[(0,_.jsx)(ie.t,{y1:Q(K<0?0:K),y2:Q(K<0?0:K),x1:0-t,x2:Z+W.right,hideAxisLine:B,label:b?f.t(K<0?0:K,void 0,L,y,v,V,H):void 0,labelPos:{x:0-t,dx:0,dy:xe<0?`1em`:-5,y:Q(K<0?0:K)},classNames:{axis:P?.xAxis?.axis,label:P?.yAxis?.labels},styles:{axis:N?.xAxis?.axis,label:N?.yAxis?.labels}}),b?(0,_.jsx)(p.t,{values:ke.filter(e=>e!==0),y:ke.filter(e=>e!==0).map(e=>Q(e)),x1:0-t,x2:Z+W.right,styles:{gridLines:N?.yAxis?.gridLines,labels:N?.yAxis?.labels},classNames:{gridLines:P?.yAxis?.gridLines,labels:P?.yAxis?.labels},suffix:v,prefix:y,labelType:`secondary`,showGridLines:!0,labelPos:`vertical`,precision:L,locale:V,padZeros:H}):null,(0,_.jsx)(ae.t,{x:0-t-15,y:Ee/2,style:N?.yAxis?.title,className:P?.yAxis?.title,text:j,rotate90:!0}),R.filter(e=>e.position===`before`).map(e=>e.layer),(0,_.jsxs)(ne.t,{children:[je.map((e,t)=>i.t($(e.id))?null:(0,_.jsxs)(d.t.g,{className:`undp-viz-g-with-hover`,initial:`initial`,animate:U?`whileInView`:`initial`,variants:{initial:{opacity:C?e.color&&u[x.indexOf(e.color)]===C?1:F:T&&T.indexOf(e.label)===-1?F:.85},whileInView:{opacity:C?e.color&&u[x.indexOf(e.color)]===C?1:F:T&&T.indexOf(e.label)===-1?F:.85,transition:{duration:I.duration}}},exit:{opacity:0,transition:{duration:I.duration}},onMouseEnter:t=>{q(e),Te(t.clientY),Ce(t.clientX),S?.(e)},onClick:()=>{(E||A)&&((0,ue.default)(J,e)?(Y(void 0),E?.(void 0)):(Y(e),E?.(e)))},onMouseMove:t=>{q(e),Te(t.clientY),Ce(t.clientX)},onMouseLeave:()=>{q(void 0),Ce(void 0),Te(void 0),S?.(void 0)},children:[e.size?(0,_.jsx)(d.t.rect,{width:$.bandwidth(),initial:`initial`,animate:U?`whileInView`:`initial`,variants:{initial:{height:0,x:$(`${e.id}`),y:Q(e.start),fill:a.filter(e=>e.color).length===0?u[0]:e.color?u[x.indexOf(e.color)]:n.Colors.gray},whileInView:{height:Math.abs(Q(e.start)-Q(e.end)),y:Q(Math.max(e.start,e.end)),x:$(`${e.id}`),fill:a.filter(e=>e.color).length===0?u[0]:e.color?u[x.indexOf(e.color)]:n.Colors.gray,transition:{duration:I.duration}}},exit:{height:0,y:Q(e.start),transition:{duration:I.duration}}}):null,pe?(0,_.jsx)(oe.t,{value:`${e.label}`.length<he?`${e.label}`:`${`${e.label}`.substring(0,he)}...`,y:Q(0)+5,x:$(`${e.id}`),width:$.bandwidth(),height:W.bottom,style:N?.xAxis?.labels,className:P?.xAxis?.labels,alignment:`top`,animate:I,isInView:U}):null,me&&Math.abs(Q(e.start)-Q(e.end))>16?(0,_.jsx)(d.t.text,{style:{textAnchor:`middle`,...N?.graphObjectValues||{}},className:(0,le.cn)(`graph-value text-sm`,P?.graphObjectValues),dy:`0.33em`,variants:{initial:{x:$(`${e.id}`)+$.bandwidth()/2,y:(Q(e.start)+Q(e.end))/2,opacity:0,fill:a.filter(e=>e.color).length===0?h.t(u[0]):e.color?h.t(u[x.indexOf(e.color)]):h.t(n.Colors.gray)},whileInView:{x:$(`${e.id}`)+$.bandwidth()/2,y:(Q(e.start)+Q(e.end))/2,fill:a.filter(e=>e.color).length===0?h.t(u[0]):e.color?h.t(u[x.indexOf(e.color)]):h.t(n.Colors.gray),opacity:1,transition:{duration:I.duration}}},initial:`initial`,animate:U?`whileInView`:`initial`,exit:{opacity:0,transition:{duration:I.duration}},children:f.t(e.size?Math.abs(e.size):e.size,z,L,y,v,V,H)}):null]},e.label)),_e?.map(e=>(0,_.jsx)(se.n,{text:e.text,color:e.color,y:Q(e.value),x1:0-t,x2:Z+W.right,classNames:e.classNames,styles:e.styles,animate:I,isInView:U},e.text))]}),R.filter(e=>e.position===`after`).map(e=>e.layer)]})}),Se&&ge&&X&&we?(0,_.jsx)(ce.t,{data:Se,body:ge,xPos:X,yPos:we,backgroundStyle:N?.tooltip,className:P?.tooltip}):null,A&&J!==void 0?(0,_.jsx)(m.t,{body:A,data:J,setData:Y,className:P?.modal}):null]})}function y(e){let{data:t,graphTitle:c,colors:l,sources:u,graphDescription:d,barPadding:ne=.25,showValues:re=!0,showTicks:ie=!0,truncateBy:ae=999,height:oe,width:f,footNote:p,colorDomain:m,colorLegendTitle:se,highlightedDataPoints:ce,padding:h,backgroundColor:le=!1,topMargin:ue,bottomMargin:de,leftMargin:y,rightMargin:fe,showLabels:pe=!0,relativeHeight:me,tooltip:b,onSeriesMouseOver:x,refValues:he,showColorScale:ge=!0,graphID:S,maxValue:_e,minValue:C,onSeriesMouseClick:ve,graphDownload:w=!1,dataDownload:T=!1,labelOrder:E,language:D=`en`,showNAColor:O=!0,minHeight:k=0,theme:A=`light`,maxBarThickness:j,maxNumberOfBars:M,minBarThickness:N,ariaLabel:P,detailsOnClick:F,barAxisTitle:I,noOfTicks:L=5,styles:R,classNames:z,filterNA:B=!0,animate:V=!1,dimmedOpacity:H=.3,customLayers:ye=[],naLabel:U=`NA`,hideAxisLine:W=!1,numberDisplayOptions:G}=e,[be,xe]=(0,g.useState)(0),[K,Se]=(0,g.useState)(0),[q,J]=(0,g.useState)(void 0),Y=(0,g.useRef)(null),X=(0,g.useRef)(null);return(0,g.useEffect)(()=>{let e=new ResizeObserver(e=>{xe(e[0].target.clientWidth||620),Se(e[0].target.clientHeight||480)});return Y.current&&e.observe(Y.current),()=>e.disconnect()},[]),(0,_.jsxs)(a.n,{className:z?.graphContainer,style:R?.graphContainer,id:S,ref:X,"aria-label":P,backgroundColor:le,theme:A,language:D,minHeight:k,width:f,height:oe,relativeHeight:me,padding:h,children:[c||d||w||T?(0,_.jsx)(ee.GraphHeader,{styles:{title:R?.title,description:R?.description},classNames:{title:z?.title,description:z?.description},graphTitle:c,graphDescription:d,width:f,graphDownload:w?X:void 0,dataDownload:T?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,ge&&t.filter(e=>e.color).length!==0&&t.length>0?(0,_.jsx)(o.ColorLegendWithMouseOver,{width:f,colorLegendTitle:se,colors:l||n.Colors[A].categoricalColors.colors,colorDomain:m||te.t(t,`color`,!0),setSelectedColor:J,showNAColor:O,className:z?.colorLegend}):null,(0,_.jsxs)(a.t,{ref:Y,children:[t.filter(e=>B?!i.t(e.size):e).length===0&&(0,_.jsx)(s.t,{}),be&&K&&t.filter(e=>B?!i.t(e.size):e).length>0?(0,_.jsx)(v,{hideAxisLine:W,data:t.filter(e=>B?!i.t(e.size):e).filter((e,t)=>M?t<M:!0),barColor:t.filter(e=>e.color).length===0?l?[l]:[n.Colors.primaryColors[`blue-600`]]:l||n.Colors[A].categoricalColors.colors,colorDomain:t.filter(e=>e.color).length===0?[]:m||te.t(t,`color`,!0),selectedColor:q,width:be,height:K,barPadding:ne,showValues:re,showTicks:ie,leftMargin:y,rightMargin:fe,topMargin:ue,bottomMargin:de,truncateBy:ae,showLabels:pe,tooltip:b,onSeriesMouseOver:x,refValues:he,maxValue:_e,minValue:C,highlightedDataPoints:ce,onSeriesMouseClick:ve,labelOrder:E,rtl:D===`he`||D===`ar`,maxBarThickness:j,minBarThickness:N,detailsOnClick:F,barAxisTitle:I,noOfTicks:L,classNames:z,styles:R,animate:V===!0?{duration:.5,once:!0,amount:.5}:V||{duration:0,once:!0,amount:0},dimmedOpacity:H,customLayers:ye,naLabel:U,locale:G?.locale||`en`,padZeros:G?.padZeros||!1,suffix:G?.suffix||``,prefix:G?.prefix||``,precision:G?.precision??2}):null]}),u||p?(0,_.jsx)(r.GraphFooter,{sources:u,footNote:p,width:f,styles:{footnote:R?.footnote,source:R?.source},classNames:{footnote:z?.footnote,source:z?.source}}):null]})}Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return y}});
+//# sourceMappingURL=WaterfallChart-cJ5pGsDu.cjs.map