elseware-ui 2.20.0 → 2.20.2

package/build/components/data-display/graphs/GraphEdge.d.ts

@@ -4,5 +4,5 @@ interface Props {
     edge: GraphEdgeType;
     nodes: GraphNodeType[];
 }
-declare const GraphEdge: React.FC<Props>;
-export default GraphEdge;
+export declare const GraphEdge: React.FC<Props>;
+export {};

package/build/components/data-display/graphs/GraphNode.d.ts

@@ -4,5 +4,5 @@ interface Props {
     node: GraphNodeType;
     renderCustom?: (node: GraphNodeType) => React.ReactNode;
 }
-declare const GraphNode: React.FC<Props>;
-export default GraphNode;
+export declare const GraphNode: React.FC<Props>;
+export {};

package/build/components/data-display/graphs/GraphRenderer.d.ts

@@ -7,5 +7,5 @@ interface Props {
     width?: number;
     height?: number;
 }
-declare const GraphRenderer: React.FC<Props>;
-export default GraphRenderer;
+export declare const GraphRenderer: React.FC<Props>;
+export {};

package/build/components/data-display/graphs/types.d.ts

@@ -19,9 +19,9 @@ export interface GraphNodeType {
 }
 export interface GraphEdgeType {
     id?: string;
-    source: string | GraphNodeType;
-    target: string | GraphNodeType;
-    label?: string;
+    from: string | GraphNodeType;
+    to: string | GraphNodeType;
+    weight?: string;
     color?: string;
     width?: number;
 }

package/build/index.es.js

@@ -21023,8 +21023,14 @@ new Transform$1(1, 0, 0);
 Transform$1.prototype;
 
 var createForceLayout = function (nodes, edges, width, height) {
+    // Convert app edges -> D3 compatible edges
+    var d3Links = edges.map(function (e) { return ({
+        source: typeof e.from === "string" ? e.from : e.from.id,
+        target: typeof e.to === "string" ? e.to : e.to.id,
+        weight: e.weight,
+    }); });
     return simulation(nodes)
-        .force("link", link$2(edges)
+        .force("link", link$2(d3Links)
         .id(function (d) { return d.id; })
         .distance(120)
         .strength(0.7))
@@ -21046,7 +21052,7 @@ function createTreeLayout(nodes, edges, width, height) {
     levelMap[root.id] = 0;
     edges.forEach(function (edge) {
         var _a;
-        levelMap[edge.target] = ((_a = levelMap[edge.source]) !== null && _a !== void 0 ? _a : 0) + 1;
+        levelMap[edge.to] = ((_a = levelMap[edge.from]) !== null && _a !== void 0 ? _a : 0) + 1;
     });
     var maxLevel = Math.max.apply(Math, Object.values(levelMap));
     var levelGroups = {};
@@ -21096,14 +21102,14 @@ function isNode$1(obj) {
 }
 var GraphEdge = function (_a) {
     var edge = _a.edge, nodes = _a.nodes;
-    // ---------- Resolve source ----------
-    var sourceNode = isNode$1(edge.source)
-        ? edge.source
-        : nodes.find(function (n) { return n.id === edge.source; });
-    // ---------- Resolve target ----------
-    var targetNode = isNode$1(edge.target)
-        ? edge.target
-        : nodes.find(function (n) { return n.id === edge.target; });
+    // ---------- Resolve FROM ----------
+    var sourceNode = isNode$1(edge.from)
+        ? edge.from
+        : nodes.find(function (n) { return n.id === edge.from; });
+    // ---------- Resolve TO ----------
+    var targetNode = isNode$1(edge.to)
+        ? edge.to
+        : nodes.find(function (n) { return n.id === edge.to; });
     if (!sourceNode || !targetNode)
         return null;
     if (sourceNode.x == null ||
@@ -21112,7 +21118,12 @@ var GraphEdge = function (_a) {
         targetNode.y == null) {
         return null;
     }
-    return (jsx("line", { x1: sourceNode.x, y1: sourceNode.y, x2: targetNode.x, y2: targetNode.y, stroke: "#64748b", strokeWidth: 1.5, opacity: 0.85, vectorEffect: "non-scaling-stroke" }));
+    // ---------- Label position (center of edge) ----------
+    var labelX = (sourceNode.x + targetNode.x) / 2;
+    var labelY = (sourceNode.y + targetNode.y) / 2;
+    return (jsxs("g", { children: [jsx("line", { x1: sourceNode.x, y1: sourceNode.y, x2: targetNode.x, y2: targetNode.y, stroke: "#64748b", strokeWidth: 1.5, opacity: 0.85, vectorEffect: "non-scaling-stroke" }), edge.weight && (jsx("text", __assign$1({ x: labelX, y: labelY - 4, textAnchor: "middle", fontSize: 10, fill: "#e5e7eb", pointerEvents: "none", style: {
+                    userSelect: "none",
+                } }, { children: edge.weight })))] }));
 };
 
 var GraphRenderer = function (_a) {
@@ -142172,4 +142183,4 @@ function EUIDevLayout(_a) {
         } }, { children: jsx(GenericLayout, { children: jsxs(Layout, { children: [header, jsx(Content$2, __assign$1({ styles: "pt-[60px]" }, { children: jsx(ContentArea, __assign$1({ enablePadding: true }, { children: children })) })), footer] }) }) })));
 }
 
