semiotic 3.4.2 → 3.5.0

package/dist/components/charts/network/CirclePack.d.ts

@@ -26,7 +26,42 @@ export interface CirclePackProps<TNode extends Datum = Datum> extends BaseChartP
 /**
  * CirclePack - Visualize hierarchical data as nested circles.
  *
- * Wraps StreamNetworkFrame (canvas-first) for circle-pack visualization.
+ * Each leaf becomes a circle sized by `valueAccessor`; parents enclose
+ * their children. Best for hierarchies where size encoding matters more
+ * than precise comparisons.
+ *
+ * For rectangular tiling of the same data shape use {@link Treemap}; for
+ * radial parent→child connections use {@link TreeDiagram}.
+ *
+ * @example
+ * ```tsx
+ * // Filesystem-style hierarchy sized by file size
+ * <CirclePack
+ *   data={{
+ *     name: "src",
+ *     children: [
+ *       { name: "components", children: [
+ *         { name: "Chart.tsx", value: 1200 },
+ *         { name: "Frame.tsx", value: 800 },
+ *       ]},
+ *       { name: "utils", children: [{ name: "color.ts", value: 400 }] },
+ *     ],
+ *   }}
+ *   valueAccessor="value"
+ *   childrenAccessor="children"
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Color by depth instead of by leaf identity
+ * <CirclePack
+ *   data={hierarchyRoot}
+ *   valueAccessor="size"
+ *   colorByDepth
+ *   showLabels
+ * />
+ * ```
  */
 export declare function CirclePack<TNode extends Datum = Datum>(props: CirclePackProps<TNode>): import("react/jsx-runtime").JSX.Element;
 export declare namespace CirclePack {

package/dist/components/charts/network/ForceDirectedGraph.d.ts

@@ -9,21 +9,99 @@ import type { LegendInteractionMode, LegendPosition } from "../shared/hooks";
  * ForceDirectedGraph component props
  */
 export interface ForceDirectedGraphProps<TNode extends Datum = Datum, TEdge extends Datum = Datum> extends BaseChartProps {
+    /**
+     * Array of node objects. Each node must have a unique id (or other field
+     * named by `nodeIdAccessor`).
+     *
+     * **Required for static rendering**: when `edges` is provided, `nodes`
+     * must be too — even if it could be inferred from edge endpoints, pass
+     * an explicit list so layout can run.
+     *
+     * **Push mode**: omit BOTH `nodes` and `edges` to opt into ref-based
+     * push mode. Validation skips both arrays in that case and the chart
+     * accumulates topology from `ref.current.push(...)` calls.
+     * @example
+     * ```ts
+     * [{ id: "A", group: "core" }, { id: "B", group: "leaf" }]
+     * ```
+     */
     nodes?: TNode[];
+    /**
+     * Array of edge objects. Each edge must reference two node ids via
+     * `sourceAccessor` and `targetAccessor`. Required for static rendering;
+     * omit together with `nodes` for push mode (see above).
+     * @example
+     * ```ts
+     * [{ source: "A", target: "B", weight: 3 }]
+     * ```
+     */
     edges?: TEdge[];
+    /**
+     * Field name or function returning the node's unique id. Edge sources
+     * and targets reference this value.
+     * @default "id"
+     */
+    nodeIdAccessor?: ChartAccessor<TNode, string>;
+    /**
+     * @deprecated Use `nodeIdAccessor` (camelCase) instead. Removed in
+     * 4.0. The other network HOCs (`SankeyDiagram`, `ChordDiagram`,
+     * `TreeDiagram`, `OrbitDiagram`) all use the camelCase form;
+     * `nodeIDAccessor` (uppercase ID) was a casing inconsistency in
+     * `ForceDirectedGraph` that the SSR demo's verification matrix
+     * surfaced.
+     */
     nodeIDAccessor?: ChartAccessor<TNode, string>;
+    /** @default "source" */
     sourceAccessor?: ChartAccessor<TEdge, string>;
+    /** @default "target" */
     targetAccessor?: ChartAccessor<TEdge, string>;
+    /**
+     * Field or function for the label text rendered next to a node when
+     * `showLabels` is true.
+     * @default nodeIdAccessor
+     */
     nodeLabel?: ChartAccessor<TNode, string>;
+    /**
+     * Field or function that determines node color. Set together with
+     * `showLegend` for a legend.
+     */
     colorBy?: ChartAccessor<TNode, string>;
+    /** d3 scheme name or explicit color array; falls back to theme. */
     colorScheme?: string | string[];
+    /**
+     * Constant pixel radius, or a function/field returning a numeric value
+     * scaled into `nodeSizeRange`.
+     * @default 8
+     */
     nodeSize?: number | ChartAccessor<TNode, number>;
+    /**
+     * Min/max pixel radius when `nodeSize` is data-driven.
+     * @default [5, 20]
+     */
     nodeSizeRange?: [number, number];
+    /**
+     * Constant pixel width, or a function/field returning a numeric value
+     * scaled to a default width range.
+     * @default 1
+     */
     edgeWidth?: number | ChartAccessor<TEdge, number>;
     edgeColor?: string;
     edgeOpacity?: number;
+    /**
+     * Number of force-simulation ticks before the layout settles.
+     * @default 300
+     */
     iterations?: number;
+    /**
+     * Magnitude of the repulsion force between nodes; higher values spread
+     * the graph more.
+     * @default 0.1
+     */
     forceStrength?: number;
+    /**
+     * Render labels next to nodes. Uses `nodeLabel` accessor (defaulting to
+     * `nodeIdAccessor`).
+     */
     showLabels?: boolean;
     enableHover?: boolean;
     showLegend?: boolean;
@@ -33,9 +111,59 @@ export interface ForceDirectedGraphProps<TNode extends Datum = Datum, TEdge exte
     frameProps?: Partial<Omit<StreamNetworkFrameProps, "nodes" | "edges" | "size">>;
 }
 /**
- * ForceDirectedGraph - Visualize network relationships with force-directed layout
+ * ForceDirectedGraph - Visualize network relationships with a force-directed layout.
  *
- * Wraps StreamNetworkFrame (canvas-first) for force-directed network visualization.
+ * Nodes are positioned by simulating attraction along edges and repulsion
+ * between unconnected nodes; the layout settles after `iterations` ticks.
+ * Wraps {@link StreamNetworkFrame} (canvas-first rendering for large graphs).
+ *
+ * For ordered hierarchical data prefer {@link TreeDiagram}; for flow
+ * relationships prefer {@link SankeyDiagram}; for nested grouping prefer
+ * {@link CirclePack} or {@link Treemap}.
+ *
+ * @example
+ * ```tsx
+ * // Simple network with explicit nodes and edges
+ * <ForceDirectedGraph
+ *   nodes={[{ id: "A" }, { id: "B" }, { id: "C" }]}
+ *   edges={[
+ *     { source: "A", target: "B" },
+ *     { source: "B", target: "C" },
+ *   ]}
+ *   showLabels
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Color by group, edge width from weight, sized nodes
+ * <ForceDirectedGraph
+ *   nodes={nodes}
+ *   edges={edges}
+ *   colorBy="group"
+ *   nodeSize="degree"
+ *   nodeSizeRange={[6, 24]}
+ *   edgeWidth="weight"
+ *   showLegend
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Tighter clustering for dense graphs
+ * <ForceDirectedGraph
+ *   nodes={nodes}
+ *   edges={edges}
+ *   forceStrength={0.4}
+ *   iterations={500}
+ * />
+ * ```
+ *
+ * @remarks
+ * Force simulation runs synchronously to `iterations`; for very large
+ * graphs (>2k nodes) consider lowering `iterations` so layout settles in
+ * a reasonable frame budget. Hover, click, and selection wiring follow
+ * the same patterns as the rest of the library.
  */
 export declare const ForceDirectedGraph: {
     <TNode extends Datum = Datum, TEdge extends Datum = Datum>(props: ForceDirectedGraphProps<TNode, TEdge> & React.RefAttributes<RealtimeFrameHandle>): React.ReactElement | null;

package/dist/components/charts/network/OrbitDiagram.d.ts

@@ -73,6 +73,43 @@ export interface OrbitDiagramProps<TDatum extends Datum = Datum> extends BaseCha
     /** Frame props passthrough */
     frameProps?: Partial<Omit<StreamNetworkFrameProps, "data" | "size">>;
 }
+/**
+ * OrbitDiagram - Visualize a hierarchy as concentric orbits with optional rotation.
+ *
+ * Each level of the hierarchy becomes an orbit ring at a different radius;
+ * children are placed around their parent's orbit. With `animated` set
+ * (the default), nodes rotate continuously at `speed`, producing a
+ * planet-system feel.
+ *
+ * @example
+ * ```tsx
+ * // Static orbits
+ * <OrbitDiagram
+ *   data={{
+ *     name: "Sun",
+ *     children: [
+ *       { name: "Mercury" },
+ *       { name: "Venus" },
+ *       { name: "Earth", children: [{ name: "Moon" }] },
+ *       { name: "Mars" },
+ *     ],
+ *   }}
+ *   childrenAccessor="children"
+ *   animated={false}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Animated, depth-colored, slower rotation
+ * <OrbitDiagram
+ *   data={hierarchyRoot}
+ *   childrenAccessor="children"
+ *   colorByDepth
+ *   speed={0.2}
+ * />
+ * ```
+ */
 export declare function OrbitDiagram<TDatum extends Datum = Datum>(props: OrbitDiagramProps<TDatum>): import("react/jsx-runtime").JSX.Element;
 export declare namespace OrbitDiagram {
     var displayName: string;

package/dist/components/charts/network/SankeyDiagram.d.ts

@@ -32,9 +32,58 @@ export interface SankeyDiagramProps<TNode extends Datum = Datum, TEdge extends D
     frameProps?: Partial<Omit<StreamNetworkFrameProps, "edges" | "size">>;
 }
 /**
- * SankeyDiagram - Visualize flow and magnitude of movement between nodes
+ * SankeyDiagram - Visualize directed many-step flow between nodes.
  *
- * Wraps StreamNetworkFrame (canvas-first) for Sankey flow visualization.
+ * Each `edge` is a ribbon whose width encodes `valueAccessor`. The layout
+ * positions nodes in vertical columns (`orientation: "horizontal"`) or
+ * horizontal rows (`orientation: "vertical"`) so flows always run in a
+ * single direction.
+ *
+ * For bidirectional same-tier flows prefer {@link ChordDiagram}; for
+ * unstructured many-to-many networks prefer {@link ForceDirectedGraph}.
+ *
+ * @example
+ * ```tsx
+ * // User funnel
+ * <SankeyDiagram
+ *   nodes={[
+ *     { id: "Visit" }, { id: "Signup" }, { id: "Activate" }, { id: "Drop" },
+ *   ]}
+ *   edges={[
+ *     { source: "Visit",   target: "Signup",   value: 320 },
+ *     { source: "Visit",   target: "Drop",     value: 180 },
+ *     { source: "Signup",  target: "Activate", value: 240 },
+ *     { source: "Signup",  target: "Drop",     value: 80 },
+ *   ]}
+ *   valueAccessor="value"
+ *   showLabels
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Color edges by source, vertical orientation
+ * <SankeyDiagram
+ *   nodes={nodes}
+ *   edges={edges}
+ *   valueAccessor="value"
+ *   edgeColorBy="source"
+ *   orientation="vertical"
+ *   nodeAlign="justify"
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Tighter nodes for many categories
+ * <SankeyDiagram
+ *   nodes={nodes}
+ *   edges={edges}
+ *   valueAccessor="value"
+ *   nodeWidth={6}
+ *   nodePaddingRatio={0.3}
+ * />
+ * ```
  */
 export declare const SankeyDiagram: {
     <TNode extends Datum = Datum, TEdge extends Datum = Datum>(props: SankeyDiagramProps<TNode, TEdge> & React.RefAttributes<RealtimeFrameHandle>): React.ReactElement | null;

package/dist/components/charts/network/TreeDiagram.d.ts

@@ -26,9 +26,44 @@ export interface TreeDiagramProps<TNode extends Datum = Datum> extends BaseChart
     frameProps?: Partial<Omit<StreamNetworkFrameProps, "edges" | "size">>;
 }
 /**
- * TreeDiagram - Visualize hierarchical data structures
+ * TreeDiagram - Visualize a hierarchy as connected node-link diagram.
  *
- * Wraps StreamNetworkFrame (canvas-first) for hierarchical tree visualization.
+ * `data` is a single root object whose children are walked via
+ * `childrenAccessor`. `layout` chooses between classic tidy-tree
+ * (`"tree"`), partition (`"partition"`), or radial (`"radial"`)
+ * arrangements; `orientation` flips horizontal/vertical for the linear
+ * layouts.
+ *
+ * For nested-rectangle encodings of the same data shape use
+ * {@link Treemap}; for nested circles use {@link CirclePack}; for
+ * concentric-orbit encodings use {@link OrbitDiagram}.
+ *
+ * @example
+ * ```tsx
+ * // Org chart
+ * <TreeDiagram
+ *   data={{
+ *     name: "CEO",
+ *     reports: [
+ *       { name: "VP Eng", reports: [{ name: "EM 1" }, { name: "EM 2" }] },
+ *       { name: "VP Product" },
+ *     ],
+ *   }}
+ *   childrenAccessor="reports"
+ *   orientation="vertical"
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Radial layout colored by depth
+ * <TreeDiagram
+ *   data={hierarchyRoot}
+ *   childrenAccessor="children"
+ *   layout="radial"
+ *   colorByDepth
+ * />
+ * ```
  */
 export declare function TreeDiagram<TNode extends Datum = Datum>(props: TreeDiagramProps<TNode>): import("react/jsx-runtime").JSX.Element;
 export declare namespace TreeDiagram {

package/dist/components/charts/network/Treemap.d.ts

@@ -25,9 +25,43 @@ export interface TreemapProps<TNode extends Datum = Datum> extends BaseChartProp
     frameProps?: Partial<Omit<StreamNetworkFrameProps, "edges" | "size">>;
 }
 /**
- * Treemap - Visualize hierarchical data as nested rectangles.
+ * Treemap - Visualize a hierarchy as nested rectangles sized by value.
  *
- * Wraps StreamNetworkFrame (canvas-first) for treemap visualization.
+ * Each leaf becomes a rectangle whose area is proportional to
+ * `valueAccessor`; ancestors enclose their descendants. Better than
+ * {@link CirclePack} when precise area comparison matters; better than
+ * {@link TreeDiagram} when leaf count is large.
+ *
+ * @example
+ * ```tsx
+ * // Department budgets
+ * <Treemap
+ *   data={{
+ *     name: "Total",
+ *     children: [
+ *       { name: "Eng", children: [
+ *         { name: "Frontend", value: 120 },
+ *         { name: "Platform", value: 90 },
+ *       ]},
+ *       { name: "Sales", value: 200 },
+ *       { name: "Marketing", value: 60 },
+ *     ],
+ *   }}
+ *   valueAccessor="value"
+ *   childrenAccessor="children"
+ *   showLabels
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Color leaves by their parent (each top-level branch gets its own color)
+ * <Treemap
+ *   data={hierarchyRoot}
+ *   valueAccessor="size"
+ *   colorBy="parent"
+ * />
+ * ```
  */
 export declare function Treemap<TNode extends Datum = Datum>(props: TreemapProps<TNode>): import("react/jsx-runtime").JSX.Element;
 export declare namespace Treemap {

package/dist/components/charts/ordinal/BarChart.d.ts

@@ -9,14 +9,47 @@ import type { RealtimeFrameHandle } from "../../realtime/types";
  * BarChart component props
  */
 export interface BarChartProps<TDatum extends Datum = Datum> extends BaseChartProps {
+    /**
+     * Array of data rows. Each row should have a category and a numeric value.
+     * Omit when using the push API.
+     * @example
+     * ```ts
+     * [{ region: "EMEA", revenue: 120 }, { region: "Americas", revenue: 85 }]
+     * ```
+     */
     data?: TDatum[];
+    /**
+     * Field name or function returning the category for each row.
+     * @default "category"
+     */
     categoryAccessor?: ChartAccessor<TDatum, string>;
+    /**
+     * Field name or function returning the bar value.
+     * @default "value"
+     */
     valueAccessor?: ChartAccessor<TDatum, number>;
+    /**
+     * Bar direction. Horizontal puts categories on the y-axis; usually needs
+     * a wider left margin to fit the category labels.
+     * @default "vertical"
+     */
     orientation?: "vertical" | "horizontal";
+    /** Label rendered next to the category axis. */
     categoryLabel?: string;
+    /** Label rendered next to the value axis. */
     valueLabel?: string;
+    /** Custom formatter for value-axis ticks and tooltip values. */
     valueFormat?: (d: number | string) => string;
+    /**
+     * Field or function that determines bar color. Defaults to a single
+     * color when omitted. Setting `colorBy` also enables the legend.
+     */
     colorBy?: ChartAccessor<TDatum, string>;
+    /**
+     * Color scheme for `colorBy`. Either a d3 scheme name (`"category10"`,
+     * `"set2"`, etc.) or an explicit array of colors. Falls back to the
+     * theme's categorical palette when omitted.
+     */
     colorScheme?: string | string[];
     /** Category ordering. `false` (default) = insertion order. `"asc"` /
      *  `"desc"` sorts by total value. `"auto"` preserves insertion order
@@ -62,7 +95,84 @@ export interface BarChartProps<TDatum extends Datum = Datum> extends BaseChartPr
     frameProps?: Partial<Omit<StreamOrdinalFrameProps, "data" | "size">>;
 }
 /**
- * BarChart - Visualize categorical data with bars.
+ * BarChart - Visualize categorical data with vertical or horizontal bars.
+ *
+ * One bar per category. For multiple values per category use
+ * {@link StackedBarChart} (stacked segments) or {@link GroupedBarChart}
+ * (side-by-side bars).
+ *
+ * @example
+ * ```tsx
+ * // Simple bar chart
+ * <BarChart
+ *   data={[
+ *     { region: "EMEA", revenue: 120 },
+ *     { region: "Americas", revenue: 85 },
+ *     { region: "APAC", revenue: 60 },
+ *   ]}
+ *   categoryAccessor="region"
+ *   valueAccessor="revenue"
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Color by category, sorted descending by value
+ * <BarChart
+ *   data={data}
+ *   categoryAccessor="region"
+ *   valueAccessor="revenue"
+ *   colorBy="region"
+ *   sort="desc"
+ *   showLegend
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Horizontal orientation — usually wants extra left margin for labels
+ * <BarChart
+ *   data={data}
+ *   categoryAccessor="region"
+ *   valueAccessor="revenue"
+ *   orientation="horizontal"
+ *   margin={{ left: 120 }}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Gradient fill from bar tip toward baseline
+ * <BarChart
+ *   data={data}
+ *   categoryAccessor="region"
+ *   valueAccessor="revenue"
+ *   color="steelblue"
+ *   gradientFill
+ *   roundedTop={4}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Push API — omit `data`, mutate via ref
+ * const ref = useRef<RealtimeFrameHandle>(null)
+ * useEffect(() => {
+ *   ref.current?.push({ region: "EMEA", revenue: 120 })
+ * }, [])
+ *
+ * <BarChart
+ *   ref={ref}
+ *   categoryAccessor="region"
+ *   valueAccessor="revenue"
+ * />
+ * ```
+ *
+ * @remarks
+ * Wraps {@link StreamOrdinalFrame} with sensible bar defaults. For custom
+ * marks, advanced annotations, or non-standard layouts, pass through via
+ * `frameProps` or use StreamOrdinalFrame directly. See
+ * {@link https://semiotic.nteract.io/charts/bar-chart} for live demos.
  */
 export declare const BarChart: {
     <TDatum extends Datum = Datum>(props: BarChartProps<TDatum> & React.RefAttributes<RealtimeFrameHandle>): React.ReactElement | null;

package/dist/components/charts/ordinal/BoxPlot.d.ts

@@ -30,6 +30,37 @@ export interface BoxPlotProps<TDatum extends Datum = Datum> extends BaseChartPro
     categoryFormat?: CategoryFormatFn;
     frameProps?: Partial<Omit<StreamOrdinalFrameProps, "data" | "size">>;
 }
+/**
+ * BoxPlot - Five-number summary (min, Q1, median, Q3, max) per category.
+ *
+ * Each category gets a box from Q1 to Q3 with a median line, whiskers to
+ * the min/max within 1.5×IQR, and individual outlier dots beyond that
+ * range. Use {@link ViolinPlot} for full distribution shape or
+ * {@link RidgelinePlot} for stacked overlapping densities.
+ *
+ * @example
+ * ```tsx
+ * // Distribution of test scores per class
+ * <BoxPlot
+ *   data={observations}
+ *   categoryAccessor="class"
+ *   valueAccessor="score"
+ *   showOutliers
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Hide outliers and color the boxes
+ * <BoxPlot
+ *   data={observations}
+ *   categoryAccessor="region"
+ *   valueAccessor="latency_ms"
+ *   colorBy="region"
+ *   showOutliers={false}
+ * />
+ * ```
+ */
 export declare const BoxPlot: {
     <TDatum extends Datum = Datum>(props: BoxPlotProps<TDatum> & React.RefAttributes<RealtimeFrameHandle>): React.ReactElement | null;
     displayName?: string;

package/dist/components/charts/ordinal/DonutChart.d.ts

@@ -25,6 +25,42 @@ export interface DonutChartProps<TDatum extends Datum = Datum> extends BaseChart
     annotations?: Datum[];
     frameProps?: Partial<Omit<StreamOrdinalFrameProps, "data" | "size">>;
 }
+/**
+ * DonutChart - Pie chart with a hole; supports center content.
+ *
+ * Same data shape as {@link PieChart}, but the inner radius leaves room
+ * for a value, label, or icon at the center via `centerContent`. Useful
+ * when the headline number is the total or a key fraction.
+ *
+ * @example
+ * ```tsx
+ * // Donut with the total in the center
+ * <DonutChart
+ *   data={[
+ *     { region: "EMEA", revenue: 120 },
+ *     { region: "Americas", revenue: 85 },
+ *     { region: "APAC", revenue: 60 },
+ *   ]}
+ *   categoryAccessor="region"
+ *   valueAccessor="revenue"
+ *   innerRadius={70}
+ *   centerContent={<text fontSize={28}>$265</text>}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Thin ring with rounded wedges
+ * <DonutChart
+ *   data={data}
+ *   categoryAccessor="region"
+ *   valueAccessor="revenue"
+ *   innerRadius={120}
+ *   cornerRadius={4}
+ *   showLegend
+ * />
+ * ```
+ */
 export declare const DonutChart: {
     <TDatum extends Datum = Datum>(props: DonutChartProps<TDatum> & React.RefAttributes<RealtimeFrameHandle>): React.ReactElement | null;
     displayName?: string;

package/dist/components/charts/ordinal/DotPlot.d.ts

@@ -38,6 +38,37 @@ export interface DotPlotProps<TDatum extends Datum = Datum> extends BaseChartPro
     categoryFormat?: CategoryFormatFn;
     frameProps?: Partial<Omit<StreamOrdinalFrameProps, "data" | "size">>;
 }
+/**
+ * DotPlot - One dot per category, positioned along the value axis.
+ *
+ * Lighter-weight than {@link BarChart} for sorted comparisons; emphasizes
+ * exact values rather than magnitude perception. Defaults to insertion
+ * order while streaming (so categories don't shuffle as values change)
+ * and value-descending on static data via `sort: "auto"`.
+ *
+ * @example
+ * ```tsx
+ * // Sorted ranking by metric
+ * <DotPlot
+ *   data={teams}
+ *   categoryAccessor="name"
+ *   valueAccessor="score"
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Color by group + grid for axis reading
+ * <DotPlot
+ *   data={features}
+ *   categoryAccessor="feature"
+ *   valueAccessor="adoption"
+ *   colorBy="team"
+ *   showGrid
+ *   showLegend
+ * />
+ * ```
+ */
 export declare const DotPlot: {
     <TDatum extends Datum = Datum>(props: DotPlotProps<TDatum> & React.RefAttributes<RealtimeFrameHandle>): React.ReactElement | null;
     displayName?: string;