@epilot/spark-ui 1.0.0-alpha.2 → 1.0.0-alpha.4

package/dist/components/bar-chart.d.cts

@@ -0,0 +1,88 @@
+"use client";
+
+//#region src/components/bar-chart.d.ts
+type BarChartCategory = string | number;
+interface BarChartSeries<TDatum> {
+  key: string;
+  label: string;
+  color: string;
+  hoverFill?: string;
+  getValue: (datum: TDatum) => number;
+}
+interface BarChartLineSeries<TDatum> {
+  key: string;
+  label: string;
+  color: string;
+  /** `null` gaps break the line (e.g. hours without a reading). */
+  getValue: (datum: TDatum) => number | null;
+  /** Own y-domain for this line (e.g. `[0, 100]` for a percentage). Defaults to the bar scale. */
+  domain?: [number, number];
+  /** Start hidden; the user can enable the line from the legend. */
+  hiddenByDefault?: boolean;
+  /** Formats this line's value in the hover tooltip. Defaults to `formatValue`. */
+  formatValue?: (value: number) => string;
+  strokeDasharray?: string;
+}
+interface BarChartProps<TDatum> {
+  data: TDatum[];
+  series: BarChartSeries<TDatum>[];
+  /** Line overlays drawn on top of the bars, toggleable from the legend. */
+  lines?: BarChartLineSeries<TDatum>[];
+  getCategory: (datum: TDatum) => BarChartCategory;
+  /** Full ordered set of categories on the x-axis. Defaults to `data.map(getCategory)`. */
+  categories?: BarChartCategory[];
+  /** Subset of categories that should render an x-axis label. Defaults to every category. */
+  categoryTicks?: BarChartCategory[];
+  formatCategory?: (category: BarChartCategory) => string;
+  /** Formats the hovered category in the tooltip header. Defaults to `formatCategory`. */
+  formatTooltipCategory?: (category: BarChartCategory) => string;
+  highlightedCategory?: BarChartCategory;
+  showHighlightLine?: boolean;
+  /**
+   * Horizontal reference line drawn across the plot at a given y-value.
+   * Useful for thresholds (e.g. price ceiling).
+   */
+  referenceLine?: {
+    value: number;
+    label?: string;
+    color?: string;
+  };
+  title?: string;
+  yAxisUnit?: string;
+  height?: number;
+  /**
+   * Override how the total value (sum of focused or all categories) is
+   * rendered. `animated` is false while a bar is focused (hover), so an
+   * animated total can snap between hovered buckets instead of re-firing a
+   * tween on every bar the pointer crosses.
+   */
+  renderTotal?: (value: number, animated: boolean) => React.ReactNode;
+  /** Format function used when `renderTotal` is not provided. */
+  formatTotal?: (value: number) => string;
+  /** Formats per-series values in the hover tooltip. Defaults to `formatTotal`. */
+  formatValue?: (value: number) => string;
+  className?: string;
+}
+declare function BarChart<TDatum>({
+  data,
+  series,
+  lines,
+  getCategory,
+  categories,
+  categoryTicks,
+  formatCategory,
+  formatTooltipCategory,
+  highlightedCategory,
+  showHighlightLine,
+  referenceLine,
+  title,
+  yAxisUnit,
+  height,
+  renderTotal,
+  formatTotal,
+  formatValue,
+  className
+}: BarChartProps<TDatum>): React.ReactElement;
+//#endregion
+export { BarChart, BarChartCategory, BarChartLineSeries, BarChartProps, BarChartSeries };
+//# sourceMappingURL=bar-chart.d.cts.map

package/dist/components/bar-chart.d.ts

