semiotic 3.2.0 → 3.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CLAUDE.md +50 -8
- package/README.md +11 -11
- package/ai/dist/mcp-server.js +31925 -528
- package/ai/examples.md +91 -0
- package/ai/schema.json +235 -9
- package/ai/system-prompt.md +12 -4
- package/dist/components/ChartContainer.d.ts +2 -0
- package/dist/components/DataSummaryContext.d.ts +12 -0
- package/dist/components/Tooltip/FlippingTooltip.d.ts +34 -0
- package/dist/components/charts/index.d.ts +4 -0
- package/dist/components/charts/ordinal/BarChart.d.ts +3 -1
- package/dist/components/charts/ordinal/BoxPlot.d.ts +3 -1
- package/dist/components/charts/ordinal/DonutChart.d.ts +0 -1
- package/dist/components/charts/ordinal/DotPlot.d.ts +3 -1
- package/dist/components/charts/ordinal/FunnelChart.d.ts +3 -1
- package/dist/components/charts/ordinal/GroupedBarChart.d.ts +3 -1
- package/dist/components/charts/ordinal/Histogram.d.ts +16 -2
- package/dist/components/charts/ordinal/LikertChart.d.ts +94 -0
- package/dist/components/charts/ordinal/PieChart.d.ts +0 -1
- package/dist/components/charts/ordinal/RidgelinePlot.d.ts +11 -7
- package/dist/components/charts/ordinal/StackedBarChart.d.ts +3 -1
- package/dist/components/charts/ordinal/SwarmPlot.d.ts +14 -1
- package/dist/components/charts/ordinal/SwimlaneChart.d.ts +65 -0
- package/dist/components/charts/ordinal/ViolinPlot.d.ts +16 -2
- package/dist/components/charts/realtime/RealtimeHistogram.d.ts +20 -0
- package/dist/components/charts/shared/annotationResolvers.d.ts +28 -0
- package/dist/components/charts/shared/hooks.d.ts +23 -2
- package/dist/components/charts/shared/selectionUtils.d.ts +5 -1
- package/dist/components/charts/shared/statsTooltip.d.ts +11 -0
- package/dist/components/charts/shared/types.d.ts +22 -1
- package/dist/components/charts/shared/useChartSetup.d.ts +12 -2
- package/dist/components/charts/shared/useLikertAggregation.d.ts +51 -0
- package/dist/components/charts/shared/useOrdinalBrush.d.ts +28 -0
- package/dist/components/charts/shared/useOrdinalStreaming.d.ts +54 -0
- package/dist/components/charts/shared/useStreamingLegend.d.ts +2 -2
- package/dist/components/charts/shared/validateProps.d.ts +2 -2
- package/dist/components/charts/shared/validationMap.d.ts +12 -0
- package/dist/components/charts/xy/AreaChart.d.ts +11 -0
- package/dist/components/charts/xy/MinimapChart.d.ts +1 -1
- package/dist/components/charts/xy/StackedAreaChart.d.ts +11 -0
- package/dist/components/realtime/types.d.ts +4 -0
- package/dist/components/semiotic-ai.d.ts +1 -0
- package/dist/components/semiotic-ordinal.d.ts +2 -0
- package/dist/components/semiotic-themes.d.ts +16 -0
- package/dist/components/semiotic-utils.d.ts +30 -0
- package/dist/components/semiotic.d.ts +4 -4
- package/dist/components/store/LinkedCrosshairStore.d.ts +11 -0
- package/dist/components/store/useSelection.d.ts +1 -0
- package/dist/components/stream/AccessibleDataTable.d.ts +28 -6
- package/dist/components/stream/FocusRing.d.ts +33 -0
- package/dist/components/stream/OrdinalBrushOverlay.d.ts +43 -0
- package/dist/components/stream/OrdinalPipelineStore.d.ts +16 -0
- package/dist/components/stream/OrdinalSVGOverlay.d.ts +1 -1
- package/dist/components/stream/PipelineStore.d.ts +5 -47
- package/dist/components/stream/SVGOverlay.d.ts +4 -0
- package/dist/components/stream/SceneGraph.d.ts +6 -1
- package/dist/components/stream/XYBrushOverlay.d.ts +47 -0
- package/dist/components/stream/devDataAccessWarning.d.ts +13 -0
- package/dist/components/stream/geoTypes.d.ts +5 -1
- package/dist/components/stream/keyboardNav.d.ts +85 -9
- package/dist/components/stream/layouts/hierarchySceneBuilders.d.ts +35 -0
- package/dist/components/stream/layouts/hierarchyUtils.d.ts +25 -0
- package/dist/components/stream/networkTypes.d.ts +5 -1
- package/dist/components/stream/ordinalSceneBuilders/swimlaneScene.d.ts +12 -0
- package/dist/components/stream/ordinalTypes.d.ts +15 -3
- package/dist/components/stream/pipelineDecay.d.ts +20 -0
- package/dist/components/stream/pipelinePulse.d.ts +24 -0
- package/dist/components/stream/pipelineTransitions.d.ts +59 -0
- package/dist/components/stream/renderers/pointCanvasRenderer.d.ts +2 -1
- package/dist/components/stream/types.d.ts +19 -1
- package/dist/components/stream/useMediaPreferences.d.ts +11 -0
- package/dist/components/stream/xySceneBuilders/areaScene.d.ts +13 -0
- package/dist/components/stream/xySceneBuilders/barScene.d.ts +18 -0
- package/dist/components/stream/xySceneBuilders/boundsScene.d.ts +8 -0
- package/dist/components/stream/xySceneBuilders/candlestickScene.d.ts +10 -0
- package/dist/components/stream/xySceneBuilders/emitPointNodes.d.ts +13 -0
- package/dist/components/stream/xySceneBuilders/heatmapScene.d.ts +3 -0
- package/dist/components/stream/xySceneBuilders/lineScene.d.ts +12 -0
- package/dist/components/stream/xySceneBuilders/pointScene.d.ts +12 -0
- package/dist/components/stream/xySceneBuilders/swarmScene.d.ts +10 -0
- package/dist/components/stream/xySceneBuilders/types.d.ts +93 -0
- package/dist/components/stream/xySceneBuilders/waterfallScene.d.ts +12 -0
- package/dist/geo.min.js +1 -1
- package/dist/geo.module.min.js +1 -1
- package/dist/network.min.js +1 -1
- package/dist/network.module.min.js +1 -1
- package/dist/ordinal.min.js +1 -1
- package/dist/ordinal.module.min.js +1 -1
- package/dist/realtime.min.js +1 -1
- package/dist/realtime.module.min.js +1 -1
- package/dist/semiotic-ai.d.ts +1 -0
- package/dist/semiotic-ai.min.js +1 -1
- package/dist/semiotic-ai.module.min.js +1 -1
- package/dist/semiotic-ordinal.d.ts +2 -0
- package/dist/{semiotic-statisticalOverlays-D8LhSbQt.js → semiotic-statisticalOverlays-DGX_WWc5.js} +1 -1
- package/dist/semiotic-themes.d.ts +16 -0
- package/dist/semiotic-themes.min.js +1 -1
- package/dist/semiotic-themes.module.min.js +1 -1
- package/dist/semiotic-utils.d.ts +30 -0
- package/dist/semiotic-utils.min.js +1 -0
- package/dist/semiotic-utils.module.min.js +1 -0
- package/dist/semiotic.d.ts +4 -4
- package/dist/semiotic.min.js +1 -1
- package/dist/semiotic.module.min.js +1 -1
- package/dist/server.min.js +1 -1
- package/dist/server.module.min.js +1 -1
- package/dist/xy.min.js +1 -1
- package/dist/xy.module.min.js +1 -1
- package/package.json +19 -11
|
@@ -1,36 +1,112 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Keyboard navigation utilities for Stream Frames.
|
|
3
3
|
*
|
|
4
|
-
*
|
|
5
|
-
*
|
|
6
|
-
*
|
|
7
|
-
*
|
|
4
|
+
* Supports two navigation modes:
|
|
5
|
+
* - **Flat**: ArrowRight/Left and ArrowUp/Down both advance linearly (geo, simple charts)
|
|
6
|
+
* - **Graph**: ArrowRight/Left navigates within a series/group, ArrowUp/Down switches
|
|
7
|
+
* between series/groups at a similar position (XY lines, stacked bars, networks)
|
|
8
|
+
*
|
|
9
|
+
* Reuses the existing hover/tooltip system — keyboard focus sets the same
|
|
10
|
+
* HoverData state that mouse hover does.
|
|
8
11
|
*/
|
|
9
12
|
import type { HoverData } from "../realtime/types";
|
|
10
13
|
export interface NavPoint {
|
|
11
14
|
x: number;
|
|
12
15
|
y: number;
|
|
13
16
|
datum: any;
|
|
17
|
+
/** Shape hint for focus ring rendering */
|
|
18
|
+
shape?: "circle" | "rect" | "wedge";
|
|
19
|
+
/** Width of rect-shaped elements (bars, sankey nodes) */
|
|
20
|
+
w?: number;
|
|
21
|
+
/** Height of rect-shaped elements */
|
|
22
|
+
h?: number;
|
|
23
|
+
/** Group identifier for graph navigation (series name, category, node id) */
|
|
24
|
+
group?: string;
|
|
25
|
+
/** Index in NavGraph.flat — set by buildNavGraph for O(1) lookup */
|
|
26
|
+
_flatIndex?: number;
|
|
27
|
+
/** Index within its group — set by buildNavGraph for O(1) resolvePosition */
|
|
28
|
+
_groupIndex?: number;
|
|
29
|
+
}
|
|
30
|
+
/**
|
|
31
|
+
* A navigation graph that organizes NavPoints into groups (series/categories)
|
|
32
|
+
* and positions within each group, enabling 2D keyboard navigation.
|
|
33
|
+
*
|
|
34
|
+
* ArrowRight/Left = next/prev within the current group (e.g. along a line series)
|
|
35
|
+
* ArrowUp/Down = switch to the nearest point in an adjacent group (e.g. switch series)
|
|
36
|
+
*/
|
|
37
|
+
export interface NavGraph {
|
|
38
|
+
/** All points in flat order (for PageUp/Down, Home/End) */
|
|
39
|
+
flat: NavPoint[];
|
|
40
|
+
/** Group names in stable order */
|
|
41
|
+
groups: string[];
|
|
42
|
+
/** Points per group, in position order */
|
|
43
|
+
byGroup: Map<string, NavPoint[]>;
|
|
44
|
+
/** Precomputed node id → flat index lookup (for network navigation) */
|
|
45
|
+
idToIdx: Map<string, number>;
|
|
14
46
|
}
|
|
47
|
+
export interface NavPosition {
|
|
48
|
+
/** Index into NavGraph.flat */
|
|
49
|
+
flatIndex: number;
|
|
50
|
+
/** Current group name */
|
|
51
|
+
group: string;
|
|
52
|
+
/** Index within the current group */
|
|
53
|
+
indexInGroup: number;
|
|
54
|
+
}
|
|
55
|
+
/**
|
|
56
|
+
* Build a navigation graph from grouped NavPoints.
|
|
57
|
+
* Points within each group are sorted by x then y.
|
|
58
|
+
* Groups are sorted by their first-point y position (top to bottom).
|
|
59
|
+
*/
|
|
60
|
+
export declare function buildNavGraph(points: NavPoint[]): NavGraph;
|
|
61
|
+
/**
|
|
62
|
+
* Resolve the current NavPosition from a flat index.
|
|
63
|
+
* Clamps to valid range if the index is stale (e.g. scene changed between key presses).
|
|
64
|
+
*/
|
|
65
|
+
export declare function resolvePosition(graph: NavGraph, flatIndex: number): NavPosition;
|
|
66
|
+
/**
|
|
67
|
+
* Compute the next navigation position given a key press and current position.
|
|
68
|
+
* Returns the flat index into graph.flat, -1 to clear, or null for unhandled keys.
|
|
69
|
+
*/
|
|
70
|
+
export declare function nextGraphIndex(key: string, pos: NavPosition, graph: NavGraph): number | null;
|
|
15
71
|
/**
|
|
16
72
|
* Extract navigable data points from XY scene nodes.
|
|
17
|
-
*
|
|
18
|
-
*
|
|
73
|
+
* Lines/areas carry a `group` field identifying the series.
|
|
74
|
+
* ArrowRight/Left = within series, ArrowUp/Down = switch series.
|
|
19
75
|
*/
|
|
20
76
|
export declare function extractXYNavPoints(scene: any[]): NavPoint[];
|
|
21
77
|
/**
|
|
22
78
|
* Extract navigable points from ordinal scene nodes.
|
|
23
|
-
*
|
|
79
|
+
* Bars use `node.group` (stack/group key) falling back to `datum.category`.
|
|
80
|
+
* ArrowRight/Left = across categories, ArrowUp/Down = within stacked segments.
|
|
24
81
|
*/
|
|
25
82
|
export declare function extractOrdinalNavPoints(scene: any[]): NavPoint[];
|
|
26
83
|
/**
|
|
27
84
|
* Extract navigable points from network scene nodes.
|
|
28
|
-
*
|
|
85
|
+
* Each node's group is its own id, enabling neighbor traversal via edges.
|
|
29
86
|
*/
|
|
30
87
|
export declare function extractNetworkNavPoints(scene: any[]): NavPoint[];
|
|
88
|
+
/**
|
|
89
|
+
* Network-specific navigation: spatial arrow keys + edge following.
|
|
90
|
+
*
|
|
91
|
+
* ArrowRight/Left/Up/Down: move to the nearest node in that direction.
|
|
92
|
+
* Enter: follow an edge to a connected neighbor of the current node.
|
|
93
|
+
* PageUp/Down, Home/End, Escape: flat navigation.
|
|
94
|
+
*
|
|
95
|
+
* Returns the flat index of the target node, -1 to clear, or null for unhandled keys.
|
|
96
|
+
*/
|
|
97
|
+
export declare function nextNetworkIndex(key: string, pos: NavPosition, graph: NavGraph, edges: any[], neighborIndexRef: {
|
|
98
|
+
current: number;
|
|
99
|
+
}): number | null;
|
|
100
|
+
/**
|
|
101
|
+
* Extract navigable points from geo scene nodes.
|
|
102
|
+
* Flat navigation only (no meaningful grouping for geo).
|
|
103
|
+
*/
|
|
104
|
+
export declare function extractGeoNavPoints(scene: any[]): NavPoint[];
|
|
31
105
|
/**
|
|
32
106
|
* Compute the next focus index given a key and current index.
|
|
33
|
-
* Returns -1 to clear focus.
|
|
107
|
+
* Returns -1 to clear focus. Returns null for unhandled keys.
|
|
108
|
+
*
|
|
109
|
+
* Used by Geo frame (flat navigation) and as fallback.
|
|
34
110
|
*/
|
|
35
111
|
export declare function nextIndex(key: string, current: number, total: number): number | null;
|
|
36
112
|
/**
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Scene builders for hierarchy layouts (tree, treemap, circlepack).
|
|
3
|
+
*
|
|
4
|
+
* Converts RealtimeNode/Edge arrays (positioned by d3-hierarchy) into
|
|
5
|
+
* NetworkSceneNode/Edge arrays for canvas rendering.
|
|
6
|
+
*
|
|
7
|
+
* Three builder functions, one per visual form:
|
|
8
|
+
* buildTreeScene — circle nodes + curved edges (tree/cluster)
|
|
9
|
+
* buildRectScene — rect nodes, no edges (treemap/partition)
|
|
10
|
+
* buildCircleScene — circle nodes, no edges (circlepack)
|
|
11
|
+
*
|
|
12
|
+
* Dependencies: hierarchyUtils (palette, contrast, label resolution)
|
|
13
|
+
* Consumed by: hierarchyLayoutPlugin.ts (buildScene dispatcher)
|
|
14
|
+
*/
|
|
15
|
+
import type { NetworkPipelineConfig, NetworkSceneNode, NetworkSceneEdge, NetworkLabel, RealtimeNode, RealtimeEdge } from "../networkTypes";
|
|
16
|
+
export declare function buildTreeScene(nodes: RealtimeNode[], edges: RealtimeEdge[], config: NetworkPipelineConfig, size: [number, number], nodeStyleFn: (d: any) => Record<string, any>, edgeStyleFn: (d: any) => Record<string, any>): {
|
|
17
|
+
sceneNodes: NetworkSceneNode[];
|
|
18
|
+
sceneEdges: NetworkSceneEdge[];
|
|
19
|
+
labels: NetworkLabel[];
|
|
20
|
+
};
|
|
21
|
+
export declare function buildRectScene(nodes: RealtimeNode[], config: NetworkPipelineConfig, size: [number, number], nodeStyleFn: (d: any) => Record<string, any>): {
|
|
22
|
+
sceneNodes: NetworkSceneNode[];
|
|
23
|
+
sceneEdges: NetworkSceneEdge[];
|
|
24
|
+
labels: NetworkLabel[];
|
|
25
|
+
};
|
|
26
|
+
export declare function buildCircleScene(nodes: RealtimeNode[], config: NetworkPipelineConfig, size: [number, number], nodeStyleFn: (d: any) => Record<string, any>): {
|
|
27
|
+
sceneNodes: NetworkSceneNode[];
|
|
28
|
+
sceneEdges: NetworkSceneEdge[];
|
|
29
|
+
labels: NetworkLabel[];
|
|
30
|
+
};
|
|
31
|
+
/**
|
|
32
|
+
* Generate a cubic bezier path string for a tree/cluster edge.
|
|
33
|
+
* Uses different curve strategies based on tree orientation.
|
|
34
|
+
*/
|
|
35
|
+
export declare function generateTreeEdgePath(sx: number, sy: number, tx: number, ty: number, orientation: string): string;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Shared utilities for hierarchy layout plugins.
|
|
3
|
+
*
|
|
4
|
+
* CSS color parsing, contrast text, depth palette, and accessor resolution
|
|
5
|
+
* used across tree, treemap, and circlepack scene builders.
|
|
6
|
+
*
|
|
7
|
+
* Consumed by: hierarchyLayoutPlugin.ts, hierarchySceneBuilders.ts
|
|
8
|
+
*/
|
|
9
|
+
import type { NetworkPipelineConfig } from "../networkTypes";
|
|
10
|
+
/** Depth-based color palette shared across all hierarchy scene builders */
|
|
11
|
+
export declare const DEPTH_PALETTE: string[];
|
|
12
|
+
/**
|
|
13
|
+
* Parse a CSS color string (hex or rgb/rgba) into [r, g, b].
|
|
14
|
+
* Falls back to mid-gray if the format is unrecognized.
|
|
15
|
+
*/
|
|
16
|
+
export declare function parseColor(color: string): [number, number, number];
|
|
17
|
+
/**
|
|
18
|
+
* Return a high-contrast text color (white or near-black) for the given background.
|
|
19
|
+
* Uses perceived luminance (ITU-R BT.601).
|
|
20
|
+
*/
|
|
21
|
+
export declare function contrastTextColor(bgColor: string): string;
|
|
22
|
+
export declare function resolveChildrenAccessor(accessor: string | ((d: any) => any[]) | undefined): ((d: any) => any[]) | undefined;
|
|
23
|
+
export declare function resolveNodeId(d: any, config: NetworkPipelineConfig, index: number): string;
|
|
24
|
+
export declare function resolveLabelFn(nodeLabel: string | ((d: any) => string) | undefined): ((d: any) => string) | null;
|
|
25
|
+
export declare function resolveDefaultNodeSize(nodeSize: number | string | ((d: any) => number) | undefined): number;
|
|
@@ -440,8 +440,12 @@ export interface StreamNetworkFrameProps<T = Record<string, any>> {
|
|
|
440
440
|
orbitEccentricity?: number | ((node: any) => number);
|
|
441
441
|
orbitShowRings?: boolean;
|
|
442
442
|
orbitAnimated?: boolean;
|
|
443
|
-
/** Render a visually-hidden data table from the scene graph for screen readers
|
|
443
|
+
/** Render a visually-hidden data table from the scene graph for screen readers */
|
|
444
444
|
accessibleTable?: boolean;
|
|
445
|
+
/** Accessible description overriding the auto-generated aria-label on the chart container */
|
|
446
|
+
description?: string;
|
|
447
|
+
/** Accessible summary rendered as a screen-reader-only note */
|
|
448
|
+
summary?: string;
|
|
445
449
|
}
|
|
446
450
|
export interface StreamNetworkFrameHandle {
|
|
447
451
|
push(edge: EdgePush): void;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import type { OrdinalSceneNode, OrdinalLayout } from "../ordinalTypes";
|
|
2
|
+
import type { OrdinalSceneContext } from "./types";
|
|
3
|
+
/**
|
|
4
|
+
* Swimlane scene builder.
|
|
5
|
+
*
|
|
6
|
+
* Each category (oAccessor) defines a horizontal lane.
|
|
7
|
+
* Items within a lane are stacked left-to-right (or bottom-to-top in vertical),
|
|
8
|
+
* colored by subcategory (stackBy/colorBy). Unlike a standard stacked bar,
|
|
9
|
+
* multiple items with the same subcategory can appear in the same lane —
|
|
10
|
+
* they simply stack sequentially.
|
|
11
|
+
*/
|
|
12
|
+
export declare function buildSwimlaneScene(ctx: OrdinalSceneContext, layout: OrdinalLayout): OrdinalSceneNode[];
|
|
@@ -3,7 +3,7 @@ import type { ScaleLinear, ScaleBand } from "d3-scale";
|
|
|
3
3
|
import type { ArrowOfTime, WindowMode, HoverAnnotationConfig, HoverData, AnnotationContext } from "../realtime/types";
|
|
4
4
|
import type { Style, DecayConfig, PulseConfig, TransitionConfig, StalenessConfig } from "./types";
|
|
5
5
|
import type { LegendGroup } from "../types/legendTypes";
|
|
6
|
-
export type OrdinalChartType = "bar" | "clusterbar" | "point" | "swarm" | "pie" | "donut" | "boxplot" | "violin" | "histogram" | "ridgeline" | "timeline" | "funnel" | "bar-funnel";
|
|
6
|
+
export type OrdinalChartType = "bar" | "clusterbar" | "point" | "swarm" | "pie" | "donut" | "boxplot" | "violin" | "histogram" | "ridgeline" | "timeline" | "funnel" | "bar-funnel" | "swimlane";
|
|
7
7
|
export interface OrdinalScales {
|
|
8
8
|
o: ScaleBand<string>;
|
|
9
9
|
r: ScaleLinear<number, number>;
|
|
@@ -219,7 +219,7 @@ export interface StreamOrdinalFrameProps<T = Record<string, any>> {
|
|
|
219
219
|
showCategoryTicks?: boolean;
|
|
220
220
|
oLabel?: string;
|
|
221
221
|
rLabel?: string;
|
|
222
|
-
oFormat?: (d: string) => string;
|
|
222
|
+
oFormat?: (d: string, index?: number) => string;
|
|
223
223
|
rFormat?: (d: number | string) => string;
|
|
224
224
|
enableHover?: boolean;
|
|
225
225
|
hoverAnnotation?: boolean | HoverAnnotationConfig;
|
|
@@ -248,12 +248,24 @@ export interface StreamOrdinalFrameProps<T = Record<string, any>> {
|
|
|
248
248
|
className?: string;
|
|
249
249
|
background?: string;
|
|
250
250
|
centerContent?: ReactNode;
|
|
251
|
+
/** Brush configuration. "r" brushes the value axis. */
|
|
252
|
+
brush?: boolean | "r" | {
|
|
253
|
+
dimension?: "r";
|
|
254
|
+
};
|
|
255
|
+
/** Callback when brush selection changes. Extent is in data coordinates, or null when cleared. */
|
|
256
|
+
onBrush?: (extent: {
|
|
257
|
+
r: [number, number];
|
|
258
|
+
} | null) => void;
|
|
251
259
|
decay?: DecayConfig;
|
|
252
260
|
pulse?: PulseConfig;
|
|
253
261
|
transition?: TransitionConfig;
|
|
254
262
|
staleness?: StalenessConfig;
|
|
255
|
-
/** Render a visually-hidden data table from the scene graph for screen readers
|
|
263
|
+
/** Render a visually-hidden data table from the scene graph for screen readers */
|
|
256
264
|
accessibleTable?: boolean;
|
|
265
|
+
/** Accessible description overriding the auto-generated aria-label on the chart container */
|
|
266
|
+
description?: string;
|
|
267
|
+
/** Accessible summary rendered as a screen-reader-only note */
|
|
268
|
+
summary?: string;
|
|
257
269
|
}
|
|
258
270
|
export interface StreamOrdinalFrameHandle<T = Record<string, any>> {
|
|
259
271
|
push(datum: T): void;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Decay encoding for XY pipeline scene nodes.
|
|
3
|
+
*
|
|
4
|
+
* Applies age-based opacity fade to scene nodes — linear, exponential, or step.
|
|
5
|
+
* Per-vertex decay for line/area nodes, uniform for discrete nodes (point, rect, etc.).
|
|
6
|
+
*
|
|
7
|
+
* Dependencies: types (SceneNode, DecayConfig)
|
|
8
|
+
* Consumed by: PipelineStore.computeScene (after scene build, before transitions)
|
|
9
|
+
*/
|
|
10
|
+
import type { SceneNode, DecayConfig } from "./types";
|
|
11
|
+
/**
|
|
12
|
+
* Compute decay opacity for a datum at `bufferIndex` out of `bufferSize` items.
|
|
13
|
+
* Index 0 = oldest, bufferSize-1 = newest. Returns 0–1.
|
|
14
|
+
*/
|
|
15
|
+
export declare function computeDecayOpacity(decay: DecayConfig, bufferIndex: number, bufferSize: number): number;
|
|
16
|
+
/**
|
|
17
|
+
* Apply decay opacity to a list of scene nodes.
|
|
18
|
+
* Uses the datum's index in the buffer data array.
|
|
19
|
+
*/
|
|
20
|
+
export declare function applyDecay(decay: DecayConfig, nodes: SceneNode[], data: Record<string, any>[]): void;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Pulse encoding for XY pipeline scene nodes.
|
|
3
|
+
*
|
|
4
|
+
* Applies time-based glow to recently-inserted data points. Intensity fades
|
|
5
|
+
* from 1 (just inserted) to 0 (pulse expired) over a configurable duration.
|
|
6
|
+
*
|
|
7
|
+
* Dependencies: types (SceneNode, PulseConfig), RingBuffer (timestamp buffer)
|
|
8
|
+
* Consumed by: PipelineStore.computeScene (after decay, before transitions)
|
|
9
|
+
*/
|
|
10
|
+
import type { SceneNode, PulseConfig } from "./types";
|
|
11
|
+
import type { RingBuffer } from "../realtime/RingBuffer";
|
|
12
|
+
/**
|
|
13
|
+
* Compute pulse intensity for a datum inserted at `insertTime`.
|
|
14
|
+
* Returns 0–1 (1 = just inserted, 0 = pulse expired).
|
|
15
|
+
*/
|
|
16
|
+
export declare function computePulseIntensity(pulse: PulseConfig, insertTime: number, now: number): number;
|
|
17
|
+
/**
|
|
18
|
+
* Apply pulse glow to scene nodes using insertion timestamps.
|
|
19
|
+
*/
|
|
20
|
+
export declare function applyPulse(pulse: PulseConfig, nodes: SceneNode[], data: Record<string, any>[], timestampBuffer: RingBuffer<number>): void;
|
|
21
|
+
/**
|
|
22
|
+
* Check whether there are active pulse animations needing continuous rendering.
|
|
23
|
+
*/
|
|
24
|
+
export declare function hasActivePulses(pulse: PulseConfig, timestampBuffer: RingBuffer<number> | null): boolean;
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Transition animation for XY pipeline scene nodes.
|
|
3
|
+
*
|
|
4
|
+
* Handles identity-based enter/update/exit transitions:
|
|
5
|
+
* - snapshotPositions: captures current scene state before rebuild
|
|
6
|
+
* - getNodeIdentity: stable key generation per node type
|
|
7
|
+
* - startTransition: sets up interpolation from old→new positions
|
|
8
|
+
* - advanceTransition: per-frame tick with easing
|
|
9
|
+
*
|
|
10
|
+
* Dependencies: pipelineTransitionUtils (lerp, easing, ActiveTransition)
|
|
11
|
+
* Consumed by: PipelineStore.computeScene (after decay/pulse)
|
|
12
|
+
*/
|
|
13
|
+
import type { SceneNode, TransitionConfig } from "./types";
|
|
14
|
+
import type { ActiveTransition } from "./pipelineTransitionUtils";
|
|
15
|
+
export type PrevPosition = {
|
|
16
|
+
x: number;
|
|
17
|
+
y: number;
|
|
18
|
+
w?: number;
|
|
19
|
+
h?: number;
|
|
20
|
+
r?: number;
|
|
21
|
+
opacity?: number;
|
|
22
|
+
};
|
|
23
|
+
export type PrevPath = {
|
|
24
|
+
topPath?: [number, number][];
|
|
25
|
+
bottomPath?: [number, number][];
|
|
26
|
+
path?: [number, number][];
|
|
27
|
+
opacity?: number;
|
|
28
|
+
};
|
|
29
|
+
/** Context needed from PipelineStore for identity resolution */
|
|
30
|
+
export interface TransitionContext {
|
|
31
|
+
runtimeMode?: "streaming" | "bounded";
|
|
32
|
+
getX: (d: any) => number;
|
|
33
|
+
getY: (d: any) => number;
|
|
34
|
+
getCategory?: (d: any) => string;
|
|
35
|
+
}
|
|
36
|
+
/**
|
|
37
|
+
* Get a stable identity key for a scene node.
|
|
38
|
+
*/
|
|
39
|
+
export declare function getNodeIdentity(ctx: TransitionContext, node: SceneNode, index: number): string | null;
|
|
40
|
+
/**
|
|
41
|
+
* Snapshot current scene node positions before rebuild.
|
|
42
|
+
*/
|
|
43
|
+
export declare function snapshotPositions(ctx: TransitionContext, scene: SceneNode[], prevPositionMap: Map<string, PrevPosition>, prevPathMap: Map<string, PrevPath>): void;
|
|
44
|
+
export interface TransitionState {
|
|
45
|
+
scene: SceneNode[];
|
|
46
|
+
exitNodes: SceneNode[];
|
|
47
|
+
activeTransition: ActiveTransition | null;
|
|
48
|
+
}
|
|
49
|
+
/**
|
|
50
|
+
* After scene rebuild, set up transition from old to new positions.
|
|
51
|
+
* Detects entering nodes (new, no prev match) and exiting nodes (prev, no new match).
|
|
52
|
+
* Mutates scene and exitNodes in place. Returns updated state.
|
|
53
|
+
*/
|
|
54
|
+
export declare function startTransition(ctx: TransitionContext, transition: TransitionConfig, state: TransitionState, prevPositionMap: Map<string, PrevPosition>, prevPathMap: Map<string, PrevPath>): TransitionState;
|
|
55
|
+
/**
|
|
56
|
+
* Advance the transition animation. Returns true if still animating.
|
|
57
|
+
* Mutates scene nodes in place.
|
|
58
|
+
*/
|
|
59
|
+
export declare function advanceTransition(now: number, transition: TransitionConfig, state: TransitionState, prevPositionMap: Map<string, PrevPosition>, prevPathMap: Map<string, PrevPath>): boolean;
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import type { StreamRendererFn } from "./types";
|
|
2
2
|
/**
|
|
3
3
|
* Canvas point renderer.
|
|
4
|
-
* Renders PointSceneNode as circles. Used
|
|
4
|
+
* Renders PointSceneNode as circles. Used by Scatterplot, BubbleChart, SwarmChart,
|
|
5
|
+
* and showPoints on LineChart, AreaChart, and StackedAreaChart.
|
|
5
6
|
* Supports pulse glow effect via _pulseIntensity/_pulseColor fields.
|
|
6
7
|
*/
|
|
7
8
|
export declare const pointCanvasRenderer: StreamRendererFn;
|
|
@@ -92,6 +92,8 @@ export interface LineSceneNode {
|
|
|
92
92
|
_decayOpacities?: number[];
|
|
93
93
|
/** Animation target opacity (set during enter/exit transitions) */
|
|
94
94
|
_targetOpacity?: number;
|
|
95
|
+
/** Captured start opacity for linear interpolation (avoids compounding from per-tick mutation) */
|
|
96
|
+
_startOpacity?: number;
|
|
95
97
|
/** Stable identity key for transition tracking */
|
|
96
98
|
_transitionKey?: string;
|
|
97
99
|
/** Previous path coordinates for interpolation during transitions */
|
|
@@ -123,6 +125,8 @@ export interface AreaSceneNode {
|
|
|
123
125
|
_decayOpacities?: number[];
|
|
124
126
|
/** Animation target opacity (set during enter/exit transitions) */
|
|
125
127
|
_targetOpacity?: number;
|
|
128
|
+
/** Captured start opacity for linear interpolation (avoids compounding from per-tick mutation) */
|
|
129
|
+
_startOpacity?: number;
|
|
126
130
|
/** Stable identity key for transition tracking */
|
|
127
131
|
_transitionKey?: string;
|
|
128
132
|
/** Previous top path coordinates for interpolation during transitions */
|
|
@@ -363,6 +367,12 @@ export interface StreamXYFrameProps<T = Record<string, any>> {
|
|
|
363
367
|
brush?: {
|
|
364
368
|
/** Which dimension(s) to brush: "x", "y", or "xy" (default "xy") */
|
|
365
369
|
dimension?: "x" | "y" | "xy";
|
|
370
|
+
/** Snap mode: "continuous" (default) for pixel-precise, "bin" to snap to bin boundaries */
|
|
371
|
+
snap?: "continuous" | "bin";
|
|
372
|
+
/** Actual bin boundary values for data-driven snapping (overrides uniform grid math) */
|
|
373
|
+
binBoundaries?: number[];
|
|
374
|
+
/** When true, snap during drag (not just on release). Default false. */
|
|
375
|
+
snapDuring?: boolean;
|
|
366
376
|
};
|
|
367
377
|
/** Callback when brush selection changes. Called with data-space extent, or null when cleared. */
|
|
368
378
|
onBrush?: (extent: {
|
|
@@ -418,8 +428,16 @@ export interface StreamXYFrameProps<T = Record<string, any>> {
|
|
|
418
428
|
showValues?: boolean;
|
|
419
429
|
/** Format function for heatmap cell value labels */
|
|
420
430
|
heatmapValueFormat?: (v: number) => string;
|
|
421
|
-
/** Render a visually-hidden data table from the scene graph for screen readers
|
|
431
|
+
/** Render a visually-hidden data table from the scene graph for screen readers */
|
|
422
432
|
accessibleTable?: boolean;
|
|
433
|
+
/** Accessible description overriding the auto-generated aria-label on the chart container */
|
|
434
|
+
description?: string;
|
|
435
|
+
/** Accessible summary rendered as a screen-reader-only note */
|
|
436
|
+
summary?: string;
|
|
437
|
+
/** Name of the linked crosshair store entry — enables coordinate-based crosshair rendering */
|
|
438
|
+
linkedCrosshairName?: string;
|
|
439
|
+
/** Source chart ID — crosshair is suppressed on the source chart to avoid double rendering */
|
|
440
|
+
linkedCrosshairSourceId?: string;
|
|
423
441
|
}
|
|
424
442
|
export interface StreamXYFrameHandle<T = Record<string, any>> {
|
|
425
443
|
push(datum: T): void;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/** Safari 14 fallback for MediaQueryList listener registration */
|
|
2
|
+
export declare function addMqlListener(mql: MediaQueryList, handler: (e: MediaQueryListEvent) => void): () => void;
|
|
3
|
+
/**
|
|
4
|
+
* SSR-safe hook that returns true when the user prefers reduced motion.
|
|
5
|
+
* Initializes from matchMedia synchronously to avoid a flash of animation.
|
|
6
|
+
*/
|
|
7
|
+
export declare function useReducedMotion(): boolean;
|
|
8
|
+
/**
|
|
9
|
+
* SSR-safe hook that returns true when forced-colors or high-contrast mode is active.
|
|
10
|
+
*/
|
|
11
|
+
export declare function useHighContrast(): boolean;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Area and stacked area scene builders.
|
|
3
|
+
*
|
|
4
|
+
* buildAreaScene — single/multi-group areas with gradient fill and curve support.
|
|
5
|
+
* buildStackedAreaScene — stable-order stacking with optional normalization.
|
|
6
|
+
*
|
|
7
|
+
* Dependencies: SceneGraph (buildAreaNode, buildStackedAreaNodes)
|
|
8
|
+
* Consumed by: PipelineStore.buildSceneNodes (chartTypes "area", "stackedarea")
|
|
9
|
+
*/
|
|
10
|
+
import type { SceneNode } from "../types";
|
|
11
|
+
import type { XYSceneContext } from "./types";
|
|
12
|
+
export declare function buildAreaScene(ctx: XYSceneContext, data: Record<string, any>[]): SceneNode[];
|
|
13
|
+
export declare function buildStackedAreaScene(ctx: XYSceneContext, data: Record<string, any>[]): SceneNode[];
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Realtime histogram bar scene builder.
|
|
3
|
+
*
|
|
4
|
+
* Builds binned bars with optional category stacking. Maintains stable
|
|
5
|
+
* category order via barColors keys + alphabetical fallback to prevent
|
|
6
|
+
* flicker when bins partially exit the sliding window.
|
|
7
|
+
*
|
|
8
|
+
* Dependencies: BinAccumulator (computeBins), SceneGraph (buildRectNode)
|
|
9
|
+
* Consumed by: PipelineStore.buildSceneNodes (chartType "bar")
|
|
10
|
+
*/
|
|
11
|
+
import type { SceneNode } from "../types";
|
|
12
|
+
import type { XYSceneContext } from "./types";
|
|
13
|
+
export interface BarSceneResult {
|
|
14
|
+
nodes: SceneNode[];
|
|
15
|
+
/** Sorted bin boundary values (edges of all bins) for data-driven brush snapping */
|
|
16
|
+
binBoundaries: number[];
|
|
17
|
+
}
|
|
18
|
+
export declare function buildBarScene(ctx: XYSceneContext, data: Record<string, any>[]): BarSceneResult;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Bounds scene builder — produces an AreaSceneNode for confidence bands/envelopes.
|
|
3
|
+
*
|
|
4
|
+
* Consumed by: lineScene (renders bounds behind lines)
|
|
5
|
+
*/
|
|
6
|
+
import type { AreaSceneNode } from "../types";
|
|
7
|
+
import type { XYSceneContext } from "./types";
|
|
8
|
+
export declare function buildBoundsForGroup(ctx: XYSceneContext, data: Record<string, any>[], group: string): AreaSceneNode | null;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Candlestick (OHLC) scene builder.
|
|
3
|
+
*
|
|
4
|
+
* Renders open-high-low-close bars with auto-width sizing based on data spacing.
|
|
5
|
+
*
|
|
6
|
+
* Consumed by: PipelineStore.buildSceneNodes (chartType "candlestick")
|
|
7
|
+
*/
|
|
8
|
+
import type { SceneNode, StreamLayout } from "../types";
|
|
9
|
+
import type { XYSceneContext } from "./types";
|
|
10
|
+
export declare function buildCandlestickScene(ctx: XYSceneContext, data: Record<string, any>[], layout: StreamLayout): SceneNode[];
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Shared helper for emitting PointSceneNodes from grouped data.
|
|
3
|
+
*
|
|
4
|
+
* Used by line, area, and stacked area scene builders when the HOC's
|
|
5
|
+
* `showPoints` prop is active (i.e., `ctx.config.pointStyle` is set).
|
|
6
|
+
* Handles group color fallback for push API mode and pointId passthrough.
|
|
7
|
+
*/
|
|
8
|
+
import type { SceneNode } from "../types";
|
|
9
|
+
import type { XYSceneContext } from "./types";
|
|
10
|
+
export declare function emitPointNodes(ctx: XYSceneContext, groups: {
|
|
11
|
+
key: string;
|
|
12
|
+
data: Record<string, any>[];
|
|
13
|
+
}[], nodes: SceneNode[], yGetOverride?: (d: Record<string, any>) => number): void;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Line scene builder — produces LineSceneNode[] from grouped data.
|
|
3
|
+
*
|
|
4
|
+
* Handles: color thresholds from annotations, bounds/envelope areas,
|
|
5
|
+
* and curve type attachment for canvas interpolation.
|
|
6
|
+
*
|
|
7
|
+
* Dependencies: SceneGraph (buildLineNode), boundsScene (buildBoundsForGroup)
|
|
8
|
+
* Consumed by: PipelineStore.buildSceneNodes (chartType "line")
|
|
9
|
+
*/
|
|
10
|
+
import type { SceneNode } from "../types";
|
|
11
|
+
import type { XYSceneContext } from "./types";
|
|
12
|
+
export declare function buildLineScene(ctx: XYSceneContext, data: Record<string, any>[]): SceneNode[];
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Point/scatter/bubble scene builder.
|
|
3
|
+
*
|
|
4
|
+
* Handles: size scaling from sizeAccessor, color mapping from colorAccessor,
|
|
5
|
+
* and pointId attachment for hit testing.
|
|
6
|
+
*
|
|
7
|
+
* Dependencies: SceneGraph (buildPointNode)
|
|
8
|
+
* Consumed by: PipelineStore.buildSceneNodes (chartTypes "scatter", "bubble")
|
|
9
|
+
*/
|
|
10
|
+
import type { SceneNode } from "../types";
|
|
11
|
+
import type { XYSceneContext } from "./types";
|
|
12
|
+
export declare function buildPointScene(ctx: XYSceneContext, data: Record<string, any>[]): SceneNode[];
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Realtime swarm chart scene builder.
|
|
3
|
+
*
|
|
4
|
+
* Simple point scatter with category-based coloring from barColors config.
|
|
5
|
+
*
|
|
6
|
+
* Consumed by: PipelineStore.buildSceneNodes (chartType "swarm")
|
|
7
|
+
*/
|
|
8
|
+
import type { SceneNode } from "../types";
|
|
9
|
+
import type { XYSceneContext } from "./types";
|
|
10
|
+
export declare function buildSwarmScene(ctx: XYSceneContext, data: Record<string, any>[]): SceneNode[];
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* XYSceneContext — shared context passed to all XY scene builder functions.
|
|
3
|
+
*
|
|
4
|
+
* Mirrors the ordinal pattern (OrdinalSceneContext in ordinalSceneBuilders/).
|
|
5
|
+
* Scene builders are pure functions that receive this context instead of
|
|
6
|
+
* accessing PipelineStore instance fields directly.
|
|
7
|
+
*/
|
|
8
|
+
import type { StreamScales, Style, CurveType } from "../types";
|
|
9
|
+
export interface XYSceneContext {
|
|
10
|
+
scales: StreamScales;
|
|
11
|
+
config: XYSceneConfig;
|
|
12
|
+
getX: (d: any) => number;
|
|
13
|
+
getY: (d: any) => number;
|
|
14
|
+
getY0?: (d: any) => number | null;
|
|
15
|
+
getSize?: (d: any) => number;
|
|
16
|
+
getColor?: (d: any) => string;
|
|
17
|
+
getGroup?: (d: any) => string;
|
|
18
|
+
getCategory?: (d: any) => string;
|
|
19
|
+
getPointId?: (d: any) => string;
|
|
20
|
+
getBounds?: (d: any) => number | null;
|
|
21
|
+
getOpen?: (d: any) => number;
|
|
22
|
+
getHigh?: (d: any) => number;
|
|
23
|
+
getLow?: (d: any) => number;
|
|
24
|
+
getClose?: (d: any) => number;
|
|
25
|
+
/** Style resolvers — delegate to PipelineStore's cached color management */
|
|
26
|
+
resolveLineStyle: (group: string, sampleDatum?: Record<string, any>) => Style;
|
|
27
|
+
resolveAreaStyle: (group: string, sampleDatum?: Record<string, any>) => Style;
|
|
28
|
+
resolveBoundsStyle: (group: string, sampleDatum?: Record<string, any>) => Style;
|
|
29
|
+
resolveColorMap: (data: Record<string, any>[]) => Map<string, string>;
|
|
30
|
+
resolveGroupColor: (group: string) => string | null;
|
|
31
|
+
/** Group data by lineBy/colorBy accessor */
|
|
32
|
+
groupData: (data: Record<string, any>[]) => {
|
|
33
|
+
key: string;
|
|
34
|
+
data: Record<string, any>[];
|
|
35
|
+
}[];
|
|
36
|
+
/** Instance-scoped mutable cache for bar category ordering (prevents cross-instance leaks) */
|
|
37
|
+
barCategoryCache?: {
|
|
38
|
+
key: string;
|
|
39
|
+
order: string[];
|
|
40
|
+
} | null;
|
|
41
|
+
}
|
|
42
|
+
/** Subset of PipelineConfig fields that scene builders need */
|
|
43
|
+
export interface XYSceneConfig {
|
|
44
|
+
chartType: string;
|
|
45
|
+
curve?: CurveType;
|
|
46
|
+
colorScheme?: string | string[];
|
|
47
|
+
normalize?: boolean;
|
|
48
|
+
gradientFill?: boolean | {
|
|
49
|
+
topOpacity?: number;
|
|
50
|
+
bottomOpacity?: number;
|
|
51
|
+
};
|
|
52
|
+
annotations?: Record<string, any>[];
|
|
53
|
+
pointStyle?: (d: any) => Style & {
|
|
54
|
+
r?: number;
|
|
55
|
+
};
|
|
56
|
+
sizeRange?: [number, number];
|
|
57
|
+
xAccessor?: string | ((d: any) => any);
|
|
58
|
+
yAccessor?: string | ((d: any) => any);
|
|
59
|
+
valueAccessor?: string | ((d: any) => any);
|
|
60
|
+
heatmapAggregation?: "count" | "sum" | "mean";
|
|
61
|
+
heatmapXBins?: number;
|
|
62
|
+
heatmapYBins?: number;
|
|
63
|
+
showValues?: boolean;
|
|
64
|
+
heatmapValueFormat?: (v: number) => string;
|
|
65
|
+
binSize?: number;
|
|
66
|
+
barColors?: Record<string, string>;
|
|
67
|
+
swarmStyle?: {
|
|
68
|
+
radius?: number;
|
|
69
|
+
fill?: string;
|
|
70
|
+
opacity?: number;
|
|
71
|
+
stroke?: string;
|
|
72
|
+
strokeWidth?: number;
|
|
73
|
+
};
|
|
74
|
+
waterfallStyle?: {
|
|
75
|
+
positiveColor?: string;
|
|
76
|
+
negativeColor?: string;
|
|
77
|
+
gap?: number;
|
|
78
|
+
stroke?: string;
|
|
79
|
+
strokeWidth?: number;
|
|
80
|
+
connectorStroke?: string;
|
|
81
|
+
connectorWidth?: number;
|
|
82
|
+
};
|
|
83
|
+
candlestickStyle?: {
|
|
84
|
+
upColor?: string;
|
|
85
|
+
downColor?: string;
|
|
86
|
+
wickColor?: string;
|
|
87
|
+
wickWidth?: number;
|
|
88
|
+
bodyWidth?: number;
|
|
89
|
+
};
|
|
90
|
+
boundsStyle?: Style | ((d: any, group: string) => Style);
|
|
91
|
+
lineStyle?: Style | ((d: any, group: string) => Style);
|
|
92
|
+
areaStyle?: (d: any) => Style;
|
|
93
|
+
}
|