@matthieumordrel/chart-studio-ui 0.5.2

package/README.md

@@ -0,0 +1,35 @@
+# @matthieumordrel/chart-studio-ui
+
+> Early alpha. Active work in progress. Not recommended for production use yet.
+
+Optional React UI primitives for `@matthieumordrel/chart-studio`.
+
+This package contains the ready-made controls, context provider, and Recharts canvas. It depends on the headless core package and requires Tailwind CSS v4 for the shipped theme contract.
+
+Your app still needs a normal Tailwind CSS v4 integration such as `@tailwindcss/vite`, the PostCSS plugin, or the Tailwind CLI.
+
+Install:
+
+```bash
+bun add @matthieumordrel/chart-studio@alpha @matthieumordrel/chart-studio-ui@alpha react react-dom recharts lucide-react tailwindcss
+```
+
+Current prereleases are published under the `alpha` dist-tag on npm.
+
+Import from:
+
+```tsx
+import {useChart} from '@matthieumordrel/chart-studio'
+import {Chart, ChartCanvas, ChartToolbar} from '@matthieumordrel/chart-studio-ui'
+```
+
+Theme import:
+
+```css
+@import 'tailwindcss';
+@import '@matthieumordrel/chart-studio-ui/theme.css';
+```
+
+Special thanks to the teams behind TanStack Table and Recharts.
+
+Full documentation: <https://github.com/MatthieuMordrel/chart-studio#readme>

package/dist/index.d.mts

@@ -0,0 +1,19 @@
+import { Chart, useChartContext, useTypedChartContext } from "./ui/chart-context.mjs";
+import { ChartCanvas } from "./ui/chart-canvas.mjs";
+import { ControlId } from "./ui/toolbar-types.mjs";
+import { ChartToolbar } from "./ui/chart-toolbar.mjs";
+import { ChartToolbarOverflow } from "./ui/chart-toolbar-overflow.mjs";
+import { ChartSourceSwitcher } from "./ui/chart-source-switcher.mjs";
+import { ChartTypeSelector } from "./ui/chart-type-selector.mjs";
+import { ChartGroupBySelector } from "./ui/chart-group-by-selector.mjs";
+import { ChartTimeBucketSelector } from "./ui/chart-time-bucket-selector.mjs";
+import { ChartMetricSelector } from "./ui/chart-metric-selector.mjs";
+import { ChartMetricPanel } from "./ui/chart-metric-panel.mjs";
+import { ChartXAxisSelector } from "./ui/chart-x-axis-selector.mjs";
+import { ChartDateRange } from "./ui/chart-date-range.mjs";
+import { ChartDateRangeBadge } from "./ui/chart-date-range-badge.mjs";
+import { ChartDateRangePanel } from "./ui/chart-date-range-panel.mjs";
+import { ChartFilters } from "./ui/chart-filters.mjs";
+import { ChartFiltersPanel } from "./ui/chart-filters-panel.mjs";
+import { ChartDebug } from "./ui/chart-debug.mjs";
+export { Chart, ChartCanvas, ChartDateRange, ChartDateRangeBadge, ChartDateRangePanel, ChartDebug, ChartFilters, ChartFiltersPanel, ChartGroupBySelector, ChartMetricPanel, ChartMetricSelector, ChartSourceSwitcher, ChartTimeBucketSelector, ChartToolbar, ChartToolbarOverflow, ChartTypeSelector, ChartXAxisSelector, ControlId, useChartContext, useTypedChartContext };

package/dist/index.mjs

@@ -0,0 +1,18 @@
+import { Chart, useChartContext, useTypedChartContext } from "./ui/chart-context.mjs";
+import { ChartCanvas } from "./ui/chart-canvas.mjs";
+import { ChartDateRangePanel } from "./ui/chart-date-range-panel.mjs";
+import { ChartFiltersPanel } from "./ui/chart-filters-panel.mjs";
+import { ChartMetricPanel } from "./ui/chart-metric-panel.mjs";
+import { ChartDateRange } from "./ui/chart-date-range.mjs";
+import { ChartFilters } from "./ui/chart-filters.mjs";
+import { ChartGroupBySelector } from "./ui/chart-group-by-selector.mjs";
+import { ChartMetricSelector } from "./ui/chart-metric-selector.mjs";
+import { ChartSourceSwitcher } from "./ui/chart-source-switcher.mjs";
+import { ChartTimeBucketSelector } from "./ui/chart-time-bucket-selector.mjs";
+import { ChartTypeSelector } from "./ui/chart-type-selector.mjs";
+import { ChartXAxisSelector } from "./ui/chart-x-axis-selector.mjs";
+import { ChartToolbarOverflow } from "./ui/chart-toolbar-overflow.mjs";
+import { ChartToolbar } from "./ui/chart-toolbar.mjs";
+import { ChartDateRangeBadge } from "./ui/chart-date-range-badge.mjs";
+import { ChartDebug } from "./ui/chart-debug.mjs";
+export { Chart, ChartCanvas, ChartDateRange, ChartDateRangeBadge, ChartDateRangePanel, ChartDebug, ChartFilters, ChartFiltersPanel, ChartGroupBySelector, ChartMetricPanel, ChartMetricSelector, ChartSourceSwitcher, ChartTimeBucketSelector, ChartToolbar, ChartToolbarOverflow, ChartTypeSelector, ChartXAxisSelector, useChartContext, useTypedChartContext };

