@uipath/apollo-react 3.29.0 → 3.29.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
  1. package/dist/material/components/ap-sankey-diagram/ApSankeyDiagram.cjs +31 -11
  2. package/dist/material/components/ap-sankey-diagram/ApSankeyDiagram.d.ts.map +1 -1
  3. package/dist/material/components/ap-sankey-diagram/ApSankeyDiagram.js +31 -11
  4. package/package.json +1 -1
package/dist/material/components/ap-sankey-diagram/ApSankeyDiagram.cjs CHANGED
@@ -74,15 +74,17 @@ const StyledSankeyLink = (0, styles_namespaceObject.styled)('path')({
74
74
  const StyledSankeyNodeLabel = (0, styles_namespaceObject.styled)('text')({
75
75
  fontSize: apollo_core_default().FontVariantToken.fontSizeS,
76
76
  fill: 'var(--color-foreground-emp)',
77
- pointerEvents: 'none',
78
- userSelect: 'none'
77
+ pointerEvents: 'auto',
78
+ userSelect: 'none',
79
+ cursor: 'default'
79
80
  });
80
81
  const StyledSankeyNodeValue = (0, styles_namespaceObject.styled)('text')({
81
82
  fontSize: apollo_core_default().FontVariantToken.fontSizeS,
82
83
  fontWeight: apollo_core_default().FontFamily.FontWeightMedium,
83
84
  fill: 'var(--color-foreground-emp)',
84
- pointerEvents: 'none',
85
- userSelect: 'none'
85
+ pointerEvents: 'auto',
86
+ userSelect: 'none',
87
+ cursor: 'default'
86
88
  });
87
89
  const LinkTooltipContent = (0, styles_namespaceObject.styled)(material_namespaceObject.Paper)({
88
90
  backgroundColor: 'var(--color-background)',
@@ -114,8 +116,12 @@ const TooltipValue = (0, styles_namespaceObject.styled)('span')({
114
116
  color: 'var(--color-foreground-emp)',
115
117
  fontWeight: apollo_core_default().FontFamily.FontWeightSemibold
116
118
  });
117
- const DIAGRAM_MARGIN_HORIZONTAL = 1;
119
+ const DIAGRAM_MARGIN_HORIZONTAL = 80;
118
120
  const DIAGRAM_MARGIN_VERTICAL = 5;
121
+ const truncateText = (text, maxChars)=>{
122
+ if (text.length <= maxChars) return text;
123
+ return `${text.substring(0, maxChars - 1)}…`;
124
+ };
119
125
  const ApSankeyDiagram = /*#__PURE__*/ external_react_default().forwardRef((props, ref)=>{
120
126
  const { data, nodeAlignment = 'justify', nodePadding = 16, nodeWidth = 24, style, className, colorScheme = external_d3_scale_chromatic_namespaceObject.schemeTableau10, ariaLabel = 'Sankey diagram', onLinkClick, onNodeClick } = props;
121
127
  const containerRef = (0, external_react_namespaceObject.useRef)(null);
@@ -227,13 +233,20 @@ const ApSankeyDiagram = /*#__PURE__*/ external_react_default().forwardRef((props
227
233
  ]);
228
234
  const nodeData = (0, external_react_namespaceObject.useMemo)(()=>{
229
235
  if (!sankeyGraph) return [];
236
+ const midpoint = actualWidth / 2;
230
237
  return sankeyGraph.nodes.map((node, index)=>{
231
238
  const extNode = node;
232
239
  const x0 = extNode.x0 || 0;
233
240
  const x1 = extNode.x1 || 0;
234
241
  const y0 = extNode.y0 || 0;
235
242
  const y1 = extNode.y1 || 0;
236
- const isLeftSide = x0 < actualWidth / 2;
243
+ const nodeCenter = (x0 + x1) / 2;
244
+ const labelOnRight = nodeCenter < midpoint;
245
+ const fullSpace = labelOnRight ? actualWidth - DIAGRAM_MARGIN_HORIZONTAL - x1 - parseInt(apollo_core_default().Spacing.SpacingXs) : x0 - DIAGRAM_MARGIN_HORIZONTAL - parseInt(apollo_core_default().Spacing.SpacingXs);
246
+ const spaceToMidpoint = labelOnRight ? midpoint - x1 - parseInt(apollo_core_default().Spacing.SpacingXs) : x0 - midpoint - parseInt(apollo_core_default().Spacing.SpacingXs);
247
+ const availableSpace = spaceToMidpoint > 0 ? Math.min(fullSpace, spaceToMidpoint) : fullSpace;
248
+ const maxChars = Math.floor(Math.max(0, availableSpace) / parseInt(apollo_core_default().Spacing.SpacingXs));
249
+ const displayLabel = truncateText(extNode.label, maxChars);
237
250
  return {
238
251
  node: extNode,
239
252
  x: x0,
@@ -241,10 +254,12 @@ const ApSankeyDiagram = /*#__PURE__*/ external_react_default().forwardRef((props
241
254
  width: x1 - x0,
242
255
  height: y1 - y0,
243
256
  color: nodeColorMap.get(extNode.id) || colorScheme[index % colorScheme.length],
244
- labelX: isLeftSide ? x1 + parseInt(apollo_core_default().Spacing.SpacingXs) : x0 - parseInt(apollo_core_default().Spacing.SpacingXs),
257
+ labelX: labelOnRight ? x1 + parseInt(apollo_core_default().Spacing.SpacingXs) : x0 - parseInt(apollo_core_default().Spacing.SpacingXs),
245
258
  labelY: (y0 + y1) / 2,
246
- labelAnchor: isLeftSide ? 'start' : 'end',
247
- value: extNode.value || 0
259
+ labelAnchor: labelOnRight ? 'start' : 'end',
260
+ value: extNode.value || 0,
261
+ displayLabel,
262
+ fullLabel: extNode.label
248
263
  };
249
264
  });
250
265
  }, [
@@ -364,12 +379,17 @@ const ApSankeyDiagram = /*#__PURE__*/ external_react_default().forwardRef((props
364
379
  onMouseLeave: handleNodeMouseLeave,
365
380
  onClick: (e)=>onNodeClick?.(nodeItem.node, e)
366
381
  }),
367
- /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(StyledSankeyNodeLabel, {
382
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(StyledSankeyNodeLabel, {
368
383
  x: nodeItem.labelX,
369
384
  y: nodeItem.labelY,
370
385
  dy: "0.35em",
371
386
  textAnchor: nodeItem.labelAnchor,
372
- children: nodeItem.node.label
387
+ children: [
388
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("title", {
389
+ children: nodeItem.fullLabel
390
+ }),
391
+ nodeItem.displayLabel
392
+ ]
373
393
  }),
374
394
  nodeItem.value > 0 && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(StyledSankeyNodeValue, {
375
395
  x: nodeItem.labelX,
package/dist/material/components/ap-sankey-diagram/ApSankeyDiagram.d.ts.map CHANGED
@@ -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;AA6H5F,eAAO,MAAM,eAAe,6FAwZ3B,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;AAqI5F,eAAO,MAAM,eAAe,6FAob3B,CAAC"}
package/dist/material/components/ap-sankey-diagram/ApSankeyDiagram.js CHANGED
@@ -35,15 +35,17 @@ const StyledSankeyLink = styled('path')({
35
35
  const StyledSankeyNodeLabel = styled('text')({
36
36
  fontSize: apollo_core.FontVariantToken.fontSizeS,
37
37
  fill: 'var(--color-foreground-emp)',
38
- pointerEvents: 'none',
39
- userSelect: 'none'
38
+ pointerEvents: 'auto',
39
+ userSelect: 'none',
40
+ cursor: 'default'
40
41
  });
41
42
  const StyledSankeyNodeValue = styled('text')({
42
43
  fontSize: apollo_core.FontVariantToken.fontSizeS,
43
44
  fontWeight: apollo_core.FontFamily.FontWeightMedium,
44
45
  fill: 'var(--color-foreground-emp)',
45
- pointerEvents: 'none',
46
- userSelect: 'none'
46
+ pointerEvents: 'auto',
47
+ userSelect: 'none',
48
+ cursor: 'default'
47
49
  });
48
50
  const LinkTooltipContent = styled(Paper)({
49
51
  backgroundColor: 'var(--color-background)',
@@ -75,8 +77,12 @@ const TooltipValue = styled('span')({
75
77
  color: 'var(--color-foreground-emp)',
76
78
  fontWeight: apollo_core.FontFamily.FontWeightSemibold
77
79
  });
78
- const DIAGRAM_MARGIN_HORIZONTAL = 1;
80
+ const DIAGRAM_MARGIN_HORIZONTAL = 80;
79
81
  const DIAGRAM_MARGIN_VERTICAL = 5;
82
+ const truncateText = (text, maxChars)=>{
83
+ if (text.length <= maxChars) return text;
84
+ return `${text.substring(0, maxChars - 1)}…`;
85
+ };
80
86
  const ApSankeyDiagram = /*#__PURE__*/ react.forwardRef((props, ref)=>{
81
87
  const { data, nodeAlignment = 'justify', nodePadding = 16, nodeWidth = 24, style, className, colorScheme = schemeTableau10, ariaLabel = 'Sankey diagram', onLinkClick, onNodeClick } = props;
82
88
  const containerRef = useRef(null);
@@ -188,13 +194,20 @@ const ApSankeyDiagram = /*#__PURE__*/ react.forwardRef((props, ref)=>{
188
194
  ]);
189
195
  const nodeData = useMemo(()=>{
190
196
  if (!sankeyGraph) return [];
197
+ const midpoint = actualWidth / 2;
191
198
  return sankeyGraph.nodes.map((node, index)=>{
192
199
  const extNode = node;
193
200
  const x0 = extNode.x0 || 0;
194
201
  const x1 = extNode.x1 || 0;
195
202
  const y0 = extNode.y0 || 0;
196
203
  const y1 = extNode.y1 || 0;
197
- const isLeftSide = x0 < actualWidth / 2;
204
+ const nodeCenter = (x0 + x1) / 2;
205
+ const labelOnRight = nodeCenter < midpoint;
206
+ const fullSpace = labelOnRight ? actualWidth - DIAGRAM_MARGIN_HORIZONTAL - x1 - parseInt(apollo_core.Spacing.SpacingXs) : x0 - DIAGRAM_MARGIN_HORIZONTAL - parseInt(apollo_core.Spacing.SpacingXs);
207
+ const spaceToMidpoint = labelOnRight ? midpoint - x1 - parseInt(apollo_core.Spacing.SpacingXs) : x0 - midpoint - parseInt(apollo_core.Spacing.SpacingXs);
208
+ const availableSpace = spaceToMidpoint > 0 ? Math.min(fullSpace, spaceToMidpoint) : fullSpace;
209
+ const maxChars = Math.floor(Math.max(0, availableSpace) / parseInt(apollo_core.Spacing.SpacingXs));
210
+ const displayLabel = truncateText(extNode.label, maxChars);
198
211
  return {
199
212
  node: extNode,
200
213
  x: x0,
@@ -202,10 +215,12 @@ const ApSankeyDiagram = /*#__PURE__*/ react.forwardRef((props, ref)=>{
202
215
  width: x1 - x0,
203
216
  height: y1 - y0,
204
217
  color: nodeColorMap.get(extNode.id) || colorScheme[index % colorScheme.length],
205
- labelX: isLeftSide ? x1 + parseInt(apollo_core.Spacing.SpacingXs) : x0 - parseInt(apollo_core.Spacing.SpacingXs),
218
+ labelX: labelOnRight ? x1 + parseInt(apollo_core.Spacing.SpacingXs) : x0 - parseInt(apollo_core.Spacing.SpacingXs),
206
219
  labelY: (y0 + y1) / 2,
207
- labelAnchor: isLeftSide ? 'start' : 'end',
208
- value: extNode.value || 0
220
+ labelAnchor: labelOnRight ? 'start' : 'end',
221
+ value: extNode.value || 0,
222
+ displayLabel,
223
+ fullLabel: extNode.label
209
224
  };
210
225
  });
211
226
  }, [
@@ -325,12 +340,17 @@ const ApSankeyDiagram = /*#__PURE__*/ react.forwardRef((props, ref)=>{
325
340
  onMouseLeave: handleNodeMouseLeave,
326
341
  onClick: (e)=>onNodeClick?.(nodeItem.node, e)
327
342
  }),
328
- /*#__PURE__*/ jsx(StyledSankeyNodeLabel, {
343
+ /*#__PURE__*/ jsxs(StyledSankeyNodeLabel, {
329
344
  x: nodeItem.labelX,
330
345
  y: nodeItem.labelY,
331
346
  dy: "0.35em",
332
347
  textAnchor: nodeItem.labelAnchor,
333
- children: nodeItem.node.label
348
+ children: [
349
+ /*#__PURE__*/ jsx("title", {
350
+ children: nodeItem.fullLabel
351
+ }),
352
+ nodeItem.displayLabel
353
+ ]
334
354
  }),
335
355
  nodeItem.value > 0 && /*#__PURE__*/ jsx(StyledSankeyNodeValue, {
336
356
  x: nodeItem.labelX,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uipath/apollo-react",
3
- "version": "3.29.0",
3
+ "version": "3.29.1",
4
4
  "description": "Apollo Design System - React component library with Material UI theming",
5
5
  "repository": {
6
6
  "type": "git",