@lilt-ui/charts 0.8.1 → 0.9.1

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # Changelog
 
+## 0.9.1
+
+Charts fit small dashboard widgets, and category cards share their selection with your page. From a first adoption in an existing app.
+
+### Small and fixed-height plots
+
+- The floating tooltip is never taller than its plot. A new `Tooltip` `density` prop, `auto` by default, switches to a compact layout when the panel would not fit: values in two columns, Unpin beside the date, and less padding. Custom content and pin actions follow along, and the panel scrolls as a last resort. `compact` and `comfortable` fix it either way.
+- Keyboard inspection no longer opens a second panel over the tooltip. While the observation slider has keyboard focus, the plot takes the focus ring and a shown tooltip carries the key hints in its footer.
+- `adaptive` now documents what it reserves: below 420px the readout under the plot keeps about 130px even at rest. Set `adaptive={false}` for a widget with a fixed height.
+
+### Selection you own
+
+- `RadialChartCard`, `FunnelChartCard` and `HorizontalBarChartCard` take `selected` and `onSelectedChange`, so outside filters and a click on the chart share one pinned category. The pin follows the category's name through re-ranking and new values, and a category that leaves the data asks you to clear it.
+- `RadialChartCard` takes `colors`, fixed colors by category name, and `center`, which replaces what the middle of a donut shows.
+
+### Docs
+
+- The API reference describes the cards that ship instead of the standalone families they replaced, explains category identity versus label, and states decimation as it works. A test now fails when a guide names something the package does not export.
+
+## 0.9.0
+
+Every chart now leaves its loading skeleton the same way.
+
+### Loading
+
+- When data lands, the skeleton freezes on the frame it is on, whatever point its loop has reached, then sinks toward where the chart grows from as it fades, and the chart makes its own entrance. Line, area, bar, combo, range, box plot, stat sparklines, scatter and the finance charts sink to the plot's floor; horizontal bars, funnels, sankeys, slopes and stat meters to the left edge; radials, radars, heatmaps, activity rings, progress, stat rings and order books to the centre.
+- A leaving skeleton keeps exactly the shape it was looping in. Bars no longer flash a different, unanimated skeleton as data lands.
+- The fade always completes; on line, area and bar charts the data starts rising just before it ends, so the plot is never empty.
+- The exit animates transform and opacity only, so it stays smooth while the chart's first render is busy. Reduced motion and `motion="none"` swap straight to the data.
+
 ## 0.8.1
 
 ### Fixes

package/dist/activity-ring.d.ts

