@galaxy-io/dls 1.0.3

package/dist/charts/ChartLegend.d.ts

@@ -0,0 +1,7 @@
+import type { ChartSeriesConfig } from "./types";
+interface ChartLegendProps {
+    series: ChartSeriesConfig[];
+    palette: string[];
+}
+declare const ChartLegend: ({ series, palette }: ChartLegendProps) => import("react").JSX.Element;
+export default ChartLegend;

package/dist/charts/ChartLegend.js

@@ -0,0 +1,30 @@
+import Text, { TextSize, TextVariant } from "../text/Text.js";
+import FlexWrapper, { AlignItems, FlexDirection } from "../containers/FlexWrapper.js";
+import Circle from "../shapes/Circle.js";
+import { resolveSeriesColor } from "./utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/charts/ChartLegend.tsx
+var ChartLegend = ({ series, palette }) => {
+	return /* @__PURE__ */ jsx(FlexWrapper, {
+		direction: FlexDirection.ROW,
+		alignItems: AlignItems.CENTER,
+		gap: 16,
+		children: series.map((s, i) => {
+			const color = resolveSeriesColor(s, i, palette);
+			return /* @__PURE__ */ jsxs(FlexWrapper, {
+				alignItems: AlignItems.CENTER,
+				gap: 6,
+				children: [/* @__PURE__ */ jsx(Circle, {
+					size: 8,
+					hex: color
+				}), /* @__PURE__ */ jsx(Text, {
+					size: TextSize.CAPTION,
+					variant: TextVariant.TERTIARY,
+					children: s.name
+				})]
+			}, s.key);
+		})
+	});
+};
+//#endregion
+export { ChartLegend as default };

package/dist/charts/ChartTooltip.d.ts

@@ -0,0 +1,7 @@
+import type { ChartTooltipData, ChartValueFormatter } from "./types";
+interface ChartTooltipProps {
+    data: ChartTooltipData | null;
+    valueFormatter?: ChartValueFormatter;
+}
+declare const ChartTooltip: ({ data, valueFormatter }: ChartTooltipProps) => import("react").JSX.Element | null;
+export default ChartTooltip;

package/dist/charts/ChartTooltip.js

@@ -0,0 +1,66 @@
+import { withTheme } from "../theme/GalaxyTheme.js";
+import Text, { TextSize, TextVariant, TextWeight } from "../text/Text.js";
+import FlexWrapper, { AlignItems, FlexDirection, JustifyContent } from "../containers/FlexWrapper.js";
+import Circle from "../shapes/Circle.js";
+import { defaultValueFormatter } from "./utils.js";
+/* empty css                       */
+import { styled } from "@linaria/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/charts/ChartTooltip.tsx
+var _exp = () => ({ $x }) => $x;
+var _exp2 = () => ({ $y }) => $y;
+var _exp3 = () => ({ theme }) => theme.color.background.secondary;
+var _exp4 = () => ({ theme }) => theme.color.border.secondary;
+var _exp5 = () => ({ $visible }) => $visible ? 1 : 0;
+var TooltipContainer = withTheme(/*#__PURE__*/ styled("div")({
+	name: "TooltipContainer",
+	class: "ttysfji",
+	propsAsIs: false,
+	vars: {
+		"ttysfji-0": [_exp(), "px"],
+		"ttysfji-1": [_exp2(), "px"],
+		"ttysfji-2": [_exp3()],
+		"ttysfji-3": [_exp4()],
+		"ttysfji-4": [_exp5()]
+	}
+}));
+var ChartTooltip = ({ data, valueFormatter = defaultValueFormatter }) => {
+	if (!data) return null;
+	return /* @__PURE__ */ jsx(TooltipContainer, {
+		$x: data.x,
+		$y: data.y,
+		$visible: true,
+		children: /* @__PURE__ */ jsxs(FlexWrapper, {
+			direction: FlexDirection.COLUMN,
+			gap: 6,
+			children: [/* @__PURE__ */ jsx(Text, {
+				size: TextSize.BODY_SM,
+				weight: TextWeight.MEDIUM,
+				children: data.label
+			}), data.items.map((item) => /* @__PURE__ */ jsxs(FlexWrapper, {
+				alignItems: AlignItems.CENTER,
+				justifyContent: JustifyContent.SPACE_BETWEEN,
+				gap: 32,
+				fillWidth: true,
+				children: [/* @__PURE__ */ jsxs(FlexWrapper, {
+					alignItems: AlignItems.CENTER,
+					gap: 6,
+					children: [/* @__PURE__ */ jsx(Circle, {
+						size: 8,
+						hex: item.color
+					}), /* @__PURE__ */ jsx(Text, {
+						size: TextSize.CAPTION,
+						variant: TextVariant.PRIMARY,
+						children: item.seriesName
+					})]
+				}), /* @__PURE__ */ jsx(Text, {
+					size: TextSize.CAPTION,
+					weight: TextWeight.MEDIUM,
+					children: valueFormatter(item.value)
+				})]
+			}, item.seriesKey))]
+		})
+	});
+};
+//#endregion
+export { ChartTooltip as default };

