@galaxy-io/dls 1.6.0 → 2.0.0

package/dist/charts/barChartLegend.d.ts

@@ -1,25 +1,21 @@
-import type { BarChartGroupDatum, ChartLegendItem, ChartSeriesStyles } from "./types";
-import type { SeriesColorResolver } from "./useSeriesColorResolver";
 /**
- * Legend entries for a bar chart.
- *
- * A pure walk over the data, kept out of the component because it is the one
- * legend in the DLS that cannot be a `.map()` over the `series` record: a bar's
- * *components* are a second dimension with no record of their own, so a stacked
- * chart's legend has to be recovered from the data itself.
+ * @internal Legend entries for a bar chart. The one chart legend that cannot be a `.map()` over
+ * the `series` record: when bars are stacked the colors distinguish components, a second dimension
+ * with no record of its own, so the legend is recovered from the data (first-seen order).
  */
-interface GetBarLegendItemsArgs<TMetric extends string, TComponentKey extends string> {
-    /**
-     * Whether the chart as a whole is stacked.
-     *
-     * Decides which dimension the legend names, and must match the flag the
-     * geometry coloured with — a legend naming metrics beside bars coloured by
-     * component describes a chart that is not on screen.
-     */
+import type { BarGeometryGroup } from "./barChartGeometry.js";
+import type { ChartLegendItem, ChartSeriesStyles } from "./types.js";
+import type { SeriesColorResolver } from "./useSeriesColorResolver.js";
+/** @internal Inputs of `getBarLegendItems`. */
+export interface GetBarLegendItemsArgs<TMetric extends string, TComponentKey extends string> {
+    /** Whether any bar is stacked: decides which dimension the legend names (and the colors use). */
     isStacked: boolean;
+    /** The `series` prop. */
     series: ChartSeriesStyles<TMetric>;
-    groups: BarChartGroupDatum<TMetric, TComponentKey>[];
+    /** The `groups` prop. */
+    groups: BarGeometryGroup<TMetric, TComponentKey>[];
+    /** The chart's series color resolver. */
     colors: SeriesColorResolver<TMetric>;
 }
+/** @internal Metrics when no bar is stacked; components (first seen, colored by position) otherwise. */
 export declare function getBarLegendItems<TMetric extends string, TComponentKey extends string>({ isStacked, series, groups, colors, }: GetBarLegendItemsArgs<TMetric, TComponentKey>): ChartLegendItem[];
-export {};

package/dist/charts/barChartLegend.js

@@ -1,23 +1,28 @@
+import { resolveChartSeriesColor } from "./chartPalette.js";
 //#region src/charts/barChartLegend.ts
+/** @internal Metrics when no bar is stacked; components (first seen, colored by position) otherwise. */
 function getBarLegendItems({ isStacked, series, groups, colors }) {
-	if (!isStacked) return colors.keys.map((metric) => ({
-		key: metric,
-		label: series[metric].label,
-		color: colors.resolve(metric)
-	}));
+	if (!isStacked) return colors.keys.map((metric) => {
+		const color = colors.resolve(metric);
+		return {
+			key: metric,
+			label: series[metric]?.label ?? metric,
+			...color.palette !== void 0 && { palette: color.palette },
+			...color.hex !== void 0 && { hex: color.hex }
+		};
+	});
 	const seen = /* @__PURE__ */ new Map();
 	for (const group of groups) for (const bar of group.bars) bar.components.forEach((component, componentIndex) => {
-		if (!seen.has(component.key)) seen.set(component.key, {
+		if (seen.has(component.key)) return;
+		const color = resolveChartSeriesColor(componentIndex, component.color, component.hex);
+		seen.set(component.key, {
+			key: component.key,
 			label: component.label,
-			index: componentIndex,
-			explicit: component.color
+			...color.palette !== void 0 && { palette: color.palette },
+			...color.hex !== void 0 && { hex: color.hex }
 		});
 	});
-	return [...seen.entries()].map(([key, { label, index, explicit }]) => ({
-		key,
-		label,
-		color: colors.resolveByIndex(index, explicit)
-	}));
+	return [...seen.values()];
 }
 //#endregion
 export { getBarLegendItems };

package/dist/charts/chartFormat.d.ts

@@ -1,19 +1,13 @@
-import { ChartValueUnit } from "./types";
-import type { ChartLabelFormatter, ChartValueFormatter } from "./types";
-/**
- * Format a value with a built-in unit.
- *
- * `PERCENT` takes a 0–100 value rather than a 0–1 fraction, matching how
- * percentage data usually arrives, and appends the sign itself instead of using
- * `style: "percent"` (which would divide by 100).
- */
-export declare function formatChartValue(value: number, unit: ChartValueUnit): string;
-/**
- * Pick the effective value formatter.
- *
- * An explicit `valueFormatter` always wins; otherwise the unit supplies a
- * default, and `PLAIN` is the fallback when neither is given.
- */
-export declare function resolveValueFormatter(valueFormatter?: ChartValueFormatter, unit?: ChartValueUnit): ChartValueFormatter;
-/** Pick the effective label formatter, defaulting to identity. */
+import type { ChartLabelFormatter, ChartValueFormatter } from "./types.js";
+/** @internal How a gap (a `null` reading) renders in the tooltip. */
+export declare const CHART_NULL_VALUE = "\u2014";
+/** @internal The default value formatter: grouped, at most two fraction digits. */
+export declare const DEFAULT_CHART_VALUE_FORMATTER: ChartValueFormatter;
+/** @internal The default label formatter: identity. */
+export declare const DEFAULT_CHART_LABEL_FORMATTER: ChartLabelFormatter;
+/** @internal The effective value formatter. */
+export declare function resolveValueFormatter(valueFormatter?: ChartValueFormatter): ChartValueFormatter;
+/** @internal The effective label formatter. */
 export declare function resolveLabelFormatter(labelFormatter?: ChartLabelFormatter): ChartLabelFormatter;
+/** @internal Formats a reading, rendering a gap or a non-finite value as "—". */
+export declare function formatChartValue(value: number | null, formatter: ChartValueFormatter): string;

package/dist/charts/chartFormat.js

@@ -1,59 +1,27 @@
-import { ChartValueUnit } from "./types.js";
-import { match } from "ts-pattern";
+import { formatNumber } from "../utils/format.js";
 //#region src/charts/chartFormat.ts
 /**
-* Value and label formatting for the chart components.
-*
-* Resolving the formatter once, centrally, is what keeps axis ticks, value
-* labels and tooltip rows from drifting apart — a recurring problem when every
-* call site writes its own one-liner.
+* @internal Value and label formatting for the chart family, resolved once per chart so axis
+* ticks, tooltip rows and announcements cannot drift apart. Built on `utils/format` (en-US by
+* default, so the server and the client agree).
 */
-/**
-* `Intl` formatters are comparatively expensive to construct, and the charts
-* format every tick and tooltip row on each render, so instances are cached per
-* unit.
-*/
-var FORMATTER_CACHE = /* @__PURE__ */ new Map();
-function getIntlFormatter(unit) {
-	const cached = FORMATTER_CACHE.get(unit);
-	if (cached) return cached;
-	const formatter = match(unit).with(ChartValueUnit.PLAIN, () => new Intl.NumberFormat(void 0, { maximumFractionDigits: 2 })).with(ChartValueUnit.CURRENCY, () => new Intl.NumberFormat(void 0, {
-		style: "currency",
-		currency: "USD",
-		maximumFractionDigits: 0
-	})).with(ChartValueUnit.PERCENT, () => new Intl.NumberFormat(void 0, { maximumFractionDigits: 1 })).with(ChartValueUnit.COMPACT, () => new Intl.NumberFormat(void 0, {
-		notation: "compact",
-		maximumFractionDigits: 1
-	})).exhaustive();
-	FORMATTER_CACHE.set(unit, formatter);
-	return formatter;
-}
-/**
-* Format a value with a built-in unit.
-*
-* `PERCENT` takes a 0–100 value rather than a 0–1 fraction, matching how
-* percentage data usually arrives, and appends the sign itself instead of using
-* `style: "percent"` (which would divide by 100).
-*/
-function formatChartValue(value, unit) {
-	if (!Number.isFinite(value)) return "—";
-	const formatted = getIntlFormatter(unit).format(value);
-	return unit === ChartValueUnit.PERCENT ? `${formatted}%` : formatted;
+/** @internal How a gap (a `null` reading) renders in the tooltip. */
+var CHART_NULL_VALUE = "—";
+/** @internal The default value formatter: grouped, at most two fraction digits. */
+var DEFAULT_CHART_VALUE_FORMATTER = (value) => formatNumber(value, { precision: 2 });
+/** @internal The default label formatter: identity. */
+var DEFAULT_CHART_LABEL_FORMATTER = (label) => label;
+/** @internal The effective value formatter. */
+function resolveValueFormatter(valueFormatter) {
+	return valueFormatter ?? DEFAULT_CHART_VALUE_FORMATTER;
 }
-/**
-* Pick the effective value formatter.
-*
-* An explicit `valueFormatter` always wins; otherwise the unit supplies a
-* default, and `PLAIN` is the fallback when neither is given.
-*/
-function resolveValueFormatter(valueFormatter, unit) {
-	if (valueFormatter) return valueFormatter;
-	const resolvedUnit = unit ?? ChartValueUnit.PLAIN;
-	return (value) => formatChartValue(value, resolvedUnit);
-}
-/** Pick the effective label formatter, defaulting to identity. */
+/** @internal The effective label formatter. */
 function resolveLabelFormatter(labelFormatter) {
-	return labelFormatter ?? ((label) => label);
+	return labelFormatter ?? DEFAULT_CHART_LABEL_FORMATTER;
+}
+/** @internal Formats a reading, rendering a gap or a non-finite value as "—". */
+function formatChartValue(value, formatter) {
+	return value === null || !Number.isFinite(value) ? "—" : formatter(value);
 }
 //#endregion
-export { formatChartValue, resolveLabelFormatter, resolveValueFormatter };
+export { CHART_NULL_VALUE, DEFAULT_CHART_LABEL_FORMATTER, DEFAULT_CHART_VALUE_FORMATTER, formatChartValue, resolveLabelFormatter, resolveValueFormatter };

package/dist/charts/chartPalette.d.ts

@@ -0,0 +1,33 @@
+import type { Hex, PaletteColor, StatusColor } from "../theme/tokens/types.js";
+import { ChartPalette } from "./types.js";
+/**
+ * @internal Automatic assignment order: the eight hues, purple first. Status slots never join it
+ * (an ordinary ninth series must not read as an error).
+ */
+export declare const CHART_PALETTE_ORDER: readonly ChartPalette[];
+/** @internal A chart ramp: a palette family or a status role. Never gray. */
+export type ChartHue = PaletteColor | StatusColor;
+/**
+ * @internal Palette slot → its family. The status slots are the status roles (there is no `INFO`
+ * slot); the old neutral slots `PRIMARY` /
+ * `SECONDARY` / `TERTIARY` are hues too (no gray in charts, docs/theming.md): `indigo`, `sky`,
+ * `violet`.
+ */
+export declare const CHART_PALETTE_TO_HUE_MAP: Record<ChartPalette, ChartHue>;
+/** @internal Palette slot → the CSS color of its marks: the family's `text.<family>` (text and icons). */
+export declare const CHART_PALETTE_TO_COLOR_MAP: Record<ChartPalette, string>;
+/** @internal The color of a mark that names no series (PieChart's folded "Other" bucket): `cyan`, never gray. */
+export declare const CHART_NEUTRAL_COLOR: string;
+/** @internal A resolved series color plus the swatch inputs it came from. */
+export interface ChartSeriesColor {
+    /** CSS color for marks: the series `hex`, or the slot's `var(--gx-…)` string. */
+    color: string;
+    /** The slot, when the color came from the palette. */
+    palette?: ChartPalette;
+    /** The raw color, when the series set one. */
+    hex?: Hex;
+}
+/** @internal The slot at a position in the automatic order (wraps after eight). */
+export declare function chartPaletteAt(index: number): ChartPalette;
+/** @internal Resolves a series color: `hex` wins, then an explicit slot, then the automatic order. */
+export declare function resolveChartSeriesColor(index: number, explicit?: ChartPalette, hex?: Hex): ChartSeriesColor;

package/dist/charts/chartPalette.js

@@ -0,0 +1,68 @@
+import { t } from "../theme/tokens/t.js";
+import { ChartPalette } from "./types.js";
+//#region src/charts/chartPalette.ts
+/**
+* @internal Series colors. A palette slot maps to a `t.color.text.<family>` string (`var(--gx-…)`),
+* so a theme switch repaints marks through CSS with no React render. Imports only `t` and types:
+* no component, no d3.
+* Apps that want a slot's color in their own CSS use `t.color.text.<family>`.
+*/
+/**
+* @internal Automatic assignment order: the eight hues, purple first. Status slots never join it
+* (an ordinary ninth series must not read as an error).
+*/
+var CHART_PALETTE_ORDER = [
+	ChartPalette.PURPLE,
+	ChartPalette.PINK,
+	ChartPalette.BLUE,
+	ChartPalette.TEAL,
+	ChartPalette.LIME,
+	ChartPalette.ORANGE,
+	ChartPalette.YELLOW,
+	ChartPalette.GREEN
+];
+/**
+* @internal Palette slot → its family. The status slots are the status roles (there is no `INFO`
+* slot); the old neutral slots `PRIMARY` /
+* `SECONDARY` / `TERTIARY` are hues too (no gray in charts, docs/theming.md): `indigo`, `sky`,
+* `violet`.
+*/
+var CHART_PALETTE_TO_HUE_MAP = {
+	[ChartPalette.PURPLE]: "purple",
+	[ChartPalette.PINK]: "pink",
+	[ChartPalette.BLUE]: "blue",
+	[ChartPalette.TEAL]: "teal",
+	[ChartPalette.LIME]: "lime",
+	[ChartPalette.ORANGE]: "orange",
+	[ChartPalette.YELLOW]: "yellow",
+	[ChartPalette.GREEN]: "green",
+	[ChartPalette.SUCCESS]: "success",
+	[ChartPalette.WARNING]: "warning",
+	[ChartPalette.ERROR]: "error",
+	[ChartPalette.PRIMARY]: "indigo",
+	[ChartPalette.SECONDARY]: "sky",
+	[ChartPalette.TERTIARY]: "violet"
+};
+/** @internal Palette slot → the CSS color of its marks: the family's `text.<family>` (text and icons). */
+var CHART_PALETTE_TO_COLOR_MAP = Object.fromEntries(Object.values(ChartPalette).map((palette) => [palette, t.color.text[CHART_PALETTE_TO_HUE_MAP[palette]]]));
+/** @internal The color of a mark that names no series (PieChart's folded "Other" bucket): `cyan`, never gray. */
+var CHART_NEUTRAL_COLOR = t.color.text.cyan;
+/** @internal The slot at a position in the automatic order (wraps after eight). */
+function chartPaletteAt(index) {
+	const order = CHART_PALETTE_ORDER;
+	return order[(index % order.length + order.length) % order.length] ?? ChartPalette.PURPLE;
+}
+/** @internal Resolves a series color: `hex` wins, then an explicit slot, then the automatic order. */
+function resolveChartSeriesColor(index, explicit, hex) {
+	if (hex !== void 0) return {
+		color: hex,
+		hex
+	};
+	const palette = explicit ?? chartPaletteAt(index);
+	return {
+		color: CHART_PALETTE_TO_COLOR_MAP[palette],
+		palette
+	};
+}
+//#endregion
+export { CHART_NEUTRAL_COLOR, CHART_PALETTE_ORDER, CHART_PALETTE_TO_COLOR_MAP, CHART_PALETTE_TO_HUE_MAP, chartPaletteAt, resolveChartSeriesColor };

package/dist/charts/chartScales.d.ts

@@ -1,120 +1,53 @@
-import type { ChartMargin, ChartValueDomain, ChartValueFormatter } from "./types";
-/**
- * Scale construction and axis sizing for the chart components.
- *
- * Pure arithmetic with no React and no theme access, so it can be unit-reasoned
- * about and stays safe for Linaria's build-time evaluation.
- */
+import type { ChartValueDomain, ChartValueFormatter } from "./types.js";
+/** @internal Space between the plot box edge and the plot (the 1.x `margin`, now computed). */
+export interface ChartInsets {
+    /** Above the plot. */
+    top: number;
+    /** Right of the plot. */
+    right: number;
+    /** Below the plot (category labels and title). */
+    bottom: number;
+    /** Left of the plot (value tick labels and title). */
+    left: number;
+}
+/** @internal Clamps `value` into `[min, max]`. */
 export declare function clamp(value: number, min: number, max: number): number;
-/**
- * Coerce a datum value into something safe to feed a scale.
- *
- * A single `NaN` or `Infinity` in consumer data otherwise propagates into every
- * path's `d` attribute and blanks the entire chart rather than one mark.
- */
+/** @internal A finite number, or 0: one `NaN` in data must not blank every path. */
 export declare function sanitizeValue(value: number | undefined | null): number;
 /**
- * Merge a partial margin over the defaults.
- *
- * Written per-field rather than as a spread: spreading an object that carries
- * an explicit `undefined` overwrites the default with `undefined` rather than
- * falling back to it, which is easy to trip over when the partial is assembled
- * from separate optional values.
- *
- * `defaults` exists because the cartesian default reserves axis gutters a
- * radial chart has no use for. Taking it as a parameter keeps the merge
- * per-field: a chart that substituted its own defaults with `margin ?? OWN`
- * would silently fall back to the *cartesian* defaults the moment a caller
- * passed a partial, handing an axis-less chart a 52px left gutter.
- */
-export declare function resolveMargin(partial?: Partial<ChartMargin>, defaults?: ChartMargin): ChartMargin;
-/** Inner plot dimensions, never negative. */
-export declare function getPlotDimensions(width: number, height: number, margin: ChartMargin): {
-    plotWidth: number;
-    plotHeight: number;
-};
-/**
- * Widen a margin to leave room for axis titles.
- *
- * The reservation has to happen here rather than inside the axis, because the
- * margin is resolved before any axis renders — and with the root SVG set to
- * `overflow: visible`, an unreserved title would paint outside the container and
- * be clipped by whatever the consumer wraps the chart in.
- *
- * Applied to the caller's *partial* before {@link resolveMargin} fills in the
- * defaults, so an explicit `margin.left` still governs the tick gutter and the
- * title band is added on top of it rather than eating into it. Returns the input
- * untouched when there are no titles, so the common case allocates nothing.
- */
-export declare function addAxisTitleSpace(partial: Partial<ChartMargin> | undefined, { hasValueTitle, hasCategoryTitle }: {
-    hasValueTitle: boolean;
-    hasCategoryTitle: boolean;
-}): Partial<ChartMargin> | undefined;
-/**
- * Turn a raw data extent into the domain the axis and the marks both use.
- *
- * Applies the caller's override, then three behaviours worth knowing:
- *
- * - **Zero is always in the domain.** Bars need a baseline to grow from, and
- *   without this a negative value maps outside the range and renders as a
- *   rectangle with negative height, which paints nothing at all.
- * - **A zero-width domain is widened to 0–1.** d3's `normalize()` returns a
- *   constant `0.5` when the domain has no extent, so empty or all-zero data
- *   would otherwise map every value to the middle of the plot and strand the
- *   baseline halfway up.
- * - **`nice()` rounds the ends outward** to values a reader would choose.
- *
- * Split out of {@link buildValueScale} so the domain is computed exactly once
- * per chart and then handed to both the tick list and the geometry. Building it
- * twice — once at a throwaway range to get ticks, once at the real range to
- * place marks — leaves two `nice()` calls that must agree forever.
- *
- * `nice()` deliberately takes **no argument**. The default count is 10, not the
- * five ticks {@link DEFAULT_VALUE_TICK_COUNT} asks for, and nicing to the tick
- * count instead would change the axis extent on every existing chart.
+ * @internal The domain both the axis and the marks use: the override applied, zero always
+ * included (a baseline to grow from), a zero-width domain widened to 0–1, and the ends `nice()`d.
  */
 export declare function resolveValueDomain(raw: [number, number], override?: Partial<ChartValueDomain>): [number, number];
-/**
- * Linear scale over an already-resolved domain.
- *
- * Does no nicing and no zero-forcing — {@link resolveValueDomain} has done
- * both. Takes the domain rather than raw data so the same numbers drive the
- * axis, the ticks and every mark.
- */
+/** @internal Linear scale over a resolved domain. */
 export declare function buildValueScale(domain: [number, number], range: [number, number]): import("d3-scale").ScaleLinear<number, number, never>;
-/** Point scale for categories, used by the line chart. */
+/** @internal Point scale for categories (LineChart, AreaChart). */
 export declare function buildCategoryPointScale(labels: string[], range: [number, number], padding?: number): import("d3-scale").ScalePoint<string>;
+/** @internal Tick values for a resolved domain. Needs no dimensions, so it can size the gutter first. */
+export declare function getValueTicks(domain: [number, number], override?: Partial<ChartValueDomain>): number[];
+/** @internal How many value ticks fit a plot `plotHeight` tall, at least `MIN_VALUE_TICK_SPACING` apart. */
+export declare function getMaxValueTicks(plotHeight: number): number;
 /**
- * Left margin needed to fit the widest formatted tick label.
- *
- * Estimated from character count rather than measured from the DOM, mirroring
- * `estimateColumnWidth` in `table/utils.ts`, so it works during server rendering
- * and build-time evaluation. The estimate only has to be close: tick labels
- * right-align against the plot and ellipsize, so an underestimate truncates one
- * label rather than breaking the layout, and {@link MAX_AUTO_MARGIN_LEFT} caps
- * what a pathological formatter can take from the plot.
- *
- * Rounded up to {@link AUTO_MARGIN_LEFT_STEP} rather than used raw — see that
- * constant for why an exact fit is the wrong target.
- *
- * Safe to call before the chart has been measured: `nice()` and `ticks()` depend
- * on the domain and the requested count, never on the scale's range, so the tick
- * values here are the same ones the axis renders later.
+ * @internal The value axis for a plot `plotHeight` tall (0 = not measured yet): the domain and its
+ * ticks at the requested density, the ticks thinned until they sit at least
+ * `MIN_VALUE_TICK_SPACING` apart so labels never touch on a short chart. The domain never grows to
+ * suit the thinner ticks (a short chart keeps its marks tall; the top rule may sit below the top).
  */
-export declare function estimateValueAxisMargin(ticks: number[], formatter: ChartValueFormatter): number;
+export declare function resolveValueAxis(raw: [number, number], override: Partial<ChartValueDomain> | undefined, plotHeight: number): {
+    domain: [number, number];
+    ticks: number[];
+};
 /**
- * How many categories to skip between rendered axis labels.
- *
- * Returns 1 when every label fits, so a chart that is not crowded renders
- * exactly as it would with no skipping at all.
+ * @internal Left gutter that fits the widest formatted tick, estimated from character count (SSR
+ * safe), rounded up to a step so plots stay aligned and do not shift as live data gains a digit.
  */
+export declare function estimateValueAxisInset(ticks: number[], formatter: ChartValueFormatter): number;
+/** @internal The cartesian insets: the tick gutter, plus bands for the axis titles. */
+export declare function getCartesianInsets(tickInset: number, { hasValueTitle, hasCategoryTitle }: {
+    hasValueTitle: boolean;
+    hasCategoryTitle: boolean;
+}): ChartInsets;
+/** @internal How many rows to skip between rendered row labels (Heatmap); 1 when every caption line fits. */
+export declare function getRowLabelStride(step: number): number;
+/** @internal How many categories to skip between rendered labels; 1 when every label fits. */
 export declare function getCategoryLabelStride(labels: string[], step: number): number;
-/**
- * Tick values for a resolved domain, honoring an explicit tick count.
- *
- * Needs no dimensions, which is what breaks the apparent circularity in the
- * layout: the left margin must fit the tick labels, the margin decides the plot
- * size, and the plot size builds the scale. Tick *values* fall out of the domain
- * alone, so they can be known before anything is measured.
- */
-export declare function getValueTicks(domain: [number, number], override?: Partial<ChartValueDomain>): number[];