@galaxy-io/dls 1.6.1 → 2.0.1

package/dist/charts/LineChart.js

@@ -1,44 +1,62 @@
-import { ChartKind, ChartTargetShape, LineChartCurve } from "./types.js";
-import { LINE_AREA_OPACITY, LINE_POINT_RADIUS } from "./constants.js";
-import { useSeriesColorResolver } from "./useSeriesColorResolver.js";
-import { useChartInteraction } from "./useChartInteraction.js";
-import { useCartesianChartLayout } from "./useCartesianChartLayout.js";
-import { buildLineChartGeometry, getLineValueDomain } from "./lineChartGeometry.js";
-import { ChartAreaPath, ChartCursorLine, ChartLinePath, ChartPointCircle } from "./ChartPrimitives.js";
-import ChartFrame from "./ChartFrame.js";
+import { Orientation } from "../theme/enums.js";
+import { ChartCurve, ChartKind, ChartLegendPlacement, ChartTargetShape } from "./types.js";
+import { CHART_CURSOR_LINE_CSS, CHART_CURSOR_LINE_SELECTED_CSS, CHART_MARK_STATE_TO_CSS_MAP, CHART_POINT_CSS } from "./ChartPrimitives.js";
+import { LINE_POINT_RADIUS } from "./constants.js";
 import { ChartCategoryAxis, ChartValueAxis } from "./ChartAxis.js";
-import { useCallback, useMemo, useRef } from "react";
+import { ChartLegendSwatch } from "./ChartLegend.js";
+import { ChartFrame } from "./ChartFrame.js";
+import { formatChartValue } from "./chartFormat.js";
+import { buildLineChartGeometry, getLineValueDomain, getStackedLineValueDomain, hasNoReadings } from "./lineChartGeometry.js";
+import { useCartesianChartLayout } from "./useCartesianChartLayout.js";
+import { useChartInteraction } from "./useChartInteraction.js";
+import { useSeriesColorResolver } from "./useSeriesColorResolver.js";
+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/LineChart.tsx
 /**
-* Line chart over a categorical x-axis.
+* LineChart plots one or more series as lines over a categorical x-axis (hours, days, releases)
+* so a reader can compare trends. Each line is a series named in the `series` record and colored
+* from `ChartPalette`; a `null` reading breaks the line instead of dropping to zero. Hover or
+* keyboard focus works per category column: a cursor rule marks the column, every line shows its
+* dot there, and the tooltip lists every line's value. Clicks and Enter report the category
+* through `onSelect`; with `isFilterable` they also pin it, and legend clicks pin a line. It joins
+* `ChartGroupProvider` sync.
 *
-* Hit testing is per category column rather than per stroke: the tooltip
-* reports every line at the hovered category at once, which is almost always
-* what a reader wants, and it avoids the proximity search a
-* nearest-point-to-cursor model needs.
+* Filled series are `AreaChart`; inline trends without axes are `Sparkline`. 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`.
+*/
+/** @internal How `LineChartRoot` fills under its lines. */
+var LineChartFill = /* @__PURE__ */ function(LineChartFill) {
+	/** Lines only (LineChart). */
+	LineChartFill["NONE"] = "NONE";
+	/** A translucent area to the baseline (AreaChart). */
+	LineChartFill["AREA"] = "AREA";
+	return LineChartFill;
+}({});
+var DEFAULT_PLACEHOLDER = "No data available";
+/**
+* @internal Shared by LineChart and AreaChart; apps use those. One engine, two public
+* components, no public mode prop (the `MenuRoot` precedent).
 */
