@galaxy-io/dls 1.2.7 → 1.3.1

package/dist/charts/BarChart.js

@@ -1,264 +1,194 @@
-import { useGalaxyTheme, withTheme } from "../theme/GalaxyTheme.js";
-import Text, { TextSize, TextWeight } from "../text/Text.js";
-import FlexWrapper, { AlignItems, FlexDirection, JustifyContent } from "../containers/FlexWrapper.js";
-import { useElementWidth } from "../hooks/useElementWidth.js";
-import Wrapper from "../containers/Wrapper.js";
-import { DEFAULT_BAR_PADDING_INNER, DEFAULT_BAR_PADDING_OUTER, getChartPalette } from "./constants.js";
-import { buildBandScale, buildLinearScale, defaultLabelFormatter, defaultValueFormatter, getGroupedMax, getPlotDimensions, getStackedMax, resolveMargin, resolveSeriesColor, roundedTopRectPath } from "./utils.js";
-import ChartLegend from "./ChartLegend.js";
-import ChartTooltip from "./ChartTooltip.js";
-import { XAxis, YAxis } from "./ChartAxis.js";
-/* empty css                   */
-import { styled } from "@linaria/react";
-import { useCallback, useMemo, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { BarChartNormalization, ChartKind, ChartTargetShape } from "./types.js";
+import { useSeriesColorResolver } from "./useSeriesColorResolver.js";
+import { useChartInteraction } from "./useChartInteraction.js";
+import { useCartesianChartLayout } from "./useCartesianChartLayout.js";
+import { getBarLegendItems } from "./barChartLegend.js";
+import { buildBarChartGeometry, getBarValueDomain, roundedRectPath } from "./barChartGeometry.js";
+import { ChartBarPath } from "./ChartPrimitives.js";
+import ChartFrame from "./ChartFrame.js";
+import { ChartCategoryAxis, ChartValueAxis } from "./ChartAxis.js";
+import { useCallback, useMemo, useRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/charts/BarChart.tsx
-var BarChartMode = /* @__PURE__ */ function(BarChartMode) {
-	BarChartMode["GROUPED"] = "GROUPED";
-	BarChartMode["STACKED"] = "STACKED";
-	return BarChartMode;
-}({});
-var _exp = () => ({ $fillWidth }) => $fillWidth ? "flex" : "inline-flex";
-var _exp2 = () => ({ $fillWidth }) => $fillWidth ? "100%" : "auto";
-var ChartWrapper = withTheme(/*#__PURE__*/ styled("div")({
-	name: "ChartWrapper",
-	class: "c16zjhoz",
-	propsAsIs: false,
-	vars: {
-		"c16zjhoz-0": [_exp()],
-		"c16zjhoz-1": [_exp2()]
-	}
-}));
-var BarChart = ({ data, series, width, height, margin: marginOverride, fillWidth = false, aspectRatio, mode = "STACKED", barRadius = 4, barPaddingInner = DEFAULT_BAR_PADDING_INNER, barPaddingOuter = DEFAULT_BAR_PADDING_OUTER, valueFormatter = defaultValueFormatter, labelFormatter = defaultLabelFormatter, tooltipRenderer, noTooltip = false, showLegend = true, showValues = false, showGrid = true, ariaLabel }) => {
-	const { theme } = useGalaxyTheme();
+/**
+* Bar chart with a three-level data model.
+*
+* 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.
+*/
+var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRatio, margin, normalization = BarChartNormalization.NONE, valueUnit, valueFormatter, labelFormatter, valueDomain, categoryLabelMode, categoryAxisTitle, valueAxisTitle, showGrid = true, showLegend = true, noTooltip = false, tooltipRenderer, isLoading = false, contentWhenEmpty, ariaLabel, ariaDescription, onPinnedChange }) => {
 	const containerRef = useRef(null);
-	const svgRef = useRef(null);
-	const [tooltip, setTooltip] = useState(null);
-	const [hoveredDatumIndex, setHoveredDatumIndex] = useState(null);
-	const measuredWidth = useElementWidth(containerRef);
-	const resolvedWidth = fillWidth ? measuredWidth ?? 0 : width ?? 0;
-	const resolvedHeight = aspectRatio ? resolvedWidth / aspectRatio : height ?? 0;
-	const palette = useMemo(() => getChartPalette(theme), [theme]);
-	const margin = useMemo(() => resolveMargin(marginOverride), [marginOverride]);
-	const { plotWidth, plotHeight } = useMemo(() => getPlotDimensions(resolvedWidth, resolvedHeight, margin), [
-		resolvedWidth,
-		resolvedHeight,
-		margin
+	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 seriesKeys = useMemo(() => series.map((s) => s.key), [series]);
-	const labels = useMemo(() => data.map((d) => d.label), [data]);
-	const xScale = useMemo(() => buildBandScale(labels, [0, plotWidth], barPaddingInner, barPaddingOuter), [
-		labels,
+	const { dimensions, domain, valueTicks, formatValue, formatLabel, formatAxisValue } = useCartesianChartLayout({
+		containerRef,
+		rawDomain: useMemo(() => getBarValueDomain(groups, normalization), [groups, normalization]),
+		valueDomain,
+		width,
+		height,
+		fillWidth,
+		fillHeight,
+		aspectRatio,
+		margin,
+		valueUnit,
+		valueFormatter,
+		labelFormatter,
+		deriveAxisFormatter,
+		valueAxisTitle,
+		categoryAxisTitle
+	});
+	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]);
+	const geometry = useMemo(() => buildBarChartGeometry({
+		groups,
 		plotWidth,
-		barPaddingInner,
-		barPaddingOuter
-	]);
-	const yMax = useMemo(() => mode === "STACKED" ? getStackedMax(data, seriesKeys) : getGroupedMax(data, seriesKeys), [
-		data,
-		seriesKeys,
-		mode
-	]);
-	const yScale = useMemo(() => buildLinearScale(yMax, [plotHeight, 0]), [yMax, plotHeight]);
-	const innerScale = useMemo(() => {
-		if (mode !== "GROUPED") return null;
-		return buildBandScale(seriesKeys, [0, xScale.bandwidth()], .05, 0);
-	}, [
-		mode,
-		seriesKeys,
-		xScale
+		plotHeight,
+		normalization,
+		isStacked,
+		domain,
+		resolveColor
+	}), [
+		groups,
+		plotWidth,
+		plotHeight,
+		normalization,
+		isStacked,
+		domain,
+		resolveColor
 	]);
-	const handleBarMouseEnter = useCallback((datumIndex, x, y) => {
-		const datum = data[datumIndex];
-		if (!datum) return;
-		setHoveredDatumIndex(datumIndex);
-		setTooltip({
-			label: datum.label,
-			items: series.map((s, i) => ({
-				seriesKey: s.key,
-				seriesName: s.name,
-				value: datum.values[s.key] ?? 0,
-				color: resolveSeriesColor(s, i, palette)
-			})),
-			x: x + margin.left,
-			y: y + margin.top
-		});
-	}, [
-		data,
+	const isEmpty = groups.length === 0;
+	const legendItems = useMemo(() => getBarLegendItems({
+		isStacked,
+		series,
+		groups,
+		colors
+	}), [
+		isStacked,
 		series,
-		palette,
-		margin
+		groups,
+		colors
 	]);
-	const handleBarMouseLeave = useCallback(() => {
-		setHoveredDatumIndex(null);
-		setTooltip(null);
-	}, []);
-	const handleBarFocus = useCallback((datumIndex, x, y) => {
-		handleBarMouseEnter(datumIndex, x, y);
-	}, [handleBarMouseEnter]);
-	const handleBarBlur = useCallback(() => {
-		handleBarMouseLeave();
-	}, [handleBarMouseLeave]);
-	if (resolvedWidth === 0 || resolvedHeight === 0) return /* @__PURE__ */ jsx(ChartWrapper, {
-		ref: containerRef,
-		$fillWidth: fillWidth
+	const legendKeys = useMemo(() => legendItems.map((item) => item.key), [legendItems]);
+	const interaction = useChartInteraction({
+		categoryCount: geometry.bands.length,
+		seriesKeys: legendKeys,
+		disabled: noTooltip || isLoading || isEmpty,
+		isLoading,
+		onPinnedChange
 	});
-	const renderStackedBars = () => {
-		return data.map((datum, datumIndex) => {
-			const x = xScale(datum.label) ?? 0;
-			const bandWidth = xScale.bandwidth();
-			let cumulativeY = plotHeight;
-			return /* @__PURE__ */ jsx("g", { children: series.map((s, seriesIndex) => {
-				const value = datum.values[s.key] ?? 0;
-				if (value === 0) return null;
-				const barHeight = plotHeight - yScale(value);
-				const barY = cumulativeY - barHeight;
-				cumulativeY = barY;
-				const color = resolveSeriesColor(s, seriesIndex, palette);
-				const isTopSegment = seriesIndex === series.length - 1 || series.slice(seriesIndex + 1).every((next) => (datum.values[next.key] ?? 0) === 0);
-				const isDimmed = hoveredDatumIndex !== null && hoveredDatumIndex !== datumIndex;
-				return /* @__PURE__ */ jsxs("g", { children: [isTopSegment ? /* @__PURE__ */ jsx("path", {
-					d: roundedTopRectPath(x, barY, bandWidth, barHeight, barRadius),
-					fill: color,
-					opacity: isDimmed ? .3 : 1,
-					style: { transition: `opacity 150ms ease-in-out` },
-					onMouseEnter: () => handleBarMouseEnter(datumIndex, x + bandWidth / 2, barY),
-					onMouseLeave: handleBarMouseLeave,
-					onFocus: () => handleBarFocus(datumIndex, x + bandWidth / 2, barY),
-					onBlur: handleBarBlur,
-					tabIndex: 0,
-					role: "graphics-symbol",
-					"aria-roledescription": "bar",
-					"aria-label": `${s.name} for ${datum.label}: ${valueFormatter(value)}`
-				}) : /* @__PURE__ */ jsx("rect", {
-					x,
-					y: barY,
-					width: bandWidth,
-					height: barHeight,
-					fill: color,
-					opacity: isDimmed ? .3 : 1,
-					style: { transition: `opacity 150ms ease-in-out` },
-					onMouseEnter: () => handleBarMouseEnter(datumIndex, x + bandWidth / 2, barY),
-					onMouseLeave: handleBarMouseLeave,
-					onFocus: () => handleBarFocus(datumIndex, x + bandWidth / 2, barY),
-					onBlur: handleBarBlur,
-					tabIndex: 0,
-					role: "graphics-symbol",
-					"aria-roledescription": "bar",
-					"aria-label": `${s.name} for ${datum.label}: ${valueFormatter(value)}`
-				}), showValues && isTopSegment && /* @__PURE__ */ jsx("foreignObject", {
-					x,
-					y: barY - 20,
-					width: bandWidth,
-					height: 20,
-					children: /* @__PURE__ */ jsx(FlexWrapper, {
-						justifyContent: JustifyContent.CENTER,
-						alignItems: AlignItems.END,
-						fillWidth: true,
-						fillHeight: true,
-						children: /* @__PURE__ */ jsx(Text, {
-							size: TextSize.CAPTION,
-							weight: TextWeight.MEDIUM,
-							children: valueFormatter(value)
-						})
-					})
-				})] }, s.key);
-			}) }, datum.label);
-		});
-	};
-	const renderGroupedBars = () => {
-		if (!innerScale) return null;
-		return data.map((datum, datumIndex) => {
-			const groupX = xScale(datum.label) ?? 0;
-			const isDimmed = hoveredDatumIndex !== null && hoveredDatumIndex !== datumIndex;
-			return /* @__PURE__ */ jsx("g", {
-				transform: `translate(${groupX}, 0)`,
-				children: series.map((s, seriesIndex) => {
-					const value = datum.values[s.key] ?? 0;
-					if (value === 0) return null;
-					const barX = innerScale(s.key) ?? 0;
-					const barWidth = innerScale.bandwidth();
-					const barHeight = plotHeight - yScale(value);
-					const barY = yScale(value);
-					const color = resolveSeriesColor(s, seriesIndex, palette);
-					return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("path", {
-						d: roundedTopRectPath(barX, barY, barWidth, barHeight, barRadius),
-						fill: color,
-						opacity: isDimmed ? .3 : 1,
-						style: { transition: `opacity 150ms ease-in-out` },
-						onMouseEnter: () => handleBarMouseEnter(datumIndex, groupX + barX + barWidth / 2, barY),
-						onMouseLeave: handleBarMouseLeave,
-						onFocus: () => handleBarFocus(datumIndex, groupX + barX + barWidth / 2, barY),
-						onBlur: handleBarBlur,
-						tabIndex: 0,
-						role: "graphics-symbol",
-						"aria-roledescription": "bar",
-						"aria-label": `${s.name} for ${datum.label}: ${valueFormatter(value)}`
-					}), showValues && /* @__PURE__ */ jsx("foreignObject", {
-						x: barX,
-						y: barY - 20,
-						width: barWidth,
-						height: 20,
-						children: /* @__PURE__ */ jsx(FlexWrapper, {
-							justifyContent: JustifyContent.CENTER,
-							alignItems: AlignItems.END,
-							fillWidth: true,
-							fillHeight: true,
-							children: /* @__PURE__ */ jsx(Text, {
-								size: TextSize.CAPTION,
-								weight: TextWeight.MEDIUM,
-								children: valueFormatter(value)
-							})
-						})
-					})] }, s.key);
-				})
-			}, datum.label);
-		});
-	};
-	const defaultAriaLabel = `Bar chart with ${data.length} categories and ${series.length} series`;
-	return /* @__PURE__ */ jsxs(ChartWrapper, {
-		ref: containerRef,
-		$fillWidth: fillWidth,
-		children: [/* @__PURE__ */ jsxs(Wrapper, {
-			position: "relative",
-			children: [/* @__PURE__ */ jsx("svg", {
-				ref: svgRef,
-				width: resolvedWidth,
-				height: resolvedHeight,
-				role: "img",
-				"aria-label": ariaLabel ?? defaultAriaLabel,
-				children: /* @__PURE__ */ jsxs("g", {
-					transform: `translate(${margin.left}, ${margin.top})`,
-					children: [
-						/* @__PURE__ */ jsx(YAxis, {
-							scale: yScale,
-							transform: "translate(0, 0)",
-							plotWidth,
-							formatter: valueFormatter,
-							showGrid,
-							theme
-						}),
-						/* @__PURE__ */ jsx(XAxis, {
-							scale: xScale,
-							transform: `translate(0, ${plotHeight})`,
-							plotWidth,
-							formatter: labelFormatter
-						}),
-						mode === "STACKED" ? renderStackedBars() : renderGroupedBars()
-					]
-				})
-			}), !noTooltip && (tooltipRenderer ? tooltip && tooltipRenderer(tooltip) : /* @__PURE__ */ jsx(ChartTooltip, {
-				data: tooltip,
-				valueFormatter
-			}))]
-		}), showLegend && /* @__PURE__ */ jsxs(FlexWrapper, {
-			direction: FlexDirection.ROW,
-			gap: 0,
-			children: [/* @__PURE__ */ jsx(Wrapper, { minWidth: margin.left }), /* @__PURE__ */ jsx(ChartLegend, {
-				series,
-				palette
-			})]
-		})]
+	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
+		}));
+		return {
+			label: formatLabel(group.label),
+			rows,
+			anchorX: band.anchorX,
+			anchorY: band.anchorY
+		};
+	}, [
+		geometry,
+		groups,
+		formatValue,
+		formatLabel
+	]);
+	const categoryPositions = useMemo(() => geometry.bands.map((band) => band.x), [geometry.bands]);
+	const categoryStep = geometry.bands[0]?.width ?? 0;
+	const categoryTargets = useMemo(() => geometry.bands.map((band) => ({
+		key: String(band.groupIndex),
+		shape: ChartTargetShape.RECT,
+		x: band.x,
+		y: band.y,
+		width: band.width,
+		height: band.height
+	})), [geometry.bands]);
+	return /* @__PURE__ */ jsx(ChartFrame, {
+		containerRef,
+		dimensions,
+		fillWidth,
+		fillHeight,
+		interaction,
+		kind: ChartKind.BAR,
+		categoryCount: groups.length,
+		ariaLabel,
+		ariaDescription,
+		axes: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ChartValueAxis, {
+			ticks: valueTicks,
+			scale: geometry.valueScale,
+			plotWidth,
+			plotHeight,
+			marginLeft: dimensions.margin.left,
+			formatter: formatAxisValue,
+			showGrid,
+			title: valueAxisTitle
+		}), /* @__PURE__ */ jsx(ChartCategoryAxis, {
+			labels: groups.map((group) => group.label),
+			positions: categoryPositions,
+			step: categoryStep,
+			plotWidth,
+			plotHeight,
+			formatter: formatLabel,
+			mode: categoryLabelMode,
+			title: categoryAxisTitle
+		})] }),
+		noTooltip,
+		buildCategoryTooltip,
+		tooltipRenderer,
+		categoryTargets,
+		anchorHalfWidth: categoryStep / 2,
+		isEmpty,
+		isLoading,
+		contentWhenEmpty,
+		showLegend,
+		legendItems,
+		children: geometry.rects.map((rect) => /* @__PURE__ */ jsx(ChartBarPath, {
+			d: roundedRectPath(rect.x, rect.y, rect.width, rect.height, rect.radius, rect.corners),
+			fill: rect.color,
+			"data-state": interaction.getMarkState({
+				categoryIndex: rect.groupIndex,
+				seriesKey: isStacked ? rect.componentKey : rect.metric
+			})
+		}, rect.id))
 	});
 };
 //#endregion