package/dist/charts/LineChart.d.ts

@@ -0,0 +1,22 @@
+import type { CurveFactory } from "d3-shape";
+import type { BaseChartProps } from "./types";
+export declare enum LineChartMode {
+    NORMAL = "NORMAL",
+    STACKED = "STACKED"
+}
+export interface LineChartProps extends BaseChartProps {
+    /** Normal or stacked line mode */
+    mode?: LineChartMode;
+    /** Line stroke width in px */
+    strokeWidth?: number;
+    /** Data-point dot radius in px (0 to hide dots) */
+    dotRadius?: number;
+    /** Show grid lines */
+    showGrid?: boolean;
+    /** Fill area under lines */
+    showArea?: boolean;
+    /** D3 curve factory for line interpolation */
+    curveType?: CurveFactory;
+}
+declare const LineChart: ({ data, series, width, height, margin: marginOverride, fillWidth, aspectRatio, mode, strokeWidth, dotRadius, valueFormatter, labelFormatter, tooltipRenderer, noTooltip, showLegend, showGrid, showArea, curveType, ariaLabel, }: LineChartProps) => import("react").JSX.Element;
+export default LineChart;

package/dist/charts/LineChart.js

@@ -0,0 +1,250 @@
+import { useGalaxyTheme, withTheme } from "../theme/GalaxyTheme.js";
+import FlexWrapper, { FlexDirection } from "../containers/FlexWrapper.js";
+import { useElementWidth } from "../hooks/useElementWidth.js";
+import Wrapper from "../containers/Wrapper.js";
+import { getChartPalette } from "./constants.js";
+import { buildLinearScale, buildPointScale, defaultLabelFormatter, defaultValueFormatter, getGroupedMax, getPlotDimensions, getStackedMax, resolveMargin, resolveSeriesColor } from "./utils.js";
+import ChartLegend from "./ChartLegend.js";
+import ChartTooltip from "./ChartTooltip.js";
+import { XAxisPoint, YAxis } from "./ChartAxis.js";
+/* empty css                    */
+import { styled } from "@linaria/react";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { area, curveMonotoneX, line } from "d3-shape";
+//#region src/charts/LineChart.tsx
+var LineChartMode = /* @__PURE__ */ function(LineChartMode) {
+	LineChartMode["NORMAL"] = "NORMAL";
+	LineChartMode["STACKED"] = "STACKED";
+	return LineChartMode;
+}({});
+var _exp = () => ({ $fillWidth }) => $fillWidth ? "flex" : "inline-flex";
+var _exp2 = () => ({ $fillWidth }) => $fillWidth ? "100%" : "auto";
+var ChartWrapper = withTheme(/*#__PURE__*/ styled("div")({
+	name: "ChartWrapper",
+	class: "c8llr95",
+	propsAsIs: false,
+	vars: {
+		"c8llr95-0": [_exp()],
+		"c8llr95-1": [_exp2()]
+	}
+}));
+var LineChart = ({ data, series, width, height, margin: marginOverride, fillWidth = false, aspectRatio, mode = "NORMAL", strokeWidth = 2, dotRadius = 4, valueFormatter = defaultValueFormatter, labelFormatter = defaultLabelFormatter, tooltipRenderer, noTooltip = false, showLegend = true, showGrid = true, showArea = false, curveType = curveMonotoneX, ariaLabel }) => {
+	const { theme } = useGalaxyTheme();
+	const containerRef = useRef(null);
+	const svgRef = useRef(null);
+	const [tooltip, setTooltip] = useState(null);
+	const [hoveredDatumIndex, setHoveredDatumIndex] = useState(null);
+	const measuredWidth = useElementWidth(containerRef);
+	const resolvedWidth = fillWidth ? measuredWidth ?? 0 : width ?? 0;
+	const resolvedHeight = aspectRatio ? resolvedWidth / aspectRatio : height ?? 0;
+	const palette = useMemo(() => getChartPalette(theme), [theme]);
+	const margin = useMemo(() => resolveMargin(marginOverride), [marginOverride]);
+	const { plotWidth, plotHeight } = useMemo(() => getPlotDimensions(resolvedWidth, resolvedHeight, margin), [
+		resolvedWidth,
+		resolvedHeight,
+		margin
+	]);
+	const seriesKeys = useMemo(() => series.map((s) => s.key), [series]);
+	const labels = useMemo(() => data.map((d) => d.label), [data]);
+	const xScale = useMemo(() => buildPointScale(labels, [0, plotWidth]), [labels, plotWidth]);
+	const yMax = useMemo(() => mode === "STACKED" ? getStackedMax(data, seriesKeys) : getGroupedMax(data, seriesKeys), [
+		data,
+		seriesKeys,
+		mode
+	]);
+	const yScale = useMemo(() => buildLinearScale(yMax, [plotHeight, 0]), [yMax, plotHeight]);
+	const stackedValues = useMemo(() => {
+		if (mode !== "STACKED") return null;
+		return data.map((datum) => {
+			let cumulative = 0;
+			const values = {};
+			for (const s of series) {
+				const value = datum.values[s.key] ?? 0;
+				values[s.key] = {
+					y0: cumulative,
+					y1: cumulative + value
+				};
+				cumulative += value;
+			}
+			return values;
+		});
+	}, [
+		data,
+		series,
+		mode
+	]);
+	const handlePointMouseEnter = useCallback((datumIndex, x, y) => {
+		const datum = data[datumIndex];
+		if (!datum) return;
+		setHoveredDatumIndex(datumIndex);
+		setTooltip({
+			label: datum.label,
+			items: series.map((s, i) => ({
+				seriesKey: s.key,
+				seriesName: s.name,
+				value: datum.values[s.key] ?? 0,
+				color: resolveSeriesColor(s, i, palette)
+			})),
+			x: x + margin.left,
+			y: y + margin.top
+		});
+	}, [
+		data,
+		series,
+		palette,
+		margin
+	]);
+	const handlePointMouseLeave = useCallback(() => {
+		setHoveredDatumIndex(null);
+		setTooltip(null);
+	}, []);
+	if (resolvedWidth === 0 || resolvedHeight === 0) return /* @__PURE__ */ jsx(ChartWrapper, {
+		ref: containerRef,
+		$fillWidth: fillWidth
+	});
+	const renderNormalLines = () => {
+		return series.map((s, seriesIndex) => {
+			const color = resolveSeriesColor(s, seriesIndex, palette);
+			const linePath = line().x((_, i) => xScale(data[i].label) ?? 0).y((_, i) => yScale(data[i].values[s.key] ?? 0)).curve(curveType)(data.map((_, i) => i)) ?? "";
+			const areaPath = showArea ? area().x((_, i) => xScale(data[i].label) ?? 0).y0(plotHeight).y1((_, i) => yScale(data[i].values[s.key] ?? 0)).curve(curveType)(data.map((_, i) => i)) ?? "" : "";
+			return /* @__PURE__ */ jsxs("g", { children: [
+				showArea && /* @__PURE__ */ jsx("path", {
+					d: areaPath,
+					fill: color,
+					opacity: .1,
+					style: { transition: `opacity 150ms ease-in-out` }
+				}),
+				/* @__PURE__ */ jsx("path", {
+					d: linePath,
+					fill: "none",
+					stroke: color,
+					strokeWidth,
+					style: { transition: `opacity 150ms ease-in-out` }
+				}),
+				data.map((datum, datumIndex) => {
+					const cx = xScale(datum.label) ?? 0;
+					const cy = yScale(datum.values[s.key] ?? 0);
+					return /* @__PURE__ */ jsxs("g", { children: [dotRadius > 0 && /* @__PURE__ */ jsx("circle", {
+						cx,
+						cy,
+						r: dotRadius,
+						fill: color,
+						opacity: hoveredDatumIndex !== null && hoveredDatumIndex !== datumIndex ? .3 : 1,
+						style: { transition: `opacity 150ms ease-in-out` },
+						role: "graphics-symbol",
+						"aria-roledescription": "data point",
+						"aria-label": `${s.name} for ${datum.label}: ${valueFormatter(datum.values[s.key] ?? 0)}`
+					}), /* @__PURE__ */ jsx("circle", {
+						cx,
+						cy,
+						r: dotRadius + 6,
+						fill: "transparent",
+						onMouseEnter: () => handlePointMouseEnter(datumIndex, cx, cy),
+						onMouseLeave: handlePointMouseLeave,
+						onFocus: () => handlePointMouseEnter(datumIndex, cx, cy),
+						onBlur: handlePointMouseLeave,
+						tabIndex: 0,
+						style: { cursor: "pointer" }
+					})] }, datum.label);
+				})
+			] }, s.key);
+		});
+	};
+	const renderStackedLines = () => {
+		if (!stackedValues) return null;
+		return series.map((s, seriesIndex) => {
+			const color = resolveSeriesColor(s, seriesIndex, palette);
+			const areaPath = area().x((_, i) => xScale(data[i].label) ?? 0).y0((_, i) => yScale(stackedValues[i][s.key].y0)).y1((_, i) => yScale(stackedValues[i][s.key].y1)).curve(curveType)(data.map((_, i) => i)) ?? "";
+			const linePath = line().x((_, i) => xScale(data[i].label) ?? 0).y((_, i) => yScale(stackedValues[i][s.key].y1)).curve(curveType)(data.map((_, i) => i)) ?? "";
+			return /* @__PURE__ */ jsxs("g", { children: [
+				/* @__PURE__ */ jsx("path", {
+					d: areaPath,
+					fill: color,
+					opacity: .3,
+					style: { transition: `opacity 150ms ease-in-out` }
+				}),
+				/* @__PURE__ */ jsx("path", {
+					d: linePath,
+					fill: "none",
+					stroke: color,
+					strokeWidth,
+					style: { transition: `opacity 150ms ease-in-out` }
+				}),
+				data.map((datum, datumIndex) => {
+					const cx = xScale(datum.label) ?? 0;
+					const cy = yScale(stackedValues[datumIndex][s.key].y1);
+					return /* @__PURE__ */ jsxs("g", { children: [dotRadius > 0 && /* @__PURE__ */ jsx("circle", {
+						cx,
+						cy,
+						r: dotRadius,
+						fill: color,
+						opacity: hoveredDatumIndex !== null && hoveredDatumIndex !== datumIndex ? .3 : 1,
+						style: { transition: `opacity 150ms ease-in-out` },
+						role: "graphics-symbol",
+						"aria-roledescription": "data point",
+						"aria-label": `${s.name} for ${datum.label}: ${valueFormatter(datum.values[s.key] ?? 0)}`
+					}), /* @__PURE__ */ jsx("circle", {
+						cx,
+						cy,
+						r: dotRadius + 6,
+						fill: "transparent",
+						onMouseEnter: () => handlePointMouseEnter(datumIndex, cx, cy),
+						onMouseLeave: handlePointMouseLeave,
+						onFocus: () => handlePointMouseEnter(datumIndex, cx, cy),
+						onBlur: handlePointMouseLeave,
+						tabIndex: 0,
+						style: { cursor: "pointer" }
+					})] }, datum.label);
+				})
+			] }, s.key);
+		});
+	};
+	const defaultAriaLabel = `Line chart with ${data.length} data points and ${series.length} series`;
+	return /* @__PURE__ */ jsxs(ChartWrapper, {
+		ref: containerRef,
+		$fillWidth: fillWidth,
+		children: [/* @__PURE__ */ jsxs(Wrapper, {
+			position: "relative",
+			children: [/* @__PURE__ */ jsx("svg", {
+				ref: svgRef,
+				width: resolvedWidth,
+				height: resolvedHeight,
+				role: "img",
+				"aria-label": ariaLabel ?? defaultAriaLabel,
+				children: /* @__PURE__ */ jsxs("g", {
+					transform: `translate(${margin.left}, ${margin.top})`,
+					children: [
+						/* @__PURE__ */ jsx(YAxis, {
+							scale: yScale,
+							transform: "translate(0, 0)",
+							plotWidth,
+							formatter: valueFormatter,
+							showGrid,
+							theme
+						}),
+						/* @__PURE__ */ jsx(XAxisPoint, {
+							scale: xScale,
+							transform: `translate(0, ${plotHeight})`,
+							plotWidth,
+							formatter: labelFormatter
+						}),
+						mode === "STACKED" ? renderStackedLines() : renderNormalLines()
+					]
+				})
+			}), !noTooltip && (tooltipRenderer ? tooltip && tooltipRenderer(tooltip) : /* @__PURE__ */ jsx(ChartTooltip, {
+				data: tooltip,
+				valueFormatter
+			}))]
+		}), showLegend && /* @__PURE__ */ jsxs(FlexWrapper, {
+			direction: FlexDirection.ROW,
+			gap: 0,
+			children: [/* @__PURE__ */ jsx(Wrapper, { minWidth: margin.left }), /* @__PURE__ */ jsx(ChartLegend, {
+				series,
+				palette
+			})]
+		})]
+	});
+};
+//#endregion
+export { LineChartMode, LineChart as default };

