@espressif/dashboard-ui-components 1.11.2 → 1.12.0

package/dist/components/chart/index.d.ts

@@ -0,0 +1,732 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+import * as RechartsPrimitive from 'recharts';
+import { Area, Line, YAxis } from 'recharts';
+import { k as StyleAxisProps } from '../../style-axes-DSQ2DGc5.js';
+import { C as Color } from '../../index-BQANnKs9.js';
+
+declare const THEMES: {
+    readonly light: "";
+    readonly dark: ".dark";
+};
+type ChartConfig = Record<string, {
+    label?: React.ReactNode;
+    icon?: React.ComponentType<{
+        className?: string;
+    }>;
+} & ({
+    color?: string;
+    theme?: never;
+} | {
+    color?: never;
+    theme: Record<keyof typeof THEMES, string>;
+})>;
+
+type TooltipValueType = number | string | Array<number | string>;
+type TooltipNameType = number | string;
+type ChartTooltipFormatter = RechartsPrimitive.DefaultTooltipContentProps<TooltipValueType, TooltipNameType>["formatter"];
+declare const ChartContainer: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    config: ChartConfig;
+    children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
+    initialDimension?: {
+        width: number;
+        height: number;
+    };
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ChartStyle: ({ id, config }: {
+    id: string;
+    config: ChartConfig;
+}) => React.JSX.Element | null;
+declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
+declare function ChartTooltipContent({ active, payload, className, indicator, hideLabel, hideIndicator, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, radius, elevation, }: React.ComponentProps<typeof RechartsPrimitive.Tooltip> & React.ComponentProps<"div"> & Pick<StyleAxisProps, "radius" | "elevation"> & {
+    hideLabel?: boolean;
+    hideIndicator?: boolean;
+    indicator?: "line" | "dot" | "dashed";
+    nameKey?: string;
+    labelKey?: string;
+} & Omit<RechartsPrimitive.DefaultTooltipContentProps<TooltipValueType, TooltipNameType>, "accessibilityLayer">): React.JSX.Element | null;
+declare const ChartLegend: typeof RechartsPrimitive.Legend;
+declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, nameKey, }: React.ComponentProps<"div"> & {
+    hideIcon?: boolean;
+    nameKey?: string;
+} & RechartsPrimitive.DefaultLegendContentProps): React.JSX.Element | null;
+/**
+ * `inline`: the default centred, wrapping row of swatches and labels.
+ * `rows`: one entry per line: swatch, label, then the value aligned right.
+ * `columns`: the `rows` entries split over `legendColumns` columns; a single
+ * column when the legend is narrower than 28rem.
+ */
+type ChartLegendLayout = "inline" | "rows" | "columns";
+/** What `rows` and `columns` legends show to the right of each label. */
+type ChartLegendValue = "value" | "percent" | "both" | "none";
+/** Legend props shared by every chart. */
+type ChartLegendOptions = {
+    /** Default `inline`. `rows` and `columns` render below the chart, outside the plot area. */
+    legendLayout?: ChartLegendLayout;
+    /** Column count for `legendLayout="columns"`. Default `2`. */
+    legendColumns?: number;
+    /**
+     * Value shown for each entry in `rows` / `columns` legends. Default `value`.
+     * Cartesian charts show each series' total across `data`; the percentage is
+     * that entry's share of all entries.
+     */
+    legendValue?: ChartLegendValue;
+    /** Formats the value column. Default `toLocaleString()`. */
+    legendValueFormatter?: (value: number, key: string) => React.ReactNode;
+    /** Class name for the `rows` / `columns` legend element. */
+    legendClassName?: string;
+};
+type ChartLegendListItem = {
+    key: string;
+    label?: React.ReactNode;
+    /** Any CSS color. Defaults to `var(--color-<key>)`. */
+    color?: string;
+    icon?: React.ComponentType<{
+        className?: string;
+    }>;
+    value?: number;
+};
+type ChartLegendListProps = Omit<React.ComponentProps<"div">, "children"> & {
+    items: ChartLegendListItem[];
+    layout?: Exclude<ChartLegendLayout, "inline">;
+    columns?: number;
+    value?: ChartLegendValue;
+    valueFormatter?: (value: number, key: string) => React.ReactNode;
+    /** Denominator for percentages. Defaults to the sum of the item values. */
+    total?: number;
+};
+/**
+ * Legend as a list: swatch, label, then the value (and/or percentage) aligned
+ * right. Charts render it for `legendLayout="rows" | "columns"`; use it
+ * directly next to a custom `ChartContainer`, passing explicit `color`s.
+ */
+declare function ChartLegendList({ items, layout, columns, value, valueFormatter, total: totalProp, className, style, ...props }: ChartLegendListProps): React.JSX.Element | null;
+
+/**
+ * Default series palette (order preserved). Values resolve from `@theme` in `colors.css`
+ * (`--color-chart-1` … `--color-chart-10`). Consumers must load library styles (e.g.
+ * `@espressif/dashboard-ui-components/styles`) so these variables exist. Additional
+ * entries (`11` … `20`) are explicit hex accents.
+ */
+declare const DEFAULT_CHART_SERIES_COLORS: readonly ["var(--color-chart-1)", "var(--color-chart-2)", "var(--color-chart-3)", "var(--color-chart-4)", "var(--color-chart-5)", "var(--color-chart-6)", "var(--color-chart-7)", "var(--color-chart-8)", "var(--color-chart-9)", "var(--color-chart-10)", "#7DB7FF", "#78D6B2", "#FFB98A", "#B79CED", "#F6A6C1", "#7ED7D1", "#F5D67A", "#FF9C9C", "#D6B5FF", "#A8D5BA"];
+/**
+ * Ordinal series palette as named keys (`color1` … `color20`). First 10 use the
+ * theme CSS vars from `colors.css`; remaining entries are explicit hex accents.
+ *
+ * {@link DEFAULT_CHART_SERIES_COLORS}; use this when you want dot access like
+ * `CHART_CATEGORY_COLORS.success` for categories.
+ */
+declare const CHART_SERIES_COLORS: {
+    readonly color1: "var(--color-chart-1)";
+    readonly color2: "var(--color-chart-2)";
+    readonly color3: "var(--color-chart-3)";
+    readonly color4: "var(--color-chart-4)";
+    readonly color5: "var(--color-chart-5)";
+    readonly color6: "var(--color-chart-6)";
+    readonly color7: "var(--color-chart-7)";
+    readonly color8: "var(--color-chart-8)";
+    readonly color9: "var(--color-chart-9)";
+    readonly color10: "var(--color-chart-10)";
+    readonly color11: "#7DB7FF";
+    readonly color12: "#78D6B2";
+    readonly color13: "#FFB98A";
+    readonly color14: "#B79CED";
+    readonly color15: "#F6A6C1";
+    readonly color16: "#7ED7D1";
+    readonly color17: "#F5D67A";
+    readonly color18: "#FF9C9C";
+    readonly color19: "#D6B5FF";
+    readonly color20: "#A8D5BA";
+};
+type ChartSeriesColorKey = keyof typeof CHART_SERIES_COLORS;
+/** Semantic chart colors — resolve from `colors.css` (`--color-chart-success`, etc.). For ordinal series see {@link CHART_SERIES_COLORS}. */
+declare const CHART_CATEGORY_COLORS: {
+    readonly primary: "var(--color-chart-primary)";
+    readonly secondary: "var(--color-chart-secondary)";
+    readonly success: "var(--color-chart-success)";
+    readonly error: "var(--color-chart-error)";
+    readonly warning: "var(--color-chart-warning)";
+    readonly disabled: "var(--color-chart-disabled)";
+    readonly gray: "var(--color-chart-gray)";
+};
+type ChartCategoryColorKey = keyof typeof CHART_CATEGORY_COLORS;
+declare function getChartSeriesColor(index: number): string;
+declare function buildSeriesChartConfig(keys: readonly string[], options?: {
+    labels?: Partial<Record<string, string>>;
+    colors?: readonly string[];
+}): ChartConfig;
+
+type BarSize = "sm" | "default" | "lg";
+type BarChartProps = {
+    data: Record<string, unknown>[];
+    config?: ChartConfig;
+    categoryKey?: string;
+    layout?: "horizontal" | "vertical";
+    stacked?: boolean;
+    barSize?: BarSize | number;
+    rounded?: boolean;
+    /**
+     * With `stacked`, draw each segment as its own pill-shaped bar with a gap
+     * between segments, instead of one bar rounded at its ends. Pairs well with
+     * `layout="vertical"` and hidden axes for a single distribution bar.
+     * `rounded={false}` keeps the gaps with square corners.
+     */
+    segmented?: boolean;
+    /** Gap in px between segments when `segmented`. Default `4`. */
+    segmentGap?: number;
+    showTooltip?: boolean;
+    /** Corner radius of the hover tooltip (`radius` on `ChartTooltipContent`); overlay role token otherwise. */
+    tooltipRadius?: StyleAxisProps["radius"];
+    /** Shadow of the hover tooltip (`elevation` on `ChartTooltipContent`); overlay role token otherwise. */
+    tooltipElevation?: StyleAxisProps["elevation"];
+    showLegend?: boolean;
+    showGrid?: boolean;
+    hideXAxis?: boolean;
+    hideYAxis?: boolean;
+    xAxisTickFormatter?: (value: unknown) => string;
+    yAxisTickFormatter?: (value: unknown) => string;
+    /** Passed to Recharts `Tooltip` → `ChartTooltipContent` as `labelFormatter` (category / X value). */
+    labelFormatter?: (label: unknown, payload: ReadonlyArray<unknown>) => ReactNode;
+    /** Passed to `ChartTooltipContent` as `formatter` for custom rows. */
+    tooltipFormatter?: ChartTooltipFormatter;
+    /** Overrides the tooltip content renderer. */
+    tooltipContent?: React.ComponentProps<typeof ChartTooltip>["content"];
+    /** Recharts bar-to-bar gap within a category group (e.g. `4`, `10%`). */
+    barGap?: number | string;
+    /** Recharts gap between category groups (e.g. `24%`). */
+    categoryGap?: number | string;
+    className?: string;
+    margin?: {
+        top?: number;
+        right?: number;
+        bottom?: number;
+        left?: number;
+    };
+} & ChartLegendOptions;
+declare const BarChart: React.ForwardRefExoticComponent<{
+    data: Record<string, unknown>[];
+    config?: ChartConfig;
+    categoryKey?: string;
+    layout?: "horizontal" | "vertical";
+    stacked?: boolean;
+    barSize?: BarSize | number;
+    rounded?: boolean;
+    /**
+     * With `stacked`, draw each segment as its own pill-shaped bar with a gap
+     * between segments, instead of one bar rounded at its ends. Pairs well with
+     * `layout="vertical"` and hidden axes for a single distribution bar.
+     * `rounded={false}` keeps the gaps with square corners.
+     */
+    segmented?: boolean;
+    /** Gap in px between segments when `segmented`. Default `4`. */
+    segmentGap?: number;
+    showTooltip?: boolean;
+    /** Corner radius of the hover tooltip (`radius` on `ChartTooltipContent`); overlay role token otherwise. */
+    tooltipRadius?: StyleAxisProps["radius"];
+    /** Shadow of the hover tooltip (`elevation` on `ChartTooltipContent`); overlay role token otherwise. */
+    tooltipElevation?: StyleAxisProps["elevation"];
+    showLegend?: boolean;
+    showGrid?: boolean;
+    hideXAxis?: boolean;
+    hideYAxis?: boolean;
+    xAxisTickFormatter?: (value: unknown) => string;
+    yAxisTickFormatter?: (value: unknown) => string;
+    /** Passed to Recharts `Tooltip` → `ChartTooltipContent` as `labelFormatter` (category / X value). */
+    labelFormatter?: (label: unknown, payload: ReadonlyArray<unknown>) => ReactNode;
+    /** Passed to `ChartTooltipContent` as `formatter` for custom rows. */
+    tooltipFormatter?: ChartTooltipFormatter;
+    /** Overrides the tooltip content renderer. */
+    tooltipContent?: React.ComponentProps<typeof ChartTooltip>["content"];
+    /** Recharts bar-to-bar gap within a category group (e.g. `4`, `10%`). */
+    barGap?: number | string;
+    /** Recharts gap between category groups (e.g. `24%`). */
+    categoryGap?: number | string;
+    className?: string;
+    margin?: {
+        top?: number;
+        right?: number;
+        bottom?: number;
+        left?: number;
+    };
+} & ChartLegendOptions & React.RefAttributes<HTMLDivElement>>;
+
+/** Category on X, numeric series on Y (no vertical bar-style layout). */
+type AreaChartProps = {
+    data: Record<string, unknown>[];
+    config?: ChartConfig;
+    categoryKey?: string;
+    stacked?: boolean;
+    /** Recharts area interpolation; default `monotone`. */
+    curveType?: React.ComponentProps<typeof Area>["type"];
+    showTooltip?: boolean;
+    /** Corner radius of the hover tooltip (`radius` on `ChartTooltipContent`); overlay role token otherwise. */
+    tooltipRadius?: StyleAxisProps["radius"];
+    /** Shadow of the hover tooltip (`elevation` on `ChartTooltipContent`); overlay role token otherwise. */
+    tooltipElevation?: StyleAxisProps["elevation"];
+    showLegend?: boolean;
+    showGrid?: boolean;
+    hideXAxis?: boolean;
+    hideYAxis?: boolean;
+    xAxisTickFormatter?: (value: unknown) => string;
+    yAxisTickFormatter?: (value: unknown) => string;
+    className?: string;
+    margin?: {
+        top?: number;
+        right?: number;
+        bottom?: number;
+        left?: number;
+    };
+    /**
+     * Horizontal padding inside the plot area. Category XAxes reserve half a
+     * band-width on each side by default, which leaves a visible gap at the
+     * container edge. Defaults to `0` on both sides so the area meets the edge;
+     * pass explicit values if you need the first/last points inset.
+     */
+    xAxisPadding?: {
+        left?: number;
+        right?: number;
+    };
+} & ChartLegendOptions;
+declare const AreaChart: React.ForwardRefExoticComponent<{
+    data: Record<string, unknown>[];
+    config?: ChartConfig;
+    categoryKey?: string;
+    stacked?: boolean;
+    /** Recharts area interpolation; default `monotone`. */
+    curveType?: React.ComponentProps<typeof Area>["type"];
+    showTooltip?: boolean;
+    /** Corner radius of the hover tooltip (`radius` on `ChartTooltipContent`); overlay role token otherwise. */
+    tooltipRadius?: StyleAxisProps["radius"];
+    /** Shadow of the hover tooltip (`elevation` on `ChartTooltipContent`); overlay role token otherwise. */
+    tooltipElevation?: StyleAxisProps["elevation"];
+    showLegend?: boolean;
+    showGrid?: boolean;
+    hideXAxis?: boolean;
+    hideYAxis?: boolean;
+    xAxisTickFormatter?: (value: unknown) => string;
+    yAxisTickFormatter?: (value: unknown) => string;
+    className?: string;
+    margin?: {
+        top?: number;
+        right?: number;
+        bottom?: number;
+        left?: number;
+    };
+    /**
+     * Horizontal padding inside the plot area. Category XAxes reserve half a
+     * band-width on each side by default, which leaves a visible gap at the
+     * container edge. Defaults to `0` on both sides so the area meets the edge;
+     * pass explicit values if you need the first/last points inset.
+     */
+    xAxisPadding?: {
+        left?: number;
+        right?: number;
+    };
+} & ChartLegendOptions & React.RefAttributes<HTMLDivElement>>;
+
+type LineStrokeWidth = "sm" | "default" | "lg";
+/** Category on X, numeric series rendered as lines. Shares data shape with BarChart/AreaChart. */
+type LineChartProps = {
+    data: Record<string, unknown>[];
+    config?: ChartConfig;
+    categoryKey?: string;
+    stacked?: boolean;
+    /** Recharts line interpolation; default `monotone`. */
+    curveType?: React.ComponentProps<typeof Line>["type"];
+    /** Stroke thickness preset or explicit pixel value. */
+    strokeWidth?: LineStrokeWidth | number;
+    /** Render dots at each data point. */
+    showDots?: boolean;
+    /** Emphasized dot on hover. */
+    showActiveDot?: boolean;
+    /**
+     * Kept for API compatibility. Line strokes always use a solid series color:
+     * SVG `linearGradient` strokes vanish on perfectly flat lines (zero-height
+     * stroke bbox with `objectBoundingBox` gradients).
+     */
+    gradientStroke?: boolean;
+    /** Faint area fill under each line for ambient depth. */
+    gradientGlow?: boolean;
+    showTooltip?: boolean;
+    /** Corner radius of the hover tooltip (`radius` on `ChartTooltipContent`); overlay role token otherwise. */
+    tooltipRadius?: StyleAxisProps["radius"];
+    /** Shadow of the hover tooltip (`elevation` on `ChartTooltipContent`); overlay role token otherwise. */
+    tooltipElevation?: StyleAxisProps["elevation"];
+    showLegend?: boolean;
+    showGrid?: boolean;
+    hideXAxis?: boolean;
+    hideYAxis?: boolean;
+    xAxisTickFormatter?: (value: unknown) => string;
+    yAxisTickFormatter?: (value: unknown) => string;
+    /** Passed to Recharts `Tooltip` → `ChartTooltipContent` as `labelFormatter` (category / X value). */
+    labelFormatter?: (label: unknown, payload: ReadonlyArray<unknown>) => ReactNode;
+    className?: string;
+    margin?: {
+        top?: number;
+        right?: number;
+        bottom?: number;
+        left?: number;
+    };
+} & ChartLegendOptions;
+declare const LineChart: React.ForwardRefExoticComponent<{
+    data: Record<string, unknown>[];
+    config?: ChartConfig;
+    categoryKey?: string;
+    stacked?: boolean;
+    /** Recharts line interpolation; default `monotone`. */
+    curveType?: React.ComponentProps<typeof Line>["type"];
+    /** Stroke thickness preset or explicit pixel value. */
+    strokeWidth?: LineStrokeWidth | number;
+    /** Render dots at each data point. */
+    showDots?: boolean;
+    /** Emphasized dot on hover. */
+    showActiveDot?: boolean;
+    /**
+     * Kept for API compatibility. Line strokes always use a solid series color:
+     * SVG `linearGradient` strokes vanish on perfectly flat lines (zero-height
+     * stroke bbox with `objectBoundingBox` gradients).
+     */
+    gradientStroke?: boolean;
+    /** Faint area fill under each line for ambient depth. */
+    gradientGlow?: boolean;
+    showTooltip?: boolean;
+    /** Corner radius of the hover tooltip (`radius` on `ChartTooltipContent`); overlay role token otherwise. */
+    tooltipRadius?: StyleAxisProps["radius"];
+    /** Shadow of the hover tooltip (`elevation` on `ChartTooltipContent`); overlay role token otherwise. */
+    tooltipElevation?: StyleAxisProps["elevation"];
+    showLegend?: boolean;
+    showGrid?: boolean;
+    hideXAxis?: boolean;
+    hideYAxis?: boolean;
+    xAxisTickFormatter?: (value: unknown) => string;
+    yAxisTickFormatter?: (value: unknown) => string;
+    /** Passed to Recharts `Tooltip` → `ChartTooltipContent` as `labelFormatter` (category / X value). */
+    labelFormatter?: (label: unknown, payload: ReadonlyArray<unknown>) => ReactNode;
+    className?: string;
+    margin?: {
+        top?: number;
+        right?: number;
+        bottom?: number;
+        left?: number;
+    };
+} & ChartLegendOptions & React.RefAttributes<HTMLDivElement>>;
+
+type ComposedChartSeries = {
+    dataKey: string;
+    type: "bar" | "line";
+    /**
+     * The Y axis this series is plotted against.
+     *
+     * @default "left"
+     */
+    yAxisId?: "left" | "right";
+    stackId?: string;
+    barSize?: BarSize | number;
+    rounded?: boolean;
+    /**
+     * Optional per-row bar fill override. Useful for partial-period striping.
+     * Returning `undefined` falls back to the series color.
+     */
+    getCellFill?: (row: Record<string, unknown>, index: number) => string | undefined;
+    curveType?: React.ComponentProps<typeof Line>["type"];
+    strokeWidth?: LineStrokeWidth | number;
+    showDots?: boolean;
+    showActiveDot?: boolean;
+};
+type ComposedChartProps = {
+    data: Record<string, unknown>[];
+    config?: ChartConfig;
+    categoryKey?: string;
+    series?: ComposedChartSeries[];
+    showTooltip?: boolean;
+    /** Corner radius of the hover tooltip (`radius` on `ChartTooltipContent`); overlay role token otherwise. */
+    tooltipRadius?: StyleAxisProps["radius"];
+    /** Shadow of the hover tooltip (`elevation` on `ChartTooltipContent`); overlay role token otherwise. */
+    tooltipElevation?: StyleAxisProps["elevation"];
+    showLegend?: boolean;
+    showGrid?: boolean;
+    hideXAxis?: boolean;
+    hideYAxis?: boolean;
+    hideRightYAxis?: boolean;
+    xAxisTickFormatter?: (value: unknown) => string;
+    yAxisTickFormatter?: (value: unknown) => string;
+    rightYAxisTickFormatter?: (value: unknown) => string;
+    yAxisTickCount?: number;
+    rightYAxisTickCount?: number;
+    yAxisDomain?: React.ComponentProps<typeof YAxis>["domain"];
+    rightYAxisDomain?: React.ComponentProps<typeof YAxis>["domain"];
+    rightYAxisTicks?: number[];
+    labelFormatter?: (label: unknown, payload: ReadonlyArray<unknown>) => ReactNode;
+    tooltipFormatter?: ChartTooltipFormatter;
+    tooltipContent?: React.ComponentProps<typeof ChartTooltip>["content"];
+    defs?: React.ReactNode;
+    barGap?: number | string;
+    categoryGap?: number | string;
+    className?: string;
+    margin?: {
+        top?: number;
+        right?: number;
+        bottom?: number;
+        left?: number;
+    };
+} & ChartLegendOptions;
+declare const ComposedChart: React.ForwardRefExoticComponent<{
+    data: Record<string, unknown>[];
+    config?: ChartConfig;
+    categoryKey?: string;
+    series?: ComposedChartSeries[];
+    showTooltip?: boolean;
+    /** Corner radius of the hover tooltip (`radius` on `ChartTooltipContent`); overlay role token otherwise. */
+    tooltipRadius?: StyleAxisProps["radius"];
+    /** Shadow of the hover tooltip (`elevation` on `ChartTooltipContent`); overlay role token otherwise. */
+    tooltipElevation?: StyleAxisProps["elevation"];
+    showLegend?: boolean;
+    showGrid?: boolean;
+    hideXAxis?: boolean;
+    hideYAxis?: boolean;
+    hideRightYAxis?: boolean;
+    xAxisTickFormatter?: (value: unknown) => string;
+    yAxisTickFormatter?: (value: unknown) => string;
+    rightYAxisTickFormatter?: (value: unknown) => string;
+    yAxisTickCount?: number;
+    rightYAxisTickCount?: number;
+    yAxisDomain?: React.ComponentProps<typeof YAxis>["domain"];
+    rightYAxisDomain?: React.ComponentProps<typeof YAxis>["domain"];
+    rightYAxisTicks?: number[];
+    labelFormatter?: (label: unknown, payload: ReadonlyArray<unknown>) => ReactNode;
+    tooltipFormatter?: ChartTooltipFormatter;
+    tooltipContent?: React.ComponentProps<typeof ChartTooltip>["content"];
+    defs?: React.ReactNode;
+    barGap?: number | string;
+    categoryGap?: number | string;
+    className?: string;
+    margin?: {
+        top?: number;
+        right?: number;
+        bottom?: number;
+        left?: number;
+    };
+} & ChartLegendOptions & React.RefAttributes<HTMLDivElement>>;
+
+type DonutDatum = {
+    key: string;
+    value: number;
+    children?: DonutDatum[];
+};
+type DonutChartProps = {
+    data: DonutDatum[];
+    config?: ChartConfig;
+    innerRadius?: number | string;
+    outerRadius?: number | string;
+    ringGap?: number;
+    startAngle?: number;
+    endAngle?: number;
+    paddingAngle?: number;
+    cornerRadius?: number;
+    showTooltip?: boolean;
+    /** Corner radius of the hover tooltip (`radius` on `ChartTooltipContent`); overlay role token otherwise. */
+    tooltipRadius?: StyleAxisProps["radius"];
+    /** Shadow of the hover tooltip (`elevation` on `ChartTooltipContent`); overlay role token otherwise. */
+    tooltipElevation?: StyleAxisProps["elevation"];
+    showLegend?: boolean;
+    /**
+     * Apply a subtle per-slice linear gradient (solid at top → slightly
+     * translucent at bottom) for a premium look. Defaults to `true`.
+     */
+    gradient?: boolean;
+    centerLabel?: React.ReactNode;
+    className?: string;
+    margin?: {
+        top?: number;
+        right?: number;
+        bottom?: number;
+        left?: number;
+    };
+} & ChartLegendOptions;
+declare const DonutChart: React.ForwardRefExoticComponent<{
+    data: DonutDatum[];
+    config?: ChartConfig;
+    innerRadius?: number | string;
+    outerRadius?: number | string;
+    ringGap?: number;
+    startAngle?: number;
+    endAngle?: number;
+    paddingAngle?: number;
+    cornerRadius?: number;
+    showTooltip?: boolean;
+    /** Corner radius of the hover tooltip (`radius` on `ChartTooltipContent`); overlay role token otherwise. */
+    tooltipRadius?: StyleAxisProps["radius"];
+    /** Shadow of the hover tooltip (`elevation` on `ChartTooltipContent`); overlay role token otherwise. */
+    tooltipElevation?: StyleAxisProps["elevation"];
+    showLegend?: boolean;
+    /**
+     * Apply a subtle per-slice linear gradient (solid at top → slightly
+     * translucent at bottom) for a premium look. Defaults to `true`.
+     */
+    gradient?: boolean;
+    centerLabel?: React.ReactNode;
+    className?: string;
+    margin?: {
+        top?: number;
+        right?: number;
+        bottom?: number;
+        left?: number;
+    };
+} & ChartLegendOptions & React.RefAttributes<HTMLDivElement>>;
+
+type TreemapDatum = {
+    key: string;
+    value: number;
+    label?: React.ReactNode;
+};
+/**
+ * Styling for the text rendered inside each tile (the key/label and the
+ * value).
+ *
+ * When the chart is rendered with the monochrome `color` prop and you don't
+ * pass an explicit `color` here, each tile picks its own contrast text
+ * automatically based on its ramp position — saturated tiles get the inverse
+ * of `--color-foreground`, faded tiles get `--color-foreground`. This works
+ * across both light and dark themes without an outline halo.
+ *
+ * Defaults: no outline (`outline: "none"`, `outlineWidth: 0`); fall-back
+ * `color` of `var(--color-foreground)` (used in per-key palette mode and as
+ * the fallback when monochrome auto-pick is overridden by the consumer).
+ *
+ * Override these per-instance only when you need a non-default look (e.g.
+ * a fixed brand color, a halo for over-busy backgrounds, or a different
+ * font scale).
+ */
+/** Values accepted by Recharts `Treemap` `animationEasing`. */
+type TreemapAnimationEasing = "ease" | "ease-in" | "ease-in-out" | "ease-out" | "linear";
+type TreemapTileLabelStyle = {
+    /**
+     * Text fill color. When omitted in monochrome (`color` prop) mode, each
+     * tile auto-picks a contrast color based on its ramp position. In per-key
+     * palette mode the fallback is `var(--color-foreground)`. Set this to
+     * force a single color across every tile.
+     */
+    color?: string;
+    /** Stroke color painted under the text for contrast. Pass `"none"` to disable. Default: `"none"`. */
+    outline?: string;
+    /** Outline stroke width in px. Default: `0` (no halo). */
+    outlineWidth?: number;
+    /** Primary label (the key) font size in px. Default: `12`. */
+    fontSize?: number;
+    /** Primary label font weight. Default: `600`. */
+    fontWeight?: number | string;
+    /** Secondary value-line font size in px. Default: `11`. */
+    valueFontSize?: number;
+    /** Secondary value-line font weight. Default: `500`. */
+    valueFontWeight?: number | string;
+};
+type TreemapChartProps = {
+    data: TreemapDatum[];
+    config?: ChartConfig;
+    /**
+     * Render every tile in shades of a single color (darkest = largest tile,
+     * lightest = smallest tile). When set, this overrides per-key colors from
+     * `config`. Accepts any value supported by `@/utils/color` (preset tokens
+     * like `"primary"` / `"success"`, or any CSS color string like `"#0071e3"`,
+     * `"rgb(...)"`, `"var(--color-x)"`).
+     */
+    color?: Color;
+    /**
+     * Cap the number of tiles. Data is sorted descending by `value` first, then
+     * sliced to this length. When omitted, every datum is rendered.
+     */
+    maxDataPoints?: number;
+    showTooltip?: boolean;
+    /** Corner radius of the hover tooltip (`radius` on `ChartTooltipContent`); overlay role token otherwise. */
+    tooltipRadius?: StyleAxisProps["radius"];
+    /** Shadow of the hover tooltip (`elevation` on `ChartTooltipContent`); overlay role token otherwise. */
+    tooltipElevation?: StyleAxisProps["elevation"];
+    showLegend?: boolean;
+    /**
+     * Apply a subtle per-tile vertical gradient (top opaque, bottom slightly
+     * translucent) for a premium look. Defaults to `true`.
+     */
+    gradient?: boolean;
+    /** Recharts treemap aspect ratio (controls tile shape). Default `4 / 3`. */
+    aspectRatio?: number;
+    /** Format the value rendered inside each tile. Default: `toLocaleString()`. */
+    valueFormatter?: (value: number) => string;
+    /** Override the styling for the key/value text rendered inside each tile. */
+    labelStyle?: TreemapTileLabelStyle;
+    className?: string;
+    /**
+     * Tile layout animation on first paint. Default `true`. Set `false` for an
+     * instant layout (no Recharts motion).
+     */
+    isAnimationActive?: boolean;
+    /**
+     * Recharts tile animation duration in ms. Default `300` (Recharts upstream
+     * default is `1500`, which feels slow for dashboards).
+     */
+    animationDuration?: number;
+    /** Recharts animation easing. Default `ease-out`. */
+    animationEasing?: TreemapAnimationEasing;
+    /** Delay before tile animation starts (ms). Default `0`. */
+    animationBegin?: number;
+    /**
+     * Animate when `data` or layout-related props change. When omitted, matches
+     * `isAnimationActive`.
+     */
+    isUpdateAnimationActive?: boolean;
+} & ChartLegendOptions;
+declare const TreemapChart: React.ForwardRefExoticComponent<{
+    data: TreemapDatum[];
+    config?: ChartConfig;
+    /**
+     * Render every tile in shades of a single color (darkest = largest tile,
+     * lightest = smallest tile). When set, this overrides per-key colors from
+     * `config`. Accepts any value supported by `@/utils/color` (preset tokens
+     * like `"primary"` / `"success"`, or any CSS color string like `"#0071e3"`,
+     * `"rgb(...)"`, `"var(--color-x)"`).
+     */
+    color?: Color;
+    /**
+     * Cap the number of tiles. Data is sorted descending by `value` first, then
+     * sliced to this length. When omitted, every datum is rendered.
+     */
+    maxDataPoints?: number;
+    showTooltip?: boolean;
+    /** Corner radius of the hover tooltip (`radius` on `ChartTooltipContent`); overlay role token otherwise. */
+    tooltipRadius?: StyleAxisProps["radius"];
+    /** Shadow of the hover tooltip (`elevation` on `ChartTooltipContent`); overlay role token otherwise. */
+    tooltipElevation?: StyleAxisProps["elevation"];
+    showLegend?: boolean;
+    /**
+     * Apply a subtle per-tile vertical gradient (top opaque, bottom slightly
+     * translucent) for a premium look. Defaults to `true`.
+     */
+    gradient?: boolean;
+    /** Recharts treemap aspect ratio (controls tile shape). Default `4 / 3`. */
+    aspectRatio?: number;
+    /** Format the value rendered inside each tile. Default: `toLocaleString()`. */
+    valueFormatter?: (value: number) => string;
+    /** Override the styling for the key/value text rendered inside each tile. */
+    labelStyle?: TreemapTileLabelStyle;
+    className?: string;
+    /**
+     * Tile layout animation on first paint. Default `true`. Set `false` for an
+     * instant layout (no Recharts motion).
+     */
+    isAnimationActive?: boolean;
+    /**
+     * Recharts tile animation duration in ms. Default `300` (Recharts upstream
+     * default is `1500`, which feels slow for dashboards).
+     */
+    animationDuration?: number;
+    /** Recharts animation easing. Default `ease-out`. */
+    animationEasing?: TreemapAnimationEasing;
+    /** Delay before tile animation starts (ms). Default `0`. */
+    animationBegin?: number;
+    /**
+     * Animate when `data` or layout-related props change. When omitted, matches
+     * `isAnimationActive`.
+     */
+    isUpdateAnimationActive?: boolean;
+} & ChartLegendOptions & React.RefAttributes<HTMLDivElement>>;
+
+export { AreaChart, type AreaChartProps, BarChart, type BarChartProps, type BarSize, CHART_CATEGORY_COLORS, CHART_SERIES_COLORS, type ChartCategoryColorKey, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, type ChartLegendLayout, ChartLegendList, type ChartLegendListItem, type ChartLegendListProps, type ChartLegendOptions, type ChartLegendValue, type ChartSeriesColorKey, ChartStyle, ChartTooltip, ChartTooltipContent, ComposedChart, type ComposedChartProps, type ComposedChartSeries, DEFAULT_CHART_SERIES_COLORS, DonutChart, type DonutChartProps, type DonutDatum, LineChart, type LineChartProps, type LineStrokeWidth, type TreemapAnimationEasing, TreemapChart, type TreemapChartProps, type TreemapDatum, type TreemapTileLabelStyle, buildSeriesChartConfig, getChartSeriesColor };