-export { BarChartMode, BarChart as default };
+export { BarChart as default };

package/dist/charts/ChartAxis.d.ts

@@ -1,28 +1,53 @@
-import type { ScaleBand, ScaleLinear, ScalePoint } from "d3-scale";
-import type { Theme } from "../theme/types";
+import { ChartCategoryLabelMode } from "./types";
 import type { ChartLabelFormatter, ChartValueFormatter } from "./types";
-interface XAxisProps {
-    scale: ScaleBand<string>;
-    transform: string;
+/**
+ * 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 {
+    ticks: number[];
+    /** Maps a tick value to its y position in plot coordinates. */
+    scale: (value: number) => number;
     plotWidth: number;
-    formatter?: ChartLabelFormatter;
-}
-export declare const XAxis: ({ scale, transform, formatter }: XAxisProps) => import("react").JSX.Element;
-interface XAxisPointProps {
-    scale: ScalePoint<string>;
-    transform: string;
-    plotWidth: number;
-    formatter?: ChartLabelFormatter;
+    /**
+     * 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. */
+    plotHeight: number;
+    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;
 }
-export declare const XAxisPoint: ({ scale, transform, formatter, }: XAxisPointProps) => import("react").JSX.Element;
-interface YAxisProps {
-    scale: ScaleLinear<number, number>;
-    transform: string;
+export declare const ChartValueAxis: ({ ticks, scale, plotWidth, plotHeight, marginLeft, formatter, showGrid, title, }: ChartValueAxisProps) => import("react").JSX.Element;
+interface ChartCategoryAxisProps {
+    labels: string[];
+    /** Left edge of each category's slot, in plot coordinates. */
+    positions: number[];
+    /** Width of one category slot. */
+    step: number;
+    /** Needed to span an axis title across the full plot. */
     plotWidth: number;
-    tickCount?: number;
-    formatter?: ChartValueFormatter;
-    showGrid?: boolean;
-    theme: Theme;
+    plotHeight: number;
+    formatter: ChartLabelFormatter;
+    mode?: ChartCategoryLabelMode;
+    /**
+     * Title below the tick labels.
+     *
+     * Space for it must already be reserved by `addAxisTitleSpace`.
+     */
+    title?: string;
 }
-export declare const YAxis: ({ scale, transform, plotWidth, tickCount, formatter, showGrid, theme, }: YAxisProps) => import("react").JSX.Element;
+export declare const ChartCategoryAxis: ({ labels, positions, step, plotWidth, plotHeight, formatter, mode, title, }: ChartCategoryAxisProps) => import("react").JSX.Element;
 export {};