package/dist/theme.css

@@ -0,0 +1,67 @@
+@source "./";
+
+@theme inline {
+  --color-background: var(--cs-background);
+  --color-foreground: var(--cs-foreground);
+  --color-card: var(--cs-card);
+  --color-card-foreground: var(--cs-card-foreground);
+  --color-popover: var(--cs-popover);
+  --color-popover-foreground: var(--cs-popover-foreground);
+  --color-primary: var(--cs-primary);
+  --color-primary-foreground: var(--cs-primary-foreground);
+  --color-muted: var(--cs-muted);
+  --color-muted-foreground: var(--cs-muted-foreground);
+  --color-border: var(--cs-border);
+  --color-input: var(--cs-input);
+  --color-ring: var(--cs-ring);
+  --radius-sm: max(0px, calc(var(--cs-radius) - 4px));
+  --radius-md: max(0px, calc(var(--cs-radius) - 2px));
+  --radius-lg: var(--cs-radius);
+  --radius-xl: calc(var(--cs-radius) + clamp(0px, var(--cs-radius), 4px));
+}
+
+:root {
+  color-scheme: light;
+  --cs-radius: var(--radius, 0.25rem);
+  --cs-background: var(--background, oklch(0.980 0.002 264.545));
+  --cs-foreground: var(--foreground, oklch(0.128 0.027 261.594));
+  --cs-card: var(--card, oklch(1.000 0 0));
+  --cs-card-foreground: var(--card-foreground, oklch(0.128 0.027 261.594));
+  --cs-popover: var(--popover, oklch(1.000 0 0));
+  --cs-popover-foreground: var(--popover-foreground, oklch(0.128 0.027 261.594));
+  --cs-primary: var(--primary, oklch(0.501 0.228 277.992));
+  --cs-primary-foreground: var(--primary-foreground, oklch(1.000 0 0));
+  --cs-muted: var(--muted, oklch(0.948 0.004 264.536));
+  --cs-muted-foreground: var(--muted-foreground, oklch(0.550 0.023 264.362));
+  --cs-border: var(--border, oklch(0.920 0.006 264.529));
+  --cs-input: var(--input, oklch(0.920 0.006 264.529));
+  --cs-ring: var(--ring, oklch(0.501 0.228 277.992));
+  --cs-chart-1: oklch(0.501 0.228 277.992);
+  --cs-chart-2: oklch(0.550 0.235 302.715);
+  --cs-chart-3: oklch(0.609 0.206 354.673);
+  --cs-chart-4: oklch(0.635 0.109 178.228);
+  --cs-chart-5: oklch(0.732 0.166 58.213);
+}
+
+:root[data-theme='dark'],
+.dark {
+  color-scheme: dark;
+  --cs-background: var(--background, oklch(0.171 0.015 273.761));
+  --cs-foreground: var(--foreground, oklch(0.944 0.005 264.534));
+  --cs-card: var(--card, oklch(0.203 0.018 273.739));
+  --cs-card-foreground: var(--card-foreground, oklch(0.944 0.005 264.534));
+  --cs-popover: var(--popover, oklch(0.224 0.019 273.793));
+  --cs-popover-foreground: var(--popover-foreground, oklch(0.944 0.005 264.534));
+  --cs-primary: var(--primary, oklch(0.597 0.196 282.474));
+  --cs-primary-foreground: var(--primary-foreground, oklch(1.000 0 0));
+  --cs-muted: var(--muted, oklch(0.246 0.018 274.033));
+  --cs-muted-foreground: var(--muted-foreground, oklch(0.618 0.025 264.372));
+  --cs-border: var(--border, oklch(0.258 0.016 274.161));
+  --cs-input: var(--input, oklch(0.287 0.019 274.112));
+  --cs-ring: var(--ring, oklch(0.597 0.196 282.474));
+  --cs-chart-1: oklch(0.625 0.188 283.272);
+  --cs-chart-2: oklch(0.660 0.198 305.491);
+  --cs-chart-3: oklch(0.785 0.132 215.571);
+  --cs-chart-4: oklch(0.789 0.176 158.514);
+  --cs-chart-5: oklch(0.815 0.143 77.593);
+}

package/dist/ui/chart-axis-ticks.mjs