@@ -0,0 +1,88 @@
+"use client";
+
+//#region src/components/bar-chart.d.ts
+type BarChartCategory = string | number;
+interface BarChartSeries<TDatum> {
+  key: string;
+  label: string;
+  color: string;
+  hoverFill?: string;
+  getValue: (datum: TDatum) => number;
+}
+interface BarChartLineSeries<TDatum> {
+  key: string;
+  label: string;
+  color: string;
+  /** `null` gaps break the line (e.g. hours without a reading). */
+  getValue: (datum: TDatum) => number | null;
+  /** Own y-domain for this line (e.g. `[0, 100]` for a percentage). Defaults to the bar scale. */
+  domain?: [number, number];
+  /** Start hidden; the user can enable the line from the legend. */
+  hiddenByDefault?: boolean;
+  /** Formats this line's value in the hover tooltip. Defaults to `formatValue`. */
+  formatValue?: (value: number) => string;
+  strokeDasharray?: string;
+}
+interface BarChartProps<TDatum> {
+  data: TDatum[];
+  series: BarChartSeries<TDatum>[];
+  /** Line overlays drawn on top of the bars, toggleable from the legend. */
+  lines?: BarChartLineSeries<TDatum>[];
+  getCategory: (datum: TDatum) => BarChartCategory;
+  /** Full ordered set of categories on the x-axis. Defaults to `data.map(getCategory)`. */
+  categories?: BarChartCategory[];
+  /** Subset of categories that should render an x-axis label. Defaults to every category. */
+  categoryTicks?: BarChartCategory[];
+  formatCategory?: (category: BarChartCategory) => string;
+  /** Formats the hovered category in the tooltip header. Defaults to `formatCategory`. */
+  formatTooltipCategory?: (category: BarChartCategory) => string;
+  highlightedCategory?: BarChartCategory;
+  showHighlightLine?: boolean;
+  /**
+   * Horizontal reference line drawn across the plot at a given y-value.
+   * Useful for thresholds (e.g. price ceiling).
+   */
+  referenceLine?: {
+    value: number;
+    label?: string;
+    color?: string;
+  };
+  title?: string;
+  yAxisUnit?: string;
+  height?: number;
+  /**
+   * Override how the total value (sum of focused or all categories) is
+   * rendered. `animated` is false while a bar is focused (hover), so an
+   * animated total can snap between hovered buckets instead of re-firing a
+   * tween on every bar the pointer crosses.
+   */
+  renderTotal?: (value: number, animated: boolean) => React.ReactNode;
+  /** Format function used when `renderTotal` is not provided. */
+  formatTotal?: (value: number) => string;
+  /** Formats per-series values in the hover tooltip. Defaults to `formatTotal`. */
+  formatValue?: (value: number) => string;
+  className?: string;
+}
+declare function BarChart<TDatum>({
+  data,
+  series,
+  lines,
+  getCategory,
+  categories,
+  categoryTicks,
+  formatCategory,
+  formatTooltipCategory,
+  highlightedCategory,
+  showHighlightLine,
+  referenceLine,
+  title,
+  yAxisUnit,
+  height,
+  renderTotal,
+  formatTotal,
+  formatValue,
+  className
+}: BarChartProps<TDatum>): React.ReactElement;
+//#endregion
+export { BarChart, BarChartCategory, BarChartLineSeries, BarChartProps, BarChartSeries };
+//# sourceMappingURL=bar-chart.d.ts.map

package/dist/components/bar-chart.js