-export { Accordion, AsyncComponentWrapper, Avatar, Backdrop, Badge, BarChart, BoxNav, BoxNavItem, Brand, Breadcrumb, BreadcrumbItem, Button$2 as Button, Card, CardContent, CardFooter, CardHeader, Chapter, Checkbox, Chip, CloudinaryImage, CloudinaryProvider, CloudinaryVideo, Content$2 as Content, ContentArea, DateSelector, DefaultLayout, Drawer, DrawerToggler, EUIDevLayout, EUIProvider, Flag, Flex, FlexCol, FlexRow, Footer, FooterNav, FooterNavGroup, FooterNavItem, FooterNavItemContext, FooterNavItemTitle, Form, FormResponse, GenericLayout, GlowWrapper, Graph, Grid, Header, HeaderNav, HeaderNavGroup, HeaderNavItem, HeaderNavItemContext, HeaderNavItemTitle, HomeLayout, Image$1 as Image, ImageInput, Info, Input, InputFile, InputLabel, InputList, InputListGroup, InputResponse, Layout, LineChart, Link, List, ListItem, MarkdownEditor, MarkdownViewer, Menu, MenuGroup, MenuItem, MenuItemTitle, Modal, MultiImageInput, Paragraph, PieChart, PriceTag, ProgressBar, Quote, Radio, RouteTab, RouteTabs, Section, Select$2 as Select, ShapeSwitch, ShowMore, Sidebar, SidebarLayout, SidemenuLayout, Skeleton, Slider, StarRating, StarRatingDistribution, StarRatingInput, Switch, Table, Tag, Tags, TextArea, ThemeContext, ThemeProvider, ThemeSwitch, TitleBanner, Toast, Tooltip$1 as Tooltip, Transition$1 as Transition, TransitionDropdown, TransitionFadeIn, Typography, UnderConstructionBanner, ValueBadge, WorldMap, WorldMapCountryTable, YoutubeVideoPlayer, createForceLayout, createGridLayout, createTreeLayout, getCurrencySymbol, resolveWithGlobal, sendToast, useClickOutside, useCloudinaryConfig, useCurrentTheme, useDrawer, useEUIConfig, useIsMobile, useModal, useTheme };
+export { Accordion, AsyncComponentWrapper, Avatar, Backdrop, Badge, BarChart, BoxNav, BoxNavItem, Brand, Breadcrumb, BreadcrumbItem, Button$2 as Button, Card, CardContent, CardFooter, CardHeader, Chapter, Checkbox, Chip, CloudinaryImage, CloudinaryProvider, CloudinaryVideo, Content$2 as Content, ContentArea, DateSelector, DefaultLayout, Drawer, DrawerToggler, EUIDevLayout, EUIProvider, Flag, Flex, FlexCol, FlexRow, Footer, FooterNav, FooterNavGroup, FooterNavItem, FooterNavItemContext, FooterNavItemTitle, Form, FormResponse, GenericLayout, GlowWrapper, Graph, GraphEdge, GraphNode, GraphRenderer, Grid, Header, HeaderNav, HeaderNavGroup, HeaderNavItem, HeaderNavItemContext, HeaderNavItemTitle, HomeLayout, Image$1 as Image, ImageInput, Info, Input, InputFile, InputLabel, InputList, InputListGroup, InputResponse, Layout, LineChart, Link, List, ListItem, MarkdownEditor, MarkdownViewer, Menu, MenuGroup, MenuItem, MenuItemTitle, Modal, MultiImageInput, Paragraph, PieChart, PriceTag, ProgressBar, Quote, Radio, RouteTab, RouteTabs, Section, Select$2 as Select, ShapeSwitch, ShowMore, Sidebar, SidebarLayout, SidemenuLayout, Skeleton, Slider, StarRating, StarRatingDistribution, StarRatingInput, Switch, Table, Tag, Tags, TextArea, ThemeContext, ThemeProvider, ThemeSwitch, TitleBanner, Toast, Tooltip$1 as Tooltip, Transition$1 as Transition, TransitionDropdown, TransitionFadeIn, Typography, UnderConstructionBanner, ValueBadge, WorldMap, WorldMapCountryTable, YoutubeVideoPlayer, createForceLayout, createGridLayout, createTreeLayout, getCurrencySymbol, resolveWithGlobal, sendToast, useClickOutside, useCloudinaryConfig, useCurrentTheme, useDrawer, useEUIConfig, useIsMobile, useModal, useTheme };

