semiotic 2.0.2 → 3.0.0-beta.1

package/dist/annotationRules/orframeRules.d.ts

@@ -0,0 +1,103 @@
+import * as React from "react";
+export declare const getColumnScreenCoordinates: ({ d, projectedColumns, oAccessor, summaryType, type, projection, adjustedPosition, adjustedSize }: {
+    d: any;
+    projectedColumns: any;
+    oAccessor: any;
+    summaryType: any;
+    type: any;
+    projection: any;
+    adjustedPosition: any;
+    adjustedSize: any;
+}) => {
+    coordinates: any[];
+    pieces: any;
+    column: any;
+};
+export declare const svgHighlightRule: ({ d, pieceIDAccessor, orFrameRender, oAccessor }: {
+    d: any;
+    pieceIDAccessor: any;
+    orFrameRender: any;
+    oAccessor: any;
+}) => any[];
+export declare const findIDPiece: (pieceIDAccessor: any, oColumn: any, d: any) => any;
+export declare const screenProject: ({ p, adjustedSize, rScale, oColumn, rAccessor, idPiece, projection, rScaleType }: {
+    p: any;
+    adjustedSize: any;
+    rScale: any;
+    oColumn: any;
+    rAccessor: any;
+    idPiece: any;
+    projection: any;
+    rScaleType: any;
+}) => any[];
+export declare const svgORRule: ({ d, i, screenCoordinates, projection }: {
+    d: any;
+    i: any;
+    screenCoordinates: any;
+    projection: any;
+}) => React.JSX.Element;
+export declare const basicReactAnnotationRule: ({ d, i, screenCoordinates }: {
+    d: any;
+    i: any;
+    screenCoordinates: any;
+}) => React.JSX.Element;
+export declare const svgEncloseRule: ({ d, i, screenCoordinates }: {
+    d: any;
+    i: any;
+    screenCoordinates: any;
+}) => React.JSX.Element;
+export declare const svgRRule: ({ d, i, screenCoordinates, rScale, rAccessor, adjustedSize, adjustedPosition, projection }: {
+    d: any;
+    i: any;
+    screenCoordinates: any;
+    rScale: any;
+    rAccessor: any;
+    adjustedSize: any;
+    adjustedPosition: any;
+    projection: any;
+}) => React.JSX.Element;
+export declare const svgCategoryRule: ({ projection, d, i, categories, adjustedSize }: {
+    projection: any;
+    d: any;
+    i: any;
+    categories: any;
+    adjustedSize: any;
+}) => React.JSX.Element;
+export declare const htmlFrameHoverRule: ({ d, i, rAccessor, oAccessor, projection, tooltipContent, optimizeCustomTooltipPosition, pieceIDAccessor, projectedColumns, adjustedSize, rScale, type, rScaleType }: {
+    d: any;
+    i: any;
+    rAccessor: any;
+    oAccessor: any;
+    projection: any;
+    tooltipContent: any;
+    optimizeCustomTooltipPosition: any;
+    pieceIDAccessor: any;
+    projectedColumns: any;
+    adjustedSize: any;
+    rScale: any;
+    type: any;
+    rScaleType: any;
+}) => React.JSX.Element;
+export declare const htmlColumnHoverRule: ({ d, i, summaryType, oAccessor, type, adjustedPosition, adjustedSize, projection, tooltipContent, optimizeCustomTooltipPosition, projectedColumns }: {
+    d: any;
+    i: any;
+    summaryType: any;
+    oAccessor: any;
+    type: any;
+    adjustedPosition: any;
+    adjustedSize: any;
+    projection: any;
+    tooltipContent: any;
+    optimizeCustomTooltipPosition: any;
+    projectedColumns: any;
+}) => React.JSX.Element;
+export declare const svgRectEncloseRule: ({ d, i, screenCoordinates }: {
+    d: any;
+    i: any;
+    screenCoordinates: any;
+}) => React.JSX.Element;
+export declare const svgOrdinalLine: ({ screenCoordinates, d, voronoiHover }: {
+    screenCoordinates: any;
+    d: any;
+    voronoiHover: any;
+}) => React.JSX.Element;

package/dist/annotationRules/xyframeRules.d.ts