@@ -0,0 +1,65 @@
+//#region src/ui/chart-axis-ticks.ts
+/**
+* Default horizontal breathing room kept between two rendered tick labels.
+*/
+const DEFAULT_MINIMUM_TICK_GAP = 8;
+/**
+* Select visible X-axis tick values so labels stay readable, the first and last
+* values always remain visible, and any unavoidable wider gaps are pushed away
+* from the chart edges.
+*/
+function selectVisibleXAxisTicks({ values, labels, plotWidth, minimumTickGap = DEFAULT_MINIMUM_TICK_GAP, measureLabelWidth = measureLabelWidthByCharacterCount }) {
+	if (values.length <= 2) return [...values];
+	const minimumStep = estimateMinimumTickStep(labels, plotWidth, minimumTickGap, measureLabelWidth);
+	return buildVisibleTickIndices(values.length, minimumStep).map((index) => values[index]);
+}
+/**
+* Estimate the minimum index distance required between rendered labels so they
+* can fit inside the available plot width without overlapping.
+*/
+function estimateMinimumTickStep(labels, plotWidth, minimumTickGap, measureLabelWidth) {
+	if (labels.length <= 1) return 1;
+	const widestLabel = labels.reduce((maxWidth, label) => Math.max(maxWidth, measureLabelWidth(label)), 0);
+	const slotWidth = plotWidth / Math.max(labels.length - 1, 1);
+	return Math.max(1, Math.ceil((widestLabel + minimumTickGap) / Math.max(slotWidth, 1)));
+}
+/**
+* Build the visible tick indices for a given point count and minimum step.
+*
+* The selector keeps the first and last tick, shows as many intermediate ticks
+* as possible, and places any wider fallback gaps near the center so the edges
+* stay visually balanced.
+*/
+function buildVisibleTickIndices(pointCount, minimumStep) {
+	if (pointCount <= 0) return [];
+	if (pointCount <= 2) return Array.from({ length: pointCount }, (_, index) => index);
+	const safeMinimumStep = Math.max(1, Math.floor(minimumStep));
+	if (safeMinimumStep === 1) return Array.from({ length: pointCount }, (_, index) => index);
+	const gapCount = Math.floor((pointCount - 1) / safeMinimumStep);
+	if (gapCount === 0) return [0, pointCount - 1];
+	const gaps = Array.from({ length: gapCount }, () => safeMinimumStep);
+	const remainder = pointCount - 1 - safeMinimumStep * gapCount;
+	for (const gapIndex of getCenteredGapOrder(gapCount).slice(0, remainder)) {
+		const gap = gaps[gapIndex];
+		if (gap !== void 0) gaps[gapIndex] = gap + 1;
+	}
+	const visibleIndices = [0];
+	for (const gap of gaps) visibleIndices.push(visibleIndices[visibleIndices.length - 1] + gap);
+	return visibleIndices;
+}
+/**
+* Order gap positions from the center outward so any larger fallback gaps land
+* away from the chart edges.
+*/
+function getCenteredGapOrder(gapCount) {
+	const center = (gapCount - 1) / 2;
+	return Array.from({ length: gapCount }, (_, index) => index).sort((left, right) => Math.abs(left - center) - Math.abs(right - center) || left - right);
+}
+/**
+* Lightweight default width estimate used by tests and non-DOM callers.
+*/
+function measureLabelWidthByCharacterCount(label) {
+	return label.length;
+}
+//#endregion
+export { selectVisibleXAxisTicks };

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

@@ -0,0 +1,40 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/ui/chart-canvas.d.ts
+/**
+ * Chart canvas — renders the actual recharts chart based on the current state.
+ *
+ * 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.
+ */
+/**
+ * Props for ChartCanvas.
+ *
+ * @property height - Chart height in pixels (default: 300)
+ * @property className - Additional CSS classes
+ * @property showDataLabels - Control data label visibility: `true`/`false` for explicit control,
+ *   or `'auto'` (default) to let {@link DATA_LABEL_DEFAULTS} decide per chart type and time bucket.
+ */
+type ChartCanvasProps = {
+  /** Chart height in pixels (default: 300) */height?: number; /** Additional CSS classes */
+  className?: string;
+  /**
+   * Control data label visibility.
+   * - `true`  — always show
+   * - `false` — always hide
+   * - `'auto'` — resolved from {@link DATA_LABEL_DEFAULTS} per chart type and time bucket
+   */
+  showDataLabels?: boolean | 'auto';
+};
+/** Renders the appropriate recharts chart based on the chart instance state.
+ * @param height - Chart height in pixels (default: 300)
+ * @param className - Additional CSS classes
+ * @param showDataLabels - Control data label visibility: `true`/`false` for explicit control, or `'auto'` (default) to let {@link DATA_LABEL_DEFAULTS} decide per chart type and time bucket.
+ */
+declare function ChartCanvas({
+  height,
+  className,
+  showDataLabels
+}: ChartCanvasProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ChartCanvas };