@galaxy-io/dls 1.2.7 → 1.3.1

package/dist/charts/lineChartGeometry.d.ts

@@ -0,0 +1,92 @@
+import { buildValueScale } from "./chartScales";
+import { LineChartCurve } from "./types";
+import type { LineChartLineDatum } from "./types";
+/** Signed value domain across every line, ignoring gaps. */
+export declare function getLineValueDomain<TMetric extends string>(lines: LineChartLineDatum<TMetric>[]): [number, number];
+/** One line, resolved to SVG paths. */
+export interface LineChartPath<TMetric extends string> {
+    /** React key. Equal to the metric, which is unique by construction. */
+    id: string;
+    metric: TMetric;
+    /** `d` for the stroke. Empty when the line has no plottable points. */
+    path: string;
+    /** `d` for the area fill. Present only when the line opted into an area. */
+    areaPath?: string;
+    /** Pre-serialised `stroke-dasharray`. Absent for a solid line. */
+    dashArray?: string;
+    strokeWidth: number;
+    color: string;
+}
+/** One point, resolved to pixels. */
+export interface LineChartPoint<TMetric extends string> {
+    /** React key. `${metric}:${categoryIndex}`. */
+    id: string;
+    metric: TMetric;
+    value: number;
+    x: number;
+    y: number;
+    color: string;
+}
+/**
+ * One category column: the hit target and everything the tooltip needs.
+ *
+ * Line charts hit-test by column rather than by proximity to a stroke, so the
+ * whole vertical band is a target and the tooltip reports every line at once.
+ */
+export interface LineChartColumn<TMetric extends string> {
+    categoryIndex: number;
+    label: string;
+    /** x of the category tick. */
+    x: number;
+    /** Full-height hit target, tiling with its neighbours. */
+    bandX: number;
+    bandWidth: number;
+    /** Points present in this column, one per line that has a value here. */
+    points: LineChartPoint<TMetric>[];
+    /** Topmost point in the column — where the tooltip anchors. */
+    anchorY: number;
+}
+export interface LineChartGeometry<TMetric extends string> {
+    paths: LineChartPath<TMetric>[];
+    columns: LineChartColumn<TMetric>[];
+    /**
+     * Points with no defined neighbour on either side.
+     *
+     * A lone reading has nothing to connect to, so it produces a zero-length path
+     * segment and renders as nothing at all — a silent hole in sparse data. These
+     * are drawn as explicit dots so the value is visible without hovering.
+     */
+    isolatedPoints: LineChartPoint<TMetric>[];
+    categories: string[];
+    valueScale: ReturnType<typeof buildValueScale>;
+    /**
+     * Distance between category ticks.
+     *
+     * Exposed because axis labels must be centred on their tick, which is not the
+     * same as being centred on the hit band: the first and last bands are clipped
+     * to the plot edge, and centring a label inside a half-width band pushes it
+     * off its tick.
+     */
+    step: number;
+}
+interface BuildLineChartGeometryArgs<TMetric extends string> {
+    lines: LineChartLineDatum<TMetric>[];
+    categories?: string[];
+    plotWidth: number;
+    plotHeight: number;
+    curve: LineChartCurve;
+    /**
+     * The final value domain, already overridden, zeroed and niced.
+     *
+     * Resolved by the caller rather than here, because the left gutter is sized
+     * from the tick labels and therefore needs the domain before the plot — and
+     * hence this builder — exists.
+     */
+    domain: [number, number];
+    strokeWidth?: number;
+    resolveColor: (args: {
+        metric: TMetric;
+    }) => string;
+}
+export declare function buildLineChartGeometry<TMetric extends string>({ lines, categories: explicitCategories, plotWidth, plotHeight, curve, domain, strokeWidth: defaultStrokeWidth, resolveColor, }: BuildLineChartGeometryArgs<TMetric>): LineChartGeometry<TMetric>;
+export {};

package/dist/charts/lineChartGeometry.js

