@acronis-platform/ui-react 0.60.0 → 0.61.0

package/dist/src/components/ui/pie-chart/pie-chart.d.ts

@@ -1,18 +1,88 @@
 import { VariantProps } from 'class-variance-authority';
-import { ChartTooltip, ChartConfig } from '../chart';
+import { ChartTooltip, ChartConfig, ChartTooltipContentProps, ChartAnimationProps, ChartDataLabelProps, PolarLabelPosition, TickFormatter } from '../chart';
 import * as React from 'react';
 declare const pieChartVariants: (props?: ({
     shape?: "pie" | "donut" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/** Row-per-slice datum: the `nameKey` label plus the `dataKey` value. */
+type PieChartDatum = Record<string, string | number>;
+/**
+ * What a slice's data label reads. `percent` is the slice's share of the sum of
+ * every slice value, to one decimal.
+ */
+export type PieChartLabelFormat = 'value' | 'name-value' | 'name-percent' | 'percent';
+/** What the tooltip's value reads — the raw value, or the value and its share. */
+export type PieChartTooltipFormat = 'value' | 'value-percent';
+/** Per-slice overrides, keyed by the slice's `nameKey` value. */
+export interface PieChartSliceSettings {
+    /**
+     * Fill for this slice, overriding its `config` color. Reference an existing
+     * semantic `--ui-*` token, same as `config`.
+     */
+    color?: string;
+    /** Drop this slice's data label while every other slice keeps its own. */
+    hideLabel?: boolean;
+    /** Label format for this slice only — overrides the chart-level `labelFormat`. */
+    labelFormat?: PieChartLabelFormat;
+}
+/**
+ * Compose one slice's data-label text. Exported for unit tests; not part of the
+ * package's public API.
+ *
+ * A percent needs a numeric slice value *and* a non-zero total, and a value
+ * label needs a value at all — so every format degrades rather than printing
+ * `NaN%` or a dangling `"Chrome: "`. The two name-carrying formats fall back to
+ * the bare name; the value-only ones to `''`, which `resolveSliceLabel`
+ * normalizes to `null` (the one value recharts renders no `<text>` for).
+ *
+ * `labelFormatter` formats the slice's *value*, so it reaches `value` and
+ * `name-value` only. A percent is always composed by `slicePercentText` and
+ * never passes through the formatter.
+ */
+export declare function pieChartLabelText(options: {
+    format: PieChartLabelFormat;
+    name: string | number;
+    value: string | number | undefined;
+    total: number;
+    formatter?: TickFormatter;
+}): string;
+/**
+ * The row renderer behind `tooltipFormat="value-percent"` — a slice's value
+ * followed by its share. Exported for unit tests; not part of the package's
+ * public API.
+ *
+ * A `formatter` replaces the default row wholesale, so the swatch and the name
+ * are rebuilt here to match it: the shared `ChartTooltipContent` prefers a
+ * `config` entry's `icon` over the color swatch, and this has to do the same or
+ * a chart with icons would silently lose them under this preset — and the
+ * name/value `gap-4`, which has to be repeated here because a `formatter`
+ * replaces the shared row that carries it.
+ */
+export declare function pieChartValuePercentRow(options: {
+    config: ChartConfig;
+    total: number;
+}): NonNullable<ChartTooltipContentProps['formatter']>;
+/**
+ * The configured `ChartTooltipContent` for `tooltipFormat="value-percent"`.
+ * Exported so the visual-regression story renders the very same element the
+ * component does — recharts can only open a hover tooltip statically via
+ * `defaultIndex` on a raw composition, so the preset has to be reachable from
+ * outside the component to be snapshotted at all.
+ */
+export declare function pieChartValuePercentTooltip(options: {
+    nameKey: string;
+    config: ChartConfig;
+    total: number;
+}): React.ReactElement;
 export interface PieChartCenterLabel {
     /** Headline metric rendered large in the donut hole (e.g. a total). */
     value?: string | number;
     /** Caption rendered under the value. */
     label?: string | number;
 }
-export interface PieChartProps extends Omit<React.ComponentProps<'div'>, 'children'>, VariantProps<typeof pieChartVariants> {
+export interface PieChartProps extends Omit<React.ComponentProps<'div'>, 'children'>, VariantProps<typeof pieChartVariants>, ChartAnimationProps, ChartDataLabelProps {
     /** Row-per-slice data. Each object holds the slice's `nameKey` label + its `dataKey` numeric value. */
-    data: ReadonlyArray<Record<string, string | number>>;
+    data: ReadonlyArray<PieChartDatum>;
     /**
      * Per-slice map of `label` / `color`, keyed by the slice's `nameKey` value
      * (imported from the shared `Chart` primitives). Turned into `--color-<name>`
@@ -40,15 +110,86 @@ export interface PieChartProps extends Omit<React.ComponentProps<'div'>, 'childr
     outerRadius?: number;
     /** Gap between slices, in degrees. */
     paddingAngle?: number;
+    /** Corner radius of each slice. */
+    cornerRadius?: number;
+    /**
+     * Angle the sweep starts at, in degrees (0 is 3 o'clock, counter-clockwise).
+     * Pair with `endAngle` for a semicircle (`180` → `0`) or an arc.
+     *
+     * A partial sweep still centres on the full plot area, so a half turn fills
+     * only half its box — give the chart a short, wide one rather than expecting
+     * the arc to grow into a square.
+     */
+    startAngle?: number;
+    /** Angle the sweep ends at, in degrees. Defaults to a full `360` circle. */
+    endAngle?: number;
+    /**
+     * Smallest angle a non-zero slice may occupy, in degrees — keeps a tiny slice
+     * visible (and hoverable) at the cost of being drawn out of proportion.
+     */
+    minAngle?: number;
+    /**
+     * Per-slice overrides keyed by the slice's `nameKey` value: its `color`, and
+     * whether/how its data label reads. A name with no entry keeps the chart-level
+     * behavior.
+     */
+    sliceSettings?: Record<string, PieChartSliceSettings>;
     showTooltip?: boolean;
     showLegend?: boolean;
+    /** Which edge the legend sits on. Defaults to `bottom`. */
+    legendPosition?: 'top' | 'bottom';
+    /** Plot-area margin, in px. Omit to use recharts' default (5 on every side). */
+    margin?: {
+        top?: number;
+        right?: number;
+        bottom?: number;
+        left?: number;
+    };
     /**
      * Replace the default tooltip. Pass a configured `ChartTooltipContent`
      * (imported from this library) — e.g. with a `formatter` / `labelFormatter` —
      * to customize formatting, per-slice rows, or extra fields without composing
-     * recharts yourself. Ignored when `showTooltip` is false.
+     * recharts yourself. Takes precedence over `tooltipFormat`. Ignored when
+     * `showTooltip` is false.
      */
     tooltipContent?: React.ComponentProps<typeof ChartTooltip>['content'];
+    /**
+     * How the default tooltip reads a slice: its `value` alone (the default), or
+     * the value followed by its share of the total (`value-percent`). The preset
+     * covers the common case without hand-rolling a `tooltipContent`.
+     *
+     * The share is rendered as `NN.N%`, same as a data label's — not locale-aware.
+     * Pass your own `tooltipContent` if you need to format it.
+     */
+    tooltipFormat?: PieChartTooltipFormat;
+    /**
+     * Position of the value labels when `showLabels` is on. Defaults to `outside`,
+     * which keeps them on the chart surface — the only placement that reliably
+     * has contrast, since slice fills are caller-supplied saturated colors. The
+     * on-arc placements are available but switch to the on-fill label token.
+     * Ignored when `labelLine` is on — a leader line only ever ends outside the arc.
+     */
+    labelPosition?: PolarLabelPosition;
+    /**
+     * What each data label reads when `showLabels` is on — the value alone (the
+     * default), or the slice name and/or its share of the total. Overridable per
+     * slice via `sliceSettings`.
+     *
+     * `labelFormatter` formats the slice's *value*, so it reaches `value` and
+     * `name-value` only: a share is always rendered as `NN.N%` (a `.` decimal and
+     * a bare `%`, not locale-aware) and never passes through the formatter.
+     */
+    labelFormat?: PieChartLabelFormat;
+    /**
+     * Draw a leader line from each slice to its data label, in the slice's own
+     * color. Moves the labels outside the arc (see `labelPosition`); slices whose
+     * label is hidden by `sliceSettings` get no line either.
+     *
+     * A label reaching out past the arc needs horizontal room — give the chart a
+     * box wider than it is tall, or shrink the arc (`outerRadius`/`margin`), or
+     * the outermost labels are clipped at the surface edge.
+     */
+    labelLine?: boolean;
 }
 declare const PieChart: React.ForwardRefExoticComponent<Omit<PieChartProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { PieChart, pieChartVariants };

package/dist/src/components/ui/radar-chart/index.d.ts

@@ -1 +1 @@
-export { RadarChart, radarChartVariants, type RadarChartProps } from './radar-chart';
+export { RadarChart, radarChartVariants, type RadarChartProps, type RadarChartSeriesSettings, } from './radar-chart';

package/dist/src/components/ui/radar-chart/radar-chart.d.ts

@@ -1,11 +1,89 @@
 import { VariantProps } from 'class-variance-authority';
-import { ChartTooltip, ChartConfig } from '../chart';
+import { AxisDomainItem } from 'recharts';
+import { ChartTooltip, ChartConfig, ChartAnimationProps, ChartDataLabelProps, CartesianLabelPosition } from '../chart';
 import * as React from 'react';
 declare const radarChartVariants: (props?: ({
     gridType?: "circle" | "polygon" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface RadarChartProps extends Omit<React.ComponentProps<'div'>, 'children'>, VariantProps<typeof radarChartVariants> {
-    /** Row-per-axis data. Each object holds the `angleKey` label + one numeric field per series. */
+/** Per-series overrides, keyed by the series' `dataKeys` entry. */
+export interface RadarChartSeriesSettings {
+    /**
+     * Fill for this series' area, overriding its `config` color. Reference an
+     * existing semantic `--ui-*` token, same as `config`.
+     */
+    color?: string;
+    /**
+     * Outline color, when it should read differently from the fill (e.g. a solid
+     * outline over a barely-tinted area). Defaults to the fill.
+     *
+     * recharts derives a Radar's legend/tooltip color from its stroke first, so
+     * setting this alone also recolors that series' legend swatch and tooltip dot
+     * — set `color` too if the marker should keep following the fill.
+     */
+    stroke?: string;
+    /** Fill opacity for this series, overriding the chart-level `fillOpacity`. */
+    fillOpacity?: number;
+    /** Outline width for this series, overriding the chart-level `strokeWidth`. */
+    strokeWidth?: number;
+    /** Per-point dots for this series, overriding the chart-level `showDots`. */
+    dot?: boolean;
+    /** Dot radius for this series, overriding the chart-level `dotRadius`. */
+    dotRadius?: number;
+    /**
+     * Highlight this series' hovered point, overriding the chart-level
+     * `activeDot`.
+     */
+    activeDot?: boolean;
+}
+/**
+ * Map the `radiusAxisDomain` preset to a recharts radius-axis `domain`. Exported
+ * for unit tests; not part of the package's public API.
+ *
+ * The radius axis is what scales the web, so this is the difference between "the
+ * largest value in the data reaches the outer ring" (recharts' own behavior, and
+ * what an unset preset keeps) and "the outer ring is a known maximum" (`fixed`
+ * plus `radiusAxisDomainMax`). The two only mean something together: a `fixed`
+ * preset with no maximum falls back to the data's own top, i.e. that same
+ * default.
+ */
+export declare function radarRadiusAxisDomain(preset: 'auto' | 'fixed' | undefined, max: number | undefined): Readonly<[AxisDomainItem, AxisDomainItem]> | undefined;
+/** The chart-level styling a `seriesSettings` entry overrides. */
+export interface RadarSeriesDefaults {
+    fillOpacity: number;
+    strokeWidth: number;
+    showDots: boolean;
+    dotRadius: number;
+    activeDot: boolean | undefined;
+}
+/** Resolved recharts `<Radar>` styling for one series. */
+export interface RadarSeriesStyle {
+    fill: string;
+    stroke: string;
+    fillOpacity: number;
+    strokeWidth: number;
+    dot: {
+        r: number;
+    } | false;
+    activeDot: boolean | undefined;
+}
+/**
+ * Fold a series' `seriesSettings` entry over the chart-level styling. Exported
+ * for unit tests; not part of the package's public API.
+ *
+ * Every fallback is `??`, not `||`, so a deliberate falsy override survives —
+ * `fillOpacity: 0` (outline only), `strokeWidth: 0` (fill only), `dot: false`
+ * and `activeDot: false` all have to beat a truthy chart-level value. An
+ * un-overridden fill stays the `--color-<key>` custom property the shared
+ * `ChartContainer` injects from `config`, so the series a caller doesn't name
+ * keeps reading its config color.
+ */
+export declare function radarSeriesStyle(key: string, settings: RadarChartSeriesSettings | undefined, defaults: RadarSeriesDefaults): RadarSeriesStyle;
+export interface RadarChartProps extends Omit<React.ComponentProps<'div'>, 'children'>, VariantProps<typeof radarChartVariants>, ChartAnimationProps, ChartDataLabelProps {
+    /**
+     * Row-per-axis data. Each object holds the `angleKey` label + one numeric field
+     * per series. Every plotted series needs a value in every row: recharts places a
+     * missing one at the centre, which reads as a zero rather than as a gap.
+     */
     data: ReadonlyArray<Record<string, string | number>>;
     /**
      * Per-series map of `label` / `color` (imported from the shared `Chart`
@@ -18,23 +96,158 @@ export interface RadarChartProps extends Omit<React.ComponentProps<'div'>, 'chil
     dataKeys: string[];
     /** The categorical axis key placed around the web (e.g. `"subject"`). */
     angleKey: string;
+    /**
+     * Per-series style overrides, keyed by a `dataKeys` entry — color, outline, and
+     * dots for one series while the rest keep the chart-level values. Keys that
+     * aren't plotted are ignored. An overridden `color` — or `stroke`, which
+     * recharts reads first — follows through to that series' legend swatch and
+     * tooltip dot.
+     */
+    seriesSettings?: Record<string, RadarChartSeriesSettings>;
     /** Fill opacity of each radar area. */
     fillOpacity?: number;
     /** Stroke width of each radar outline. */
     strokeWidth?: number;
     /** Render a dot at each axis point. */
     showDots?: boolean;
+    /** Radius of the per-point dots when `showDots` is on. */
+    dotRadius?: number;
+    /**
+     * Enlarge the hovered point's dot. On by default (recharts' behavior) — pass
+     * `false` for a chart that shouldn't react to the pointer at all.
+     */
+    activeDot?: boolean;
     /** Render the polar grid (the web). */
     showGrid?: boolean;
+    /**
+     * Draw the grid's spokes — the radial lines from the centre out to each
+     * category. Defaults to `true`; off leaves only the concentric rings.
+     */
+    radialLines?: boolean;
+    /**
+     * Render the categorical axis around the web (its spoke labels, tick lines,
+     * and outer line). Defaults to `true`. Turning it off keeps the axis itself —
+     * so the tooltip still names each category — and only hides its chrome.
+     */
+    showAngleAxis?: boolean;
+    /** Place the spoke labels outside the web (default) or inside it. */
+    angleAxisOrientation?: 'inner' | 'outer';
+    /** Draw the line around the web that the spoke labels sit against. Defaults to `true`. */
+    angleAxisLine?: boolean;
+    /**
+     * Shape of that line: straight-edged `polygon` (recharts' default) or a smooth
+     * `circle`. Independent of `gridType`, so pair them to keep a circular web's
+     * outline circular too.
+     */
+    angleAxisLineType?: 'polygon' | 'circle';
+    /** Draw a tick line from the axis line to each spoke label. Defaults to `true`. */
+    angleTickLine?: boolean;
+    /**
+     * Distance from the web to the spoke labels, in px (recharts' default is 8).
+     * Left alone, `showLabels` widens it so a vertex's value can't land on its own
+     * category label.
+     */
+    angleTickSize?: number;
+    /**
+     * Render the value scale — a radial axis of ticks from the centre outward, so
+     * an area can be read as a number and not only compared to its neighbours.
+     * Defaults to `false` (recharts draws no radius axis unless asked).
+     *
+     * `radiusAxisAngle` and `radiusAxisOrientation` only describe the drawn scale,
+     * so they need it shown. `radiusAxisDomain`, `radiusAxisReversed` and
+     * `radiusAxisTickCount` apply while it's hidden too — the first two scale the
+     * web, and the third sets how many rings the grid draws (recharts takes the
+     * grid's concentric radii from the radius axis' ticks).
+     */
+    showRadiusAxis?: boolean;
+    /**
+     * Angle the value scale is drawn at, in degrees counter-clockwise from 3
+     * o'clock (recharts' default is `0`). Point it *between* two spokes: on a
+     * spoke, the outermost tick collides with that category's own label.
+     *
+     * The ticks sit over the areas at any angle — a radar's plot area is its
+     * areas — so this trades one overlap for none of the other.
+     */
+    radiusAxisAngle?: number;
+    /** Which side of the scale its tick labels sit on. Defaults to `right`. */
+    radiusAxisOrientation?: 'left' | 'right' | 'middle';
+    /**
+     * How the value scale is bounded — and with it the web, since the radius axis
+     * is what maps a value to a radius:
+     *
+     * - unset — recharts' own scaling: the data's largest value reaches the outer
+     *   ring, so two charts of the same metric aren't comparable.
+     * - `fixed` — pin the outer ring to `radiusAxisDomainMax` (the metric's own
+     *   maximum, e.g. a score out of 150), which is what makes a radar readable as
+     *   an absolute profile rather than a relative one.
+     * - `auto` — fit the data at both ends; the scale need not start at 0.
+     *
+     * Takes effect whether or not the scale is shown, so a chart can be scaled to a
+     * known maximum without displaying the ticks.
+     */
+    radiusAxisDomain?: 'auto' | 'fixed';
+    /**
+     * The value at the outer ring when `radiusAxisDomain` is `fixed`. Must be
+     * positive — a `0` or negative maximum can't bound an outward-growing scale, so
+     * it falls back to the data's own top.
+     */
+    radiusAxisDomainMax?: number;
+    /**
+     * Desired number of ticks on the value scale (a hint, not exact). Defaults to
+     * recharts' `5`. Also sets how many rings the grid draws, whether or not the
+     * scale itself is shown.
+     */
+    radiusAxisTickCount?: number;
+    /**
+     * Invert the value scale — the maximum at the centre and 0 at the outer ring —
+     * for a metric where less is better (latency, error rate), so a good profile
+     * still reads as a large area.
+     */
+    radiusAxisReversed?: boolean;
+    /** Horizontal centre of the web, in px or a percentage of the width. Defaults to `50%`. */
+    cx?: number | string;
+    /** Vertical centre of the web, in px or a percentage of the height. Defaults to `50%`. */
+    cy?: number | string;
+    /** Angle the first category sits at, in degrees. Defaults to `90` (12 o'clock). */
+    startAngle?: number;
+    /**
+     * Angle the sweep ends at, in degrees. Defaults to `-270` — a full turn
+     * clockwise from `startAngle`. Together the two rotate the web (or wrap the
+     * categories into a partial sweep).
+     */
+    endAngle?: number;
+    /**
+     * Radius of the hole at the centre, in px or a percentage of the available
+     * radius. Defaults to `0`. Also lifts the grid and the areas off the centre,
+     * which separates the series where they all bottom out.
+     */
+    innerRadius?: number | string;
+    /** Outer radius of the web, in px or a percentage of the available radius. Defaults to `80%`. */
+    outerRadius?: number | string;
+    /**
+     * Plot-area margin, in px. Omit it entirely to use recharts' default (5 on
+     * every side) — passing the object replaces all four, and recharts fills the
+     * sides you leave out with `0`, not with `5`. Name every side you want.
+     */
+    margin?: {
+        top?: number;
+        right?: number;
+        bottom?: number;
+        left?: number;
+    };
     showTooltip?: boolean;
     showLegend?: boolean;
+    /** Which side of the chart the legend sits on. Defaults to `bottom`. */
+    legendPosition?: 'top' | 'bottom';
     /**
      * Replace the default tooltip. Pass a configured `ChartTooltipContent`
-     * (imported from this library) — e.g. with a `formatter` / `labelFormatter` /
-     * `indicator` — to customize formatting, per-series rows, or extra fields
-     * without composing recharts yourself. Ignored when `showTooltip` is false.
+     * (imported from this library) — e.g. with a `formatter` / `labelFormatter` —
+     * to customize formatting, per-series rows, or extra fields without composing
+     * recharts yourself. Ignored when `showTooltip` is false.
      */
     tooltipContent?: React.ComponentProps<typeof ChartTooltip>['content'];
+    /** Position of the value labels when `showLabels` is on. Defaults to `top`. */
+    labelPosition?: CartesianLabelPosition;
 }
 declare const RadarChart: React.ForwardRefExoticComponent<Omit<RadarChartProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { RadarChart, radarChartVariants };

package/dist/src/components/ui/radial-bar-chart/index.d.ts

@@ -1 +1 @@
-export { RadialBarChart, type RadialBarChartProps, } from './radial-bar-chart';
+export { RadialBarChart, type RadialBarChartProps, type RadialBarChartCenterLabel, type RadialBarChartLabelFormat, } from './radial-bar-chart';