@@ -1,3 +1,4 @@
+import { SkeletonExitOrigin } from './lifecycle/skeleton-exit';
 import { ReactNode } from 'react';
 import { ChartLoadingStyle, ChartMotion } from './types';
 export interface ActivitySelection<Row> {
@@ -24,6 +25,8 @@ export interface ActivityRingProps<Row> {
     /** `loading` keeps showing the last accepted day until new data is ready. */
     status?: 'ready' | 'loading';
     loadingStyle?: ChartLoadingStyle;
+    /** Set while the skeleton leaves (lifecycle/skeleton-exit.tsx): where it sinks to. */
+    skeletonLeaving?: SkeletonExitOrigin;
     /** A new key drops the accepted day and any selection. */
     resetKey?: string | number;
     motion?: ChartMotion;
@@ -43,5 +46,5 @@ export declare function activitySlots<Row>(data: readonly Row[], hour: (row: Row
  * The 24-hour dot ring inside `ActivityRingCard`: one column of dots per time slot, filled by
  * how much happened then. One tab stop; arrow keys step around the day and Enter pins a slot.
  */
-export declare function ActivityRing<Row>({ data, hour, value, maximum, bucketMinutes, dotDensity, unit, formatValue, center, onSelectionChange, status, loadingStyle, resetKey, motion, height, depth, className, 'aria-label': ariaLabel, }: ActivityRingProps<Row>): import("react/jsx-runtime").JSX.Element;
+export declare function ActivityRing<Row>({ data, hour, value, maximum, bucketMinutes, dotDensity, unit, formatValue, center, onSelectionChange, status, loadingStyle, skeletonLeaving, resetKey, motion, height, depth, className, 'aria-label': ariaLabel, }: ActivityRingProps<Row>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cards/funnel-chart-card.d.ts

@@ -51,6 +51,13 @@ export interface FunnelChartCardProps<Row, Key extends NumericKey<Row>> {
     badge?: ReactNode;
     /** Headline motion: `count` (default), `pop`, `slide`, `roll`, `flow`, or `scramble`. */
     numberStyle?: AnimatedNumberVariant;
+    /**
+     * The pinned stage, by name, for a selection you own: external filters and a click on the
+     * chart then share it. `null` pins nothing. Omit it and the card keeps its own pin.
+     */
+    selected?: string | null;
+    /** Asked when a click, tap, or Escape pins or releases a stage. */
+    onSelectedChange?: (stage: string | null) => void;
     palette?: ChartPalette;
     loading?: boolean;
     loadingStyle?: ChartLoadingStyle;
@@ -84,4 +91,4 @@ export declare function pipeEnd(x: number, half: number, rx: number, side: 'left
  * its percentage on the band and its count in a tile beneath. Hovering a stage reads it in the
  * headline with the conversion from the step before.
  */
-export declare function FunnelChartCard<Row, const Key extends NumericKey<Row>>({ title, data: suppliedData, category, value, curve, colors, tracks, depth, height, headline: suppliedHeadline, delta: suppliedDelta, deltaTone, range, ranges, defaultRange, valueFormat, legend, legendSwatch, locale, formatValue: suppliedFormatValue, color, surface, badge, numberStyle, palette, loading, loadingStyle, motion: motionMode, className, style, }: FunnelChartCardProps<Row, Key>): ReactElement;
+export declare function FunnelChartCard<Row, const Key extends NumericKey<Row>>({ title, data: suppliedData, category, value, curve, colors, tracks, depth, height, headline: suppliedHeadline, delta: suppliedDelta, deltaTone, range, ranges, defaultRange, valueFormat, legend, legendSwatch, locale, formatValue: suppliedFormatValue, color, surface, badge, numberStyle, palette, selected, onSelectedChange, loading, loadingStyle, motion: motionMode, className, style, }: FunnelChartCardProps<Row, Key>): ReactElement;

package/dist/cards/horizontal-bar-chart-card.d.ts

@@ -50,6 +50,13 @@ export interface HorizontalBarChartCardProps<Row, Key extends NumericKey<Row>> {
     badge?: ReactNode;
     /** Headline motion: `count` (default), `pop`, `slide`, `roll`, `flow`, or `scramble`. */
     numberStyle?: AnimatedNumberVariant;
+    /**
+     * The pinned category, by name, for a selection you own: external filters and a click on the
+     * chart then share it. `null` pins nothing. Omit it and the card keeps its own pin.
+     */
+    selected?: string | null;
+    /** Asked when a click, tap, or Escape pins or releases a category. */
+    onSelectedChange?: (category: string | null) => void;
     palette?: ChartPalette;
     loading?: boolean;
     loadingStyle?: ChartLoadingStyle;
@@ -62,4 +69,4 @@ export interface HorizontalBarChartCardProps<Row, Key extends NumericKey<Row>> {
  * A ranked list card: each row carries a bar, its value, and its share of the total. Hovering a
  * row reads it in the headline; click pins it and the arrow keys move through the list.
  */
-export declare function HorizontalBarChartCard<Row, const Key extends NumericKey<Row>>({ title, data: suppliedData, category, value, headline: suppliedHeadline, delta: suppliedDelta, deltaTone, range, ranges, defaultRange, sort, limit, otherLabel, share, rank, depth, barStyle, valueFormat, locale, formatValue: suppliedFormatValue, color, surface, badge, numberStyle, palette, loading, loadingStyle, motion: motionMode, className, style, }: HorizontalBarChartCardProps<Row, Key>): ReactElement;
+export declare function HorizontalBarChartCard<Row, const Key extends NumericKey<Row>>({ title, data: suppliedData, category, value, headline: suppliedHeadline, delta: suppliedDelta, deltaTone, range, ranges, defaultRange, sort, limit, otherLabel, share, rank, depth, barStyle, valueFormat, locale, formatValue: suppliedFormatValue, color, surface, badge, numberStyle, palette, selected, onSelectedChange, loading, loadingStyle, motion: motionMode, className, style, }: HorizontalBarChartCardProps<Row, Key>): ReactElement;

package/dist/cards/radial-chart-card.d.ts

@@ -42,6 +42,23 @@ export interface RadialChartCardProps<Row, Key extends NumericKey<Row>> {
     /** Period select. Each range replaces data, delta, and headline; slices ease to their new size. */
     ranges?: readonly CardRange<Row>[];
     defaultRange?: string;
+    /**
+     * The pinned category, by name, for a selection you own: external filters and a click on a
+     * slice then share it. `null` pins nothing. Omit it and the card keeps its own pin.
+     */
+    selected?: string | null;
+    /** Asked when a click, tap, or Escape pins or releases a category. */
+    onSelectedChange?: (category: string | null) => void;
+    /**
+     * Fixed colors by category name, e.g. `{ Critical: '#ef4444' }`, for categories whose color
+     * means something. Others take the palette in order, and keep it as values change.
+     */
+    colors?: Readonly<Record<string, string>>;
+    /**
+     * Replaces what the middle of a donut or half donut shows (by default the share of the
+     * hovered, pinned, or largest category).
+     */
+    center?: (category: RadialCenterCategory) => ReactNode;
     /**
      * Slices shown before the rest are added up as one "Other" slice. Defaults to 5, since more
      * than six colors stop being told apart. `Infinity` shows every category.
@@ -68,6 +85,16 @@ export interface RadialChartCardProps<Row, Key extends NumericKey<Row>> {
     className?: string;
     style?: CSSProperties | ChartStyle;
 }
+/** The category the middle of the chart speaks for: the active one, or else the largest. */
+export interface RadialCenterCategory {
+    category: string;
+    value: number | null;
+    /** Its part of the visible total, 0 to 1; null when unknown. */
+    share: number | null;
+    /** True while it is hovered, focused, or pinned rather than shown at rest. */
+    active: boolean;
+    pinned: boolean;
+}
 interface Slice {
     id: string;
     startAngle: number;
@@ -86,5 +113,5 @@ export declare function ringAngles(rows: readonly RankedRow[]): Slice[];
  * A donut or pie card: the headline total, slices with a matching legend, and each slice's
  * share. Hovering a slice or a legend row reads it in the headline.
  */
-export declare function RadialChartCard<Row, const Key extends NumericKey<Row>>({ title, data: suppliedData, category, value, variant, depth, legend, legendSwatch, headline: suppliedHeadline, delta: suppliedDelta, deltaTone, range, ranges, defaultRange, limit, otherLabel, sort, valueFormat, locale, formatValue: suppliedFormatValue, surface, badge, numberStyle, palette, loading, loadingStyle, motion: motionMode, className, style, }: RadialChartCardProps<Row, Key>): ReactElement;
+export declare function RadialChartCard<Row, const Key extends NumericKey<Row>>({ title, data: suppliedData, category, value, variant, depth, legend, legendSwatch, headline: suppliedHeadline, delta: suppliedDelta, deltaTone, range, ranges, defaultRange, limit, otherLabel, sort, valueFormat, locale, formatValue: suppliedFormatValue, surface, badge, numberStyle, palette, selected, onSelectedChange, colors: fixedColors, center, loading, loadingStyle, motion: motionMode, className, style, }: RadialChartCardProps<Row, Key>): ReactElement;
 export {};

package/dist/cards/use-card-selection.d.ts

@@ -0,0 +1,10 @@
+/**
+ * The pinned category of a card, owned by the card or by its consumer. Controlled when
+ * `selected` is not undefined: the card then only requests changes through `onSelectedChange`,
+ * and a selection naming a category that is not in the data shows nothing pinned and asks the
+ * owner to clear it. Identity is the category's name, so re-ranking or new values keep the pin.
+ */
+export declare function useCardSelection(selected: string | null | undefined, onSelectedChange: ((category: string | null) => void) | undefined, categories: readonly string[], ready: boolean): readonly [
+    string | null,
+    (next: string | null | ((current: string | null) => string | null)) => void
+];