@undp/data-viz 2.5.4 → 2.6.1

package/dist/DumbbellChart-bqOnq8ZF.js

@@ -0,0 +1,784 @@
+import { o as e } from "./chunk-foFoljWS.js";
+import { t } from "./jsx-runtime-C76bEyh7.js";
+import { l as n, u as r } from "./Icons-BLXwPP3h.js";
+import { Colors as i } from "./Colors.js";
+import { GraphFooter as ee } from "./GraphFooter.js";
+import { GraphHeader as a } from "./GraphHeader.js";
+import { t as o } from "./checkIfNullOrUndefined-C5gqSAtF.js";
+import { n as te, t as ne } from "./GraphContainer-DgEB1AVN.js";
+import { n as s, t as c } from "./parse-5MWhaq6h.js";
+import { t as l } from "./lodash.orderby-Dn2sr3tw.js";
+import { ColorLegendWithMouseOver as u } from "./ColorLegendWithMouseOver.js";
+import { t as re } from "./EmptyState-DBmT1Adf.js";
+import { i as d } from "./ensureCompleteData-VxAHq-s7.js";
+import { t as f } from "./getSliderMarks-CTKVxOEm.js";
+import { t as ie } from "./linear-BkosG4OK.js";
+import { t as ae } from "./band-XivI9IHG.js";
+import { t as p } from "./fast-deep-equal--80N92KJ.js";
+import { t as m } from "./proxy-BiRrIImK.js";
+import { t as oe } from "./AnimatePresence-CE6xBsMZ.js";
+import { t as se } from "./use-in-view-CjlKdln1.js";
+import { t as ce } from "./Axis-B3ai1eeP.js";
+import { t as le } from "./AxisTitle-DqJw_G-f.js";
+import { t as ue } from "./XAxesLabels-DIs04SK7.js";
+import { t as de } from "./numberFormattingFunction-Cha8dhHc.js";
+import { t as h } from "./XTicksAndGridLines-B2XZgwzW.js";
+import { t as g } from "./YAxesLabels-voV_CThY.js";
+import { t as fe } from "./YTicksAndGridLines-CVTzNJYP.js";
+import { t as pe } from "./DetailsModal-DxUowfkg.js";
+import { n as me, t as he } from "./ReferenceLine-C8owKJx1.js";
+import { t as ge } from "./Tooltip-Y6uTGwkF.js";
+import { cn as _ } from "@undp/design-system-react/cn";
+import { useEffect as v, useMemo as y, useRef as _e, useState as b } from "react";
+import { SliderUI as x } from "@undp/design-system-react/SliderUI";
+//#region src/Components/Graphs/DumbbellChart/Graph.tsx
+var S = /* @__PURE__ */ e(l(), 1), ve = /* @__PURE__ */ e(p(), 1), C = t();
+function w(e) {
+	let { data: t, leftMargin: n = 20, rightMargin: r = 20, topMargin: i = 20, bottomMargin: ee = 25, dotColors: a, barPadding: te, showTicks: ne, truncateBy: s, width: c, height: l, radius: u, showLabels: re, tooltip: d, onSeriesMouseOver: f, maxValue: p, minValue: h, onSeriesMouseClick: g, showValues: he, suffix: v, prefix: x, selectedColor: S, arrowConnector: w, connectorStrokeWidth: ye, maxBarThickness: T, minBarThickness: be, resetSelectionOnDoubleClick: xe, detailsOnClick: E, axisTitle: D, noOfTicks: Se, valueColor: Ce, styles: O, classNames: k, labelOrder: A, refValues: j, animate: M, precision: N, customLayers: P, highlightedDataPoints: F, dimmedOpacity: I, hideAxisLine: we, locale: L, padZeros: R } = e, Te = _e(null), z = se(Te, {
+		once: M.once,
+		amount: M.amount
+	}), B = {
+		top: i,
+		bottom: ee,
+		left: D ? n + 30 : n,
+		right: r
+	}, V = c - B.left - B.right, H = l - B.top - B.bottom, [Ee, U] = b(void 0), [W, G] = b(void 0), [De, K] = b(void 0), [q, J] = b(void 0), Y = y(() => {
+		let e = /* @__PURE__ */ new Set(), n = t.map((t, n) => {
+			let r = A ? `${t.label}` : `${n}`;
+			return e.add(r), {
+				...t,
+				id: r
+			};
+		}), r = A ? A.filter((t) => !e.has(t)) : [];
+		return [...n, ...r.map((e) => ({
+			id: e,
+			label: e,
+			x: Array(t[0].x.length).fill(null)
+		}))];
+	}, [t, A]), Oe = y(() => A ?? Y.map((e) => `${e.id}`), [A, Y]), X = ie().domain([h, p]).range([H, 0]).nice(), Z = ae().domain(Oe).range([0, be ? Math.max(V, be * Y.length) : T ? Math.min(V, T * Y.length) : V]).paddingInner(te), Q = X.ticks(Se);
+	return /* @__PURE__ */ (0, C.jsxs)(C.Fragment, { children: [
+		/* @__PURE__ */ (0, C.jsxs)(m.svg, {
+			width: `${c}px`,
+			height: `${l}px`,
+			viewBox: `0 0 ${c} ${l}`,
+			direction: "ltr",
+			ref: Te,
+			children: [w ? /* @__PURE__ */ (0, C.jsx)("defs", { children: /* @__PURE__ */ (0, C.jsx)("marker", {
+				id: "arrow",
+				viewBox: "0 0 10 10",
+				refX: "10",
+				refY: "5",
+				markerWidth: "6",
+				markerHeight: "6",
+				orient: "auto-start-reverse",
+				children: /* @__PURE__ */ (0, C.jsx)("path", {
+					d: "M 0 0 L 10 5 L 0 10 z",
+					className: "fill-primary-gray-600 dark:fill-primary-gray-300"
+				})
+			}) }) : null, /* @__PURE__ */ (0, C.jsxs)("g", {
+				transform: `translate(${B.left},${B.top})`,
+				children: [
+					/* @__PURE__ */ (0, C.jsx)(ce, {
+						hideAxisLine: we,
+						y1: X(h < 0 ? 0 : h),
+						y2: X(h < 0 ? 0 : h),
+						x1: 0 - n,
+						x2: V + B.right,
+						label: ne ? de(h < 0 ? 0 : h, void 0, N, x, v, L, R) : void 0,
+						labelPos: {
+							x: 0 - n,
+							dx: 0,
+							dy: p < 0 ? "1em" : -5,
+							y: X(h < 0 ? 0 : h)
+						},
+						classNames: {
+							axis: k?.xAxis?.axis,
+							label: k?.yAxis?.labels
+						},
+						styles: {
+							axis: O?.xAxis?.axis,
+							label: O?.yAxis?.labels
+						}
+					}),
+					ne ? /* @__PURE__ */ (0, C.jsx)(fe, {
+						values: Q.filter((e) => e !== 0),
+						y: Q.filter((e) => e !== 0).map((e) => X(e)),
+						x1: 0 - n,
+						x2: V + B.right,
+						styles: {
+							gridLines: O?.yAxis?.gridLines,
+							labels: O?.yAxis?.labels
+						},
+						classNames: {
+							gridLines: k?.yAxis?.gridLines,
+							labels: k?.yAxis?.labels
+						},
+						suffix: v,
+						prefix: x,
+						labelType: "secondary",
+						showGridLines: !0,
+						labelPos: "vertical",
+						precision: N,
+						locale: L,
+						padZeros: R
+					}) : null,
+					/* @__PURE__ */ (0, C.jsx)(le, {
+						x: 0 - n - 15,
+						y: H / 2,
+						style: O?.yAxis?.title,
+						className: k?.yAxis?.title,
+						text: D,
+						rotate90: !0
+					}),
+					P.filter((e) => e.position === "before").map((e) => e.layer),
+					/* @__PURE__ */ (0, C.jsxs)(oe, { children: [Y.map((e) => /* @__PURE__ */ (0, C.jsxs)(m.g, {
+						className: "undp-viz-g-with-hover",
+						variants: {
+							initial: {
+								x: Z(`${e.id}`) + Z.bandwidth() / 2,
+								y: 0,
+								opacity: F && F.indexOf(e.label) === -1 ? I : .85
+							},
+							whileInView: {
+								x: Z(`${e.id}`) + Z.bandwidth() / 2,
+								y: 0,
+								opacity: F && F.indexOf(e.label) === -1 ? I : .85,
+								transition: { duration: M.duration }
+							}
+						},
+						initial: "initial",
+						animate: z ? "whileInView" : "initial",
+						exit: {
+							opacity: 0,
+							transition: { duration: M.duration }
+						},
+						children: [
+							re ? /* @__PURE__ */ (0, C.jsx)(ue, {
+								value: `${e.label}`.length < s ? `${e.label}` : `${`${e.label}`.substring(0, s)}...`,
+								y: H + 5,
+								x: 0 - Z.bandwidth() / 2,
+								width: Z.bandwidth(),
+								height: B.bottom,
+								style: O?.xAxis?.labels,
+								className: k?.xAxis?.labels,
+								alignment: "top",
+								animate: M,
+								isInView: z
+							}) : null,
+							/* @__PURE__ */ (0, C.jsx)(m.line, {
+								x1: 0,
+								x2: 0,
+								style: {
+									strokeWidth: ye,
+									...O?.dataConnectors || {},
+									opacity: S ? .3 : 1
+								},
+								className: _("stroke-primary-gray-600 dark:stroke-primary-gray-300", k?.dataConnectors),
+								markerEnd: w && e.x.indexOf(Math.min(...e.x.filter((e) => e !== null))) === 0 ? "url(#arrow)" : "",
+								markerStart: w && e.x.indexOf(Math.min(...e.x.filter((e) => e !== null))) === e.x.length - 1 ? "url(#arrow)" : "",
+								exit: {
+									opacity: 0,
+									transition: { duration: M.duration }
+								},
+								variants: {
+									initial: {
+										y1: 0,
+										y2: 0
+									},
+									whileInView: {
+										y1: X(Math.min(...e.x.filter((e) => e !== null))) + u,
+										y2: X(Math.max(...e.x.filter((e) => e !== null))) - u,
+										transition: { duration: M.duration }
+									}
+								},
+								initial: "initial",
+								animate: z ? "whileInView" : "initial"
+							}),
+							e.x.map((t, n) => /* @__PURE__ */ (0, C.jsx)(m.g, {
+								onMouseEnter: (t) => {
+									U({
+										...e,
+										xIndex: n
+									}), J(t.clientY), K(t.clientX), f?.({
+										...e,
+										xIndex: n
+									});
+								},
+								onClick: () => {
+									(g || E) && ((0, ve.default)(W, {
+										...e,
+										xIndex: n
+									}) && xe ? (G(void 0), g?.(void 0)) : (G({
+										...e,
+										xIndex: n
+									}), g && g({
+										...e,
+										xIndex: n
+									})));
+								},
+								onMouseMove: (t) => {
+									U({
+										...e,
+										xIndex: n
+									}), J(t.clientY), K(t.clientX);
+								},
+								onMouseLeave: () => {
+									U(void 0), K(void 0), J(void 0), f?.(void 0);
+								},
+								exit: {
+									opacity: 0,
+									transition: { duration: M.duration }
+								},
+								variants: {
+									initial: { opacity: S ? a[n] === S ? 1 : .3 : 1 },
+									whileInView: {
+										opacity: S ? a[n] === S ? 1 : .3 : 1,
+										transition: { duration: M.duration }
+									}
+								},
+								initial: "initial",
+								animate: z ? "whileInView" : "initial",
+								children: o(t) ? null : /* @__PURE__ */ (0, C.jsxs)(C.Fragment, { children: [/* @__PURE__ */ (0, C.jsx)(m.circle, {
+									cx: 0,
+									r: u,
+									style: {
+										fill: a[n],
+										fillOpacity: .85,
+										stroke: a[n],
+										strokeWidth: 1
+									},
+									exit: {
+										opacity: 0,
+										transition: { duration: M.duration }
+									},
+									variants: {
+										initial: {
+											cy: X(0),
+											opacity: 0
+										},
+										whileInView: {
+											cy: X(t || 0),
+											opacity: +!o(t),
+											transition: { duration: M.duration }
+										}
+									},
+									initial: "initial",
+									animate: z ? "whileInView" : "initial"
+								}), he ? /* @__PURE__ */ (0, C.jsx)(m.text, {
+									x: 0,
+									style: {
+										textAnchor: "start",
+										...O?.graphObjectValues || {}
+									},
+									className: _("graph-value text-sm font-bold", o(t) ? "opacity-0" : "opacity-100", k?.graphObjectValues),
+									dx: u + 3,
+									dy: "0.33em",
+									exit: {
+										opacity: 0,
+										transition: { duration: M.duration }
+									},
+									variants: {
+										initial: {
+											y: X(0),
+											opacity: 0,
+											fill: Ce || a[n]
+										},
+										whileInView: {
+											y: X(t || 0),
+											fill: Ce || a[n],
+											opacity: 1,
+											transition: { duration: M.duration }
+										}
+									},
+									initial: "initial",
+									animate: z ? "whileInView" : "initial",
+									children: de(t, void 0, N, x, v, L, R)
+								}) : null] })
+							}, n))
+						]
+					}, e.label)), j?.map((e) => /* @__PURE__ */ (0, C.jsx)(me, {
+						text: e.text,
+						color: e.color,
+						y: X(e.value),
+						x1: 0 - n,
+						x2: V + B.right,
+						classNames: e.classNames,
+						styles: e.styles,
+						animate: M,
+						isInView: z
+					}, e.text))] }),
+					P.filter((e) => e.position === "after").map((e) => e.layer)
+				]
+			})]
+		}),
+		Ee && d && De && q ? /* @__PURE__ */ (0, C.jsx)(ge, {
+			data: Ee,
+			body: d,
+			xPos: De,
+			yPos: q,
+			backgroundStyle: O?.tooltip,
+			className: k?.tooltip
+		}) : null,
+		E && W !== void 0 ? /* @__PURE__ */ (0, C.jsx)(pe, {
+			body: E,
+			data: W,
+			setData: G,
+			className: k?.modal
+		}) : null
+	] });
+}
+function ye(e) {
+	let { data: t, leftMargin: n = 100, rightMargin: r = 40, topMargin: i = 20, bottomMargin: ee = 10, dotColors: a, suffix: te, prefix: ne, barPadding: s, showValues: c, showTicks: l, truncateBy: u, width: re, height: d, radius: f, showLabels: p, tooltip: ce, onSeriesMouseOver: ue, maxValue: me, minValue: v, onSeriesMouseClick: x, selectedColor: S, arrowConnector: w, connectorStrokeWidth: ye, maxBarThickness: T, minBarThickness: be, resetSelectionOnDoubleClick: xe, detailsOnClick: E, axisTitle: D, noOfTicks: Se, valueColor: Ce, styles: O, classNames: k, labelOrder: A, refValues: j, rtl: M, animate: N, precision: P, customLayers: F, highlightedDataPoints: I, dimmedOpacity: we, locale: L, padZeros: R } = e, Te = _e(null), z = se(Te, {
+		once: N.once,
+		amount: N.amount
+	}), B = {
+		top: D ? i + 25 : i,
+		bottom: ee,
+		left: n,
+		right: r
+	}, V = re - B.left - B.right, H = d - B.top - B.bottom, [Ee, U] = b(void 0), [W, G] = b(void 0), [De, K] = b(void 0), [q, J] = b(void 0), Y = y(() => {
+		let e = /* @__PURE__ */ new Set(), n = t.map((t, n) => {
+			let r = A ? `${t.label}` : `${n}`;
+			return e.add(r), {
+				...t,
+				id: r
+			};
+		}), r = A ? A.filter((t) => !e.has(t)) : [];
+		return [...n, ...r.map((e) => ({
+			id: e,
+			label: e,
+			x: Array(t[0].x.length).fill(null)
+		}))];
+	}, [t, A]), Oe = y(() => A ?? Y.map((e) => `${e.id}`), [A, Y]), X = ie().domain([v, me]).range([0, V]).nice(), Z = ae().domain(Oe).range([0, be ? Math.max(H, be * Y.length) : T ? Math.min(H, T * Y.length) : H]).paddingInner(s), Q = X.ticks(Se);
+	return /* @__PURE__ */ (0, C.jsxs)(C.Fragment, { children: [
+		/* @__PURE__ */ (0, C.jsxs)(m.svg, {
+			width: `${re}px`,
+			height: `${d}px`,
+			viewBox: `0 0 ${re} ${d}`,
+			direction: "ltr",
+			ref: Te,
+			children: [w ? /* @__PURE__ */ (0, C.jsx)("defs", { children: /* @__PURE__ */ (0, C.jsx)("marker", {
+				id: "arrow",
+				viewBox: "0 0 10 10",
+				refX: "10",
+				refY: "5",
+				markerWidth: "6",
+				markerHeight: "6",
+				orient: "auto-start-reverse",
+				children: /* @__PURE__ */ (0, C.jsx)("path", {
+					d: "M 0 0 L 10 5 L 0 10 z",
+					className: "fill-primary-gray-600 dark:fill-primary-gray-300"
+				})
+			}) }) : null, /* @__PURE__ */ (0, C.jsxs)("g", {
+				transform: `translate(${B.left},${B.top})`,
+				children: [
+					l ? /* @__PURE__ */ (0, C.jsx)(h, {
+						values: Q.filter((e, t) => t !== 0),
+						x: Q.filter((e, t) => t !== 0).map((e) => X(e)),
+						y1: 0 - i,
+						y2: H + B.bottom,
+						styles: {
+							gridLines: O?.xAxis?.gridLines,
+							labels: O?.xAxis?.labels
+						},
+						classNames: {
+							gridLines: k?.xAxis?.gridLines,
+							labels: k?.xAxis?.labels
+						},
+						suffix: te,
+						prefix: ne,
+						labelType: "secondary",
+						showGridLines: !0,
+						precision: P,
+						locale: L,
+						padZeros: R
+					}) : null,
+					/* @__PURE__ */ (0, C.jsx)(le, {
+						x: V / 2,
+						y: 0 - B.top + 15,
+						style: O?.xAxis?.title,
+						className: k?.xAxis?.title,
+						text: D
+					}),
+					/* @__PURE__ */ (0, C.jsx)(fe, {
+						y: Y.map((e) => Z(`${e.id}`) + Z.bandwidth() / 2),
+						x1: 0,
+						x2: V,
+						styles: { gridLines: O?.yAxis?.gridLines },
+						classNames: { gridLines: k?.yAxis?.gridLines },
+						labelType: "secondary",
+						showGridLines: !0,
+						labelPos: "vertical",
+						precision: P,
+						locale: L,
+						padZeros: R
+					}),
+					F.filter((e) => e.position === "before").map((e) => e.layer),
+					/* @__PURE__ */ (0, C.jsxs)(oe, { children: [Y.map((e) => /* @__PURE__ */ (0, C.jsxs)(m.g, {
+						className: "undp-viz-g-with-hover",
+						variants: {
+							initial: {
+								x: 0,
+								y: Z(`${e.id}`) + Z.bandwidth() / 2,
+								opacity: I && I.indexOf(e.label) === -1 ? we : .85
+							},
+							whileInView: {
+								x: 0,
+								y: Z(`${e.id}`) + Z.bandwidth() / 2,
+								opacity: I && I.indexOf(e.label) === -1 ? we : .85,
+								transition: { duration: N.duration }
+							}
+						},
+						initial: "initial",
+						animate: z ? "whileInView" : "initial",
+						exit: {
+							opacity: 0,
+							transition: { duration: N.duration }
+						},
+						children: [
+							p ? /* @__PURE__ */ (0, C.jsx)(g, {
+								value: `${e.label}`.length < u ? `${e.label}` : `${`${e.label}`.substring(0, u)}...`,
+								y: 0 - Z.bandwidth() / 2,
+								x: 0 - B.left,
+								width: B.left,
+								height: Z.bandwidth(),
+								alignment: "right",
+								style: O?.yAxis?.labels,
+								className: k?.yAxis?.labels,
+								animate: N,
+								isInView: z
+							}) : null,
+							/* @__PURE__ */ (0, C.jsx)(m.line, {
+								y1: 0,
+								y2: 0,
+								style: {
+									strokeWidth: ye,
+									...O?.dataConnectors || {},
+									opacity: S ? .3 : 1
+								},
+								className: _("stroke-primary-gray-600 dark:stroke-primary-gray-300", k?.dataConnectors),
+								markerEnd: w && e.x.indexOf(Math.min(...e.x.filter((e) => e !== null))) === 0 ? "url(#arrow)" : "",
+								markerStart: w && e.x.indexOf(Math.min(...e.x.filter((e) => e !== null))) === e.x.length - 1 ? "url(#arrow)" : "",
+								exit: {
+									opacity: 0,
+									transition: { duration: N.duration }
+								},
+								variants: {
+									initial: {
+										x1: 0,
+										x2: 0
+									},
+									whileInView: {
+										x1: X(Math.min(...e.x.filter((e) => e !== null))) + f,
+										x2: X(Math.max(...e.x.filter((e) => e !== null))) - f,
+										transition: { duration: N.duration }
+									}
+								},
+								initial: "initial",
+								animate: z ? "whileInView" : "initial"
+							}),
+							e.x.map((t, n) => /* @__PURE__ */ (0, C.jsx)(m.g, {
+								onMouseEnter: (t) => {
+									U({
+										...e,
+										xIndex: n
+									}), J(t.clientY), K(t.clientX), ue?.({
+										...e,
+										xIndex: n
+									});
+								},
+								onClick: () => {
+									(x || E) && ((0, ve.default)(W, {
+										...e,
+										xIndex: n
+									}) && xe ? (G(void 0), x?.(void 0)) : (G({
+										...e,
+										xIndex: n
+									}), x && x({
+										...e,
+										xIndex: n
+									})));
+								},
+								onMouseMove: (t) => {
+									U({
+										...e,
+										xIndex: n
+									}), J(t.clientY), K(t.clientX);
+								},
+								onMouseLeave: () => {
+									U(void 0), K(void 0), J(void 0), ue?.(void 0);
+								},
+								exit: {
+									opacity: 0,
+									transition: { duration: N.duration }
+								},
+								variants: {
+									initial: { opacity: S ? a[n] === S ? 1 : .3 : 1 },
+									whileInView: {
+										opacity: S ? a[n] === S ? 1 : .3 : 1,
+										transition: { duration: N.duration }
+									}
+								},
+								initial: "initial",
+								animate: z ? "whileInView" : "initial",
+								children: o(t) ? null : /* @__PURE__ */ (0, C.jsxs)(C.Fragment, { children: [/* @__PURE__ */ (0, C.jsx)(m.circle, {
+									cy: 0,
+									r: f,
+									style: {
+										fill: a[n],
+										fillOpacity: .85,
+										stroke: a[n],
+										strokeWidth: 1,
+										opacity: +!o(t)
+									},
+									exit: {
+										opacity: 0,
+										transition: { duration: N.duration }
+									},
+									variants: {
+										initial: {
+											cx: X(0),
+											opacity: 0
+										},
+										whileInView: {
+											cx: X(t || 0),
+											opacity: +!o(t),
+											transition: { duration: N.duration }
+										}
+									},
+									initial: "initial",
+									animate: z ? "whileInView" : "initial"
+								}), c ? /* @__PURE__ */ (0, C.jsx)(m.text, {
+									y: 0,
+									style: {
+										textAnchor: "middle",
+										...O?.graphObjectValues || {}
+									},
+									dx: 0,
+									dy: 0 - f - 3,
+									className: _("graph-value text-sm font-bold", o(t) ? "0opacity-0" : "opacity-100", k?.graphObjectValues),
+									exit: {
+										opacity: 0,
+										transition: { duration: N.duration }
+									},
+									variants: {
+										initial: {
+											x: X(0),
+											opacity: 0,
+											fill: Ce || a[n]
+										},
+										whileInView: {
+											x: X(t || 0),
+											fill: Ce || a[n],
+											opacity: 1,
+											transition: { duration: N.duration }
+										}
+									},
+									initial: "initial",
+									animate: z ? "whileInView" : "initial",
+									children: de(t, void 0, P, ne, te, L, R)
+								}) : null] })
+							}, n))
+						]
+					}, e.label)), j?.map((e) => /* @__PURE__ */ (0, C.jsx)(he, {
+						text: e.text,
+						color: e.color,
+						x: X(e.value),
+						y1: 0 - B.top,
+						y2: H + B.bottom,
+						textSide: X(e.value) > V * .75 || M ? "left" : "right",
+						classNames: e.classNames,
+						styles: e.styles,
+						animate: N,
+						isInView: z
+					}, e.text))] }),
+					F.filter((e) => e.position === "after").map((e) => e.layer)
+				]
+			})]
+		}),
+		Ee && ce && De && q ? /* @__PURE__ */ (0, C.jsx)(ge, {
+			data: Ee,
+			body: ce,
+			xPos: De,
+			yPos: q,
+			backgroundStyle: O?.tooltip,
+			className: k?.tooltip
+		}) : null,
+		E && W !== void 0 ? /* @__PURE__ */ (0, C.jsx)(pe, {
+			body: E,
+			data: W,
+			setData: G,
+			className: k?.modal
+		}) : null
+	] });
+}
+//#endregion
+//#region src/Components/Graphs/DumbbellChart/index.tsx
+function T(e) {
+	let { data: t, graphTitle: l, colors: ie = i.light.categoricalColors.colors, sources: ae, graphDescription: p, barPadding: m = .25, showTicks: oe = !0, leftMargin: se, rightMargin: ce, topMargin: le, bottomMargin: ue, truncateBy: de = 999, height: h, width: g, footNote: fe, colorDomain: pe, colorLegendTitle: me, padding: he, backgroundColor: ge = !0, radius: _ = 3, tooltip: ve, showLabels: T = !0, relativeHeight: be, onSeriesMouseOver: xe, graphID: E, maxValue: D, minValue: Se, onSeriesMouseClick: Ce, graphDownload: O = !1, dataDownload: k = !1, showValues: A = !0, sortParameter: j, arrowConnector: M = !1, connectorStrokeWidth: N = 2, language: P = "en", minHeight: F = 0, theme: I = "light", maxBarThickness: we, maxNumberOfBars: L, minBarThickness: R, ariaLabel: Te, resetSelectionOnDoubleClick: z = !0, detailsOnClick: B, axisTitle: V, noOfTicks: H = 5, valueColor: Ee, orientation: U = "vertical", styles: W, classNames: G, labelOrder: De, refValues: K, filterNA: q = !0, animate: J = !1, showColorScale: Y = !0, customLayers: Oe = [], highlightedDataPoints: X, dimmedOpacity: Z = .3, timeline: Q = {
+		enabled: !1,
+		autoplay: !1,
+		showOnlyActiveDate: !0
+	}, sortData: ke, hideAxisLine: Ae = !1, numberDisplayOptions: je } = e, [Me, Ne] = b(0), [Pe, Fe] = b(0), [Ie, Le] = b(Q.autoplay), $ = y(() => {
+		let e = [...new Set(t.filter((e) => e.date).map((e) => c(`${e.date}`, Q.dateFormat || "yyyy", /* @__PURE__ */ new Date()).getTime()))];
+		return e.sort((e, t) => e - t), e;
+	}, [t, Q.dateFormat]), [Re, ze] = b(Q.autoplay ? 0 : $.length - 1), [Be, Ve] = b(void 0), He = _e(null), Ue = _e(null);
+	v(() => {
+		let e = new ResizeObserver((e) => {
+			Ne(e[0].target.clientWidth || 620), Fe(e[0].target.clientHeight || 480);
+		});
+		return He.current && e.observe(He.current), () => e.disconnect();
+	}, []), v(() => {
+		let e = setInterval(() => {
+			ze((e) => e < $.length - 1 ? e + 1 : 0);
+		}, (Q.speed || 2) * 1e3);
+		return Ie || clearInterval(e), () => clearInterval(e);
+	}, [
+		$,
+		Ie,
+		Q.speed
+	]);
+	let We = f($, Re, Q.showOnlyActiveDate, Q.dateFormat || "yyyy"), Ge = U === "horizontal" ? ye : w;
+	return /* @__PURE__ */ (0, C.jsxs)(te, {
+		className: G?.graphContainer,
+		style: W?.graphContainer,
+		id: E,
+		ref: Ue,
+		"aria-label": Te,
+		backgroundColor: ge,
+		theme: I,
+		language: P,
+		minHeight: F,
+		width: g,
+		height: h,
+		relativeHeight: be,
+		padding: he,
+		children: [
+			l || p || O || k ? /* @__PURE__ */ (0, C.jsx)(a, {
+				styles: {
+					title: W?.title,
+					description: W?.description
+				},
+				classNames: {
+					title: G?.title,
+					description: G?.description
+				},
+				graphTitle: l,
+				graphDescription: p,
+				width: g,
+				graphDownload: O ? Ue : void 0,
+				dataDownload: k ? 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,
+			Q.enabled && $.length > 0 && We ? /* @__PURE__ */ (0, C.jsxs)("div", {
+				className: "flex gap-6 items-center",
+				dir: "ltr",
+				children: [/* @__PURE__ */ (0, C.jsx)("button", {
+					type: "button",
+					onClick: () => {
+						Le(!Ie);
+					},
+					className: "p-0 border-0 cursor-pointer bg-transparent",
+					"aria-label": Ie ? "Click to pause animation" : "Click to play animation",
+					children: Ie ? /* @__PURE__ */ (0, C.jsx)(n, {}) : /* @__PURE__ */ (0, C.jsx)(r, {})
+				}), /* @__PURE__ */ (0, C.jsx)(x, {
+					min: $[0],
+					max: $[$.length - 1],
+					marks: We,
+					step: null,
+					defaultValue: $[$.length - 1],
+					value: $[Re],
+					onChangeComplete: (e) => {
+						ze($.indexOf(e));
+					},
+					onChange: (e) => {
+						ze($.indexOf(e));
+					},
+					"aria-label": "Time slider. Use arrow keys to adjust selected time period."
+				})]
+			}) : null,
+			Y && t.length > 0 ? /* @__PURE__ */ (0, C.jsx)(u, {
+				width: g,
+				colorDomain: pe,
+				colors: ie,
+				colorLegendTitle: me,
+				setSelectedColor: Ve,
+				showNAColor: !1,
+				className: G?.colorLegend
+			}) : null,
+			/* @__PURE__ */ (0, C.jsxs)(ne, {
+				ref: He,
+				children: [t.length === 0 && /* @__PURE__ */ (0, C.jsx)(re, {}), Me && Pe && t.length > 0 ? /* @__PURE__ */ (0, C.jsx)(Ge, {
+					hideAxisLine: Ae,
+					data: j === void 0 ? d(t, Q.dateFormat || "yyyy").filter((e) => Q.enabled ? `${e.date}` === s(new Date($[Re]), Q.dateFormat || "yyyy") : e).filter((e) => q ? !e.x.every((e) => e == null) : e).filter((e, t) => L ? t < L : !0) : j === "diff" ? (0, S.default)(d(t, Q.dateFormat || "yyyy").filter((e) => Q.enabled ? `${e.date}` === s(new Date($[Re]), Q.dateFormat || "yyyy") : e).filter((e) => q ? !e.x.every((e) => e == null) : e), (e) => o(e.x[e.x.length - 1]) || o(e.x[0]) ? -Infinity : e.x[e.x.length - 1] - e.x[0], [ke || "asc"]).filter((e, t) => L ? t < L : !0) : (0, S.default)(d(t, Q.dateFormat || "yyyy").filter((e) => Q.enabled ? `${e.date}` === s(new Date($[Re]), Q.dateFormat || "yyyy") : e).filter((e) => q ? !e.x.every((e) => e == null) : e), (e) => o(e.x[j]) ? -Infinity : e.x[j], [ke || "asc"]).filter((e, t) => L ? t < L : !0),
+					dotColors: ie,
+					width: Me,
+					height: Pe,
+					radius: _,
+					barPadding: m,
+					showTicks: oe,
+					leftMargin: se,
+					rightMargin: ce,
+					topMargin: le,
+					bottomMargin: ue,
+					truncateBy: de,
+					showLabels: T,
+					showValues: A,
+					tooltip: ve,
+					onSeriesMouseOver: xe,
+					maxValue: o(D) ? Math.max(...t.map((e) => Math.max(...e.x.filter((e) => e !== null)))) < 0 ? 0 : Math.max(...t.map((e) => Math.max(...e.x.filter((e) => e !== null)))) : D,
+					minValue: o(Se) ? Math.min(...t.map((e) => Math.min(...e.x.filter((e) => e !== null)))) > 0 ? 0 : Math.min(...t.map((e) => Math.min(...e.x.filter((e) => e !== null)))) : Se,
+					onSeriesMouseClick: Ce,
+					selectedColor: Be,
+					arrowConnector: M,
+					connectorStrokeWidth: N,
+					maxBarThickness: we,
+					minBarThickness: R,
+					resetSelectionOnDoubleClick: z,
+					detailsOnClick: B,
+					axisTitle: V,
+					noOfTicks: H,
+					valueColor: Ee,
+					styles: W,
+					classNames: G,
+					labelOrder: De,
+					refValues: K,
+					animate: J === !0 ? {
+						duration: .5,
+						once: !0,
+						amount: .5
+					} : J || {
+						duration: 0,
+						once: !0,
+						amount: 0
+					},
+					customLayers: Oe,
+					highlightedDataPoints: X,
+					dimmedOpacity: Z,
+					rtl: P === "ar" || P === "he",
+					locale: je?.locale || "en",
+					padZeros: je?.padZeros || !1,
+					suffix: je?.suffix || "",
+					prefix: je?.prefix || "",
+					precision: je?.precision ?? 2
+				}) : null]
+			}),
+			ae || fe ? /* @__PURE__ */ (0, C.jsx)(ee, {
+				styles: {
+					footnote: W?.footnote,
+					source: W?.source
+				},
+				classNames: {
+					footnote: G?.footnote,
+					source: G?.source
+				},
+				sources: ae,
+				footNote: fe,
+				width: g
+			}) : null
+		]
+	});
+}
+//#endregion
+export { T as t };
+
+//# sourceMappingURL=DumbbellChart-bqOnq8ZF.js.map