-var LineChart = ({ series, lines, categories, width, height, fillWidth, fillHeight, aspectRatio, margin, curve = LineChartCurve.SMOOTH, strokeWidth, 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 }) => {
-	const containerRef = useRef(null);
+function LineChartRootInner(props, ref) {
+	const { series, lines, categories, curve = ChartCurve.SMOOTH, fill, isStacked, kind, 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);
 	const { dimensions, domain, valueTicks, formatValue, formatLabel } = useCartesianChartLayout({
-		containerRef,
-		rawDomain: useMemo(() => getLineValueDomain(lines), [lines]),
+		plotRef,
+		rawDomain: useMemo(() => isStacked ? getStackedLineValueDomain(lines, categories) : getLineValueDomain(lines), [
+			isStacked,
+			lines,
+			categories
+		]),
 		valueDomain,
-		width,
-		height,
-		fillWidth,
-		fillHeight,
-		aspectRatio,
-		margin,
-		valueUnit,
 		valueFormatter,
 		labelFormatter,
-		valueAxisTitle,
-		categoryAxisTitle
+		axisLabels
 	});
 	const { plotWidth, plotHeight } = dimensions;
-	const resolveColor = useCallback(({ metric }) => colors.resolve(metric), [colors]);
 	const geometry = useMemo(() => buildLineChartGeometry({
 		lines,
 		categories,
@@ -46,8 +64,9 @@ var LineChart = ({ series, lines, categories, width, height, fillWidth, fillHeig
 		plotHeight,
 		curve,
 		domain,
-		strokeWidth,
-		resolveColor
+		hasArea: fill === "AREA",
+		isStacked,
+		resolveColor: colors.resolve
 	}), [
 		lines,
 		categories,
@@ -55,38 +74,63 @@ var LineChart = ({ series, lines, categories, width, height, fillWidth, fillHeig
 		plotHeight,
 		curve,
 		domain,
-		strokeWidth,
-		resolveColor
+		fill,
+		isStacked,
+		colors.resolve
 	]);
-	const isEmpty = geometry.categories.length === 0 || lines.length === 0;
-	const legendItems = useMemo(() => colors.keys.map((metric) => ({
-		key: metric,
-		label: series[metric].label,
-		color: colors.resolve(metric)
-	})), [colors, series]);
-	const legendKeys = useMemo(() => legendItems.map((item) => item.key), [legendItems]);
+	const isEmpty = geometry.categories.length === 0 || lines.length === 0 || hasNoReadings(lines);
+	const legendItems = useMemo(() => colors.keys.map((key) => {
+		const color = colors.resolve(key);
+		return {
+			key,
+			label: series[key]?.label ?? key,
+			...color.palette !== void 0 && { palette: color.palette },
+			...color.hex !== void 0 && { hex: color.hex }
+		};
+	}), [colors, series]);
+	const seriesKeys = useMemo(() => legendItems.map((item) => item.key), [legendItems]);
 	const interaction = useChartInteraction({
-		categoryCount: geometry.columns.length,
-		seriesKeys: legendKeys,
+		categoryCount: geometry.categories.length,
+		seriesKeys,
 		categoryKeys: geometry.categories,
 		selection,
-		isDisabled: noTooltip || isLoading || isEmpty,
+		isFilterable,
+		defaultSelection,
+		onSelectionChange,
+		isDisabled: !(hasTooltip || onSelect || isFilterable) || isLoading || isEmpty,
 		isLoading
 	});
-	const activeColumn = interaction.activeIndex === null ? null : geometry.columns[interaction.activeIndex];
+	const activeColumn = interaction.activeIndex === null ? void 0 : geometry.columns[interaction.activeIndex];
 	const buildCategoryTooltip = useCallback((index) => {
 		const column = geometry.columns[index];
 		if (!column) return null;
-		const rows = [...column.points].sort((a, b) => b.value - a.value).map((point) => ({
+		const label = (metric) => series[metric]?.label ?? metric;
+		const gapRow = (metric) => ({
+			key: `${metric}:gap`,
+			label: label(metric),
+			value: null,
+			formattedValue: formatChartValue(null, formatValue),
+			color: colors.resolve(metric).color
+		});
+		const pointRow = (point) => ({
 			key: point.id,
-			label: series[point.metric]?.label ?? point.metric,
+			label: label(point.metric),
 			value: point.value,
-			formattedValue: formatValue(point.value),
-			color: point.color
-		}));
+			formattedValue: formatChartValue(point.value, formatValue),
+			color: point.color.color
+		});
+		let rows;
+		if (isStacked) rows = [...lines].reverse().map((lineDatum) => {
+			const point = column.points.find((item) => item.metric === lineDatum.metric);
+			return point ? pointRow(point) : gapRow(lineDatum.metric);
+		});
+		else {
+			rows = [...column.points].sort((a, b) => b.value - a.value).map(pointRow);
+			for (const metric of column.gaps) rows.push(gapRow(metric));
+		}
 		return {
 			label: formatLabel(column.label),
-			rows,
+			rows: column.points.length === 0 ? [] : rows,
 			anchorX: column.x,
 			anchorY: column.anchorY
 		};
@@ -94,7 +138,10 @@ var LineChart = ({ series, lines, categories, width, height, fillWidth, fillHeig
 		geometry.columns,
 		series,
 		formatValue,
-		formatLabel
+		formatLabel,
+		colors,
+		isStacked,
+		lines
 	]);
 	const categoryPositions = useMemo(() => geometry.columns.map((column) => column.x - geometry.step / 2), [geometry.columns, geometry.step]);
 	const categoryTargets = useMemo(() => geometry.columns.map((column) => ({
@@ -105,114 +152,120 @@ var LineChart = ({ series, lines, categories, width, height, fillWidth, fillHeig
 		width: column.bandWidth,
 		height: plotHeight
 	})), [geometry.columns, plotHeight]);
-	const handleCategorySelect = useCallback((index) => {
-		const category = geometry.categories[index];
-		if (category === void 0 || !onSelect) return;
-		onSelect({
+	const { toggleSelection } = interaction;
+	const handleCategorySelect = useCallback((index, isAdditive = false) => {
+		const categoryKey = geometry.categories[index];
+		if (categoryKey === void 0) return;
+		onSelect?.({
 			categoryIndex: index,
-			categoryKey: category
+			categoryKey
 		});
-	}, [geometry.categories, onSelect]);
-	/**
-	* Columns the selection names, resolved once.
-	*
-	* These get the cursor and the dots permanently — the same treatment hovering
-	* gives, one step firmer on the same neutral ramp, which is the whole
-	* difference the held stroke has to communicate.
-	*/
-	const selectedColumns = useMemo(() => geometry.columns.filter((column) => interaction.selectedCategoryIndices.has(column.categoryIndex)), [geometry.columns, interaction.selectedCategoryIndices]);
+		toggleSelection({ categoryKey }, isAdditive);
+	}, [
+		geometry.categories,
+		onSelect,
+		toggleSelection
+	]);
+	const selectedColumns = geometry.columns.filter((column) => interaction.selectedCategoryIndices.has(column.categoryIndex));
+	const point = (item, keyPrefix = "") => /* @__PURE__ */ jsx("circle", {
+		cx: item.x,
+		cy: item.y,
+		r: LINE_POINT_RADIUS,
+		className: cx(CHART_POINT_CSS, CHART_MARK_STATE_TO_CSS_MAP[interaction.getMarkState({ seriesKey: item.metric })]),
+		style: { "--gx-chart-mark-color": item.color.color }
+	}, `${keyPrefix}${item.id}`);
 	return /* @__PURE__ */ jsxs(ChartFrame, {
-		containerRef,
+		rootRef: ref,
+		plotRef,
+		id,
+		className,
+		style,
+		rest,
 		dimensions,
-		fillWidth,
-		fillHeight,
 		interaction,
-		kind: ChartKind.LINE,
+		kind,
 		categoryCount: geometry.categories.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: formatValue,
-			showGrid,
-			title: valueAxisTitle
+			title: axisLabels?.value
 		}), /* @__PURE__ */ jsx(ChartCategoryAxis, {
 			labels: geometry.categories,
 			positions: categoryPositions,
 			step: geometry.step,
 			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,
-		onCategorySelect: onSelect && handleCategorySelect,
+		onCategorySelect: onSelect || isFilterable ? handleCategorySelect : void 0,
 		anchorHalfWidth: geometry.step / 2,
 		isEmpty,
 		isLoading,
-		contentWhenEmpty,
-		showLegend,
+		placeholder,
+		hasLegend,
+		formatCategoryKey: formatLabel,
 		legendItems,
-		legendMaxItems,
+		legendPlacement: ChartLegendPlacement.BOTTOM,
+		legendSwatch: kind === ChartKind.AREA ? ChartLegendSwatch.SQUARE : ChartLegendSwatch.CIRCLE,
 		children: [
-			geometry.paths.map((linePath) => linePath.areaPath ? /* @__PURE__ */ jsx(ChartAreaPath, {
-				d: linePath.areaPath,
-				fill: linePath.color,
-				fillOpacity: LINE_AREA_OPACITY,
-				"data-state": interaction.getMarkState({ seriesKey: linePath.metric })
-			}, `${linePath.id}:area`) : null),
-			selectedColumns.map((column) => /* @__PURE__ */ jsx(ChartCursorLine, {
+			!isEmpty && geometry.paths.map((path) => path.areaPath ? /* @__PURE__ */ jsx("path", {
+				d: path.areaPath,
+				className: cx("gx-ChartPrimitives-CHART_AREA_CSS-c10uj5yt", isStacked ? "gx-ChartPrimitives-CHART_AREA_STACKED_CSS-c1ob2op2" : "gx-ChartPrimitives-CHART_AREA_OVERLAP_CSS-cyuty3o", CHART_MARK_STATE_TO_CSS_MAP[interaction.getMarkState({ seriesKey: path.metric })]),
+				style: { "--gx-chart-mark-color": path.color.color }
+			}, `${path.id}:area`) : null),
+			selectedColumns.map((column) => /* @__PURE__ */ jsx("line", {
 				x1: column.x,
 				x2: column.x,
 				y1: 0,
 				y2: plotHeight,
-				"data-selected": "true"
+				className: cx(CHART_CURSOR_LINE_CSS, CHART_CURSOR_LINE_SELECTED_CSS)
 			}, `selected:${column.categoryIndex}`)),
-			showCursor && activeColumn && /* @__PURE__ */ jsx(ChartCursorLine, {
+			activeColumn && /* @__PURE__ */ jsx("line", {
 				x1: activeColumn.x,
 				x2: activeColumn.x,
 				y1: 0,
-				y2: plotHeight
+				y2: plotHeight,
+				className: "gx-ChartPrimitives-CHART_CURSOR_LINE_CSS-cwcko2m"
 			}),
-			geometry.paths.map((linePath) => /* @__PURE__ */ jsx(ChartLinePath, {
-				d: linePath.path,
-				stroke: linePath.color,
-				strokeWidth: linePath.strokeWidth,
-				strokeDasharray: linePath.dashArray,
-				"data-state": interaction.getMarkState({ seriesKey: linePath.metric })
-			}, linePath.id)),
-			geometry.isolatedPoints.map((point) => /* @__PURE__ */ jsx(ChartPointCircle, {
-				cx: point.x,
-				cy: point.y,
-				r: LINE_POINT_RADIUS,
-				fill: point.color,
-				"data-state": interaction.getMarkState({ seriesKey: point.metric })
-			}, `${point.id}:isolated`)),
-			activeColumn?.points.map((point) => /* @__PURE__ */ jsx(ChartPointCircle, {
-				cx: point.x,
-				cy: point.y,
-				r: LINE_POINT_RADIUS,
-				fill: point.color,
-				"data-state": interaction.getMarkState({ seriesKey: point.metric })
-			}, point.id)),
-			selectedColumns.filter((column) => column.categoryIndex !== activeColumn?.categoryIndex).flatMap((column) => column.points.map((point) => /* @__PURE__ */ jsx(ChartPointCircle, {
-				cx: point.x,
-				cy: point.y,
-				r: LINE_POINT_RADIUS,
-				fill: point.color,
-				"data-state": interaction.getMarkState({ seriesKey: point.metric })
-			}, `selected:${point.id}`)))
+			!isEmpty && geometry.paths.map((path) => /* @__PURE__ */ jsx("path", {
+				d: path.path,
+				className: cx("gx-ChartPrimitives-CHART_LINE_CSS-c1hcga6s", path.isDashed && "gx-ChartPrimitives-CHART_LINE_DASHED_CSS-c1fvbgkp", CHART_MARK_STATE_TO_CSS_MAP[interaction.getMarkState({ seriesKey: path.metric })]),
+				style: { "--gx-chart-mark-color": path.color.color }
+			}, path.id)),
+			geometry.isolatedPoints.map((item) => point(item, "isolated:")),
+			activeColumn?.points.map((item) => point(item)),
+			selectedColumns.filter((column) => column.categoryIndex !== activeColumn?.categoryIndex).flatMap((column) => column.points.map((item) => point(item, "selected:")))
 		]
 	});
-};
+}
+var LineChartRootForwarded = forwardRef(LineChartRootInner);
+LineChartRootForwarded.displayName = "LineChartRoot";
+/** @internal Shared by LineChart and AreaChart; apps use those. */
+var LineChartRoot = LineChartRootForwarded;
+var LineChartInner = forwardRef(function LineChart(props, ref) {
+	return /* @__PURE__ */ jsx(LineChartRoot, {
+		...props,
+		ref,
+		fill: "NONE",
+		isStacked: false,
+		kind: ChartKind.LINE
+	});
+});
+LineChartInner.displayName = "LineChart";
+/** Lines over a categorical x-axis. */
+var LineChart = LineChartInner;
 //#endregion
-export { LineChart as default };
+export { LineChartFill, LineChartRoot, LineChart as default };

package/dist/charts/PieChart.d.ts

@@ -1,65 +1,44 @@
-import type { ReactNode } from "react";
-import { AGGREGATED_SLICE_KEY } from "./constants";
-import type { BaseChartProps, ChartSelectionEvent, ChartSelectionInput, ChartSeriesStyles, ChartSize, PieChartSliceDatum } from "./types";
-export type PieChartProps<TSlice extends string> = BaseChartProps & ChartSize & {
-    /**
-     * Presentation for every slice, keyed by slice.
-     *
-     * `TSlice` is inferred from these keys alone — `slices` wraps it in
-     * `NoInfer` — so a mistyped key is a compile error rather than a slice that
-     * silently fails to draw.
-     */
+import { type ReactElement, type ReactNode, type RefAttributes } from "react";
+import { type BaseChartProps, type ChartSeriesStyles } from "./types.js";
+/** One slice. */
+export interface PieChartSliceDatum<TSlice extends string> {
+    /** Which slice this is; a key of `series`. */
+    key: TSlice;
+    /** Magnitude. Negative values are drawn as 0 (a part of a whole cannot be negative). */
+    value: number;
+}
+/** Key of the folded "Other" slice in `onSelect` events and `selection`. */
+export type PieChartAggregatedKey = "__other__";
+/** PieChart's own props; the shared chart props follow (`BaseChartProps`). */
+interface PieChartOwnProps<TSlice extends string> {
+    /** Label and color for every slice, keyed by slice. `TSlice` is inferred from these keys only. */
     series: ChartSeriesStyles<TSlice>;
-    /** Slices, rendered clockwise from 12 o'clock in array order. */
+    /** Slices, clockwise from 12 o'clock in array order. Negative values count as 0. */
     slices: PieChartSliceDatum<NoInfer<TSlice>>[];
     /**
-     * Hole size as a fraction of the outer radius, 0–1.
-     * `0` is a solid pie. Defaults to a donut.
+     * Draw a solid pie instead of a donut.
+     * @default false
      */
-    innerRadiusRatio?: number;
-    /** Gap between slices, in radians. */
-    padAngle?: number;
-    /** Slice corner radius in px. */
-    cornerRadius?: number;
+    isSolid?: boolean;
     /**
-     * Slices below this share of the total are folded into one bucket.
-     * Set `0` to render every slice faithfully.
+     * Slices under this share of the total fold into one "Other" slice. `0` draws every slice.
+     * @default 0.02
      */
     minSliceShare?: number;
-    /** Label for the folded bucket. @default "Other" */
-    aggregatedLabel?: string;
-    /**
-     * Content for the donut hole — a total, a headline percentage.
-     * Ignored when `innerRadiusRatio` is 0.
-     */
-    centerContent?: ReactNode;
-    /**
-     * Fires when a slice is clicked. Supplying it is what makes the plot
-     * clickable.
-     *
-     * `categoryKey` and `seriesKey` are always the same value here: a pie's
-     * category axis *is* its series axis, and the arcs are already its hit
-     * targets, so there is no coarser fallback to take. Clicking the folded
-     * bucket reports {@link AGGREGATED_SLICE_KEY}, which the key union says
-     * outright rather than widening to `string`.
-     */
-    onSelect?: (event: ChartSelectionEvent<NoInfer<TSlice> | typeof AGGREGATED_SLICE_KEY>) => void;
     /**
-     * Which arcs read as selected. Matching arcs hold full strength and the
-     * rest recede — the lone lit slice is unambiguous, so there is no band or
-     * outline on top of it.
-     *
-     * Presentational and never written by the chart: the state belongs to
-     * whatever the selection is filtering, so the two cannot drift apart.
+     * Label of the folded slice.
+     * @default Other
      */
-    selection?: ChartSelectionInput<NoInfer<TSlice> | typeof AGGREGATED_SLICE_KEY>;
-};
+    aggregatedLabel?: string;
+    /** Content centered in the donut hole: a total, a headline figure. Ignored with `isSolid`. */
+    children?: ReactNode;
+}
+export type PieChartProps<TSlice extends string> = PieChartOwnProps<TSlice> & BaseChartProps<NoInfer<TSlice> | PieChartAggregatedKey>;
 /**
- * Pie and donut chart.
- *
- * Unlike the cartesian charts there is no category axis to hit-test against, so
- * each arc is its own target. Small slices are folded into an "Other" bucket by
- * default, which keeps every remaining arc large enough to actually hit.
+ * The public, generic call signature (`TSlice` inferred from `series`). Never called: it only
+ * types the default export. An arrow function so react-docgen-typescript reads the props.
  */
-declare const PieChart: <TSlice extends string>({ series, slices, width, height, fillWidth, fillHeight, aspectRatio, margin, innerRadiusRatio, padAngle, cornerRadius, minSliceShare, aggregatedLabel, centerContent, onSelect, selection, valueUnit, valueFormatter, labelFormatter, showLegend, legendMaxItems, noTooltip, tooltipRenderer, tooltipMaxItems, isLoading, contentWhenEmpty, ariaLabel, ariaDescription, }: PieChartProps<TSlice>) => import("react").JSX.Element;
+declare const PIE_CHART_SIGNATURE: <TSlice extends string>(_props: PieChartProps<TSlice> & RefAttributes<HTMLDivElement>) => ReactElement | null;
+/** A donut (or solid pie) of a few parts of one whole. */
+declare const PieChart: typeof PIE_CHART_SIGNATURE;
 export default PieChart;