@undp/data-viz 2.6.0 → 2.6.1

package/dist/ParetoChart-BB89ZG8n.js

@@ -0,0 +1,467 @@
+import { o as e } from "./chunk-foFoljWS.js";
+import { t } from "./jsx-runtime-C76bEyh7.js";
+import { Colors as n } from "./Colors.js";
+import { ColorLegend as r } from "./ColorLegend.js";
+import { GraphFooter as i } from "./GraphFooter.js";
+import { GraphHeader as a } from "./GraphHeader.js";
+import { t as o } from "./checkIfNullOrUndefined-C5gqSAtF.js";
+import { n as s, t as c } from "./GraphContainer-DgEB1AVN.js";
+import { t as ee } from "./EmptyState-DBmT1Adf.js";
+import { t as l } from "./linear-BkosG4OK.js";
+import { t as te } from "./band-XivI9IHG.js";
+import { t as ne } from "./fast-deep-equal--80N92KJ.js";
+import { t as u } from "./proxy-BiRrIImK.js";
+import { t as re } from "./AnimatePresence-CE6xBsMZ.js";
+import { t as ie } from "./use-in-view-CjlKdln1.js";
+import { t as d } from "./Axis-B3ai1eeP.js";
+import { t as f } from "./AxisTitle-DqJw_G-f.js";
+import { t as ae } from "./XAxesLabels-DIs04SK7.js";
+import { t as p } from "./numberFormattingFunction-Cha8dhHc.js";
+import { t as oe } from "./DetailsModal-DxUowfkg.js";
+import { t as se } from "./Tooltip-Y6uTGwkF.js";
+import { i as ce, t as le } from "./line-6wslDyQb.js";
+import { i as ue, n as de, r as fe, t as pe } from "./step-Bxl4gFpO.js";
+import { cn as m } from "@undp/design-system-react/cn";
+import { useEffect as me, useRef as h, useState as g } from "react";
+//#region src/Components/Graphs/ParetoChart/Graph.tsx
+var _ = /* @__PURE__ */ e(ne(), 1), v = t();
+function he(e) {
+	let { data: t, width: n, height: r, barColor: i, lineColor: a, axisTitles: s, sameAxes: c, rightMargin: ee, leftMargin: ne, topMargin: me, bottomMargin: he, tooltip: y, showValues: b, onSeriesMouseOver: x, barPadding: ge, truncateBy: S, showLabels: _e, onSeriesMouseClick: C, resetSelectionOnDoubleClick: w, detailsOnClick: T, noOfTicks: E, curveType: D, styles: O, classNames: k, animate: A, customLayers: j, naLabel: M, showAxisLabels: N, lineNumberDisplayOptions: P, barNumberDisplayOptions: F } = e, I = h(null), L = ie(I, {
+		once: A.once,
+		amount: A.amount
+	}), ve = D === "linear" ? ce : D === "step" ? fe : D === "stepAfter" ? pe : D === "stepBefore" ? de : ue, [R, z] = g(void 0), [B, V] = g(void 0), [ye, H] = g(void 0), [be, U] = g(void 0), W = {
+		top: me,
+		bottom: he,
+		left: ne + 50,
+		right: ee + 65
+	}, G = n - W.left - W.right, K = r - W.top - W.bottom, q = t.map((e, t) => ({
+		...e,
+		id: `${t}`
+	})), J = te().domain(q.map((e) => `${e.id}`)).range([0, G]).paddingInner(ge), xe = Math.min(...q.map((e) => e.bar).filter((e) => e != null)) === Infinity || Math.min(...q.map((e) => e.bar).filter((e) => e != null)) > 0 ? 0 : Math.min(...q.map((e) => e.bar).filter((e) => e != null)), Se = Math.min(...q.map((e) => e.line).filter((e) => e != null)) === Infinity || Math.min(...q.map((e) => e.line).filter((e) => e != null)) > 0 ? 0 : Math.min(...q.map((e) => e.line).filter((e) => e != null)), Y = Math.max(...q.map((e) => e.bar).filter((e) => e != null)) === Infinity ? 0 : Math.max(...q.map((e) => e.bar).filter((e) => e != null)), X = Math.max(...q.map((e) => e.line).filter((e) => e != null)) === Infinity ? 0 : Math.max(...q.map((e) => e.line).filter((e) => e != null)), Ce = xe < Se ? xe : Se, Z = Y > X ? Y : X, Q = l().domain([c ? Ce : xe, c ? Z > 0 ? Z : 0 : Y > 0 ? Y : 0]).range([K, 0]).nice(), $ = l().domain([c ? Ce : Se, c ? Z > 0 ? Z : 0 : X > 0 ? X : 0]).range([K, 0]).nice(), we = le().defined((e) => !o(e.line)).x((e) => J(`${e.id}`) + J.bandwidth() / 2).y((e) => $(e.line)).curve(ve), Te = Q.ticks(E), Ee = $.ticks(E);
+	return /* @__PURE__ */ (0, v.jsxs)(v.Fragment, { children: [
+		/* @__PURE__ */ (0, v.jsx)(u.svg, {
+			width: `${n}px`,
+			height: `${r}px`,
+			viewBox: `0 0 ${n} ${r}`,
+			direction: "ltr",
+			ref: I,
+			children: /* @__PURE__ */ (0, v.jsxs)("g", {
+				transform: `translate(${W.left},${W.top})`,
+				children: [
+					/* @__PURE__ */ (0, v.jsxs)("g", { children: [
+						Te.map((e, t) => /* @__PURE__ */ (0, v.jsxs)("g", { children: [/* @__PURE__ */ (0, v.jsx)("line", {
+							y1: Q(e),
+							y2: Q(e),
+							x1: -15,
+							x2: -20,
+							style: {
+								stroke: i,
+								strokeWidth: 1,
+								...O?.yAxis?.gridLines || {}
+							},
+							className: k?.yAxis?.gridLines
+						}), /* @__PURE__ */ (0, v.jsx)("text", {
+							x: -25,
+							y: Q(e),
+							dy: "0.33em",
+							className: m("text-xs", k?.yAxis?.labels),
+							style: {
+								textAnchor: "end",
+								fill: i,
+								...O?.yAxis?.labels || {}
+							},
+							children: p(e, M, F?.precision ?? 2, F?.prefix, F?.suffix, F?.locale, F?.padZeros)
+						})] }, t)),
+						/* @__PURE__ */ (0, v.jsx)(d, {
+							y1: 0,
+							y2: K,
+							x1: -15,
+							x2: -15,
+							classNames: { axis: k?.xAxis?.axis },
+							styles: { axis: {
+								stroke: i,
+								...O?.xAxis?.axis || {}
+							} }
+						}),
+						N ? /* @__PURE__ */ (0, v.jsx)(f, {
+							x: 10 - W.left,
+							y: K / 2,
+							style: {
+								fill: i,
+								...O?.yAxis?.title || {}
+							},
+							className: k?.yAxis?.title,
+							text: s[0].length > 100 ? `${s[0].substring(0, 100)}...` : s[0],
+							rotate90: !0
+						}) : null
+					] }),
+					/* @__PURE__ */ (0, v.jsxs)("g", { children: [
+						Ee.map((e, t) => /* @__PURE__ */ (0, v.jsxs)("g", { children: [/* @__PURE__ */ (0, v.jsx)("line", {
+							y1: $(e),
+							y2: $(e),
+							x1: G + 15,
+							x2: G + 20,
+							style: {
+								stroke: a,
+								strokeWidth: 1,
+								...O?.yAxis?.gridLines || {}
+							},
+							className: k?.yAxis?.gridLines
+						}), /* @__PURE__ */ (0, v.jsx)("text", {
+							x: G + 25,
+							y: $(e),
+							dy: "0.33em",
+							dx: -2,
+							style: {
+								textAnchor: "start",
+								fill: a,
+								...O?.yAxis?.labels || {}
+							},
+							className: m("text-xs", k?.yAxis?.labels),
+							children: p(e, M, P?.precision ?? 2, P?.prefix, P?.suffix, P?.locale, P?.padZeros)
+						})] }, t)),
+						/* @__PURE__ */ (0, v.jsx)(d, {
+							y1: 0,
+							y2: K,
+							x1: G + 15,
+							x2: G + 15,
+							classNames: { axis: k?.xAxis?.axis },
+							styles: { axis: {
+								stroke: a,
+								...O?.xAxis?.axis || {}
+							} }
+						}),
+						N ? /* @__PURE__ */ (0, v.jsx)(f, {
+							x: G + W.right - 15,
+							y: K / 2,
+							style: {
+								fill: a,
+								...O?.yAxis?.title || {}
+							},
+							className: k?.yAxis?.title,
+							text: s[1].length > 100 ? `${s[1].substring(0, 100)}...` : s[1],
+							rotate90: !0
+						}) : null
+					] }),
+					/* @__PURE__ */ (0, v.jsx)(d, {
+						y1: c ? Q(0) : K,
+						y2: c ? Q(0) : K,
+						x1: -15,
+						x2: G + 15,
+						classNames: { axis: k?.xAxis?.axis },
+						styles: { axis: O?.xAxis?.axis }
+					}),
+					j.filter((e) => e.position === "before").map((e) => e.layer),
+					/* @__PURE__ */ (0, v.jsxs)(re, { children: [
+						q.map((e, t) => /* @__PURE__ */ (0, v.jsxs)(u.g, {
+							className: "undp-viz-g-with-hover",
+							opacity: .85,
+							onMouseEnter: (t) => {
+								z(e), U(t.clientY), H(t.clientX), x?.(e);
+							},
+							onClick: () => {
+								(C || T) && ((0, _.default)(B, e) && w ? (V(void 0), C?.(void 0)) : (V(e), C?.(e)));
+							},
+							onMouseMove: (t) => {
+								z(e), U(t.clientY), H(t.clientX);
+							},
+							onMouseLeave: () => {
+								z(void 0), H(void 0), U(void 0), x?.(void 0);
+							},
+							children: [
+								/* @__PURE__ */ (0, v.jsx)(u.rect, {
+									variants: {
+										initial: {
+											attrY: Q(0),
+											height: 0,
+											opacity: 1,
+											fill: i
+										},
+										whileInView: {
+											attrY: e.bar ? e.bar > 0 ? Q(e.bar) : Q(0) : 0,
+											height: e.bar ? Math.abs(Q(e.bar) - Q(0)) : 0,
+											opacity: 1,
+											fill: i,
+											transition: { duration: A.duration }
+										}
+									},
+									initial: "initial",
+									animate: L ? "whileInView" : "initial",
+									exit: {
+										attrY: Q(0),
+										height: 0,
+										opacity: 0,
+										transition: { duration: A.duration }
+									},
+									x: J(`${t}`),
+									width: J.bandwidth()
+								}),
+								b && !o(e.bar) ? /* @__PURE__ */ (0, v.jsx)(u.text, {
+									x: J(`${e.id}`) + J.bandwidth() / 2,
+									exit: {
+										attrY: Q(0),
+										opacity: 0,
+										transition: { duration: A.duration }
+									},
+									variants: {
+										initial: {
+											attrY: Q(0),
+											opacity: 0,
+											fill: i
+										},
+										whileInView: {
+											attrY: Q(e.bar || 0),
+											opacity: 1,
+											fill: i,
+											transition: { duration: A.duration }
+										}
+									},
+									initial: "initial",
+									animate: L ? "whileInView" : "initial",
+									style: {
+										textAnchor: "middle",
+										...O?.graphObjectValues || {}
+									},
+									className: m("graph-value text-sm", k?.graphObjectValues),
+									dy: e.bar ? e.bar >= 0 ? "-5px" : "1em" : "-5px",
+									children: p(e.bar, M, F?.precision ?? 2, F?.prefix, F?.suffix, F?.locale, F?.padZeros)
+								}) : null,
+								_e ? /* @__PURE__ */ (0, v.jsx)(ae, {
+									value: `${e.label}`.length < S ? `${e.label}` : `${`${e.label}`.substring(0, S)}...`,
+									y: K + 5,
+									x: J(`${e.id}`),
+									width: J.bandwidth(),
+									height: W.bottom,
+									style: O?.xAxis?.labels,
+									className: k?.xAxis?.labels,
+									alignment: "top",
+									animate: A,
+									isInView: L
+								}) : null
+							]
+						}, e.label)),
+						/* @__PURE__ */ (0, v.jsx)(u.path, {
+							exit: {
+								opacity: 0,
+								transition: { duration: A.duration }
+							},
+							variants: {
+								initial: {
+									d: we(q.map((e) => ({
+										...e,
+										line: 0
+									}))),
+									opacity: 0,
+									stroke: a
+								},
+								whileInView: {
+									d: we(q),
+									opacity: 1,
+									stroke: a,
+									transition: { duration: A.duration }
+								}
+							},
+							initial: "initial",
+							animate: L ? "whileInView" : "initial",
+							style: {
+								fill: "none",
+								strokeWidth: 2
+							}
+						}),
+						q.map((e) => /* @__PURE__ */ (0, v.jsx)("g", { children: o(e.line) ? null : /* @__PURE__ */ (0, v.jsxs)("g", {
+							onMouseEnter: (t) => {
+								z(e), U(t.clientY), H(t.clientX), x?.(e);
+							},
+							onClick: () => {
+								(C || T) && ((0, _.default)(B, e) && w ? (V(void 0), C?.(void 0)) : (V(e), C?.(e)));
+							},
+							onMouseMove: (t) => {
+								z(e), U(t.clientY), H(t.clientX);
+							},
+							onMouseLeave: () => {
+								z(void 0), H(void 0), U(void 0), x?.(void 0);
+							},
+							children: [/* @__PURE__ */ (0, v.jsx)(u.circle, {
+								exit: {
+									cy: $(0),
+									opacity: 0,
+									transition: { duration: A.duration }
+								},
+								variants: {
+									initial: {
+										cy: $(0),
+										opacity: 0,
+										fill: a
+									},
+									whileInView: {
+										cy: $(e.line),
+										opacity: 1,
+										fill: a,
+										transition: { duration: A.duration }
+									}
+								},
+								initial: "initial",
+								animate: L ? "whileInView" : "initial",
+								cx: J(e.id) + J.bandwidth() / 2,
+								r: G / q.length < 5 ? 0 : G / q.length < 20 ? 2 : 4
+							}), b ? /* @__PURE__ */ (0, v.jsx)(u.text, {
+								x: J(`${e.id}`) + J.bandwidth() / 2,
+								exit: {
+									y: $(0),
+									opacity: 0,
+									transition: { duration: A.duration }
+								},
+								style: {
+									textAnchor: "middle",
+									...O?.graphObjectValues || {}
+								},
+								variants: {
+									initial: {
+										y: $(0),
+										opacity: 0,
+										fill: a
+									},
+									whileInView: {
+										y: $(e.line),
+										opacity: 1,
+										fill: a,
+										transition: { duration: A.duration }
+									}
+								},
+								initial: "initial",
+								animate: L ? "whileInView" : "initial",
+								className: m("graph-value text-sm", k?.graphObjectValues),
+								dy: "-5px",
+								children: p(e.line, M, P?.precision ?? 2, P?.prefix, P?.suffix, P?.locale, P?.padZeros)
+							}) : null]
+						}) }, e.label))
+					] }),
+					j.filter((e) => e.position === "after").map((e) => e.layer)
+				]
+			})
+		}),
+		R && y && ye && be ? /* @__PURE__ */ (0, v.jsx)(se, {
+			data: R,
+			body: y,
+			xPos: ye,
+			yPos: be,
+			backgroundStyle: O?.tooltip,
+			className: k?.tooltip
+		}) : null,
+		T && B !== void 0 ? /* @__PURE__ */ (0, v.jsx)(oe, {
+			body: T,
+			data: B,
+			setData: V,
+			className: k?.modal
+		}) : null
+	] });
+}
+//#endregion
+//#region src/Components/Graphs/ParetoChart/index.tsx
+function y(e) {
+	let { data: t, graphTitle: o, sources: l, graphDescription: te, height: ne, width: u, footNote: re, padding: ie, lineColor: d = n.light.categoricalColors.colors[1], barColor: f = n.light.categoricalColors.colors[0], sameAxes: ae = !1, backgroundColor: p = !1, leftMargin: oe = 80, rightMargin: se = 80, topMargin: ce = 20, bottomMargin: le = 25, lineAxisTitle: ue = "Line chart", barAxisTitle: de = "Bar graph", tooltip: fe, relativeHeight: pe, onSeriesMouseOver: m, graphID: _, graphDownload: y = !1, dataDownload: b = !1, barPadding: x = .25, truncateBy: ge = 999, showLabels: S = !0, onSeriesMouseClick: _e, language: C = "en", colorLegendTitle: w, minHeight: T = 0, theme: E = "light", ariaLabel: D, resetSelectionOnDoubleClick: O = !0, detailsOnClick: k, showValues: A = !0, noOfTicks: j = 5, curveType: M = "curve", styles: N, classNames: P, animate: F = !1, customLayers: I = [], naLabel: L = "NA", showColorScale: ve = !0, showAxisLabels: R = !0, lineNumberDisplayOptions: z, barNumberDisplayOptions: B } = e, [V, ye] = g(0), [H, be] = g(0), U = h(null), W = h(null);
+	return me(() => {
+		let e = new ResizeObserver((e) => {
+			ye(e[0].target.clientWidth || 620), be(e[0].target.clientHeight || 480);
+		});
+		return U.current && e.observe(U.current), () => e.disconnect();
+	}, []), /* @__PURE__ */ (0, v.jsxs)(s, {
+		className: P?.graphContainer,
+		style: N?.graphContainer,
+		id: _,
+		ref: W,
+		"aria-label": D,
+		backgroundColor: p,
+		theme: E,
+		language: C,
+		minHeight: T,
+		width: u,
+		height: ne,
+		relativeHeight: pe,
+		padding: ie,
+		children: [
+			o || te || y || b ? /* @__PURE__ */ (0, v.jsx)(a, {
+				styles: {
+					title: N?.title,
+					description: N?.description
+				},
+				classNames: {
+					title: P?.title,
+					description: P?.description
+				},
+				graphTitle: o,
+				graphDescription: te,
+				width: u,
+				graphDownload: y ? W : void 0,
+				dataDownload: b ? 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.length > 0 ? null : /* @__PURE__ */ (0, v.jsx)(r, {
+				colorDomain: [de, ue],
+				colors: [f || n[E].categoricalColors.colors[0], d || n[E].categoricalColors.colors[1]],
+				colorLegendTitle: w,
+				showNAColor: !1,
+				className: P?.colorLegend
+			}),
+			/* @__PURE__ */ (0, v.jsxs)(c, {
+				ref: U,
+				children: [t.length === 0 && /* @__PURE__ */ (0, v.jsx)(ee, {}), V && H && t.length > 0 ? /* @__PURE__ */ (0, v.jsx)(he, {
+					data: t,
+					sameAxes: ae,
+					lineColor: d,
+					barColor: f,
+					width: V,
+					height: H,
+					truncateBy: ge,
+					leftMargin: oe,
+					rightMargin: se,
+					topMargin: ce,
+					bottomMargin: le,
+					axisTitles: [de, ue],
+					tooltip: fe,
+					onSeriesMouseOver: m,
+					barPadding: x,
+					showLabels: S,
+					onSeriesMouseClick: _e,
+					resetSelectionOnDoubleClick: O,
+					detailsOnClick: k,
+					noOfTicks: j,
+					curveType: M,
+					showValues: A,
+					styles: N,
+					classNames: P,
+					animate: F === !0 ? {
+						duration: .5,
+						once: !0,
+						amount: .5
+					} : F || {
+						duration: 0,
+						once: !0,
+						amount: 0
+					},
+					customLayers: I,
+					naLabel: L,
+					showAxisLabels: R,
+					lineNumberDisplayOptions: z,
+					barNumberDisplayOptions: B
+				}) : null]
+			}),
+			l || re ? /* @__PURE__ */ (0, v.jsx)(i, {
+				styles: {
+					footnote: N?.footnote,
+					source: N?.source
+				},
+				classNames: {
+					footnote: P?.footnote,
+					source: P?.source
+				},
+				sources: l,
+				footNote: re,
+				width: u
+			}) : null
+		]
+	});
+}
+//#endregion
+export { y as t };
+
+//# sourceMappingURL=ParetoChart-BB89ZG8n.js.map

package/dist/ParetoChart-BB89ZG8n.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ParetoChart-BB89ZG8n.js","names":[],"sources":["../src/Components/Graphs/ParetoChart/Graph.tsx","../src/Components/Graphs/ParetoChart/index.tsx"],"sourcesContent":["import { cn } from '@undp/design-system-react/cn';\nimport { scaleBand, scaleLinear } from 'd3-scale';\nimport {\n  curveLinear,\n  curveMonotoneX,\n  curveStep,\n  curveStepAfter,\n  curveStepBefore,\n  line,\n} from 'd3-shape';\nimport isEqual from 'fast-deep-equal';\nimport { AnimatePresence, motion, useInView } from 'motion/react';\nimport { useRef, useState } from 'react';\nimport { Axis } from '@/Components/Elements/Axes/Axis';\nimport { AxisTitle } from '@/Components/Elements/Axes/AxisTitle';\nimport { XAxesLabels } from '@/Components/Elements/Axes/XAxesLabels';\nimport { DetailsModal } from '@/Components/Elements/DetailsModal';\nimport { Tooltip } from '@/Components/Elements/Tooltip';\nimport type {\n  AnimateDataType,\n  ClassNameObject,\n  CurveTypes,\n  CustomLayerDataType,\n  NumberFormatOptions,\n  ParetoChartDataType,\n  StyleObject,\n} from '@/Types';\nimport { checkIfNullOrUndefined } from '@/Utils/checkIfNullOrUndefined';\nimport { numberFormattingFunction } from '@/Utils/numberFormattingFunction';\n\ninterface Props {\n  data: ParetoChartDataType[];\n  barColor: string;\n  lineColor: string;\n  axisTitles: [string, string];\n  width: number;\n  height: number;\n  rightMargin: number;\n  leftMargin: number;\n  topMargin: number;\n  bottomMargin: number;\n  sameAxes: boolean;\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  barPadding: number;\n  truncateBy: number;\n  showLabels: boolean;\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  noOfTicks: number;\n  showValues: boolean;\n  curveType: CurveTypes;\n  styles?: StyleObject;\n  classNames?: ClassNameObject;\n  animate: AnimateDataType;\n  naLabel: string;\n  customLayers: CustomLayerDataType[];\n  showAxisLabels: boolean;\n  lineNumberDisplayOptions?: NumberFormatOptions;\n  barNumberDisplayOptions?: NumberFormatOptions;\n}\ninterface DataFormattedType {\n  id: string;\n  label: number | string;\n  line?: number;\n}\n\nexport function Graph(props: Props) {\n  const {\n    data,\n    width,\n    height,\n    barColor,\n    lineColor,\n    axisTitles,\n    sameAxes,\n    rightMargin,\n    leftMargin,\n    topMargin,\n    bottomMargin,\n    tooltip,\n    showValues,\n    onSeriesMouseOver,\n    barPadding,\n    truncateBy,\n    showLabels,\n    onSeriesMouseClick,\n    resetSelectionOnDoubleClick,\n    detailsOnClick,\n    noOfTicks,\n    curveType,\n    styles,\n    classNames,\n    animate,\n    customLayers,\n    naLabel,\n    showAxisLabels,\n    lineNumberDisplayOptions,\n    barNumberDisplayOptions,\n  } = props;\n  const svgRef = useRef(null);\n  const isInView = useInView(svgRef, {\n    once: animate.once,\n    amount: animate.amount,\n  });\n  const curve =\n    curveType === 'linear'\n      ? curveLinear\n      : curveType === 'step'\n        ? curveStep\n        : curveType === 'stepAfter'\n          ? curveStepAfter\n          : curveType === 'stepBefore'\n            ? curveStepBefore\n            : curveMonotoneX;\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 + 50,\n    right: rightMargin + 65,\n  };\n  const graphWidth = width - margin.left - margin.right;\n  const graphHeight = height - margin.top - margin.bottom;\n\n  const dataWithId = data.map((d, i) => ({ ...d, id: `${i}` }));\n  const x = scaleBand()\n    .domain(dataWithId.map((d) => `${d.id}`))\n    .range([0, graphWidth])\n    .paddingInner(barPadding);\n  const minParam1 =\n    Math.min(...dataWithId.map((d) => d.bar).filter((d) => d !== undefined && d !== null)) !==\n    Infinity\n      ? Math.min(...dataWithId.map((d) => d.bar).filter((d) => d !== undefined && d !== null)) > 0\n        ? 0\n        : Math.min(...dataWithId.map((d) => d.bar).filter((d) => d !== undefined && d !== null))\n      : 0;\n  const minParam2 =\n    Math.min(...dataWithId.map((d) => d.line).filter((d) => d !== undefined && d !== null)) !==\n    Infinity\n      ? Math.min(...dataWithId.map((d) => d.line).filter((d) => d !== undefined && d !== null)) > 0\n        ? 0\n        : Math.min(...dataWithId.map((d) => d.line).filter((d) => d !== undefined && d !== null))\n      : 0;\n  const maxParam1 =\n    Math.max(...dataWithId.map((d) => d.bar).filter((d) => d !== undefined && d !== null)) !==\n    Infinity\n      ? Math.max(...dataWithId.map((d) => d.bar).filter((d) => d !== undefined && d !== null))\n      : 0;\n  const maxParam2 =\n    Math.max(...dataWithId.map((d) => d.line).filter((d) => d !== undefined && d !== null)) !==\n    Infinity\n      ? Math.max(...dataWithId.map((d) => d.line).filter((d) => d !== undefined && d !== null))\n      : 0;\n\n  const minParam = minParam1 < minParam2 ? minParam1 : minParam2;\n  const maxParam = maxParam1 > maxParam2 ? maxParam1 : maxParam2;\n\n  const y1 = scaleLinear()\n    .domain([\n      sameAxes ? minParam : minParam1,\n      sameAxes ? (maxParam > 0 ? maxParam : 0) : maxParam1 > 0 ? maxParam1 : 0,\n    ])\n    .range([graphHeight, 0])\n    .nice();\n  const y2 = scaleLinear()\n    .domain([\n      sameAxes ? minParam : minParam2,\n      sameAxes ? (maxParam > 0 ? maxParam : 0) : maxParam2 > 0 ? maxParam2 : 0,\n    ])\n    .range([graphHeight, 0])\n    .nice();\n\n  const lineShape = line<DataFormattedType>()\n    .defined((d) => !checkIfNullOrUndefined(d.line))\n    .x((d) => (x(`${d.id}`) as number) + x.bandwidth() / 2)\n    .y((d) => y2(d.line as number))\n    .curve(curve);\n  const y1Ticks = y1.ticks(noOfTicks);\n  const y2Ticks = y2.ticks(noOfTicks);\n  return (\n    <>\n      <motion.svg\n        width={`${width}px`}\n        height={`${height}px`}\n        viewBox={`0 0 ${width} ${height}`}\n        direction='ltr'\n        ref={svgRef}\n      >\n        <g transform={`translate(${margin.left},${margin.top})`}>\n          <g>\n            {y1Ticks.map((d, i) => (\n              // biome-ignore lint/suspicious/noArrayIndexKey: index is the unique identifier\n              <g key={i}>\n                <line\n                  y1={y1(d)}\n                  y2={y1(d)}\n                  x1={-15}\n                  x2={-20}\n                  style={{\n                    stroke: barColor,\n                    strokeWidth: 1,\n                    ...(styles?.yAxis?.gridLines || {}),\n                  }}\n                  className={classNames?.yAxis?.gridLines}\n                />\n                <text\n                  x={0 - 25}\n                  y={y1(d)}\n                  dy='0.33em'\n                  className={cn('text-xs', classNames?.yAxis?.labels)}\n                  style={{\n                    textAnchor: 'end',\n                    fill: barColor,\n                    ...(styles?.yAxis?.labels || {}),\n                  }}\n                >\n                  {numberFormattingFunction(\n                    d,\n                    naLabel,\n                    barNumberDisplayOptions?.precision ?? 2,\n                    barNumberDisplayOptions?.prefix,\n                    barNumberDisplayOptions?.suffix,\n                    barNumberDisplayOptions?.locale,\n                    barNumberDisplayOptions?.padZeros,\n                  )}\n                </text>\n              </g>\n            ))}\n            <Axis\n              y1={0}\n              y2={graphHeight}\n              x1={-15}\n              x2={-15}\n              classNames={{ axis: classNames?.xAxis?.axis }}\n              styles={{ axis: { stroke: barColor, ...(styles?.xAxis?.axis || {}) } }}\n            />\n            {showAxisLabels ? (\n              <AxisTitle\n                x={10 - margin.left}\n                y={graphHeight / 2}\n                style={{ fill: barColor, ...(styles?.yAxis?.title || {}) }}\n                className={classNames?.yAxis?.title}\n                text={\n                  axisTitles[0].length > 100\n                    ? `${axisTitles[0].substring(0, 100)}...`\n                    : axisTitles[0]\n                }\n                rotate90\n              />\n            ) : null}\n          </g>\n          <g>\n            {y2Ticks.map((d, i) => (\n              // biome-ignore lint/suspicious/noArrayIndexKey: index is the unique identifier\n              <g key={i}>\n                <line\n                  y1={y2(d)}\n                  y2={y2(d)}\n                  x1={graphWidth + 15}\n                  x2={graphWidth + 20}\n                  style={{\n                    stroke: lineColor,\n                    strokeWidth: 1,\n                    ...(styles?.yAxis?.gridLines || {}),\n                  }}\n                  className={classNames?.yAxis?.gridLines}\n                />\n                <text\n                  x={graphWidth + 25}\n                  y={y2(d)}\n                  dy='0.33em'\n                  dx={-2}\n                  style={{\n                    textAnchor: 'start',\n                    fill: lineColor,\n                    ...(styles?.yAxis?.labels || {}),\n                  }}\n                  className={cn('text-xs', classNames?.yAxis?.labels)}\n                >\n                  {numberFormattingFunction(\n                    d,\n                    naLabel,\n                    lineNumberDisplayOptions?.precision ?? 2,\n                    lineNumberDisplayOptions?.prefix,\n                    lineNumberDisplayOptions?.suffix,\n                    lineNumberDisplayOptions?.locale,\n                    lineNumberDisplayOptions?.padZeros,\n                  )}\n                </text>\n              </g>\n            ))}\n            <Axis\n              y1={0}\n              y2={graphHeight}\n              x1={graphWidth + 15}\n              x2={graphWidth + 15}\n              classNames={{ axis: classNames?.xAxis?.axis }}\n              styles={{ axis: { stroke: lineColor, ...(styles?.xAxis?.axis || {}) } }}\n            />\n            {showAxisLabels ? (\n              <AxisTitle\n                x={graphWidth + margin.right - 15}\n                y={graphHeight / 2}\n                style={{ fill: lineColor, ...(styles?.yAxis?.title || {}) }}\n                className={classNames?.yAxis?.title}\n                text={\n                  axisTitles[1].length > 100\n                    ? `${axisTitles[1].substring(0, 100)}...`\n                    : axisTitles[1]\n                }\n                rotate90\n              />\n            ) : null}\n          </g>\n          <Axis\n            y1={sameAxes ? y1(0) : graphHeight}\n            y2={sameAxes ? y1(0) : graphHeight}\n            x1={-15}\n            x2={graphWidth + 15}\n            classNames={{ axis: classNames?.xAxis?.axis }}\n            styles={{ axis: styles?.xAxis?.axis }}\n          />\n          {customLayers.filter((d) => d.position === 'before').map((d) => d.layer)}\n          <AnimatePresence>\n            {dataWithId.map((d, i) => {\n              return (\n                <motion.g\n                  className='undp-viz-g-with-hover'\n                  key={d.label}\n                  opacity={0.85}\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) && resetSelectionOnDoubleClick) {\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                  <motion.rect\n                    variants={{\n                      initial: {\n                        attrY: y1(0),\n                        height: 0,\n                        opacity: 1,\n                        fill: barColor,\n                      },\n                      whileInView: {\n                        attrY: d.bar ? (d.bar > 0 ? y1(d.bar) : y1(0)) : 0,\n                        height: d.bar ? Math.abs(y1(d.bar) - y1(0)) : 0,\n                        opacity: 1,\n                        fill: barColor,\n                        transition: { duration: animate.duration },\n                      },\n                    }}\n                    initial='initial'\n                    animate={isInView ? 'whileInView' : 'initial'}\n                    exit={{\n                      attrY: y1(0),\n                      height: 0,\n                      opacity: 0,\n                      transition: { duration: animate.duration },\n                    }}\n                    x={x(`${i}`)}\n                    width={x.bandwidth()}\n                  />\n                  {showValues && !checkIfNullOrUndefined(d.bar) ? (\n                    <motion.text\n                      x={(x(`${d.id}`) as number) + x.bandwidth() / 2}\n                      exit={{\n                        attrY: y1(0),\n                        opacity: 0,\n                        transition: { duration: animate.duration },\n                      }}\n                      variants={{\n                        initial: {\n                          attrY: y1(0),\n                          opacity: 0,\n                          fill: barColor,\n                        },\n                        whileInView: {\n                          attrY: y1(d.bar || 0),\n                          opacity: 1,\n                          fill: barColor,\n                          transition: { duration: animate.duration },\n                        },\n                      }}\n                      initial='initial'\n                      animate={isInView ? 'whileInView' : 'initial'}\n                      style={{\n                        textAnchor: 'middle',\n                        ...(styles?.graphObjectValues || {}),\n                      }}\n                      className={cn('graph-value text-sm', classNames?.graphObjectValues)}\n                      dy={d.bar ? (d.bar >= 0 ? '-5px' : '1em') : '-5px'}\n                    >\n                      {numberFormattingFunction(\n                        d.bar,\n                        naLabel,\n                        barNumberDisplayOptions?.precision ?? 2,\n                        barNumberDisplayOptions?.prefix,\n                        barNumberDisplayOptions?.suffix,\n                        barNumberDisplayOptions?.locale,\n                        barNumberDisplayOptions?.padZeros,\n                      )}\n                    </motion.text>\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={graphHeight + 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                </motion.g>\n              );\n            })}\n            <motion.path\n              exit={{\n                opacity: 0,\n                transition: { duration: animate.duration },\n              }}\n              variants={{\n                initial: {\n                  d: lineShape(dataWithId.map((d) => ({ ...d, line: 0 }))) as string,\n                  opacity: 0,\n                  stroke: lineColor,\n                },\n                whileInView: {\n                  d: lineShape(dataWithId) as string,\n                  opacity: 1,\n                  stroke: lineColor,\n                  transition: { duration: animate.duration },\n                },\n              }}\n              initial='initial'\n              animate={isInView ? 'whileInView' : 'initial'}\n              style={{\n                fill: 'none',\n                strokeWidth: 2,\n              }}\n            />\n            {dataWithId.map((d) => (\n              <g key={d.label}>\n                {!checkIfNullOrUndefined(d.line) ? (\n                  // biome-ignore lint/a11y/noStaticElementInteractions: interaction for graph\n                  <g\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) && resetSelectionOnDoubleClick) {\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                    <motion.circle\n                      exit={{\n                        cy: y2(0),\n                        opacity: 0,\n                        transition: { duration: animate.duration },\n                      }}\n                      variants={{\n                        initial: {\n                          cy: y2(0),\n                          opacity: 0,\n                          fill: lineColor,\n                        },\n                        whileInView: {\n                          cy: y2(d.line as number),\n                          opacity: 1,\n                          fill: lineColor,\n                          transition: { duration: animate.duration },\n                        },\n                      }}\n                      initial='initial'\n                      animate={isInView ? 'whileInView' : 'initial'}\n                      cx={(x(d.id) as number) + x.bandwidth() / 2}\n                      r={\n                        graphWidth / dataWithId.length < 5\n                          ? 0\n                          : graphWidth / dataWithId.length < 20\n                            ? 2\n                            : 4\n                      }\n                    />\n                    {showValues ? (\n                      <motion.text\n                        x={(x(`${d.id}`) as number) + x.bandwidth() / 2}\n                        exit={{\n                          y: y2(0),\n                          opacity: 0,\n                          transition: { duration: animate.duration },\n                        }}\n                        style={{\n                          textAnchor: 'middle',\n                          ...(styles?.graphObjectValues || {}),\n                        }}\n                        variants={{\n                          initial: {\n                            y: y2(0),\n                            opacity: 0,\n                            fill: lineColor,\n                          },\n                          whileInView: {\n                            y: y2(d.line as number),\n                            opacity: 1,\n                            fill: lineColor,\n                            transition: { duration: animate.duration },\n                          },\n                        }}\n                        initial='initial'\n                        animate={isInView ? 'whileInView' : 'initial'}\n                        className={cn('graph-value text-sm', classNames?.graphObjectValues)}\n                        dy='-5px'\n                      >\n                        {numberFormattingFunction(\n                          d.line,\n                          naLabel,\n                          lineNumberDisplayOptions?.precision ?? 2,\n                          lineNumberDisplayOptions?.prefix,\n                          lineNumberDisplayOptions?.suffix,\n                          lineNumberDisplayOptions?.locale,\n                          lineNumberDisplayOptions?.padZeros,\n                        )}\n                      </motion.text>\n                    ) : null}\n                  </g>\n                ) : null}\n              </g>\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 { ColorLegend } from '@/Components/Elements/ColorLegend';\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  CurveTypes,\n  CustomLayerDataType,\n  Languages,\n  NumberFormatOptions,\n  ParetoChartDataType,\n  SourcesDataType,\n  StyleObject,\n} from '@/Types';\nimport { Graph } from './Graph';\n\ninterface Props {\n  // Data\n  /** Array of data objects */\n  data: ParetoChartDataType[];\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 of the bars */\n  barColor?: string;\n  /** Color of the line */\n  lineColor?: 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\n  // Values and Ticks\n  /** Truncate labels by specified length */\n  truncateBy?: number;\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  /** Curve type for the line */\n  curveType?: CurveTypes;\n  /** Enables same axis for bars and line */\n  sameAxes?: boolean;\n  /** Toggle visibility of color scale. */\n  showColorScale?: boolean;\n  /** Toggle visibility of labels of the axis. */\n  showAxisLabels?: boolean;\n  /** Title for the bar axis */\n  barAxisTitle?: string;\n  /** Title for the line axis */\n  lineAxisTitle?: string;\n  /** Defines how “NA” values should be displayed/labelled in the graph */\n  naLabel?: string;\n  /** Toggles if the graph animates in when loaded.  */\n  animate?: boolean | AnimateDataType;\n  /** Configuration options for lines controlling number formatting, localization, prefixes/suffixes, precision, and zero padding. */\n  lineNumberDisplayOptions?: NumberFormatOptions;\n  /** Configuration options for bars controlling number formatting, localization, prefixes/suffixes, precision, and zero padding. */\n  barNumberDisplayOptions?: 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  /** 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 ParetoChart(props: Props) {\n  const {\n    data,\n    graphTitle,\n    sources,\n    graphDescription,\n    height,\n    width,\n    footNote,\n    padding,\n    lineColor = Colors.light.categoricalColors.colors[1],\n    barColor = Colors.light.categoricalColors.colors[0],\n    sameAxes = false,\n    backgroundColor = false,\n    leftMargin = 80,\n    rightMargin = 80,\n    topMargin = 20,\n    bottomMargin = 25,\n    lineAxisTitle = 'Line chart',\n    barAxisTitle = 'Bar graph',\n    tooltip,\n    relativeHeight,\n    onSeriesMouseOver,\n    graphID,\n    graphDownload = false,\n    dataDownload = false,\n    barPadding = 0.25,\n    truncateBy = 999,\n    showLabels = true,\n    onSeriesMouseClick,\n    language = 'en',\n    colorLegendTitle,\n    minHeight = 0,\n    theme = 'light',\n    ariaLabel,\n    resetSelectionOnDoubleClick = true,\n    detailsOnClick,\n    showValues = true,\n    noOfTicks = 5,\n    curveType = 'curve',\n    styles,\n    classNames,\n    animate = false,\n    customLayers = [],\n    naLabel = 'NA',\n    showColorScale = true,\n    showAxisLabels = true,\n    lineNumberDisplayOptions,\n    barNumberDisplayOptions,\n  } = props;\n\n  const [svgWidth, setSvgWidth] = useState(0);\n  const [svgHeight, setSvgHeight] = useState(0);\n\n  const graphDiv = useRef<HTMLDivElement>(null);\n  const graphParentDiv = useRef<HTMLDivElement>(null);\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\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.length > 0 ? null : (\n        <ColorLegend\n          colorDomain={[barAxisTitle, lineAxisTitle]}\n          colors={[\n            barColor || Colors[theme].categoricalColors.colors[0],\n            lineColor || Colors[theme].categoricalColors.colors[1],\n          ]}\n          colorLegendTitle={colorLegendTitle}\n          showNAColor={false}\n          className={classNames?.colorLegend}\n        />\n      )}\n      <GraphArea ref={graphDiv}>\n        {data.length === 0 && <EmptyState />}\n        {svgWidth && svgHeight && data.length > 0 ? (\n          <Graph\n            data={data}\n            sameAxes={sameAxes}\n            lineColor={lineColor}\n            barColor={barColor}\n            width={svgWidth}\n            height={svgHeight}\n            truncateBy={truncateBy}\n            leftMargin={leftMargin}\n            rightMargin={rightMargin}\n            topMargin={topMargin}\n            bottomMargin={bottomMargin}\n            axisTitles={[barAxisTitle, lineAxisTitle]}\n            tooltip={tooltip}\n            onSeriesMouseOver={onSeriesMouseOver}\n            barPadding={barPadding}\n            showLabels={showLabels}\n            onSeriesMouseClick={onSeriesMouseClick}\n            resetSelectionOnDoubleClick={resetSelectionOnDoubleClick}\n            detailsOnClick={detailsOnClick}\n            noOfTicks={noOfTicks}\n            curveType={curveType}\n            showValues={showValues}\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            customLayers={customLayers}\n            naLabel={naLabel}\n            showAxisLabels={showAxisLabels}\n            lineNumberDisplayOptions={lineNumberDisplayOptions}\n            barNumberDisplayOptions={barNumberDisplayOptions}\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":"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"}

package/dist/ParetoChart-sZCTqhIt.cjs

@@ -0,0 +1,2 @@
+const e=require(`./chunk-gGpyby2o.cjs`),t=require(`./jsx-runtime-Cd1vCQjn.cjs`),n=require(`./Colors.cjs`),r=require(`./ColorLegend.cjs`),i=require(`./GraphFooter.cjs`),a=require(`./GraphHeader.cjs`),o=require(`./checkIfNullOrUndefined-DYvc3fz_.cjs`),s=require(`./GraphContainer-7xAPK4Tb.cjs`),c=require(`./EmptyState-Bq7ZJmZB.cjs`),l=require(`./linear-B93YyHf_.cjs`),u=require(`./band-BWpW41la.cjs`),d=require(`./fast-deep-equal-DN3ilkVq.cjs`),f=require(`./proxy-DaRMphjR.cjs`),p=require(`./AnimatePresence-CapU-Sxd.cjs`),ee=require(`./use-in-view-C4EPQfwM.cjs`),m=require(`./Axis-BbfI4T5K.cjs`),h=require(`./AxisTitle-Co2DmqOy.cjs`),te=require(`./XAxesLabels-BvzqZwll.cjs`),g=require(`./numberFormattingFunction-Caf5NyIo.cjs`),ne=require(`./DetailsModal-CtGqGcX9.cjs`),re=require(`./Tooltip-CO_iOj_w.cjs`),ie=require(`./line-DoUnRqpS.cjs`),_=require(`./step-C_FLQezZ.cjs`);let v=require(`@undp/design-system-react/cn`),y=require(`react`);var b=e.a(d.t(),1),x=t.t();function ae(e){let{data:t,width:n,height:r,barColor:i,lineColor:a,axisTitles:s,sameAxes:c,rightMargin:d,leftMargin:ae,topMargin:oe,bottomMargin:se,tooltip:S,showValues:ce,onSeriesMouseOver:C,barPadding:w,truncateBy:T,showLabels:le,onSeriesMouseClick:E,resetSelectionOnDoubleClick:ue,detailsOnClick:D,noOfTicks:de,curveType:O,styles:k,classNames:A,animate:j,customLayers:fe,naLabel:M,showAxisLabels:pe,lineNumberDisplayOptions:N,barNumberDisplayOptions:P}=e,F=(0,y.useRef)(null),I=ee.t(F,{once:j.once,amount:j.amount}),me=O===`linear`?ie.i:O===`step`?_.r:O===`stepAfter`?_.t:O===`stepBefore`?_.n:_.i,[L,R]=(0,y.useState)(void 0),[z,B]=(0,y.useState)(void 0),[V,H]=(0,y.useState)(void 0),[he,U]=(0,y.useState)(void 0),W={top:oe,bottom:se,left:ae+50,right:d+65},G=n-W.left-W.right,K=r-W.top-W.bottom,q=t.map((e,t)=>({...e,id:`${t}`})),J=u.t().domain(q.map(e=>`${e.id}`)).range([0,G]).paddingInner(w),ge=Math.min(...q.map(e=>e.bar).filter(e=>e!=null))===1/0||Math.min(...q.map(e=>e.bar).filter(e=>e!=null))>0?0:Math.min(...q.map(e=>e.bar).filter(e=>e!=null)),_e=Math.min(...q.map(e=>e.line).filter(e=>e!=null))===1/0||Math.min(...q.map(e=>e.line).filter(e=>e!=null))>0?0:Math.min(...q.map(e=>e.line).filter(e=>e!=null)),Y=Math.max(...q.map(e=>e.bar).filter(e=>e!=null))===1/0?0:Math.max(...q.map(e=>e.bar).filter(e=>e!=null)),X=Math.max(...q.map(e=>e.line).filter(e=>e!=null))===1/0?0:Math.max(...q.map(e=>e.line).filter(e=>e!=null)),ve=ge<_e?ge:_e,Z=Y>X?Y:X,Q=l.t().domain([c?ve:ge,c?Z>0?Z:0:Y>0?Y:0]).range([K,0]).nice(),$=l.t().domain([c?ve:_e,c?Z>0?Z:0:X>0?X:0]).range([K,0]).nice(),ye=ie.t().defined(e=>!o.t(e.line)).x(e=>J(`${e.id}`)+J.bandwidth()/2).y(e=>$(e.line)).curve(me),be=Q.ticks(de),xe=$.ticks(de);return(0,x.jsxs)(x.Fragment,{children:[(0,x.jsx)(f.t.svg,{width:`${n}px`,height:`${r}px`,viewBox:`0 0 ${n} ${r}`,direction:`ltr`,ref:F,children:(0,x.jsxs)(`g`,{transform:`translate(${W.left},${W.top})`,children:[(0,x.jsxs)(`g`,{children:[be.map((e,t)=>(0,x.jsxs)(`g`,{children:[(0,x.jsx)(`line`,{y1:Q(e),y2:Q(e),x1:-15,x2:-20,style:{stroke:i,strokeWidth:1,...k?.yAxis?.gridLines||{}},className:A?.yAxis?.gridLines}),(0,x.jsx)(`text`,{x:-25,y:Q(e),dy:`0.33em`,className:(0,v.cn)(`text-xs`,A?.yAxis?.labels),style:{textAnchor:`end`,fill:i,...k?.yAxis?.labels||{}},children:g.t(e,M,P?.precision??2,P?.prefix,P?.suffix,P?.locale,P?.padZeros)})]},t)),(0,x.jsx)(m.t,{y1:0,y2:K,x1:-15,x2:-15,classNames:{axis:A?.xAxis?.axis},styles:{axis:{stroke:i,...k?.xAxis?.axis||{}}}}),pe?(0,x.jsx)(h.t,{x:10-W.left,y:K/2,style:{fill:i,...k?.yAxis?.title||{}},className:A?.yAxis?.title,text:s[0].length>100?`${s[0].substring(0,100)}...`:s[0],rotate90:!0}):null]}),(0,x.jsxs)(`g`,{children:[xe.map((e,t)=>(0,x.jsxs)(`g`,{children:[(0,x.jsx)(`line`,{y1:$(e),y2:$(e),x1:G+15,x2:G+20,style:{stroke:a,strokeWidth:1,...k?.yAxis?.gridLines||{}},className:A?.yAxis?.gridLines}),(0,x.jsx)(`text`,{x:G+25,y:$(e),dy:`0.33em`,dx:-2,style:{textAnchor:`start`,fill:a,...k?.yAxis?.labels||{}},className:(0,v.cn)(`text-xs`,A?.yAxis?.labels),children:g.t(e,M,N?.precision??2,N?.prefix,N?.suffix,N?.locale,N?.padZeros)})]},t)),(0,x.jsx)(m.t,{y1:0,y2:K,x1:G+15,x2:G+15,classNames:{axis:A?.xAxis?.axis},styles:{axis:{stroke:a,...k?.xAxis?.axis||{}}}}),pe?(0,x.jsx)(h.t,{x:G+W.right-15,y:K/2,style:{fill:a,...k?.yAxis?.title||{}},className:A?.yAxis?.title,text:s[1].length>100?`${s[1].substring(0,100)}...`:s[1],rotate90:!0}):null]}),(0,x.jsx)(m.t,{y1:c?Q(0):K,y2:c?Q(0):K,x1:-15,x2:G+15,classNames:{axis:A?.xAxis?.axis},styles:{axis:k?.xAxis?.axis}}),fe.filter(e=>e.position===`before`).map(e=>e.layer),(0,x.jsxs)(p.t,{children:[q.map((e,t)=>(0,x.jsxs)(f.t.g,{className:`undp-viz-g-with-hover`,opacity:.85,onMouseEnter:t=>{R(e),U(t.clientY),H(t.clientX),C?.(e)},onClick:()=>{(E||D)&&((0,b.default)(z,e)&&ue?(B(void 0),E?.(void 0)):(B(e),E?.(e)))},onMouseMove:t=>{R(e),U(t.clientY),H(t.clientX)},onMouseLeave:()=>{R(void 0),H(void 0),U(void 0),C?.(void 0)},children:[(0,x.jsx)(f.t.rect,{variants:{initial:{attrY:Q(0),height:0,opacity:1,fill:i},whileInView:{attrY:e.bar?e.bar>0?Q(e.bar):Q(0):0,height:e.bar?Math.abs(Q(e.bar)-Q(0)):0,opacity:1,fill:i,transition:{duration:j.duration}}},initial:`initial`,animate:I?`whileInView`:`initial`,exit:{attrY:Q(0),height:0,opacity:0,transition:{duration:j.duration}},x:J(`${t}`),width:J.bandwidth()}),ce&&!o.t(e.bar)?(0,x.jsx)(f.t.text,{x:J(`${e.id}`)+J.bandwidth()/2,exit:{attrY:Q(0),opacity:0,transition:{duration:j.duration}},variants:{initial:{attrY:Q(0),opacity:0,fill:i},whileInView:{attrY:Q(e.bar||0),opacity:1,fill:i,transition:{duration:j.duration}}},initial:`initial`,animate:I?`whileInView`:`initial`,style:{textAnchor:`middle`,...k?.graphObjectValues||{}},className:(0,v.cn)(`graph-value text-sm`,A?.graphObjectValues),dy:e.bar?e.bar>=0?`-5px`:`1em`:`-5px`,children:g.t(e.bar,M,P?.precision??2,P?.prefix,P?.suffix,P?.locale,P?.padZeros)}):null,le?(0,x.jsx)(te.t,{value:`${e.label}`.length<T?`${e.label}`:`${`${e.label}`.substring(0,T)}...`,y:K+5,x:J(`${e.id}`),width:J.bandwidth(),height:W.bottom,style:k?.xAxis?.labels,className:A?.xAxis?.labels,alignment:`top`,animate:j,isInView:I}):null]},e.label)),(0,x.jsx)(f.t.path,{exit:{opacity:0,transition:{duration:j.duration}},variants:{initial:{d:ye(q.map(e=>({...e,line:0}))),opacity:0,stroke:a},whileInView:{d:ye(q),opacity:1,stroke:a,transition:{duration:j.duration}}},initial:`initial`,animate:I?`whileInView`:`initial`,style:{fill:`none`,strokeWidth:2}}),q.map(e=>(0,x.jsx)(`g`,{children:o.t(e.line)?null:(0,x.jsxs)(`g`,{onMouseEnter:t=>{R(e),U(t.clientY),H(t.clientX),C?.(e)},onClick:()=>{(E||D)&&((0,b.default)(z,e)&&ue?(B(void 0),E?.(void 0)):(B(e),E?.(e)))},onMouseMove:t=>{R(e),U(t.clientY),H(t.clientX)},onMouseLeave:()=>{R(void 0),H(void 0),U(void 0),C?.(void 0)},children:[(0,x.jsx)(f.t.circle,{exit:{cy:$(0),opacity:0,transition:{duration:j.duration}},variants:{initial:{cy:$(0),opacity:0,fill:a},whileInView:{cy:$(e.line),opacity:1,fill:a,transition:{duration:j.duration}}},initial:`initial`,animate:I?`whileInView`:`initial`,cx:J(e.id)+J.bandwidth()/2,r:G/q.length<5?0:G/q.length<20?2:4}),ce?(0,x.jsx)(f.t.text,{x:J(`${e.id}`)+J.bandwidth()/2,exit:{y:$(0),opacity:0,transition:{duration:j.duration}},style:{textAnchor:`middle`,...k?.graphObjectValues||{}},variants:{initial:{y:$(0),opacity:0,fill:a},whileInView:{y:$(e.line),opacity:1,fill:a,transition:{duration:j.duration}}},initial:`initial`,animate:I?`whileInView`:`initial`,className:(0,v.cn)(`graph-value text-sm`,A?.graphObjectValues),dy:`-5px`,children:g.t(e.line,M,N?.precision??2,N?.prefix,N?.suffix,N?.locale,N?.padZeros)}):null]})},e.label))]}),fe.filter(e=>e.position===`after`).map(e=>e.layer)]})}),L&&S&&V&&he?(0,x.jsx)(re.t,{data:L,body:S,xPos:V,yPos:he,backgroundStyle:k?.tooltip,className:A?.tooltip}):null,D&&z!==void 0?(0,x.jsx)(ne.t,{body:D,data:z,setData:B,className:A?.modal}):null]})}function oe(e){let{data:t,graphTitle:o,sources:l,graphDescription:u,height:d,width:f,footNote:p,padding:ee,lineColor:m=n.Colors.light.categoricalColors.colors[1],barColor:h=n.Colors.light.categoricalColors.colors[0],sameAxes:te=!1,backgroundColor:g=!1,leftMargin:ne=80,rightMargin:re=80,topMargin:ie=20,bottomMargin:_=25,lineAxisTitle:v=`Line chart`,barAxisTitle:b=`Bar graph`,tooltip:oe,relativeHeight:se,onSeriesMouseOver:S,graphID:ce,graphDownload:C=!1,dataDownload:w=!1,barPadding:T=.25,truncateBy:le=999,showLabels:E=!0,onSeriesMouseClick:ue,language:D=`en`,colorLegendTitle:de,minHeight:O=0,theme:k=`light`,ariaLabel:A,resetSelectionOnDoubleClick:j=!0,detailsOnClick:fe,showValues:M=!0,noOfTicks:pe=5,curveType:N=`curve`,styles:P,classNames:F,animate:I=!1,customLayers:me=[],naLabel:L=`NA`,showColorScale:R=!0,showAxisLabels:z=!0,lineNumberDisplayOptions:B,barNumberDisplayOptions:V}=e,[H,he]=(0,y.useState)(0),[U,W]=(0,y.useState)(0),G=(0,y.useRef)(null),K=(0,y.useRef)(null);return(0,y.useEffect)(()=>{let e=new ResizeObserver(e=>{he(e[0].target.clientWidth||620),W(e[0].target.clientHeight||480)});return G.current&&e.observe(G.current),()=>e.disconnect()},[]),(0,x.jsxs)(s.n,{className:F?.graphContainer,style:P?.graphContainer,id:ce,ref:K,"aria-label":A,backgroundColor:g,theme:k,language:D,minHeight:O,width:f,height:d,relativeHeight:se,padding:ee,children:[o||u||C||w?(0,x.jsx)(a.GraphHeader,{styles:{title:P?.title,description:P?.description},classNames:{title:F?.title,description:F?.description},graphTitle:o,graphDescription:u,width:f,graphDownload:C?K:void 0,dataDownload:w?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,!R&&t.length>0?null:(0,x.jsx)(r.ColorLegend,{colorDomain:[b,v],colors:[h||n.Colors[k].categoricalColors.colors[0],m||n.Colors[k].categoricalColors.colors[1]],colorLegendTitle:de,showNAColor:!1,className:F?.colorLegend}),(0,x.jsxs)(s.t,{ref:G,children:[t.length===0&&(0,x.jsx)(c.t,{}),H&&U&&t.length>0?(0,x.jsx)(ae,{data:t,sameAxes:te,lineColor:m,barColor:h,width:H,height:U,truncateBy:le,leftMargin:ne,rightMargin:re,topMargin:ie,bottomMargin:_,axisTitles:[b,v],tooltip:oe,onSeriesMouseOver:S,barPadding:T,showLabels:E,onSeriesMouseClick:ue,resetSelectionOnDoubleClick:j,detailsOnClick:fe,noOfTicks:pe,curveType:N,showValues:M,styles:P,classNames:F,animate:I===!0?{duration:.5,once:!0,amount:.5}:I||{duration:0,once:!0,amount:0},customLayers:me,naLabel:L,showAxisLabels:z,lineNumberDisplayOptions:B,barNumberDisplayOptions:V}):null]}),l||p?(0,x.jsx)(i.GraphFooter,{styles:{footnote:P?.footnote,source:P?.source},classNames:{footnote:F?.footnote,source:F?.source},sources:l,footNote:p,width:f}):null]})}Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return oe}});
+//# sourceMappingURL=ParetoChart-sZCTqhIt.cjs.map