package/dist/charts/PieChart.d.ts

@@ -0,0 +1,35 @@
+import type { ChartLabelFormatter, ChartTooltipRenderer, ChartValueFormatter, PieSlice } from "./types";
+export interface PieChartProps {
+    /** Slice data */
+    slices: PieSlice[];
+    /** Chart width in pixels. Optional when fillWidth is true. */
+    width?: number;
+    /** Chart height in pixels. Optional when aspectRatio is provided. */
+    height?: number;
+    /** When true, chart fills container width */
+    fillWidth?: boolean;
+    /** Aspect ratio (width/height). Used to auto-calculate height when fillWidth is true. */
+    aspectRatio?: number;
+    /** Inner radius for donut charts (0 = full pie) */
+    innerRadius?: number;
+    /** Gap between slices in radians */
+    padAngle?: number;
+    /** Rounded slice corners in px */
+    cornerRadius?: number;
+    /** Format values in tooltip/labels */
+    valueFormatter?: ChartValueFormatter;
+    /** Format labels in legend/tooltip */
+    labelFormatter?: ChartLabelFormatter;
+    /** Custom tooltip renderer */
+    tooltipRenderer?: ChartTooltipRenderer;
+    /** Disable tooltip */
+    noTooltip?: boolean;
+    /** Show legend */
+    showLegend?: boolean;
+    /** Show percentage labels on slices */
+    showLabels?: boolean;
+    /** Accessible label for the chart SVG */
+    ariaLabel?: string;
+}
+declare const PieChart: ({ slices, width, height, fillWidth, aspectRatio, innerRadius, padAngle, cornerRadius, valueFormatter, labelFormatter, tooltipRenderer, noTooltip, showLegend, showLabels, ariaLabel, }: PieChartProps) => import("react").JSX.Element;
+export default PieChart;

