@galaxy-io/dls 1.2.6 → 1.3.0

package/dist/charts/ChartAxis.js

@@ -1,18 +1,49 @@
 import Text, { TextSize, TextVariant } from "../text/Text.js";
 import FlexWrapper, { AlignItems, JustifyContent } from "../containers/FlexWrapper.js";
+import { ChartCategoryLabelMode } from "./types.js";
 import "./constants.js";
-import { defaultLabelFormatter, defaultValueFormatter } from "./utils.js";
+import { getCategoryLabelStride } from "./chartScales.js";
+import { ChartAxisLabelBox, ChartGridLine } from "./ChartPrimitives.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/charts/ChartAxis.tsx
-var XAxis = ({ scale, transform, formatter = defaultLabelFormatter }) => {
-	return /* @__PURE__ */ jsx("g", {
-		transform,
-		children: scale.domain().map((label) => {
-			return /* @__PURE__ */ jsx("foreignObject", {
-				x: (scale(label) ?? 0) + scale.bandwidth() / 2 - scale.bandwidth() / 2,
-				y: 8,
-				width: scale.bandwidth(),
-				height: 24,
+var ChartValueAxis = ({ ticks, scale, plotWidth, plotHeight, marginLeft, formatter, showGrid = true, title }) => {
+	const titleBand = title ? 26 : 0;
+	const labelWidth = Math.max(0, marginLeft - titleBand - 12);
+	return /* @__PURE__ */ jsxs("g", {
+		"aria-hidden": true,
+		children: [ticks.map((tick) => /* @__PURE__ */ jsxs("g", {
+			transform: `translate(0, ${scale(tick)})`,
+			children: [showGrid && /* @__PURE__ */ jsx(ChartGridLine, {
+				x1: -12,
+				x2: plotWidth + 12,
+				y1: 0,
+				y2: 0
+			}), labelWidth > 0 && /* @__PURE__ */ jsx(ChartAxisLabelBox, {
+				x: -marginLeft + titleBand,
+				y: -20 / 2,
+				width: labelWidth,
+				height: 20,
+				children: /* @__PURE__ */ jsx(FlexWrapper, {
+					justifyContent: JustifyContent.END,
+					alignItems: AlignItems.CENTER,
+					fillWidth: true,
+					fillHeight: true,
+					children: /* @__PURE__ */ jsx(Text, {
+						size: TextSize.CAPTION,
+						variant: TextVariant.TERTIARY,
+						align: "right",
+						isEllipsis: true,
+						children: formatter(tick)
+					})
+				})
+			})]
+		}, tick)), title && /* @__PURE__ */ jsx("g", {
+			transform: `translate(${-marginLeft + 18 / 2}, ${plotHeight / 2}) rotate(-90)`,
+			children: /* @__PURE__ */ jsx(ChartAxisLabelBox, {
+				x: -plotHeight / 2,
+				y: -18 / 2,
+				width: plotHeight,
+				height: 18,
 				children: /* @__PURE__ */ jsx(FlexWrapper, {
 					justifyContent: JustifyContent.CENTER,
 					alignItems: AlignItems.CENTER,
@@ -22,22 +53,28 @@ var XAxis = ({ scale, transform, formatter = defaultLabelFormatter }) => {
 						size: TextSize.CAPTION,
 						variant: TextVariant.TERTIARY,
 						align: "center",
-						children: formatter(label)
+						isEllipsis: true,
+						children: title
 					})
 				})
-			}, label);
-		})
+			})
+		})]
 	});
 };
-var XAxisPoint = ({ scale, transform, formatter = defaultLabelFormatter }) => {
-	const step = scale.step();
-	return /* @__PURE__ */ jsx("g", {
-		transform,
-		children: scale.domain().map((label) => {
-			return /* @__PURE__ */ jsx("foreignObject", {
-				x: (scale(label) ?? 0) - step / 2,
+var ChartCategoryAxis = ({ labels, positions, step, plotWidth, plotHeight, formatter, mode = ChartCategoryLabelMode.AUTO, title }) => {
+	const formatted = labels.map(formatter);
+	const stride = mode === ChartCategoryLabelMode.AUTO ? getCategoryLabelStride(formatted, step) : 1;
+	const labelWidth = step * stride;
+	const labelInset = (labelWidth - step) / 2;
+	return /* @__PURE__ */ jsxs("g", {
+		transform: `translate(0, ${plotHeight})`,
+		"aria-hidden": true,
+		children: [formatted.map((label, index) => {
+			if (index % stride !== 0) return null;
+			return /* @__PURE__ */ jsx(ChartAxisLabelBox, {
+				x: positions[index] - labelInset,
 				y: 8,
-				width: step,
+				width: labelWidth,
 				height: 24,
 				children: /* @__PURE__ */ jsx(FlexWrapper, {
 					justifyContent: JustifyContent.CENTER,
@@ -48,47 +85,31 @@ var XAxisPoint = ({ scale, transform, formatter = defaultLabelFormatter }) => {
 						size: TextSize.CAPTION,
 						variant: TextVariant.TERTIARY,
 						align: "center",
-						children: formatter(label)
+						isEllipsis: mode !== ChartCategoryLabelMode.ALL,
+						children: label
 					})
 				})
-			}, label);
-		})
-	});
-};
-var YAxis = ({ scale, transform, plotWidth, tickCount = 5, formatter = defaultValueFormatter, showGrid = true, theme }) => {
-	return /* @__PURE__ */ jsx("g", {
-		transform,
-		children: scale.ticks(tickCount).map((tick) => {
-			return /* @__PURE__ */ jsxs("g", {
-				transform: `translate(0, ${scale(tick)})`,
-				children: [/* @__PURE__ */ jsx("foreignObject", {
-					x: -48,
-					y: -10,
-					width: 36,
-					height: 20,
-					children: /* @__PURE__ */ jsx(FlexWrapper, {
-						justifyContent: JustifyContent.END,
-						alignItems: AlignItems.CENTER,
-						fillWidth: true,
-						fillHeight: true,
-						children: /* @__PURE__ */ jsx(Text, {
-							size: TextSize.CAPTION,
-							variant: TextVariant.TERTIARY,
-							children: formatter(tick)
-						})
-					})
-				}), showGrid && /* @__PURE__ */ jsx("line", {
-					x1: 0,
-					x2: plotWidth,
-					y1: 0,
-					y2: 0,
-					stroke: theme.color.border.primary,
-					strokeOpacity: .5,
-					strokeDasharray: "2,2"
-				})]
-			}, tick);
-		})
+			}, `${index}:${label}`);
+		}), title && /* @__PURE__ */ jsx(ChartAxisLabelBox, {
+			x: 0,
+			y: 32,
+			width: plotWidth,
+			height: 18,
+			children: /* @__PURE__ */ jsx(FlexWrapper, {
+				justifyContent: JustifyContent.CENTER,
+				alignItems: AlignItems.CENTER,
+				fillWidth: true,
+				fillHeight: true,
+				children: /* @__PURE__ */ jsx(Text, {
+					size: TextSize.CAPTION,
+					variant: TextVariant.TERTIARY,
+					align: "center",
+					isEllipsis: true,
+					children: title
+				})
+			})
+		})]
 	});
 };
 //#endregion
-export { XAxis, XAxisPoint, YAxis };
+export { ChartCategoryAxis, ChartValueAxis };

package/dist/charts/ChartEmptyState.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from "react";
+interface ChartEmptyStateProps {
+    /** Caller-supplied content. Falls back to a centred "No data". */
+    content?: ReactNode;
+}
+/**
+ * Overlay shown when a chart has nothing to plot.
+ *
+ * Rendered over the reserved plot box rather than in place of it, so the axes
+ * stay at full size and the chart does not resize when data arrives.
+ *
+ * What counts as empty is each chart's own call and deliberately inconsistent:
+ * a bar chart of all zeros is a flat chart with real data, while a pie of all
+ * zeros has no whole to apportion.
+ */
+declare const ChartEmptyState: ({ content }: ChartEmptyStateProps) => import("react").JSX.Element;
+export default ChartEmptyState;

package/dist/charts/ChartEmptyState.js

@@ -0,0 +1,29 @@
+import Text, { TextSize, TextVariant } from "../text/Text.js";
+import FlexWrapper, { AlignItems, JustifyContent } from "../containers/FlexWrapper.js";
+import { ChartEmptyOverlay } from "./ChartPrimitives.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/charts/ChartEmptyState.tsx
+/**
+* Overlay shown when a chart has nothing to plot.
+*
+* Rendered over the reserved plot box rather than in place of it, so the axes
+* stay at full size and the chart does not resize when data arrives.
+*
+* What counts as empty is each chart's own call and deliberately inconsistent:
+* a bar chart of all zeros is a flat chart with real data, while a pie of all
+* zeros has no whole to apportion.
+*/
+var ChartEmptyState = ({ content }) => /* @__PURE__ */ jsx(ChartEmptyOverlay, {
+	role: "status",
+	children: content ?? /* @__PURE__ */ jsx(FlexWrapper, {
+		justifyContent: JustifyContent.CENTER,
+		alignItems: AlignItems.CENTER,
+		children: /* @__PURE__ */ jsx(Text, {
+			size: TextSize.CAPTION,
+			variant: TextVariant.TERTIARY,
+			children: "No data"
+		})
+	})
+});
+//#endregion
+export { ChartEmptyState as default };

package/dist/charts/ChartFrame.d.ts

@@ -0,0 +1,82 @@
+import type { ReactNode } from "react";
+import type { ChartLegendItem, ChartPlotTooltipModel, ChartTooltipRenderer } from "./types";
+import type { ChartDimensions } from "./useChartDimensions";
+import type { ChartInteraction } from "./useChartInteraction";
+import type { ChartTooltipVerticalAlign } from "./useChartTooltipPosition";
+/**
+ * The shell every chart renders into: measured root, reserved plot box, SVG and
+ * its margin translate, the interactive plot group, the backdrop, the tooltip,
+ * the empty state and the legend.
+ *
+ * **The frame owns the plot translate.** Marks are drawn inside a
+ * `translate(margin.left, margin.top)` group, and every coordinate handed to
+ * this component — including the tooltip anchor and `placeAwayFromX` — is in
+ * that same plot space. Charts never add the margin themselves; three
+ * hand-written copies of `+ margin.left` is precisely what drifts silently.
+ *
+ * Knows nothing about scales, marks or geometry — all of that arrives through
+ * `axes` and `children`.
+ *
+ * @internal Published as a subpath only because this package has no barrel
+ * files, not because charts are meant to be composed out of it.
+ */
+export interface ChartFrameProps {
+    /**
+     * The element `useChartDimensions` measures — the *plot box*, not the root.
+     *
+     * Measuring the plot box is what keeps `fillHeight` honest: the legend is a
+     * sibling in the root's flex column, so the box's height is already the space
+     * left over for the plot and no one has to subtract a wrapped legend. Width is
+     * unaffected, the box being `width: 100%` of the root either way.
+     *
+     * Created by the chart, not here: the chart needs the resulting dimensions
+     * during its own render — to size the geometry and to feed
+     * `useChartInteraction` — so the ref has to exist before this component does.
+     * A named prop rather than `ref` because ref-as-a-prop needs React 19 and this
+     * package still supports 18.
+     */
+    containerRef: React.RefObject<HTMLDivElement>;
+    dimensions: ChartDimensions;
+    fillWidth?: boolean;
+    fillHeight?: boolean;
+    interaction: ChartInteraction;
+    /** Already resolved — pass `ariaLabel ?? <chart-specific default>`. */
+    ariaLabel: string;
+    /** Long description, associated with the SVG via `aria-describedby`. */
+    ariaDescription?: string;
+    /**
+     * Axes, drawn inside the plot translate group *before* {@link children}, so
+     * grid lines paint under the marks. Radial charts pass nothing.
+     */
+    axes?: ReactNode;
+    /**
+     * Marks, drawn inside the plot group above the backdrop.
+     *
+     * Rendered only once measured, so no caller writes that guard. Note it is
+     * still *evaluated* on the unmeasured pass — as is the geometry it maps over,
+     * which each chart's `useMemo` already runs at a 0×0 plot. Geometry builders
+     * must stay total at zero; they already are.
+     */
+    children?: ReactNode;
+    /** HTML painted over the plot and under the tooltip — the donut centre. */
+    plotOverlay?: ReactNode;
+    noTooltip?: boolean;
+    /** Anchor in plot coordinates; the frame applies the margin translate. */
+    tooltipModel: ChartPlotTooltipModel | null;
+    tooltipRenderer?: ChartTooltipRenderer;
+    /** Half a category's width, so the tooltip sits beside the marks. */
+    anchorHalfWidth?: number;
+    /** Radial charts pass their centre, in plot coordinates. */
+    placeAwayFromX?: number;
+    verticalAlign?: ChartTooltipVerticalAlign;
+    /** Each chart defines "empty" for itself; the frame only renders the result. */
+    isEmpty: boolean;
+    isLoading?: boolean;
+    contentWhenEmpty?: ReactNode;
+    showLegend?: boolean;
+    legendItems: ChartLegendItem[];
+    /** Defaults to the left margin, aligning the legend with the plot, not the gutter. */
+    legendInset?: number;
+}
+declare const ChartFrame: ({ containerRef, dimensions, fillWidth, fillHeight, interaction, ariaLabel, ariaDescription, axes, children, plotOverlay, noTooltip, tooltipModel, tooltipRenderer, anchorHalfWidth, placeAwayFromX, verticalAlign, isEmpty, isLoading, contentWhenEmpty, showLegend, legendItems, legendInset, }: ChartFrameProps) => import("react").JSX.Element;
+export default ChartFrame;

package/dist/charts/ChartFrame.js

@@ -0,0 +1,86 @@
+import { ChartBackdrop, ChartPlotBox, ChartPlotGroup, ChartRoot, ChartSvg } from "./ChartPrimitives.js";
+import ChartEmptyState from "./ChartEmptyState.js";
+import ChartLegend from "./ChartLegend.js";
+import ChartHoverTooltip from "./ChartTooltip.js";
+import { useId, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/charts/ChartFrame.tsx
+var ChartFrame = ({ containerRef, dimensions, fillWidth, fillHeight, interaction, ariaLabel, ariaDescription, axes, children, plotOverlay, noTooltip = false, tooltipModel, tooltipRenderer, anchorHalfWidth, placeAwayFromX, verticalAlign, isEmpty, isLoading = false, contentWhenEmpty, showLegend = false, legendItems, legendInset }) => {
+	const { width, height, plotWidth, plotHeight, margin, isMeasured, reservedHeight, reservedAspectRatio } = dimensions;
+	const generatedId = useId();
+	const descriptionId = ariaDescription ? `${generatedId}-desc` : void 0;
+	/**
+	* Plot space → container space, applied once, here.
+	*
+	* Memoized for correctness, not arithmetic cost. `ChartTooltip` retains the
+	* last model by *identity* so it can keep its content while fading out, and
+	* adjusts that state during render when the identity changes. A fresh object
+	* on every parent render would therefore trigger an extra render pass on
+	* every render — including every pointer move — without ever looping or
+	* visibly breaking.
+	*/
+	const positionedTooltip = useMemo(() => tooltipModel === null ? null : {
+		...tooltipModel,
+		anchorX: tooltipModel.anchorX + margin.left,
+		anchorY: tooltipModel.anchorY + margin.top
+	}, [
+		tooltipModel,
+		margin.left,
+		margin.top
+	]);
+	return /* @__PURE__ */ jsxs(ChartRoot, {
+		$fillWidth: fillWidth,
+		$fillHeight: fillHeight,
+		children: [/* @__PURE__ */ jsxs(ChartPlotBox, {
+			ref: containerRef,
+			$reservedHeight: reservedHeight,
+			$reservedAspectRatio: reservedAspectRatio,
+			$fillHeight: fillHeight,
+			children: [
+				isMeasured && /* @__PURE__ */ jsxs(ChartSvg, {
+					width,
+					height,
+					role: "img",
+					"aria-label": ariaLabel,
+					"aria-describedby": descriptionId,
+					children: [ariaDescription && /* @__PURE__ */ jsx("desc", {
+						id: descriptionId,
+						children: ariaDescription
+					}), /* @__PURE__ */ jsxs("g", {
+						transform: `translate(${margin.left}, ${margin.top})`,
+						children: [axes, /* @__PURE__ */ jsxs(ChartPlotGroup, {
+							"data-active": interaction.isEngaged ? "true" : "false",
+							children: [/* @__PURE__ */ jsx(ChartBackdrop, {
+								width: plotWidth,
+								height: plotHeight,
+								"data-interactive": interaction.pinnedIndex !== null ? "true" : "false",
+								onClick: interaction.onBackdropClick
+							}), children]
+						})]
+					})]
+				}),
+				isMeasured && plotOverlay,
+				isMeasured && !noTooltip && /* @__PURE__ */ jsx(ChartHoverTooltip, {
+					model: positionedTooltip,
+					containerWidth: width,
+					containerHeight: height,
+					anchorHalfWidth,
+					placeAwayFromX: placeAwayFromX === void 0 ? void 0 : placeAwayFromX + margin.left,
+					verticalAlign,
+					renderer: tooltipRenderer
+				}),
+				isMeasured && isEmpty && !isLoading && /* @__PURE__ */ jsx(ChartEmptyState, { content: contentWhenEmpty })
+			]
+		}), showLegend && /* @__PURE__ */ jsx(ChartLegend, {
+			items: legendItems,
+			inset: legendInset ?? margin.left,
+			hoveredKey: interaction.hoveredSeriesKey,
+			pinnedKey: interaction.pinnedSeriesKey,
+			onItemEnter: interaction.onSeriesEnter,
+			onItemLeave: interaction.onSeriesLeave,
+			onItemClick: interaction.onSeriesClick
+		})]
+	});
+};
+//#endregion
+export { ChartFrame as default };

package/dist/charts/ChartLegend.d.ts

@@ -1,7 +1,30 @@
-import type { ChartSeriesConfig } from "./types";
+import type { ChartLegendItem } from "./types";
 interface ChartLegendProps {
-    series: ChartSeriesConfig[];
-    palette: string[];
+    items: ChartLegendItem[];
+    /** Left padding aligning the legend with the plot, not the axis gutter. */
+    inset: number;
+    /** Series key currently hovered anywhere in the chart. */
+    hoveredKey?: string | null;
+    /** Series key currently pinned. Drives `aria-pressed`. */
+    pinnedKey?: string | null;
+    /**
+     * Supplying these makes the legend interactive. Omit them and it renders as
+     * inert text, with no button semantics for a screen reader to announce.
+     */
+    onItemEnter?: (key: string) => void;
+    onItemLeave?: () => void;
+    onItemClick?: (key: string) => void;
 }
-declare const ChartLegend: ({ series, palette }: ChartLegendProps) => import("react").JSX.Element;
+/**
+ * Legend for the chart components.
+ *
+ * Hovering an entry isolates its series and clicking pins that isolation.
+ *
+ * Deliberately *not* a visibility toggle: hiding a series would have to rescale
+ * the value axis to stay honest — otherwise the remaining bars sit mysteriously
+ * short — and that belongs with the geometry layer rather than bolted on here.
+ * Isolation only changes opacity, so the domain is untouched and the numbers
+ * keep meaning what they did.
+ */
+declare const ChartLegend: ({ items, inset, hoveredKey, pinnedKey, onItemEnter, onItemLeave, onItemClick, }: ChartLegendProps) => import("react").JSX.Element | null;
 export default ChartLegend;

package/dist/charts/ChartLegend.js

@@ -1,28 +1,51 @@
-import Text, { TextSize, TextVariant } from "../text/Text.js";
-import FlexWrapper, { AlignItems, FlexDirection } from "../containers/FlexWrapper.js";
+import Text, { TextSize } from "../text/Text.js";
 import Circle from "../shapes/Circle.js";
-import { resolveSeriesColor } from "./utils.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { ChartMarkState } from "./types.js";
+import { ChartLegendItemButton, ChartLegendItemStatic, ChartLegendRow } from "./ChartPrimitives.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/charts/ChartLegend.tsx
-var ChartLegend = ({ series, palette }) => {
-	return /* @__PURE__ */ jsx(FlexWrapper, {
-		direction: FlexDirection.ROW,
-		alignItems: AlignItems.CENTER,
-		gap: 16,
-		children: series.map((s, i) => {
-			const color = resolveSeriesColor(s, i, palette);
-			return /* @__PURE__ */ jsxs(FlexWrapper, {
-				alignItems: AlignItems.CENTER,
-				gap: 6,
-				children: [/* @__PURE__ */ jsx(Circle, {
-					size: 8,
-					hex: color
-				}), /* @__PURE__ */ jsx(Text, {
-					size: TextSize.CAPTION,
-					variant: TextVariant.TERTIARY,
-					children: s.name
-				})]
-			}, s.key);
+/**
+* Legend for the chart components.
+*
+* Hovering an entry isolates its series and clicking pins that isolation.
+*
+* Deliberately *not* a visibility toggle: hiding a series would have to rescale
+* the value axis to stay honest — otherwise the remaining bars sit mysteriously
+* short — and that belongs with the geometry layer rather than bolted on here.
+* Isolation only changes opacity, so the domain is untouched and the numbers
+* keep meaning what they did.
+*/
+var ChartLegend = ({ items, inset, hoveredKey = null, pinnedKey = null, onItemEnter, onItemLeave, onItemClick }) => {
+	if (items.length === 0) return null;
+	const isInteractive = Boolean(onItemEnter ?? onItemClick);
+	const activeKey = pinnedKey ?? hoveredKey;
+	return /* @__PURE__ */ jsx(ChartLegendRow, {
+		$inset: inset,
+		"data-active": activeKey !== null ? "true" : "false",
+		children: items.map((item) => {
+			const state = activeKey === null || item.key === activeKey ? ChartMarkState.ACTIVE : ChartMarkState.MUTED;
+			const content = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Circle, {
+				size: 8,
+				hex: item.color
+			}), /* @__PURE__ */ jsx(Text, {
+				size: TextSize.BODY_SM,
+				children: item.label
+			})] });
+			if (!isInteractive) return /* @__PURE__ */ jsx(ChartLegendItemStatic, {
+				"data-state": state,
+				children: content
+			}, item.key);
+			return /* @__PURE__ */ jsx(ChartLegendItemButton, {
+				type: "button",
+				"data-state": state,
+				"aria-pressed": pinnedKey === item.key,
+				onMouseEnter: () => onItemEnter?.(item.key),
+				onMouseLeave: () => onItemLeave?.(),
+				onFocus: () => onItemEnter?.(item.key),
+				onBlur: () => onItemLeave?.(),
+				onClick: () => onItemClick?.(item.key),
+				children: content
+			}, item.key);
 		})
 	});
 };