@undp/data-viz 2.6.0 → 2.6.1

package/dist/MultiLineChart-BB13IJLX.js

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

package/dist/MultiLineChart-BB13IJLX.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiLineChart-BB13IJLX.js","names":[],"sources":["../src/Components/Graphs/LineCharts/MultiLineChart/Graph.tsx","../src/Components/Graphs/LineCharts/MultiLineChart/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 { 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 { Tooltip } from '@/Components/Elements/Tooltip';\nimport type {\n  AnimateDataType,\n  AnnotationSettingsDataType,\n  ClassNameObject,\n  CurveTypes,\n  CustomHighlightAreaSettingsDataType,\n  CustomLayerDataType,\n  HighlightAreaSettingsDataType,\n  MultiLineChartDataType,\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\n  /** Array of data objects */\n  data: MultiLineChartDataType[];\n  lineColors: string[];\n  width: number;\n  height: number;\n  dateFormat: string;\n  noOfXTicks: number;\n  labels: (string | number)[];\n  topMargin: number;\n  bottomMargin: number;\n  leftMargin: number;\n  rightMargin: number;\n  suffix: string;\n  prefix: string;\n  showValues: 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  showColorLegendAtTop: boolean;\n  highlightAreaSettings: HighlightAreaSettingsDataType[];\n  refValues: ReferenceDataType[];\n  maxValue?: number;\n  minValue?: number;\n  highlightedLines?: (string | number)[];\n  animate: AnimateDataType;\n  rtl: boolean;\n  strokeWidth: number;\n  showDots: boolean;\n  annotations: AnnotationSettingsDataType[];\n  customHighlightAreaSettings: CustomHighlightAreaSettingsDataType[];\n  yAxisTitle?: string;\n  noOfYTicks: number;\n  minDate?: string | number;\n  maxDate?: string | number;\n  curveType: CurveTypes;\n  styles?: StyleObject;\n  classNames?: ClassNameObject;\n  dimmedOpacity: number;\n  precision: number;\n  customLayers: CustomLayerDataType[];\n  dashedLines: (string | number)[];\n  dashSettings: string[];\n  labelsToBeHidden: (string | number)[];\n  revealClipId: string;\n  locale: string;\n  naLabel: 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    lineColors,\n    dateFormat,\n    noOfXTicks,\n    labels,\n    rightMargin,\n    topMargin,\n    bottomMargin,\n    suffix,\n    prefix,\n    leftMargin,\n    tooltip,\n    onSeriesMouseOver,\n    showValues,\n    showColorLegendAtTop,\n    refValues,\n    highlightAreaSettings,\n    minValue,\n    maxValue,\n    highlightedLines,\n    animate,\n    rtl,\n    strokeWidth,\n    showDots,\n    annotations,\n    customHighlightAreaSettings,\n    yAxisTitle,\n    noOfYTicks,\n    minDate,\n    maxDate,\n    curveType,\n    styles,\n    classNames,\n    dimmedOpacity,\n    precision,\n    customLayers,\n    dashedLines,\n    dashSettings,\n    labelsToBeHidden,\n    revealClipId,\n    locale,\n    naLabel,\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 dataArray = dataFormatted[0].y.map((_d, i) => {\n    return dataFormatted\n      .map((el) => ({\n        ...el,\n        y: el.y[i],\n      }))\n      .filter((el) => !checkIfNullOrUndefined(el.y));\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    ? Math.min(\n        ...dataFormatted.map((d) =>\n          Math.min(...(d.y.filter((el) => !checkIfNullOrUndefined(el)) as number[])),\n        ),\n      )\n      ? Math.min(\n          ...dataFormatted.map((d) =>\n            Math.min(...(d.y.filter((el) => !checkIfNullOrUndefined(el)) as number[])),\n          ),\n        ) > 0\n        ? 0\n        : Math.min(\n            ...dataFormatted.map((d) =>\n              Math.min(...(d.y.filter((el) => !checkIfNullOrUndefined(el)) as number[])),\n            ),\n          )\n      : 0\n    : (minValue as number);\n  const maxParam: number = Math.max(\n    ...dataFormatted.map((d) =>\n      Math.max(...(d.y.filter((el) => !checkIfNullOrUndefined(el)) as number[])),\n    ),\n  )\n    ? Math.max(\n        ...dataFormatted.map((d) =>\n          Math.max(...(d.y.filter((el) => !checkIfNullOrUndefined(el)) as number[])),\n        ),\n      )\n    : 0;\n\n  const x = scaleTime().domain([minYear, maxYear]).range([0, graphWidth]);\n  const y = scaleLinear()\n    .domain([\n      checkIfNullOrUndefined(minValue) ? minParam : (minValue as number),\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\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      setEventY(event.clientY);\n      setEventX(event.clientX);\n      onSeriesMouseOver?.(selectedData || dataFormatted[dataFormatted.length - 1]);\n    };\n    const mouseout = () => {\n      setMouseOverData(undefined);\n      setEventX(undefined);\n      setEventY(undefined);\n    };\n    select(MouseoverRectRef.current).on('mousemove', mousemove).on('mouseout', mouseout);\n    onSeriesMouseOver?.(undefined);\n  }, [x, dataFormatted, onSeriesMouseOver]);\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          <defs>\n            <clipPath id={revealClipId}>\n              <motion.rect\n                x={0}\n                y={0}\n                height={graphHeight}\n                variants={{\n                  initial: { width: 0 },\n                  whileInView: {\n                    width: graphWidth,\n                    transition: { duration: animate.duration },\n                  },\n                }}\n                initial='initial'\n                animate={isInView ? 'whileInView' : 'initial'}\n              />\n            </clipPath>\n          </defs>\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          <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          </g>\n          {customLayers.filter((d) => d.position === 'before').map((d) => d.layer)}\n          <g>\n            {dataArray.map((d, i) => (\n              <motion.g\n                key={labels[i]}\n                exit={{ opacity: 0, transition: { duration: animate.duration } }}\n                variants={{\n                  initial: {\n                    opacity: highlightedLines\n                      ? highlightedLines.indexOf(labels[i]) !== -1\n                        ? 1\n                        : dimmedOpacity\n                      : 1,\n                  },\n                  whileInView: {\n                    opacity: highlightedLines\n                      ? highlightedLines.indexOf(labels[i]) !== -1\n                        ? 1\n                        : dimmedOpacity\n                      : 1,\n                    transition: { duration: animate.duration },\n                  },\n                }}\n                initial='initial'\n                animate={isInView ? 'whileInView' : 'initial'}\n              >\n                <motion.path\n                  style={{\n                    fill: 'none',\n                    strokeWidth,\n                  }}\n                  clipPath={`url(#${revealClipId})`}\n                  exit={{ opacity: 0, transition: { duration: animate.duration } }}\n                  variants={{\n                    initial: {\n                      ...(dashedLines.length === 0 ? { pathLength: 0 } : {}),\n                      d:\n                        lineShape(\n                          d.filter((el): el is FormattedDataType => !checkIfNullOrUndefined(el.y)),\n                        ) || '',\n                      opacity: 1,\n                      stroke: lineColors[i],\n                    },\n                    whileInView: {\n                      ...(dashedLines.length === 0 ? { pathLength: 1 } : {}),\n                      d:\n                        lineShape(\n                          d.filter((el): el is FormattedDataType => !checkIfNullOrUndefined(el.y)),\n                        ) || '',\n                      opacity: 1,\n                      stroke: lineColors[i],\n                      transition: { duration: animate.duration },\n                    },\n                  }}\n                  strokeDasharray={\n                    dashedLines.includes(labels[i])\n                      ? dashSettings[i % dashSettings.length]\n                      : undefined\n                  }\n                  initial='initial'\n                  animate={isInView ? 'whileInView' : 'initial'}\n                />\n                {d.map((el, j) => (\n                  // biome-ignore lint/suspicious/noArrayIndexKey: index is the unique identifier\n                  <g key={j}>\n                    {!checkIfNullOrUndefined(el.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                                fill: lineColors[i],\n                                cx: x(el.date),\n                                cy: y(el.y as number),\n                              },\n                              whileInView: {\n                                opacity: 1,\n                                fill: lineColors[i],\n                                transition: {\n                                  duration: hasAnimatedOnce ? animate.duration : 0.5,\n                                  delay: hasAnimatedOnce ? 0 : animate.duration,\n                                },\n                                cx: x(el.date),\n                                cy: y(el.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: {\n                                opacity: 0,\n                                fill: lineColors[i],\n                                x: x(el.date),\n                                y: y(el.y as number),\n                              },\n                              whileInView: {\n                                opacity: 1,\n                                fill: lineColors[i],\n                                x: x(el.date),\n                                y: y(el.y as number),\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                              el.y,\n                              naLabel,\n                              precision,\n                              prefix,\n                              suffix,\n                              locale,\n                              padZeros,\n                            )}\n                          </motion.text>\n                        ) : null}\n                      </>\n                    ) : null}\n                  </g>\n                ))}\n                {showColorLegendAtTop || labelsToBeHidden.includes(labels[i]) ? null : (\n                  <motion.text\n                    className='text-xs'\n                    dx={5}\n                    dy={4}\n                    exit={{ opacity: 0, transition: { duration: animate.duration } }}\n                    variants={{\n                      initial: {\n                        opacity: 0,\n                        fill: lineColors[i],\n                        x: x(d[d.length - 1].date),\n                        y: y(d[d.length - 1].y as number),\n                      },\n                      whileInView: {\n                        opacity: 1,\n                        fill: lineColors[i],\n                        x: x(d[d.length - 1].date),\n                        y: y(d[d.length - 1].y as number),\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                    {labels[i]}\n                  </motion.text>\n                )}\n              </motion.g>\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          {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          {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 { 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  AnnotationSettingsDataType,\n  ClassNameObject,\n  CurveTypes,\n  CustomHighlightAreaSettingsDataType,\n  CustomLayerDataType,\n  HighlightAreaSettingsDataType,\n  Languages,\n  MultiLineChartDataType,\n  NumberFormatOptions,\n  ReferenceDataType,\n  SourcesDataType,\n  StyleObject,\n} from '@/Types';\nimport { generateRandomString } from '@/Utils/generateRandomString';\nimport { getNoOfTicks } from '@/Utils/getNoOfTicks';\nimport { Graph } from './Graph';\n\ninterface Props {\n  // Data\n  /** Array of data objects */\n  data: MultiLineChartDataType[];\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  /** Array of colors of the lines */\n  lineColors?: string[];\n  /** Toggle the visibility of color legend between the top of the graphs and next to the line */\n  showColorLegendAtTop?: boolean;\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  /** Array of labels of line which are dashed */\n  dashedLines?: (string | number)[];\n  /** Array of dash settings that define the dash style for the dashed line. If the length of the array is less than length of dashedLines then it loop around. */\n  dashSettings?: string[];\n  /** Defines which labels are hidden from the color scale and the graph */\n  labelsToBeHidden?: (string | 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  /** Toggle visibility of color scale. */\n  showColorScale?: 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  /** Labels for the lines  */\n  labels: (string | number)[];\n  /** Data points to highlight. Use the label value from data to highlight the data point */\n  highlightedLines?: (string | number)[];\n  /** Defines the opacity of the non-highlighted data */\n  dimmedOpacity?: number;\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  /** 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  /** Defines how “NA” values should be displayed/labelled in the graph */\n  naLabel?: string;\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 MultiLineChart(props: Props) {\n  const {\n    data,\n    graphTitle,\n    lineColors = Colors.light.categoricalColors.colors,\n    sources,\n    graphDescription,\n    height,\n    width,\n    footNote,\n    noOfXTicks = 10,\n    dateFormat = 'yyyy',\n    labels,\n    padding,\n    showValues = false,\n    backgroundColor = false,\n    leftMargin = 30,\n    rightMargin = 50,\n    topMargin = 20,\n    bottomMargin = 25,\n    tooltip,\n    relativeHeight,\n    onSeriesMouseOver,\n    showColorLegendAtTop = false,\n    refValues = [],\n    highlightAreaSettings = [],\n    graphID,\n    minValue,\n    maxValue,\n    highlightedLines,\n    graphDownload = false,\n    dataDownload = false,\n    animate = false,\n    language = 'en',\n    colorLegendTitle,\n    minHeight = 0,\n    strokeWidth = 2,\n    showDots = true,\n    annotations = [],\n    customHighlightAreaSettings = [],\n    theme = 'light',\n    ariaLabel,\n    yAxisTitle,\n    noOfYTicks = 5,\n    minDate,\n    maxDate,\n    curveType = 'curve',\n    styles,\n    classNames,\n    dimmedOpacity = 0.3,\n    customLayers = [],\n    dashedLines = [],\n    dashSettings = ['5 5'],\n    labelsToBeHidden = [],\n    showColorScale = true,\n    numberDisplayOptions,\n    naLabel = 'NA',\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      {showColorLegendAtTop && showColorScale && data.length > 0 ? (\n        <ColorLegend\n          colorDomain={labels}\n          colorLegendTitle={colorLegendTitle}\n          labelsToBeHidden={labelsToBeHidden}\n          colors={lineColors}\n          showNAColor={false}\n          className={classNames?.colorLegend}\n        />\n      ) : null}\n      <GraphArea ref={graphDiv}>\n        {data.length === 0 && <EmptyState />}\n        {svgWidth && svgHeight && data.length > 0 ? (\n          <Graph\n            data={data}\n            lineColors={lineColors}\n            width={svgWidth}\n            height={svgHeight}\n            dateFormat={dateFormat}\n            noOfXTicks={noOfXTicks ?? getNoOfTicks(svgWidth)}\n            leftMargin={leftMargin}\n            rightMargin={rightMargin}\n            topMargin={topMargin}\n            bottomMargin={bottomMargin}\n            labels={labels}\n            tooltip={tooltip}\n            onSeriesMouseOver={onSeriesMouseOver}\n            showColorLegendAtTop={showColorScale ? showColorLegendAtTop : true}\n            showValues={showValues}\n            highlightAreaSettings={highlightAreaSettings}\n            refValues={refValues}\n            minValue={minValue}\n            maxValue={maxValue}\n            highlightedLines={highlightedLines}\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            yAxisTitle={yAxisTitle}\n            noOfYTicks={noOfYTicks}\n            minDate={minDate}\n            maxDate={maxDate}\n            curveType={curveType}\n            styles={styles}\n            classNames={classNames}\n            dimmedOpacity={dimmedOpacity}\n            customLayers={customLayers}\n            labelsToBeHidden={labelsToBeHidden}\n            dashedLines={dashedLines}\n            dashSettings={dashSettings}\n            revealClipId={generateRandomString(8)}\n            naLabel={naLabel}\n            locale={numberDisplayOptions?.locale || 'en'}\n            padZeros={numberDisplayOptions?.padZeros || false}\n            suffix={numberDisplayOptions?.suffix || ''}\n            prefix={numberDisplayOptions?.prefix || ''}\n            precision={numberDisplayOptions?.precision ?? 2}\n          />\n        ) : null}\n      </GraphArea>\n      {sources || footNote ? (\n        <GraphFooter\n          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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"}