@galaxy-io/dls 1.6.1 → 2.0.0

package/dist/charts/PieChart.js

@@ -1,189 +1,203 @@
-import FlexWrapper, { AlignItems, FlexDirection, JustifyContent } from "../containers/FlexWrapper.js";
+import Text, { TextSize, TextWeight } from "../text/Text.js";
 import { ChartKind, ChartLegendPlacement, ChartTargetShape } from "./types.js";
-import { PIE_CHART_MARGIN, PIE_MIN_SLICE_SHARE } from "./constants.js";
-import { useSeriesColorResolver } from "./useSeriesColorResolver.js";
+import { CHART_ARC_CSS, CHART_MARK_STATE_TO_CSS_MAP } from "./ChartPrimitives.js";
+import { RADIAL_PLOT_INSET } from "./constants.js";
+import { ChartLegendSwatch } from "./ChartLegend.js";
 import { ChartTooltipVerticalAlign } from "./useChartTooltipPosition.js";
-import { useChartInteraction } from "./useChartInteraction.js";
-import { useChartFormatters } from "./useChartFormatters.js";
+import { ChartFrame } from "./ChartFrame.js";
+import { formatNumber, formatPercent } from "../utils/format.js";
 import { useChartDimensions } from "./useChartDimensions.js";
-import { buildPieChartGeometry } from "./pieChartGeometry.js";
-import { ChartArcPath, ChartCenterBox } from "./ChartPrimitives.js";
-import ChartFrame from "./ChartFrame.js";
-import { useCallback, useMemo, useRef } from "react";
+import { useChartFormatters } from "./useChartFormatters.js";
+import { useChartInteraction } from "./useChartInteraction.js";
+import { useSeriesColorResolver } from "./useSeriesColorResolver.js";
+import { PIE_MIN_SLICE_SHARE, buildPieChartGeometry, resolvePieChartSlices } from "./pieChartGeometry.js";
+/* empty css                   */
+import { styled } from "@linaria/react";
+import { forwardRef, useCallback, useMemo, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
 //#region src/charts/PieChart.tsx
 /**
-* Pie and donut chart.
+* PieChart shows how a whole splits into a few parts, as a donut (the default) or a solid pie.
+* Slices are named in the `series` record and colored from `ChartPalette`;
+* slices under `minSliceShare` fold into one neutral "Other" slice so every remaining arc is
+* readable and hittable. The donut hole holds `children` (a total, a headline figure). The legend
+* sits beside the plot. Hover and keyboard work per slice; a click or Enter reports the slice. It
+* never joins `ChartGroupProvider` sync (it has no category axis).
 *
-* 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 chart fills its parent (2:1 when the parent has no definite height). Needs the optional
+* peers `d3-scale` and `d3-shape`.
 */
-var PieChart = ({ series, slices, width, height, fillWidth, fillHeight, aspectRatio, margin, innerRadiusRatio, padAngle, cornerRadius, minSliceShare = PIE_MIN_SLICE_SHARE, aggregatedLabel, centerContent, onSelect, selection, valueUnit, valueFormatter, labelFormatter, showLegend = true, legendMaxItems, noTooltip = false, tooltipRenderer, tooltipMaxItems, isLoading = false, contentWhenEmpty, ariaLabel, ariaDescription }) => {
-	const containerRef = useRef(null);
+var DEFAULT_PLACEHOLDER = "No data available";
+var DEFAULT_AGGREGATED_LABEL = "Other";
+var PLOT_INSETS = {
+	top: RADIAL_PLOT_INSET,
+	right: RADIAL_PLOT_INSET,
+	bottom: RADIAL_PLOT_INSET,
+	left: RADIAL_PLOT_INSET
+};
+/** The plot box takes the root's full height (the side-legend row centers its items). */
+var PLOT_CSS = "gx-PieChart-PLOT_CSS-p1ez9f1";
+/** Beside a legend the plot box is square (its height), so the legend sits next to the circle. */
+var SQUARE_PLOT_CSS = "gx-PieChart-SQUARE_PLOT_CSS-smxszqr";
+/** The donut hole's content box: the inscribed square of the hole, centered on the pie. */
+var CenterBox = /*#__PURE__*/ styled("div")({
+	name: "CenterBox",
+	class: "gx-PieChart-CenterBox-c158myaw",
+	propsAsIs: false
+});
+function PieChartInner(props, ref) {
+	const { series, slices, isSolid = false, minSliceShare = PIE_MIN_SLICE_SHARE, aggregatedLabel = DEFAULT_AGGREGATED_LABEL, children, valueFormatter, hasLegend = true, hasTooltip = true, renderTooltip, isLoading = false, placeholder = DEFAULT_PLACEHOLDER, onSelect, selection, ariaLabel, id, className, style, ...rest } = props;
+	const plotRef = useRef(null);
 	const colors = useSeriesColorResolver(series);
-	const dimensions = useChartDimensions({
-		containerRef,
-		width: showLegend && width !== void 0 && height !== void 0 ? Math.min(width, height) : width,
-		height,
-		fillWidth,
-		fillHeight,
-		aspectRatio,
-		margin,
-		defaultMargin: PIE_CHART_MARGIN
-	});
-	const { plotWidth, plotHeight } = dimensions;
-	const { formatValue, formatLabel } = useChartFormatters({
-		valueFormatter,
-		valueUnit,
-		labelFormatter
-	});
-	const getSliceLabel = useCallback((sliceKey) => series[sliceKey]?.label ?? sliceKey, [series]);
-	const getSliceColor = useCallback((sliceKey) => series[sliceKey]?.color, [series]);
-	const resolveColor = useCallback(({ sliceKey, explicit }) => sliceKey === null ? colors.neutral : colors.resolve(sliceKey, explicit), [colors]);
-	const geometry = useMemo(() => buildPieChartGeometry({
+	const dimensions = useChartDimensions(plotRef, PLOT_INSETS);
+	const { plotWidth, plotHeight, insets } = dimensions;
+	const { formatValue } = useChartFormatters(valueFormatter);
+	const resolveColor = useCallback((sliceKey) => sliceKey === null ? colors.neutral : colors.resolve(sliceKey), [colors]);
+	const getSliceLabel = useCallback((key) => series[key]?.label ?? key, [series]);
+	const resolvedSlices = useMemo(() => resolvePieChartSlices({
 		slices,
-		plotWidth,
-		plotHeight,
-		innerRadiusRatio,
-		padAngle,
-		cornerRadius,
 		minSliceShare,
 		aggregatedLabel,
 		resolveColor,
-		getSliceColor,
 		getSliceLabel
 	}), [
 		slices,
-		plotWidth,
-		plotHeight,
-		innerRadiusRatio,
-		padAngle,
-		cornerRadius,
 		minSliceShare,
 		aggregatedLabel,
 		resolveColor,
-		getSliceColor,
 		getSliceLabel
 	]);
-	const isEmpty = geometry.arcs.length === 0;
-	const legendItems = useMemo(() => geometry.arcs.map((chartArc) => ({
-		key: chartArc.id,
-		label: formatLabel(chartArc.label),
-		color: chartArc.color
-	})), [geometry.arcs, formatLabel]);
-	const legendKeys = useMemo(() => legendItems.map((item) => item.key), [legendItems]);
+	const geometry = useMemo(() => buildPieChartGeometry({
+		slices: resolvedSlices,
+		plotWidth,
+		plotHeight,
+		isSolid
+	}), [
+		resolvedSlices,
+		plotWidth,
+		plotHeight,
+		isSolid
+	]);
+	const isEmpty = !slices.some((slice) => Number.isFinite(slice.value) && slice.value > 0);
+	const legendItems = useMemo(() => resolvedSlices.map((item) => ({
+		key: item.id,
+		label: item.label,
+		...item.color.palette !== void 0 && { palette: item.color.palette },
+		...item.color.hex !== void 0 && { hex: item.color.hex }
+	})), [resolvedSlices]);
+	const arcKeys = useMemo(() => legendItems.map((item) => item.key), [legendItems]);
 	const interaction = useChartInteraction({
-		categoryCount: geometry.arcs.length,
-		seriesKeys: legendKeys,
-		categoryKeys: legendKeys,
+		categoryCount: resolvedSlices.length,
+		seriesKeys: arcKeys,
+		categoryKeys: arcKeys,
 		enableGroupSync: false,
 		selection,
-		isDisabled: noTooltip || isLoading || isEmpty,
+		isDisabled: !(hasTooltip || onSelect) || isLoading || isEmpty,
 		isLoading
 	});
 	const buildCategoryTooltip = useCallback((index) => {
-		const chartArc = geometry.arcs[index];
-		if (!chartArc) return null;
+		const item = geometry.arcs[index];
+		if (!item) return null;
 		return {
-			label: formatLabel(chartArc.label),
+			label: item.label,
 			rows: [{
-				key: chartArc.id,
-				label: `${Math.round(chartArc.share * 1e3) / 10}% of total`,
-				value: chartArc.value,
-				formattedValue: formatValue(chartArc.value),
-				color: chartArc.color
+				key: item.id,
+				label: item.label,
+				value: item.value,
+				formattedValue: `${formatValue(item.value)} · ${formatPercent(item.share)}`,
+				color: item.color.color
 			}],
-			anchorX: chartArc.anchorX,
-			anchorY: chartArc.anchorY
+			anchorX: item.anchorX,
+			anchorY: item.anchorY
 		};
-	}, [
-		geometry.arcs,
-		formatValue,
-		formatLabel
-	]);
-	/**
-	* Targets reuse each arc's own `d`, drawn again transparent above the marks.
-	*
-	* The arcs themselves stay pure marks: hit testing then works identically on
-	* all three charts, instead of the pie hit-testing its visible arcs directly.
-	*/
-	const categoryTargets = useMemo(() => geometry.arcs.map((chartArc) => ({
-		key: chartArc.id,
+	}, [geometry.arcs, formatValue]);
+	const describeCategory = useCallback((index) => {
+		const item = resolvedSlices[index];
+		if (!item) return "";
+		const share = formatNumber(item.share * 100, { precision: 1 });
+		return `${item.label}. ${formatValue(item.value)}, ${share} percent.`;
+	}, [resolvedSlices, formatValue]);
+	const categoryTargets = useMemo(() => geometry.arcs.map((item) => ({
+		key: item.id,
 		shape: ChartTargetShape.PATH,
-		d: chartArc.path
+		d: item.path
 	})), [geometry.arcs]);
-	const handleCategorySelect = useCallback((index) => {
-		const chartArc = geometry.arcs[index];
-		if (!chartArc || !onSelect) return;
-		const key = chartArc.id;
+	const handleSelect = useCallback((index) => {
+		const item = resolvedSlices[index];
+		if (!item || !onSelect) return;
 		onSelect({
 			categoryIndex: index,
-			categoryKey: chartArc.id,
-			seriesKey: key,
-			value: chartArc.value
+			categoryKey: item.id,
+			seriesKey: item.id,
+			value: item.value
 		});
-	}, [geometry.arcs, onSelect]);
-	const showCenter = centerContent && (innerRadiusRatio ?? .62) > 0;
+	}, [resolvedSlices, onSelect]);
+	const passedAriaLabel = typeof rest["aria-label"] === "string" ? rest["aria-label"] : void 0;
+	const resolvedAriaLabel = ariaLabel ?? passedAriaLabel ?? `${isSolid ? "Pie" : "Donut"} chart, ${resolvedSlices.length} slices`;
+	const hasCenter = !isSolid && children !== void 0 && children !== null && !isEmpty;
+	const centerSize = Math.max(0, geometry.innerRadius * Math.SQRT2);
+	const center = hasCenter ? /* @__PURE__ */ jsx(CenterBox, {
+		style: {
+			"--gx-pie-center-x": `${insets.left + geometry.centerX}px`,
+			"--gx-pie-center-y": `${insets.top + geometry.centerY}px`,
+			"--gx-pie-center-size": `${centerSize}px`
+		},
+		children: typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsx(Text, {
+			size: TextSize.HEADING_MD,
+			weight: TextWeight.MEDIUM,
+			isTabular: true,
+			children
+		}) : children
+	}) : null;
+	const centerTransform = `translate(${geometry.centerX}, ${geometry.centerY})`;
 	return /* @__PURE__ */ jsx(ChartFrame, {
-		containerRef,
+		rootRef: ref,
+		plotRef,
+		id,
+		className,
+		style,
+		rest,
 		dimensions,
-		fillWidth,
-		fillHeight,
 		interaction,
 		kind: ChartKind.PIE,
-		categoryCount: geometry.arcs.length,
-		ariaLabel,
-		ariaDescription,
-		noTooltip,
+		categoryCount: resolvedSlices.length,
+		ariaLabel: resolvedAriaLabel,
+		aspectRatio: 2,
+		plotOverlay: center,
+		plotClassName: cx(PLOT_CSS, hasLegend && SQUARE_PLOT_CSS),
+		describeCategory,
+		hasTooltip,
 		buildCategoryTooltip,
-		tooltipRenderer,
-		tooltipMaxItems,
+		renderTooltip,
 		categoryTargets,
-		onCategorySelect: onSelect && handleCategorySelect,
-		categoryTargetsTransform: `translate(${geometry.centerX}, ${geometry.centerY})`,
+		targetsTransform: centerTransform,
+		onCategorySelect: onSelect && handleSelect,
 		placeAwayFromX: geometry.centerX,
 		verticalAlign: ChartTooltipVerticalAlign.CENTERED,
 		isEmpty,
 		isLoading,
-		contentWhenEmpty,
-		showLegend,
+		placeholder,
+		hasLegend,
 		legendItems,
-		legendMaxItems,
 		legendPlacement: ChartLegendPlacement.RIGHT,
-		plotOverlay: showCenter && !isEmpty ? /* @__PURE__ */ jsx(ChartDonutCenter, {
-			centerX: dimensions.margin.left + geometry.centerX,
-			centerY: dimensions.margin.top + geometry.centerY,
-			diameter: geometry.innerRadius * 2,
-			children: centerContent
-		}) : null,
+		legendSwatch: ChartLegendSwatch.SQUARE,
 		children: /* @__PURE__ */ jsx("g", {
-			transform: `translate(${geometry.centerX}, ${geometry.centerY})`,
-			children: geometry.arcs.map((chartArc, index) => /* @__PURE__ */ jsx(ChartArcPath, {
-				d: chartArc.path,
-				fill: chartArc.color,
-				"data-state": interaction.getMarkState({
+			transform: centerTransform,
+			children: geometry.arcs.map((item, index) => /* @__PURE__ */ jsx("path", {
+				d: item.path,
+				className: cx(CHART_ARC_CSS, CHART_MARK_STATE_TO_CSS_MAP[interaction.getMarkState({
 					categoryIndex: index,
-					seriesKey: chartArc.id
-				})
-			}, chartArc.id))
+					seriesKey: item.id
+				})]),
+				style: { "--gx-chart-mark-color": item.color.color }
+			}, item.id))
 		})
 	});
-};
-/** Positions arbitrary content inside the donut hole. */
-var ChartDonutCenter = ({ centerX, centerY, diameter, children }) => /* @__PURE__ */ jsx(ChartCenterBox, {
-	$centerX: centerX,
-	$centerY: centerY,
-	$diameter: diameter,
-	children: /* @__PURE__ */ jsx(FlexWrapper, {
-		direction: FlexDirection.COLUMN,
-		justifyContent: JustifyContent.CENTER,
-		alignItems: AlignItems.CENTER,
-		gap: 2,
-		fillWidth: true,
-		fillHeight: true,
-		children
-	})
-});
+}
+var PieChartForwarded = forwardRef(PieChartInner);
+PieChartForwarded.displayName = "PieChart";
+/** A donut (or solid pie) of a few parts of one whole. */
+var PieChart = PieChartForwarded;
 //#endregion
 export { PieChart as default };

package/dist/charts/Sparkline.d.ts

@@ -0,0 +1,107 @@
+import { type AriaAttributes, type CSSProperties } from "react";
+import type { Hex, PaletteColor } from "../theme/tokens/types.js";
+import { type ChartValueDomain } from "./types.js";
+/** Rung of the row the sparkline sits in. Height = control height; default width = 4 × height. */
+export declare enum SparklineSize {
+    /** 20px tall, 80px wide. */
+    X_SMALL = "X_SMALL",
+    /** 24px tall, 96px wide. */
+    SMALL = "SMALL",
+    /** 32px tall, 128px wide. The default. */
+    MEDIUM = "MEDIUM",
+    /** 36px tall, 144px wide. */
+    LARGE = "LARGE",
+    /** 40px tall, 160px wide. */
+    X_LARGE = "X_LARGE"
+}
+/** Color role (Constitution V-A color set; subset). */
+export declare enum SparklineVariant {
+    /** `text.primary`. */
+    PRIMARY = "PRIMARY",
+    /** `text.secondary`. The default. */
+    SECONDARY = "SECONDARY",
+    /** `text.tertiary`. */
+    TERTIARY = "TERTIARY",
+    /** The parent's color (`currentColor`). */
+    INHERIT = "INHERIT",
+    /** Status: success, `text.success`. */
+    SUCCESS = "SUCCESS",
+    /** Status: warning, `text.warning`. */
+    WARNING = "WARNING",
+    /** Status: error, `text.error`. */
+    ERROR = "ERROR"
+}
+/** What the data is drawn as. A named second axis (Article V), not a variant. */
+export declare enum SparklineMark {
+    /** A 1.5px line. The default. */
+    LINE = "LINE",
+    /** One bar per value, from a zero baseline. */
+    BAR = "BAR"
+}
+interface SparklineBaseProps extends AriaAttributes {
+    /** Values in order, left to right. `null` breaks the line (or leaves a bar slot empty). */
+    data: (number | null)[];
+    /**
+     * Draw a line or a row of bars.
+     * @default SparklineMark.LINE
+     */
+    mark?: SparklineMark;
+    /** Raw color for a data-driven color. Discouraged: it does not follow the theme. Overrides `variant` and `color`. */
+    hex?: Hex;
+    /**
+     * Height of the control rung it sits beside (20 / 24 / 32 / 36 / 40px); width is four times the height unless `fillWidth`.
+     * @default SparklineSize.MEDIUM
+     */
+    size?: SparklineSize;
+    /**
+     * Stretch to the parent's width instead of the 4:1 default.
+     * @default false
+     */
+    fillWidth?: boolean;
+    /**
+     * Fix the vertical range so sparklines in a column compare.
+     * @default line: [smallest, largest]; bar: [min(0, smallest), max(0, largest)]
+     */
+    valueDomain?: Partial<Pick<ChartValueDomain, "min" | "max">>;
+    /** Accessible name that states the trend ("Signups, last 30 days, rising"). Without it the sparkline is decorative (`aria-hidden`). */
+    ariaLabel?: string;
+    /** DOM id on the root `<span>`. */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the root `<span>`. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the root `<span>`. */
+    className?: string;
+    /** Inline style on the root `<span>`; only for setting CSS custom properties. Merged after `--gx-sparkline-hex`. */
+    style?: CSSProperties;
+}
+/** A sparkline colored by meaning (`variant`), or the default `SECONDARY`. */
+interface SparklineVariantProps {
+    /**
+     * Color role: a neutral step or a status, following the theme. `INHERIT` takes the parent's
+     * text color. Not with `color`.
+     * @default SparklineVariant.SECONDARY
+     */
+    variant?: SparklineVariant;
+    /** Categorical palette family. Not with `variant`. */
+    color?: undefined;
+}
+/** A sparkline colored by category (`color`). */
+interface SparklineColorProps {
+    /**
+     * Color role: a neutral step or a status, following the theme. `INHERIT` takes the parent's
+     * text color. Not with `color`.
+     * @default SparklineVariant.SECONDARY
+     */
+    variant?: undefined;
+    /**
+     * Categorical palette family (`"blue"`, `"violet"`, …): the marks take `text.<family>`, the way
+     * a status variant renders. For a series' category color; meanings take `variant`. Not with
+     * `variant`.
+     */
+    color: PaletteColor;
+}
+/** Sparkline props. Passing both `variant` and `color` is a type error. */
+export type SparklineProps = SparklineBaseProps & (SparklineVariantProps | SparklineColorProps);
+/** A word-sized line or bar trend beside the number it summarizes. */
+declare const Sparkline: import("react").ForwardRefExoticComponent<SparklineProps & import("react").RefAttributes<HTMLSpanElement>>;
+export default Sparkline;