polly-graph 0.1.0
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/LICENSE +21 -0
- package/README.md +217 -0
- package/dist/index.cjs +4548 -0
- package/dist/index.css +76 -0
- package/dist/index.d.cts +97 -0
- package/dist/index.d.ts +97 -0
- package/dist/index.js +4521 -0
- package/package.json +75 -0
package/dist/index.css
ADDED
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
/* src/styles/graph-tooltip.css */
|
|
2
|
+
.graph-tooltip {
|
|
3
|
+
position: absolute;
|
|
4
|
+
pointer-events: none;
|
|
5
|
+
z-index: 1000;
|
|
6
|
+
min-width: 160px;
|
|
7
|
+
max-width: 280px;
|
|
8
|
+
border-radius: 10px;
|
|
9
|
+
background: #0f172a;
|
|
10
|
+
color: #f8fafc;
|
|
11
|
+
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
12
|
+
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
|
|
13
|
+
font-size: 12px;
|
|
14
|
+
line-height: 1.5;
|
|
15
|
+
opacity: 0;
|
|
16
|
+
transform: translateY(4px);
|
|
17
|
+
transition: opacity 120ms ease, transform 120ms ease;
|
|
18
|
+
}
|
|
19
|
+
.graph-tooltip--visible {
|
|
20
|
+
opacity: 1;
|
|
21
|
+
transform: translateY(0);
|
|
22
|
+
}
|
|
23
|
+
.graph-tooltip__content {
|
|
24
|
+
position: relative;
|
|
25
|
+
z-index: 2;
|
|
26
|
+
padding: 10px 14px;
|
|
27
|
+
}
|
|
28
|
+
.graph-tooltip__arrow {
|
|
29
|
+
position: absolute;
|
|
30
|
+
width: 12px;
|
|
31
|
+
height: 12px;
|
|
32
|
+
background: #0f172a;
|
|
33
|
+
transform: rotate(45deg);
|
|
34
|
+
z-index: 1;
|
|
35
|
+
}
|
|
36
|
+
.graph-tooltip__arrow--top {
|
|
37
|
+
left: 50%;
|
|
38
|
+
bottom: -6px;
|
|
39
|
+
transform: translateX(-50%) rotate(45deg);
|
|
40
|
+
border-right: 1px solid rgba(255, 255, 255, 0.08);
|
|
41
|
+
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
|
42
|
+
}
|
|
43
|
+
.graph-tooltip__arrow--bottom {
|
|
44
|
+
left: 50%;
|
|
45
|
+
top: -6px;
|
|
46
|
+
transform: translateX(-50%) rotate(45deg);
|
|
47
|
+
border-left: 1px solid rgba(255, 255, 255, 0.08);
|
|
48
|
+
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
|
49
|
+
}
|
|
50
|
+
.graph-tooltip__arrow--left {
|
|
51
|
+
top: 50%;
|
|
52
|
+
right: -6px;
|
|
53
|
+
transform: translateY(-50%) rotate(45deg);
|
|
54
|
+
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
|
55
|
+
border-right: 1px solid rgba(255, 255, 255, 0.08);
|
|
56
|
+
}
|
|
57
|
+
.graph-tooltip__arrow--right {
|
|
58
|
+
top: 50%;
|
|
59
|
+
left: -6px;
|
|
60
|
+
transform: translateY(-50%) rotate(45deg);
|
|
61
|
+
border-left: 1px solid rgba(255, 255, 255, 0.08);
|
|
62
|
+
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
|
63
|
+
}
|
|
64
|
+
.graph-tooltip__type {
|
|
65
|
+
font-size: 11px;
|
|
66
|
+
font-weight: 600;
|
|
67
|
+
color: #94a3b8;
|
|
68
|
+
text-transform: uppercase;
|
|
69
|
+
letter-spacing: 0.04em;
|
|
70
|
+
}
|
|
71
|
+
.graph-tooltip__label {
|
|
72
|
+
margin-top: 4px;
|
|
73
|
+
font-size: 14px;
|
|
74
|
+
font-weight: 600;
|
|
75
|
+
color: #ffffff;
|
|
76
|
+
}
|
package/dist/index.d.cts
ADDED
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
import { SimulationNodeDatum, SimulationLinkDatum } from 'd3-force';
|
|
2
|
+
|
|
3
|
+
interface GraphNode extends SimulationNodeDatum {
|
|
4
|
+
readonly id: string;
|
|
5
|
+
readonly type: string;
|
|
6
|
+
readonly label?: string;
|
|
7
|
+
readonly tooltip?: string;
|
|
8
|
+
readonly style?: NodeStyle;
|
|
9
|
+
}
|
|
10
|
+
interface GraphLink extends SimulationLinkDatum<GraphNode> {
|
|
11
|
+
readonly source: string | GraphNode;
|
|
12
|
+
readonly target: string | GraphNode;
|
|
13
|
+
readonly label?: string;
|
|
14
|
+
readonly tooltip?: string;
|
|
15
|
+
readonly style?: LinkStyle;
|
|
16
|
+
}
|
|
17
|
+
interface NodeStyle {
|
|
18
|
+
readonly radius?: number;
|
|
19
|
+
readonly fill?: string;
|
|
20
|
+
readonly stroke?: string;
|
|
21
|
+
readonly strokeWidth?: number;
|
|
22
|
+
readonly opacity?: number;
|
|
23
|
+
readonly textColor?: string;
|
|
24
|
+
}
|
|
25
|
+
interface LinkArrowStyle {
|
|
26
|
+
readonly enabled?: boolean;
|
|
27
|
+
readonly size?: number;
|
|
28
|
+
readonly fill?: string;
|
|
29
|
+
}
|
|
30
|
+
interface LinkLabelStyle {
|
|
31
|
+
readonly enabled?: boolean;
|
|
32
|
+
readonly backgroundFill?: string;
|
|
33
|
+
readonly borderColor?: string;
|
|
34
|
+
readonly borderWidth?: number;
|
|
35
|
+
readonly borderRadius?: number;
|
|
36
|
+
readonly textColor?: string;
|
|
37
|
+
readonly fontSize?: number;
|
|
38
|
+
readonly paddingX?: number;
|
|
39
|
+
readonly paddingY?: number;
|
|
40
|
+
readonly height?: number;
|
|
41
|
+
}
|
|
42
|
+
interface LinkStyle {
|
|
43
|
+
readonly stroke?: string;
|
|
44
|
+
readonly strokeWidth?: number;
|
|
45
|
+
readonly opacity?: number;
|
|
46
|
+
readonly dashArray?: string;
|
|
47
|
+
readonly arrow?: LinkArrowStyle;
|
|
48
|
+
readonly label?: LinkLabelStyle;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
type GraphTooltipTheme = 'dark' | 'light';
|
|
52
|
+
type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right' | 'auto';
|
|
53
|
+
interface TooltipInteractionConfig {
|
|
54
|
+
readonly enabled?: boolean;
|
|
55
|
+
readonly theme?: GraphTooltipTheme;
|
|
56
|
+
readonly placement?: TooltipPlacement;
|
|
57
|
+
readonly renderContent?: (node: GraphNode) => string;
|
|
58
|
+
}
|
|
59
|
+
interface HoverInteractionConfig {
|
|
60
|
+
readonly enabled?: boolean;
|
|
61
|
+
readonly tooltip?: TooltipInteractionConfig;
|
|
62
|
+
readonly nodeStyle?: Partial<NodeStyle>;
|
|
63
|
+
readonly linkStyle?: Partial<LinkStyle>;
|
|
64
|
+
}
|
|
65
|
+
interface SelectionInteractionConfig {
|
|
66
|
+
readonly enabled?: boolean;
|
|
67
|
+
readonly multiSelect?: boolean;
|
|
68
|
+
readonly nodeStyle?: Partial<NodeStyle>;
|
|
69
|
+
readonly linkStyle?: Partial<LinkStyle>;
|
|
70
|
+
}
|
|
71
|
+
interface DragInteractionConfig {
|
|
72
|
+
readonly enabled?: boolean;
|
|
73
|
+
}
|
|
74
|
+
interface GraphInteractionConfig {
|
|
75
|
+
readonly drag?: DragInteractionConfig;
|
|
76
|
+
readonly hover?: HoverInteractionConfig;
|
|
77
|
+
readonly selection?: SelectionInteractionConfig;
|
|
78
|
+
}
|
|
79
|
+
interface GraphConfig {
|
|
80
|
+
readonly container: SVGSVGElement;
|
|
81
|
+
readonly nodes: GraphNode[];
|
|
82
|
+
readonly links: GraphLink[];
|
|
83
|
+
readonly interaction?: GraphInteractionConfig;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
interface GraphInstance {
|
|
87
|
+
render(): void;
|
|
88
|
+
zoomIn(): void;
|
|
89
|
+
zoomOut(): void;
|
|
90
|
+
resetView(): void;
|
|
91
|
+
fitView(): void;
|
|
92
|
+
destroy(): void;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
declare function createGraph(config: GraphConfig): GraphInstance;
|
|
96
|
+
|
|
97
|
+
export { type GraphConfig, type GraphInstance, type GraphInteractionConfig, type GraphLink, type GraphNode, createGraph };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
import { SimulationNodeDatum, SimulationLinkDatum } from 'd3-force';
|
|
2
|
+
|
|
3
|
+
interface GraphNode extends SimulationNodeDatum {
|
|
4
|
+
readonly id: string;
|
|
5
|
+
readonly type: string;
|
|
6
|
+
readonly label?: string;
|
|
7
|
+
readonly tooltip?: string;
|
|
8
|
+
readonly style?: NodeStyle;
|
|
9
|
+
}
|
|
10
|
+
interface GraphLink extends SimulationLinkDatum<GraphNode> {
|
|
11
|
+
readonly source: string | GraphNode;
|
|
12
|
+
readonly target: string | GraphNode;
|
|
13
|
+
readonly label?: string;
|
|
14
|
+
readonly tooltip?: string;
|
|
15
|
+
readonly style?: LinkStyle;
|
|
16
|
+
}
|
|
17
|
+
interface NodeStyle {
|
|
18
|
+
readonly radius?: number;
|
|
19
|
+
readonly fill?: string;
|
|
20
|
+
readonly stroke?: string;
|
|
21
|
+
readonly strokeWidth?: number;
|
|
22
|
+
readonly opacity?: number;
|
|
23
|
+
readonly textColor?: string;
|
|
24
|
+
}
|
|
25
|
+
interface LinkArrowStyle {
|
|
26
|
+
readonly enabled?: boolean;
|
|
27
|
+
readonly size?: number;
|
|
28
|
+
readonly fill?: string;
|
|
29
|
+
}
|
|
30
|
+
interface LinkLabelStyle {
|
|
31
|
+
readonly enabled?: boolean;
|
|
32
|
+
readonly backgroundFill?: string;
|
|
33
|
+
readonly borderColor?: string;
|
|
34
|
+
readonly borderWidth?: number;
|
|
35
|
+
readonly borderRadius?: number;
|
|
36
|
+
readonly textColor?: string;
|
|
37
|
+
readonly fontSize?: number;
|
|
38
|
+
readonly paddingX?: number;
|
|
39
|
+
readonly paddingY?: number;
|
|
40
|
+
readonly height?: number;
|
|
41
|
+
}
|
|
42
|
+
interface LinkStyle {
|
|
43
|
+
readonly stroke?: string;
|
|
44
|
+
readonly strokeWidth?: number;
|
|
45
|
+
readonly opacity?: number;
|
|
46
|
+
readonly dashArray?: string;
|
|
47
|
+
readonly arrow?: LinkArrowStyle;
|
|
48
|
+
readonly label?: LinkLabelStyle;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
type GraphTooltipTheme = 'dark' | 'light';
|
|
52
|
+
type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right' | 'auto';
|
|
53
|
+
interface TooltipInteractionConfig {
|
|
54
|
+
readonly enabled?: boolean;
|
|
55
|
+
readonly theme?: GraphTooltipTheme;
|
|
56
|
+
readonly placement?: TooltipPlacement;
|
|
57
|
+
readonly renderContent?: (node: GraphNode) => string;
|
|
58
|
+
}
|
|
59
|
+
interface HoverInteractionConfig {
|
|
60
|
+
readonly enabled?: boolean;
|
|
61
|
+
readonly tooltip?: TooltipInteractionConfig;
|
|
62
|
+
readonly nodeStyle?: Partial<NodeStyle>;
|
|
63
|
+
readonly linkStyle?: Partial<LinkStyle>;
|
|
64
|
+
}
|
|
65
|
+
interface SelectionInteractionConfig {
|
|
66
|
+
readonly enabled?: boolean;
|
|
67
|
+
readonly multiSelect?: boolean;
|
|
68
|
+
readonly nodeStyle?: Partial<NodeStyle>;
|
|
69
|
+
readonly linkStyle?: Partial<LinkStyle>;
|
|
70
|
+
}
|
|
71
|
+
interface DragInteractionConfig {
|
|
72
|
+
readonly enabled?: boolean;
|
|
73
|
+
}
|
|
74
|
+
interface GraphInteractionConfig {
|
|
75
|
+
readonly drag?: DragInteractionConfig;
|
|
76
|
+
readonly hover?: HoverInteractionConfig;
|
|
77
|
+
readonly selection?: SelectionInteractionConfig;
|
|
78
|
+
}
|
|
79
|
+
interface GraphConfig {
|
|
80
|
+
readonly container: SVGSVGElement;
|
|
81
|
+
readonly nodes: GraphNode[];
|
|
82
|
+
readonly links: GraphLink[];
|
|
83
|
+
readonly interaction?: GraphInteractionConfig;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
interface GraphInstance {
|
|
87
|
+
render(): void;
|
|
88
|
+
zoomIn(): void;
|
|
89
|
+
zoomOut(): void;
|
|
90
|
+
resetView(): void;
|
|
91
|
+
fitView(): void;
|
|
92
|
+
destroy(): void;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
declare function createGraph(config: GraphConfig): GraphInstance;
|
|
96
|
+
|
|
97
|
+
export { type GraphConfig, type GraphInstance, type GraphInteractionConfig, type GraphLink, type GraphNode, createGraph };
|