@@ -0,0 +1,117 @@
+import * as React from "react";
+import { ScaleLinear } from "d3-scale";
+import { ProjectedPoint, RenderPipelineType } from "../types/generalTypes";
+export declare const pointsAlong: (along: any) => ({ d, lines, points, xScale, yScale, pointStyle }: {
+    d: any;
+    lines: any;
+    points: any;
+    xScale: any;
+    yScale: any;
+    pointStyle: any;
+}) => React.JSX.Element[];
+export declare const svgHorizontalPointsAnnotation: ({ d, lines, points, xScale, yScale, pointStyle }: {
+    d: any;
+    lines: any;
+    points: any;
+    xScale: any;
+    yScale: any;
+    pointStyle: any;
+}) => React.JSX.Element[];
+export declare const svgVerticalPointsAnnotation: ({ d, lines, points, xScale, yScale, pointStyle }: {
+    d: any;
+    lines: any;
+    points: any;
+    xScale: any;
+    yScale: any;
+    pointStyle: any;
+}) => React.JSX.Element[];
+export declare const svgHighlight: ({ d, i, points, lines, summaries, idAccessor, xScale, yScale, xyFrameRender, defined }: {
+    d: ProjectedPoint;
+    i?: number;
+    points: {
+        data: [];
+    };
+    lines: {
+        data: [];
+        type?: {
+            interpolator?: string | Function;
+            curve?: string | Function;
+        };
+    };
+    summaries: {
+        data: [];
+    };
+    idAccessor: Function;
+    xScale: ScaleLinear<number, number>;
+    yScale: ScaleLinear<number, number>;
+    xyFrameRender: RenderPipelineType;
+    defined: Function;
+}) => React.JSX.Element[];
+export declare const svgXYAnnotation: ({ screenCoordinates, i, d }: {
+    screenCoordinates: any;
+    i: any;
+    d: any;
+}) => any[];
+export declare const basicReactAnnotation: ({ screenCoordinates, d, i }: {
+    screenCoordinates: any;
+    d: any;
+    i: any;
+}) => React.JSX.Element;
+export declare const svgXAnnotation: ({ screenCoordinates, d, i, adjustedSize }: {
+    screenCoordinates: any;
+    d: any;
+    i: any;
+    adjustedSize: any;
+}) => React.JSX.Element;
+export declare const svgYAnnotation: ({ screenCoordinates, d, i, adjustedSize, adjustedPosition }: {
+    screenCoordinates: any;
+    d: any;
+    i: any;
+    adjustedSize: any;
+    adjustedPosition: any;
+}) => React.JSX.Element;
+export declare const svgBoundsAnnotation: ({ d, i, adjustedSize, xAccessor, yAccessor, xScale, yScale }: {
+    d: any;
+    i: any;
+    adjustedSize: any;
+    xAccessor: any;
+    yAccessor: any;
+    xScale: any;
+    yScale: any;
+}) => React.JSX.Element;
+export declare const svgLineAnnotation: ({ d, i, screenCoordinates }: {
+    d: any;
+    i: any;
+    screenCoordinates: any;
+}) => React.JSX.Element[];
+export declare const svgAreaAnnotation: ({ d, i, xScale, xAccessor, yScale, yAccessor, annotationLayer }: {
+    d: any;
+    i: any;
+    xScale: any;
+    xAccessor: any;
+    yScale: any;
+    yAccessor: any;
+    annotationLayer: any;
+}) => React.JSX.Element[];
+export declare const htmlTooltipAnnotation: ({ content, screenCoordinates, i, d, adjustedSize }: {
+    content: any;
+    screenCoordinates: any;
+    i: any;
+    d: any;
+    adjustedSize: any;
+}) => React.JSX.Element;
+export declare const svgRectEncloseAnnotation: ({ d, i, screenCoordinates }: {
+    d: any;
+    i: any;
+    screenCoordinates: any;
+}) => React.JSX.Element;
+export declare const svgEncloseAnnotation: ({ screenCoordinates, d, i }: {
+    screenCoordinates: any;
+    d: any;
+    i: any;
+}) => React.JSX.Element;
+export declare const svgHullEncloseAnnotation: ({ screenCoordinates, d, i }: {
+    screenCoordinates: any;
+    d: any;
+    i: any;
+}) => React.JSX.Element;

package/dist/batchWork.d.ts

@@ -0,0 +1,6 @@
+type BatchOptions = {
+    signal?: AbortSignal;
+    timeFrameMs?: number;
+};
+export declare function batchWork(performWork: () => boolean, { signal, timeFrameMs }?: BatchOptions): Promise<void>;
+export {};

package/dist/charts/index.d.ts

