@galaxy-io/dls 1.2.7 → 1.3.1

package/dist/charts/ChartTooltip.js

@@ -1,64 +1,70 @@
-import { withTheme } from "../theme/GalaxyTheme.js";
 import Text, { TextSize, TextVariant, TextWeight } from "../text/Text.js";
+import FlexItem from "../containers/FlexItem.js";
 import FlexWrapper, { AlignItems, FlexDirection, JustifyContent } from "../containers/FlexWrapper.js";
 import Circle from "../shapes/Circle.js";
-import { defaultValueFormatter } from "./utils.js";
-/* empty css                       */
-import { styled } from "@linaria/react";
+import { useChartTooltipPosition } from "./useChartTooltipPosition.js";
+import { ChartTooltipPositioner } from "./ChartPrimitives.js";
+import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/charts/ChartTooltip.tsx
-var _exp = () => ({ $x }) => $x;
-var _exp2 = () => ({ $y }) => $y;
-var _exp3 = () => ({ theme }) => theme.color.background.secondary;
-var _exp4 = () => ({ theme }) => theme.color.border.secondary;
-var _exp5 = () => ({ $visible }) => $visible ? 1 : 0;
-var TooltipContainer = withTheme(/*#__PURE__*/ styled("div")({
-	name: "TooltipContainer",
-	class: "ttysfji",
-	propsAsIs: false,
-	vars: {
-		"ttysfji-0": [_exp(), "px"],
-		"ttysfji-1": [_exp2(), "px"],
-		"ttysfji-2": [_exp3()],
-		"ttysfji-3": [_exp4()],
-		"ttysfji-4": [_exp5()]
-	}
-}));
-var ChartTooltip = ({ data, valueFormatter = defaultValueFormatter }) => {
-	if (!data) return null;
-	return /* @__PURE__ */ jsx(TooltipContainer, {
-		$x: data.x,
-		$y: data.y,
-		$visible: true,
-		children: /* @__PURE__ */ jsxs(FlexWrapper, {
+var ChartTooltip = ({ model, containerWidth, containerHeight, anchorHalfWidth, placeAwayFromX, verticalAlign, renderer }) => {
+	const [retained, setRetained] = useState(model);
+	if (model !== null && model !== retained) setRetained(model);
+	const { tooltipRef, x, y, isMeasured } = useChartTooltipPosition({
+		anchorX: model?.anchorX ?? retained?.anchorX ?? 0,
+		anchorY: model?.anchorY ?? retained?.anchorY ?? 0,
+		containerWidth,
+		containerHeight,
+		anchorHalfWidth,
+		placeAwayFromX,
+		verticalAlign
+	});
+	const displayed = model ?? retained;
+	return /* @__PURE__ */ jsx(ChartTooltipPositioner, {
+		ref: tooltipRef,
+		$x: x,
+		$y: y,
+		$isVisible: model !== null && isMeasured,
+		role: "tooltip",
+		"aria-hidden": model === null,
+		children: !displayed ? null : renderer ? renderer(displayed) : /* @__PURE__ */ jsxs(FlexWrapper, {
 			direction: FlexDirection.COLUMN,
-			gap: 6,
+			gap: 8,
+			fillWidth: true,
 			children: [/* @__PURE__ */ jsx(Text, {
 				size: TextSize.BODY_SM,
-				weight: TextWeight.MEDIUM,
-				children: data.label
-			}), data.items.map((item) => /* @__PURE__ */ jsxs(FlexWrapper, {
-				alignItems: AlignItems.CENTER,
-				justifyContent: JustifyContent.SPACE_BETWEEN,
-				gap: 32,
+				variant: TextVariant.TERTIARY,
+				children: displayed.label
+			}), /* @__PURE__ */ jsx(FlexWrapper, {
+				direction: FlexDirection.COLUMN,
+				gap: 6,
 				fillWidth: true,
-				children: [/* @__PURE__ */ jsxs(FlexWrapper, {
+				children: displayed.rows.map((row) => /* @__PURE__ */ jsxs(FlexWrapper, {
 					alignItems: AlignItems.CENTER,
-					gap: 6,
-					children: [/* @__PURE__ */ jsx(Circle, {
-						size: 8,
-						hex: item.color
+					justifyContent: JustifyContent.SPACE_BETWEEN,
+					gap: 16,
+					fillWidth: true,
+					children: [/* @__PURE__ */ jsxs(FlexWrapper, {
+						alignItems: AlignItems.CENTER,
+						gap: 6,
+						children: [/* @__PURE__ */ jsx(FlexItem, {
+							shrink: 0,
+							children: /* @__PURE__ */ jsx(Circle, {
+								size: 8,
+								hex: row.color
+							})
+						}), /* @__PURE__ */ jsx(Text, {
+							size: TextSize.BODY_SM,
+							isEllipsis: true,
+							children: row.label
+						})]
 					}), /* @__PURE__ */ jsx(Text, {
-						size: TextSize.CAPTION,
-						variant: TextVariant.PRIMARY,
-						children: item.seriesName
+						size: TextSize.BODY_SM,
+						weight: TextWeight.MEDIUM,
+						children: row.formattedValue
 					})]
-				}), /* @__PURE__ */ jsx(Text, {
-					size: TextSize.CAPTION,
-					weight: TextWeight.MEDIUM,
-					children: valueFormatter(item.value)
-				})]
-			}, item.seriesKey))]
+				}, row.key))
+			})]
 		})
 	});
 };

package/dist/charts/LineChart.d.ts

@@ -1,22 +1,44 @@
-import type { CurveFactory } from "d3-shape";
-import type { BaseChartProps } from "./types";
-export declare enum LineChartMode {
-    NORMAL = "NORMAL",
-    STACKED = "STACKED"
-}
-export interface LineChartProps extends BaseChartProps {
-    /** Normal or stacked line mode */
-    mode?: LineChartMode;
-    /** Line stroke width in px */
+import { LineChartCurve } from "./types";
+import type { BaseCartesianChartProps, ChartSeriesStyles, ChartSize, LineChartLineDatum } from "./types";
+export type LineChartProps<TMetric extends string> = BaseCartesianChartProps & ChartSize & {
+    /**
+     * Presentation for every metric, keyed by metric.
+     *
+     * `TMetric` is inferred from these keys alone — `lines` wraps it in
+     * `NoInfer` — so a mistyped metric is a compile error rather than a line
+     * that silently fails to draw.
+     */
+    series: ChartSeriesStyles<TMetric>;
+    /** One entry per line. Lines may be sparse. */
+    lines: LineChartLineDatum<NoInfer<TMetric>>[];
+    /**
+     * Explicit category order along the x-axis.
+     *
+     * Worth supplying whenever the lines are sparse: the inferred order is the
+     * union of each line's categories in first-seen order, which is only
+     * correct if some line covers them all.
+     */
+    categories?: string[];
+    /** @default LineChartCurve.SMOOTH */
+    curve?: LineChartCurve;
+    /** Default stroke width in px, overridable per line. */
     strokeWidth?: number;
-    /** Data-point dot radius in px (0 to hide dots) */
-    dotRadius?: number;
-    /** Show grid lines */
-    showGrid?: boolean;
-    /** Fill area under lines */
-    showArea?: boolean;
-    /** D3 curve factory for line interpolation */
-    curveType?: CurveFactory;
-}
-declare const LineChart: ({ data, series, width, height, margin: marginOverride, fillWidth, aspectRatio, mode, strokeWidth, dotRadius, valueFormatter, labelFormatter, tooltipRenderer, noTooltip, showLegend, showGrid, showArea, curveType, ariaLabel, }: LineChartProps) => import("react").JSX.Element;
+    /** Draw a vertical rule at the active category. @default true */
+    showCursor?: boolean;
+    /**
+     * Notified when a category is pinned or unpinned by a click.
+     *
+     * The index is a position on the category axis.
+     */
+    onPinnedChange?: (categoryIndex: number | null) => void;
+};
+/**
+ * Line chart over a categorical x-axis.
+ *
+ * Hit testing is per category column rather than per stroke: the tooltip
+ * reports every line at the hovered category at once, which is almost always
+ * what a reader wants, and it avoids the proximity search a
+ * nearest-point-to-cursor model needs.
+ */
+declare const LineChart: <TMetric extends string>({ series, lines, categories, width, height, fillWidth, fillHeight, aspectRatio, margin, curve, strokeWidth, showCursor, valueUnit, valueFormatter, labelFormatter, valueDomain, categoryLabelMode, categoryAxisTitle, valueAxisTitle, showGrid, showLegend, noTooltip, tooltipRenderer, isLoading, contentWhenEmpty, ariaLabel, ariaDescription, onPinnedChange, }: LineChartProps<TMetric>) => import("react").JSX.Element;
 export default LineChart;

package/dist/charts/LineChart.js

@@ -1,250 +1,184 @@
-import { useGalaxyTheme, withTheme } from "../theme/GalaxyTheme.js";
-import FlexWrapper, { FlexDirection } from "../containers/FlexWrapper.js";
-import { useElementWidth } from "../hooks/useElementWidth.js";
-import Wrapper from "../containers/Wrapper.js";
-import { getChartPalette } from "./constants.js";
-import { buildLinearScale, buildPointScale, defaultLabelFormatter, defaultValueFormatter, getGroupedMax, getPlotDimensions, getStackedMax, resolveMargin, resolveSeriesColor } from "./utils.js";
-import ChartLegend from "./ChartLegend.js";
-import ChartTooltip from "./ChartTooltip.js";
-import { XAxisPoint, YAxis } from "./ChartAxis.js";
-/* empty css                    */
-import { styled } from "@linaria/react";
-import { useCallback, useMemo, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { area, curveMonotoneX, line } from "d3-shape";
+import { ChartKind, ChartTargetShape, LineChartCurve } from "./types.js";
+import { LINE_AREA_OPACITY, LINE_POINT_RADIUS } from "./constants.js";
+import { useSeriesColorResolver } from "./useSeriesColorResolver.js";
+import { useChartInteraction } from "./useChartInteraction.js";
+import { useCartesianChartLayout } from "./useCartesianChartLayout.js";
+import { buildLineChartGeometry, getLineValueDomain } from "./lineChartGeometry.js";
+import { ChartAreaPath, ChartCursorLine, ChartLinePath, ChartPointCircle } from "./ChartPrimitives.js";
+import ChartFrame from "./ChartFrame.js";
+import { ChartCategoryAxis, ChartValueAxis } from "./ChartAxis.js";
+import { useCallback, useMemo, useRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/charts/LineChart.tsx
-var LineChartMode = /* @__PURE__ */ function(LineChartMode) {
-	LineChartMode["NORMAL"] = "NORMAL";
-	LineChartMode["STACKED"] = "STACKED";
-	return LineChartMode;
-}({});
-var _exp = () => ({ $fillWidth }) => $fillWidth ? "flex" : "inline-flex";
-var _exp2 = () => ({ $fillWidth }) => $fillWidth ? "100%" : "auto";
-var ChartWrapper = withTheme(/*#__PURE__*/ styled("div")({
-	name: "ChartWrapper",
-	class: "c8llr95",
-	propsAsIs: false,
-	vars: {
-		"c8llr95-0": [_exp()],
-		"c8llr95-1": [_exp2()]
-	}
-}));
-var LineChart = ({ data, series, width, height, margin: marginOverride, fillWidth = false, aspectRatio, mode = "NORMAL", strokeWidth = 2, dotRadius = 4, valueFormatter = defaultValueFormatter, labelFormatter = defaultLabelFormatter, tooltipRenderer, noTooltip = false, showLegend = true, showGrid = true, showArea = false, curveType = curveMonotoneX, ariaLabel }) => {
-	const { theme } = useGalaxyTheme();
+/**
+* Line chart over a categorical x-axis.
+*
+* Hit testing is per category column rather than per stroke: the tooltip
+* reports every line at the hovered category at once, which is almost always
+* what a reader wants, and it avoids the proximity search a
+* nearest-point-to-cursor model needs.
+*/
+var LineChart = ({ series, lines, categories, width, height, fillWidth, fillHeight, aspectRatio, margin, curve = LineChartCurve.SMOOTH, strokeWidth, showCursor = true, valueUnit, valueFormatter, labelFormatter, valueDomain, categoryLabelMode, categoryAxisTitle, valueAxisTitle, showGrid = true, showLegend = true, noTooltip = false, tooltipRenderer, isLoading = false, contentWhenEmpty, ariaLabel, ariaDescription, onPinnedChange }) => {
 	const containerRef = useRef(null);
-	const svgRef = useRef(null);
-	const [tooltip, setTooltip] = useState(null);
-	const [hoveredDatumIndex, setHoveredDatumIndex] = useState(null);
-	const measuredWidth = useElementWidth(containerRef);
-	const resolvedWidth = fillWidth ? measuredWidth ?? 0 : width ?? 0;
-	const resolvedHeight = aspectRatio ? resolvedWidth / aspectRatio : height ?? 0;
-	const palette = useMemo(() => getChartPalette(theme), [theme]);
-	const margin = useMemo(() => resolveMargin(marginOverride), [marginOverride]);
-	const { plotWidth, plotHeight } = useMemo(() => getPlotDimensions(resolvedWidth, resolvedHeight, margin), [
-		resolvedWidth,
-		resolvedHeight,
-		margin
-	]);
-	const seriesKeys = useMemo(() => series.map((s) => s.key), [series]);
-	const labels = useMemo(() => data.map((d) => d.label), [data]);
-	const xScale = useMemo(() => buildPointScale(labels, [0, plotWidth]), [labels, plotWidth]);
-	const yMax = useMemo(() => mode === "STACKED" ? getStackedMax(data, seriesKeys) : getGroupedMax(data, seriesKeys), [
-		data,
-		seriesKeys,
-		mode
-	]);
-	const yScale = useMemo(() => buildLinearScale(yMax, [plotHeight, 0]), [yMax, plotHeight]);
-	const stackedValues = useMemo(() => {
-		if (mode !== "STACKED") return null;
-		return data.map((datum) => {
-			let cumulative = 0;
-			const values = {};
-			for (const s of series) {
-				const value = datum.values[s.key] ?? 0;
-				values[s.key] = {
-					y0: cumulative,
-					y1: cumulative + value
-				};
-				cumulative += value;
-			}
-			return values;
-		});
-	}, [
-		data,
-		series,
-		mode
+	const colors = useSeriesColorResolver(series);
+	const { dimensions, domain, valueTicks, formatValue, formatLabel } = useCartesianChartLayout({
+		containerRef,
+		rawDomain: useMemo(() => getLineValueDomain(lines), [lines]),
+		valueDomain,
+		width,
+		height,
+		fillWidth,
+		fillHeight,
+		aspectRatio,
+		margin,
+		valueUnit,
+		valueFormatter,
+		labelFormatter,
+		valueAxisTitle,
+		categoryAxisTitle
+	});
+	const { plotWidth, plotHeight } = dimensions;
+	const resolveColor = useCallback(({ metric }) => colors.resolve(metric), [colors]);
+	const geometry = useMemo(() => buildLineChartGeometry({
+		lines,
+		categories,
+		plotWidth,
+		plotHeight,
+		curve,
+		domain,
+		strokeWidth,
+		resolveColor
+	}), [
+		lines,
+		categories,
+		plotWidth,
+		plotHeight,
+		curve,
+		domain,
+		strokeWidth,
+		resolveColor
 	]);
-	const handlePointMouseEnter = useCallback((datumIndex, x, y) => {
-		const datum = data[datumIndex];
-		if (!datum) return;
-		setHoveredDatumIndex(datumIndex);
-		setTooltip({
-			label: datum.label,
-			items: series.map((s, i) => ({
-				seriesKey: s.key,
-				seriesName: s.name,
-				value: datum.values[s.key] ?? 0,
-				color: resolveSeriesColor(s, i, palette)
-			})),
-			x: x + margin.left,
-			y: y + margin.top
-		});
+	const isEmpty = geometry.categories.length === 0 || lines.length === 0;
+	const legendItems = useMemo(() => colors.keys.map((metric) => ({
+		key: metric,
+		label: series[metric].label,
+		color: colors.resolve(metric)
+	})), [colors, series]);
+	const legendKeys = useMemo(() => legendItems.map((item) => item.key), [legendItems]);
+	const interaction = useChartInteraction({
+		categoryCount: geometry.columns.length,
+		seriesKeys: legendKeys,
+		disabled: noTooltip || isLoading || isEmpty,
+		isLoading,
+		onPinnedChange
+	});
+	const activeColumn = interaction.activeIndex === null ? null : geometry.columns[interaction.activeIndex];
+	const buildCategoryTooltip = useCallback((index) => {
+		const column = geometry.columns[index];
+		if (!column) return null;
+		const rows = [...column.points].sort((a, b) => b.value - a.value).map((point) => ({
+			key: point.id,
+			label: series[point.metric]?.label ?? point.metric,
+			value: point.value,
+			formattedValue: formatValue(point.value),
+			color: point.color
+		}));
+		return {
+			label: formatLabel(column.label),
+			rows,
+			anchorX: column.x,
+			anchorY: column.anchorY
+		};
 	}, [
-		data,
+		geometry.columns,
 		series,
-		palette,
-		margin
+		formatValue,
+		formatLabel
 	]);
-	const handlePointMouseLeave = useCallback(() => {
-		setHoveredDatumIndex(null);
-		setTooltip(null);
-	}, []);
-	if (resolvedWidth === 0 || resolvedHeight === 0) return /* @__PURE__ */ jsx(ChartWrapper, {
-		ref: containerRef,
-		$fillWidth: fillWidth
-	});
-	const renderNormalLines = () => {
-		return series.map((s, seriesIndex) => {
-			const color = resolveSeriesColor(s, seriesIndex, palette);
-			const linePath = line().x((_, i) => xScale(data[i].label) ?? 0).y((_, i) => yScale(data[i].values[s.key] ?? 0)).curve(curveType)(data.map((_, i) => i)) ?? "";
-			const areaPath = showArea ? area().x((_, i) => xScale(data[i].label) ?? 0).y0(plotHeight).y1((_, i) => yScale(data[i].values[s.key] ?? 0)).curve(curveType)(data.map((_, i) => i)) ?? "" : "";
-			return /* @__PURE__ */ jsxs("g", { children: [
-				showArea && /* @__PURE__ */ jsx("path", {
-					d: areaPath,
-					fill: color,
-					opacity: .1,
-					style: { transition: `opacity 150ms ease-in-out` }
-				}),
-				/* @__PURE__ */ jsx("path", {
-					d: linePath,
-					fill: "none",
-					stroke: color,
-					strokeWidth,
-					style: { transition: `opacity 150ms ease-in-out` }
-				}),
-				data.map((datum, datumIndex) => {
-					const cx = xScale(datum.label) ?? 0;
-					const cy = yScale(datum.values[s.key] ?? 0);
-					return /* @__PURE__ */ jsxs("g", { children: [dotRadius > 0 && /* @__PURE__ */ jsx("circle", {
-						cx,
-						cy,
-						r: dotRadius,
-						fill: color,
-						opacity: hoveredDatumIndex !== null && hoveredDatumIndex !== datumIndex ? .3 : 1,
-						style: { transition: `opacity 150ms ease-in-out` },
-						role: "graphics-symbol",
-						"aria-roledescription": "data point",
-						"aria-label": `${s.name} for ${datum.label}: ${valueFormatter(datum.values[s.key] ?? 0)}`
-					}), /* @__PURE__ */ jsx("circle", {
-						cx,
-						cy,
-						r: dotRadius + 6,
-						fill: "transparent",
-						onMouseEnter: () => handlePointMouseEnter(datumIndex, cx, cy),
-						onMouseLeave: handlePointMouseLeave,
-						onFocus: () => handlePointMouseEnter(datumIndex, cx, cy),
-						onBlur: handlePointMouseLeave,
-						tabIndex: 0,
-						style: { cursor: "pointer" }
-					})] }, datum.label);
-				})
-			] }, s.key);
-		});
-	};
-	const renderStackedLines = () => {
-		if (!stackedValues) return null;
-		return series.map((s, seriesIndex) => {
-			const color = resolveSeriesColor(s, seriesIndex, palette);
-			const areaPath = area().x((_, i) => xScale(data[i].label) ?? 0).y0((_, i) => yScale(stackedValues[i][s.key].y0)).y1((_, i) => yScale(stackedValues[i][s.key].y1)).curve(curveType)(data.map((_, i) => i)) ?? "";
-			const linePath = line().x((_, i) => xScale(data[i].label) ?? 0).y((_, i) => yScale(stackedValues[i][s.key].y1)).curve(curveType)(data.map((_, i) => i)) ?? "";
-			return /* @__PURE__ */ jsxs("g", { children: [
-				/* @__PURE__ */ jsx("path", {
-					d: areaPath,
-					fill: color,
-					opacity: .3,
-					style: { transition: `opacity 150ms ease-in-out` }
-				}),
-				/* @__PURE__ */ jsx("path", {
-					d: linePath,
-					fill: "none",
-					stroke: color,
-					strokeWidth,
-					style: { transition: `opacity 150ms ease-in-out` }
-				}),
-				data.map((datum, datumIndex) => {
-					const cx = xScale(datum.label) ?? 0;
-					const cy = yScale(stackedValues[datumIndex][s.key].y1);
-					return /* @__PURE__ */ jsxs("g", { children: [dotRadius > 0 && /* @__PURE__ */ jsx("circle", {
-						cx,
-						cy,
-						r: dotRadius,
-						fill: color,
-						opacity: hoveredDatumIndex !== null && hoveredDatumIndex !== datumIndex ? .3 : 1,
-						style: { transition: `opacity 150ms ease-in-out` },
-						role: "graphics-symbol",
-						"aria-roledescription": "data point",
-						"aria-label": `${s.name} for ${datum.label}: ${valueFormatter(datum.values[s.key] ?? 0)}`
-					}), /* @__PURE__ */ jsx("circle", {
-						cx,
-						cy,
-						r: dotRadius + 6,
-						fill: "transparent",
-						onMouseEnter: () => handlePointMouseEnter(datumIndex, cx, cy),
-						onMouseLeave: handlePointMouseLeave,
-						onFocus: () => handlePointMouseEnter(datumIndex, cx, cy),
-						onBlur: handlePointMouseLeave,
-						tabIndex: 0,
-						style: { cursor: "pointer" }
-					})] }, datum.label);
-				})
-			] }, s.key);
-		});
-	};
-	const defaultAriaLabel = `Line chart with ${data.length} data points and ${series.length} series`;
-	return /* @__PURE__ */ jsxs(ChartWrapper, {
-		ref: containerRef,
-		$fillWidth: fillWidth,
-		children: [/* @__PURE__ */ jsxs(Wrapper, {
-			position: "relative",
-			children: [/* @__PURE__ */ jsx("svg", {
-				ref: svgRef,
-				width: resolvedWidth,
-				height: resolvedHeight,
-				role: "img",
-				"aria-label": ariaLabel ?? defaultAriaLabel,
-				children: /* @__PURE__ */ jsxs("g", {
-					transform: `translate(${margin.left}, ${margin.top})`,
-					children: [
-						/* @__PURE__ */ jsx(YAxis, {
-							scale: yScale,
-							transform: "translate(0, 0)",
-							plotWidth,
-							formatter: valueFormatter,
-							showGrid,
-							theme
-						}),
-						/* @__PURE__ */ jsx(XAxisPoint, {
-							scale: xScale,
-							transform: `translate(0, ${plotHeight})`,
-							plotWidth,
-							formatter: labelFormatter
-						}),
-						mode === "STACKED" ? renderStackedLines() : renderNormalLines()
-					]
-				})
-			}), !noTooltip && (tooltipRenderer ? tooltip && tooltipRenderer(tooltip) : /* @__PURE__ */ jsx(ChartTooltip, {
-				data: tooltip,
-				valueFormatter
-			}))]
-		}), showLegend && /* @__PURE__ */ jsxs(FlexWrapper, {
-			direction: FlexDirection.ROW,
-			gap: 0,
-			children: [/* @__PURE__ */ jsx(Wrapper, { minWidth: margin.left }), /* @__PURE__ */ jsx(ChartLegend, {
-				series,
-				palette
-			})]
-		})]
+	const categoryPositions = useMemo(() => geometry.columns.map((column) => column.x - geometry.step / 2), [geometry.columns, geometry.step]);
+	const categoryTargets = useMemo(() => geometry.columns.map((column) => ({
+		key: String(column.categoryIndex),
+		shape: ChartTargetShape.RECT,
+		x: column.bandX,
+		y: 0,
+		width: column.bandWidth,
+		height: plotHeight
+	})), [geometry.columns, plotHeight]);
+	return /* @__PURE__ */ jsxs(ChartFrame, {
+		containerRef,
+		dimensions,
+		fillWidth,
+		fillHeight,
+		interaction,
+		kind: ChartKind.LINE,
+		categoryCount: geometry.categories.length,
+		ariaLabel,
+		ariaDescription,
+		axes: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ChartValueAxis, {
+			ticks: valueTicks,
+			scale: geometry.valueScale,
+			plotWidth,
+			plotHeight,
+			marginLeft: dimensions.margin.left,
+			formatter: formatValue,
+			showGrid,
+			title: valueAxisTitle
+		}), /* @__PURE__ */ jsx(ChartCategoryAxis, {
+			labels: geometry.categories,
+			positions: categoryPositions,
+			step: geometry.step,
+			plotWidth,
+			plotHeight,
+			formatter: formatLabel,
+			mode: categoryLabelMode,
+			title: categoryAxisTitle
+		})] }),
+		noTooltip,
+		buildCategoryTooltip,
+		tooltipRenderer,
+		categoryTargets,
+		anchorHalfWidth: geometry.step / 2,
+		isEmpty,
+		isLoading,
+		contentWhenEmpty,
+		showLegend,
+		legendItems,
+		children: [
+			geometry.paths.map((linePath) => linePath.areaPath ? /* @__PURE__ */ jsx(ChartAreaPath, {
+				d: linePath.areaPath,
+				fill: linePath.color,
+				fillOpacity: LINE_AREA_OPACITY,
+				"data-state": interaction.getMarkState({ seriesKey: linePath.metric })
+			}, `${linePath.id}:area`) : null),
+			showCursor && activeColumn && /* @__PURE__ */ jsx(ChartCursorLine, {
+				x1: activeColumn.x,
+				x2: activeColumn.x,
+				y1: 0,
+				y2: plotHeight
+			}),
+			geometry.paths.map((linePath) => /* @__PURE__ */ jsx(ChartLinePath, {
+				d: linePath.path,
+				stroke: linePath.color,
+				strokeWidth: linePath.strokeWidth,
+				strokeDasharray: linePath.dashArray,
+				"data-state": interaction.getMarkState({ seriesKey: linePath.metric })
+			}, linePath.id)),
+			geometry.isolatedPoints.map((point) => /* @__PURE__ */ jsx(ChartPointCircle, {
+				cx: point.x,
+				cy: point.y,
+				r: LINE_POINT_RADIUS,
+				fill: point.color,
+				"data-state": interaction.getMarkState({ seriesKey: point.metric })
+			}, `${point.id}:isolated`)),
+			activeColumn?.points.map((point) => /* @__PURE__ */ jsx(ChartPointCircle, {
+				cx: point.x,
+				cy: point.y,
+				r: LINE_POINT_RADIUS,
+				fill: point.color,
+				"data-state": interaction.getMarkState({ seriesKey: point.metric })
+			}, point.id))
+		]
 	});
 };
 //#endregion
-export { LineChartMode, LineChart as default };
+export { LineChart as default };