package/dist/charts/PieChart.js

@@ -0,0 +1,183 @@
+import { useGalaxyTheme, withTheme } from "../theme/GalaxyTheme.js";
+import Text, { TextSize, TextWeight } from "../text/Text.js";
+import FlexWrapper, { AlignItems, FlexDirection, JustifyContent } from "../containers/FlexWrapper.js";
+import { useElementWidth } from "../hooks/useElementWidth.js";
+import Wrapper from "../containers/Wrapper.js";
+import { getChartPalette } from "./constants.js";
+import { defaultLabelFormatter, defaultValueFormatter } from "./utils.js";
+import ChartLegend from "./ChartLegend.js";
+import ChartTooltip from "./ChartTooltip.js";
+/* empty css                   */
+import { styled } from "@linaria/react";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { arc, pie } from "d3-shape";
+//#region src/charts/PieChart.tsx
+var DEFAULT_PAD_ANGLE = .02;
+var DEFAULT_CORNER_RADIUS = 2;
+var PIE_MARGIN = 8;
+var _exp = () => ({ $fillWidth }) => $fillWidth ? "flex" : "inline-flex";
+var _exp2 = () => ({ $fillWidth }) => $fillWidth ? "100%" : "auto";
+var ChartWrapper = withTheme(/*#__PURE__*/ styled("div")({
+	name: "ChartWrapper",
+	class: "c1ez9f1",
+	propsAsIs: false,
+	vars: {
+		"c1ez9f1-0": [_exp()],
+		"c1ez9f1-1": [_exp2()]
+	}
+}));
+var resolveSliceColor = (slice, index, palette) => slice.color ?? palette[index % palette.length];
+var PieChart = ({ slices, width, height, fillWidth = false, aspectRatio, innerRadius = 0, padAngle = DEFAULT_PAD_ANGLE, cornerRadius = DEFAULT_CORNER_RADIUS, valueFormatter = defaultValueFormatter, labelFormatter = defaultLabelFormatter, tooltipRenderer, noTooltip = false, showLegend = true, showLabels = false, ariaLabel }) => {
+	const { theme } = useGalaxyTheme();
+	const containerRef = useRef(null);
+	const svgRef = useRef(null);
+	const [tooltip, setTooltip] = useState(null);
+	const [hoveredSliceIndex, setHoveredSliceIndex] = useState(null);
+	const measuredWidth = useElementWidth(containerRef);
+	const resolvedWidth = fillWidth ? measuredWidth ?? 0 : width ?? 0;
+	const resolvedHeight = aspectRatio ? resolvedWidth / aspectRatio : height ?? 0;
+	const palette = useMemo(() => getChartPalette(theme), [theme]);
+	const outerRadius = useMemo(() => Math.min(resolvedWidth, resolvedHeight) / 2 - PIE_MARGIN, [resolvedWidth, resolvedHeight]);
+	const effectivePadAngle = innerRadius > 0 ? padAngle : 0;
+	const pieGen = useMemo(() => pie().value((d) => d.value).sort(null).padAngle(effectivePadAngle), [effectivePadAngle]);
+	const arcs = useMemo(() => pieGen(slices), [pieGen, slices]);
+	const arcGen = useMemo(() => arc().innerRadius(innerRadius).outerRadius(outerRadius).cornerRadius(cornerRadius), [
+		innerRadius,
+		outerRadius,
+		cornerRadius
+	]);
+	const labelArc = useMemo(() => {
+		const mid = innerRadius > 0 ? (innerRadius + outerRadius) / 2 : outerRadius * .65;
+		return arc().innerRadius(mid).outerRadius(mid);
+	}, [innerRadius, outerRadius]);
+	const total = useMemo(() => slices.reduce((sum, s) => sum + s.value, 0), [slices]);
+	const handleSliceMouseEnter = useCallback((sliceIndex, event) => {
+		const slice = slices[sliceIndex];
+		if (!slice) return;
+		const svgRect = svgRef.current?.getBoundingClientRect();
+		if (!svgRect) return;
+		setHoveredSliceIndex(sliceIndex);
+		setTooltip({
+			label: labelFormatter(slice.label),
+			items: [{
+				seriesKey: slice.label,
+				seriesName: labelFormatter(slice.label),
+				value: slice.value,
+				color: resolveSliceColor(slice, sliceIndex, palette)
+			}],
+			x: event.clientX - svgRect.left,
+			y: event.clientY - svgRect.top
+		});
+	}, [
+		slices,
+		palette,
+		labelFormatter
+	]);
+	const handleSliceMouseMove = useCallback((event) => {
+		if (hoveredSliceIndex === null) return;
+		const svgRect = svgRef.current?.getBoundingClientRect();
+		if (!svgRect) return;
+		setTooltip((prev) => prev ? {
+			...prev,
+			x: event.clientX - svgRect.left,
+			y: event.clientY - svgRect.top
+		} : null);
+	}, [hoveredSliceIndex]);
+	const handleSliceMouseLeave = useCallback(() => {
+		setHoveredSliceIndex(null);
+		setTooltip(null);
+	}, []);
+	const legendSeries = useMemo(() => slices.map((s, i) => ({
+		key: s.label,
+		name: labelFormatter(s.label),
+		color: resolveSliceColor(s, i, palette)
+	})), [
+		slices,
+		palette,
+		labelFormatter
+	]);
+	if (resolvedWidth === 0 || resolvedHeight === 0) return /* @__PURE__ */ jsx(ChartWrapper, {
+		ref: containerRef,
+		$fillWidth: fillWidth
+	});
+	const cx = resolvedWidth / 2;
+	const cy = resolvedHeight / 2;
+	const defaultAriaLabel = `Pie chart with ${slices.length} slices`;
+	return /* @__PURE__ */ jsxs(ChartWrapper, {
+		ref: containerRef,
+		$fillWidth: fillWidth,
+		children: [/* @__PURE__ */ jsxs(Wrapper, {
+			position: "relative",
+			children: [/* @__PURE__ */ jsx("svg", {
+				ref: svgRef,
+				width: resolvedWidth,
+				height: resolvedHeight,
+				role: "img",
+				"aria-label": ariaLabel ?? defaultAriaLabel,
+				children: /* @__PURE__ */ jsx("g", {
+					transform: `translate(${cx}, ${cy})`,
+					children: arcs.map((d, i) => {
+						const color = resolveSliceColor(d.data, i, palette);
+						const isDimmed = hoveredSliceIndex !== null && hoveredSliceIndex !== i;
+						const path = arcGen(d) ?? "";
+						const pct = total > 0 ? Math.round(d.data.value / total * 100) : 0;
+						return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("path", {
+							d: path,
+							fill: color,
+							opacity: isDimmed ? .3 : 1,
+							style: {
+								transition: `opacity 150ms ease-in-out`,
+								cursor: "pointer"
+							},
+							onMouseEnter: (e) => handleSliceMouseEnter(i, e),
+							onMouseMove: handleSliceMouseMove,
+							onMouseLeave: handleSliceMouseLeave,
+							onFocus: (e) => handleSliceMouseEnter(i, e),
+							onBlur: handleSliceMouseLeave,
+							tabIndex: 0,
+							role: "graphics-symbol",
+							"aria-roledescription": "slice",
+							"aria-label": `${labelFormatter(d.data.label)}: ${valueFormatter(d.data.value)} (${pct}%)`
+						}), showLabels && pct > 5 && (() => {
+							const [lx, ly] = labelArc.centroid(d);
+							const labelW = 48;
+							const labelH = 20;
+							return /* @__PURE__ */ jsx("foreignObject", {
+								x: lx - labelW / 2,
+								y: ly - labelH / 2,
+								width: labelW,
+								height: labelH,
+								style: { pointerEvents: "none" },
+								children: /* @__PURE__ */ jsx(FlexWrapper, {
+									justifyContent: JustifyContent.CENTER,
+									alignItems: AlignItems.CENTER,
+									fillWidth: true,
+									fillHeight: true,
+									children: /* @__PURE__ */ jsx(Text, {
+										size: TextSize.CAPTION,
+										weight: TextWeight.MEDIUM,
+										hex: theme.color.text.primaryAlt,
+										children: `${pct}%`
+									})
+								})
+							});
+						})()] }, d.data.label);
+					})
+				})
+			}), !noTooltip && (tooltipRenderer ? tooltip && tooltipRenderer(tooltip) : /* @__PURE__ */ jsx(ChartTooltip, {
+				data: tooltip,
+				valueFormatter
+			}))]
+		}), showLegend && /* @__PURE__ */ jsx(FlexWrapper, {
+			direction: FlexDirection.ROW,
+			gap: 0,
+			children: /* @__PURE__ */ jsx(ChartLegend, {
+				series: legendSeries,
+				palette
+			})
+		})]
+	});
+};
+//#endregion
+export { PieChart as default };

