@undp/data-viz 2.6.0 → 2.6.1

package/dist/DifferenceLineChart-BVSQviFB.js

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