@galaxy-io/dls 1.6.1 → 2.0.1

package/dist/charts/ChartTooltip.js

@@ -1,37 +1,82 @@
-import Text, { TextSize, TextVariant, TextWeight } from "../text/Text.js";
-import FlexItem from "../containers/FlexItem.js";
-import FlexWrapper, { FlexDirection } from "../containers/FlexWrapper.js";
-import Circle from "../shapes/Circle.js";
+import Text, { TextSize, TextVariant } from "../text/Text.js";
+import Flex, { AlignItems, FlexDirection } from "../layout/Flex.js";
+import "./constants.js";
+import Circle, { CircleSize } from "../shapes/Circle.js";
+import Square, { SquareSize } from "../shapes/Square.js";
+import { ChartLegendSwatch } from "./ChartLegend.js";
+import Grid, { GridAlignItems } from "../layout/Grid.js";
 import { useChartTooltipPosition } from "./useChartTooltipPosition.js";
-import { ChartTooltipGrid, ChartTooltipLabelCell, ChartTooltipPositioner, ChartTooltipValueCell } from "./ChartPrimitives.js";
+/* empty css                       */
+import { styled } from "@linaria/react";
 import { Fragment, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
 //#region src/charts/ChartTooltip.tsx
-var ChartTooltip = ({ model, containerWidth, containerHeight, anchorHalfWidth, placeAwayFromX, verticalAlign, renderer, maxItems }) => {
+/**
+* @internal The in-chart tooltip: an absolutely positioned box inside the plot box, anchored to a
+* geometric point that tracks the engaged category (not the `Tooltip` component, which anchors
+* to a trigger element; chartgroupprovider.md Decision 8). It stays mounted so it can fade out,
+* keeping its last content while it does. `aria-hidden`: keyboard moves are announced through the
+* frame's live region instead.
+*/
+/** The positioned box. Position arrives as `--gx-chart-tooltip-x` / `-y` (continuous values). */
+var Root = /*#__PURE__*/ styled("div")({
+	name: "Root",
+	class: "gx-ChartTooltip-rtysfji",
+	propsAsIs: false
+});
+/** Shown. Declared after `Root` so it wins. */
+var VISIBLE_STATE_CSS = "gx-ChartTooltip-VISIBLE_STATE_CSS-v1o4v2om";
+function Row({ row, swatch }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Flex, {
+		alignItems: AlignItems.CENTER,
+		gap: 8,
+		minWidth: 0,
+		children: [swatch === ChartLegendSwatch.SQUARE ? /* @__PURE__ */ jsx(Square, {
+			size: SquareSize.SMALL,
+			hex: row.color
+		}) : /* @__PURE__ */ jsx(Circle, {
+			size: CircleSize.SMALL,
+			hex: row.color
+		}), /* @__PURE__ */ jsx(Text, {
+			size: TextSize.BODY_SM,
+			variant: TextVariant.SECONDARY,
+			lineClamp: 1,
+			children: row.label
+		})]
+	}), /* @__PURE__ */ jsx(Text, {
+		size: TextSize.BODY_SM,
+		isTabular: true,
+		align: "right",
+		children: row.formattedValue
+	})] });
+}
+/** @internal The chart tooltip body and positioner. */
+function ChartTooltip({ model, containerWidth, containerHeight, anchorHalfWidth, placeAwayFromX, verticalAlign, renderTooltip, swatch = ChartLegendSwatch.CIRCLE }) {
 	const [retained, setRetained] = useState(model);
 	if (model !== null && model !== retained) setRetained(model);
+	const displayed = model ?? retained;
 	const { tooltipRef, x, y, isMeasured } = useChartTooltipPosition({
-		anchorX: model?.anchorX ?? retained?.anchorX ?? 0,
-		anchorY: model?.anchorY ?? retained?.anchorY ?? 0,
+		anchorX: displayed?.anchorX ?? 0,
+		anchorY: displayed?.anchorY ?? 0,
 		containerWidth,
 		containerHeight,
 		anchorHalfWidth,
 		placeAwayFromX,
 		verticalAlign
 	});
-	const displayed = model ?? retained;
 	const rows = displayed?.rows ?? [];
-	const cap = maxItems === void 0 ? rows.length : Math.max(1, maxItems);
-	const visibleRows = rows.slice(0, cap);
+	const visibleRows = rows.slice(0, 8);
 	const hiddenCount = rows.length - visibleRows.length;
-	return /* @__PURE__ */ jsx(ChartTooltipPositioner, {
+	return /* @__PURE__ */ jsx(Root, {
 		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, {
+		"aria-hidden": "true",
+		className: cx(model !== null && isMeasured && VISIBLE_STATE_CSS),
+		style: {
+			"--gx-chart-tooltip-x": `${x}px`,
+			"--gx-chart-tooltip-y": `${y}px`
+		},
+		children: displayed === null ? null : renderTooltip ? renderTooltip(displayed) : /* @__PURE__ */ jsxs(Flex, {
 			direction: FlexDirection.COLUMN,
 			gap: 8,
 			fillWidth: true,
@@ -39,37 +84,29 @@ var ChartTooltip = ({ model, containerWidth, containerHeight, anchorHalfWidth, p
 				/* @__PURE__ */ jsx(Text, {
 					size: TextSize.BODY_SM,
 					variant: TextVariant.SECONDARY,
-					isEllipsis: true,
+					lineClamp: 1,
 					children: displayed.label
 				}),
-				displayed.rows.length === 0 ? /* @__PURE__ */ jsx(Text, {
+				rows.length === 0 ? /* @__PURE__ */ jsx(Text, {
 					size: TextSize.BODY_SM,
-					variant: TextVariant.SECONDARY,
 					children: "No data"
-				}) : /* @__PURE__ */ jsx(ChartTooltipGrid, { children: visibleRows.map((row) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(ChartTooltipLabelCell, { 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(ChartTooltipValueCell, { children: /* @__PURE__ */ jsx(Text, {
-					size: TextSize.BODY_SM,
-					weight: TextWeight.MEDIUM,
-					align: "right",
-					children: row.formattedValue
-				}) })] }, row.key)) }),
+				}) : /* @__PURE__ */ jsx(Grid, {
+					columns: "minmax(0, 1fr) auto",
+					gap: [4, 16],
+					alignItems: GridAlignItems.CENTER,
+					children: visibleRows.map((row) => /* @__PURE__ */ jsx(Row, {
+						row,
+						swatch
+					}, row.key))
+				}),
 				hiddenCount > 0 && /* @__PURE__ */ jsx(Text, {
 					size: TextSize.BODY_SM,
-					variant: TextVariant.SECONDARY,
+					variant: TextVariant.TERTIARY,
 					children: `+${hiddenCount} more`
 				})
 			]
 		})
 	});
-};
+}
 //#endregion
-export { ChartTooltip as default };
+export { ChartTooltip };

package/dist/charts/Heatmap.d.ts

@@ -0,0 +1,35 @@
+import { type BaseChartProps, type ChartLabelFormatter, ChartPalette, type ChartValueDomain } from "./types.js";
+/** One cell of the grid. */
+export interface HeatmapCellDatum {
+    /** Column label; must match a column on the x-axis. */
+    column: string;
+    /** Row label; must match a row on the y-axis. */
+    row: string;
+    /** Value; `null` is an empty cell (no reading), which is not the same as 0. */
+    value: number | null;
+}
+/** Heatmap's own props; the shared chart props follow (`BaseChartProps`). */
+interface HeatmapOwnProps {
+    /** One entry per filled cell. A column × row pair with no entry, or `value: null`, is an empty cell. */
+    cells: HeatmapCellDatum[];
+    /** Column order, left to right (e.g. hours). Pass it when some columns have no cells. @default every cell's `column`, first-seen order */
+    columns?: string[];
+    /** Row order, top to bottom (e.g. weekdays). Pass it when some rows have no cells. @default every cell's `row`, first-seen order */
+    rows?: string[];
+    /**
+     * The hue whose ramp fills the cells. `PRIMARY`, `SECONDARY` and `TERTIARY` use the `indigo`, `sky` and `violet` ramps (no gray).
+     * @default ChartPalette.PURPLE
+     */
+    color?: ChartPalette;
+    /**
+     * Formats column and row labels on the axes and in the tooltip heading. Selection still matches raw labels.
+     * @default (label) => label
+     */
+    labelFormatter?: ChartLabelFormatter;
+    /** `min` / `max` of the color ramp (`tickCount` is ignored). Fix it to compare heatmaps. @default [smallest, largest] of the non-null values */
+    valueDomain?: Partial<ChartValueDomain>;
+}
+export type HeatmapProps = HeatmapOwnProps & BaseChartProps<string>;
+/** A grid of cells colored by value along one hue's token ramp. */
+declare const Heatmap: import("react").ForwardRefExoticComponent<HeatmapOwnProps & BaseChartProps<string> & import("react").RefAttributes<HTMLDivElement>>;
+export default Heatmap;

package/dist/charts/Heatmap.js

@@ -0,0 +1,307 @@
+import { Orientation } from "../theme/enums.js";
+import Text, { TextSize, TextVariant } from "../text/Text.js";
+import { t } from "../theme/tokens/t.js";
+import Flex, { AlignItems } from "../layout/Flex.js";
+import { ChartKind, ChartLegendPlacement, ChartMarkState, ChartPalette, ChartTargetShape } from "./types.js";
+import { CHART_MARK_STATE_TO_CSS_MAP, HEATMAP_CELL_CSS, HEATMAP_EMPTY_CELL_CSS } from "./ChartPrimitives.js";
+import { PLOT_INSET_BOTTOM, PLOT_INSET_RIGHT, PLOT_INSET_TOP } from "./constants.js";
+import { clamp } from "./chartScales.js";
+import { ChartCategoryAxis } from "./ChartAxis.js";
+import Square, { SquareSize, SquareVariant } from "../shapes/Square.js";
+import { ChartLegendSwatch } from "./ChartLegend.js";
+import { ChartFrame } from "./ChartFrame.js";
+import { formatChartValue } from "./chartFormat.js";
+import { useChartDimensions } from "./useChartDimensions.js";
+import { useChartFormatters } from "./useChartFormatters.js";
+import { useChartInteraction } from "./useChartInteraction.js";
+import { HEATMAP_CELL_RADIUS, HEATMAP_STEP_TO_TOKEN_MAP, buildHeatmapGeometry, estimateRowLabelInset, getHeatmapDomain, getHeatmapLabels } from "./heatmapGeometry.js";
+/* empty css                  */
+import { styled } from "@linaria/react";
+import { forwardRef, useCallback, useMemo, useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
+//#region src/charts/Heatmap.tsx
+/**
+* Heatmap shows a value for every pair of two categories (hour × weekday, endpoint × region) as a
+* grid of cells whose fill gets stronger as the value grows. The fill is one hue's token ramp in
+* five steps (`color`, a `ChartPalette` slot), so it follows the theme; a
+* missing value is an empty, outlined cell. Hover and arrow keys move cell by cell (Up / Down by
+* row); the tooltip names the column, the row and the value; a click or Enter reports the cell. A
+* step legend shows the low and high ends. It does not join `ChartGroupProvider` sync.
+*
+* The chart fills its parent; with no definite parent height it takes an aspect ratio of columns
+* to rows (clamped 1–4), so cells stay near-square. Needs the optional peers `d3-scale` and
+* `d3-shape`.
+*/
+var DEFAULT_PLACEHOLDER = "No data available";
+/** The step legend: aligned with the plot's left edge (a continuous inset). */
+var LegendRoot = /*#__PURE__*/ styled("div")({
+	name: "LegendRoot",
+	class: "gx-Heatmap-LegendRoot-lii3tjm",
+	propsAsIs: false
+});
+/** A ramp swatch: a `Square INHERIT` that fills with this wrapper's `color`. */
+var RampSwatch = /*#__PURE__*/ styled("span")({
+	name: "RampSwatch",
+	class: "gx-Heatmap-RampSwatch-r12vxnd7",
+	propsAsIs: false
+});
+/** The "No data" swatch: an outlined square the size of `SquareSize.SMALL`. */
+var EmptySwatch = /*#__PURE__*/ styled("span")({
+	name: "EmptySwatch",
+	class: "gx-Heatmap-EmptySwatch-echoni0",
+	propsAsIs: false
+});
+function HeatmapLegend({ ramp, min, max, hasEmpty, inset }) {
+	return /* @__PURE__ */ jsx(LegendRoot, {
+		style: { "--gx-heatmap-legend-inset": `${inset}px` },
+		children: /* @__PURE__ */ jsxs(Flex, {
+			alignItems: AlignItems.CENTER,
+			gap: 8,
+			children: [
+				/* @__PURE__ */ jsx(Text, {
+					size: TextSize.CAPTION,
+					variant: TextVariant.TERTIARY,
+					isTabular: true,
+					children: min
+				}),
+				ramp.map((token) => /* @__PURE__ */ jsx(RampSwatch, {
+					style: { "--gx-chart-mark-color": token },
+					children: /* @__PURE__ */ jsx(Square, {
+						size: SquareSize.SMALL,
+						variant: SquareVariant.INHERIT
+					})
+				}, token)),
+				/* @__PURE__ */ jsx(Text, {
+					size: TextSize.CAPTION,
+					variant: TextVariant.TERTIARY,
+					isTabular: true,
+					children: max
+				}),
+				hasEmpty && /* @__PURE__ */ jsxs(Flex, {
+					alignItems: AlignItems.CENTER,
+					gap: 8,
+					padding: [
+						0,
+						0,
+						0,
+						8
+					],
+					children: [/* @__PURE__ */ jsx(EmptySwatch, {}), /* @__PURE__ */ jsx(Text, {
+						size: TextSize.CAPTION,
+						variant: TextVariant.TERTIARY,
+						children: "No data"
+					})]
+				})
+			]
+		})
+	});
+}
+/** A grid of cells colored by value along one hue's token ramp. */
+var Heatmap = forwardRef(function Heatmap(props, ref) {
+	const { cells, columns: explicitColumns, rows: explicitRows, color = ChartPalette.PURPLE, labelFormatter, valueDomain, valueFormatter, hasLegend = true, hasTooltip = true, renderTooltip, isLoading = false, placeholder = DEFAULT_PLACEHOLDER, onSelect, selection, isFilterable = false, defaultSelection, onSelectionChange, ariaLabel, id, className, style, ...rest } = props;
+	const plotRef = useRef(null);
+	const { formatValue, formatLabel } = useChartFormatters(valueFormatter, labelFormatter);
+	const { columns, rows } = useMemo(() => getHeatmapLabels(cells, explicitColumns, explicitRows), [
+		cells,
+		explicitColumns,
+		explicitRows
+	]);
+	const domainMin = valueDomain?.min;
+	const domainMax = valueDomain?.max;
+	const domain = useMemo(() => getHeatmapDomain(cells, {
+		min: domainMin,
+		max: domainMax
+	}), [
+		cells,
+		domainMin,
+		domainMax
+	]);
+	const ramp = HEATMAP_STEP_TO_TOKEN_MAP[color];
+	const formattedRows = useMemo(() => rows.map(formatLabel), [rows, formatLabel]);
+	const insetLeft = useMemo(() => estimateRowLabelInset(formattedRows), [formattedRows]);
+	const dimensions = useChartDimensions(plotRef, useMemo(() => ({
+		top: PLOT_INSET_TOP,
+		right: PLOT_INSET_RIGHT,
+		bottom: PLOT_INSET_BOTTOM,
+		left: insetLeft
+	}), [insetLeft]));
+	const { plotWidth, plotHeight } = dimensions;
+	const geometry = useMemo(() => buildHeatmapGeometry({
+		cells,
+		columns,
+		rows,
+		domain,
+		plotWidth,
+		plotHeight
+	}), [
+		cells,
+		columns,
+		rows,
+		domain,
+		plotWidth,
+		plotHeight
+	]);
+	const isEmpty = columns.length === 0 || rows.length === 0;
+	const cellCount = columns.length * rows.length;
+	const cellColumnKeys = useMemo(() => rows.flatMap(() => columns), [rows, columns]);
+	const grid = useMemo(() => ({ columns: Math.max(1, columns.length) }), [columns.length]);
+	const interaction = useChartInteraction({
+		categoryCount: cellCount,
+		categoryKeys: cellColumnKeys,
+		enableGroupSync: false,
+		selection,
+		isFilterable,
+		defaultSelection,
+		onSelectionChange,
+		categoryMuteState: ChartMarkState.ACTIVE,
+		isDisabled: !(hasTooltip || onSelect || isFilterable) || isLoading || isEmpty,
+		isLoading,
+		grid
+	});
+	const stepColor = useCallback((cell) => cell.step === null ? t.color.border.primary : ramp[cell.step] ?? "", [ramp]);
+	const buildCategoryTooltip = useCallback((index) => {
+		const cell = geometry.cells[index];
+		if (!cell) return null;
+		return {
+			label: `${formatLabel(cell.column)} · ${formatLabel(cell.row)}`,
+			rows: [{
+				key: cell.id,
+				label: "Value",
+				value: cell.value,
+				formattedValue: formatChartValue(cell.value, formatValue),
+				color: stepColor(cell)
+			}],
+			anchorX: cell.x + cell.width / 2,
+			anchorY: cell.y
+		};
+	}, [
+		geometry.cells,
+		formatLabel,
+		formatValue,
+		stepColor
+	]);
+	const describeCategory = useCallback((index) => {
+		const cell = geometry.cells[index];
+		if (!cell) return "";
+		const value = cell.value === null ? "no data" : formatValue(cell.value);
+		return `${formatLabel(cell.column)}, ${formatLabel(cell.row)}: ${value}.`;
+	}, [
+		geometry.cells,
+		formatLabel,
+		formatValue
+	]);
+	const categoryTargets = useMemo(() => geometry.cells.map((cell) => {
+		const x0 = Math.max(0, cell.x - geometry.gapX / 2);
+		const y0 = Math.max(0, cell.y - geometry.gapY / 2);
+		const x1 = Math.min(plotWidth, cell.x + cell.width + geometry.gapX / 2);
+		const y1 = Math.min(plotHeight, cell.y + cell.height + geometry.gapY / 2);
+		return {
+			key: cell.id,
+			shape: ChartTargetShape.RECT,
+			x: x0,
+			y: y0,
+			width: x1 - x0,
+			height: y1 - y0
+		};
+	}), [
+		geometry,
+		plotWidth,
+		plotHeight
+	]);
+	const { toggleSelection } = interaction;
+	const handleSelect = useCallback((index, isAdditive = false) => {
+		const cell = geometry.cells[index];
+		if (!cell) return;
+		onSelect?.({
+			categoryIndex: cell.columnIndex,
+			categoryKey: cell.column,
+			seriesKey: cell.row,
+			...cell.value !== null && { value: cell.value }
+		});
+		toggleSelection({
+			categoryKey: cell.column,
+			seriesKey: cell.row
+		}, isAdditive);
+	}, [
+		geometry.cells,
+		onSelect,
+		toggleSelection
+	]);
+	const passedAriaLabel = typeof rest["aria-label"] === "string" ? rest["aria-label"] : void 0;
+	const resolvedAriaLabel = ariaLabel ?? passedAriaLabel ?? `Heatmap, ${columns.length} columns by ${rows.length} rows`;
+	const aspectRatio = clamp(columns.length / Math.max(1, rows.length), 1, 4);
+	return /* @__PURE__ */ jsx(ChartFrame, {
+		rootRef: ref,
+		plotRef,
+		id,
+		className,
+		style,
+		rest,
+		dimensions,
+		interaction,
+		kind: ChartKind.HEATMAP,
+		categoryCount: cellCount,
+		ariaLabel: resolvedAriaLabel,
+		aspectRatio,
+		axes: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ChartCategoryAxis, {
+			labels: columns,
+			positions: geometry.columnPositions,
+			step: geometry.columnStep,
+			plotWidth,
+			plotHeight,
+			orientation: Orientation.HORIZONTAL,
+			insetLeft,
+			formatter: formatLabel
+		}), /* @__PURE__ */ jsx(ChartCategoryAxis, {
+			labels: rows,
+			positions: geometry.rowPositions,
+			step: geometry.rowStep,
+			plotWidth,
+			plotHeight,
+			orientation: Orientation.VERTICAL,
+			insetLeft,
+			formatter: formatLabel
+		})] }),
+		describeCategory,
+		hasTooltip,
+		buildCategoryTooltip,
+		renderTooltip,
+		categoryTargets,
+		onCategorySelect: onSelect || isFilterable ? handleSelect : void 0,
+		anchorHalfWidth: (geometry.cells[0]?.width ?? 0) / 2,
+		isEmpty,
+		isLoading,
+		placeholder,
+		hasLegend,
+		legendItems: [],
+		legendPlacement: ChartLegendPlacement.BOTTOM,
+		legendSwatch: ChartLegendSwatch.SQUARE,
+		legend: isEmpty ? null : /* @__PURE__ */ jsx(HeatmapLegend, {
+			ramp,
+			min: formatValue(domain[0]),
+			max: formatValue(domain[1]),
+			hasEmpty: geometry.hasEmptyCells,
+			inset: insetLeft
+		}),
+		children: geometry.cells.map((cell, index) => {
+			let state = interaction.getMarkState({
+				categoryIndex: index,
+				seriesKey: cell.row
+			});
+			if (state === ChartMarkState.MUTED && !isLoading) state = ChartMarkState.DIMMED;
+			return /* @__PURE__ */ jsx("rect", {
+				x: cell.x,
+				y: cell.y,
+				width: cell.width,
+				height: cell.height,
+				rx: HEATMAP_CELL_RADIUS,
+				className: cx(cell.step === null ? HEATMAP_EMPTY_CELL_CSS : HEATMAP_CELL_CSS, interaction.activeIndex === index && "gx-ChartPrimitives-HEATMAP_ACTIVE_CELL_CSS-h17guewt", CHART_MARK_STATE_TO_CSS_MAP[state]),
+				style: cell.step === null ? void 0 : { "--gx-chart-mark-color": stepColor(cell) }
+			}, cell.id);
+		})
+	});
+});
+Heatmap.displayName = "Heatmap";
+//#endregion
+export { Heatmap as default };