@@ -0,0 +1,62 @@
+/**
+ * Higher-order chart components
+ *
+ * These components provide simplified, opinionated wrappers around
+ * XYFrame, OrdinalFrame, and NetworkFrame for common chart types.
+ *
+ * @module charts
+ */
+export { Scatterplot } from "./xy/Scatterplot";
+export type { ScatterplotProps } from "./xy/Scatterplot";
+export { LineChart } from "./xy/LineChart";
+export type { LineChartProps } from "./xy/LineChart";
+export { AreaChart } from "./xy/AreaChart";
+export type { AreaChartProps } from "./xy/AreaChart";
+export { StackedAreaChart } from "./xy/StackedAreaChart";
+export type { StackedAreaChartProps } from "./xy/StackedAreaChart";
+export { Heatmap } from "./xy/Heatmap";
+export type { HeatmapProps } from "./xy/Heatmap";
+export { BubbleChart } from "./xy/BubbleChart";
+export type { BubbleChartProps } from "./xy/BubbleChart";
+export { BarChart } from "./ordinal/BarChart";
+export type { BarChartProps } from "./ordinal/BarChart";
+export { StackedBarChart } from "./ordinal/StackedBarChart";
+export type { StackedBarChartProps } from "./ordinal/StackedBarChart";
+export { SwarmPlot } from "./ordinal/SwarmPlot";
+export type { SwarmPlotProps } from "./ordinal/SwarmPlot";
+export { BoxPlot } from "./ordinal/BoxPlot";
+export type { BoxPlotProps } from "./ordinal/BoxPlot";
+export { DotPlot } from "./ordinal/DotPlot";
+export type { DotPlotProps } from "./ordinal/DotPlot";
+export { PieChart } from "./ordinal/PieChart";
+export type { PieChartProps } from "./ordinal/PieChart";
+export { DonutChart } from "./ordinal/DonutChart";
+export type { DonutChartProps } from "./ordinal/DonutChart";
+export { GroupedBarChart } from "./ordinal/GroupedBarChart";
+export type { GroupedBarChartProps } from "./ordinal/GroupedBarChart";
+export { ForceDirectedGraph } from "./network/ForceDirectedGraph";
+export type { ForceDirectedGraphProps } from "./network/ForceDirectedGraph";
+export { ChordDiagram } from "./network/ChordDiagram";
+export type { ChordDiagramProps } from "./network/ChordDiagram";
+export { SankeyDiagram } from "./network/SankeyDiagram";
+export type { SankeyDiagramProps } from "./network/SankeyDiagram";
+export { TreeDiagram } from "./network/TreeDiagram";
+export type { TreeDiagramProps } from "./network/TreeDiagram";
+export { Treemap } from "./network/Treemap";
+export type { TreemapProps } from "./network/Treemap";
+export { CirclePack } from "./network/CirclePack";
+export type { CirclePackProps } from "./network/CirclePack";
+export { RealtimeLineChart } from "./realtime/RealtimeLineChart";
+export type { RealtimeLineChartProps } from "./realtime/RealtimeLineChart";
+export { RealtimeBarChart } from "./realtime/RealtimeBarChart";
+export type { RealtimeBarChartProps } from "./realtime/RealtimeBarChart";
+export { RealtimeSwarmChart } from "./realtime/RealtimeSwarmChart";
+export type { RealtimeSwarmChartProps } from "./realtime/RealtimeSwarmChart";
+export { RealtimeWaterfallChart } from "./realtime/RealtimeWaterfallChart";
+export type { RealtimeWaterfallChartProps } from "./realtime/RealtimeWaterfallChart";
+export type { BaseChartProps, AxisConfig, Accessor, ChartAccessor } from "./shared/types";
+export { useColorScale, useSortedData, DEFAULT_COLOR } from "./shared/hooks";
+export { COLOR_SCHEMES, DEFAULT_COLORS, getColor, createColorScale, getSize } from "./shared/colorUtils";
+export { formatNumber, formatDate, formatAxis, createTooltip, formatLargeNumber, truncateText } from "./shared/formatUtils";
+export { Tooltip, MultiLineTooltip, normalizeTooltip } from "../Tooltip/Tooltip";
+export type { TooltipProp, TooltipConfig, TooltipField, MultiLineTooltipConfig } from "../Tooltip/Tooltip";

package/dist/charts/network/ChordDiagram.d.ts

