@undp/data-viz 2.5.4 → 2.6.1

package/dist/LineChart-BEUT_K-o.js

@@ -0,0 +1,458 @@
+import { o as e } from "./chunk-foFoljWS.js";
+import { t } from "./jsx-runtime-C76bEyh7.js";
+import { Colors as n } from "./Colors.js";
+import { GraphFooter as r } from "./GraphFooter.js";
+import { GraphHeader as i } from "./GraphHeader.js";
+import { t as a } from "./checkIfNullOrUndefined-C5gqSAtF.js";
+import { n as o, t as s } from "./GraphContainer-DgEB1AVN.js";
+import { n as ee, t as c } from "./parse-5MWhaq6h.js";
+import { t as l } from "./lodash.orderby-Dn2sr3tw.js";
+import { t as te } from "./EmptyState-DBmT1Adf.js";
+import { n as ne } from "./init-CT6uqW57.js";
+import { t as u } from "./linear-BkosG4OK.js";
+import { t as d } from "./time-BSWvT9ln.js";
+import { t as f } from "./proxy-BiRrIImK.js";
+import { t as re } from "./use-in-view-CjlKdln1.js";
+import { t as ie } from "./Axis-B3ai1eeP.js";
+import { t as ae } from "./AxisTitle-DqJw_G-f.js";
+import { t as p } from "./numberFormattingFunction-Cha8dhHc.js";
+import { t as oe } from "./XTicksAndGridLines-B2XZgwzW.js";
+import { t as se } from "./YTicksAndGridLines-CVTzNJYP.js";
+import { n as ce } from "./ReferenceLine-C8owKJx1.js";
+import { t as le } from "./Tooltip-Y6uTGwkF.js";
+import { i as ue, t as de } from "./line-6wslDyQb.js";
+import { i as fe, n as pe, r as me, t as he } from "./step-Bxl4gFpO.js";
+import { t as ge } from "./getNoOfTicks-Bz_9Xmc6.js";
+import { t as _e } from "./select-0Z0HV7nm.js";
+import { t as ve } from "./pointer-CoEekBJE.js";
+import { n as ye, r as m, t as h } from "./getLineEndPoint-BkKmq-KI.js";
+import { t as g } from "./HighlightArea-BljOOgRP.js";
+import { n as _, r as be } from "./simple-statistics-BlsBuRxU.js";
+import { t as xe } from "./RegressionLine-B-3HbVf4.js";
+import { cn as v } from "@undp/design-system-react/cn";
+import { useEffect as y, useRef as b, useState as x } from "react";
+//#region src/Components/Graphs/LineCharts/LineChart/Graph.tsx
+var Se = /* @__PURE__ */ e(l(), 1), S = t();
+function Ce(e) {
+	let { data: t, width: n, height: r, lineColor: i, suffix: o, prefix: s, dateFormat: l, highlightAreaSettings: te, showValues: ge, noOfXTicks: Ce, rightMargin: C, leftMargin: w, topMargin: we, bottomMargin: Te, tooltip: T, onSeriesMouseOver: E, refValues: Ee, minValue: D, maxValue: O, animate: k, rtl: A, strokeWidth: j, showDots: M, annotations: De, customHighlightAreaSettings: N, regressionLine: P, yAxisTitle: F, noOfYTicks: I, maxDate: Oe, minDate: ke, curveType: L, styles: R, classNames: z, precision: B, customLayers: Ae, locale: V, padZeros: H } = e, je = b(null), U = re(je, {
+		once: k.once,
+		amount: k.amount
+	}), [W, Me] = x(!1);
+	y(() => {
+		if (U && !W) {
+			let e = setTimeout(() => {
+				Me(!0);
+			}, (k.duration + .5) * 1e3);
+			return () => clearTimeout(e);
+		}
+	}, [
+		U,
+		W,
+		k.duration
+	]);
+	let Ne = L === "linear" ? ue : L === "step" ? me : L === "stepAfter" ? he : L === "stepBefore" ? pe : fe, [G, Pe] = x(void 0), [Fe, Ie] = x(void 0), [Le, Re] = x(void 0), K = {
+		top: we,
+		bottom: Te,
+		left: F ? w + 30 : w,
+		right: C
+	}, ze = b(null), q = (0, Se.default)(t.map((e) => ({
+		...e,
+		date: c(`${e.date}`, l, /* @__PURE__ */ new Date())
+	})), ["date"], ["asc"]), Be = te.map((e) => ({
+		...e,
+		coordinates: [e.coordinates[0] === null ? null : c(`${e.coordinates[0]}`, l, /* @__PURE__ */ new Date()), e.coordinates[1] === null ? null : c(`${e.coordinates[1]}`, l, /* @__PURE__ */ new Date())]
+	})), Ve = N.map((e) => ({
+		...e,
+		coordinates: e.coordinates.map((e, t) => t % 2 == 0 ? c(`${e}`, l, /* @__PURE__ */ new Date()) : e)
+	})), J = n - K.left - K.right, Y = r - K.top - K.bottom, He = ke ? c(`${ke}`, l, /* @__PURE__ */ new Date()) : q[0].date, Ue = Oe ? c(`${Oe}`, l, /* @__PURE__ */ new Date()) : q[q.length - 1].date, X = a(D) ? Math.min(...q.map((e) => e.y).filter((e) => e != null)) === Infinity || Math.min(...q.map((e) => e.y).filter((e) => e != null)) > 0 ? 0 : Math.min(...q.map((e) => e.y).filter((e) => e != null)) : D, Z = Math.max(...q.map((e) => e.y).filter((e) => e != null)) === Infinity ? 0 : Math.max(...q.map((e) => e.y).filter((e) => e != null)), Q = d().domain([He, Ue]).range([0, J]), $ = u().domain([X, a(O) ? Z > 0 ? Z : 0 : O]).range([Y, 0]).nice(), We = de().x((e) => Q(e.date)).y((e) => $(e.y)).curve(Ne), Ge = $.ticks(I), Ke = Q.ticks(Ce);
+	y(() => {
+		_e(ze.current).on("mousemove", (e) => {
+			let t = q[ne(q.map((e) => e.date), Q.invert(ve(e)[0]), 0)];
+			Pe(t || q[q.length - 1]), E?.(t || q[q.length - 1]), Re(e.clientY), Ie(e.clientX);
+		}).on("mouseout", () => {
+			Pe(void 0), Ie(void 0), Re(void 0), E?.(void 0);
+		});
+	}, [
+		Q,
+		q,
+		E
+	]);
+	let qe = be(_(q.filter((e) => !a(e.date) && !a(e.y)).map((e) => [Q(e.date), $(e.y)])));
+	return /* @__PURE__ */ (0, S.jsxs)(S.Fragment, { children: [/* @__PURE__ */ (0, S.jsx)(f.svg, {
+		width: `${n}px`,
+		height: `${r}px`,
+		viewBox: `0 0 ${n} ${r}`,
+		direction: "ltr",
+		ref: je,
+		children: /* @__PURE__ */ (0, S.jsxs)("g", {
+			transform: `translate(${K.left},${K.top})`,
+			children: [
+				/* @__PURE__ */ (0, S.jsx)(g, {
+					areaSettings: Be,
+					width: J,
+					height: Y,
+					scale: Q,
+					animate: k,
+					isInView: U
+				}),
+				/* @__PURE__ */ (0, S.jsx)(ye, {
+					areaSettings: Ve,
+					scaleX: Q,
+					scaleY: $,
+					animate: k,
+					isInView: U
+				}),
+				/* @__PURE__ */ (0, S.jsxs)("g", { children: [
+					/* @__PURE__ */ (0, S.jsx)(se, {
+						values: Ge.filter((e) => e !== 0),
+						y: Ge.filter((e) => e !== 0).map((e) => $(e)),
+						x1: 0 - w,
+						x2: J + K.right,
+						styles: {
+							gridLines: R?.yAxis?.gridLines,
+							labels: R?.yAxis?.labels
+						},
+						classNames: {
+							gridLines: z?.yAxis?.gridLines,
+							labels: z?.yAxis?.labels
+						},
+						suffix: o,
+						prefix: s,
+						labelType: "secondary",
+						showGridLines: !0,
+						labelPos: "vertical",
+						precision: B,
+						locale: V,
+						padZeros: H
+					}),
+					/* @__PURE__ */ (0, S.jsx)(ie, {
+						y1: $(X < 0 ? 0 : X),
+						y2: $(X < 0 ? 0 : X),
+						x1: 0 - w,
+						x2: J + K.right,
+						label: p(X < 0 ? 0 : X, void 0, B, s, o, V, H),
+						labelPos: {
+							x: 0 - w,
+							y: $(X < 0 ? 0 : X),
+							dx: 0,
+							dy: Z < 0 ? "1em" : -5
+						},
+						classNames: {
+							axis: z?.xAxis?.axis,
+							label: z?.yAxis?.labels
+						},
+						styles: {
+							axis: R?.xAxis?.axis,
+							label: R?.yAxis?.labels
+						}
+					}),
+					/* @__PURE__ */ (0, S.jsx)(ae, {
+						x: 0 - w - 15,
+						y: Y / 2,
+						style: R?.yAxis?.title,
+						className: z?.yAxis?.title,
+						text: F,
+						rotate90: !0
+					})
+				] }),
+				/* @__PURE__ */ (0, S.jsx)(oe, {
+					values: Ke.map((e) => ee(e, l)),
+					x: Ke.map((e) => Q(e)),
+					y1: 0,
+					y2: Y,
+					styles: {
+						gridLines: R?.xAxis?.gridLines,
+						labels: R?.xAxis?.labels
+					},
+					classNames: {
+						gridLines: v("opacity-0", z?.xAxis?.gridLines),
+						labels: v("fill-primary-gray-700 dark:fill-primary-gray-300 xs:max-[360px]:hidden text-[9px] md:text-[10px] lg:text-xs", z?.xAxis?.labels)
+					},
+					suffix: o,
+					prefix: s,
+					labelType: "primary",
+					showGridLines: !0,
+					precision: B,
+					locale: V,
+					padZeros: H
+				}),
+				Ae.filter((e) => e.position === "before").map((e) => e.layer),
+				/* @__PURE__ */ (0, S.jsxs)("g", { children: [/* @__PURE__ */ (0, S.jsx)(f.path, {
+					style: {
+						stroke: i,
+						fill: "none",
+						strokeWidth: j
+					},
+					exit: {
+						opacity: 0,
+						transition: { duration: k.duration }
+					},
+					variants: {
+						initial: {
+							pathLength: 0,
+							d: We(q) || "",
+							opacity: 1
+						},
+						whileInView: {
+							pathLength: 1,
+							d: We(q) || "",
+							opacity: 1,
+							transition: { duration: k.duration }
+						}
+					},
+					initial: "initial",
+					animate: U ? "whileInView" : "initial"
+				}), G ? /* @__PURE__ */ (0, S.jsx)("line", {
+					y1: 0,
+					y2: Y,
+					x1: Q(G.date),
+					x2: Q(G.date),
+					className: v("undp-tick-line stroke-primary-gray-700 dark:stroke-primary-gray-100", z?.mouseOverLine),
+					style: R?.mouseOverLine
+				}) : null] }),
+				/* @__PURE__ */ (0, S.jsx)("g", { children: q.map((e, t) => /* @__PURE__ */ (0, S.jsx)(f.g, { children: a(e.y) ? null : /* @__PURE__ */ (0, S.jsxs)(S.Fragment, { children: [M ? /* @__PURE__ */ (0, S.jsx)(f.circle, {
+					r: J / q.length < 5 ? 0 : J / q.length < 20 ? 2 : 4,
+					exit: {
+						opacity: 0,
+						transition: { duration: k.duration }
+					},
+					variants: {
+						initial: {
+							opacity: 0,
+							cx: Q(e.date),
+							cy: $(e.y),
+							fill: i
+						},
+						whileInView: {
+							opacity: 1,
+							fill: i,
+							transition: {
+								duration: W ? k.duration : .5,
+								delay: W ? 0 : k.duration
+							},
+							cx: Q(e.date),
+							cy: $(e.y)
+						}
+					},
+					initial: "initial",
+					animate: U ? "whileInView" : "initial"
+				}) : null, ge ? /* @__PURE__ */ (0, S.jsx)(f.text, {
+					dy: -8,
+					style: {
+						textAnchor: "middle",
+						...R?.graphObjectValues || {}
+					},
+					className: v("graph-value text-xs font-bold", z?.graphObjectValues),
+					exit: {
+						opacity: 0,
+						transition: { duration: k.duration }
+					},
+					variants: {
+						initial: {
+							opacity: 0,
+							x: Q(e.date),
+							y: $(e.y)
+						},
+						whileInView: {
+							opacity: 1,
+							x: Q(e.date),
+							y: $(e.y),
+							transition: {
+								duration: W ? k.duration : .5,
+								delay: W ? 0 : k.duration
+							}
+						}
+					},
+					initial: "initial",
+					animate: U ? "whileInView" : "initial",
+					children: p(e.y, void 0, B, s, o, V, H)
+				}) : null] }) }, t)) }),
+				Ee?.map((e) => /* @__PURE__ */ (0, S.jsx)(ce, {
+					text: e.text,
+					color: e.color,
+					y: $(e.value),
+					x1: 0 - w,
+					x2: J + K.right,
+					classNames: e.classNames,
+					styles: e.styles,
+					animate: k,
+					isInView: U
+				}, e.text)),
+				/* @__PURE__ */ (0, S.jsx)("g", { children: De.map((e) => {
+					let t = h({
+						x: e.xCoordinate ? Q(c(`${e.xCoordinate}`, l, /* @__PURE__ */ new Date())) + (e.xOffset || 0) : 0 + (e.xOffset || 0),
+						y: e.yCoordinate ? $(e.yCoordinate) + (e.yOffset || 0) - 8 : 0 + (e.yOffset || 0) - 8
+					}, {
+						x: e.xCoordinate ? Q(c(`${e.xCoordinate}`, l, /* @__PURE__ */ new Date())) : 0,
+						y: e.yCoordinate ? $(e.yCoordinate) : 0
+					}, a(e.connectorRadius) ? 3.5 : e.connectorRadius), n = e.showConnector ? {
+						y1: t.y,
+						x1: t.x,
+						y2: e.yCoordinate ? $(e.yCoordinate) + (e.yOffset || 0) : 0 + (e.yOffset || 0),
+						x2: e.xCoordinate ? Q(c(`${e.xCoordinate}`, l, /* @__PURE__ */ new Date())) + (e.xOffset || 0) : 0 + (e.xOffset || 0),
+						cy: e.yCoordinate ? $(e.yCoordinate) : 0,
+						cx: e.xCoordinate ? Q(c(`${e.xCoordinate}`, l, /* @__PURE__ */ new Date())) : 0,
+						circleRadius: a(e.connectorRadius) ? 3.5 : e.connectorRadius,
+						strokeWidth: e.showConnector === !0 ? 2 : Math.min(e.showConnector || 0, 1)
+					} : void 0, r = {
+						y: e.yCoordinate ? $(e.yCoordinate) + (e.yOffset || 0) - 8 : 0 + (e.yOffset || 0) - 8,
+						x: A ? 0 : e.xCoordinate ? Q(c(`${e.xCoordinate}`, l, /* @__PURE__ */ new Date())) + (e.xOffset || 0) : 0 + (e.xOffset || 0),
+						width: A ? e.xCoordinate ? Q(c(`${e.xCoordinate}`, l, /* @__PURE__ */ new Date())) + (e.xOffset || 0) : 0 + (e.xOffset || 0) : J + K.right - (e.xCoordinate ? Q(c(`${e.xCoordinate}`, l, /* @__PURE__ */ new Date())) + (e.xOffset || 0) : 0 + (e.xOffset || 0)),
+						maxWidth: e.maxWidth,
+						fontWeight: e.fontWeight,
+						align: e.align
+					};
+					return /* @__PURE__ */ (0, S.jsx)(m, {
+						color: e.color,
+						connectorsSettings: n,
+						labelSettings: r,
+						text: e.text,
+						classNames: e.classNames,
+						styles: e.styles,
+						animate: k,
+						isInView: U
+					}, e.text);
+				}) }),
+				/* @__PURE__ */ (0, S.jsx)("g", { children: P ? /* @__PURE__ */ (0, S.jsx)(xe, {
+					x1: 0,
+					x2: J,
+					y1: qe(0),
+					y2: qe(J),
+					graphHeight: Y,
+					graphWidth: J,
+					className: z?.regLine,
+					style: R?.regLine,
+					color: typeof P == "string" ? P : void 0,
+					animate: k,
+					isInView: U
+				}) : null }),
+				Ae.filter((e) => e.position === "after").map((e) => e.layer),
+				/* @__PURE__ */ (0, S.jsx)("rect", {
+					ref: ze,
+					style: {
+						fill: "none",
+						pointerEvents: "all"
+					},
+					width: J,
+					height: Y
+				})
+			]
+		})
+	}), G && T && Fe && Le ? /* @__PURE__ */ (0, S.jsx)(le, {
+		data: G,
+		body: T,
+		xPos: Fe,
+		yPos: Le,
+		backgroundStyle: R?.tooltip,
+		className: z?.tooltip
+	}) : null] });
+}
+//#endregion
+//#region src/Components/Graphs/LineCharts/LineChart/index.tsx
+function C(e) {
+	let { data: t, graphTitle: a, lineColor: ee, sources: c, graphDescription: l, height: ne, width: u, footNote: d, noOfXTicks: f = 10, dateFormat: re = "yyyy", showValues: ie = !1, padding: ae, backgroundColor: p = !1, leftMargin: oe = 30, rightMargin: se = 30, topMargin: ce = 20, bottomMargin: le = 25, relativeHeight: ue, tooltip: de, onSeriesMouseOver: fe, highlightAreaSettings: pe = [], graphID: me, minValue: he, maxValue: _e, maxDate: ve, minDate: ye, graphDownload: m = !1, dataDownload: h = !1, animate: g = !1, language: _ = "en", refValues: be = [], minHeight: xe = 0, strokeWidth: v = 2, showDots: Se = !0, annotations: C = [], customHighlightAreaSettings: w = [], theme: we = "light", ariaLabel: Te, regressionLine: T = !1, yAxisTitle: E, noOfYTicks: Ee = 5, curveType: D = "curve", styles: O, classNames: k, customLayers: A = [], numberDisplayOptions: j } = e, [M, De] = x(0), [N, P] = x(0), F = b(null), I = b(null);
+	return y(() => {
+		let e = new ResizeObserver((e) => {
+			De(e[0].target.clientWidth || 620), P(e[0].target.clientHeight || 480);
+		});
+		return F.current && e.observe(F.current), () => e.disconnect();
+	}, []), /* @__PURE__ */ (0, S.jsxs)(o, {
+		className: k?.graphContainer,
+		style: O?.graphContainer,
+		id: me,
+		ref: I,
+		"aria-label": Te,
+		backgroundColor: p,
+		theme: we,
+		language: _,
+		minHeight: xe,
+		width: u,
+		height: ne,
+		relativeHeight: ue,
+		padding: ae,
+		children: [
+			a || l || m || h ? /* @__PURE__ */ (0, S.jsx)(i, {
+				styles: {
+					title: O?.title,
+					description: O?.description
+				},
+				classNames: {
+					title: k?.title,
+					description: k?.description
+				},
+				graphTitle: a,
+				graphDescription: l,
+				width: u,
+				graphDownload: m ? I : void 0,
+				dataDownload: h ? 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,
+			/* @__PURE__ */ (0, S.jsxs)(s, {
+				ref: F,
+				children: [t.length === 0 && /* @__PURE__ */ (0, S.jsx)(te, {}), M && N && t.length > 0 ? /* @__PURE__ */ (0, S.jsx)(Ce, {
+					data: t,
+					lineColor: ee || n.primaryColors["blue-600"],
+					width: M,
+					height: N,
+					dateFormat: re,
+					showValues: ie,
+					noOfXTicks: f ?? ge(M),
+					leftMargin: oe,
+					rightMargin: se,
+					topMargin: ce,
+					bottomMargin: le,
+					tooltip: de,
+					highlightAreaSettings: pe,
+					onSeriesMouseOver: fe,
+					refValues: be,
+					minValue: he,
+					maxValue: _e,
+					animate: g === !0 ? {
+						duration: .5,
+						once: !0,
+						amount: .5
+					} : g || {
+						duration: 0,
+						once: !0,
+						amount: 0
+					},
+					rtl: _ === "he" || _ === "ar",
+					strokeWidth: v,
+					showDots: Se,
+					annotations: C,
+					customHighlightAreaSettings: w,
+					regressionLine: T,
+					yAxisTitle: E,
+					noOfYTicks: Ee,
+					maxDate: ve,
+					minDate: ye,
+					curveType: D,
+					styles: O,
+					classNames: k,
+					customLayers: A,
+					locale: j?.locale || "en",
+					padZeros: j?.padZeros || !1,
+					suffix: j?.suffix || "",
+					prefix: j?.prefix || "",
+					precision: j?.precision ?? 2
+				}) : null]
+			}),
+			c || d ? /* @__PURE__ */ (0, S.jsx)(r, {
+				styles: {
+					footnote: O?.footnote,
+					source: O?.source
+				},
+				classNames: {
+					footnote: k?.footnote,
+					source: k?.source
+				},
+				sources: c,
+				footNote: d,
+				width: u
+			}) : null
+		]
+	});
+}
+//#endregion
+export { C as t };
+
+//# sourceMappingURL=LineChart-BEUT_K-o.js.map

package/dist/LineChart-BEUT_K-o.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LineChart-BEUT_K-o.js","names":[],"sources":["../src/Components/Graphs/LineCharts/LineChart/Graph.tsx","../src/Components/Graphs/LineCharts/LineChart/index.tsx"],"sourcesContent":["import { cn } from '@undp/design-system-react/cn';\nimport { bisectCenter } from 'd3-array';\nimport { scaleLinear, scaleTime } from 'd3-scale';\nimport { pointer, select } from 'd3-selection';\nimport {\n  curveLinear,\n  curveMonotoneX,\n  curveStep,\n  curveStepAfter,\n  curveStepBefore,\n  line,\n} from 'd3-shape';\nimport { format } from 'date-fns/format';\nimport { parse } from 'date-fns/parse';\nimport orderBy from 'lodash.orderby';\nimport { motion, useInView } from 'motion/react';\nimport { useEffect, useRef, useState } from 'react';\nimport { linearRegression, linearRegressionLine } from 'simple-statistics';\nimport { Annotation } from '@/Components/Elements/Annotations';\nimport { Axis } from '@/Components/Elements/Axes/Axis';\nimport { AxisTitle } from '@/Components/Elements/Axes/AxisTitle';\nimport { XTicksAndGridLines } from '@/Components/Elements/Axes/XTicksAndGridLines';\nimport { YTicksAndGridLines } from '@/Components/Elements/Axes/YTicksAndGridLines';\nimport { HighlightArea } from '@/Components/Elements/HighlightArea';\nimport { CustomArea } from '@/Components/Elements/HighlightArea/customArea';\nimport { RefLineY } from '@/Components/Elements/ReferenceLine';\nimport { RegressionLine } from '@/Components/Elements/RegressionLine';\nimport { Tooltip } from '@/Components/Elements/Tooltip';\nimport type {\n  AnimateDataType,\n  AnnotationSettingsDataType,\n  ClassNameObject,\n  CurveTypes,\n  CustomHighlightAreaSettingsDataType,\n  CustomLayerDataType,\n  HighlightAreaSettingsDataType,\n  LineChartDataType,\n  ReferenceDataType,\n  StyleObject,\n} from '@/Types';\nimport { checkIfNullOrUndefined } from '@/Utils/checkIfNullOrUndefined';\nimport { getLineEndPoint } from '@/Utils/getLineEndPoint';\nimport { numberFormattingFunction } from '@/Utils/numberFormattingFunction';\n\ninterface Props {\n  data: LineChartDataType[];\n  lineColor: string;\n  width: number;\n  height: number;\n  suffix: string;\n  prefix: string;\n  dateFormat: string;\n  showValues: boolean;\n  noOfXTicks: number;\n  rightMargin: number;\n  leftMargin: number;\n  topMargin: number;\n  bottomMargin: 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  highlightAreaSettings: HighlightAreaSettingsDataType[];\n  maxValue?: number;\n  minValue?: number;\n  animate: AnimateDataType;\n  rtl: boolean;\n  strokeWidth: number;\n  showDots: boolean;\n  annotations: AnnotationSettingsDataType[];\n  customHighlightAreaSettings: CustomHighlightAreaSettingsDataType[];\n  regressionLine: boolean | string;\n  yAxisTitle?: string;\n  noOfYTicks: number;\n  minDate?: string | number;\n  maxDate?: string | number;\n  curveType: CurveTypes;\n  styles?: StyleObject;\n  classNames?: ClassNameObject;\n  precision: number;\n  customLayers: CustomLayerDataType[];\n  locale: string;\n  padZeros: boolean;\n}\n\ninterface FormattedDataType {\n  y: number;\n  date: Date;\n}\n\nexport function Graph(props: Props) {\n  const {\n    data,\n    width,\n    height,\n    lineColor,\n    suffix,\n    prefix,\n    dateFormat,\n    highlightAreaSettings,\n    showValues,\n    noOfXTicks,\n    rightMargin,\n    leftMargin,\n    topMargin,\n    bottomMargin,\n    tooltip,\n    onSeriesMouseOver,\n    refValues,\n    minValue,\n    maxValue,\n    animate,\n    rtl,\n    strokeWidth,\n    showDots,\n    annotations,\n    customHighlightAreaSettings,\n    regressionLine,\n    yAxisTitle,\n    noOfYTicks,\n    maxDate,\n    minDate,\n    curveType,\n    styles,\n    classNames,\n    precision,\n    customLayers,\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 [hasAnimatedOnce, setHasAnimatedOnce] = useState(false);\n\n  useEffect(() => {\n    if (isInView && !hasAnimatedOnce) {\n      const timeout = setTimeout(\n        () => {\n          setHasAnimatedOnce(true);\n        },\n        (animate.duration + 0.5) * 1000,\n      );\n      return () => clearTimeout(timeout);\n    }\n  }, [isInView, hasAnimatedOnce, animate.duration]);\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  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: yAxisTitle ? leftMargin + 30 : leftMargin,\n    right: rightMargin,\n  };\n  const MouseoverRectRef = useRef(null);\n  const dataFormatted = orderBy(\n    data.map((d) => ({\n      ...d,\n      date: parse(`${d.date}`, dateFormat, new Date()),\n    })),\n    ['date'],\n    ['asc'],\n  );\n  const highlightAreaSettingsFormatted = highlightAreaSettings.map((d) => ({\n    ...d,\n    coordinates: [\n      d.coordinates[0] === null ? null : parse(`${d.coordinates[0]}`, dateFormat, new Date()),\n      d.coordinates[1] === null ? null : parse(`${d.coordinates[1]}`, dateFormat, new Date()),\n    ],\n  }));\n  const customHighlightAreaSettingsFormatted = customHighlightAreaSettings.map((d) => ({\n    ...d,\n    coordinates: d.coordinates.map((el, j) =>\n      j % 2 === 0 ? parse(`${el}`, dateFormat, new Date()) : (el as number),\n    ),\n  }));\n  const graphWidth = width - margin.left - margin.right;\n  const graphHeight = height - margin.top - margin.bottom;\n  const minYear = minDate ? parse(`${minDate}`, dateFormat, new Date()) : dataFormatted[0].date;\n  const maxYear = maxDate\n    ? parse(`${maxDate}`, dateFormat, new Date())\n    : dataFormatted[dataFormatted.length - 1].date;\n  const minParam: number = !checkIfNullOrUndefined(minValue)\n    ? (minValue as number)\n    : Math.min(...dataFormatted.map((d) => d.y).filter((d) => d !== undefined && d !== null)) !==\n        Infinity\n      ? Math.min(...dataFormatted.map((d) => d.y).filter((d) => d !== undefined && d !== null)) > 0\n        ? 0\n        : Math.min(...dataFormatted.map((d) => d.y).filter((d) => d !== undefined && d !== null))\n      : 0;\n  const maxParam: number =\n    Math.max(...dataFormatted.map((d) => d.y).filter((d) => d !== undefined && d !== null)) !==\n    Infinity\n      ? Math.max(...dataFormatted.map((d) => d.y).filter((d) => d !== undefined && d !== null))\n      : 0;\n  const x = scaleTime().domain([minYear, maxYear]).range([0, graphWidth]);\n  const y = scaleLinear()\n    .domain([\n      minParam,\n      checkIfNullOrUndefined(maxValue) ? (maxParam > 0 ? maxParam : 0) : (maxValue as number),\n    ])\n    .range([graphHeight, 0])\n    .nice();\n\n  const lineShape = line<FormattedDataType>()\n    .x((d) => x(d.date))\n    .y((d) => y(d.y))\n    .curve(curve);\n  const yTicks = y.ticks(noOfYTicks);\n  const xTicks = x.ticks(noOfXTicks);\n  useEffect(() => {\n    // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n    const mousemove = (event: any) => {\n      const selectedData =\n        dataFormatted[\n          bisectCenter(\n            dataFormatted.map((d) => d.date),\n            x.invert(pointer(event)[0]),\n            0,\n          )\n        ];\n      setMouseOverData(selectedData || dataFormatted[dataFormatted.length - 1]);\n      onSeriesMouseOver?.(selectedData || dataFormatted[dataFormatted.length - 1]);\n      setEventY(event.clientY);\n      setEventX(event.clientX);\n    };\n    const mouseout = () => {\n      setMouseOverData(undefined);\n      setEventX(undefined);\n      setEventY(undefined);\n      onSeriesMouseOver?.(undefined);\n    };\n    select(MouseoverRectRef.current).on('mousemove', mousemove).on('mouseout', mouseout);\n  }, [x, dataFormatted, onSeriesMouseOver]);\n  const regressionLineParam = linearRegression(\n    dataFormatted\n      .filter((d) => !checkIfNullOrUndefined(d.date) && !checkIfNullOrUndefined(d.y))\n      .map((d) => [x(d.date), y(d.y as number)]),\n  );\n  const predict = linearRegressionLine(regressionLineParam);\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          <HighlightArea\n            areaSettings={highlightAreaSettingsFormatted}\n            width={graphWidth}\n            height={graphHeight}\n            scale={x}\n            animate={animate}\n            isInView={isInView}\n          />\n          <CustomArea\n            areaSettings={customHighlightAreaSettingsFormatted}\n            scaleX={x}\n            scaleY={y}\n            animate={animate}\n            isInView={isInView}\n          />\n          <g>\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            <Axis\n              y1={y(minParam < 0 ? 0 : minParam)}\n              y2={y(minParam < 0 ? 0 : minParam)}\n              x1={0 - leftMargin}\n              x2={graphWidth + margin.right}\n              label={numberFormattingFunction(\n                minParam < 0 ? 0 : minParam,\n                undefined,\n                precision,\n                prefix,\n                suffix,\n                locale,\n                padZeros,\n              )}\n              labelPos={{\n                x: 0 - leftMargin,\n                y: y(minParam < 0 ? 0 : minParam),\n                dx: 0,\n                dy: maxParam < 0 ? '1em' : -5,\n              }}\n              classNames={{\n                axis: classNames?.xAxis?.axis,\n                label: classNames?.yAxis?.labels,\n              }}\n              styles={{\n                axis: styles?.xAxis?.axis,\n                label: styles?.yAxis?.labels,\n              }}\n            />\n            <AxisTitle\n              x={0 - leftMargin - 15}\n              y={graphHeight / 2}\n              style={styles?.yAxis?.title}\n              className={classNames?.yAxis?.title}\n              text={yAxisTitle}\n              rotate90\n            />\n          </g>\n          <XTicksAndGridLines\n            values={xTicks.map((d) => format(d, dateFormat))}\n            x={xTicks.map((d) => x(d))}\n            y1={0}\n            y2={graphHeight}\n            styles={{\n              gridLines: styles?.xAxis?.gridLines,\n              labels: styles?.xAxis?.labels,\n            }}\n            classNames={{\n              gridLines: cn('opacity-0', classNames?.xAxis?.gridLines),\n              labels: cn(\n                'fill-primary-gray-700 dark:fill-primary-gray-300 xs:max-[360px]:hidden text-[9px] md:text-[10px] lg:text-xs',\n                classNames?.xAxis?.labels,\n              ),\n            }}\n            suffix={suffix}\n            prefix={prefix}\n            labelType='primary'\n            showGridLines\n            precision={precision}\n            locale={locale}\n            padZeros={padZeros}\n          />\n          {customLayers.filter((d) => d.position === 'before').map((d) => d.layer)}\n          <g>\n            <motion.path\n              style={{\n                stroke: lineColor,\n                fill: 'none',\n                strokeWidth,\n              }}\n              exit={{ opacity: 0, transition: { duration: animate.duration } }}\n              variants={{\n                initial: {\n                  pathLength: 0,\n                  d: lineShape(dataFormatted) || '',\n                  opacity: 1,\n                },\n                whileInView: {\n                  pathLength: 1,\n                  d: lineShape(dataFormatted) || '',\n                  opacity: 1,\n                  transition: { duration: animate.duration },\n                },\n              }}\n              initial='initial'\n              animate={isInView ? 'whileInView' : 'initial'}\n            />\n            {mouseOverData ? (\n              <line\n                y1={0}\n                y2={graphHeight}\n                x1={x(mouseOverData.date)}\n                x2={x(mouseOverData.date)}\n                className={cn(\n                  'undp-tick-line stroke-primary-gray-700 dark:stroke-primary-gray-100',\n                  classNames?.mouseOverLine,\n                )}\n                style={styles?.mouseOverLine}\n              />\n            ) : null}\n          </g>\n          <g>\n            {dataFormatted.map((d, i) => (\n              // biome-ignore lint/suspicious/noArrayIndexKey: index is the unique identifier\n              <motion.g key={i}>\n                {!checkIfNullOrUndefined(d.y) ? (\n                  <>\n                    {showDots ? (\n                      <motion.circle\n                        r={\n                          graphWidth / dataFormatted.length < 5\n                            ? 0\n                            : graphWidth / dataFormatted.length < 20\n                              ? 2\n                              : 4\n                        }\n                        exit={{ opacity: 0, transition: { duration: animate.duration } }}\n                        variants={{\n                          initial: {\n                            opacity: 0,\n                            cx: x(d.date),\n                            cy: y(d.y as number),\n                            fill: lineColor,\n                          },\n                          whileInView: {\n                            opacity: 1,\n                            fill: lineColor,\n                            transition: {\n                              duration: hasAnimatedOnce ? animate.duration : 0.5,\n                              delay: hasAnimatedOnce ? 0 : animate.duration,\n                            },\n                            cx: x(d.date),\n                            cy: y(d.y as number),\n                          },\n                        }}\n                        initial='initial'\n                        animate={isInView ? 'whileInView' : 'initial'}\n                      />\n                    ) : null}\n                    {showValues ? (\n                      <motion.text\n                        dy={-8}\n                        style={{\n                          textAnchor: 'middle',\n                          ...(styles?.graphObjectValues || {}),\n                        }}\n                        className={cn(\n                          'graph-value text-xs font-bold',\n                          classNames?.graphObjectValues,\n                        )}\n                        exit={{ opacity: 0, transition: { duration: animate.duration } }}\n                        variants={{\n                          initial: { opacity: 0, x: x(d.date), y: y(d.y) },\n                          whileInView: {\n                            opacity: 1,\n                            x: x(d.date),\n                            y: y(d.y),\n                            transition: {\n                              duration: hasAnimatedOnce ? animate.duration : 0.5,\n                              delay: hasAnimatedOnce ? 0 : animate.duration,\n                            },\n                          },\n                        }}\n                        initial='initial'\n                        animate={isInView ? 'whileInView' : 'initial'}\n                      >\n                        {numberFormattingFunction(\n                          d.y,\n                          undefined,\n                          precision,\n                          prefix,\n                          suffix,\n                          locale,\n                          padZeros,\n                        )}\n                      </motion.text>\n                    ) : null}\n                  </>\n                ) : null}\n              </motion.g>\n            ))}\n          </g>\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          <g>\n            {annotations.map((d) => {\n              const endPoints = getLineEndPoint(\n                {\n                  x: d.xCoordinate\n                    ? x(parse(`${d.xCoordinate}`, dateFormat, new Date())) + (d.xOffset || 0)\n                    : 0 + (d.xOffset || 0),\n                  y: d.yCoordinate\n                    ? y(d.yCoordinate as number) + (d.yOffset || 0) - 8\n                    : 0 + (d.yOffset || 0) - 8,\n                },\n                {\n                  x: d.xCoordinate ? x(parse(`${d.xCoordinate}`, dateFormat, new Date())) : 0,\n                  y: d.yCoordinate ? y(d.yCoordinate as number) : 0,\n                },\n                checkIfNullOrUndefined(d.connectorRadius) ? 3.5 : (d.connectorRadius as number),\n              );\n              const connectorSettings = d.showConnector\n                ? {\n                    y1: endPoints.y,\n                    x1: endPoints.x,\n                    y2: d.yCoordinate\n                      ? y(d.yCoordinate as number) + (d.yOffset || 0)\n                      : 0 + (d.yOffset || 0),\n                    x2: d.xCoordinate\n                      ? x(parse(`${d.xCoordinate}`, dateFormat, new Date())) + (d.xOffset || 0)\n                      : 0 + (d.xOffset || 0),\n                    cy: d.yCoordinate ? y(d.yCoordinate as number) : 0,\n                    cx: d.xCoordinate ? x(parse(`${d.xCoordinate}`, dateFormat, new Date())) : 0,\n                    circleRadius: checkIfNullOrUndefined(d.connectorRadius)\n                      ? 3.5\n                      : (d.connectorRadius as number),\n                    strokeWidth: d.showConnector === true ? 2 : Math.min(d.showConnector || 0, 1),\n                  }\n                : undefined;\n              const labelSettings = {\n                y: d.yCoordinate\n                  ? y(d.yCoordinate as number) + (d.yOffset || 0) - 8\n                  : 0 + (d.yOffset || 0) - 8,\n                x: rtl\n                  ? 0\n                  : d.xCoordinate\n                    ? x(parse(`${d.xCoordinate}`, dateFormat, new Date())) + (d.xOffset || 0)\n                    : 0 + (d.xOffset || 0),\n                width: rtl\n                  ? d.xCoordinate\n                    ? x(parse(`${d.xCoordinate}`, dateFormat, new Date())) + (d.xOffset || 0)\n                    : 0 + (d.xOffset || 0)\n                  : graphWidth +\n                    margin.right -\n                    (d.xCoordinate\n                      ? x(parse(`${d.xCoordinate}`, dateFormat, new Date())) + (d.xOffset || 0)\n                      : 0 + (d.xOffset || 0)),\n                maxWidth: d.maxWidth,\n                fontWeight: d.fontWeight,\n                align: d.align,\n              };\n              return (\n                <Annotation\n                  key={d.text}\n                  color={d.color}\n                  connectorsSettings={connectorSettings}\n                  labelSettings={labelSettings}\n                  text={d.text}\n                  classNames={d.classNames}\n                  styles={d.styles}\n                  animate={animate}\n                  isInView={isInView}\n                />\n              );\n            })}\n          </g>\n          <g>\n            {regressionLine ? (\n              <RegressionLine\n                x1={0}\n                x2={graphWidth}\n                y1={predict(0)}\n                y2={predict(graphWidth)}\n                graphHeight={graphHeight}\n                graphWidth={graphWidth}\n                className={classNames?.regLine}\n                style={styles?.regLine}\n                color={typeof regressionLine === 'string' ? regressionLine : undefined}\n                animate={animate}\n                isInView={isInView}\n              />\n            ) : null}\n          </g>\n          {customLayers.filter((d) => d.position === 'after').map((d) => d.layer)}\n          <rect\n            ref={MouseoverRectRef}\n            style={{\n              fill: 'none',\n              pointerEvents: 'all',\n            }}\n            width={graphWidth}\n            height={graphHeight}\n          />\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    </>\n  );\n}\n","import { useEffect, useRef, useState } from 'react';\nimport { Colors } from '@/Components/ColorPalette';\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  AnnotationSettingsDataType,\n  ClassNameObject,\n  CurveTypes,\n  CustomHighlightAreaSettingsDataType,\n  CustomLayerDataType,\n  HighlightAreaSettingsDataType,\n  Languages,\n  LineChartDataType,\n  NumberFormatOptions,\n  ReferenceDataType,\n  SourcesDataType,\n  StyleObject,\n} from '@/Types';\nimport { getNoOfTicks } from '@/Utils/getNoOfTicks';\nimport { Graph } from './Graph';\n\ninterface Props {\n  // Data\n  /** Array of data objects */\n  data: LineChartDataType[];\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  /** Colors of the lines */\n  lineColor?: 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\n  // Values and Ticks\n  /** Maximum value for the chart */\n  maxValue?: number;\n  /** Minimum value for the chart */\n  minValue?: number;\n  /** Reference values for comparison */\n  refValues?: ReferenceDataType[];\n  /** Maximum value of the date for the chart */\n  maxDate?: string | number;\n  /** Minimum value of the date for the chart */\n  minDate?: string | number;\n  /** No. of ticks on the x-axis  */\n  noOfXTicks?: number;\n  /** No. of ticks on the y-axis  */\n  noOfYTicks?: number;\n\n  // Graph Parameters\n  /** Toggle visibility of values */\n  showValues?: boolean;\n  /** Toggle visibility of dots on the line */\n  showDots?: boolean;\n  /** Stroke width of the line */\n  strokeWidth?: number;\n  /** Toggle the initial animation of the line. If the type is number then it uses the number as the time in seconds for animation. */\n  animate?: boolean | AnimateDataType;\n  /** Format of the date in the data object. Available formats can be found [here](https://date-fns.org/docs/format)  */\n  dateFormat?: string;\n  /** Title for the Y-axis */\n  yAxisTitle?: string;\n  /** Annotations on the chart */\n  annotations?: AnnotationSettingsDataType[];\n  /** Highlighted area(square) on the chart  */\n  highlightAreaSettings?: HighlightAreaSettingsDataType[];\n  /** Highlighted area(custom shape) on the chart  */\n  customHighlightAreaSettings?: CustomHighlightAreaSettingsDataType[];\n  /** Toggles the visibility of the regression line for the data. If the type is string then string is use to define the color of the line. */\n  regressionLine?: boolean | string;\n  /** Curve type for the line */\n  curveType?: CurveTypes;\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  /** Callback for mouse over event */\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  onSeriesMouseOver?: (_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 SimpleLineChart(props: Props) {\n  const {\n    data,\n    graphTitle,\n    lineColor,\n    sources,\n    graphDescription,\n    height,\n    width,\n    footNote,\n    noOfXTicks = 10,\n    dateFormat = 'yyyy',\n    showValues = false,\n    padding,\n    backgroundColor = false,\n    leftMargin = 30,\n    rightMargin = 30,\n    topMargin = 20,\n    bottomMargin = 25,\n    relativeHeight,\n    tooltip,\n    onSeriesMouseOver,\n    highlightAreaSettings = [],\n    graphID,\n    minValue,\n    maxValue,\n    maxDate,\n    minDate,\n    graphDownload = false,\n    dataDownload = false,\n    animate = false,\n    language = 'en',\n    refValues = [],\n    minHeight = 0,\n    strokeWidth = 2,\n    showDots = true,\n    annotations = [],\n    customHighlightAreaSettings = [],\n    theme = 'light',\n    ariaLabel,\n    regressionLine = false,\n    yAxisTitle,\n    noOfYTicks = 5,\n    curveType = 'curve',\n    styles,\n    classNames,\n    customLayers = [],\n    numberDisplayOptions,\n  } = props;\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  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      <GraphArea ref={graphDiv}>\n        {data.length === 0 && <EmptyState />}\n        {svgWidth && svgHeight && data.length > 0 ? (\n          <Graph\n            data={data}\n            lineColor={lineColor || Colors.primaryColors['blue-600']}\n            width={svgWidth}\n            height={svgHeight}\n            dateFormat={dateFormat}\n            showValues={showValues}\n            noOfXTicks={noOfXTicks ?? getNoOfTicks(svgWidth)}\n            leftMargin={leftMargin}\n            rightMargin={rightMargin}\n            topMargin={topMargin}\n            bottomMargin={bottomMargin}\n            tooltip={tooltip}\n            highlightAreaSettings={highlightAreaSettings}\n            onSeriesMouseOver={onSeriesMouseOver}\n            refValues={refValues}\n            minValue={minValue}\n            maxValue={maxValue}\n            animate={\n              animate === true\n                ? { duration: 0.5, once: true, amount: 0.5 }\n                : animate || { duration: 0, once: true, amount: 0 }\n            }\n            rtl={language === 'he' || language === 'ar'}\n            strokeWidth={strokeWidth}\n            showDots={showDots}\n            annotations={annotations}\n            customHighlightAreaSettings={customHighlightAreaSettings}\n            regressionLine={regressionLine}\n            yAxisTitle={yAxisTitle}\n            noOfYTicks={noOfYTicks}\n            maxDate={maxDate}\n            minDate={minDate}\n            curveType={curveType}\n            styles={styles}\n            classNames={classNames}\n            customLayers={customLayers}\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          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/LineChart-Do_hKdIv.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`),i=require(`./GraphHeader.cjs`),a=require(`./checkIfNullOrUndefined-DYvc3fz_.cjs`),o=require(`./GraphContainer-7xAPK4Tb.cjs`),s=require(`./parse-C718o4YM.cjs`),c=require(`./lodash.orderby-Us2PHq2D.cjs`),l=require(`./EmptyState-Bq7ZJmZB.cjs`),u=require(`./init-BTypmXMF.cjs`),ee=require(`./linear-B93YyHf_.cjs`),d=require(`./time-B9tsaA4g.cjs`),f=require(`./proxy-DaRMphjR.cjs`),te=require(`./use-in-view-C4EPQfwM.cjs`),ne=require(`./Axis-BbfI4T5K.cjs`),re=require(`./AxisTitle-Co2DmqOy.cjs`),p=require(`./numberFormattingFunction-Caf5NyIo.cjs`),ie=require(`./XTicksAndGridLines-8v1W02Pd.cjs`),ae=require(`./YTicksAndGridLines-CRW_R845.cjs`),m=require(`./ReferenceLine-Dltt-xtO.cjs`),oe=require(`./Tooltip-CO_iOj_w.cjs`),h=require(`./line-DoUnRqpS.cjs`),g=require(`./step-C_FLQezZ.cjs`),se=require(`./getNoOfTicks-CwG9lMmQ.cjs`),ce=require(`./select-CZVfejpg.cjs`),le=require(`./pointer-nSSkgdlX.cjs`),_=require(`./getLineEndPoint-CahgY2dz.cjs`),ue=require(`./HighlightArea-CJ2XwY67.cjs`),v=require(`./simple-statistics-B4XnKTMF.cjs`),de=require(`./RegressionLine-Cju7e0DE.cjs`);let y=require(`@undp/design-system-react/cn`),b=require(`react`);var fe=e.a(c.t(),1),x=t.t();function pe(e){let{data:t,width:n,height:r,lineColor:i,suffix:o,prefix:c,dateFormat:l,highlightAreaSettings:se,showValues:pe,noOfXTicks:S,rightMargin:C,leftMargin:w,topMargin:T,bottomMargin:me,tooltip:E,onSeriesMouseOver:D,refValues:he,minValue:O,maxValue:k,animate:A,rtl:j,strokeWidth:ge,showDots:_e,annotations:ve,customHighlightAreaSettings:ye,regressionLine:M,yAxisTitle:N,noOfYTicks:be,maxDate:P,minDate:F,curveType:I,styles:L,classNames:R,precision:z,customLayers:B,locale:V,padZeros:H}=e,xe=(0,b.useRef)(null),U=te.t(xe,{once:A.once,amount:A.amount}),[W,Se]=(0,b.useState)(!1);(0,b.useEffect)(()=>{if(U&&!W){let e=setTimeout(()=>{Se(!0)},(A.duration+.5)*1e3);return()=>clearTimeout(e)}},[U,W,A.duration]);let Ce=I===`linear`?h.i:I===`step`?g.r:I===`stepAfter`?g.t:I===`stepBefore`?g.n:g.i,[G,we]=(0,b.useState)(void 0),[Te,Ee]=(0,b.useState)(void 0),[De,Oe]=(0,b.useState)(void 0),K={top:T,bottom:me,left:N?w+30:w,right:C},ke=(0,b.useRef)(null),q=(0,fe.default)(t.map(e=>({...e,date:s.t(`${e.date}`,l,new Date)})),[`date`],[`asc`]),Ae=se.map(e=>({...e,coordinates:[e.coordinates[0]===null?null:s.t(`${e.coordinates[0]}`,l,new Date),e.coordinates[1]===null?null:s.t(`${e.coordinates[1]}`,l,new Date)]})),je=ye.map(e=>({...e,coordinates:e.coordinates.map((e,t)=>t%2==0?s.t(`${e}`,l,new Date):e)})),J=n-K.left-K.right,Y=r-K.top-K.bottom,Me=F?s.t(`${F}`,l,new Date):q[0].date,Ne=P?s.t(`${P}`,l,new Date):q[q.length-1].date,X=a.t(O)?Math.min(...q.map(e=>e.y).filter(e=>e!=null))===1/0||Math.min(...q.map(e=>e.y).filter(e=>e!=null))>0?0:Math.min(...q.map(e=>e.y).filter(e=>e!=null)):O,Z=Math.max(...q.map(e=>e.y).filter(e=>e!=null))===1/0?0:Math.max(...q.map(e=>e.y).filter(e=>e!=null)),Q=d.t().domain([Me,Ne]).range([0,J]),$=ee.t().domain([X,a.t(k)?Z>0?Z:0:k]).range([Y,0]).nice(),Pe=h.t().x(e=>Q(e.date)).y(e=>$(e.y)).curve(Ce),Fe=$.ticks(be),Ie=Q.ticks(S);(0,b.useEffect)(()=>{ce.t(ke.current).on(`mousemove`,e=>{let t=q[u.n(q.map(e=>e.date),Q.invert(le.t(e)[0]),0)];we(t||q[q.length-1]),D?.(t||q[q.length-1]),Oe(e.clientY),Ee(e.clientX)}).on(`mouseout`,()=>{we(void 0),Ee(void 0),Oe(void 0),D?.(void 0)})},[Q,q,D]);let Le=v.r(v.n(q.filter(e=>!a.t(e.date)&&!a.t(e.y)).map(e=>[Q(e.date),$(e.y)])));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:xe,children:(0,x.jsxs)(`g`,{transform:`translate(${K.left},${K.top})`,children:[(0,x.jsx)(ue.t,{areaSettings:Ae,width:J,height:Y,scale:Q,animate:A,isInView:U}),(0,x.jsx)(_.n,{areaSettings:je,scaleX:Q,scaleY:$,animate:A,isInView:U}),(0,x.jsxs)(`g`,{children:[(0,x.jsx)(ae.t,{values:Fe.filter(e=>e!==0),y:Fe.filter(e=>e!==0).map(e=>$(e)),x1:0-w,x2:J+K.right,styles:{gridLines:L?.yAxis?.gridLines,labels:L?.yAxis?.labels},classNames:{gridLines:R?.yAxis?.gridLines,labels:R?.yAxis?.labels},suffix:o,prefix:c,labelType:`secondary`,showGridLines:!0,labelPos:`vertical`,precision:z,locale:V,padZeros:H}),(0,x.jsx)(ne.t,{y1:$(X<0?0:X),y2:$(X<0?0:X),x1:0-w,x2:J+K.right,label:p.t(X<0?0:X,void 0,z,c,o,V,H),labelPos:{x:0-w,y:$(X<0?0:X),dx:0,dy:Z<0?`1em`:-5},classNames:{axis:R?.xAxis?.axis,label:R?.yAxis?.labels},styles:{axis:L?.xAxis?.axis,label:L?.yAxis?.labels}}),(0,x.jsx)(re.t,{x:0-w-15,y:Y/2,style:L?.yAxis?.title,className:R?.yAxis?.title,text:N,rotate90:!0})]}),(0,x.jsx)(ie.t,{values:Ie.map(e=>s.n(e,l)),x:Ie.map(e=>Q(e)),y1:0,y2:Y,styles:{gridLines:L?.xAxis?.gridLines,labels:L?.xAxis?.labels},classNames:{gridLines:(0,y.cn)(`opacity-0`,R?.xAxis?.gridLines),labels:(0,y.cn)(`fill-primary-gray-700 dark:fill-primary-gray-300 xs:max-[360px]:hidden text-[9px] md:text-[10px] lg:text-xs`,R?.xAxis?.labels)},suffix:o,prefix:c,labelType:`primary`,showGridLines:!0,precision:z,locale:V,padZeros:H}),B.filter(e=>e.position===`before`).map(e=>e.layer),(0,x.jsxs)(`g`,{children:[(0,x.jsx)(f.t.path,{style:{stroke:i,fill:`none`,strokeWidth:ge},exit:{opacity:0,transition:{duration:A.duration}},variants:{initial:{pathLength:0,d:Pe(q)||``,opacity:1},whileInView:{pathLength:1,d:Pe(q)||``,opacity:1,transition:{duration:A.duration}}},initial:`initial`,animate:U?`whileInView`:`initial`}),G?(0,x.jsx)(`line`,{y1:0,y2:Y,x1:Q(G.date),x2:Q(G.date),className:(0,y.cn)(`undp-tick-line stroke-primary-gray-700 dark:stroke-primary-gray-100`,R?.mouseOverLine),style:L?.mouseOverLine}):null]}),(0,x.jsx)(`g`,{children:q.map((e,t)=>(0,x.jsx)(f.t.g,{children:a.t(e.y)?null:(0,x.jsxs)(x.Fragment,{children:[_e?(0,x.jsx)(f.t.circle,{r:J/q.length<5?0:J/q.length<20?2:4,exit:{opacity:0,transition:{duration:A.duration}},variants:{initial:{opacity:0,cx:Q(e.date),cy:$(e.y),fill:i},whileInView:{opacity:1,fill:i,transition:{duration:W?A.duration:.5,delay:W?0:A.duration},cx:Q(e.date),cy:$(e.y)}},initial:`initial`,animate:U?`whileInView`:`initial`}):null,pe?(0,x.jsx)(f.t.text,{dy:-8,style:{textAnchor:`middle`,...L?.graphObjectValues||{}},className:(0,y.cn)(`graph-value text-xs font-bold`,R?.graphObjectValues),exit:{opacity:0,transition:{duration:A.duration}},variants:{initial:{opacity:0,x:Q(e.date),y:$(e.y)},whileInView:{opacity:1,x:Q(e.date),y:$(e.y),transition:{duration:W?A.duration:.5,delay:W?0:A.duration}}},initial:`initial`,animate:U?`whileInView`:`initial`,children:p.t(e.y,void 0,z,c,o,V,H)}):null]})},t))}),he?.map(e=>(0,x.jsx)(m.n,{text:e.text,color:e.color,y:$(e.value),x1:0-w,x2:J+K.right,classNames:e.classNames,styles:e.styles,animate:A,isInView:U},e.text)),(0,x.jsx)(`g`,{children:ve.map(e=>{let t=_.t({x:e.xCoordinate?Q(s.t(`${e.xCoordinate}`,l,new Date))+(e.xOffset||0):0+(e.xOffset||0),y:e.yCoordinate?$(e.yCoordinate)+(e.yOffset||0)-8:0+(e.yOffset||0)-8},{x:e.xCoordinate?Q(s.t(`${e.xCoordinate}`,l,new Date)):0,y:e.yCoordinate?$(e.yCoordinate):0},a.t(e.connectorRadius)?3.5:e.connectorRadius),n=e.showConnector?{y1:t.y,x1:t.x,y2:e.yCoordinate?$(e.yCoordinate)+(e.yOffset||0):0+(e.yOffset||0),x2:e.xCoordinate?Q(s.t(`${e.xCoordinate}`,l,new Date))+(e.xOffset||0):0+(e.xOffset||0),cy:e.yCoordinate?$(e.yCoordinate):0,cx:e.xCoordinate?Q(s.t(`${e.xCoordinate}`,l,new Date)):0,circleRadius:a.t(e.connectorRadius)?3.5:e.connectorRadius,strokeWidth:e.showConnector===!0?2:Math.min(e.showConnector||0,1)}:void 0,r={y:e.yCoordinate?$(e.yCoordinate)+(e.yOffset||0)-8:0+(e.yOffset||0)-8,x:j?0:e.xCoordinate?Q(s.t(`${e.xCoordinate}`,l,new Date))+(e.xOffset||0):0+(e.xOffset||0),width:j?e.xCoordinate?Q(s.t(`${e.xCoordinate}`,l,new Date))+(e.xOffset||0):0+(e.xOffset||0):J+K.right-(e.xCoordinate?Q(s.t(`${e.xCoordinate}`,l,new Date))+(e.xOffset||0):0+(e.xOffset||0)),maxWidth:e.maxWidth,fontWeight:e.fontWeight,align:e.align};return(0,x.jsx)(_.r,{color:e.color,connectorsSettings:n,labelSettings:r,text:e.text,classNames:e.classNames,styles:e.styles,animate:A,isInView:U},e.text)})}),(0,x.jsx)(`g`,{children:M?(0,x.jsx)(de.t,{x1:0,x2:J,y1:Le(0),y2:Le(J),graphHeight:Y,graphWidth:J,className:R?.regLine,style:L?.regLine,color:typeof M==`string`?M:void 0,animate:A,isInView:U}):null}),B.filter(e=>e.position===`after`).map(e=>e.layer),(0,x.jsx)(`rect`,{ref:ke,style:{fill:`none`,pointerEvents:`all`},width:J,height:Y})]})}),G&&E&&Te&&De?(0,x.jsx)(oe.t,{data:G,body:E,xPos:Te,yPos:De,backgroundStyle:L?.tooltip,className:R?.tooltip}):null]})}function S(e){let{data:t,graphTitle:a,lineColor:s,sources:c,graphDescription:u,height:ee,width:d,footNote:f,noOfXTicks:te=10,dateFormat:ne=`yyyy`,showValues:re=!1,padding:p,backgroundColor:ie=!1,leftMargin:ae=30,rightMargin:m=30,topMargin:oe=20,bottomMargin:h=25,relativeHeight:g,tooltip:ce,onSeriesMouseOver:le,highlightAreaSettings:_=[],graphID:ue,minValue:v,maxValue:de,maxDate:y,minDate:fe,graphDownload:S=!1,dataDownload:C=!1,animate:w=!1,language:T=`en`,refValues:me=[],minHeight:E=0,strokeWidth:D=2,showDots:he=!0,annotations:O=[],customHighlightAreaSettings:k=[],theme:A=`light`,ariaLabel:j,regressionLine:ge=!1,yAxisTitle:_e,noOfYTicks:ve=5,curveType:ye=`curve`,styles:M,classNames:N,customLayers:be=[],numberDisplayOptions:P}=e,[F,I]=(0,b.useState)(0),[L,R]=(0,b.useState)(0),z=(0,b.useRef)(null),B=(0,b.useRef)(null);return(0,b.useEffect)(()=>{let e=new ResizeObserver(e=>{I(e[0].target.clientWidth||620),R(e[0].target.clientHeight||480)});return z.current&&e.observe(z.current),()=>e.disconnect()},[]),(0,x.jsxs)(o.n,{className:N?.graphContainer,style:M?.graphContainer,id:ue,ref:B,"aria-label":j,backgroundColor:ie,theme:A,language:T,minHeight:E,width:d,height:ee,relativeHeight:g,padding:p,children:[a||u||S||C?(0,x.jsx)(i.GraphHeader,{styles:{title:M?.title,description:M?.description},classNames:{title:N?.title,description:N?.description},graphTitle:a,graphDescription:u,width:d,graphDownload:S?B:void 0,dataDownload:C?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,(0,x.jsxs)(o.t,{ref:z,children:[t.length===0&&(0,x.jsx)(l.t,{}),F&&L&&t.length>0?(0,x.jsx)(pe,{data:t,lineColor:s||n.Colors.primaryColors[`blue-600`],width:F,height:L,dateFormat:ne,showValues:re,noOfXTicks:te??se.t(F),leftMargin:ae,rightMargin:m,topMargin:oe,bottomMargin:h,tooltip:ce,highlightAreaSettings:_,onSeriesMouseOver:le,refValues:me,minValue:v,maxValue:de,animate:w===!0?{duration:.5,once:!0,amount:.5}:w||{duration:0,once:!0,amount:0},rtl:T===`he`||T===`ar`,strokeWidth:D,showDots:he,annotations:O,customHighlightAreaSettings:k,regressionLine:ge,yAxisTitle:_e,noOfYTicks:ve,maxDate:y,minDate:fe,curveType:ye,styles:M,classNames:N,customLayers:be,locale:P?.locale||`en`,padZeros:P?.padZeros||!1,suffix:P?.suffix||``,prefix:P?.prefix||``,precision:P?.precision??2}):null]}),c||f?(0,x.jsx)(r.GraphFooter,{styles:{footnote:M?.footnote,source:M?.source},classNames:{footnote:N?.footnote,source:N?.source},sources:c,footNote:f,width:d}):null]})}Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return S}});
+//# sourceMappingURL=LineChart-Do_hKdIv.cjs.map