@galaxy-io/dls 1.3.4 → 1.3.6

package/dist/charts/PieChart.js

@@ -1,13 +1,13 @@
 import FlexWrapper, { AlignItems, FlexDirection, JustifyContent } from "../containers/FlexWrapper.js";
-import { ChartKind, ChartTargetShape } from "./types.js";
-import { PIE_CHART_MARGIN, PIE_MIN_SLICE_SHARE } from "./constants.js";
+import { ChartKind, ChartLegendPlacement, ChartTargetShape } from "./types.js";
+import { PIE_CHART_MARGIN, PIE_MIN_SLICE_SHARE, SKELETON_PIE_VALUES } from "./constants.js";
 import { useSeriesColorResolver } from "./useSeriesColorResolver.js";
 import { ChartTooltipVerticalAlign } from "./useChartTooltipPosition.js";
 import { useChartInteraction } from "./useChartInteraction.js";
 import { useChartFormatters } from "./useChartFormatters.js";
 import { useChartDimensions } from "./useChartDimensions.js";
 import { buildPieChartGeometry } from "./pieChartGeometry.js";
-import { ChartArcPath, ChartCenterBox } from "./ChartPrimitives.js";
+import { ChartArcPath, ChartCenterBox, ChartSkeletonGroup } from "./ChartPrimitives.js";
 import ChartFrame from "./ChartFrame.js";
 import { useCallback, useMemo, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -19,7 +19,7 @@ import { jsx } from "react/jsx-runtime";
 * 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.
 */
-var PieChart = ({ series, slices, width, height, fillWidth, fillHeight, aspectRatio, margin, innerRadiusRatio, padAngle, cornerRadius, minSliceShare = PIE_MIN_SLICE_SHARE, aggregatedLabel, centerContent, valueUnit, valueFormatter, labelFormatter, showLegend = true, noTooltip = false, tooltipRenderer, isLoading = false, contentWhenEmpty, ariaLabel, ariaDescription, onPinnedChange }) => {
+var PieChart = ({ series, slices, width, height, fillWidth, fillHeight, aspectRatio, margin, innerRadiusRatio, padAngle, cornerRadius, minSliceShare = PIE_MIN_SLICE_SHARE, aggregatedLabel, centerContent, valueUnit, valueFormatter, labelFormatter, showLegend = true, noTooltip = false, tooltipRenderer, isLoading = false, contentWhenEmpty, ariaLabel, ariaDescription }) => {
 	const containerRef = useRef(null);
 	const colors = useSeriesColorResolver(series);
 	const dimensions = useChartDimensions({
@@ -40,9 +40,23 @@ var PieChart = ({ series, slices, width, height, fillWidth, fillHeight, aspectRa
 	});
 	const getSliceLabel = useCallback((sliceKey) => series[sliceKey]?.label ?? sliceKey, [series]);
 	const getSliceColor = useCallback((sliceKey) => series[sliceKey]?.color, [series]);
-	const resolveColor = useCallback(({ sliceKey, explicit }) => sliceKey === null ? colors.neutral : colors.resolve(sliceKey, explicit), [colors]);
+	/**
+	* The slices actually rendered: the caller's, or three ghost arcs while
+	* loading, pushed through the real geometry so the skeleton donut gets the
+	* true pad angles and corner radii. The cast is safe because nothing derived
+	* from skeleton data ever surfaces: targets are off, the legend shows stubs,
+	* and the accessible name says "loading" instead of counting slices.
+	*/
+	const displaySlices = useMemo(() => isLoading ? SKELETON_PIE_VALUES.map((value, index) => ({
+		key: `skeleton-${index}`,
+		value
+	})) : slices, [isLoading, slices]);
+	const resolveColor = useCallback(({ sliceKey, explicit }) => {
+		if (isLoading) return colors.placeholder;
+		return sliceKey === null ? colors.neutral : colors.resolve(sliceKey, explicit);
+	}, [colors, isLoading]);
 	const geometry = useMemo(() => buildPieChartGeometry({
-		slices,
+		slices: displaySlices,
 		plotWidth,
 		plotHeight,
 		innerRadiusRatio,
@@ -54,7 +68,7 @@ var PieChart = ({ series, slices, width, height, fillWidth, fillHeight, aspectRa
 		getSliceColor,
 		getSliceLabel
 	}), [
-		slices,
+		displaySlices,
 		plotWidth,
 		plotHeight,
 		innerRadiusRatio,
@@ -76,9 +90,7 @@ var PieChart = ({ series, slices, width, height, fillWidth, fillHeight, aspectRa
 	const interaction = useChartInteraction({
 		categoryCount: geometry.arcs.length,
 		seriesKeys: legendKeys,
-		disabled: noTooltip || isLoading || isEmpty,
-		isLoading,
-		onPinnedChange
+		disabled: noTooltip || isLoading || isEmpty
 	});
 	const buildCategoryTooltip = useCallback((index) => {
 		const chartArc = geometry.arcs[index];
@@ -101,35 +113,28 @@ var PieChart = ({ series, slices, width, height, fillWidth, fillHeight, aspectRa
 		formatLabel
 	]);
 	/**
-	* A slice reads better than the generic "label: row, row" sentence.
-	*
-	* The frame's default would render "Enterprise: 42.1% of total 1,240", which
-	* puts the share where a reader expects the value.
-	*/
-	const describeCategory = useCallback((index) => {
-		const chartArc = geometry.arcs[index];
-		if (!chartArc) return "";
-		const share = `${Math.round(chartArc.share * 1e3) / 10}% of total`;
-		return `${formatLabel(chartArc.label)}, ${formatValue(chartArc.value)}, ${share}`;
-	}, [
-		geometry.arcs,
-		formatValue,
-		formatLabel
-	]);
-	/**
 	* Targets reuse each arc's own `d`, drawn again transparent above the marks.
 	*
-	* The arcs themselves stop being interactive: hit testing, focus and the
-	* focus ring then work identically on all three charts, instead of the pie
-	* attaching handlers permanently and toggling `data-interactive` while the
-	* cartesian charts rendered their targets away.
+	* The arcs themselves stay pure marks: hit testing then works identically on
+	* all three charts, instead of the pie hit-testing its visible arcs directly.
 	*/
 	const categoryTargets = useMemo(() => geometry.arcs.map((chartArc) => ({
 		key: chartArc.id,
 		shape: ChartTargetShape.PATH,
 		d: chartArc.path
 	})), [geometry.arcs]);
-	const showCenter = centerContent && (innerRadiusRatio ?? .62) > 0;
+	const showCenter = centerContent && !isLoading && (innerRadiusRatio ?? .62) > 0;
+	const marks = /* @__PURE__ */ jsx("g", {
+		transform: `translate(${geometry.centerX}, ${geometry.centerY})`,
+		children: geometry.arcs.map((chartArc, index) => /* @__PURE__ */ jsx(ChartArcPath, {
+			d: chartArc.path,
+			fill: chartArc.color,
+			"data-state": interaction.getMarkState({
+				categoryIndex: index,
+				seriesKey: chartArc.id
+			})
+		}, chartArc.id))
+	});
 	return /* @__PURE__ */ jsx(ChartFrame, {
 		containerRef,
 		dimensions,
@@ -145,8 +150,6 @@ var PieChart = ({ series, slices, width, height, fillWidth, fillHeight, aspectRa
 		tooltipRenderer,
 		categoryTargets,
 		categoryTargetsTransform: `translate(${geometry.centerX}, ${geometry.centerY})`,
-		wrapCategoryNavigation: true,
-		describeCategory,
 		placeAwayFromX: geometry.centerX,
 		verticalAlign: ChartTooltipVerticalAlign.CENTERED,
 		isEmpty,
@@ -154,24 +157,14 @@ var PieChart = ({ series, slices, width, height, fillWidth, fillHeight, aspectRa
 		contentWhenEmpty,
 		showLegend,
 		legendItems,
-		legendInset: 0,
+		legendPlacement: ChartLegendPlacement.RIGHT,
 		plotOverlay: showCenter && !isEmpty ? /* @__PURE__ */ jsx(ChartDonutCenter, {
 			centerX: dimensions.margin.left + geometry.centerX,
 			centerY: dimensions.margin.top + geometry.centerY,
 			diameter: geometry.innerRadius * 2,
 			children: centerContent
 		}) : null,
-		children: /* @__PURE__ */ jsx("g", {
-			transform: `translate(${geometry.centerX}, ${geometry.centerY})`,
-			children: geometry.arcs.map((chartArc, index) => /* @__PURE__ */ jsx(ChartArcPath, {
-				d: chartArc.path,
-				fill: chartArc.color,
-				"data-state": interaction.getMarkState({
-					categoryIndex: index,
-					seriesKey: chartArc.id
-				})
-			}, chartArc.id))
-		})
+		children: isLoading ? /* @__PURE__ */ jsx(ChartSkeletonGroup, { children: marks }) : marks
 	});
 };
 /** Positions arbitrary content inside the donut hole. */

package/dist/charts/chartFormat.d.ts

@@ -1,5 +1,5 @@
 import { ChartValueUnit } from "./types";
-import type { ChartLabelFormatter, ChartPlotTooltipModel, ChartValueFormatter } from "./types";
+import type { ChartLabelFormatter, ChartValueFormatter } from "./types";
 /**
  * Format a value with a built-in unit.
  *
@@ -17,11 +17,3 @@ export declare function formatChartValue(value: number, unit: ChartValueUnit): s
 export declare function resolveValueFormatter(valueFormatter?: ChartValueFormatter, unit?: ChartValueUnit): ChartValueFormatter;
 /** Pick the effective label formatter, defaulting to identity. */
 export declare function resolveLabelFormatter(labelFormatter?: ChartLabelFormatter): ChartLabelFormatter;
-/**
- * Flatten a tooltip model into one sentence, for a screen reader.
- *
- * Derived from the tooltip rather than written separately so the two cannot
- * drift: whatever a sighted reader sees on hover is what a keyboard reader
- * hears on focus, by construction.
- */
-export declare function describeTooltipModel(model: ChartPlotTooltipModel): string;

package/dist/charts/chartFormat.js

@@ -55,17 +55,5 @@ function resolveValueFormatter(valueFormatter, unit) {
 function resolveLabelFormatter(labelFormatter) {
 	return labelFormatter ?? ((label) => label);
 }
-/**
-* Flatten a tooltip model into one sentence, for a screen reader.
-*
-* Derived from the tooltip rather than written separately so the two cannot
-* drift: whatever a sighted reader sees on hover is what a keyboard reader
-* hears on focus, by construction.
-*/
-function describeTooltipModel(model) {
-	if (model.rows.length === 0) return model.label;
-	const rows = model.rows.map((row) => `${row.label} ${row.formattedValue}`).join(", ");
-	return `${model.label}: ${rows}`;
-}
 //#endregion
-export { describeTooltipModel, formatChartValue, resolveLabelFormatter, resolveValueFormatter };
+export { formatChartValue, resolveLabelFormatter, resolveValueFormatter };

package/dist/charts/constants.d.ts

@@ -185,27 +185,43 @@ export declare const CHART_RESTORE_DELAY_MS = 200;
  *
  * The grammar is inherited from the reference charts and is the opposite of the
  * obvious one: hovering does not brighten the hovered mark, it *softens*
- * everything else. `MUTED` applies to marks outside the hovered category;
- * `FADED` to marks outside a *pinned* one.
+ * everything else. `MUTED` applies to marks outside the hovered category or
+ * series.
  *
  * The step down from ACTIVE is deliberately steep. These are large filled areas
  * — bars and arcs — and a filled shape still reads as present at an opacity
  * where a hairline would have vanished, so a timid step barely registers as a
  * highlight at all.
- *
- * Keep `FADED` below `MUTED`, or pinning becomes visually indistinguishable
- * from hovering — the pin exists to say "I am holding this one", which only
- * reads if the rest recede further than they do on hover.
  */
 export declare const CHART_MARK_OPACITY_ACTIVE = 1;
 export declare const CHART_MARK_OPACITY_MUTED = 0.1;
-export declare const CHART_MARK_OPACITY_FADED = 0.04;
 /** Distance in px between the tooltip and its anchor. */
 export declare const CHART_TOOLTIP_OFFSET = 10;
 /** Minimum width of the tooltip, in px. */
 export declare const CHART_TOOLTIP_MIN_WIDTH = 168;
 /** Maximum width of the tooltip, in px. */
 export declare const CHART_TOOLTIP_MAX_WIDTH = 320;
+/** Gap in px between the plot box and a side-placed legend. */
+export declare const CHART_LEGEND_SIDE_GAP = 16;
+/**
+ * Ghost bar heights, one inner array per group — three bars each, so the
+ * skeleton reads as the grouped chart it usually stands in for rather than a
+ * sparse row of lone bars.
+ */
+export declare const SKELETON_BAR_GROUPS: number[][];
+/**
+ * Ghost lines, one inner array per line, offset from each other and drawn with
+ * their area fills so the skeleton has the layered depth of a real multi-series
+ * chart instead of a single bare stroke.
+ */
+export declare const SKELETON_LINE_SERIES: number[][];
+/** Ghost donut shares — three arcs, halving. */
+export declare const SKELETON_PIE_VALUES: number[];
+/**
+ * Skeleton pulse period, matching the cadence of `TextShimmer` and
+ * `AvatarShimmer` so charts load in step with everything else on the page.
+ */
+export declare const CHART_SKELETON_PULSE_MS = 2500;
 /**
  * Approximate width of one CAPTION-size character.
  *

package/dist/charts/constants.js

@@ -195,27 +195,101 @@ var CHART_RESTORE_DELAY_MS = 200;
 *
 * The grammar is inherited from the reference charts and is the opposite of the
 * obvious one: hovering does not brighten the hovered mark, it *softens*
-* everything else. `MUTED` applies to marks outside the hovered category;
-* `FADED` to marks outside a *pinned* one.
+* everything else. `MUTED` applies to marks outside the hovered category or
+* series.
 *
 * The step down from ACTIVE is deliberately steep. These are large filled areas
 * — bars and arcs — and a filled shape still reads as present at an opacity
 * where a hairline would have vanished, so a timid step barely registers as a
 * highlight at all.
-*
-* Keep `FADED` below `MUTED`, or pinning becomes visually indistinguishable
-* from hovering — the pin exists to say "I am holding this one", which only
-* reads if the rest recede further than they do on hover.
 */
 var CHART_MARK_OPACITY_ACTIVE = 1;
 var CHART_MARK_OPACITY_MUTED = .1;
-var CHART_MARK_OPACITY_FADED = .04;
 /** Distance in px between the tooltip and its anchor. */
 var CHART_TOOLTIP_OFFSET = 10;
 /** Minimum width of the tooltip, in px. */
 var CHART_TOOLTIP_MIN_WIDTH = 168;
 /** Maximum width of the tooltip, in px. */
 var CHART_TOOLTIP_MAX_WIDTH = 320;
+/** Gap in px between the plot box and a side-placed legend. */
+var CHART_LEGEND_SIDE_GAP = 16;
+/**
+* Ghost bar heights, one inner array per group — three bars each, so the
+* skeleton reads as the grouped chart it usually stands in for rather than a
+* sparse row of lone bars.
+*/
+var SKELETON_BAR_GROUPS = [
+	[
+		65,
+		45,
+		25
+	],
+	[
+		80,
+		55,
+		30
+	],
+	[
+		45,
+		70,
+		35
+	],
+	[
+		70,
+		50,
+		40
+	],
+	[
+		55,
+		75,
+		30
+	]
+];
+/**
+* Ghost lines, one inner array per line, offset from each other and drawn with
+* their area fills so the skeleton has the layered depth of a real multi-series
+* chart instead of a single bare stroke.
+*/
+var SKELETON_LINE_SERIES = [
+	[
+		30,
+		55,
+		45,
+		70,
+		60,
+		85,
+		75
+	],
+	[
+		20,
+		35,
+		50,
+		40,
+		60,
+		55,
+		70
+	],
+	[
+		10,
+		25,
+		20,
+		35,
+		30,
+		45,
+		40
+	]
+];
+/** Ghost donut shares — three arcs, halving. */
+var SKELETON_PIE_VALUES = [
+	5,
+	3,
+	2
+];
+/**
+* Skeleton pulse period, matching the cadence of `TextShimmer` and
+* `AvatarShimmer` so charts load in step with everything else on the page.
+*/
+var CHART_SKELETON_PULSE_MS = 2500;
 /**
 * Approximate width of one CAPTION-size character.
 *
@@ -264,4 +338,4 @@ var CHART_PALETTE_ORDER = [
 	ChartPalette.RED
 ];
 //#endregion
-export { AGGREGATED_SLICE_KEY, AUTO_MARGIN_LEFT_STEP, AXIS_TITLE_BAND, AXIS_TITLE_GAP, BAR_GAP_COMFORTABLE, BAR_GAP_MEDIUM, BAR_GAP_TIGHT, BAR_RADIUS, BAR_RADIUS_NARROW, BAR_WIDTH_RATIO, CAPTION_CHAR_WIDTH_PX, CATEGORY_AXIS_LABEL_GAP, CATEGORY_AXIS_LABEL_HEIGHT, CHART_MARK_OPACITY_ACTIVE, CHART_MARK_OPACITY_FADED, CHART_MARK_OPACITY_MUTED, CHART_PALETTE_ORDER, CHART_RESTORE_DELAY_MS, CHART_TOOLTIP_MAX_WIDTH, CHART_TOOLTIP_MIN_WIDTH, CHART_TOOLTIP_OFFSET, CHART_TRANSITION_MS, DEFAULT_CHART_MARGIN, DEFAULT_LINE_STROKE_WIDTH, DEFAULT_VALUE_TICK_COUNT, GRID_LINE_BLEED, GROUP_GAP_COMFORTABLE, GROUP_GAP_MEDIUM, GROUP_GAP_TIGHT, LINE_AREA_OPACITY, LINE_POINT_RADIUS, MAX_AUTO_MARGIN_LEFT, MAX_BAR_WIDTH, MAX_GAP_SHARE, MIN_AUTO_MARGIN_LEFT, MIN_BARS_FOR_TIGHT_SPACING, MIN_BAR_LENGTH, MIN_CATEGORY_LABEL_GAP, NARROW_BAR_WIDTH, PIE_CHART_MARGIN, PIE_CORNER_RADIUS, PIE_DONUT_INNER_RATIO, PIE_MAX_AUTO_INNER_RATIO, PIE_MAX_INSET_SHARE, PIE_MIN_SLICE_SHARE, PIE_PAD_ANGLE, PIE_TOOLTIP_ANCHOR_INSET, STACK_SEGMENT_GAP, VALUE_AXIS_LABEL_HEIGHT, VALUE_AXIS_TICK_GAP, WIDTH_FOR_MEDIUM_SPACING, WIDTH_FOR_TIGHT_SPACING };
+export { AGGREGATED_SLICE_KEY, AUTO_MARGIN_LEFT_STEP, AXIS_TITLE_BAND, AXIS_TITLE_GAP, BAR_GAP_COMFORTABLE, BAR_GAP_MEDIUM, BAR_GAP_TIGHT, BAR_RADIUS, BAR_RADIUS_NARROW, BAR_WIDTH_RATIO, CAPTION_CHAR_WIDTH_PX, CATEGORY_AXIS_LABEL_GAP, CATEGORY_AXIS_LABEL_HEIGHT, CHART_LEGEND_SIDE_GAP, CHART_MARK_OPACITY_ACTIVE, CHART_MARK_OPACITY_MUTED, CHART_PALETTE_ORDER, CHART_RESTORE_DELAY_MS, CHART_SKELETON_PULSE_MS, CHART_TOOLTIP_MAX_WIDTH, CHART_TOOLTIP_MIN_WIDTH, CHART_TOOLTIP_OFFSET, CHART_TRANSITION_MS, DEFAULT_CHART_MARGIN, DEFAULT_LINE_STROKE_WIDTH, DEFAULT_VALUE_TICK_COUNT, GRID_LINE_BLEED, GROUP_GAP_COMFORTABLE, GROUP_GAP_MEDIUM, GROUP_GAP_TIGHT, LINE_AREA_OPACITY, LINE_POINT_RADIUS, MAX_AUTO_MARGIN_LEFT, MAX_BAR_WIDTH, MAX_GAP_SHARE, MIN_AUTO_MARGIN_LEFT, MIN_BARS_FOR_TIGHT_SPACING, MIN_BAR_LENGTH, MIN_CATEGORY_LABEL_GAP, NARROW_BAR_WIDTH, PIE_CHART_MARGIN, PIE_CORNER_RADIUS, PIE_DONUT_INNER_RATIO, PIE_MAX_AUTO_INNER_RATIO, PIE_MAX_INSET_SHARE, PIE_MIN_SLICE_SHARE, PIE_PAD_ANGLE, PIE_TOOLTIP_ANCHOR_INSET, SKELETON_BAR_GROUPS, SKELETON_LINE_SERIES, SKELETON_PIE_VALUES, STACK_SEGMENT_GAP, VALUE_AXIS_LABEL_HEIGHT, VALUE_AXIS_TICK_GAP, WIDTH_FOR_MEDIUM_SPACING, WIDTH_FOR_TIGHT_SPACING };

package/dist/charts/types.d.ts

@@ -120,6 +120,18 @@ export declare enum ChartKind {
     LINE = "LINE",
     PIE = "PIE"
 }
+/**
+ * Where the legend sits relative to the plot.
+ *
+ * Its own enum rather than a branch on {@link ChartKind}, which promises to be
+ * nothing but a label for the accessible name.
+ */
+export declare enum ChartLegendPlacement {
+    /** Beneath the plot, wrapping — the cartesian layout. */
+    BOTTOM = "BOTTOM",
+    /** Beside the plot, stacked, vertically centred on it — the pie layout. */
+    RIGHT = "RIGHT"
+}
 /** How the category axis copes when labels outgrow their slots. */
 export declare enum ChartCategoryLabelMode {
     /** Render every label that fits; otherwise show every nth. The default. */
@@ -139,12 +151,10 @@ export declare enum ChartCategoryLabelMode {
  * DOM and trigger a React warning.
  */
 export declare enum ChartMarkState {
-    /** Full strength — the default, and the hovered or pinned category. */
+    /** Full strength — the default, and the hovered category. */
     ACTIVE = "active",
     /** Softened, for categories other than the hovered one. */
-    MUTED = "muted",
-    /** Furthest back, for categories outside a pinned one. */
-    FADED = "faded"
+    MUTED = "muted"
 }
 /** Which pair of a rectangle's corners carries the radius. */
 export declare enum BarCorners {

package/dist/charts/types.js

@@ -80,6 +80,19 @@ var ChartKind = /* @__PURE__ */ function(ChartKind) {
 	ChartKind["PIE"] = "PIE";
 	return ChartKind;
 }({});
+/**
+* Where the legend sits relative to the plot.
+*
+* Its own enum rather than a branch on {@link ChartKind}, which promises to be
+* nothing but a label for the accessible name.
+*/
+var ChartLegendPlacement = /* @__PURE__ */ function(ChartLegendPlacement) {
+	/** Beneath the plot, wrapping — the cartesian layout. */
+	ChartLegendPlacement["BOTTOM"] = "BOTTOM";
+	/** Beside the plot, stacked, vertically centred on it — the pie layout. */
+	ChartLegendPlacement["RIGHT"] = "RIGHT";
+	return ChartLegendPlacement;
+}({});
 /** How the category axis copes when labels outgrow their slots. */
 var ChartCategoryLabelMode = /* @__PURE__ */ function(ChartCategoryLabelMode) {
 	/** Render every label that fits; otherwise show every nth. The default. */
@@ -100,12 +113,10 @@ var ChartCategoryLabelMode = /* @__PURE__ */ function(ChartCategoryLabelMode) {
 * DOM and trigger a React warning.
 */
 var ChartMarkState = /* @__PURE__ */ function(ChartMarkState) {
-	/** Full strength — the default, and the hovered or pinned category. */
+	/** Full strength — the default, and the hovered category. */
 	ChartMarkState["ACTIVE"] = "active";
 	/** Softened, for categories other than the hovered one. */
 	ChartMarkState["MUTED"] = "muted";
-	/** Furthest back, for categories outside a pinned one. */
-	ChartMarkState["FADED"] = "faded";
 	return ChartMarkState;
 }({});
 /** Which pair of a rectangle's corners carries the radius. */
@@ -152,4 +163,4 @@ var ChartTargetShape = /* @__PURE__ */ function(ChartTargetShape) {
 	return ChartTargetShape;
 }({});
 //#endregion
-export { BarChartNormalization, BarCorners, ChartCategoryLabelMode, ChartKind, ChartMarkState, ChartPalette, ChartTargetShape, ChartValueUnit, LineChartCurve };
+export { BarChartNormalization, BarCorners, ChartCategoryLabelMode, ChartKind, ChartLegendPlacement, ChartMarkState, ChartPalette, ChartTargetShape, ChartValueUnit, LineChartCurve };

package/dist/charts/useChartInteraction.d.ts

@@ -1,40 +1,30 @@
 import { ChartMarkState } from "./types";
 /**
- * Hover and pin interaction shared by every chart.
+ * Hover interaction shared by every chart.
  *
- * Two independent axes:
+ * Two independent axes, both hover-only:
  *
- * - **Category** — a numeric index along the plot. Hovering previews, clicking
- *   pins so the tooltip survives the pointer leaving.
- * - **Series** — a legend key. Hovering isolates that series, clicking pins the
- *   isolation.
+ * - **Category** — a numeric index along the plot. Hovering previews it: the
+ *   tooltip opens and everything outside the category recedes.
+ * - **Series** — a legend key. Hovering (or focusing) a legend entry isolates
+ *   that series.
  *
  * Both live here rather than one of them in the charts, so there is a single
  * `isEngaged` boolean. That matters more than it looks: `ChartPlotGroup` uses it
  * to cancel the mark restore delay, and a second hover source that didn't feed
  * it would sit through that delay before muting anything and feel broken.
  *
- * Escape or a click on the plot background clears both pins.
+ * Deliberately no click layer. Clicking used to pin the hover so it survived
+ * the pointer leaving, and it read as the chart getting stuck — the emphasis
+ * now always follows the pointer and releases with it.
  */
 interface UseChartInteractionOptions {
     /** Number of hoverable categories. A shrinking count clears stale indices. */
     categoryCount: number;
-    /** Legend keys currently rendered. A key that disappears clears a stale pin. */
+    /** Legend keys currently rendered. A key that disappears clears stale hover. */
     seriesKeys?: string[];
     /** Suppress all interaction — used while loading and when the tooltip is off. */
     disabled?: boolean;
-    /**
-     * Render every mark muted, whatever the two axes say.
-     *
-     * Distinct from {@link disabled}, which suppresses *input*. Loading suppresses
-     * *emphasis*: there is nothing yet worth drawing attention to. Folded in here
-     * rather than left to each mark, because the alternative is the same
-     * `isLoading ? MUTED : getMarkState(…)` ternary hand-copied at every mark —
-     * which is exactly how one of them came to be missing it.
-     */
-    isLoading?: boolean;
-    /** Notified when the pinned category changes. */
-    onPinnedChange?: (index: number | null) => void;
 }
 interface MarkStateArgs {
     /** Omit for marks that belong to no particular category, such as a line. */
@@ -43,11 +33,9 @@ interface MarkStateArgs {
     seriesKey?: string;
 }
 export interface ChartInteraction {
-    pinnedIndex: number | null;
-    /** Pinned wins over hovered — this is what the tooltip follows. */
+    /** The hovered category — what the tooltip follows. */
     activeIndex: number | null;
     hoveredSeriesKey: string | null;
-    pinnedSeriesKey: string | null;
     /** True while *either* axis is engaged; cancels the mark restore delay. */
     isEngaged: boolean;
     /**
@@ -55,22 +43,17 @@ export interface ChartInteraction {
      *
      * The grammar is inherited from the reference and is the opposite of the
      * obvious one: engaging something does not brighten it, it softens everything
-     * else. With something pinned, the unrelated marks recede further still, so
-     * the pinned mark and the one under the pointer stay legible against them.
+     * else.
      *
      * A mark has to survive *both* filters to stay active — the two axes
-     * intersect rather than override, so pinning a series and then hovering a
-     * category leaves only their overlap lit.
+     * intersect rather than override, so hovering a legend entry and a category
+     * at once leaves only their overlap lit.
      */
     getMarkState: (args: MarkStateArgs) => ChartMarkState;
     onCategoryEnter: (categoryIndex: number) => void;
     onCategoryLeave: () => void;
-    onCategoryClick: (categoryIndex: number) => void;
     onSeriesEnter: (seriesKey: string) => void;
     onSeriesLeave: () => void;
-    onSeriesClick: (seriesKey: string) => void;
-    /** Attach to the plot backdrop; clears both pins. */
-    onBackdropClick: () => void;
 }
-export declare function useChartInteraction({ categoryCount, seriesKeys, disabled, isLoading, onPinnedChange, }: UseChartInteractionOptions): ChartInteraction;
+export declare function useChartInteraction({ categoryCount, seriesKeys, disabled, }: UseChartInteractionOptions): ChartInteraction;
 export {};

package/dist/charts/useChartInteraction.js

@@ -1,43 +1,11 @@
 import { ChartMarkState } from "./types.js";
-import { match } from "ts-pattern";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 //#region src/charts/useChartInteraction.ts
-/** How far back a state sits, so two axes can be compared and the worse taken. */
-function severity(state) {
-	return match(state).with(ChartMarkState.ACTIVE, () => 0).with(ChartMarkState.MUTED, () => 1).with(ChartMarkState.FADED, () => 2).exhaustive();
-}
-function useChartInteraction({ categoryCount, seriesKeys, disabled = false, isLoading = false, onPinnedChange }) {
+function useChartInteraction({ categoryCount, seriesKeys, disabled = false }) {
 	const [hoveredIndex, setHoveredIndex] = useState(null);
-	const [pinnedIndex, setPinnedIndex] = useState(null);
 	const [hoveredSeriesKey, setHoveredSeriesKey] = useState(null);
-	const [pinnedSeriesKey, setPinnedSeriesKey] = useState(null);
-	const onPinnedChangeRef = useRef(onPinnedChange);
-	useEffect(() => {
-		onPinnedChangeRef.current = onPinnedChange;
-	});
 	const safeHovered = hoveredIndex !== null && hoveredIndex < categoryCount ? hoveredIndex : null;
-	const safePinned = pinnedIndex !== null && pinnedIndex < categoryCount ? pinnedIndex : null;
-	const isKnownSeries = (key) => key !== null && (seriesKeys === void 0 || seriesKeys.includes(key));
-	const safeHoveredSeries = isKnownSeries(hoveredSeriesKey) ? hoveredSeriesKey : null;
-	const safePinnedSeries = isKnownSeries(pinnedSeriesKey) ? pinnedSeriesKey : null;
-	const clearPins = useCallback(() => {
-		setPinnedIndex(null);
-		setPinnedSeriesKey(null);
-		onPinnedChangeRef.current?.(null);
-	}, []);
-	const hasPin = safePinned !== null || safePinnedSeries !== null;
-	useEffect(() => {
-		if (disabled || !hasPin) return;
-		const onKeyDown = (event) => {
-			if (event.key === "Escape") clearPins();
-		};
-		window.addEventListener("keydown", onKeyDown);
-		return () => window.removeEventListener("keydown", onKeyDown);
-	}, [
-		disabled,
-		hasPin,
-		clearPins
-	]);
+	const safeHoveredSeries = hoveredSeriesKey !== null && (seriesKeys === void 0 || seriesKeys.includes(hoveredSeriesKey)) ? hoveredSeriesKey : null;
 	const onCategoryEnter = useCallback((categoryIndex) => {
 		if (disabled) return;
 		setHoveredIndex(categoryIndex);
@@ -46,80 +14,32 @@ function useChartInteraction({ categoryCount, seriesKeys, disabled = false, isLo
 		if (disabled) return;
 		setHoveredIndex(null);
 	}, [disabled]);
-	const onCategoryClick = useCallback((categoryIndex) => {
-		if (disabled) return;
-		const next = pinnedIndex === categoryIndex ? null : categoryIndex;
-		setPinnedIndex(next);
-		onPinnedChangeRef.current?.(next);
-	}, [disabled, pinnedIndex]);
 	const onSeriesEnter = useCallback((seriesKey) => {
 		setHoveredSeriesKey(seriesKey);
 	}, []);
 	const onSeriesLeave = useCallback(() => {
 		setHoveredSeriesKey(null);
 	}, []);
-	const onSeriesClick = useCallback((seriesKey) => {
-		const next = pinnedSeriesKey === seriesKey ? null : seriesKey;
-		setPinnedSeriesKey(next);
-		if (next === null) setHoveredSeriesKey(null);
-	}, [pinnedSeriesKey]);
 	const getMarkState = useCallback(({ categoryIndex, seriesKey }) => {
-		if (isLoading) return ChartMarkState.MUTED;
-		const categoryState = (() => {
-			if (categoryIndex === void 0) return ChartMarkState.ACTIVE;
-			if (safePinned !== null) {
-				if (categoryIndex === safePinned) return ChartMarkState.ACTIVE;
-				if (categoryIndex === safeHovered) return ChartMarkState.MUTED;
-				return ChartMarkState.FADED;
-			}
-			if (safeHovered !== null) return categoryIndex === safeHovered ? ChartMarkState.ACTIVE : ChartMarkState.MUTED;
-			return ChartMarkState.ACTIVE;
-		})();
-		const seriesState = (() => {
-			if (seriesKey === void 0) return ChartMarkState.ACTIVE;
-			if (safePinnedSeries !== null) {
-				if (seriesKey === safePinnedSeries) return ChartMarkState.ACTIVE;
-				if (seriesKey === safeHoveredSeries) return ChartMarkState.MUTED;
-				return ChartMarkState.FADED;
-			}
-			if (safeHoveredSeries !== null) return seriesKey === safeHoveredSeries ? ChartMarkState.ACTIVE : ChartMarkState.MUTED;
-			return ChartMarkState.ACTIVE;
-		})();
-		return severity(categoryState) >= severity(seriesState) ? categoryState : seriesState;
-	}, [
-		isLoading,
-		safePinned,
-		safeHovered,
-		safePinnedSeries,
-		safeHoveredSeries
-	]);
+		return categoryIndex !== void 0 && safeHovered !== null && categoryIndex !== safeHovered || seriesKey !== void 0 && safeHoveredSeries !== null && seriesKey !== safeHoveredSeries ? ChartMarkState.MUTED : ChartMarkState.ACTIVE;
+	}, [safeHovered, safeHoveredSeries]);
 	return useMemo(() => ({
-		pinnedIndex: safePinned,
-		activeIndex: safePinned ?? safeHovered,
+		activeIndex: safeHovered,
 		hoveredSeriesKey: safeHoveredSeries,
-		pinnedSeriesKey: safePinnedSeries,
-		isEngaged: safePinned !== null || safeHovered !== null || safePinnedSeries !== null || safeHoveredSeries !== null,
+		isEngaged: safeHovered !== null || safeHoveredSeries !== null,
 		getMarkState,
 		onCategoryEnter,
 		onCategoryLeave,
-		onCategoryClick,
 		onSeriesEnter,
-		onSeriesLeave,
-		onSeriesClick,
-		onBackdropClick: clearPins
+		onSeriesLeave
 	}), [
 		safeHovered,
-		safePinned,
 		safeHoveredSeries,
-		safePinnedSeries,
 		getMarkState,
 		onCategoryEnter,
 		onCategoryLeave,
-		onCategoryClick,
 		onSeriesEnter,
-		onSeriesLeave,
-		onSeriesClick,
-		clearPins
+		onSeriesLeave
 	]);
 }
 //#endregion