@@ -0,0 +1,181 @@
+import * as React from "react";
+import type { NetworkFrameProps } from "../../types/networkTypes";
+import type { BaseChartProps, ChartAccessor } from "../shared/types";
+import { type TooltipProp } from "../../Tooltip/Tooltip";
+/**
+ * ChordDiagram component props
+ */
+export interface ChordDiagramProps<TNode extends Record<string, any> = Record<string, any>, TEdge extends Record<string, any> = Record<string, any>> extends BaseChartProps {
+    /**
+     * Array of nodes (optional - will be inferred from edges if not provided)
+     * @example
+     * ```ts
+     * [{id: 'A', category: 'Group1'}, {id: 'B', category: 'Group2'}]
+     * ```
+     */
+    nodes?: TNode[];
+    /**
+     * Array of edges with source, target, and value
+     * @example
+     * ```ts
+     * [
+     *   {source: 'A', target: 'B', value: 100},
+     *   {source: 'B', target: 'A', value: 80},
+     *   {source: 'A', target: 'A', value: 50}
+     * ]
+     * ```
+     */
+    edges: TEdge[];
+    /**
+     * Field name or function to access source node identifier
+     * @default "source"
+     */
+    sourceAccessor?: ChartAccessor<TEdge, string>;
+    /**
+     * Field name or function to access target node identifier
+     * @default "target"
+     */
+    targetAccessor?: ChartAccessor<TEdge, string>;
+    /**
+     * Field name or function to access edge value (width)
+     * @default "value"
+     */
+    valueAccessor?: ChartAccessor<TEdge, number>;
+    /**
+     * Field name or function to access node identifier
+     * @default "id"
+     */
+    nodeIdAccessor?: ChartAccessor<TNode, string>;
+    /**
+     * Field name or function to determine node color
+     * @example
+     * ```ts
+     * colorBy="category"
+     * colorBy={d => d.group}
+     * ```
+     */
+    colorBy?: ChartAccessor<TNode, string>;
+    /**
+     * Color scheme for nodes or custom colors array
+     * @default "category10"
+     */
+    colorScheme?: string | string[];
+    /**
+     * Edge color strategy
+     * - "source": color edges by source node
+     * - "target": color edges by target node
+     * - function: custom coloring function
+     * @default "source"
+     */
+    edgeColorBy?: "source" | "target" | ((d: any) => string);
+    /**
+     * Padding angle between adjacent groups (in radians)
+     * @default 0.01
+     */
+    padAngle?: number;
+    /**
+     * Width of the outer arc (node) in pixels
+     * @default 20
+     */
+    groupWidth?: number;
+    /**
+     * Sort function for groups (nodes) around the circle
+     * @example
+     * ```ts
+     * sortGroups={(a, b) => b.value - a.value}
+     * ```
+     */
+    sortGroups?: (a: any, b: any) => number;
+    /**
+     * Label accessor for nodes
+     * @default Uses nodeIdAccessor
+     */
+    nodeLabel?: ChartAccessor<TNode, string>;
+    /**
+     * Show labels around circumference
+     * @default true
+     */
+    showLabels?: boolean;
+    /**
+     * Enable hover annotations
+     * @default true
+     */
+    enableHover?: boolean;
+    /**
+     * Edge opacity
+     * @default 0.5
+     */
+    edgeOpacity?: number;
+    /**
+     * Tooltip configuration
+     */
+    tooltip?: TooltipProp;
+    /**
+     * Additional NetworkFrame props for advanced customization
+     * For full control, consider using NetworkFrame directly
+     * @see https://semiotic.nteract.io/guides/network-frame
+     */
+    frameProps?: Partial<Omit<NetworkFrameProps, "edges" | "size">>;
+}
+/**
+ * ChordDiagram - Visualize directed relationships with circular chord layout
+ *
+ * A simplified wrapper around NetworkFrame for creating chord diagrams.
+ * Perfect for showing flow and relationships between entities, especially
+ * when there are reciprocal connections and self-loops.
+ *
+ * @example
+ * ```tsx
+ * // Simple chord diagram
+ * <ChordDiagram
+ *   edges={[
+ *     {source: 'A', target: 'B', value: 100},
+ *     {source: 'B', target: 'A', value: 80},
+ *     {source: 'A', target: 'A', value: 50}
+ *   ]}
+ *   colorBy={(d) => d.id}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With custom styling and padding
+ * <ChordDiagram
+ *   edges={edges}
+ *   nodes={nodes}
+ *   colorBy="category"
+ *   edgeColorBy="source"
+ *   padAngle={0.05}
+ *   groupWidth={30}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With sorting and labels
+ * <ChordDiagram
+ *   edges={edges}
+ *   sortGroups={(a, b) => b.value - a.value}
+ *   nodeLabel="name"
+ *   showLabels={true}
+ * />
+ * ```
+ *
+ * @remarks
+ * This component wraps {@link NetworkFrame} with sensible defaults for chord diagrams.
+ * Chord diagrams work best when there are asymmetric relationships and self-loops.
+ *
+ * **Data Requirements:**
+ * - Edges must have source, target, and value properties
+ * - Self-loops (source === target) are displayed as curved arcs
+ * - Reciprocal edges show the asymmetry in relationships
+ *
+ * **Breadcrumb to advanced usage:**
+ * - Use the `frameProps` prop to pass any NetworkFrame prop
+ * - See NetworkFrame documentation: https://semiotic.nteract.io/guides/network-frame
+ * - All NetworkFrame props are available via `frameProps`
+ *
+ * @param props - ChordDiagram configuration
+ * @returns Rendered chord diagram
+ */
+export declare function ChordDiagram<TNode extends Record<string, any> = Record<string, any>, TEdge extends Record<string, any> = Record<string, any>>(props: ChordDiagramProps<TNode, TEdge>): React.JSX.Element;

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

