@galaxy-io/dls 1.6.1 → 2.0.1

package/dist/charts/BarChart.js

@@ -1,82 +1,80 @@
-import { BarChartNormalization, ChartKind, ChartMarkState, ChartTargetShape } from "./types.js";
-import { useSeriesColorResolver } from "./useSeriesColorResolver.js";
-import { useChartInteraction } from "./useChartInteraction.js";
+import { Orientation } from "../theme/enums.js";
+import { ChartKind, ChartLegendPlacement, ChartMarkState, ChartTargetShape } from "./types.js";
+import { CHART_BAR_CSS, CHART_CURSOR_BAND_CSS, CHART_CURSOR_BAND_SELECTED_CSS, CHART_MARK_STATE_TO_CSS_MAP } from "./ChartPrimitives.js";
+import "./constants.js";
+import { ChartCategoryAxis, ChartValueAxis } from "./ChartAxis.js";
+import { resolveChartSeriesColor } from "./chartPalette.js";
+import { ChartLegendSwatch } from "./ChartLegend.js";
+import { ChartFrame } from "./ChartFrame.js";
+import { formatChartValue, resolveValueFormatter } from "./chartFormat.js";
 import { useCartesianChartLayout } from "./useCartesianChartLayout.js";
+import { useChartInteraction } from "./useChartInteraction.js";
+import { useSeriesColorResolver } from "./useSeriesColorResolver.js";
+import { buildBarChartGeometry, getBarValueDomain, isBarChartStacked, roundedRectPath } from "./barChartGeometry.js";
 import { getBarLegendItems } from "./barChartLegend.js";
-import { buildBarChartGeometry, getBarValueDomain, roundedRectPath } from "./barChartGeometry.js";
-import { ChartBarPath, ChartCursorBand } from "./ChartPrimitives.js";
-import ChartFrame from "./ChartFrame.js";
-import { ChartCategoryAxis, ChartValueAxis } from "./ChartAxis.js";
-import { useCallback, useMemo, useRef } from "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/BarChart.tsx
 /**
-* Bar chart with a three-level data model.
+* BarChart compares values across categories with vertical bars. Its data model is three levels:
+* category **group** → one **bar** per metric → stacked **components**. A chart is grouped
+* (several bars side by side), stacked (several components in a bar) or both, with no mode
+* switch; `normalization={PERCENT}` turns every bar into a 100% stack. Hover and keyboard work per
+* category: a quiet band marks the column, other columns step back, and the tooltip lists the
+* column's values. A click names the segment under the pointer (or the column); Enter names the
+* column. It joins `ChartGroupProvider` sync.
 *
-* Grouping and stacking are properties of the data rather than a mode: several
-* `bars` in a group render side by side, several `components` in a bar stack,
-* and a chart doing both at once needs no extra configuration.
+* The chart fills its parent (2:1 when the parent has no definite height): size it with a `Box`,
+* `Grid` track or flex item. Needs the optional peers `d3-scale` and `d3-shape`.
 */
