@enact-ui/charts 0.1.0 → 0.2.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/api-schema.json +169 -0
- package/dist/__tests__/recharts-mock.d.ts +2 -0
- package/dist/__tests__/recharts-mock.d.ts.map +1 -0
- package/dist/__tests__/recharts-mock.js +19 -0
- package/dist/__tests__/recharts-mock.js.map +1 -0
- package/dist/__tests__/test-utils.d.ts +76 -0
- package/dist/__tests__/test-utils.d.ts.map +1 -0
- package/dist/__tests__/test-utils.js +89 -0
- package/dist/__tests__/test-utils.js.map +1 -0
- package/dist/components/activity-gauges.demo.d.ts +5 -0
- package/dist/components/activity-gauges.demo.d.ts.map +1 -1
- package/dist/components/activity-gauges.demo.js +25 -11
- package/dist/components/activity-gauges.demo.js.map +1 -1
- package/dist/components/activity-gauges.story.d.ts +6 -22
- package/dist/components/activity-gauges.story.d.ts.map +1 -1
- package/dist/components/activity-gauges.story.js +19 -11
- package/dist/components/activity-gauges.story.js.map +1 -1
- package/dist/components/bar-charts.demo.d.ts +6 -0
- package/dist/components/bar-charts.demo.d.ts.map +1 -1
- package/dist/components/bar-charts.demo.js +24 -11
- package/dist/components/bar-charts.demo.js.map +1 -1
- package/dist/components/bar-charts.story.d.ts +6 -18
- package/dist/components/bar-charts.story.d.ts.map +1 -1
- package/dist/components/bar-charts.story.js +19 -9
- package/dist/components/bar-charts.story.js.map +1 -1
- package/dist/components/charts-base.d.ts +0 -8
- package/dist/components/charts-base.d.ts.map +1 -1
- package/dist/components/charts-base.js +2 -28
- package/dist/components/charts-base.js.map +1 -1
- package/dist/components/line-charts.demo.d.ts +6 -0
- package/dist/components/line-charts.demo.d.ts.map +1 -1
- package/dist/components/line-charts.demo.js +32 -18
- package/dist/components/line-charts.demo.js.map +1 -1
- package/dist/components/line-charts.story.d.ts +6 -22
- package/dist/components/line-charts.story.d.ts.map +1 -1
- package/dist/components/line-charts.story.js +19 -11
- package/dist/components/line-charts.story.js.map +1 -1
- package/dist/components/pie-charts.demo.d.ts +5 -0
- package/dist/components/pie-charts.demo.d.ts.map +1 -1
- package/dist/components/pie-charts.demo.js +20 -4
- package/dist/components/pie-charts.demo.js.map +1 -1
- package/dist/components/pie-charts.story.d.ts +6 -26
- package/dist/components/pie-charts.story.d.ts.map +1 -1
- package/dist/components/pie-charts.story.js +19 -13
- package/dist/components/pie-charts.story.js.map +1 -1
- package/dist/components/progress-circles.demo.d.ts +7 -0
- package/dist/components/progress-circles.demo.d.ts.map +1 -1
- package/dist/components/progress-circles.demo.js +11 -6
- package/dist/components/progress-circles.demo.js.map +1 -1
- package/dist/components/progress-circles.story.d.ts +6 -38
- package/dist/components/progress-circles.story.d.ts.map +1 -1
- package/dist/components/progress-circles.story.js +23 -19
- package/dist/components/progress-circles.story.js.map +1 -1
- package/dist/components/radar-charts.demo.d.ts +6 -3
- package/dist/components/radar-charts.demo.d.ts.map +1 -1
- package/dist/components/radar-charts.demo.js +18 -10
- package/dist/components/radar-charts.demo.js.map +1 -1
- package/dist/components/radar-charts.story.d.ts +6 -10
- package/dist/components/radar-charts.story.d.ts.map +1 -1
- package/dist/components/radar-charts.story.js +10 -5
- package/dist/components/radar-charts.story.js.map +1 -1
- package/dist/components/relationship-graph.d.ts +64 -0
- package/dist/components/relationship-graph.d.ts.map +1 -0
- package/dist/components/relationship-graph.demo.d.ts +2 -0
- package/dist/components/relationship-graph.demo.d.ts.map +1 -0
- package/dist/components/relationship-graph.demo.js +61 -0
- package/dist/components/relationship-graph.demo.js.map +1 -0
- package/dist/components/relationship-graph.js +381 -0
- package/dist/components/relationship-graph.js.map +1 -0
- package/dist/components/relationship-graph.story.d.ts +6 -0
- package/dist/components/relationship-graph.story.d.ts.map +1 -0
- package/dist/components/relationship-graph.story.js +13 -0
- package/dist/components/relationship-graph.story.js.map +1 -0
- package/dist/components/trend-indicator.d.ts +40 -0
- package/dist/components/trend-indicator.d.ts.map +1 -0
- package/dist/components/trend-indicator.demo.d.ts +2 -0
- package/dist/components/trend-indicator.demo.d.ts.map +1 -0
- package/dist/components/trend-indicator.demo.js +7 -0
- package/dist/components/trend-indicator.demo.js.map +1 -0
- package/dist/components/trend-indicator.js +50 -0
- package/dist/components/trend-indicator.js.map +1 -0
- package/dist/components/trend-indicator.story.d.ts +6 -0
- package/dist/components/trend-indicator.story.d.ts.map +1 -0
- package/dist/components/trend-indicator.story.js +13 -0
- package/dist/components/trend-indicator.story.js.map +1 -0
- package/dist/index.d.ts +9 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1852 -9
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1837 -9
- package/dist/index.mjs.map +1 -1
- package/dist/utils/chart-utils.d.ts +9 -0
- package/dist/utils/chart-utils.d.ts.map +1 -0
- package/dist/utils/chart-utils.js +26 -0
- package/dist/utils/chart-utils.js.map +1 -0
- package/package.json +8 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radar-charts.demo.js","sourceRoot":"","sources":["../../src/components/radar-charts.demo.tsx"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"radar-charts.demo.js","sourceRoot":"","sources":["../../src/components/radar-charts.demo.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,11 +1,7 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
declare const
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
export
|
|
7
|
-
export declare const RadarChart: {
|
|
8
|
-
(): import("react/jsx-runtime").JSX.Element;
|
|
9
|
-
storyName: string;
|
|
10
|
-
};
|
|
1
|
+
import type { Meta, StoryObj } from "@storybook/react";
|
|
2
|
+
declare const meta: Meta;
|
|
3
|
+
export default meta;
|
|
4
|
+
type Story = StoryObj<typeof meta>;
|
|
5
|
+
export declare const Playground: Story;
|
|
6
|
+
export declare const Variations: Story;
|
|
11
7
|
//# sourceMappingURL=radar-charts.story.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radar-charts.story.d.ts","sourceRoot":"","sources":["../../src/components/radar-charts.story.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC
|
|
1
|
+
{"version":3,"file":"radar-charts.story.d.ts","sourceRoot":"","sources":["../../src/components/radar-charts.story.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAIvD,QAAA,MAAM,IAAI,EAAE,IAWX,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,UAAU,EAAE,KAMxB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAMxB,CAAC"}
|
|
@@ -1,11 +1,16 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import * as Charts from "./radar-charts.demo";
|
|
3
|
-
|
|
4
|
-
title: "
|
|
3
|
+
const meta = {
|
|
4
|
+
title: "Charts/Radar Charts",
|
|
5
5
|
decorators: [
|
|
6
|
-
(Story) => (_jsx("div", { className: "bg-base flex min-h-screen items-center justify-center
|
|
6
|
+
(Story) => (_jsx("div", { className: "bg-surface-base flex min-h-screen items-center justify-center p-8", children: _jsx("div", { className: "flex w-full items-center justify-center", children: _jsx(Story, {}) }) })),
|
|
7
7
|
],
|
|
8
8
|
};
|
|
9
|
-
export
|
|
10
|
-
|
|
9
|
+
export default meta;
|
|
10
|
+
export const Playground = {
|
|
11
|
+
render: () => (_jsx("div", { className: "w-full max-w-5xl", children: _jsx(Charts.RadarChartPlayground, {}) })),
|
|
12
|
+
};
|
|
13
|
+
export const Variations = {
|
|
14
|
+
render: () => (_jsx("div", { className: "w-full max-w-5xl", children: _jsx(Charts.RadarChartVariations, {}) })),
|
|
15
|
+
};
|
|
11
16
|
//# sourceMappingURL=radar-charts.story.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radar-charts.story.js","sourceRoot":"","sources":["../../src/components/radar-charts.story.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"radar-charts.story.js","sourceRoot":"","sources":["../../src/components/radar-charts.story.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,MAAM,MAAM,qBAAqB,CAAC;AAE9C,MAAM,IAAI,GAAS;IACf,KAAK,EAAE,qBAAqB;IAC5B,UAAU,EAAE;QACR,CAAC,KAAyB,EAAE,EAAE,CAAC,CAC3B,cAAK,SAAS,EAAC,mEAAmE,YAC9E,cAAK,SAAS,EAAC,yCAAyC,YACpD,KAAC,KAAK,KAAG,GACP,GACJ,CACT;KACJ;CACJ,CAAC;AAEF,eAAe,IAAI,CAAC;AAGpB,MAAM,CAAC,MAAM,UAAU,GAAU;IAC7B,MAAM,EAAE,GAAG,EAAE,CAAC,CACV,cAAK,SAAS,EAAC,kBAAkB,YAC7B,KAAC,MAAM,CAAC,oBAAoB,KAAG,GAC7B,CACT;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAU;IAC7B,MAAM,EAAE,GAAG,EAAE,CAAC,CACV,cAAK,SAAS,EAAC,kBAAkB,YAC7B,KAAC,MAAM,CAAC,oBAAoB,KAAG,GAC7B,CACT;CACJ,CAAC"}
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Node in the relationship graph
|
|
3
|
+
*/
|
|
4
|
+
export interface GraphNode {
|
|
5
|
+
id: string;
|
|
6
|
+
type: string;
|
|
7
|
+
label: string;
|
|
8
|
+
metadata?: Record<string, string>;
|
|
9
|
+
isRoot?: boolean;
|
|
10
|
+
color?: string;
|
|
11
|
+
icon?: string;
|
|
12
|
+
}
|
|
13
|
+
/**
|
|
14
|
+
* Edge connecting two nodes
|
|
15
|
+
*/
|
|
16
|
+
export interface GraphEdge {
|
|
17
|
+
id: string;
|
|
18
|
+
source: string;
|
|
19
|
+
target: string;
|
|
20
|
+
label?: string;
|
|
21
|
+
type?: "default" | "dashed" | "dotted";
|
|
22
|
+
color?: string;
|
|
23
|
+
strength?: number;
|
|
24
|
+
}
|
|
25
|
+
/**
|
|
26
|
+
* Props for RelationshipGraph component
|
|
27
|
+
*/
|
|
28
|
+
export interface RelationshipGraphProps {
|
|
29
|
+
nodes: GraphNode[];
|
|
30
|
+
edges: GraphEdge[];
|
|
31
|
+
onNodeClick?: (node: GraphNode) => void;
|
|
32
|
+
onEdgeClick?: (edge: GraphEdge) => void;
|
|
33
|
+
width?: number;
|
|
34
|
+
height?: number;
|
|
35
|
+
animate?: boolean;
|
|
36
|
+
layout?: "force" | "hierarchical" | "radial";
|
|
37
|
+
className?: string;
|
|
38
|
+
showLabels?: boolean;
|
|
39
|
+
showLegend?: boolean;
|
|
40
|
+
interactive?: boolean;
|
|
41
|
+
highlightNode?: string | undefined;
|
|
42
|
+
/** Custom colors for node types */
|
|
43
|
+
typeColors?: Record<string, string>;
|
|
44
|
+
}
|
|
45
|
+
/**
|
|
46
|
+
* RelationshipGraph - Visualizes relationships between entities using an interactive SVG graph.
|
|
47
|
+
* Supports force-directed, hierarchical, and radial layouts.
|
|
48
|
+
*
|
|
49
|
+
* @example
|
|
50
|
+
* ```tsx
|
|
51
|
+
* const nodes = [
|
|
52
|
+
* { id: "1", type: "product", label: "Product A", isRoot: true },
|
|
53
|
+
* { id: "2", type: "ingredient", label: "Ingredient B" },
|
|
54
|
+
* ];
|
|
55
|
+
* const edges = [
|
|
56
|
+
* { id: "e1", source: "1", target: "2", label: "contains" },
|
|
57
|
+
* ];
|
|
58
|
+
*
|
|
59
|
+
* <RelationshipGraph nodes={nodes} edges={edges} layout="force" />
|
|
60
|
+
* ```
|
|
61
|
+
*/
|
|
62
|
+
export declare function RelationshipGraph({ nodes, edges, onNodeClick, onEdgeClick, width, height, animate: _animate, layout, className, showLabels, showLegend, interactive, highlightNode, typeColors, }: RelationshipGraphProps): import("react/jsx-runtime").JSX.Element;
|
|
63
|
+
export default RelationshipGraph;
|
|
64
|
+
//# sourceMappingURL=relationship-graph.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"relationship-graph.d.ts","sourceRoot":"","sources":["../../src/components/relationship-graph.tsx"],"names":[],"mappings":"AAWA;;GAEG;AACH,MAAM,WAAW,SAAS;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAClC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,SAAS;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACnC,KAAK,EAAE,SAAS,EAAE,CAAC;IACnB,KAAK,EAAE,SAAS,EAAE,CAAC;IACnB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACxC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,GAAG,cAAc,GAAG,QAAQ,CAAC;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACnC,mCAAmC;IACnC,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACvC;AAkfD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,iBAAiB,CAAC,EAC9B,KAAK,EACL,KAAK,EACL,WAAW,EACX,WAAW,EACX,KAAW,EACX,MAAY,EACZ,OAAO,EAAE,QAAe,EACxB,MAAgB,EAChB,SAAS,EACT,UAAiB,EACjB,UAAiB,EACjB,WAAkB,EAClB,aAAa,EACb,UAAgC,GACnC,EAAE,sBAAsB,2CAiFxB;AAED,eAAe,iBAAiB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"relationship-graph.demo.d.ts","sourceRoot":"","sources":["../../src/components/relationship-graph.demo.tsx"],"names":[],"mappings":"AA8DA,eAAO,MAAM,qBAAqB,+CA8FjC,CAAC"}
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { useState } from "react";
|
|
4
|
+
import { RelationshipGraph } from "./relationship-graph";
|
|
5
|
+
// Product hierarchy example
|
|
6
|
+
const productNodes = [
|
|
7
|
+
{ id: "prod-1", type: "product", label: "Chocolate Bar 100g", isRoot: true },
|
|
8
|
+
{ id: "ing-1", type: "ingredient", label: "Cocoa Butter" },
|
|
9
|
+
{ id: "ing-2", type: "ingredient", label: "Sugar" },
|
|
10
|
+
{ id: "ing-3", type: "ingredient", label: "Milk Powder" },
|
|
11
|
+
{ id: "plant-1", type: "plant", label: "Factory Berlin" },
|
|
12
|
+
{ id: "plant-2", type: "plant", label: "Factory Munich" },
|
|
13
|
+
{ id: "recipe-1", type: "recipe", label: "Classic Recipe" },
|
|
14
|
+
{ id: "variant-1", type: "variant", label: "Dark 70%" },
|
|
15
|
+
{ id: "variant-2", type: "variant", label: "Milk Classic" },
|
|
16
|
+
];
|
|
17
|
+
const productEdges = [
|
|
18
|
+
{ id: "e1", source: "prod-1", target: "ing-1", label: "contains" },
|
|
19
|
+
{ id: "e2", source: "prod-1", target: "ing-2", label: "contains" },
|
|
20
|
+
{ id: "e3", source: "prod-1", target: "ing-3", label: "contains" },
|
|
21
|
+
{ id: "e4", source: "prod-1", target: "recipe-1", label: "uses" },
|
|
22
|
+
{ id: "e5", source: "prod-1", target: "plant-1", label: "produced at" },
|
|
23
|
+
{ id: "e6", source: "prod-1", target: "plant-2", label: "produced at" },
|
|
24
|
+
{ id: "e7", source: "prod-1", target: "variant-1", label: "variant" },
|
|
25
|
+
{ id: "e8", source: "prod-1", target: "variant-2", label: "variant" },
|
|
26
|
+
{ id: "e9", source: "recipe-1", target: "ing-1", label: "requires", type: "dashed" },
|
|
27
|
+
];
|
|
28
|
+
// Data lineage example
|
|
29
|
+
const lineageNodes = [
|
|
30
|
+
{ id: "field-1", type: "field", label: "Product Name", isRoot: true },
|
|
31
|
+
{ id: "field-2", type: "field", label: "EAN Code" },
|
|
32
|
+
{ id: "field-3", type: "field", label: "Brand Name" },
|
|
33
|
+
{ id: "domain-1", type: "domain", label: "Marketing" },
|
|
34
|
+
{ id: "domain-2", type: "domain", label: "Logistics" },
|
|
35
|
+
{ id: "domain-3", type: "domain", label: "E-Commerce" },
|
|
36
|
+
];
|
|
37
|
+
const lineageEdges = [
|
|
38
|
+
{ id: "l1", source: "field-1", target: "field-2", label: "linked", type: "dashed" },
|
|
39
|
+
{ id: "l2", source: "field-1", target: "field-3", label: "derived" },
|
|
40
|
+
{ id: "l3", source: "field-1", target: "domain-1", label: "used in" },
|
|
41
|
+
{ id: "l4", source: "field-1", target: "domain-2", label: "used in" },
|
|
42
|
+
{ id: "l5", source: "field-1", target: "domain-3", label: "used in" },
|
|
43
|
+
{ id: "l6", source: "field-2", target: "domain-2", label: "used in" },
|
|
44
|
+
];
|
|
45
|
+
// Custom colors
|
|
46
|
+
const customColors = {
|
|
47
|
+
product: "#0EA5E9",
|
|
48
|
+
ingredient: "#10B981",
|
|
49
|
+
plant: "#84CC16",
|
|
50
|
+
recipe: "#F59E0B",
|
|
51
|
+
variant: "#A855F7",
|
|
52
|
+
field: "#6366F1",
|
|
53
|
+
domain: "#EC4899",
|
|
54
|
+
default: "#64748B",
|
|
55
|
+
};
|
|
56
|
+
export const RelationshipGraphDemo = () => {
|
|
57
|
+
const [selectedNode, setSelectedNode] = useState(null);
|
|
58
|
+
const [layout, setLayout] = useState("force");
|
|
59
|
+
return (_jsxs("div", { className: "flex flex-col gap-8 p-6", children: [_jsxs("section", { className: "flex flex-col gap-4", children: [_jsx("h3", { className: "text-lg font-semibold", children: "Layout Options" }), _jsx("div", { className: "flex gap-2", children: ["force", "hierarchical", "radial"].map((l) => (_jsx("button", { type: "button", onClick: () => setLayout(l), className: `rounded-md px-4 py-2 text-sm font-medium transition-colors ${layout === l ? "bg-brand-600 text-white" : "bg-surface-raised text-content-primary hover:bg-surface-raised-hover"}`, children: l.charAt(0).toUpperCase() + l.slice(1) }, l))) })] }), _jsxs("section", { className: "flex flex-col gap-4", children: [_jsx("h3", { className: "text-lg font-semibold", children: "Product Relationships" }), _jsxs("div", { className: "flex gap-6", children: [_jsx(RelationshipGraph, { nodes: productNodes, edges: productEdges, layout: layout, width: 600, height: 450, onNodeClick: setSelectedNode, typeColors: customColors, highlightNode: selectedNode?.id }), _jsxs("div", { className: "bg-surface-raised w-64 rounded-lg border p-4", children: [_jsx("h4", { className: "mb-2 font-medium", children: "Selected Node" }), selectedNode ? (_jsxs("div", { className: "text-sm", children: [_jsxs("p", { children: [_jsx("strong", { children: "Label:" }), " ", selectedNode.label] }), _jsxs("p", { children: [_jsx("strong", { children: "Type:" }), " ", selectedNode.type] }), _jsxs("p", { children: [_jsx("strong", { children: "ID:" }), " ", selectedNode.id] })] })) : (_jsx("p", { className: "text-content-tertiary text-sm", children: "Click a node to select" }))] })] })] }), _jsxs("section", { className: "flex flex-col gap-4", children: [_jsx("h3", { className: "text-lg font-semibold", children: "Data Lineage (Radial)" }), _jsx(RelationshipGraph, { nodes: lineageNodes, edges: lineageEdges, layout: "radial", width: 500, height: 400, typeColors: customColors })] }), _jsxs("section", { className: "flex flex-col gap-4", children: [_jsx("h3", { className: "text-lg font-semibold", children: "Hierarchical View" }), _jsx(RelationshipGraph, { nodes: productNodes.slice(0, 5), edges: productEdges.slice(0, 4), layout: "hierarchical", width: 500, height: 350, typeColors: customColors })] }), _jsxs("section", { className: "flex flex-col gap-4", children: [_jsx("h3", { className: "text-lg font-semibold", children: "Compact (No Labels)" }), _jsx(RelationshipGraph, { nodes: productNodes, edges: productEdges, layout: "force", width: 400, height: 300, showLabels: false, typeColors: customColors })] })] }));
|
|
60
|
+
};
|
|
61
|
+
//# sourceMappingURL=relationship-graph.demo.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"relationship-graph.demo.js","sourceRoot":"","sources":["../../src/components/relationship-graph.demo.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,381 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { cx } from "@enact-ui/react";
|
|
4
|
+
import { AnimatePresence, motion } from "framer-motion";
|
|
5
|
+
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
6
|
+
// Default type colors
|
|
7
|
+
const DEFAULT_TYPE_COLORS = {
|
|
8
|
+
product: "#0284C7",
|
|
9
|
+
ingredient: "#059669",
|
|
10
|
+
plant: "#65A30D",
|
|
11
|
+
recipe: "#F59E0B",
|
|
12
|
+
variant: "#8B5CF6",
|
|
13
|
+
field: "#6366F1",
|
|
14
|
+
domain: "#EC4899",
|
|
15
|
+
default: "#6B7280",
|
|
16
|
+
};
|
|
17
|
+
// Edge type styles
|
|
18
|
+
const EDGE_STYLES = {
|
|
19
|
+
default: {},
|
|
20
|
+
dashed: { dashArray: "4,4" },
|
|
21
|
+
dotted: { dashArray: "2,2" },
|
|
22
|
+
};
|
|
23
|
+
// =============================================================================
|
|
24
|
+
// Layout Algorithms
|
|
25
|
+
// =============================================================================
|
|
26
|
+
/**
|
|
27
|
+
* Simple force-directed layout algorithm
|
|
28
|
+
*/
|
|
29
|
+
function useForceLayout(nodes, edges, width, height) {
|
|
30
|
+
const [positionedNodes, setPositionedNodes] = useState([]);
|
|
31
|
+
useEffect(() => {
|
|
32
|
+
if (nodes.length === 0)
|
|
33
|
+
return;
|
|
34
|
+
const centerX = width / 2;
|
|
35
|
+
const centerY = height / 2;
|
|
36
|
+
const radius = Math.min(width, height) * 0.35;
|
|
37
|
+
const positioned = nodes.map((node, i) => {
|
|
38
|
+
const angle = (2 * Math.PI * i) / nodes.length;
|
|
39
|
+
return {
|
|
40
|
+
...node,
|
|
41
|
+
x: node.isRoot ? centerX : centerX + radius * Math.cos(angle),
|
|
42
|
+
y: node.isRoot ? centerY : centerY + radius * Math.sin(angle),
|
|
43
|
+
vx: 0,
|
|
44
|
+
vy: 0,
|
|
45
|
+
};
|
|
46
|
+
});
|
|
47
|
+
// Run force simulation
|
|
48
|
+
const iterations = 50;
|
|
49
|
+
const repulsion = 5000;
|
|
50
|
+
const attraction = 0.05;
|
|
51
|
+
const damping = 0.9;
|
|
52
|
+
const centerForce = 0.01;
|
|
53
|
+
for (let iter = 0; iter < iterations; iter++) {
|
|
54
|
+
for (let i = 0; i < positioned.length; i++) {
|
|
55
|
+
const node = positioned[i];
|
|
56
|
+
if (!node)
|
|
57
|
+
continue;
|
|
58
|
+
// Repulsion from other nodes
|
|
59
|
+
for (let j = 0; j < positioned.length; j++) {
|
|
60
|
+
if (i === j)
|
|
61
|
+
continue;
|
|
62
|
+
const other = positioned[j];
|
|
63
|
+
if (!other)
|
|
64
|
+
continue;
|
|
65
|
+
const dx = node.x - other.x;
|
|
66
|
+
const dy = node.y - other.y;
|
|
67
|
+
const dist = Math.sqrt(dx * dx + dy * dy) || 1;
|
|
68
|
+
const force = repulsion / (dist * dist);
|
|
69
|
+
node.vx += (dx / dist) * force;
|
|
70
|
+
node.vy += (dy / dist) * force;
|
|
71
|
+
}
|
|
72
|
+
// Attraction along edges
|
|
73
|
+
edges.forEach((edge) => {
|
|
74
|
+
if (edge.source === node.id || edge.target === node.id) {
|
|
75
|
+
const otherId = edge.source === node.id ? edge.target : edge.source;
|
|
76
|
+
const other = positioned.find((n) => n.id === otherId);
|
|
77
|
+
if (other) {
|
|
78
|
+
const dx = other.x - node.x;
|
|
79
|
+
const dy = other.y - node.y;
|
|
80
|
+
node.vx += dx * attraction;
|
|
81
|
+
node.vy += dy * attraction;
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
});
|
|
85
|
+
// Center gravity
|
|
86
|
+
node.vx += (centerX - node.x) * centerForce;
|
|
87
|
+
node.vy += (centerY - node.y) * centerForce;
|
|
88
|
+
// Keep root node centered
|
|
89
|
+
if (node.isRoot) {
|
|
90
|
+
node.vx = (centerX - node.x) * 0.5;
|
|
91
|
+
node.vy = (centerY - node.y) * 0.5;
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
// Apply velocities and damping
|
|
95
|
+
for (const node of positioned) {
|
|
96
|
+
node.x += node.vx;
|
|
97
|
+
node.y += node.vy;
|
|
98
|
+
node.vx *= damping;
|
|
99
|
+
node.vy *= damping;
|
|
100
|
+
// Bounds
|
|
101
|
+
const padding = 60;
|
|
102
|
+
node.x = Math.max(padding, Math.min(width - padding, node.x));
|
|
103
|
+
node.y = Math.max(padding, Math.min(height - padding, node.y));
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
setPositionedNodes(positioned);
|
|
107
|
+
}, [nodes, edges, width, height]);
|
|
108
|
+
const positionedEdges = useMemo(() => {
|
|
109
|
+
return edges
|
|
110
|
+
.map((edge) => {
|
|
111
|
+
const sourceNode = positionedNodes.find((n) => n.id === edge.source);
|
|
112
|
+
const targetNode = positionedNodes.find((n) => n.id === edge.target);
|
|
113
|
+
if (!sourceNode || !targetNode)
|
|
114
|
+
return null;
|
|
115
|
+
return { ...edge, sourceNode, targetNode };
|
|
116
|
+
})
|
|
117
|
+
.filter(Boolean);
|
|
118
|
+
}, [edges, positionedNodes]);
|
|
119
|
+
return { positionedNodes, positionedEdges };
|
|
120
|
+
}
|
|
121
|
+
/**
|
|
122
|
+
* Hierarchical layout algorithm
|
|
123
|
+
*/
|
|
124
|
+
function useHierarchicalLayout(nodes, edges, width, height) {
|
|
125
|
+
const positionedNodes = useMemo(() => {
|
|
126
|
+
if (nodes.length === 0)
|
|
127
|
+
return [];
|
|
128
|
+
const rootNode = nodes.find((n) => n.isRoot) || nodes[0];
|
|
129
|
+
if (!rootNode)
|
|
130
|
+
return [];
|
|
131
|
+
const children = {};
|
|
132
|
+
nodes.forEach((n) => {
|
|
133
|
+
children[n.id] = [];
|
|
134
|
+
});
|
|
135
|
+
edges.forEach((edge) => {
|
|
136
|
+
const sourceChildren = children[edge.source];
|
|
137
|
+
if (sourceChildren)
|
|
138
|
+
sourceChildren.push(edge.target);
|
|
139
|
+
});
|
|
140
|
+
// BFS to assign levels
|
|
141
|
+
const levels = { [rootNode.id]: 0 };
|
|
142
|
+
const queue = [rootNode.id];
|
|
143
|
+
const visited = new Set([rootNode.id]);
|
|
144
|
+
while (queue.length > 0) {
|
|
145
|
+
const current = queue.shift();
|
|
146
|
+
if (current === undefined)
|
|
147
|
+
break;
|
|
148
|
+
const currentLevel = levels[current];
|
|
149
|
+
if (currentLevel !== undefined) {
|
|
150
|
+
children[current]?.forEach((childId) => {
|
|
151
|
+
if (!visited.has(childId)) {
|
|
152
|
+
visited.add(childId);
|
|
153
|
+
levels[childId] = currentLevel + 1;
|
|
154
|
+
queue.push(childId);
|
|
155
|
+
}
|
|
156
|
+
});
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
// Handle disconnected nodes
|
|
160
|
+
nodes.forEach((n) => {
|
|
161
|
+
if (levels[n.id] === undefined)
|
|
162
|
+
levels[n.id] = 1;
|
|
163
|
+
});
|
|
164
|
+
// Group nodes by level
|
|
165
|
+
const nodesByLevel = {};
|
|
166
|
+
nodes.forEach((n) => {
|
|
167
|
+
const level = levels[n.id];
|
|
168
|
+
if (level !== undefined) {
|
|
169
|
+
if (!nodesByLevel[level])
|
|
170
|
+
nodesByLevel[level] = [];
|
|
171
|
+
nodesByLevel[level].push(n);
|
|
172
|
+
}
|
|
173
|
+
});
|
|
174
|
+
const maxLevel = Math.max(...Object.keys(nodesByLevel).map(Number));
|
|
175
|
+
const levelHeight = height / (maxLevel + 2);
|
|
176
|
+
return nodes.map((node) => {
|
|
177
|
+
const level = levels[node.id];
|
|
178
|
+
if (level === undefined) {
|
|
179
|
+
return { ...node, x: 0, y: 0, vx: 0, vy: 0 };
|
|
180
|
+
}
|
|
181
|
+
const nodesAtLevel = nodesByLevel[level];
|
|
182
|
+
if (!nodesAtLevel) {
|
|
183
|
+
return { ...node, x: 0, y: 0, vx: 0, vy: 0 };
|
|
184
|
+
}
|
|
185
|
+
const indexAtLevel = nodesAtLevel.indexOf(node);
|
|
186
|
+
const levelWidth = width / (nodesAtLevel.length + 1);
|
|
187
|
+
return {
|
|
188
|
+
...node,
|
|
189
|
+
x: levelWidth * (indexAtLevel + 1),
|
|
190
|
+
y: levelHeight * (level + 1),
|
|
191
|
+
vx: 0,
|
|
192
|
+
vy: 0,
|
|
193
|
+
};
|
|
194
|
+
});
|
|
195
|
+
}, [nodes, edges, width, height]);
|
|
196
|
+
const positionedEdges = useMemo(() => {
|
|
197
|
+
return edges
|
|
198
|
+
.map((edge) => {
|
|
199
|
+
const sourceNode = positionedNodes.find((n) => n.id === edge.source);
|
|
200
|
+
const targetNode = positionedNodes.find((n) => n.id === edge.target);
|
|
201
|
+
if (!sourceNode || !targetNode)
|
|
202
|
+
return null;
|
|
203
|
+
return { ...edge, sourceNode, targetNode };
|
|
204
|
+
})
|
|
205
|
+
.filter(Boolean);
|
|
206
|
+
}, [edges, positionedNodes]);
|
|
207
|
+
return { positionedNodes, positionedEdges };
|
|
208
|
+
}
|
|
209
|
+
/**
|
|
210
|
+
* Radial layout algorithm
|
|
211
|
+
*/
|
|
212
|
+
function useRadialLayout(nodes, edges, width, height) {
|
|
213
|
+
const positionedNodes = useMemo(() => {
|
|
214
|
+
if (nodes.length === 0)
|
|
215
|
+
return [];
|
|
216
|
+
const centerX = width / 2;
|
|
217
|
+
const centerY = height / 2;
|
|
218
|
+
const rootNode = nodes.find((n) => n.isRoot) || nodes[0];
|
|
219
|
+
if (!rootNode)
|
|
220
|
+
return [];
|
|
221
|
+
// Build distance from root
|
|
222
|
+
const distances = { [rootNode.id]: 0 };
|
|
223
|
+
const queue = [rootNode.id];
|
|
224
|
+
const visited = new Set([rootNode.id]);
|
|
225
|
+
const adjacent = {};
|
|
226
|
+
nodes.forEach((n) => {
|
|
227
|
+
adjacent[n.id] = new Set();
|
|
228
|
+
});
|
|
229
|
+
edges.forEach((e) => {
|
|
230
|
+
adjacent[e.source]?.add(e.target);
|
|
231
|
+
adjacent[e.target]?.add(e.source);
|
|
232
|
+
});
|
|
233
|
+
while (queue.length > 0) {
|
|
234
|
+
const current = queue.shift();
|
|
235
|
+
if (current === undefined)
|
|
236
|
+
break;
|
|
237
|
+
const currentDist = distances[current];
|
|
238
|
+
if (currentDist !== undefined) {
|
|
239
|
+
adjacent[current]?.forEach((neighborId) => {
|
|
240
|
+
if (!visited.has(neighborId)) {
|
|
241
|
+
visited.add(neighborId);
|
|
242
|
+
distances[neighborId] = currentDist + 1;
|
|
243
|
+
queue.push(neighborId);
|
|
244
|
+
}
|
|
245
|
+
});
|
|
246
|
+
}
|
|
247
|
+
}
|
|
248
|
+
nodes.forEach((n) => {
|
|
249
|
+
if (distances[n.id] === undefined)
|
|
250
|
+
distances[n.id] = 1;
|
|
251
|
+
});
|
|
252
|
+
const nodesByDistance = {};
|
|
253
|
+
nodes.forEach((n) => {
|
|
254
|
+
const dist = distances[n.id];
|
|
255
|
+
if (dist !== undefined) {
|
|
256
|
+
if (!nodesByDistance[dist])
|
|
257
|
+
nodesByDistance[dist] = [];
|
|
258
|
+
nodesByDistance[dist].push(n);
|
|
259
|
+
}
|
|
260
|
+
});
|
|
261
|
+
const maxDistance = Math.max(...Object.keys(nodesByDistance).map(Number));
|
|
262
|
+
const radiusStep = (Math.min(width, height) * 0.35) / Math.max(maxDistance, 1);
|
|
263
|
+
return nodes.map((node) => {
|
|
264
|
+
const dist = distances[node.id];
|
|
265
|
+
if (dist === undefined) {
|
|
266
|
+
return { ...node, x: centerX, y: centerY, vx: 0, vy: 0 };
|
|
267
|
+
}
|
|
268
|
+
if (dist === 0)
|
|
269
|
+
return { ...node, x: centerX, y: centerY, vx: 0, vy: 0 };
|
|
270
|
+
const nodesAtDist = nodesByDistance[dist];
|
|
271
|
+
if (!nodesAtDist) {
|
|
272
|
+
return { ...node, x: centerX, y: centerY, vx: 0, vy: 0 };
|
|
273
|
+
}
|
|
274
|
+
const indexAtDist = nodesAtDist.indexOf(node);
|
|
275
|
+
const angle = (2 * Math.PI * indexAtDist) / nodesAtDist.length;
|
|
276
|
+
const radius = radiusStep * dist;
|
|
277
|
+
return {
|
|
278
|
+
...node,
|
|
279
|
+
x: centerX + radius * Math.cos(angle),
|
|
280
|
+
y: centerY + radius * Math.sin(angle),
|
|
281
|
+
vx: 0,
|
|
282
|
+
vy: 0,
|
|
283
|
+
};
|
|
284
|
+
});
|
|
285
|
+
}, [nodes, edges, width, height]);
|
|
286
|
+
const positionedEdges = useMemo(() => {
|
|
287
|
+
return edges
|
|
288
|
+
.map((edge) => {
|
|
289
|
+
const sourceNode = positionedNodes.find((n) => n.id === edge.source);
|
|
290
|
+
const targetNode = positionedNodes.find((n) => n.id === edge.target);
|
|
291
|
+
if (!sourceNode || !targetNode)
|
|
292
|
+
return null;
|
|
293
|
+
return { ...edge, sourceNode, targetNode };
|
|
294
|
+
})
|
|
295
|
+
.filter(Boolean);
|
|
296
|
+
}, [edges, positionedNodes]);
|
|
297
|
+
return { positionedNodes, positionedEdges };
|
|
298
|
+
}
|
|
299
|
+
// =============================================================================
|
|
300
|
+
// Sub-components
|
|
301
|
+
// =============================================================================
|
|
302
|
+
const GraphNodeComponent = ({ node, onClick, showLabel, isHighlighted, isHovered, onHover, typeColors }) => {
|
|
303
|
+
const nodeColor = node.color || typeColors[node.type] || typeColors.default || DEFAULT_TYPE_COLORS.default;
|
|
304
|
+
const nodeSize = node.isRoot ? 28 : 22;
|
|
305
|
+
return (_jsxs(motion.g, { initial: { scale: 0, opacity: 0 }, animate: { scale: isHovered || isHighlighted ? 1.2 : 1, opacity: 1 }, transition: { type: "spring", stiffness: 300, damping: 20 }, style: { cursor: onClick ? "pointer" : "default" }, onClick: onClick, onMouseEnter: () => onHover(true), onMouseLeave: () => onHover(false), role: onClick ? "button" : undefined, tabIndex: onClick ? 0 : undefined, children: [_jsx("circle", { cx: node.x, cy: node.y, r: nodeSize, fill: nodeColor, stroke: isHighlighted ? "#1F2937" : "white", strokeWidth: isHighlighted ? 3 : 2, style: { filter: isHovered ? "drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3))" : undefined } }), _jsx("text", { x: node.x, y: node.y, textAnchor: "middle", dominantBaseline: "central", fill: "white", fontSize: node.isRoot ? 12 : 10, fontWeight: "bold", children: node.label.charAt(0).toUpperCase() }), showLabel && (_jsx("text", { x: node.x, y: node.y + nodeSize + 14, textAnchor: "middle", fill: "#374151", fontSize: 11, fontWeight: node.isRoot ? 600 : 400, children: node.label.length > 20 ? `${node.label.substring(0, 18)}...` : node.label }))] }));
|
|
306
|
+
};
|
|
307
|
+
const GraphEdgeComponent = ({ edge, onClick, isHighlighted, showLabel }) => {
|
|
308
|
+
const edgeType = edge.type || "default";
|
|
309
|
+
const style = EDGE_STYLES[edgeType] ?? EDGE_STYLES.default ?? {};
|
|
310
|
+
const dashArray = style.dashArray;
|
|
311
|
+
const strokeWidth = (edge.strength || 0.5) * 2 + 1;
|
|
312
|
+
const edgeColor = edge.color || "#6B7280";
|
|
313
|
+
const dx = edge.targetNode.x - edge.sourceNode.x;
|
|
314
|
+
const dy = edge.targetNode.y - edge.sourceNode.y;
|
|
315
|
+
const dist = Math.sqrt(dx * dx + dy * dy) || 1;
|
|
316
|
+
const sourceRadius = edge.sourceNode.isRoot ? 28 : 22;
|
|
317
|
+
const targetRadius = edge.targetNode.isRoot ? 28 : 22;
|
|
318
|
+
const startX = edge.sourceNode.x + (dx / dist) * sourceRadius;
|
|
319
|
+
const startY = edge.sourceNode.y + (dy / dist) * sourceRadius;
|
|
320
|
+
const endX = edge.targetNode.x - (dx / dist) * targetRadius;
|
|
321
|
+
const endY = edge.targetNode.y - (dy / dist) * targetRadius;
|
|
322
|
+
const midX = (startX + endX) / 2;
|
|
323
|
+
const midY = (startY + endY) / 2;
|
|
324
|
+
return (
|
|
325
|
+
// biome-ignore lint/a11y/noStaticElementInteractions: SVG g element needs role="button" for accessibility when interactive
|
|
326
|
+
_jsxs("g", { style: { cursor: onClick ? "pointer" : "default" }, onClick: onClick, role: onClick ? "button" : undefined, tabIndex: onClick ? 0 : undefined, children: [_jsx(motion.line, { x1: startX, y1: startY, x2: endX, y2: endY, stroke: isHighlighted ? "#1F2937" : edgeColor, strokeWidth: isHighlighted ? strokeWidth + 1 : strokeWidth, strokeDasharray: dashArray, initial: { pathLength: 0, opacity: 0 }, animate: { pathLength: 1, opacity: 0.7 }, transition: { duration: 0.5, delay: 0.2 }, markerEnd: "url(#arrowhead)" }), showLabel && edge.label && (_jsxs("g", { children: [_jsx("rect", { x: midX - 30, y: midY - 8, width: 60, height: 16, rx: 4, fill: "white", fillOpacity: 0.9 }), _jsx("text", { x: midX, y: midY + 4, textAnchor: "middle", fill: "#6B7280", fontSize: 9, children: edge.label })] }))] }));
|
|
327
|
+
};
|
|
328
|
+
const NodeTooltip = ({ node, typeColors }) => {
|
|
329
|
+
const nodeColor = node.color || typeColors[node.type] || typeColors.default || DEFAULT_TYPE_COLORS.default;
|
|
330
|
+
return (_jsx(motion.foreignObject, { x: node.x + 30, y: node.y - 40, width: 200, height: 100, initial: { opacity: 0, scale: 0.9 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.9 }, children: _jsxs("div", { className: "rounded-lg border bg-white p-3 shadow-lg", children: [_jsxs("div", { className: "mb-1 flex items-center gap-2", children: [_jsx("span", { className: "h-2 w-2 rounded-full", style: { background: nodeColor } }), _jsx("strong", { className: "text-sm", children: node.label })] }), _jsxs("div", { className: "text-content-tertiary text-xs", children: ["Type: ", node.type] }), node.metadata &&
|
|
331
|
+
Object.entries(node.metadata).map(([key, value]) => (_jsxs("div", { className: "text-content-tertiary text-xs", children: [key, ": ", value] }, key)))] }) }));
|
|
332
|
+
};
|
|
333
|
+
const GraphLegend = ({ nodes, typeColors }) => {
|
|
334
|
+
const types = useMemo(() => Array.from(new Set(nodes.map((n) => n.type))), [nodes]);
|
|
335
|
+
return (_jsxs("div", { className: "absolute bottom-3 left-3 rounded-lg bg-white p-2 text-xs shadow-md", children: [_jsx("div", { className: "text-content-primary mb-1.5 font-semibold", children: "Legend" }), types.map((type) => (_jsxs("div", { className: "mb-0.5 flex items-center gap-1.5", children: [_jsx("span", { className: "h-2.5 w-2.5 rounded-full", style: { background: typeColors[type] || typeColors.default || DEFAULT_TYPE_COLORS.default } }), _jsx("span", { className: "text-content-tertiary capitalize", children: type })] }, type)))] }));
|
|
336
|
+
};
|
|
337
|
+
// =============================================================================
|
|
338
|
+
// Main Component
|
|
339
|
+
// =============================================================================
|
|
340
|
+
/**
|
|
341
|
+
* RelationshipGraph - Visualizes relationships between entities using an interactive SVG graph.
|
|
342
|
+
* Supports force-directed, hierarchical, and radial layouts.
|
|
343
|
+
*
|
|
344
|
+
* @example
|
|
345
|
+
* ```tsx
|
|
346
|
+
* const nodes = [
|
|
347
|
+
* { id: "1", type: "product", label: "Product A", isRoot: true },
|
|
348
|
+
* { id: "2", type: "ingredient", label: "Ingredient B" },
|
|
349
|
+
* ];
|
|
350
|
+
* const edges = [
|
|
351
|
+
* { id: "e1", source: "1", target: "2", label: "contains" },
|
|
352
|
+
* ];
|
|
353
|
+
*
|
|
354
|
+
* <RelationshipGraph nodes={nodes} edges={edges} layout="force" />
|
|
355
|
+
* ```
|
|
356
|
+
*/
|
|
357
|
+
export function RelationshipGraph({ nodes, edges, onNodeClick, onEdgeClick, width = 600, height = 400, animate: _animate = true, layout = "force", className, showLabels = true, showLegend = true, interactive = true, highlightNode, typeColors = DEFAULT_TYPE_COLORS, }) {
|
|
358
|
+
const [hoveredNode, setHoveredNode] = useState(null);
|
|
359
|
+
const svgRef = useRef(null);
|
|
360
|
+
const mergedColors = { ...DEFAULT_TYPE_COLORS, ...typeColors };
|
|
361
|
+
// Select layout algorithm
|
|
362
|
+
const forceLayout = useForceLayout(layout === "force" ? nodes : [], layout === "force" ? edges : [], width, height);
|
|
363
|
+
const hierarchicalLayout = useHierarchicalLayout(layout === "hierarchical" ? nodes : [], layout === "hierarchical" ? edges : [], width, height);
|
|
364
|
+
const radialLayout = useRadialLayout(layout === "radial" ? nodes : [], layout === "radial" ? edges : [], width, height);
|
|
365
|
+
const { positionedNodes, positionedEdges } = layout === "force" ? forceLayout : layout === "hierarchical" ? hierarchicalLayout : radialLayout;
|
|
366
|
+
const handleNodeClick = useCallback((node) => {
|
|
367
|
+
if (onNodeClick && interactive)
|
|
368
|
+
onNodeClick(node);
|
|
369
|
+
}, [onNodeClick, interactive]);
|
|
370
|
+
const handleEdgeClick = useCallback((edge) => {
|
|
371
|
+
if (onEdgeClick && interactive)
|
|
372
|
+
onEdgeClick(edge);
|
|
373
|
+
}, [onEdgeClick, interactive]);
|
|
374
|
+
const hoveredNodeData = useMemo(() => positionedNodes.find((n) => n.id === hoveredNode), [positionedNodes, hoveredNode]);
|
|
375
|
+
if (nodes.length === 0) {
|
|
376
|
+
return (_jsx("div", { className: cx("flex items-center justify-center rounded-lg border border-dashed bg-gray-50", className), style: { width, height }, children: _jsx("p", { className: "text-content-tertiary text-sm", children: "No relationships to display" }) }));
|
|
377
|
+
}
|
|
378
|
+
return (_jsxs("div", { className: cx("relative", className), style: { width, height }, children: [_jsxs("svg", { ref: svgRef, width: width, height: height, className: "rounded-lg border bg-gray-50", role: "img", "aria-label": "Relationship graph visualization", children: [_jsx("defs", { children: _jsx("marker", { id: "arrowhead", markerWidth: "10", markerHeight: "7", refX: "9", refY: "3.5", orient: "auto", children: _jsx("polygon", { points: "0 0, 10 3.5, 0 7", fill: "#6B7280" }) }) }), _jsx("g", { className: "edges", children: positionedEdges.map((edge) => (_jsx(GraphEdgeComponent, { edge: edge, ...(onEdgeClick ? { onClick: () => handleEdgeClick(edge) } : {}), isHighlighted: hoveredNode === edge.source || hoveredNode === edge.target || highlightNode === edge.source || highlightNode === edge.target, showLabel: showLabels }, edge.id))) }), _jsx("g", { className: "nodes", children: positionedNodes.map((node) => (_jsx(GraphNodeComponent, { node: node, ...(onNodeClick ? { onClick: () => handleNodeClick(node) } : {}), showLabel: showLabels, isHighlighted: highlightNode === node.id, isHovered: hoveredNode === node.id, onHover: (hovering) => setHoveredNode(hovering ? node.id : null), typeColors: mergedColors }, node.id))) }), _jsx(AnimatePresence, { children: interactive && hoveredNodeData && _jsx(NodeTooltip, { node: hoveredNodeData, typeColors: mergedColors }) })] }), showLegend && _jsx(GraphLegend, { nodes: nodes, typeColors: mergedColors })] }));
|
|
379
|
+
}
|
|
380
|
+
export default RelationshipGraph;
|
|
381
|
+
//# sourceMappingURL=relationship-graph.js.map
|