@@ -0,0 +1,103 @@
+import * as React from "react";
+import type { NetworkFrameProps } from "../../types/networkTypes";
+import type { BaseChartProps, ChartAccessor, Accessor } from "../shared/types";
+import { type TooltipProp } from "../../Tooltip/Tooltip";
+/**
+ * CirclePack component props
+ */
+export interface CirclePackProps<TNode extends Record<string, any> = Record<string, any>, TEdge extends Record<string, any> = Record<string, any>> extends BaseChartProps {
+    /**
+     * Hierarchical data structure with children and values.
+     * @example
+     * ```ts
+     * {
+     *   name: 'root',
+     *   children: [
+     *     {name: 'A', value: 100},
+     *     {name: 'B', children: [{name: 'B1', value: 50}, {name: 'B2', value: 30}]}
+     *   ]
+     * }
+     * ```
+     */
+    data: TNode;
+    /**
+     * Field name or function to access children array
+     * @default "children"
+     */
+    childrenAccessor?: ChartAccessor<TNode, TNode[]>;
+    /**
+     * Field name or function to access node value for sizing
+     * @default "value"
+     */
+    valueAccessor?: Accessor<number>;
+    /**
+     * Field name or function to access node identifier
+     * @default "name"
+     */
+    nodeIdAccessor?: ChartAccessor<TNode, string>;
+    /**
+     * Field name or function to determine node color
+     */
+    colorBy?: ChartAccessor<TNode, string | number>;
+    /**
+     * Color scheme for nodes or custom colors array
+     * @default "category10"
+     */
+    colorScheme?: string | string[];
+    /**
+     * Color nodes by hierarchy depth level
+     * @default false
+     */
+    colorByDepth?: boolean;
+    /**
+     * Show labels on circles
+     * @default true
+     */
+    showLabels?: boolean;
+    /**
+     * Node label accessor
+     * @default Uses nodeIdAccessor
+     */
+    nodeLabel?: ChartAccessor<TNode, string>;
+    /**
+     * Circle fill opacity (helps see nesting)
+     * @default 0.7
+     */
+    circleOpacity?: number;
+    /**
+     * Enable hover annotations
+     * @default true
+     */
+    enableHover?: boolean;
+    /**
+     * Tooltip configuration
+     */
+    tooltip?: TooltipProp;
+    /**
+     * Additional NetworkFrame props for advanced customization
+     * For full control, consider using NetworkFrame directly
+     */
+    frameProps?: Partial<Omit<NetworkFrameProps, "edges" | "size">>;
+}
+/**
+ * CirclePack - Visualize hierarchical data as nested circles.
+ *
+ * A simplified wrapper around NetworkFrame with circlepack layout.
+ * Each circle's area is proportional to its value.
+ *
+ * @example
+ * ```tsx
+ * <CirclePack
+ *   data={{
+ *     name: 'root',
+ *     children: [
+ *       {name: 'A', value: 100},
+ *       {name: 'B', value: 200},
+ *       {name: 'C', value: 150}
+ *     ]
+ *   }}
+ *   colorByDepth
+ * />
+ * ```
+ */
+export declare function CirclePack<TNode extends Record<string, any> = Record<string, any>, TEdge extends Record<string, any> = Record<string, any>>(props: CirclePackProps<TNode, TEdge>): React.JSX.Element;