@epilot/spark-ui 0.10.0

package/dist/components/bar-chart.cjs

@@ -0,0 +1,584 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_hooks_use_reduced_motion = require("../hooks/use-reduced-motion.cjs");
+const require_utils_format = require("../utils/format.cjs");
+const require_utils_chart_scale = require("../utils/chart-scale.cjs");
+const require_components_chart = require("./chart.cjs");
+const require_components_series_legend = require("./series-legend.cjs");
+const require_components_typography = require("./typography.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _visx_event = require("@visx/event");
+let _visx_group = require("@visx/group");
+let _visx_scale = require("@visx/scale");
+let _visx_shape = require("@visx/shape");
+let cnfast = require("cnfast");
+//#region src/components/bar-chart.tsx
+const defaultTotalFormat = require_utils_format.localeNumberFormat();
+const PADDING_TOP = 20;
+const PADDING_BOTTOM = 28;
+const HOVER_FADE_MS = 200;
+const FOCUS_TRANSITION_MS = 180;
+const DEFAULT_HEIGHT = 220;
+const BAR_RADIUS = 2;
+function buildBarPath(x, y, width, height, radius, roundTop, roundBottom) {
+	const r = Math.max(0, Math.min(radius, width / 2, height / 2));
+	if (r === 0 || !roundTop && !roundBottom) return `M ${x} ${y} H ${x + width} V ${y + height} H ${x} Z`;
+	const tl = roundTop ? r : 0;
+	const tr = roundTop ? r : 0;
+	const br = roundBottom ? r : 0;
+	const bl = roundBottom ? r : 0;
+	return [
+		`M ${x + tl} ${y}`,
+		`H ${x + width - tr}`,
+		tr > 0 ? `Q ${x + width} ${y} ${x + width} ${y + tr}` : `L ${x + width} ${y}`,
+		`V ${y + height - br}`,
+		br > 0 ? `Q ${x + width} ${y + height} ${x + width - br} ${y + height}` : `L ${x + width} ${y + height}`,
+		`H ${x + bl}`,
+		bl > 0 ? `Q ${x} ${y + height} ${x} ${y + height - bl}` : `L ${x} ${y + height}`,
+		`V ${y + tl}`,
+		tl > 0 ? `Q ${x} ${y} ${x + tl} ${y}` : `L ${x} ${y}`,
+		"Z"
+	].join(" ");
+}
+function BarStackLayer({ stackData, series, seriesByKey, xScale, yScale, colorScale }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_shape.BarStack, {
+		data: stackData,
+		keys: series.map((entry) => entry.key),
+		x: (record) => record.__category,
+		value: (record, key) => record.__values[key] ?? 0,
+		xScale,
+		yScale,
+		color: colorScale,
+		offset: "diverging",
+		children: (barStacks) => barStacks.map((barStack) => barStack.bars.map((bar) => {
+			const values = bar.bar.data.__values;
+			const segmentValue = values[barStack.key] ?? 0;
+			if (segmentValue === 0) return null;
+			const strokeColor = seriesByKey.get(barStack.key)?.color ?? bar.color;
+			const fillColor = strokeColor;
+			const positiveKeys = series.map((entry) => entry.key).filter((key) => (values[key] ?? 0) > 0);
+			const negativeKeys = series.map((entry) => entry.key).filter((key) => (values[key] ?? 0) < 0);
+			const roundTop = segmentValue > 0 && positiveKeys[positiveKeys.length - 1] === barStack.key;
+			const roundBottom = segmentValue > 0 ? positiveKeys[0] === barStack.key : negativeKeys[negativeKeys.length - 1] === barStack.key;
+			const top = bar.height < 0 ? bar.y + bar.height : bar.y;
+			const barHeight = Math.abs(bar.height);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+				d: buildBarPath(bar.x, top, bar.width, Math.max(0, barHeight), BAR_RADIUS, roundTop, roundBottom),
+				fill: fillColor,
+				stroke: strokeColor,
+				strokeWidth: 1,
+				style: { transition: "fill 180ms ease" }
+			}, `bar-${barStack.index}-${bar.index}`);
+		}))
+	});
+}
+function FocusBorder({ category, visible, stackData, series, xScale, yScale }) {
+	const reducedMotion = require_hooks_use_reduced_motion.useReducedMotion();
+	const x = xScale(category);
+	const datum = stackData.find((entry) => entry.__category === category);
+	if (x === void 0 || !datum) return null;
+	if (!series.some((entry) => (datum.__values[entry.key] ?? 0) !== 0)) return null;
+	const topY = PADDING_TOP;
+	const bottomY = yScale(series.reduce((sum, entry) => sum + Math.min(0, datum.__values[entry.key] ?? 0), 0));
+	const borderPaddingX = 4;
+	const borderPaddingY = 3;
+	const borderXRaw = x - borderPaddingX;
+	const borderY = topY - borderPaddingY;
+	const borderWidthRaw = xScale.bandwidth() + borderPaddingX * 2;
+	const [rangeStart, rangeEnd] = xScale.range();
+	const minX = Math.min(rangeStart, rangeEnd);
+	const maxX = Math.max(rangeStart, rangeEnd);
+	const borderX = Math.max(minX, borderXRaw);
+	const borderRight = Math.min(maxX, borderXRaw + borderWidthRaw);
+	const borderWidth = Math.max(0, borderRight - borderX);
+	const borderHeight = Math.max(1, bottomY - topY + borderPaddingY * 2);
+	if (borderWidth <= 0) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+		x: borderX,
+		y: borderY,
+		width: borderWidth,
+		height: borderHeight,
+		rx: 6,
+		fill: "var(--spark-a2)",
+		stroke: "var(--spark-a9)",
+		strokeWidth: 2,
+		pointerEvents: "none",
+		style: {
+			opacity: visible ? 1 : 0,
+			transition: reducedMotion ? `opacity ${FOCUS_TRANSITION_MS}ms ease` : `x ${FOCUS_TRANSITION_MS}ms ease, y ${FOCUS_TRANSITION_MS}ms ease, width ${FOCUS_TRANSITION_MS}ms ease, height ${FOCUS_TRANSITION_MS}ms ease, opacity ${FOCUS_TRANSITION_MS}ms ease`
+		}
+	});
+}
+function InteractionLayer({ xDomain, activeCategories, xScale, height, onHoverChange }) {
+	const bandwidth = xScale.bandwidth();
+	const [rangeStart, rangeEnd] = xScale.range();
+	const minX = Math.min(rangeStart, rangeEnd);
+	const maxX = Math.max(rangeStart, rangeEnd);
+	const handleMove = (event) => {
+		const point = (0, _visx_event.localPoint)(event);
+		if (!point) return;
+		let nearest = null;
+		let best = Infinity;
+		for (const category of xDomain) {
+			if (!activeCategories.has(category)) continue;
+			const x = xScale(category);
+			if (x === void 0) continue;
+			const distance = Math.abs(x + bandwidth / 2 - point.x);
+			if (distance < best) {
+				best = distance;
+				nearest = category;
+			}
+		}
+		if (nearest !== null) onHoverChange(nearest);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+		x: minX,
+		y: PADDING_TOP,
+		width: Math.max(0, maxX - minX),
+		height: height - PADDING_TOP - PADDING_BOTTOM,
+		fill: "transparent",
+		onMouseMove: handleMove,
+		onMouseLeave: () => onHoverChange(null),
+		onTouchMove: handleMove,
+		onTouchEnd: () => onHoverChange(null)
+	});
+}
+function CategoryTicks({ ticks, xScale, height, formatCategory }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: ticks.map((category) => {
+		const x = xScale(category);
+		if (x === void 0) return null;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
+			x: x + xScale.bandwidth() / 2,
+			y: height - PADDING_BOTTOM + 16,
+			textAnchor: "middle",
+			fill: "var(--neutral-a11)",
+			fontSize: 10,
+			children: formatCategory(category)
+		}, `tick-${String(category)}`);
+	}) });
+}
+function defaultFormatTotal(value) {
+	return defaultTotalFormat.format(value);
+}
+function BarChart({ data, series, lines, getCategory, categories, categoryTicks, formatCategory = (category) => String(category), formatTooltipCategory = formatCategory, highlightedCategory, showHighlightLine = false, referenceLine, title, yAxisUnit, formatYTick = require_utils_chart_scale.formatYAxisTick, yAxisWidth, yAxisRightUnit, formatYTickRight = require_utils_chart_scale.formatYAxisTick, yAxisRightWidth, height = DEFAULT_HEIGHT, renderTotal, formatTotal = defaultFormatTotal, formatValue, className }) {
+	const containerRef = (0, react.useRef)(null);
+	const reducedMotion = require_hooks_use_reduced_motion.useReducedMotion();
+	const [width, setWidth] = (0, react.useState)(0);
+	const [hoveredCategory, setHoveredCategory] = (0, react.useState)(null);
+	const [trailingHoverLabel, setTrailingHoverLabel] = (0, react.useState)(null);
+	const [hiddenSeries, setHiddenSeries] = (0, react.useState)(() => new Set((lines ?? []).filter((line) => line.hiddenByDefault).map((line) => line.key)));
+	const toggleSeries = (0, react.useCallback)((id) => {
+		setHiddenSeries((prev) => {
+			const next = new Set(prev);
+			if (next.has(id)) next.delete(id);
+			else next.add(id);
+			return next;
+		});
+	}, []);
+	(0, react.useEffect)(() => {
+		const element = containerRef.current;
+		if (!element) return;
+		const resizeObserver = new ResizeObserver((entries) => {
+			const entry = entries[0];
+			if (!entry) return;
+			setWidth(entry.contentRect.width);
+		});
+		resizeObserver.observe(element);
+		return () => {
+			resizeObserver.disconnect();
+		};
+	}, []);
+	const seriesByKey = (0, react.useMemo)(() => {
+		const map = /* @__PURE__ */ new Map();
+		for (const entry of series) map.set(entry.key, entry);
+		return map;
+	}, [series]);
+	const stackData = (0, react.useMemo)(() => data.map((datum) => {
+		const values = {};
+		for (const entry of series) values[entry.key] = hiddenSeries.has(entry.key) ? 0 : entry.getValue(datum);
+		return {
+			__category: getCategory(datum),
+			__values: values
+		};
+	}), [
+		data,
+		getCategory,
+		series,
+		hiddenSeries
+	]);
+	const yMax = (0, react.useMemo)(() => Math.max(1, referenceLine?.value ?? 0, ...stackData.map((record) => series.reduce((sum, entry) => sum + Math.max(0, record.__values[entry.key] ?? 0), 0))), [
+		referenceLine,
+		series,
+		stackData
+	]);
+	const yMin = (0, react.useMemo)(() => Math.min(0, ...stackData.map((record) => series.reduce((sum, entry) => sum + Math.min(0, record.__values[entry.key] ?? 0), 0))), [series, stackData]);
+	const xDomain = (0, react.useMemo)(() => categories ?? stackData.map((record) => record.__category), [categories, stackData]);
+	const yTicks = (0, react.useMemo)(() => require_utils_chart_scale.buildYAxisScale(yMin, yMax).ticks, [yMin, yMax]);
+	const gutter = (0, react.useMemo)(() => yAxisWidth ?? require_utils_chart_scale.measureYAxisGutter(yTicks, formatYTick), [
+		yTicks,
+		formatYTick,
+		yAxisWidth
+	]);
+	const rightAxisDomain = (0, react.useMemo)(() => (lines ?? []).filter((line) => line.domain !== void 0 && !hiddenSeries.has(line.key)), [lines, hiddenSeries])[0]?.domain;
+	const rightAxisScale = (0, react.useMemo)(() => rightAxisDomain === void 0 ? null : require_utils_chart_scale.buildYAxisScale(rightAxisDomain[0], rightAxisDomain[1]), [rightAxisDomain]);
+	const rightTicks = rightAxisScale?.ticks ?? [];
+	const rightGutter = (0, react.useMemo)(() => rightAxisScale === null ? 0 : yAxisRightWidth ?? require_utils_chart_scale.measureYAxisGutter(rightTicks, formatYTickRight, 0), [
+		rightAxisScale,
+		rightTicks,
+		formatYTickRight,
+		yAxisRightWidth
+	]);
+	const plotRight = Math.max(gutter, width - rightGutter);
+	const xScale = (0, react.useMemo)(() => (0, _visx_scale.scaleBand)({
+		domain: xDomain,
+		range: [gutter, plotRight],
+		padding: .32
+	}), [
+		xDomain,
+		gutter,
+		plotRight
+	]);
+	const yScale = (0, react.useMemo)(() => (0, _visx_scale.scaleLinear)({
+		domain: [yMin, yMax],
+		range: [height - PADDING_BOTTOM, PADDING_TOP]
+	}), [
+		height,
+		yMax,
+		yMin
+	]);
+	const rightYScale = (0, react.useMemo)(() => rightAxisDomain === void 0 ? null : (0, _visx_scale.scaleLinear)({
+		domain: rightAxisDomain,
+		range: [height - PADDING_BOTTOM, PADDING_TOP]
+	}), [height, rightAxisDomain]);
+	const colorScale = (0, react.useMemo)(() => (0, _visx_scale.scaleOrdinal)({
+		domain: series.map((entry) => entry.key),
+		range: series.map((entry) => entry.color)
+	}), [series]);
+	const linePaths = (0, react.useMemo)(() => {
+		if (!lines || width === 0) return [];
+		return lines.filter((line) => !hiddenSeries.has(line.key)).map((line) => {
+			const lineScale = line.domain ? (0, _visx_scale.scaleLinear)({
+				domain: line.domain,
+				range: [height - PADDING_BOTTOM, PADDING_TOP]
+			}) : yScale;
+			const segments = [];
+			let previous = null;
+			for (const datum of data) {
+				const x = xScale(getCategory(datum));
+				const value = line.getValue(datum);
+				if (x === void 0 || value === null || !Number.isFinite(value)) {
+					previous = null;
+					continue;
+				}
+				const point = {
+					x: x + xScale.bandwidth() / 2,
+					y: lineScale(value)
+				};
+				segments.push(previous === null ? `M ${point.x} ${point.y}` : `L ${point.x} ${point.y}`);
+				previous = point;
+			}
+			return {
+				key: line.key,
+				d: segments.join(" "),
+				color: line.color,
+				strokeDasharray: line.strokeDasharray ?? "5 4"
+			};
+		}).filter((path) => path.d !== "");
+	}, [
+		lines,
+		hiddenSeries,
+		data,
+		getCategory,
+		xScale,
+		yScale,
+		height,
+		width
+	]);
+	const stackCategorySet = (0, react.useMemo)(() => new Set(stackData.map((record) => record.__category)), [stackData]);
+	const lastFocusCategoryRef = (0, react.useRef)(null);
+	if (hoveredCategory !== null) lastFocusCategoryRef.current = hoveredCategory;
+	const focusCategory = lastFocusCategoryRef.current;
+	const focused = (0, react.useMemo)(() => hoveredCategory === null ? null : stackData.find((record) => record.__category === hoveredCategory) ?? null, [hoveredCategory, stackData]);
+	const totalValue = (0, react.useMemo)(() => {
+		if (focused) return series.reduce((sum, entry) => sum + Math.max(0, focused.__values[entry.key] ?? 0), 0);
+		return stackData.reduce((sum, record) => sum + series.reduce((s, entry) => s + Math.max(0, record.__values[entry.key] ?? 0), 0), 0);
+	}, [
+		focused,
+		series,
+		stackData
+	]);
+	const hoverLabel = focused ? formatTooltipCategory(focused.__category) : null;
+	(0, react.useEffect)(() => {
+		if (hoverLabel) {
+			setTrailingHoverLabel(hoverLabel);
+			return;
+		}
+		const timeoutId = window.setTimeout(() => {
+			setTrailingHoverLabel(null);
+		}, HOVER_FADE_MS);
+		return () => {
+			window.clearTimeout(timeoutId);
+		};
+	}, [hoverLabel]);
+	const ticks = categoryTicks ?? xDomain;
+	const highlightX = (0, react.useMemo)(() => {
+		if (!showHighlightLine || highlightedCategory === void 0) return null;
+		const x = xScale(highlightedCategory);
+		if (x === void 0) return null;
+		return x + xScale.bandwidth() / 2;
+	}, [
+		highlightedCategory,
+		showHighlightLine,
+		xScale
+	]);
+	const focusedDatum = (0, react.useMemo)(() => hoveredCategory === null ? null : data.find((datum) => getCategory(datum) === hoveredCategory) ?? null, [
+		hoveredCategory,
+		data,
+		getCategory
+	]);
+	const barStackLayer = (0, react.useMemo)(() => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BarStackLayer, {
+		stackData,
+		series,
+		seriesByKey,
+		xScale,
+		yScale,
+		colorScale
+	}), [
+		stackData,
+		series,
+		seriesByKey,
+		xScale,
+		yScale,
+		colorScale
+	]);
+	const fmtTooltipValue = formatValue ?? formatTotal;
+	const tooltipRows = focused ? [...series.filter((entry) => (focused.__values[entry.key] ?? 0) !== 0).map((entry) => ({
+		key: entry.key,
+		label: entry.label,
+		color: entry.color,
+		value: fmtTooltipValue(Math.abs(focused.__values[entry.key] ?? 0))
+	})), ...(lines ?? []).filter((line) => !hiddenSeries.has(line.key)).flatMap((line) => {
+		const value = focusedDatum === null ? null : line.getValue(focusedDatum);
+		if (value === null || !Number.isFinite(value)) return [];
+		return [{
+			key: line.key,
+			label: line.label,
+			color: line.color,
+			value: (line.formatValue ?? fmtTooltipValue)(value),
+			marker: "dashed-line"
+		}];
+	})] : [];
+	const tooltipActive = tooltipRows.length > 0;
+	const anchorX = focusCategory !== null ? (xScale(focusCategory) ?? 0) + xScale.bandwidth() / 2 : 0;
+	const anchorY = yScale(totalValue);
+	const [tooltipRef, tooltipSize] = require_components_chart.useMeasuredSize();
+	const tooltipPos = require_components_chart.clampTooltipPosition({
+		anchorX,
+		anchorY,
+		width,
+		height,
+		tipWidth: tooltipSize.width,
+		tipHeight: tooltipSize.height
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"data-slot": "bar-chart",
+		className: (0, cnfast.cn)("flex w-full flex-col", className),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-baseline justify-between",
+				children: [title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_typography.SectionTitle, { children: title }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "tabular-nums",
+					children: renderTotal ? renderTotal(totalValue, focused === null) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "text-base font-bold text-gray tabular-nums",
+						children: formatTotal(totalValue)
+					})
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex min-h-5 items-baseline justify-between gap-4",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_series_legend.SeriesLegend, {
+					items: [...series.map((entry) => ({
+						id: entry.key,
+						label: entry.label,
+						color: entry.color
+					})), ...(lines ?? []).map((line) => ({
+						id: line.key,
+						label: line.label,
+						color: line.color,
+						marker: "dashed-line"
+					}))],
+					hiddenIds: hiddenSeries,
+					onToggle: toggleSeries,
+					className: "gap-y-1"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: (0, cnfast.cn)("text-xs text-gray-light transition-opacity duration-200", hoverLabel ? "opacity-100" : "opacity-0"),
+					children: trailingHoverLabel ?? " "
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				ref: containerRef,
+				className: "relative mt-2 w-full",
+				style: { height },
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					ref: tooltipRef,
+					className: "pointer-events-none absolute z-10",
+					style: {
+						left: tooltipPos.left,
+						top: tooltipPos.top,
+						opacity: tooltipActive ? 1 : 0,
+						transition: reducedMotion ? "opacity 140ms ease-out" : "left 140ms ease-out, top 140ms ease-out, opacity 140ms ease-out"
+					},
+					children: focusCategory !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_chart.ChartTooltipCard, {
+						label: formatTooltipCategory(focusCategory),
+						rows: tooltipRows
+					})
+				}), width > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+					width,
+					height,
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+							x1: gutter,
+							x2: gutter,
+							y1: PADDING_TOP,
+							y2: height - PADDING_BOTTOM,
+							stroke: "var(--neutral-a6)",
+							strokeWidth: 1
+						}),
+						yTicks.map((tick, index) => {
+							const y = yScale(tick);
+							const hideTickLabel = yAxisUnit !== void 0 && index === yTicks.length - 1;
+							return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", { children: [!hideTickLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+								x1: gutter - 4,
+								x2: gutter,
+								y1: y,
+								y2: y,
+								stroke: "var(--neutral-a8)",
+								strokeWidth: 1
+							}), !hideTickLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
+								x: gutter - 7,
+								y: y + 3,
+								textAnchor: "end",
+								fill: "var(--neutral-a11)",
+								fontSize: 10,
+								children: formatYTick(tick)
+							})] }, `y-tick-${tick}`);
+						}),
+						yAxisUnit && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
+							x: 0,
+							y: PADDING_TOP - 6,
+							textAnchor: "start",
+							fill: "var(--neutral-a11)",
+							fontSize: 10,
+							fontWeight: 600,
+							children: yAxisUnit
+						}),
+						highlightX !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+							x1: highlightX,
+							x2: highlightX,
+							y1: PADDING_TOP,
+							y2: height - PADDING_BOTTOM,
+							stroke: "var(--spark-a9)",
+							strokeWidth: 1.5,
+							strokeDasharray: "5 4",
+							pointerEvents: "none"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+							x1: gutter,
+							x2: plotRight,
+							y1: yScale(0),
+							y2: yScale(0),
+							stroke: "var(--neutral-a5)",
+							strokeWidth: 1
+						}),
+						rightYScale !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+								x1: plotRight,
+								x2: plotRight,
+								y1: PADDING_TOP,
+								y2: height - PADDING_BOTTOM,
+								stroke: "var(--neutral-a6)",
+								strokeWidth: 1
+							}),
+							rightTicks.map((tick, index) => {
+								const y = rightYScale(tick);
+								const hideTickLabel = yAxisRightUnit !== void 0 && index === rightTicks.length - 1;
+								return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", { children: [!hideTickLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+									x1: plotRight,
+									x2: plotRight + 4,
+									y1: y,
+									y2: y,
+									stroke: "var(--neutral-a8)",
+									strokeWidth: 1
+								}), !hideTickLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
+									x: plotRight + 7,
+									y: y + 3,
+									textAnchor: "start",
+									fill: "var(--neutral-a11)",
+									fontSize: 10,
+									children: formatYTickRight(tick)
+								})] }, `y-tick-right-${tick}`);
+							}),
+							yAxisRightUnit && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
+								x: width,
+								y: PADDING_TOP - 6,
+								textAnchor: "end",
+								fill: "var(--neutral-a11)",
+								fontSize: 10,
+								fontWeight: 600,
+								children: yAxisRightUnit
+							})
+						] }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_visx_group.Group, { children: [
+							focusCategory !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FocusBorder, {
+								category: focusCategory,
+								visible: hoveredCategory !== null,
+								stackData,
+								series,
+								xScale,
+								yScale
+							}),
+							barStackLayer,
+							referenceLine && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+								x1: gutter,
+								x2: width,
+								y1: yScale(referenceLine.value),
+								y2: yScale(referenceLine.value),
+								stroke: referenceLine.color ?? "var(--neutral-a11)",
+								strokeWidth: 1.5,
+								pointerEvents: "none"
+							}),
+							linePaths.map((path) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+								d: path.d,
+								fill: "none",
+								stroke: path.color,
+								strokeWidth: 1.5,
+								strokeDasharray: path.strokeDasharray,
+								strokeLinecap: "round",
+								strokeLinejoin: "round",
+								pointerEvents: "none"
+							}, `line-${path.key}`))
+						] }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(InteractionLayer, {
+							xDomain,
+							activeCategories: stackCategorySet,
+							xScale,
+							height,
+							onHoverChange: setHoveredCategory
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CategoryTicks, {
+							ticks,
+							xScale,
+							height,
+							formatCategory
+						})
+					]
+				})]
+			})
+		]
+	});
+}
+//#endregion
+exports.BarChart = BarChart;
+
+//# sourceMappingURL=bar-chart.cjs.map