@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.
Files changed (96) hide show
  1. package/api-schema.json +169 -0
  2. package/dist/__tests__/recharts-mock.d.ts +2 -0
  3. package/dist/__tests__/recharts-mock.d.ts.map +1 -0
  4. package/dist/__tests__/recharts-mock.js +19 -0
  5. package/dist/__tests__/recharts-mock.js.map +1 -0
  6. package/dist/__tests__/test-utils.d.ts +76 -0
  7. package/dist/__tests__/test-utils.d.ts.map +1 -0
  8. package/dist/__tests__/test-utils.js +89 -0
  9. package/dist/__tests__/test-utils.js.map +1 -0
  10. package/dist/components/activity-gauges.demo.d.ts +5 -0
  11. package/dist/components/activity-gauges.demo.d.ts.map +1 -1
  12. package/dist/components/activity-gauges.demo.js +25 -11
  13. package/dist/components/activity-gauges.demo.js.map +1 -1
  14. package/dist/components/activity-gauges.story.d.ts +6 -22
  15. package/dist/components/activity-gauges.story.d.ts.map +1 -1
  16. package/dist/components/activity-gauges.story.js +19 -11
  17. package/dist/components/activity-gauges.story.js.map +1 -1
  18. package/dist/components/bar-charts.demo.d.ts +6 -0
  19. package/dist/components/bar-charts.demo.d.ts.map +1 -1
  20. package/dist/components/bar-charts.demo.js +24 -11
  21. package/dist/components/bar-charts.demo.js.map +1 -1
  22. package/dist/components/bar-charts.story.d.ts +6 -18
  23. package/dist/components/bar-charts.story.d.ts.map +1 -1
  24. package/dist/components/bar-charts.story.js +19 -9
  25. package/dist/components/bar-charts.story.js.map +1 -1
  26. package/dist/components/charts-base.d.ts +0 -8
  27. package/dist/components/charts-base.d.ts.map +1 -1
  28. package/dist/components/charts-base.js +2 -28
  29. package/dist/components/charts-base.js.map +1 -1
  30. package/dist/components/line-charts.demo.d.ts +6 -0
  31. package/dist/components/line-charts.demo.d.ts.map +1 -1
  32. package/dist/components/line-charts.demo.js +32 -18
  33. package/dist/components/line-charts.demo.js.map +1 -1
  34. package/dist/components/line-charts.story.d.ts +6 -22
  35. package/dist/components/line-charts.story.d.ts.map +1 -1
  36. package/dist/components/line-charts.story.js +19 -11
  37. package/dist/components/line-charts.story.js.map +1 -1
  38. package/dist/components/pie-charts.demo.d.ts +5 -0
  39. package/dist/components/pie-charts.demo.d.ts.map +1 -1
  40. package/dist/components/pie-charts.demo.js +20 -4
  41. package/dist/components/pie-charts.demo.js.map +1 -1
  42. package/dist/components/pie-charts.story.d.ts +6 -26
  43. package/dist/components/pie-charts.story.d.ts.map +1 -1
  44. package/dist/components/pie-charts.story.js +19 -13
  45. package/dist/components/pie-charts.story.js.map +1 -1
  46. package/dist/components/progress-circles.demo.d.ts +7 -0
  47. package/dist/components/progress-circles.demo.d.ts.map +1 -1
  48. package/dist/components/progress-circles.demo.js +11 -6
  49. package/dist/components/progress-circles.demo.js.map +1 -1
  50. package/dist/components/progress-circles.story.d.ts +6 -38
  51. package/dist/components/progress-circles.story.d.ts.map +1 -1
  52. package/dist/components/progress-circles.story.js +23 -19
  53. package/dist/components/progress-circles.story.js.map +1 -1
  54. package/dist/components/radar-charts.demo.d.ts +6 -3
  55. package/dist/components/radar-charts.demo.d.ts.map +1 -1
  56. package/dist/components/radar-charts.demo.js +18 -10
  57. package/dist/components/radar-charts.demo.js.map +1 -1
  58. package/dist/components/radar-charts.story.d.ts +6 -10
  59. package/dist/components/radar-charts.story.d.ts.map +1 -1
  60. package/dist/components/radar-charts.story.js +10 -5
  61. package/dist/components/radar-charts.story.js.map +1 -1
  62. package/dist/components/relationship-graph.d.ts +64 -0
  63. package/dist/components/relationship-graph.d.ts.map +1 -0
  64. package/dist/components/relationship-graph.demo.d.ts +2 -0
  65. package/dist/components/relationship-graph.demo.d.ts.map +1 -0
  66. package/dist/components/relationship-graph.demo.js +61 -0
  67. package/dist/components/relationship-graph.demo.js.map +1 -0
  68. package/dist/components/relationship-graph.js +381 -0
  69. package/dist/components/relationship-graph.js.map +1 -0
  70. package/dist/components/relationship-graph.story.d.ts +6 -0
  71. package/dist/components/relationship-graph.story.d.ts.map +1 -0
  72. package/dist/components/relationship-graph.story.js +13 -0
  73. package/dist/components/relationship-graph.story.js.map +1 -0
  74. package/dist/components/trend-indicator.d.ts +40 -0
  75. package/dist/components/trend-indicator.d.ts.map +1 -0
  76. package/dist/components/trend-indicator.demo.d.ts +2 -0
  77. package/dist/components/trend-indicator.demo.d.ts.map +1 -0
  78. package/dist/components/trend-indicator.demo.js +7 -0
  79. package/dist/components/trend-indicator.demo.js.map +1 -0
  80. package/dist/components/trend-indicator.js +50 -0
  81. package/dist/components/trend-indicator.js.map +1 -0
  82. package/dist/components/trend-indicator.story.d.ts +6 -0
  83. package/dist/components/trend-indicator.story.d.ts.map +1 -0
  84. package/dist/components/trend-indicator.story.js +13 -0
  85. package/dist/components/trend-indicator.story.js.map +1 -0
  86. package/dist/index.d.ts +9 -1
  87. package/dist/index.d.ts.map +1 -1
  88. package/dist/index.js +1852 -9
  89. package/dist/index.js.map +1 -1
  90. package/dist/index.mjs +1837 -9
  91. package/dist/index.mjs.map +1 -1
  92. package/dist/utils/chart-utils.d.ts +9 -0
  93. package/dist/utils/chart-utils.d.ts.map +1 -0
  94. package/dist/utils/chart-utils.js +26 -0
  95. package/dist/utils/chart-utils.js.map +1 -0
  96. 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":"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"}
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 { FC } from "react";
2
- declare const _default: {
3
- title: string;
4
- decorators: ((Story: FC) => import("react/jsx-runtime").JSX.Element)[];
5
- };
6
- export default _default;
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;;;yBAMhB,EAAE;;AAHlB,wBAWE;AAEF,eAAO,MAAM,UAAU;;;CAA8B,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
- export default {
4
- title: "Application/Charts",
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 py-8", children: _jsx("div", { className: "flex w-full items-center justify-center", children: _jsx(Story, {}) }) })),
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 const RadarChart = () => _jsx(Charts.RadarChart, {});
10
- RadarChart.storyName = "Radar chart";
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":";AACA,OAAO,KAAK,MAAM,MAAM,qBAAqB,CAAC;AAE9C,eAAe;IACX,KAAK,EAAE,oBAAoB;IAC3B,UAAU,EAAE;QACR,CAAC,KAAS,EAAE,EAAE,CAAC,CACX,cAAK,SAAS,EAAC,4DAA4D,YACvE,cAAK,SAAS,EAAC,yCAAyC,YACpD,KAAC,KAAK,KAAG,GACP,GACJ,CACT;KACJ;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,KAAC,MAAM,CAAC,UAAU,KAAG,CAAC;AACtD,UAAU,CAAC,SAAS,GAAG,aAAa,CAAC"}
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,2 @@
1
+ export declare const RelationshipGraphDemo: () => import("react/jsx-runtime").JSX.Element;
2
+ //# sourceMappingURL=relationship-graph.demo.d.ts.map
@@ -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