@@ -0,0 +1,518 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import { localeNumberFormat } from "../utils/format.js";
+import { buildYAxisScale, formatYAxisTick } from "../utils/chart-scale.js";
+import { ChartTooltipCard, clampTooltipPosition, useMeasuredSize } from "./chart.js";
+import { SeriesLegend } from "./series-legend.js";
+import { SectionTitle } from "./typography.js";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { localPoint } from "@visx/event";
+import { Group } from "@visx/group";
+import { scaleBand, scaleLinear, scaleOrdinal } from "@visx/scale";
+import { BarStack } from "@visx/shape";
+//#region src/components/bar-chart.tsx
+const defaultTotalFormat = 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;
+const Y_AXIS_GUTTER = 34;
+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__ */ jsx(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__ */ 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 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__ */ 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: `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 = 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__ */ 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__ */ jsx(Fragment, { children: ticks.map((category) => {
+		const x = xScale(category);
+		if (x === void 0) return null;
+		return /* @__PURE__ */ jsx("text", {
+			x: x + xScale.bandwidth() / 2,
+			y: height - PADDING_BOTTOM + 16,
+			textAnchor: "middle",
+			fill: "var(--gray-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, height = DEFAULT_HEIGHT, renderTotal, formatTotal = defaultFormatTotal, formatValue, className }) {
+	const containerRef = useRef(null);
+	const [width, setWidth] = useState(0);
+	const [hoveredCategory, setHoveredCategory] = useState(null);
+	const [trailingHoverLabel, setTrailingHoverLabel] = useState(null);
+	const [hiddenSeries, setHiddenSeries] = useState(() => new Set((lines ?? []).filter((line) => line.hiddenByDefault).map((line) => line.key)));
+	const toggleSeries = useCallback((id) => {
+		setHiddenSeries((prev) => {
+			const next = new Set(prev);
+			if (next.has(id)) next.delete(id);
+			else next.add(id);
+			return next;
+		});
+	}, []);
+	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 = useMemo(() => {
+		const map = /* @__PURE__ */ new Map();
+		for (const entry of series) map.set(entry.key, entry);
+		return map;
+	}, [series]);
+	const stackData = 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 = 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 = 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 = useMemo(() => categories ?? stackData.map((record) => record.__category), [categories, stackData]);
+	const xScale = useMemo(() => scaleBand({
+		domain: xDomain,
+		range: [Y_AXIS_GUTTER, Math.max(Y_AXIS_GUTTER, width)],
+		padding: .32
+	}), [xDomain, width]);
+	const yScale = useMemo(() => scaleLinear({
+		domain: [yMin, yMax],
+		range: [height - PADDING_BOTTOM, PADDING_TOP]
+	}), [
+		height,
+		yMax,
+		yMin
+	]);
+	const colorScale = useMemo(() => scaleOrdinal({
+		domain: series.map((entry) => entry.key),
+		range: series.map((entry) => entry.color)
+	}), [series]);
+	const linePaths = useMemo(() => {
+		if (!lines || width === 0) return [];
+		return lines.filter((line) => !hiddenSeries.has(line.key)).map((line) => {
+			const lineScale = line.domain ? 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 = useMemo(() => new Set(stackData.map((record) => record.__category)), [stackData]);
+	const lastFocusCategoryRef = useRef(null);
+	if (hoveredCategory !== null) lastFocusCategoryRef.current = hoveredCategory;
+	const focusCategory = lastFocusCategoryRef.current;
+	const focused = useMemo(() => hoveredCategory === null ? null : stackData.find((record) => record.__category === hoveredCategory) ?? null, [hoveredCategory, stackData]);
+	const totalValue = 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;
+	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 yTicks = useMemo(() => buildYAxisScale(yMin, yMax).ticks, [yMin, yMax]);
+	const highlightX = 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 = useMemo(() => hoveredCategory === null ? null : data.find((datum) => getCategory(datum) === hoveredCategory) ?? null, [
+		hoveredCategory,
+		data,
+		getCategory
+	]);
+	const barStackLayer = useMemo(() => /* @__PURE__ */ 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)
+		}];
+	})] : [];
+	const tooltipActive = tooltipRows.length > 0;
+	const anchorX = focusCategory !== null ? (xScale(focusCategory) ?? 0) + xScale.bandwidth() / 2 : 0;
+	const anchorY = yScale(totalValue);
+	const [tooltipRef, tooltipSize] = useMeasuredSize();
+	const tooltipPos = clampTooltipPosition({
+		anchorX,
+		anchorY,
+		width,
+		height,
+		tipWidth: tooltipSize.width,
+		tipHeight: tooltipSize.height
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex w-full flex-col", className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-baseline justify-between",
+				children: [title && /* @__PURE__ */ jsx(SectionTitle, { children: title }), /* @__PURE__ */ jsx("span", {
+					className: "tabular-nums",
+					children: renderTotal ? renderTotal(totalValue, focused === null) : /* @__PURE__ */ jsx("span", {
+						className: "text-base font-bold text-gray tabular-nums",
+						children: formatTotal(totalValue)
+					})
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex min-h-5 items-baseline justify-between gap-4",
+				children: [/* @__PURE__ */ jsx(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__ */ jsx("span", {
+					className: cn("text-xs text-gray-light transition-opacity duration-200", hoverLabel ? "opacity-100" : "opacity-0"),
+					children: trailingHoverLabel ?? " "
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				ref: containerRef,
+				className: "relative mt-2 w-full",
+				style: { height },
+				children: [/* @__PURE__ */ jsx("div", {
+					ref: tooltipRef,
+					className: "pointer-events-none absolute z-10",
+					style: {
+						left: tooltipPos.left,
+						top: tooltipPos.top,
+						opacity: tooltipActive ? 1 : 0,
+						transition: "left 140ms ease-out, top 140ms ease-out, opacity 140ms ease-out"
+					},
+					children: focusCategory !== null && /* @__PURE__ */ jsx(ChartTooltipCard, {
+						label: formatTooltipCategory(focusCategory),
+						rows: tooltipRows
+					})
+				}), width > 0 && /* @__PURE__ */ jsxs("svg", {
+					width,
+					height,
+					children: [
+						/* @__PURE__ */ jsx("line", {
+							x1: Y_AXIS_GUTTER,
+							x2: Y_AXIS_GUTTER,
+							y1: PADDING_TOP,
+							y2: height - PADDING_BOTTOM,
+							stroke: "var(--gray-a6)",
+							strokeWidth: 1
+						}),
+						yTicks.map((tick, index) => {
+							const y = yScale(tick);
+							const hideTickLabel = yAxisUnit !== void 0 && index === yTicks.length - 1;
+							return /* @__PURE__ */ jsxs("g", { children: [!hideTickLabel && /* @__PURE__ */ jsx("line", {
+								x1: Y_AXIS_GUTTER - 4,
+								x2: Y_AXIS_GUTTER,
+								y1: y,
+								y2: y,
+								stroke: "var(--gray-a8)",
+								strokeWidth: 1
+							}), !hideTickLabel && /* @__PURE__ */ jsx("text", {
+								x: Y_AXIS_GUTTER - 7,
+								y: y + 3,
+								textAnchor: "end",
+								fill: "var(--gray-a11)",
+								fontSize: 10,
+								children: formatYAxisTick(tick)
+							})] }, `y-tick-${tick}`);
+						}),
+						yAxisUnit && /* @__PURE__ */ jsx("text", {
+							x: 0,
+							y: PADDING_TOP - 6,
+							textAnchor: "start",
+							fill: "var(--gray-a11)",
+							fontSize: 10,
+							fontWeight: 600,
+							children: yAxisUnit
+						}),
+						highlightX !== null && /* @__PURE__ */ 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__ */ jsx("line", {
+							x1: Y_AXIS_GUTTER,
+							x2: width,
+							y1: yScale(0),
+							y2: yScale(0),
+							stroke: "var(--gray-a5)",
+							strokeWidth: 1
+						}),
+						/* @__PURE__ */ jsxs(Group, { children: [
+							focusCategory !== null && /* @__PURE__ */ jsx(FocusBorder, {
+								category: focusCategory,
+								visible: hoveredCategory !== null,
+								stackData,
+								series,
+								xScale,
+								yScale
+							}),
+							barStackLayer,
+							referenceLine && /* @__PURE__ */ jsx("line", {
+								x1: Y_AXIS_GUTTER,
+								x2: width,
+								y1: yScale(referenceLine.value),
+								y2: yScale(referenceLine.value),
+								stroke: referenceLine.color ?? "var(--gray-a11)",
+								strokeWidth: 1.5,
+								pointerEvents: "none"
+							}),
+							linePaths.map((path) => /* @__PURE__ */ 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__ */ jsx(InteractionLayer, {
+							xDomain,
+							activeCategories: stackCategorySet,
+							xScale,
+							height,
+							onHoverChange: setHoveredCategory
+						}),
+						/* @__PURE__ */ jsx(CategoryTicks, {
+							ticks,
+							xScale,
+							height,
+							formatCategory
+						})
+					]
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { BarChart };
+
+//# sourceMappingURL=bar-chart.js.map