@@ -0,0 +1,134 @@
+import { LineChartCurve } from "./types.js";
+import { DEFAULT_LINE_STROKE_WIDTH } from "./constants.js";
+import { buildCategoryPointScale, buildValueScale, sanitizeValue } from "./chartScales.js";
+import { match } from "ts-pattern";
+import { area, curveLinear, curveMonotoneX, curveStepAfter, line } from "d3-shape";
+//#region src/charts/lineChartGeometry.ts
+function resolveCurve(curve) {
+	return match(curve).with(LineChartCurve.LINEAR, () => curveLinear).with(LineChartCurve.SMOOTH, () => curveMonotoneX).with(LineChartCurve.STEP, () => curveStepAfter).exhaustive();
+}
+/**
+* The union of every line's categories, in first-seen order.
+*
+* Lines are allowed to be sparse, so the axis cannot come from any single one
+* of them. An explicit `categories` list wins, and is worth supplying whenever
+* the data is gappy — inferring order from a union of incomplete series is
+* guesswork, and guessing wrong reorders time.
+*/
+function getLineCategories(lines, explicit) {
+	if (explicit) return explicit;
+	const seen = [];
+	const index = /* @__PURE__ */ new Set();
+	for (const lineDatum of lines) for (const point of lineDatum.points) if (!index.has(point.x)) {
+		index.add(point.x);
+		seen.push(point.x);
+	}
+	return seen;
+}
+/** Signed value domain across every line, ignoring gaps. */
+function getLineValueDomain(lines) {
+	let min = 0;
+	let max = 0;
+	let hasValue = false;
+	for (const lineDatum of lines) for (const point of lineDatum.points) {
+		if (point.y === null || point.y === void 0) continue;
+		const value = sanitizeValue(point.y);
+		if (!hasValue) {
+			min = value;
+			max = value;
+			hasValue = true;
+			continue;
+		}
+		if (value < min) min = value;
+		if (value > max) max = value;
+	}
+	return [Math.min(0, min), Math.max(0, max)];
+}
+function buildLineChartGeometry({ lines, categories: explicitCategories, plotWidth, plotHeight, curve, domain, strokeWidth: defaultStrokeWidth = DEFAULT_LINE_STROKE_WIDTH, resolveColor }) {
+	const categories = getLineCategories(lines, explicitCategories);
+	const valueScale = buildValueScale(domain, [plotHeight, 0]);
+	const categoryScale = buildCategoryPointScale(categories, [0, plotWidth]);
+	const baselineY = valueScale(0);
+	const paths = [];
+	const columns = [];
+	const isolatedPoints = [];
+	if (categories.length === 0 || plotWidth <= 0 || plotHeight <= 0) return {
+		paths,
+		columns,
+		isolatedPoints,
+		categories,
+		valueScale,
+		step: 0
+	};
+	const curveFactory = resolveCurve(curve);
+	const categoryIndex = new Map(categories.map((label, index) => [label, index]));
+	const xAt = (index) => categoryScale(categories[index]) ?? 0;
+	const pointsByCategory = categories.map(() => []);
+	lines.forEach((lineDatum) => {
+		const color = resolveColor({ metric: lineDatum.metric });
+		const stroke = lineDatum.strokeWidth ?? defaultStrokeWidth;
+		const plotted = categories.map((_, index) => ({
+			categoryIndex: index,
+			value: null
+		}));
+		for (const point of lineDatum.points) {
+			const index = categoryIndex.get(point.x);
+			if (index === void 0) continue;
+			plotted[index].value = point.y === null || point.y === void 0 ? null : sanitizeValue(point.y);
+		}
+		const isDefined = (p) => p.value !== null;
+		const strokePath = line().defined(isDefined).x((p) => xAt(p.categoryIndex)).y((p) => valueScale(p.value)).curve(curveFactory)(plotted) ?? "";
+		const areaPath = lineDatum.showArea ? area().defined(isDefined).x((p) => xAt(p.categoryIndex)).y0(baselineY).y1((p) => valueScale(p.value)).curve(curveFactory)(plotted) ?? void 0 : void 0;
+		paths.push({
+			id: lineDatum.metric,
+			metric: lineDatum.metric,
+			path: strokePath,
+			areaPath,
+			dashArray: lineDatum.dashSize ? `${lineDatum.dashSize} ${lineDatum.dashSize}` : void 0,
+			strokeWidth: stroke,
+			color
+		});
+		plotted.forEach((p, index) => {
+			if (p.value === null) return;
+			const point = {
+				id: `${lineDatum.metric}:${p.categoryIndex}`,
+				metric: lineDatum.metric,
+				value: p.value,
+				x: xAt(p.categoryIndex),
+				y: valueScale(p.value),
+				color
+			};
+			pointsByCategory[p.categoryIndex].push(point);
+			const hasPrev = index > 0 && plotted[index - 1].value !== null;
+			const hasNext = index < plotted.length - 1 && plotted[index + 1].value !== null;
+			if (!hasPrev && !hasNext) isolatedPoints.push(point);
+		});
+	});
+	const step = categories.length > 1 ? categoryScale.step() : plotWidth;
+	categories.forEach((label, index) => {
+		const x = xAt(index);
+		const points = pointsByCategory[index];
+		const rawBandX = x - step / 2;
+		const bandX = Math.max(0, rawBandX);
+		const bandWidth = Math.min(plotWidth, rawBandX + step) - bandX;
+		columns.push({
+			categoryIndex: index,
+			label,
+			x,
+			bandX,
+			bandWidth,
+			points,
+			anchorY: points.length > 0 ? Math.min(...points.map((p) => p.y)) : baselineY
+		});
+	});
+	return {
+		paths,
+		columns,
+		isolatedPoints,
+		categories,
+		valueScale,
+		step
+	};
+}
+//#endregion
+export { buildLineChartGeometry, getLineValueDomain };

