npm - @uipath/apollo-react - Versions diffs - 3.44.0 → 3.44.1 - Mend

@uipath/apollo-react 3.44.0 → 3.44.1

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 (4) hide show

package/dist/material/components/ap-sankey-diagram/ApSankeyDiagram.cjs CHANGED Viewed

@@ -71,15 +71,20 @@ const StyledSankeyLink = (0, styles_namespaceObject.styled)('path')({
         opacity: 1
     }
 });
+const LABEL_FONT_SIZE = apollo_core_default().FontVariantToken.fontSizeL;
+const LABEL_FONT_FAMILY = apollo_core_default().FontFamily.FontNormal;
+const LABEL_CSS_FONT = `${apollo_core_default().Typography.fontSizeL.fontWeight} ${apollo_core_default().Typography.fontSizeL.fontSize} ${LABEL_FONT_FAMILY}`;
 const StyledSankeyNodeLabel = (0, styles_namespaceObject.styled)('text')({
-    fontSize: apollo_core_default().FontVariantToken.fontSizeS,
+    fontSize: LABEL_FONT_SIZE,
+    fontFamily: LABEL_FONT_FAMILY,
     fill: 'var(--color-foreground-emp)',
     pointerEvents: 'auto',
     userSelect: 'none',
     cursor: 'default'
 });
 const StyledSankeyNodeValue = (0, styles_namespaceObject.styled)('text')({
-    fontSize: apollo_core_default().FontVariantToken.fontSizeS,
+    fontSize: LABEL_FONT_SIZE,
+    fontFamily: LABEL_FONT_FAMILY,
     fontWeight: apollo_core_default().FontFamily.FontWeightMedium,
     fill: 'var(--color-foreground-emp)',
     pointerEvents: 'auto',
@@ -116,11 +121,21 @@ const TooltipValue = (0, styles_namespaceObject.styled)('span')({
     color: 'var(--color-foreground-emp)',
     fontWeight: apollo_core_default().FontFamily.FontWeightSemibold
 });
-const DIAGRAM_MARGIN_HORIZONTAL = 80;
+const DIAGRAM_MARGIN_LEFT = 5;
+const DIAGRAM_MARGIN_RIGHT = 120;
 const DIAGRAM_MARGIN_VERTICAL = 5;
-const truncateText = (text, maxChars)=>{
-    if (text.length <= maxChars) return text;
-    return `${text.substring(0, maxChars - 1)}…`;
+const truncateToFit = (text, maxWidth, ctx)=>{
+    if (maxWidth <= 0) return '';
+    if (ctx.measureText(text).width <= maxWidth) return text;
+    const ellipsis = '\u2026';
+    let lo = 0;
+    let hi = text.length;
+    while(lo < hi){
+        const mid = Math.ceil((lo + hi) / 2);
+        if (ctx.measureText(text.substring(0, mid) + ellipsis).width <= maxWidth) lo = mid;
+        else hi = mid - 1;
+    }
+    return 0 === lo ? ellipsis : text.substring(0, lo) + ellipsis;
 };
 const ApSankeyDiagram = /*#__PURE__*/ external_react_default().forwardRef((props, ref)=>{
     const { data, nodeAlignment = 'justify', nodePadding = 16, nodeWidth = 24, style, className, colorScheme = external_d3_scale_chromatic_namespaceObject.schemeTableau10, ariaLabel = 'Sankey diagram', onLinkClick, onNodeClick } = props;
@@ -164,11 +179,11 @@ const ApSankeyDiagram = /*#__PURE__*/ external_react_default().forwardRef((props
         const alignmentFn = 'left' === nodeAlignment ? external_d3_sankey_namespaceObject.sankeyLeft : 'right' === nodeAlignment ? external_d3_sankey_namespaceObject.sankeyRight : 'center' === nodeAlignment ? external_d3_sankey_namespaceObject.sankeyCenter : external_d3_sankey_namespaceObject.sankeyJustify;
         const sankeyGenerator = (0, external_d3_sankey_namespaceObject.sankey)().nodeId((d)=>d.id).nodeAlign(alignmentFn).nodeWidth(nodeWidth).nodePadding(nodePadding).extent([
             [
-                DIAGRAM_MARGIN_HORIZONTAL,
+                DIAGRAM_MARGIN_LEFT,
                 DIAGRAM_MARGIN_VERTICAL
             ],
             [
-                actualWidth - DIAGRAM_MARGIN_HORIZONTAL,
+                actualWidth - DIAGRAM_MARGIN_RIGHT,
                 actualHeight - DIAGRAM_MARGIN_VERTICAL
             ]
         ]);
@@ -233,20 +248,29 @@ const ApSankeyDiagram = /*#__PURE__*/ external_react_default().forwardRef((props
     ]);
     const nodeData = (0, external_react_namespaceObject.useMemo)(()=>{
         if (!sankeyGraph) return [];
-        const midpoint = actualWidth / 2;
+        const labelPad = parseInt(apollo_core_default().Spacing.SpacingXs, 10);
+        const ctx = 'undefined' != typeof document ? document.createElement('canvas').getContext('2d') : null;
+        if (ctx) ctx.font = LABEL_CSS_FONT;
+        const columnSet = new Map();
+        for (const n of sankeyGraph.nodes){
+            const ext = n;
+            const x0 = ext.x0 || 0;
+            const x1 = ext.x1 || 0;
+            if (!columnSet.has(x0)) columnSet.set(x0, x1);
+        }
+        const columns = Array.from(columnSet.entries()).map(([x0, x1])=>({
+                x0,
+                x1
+            })).sort((a, b)=>a.x0 - b.x0);
         return sankeyGraph.nodes.map((node, index)=>{
             const extNode = node;
             const x0 = extNode.x0 || 0;
             const x1 = extNode.x1 || 0;
             const y0 = extNode.y0 || 0;
             const y1 = extNode.y1 || 0;
-            const nodeCenter = (x0 + x1) / 2;
-            const labelOnRight = nodeCenter < midpoint;
-            const fullSpace = labelOnRight ? actualWidth - DIAGRAM_MARGIN_HORIZONTAL - x1 - parseInt(apollo_core_default().Spacing.SpacingXs) : x0 - DIAGRAM_MARGIN_HORIZONTAL - parseInt(apollo_core_default().Spacing.SpacingXs);
-            const spaceToMidpoint = labelOnRight ? midpoint - x1 - parseInt(apollo_core_default().Spacing.SpacingXs) : x0 - midpoint - parseInt(apollo_core_default().Spacing.SpacingXs);
-            const availableSpace = spaceToMidpoint > 0 ? Math.min(fullSpace, spaceToMidpoint) : fullSpace;
-            const maxChars = Math.floor(Math.max(0, availableSpace) / parseInt(apollo_core_default().Spacing.SpacingXs));
-            const displayLabel = truncateText(extNode.label, maxChars);
+            const colIndex = columns.findIndex((col)=>col.x0 === x0);
+            const nextCol = columns[colIndex + 1];
+            const displayLabel = nextCol && ctx ? truncateToFit(extNode.label, Math.max(0, nextCol.x0 - x1 - labelPad), ctx) : extNode.label;
             return {
                 node: extNode,
                 x: x0,
@@ -254,9 +278,9 @@ const ApSankeyDiagram = /*#__PURE__*/ external_react_default().forwardRef((props
                 width: x1 - x0,
                 height: y1 - y0,
                 color: nodeColorMap.get(extNode.id) || colorScheme[index % colorScheme.length],
-                labelX: labelOnRight ? x1 + parseInt(apollo_core_default().Spacing.SpacingXs) : x0 - parseInt(apollo_core_default().Spacing.SpacingXs),
+                labelX: x1 + labelPad,
                 labelY: (y0 + y1) / 2,
-                labelAnchor: labelOnRight ? 'start' : 'end',
+                labelAnchor: 'start',
                 value: extNode.value || 0,
                 displayLabel,
                 fullLabel: extNode.label
@@ -265,8 +289,7 @@ const ApSankeyDiagram = /*#__PURE__*/ external_react_default().forwardRef((props
     }, [
         sankeyGraph,
         nodeColorMap,
-        colorScheme,
-        actualWidth
+        colorScheme
     ]);
     const handleLinkMouseEnter = (0, external_react_namespaceObject.useCallback)((index, centerX, centerY)=>{
         if (selectedLinkIndex === index) return;
@@ -393,7 +416,7 @@ const ApSankeyDiagram = /*#__PURE__*/ external_react_default().forwardRef((props
                                     }),
                                     nodeItem.value > 0 && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(StyledSankeyNodeValue, {
                                         x: nodeItem.labelX,
-                                        y: nodeItem.labelY + parseInt(apollo_core_default().Spacing.SpacingM),
+                                        y: nodeItem.labelY + parseInt(apollo_core_default().Spacing.SpacingM, 10),
                                         dy: "0.35em",
                                         textAnchor: nodeItem.labelAnchor,
                                         children: nodeItem.value

package/dist/material/components/ap-sankey-diagram/ApSankeyDiagram.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ApSankeyDiagram.d.ts","sourceRoot":"","sources":["../../../../src/material/components/ap-sankey-diagram/ApSankeyDiagram.tsx"],"names":[],"mappings":"AAeA,OAAO,KAON,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,oBAAoB,EAA0B,MAAM,yBAAyB,CAAC;~~AAqI5F~~,eAAO,MAAM,eAAe,~~6FAqb3B~~,CAAC"}
1	+ {"version":3,"file":"ApSankeyDiagram.d.ts","sourceRoot":"","sources":["../../../../src/material/components/ap-sankey-diagram/ApSankeyDiagram.tsx"],"names":[],"mappings":"AAeA,OAAO,KAON,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,oBAAoB,EAA0B,MAAM,yBAAyB,CAAC;AA4J5F,eAAO,MAAM,eAAe,6FAsb3B,CAAC"}

package/dist/material/components/ap-sankey-diagram/ApSankeyDiagram.js CHANGED Viewed

@@ -32,15 +32,20 @@ const StyledSankeyLink = styled('path')({
         opacity: 1
     }
 });
+const LABEL_FONT_SIZE = apollo_core.FontVariantToken.fontSizeL;
+const LABEL_FONT_FAMILY = apollo_core.FontFamily.FontNormal;
+const LABEL_CSS_FONT = `${apollo_core.Typography.fontSizeL.fontWeight} ${apollo_core.Typography.fontSizeL.fontSize} ${LABEL_FONT_FAMILY}`;
 const StyledSankeyNodeLabel = styled('text')({
-    fontSize: apollo_core.FontVariantToken.fontSizeS,
+    fontSize: LABEL_FONT_SIZE,
+    fontFamily: LABEL_FONT_FAMILY,
     fill: 'var(--color-foreground-emp)',
     pointerEvents: 'auto',
     userSelect: 'none',
     cursor: 'default'
 });
 const StyledSankeyNodeValue = styled('text')({
-    fontSize: apollo_core.FontVariantToken.fontSizeS,
+    fontSize: LABEL_FONT_SIZE,
+    fontFamily: LABEL_FONT_FAMILY,
     fontWeight: apollo_core.FontFamily.FontWeightMedium,
     fill: 'var(--color-foreground-emp)',
     pointerEvents: 'auto',
@@ -77,11 +82,21 @@ const TooltipValue = styled('span')({
     color: 'var(--color-foreground-emp)',
     fontWeight: apollo_core.FontFamily.FontWeightSemibold
 });
-const DIAGRAM_MARGIN_HORIZONTAL = 80;
+const DIAGRAM_MARGIN_LEFT = 5;
+const DIAGRAM_MARGIN_RIGHT = 120;
 const DIAGRAM_MARGIN_VERTICAL = 5;
-const truncateText = (text, maxChars)=>{
-    if (text.length <= maxChars) return text;
-    return `${text.substring(0, maxChars - 1)}…`;
+const truncateToFit = (text, maxWidth, ctx)=>{
+    if (maxWidth <= 0) return '';
+    if (ctx.measureText(text).width <= maxWidth) return text;
+    const ellipsis = '\u2026';
+    let lo = 0;
+    let hi = text.length;
+    while(lo < hi){
+        const mid = Math.ceil((lo + hi) / 2);
+        if (ctx.measureText(text.substring(0, mid) + ellipsis).width <= maxWidth) lo = mid;
+        else hi = mid - 1;
+    }
+    return 0 === lo ? ellipsis : text.substring(0, lo) + ellipsis;
 };
 const ApSankeyDiagram = /*#__PURE__*/ react.forwardRef((props, ref)=>{
     const { data, nodeAlignment = 'justify', nodePadding = 16, nodeWidth = 24, style, className, colorScheme = schemeTableau10, ariaLabel = 'Sankey diagram', onLinkClick, onNodeClick } = props;
@@ -125,11 +140,11 @@ const ApSankeyDiagram = /*#__PURE__*/ react.forwardRef((props, ref)=>{
         const alignmentFn = 'left' === nodeAlignment ? sankeyLeft : 'right' === nodeAlignment ? sankeyRight : 'center' === nodeAlignment ? sankeyCenter : sankeyJustify;
         const sankeyGenerator = sankey().nodeId((d)=>d.id).nodeAlign(alignmentFn).nodeWidth(nodeWidth).nodePadding(nodePadding).extent([
             [
-                DIAGRAM_MARGIN_HORIZONTAL,
+                DIAGRAM_MARGIN_LEFT,
                 DIAGRAM_MARGIN_VERTICAL
             ],
             [
-                actualWidth - DIAGRAM_MARGIN_HORIZONTAL,
+                actualWidth - DIAGRAM_MARGIN_RIGHT,
                 actualHeight - DIAGRAM_MARGIN_VERTICAL
             ]
         ]);
@@ -194,20 +209,29 @@ const ApSankeyDiagram = /*#__PURE__*/ react.forwardRef((props, ref)=>{
     ]);
     const nodeData = useMemo(()=>{
         if (!sankeyGraph) return [];
-        const midpoint = actualWidth / 2;
+        const labelPad = parseInt(apollo_core.Spacing.SpacingXs, 10);
+        const ctx = 'undefined' != typeof document ? document.createElement('canvas').getContext('2d') : null;
+        if (ctx) ctx.font = LABEL_CSS_FONT;
+        const columnSet = new Map();
+        for (const n of sankeyGraph.nodes){
+            const ext = n;
+            const x0 = ext.x0 || 0;
+            const x1 = ext.x1 || 0;
+            if (!columnSet.has(x0)) columnSet.set(x0, x1);
+        }
+        const columns = Array.from(columnSet.entries()).map(([x0, x1])=>({
+                x0,
+                x1
+            })).sort((a, b)=>a.x0 - b.x0);
         return sankeyGraph.nodes.map((node, index)=>{
             const extNode = node;
             const x0 = extNode.x0 || 0;
             const x1 = extNode.x1 || 0;
             const y0 = extNode.y0 || 0;
             const y1 = extNode.y1 || 0;
-            const nodeCenter = (x0 + x1) / 2;
-            const labelOnRight = nodeCenter < midpoint;
-            const fullSpace = labelOnRight ? actualWidth - DIAGRAM_MARGIN_HORIZONTAL - x1 - parseInt(apollo_core.Spacing.SpacingXs) : x0 - DIAGRAM_MARGIN_HORIZONTAL - parseInt(apollo_core.Spacing.SpacingXs);
-            const spaceToMidpoint = labelOnRight ? midpoint - x1 - parseInt(apollo_core.Spacing.SpacingXs) : x0 - midpoint - parseInt(apollo_core.Spacing.SpacingXs);
-            const availableSpace = spaceToMidpoint > 0 ? Math.min(fullSpace, spaceToMidpoint) : fullSpace;
-            const maxChars = Math.floor(Math.max(0, availableSpace) / parseInt(apollo_core.Spacing.SpacingXs));
-            const displayLabel = truncateText(extNode.label, maxChars);
+            const colIndex = columns.findIndex((col)=>col.x0 === x0);
+            const nextCol = columns[colIndex + 1];
+            const displayLabel = nextCol && ctx ? truncateToFit(extNode.label, Math.max(0, nextCol.x0 - x1 - labelPad), ctx) : extNode.label;
             return {
                 node: extNode,
                 x: x0,
@@ -215,9 +239,9 @@ const ApSankeyDiagram = /*#__PURE__*/ react.forwardRef((props, ref)=>{
                 width: x1 - x0,
                 height: y1 - y0,
                 color: nodeColorMap.get(extNode.id) || colorScheme[index % colorScheme.length],
-                labelX: labelOnRight ? x1 + parseInt(apollo_core.Spacing.SpacingXs) : x0 - parseInt(apollo_core.Spacing.SpacingXs),
+                labelX: x1 + labelPad,
                 labelY: (y0 + y1) / 2,
-                labelAnchor: labelOnRight ? 'start' : 'end',
+                labelAnchor: 'start',
                 value: extNode.value || 0,
                 displayLabel,
                 fullLabel: extNode.label
@@ -226,8 +250,7 @@ const ApSankeyDiagram = /*#__PURE__*/ react.forwardRef((props, ref)=>{
     }, [
         sankeyGraph,
         nodeColorMap,
-        colorScheme,
-        actualWidth
+        colorScheme
     ]);
     const handleLinkMouseEnter = useCallback((index, centerX, centerY)=>{
         if (selectedLinkIndex === index) return;
@@ -354,7 +377,7 @@ const ApSankeyDiagram = /*#__PURE__*/ react.forwardRef((props, ref)=>{
                                     }),
                                     nodeItem.value > 0 && /*#__PURE__*/ jsx(StyledSankeyNodeValue, {
                                         x: nodeItem.labelX,
-                                        y: nodeItem.labelY + parseInt(apollo_core.Spacing.SpacingM),
+                                        y: nodeItem.labelY + parseInt(apollo_core.Spacing.SpacingM, 10),
                                         dy: "0.35em",
                                         textAnchor: nodeItem.labelAnchor,
                                         children: nodeItem.value

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@uipath/apollo-react",
-  "version": "3.44.0",
+  "version": "3.44.1",
   "description": "Apollo Design System - React component library with Material UI theming",
   "repository": {
     "type": "git",
@@ -198,8 +198,8 @@
     "use-sync-external-store": "^1.2.0",
     "zod": "^4.3.5",
     "zustand": "^5.0.9",
-    "@uipath/apollo-core": "5.7.0",
-    "@uipath/apollo-wind": "0.10.0"
+    "@uipath/apollo-wind": "0.10.0",
+    "@uipath/apollo-core": "5.7.0"
   },
   "devDependencies": {
     "@lingui/cli": "^5.6.1",