package/dist/charts/constants.d.ts

@@ -0,0 +1,22 @@
+import type { Theme } from "../theme/types";
+import type { ChartMargin } from "./types";
+/**
+ * Theme-derived chart series color palette.
+ * Purple first to match Galaxy brand aesthetic.
+ */
+export declare const getChartPalette: (theme: Theme) => string[];
+export declare const DEFAULT_CHART_MARGIN: ChartMargin;
+/** Spacing between bars within a group (fraction of bandwidth, 0-1) */
+export declare const DEFAULT_BAR_PADDING_INNER = 0.2;
+/** Spacing around bar groups (fraction of step, 0-1) */
+export declare const DEFAULT_BAR_PADDING_OUTER = 0.1;
+/** Default bar top-corner radius in px */
+export declare const DEFAULT_BAR_RADIUS = 4;
+/** Default line stroke width in px */
+export declare const DEFAULT_LINE_STROKE_WIDTH = 2;
+/** Default data-point dot radius in px */
+export declare const DEFAULT_LINE_DOT_RADIUS = 4;
+/** Transition duration in ms for hover effects */
+export declare const CHART_TRANSITION_MS = 150;
+/** Default number of y-axis ticks */
+export declare const DEFAULT_Y_TICK_COUNT = 5;

package/dist/charts/constants.js