package/dist/charts/pieChartGeometry.d.ts

@@ -0,0 +1,60 @@
+import type { ChartPalette, PieChartSliceDatum } from "./types";
+/**
+ * Pie and donut geometry.
+ *
+ * Produces a flat array of finished arcs — path, anchor, colour and share all
+ * resolved — so the component body is a `.map()`.
+ *
+ * Pure: no React, no theme access. Colours arrive through a resolver callback.
+ */
+/** One rendered arc. */
+export interface PieChartArc {
+    /** React key. The slice key, or `AGGREGATED_SLICE_KEY` for the folded bucket. */
+    id: string;
+    label: string;
+    /** Summed value for the aggregated bucket, the slice's own otherwise. */
+    value: number;
+    /** Share of the total, 0–1. */
+    share: number;
+    /** `d` for the arc. */
+    path: string;
+    /** Anchor for the tooltip, just outside the arc's outer edge. */
+    anchorX: number;
+    anchorY: number;
+    color: string;
+}
+export interface PieChartGeometry {
+    arcs: PieChartArc[];
+    /** Centre of the pie, in plot coordinates. */
+    centerX: number;
+    centerY: number;
+    innerRadius: number;
+}
+interface BuildPieChartGeometryArgs<TSlice extends string> {
+    slices: PieChartSliceDatum<TSlice>[];
+    plotWidth: number;
+    plotHeight: number;
+    /** Hole size as a fraction of the outer radius. `0` is a solid pie. */
+    innerRadiusRatio?: number;
+    padAngle?: number;
+    cornerRadius?: number;
+    /**
+     * Slices below this share of the total are folded into one bucket.
+     *
+     * `0` disables folding. A donut with forty slivers communicates nothing, and
+     * the slivers are individually unhoverable, so a modest default is kinder
+     * than faithfully rendering every one.
+     */
+    minSliceShare?: number;
+    /** Label for the folded bucket. */
+    aggregatedLabel?: string;
+    resolveColor: (args: {
+        sliceKey: TSlice | null;
+        explicit?: ChartPalette;
+    }) => string;
+    /** Palette override declared by the caller for a given slice. */
+    getSliceColor?: (sliceKey: TSlice) => ChartPalette | undefined;
+    getSliceLabel: (sliceKey: TSlice) => string;
+}
+export declare function buildPieChartGeometry<TSlice extends string>({ slices, plotWidth, plotHeight, innerRadiusRatio, padAngle, cornerRadius, minSliceShare, aggregatedLabel, resolveColor, getSliceColor, getSliceLabel, }: BuildPieChartGeometryArgs<TSlice>): PieChartGeometry;
+export {};