package/build/index.js

@@ -21050,8 +21050,14 @@ new Transform$1(1, 0, 0);
 Transform$1.prototype;
 
 var createForceLayout = function (nodes, edges, width, height) {
+    // Convert app edges -> D3 compatible edges
+    var d3Links = edges.map(function (e) { return ({
+        source: typeof e.from === "string" ? e.from : e.from.id,
+        target: typeof e.to === "string" ? e.to : e.to.id,
+        weight: e.weight,
+    }); });
     return simulation(nodes)
-        .force("link", link$2(edges)
+        .force("link", link$2(d3Links)
         .id(function (d) { return d.id; })
         .distance(120)
         .strength(0.7))
@@ -21073,7 +21079,7 @@ function createTreeLayout(nodes, edges, width, height) {
     levelMap[root.id] = 0;
     edges.forEach(function (edge) {
         var _a;
-        levelMap[edge.target] = ((_a = levelMap[edge.source]) !== null && _a !== void 0 ? _a : 0) + 1;
+        levelMap[edge.to] = ((_a = levelMap[edge.from]) !== null && _a !== void 0 ? _a : 0) + 1;
     });
     var maxLevel = Math.max.apply(Math, Object.values(levelMap));
     var levelGroups = {};
@@ -21123,14 +21129,14 @@ function isNode$1(obj) {
 }
 var GraphEdge = function (_a) {
     var edge = _a.edge, nodes = _a.nodes;
-    // ---------- Resolve source ----------
-    var sourceNode = isNode$1(edge.source)
-        ? edge.source
-        : nodes.find(function (n) { return n.id === edge.source; });
-    // ---------- Resolve target ----------
-    var targetNode = isNode$1(edge.target)
-        ? edge.target
-        : nodes.find(function (n) { return n.id === edge.target; });
+    // ---------- Resolve FROM ----------
+    var sourceNode = isNode$1(edge.from)
+        ? edge.from
+        : nodes.find(function (n) { return n.id === edge.from; });
+    // ---------- Resolve TO ----------
+    var targetNode = isNode$1(edge.to)
+        ? edge.to
+        : nodes.find(function (n) { return n.id === edge.to; });
     if (!sourceNode || !targetNode)
         return null;
     if (sourceNode.x == null ||
@@ -21139,7 +21145,12 @@ var GraphEdge = function (_a) {
         targetNode.y == null) {
         return null;
     }
-    return (jsxRuntime.jsx("line", { x1: sourceNode.x, y1: sourceNode.y, x2: targetNode.x, y2: targetNode.y, stroke: "#64748b", strokeWidth: 1.5, opacity: 0.85, vectorEffect: "non-scaling-stroke" }));
+    // ---------- Label position (center of edge) ----------
+    var labelX = (sourceNode.x + targetNode.x) / 2;
+    var labelY = (sourceNode.y + targetNode.y) / 2;
+    return (jsxRuntime.jsxs("g", { children: [jsxRuntime.jsx("line", { x1: sourceNode.x, y1: sourceNode.y, x2: targetNode.x, y2: targetNode.y, stroke: "#64748b", strokeWidth: 1.5, opacity: 0.85, vectorEffect: "non-scaling-stroke" }), edge.weight && (jsxRuntime.jsx("text", __assign$1({ x: labelX, y: labelY - 4, textAnchor: "middle", fontSize: 10, fill: "#e5e7eb", pointerEvents: "none", style: {
+                    userSelect: "none",
+                } }, { children: edge.weight })))] }));
 };
 
 var GraphRenderer = function (_a) {
@@ -142244,6 +142255,9 @@ exports.FormResponse = FormResponse;
 exports.GenericLayout = GenericLayout;
 exports.GlowWrapper = GlowWrapper;
 exports.Graph = Graph;
+exports.GraphEdge = GraphEdge;
+exports.GraphNode = GraphNode;
+exports.GraphRenderer = GraphRenderer;
 exports.Grid = Grid;
 exports.Header = Header;
 exports.HeaderNav = HeaderNav;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "elseware-ui",
-  "version": "2.20.0",
+  "version": "2.20.2",
   "private": false,
   "description": "A modern and customizable React UI component library by elseware Technology.",
   "keywords": [