@@ -0,0 +1,38 @@
+//#region src/charts/constants.ts
+/**
+* Theme-derived chart series color palette.
+* Purple first to match Galaxy brand aesthetic.
+*/
+var getChartPalette = (theme) => [
+	theme.color.text.purple,
+	theme.color.text.pink,
+	theme.color.text.blue,
+	theme.color.text.teal,
+	theme.color.text.lime,
+	theme.color.text.orange,
+	theme.color.text.yellow,
+	theme.color.text.success,
+	theme.color.text.error
+];
+var DEFAULT_CHART_MARGIN = {
+	top: 16,
+	right: 16,
+	bottom: 32,
+	left: 48
+};
+/** Spacing between bars within a group (fraction of bandwidth, 0-1) */
+var DEFAULT_BAR_PADDING_INNER = .2;
+/** Spacing around bar groups (fraction of step, 0-1) */
+var DEFAULT_BAR_PADDING_OUTER = .1;
+/** Default bar top-corner radius in px */
+var DEFAULT_BAR_RADIUS = 4;
+/** Default line stroke width in px */
+var DEFAULT_LINE_STROKE_WIDTH = 2;
+/** Default data-point dot radius in px */
+var DEFAULT_LINE_DOT_RADIUS = 4;
+/** Transition duration in ms for hover effects */
+var CHART_TRANSITION_MS = 150;
+/** Default number of y-axis ticks */
+var DEFAULT_Y_TICK_COUNT = 5;
+//#endregion
+export { CHART_TRANSITION_MS, DEFAULT_BAR_PADDING_INNER, DEFAULT_BAR_PADDING_OUTER, DEFAULT_BAR_RADIUS, DEFAULT_CHART_MARGIN, DEFAULT_LINE_DOT_RADIUS, DEFAULT_LINE_STROKE_WIDTH, DEFAULT_Y_TICK_COUNT, getChartPalette };