@galaxy-io/dls 1.3.4 → 1.3.6

package/dist/charts/ChartPrimitives.js

@@ -34,10 +34,20 @@ import { styled } from "@linaria/react";
 * `min-width: 0` is load-bearing rather than cosmetic — without it a chart in a
 * flex row feeds its min-content width back into the ResizeObserver and the
 * measurement can oscillate.
+*
+* `$legendRight` rotates the layout: plot box and legend become a row with
+* `align-items: center`, which is the whole of "the legend is vertically
+* centred on the pie" — the pie is inscribed centred in its box, so centring
+* the legend against the box centres it against the pie. It also holds in the
+* other direction: a legend taller than the box centres the *pie* against the
+* legend instead of pinning it to the top.
 */
 var _exp = () => ({ $fillWidth }) => $fillWidth ? "flex" : "inline-flex";
-var _exp2 = () => ({ $fillWidth }) => $fillWidth ? "100%" : "auto";
-var _exp3 = () => ({ $fillHeight }) => $fillHeight ? "100%" : "auto";
+var _exp2 = () => ({ $legendRight }) => $legendRight ? "row" : "column";
+var _exp3 = () => ({ $legendRight }) => $legendRight ? "center" : "stretch";
+var _exp4 = () => ({ $legendRight }) => $legendRight ? "center" : "normal";
+var _exp5 = () => ({ $fillWidth }) => $fillWidth ? "100%" : "auto";
+var _exp6 = () => ({ $fillHeight }) => $fillHeight ? "100%" : "auto";
 var ChartRoot = /*#__PURE__*/ styled("div")({
 	name: "ChartRoot",
 	class: "c1hcga6s",
@@ -45,7 +55,10 @@ var ChartRoot = /*#__PURE__*/ styled("div")({
 	vars: {
 		"c1hcga6s-0": [_exp()],
 		"c1hcga6s-1": [_exp2()],
-		"c1hcga6s-2": [_exp3()]
+		"c1hcga6s-2": [_exp3()],
+		"c1hcga6s-3": [_exp4()],
+		"c1hcga6s-4": [_exp5()],
+		"c1hcga6s-5": [_exp6()]
 	}
 });
 /**
@@ -64,19 +77,21 @@ var ChartRoot = /*#__PURE__*/ styled("div")({
 * `min-height: 0` is required with it: a flex item's automatic minimum size is
 * its content, which would let the SVG hold the box open above its track.
 */
-var _exp4 = () => ({ $reservedAspectRatio }) => $reservedAspectRatio ?? "auto";
-var _exp5 = () => ({ $reservedHeight }) => $reservedHeight ? `${$reservedHeight}px` : "auto";
-var _exp6 = () => ({ $fillHeight }) => $fillHeight ? "1 1 0%" : "0 1 auto";
-var _exp7 = () => ({ $fillHeight }) => $fillHeight ? "0" : "auto";
+var _exp7 = () => ({ $legendRight }) => $legendRight ? "auto" : "100%";
+var _exp8 = () => ({ $reservedAspectRatio, $squareFromHeight }) => $squareFromHeight ? "1" : $reservedAspectRatio ?? "auto";
+var _exp9 = () => ({ $reservedHeight, $fillHeight, $legendRight }) => $fillHeight && $legendRight ? "100%" : $reservedHeight ? `${$reservedHeight}px` : "auto";
+var _exp0 = () => ({ $fillHeight, $legendRight, $squareFromHeight }) => $legendRight ? $squareFromHeight ? "0 1 auto" : "1 1 auto" : $fillHeight ? "1 1 0%" : "0 1 auto";
+var _exp1 = () => ({ $fillHeight }) => $fillHeight ? "0" : "auto";
 var ChartPlotBox = /*#__PURE__*/ styled("div")({
 	name: "ChartPlotBox",
 	class: "c1fvbgkp",
 	propsAsIs: false,
 	vars: {
-		"c1fvbgkp-0": [_exp4()],
-		"c1fvbgkp-1": [_exp5()],
-		"c1fvbgkp-2": [_exp6()],
-		"c1fvbgkp-3": [_exp7()]
+		"c1fvbgkp-0": [_exp7()],
+		"c1fvbgkp-1": [_exp8()],
+		"c1fvbgkp-2": [_exp9()],
+		"c1fvbgkp-3": [_exp0()],
+		"c1fvbgkp-4": [_exp1()]
 	}
 });
 /**
@@ -123,29 +138,22 @@ var ChartArcPath = /*#__PURE__*/ styled("path")({
 	propsAsIs: true
 });
 /**
-* Wrapper for the category target layer.
+* Wraps the marks while the chart is loading.
 *
-* Exists to carry the focus-ring colour: the targets themselves are plain
-* `styled.x` because they receive refs (see the module note above), so they
-* cannot read the theme directly. Setting `color` here lets them use
-* `currentColor` and still take the token rather than inheriting whatever the
-* consumer's page happens to set.
-*/
-var _exp11 = () => ({ theme }) => theme.color.border.selected;
-var ChartCategoryTargetLayer = withTheme(/*#__PURE__*/ styled("g")({
-	name: "ChartCategoryTargetLayer",
-	class: "c1wvzvu4",
-	propsAsIs: true,
-	vars: { "c1wvzvu4-0": [_exp11()] }
-}));
-/**
-* Shared by both target shapes.
+* Only motion lives here — the slow pulse shared with `TextShimmer` and
+* `AvatarShimmer`, so a loading chart breathes in step with every other
+* skeleton on the page. Colour arrives through the series resolver like any
+* other mark colour, which is what lets bars and arcs ghost by `fill` and
+* lines by `stroke` without per-shape CSS here.
 *
-* The ring is a `stroke`, not an `outline`: `outline` on SVG elements is a late
-* arrival in WebKit and `outline-offset` behaves inconsistently across engines,
-* while a stroke on a transparent shape is universally supported — and it
-* traces a pie arc, which a rectangular outline could not.
+* Under reduced motion the pulse pins at its midpoint rather than sitting at
+* full strength, so the chart still reads as a placeholder and not as data.
 */
+var ChartSkeletonGroup = /*#__PURE__*/ styled("g")({
+	name: "ChartSkeletonGroup",
+	class: "c1wvzvu4",
+	propsAsIs: true
+});
 /**
 * Per-category hit target, rendered above the marks.
 *
@@ -153,6 +161,9 @@ var ChartCategoryTargetLayer = withTheme(/*#__PURE__*/ styled("g")({
 * bar is as easy to hover as a two-hundred-pixel one, and crossing between
 * segments inside a category fires no events at all — so the tooltip holds
 * still instead of chasing each segment.
+*
+* No cursor and no focus treatment: the target only previews on hover, and a
+* pointer cursor would promise a click that does nothing.
 */
 var ChartHitTarget = /*#__PURE__*/ styled("rect")({
 	name: "ChartHitTarget",
@@ -164,43 +175,37 @@ var ChartHitTarget = /*#__PURE__*/ styled("rect")({
 *
 * A pie has no category axis to band, so its targets are the arc shapes
 * themselves — drawn again, transparent, above the marks. That keeps hit
-* testing and focus identical across all three charts instead of the pie
-* hit-testing its visible arcs directly.
+* testing identical across all three charts instead of the pie hit-testing its
+* visible arcs directly.
 */
 var ChartHitTargetPath = /*#__PURE__*/ styled("path")({
 	name: "ChartHitTargetPath",
 	class: "cblgiyf",
 	propsAsIs: true
 });
-/** Full-plot backdrop; clicking it clears a pinned category. */
-var ChartBackdrop = /*#__PURE__*/ styled("rect")({
-	name: "ChartBackdrop",
-	class: "c1lr03cc",
-	propsAsIs: true
-});
 /**
 * Solid hairline rather than a dashed rule, and drawn at every tick including
 * zero — the line under the bars is what makes them read as resting on a
 * baseline.
 */
-var _exp14 = () => ({ theme }) => theme.color.border.primary;
+var _exp16 = () => ({ theme }) => theme.color.border.primary;
 var ChartGridLine = withTheme(/*#__PURE__*/ styled("line")({
 	name: "ChartGridLine",
-	class: "cizy1s8",
+	class: "c1lr03cc",
 	propsAsIs: true,
-	vars: { "cizy1s8-0": [_exp14()] }
+	vars: { "c1lr03cc-0": [_exp16()] }
 }));
 /** Vertical rule marking the hovered category on a line chart. */
-var _exp15 = () => ({ theme }) => theme.color.border.secondary;
+var _exp17 = () => ({ theme }) => theme.color.border.secondary;
 var ChartCursorLine = withTheme(/*#__PURE__*/ styled("line")({
 	name: "ChartCursorLine",
-	class: "c1ukq11d",
+	class: "cizy1s8",
 	propsAsIs: true,
-	vars: { "c1ukq11d-0": [_exp15()] }
+	vars: { "cizy1s8-0": [_exp17()] }
 }));
 var ChartAxisLabelBox = /*#__PURE__*/ styled("foreignObject")({
 	name: "ChartAxisLabelBox",
-	class: "cwcko2m",
+	class: "c1ukq11d",
 	propsAsIs: true
 });
 /**
@@ -210,21 +215,21 @@ var ChartAxisLabelBox = /*#__PURE__*/ styled("foreignObject")({
 * than teleporting, and it stays mounted while hidden so the fade can actually
 * run — unmounting on hide is why a fade-out never appears.
 */
-var _exp16 = () => ({ $x }) => `${$x}px`;
-var _exp17 = () => ({ $y }) => `${$y}px`;
-var _exp20 = () => ({ theme }) => theme.color.border.primary;
-var _exp21 = () => ({ theme }) => theme.color.background.primary;
-var _exp22 = () => ({ $isVisible }) => $isVisible ? 1 : 0;
+var _exp18 = () => ({ $x }) => `${$x}px`;
+var _exp19 = () => ({ $y }) => `${$y}px`;
+var _exp22 = () => ({ theme }) => theme.color.border.primary;
+var _exp23 = () => ({ theme }) => theme.color.background.primary;
+var _exp24 = () => ({ $isVisible }) => $isVisible ? 1 : 0;
 var ChartTooltipPositioner = withTheme(/*#__PURE__*/ styled("div")({
 	name: "ChartTooltipPositioner",
-	class: "cqwhvyz",
+	class: "cwcko2m",
 	propsAsIs: false,
 	vars: {
-		"cqwhvyz-0": [_exp16()],
-		"cqwhvyz-1": [_exp17()],
-		"cqwhvyz-2": [_exp20()],
-		"cqwhvyz-3": [_exp21()],
-		"cqwhvyz-4": [_exp22()]
+		"cwcko2m-0": [_exp18()],
+		"cwcko2m-1": [_exp19()],
+		"cwcko2m-2": [_exp22()],
+		"cwcko2m-3": [_exp23()],
+		"cwcko2m-4": [_exp24()]
 	}
 }));
 /**
@@ -235,32 +240,32 @@ var ChartTooltipPositioner = withTheme(/*#__PURE__*/ styled("div")({
 * of the DLS. `pointer-events: none` keeps it from stealing hover from the arc
 * behind it.
 */
-var _exp26 = () => ({ $centerX }) => `${$centerX}px`;
-var _exp27 = () => ({ $centerY }) => `${$centerY}px`;
-var _exp29 = () => ({ $diameter }) => `${$diameter}px`;
+var _exp28 = () => ({ $centerX }) => `${$centerX}px`;
+var _exp29 = () => ({ $centerY }) => `${$centerY}px`;
+var _exp31 = () => ({ $diameter }) => `${$diameter}px`;
 var ChartCenterBox = /*#__PURE__*/ styled("div")({
 	name: "ChartCenterBox",
-	class: "c1iaray",
+	class: "cqwhvyz",
 	propsAsIs: false,
 	vars: {
-		"c1iaray-0": [_exp26()],
-		"c1iaray-1": [_exp27()],
-		"c1iaray-2": [_exp29()]
+		"cqwhvyz-0": [_exp28()],
+		"cqwhvyz-1": [_exp29()],
+		"cqwhvyz-2": [_exp31()]
 	}
 });
 /**
 * Sits slightly above centre, over where the bars would be, so the axes stay
 * legible underneath.
 */
-var _exp30 = () => ({ theme }) => theme.color.border.primary;
-var _exp31 = () => ({ theme }) => theme.color.background.tertiary;
+var _exp32 = () => ({ theme }) => theme.color.border.primary;
+var _exp33 = () => ({ theme }) => theme.color.background.tertiary;
 var ChartEmptyOverlay = withTheme(/*#__PURE__*/ styled("div")({
 	name: "ChartEmptyOverlay",
-	class: "cz6jod1",
+	class: "c1iaray",
 	propsAsIs: false,
 	vars: {
-		"cz6jod1-0": [_exp30()],
-		"cz6jod1-1": [_exp31()]
+		"c1iaray-0": [_exp32()],
+		"c1iaray-1": [_exp33()]
 	}
 }));
 /**
@@ -272,34 +277,47 @@ var ChartEmptyOverlay = withTheme(/*#__PURE__*/ styled("div")({
 * the marks dim instantly while their legend entries sit through the full
 * {@link CHART_RESTORE_DELAY_MS}, and the two visibly fall out of step.
 */
-var _exp32 = () => ({ $inset }) => `${$inset}px`;
+var _exp34 = () => ({ $vertical }) => $vertical ? "column" : "row";
+var _exp35 = () => ({ $vertical }) => $vertical ? "nowrap" : "wrap";
+var _exp36 = () => ({ $vertical }) => $vertical ? "flex-start" : "center";
+var _exp37 = () => ({ $vertical }) => $vertical ? "8px" : "8px 16px";
+var _exp38 = () => ({ $vertical }) => $vertical ? "0" : "10px";
+var _exp39 = () => ({ $inset }) => `${$inset}px`;
 var ChartLegendRow = /*#__PURE__*/ styled("div")({
 	name: "ChartLegendRow",
-	class: "c1de5mqk",
+	class: "cz6jod1",
 	propsAsIs: false,
-	vars: { "c1de5mqk-0": [_exp32()] }
+	vars: {
+		"cz6jod1-0": [_exp34()],
+		"cz6jod1-1": [_exp35()],
+		"cz6jod1-2": [_exp36()],
+		"cz6jod1-3": [_exp37()],
+		"cz6jod1-4": [_exp38()],
+		"cz6jod1-5": [_exp39()]
+	}
 });
 /**
 * One legend entry, when the legend is interactive.
 *
-* A real `<button>` rather than a styled div: it is clickable, so it has to be
-* reachable and operable by keyboard. `aria-pressed` carries the pinned state —
-* the only thing here a screen reader can truthfully announce, since the plot
-* itself is `role="img"` and its marks are not in the accessibility tree.
+* A real `<button>` rather than a styled div so it sits in the tab order:
+* focusing an entry previews its series exactly as hovering does, which is the
+* one keyboard affordance the charts keep — the plot itself is `role="img"` and
+* its marks are not in the accessibility tree. Activating it does nothing;
+* isolation follows the pointer or the focus and releases with it.
 *
 * Shares the mark opacity ramp via `data-state`, so an entry recedes in step
 * with the series it names.
 */
 var ChartLegendItemButton = /*#__PURE__*/ styled("button")({
 	name: "ChartLegendItemButton",
-	class: "cjirv6a",
+	class: "c1de5mqk",
 	propsAsIs: false
 });
 /** The same row, when the legend is inert — no button semantics to announce. */
 var ChartLegendItemStatic = /*#__PURE__*/ styled("div")({
 	name: "ChartLegendItemStatic",
-	class: "c1armna5",
+	class: "cjirv6a",
 	propsAsIs: false
 });
 //#endregion
-export { ChartArcPath, ChartAreaPath, ChartAxisLabelBox, ChartBackdrop, ChartBarPath, ChartCategoryTargetLayer, ChartCenterBox, ChartCursorLine, ChartEmptyOverlay, ChartGridLine, ChartHitTarget, ChartHitTargetPath, ChartLegendItemButton, ChartLegendItemStatic, ChartLegendRow, ChartLinePath, ChartPlotBox, ChartPlotGroup, ChartPointCircle, ChartRoot, ChartSvg, ChartTooltipPositioner };
+export { ChartArcPath, ChartAreaPath, ChartAxisLabelBox, ChartBarPath, ChartCenterBox, ChartCursorLine, ChartEmptyOverlay, ChartGridLine, ChartHitTarget, ChartHitTargetPath, ChartLegendItemButton, ChartLegendItemStatic, ChartLegendRow, ChartLinePath, ChartPlotBox, ChartPlotGroup, ChartPointCircle, ChartRoot, ChartSkeletonGroup, ChartSvg, ChartTooltipPositioner };

package/dist/charts/ChartTooltip.js

@@ -34,6 +34,7 @@ var ChartTooltip = ({ model, containerWidth, containerHeight, anchorHalfWidth, p
 			children: [/* @__PURE__ */ jsx(Text, {
 				size: TextSize.BODY_SM,
 				variant: TextVariant.TERTIARY,
+				isEllipsis: true,
 				children: displayed.label
 			}), /* @__PURE__ */ jsx(FlexWrapper, {
 				direction: FlexDirection.COLUMN,
@@ -47,6 +48,7 @@ var ChartTooltip = ({ model, containerWidth, containerHeight, anchorHalfWidth, p
 					children: [/* @__PURE__ */ jsxs(FlexWrapper, {
 						alignItems: AlignItems.CENTER,
 						gap: 6,
+						minWidth: 0,
 						children: [/* @__PURE__ */ jsx(FlexItem, {
 							shrink: 0,
 							children: /* @__PURE__ */ jsx(Circle, {
@@ -58,10 +60,13 @@ var ChartTooltip = ({ model, containerWidth, containerHeight, anchorHalfWidth, p
 							isEllipsis: true,
 							children: row.label
 						})]
-					}), /* @__PURE__ */ jsx(Text, {
-						size: TextSize.BODY_SM,
-						weight: TextWeight.MEDIUM,
-						children: row.formattedValue
+					}), /* @__PURE__ */ jsx(FlexItem, {
+						shrink: 0,
+						children: /* @__PURE__ */ jsx(Text, {
+							size: TextSize.BODY_SM,
+							weight: TextWeight.MEDIUM,
+							children: row.formattedValue
+						})
 					})]
 				}, row.key))
 			})]

package/dist/charts/LineChart.d.ts

@@ -25,12 +25,6 @@ export type LineChartProps<TMetric extends string> = BaseCartesianChartProps & C
     strokeWidth?: number;
     /** 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.
@@ -40,5 +34,5 @@ export type LineChartProps<TMetric extends string> = BaseCartesianChartProps & C
  * 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;
+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, }: LineChartProps<TMetric>) => import("react").JSX.Element;
 export default LineChart;

package/dist/charts/LineChart.js

@@ -1,10 +1,10 @@
 import { ChartKind, ChartTargetShape, LineChartCurve } from "./types.js";
-import { LINE_AREA_OPACITY, LINE_POINT_RADIUS } from "./constants.js";
+import { LINE_AREA_OPACITY, LINE_POINT_RADIUS, SKELETON_LINE_SERIES } 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 { ChartAreaPath, ChartCursorLine, ChartLinePath, ChartPointCircle, ChartSkeletonGroup } from "./ChartPrimitives.js";
 import ChartFrame from "./ChartFrame.js";
 import { ChartCategoryAxis, ChartValueAxis } from "./ChartAxis.js";
 import { useCallback, useMemo, useRef } from "react";
@@ -18,12 +18,30 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 * 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 }) => {
+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 }) => {
 	const containerRef = useRef(null);
 	const colors = useSeriesColorResolver(series);
+	/**
+	* The data actually rendered: the caller's, or ghost lines while loading.
+	*
+	* Loading replaces the chart wholesale with skeleton data pushed through the
+	* real geometry pipeline — offset lines drawn with their area fills, so the
+	* placeholder has the layered depth of a real multi-series chart. The cast is
+	* safe because nothing derived from it ever surfaces: labels are hidden,
+	* targets are off, the legend shows stubs, and the accessible name says
+	* "loading" instead of counting.
+	*/
+	const displayLines = useMemo(() => isLoading ? SKELETON_LINE_SERIES.map((values, lineIndex) => ({
+		metric: `skeleton-${lineIndex}`,
+		showArea: true,
+		points: values.map((value, index) => ({
+			x: `skeleton-${index}`,
+			y: value
+		}))
+	})) : lines, [isLoading, lines]);
 	const { dimensions, domain, valueTicks, formatValue, formatLabel } = useCartesianChartLayout({
 		containerRef,
-		rawDomain: useMemo(() => getLineValueDomain(lines), [lines]),
+		rawDomain: useMemo(() => getLineValueDomain(displayLines), [displayLines]),
 		valueDomain,
 		width,
 		height,
@@ -38,10 +56,10 @@ var LineChart = ({ series, lines, categories, width, height, fillWidth, fillHeig
 		categoryAxisTitle
 	});
 	const { plotWidth, plotHeight } = dimensions;
-	const resolveColor = useCallback(({ metric }) => colors.resolve(metric), [colors]);
+	const resolveColor = useCallback(({ metric }) => isLoading ? colors.placeholder : colors.resolve(metric), [colors, isLoading]);
 	const geometry = useMemo(() => buildLineChartGeometry({
-		lines,
-		categories,
+		lines: displayLines,
+		categories: isLoading ? void 0 : categories,
 		plotWidth,
 		plotHeight,
 		curve,
@@ -49,7 +67,8 @@ var LineChart = ({ series, lines, categories, width, height, fillWidth, fillHeig
 		strokeWidth,
 		resolveColor
 	}), [
-		lines,
+		displayLines,
+		isLoading,
 		categories,
 		plotWidth,
 		plotHeight,
@@ -58,7 +77,7 @@ var LineChart = ({ series, lines, categories, width, height, fillWidth, fillHeig
 		strokeWidth,
 		resolveColor
 	]);
-	const isEmpty = geometry.categories.length === 0 || lines.length === 0;
+	const isEmpty = geometry.categories.length === 0 || displayLines.length === 0;
 	const legendItems = useMemo(() => colors.keys.map((metric) => ({
 		key: metric,
 		label: series[metric].label,
@@ -68,9 +87,7 @@ var LineChart = ({ series, lines, categories, width, height, fillWidth, fillHeig
 	const interaction = useChartInteraction({
 		categoryCount: geometry.columns.length,
 		seriesKeys: legendKeys,
-		disabled: noTooltip || isLoading || isEmpty,
-		isLoading,
-		onPinnedChange
+		disabled: noTooltip || isLoading || isEmpty
 	});
 	const activeColumn = interaction.activeIndex === null ? null : geometry.columns[interaction.activeIndex];
 	const buildCategoryTooltip = useCallback((index) => {
@@ -104,7 +121,42 @@ var LineChart = ({ series, lines, categories, width, height, fillWidth, fillHeig
 		width: column.bandWidth,
 		height: plotHeight
 	})), [geometry.columns, plotHeight]);
-	return /* @__PURE__ */ jsxs(ChartFrame, {
+	const marks = /* @__PURE__ */ jsxs(Fragment, { 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))
+	] });
+	return /* @__PURE__ */ jsx(ChartFrame, {
 		containerRef,
 		dimensions,
 		fillWidth,
@@ -122,6 +174,7 @@ var LineChart = ({ series, lines, categories, width, height, fillWidth, fillHeig
 			marginLeft: dimensions.margin.left,
 			formatter: formatValue,
 			showGrid,
+			showLabels: !isLoading,
 			title: valueAxisTitle
 		}), /* @__PURE__ */ jsx(ChartCategoryAxis, {
 			labels: geometry.categories,
@@ -131,6 +184,7 @@ var LineChart = ({ series, lines, categories, width, height, fillWidth, fillHeig
 			plotHeight,
 			formatter: formatLabel,
 			mode: categoryLabelMode,
+			showLabels: !isLoading,
 			title: categoryAxisTitle
 		})] }),
 		noTooltip,
@@ -143,41 +197,7 @@ var LineChart = ({ series, lines, categories, width, height, fillWidth, fillHeig
 		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))
-		]
+		children: isLoading ? /* @__PURE__ */ jsx(ChartSkeletonGroup, { children: marks }) : marks
 	});
 };
 //#endregion

package/dist/charts/PieChart.d.ts

@@ -32,13 +32,6 @@ export type PieChartProps<TSlice extends string> = BaseChartProps & ChartSize &
      * Ignored when `innerRadiusRatio` is 0.
      */
     centerContent?: ReactNode;
-    /**
-     * Notified when a slice is pinned or unpinned by a click.
-     *
-     * The index is a position in the *rendered* arcs, which excludes folded
-     * slices and may include the aggregated bucket.
-     */
-    onPinnedChange?: (sliceIndex: number | null) => void;
 };
 /**
  * Pie and donut chart.
@@ -47,5 +40,5 @@ export type PieChartProps<TSlice extends string> = BaseChartProps & ChartSize &
  * each arc is its own target. Small slices are folded into an "Other" bucket by
  * default, which keeps every remaining arc large enough to actually hit.
  */
-declare const PieChart: <TSlice extends string>({ series, slices, width, height, fillWidth, fillHeight, aspectRatio, margin, innerRadiusRatio, padAngle, cornerRadius, minSliceShare, aggregatedLabel, centerContent, valueUnit, valueFormatter, labelFormatter, showLegend, noTooltip, tooltipRenderer, isLoading, contentWhenEmpty, ariaLabel, ariaDescription, onPinnedChange, }: PieChartProps<TSlice>) => import("react").JSX.Element;
+declare const PieChart: <TSlice extends string>({ series, slices, width, height, fillWidth, fillHeight, aspectRatio, margin, innerRadiusRatio, padAngle, cornerRadius, minSliceShare, aggregatedLabel, centerContent, valueUnit, valueFormatter, labelFormatter, showLegend, noTooltip, tooltipRenderer, isLoading, contentWhenEmpty, ariaLabel, ariaDescription, }: PieChartProps<TSlice>) => import("react").JSX.Element;
 export default PieChart;