package/dist/charts/pieChartGeometry.js

@@ -0,0 +1,79 @@
+import { AGGREGATED_SLICE_KEY, PIE_DONUT_INNER_RATIO, PIE_MAX_AUTO_INNER_RATIO, PIE_MAX_INSET_SHARE, PIE_PAD_ANGLE } from "./constants.js";
+import { sanitizeValue } from "./chartScales.js";
+import { arc, pie } from "d3-shape";
+//#region src/charts/pieChartGeometry.ts
+function buildPieChartGeometry({ slices, plotWidth, plotHeight, innerRadiusRatio = PIE_DONUT_INNER_RATIO, padAngle = PIE_PAD_ANGLE, cornerRadius = 2, minSliceShare = 0, aggregatedLabel = "Other", resolveColor, getSliceColor, getSliceLabel }) {
+	const outerRadius = Math.max(0, Math.min(plotWidth, plotHeight) / 2);
+	const gapWidth = outerRadius * Math.max(0, padAngle);
+	const requestedInnerRadius = outerRadius * Math.min(Math.max(innerRadiusRatio, 0), .95);
+	const centerX = plotWidth / 2;
+	const centerY = plotHeight / 2;
+	const sanitized = slices.map((slice) => ({
+		sliceKey: slice.key,
+		value: Math.max(0, sanitizeValue(slice.value))
+	}));
+	const total = sanitized.reduce((sum, slice) => sum + slice.value, 0);
+	const empty = {
+		arcs: [],
+		centerX,
+		centerY,
+		innerRadius: requestedInnerRadius
+	};
+	if (total <= 0 || outerRadius <= 0) return empty;
+	const kept = [];
+	let foldedValue = 0;
+	for (const slice of sanitized) {
+		const share = slice.value / total;
+		if (minSliceShare > 0 && share < minSliceShare) {
+			foldedValue += slice.value;
+			continue;
+		}
+		kept.push({
+			sliceKey: slice.sliceKey,
+			label: getSliceLabel(slice.sliceKey),
+			value: slice.value,
+			explicit: getSliceColor?.(slice.sliceKey),
+			isAggregated: false
+		});
+	}
+	if (foldedValue > 0) kept.push({
+		sliceKey: null,
+		label: aggregatedLabel,
+		value: foldedValue,
+		isAggregated: true
+	});
+	const maxInset = kept.reduce((min, slice) => Math.min(min, slice.value), Infinity) / total * 2 * Math.PI * PIE_MAX_INSET_SHARE / 2;
+	const solvedInnerRadius = gapWidth > 0 && maxInset > 0 ? gapWidth / 2 / Math.sin(maxInset) : 0;
+	const innerRadius = Math.max(requestedInnerRadius, Math.min(solvedInnerRadius, outerRadius * PIE_MAX_AUTO_INNER_RATIO));
+	const layout = pie().sort(null).value((slice) => slice.value).padAngle(padAngle);
+	const arcGenerator = arc().innerRadius(innerRadius).outerRadius(outerRadius).cornerRadius(cornerRadius);
+	return {
+		arcs: layout(kept).map((slot) => {
+			const slice = slot.data;
+			const midAngle = (slot.startAngle + slot.endAngle) / 2;
+			const anchorRadius = outerRadius + 8;
+			return {
+				id: slice.isAggregated ? AGGREGATED_SLICE_KEY : slice.sliceKey,
+				label: slice.label,
+				value: slice.value,
+				share: slice.value / total,
+				path: arcGenerator({
+					startAngle: slot.startAngle,
+					endAngle: slot.endAngle,
+					padAngle: slot.padAngle
+				}) ?? "",
+				anchorX: centerX + Math.sin(midAngle) * anchorRadius,
+				anchorY: centerY - Math.cos(midAngle) * anchorRadius,
+				color: resolveColor({
+					sliceKey: slice.sliceKey,
+					explicit: slice.explicit
+				})
+			};
+		}),
+		centerX,
+		centerY,
+		innerRadius
+	};
+}
+//#endregion
+export { buildPieChartGeometry };