package/dist/charts/LineChart.d.ts

@@ -1,57 +1,64 @@
-import { LineChartCurve } from "./types";
-import type { BaseCartesianChartProps, ChartSelectionEvent, ChartSelectionInput, ChartSeriesStyles, ChartSize, LineChartLineDatum } from "./types";
-export type LineChartProps<TMetric extends string> = BaseCartesianChartProps & ChartSize & {
+import { type ReactElement, type RefAttributes } from "react";
+import { type BaseCartesianChartProps, ChartCurve, ChartKind, type ChartSeriesStyles } from "./types.js";
+/** One reading on a line. */
+export interface LineChartPointDatum {
+    /** Category this point sits on; must match a category on the axis. */
+    x: string;
+    /** Value; `null` breaks the line (a missing reading is not zero). */
+    y: number | null;
+}
+/** One line. Its label and color come from the chart's `series` record, keyed by `metric`. */
+export interface LineChartLineDatum<TMetric extends string> {
+    /** Which metric this line draws; a key of `series`. */
+    metric: TMetric;
+    /** Points in category order. Sparse is fine: a missing category is a gap. */
+    points: LineChartPointDatum[];
     /**
-     * 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.
+     * Draw the line dashed (4px dash, 4px gap): a forecast, a target, a previous period.
+     * @default false
      */
+    isDashed?: boolean;
+}
+/** LineChart's own props; the shared chart props follow (`BaseCartesianChartProps`). */
+interface LineChartOwnProps<TMetric extends string> {
+    /** Label and color for every metric, keyed by metric. `TMetric` is inferred from these keys only, so a misspelt metric in `lines` is a type error. */
     series: ChartSeriesStyles<TMetric>;
-    /** One entry per line. Lines may be sparse. */
+    /** One entry per line. Lines may be sparse; a missing category or a `null` reading is a gap. */
     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.
-     */
+    /** Category order along the x-axis. Pass it whenever lines are sparse. @default the union of every line's `x`, first-seen order */
     categories?: string[];
-    /** @default LineChartCurve.SMOOTH */
-    curve?: LineChartCurve;
-    /** Default stroke width in px, overridable per line. */
-    strokeWidth?: number;
-    /** Draw a vertical rule at the active category. @default true */
-    showCursor?: boolean;
-    /**
-     * Fires when a category is clicked. Supplying it is what makes the plot
-     * clickable.
-     *
-     * Always the category, never a single line: hit testing is per column here,
-     * and a line has no segment to land on — the reading at a category belongs
-     * to every line at once, which is exactly what the tooltip reports. Use
-     * `seriesKey` in {@link selection} to narrow to one line.
-     */
-    onSelect?: (event: ChartSelectionEvent<NoInfer<TMetric>>) => void;
     /**
-     * Which marks read as selected. Matching lines hold full strength, the rest
-     * recede, and each selected category keeps a persistent cursor with its
-     * dots — the hover rule one step firmer, held rather than previewed.
-     *
-     * Presentational and never written by the chart: the state belongs to
-     * whatever the selection is filtering, so the two cannot drift apart.
+     * How segments between points are drawn.
+     * @default ChartCurve.SMOOTH
      */
-    selection?: ChartSelectionInput<NoInfer<TMetric>>;
-};
+    curve?: ChartCurve;
+}
+export type LineChartProps<TMetric extends string> = LineChartOwnProps<TMetric> & BaseCartesianChartProps<NoInfer<TMetric>>;
+/** @internal How `LineChartRoot` fills under its lines. */
+export declare enum LineChartFill {
+    /** Lines only (LineChart). */
+    NONE = "NONE",
+    /** A translucent area to the baseline (AreaChart). */
+    AREA = "AREA"
+}
+/** @internal `LineChartRoot`'s extra props: the engine modes AreaChart sets. */
+export interface LineChartRootProps<TMetric extends string> extends LineChartOwnProps<TMetric> {
+    /** Fill mode. */
+    fill: LineChartFill;
+    /** Stack the series in array order (AreaChart): top edges are running totals. */
+    isStacked: boolean;
+    /** Which chart (default name and legend swatch). */
+    kind: ChartKind;
+}
+/** @internal The generic signature of `LineChartRoot` (docgen reads an arrow function). */
+declare const LINE_CHART_ROOT_SIGNATURE: <TMetric extends string>(_props: LineChartRootProps<TMetric> & BaseCartesianChartProps<NoInfer<TMetric>> & RefAttributes<HTMLDivElement>) => ReactElement | null;
+/** @internal Shared by LineChart and AreaChart; apps use those. */
+export declare const LineChartRoot: typeof LINE_CHART_ROOT_SIGNATURE;
 /**
- * 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.
+ * The public, generic call signature (`TMetric` inferred from `series`). Never called: it only
+ * types the default export. An arrow function so react-docgen-typescript reads the props.
  */
-declare const LineChart: <TMetric extends string>({ series, lines, categories, width, height, fillWidth, fillHeight, aspectRatio, margin, curve, strokeWidth, showCursor, onSelect, selection, valueUnit, valueFormatter, labelFormatter, valueDomain, categoryLabelMode, categoryAxisTitle, valueAxisTitle, showGrid, showLegend, legendMaxItems, noTooltip, tooltipRenderer, tooltipMaxItems, isLoading, contentWhenEmpty, ariaLabel, ariaDescription, }: LineChartProps<TMetric>) => import("react").JSX.Element;
+declare const LINE_CHART_SIGNATURE: <TMetric extends string>(_props: LineChartProps<TMetric> & RefAttributes<HTMLDivElement>) => ReactElement | null;
+/** Lines over a categorical x-axis. */
+declare const LineChart: typeof LINE_CHART_SIGNATURE;
 export default LineChart;