@galaxy-io/dls 1.5.14 → 1.5.15

package/dist/charts/BarChart.d.ts

@@ -16,6 +16,31 @@ export type BarChartProps<TMetric extends string, TComponentKey extends string =
     /** Tint the active category's full band, marking the hover position even
      * where there is no data. @default true */
     showCursor?: boolean;
+    /**
+     * Floor, in px, for how short a *stack segment* may render — so a series
+     * that is a rounding error next to its neighbours still leaves a visible
+     * mark instead of disappearing. `0`, the default, draws segments at their
+     * true size.
+     *
+     * Opt-in because it is a lie, and a small one is worth being deliberate
+     * about: the pixels a sliver gains are taken from the other segments in the
+     * same stack, in proportion to how much slack each has. The stack's total
+     * height, its cap position and every value in the tooltip stay exactly
+     * right — only the split between segments shifts, by at most a couple of
+     * pixels per rescued sliver. Reach for it when presence/absence is the
+     * thing being read (an error series, a small cohort); leave it off when the
+     * chart is being read for proportion.
+     *
+     * Ignored on unstacked bars, which already have a 2px floor — there is no
+     * neighbour to take from, so it costs nothing there. Ignored, too, when a
+     * stack is so crowded that honouring it would pin every segment to the
+     * minimum: at that point the bar would stop describing its data, and the
+     * chart is better off saying so. Fold the tail into an "Other" component
+     * instead.
+     *
+     * @default 0
+     */
+    minSegmentLength?: number;
     /**
      * Fires when a bar segment or a category is clicked. Supplying it is what
      * makes the plot clickable.
@@ -48,5 +73,5 @@ export type BarChartProps<TMetric extends string, TComponentKey extends string =
  * `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.
  */
-declare const BarChart: <TMetric extends string, TComponentKey extends string = string>({ series, groups, width, height, fillWidth, fillHeight, aspectRatio, margin, normalization, showCursor, onSelect, selection, valueUnit, valueFormatter, labelFormatter, valueDomain, categoryLabelMode, categoryAxisTitle, valueAxisTitle, showGrid, showLegend, legendMaxItems, noTooltip, tooltipRenderer, tooltipMaxItems, isLoading, contentWhenEmpty, ariaLabel, ariaDescription, }: BarChartProps<TMetric, TComponentKey>) => import("react").JSX.Element;
+declare const BarChart: <TMetric extends string, TComponentKey extends string = string>({ series, groups, width, height, fillWidth, fillHeight, aspectRatio, margin, normalization, showCursor, minSegmentLength, onSelect, selection, valueUnit, valueFormatter, labelFormatter, valueDomain, categoryLabelMode, categoryAxisTitle, valueAxisTitle, showGrid, showLegend, legendMaxItems, noTooltip, tooltipRenderer, tooltipMaxItems, isLoading, contentWhenEmpty, ariaLabel, ariaDescription, }: BarChartProps<TMetric, TComponentKey>) => import("react").JSX.Element;
 export default BarChart;

package/dist/charts/BarChart.js