-var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRatio, margin, normalization = BarChartNormalization.NONE, showCursor = true, minSegmentLength = 0, onSelect, selection, valueUnit, valueFormatter, labelFormatter, valueDomain, categoryLabelMode, categoryAxisTitle, valueAxisTitle, showGrid = true, showLegend = true, legendMaxItems, noTooltip = false, tooltipRenderer, tooltipMaxItems, isLoading = false, contentWhenEmpty, ariaLabel, ariaDescription }) => {
-	const containerRef = useRef(null);
+/** How bar values are scaled before drawing. Not a grouped/stacked switch: that comes from the data. */
+var BarChartNormalization = /* @__PURE__ */ function(BarChartNormalization) {
+	/** Plot raw values. The default. */
+	BarChartNormalization["NONE"] = "NONE";
+	/** Scale each bar's components to fill the axis: a 100% stacked chart. */
+	BarChartNormalization["PERCENT"] = "PERCENT";
+	return BarChartNormalization;
+}({});
+var DEFAULT_PLACEHOLDER = "No data available";
+/** The percent-normalized axis reads shares unless the app formats values itself (1.x rule). */
+var PERCENT_AXIS_FORMATTER = (value) => `${Math.round(value * 100)}%`;
+/** Tooltip rows of one bar, top segment first (positives outward-in, zeros, then negatives). */
+function visualOrder(components) {
+	const indexed = components.map((component, index) => ({
+		component,
+		index
+	}));
+	const rank = ({ component, index }) => component.value > 0 ? -index : component.value === 0 ? 0 : 1 + index;
+	return [...indexed].sort((a, b) => rank(a) - rank(b) || a.index - b.index).map(({ component }) => component);
+}
+function BarChartInner(props, ref) {
+	const { series, groups, normalization = "NONE", minSegmentLength = 0, valueFormatter, labelFormatter, valueDomain, axisLabels, 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 colors = useSeriesColorResolver(series);
-	/**
-	* Axis-only formatting for a percent-normalized chart.
-	*
-	* Normalization rescales the *axis* into 0–1, so the caller's formatter —
-	* which describes their real units — would label it `0.2`, `0.4`. Unless they
-	* asked for something specific, show shares as percentages.
-	*
-	* Deliberately not used for the tooltip. `stackComponents` normalizes each
-	* segment's extent but leaves its `value` raw, so a tooltip row still carries
-	* the real number: the axis reports the share, the tooltip reports what the
-	* share is made of. Running a row through this would multiply a raw 200 into
-	* `20000%`.
-	*/
-	const deriveAxisFormatter = useCallback((formatValue) => {
-		if (normalization !== BarChartNormalization.PERCENT) return formatValue;
-		if (valueFormatter || valueUnit) return formatValue;
-		return (value) => `${Math.round(value * 100)}%`;
-	}, [
-		normalization,
-		valueFormatter,
-		valueUnit
-	]);
-	const { dimensions, domain, valueTicks, formatValue, formatLabel, formatAxisValue } = useCartesianChartLayout({
-		containerRef,
+	const axisValueFormatter = normalization === "PERCENT" && valueFormatter === void 0 ? PERCENT_AXIS_FORMATTER : valueFormatter;
+	const formatValue = useMemo(() => resolveValueFormatter(valueFormatter), [valueFormatter]);
+	const { dimensions, domain, valueTicks, formatValue: formatAxisValue, formatLabel } = useCartesianChartLayout({
+		plotRef,
 		rawDomain: useMemo(() => getBarValueDomain(groups, normalization), [groups, normalization]),
 		valueDomain,
-		width,
-		height,
-		fillWidth,
-		fillHeight,
-		aspectRatio,
-		margin,
-		valueUnit,
-		valueFormatter,
+		valueFormatter: axisValueFormatter,
 		labelFormatter,
-		deriveAxisFormatter,
-		valueAxisTitle,
-		categoryAxisTitle
+		axisLabels
 	});
 	const { plotWidth, plotHeight } = dimensions;
-	/**
-	* True when any bar carries more than one component.
-	*
-	* This is what decides the colour grammar. In a stacked chart the segments
-	* are the thing being compared, so they take the palette and every stack
-	* repeats the same ramp; in an unstacked one the metrics are, so each bar
-	* takes its metric's colour. Applying the metric colour to a stack would
-	* paint every segment identically.
-	*/
-	const isStacked = useMemo(() => groups.some((group) => group.bars.some((bar) => bar.components.length > 1)), [groups]);
-	const resolveColor = useCallback(({ metric, componentIndex, isStacked: barIsStacked, explicit }) => barIsStacked ? colors.resolveByIndex(componentIndex, explicit) : colors.resolve(metric, explicit), [colors]);
+	/** Stacked charts color components (every stack repeats the ramp); others color metrics. */
+	const isStacked = useMemo(() => isBarChartStacked(groups), [groups]);
+	const resolveColor = useCallback(({ metric, componentIndex, explicit, hex }) => {
+		if (isStacked) return resolveChartSeriesColor(componentIndex, explicit, hex);
+		if (explicit !== void 0 || hex !== void 0) return resolveChartSeriesColor(colors.keys.indexOf(metric), explicit, hex);
+		return colors.resolve(metric);
+	}, [isStacked, colors]);
 	const geometry = useMemo(() => buildBarChartGeometry({
 		groups,
 		plotWidth,
 		plotHeight,
 		normalization,
-		isStacked,
 		domain,
 		resolveColor,
 		minSegmentLength
@@ -85,12 +83,11 @@ var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRa
 		plotWidth,
 		plotHeight,
 		normalization,
-		isStacked,
 		domain,
 		resolveColor,
 		minSegmentLength
 	]);
-	const isEmpty = groups.length === 0;
+	const isEmpty = groups.length === 0 || groups.every((group) => group.bars.length === 0);
 	const legendItems = useMemo(() => getBarLegendItems({
 		isStacked,
 		series,
@@ -105,26 +102,47 @@ var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRa
 	const legendKeys = useMemo(() => legendItems.map((item) => item.key), [legendItems]);
 	const categoryKeys = useMemo(() => groups.map((group) => group.label), [groups]);
 	const interaction = useChartInteraction({
-		categoryCount: geometry.bands.length,
+		categoryCount: groups.length,
 		seriesKeys: legendKeys,
 		categoryKeys,
 		categoryMuteState: ChartMarkState.DIMMED,
 		selection,
-		isDisabled: noTooltip || isLoading || isEmpty,
+		isFilterable,
+		defaultSelection,
+		onSelectionChange,
+		isDisabled: !(hasTooltip || onSelect || isFilterable) || isLoading || isEmpty,
 		isLoading
 	});
-	const activeBand = interaction.activeIndex === null ? null : geometry.bands[interaction.activeIndex] ?? null;
+	const seriesKeyOf = useCallback((rect) => isStacked ? rect.componentKey : rect.metric, [isStacked]);
 	const buildCategoryTooltip = useCallback((index) => {
 		const band = geometry.bands[index];
 		const group = groups[index];
 		if (!band || !group) return null;
-		const rows = geometry.rects.filter((rect) => rect.groupIndex === index).map((rect) => ({
-			key: rect.id,
-			label: rect.label,
-			value: rect.value,
-			formattedValue: formatValue(rect.value),
-			color: rect.color
-		}));
+		const isGrouped = group.bars.length > 1;
+		const rows = [];
+		group.bars.forEach((bar, barIndex) => {
+			const metricLabel = series[bar.metric]?.label ?? bar.metric;
+			const indexed = bar.components.map((component, componentIndex) => ({
+				component,
+				componentIndex,
+				value: component.value
+			}));
+			for (const { component, componentIndex } of visualOrder(indexed)) {
+				const label = !isStacked ? metricLabel : isGrouped ? `${metricLabel} · ${component.label}` : component.label;
+				rows.push({
+					key: `${index}:${barIndex}:${component.key}`,
+					label,
+					value: component.value,
+					formattedValue: formatChartValue(component.value, formatValue),
+					color: resolveColor({
+						metric: bar.metric,
+						componentIndex,
+						explicit: component.color,
+						hex: component.hex
+					}).color
+				});
+			}
+		});
 		return {
 			label: formatLabel(group.label),
 			rows,
@@ -132,13 +150,16 @@ var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRa
 			anchorY: band.anchorY
 		};
 	}, [
-		geometry,
+		geometry.bands,
 		groups,
+		series,
+		isStacked,
 		formatValue,
-		formatLabel
+		formatLabel,
+		resolveColor
 	]);
 	const categoryPositions = useMemo(() => geometry.bands.map((band) => band.x), [geometry.bands]);
-	const categoryStep = geometry.bands[0]?.width ?? 0;
+	const categoryStep = geometry.step;
 	const categoryTargets = useMemo(() => geometry.bands.map((band) => ({
 		key: String(band.groupIndex),
 		shape: ChartTargetShape.RECT,
@@ -147,15 +168,6 @@ var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRa
 		width: band.width,
 		height: band.height
 	})), [geometry.bands]);
-	/**
-	* One clickable target per drawn rectangle, over the bands.
-	*
-	* The rects already carry everything a click needs, so the target is exactly
-	* the mark — no inflation to make a thin segment easier to hit. Growing one
-	* would overlap the neighbour whose edge the geometry snapped to the same
-	* pixel, and a segment too small to hit still lands on the band beneath and
-	* selects its category, which is the honest answer for a sliver.
-	*/
 	const markTargets = useMemo(() => geometry.rects.map((rect) => ({
 		key: rect.id,
 		categoryIndex: rect.groupIndex,
@@ -165,97 +177,121 @@ var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRa
 		width: rect.width,
 		height: rect.height
 	})), [geometry.rects]);
-	const handleCategorySelect = useCallback((index) => {
+	const { toggleSelection } = interaction;
+	const handleCategorySelect = useCallback((index, isAdditive = false) => {
 		const group = groups[index];
-		if (!group || !onSelect) return;
-		onSelect({
+		if (!group) return;
+		onSelect?.({
 			categoryIndex: index,
 			categoryKey: group.label
 		});
-	}, [groups, onSelect]);
-	const handleMarkSelect = useCallback((index) => {
+		toggleSelection({ categoryKey: group.label }, isAdditive);
+	}, [
+		groups,
+		onSelect,
+		toggleSelection
+	]);
+	const handleMarkSelect = useCallback((index, isAdditive = false) => {
 		const rect = geometry.rects[index];
-		if (!rect || !onSelect) return;
-		onSelect({
+		const group = groups[rect?.groupIndex ?? -1];
+		if (!rect || !group) return;
+		const seriesKey = seriesKeyOf(rect);
+		onSelect?.({
 			categoryIndex: rect.groupIndex,
-			categoryKey: groups[rect.groupIndex]?.label ?? rect.metric,
-			seriesKey: isStacked ? rect.componentKey : rect.metric,
+			categoryKey: group.label,
+			seriesKey,
 			value: rect.value
 		});
+		toggleSelection({
+			categoryKey: group.label,
+			seriesKey
+		}, isAdditive);
 	}, [
 		geometry.rects,
 		groups,
-		isStacked,
-		onSelect
+		onSelect,
+		seriesKeyOf,
+		toggleSelection
 	]);
+	const activeBand = interaction.activeIndex === null ? void 0 : geometry.bands[interaction.activeIndex];
 	return /* @__PURE__ */ jsxs(ChartFrame, {
-		containerRef,
+		rootRef: ref,
+		plotRef,
+		id,
+		className,
+		style,
+		rest,
 		dimensions,
-		fillWidth,
-		fillHeight,
 		interaction,
 		kind: ChartKind.BAR,
 		categoryCount: groups.length,
 		ariaLabel,
-		ariaDescription,
+		aspectRatio: 2,
 		axes: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ChartValueAxis, {
 			ticks: valueTicks,
 			scale: geometry.valueScale,
 			plotWidth,
 			plotHeight,
-			marginLeft: dimensions.margin.left,
+			insetLeft: dimensions.insets.left,
 			formatter: formatAxisValue,
-			showGrid,
-			title: valueAxisTitle
+			title: axisLabels?.value
 		}), /* @__PURE__ */ jsx(ChartCategoryAxis, {
 			labels: categoryKeys,
 			positions: categoryPositions,
 			step: categoryStep,
 			plotWidth,
 			plotHeight,
+			orientation: Orientation.HORIZONTAL,
+			insetLeft: dimensions.insets.left,
 			formatter: formatLabel,
-			mode: categoryLabelMode,
-			title: categoryAxisTitle
+			title: axisLabels?.category
 		})] }),
-		noTooltip,
+		hasTooltip,
 		buildCategoryTooltip,
-		tooltipRenderer,
-		tooltipMaxItems,
+		renderTooltip,
 		categoryTargets,
 		markTargets,
-		onCategorySelect: onSelect && handleCategorySelect,
-		onMarkSelect: onSelect && handleMarkSelect,
+		onCategorySelect: onSelect || isFilterable ? handleCategorySelect : void 0,
+		onMarkSelect: onSelect || isFilterable ? handleMarkSelect : void 0,
 		anchorHalfWidth: categoryStep / 2,
 		isEmpty,
 		isLoading,
-		contentWhenEmpty,
-		showLegend,
+		placeholder,
+		hasLegend,
+		formatCategoryKey: formatLabel,
 		legendItems,
-		legendMaxItems,
+		legendPlacement: ChartLegendPlacement.BOTTOM,
+		legendSwatch: ChartLegendSwatch.SQUARE,
+		tooltipSwatch: ChartLegendSwatch.SQUARE,
 		children: [
-			geometry.bands.filter((band) => interaction.selectedCategoryIndices.has(band.groupIndex)).map((band) => /* @__PURE__ */ jsx(ChartCursorBand, {
+			geometry.bands.filter((band) => interaction.selectedCategoryIndices.has(band.groupIndex)).map((band) => /* @__PURE__ */ jsx("rect", {
 				x: band.x,
 				y: band.y,
 				width: band.width,
 				height: band.height,
-				"data-selected": "true"
+				className: cx(CHART_CURSOR_BAND_CSS, CHART_CURSOR_BAND_SELECTED_CSS)
 			}, `selected:${band.groupIndex}`)),
-			showCursor && activeBand && /* @__PURE__ */ jsx(ChartCursorBand, {
+			activeBand && /* @__PURE__ */ jsx("rect", {
 				x: activeBand.x,
 				y: activeBand.y,
 				width: activeBand.width,
-				height: activeBand.height
+				height: activeBand.height,
+				className: "gx-ChartPrimitives-CHART_CURSOR_BAND_CSS-c1iaray"
 			}),
-			geometry.rects.map((rect) => /* @__PURE__ */ jsx(ChartBarPath, {
+			geometry.rects.map((rect) => /* @__PURE__ */ jsx("path", {
 				d: roundedRectPath(rect.x, rect.y, rect.width, rect.height, rect.radius, rect.corners),
-				fill: rect.color,
-				"data-state": interaction.getMarkState({
+				className: cx(CHART_BAR_CSS, CHART_MARK_STATE_TO_CSS_MAP[interaction.getMarkState({
 					categoryIndex: rect.groupIndex,
-					seriesKey: isStacked ? rect.componentKey : rect.metric
-				})
+					seriesKey: seriesKeyOf(rect)
+				})]),
+				style: { "--gx-chart-mark-color": rect.color.color }
 			}, rect.id))
 		]
 	});
-};
+}
+var BarChartForwarded = forwardRef(BarChartInner);
+BarChartForwarded.displayName = "BarChart";
+/** Vertical bars over a categorical x-axis: grouped, stacked, or both. */
+var BarChart = BarChartForwarded;
 //#endregion
-export { BarChart as default };
+export { BarChartNormalization, BarChart as default };

package/dist/charts/ChartAxis.d.ts

@@ -1,53 +1,48 @@
-import { ChartCategoryLabelMode } from "./types";
-import type { ChartLabelFormatter, ChartValueFormatter } from "./types";
-/**
- * Axes for the cartesian charts.
- *
- * Neither axis draws a domain line or tick marks — the grid lines carry the
- * structure, and the one at zero is what makes bars read as resting on a
- * baseline rather than floating.
- */
-interface ChartValueAxisProps {
+import { Orientation } from "../theme/enums.js";
+import type { ChartLabelFormatter, ChartValueFormatter } from "./types.js";
+/** @internal Props of `ChartValueAxis`. */
+export interface ChartValueAxisProps {
+    /** Tick values. */
     ticks: number[];
-    /** Maps a tick value to its y position in plot coordinates. */
+    /** Tick value → y in plot coordinates. */
     scale: (value: number) => number;
+    /** Plot width (grid line length). */
     plotWidth: number;
-    /**
-     * The chart's left margin. The label box is this minus the tick gap, so the
-     * axis follows the margin instead of hardcoding an offset — a custom margin
-     * used to push these labels outside the viewport.
-     */
-    marginLeft: number;
-    /** Needed to centre a rotated axis title along the gutter. */
+    /** Plot height (centers the rotated title). */
     plotHeight: number;
+    /** The left inset; the label box is this less the title band and the tick gap. */
+    insetLeft: number;
+    /** Tick label formatter. */
     formatter: ChartValueFormatter;
-    showGrid?: boolean;
-    /**
-     * Rotated title in the left gutter.
-     *
-     * Space for it must already be reserved by `addAxisTitleSpace`, since the
-     * margin is resolved before this renders.
-     */
-    title?: string;
+    /** Rotated title in the left gutter (`axisLabels.value`). */
+    title?: string | undefined;
 }
-export declare const ChartValueAxis: ({ ticks, scale, plotWidth, plotHeight, marginLeft, formatter, showGrid, title, }: ChartValueAxisProps) => import("react").JSX.Element;
-interface ChartCategoryAxisProps {
+/** @internal Grid hairlines at every tick, tick labels, and the value axis title. */
+export declare function ChartValueAxis({ ticks, scale, plotWidth, plotHeight, insetLeft, formatter, title, }: ChartValueAxisProps): import("react").JSX.Element;
+/** @internal Props of `ChartCategoryAxis`. */
+export interface ChartCategoryAxisProps {
+    /** Raw category labels. */
     labels: string[];
-    /** Left edge of each category's slot, in plot coordinates. */
+    /** Leading edge of each category's slot (left for `HORIZONTAL`, top for `VERTICAL`), plot coordinates. */
     positions: number[];
-    /** Width of one category slot. */
+    /** Size of one category slot along the axis. */
     step: number;
-    /** Needed to span an axis title across the full plot. */
+    /** Plot width. */
     plotWidth: number;
+    /** Plot height. */
     plotHeight: number;
+    /** `HORIZONTAL` under the plot; `VERTICAL` beside it (Heatmap rows). */
+    orientation: Orientation;
+    /** The left inset: the `VERTICAL` label gutter; for `HORIZONTAL`, how far an end label may run left of the plot. */
+    insetLeft?: number;
+    /** Label formatter. */
     formatter: ChartLabelFormatter;
-    mode?: ChartCategoryLabelMode;
-    /**
-     * Title below the tick labels.
-     *
-     * Space for it must already be reserved by `addAxisTitleSpace`.
-     */
-    title?: string;
+    /** Category axis title (`axisLabels.category`). */
+    title?: string | undefined;
 }
-export declare const ChartCategoryAxis: ({ labels, positions, step, plotWidth, plotHeight, formatter, mode, title, }: ChartCategoryAxisProps) => import("react").JSX.Element;
-export {};
+/**
+ * @internal Category labels with `AUTO` thinning: every label that fits, otherwise every nth
+ * (a skipped label is still inferable from its neighbours; a clipped one carries nothing). A
+ * rendered label may spread over the run it stands for.
+ */
+export declare function ChartCategoryAxis({ labels, positions, step, plotWidth, plotHeight, orientation, insetLeft, formatter, title, }: ChartCategoryAxisProps): import("react").JSX.Element;