@matthieumordrel/chart-studio 0.2.2 → 0.2.4

package/dist/ui/chart-canvas.mjs

@@ -9,7 +9,7 @@ import { Area, AreaChart, Bar, BarChart, CartesianGrid, LabelList, Legend, Line,
 /**
 * Chart canvas — renders the actual recharts chart based on the current state.
 *
-* Supports: bar, line, area (time-series), bar, pie, donut (categorical).
+* Supports: bar, grouped-bar, percent-bar, line, area, percent-area (time-series), bar, grouped-bar, percent-bar, pie, donut (categorical).
 * Automatically switches between chart types based on the chart instance state.
 */
 /**
@@ -179,10 +179,44 @@ function useContainerWidth() {
 		width
 	};
 }
+/**
+* Read the resolved `--cs-radius` CSS variable and convert it to a pixel value
+* suitable for recharts bar corner radius (roughly half the theme radius).
+* Observes style attribute mutations on the root element so the chart reacts
+* when the consumer changes `--radius` at runtime.
+*/
+function useCssBarRadius() {
+	const [radiusPx, setRadiusPx] = useState(4);
+	useEffect(() => {
+		if (typeof document === "undefined") return;
+		const root = document.documentElement;
+		function read() {
+			const style = getComputedStyle(root);
+			const raw = style.getPropertyValue("--cs-radius").trim();
+			if (!raw) return;
+			const rem = parseFloat(raw);
+			if (Number.isNaN(rem)) return;
+			const fontSize = parseFloat(style.fontSize) || 16;
+			setRadiusPx(Math.max(0, Math.round(rem * fontSize / 2)));
+		}
+		read();
+		const observer = new MutationObserver(read);
+		observer.observe(root, {
+			attributes: true,
+			attributeFilter: [
+				"style",
+				"class",
+				"data-theme"
+			]
+		});
+		return () => observer.disconnect();
+	}, []);
+	return radiusPx;
+}
 /** Renders the appropriate recharts chart based on the chart instance state. */
 function ChartCanvas({ height = 300, className, showDataLabels = false }) {
 	const chart = useChartContext();
-	const { chartType, transformedData, series } = chart;
+	const { chartType, transformedData, series, connectNulls } = chart;
 	const { ref, width } = useContainerWidth();
 	const xColumn = chart.columns.find((column) => column.id === chart.xAxisId) ?? null;
 	const aggregateMetric = chart.metric.kind === "aggregate" ? chart.metric : null;
@@ -217,7 +251,8 @@ function ChartCanvas({ height = 300, className, showDataLabels = false }) {
 			allowDecimalTicks,
 			xColumn,
 			timeBucket: chart.isTimeSeries ? chart.timeBucket : void 0,
-			showDataLabels
+			showDataLabels,
+			connectNulls
 		}) : chartType === "line" ? /* @__PURE__ */ jsx(LineChartRenderer, {
 			data: transformedData,
 			series,
@@ -228,7 +263,20 @@ function ChartCanvas({ height = 300, className, showDataLabels = false }) {
 			allowDecimalTicks,
 			xColumn,
 			timeBucket: chart.isTimeSeries ? chart.timeBucket : void 0,
-			showDataLabels
+			showDataLabels,
+			connectNulls
+		}) : chartType === "percent-area" ? /* @__PURE__ */ jsx(PercentAreaChartRenderer, {
+			data: transformedData,
+			series,
+			width,
+			height,
+			valueColumn,
+			valueRange,
+			allowDecimalTicks,
+			xColumn,
+			timeBucket: chart.isTimeSeries ? chart.timeBucket : void 0,
+			showDataLabels,
+			connectNulls
 		}) : chartType === "area" ? /* @__PURE__ */ jsx(AreaChartRenderer, {
 			data: transformedData,
 			series,
@@ -239,7 +287,32 @@ function ChartCanvas({ height = 300, className, showDataLabels = false }) {
 			allowDecimalTicks,
 			xColumn,
 			timeBucket: chart.isTimeSeries ? chart.timeBucket : void 0,
-			showDataLabels
+			showDataLabels,
+			connectNulls
+		}) : chartType === "grouped-bar" ? /* @__PURE__ */ jsx(GroupedBarChartRenderer, {
+			data: transformedData,
+			series,
+			width,
+			height,
+			valueColumn,
+			valueRange,
+			allowDecimalTicks,
+			xColumn,
+			timeBucket: chart.isTimeSeries ? chart.timeBucket : void 0,
+			showDataLabels,
+			connectNulls
+		}) : chartType === "percent-bar" ? /* @__PURE__ */ jsx(PercentBarChartRenderer, {
+			data: transformedData,
+			series,
+			width,
+			height,
+			valueColumn,
+			valueRange,
+			allowDecimalTicks,
+			xColumn,
+			timeBucket: chart.isTimeSeries ? chart.timeBucket : void 0,
+			showDataLabels,
+			connectNulls
 		}) : /* @__PURE__ */ jsx(BarChartRenderer, {
 			data: transformedData,
 			series,
@@ -250,11 +323,39 @@ function ChartCanvas({ height = 300, className, showDataLabels = false }) {
 			allowDecimalTicks,
 			xColumn,
 			timeBucket: chart.isTimeSeries ? chart.timeBucket : void 0,
-			showDataLabels
+			showDataLabels,
+			connectNulls
 		}))
 	});
 }
 /**
+* Percent-stacked charts use stackOffset="expand" which normalizes values to
+* the 0–1 range.  These constants let the shared formatting pipeline treat
+* them as proper percentages via Intl.NumberFormat({ style: 'percent' }).
+*/
+const PERCENT_STACKED_COLUMN = {
+	type: "number",
+	format: "percent",
+	formatter: void 0
+};
+const PERCENT_STACKED_RANGE = {
+	min: 0,
+	max: 1
+};
+/**
+* Remove data points where every series value is null.
+*
+* Stacked charts (percent-area, percent-bar) cannot represent null in the
+* stack — d3's stack layout coerces missing values to 0 which distorts the
+* visual.  Dropping entirely-empty buckets lets `connectNulls` bridge the
+* gap while keeping partially-populated buckets intact (null → 0 is
+* acceptable there because the segment genuinely contributes nothing to the
+* total).
+*/
+function filterAllNullPoints(data, series) {
+	return data.filter((point) => series.some((s) => point[s.dataKey] != null));
+}
+/**
 * Shared shell for all Cartesian chart types.
 * Owns the grid, axes, tooltip, and legend — the only things that change
 * per chart type are the root component and the series element.
@@ -336,30 +437,37 @@ function formatXAxisValue(value, xColumn, timeBucket, surface) {
 }
 function BarChartRenderer(props) {
 	const { series, showDataLabels, valueColumn, valueRange } = props;
+	const barRadius = useCssBarRadius();
+	const isStacked = series.length > 1;
+	const topSeriesKey = series[series.length - 1]?.dataKey;
 	return /* @__PURE__ */ jsx(CartesianChartShell, {
 		...props,
 		Chart: BarChart,
-		renderSeries: (s) => /* @__PURE__ */ jsx(Bar, {
-			dataKey: s.dataKey,
-			name: s.label,
-			fill: s.color,
-			radius: [
-				4,
-				4,
-				0,
-				0
-			],
-			stackId: series.length > 1 ? "stack" : void 0,
-			children: showDataLabels && /* @__PURE__ */ jsx(LabelList, {
-				position: "top",
-				offset: 8,
-				formatter: (value) => formatDataLabel(value, valueColumn, valueRange)
-			})
-		}, s.dataKey)
+		renderSeries: (s) => {
+			const isTop = !isStacked || s.dataKey === topSeriesKey;
+			return /* @__PURE__ */ jsx(Bar, {
+				dataKey: s.dataKey,
+				name: s.label,
+				fill: s.color,
+				fillOpacity: .7,
+				radius: isTop ? [
+					barRadius,
+					barRadius,
+					0,
+					0
+				] : 0,
+				stackId: isStacked ? "stack" : void 0,
+				children: showDataLabels && /* @__PURE__ */ jsx(LabelList, {
+					position: "top",
+					offset: 8,
+					formatter: (value) => formatDataLabel(value, valueColumn, valueRange)
+				})
+			}, s.dataKey);
+		}
 	});
 }
 function LineChartRenderer(props) {
-	const { showDataLabels, valueColumn, valueRange } = props;
+	const { showDataLabels, valueColumn, valueRange, connectNulls } = props;
 	return /* @__PURE__ */ jsx(CartesianChartShell, {
 		...props,
 		Chart: LineChart,
@@ -371,6 +479,7 @@ function LineChartRenderer(props) {
 			strokeWidth: 2,
 			dot: { r: 3 },
 			activeDot: { r: 5 },
+			connectNulls,
 			children: showDataLabels && /* @__PURE__ */ jsx(LabelList, {
 				position: "top",
 				offset: 8,
@@ -380,7 +489,7 @@ function LineChartRenderer(props) {
 	});
 }
 function AreaChartRenderer(props) {
-	const { series, showDataLabels, valueColumn, valueRange } = props;
+	const { showDataLabels, valueColumn, valueRange, connectNulls } = props;
 	return /* @__PURE__ */ jsx(CartesianChartShell, {
 		...props,
 		Chart: AreaChart,
@@ -391,7 +500,7 @@ function AreaChartRenderer(props) {
 			stroke: s.color,
 			fill: s.color,
 			fillOpacity: .3,
-			stackId: series.length > 1 ? "stack" : void 0,
+			connectNulls,
 			children: showDataLabels && /* @__PURE__ */ jsx(LabelList, {
 				position: "top",
 				offset: 8,
@@ -400,6 +509,175 @@ function AreaChartRenderer(props) {
 		}, s.dataKey)
 	});
 }
+function PercentAreaChartRenderer(props) {
+	const { series, data, xColumn, timeBucket, showDataLabels, connectNulls, width, height } = props;
+	const stackableData = filterAllNullPoints(data, series);
+	const yAxisWidth = estimateYAxisWidth(PERCENT_STACKED_RANGE, PERCENT_STACKED_COLUMN);
+	const xAxisTickValues = selectVisibleXAxisTicks({
+		values: stackableData.map(getXAxisTickValue),
+		labels: stackableData.map((point) => formatXAxisValue(getXAxisTickValue(point), xColumn, timeBucket, "axis")),
+		plotWidth: getCartesianPlotWidth(width, yAxisWidth),
+		minimumTickGap: X_AXIS_MINIMUM_TICK_GAP,
+		measureLabelWidth: measureAxisLabelWidth
+	});
+	return /* @__PURE__ */ jsxs(AreaChart, {
+		data: stackableData,
+		width,
+		height,
+		margin: getCartesianChartMargin(showDataLabels),
+		stackOffset: "expand",
+		children: [
+			/* @__PURE__ */ jsx(CartesianGrid, {
+				vertical: false,
+				strokeDasharray: "3 3"
+			}),
+			/* @__PURE__ */ jsx(XAxis, {
+				dataKey: "xKey",
+				tickLine: false,
+				axisLine: false,
+				tickMargin: 8,
+				interval: 0,
+				padding: CARTESIAN_X_AXIS_PADDING,
+				ticks: xAxisTickValues,
+				tickFormatter: (value) => formatXAxisValue(value, xColumn, timeBucket, "axis")
+			}),
+			/* @__PURE__ */ jsx(YAxis, {
+				tickLine: false,
+				axisLine: false,
+				tickMargin: 4,
+				tickFormatter: (value) => typeof value === "number" ? formatChartValue(value, {
+					column: PERCENT_STACKED_COLUMN,
+					surface: "axis",
+					numericRange: PERCENT_STACKED_RANGE
+				}) : String(value),
+				width: yAxisWidth
+			}),
+			/* @__PURE__ */ jsx(Tooltip, {
+				formatter: (value) => typeof value === "number" ? formatChartValue(value, {
+					column: PERCENT_STACKED_COLUMN,
+					surface: "tooltip",
+					numericRange: PERCENT_STACKED_RANGE
+				}) : value,
+				labelFormatter: (label, payload) => formatTooltipLabel(label, payload, xColumn, timeBucket)
+			}),
+			series.length > 1 && /* @__PURE__ */ jsx(Legend, {}),
+			series.map((s) => /* @__PURE__ */ jsx(Area, {
+				type: "monotone",
+				dataKey: s.dataKey,
+				name: s.label,
+				stroke: s.color,
+				fill: s.color,
+				fillOpacity: .3,
+				stackId: "percent",
+				connectNulls,
+				children: showDataLabels && /* @__PURE__ */ jsx(LabelList, {
+					position: "top",
+					offset: 8,
+					formatter: (value) => formatDataLabel(value, PERCENT_STACKED_COLUMN, PERCENT_STACKED_RANGE)
+				})
+			}, s.dataKey))
+		]
+	});
+}
+function GroupedBarChartRenderer(props) {
+	const { showDataLabels, valueColumn, valueRange } = props;
+	const barRadius = useCssBarRadius();
+	return /* @__PURE__ */ jsx(CartesianChartShell, {
+		...props,
+		Chart: BarChart,
+		renderSeries: (s) => /* @__PURE__ */ jsx(Bar, {
+			dataKey: s.dataKey,
+			name: s.label,
+			fill: s.color,
+			fillOpacity: .7,
+			radius: [
+				barRadius,
+				barRadius,
+				0,
+				0
+			],
+			children: showDataLabels && /* @__PURE__ */ jsx(LabelList, {
+				position: "top",
+				offset: 8,
+				formatter: (value) => formatDataLabel(value, valueColumn, valueRange)
+			})
+		}, s.dataKey)
+	});
+}
+function PercentBarChartRenderer(props) {
+	const { series, data, xColumn, timeBucket, showDataLabels, width, height } = props;
+	const barRadius = useCssBarRadius();
+	const topSeriesKey = series[series.length - 1]?.dataKey;
+	const yAxisWidth = estimateYAxisWidth({
+		min: 0,
+		max: 100
+	}, {
+		type: "number",
+		format: void 0,
+		formatter: void 0
+	});
+	const xAxisTickValues = selectVisibleXAxisTicks({
+		values: data.map(getXAxisTickValue),
+		labels: data.map((point) => formatXAxisValue(getXAxisTickValue(point), xColumn, timeBucket, "axis")),
+		plotWidth: getCartesianPlotWidth(width, yAxisWidth),
+		minimumTickGap: X_AXIS_MINIMUM_TICK_GAP,
+		measureLabelWidth: measureAxisLabelWidth
+	});
+	return /* @__PURE__ */ jsxs(BarChart, {
+		data,
+		width,
+		height,
+		margin: getCartesianChartMargin(showDataLabels),
+		stackOffset: "expand",
+		children: [
+			/* @__PURE__ */ jsx(CartesianGrid, {
+				vertical: false,
+				strokeDasharray: "3 3"
+			}),
+			/* @__PURE__ */ jsx(XAxis, {
+				dataKey: "xKey",
+				tickLine: false,
+				axisLine: false,
+				tickMargin: 8,
+				interval: 0,
+				padding: CARTESIAN_X_AXIS_PADDING,
+				ticks: xAxisTickValues,
+				tickFormatter: (value) => formatXAxisValue(value, xColumn, timeBucket, "axis")
+			}),
+			/* @__PURE__ */ jsx(YAxis, {
+				tickLine: false,
+				axisLine: false,
+				tickMargin: 4,
+				tickFormatter: (value) => typeof value === "number" ? `${Math.round(value * 100)}%` : String(value),
+				width: yAxisWidth
+			}),
+			/* @__PURE__ */ jsx(Tooltip, {
+				formatter: (value, name) => {
+					if (typeof value === "number") return [`${(value * 100).toFixed(1)}%`, name];
+					return [value, name];
+				},
+				labelFormatter: (label, payload) => formatTooltipLabel(label, payload, xColumn, timeBucket)
+			}),
+			series.length > 1 && /* @__PURE__ */ jsx(Legend, {}),
+			series.map((s) => {
+				const isTop = s.dataKey === topSeriesKey;
+				return /* @__PURE__ */ jsx(Bar, {
+					dataKey: s.dataKey,
+					name: s.label,
+					fill: s.color,
+					fillOpacity: .7,
+					radius: isTop ? [
+						barRadius,
+						barRadius,
+						0,
+						0
+					] : 0,
+					stackId: "percent"
+				}, s.dataKey);
+			})
+		]
+	});
+}
 function PieChartRenderer({ data, series, innerRadius, width, height, valueColumn, valueRange, xColumn, timeBucket, showDataLabels }) {
 	const valueKey = series[0]?.dataKey;
 	const pieData = data.map((point, index) => {
@@ -455,7 +733,7 @@ function formatDataLabel(value, valueColumn, valueRange) {
 * default while tooltips and raw values remain unchanged.
 */
 function shouldHideDataLabel(value) {
-	return typeof value === "number" && value === 0;
+	return value == null || typeof value === "number" && value === 0;
 }
 //#endregion
 export { ChartCanvas };

package/dist/ui/chart-context.d.mts

@@ -35,6 +35,7 @@ type AnyChartInstance = {
   setTimeBucket: (...args: any[]) => unknown;
   availableTimeBuckets: ChartContextChart['availableTimeBuckets'];
   isTimeSeries: boolean;
+  connectNulls: boolean;
   filters: Map<any, Set<string>>;
   toggleFilter: (...args: any[]) => unknown;
   clearFilter: (...args: any[]) => unknown;
@@ -46,6 +47,8 @@ type AnyChartInstance = {
   referenceDateId: string | null;
   setReferenceDateId: (...args: any[]) => unknown;
   availableDateColumns: ChartContextChart['availableDateColumns'];
+  dateRangePreset: ChartContextChart['dateRangePreset'];
+  setDateRangePreset: (...args: any[]) => unknown;
   dateRangeFilter: ChartContextChart['dateRangeFilter'];
   setDateRangeFilter: (...args: any[]) => unknown;
   transformedData: ChartContextChart['transformedData'];

package/dist/ui/chart-context.mjs

@@ -50,6 +50,7 @@ function createChartContextChart(chart) {
 		setTimeBucket: chart.setTimeBucket,
 		availableTimeBuckets: chart.availableTimeBuckets,
 		isTimeSeries: chart.isTimeSeries,
+		connectNulls: chart.connectNulls,
 		filters: new Map(chart.filters),
 		toggleFilter: (columnId, value) => {
 			if (!isKnownColumnId(columnIds, columnId)) throw new Error(`Unknown chart column ID: "${columnId}"`);
@@ -70,6 +71,8 @@ function createChartContextChart(chart) {
 			chart.setReferenceDateId(columnId);
 		},
 		availableDateColumns: chart.availableDateColumns,
+		dateRangePreset: chart.dateRangePreset,
+		setDateRangePreset: chart.setDateRangePreset,
 		dateRangeFilter: chart.dateRangeFilter,
 		setDateRangeFilter: chart.setDateRangeFilter,
 		transformedData: chart.transformedData,

package/dist/ui/chart-date-range-badge.mjs

@@ -22,9 +22,9 @@ function formatDate(date) {
 * Renders nothing if no date columns are available.
 */
 function ChartDateRangeBadge({ className }) {
-	const { dateRange, dateRangeFilter, availableDateColumns } = useChartContext();
+	const { dateRange, dateRangePreset, availableDateColumns } = useChartContext();
 	if (availableDateColumns.length === 0) return null;
-	const activeLabel = resolvePresetLabel(dateRangeFilter);
+	const activeLabel = resolvePresetLabel(dateRangePreset);
 	const hasRange = dateRange?.min && dateRange?.max;
 	return /* @__PURE__ */ jsxs("div", {
 		className: `inline-flex h-7 items-center gap-1.5 rounded-lg border border-border/50 bg-muted/30 px-2.5 text-xs text-muted-foreground ${className ?? ""}`,

package/dist/ui/chart-date-range-panel.mjs

@@ -1,86 +1,14 @@
+import { DATE_RANGE_PRESETS, getPresetLabel } from "../core/date-range-presets.mjs";
 import { useChartContext } from "./chart-context.mjs";
-import { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/ui/chart-date-range-panel.tsx
 /**
 * Date range panel content — reusable by both ChartDateRange (inside a popover)
 * and ChartToolbarOverflow (rendered inline).
 *
-* Shows preset buttons (All time, Last 7 days, etc.), a reference date
+* Shows preset buttons (Auto, All time, Last 7 days, etc.), a reference date
 * column picker, and custom date inputs.
 */
-/**
-* Build the list of date range presets relative to "now".
-*
-* "All time" → null (no date filtering)
-* Other presets → { from: Date, to: null } (bounded filter)
-*/
-function getPresets() {
-	return [
-		{
-			label: "All time",
-			buildFilter: () => null
-		},
-		{
-			label: "Last 7 days",
-			buildFilter: () => ({
-				from: daysAgo(7),
-				to: null
-			})
-		},
-		{
-			label: "Last 30 days",
-			buildFilter: () => ({
-				from: daysAgo(30),
-				to: null
-			})
-		},
-		{
-			label: "Last 3 months",
-			buildFilter: () => ({
-				from: monthsAgo(3),
-				to: null
-			})
-		},
-		{
-			label: "Last 6 months",
-			buildFilter: () => ({
-				from: monthsAgo(6),
-				to: null
-			})
-		},
-		{
-			label: "Last 12 months",
-			buildFilter: () => ({
-				from: monthsAgo(12),
-				to: null
-			})
-		},
-		{
-			label: "Year to date",
-			buildFilter: () => ({
-				from: startOfYear(),
-				to: null
-			})
-		}
-	];
-}
-function daysAgo(n) {
-	const d = /* @__PURE__ */ new Date();
-	d.setDate(d.getDate() - n);
-	d.setHours(0, 0, 0, 0);
-	return d;
-}
-function monthsAgo(n) {
-	const d = /* @__PURE__ */ new Date();
-	d.setMonth(d.getMonth() - n);
-	d.setHours(0, 0, 0, 0);
-	return d;
-}
-function startOfYear() {
-	const d = /* @__PURE__ */ new Date();
-	return new Date(d.getFullYear(), 0, 1);
-}
 /** Format a Date as YYYY-MM-DD for native date input value. */
 function toInputValue(date) {
 	if (!date) return "";
@@ -93,24 +21,14 @@ function fromInputValue(value) {
 	return Number.isNaN(d.getTime()) ? null : d;
 }
 /**
-* Determine which preset label matches the current filter, or "Custom".
-* null → "All time" (no date filtering)
-* Compares dates at day-level precision.
+* Resolve the display label for the current date range state.
+*
+* When a preset is active, returns the preset label.
+* When no preset is active (custom range), returns "Custom".
 */
-function resolvePresetLabel(filter) {
-	if (filter === null) return "All time";
-	const presets = getPresets();
-	for (const preset of presets) {
-		const pf = preset.buildFilter();
-		if (pf === null) continue;
-		if (sameDay(pf.from, filter.from) && sameDay(pf.to, filter.to)) return preset.label;
-	}
-	return "Custom";
-}
-function sameDay(a, b) {
-	if (!a && !b) return true;
-	if (!a || !b) return false;
-	return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+function resolvePresetLabel(dateRangePreset) {
+	if (dateRangePreset === null) return "Custom";
+	return getPresetLabel(dateRangePreset);
 }
 /**
 * Date range panel content (no popover wrapper).
@@ -119,13 +37,11 @@ function sameDay(a, b) {
 * @property className - Additional CSS classes
 */
 function ChartDateRangePanel({ onClose, className }) {
-	const { dateRangeFilter, setDateRangeFilter, referenceDateId, setReferenceDateId, availableDateColumns } = useChartContext();
-	const presets = useMemo(() => getPresets(), []);
-	const activeLabel = resolvePresetLabel(dateRangeFilter);
+	const { dateRangePreset, setDateRangePreset, dateRangeFilter, setDateRangeFilter, referenceDateId, setReferenceDateId, availableDateColumns } = useChartContext();
 	const hasMultipleDateColumns = availableDateColumns.length > 1;
-	const handlePreset = (preset) => {
-		setDateRangeFilter(preset.buildFilter());
-		if (preset.label !== "Custom") onClose?.();
+	const handlePreset = (presetId) => {
+		setDateRangePreset(presetId);
+		onClose?.();
 	};
 	const handleCustomFrom = (value) => {
 		setDateRangeFilter({
@@ -166,12 +82,14 @@ function ChartDateRangePanel({ onClose, className }) {
 					children: "Range"
 				}), /* @__PURE__ */ jsx("div", {
 					className: "grid grid-cols-2 gap-1",
-					children: presets.map((preset) => {
+					children: DATE_RANGE_PRESETS.map((preset) => {
+						const isActive = dateRangePreset === preset.id;
 						return /* @__PURE__ */ jsx("button", {
-							onClick: () => handlePreset(preset),
-							className: `rounded-md px-2 py-1.5 text-left text-xs transition-colors ${activeLabel === preset.label ? "bg-primary/10 font-medium text-primary" : "text-foreground hover:bg-muted"}`,
+							onClick: () => handlePreset(preset.id),
+							title: preset.description,
+							className: `rounded-md px-2 py-1.5 text-left text-xs transition-colors ${isActive ? "bg-primary/10 font-medium text-primary" : "text-foreground hover:bg-muted"}`,
 							children: preset.label
-						}, preset.label);
+						}, preset.id);
 					})
 				})]
 			}),

package/dist/ui/chart-date-range.mjs

@@ -24,12 +24,12 @@ function formatDate(date) {
 * Also serves as the reference date column picker when multiple date columns exist.
 */
 function ChartDateRange({ className }) {
-	const { dateRange, dateRangeFilter, availableDateColumns } = useChartContext();
+	const { dateRange, dateRangePreset, availableDateColumns } = useChartContext();
 	const [isOpen, setIsOpen] = useState(false);
 	const triggerRef = useRef(null);
 	if (availableDateColumns.length === 0) return null;
-	const activeLabel = resolvePresetLabel(dateRangeFilter);
-	const isFiltered = dateRangeFilter !== null;
+	const activeLabel = resolvePresetLabel(dateRangePreset);
+	const isFiltered = dateRangePreset !== "all-time";
 	const hasRange = dateRange?.min && dateRange?.max;
 	return /* @__PURE__ */ jsxs("div", {
 		className,

package/dist/ui/chart-group-by-selector.d.mts

@@ -6,9 +6,11 @@ import * as react_jsx_runtime0 from "react/jsx-runtime";
  */
 /** Custom dropdown to select the groupBy column. */
 declare function ChartGroupBySelector({
-  className
+  className,
+  hideIcon
 }: {
   className?: string;
+  hideIcon?: boolean;
 }): react_jsx_runtime0.JSX.Element | null;
 //#endregion
 export { ChartGroupBySelector };

package/dist/ui/chart-group-by-selector.mjs

@@ -2,12 +2,13 @@ import { CHART_TYPE_CONFIG } from "../core/chart-capabilities.mjs";
 import { useChartContext } from "./chart-context.mjs";
 import { ChartSelect } from "./chart-select.mjs";
 import { jsx } from "react/jsx-runtime";
+import { Layers } from "lucide-react";
 //#region src/ui/chart-group-by-selector.tsx
 /**
 * GroupBy selector — premium custom dropdown replacing native <select>.
 */
 /** Custom dropdown to select the groupBy column. */
-function ChartGroupBySelector({ className }) {
+function ChartGroupBySelector({ className, hideIcon }) {
 	const { chartType, groupById, setGroupBy, availableGroupBys } = useChartContext();
 	if (!CHART_TYPE_CONFIG[chartType].supportsGrouping || availableGroupBys.length === 0) return null;
 	const options = [{
@@ -22,6 +23,8 @@ function ChartGroupBySelector({ className }) {
 		options,
 		onChange: (v) => setGroupBy(v || null),
 		ariaLabel: "Group by",
+		icon: Layers,
+		hideIcon,
 		className
 	});
 }