@@ -17,7 +17,7 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 * `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, showCursor = true, onSelect, selection, valueUnit, valueFormatter, labelFormatter, valueDomain, categoryLabelMode, categoryAxisTitle, valueAxisTitle, showGrid = true, showLegend = true, legendMaxItems, noTooltip = false, tooltipRenderer, tooltipMaxItems, isLoading = false, contentWhenEmpty, ariaLabel, ariaDescription }) => {
+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);
 	const colors = useSeriesColorResolver(series);
 	/**
@@ -78,7 +78,8 @@ var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRa
 		normalization,
 		isStacked,
 		domain,
-		resolveColor
+		resolveColor,
+		minSegmentLength
 	}), [
 		groups,
 		plotWidth,
@@ -86,7 +87,8 @@ var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRa
 		normalization,
 		isStacked,
 		domain,
-		resolveColor
+		resolveColor,
+		minSegmentLength
 	]);
 	const isEmpty = groups.length === 0;
 	const legendItems = useMemo(() => getBarLegendItems({

package/dist/charts/barChartGeometry.d.ts

@@ -106,6 +106,12 @@ interface BuildBarChartGeometryArgs<TMetric extends string, TComponentKey extend
      * record to answer, which this module has no business importing.
      */
     resolveColor: (args: ResolveBarColorArgs<TMetric>) => string;
+    /**
+     * Minimum rendered length for a stack segment, in px. `0` disables it.
+     *
+     * See the prop of the same name on `BarChart` for what it costs.
+     */
+    minSegmentLength: number;
 }
 export interface ResolveBarColorArgs<TMetric extends string> {
     metric: TMetric;
@@ -116,5 +122,5 @@ export interface ResolveBarColorArgs<TMetric extends string> {
     /** The component's own palette override, if it declared one. */
     explicit?: ChartPalette;
 }
-export declare function buildBarChartGeometry<TMetric extends string, TComponentKey extends string = string>({ groups, plotWidth, plotHeight, normalization, isStacked, domain, resolveColor, }: BuildBarChartGeometryArgs<TMetric, TComponentKey>): BarChartGeometry<TMetric, TComponentKey>;
+export declare function buildBarChartGeometry<TMetric extends string, TComponentKey extends string = string>({ groups, plotWidth, plotHeight, normalization, isStacked, domain, resolveColor, minSegmentLength, }: BuildBarChartGeometryArgs<TMetric, TComponentKey>): BarChartGeometry<TMetric, TComponentKey>;
 export {};

package/dist/charts/barChartGeometry.js

@@ -111,7 +111,86 @@ function getBarValueDomain(groups, normalization) {
 	}
 	return [min, max];
 }
-function buildBarChartGeometry({ groups, plotWidth, plotHeight, normalization, isStacked, domain, resolveColor }) {
+/**
+* Grow every under-sized segment to its minimum, paying for it out of the
+* segments that have room to spare.
+*
+* `lengths` and `minima` are one side of one stack, in baseline-outward order.
+* Returns `null` when nothing needs doing, and — deliberately — also when the
+* bill cannot be paid: if the surplus across the whole side is smaller than the
+* total deficit, every segment would end up pinned at its minimum and the bar
+* would no longer be a picture of its data. A stack that crowded is telling the
+* caller to drop the minimum or fold the tail into an "Other" component, and
+* silently redrawing it as a ladder of equal blocks would hide that.
+*/
+function distributeMinSegmentLengths(lengths, minima) {
+	const result = [...lengths];
+	let deficit = 0;
+	let surplus = 0;
+	lengths.forEach((length, index) => {
+		if (length < minima[index]) {
+			deficit += minima[index] - length;
+			result[index] = minima[index];
+		} else surplus += length - minima[index];
+	});
+	if (deficit === 0 || surplus < deficit) return null;
+	const donors = result.map((length, index) => ({
+		index,
+		slack: length - minima[index]
+	})).filter((donor) => donor.slack > 0).sort((a, b) => b.slack - a.slack);
+	let remainingSlack = surplus;
+	for (const donor of donors) {
+		if (deficit <= 0) break;
+		const share = Math.min(donor.slack, Math.ceil(donor.slack / remainingSlack * deficit));
+		result[donor.index] -= share;
+		remainingSlack -= donor.slack;
+		deficit -= share;
+	}
+	return result;
+}
+/**
+* Snapped pixel spans for one bar's segments, with {@link minSegmentLength}
+* enforced.
+*
+* The enforcement re-lays the affected side of the stack *cumulatively* from the
+* baseline outward, rather than nudging each segment's own edges. That is the
+* only way to grow a sliver without breaking the invariant the rounding above
+* exists to protect: each segment starts exactly where the previous one ended,
+* so there is still one shared edge per seam and no overlap. And because the
+* redistribution is zero-sum, the side's total extent is unchanged — the cap
+* still lands on the same axis value it did before.
+*/
+function resolveSegmentExtents(intervals, valueScale, minSegmentLength) {
+	const extents = intervals.map(({ from, to }) => ({
+		fromY: Math.round(valueScale(from)),
+		toY: Math.round(valueScale(to))
+	}));
+	if (minSegmentLength <= 0) return extents;
+	const adjustSide = (sign) => {
+		const indices = intervals.map((interval, index) => ({
+			interval,
+			index
+		})).filter(({ interval }) => Math.sign(interval.value) === sign).map(({ index }) => index);
+		if (indices.length === 0) return;
+		const adjusted = distributeMinSegmentLengths(indices.map((index) => Math.abs(extents[index].fromY - extents[index].toY)), indices.map((_, position) => position === 0 ? minSegmentLength : minSegmentLength + 2));
+		if (!adjusted) return;
+		const direction = sign > 0 ? -1 : 1;
+		const first = extents[indices[0]];
+		let cursor = sign > 0 ? first.fromY : first.toY;
+		indices.forEach((index, position) => {
+			const next = cursor + direction * adjusted[position];
+			extents[index] = {
+				fromY: cursor,
+				toY: next
+			};
+			cursor = next;
+		});
+	};
+	adjustSide(1);
+	adjustSide(-1);
+	return extents;
+}
+function buildBarChartGeometry({ groups, plotWidth, plotHeight, normalization, isStacked, domain, resolveColor, minSegmentLength }) {
 	const valueScale = buildValueScale(domain, [plotHeight, 0]);
 	const baselineY = valueScale(0);
 	const rects = [];
@@ -139,6 +218,8 @@ function buildBarChartGeometry({ groups, plotWidth, plotHeight, normalization, i
 			const barX = barsStartX + barIndex * (barWidth + effectiveBarGap);
 			const values = bar.components.map((component) => sanitizeValue(component.value));
 			const intervals = stackComponents(values, normalization);
+			const isStackedBar = bar.components.length > 1;
+			const extents = resolveSegmentExtents(intervals, valueScale, isStackedBar ? minSegmentLength : 0);
 			let firstPositive = -1;
 			let lastPositive = -1;
 			let firstNegative = -1;
@@ -154,15 +235,13 @@ function buildBarChartGeometry({ groups, plotWidth, plotHeight, normalization, i
 				}
 			});
 			bar.components.forEach((component, componentIndex) => {
-				const { value, from, to } = intervals[componentIndex];
+				const { value } = intervals[componentIndex];
 				if (value === 0) return;
 				const isNegative = value < 0;
 				const isCap = componentIndex === (isNegative ? lastNegative : lastPositive);
-				const fromY = Math.round(valueScale(from));
-				const toY = Math.round(valueScale(to));
+				const { fromY, toY } = extents[componentIndex];
 				const topY = Math.min(fromY, toY);
 				const rawHeight = Math.abs(fromY - toY);
-				const isStackedBar = bar.components.length > 1;
 				const shave = componentIndex === (isNegative ? firstNegative : firstPositive) ? 0 : 2;
 				const height = Math.max(isStackedBar ? 0 : 2, rawHeight - shave);
 				const y = isNegative ? topY + shave : topY;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@galaxy-io/dls",
-  "version": "1.5.14",
+  "version": "1.5.15",
   "description": "Galaxy Design Language System",
   "license": "UNLICENSED",
   "type": "module",