datastake-daf 0.6.352 → 0.6.353

package/dist/components/index.js

@@ -51378,6 +51378,7 @@ function NameNode({
     token
   } = useToken$7();
   const translateFN = typeof data?.t === "function" ? data.t : key => key;
+  const isPdf = data?.isPdf;
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsx(react.Handle, {
       type: "source",
@@ -51396,6 +51397,7 @@ function NameNode({
         opacity: 0
       }
     }), /*#__PURE__*/jsxRuntime.jsxs(Style$d, {
+      $isPdf: isPdf,
       style: {
         opacity: data.isEmpty ? 0.5 : 1
       },
@@ -51446,7 +51448,7 @@ function NameNode({
               }
             })
           }) : null]
-        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        }), !isPdf && /*#__PURE__*/jsxRuntime.jsx("div", {
           style: {
             marginLeft: "auto"
           },
@@ -51483,27 +51485,32 @@ function NameNode({
   });
 }
 const Style$d = dt.div`
-	width: ${NAME_CARD_WIDTH}px;
-	display: flex;
-	background: white;
-	border-radius: 8px;
-	box-shadow: 0px 3.76px 10.03px 0px #00000014;
-	box-shadow: 0px 1.88px 3.76px -2.51px #0000001f;
-	overflow: hidden;
-	box-shadow: 0px 5.64px 17.56px 5.02px #0000000d;
+    width: ${NAME_CARD_WIDTH}px;
+    display: flex;
+    background: white;
+    border-radius: 8px;
+    /* Box-shadows for screen */
+    box-shadow: 0px 3.76px 10.03px 0px #00000014;
+    box-shadow: 0px 1.88px 3.76px -2.51px #0000001f;
+    overflow: hidden;
+    box-shadow: 0px 5.64px 17.56px 5.02px #0000000d;
+    /* Ensure borders/colors survive PDF rendering */
+    border: ${props => props.$isPdf ? '1px solid var(--base-gray-30)' : 'none'};
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
 
-	.left {
-		width: 32px;
-		background: red;
-		border-top-left-radius: 12px;
-		border-bottom-left-radius: 12px;
-	}
+    .left {
+        width: 32px;
+        background: red;
+        border-top-left-radius: 12px;
+        border-bottom-left-radius: 12px;
+    }
 
-	.right {
-		padding: 16px 12px;
-		width: 100%
-		border-bottom: 1px solid var(--base-gray-30);
-	}
+    .right {
+        padding: 16px 12px;
+        width: 100%;
+        border-bottom: 1px solid var(--base-gray-30);
+    }
 `;
 
 const Style$c = dt.div`
@@ -51738,15 +51745,28 @@ function ToolTipEdge({
   data,
   targetPosition
 }) {
-  const [smoothPath] = react.getSmoothStepPath({
-    sourceX,
-    sourceY,
-    sourcePosition,
-    targetX,
-    targetY,
-    targetPosition,
-    borderRadius: 15
+  console.log({
+    data
   });
+  let edgePath;
+  if (data?.isPdf || data?.isOnlyOne) {
+    [edgePath] = react.getStraightPath({
+      sourceX,
+      sourceY,
+      targetX,
+      targetY
+    });
+  } else {
+    [edgePath] = react.getSmoothStepPath({
+      sourceX,
+      sourceY,
+      sourcePosition,
+      targetX,
+      targetY,
+      targetPosition,
+      borderRadius: 15
+    });
+  }
   const center = react.getEdgeCenter({
     sourceX,
     sourceY,
@@ -51755,7 +51775,7 @@ function ToolTipEdge({
   });
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsx(react.BaseEdge, {
-      path: smoothPath
+      path: edgePath
     }), /*#__PURE__*/jsxRuntime.jsx(react.EdgeLabelRenderer, {
       children: /*#__PURE__*/jsxRuntime.jsx("div", {
         className: "button-edge__label nodrag nopan",
@@ -52078,6 +52098,7 @@ const BaseGraph = /*#__PURE__*/React.forwardRef(function BaseGraph({
   t,
   withDuration = true,
   onFilterChange,
+  isPdf,
   ...props
 }, ref) {
   const {
@@ -52134,7 +52155,7 @@ const BaseGraph = /*#__PURE__*/React.forwardRef(function BaseGraph({
           duration: withDuration ? 300 : undefined
         },
         ...props,
-        children: /*#__PURE__*/jsxRuntime.jsxs(react.Controls, {
+        children: !isPdf && /*#__PURE__*/jsxRuntime.jsxs(react.Controls, {
           position: "bottom-right",
           showFitView: false,
           showInteractive: false,
@@ -52847,7 +52868,8 @@ function StakeholderMappings(_ref3) {
           data: {
             name: node === null || node === void 0 || (_node$data6 = node.data) === null || _node$data6 === void 0 ? void 0 : _node$data6.name,
             content: node === null || node === void 0 || (_node$data7 = node.data) === null || _node$data7 === void 0 ? void 0 : _node$data7.content,
-            isOnlyOne: true
+            isOnlyOne: true,
+            isPdf: true
           },
           targetHandle: node.data.order % 2 === 0 ? "left-handle-target" : "right-handle-target"
         });
@@ -52966,7 +52988,8 @@ function StakeholderMappings(_ref3) {
         duration: 300
       });
     },
-    ref: reactFlowWrapper
+    ref: reactFlowWrapper,
+    isPdf: isPdf
   });
 }
 var index$1 = withProvider(StakeholderMappings);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "datastake-daf",
-	"version": "0.6.352",
+	"version": "0.6.353",
 	"dependencies": {
 		"@ant-design/icons": "^5.2.5",
 		"@antv/g2": "^5.1.1",

package/src/@daf/core/components/Charts/ColumnChart/ColumnChart.stories.jsx

@@ -457,6 +457,34 @@ export const Pdf = {
 		showBackground: true,
 		isPercentage: true,
 		shouldSeperateLegendName: true,
+		formattedXAxis: (s) => {
+			if (!s) return "";
+		  
+			const limit = 20;
+			let result = "";
+			let line = "";
+		  
+			for (let word of s.split(" ")) {
+			  if ((line + word).length <= limit) {
+				line += (line ? " " : "") + word;
+			  } else if (word.length > limit) {
+				// break long word with hyphen
+				while (word.length > limit) {
+				  result += word.slice(0, limit - 1) + "-\n";
+				  word = word.slice(limit - 1);
+				}
+				line = word;
+			  } else {
+				// move current line into result
+				if (line) result += line + "\n";
+				line = word;
+			  }
+			}
+		  
+			if (line) result += line;
+		  
+			return result;
+		  },
 	},
 	render: (args) => {
 		return <Widget title="Pdf Column Chart" className={"with-border-header"}>

package/src/@daf/core/components/Graphs/StakeholderMappings/index.jsx

@@ -301,6 +301,7 @@ function StakeholderMappings({
 						name: node?.data?.name,
 						content: node?.data?.content,
 						isOnlyOne: true,
+						isPdf: true,
 					},
 					targetHandle:
 						node.data.order % 2 === 0 ? "left-handle-target" : "right-handle-target",
@@ -444,6 +445,7 @@ function StakeholderMappings({
 				});
 			}}
 			ref={reactFlowWrapper}
+			isPdf={isPdf}
 		/>
 	);
 }

package/src/@daf/core/components/Graphs/components/BaseGraph.jsx

@@ -32,6 +32,7 @@ const BaseGraph = forwardRef(function BaseGraph(
 		t,
 		withDuration = true,
 		onFilterChange,
+		isPdf,
 		...props
 	},
 	ref,
@@ -87,43 +88,45 @@ const BaseGraph = forwardRef(function BaseGraph(
 					}}
 					{...props}
 				>
-					<Controls position="bottom-right" showFitView={false} showInteractive={false}>
-						<ControlButton
-							onClick={() => {
-								fitView({
-									padding: 0.1,
-									nodes: [...nodesToFit],
-									duration: withDuration ? 300 : undefined,
-								});
-							}}
-						>
-							<AimOutlined height={20} width={20} />
-						</ControlButton>
-						<ControlButton
-							onClick={() => {
-								const viewport = getViewport();
-								setViewport({
-									x: viewport.x,
-									y: viewport.y + 20,
-									zoom: viewport.zoom,
-								});
-							}}
-						>
-							<UpOutlined height={20} width={20}></UpOutlined>
-						</ControlButton>
-						<ControlButton
-							onClick={() => {
-								const viewport = getViewport();
-								setViewport({
-									x: viewport.x,
-									y: viewport.y - 20,
-									zoom: viewport.zoom,
-								});
-							}}
-						>
-							<DownOutlined height={20} width={20}></DownOutlined>
-						</ControlButton>
-					</Controls>
+					{!isPdf && (
+						<Controls position="bottom-right" showFitView={false} showInteractive={false}>
+							<ControlButton
+								onClick={() => {
+									fitView({
+										padding: 0.1,
+										nodes: [...nodesToFit],
+										duration: withDuration ? 300 : undefined,
+									});
+								}}
+							>
+								<AimOutlined height={20} width={20} />
+							</ControlButton>
+							<ControlButton
+								onClick={() => {
+									const viewport = getViewport();
+									setViewport({
+										x: viewport.x,
+										y: viewport.y + 20,
+										zoom: viewport.zoom,
+									});
+								}}
+							>
+								<UpOutlined height={20} width={20}></UpOutlined>
+							</ControlButton>
+							<ControlButton
+								onClick={() => {
+									const viewport = getViewport();
+									setViewport({
+										x: viewport.x,
+										y: viewport.y - 20,
+										zoom: viewport.zoom,
+									});
+								}}
+							>
+								<DownOutlined height={20} width={20}></DownOutlined>
+							</ControlButton>
+						</Controls>	
+					)}
 				</ReactFlow>
 			</div>
 		</ComponentWithFocus>

package/src/@daf/core/components/Graphs/components/Edges/TooltipEdge.jsx

@@ -1,10 +1,10 @@
 import { Popover, Tag } from "antd";
 import {
-	BaseEdge,
-	EdgeLabelRenderer,
-	getEdgeCenter,
-	getSmoothStepPath,
-	// getStraightPath,
+    BaseEdge,
+    EdgeLabelRenderer,
+    getEdgeCenter,
+    getSmoothStepPath,
+    getStraightPath,
 } from "@xyflow/react";
 import { renderTooltipJsx } from "../../../../../utils/tooltip.js";
 import CustomIcon from "../../../Icon/CustomIcon.jsx";
@@ -22,25 +22,36 @@ export const edgeStroke = "#9DA4AE";
 export const edgeStrokeActive = "#9254DE";
 
 export default function ToolTipEdge({
-	sourceX,
-	sourceY,
-	targetX,
-	targetY,
-	sourcePosition,
-	data,
-	targetPosition,
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    data,
+    targetPosition,
 }) {
-	const [smoothPath] = getSmoothStepPath({
-		sourceX,
-		sourceY,
-		sourcePosition,
-		targetX,
-		targetY,
-		targetPosition,
-		borderRadius: 15,
-	});
+	console.log({data})
+    let edgePath;
+    if (data?.isPdf || data?.isOnlyOne) {
+        [edgePath] = getStraightPath({
+            sourceX,
+            sourceY,
+            targetX,
+            targetY,
+        });
+    } else {
+        [edgePath] = getSmoothStepPath({
+            sourceX,
+            sourceY,
+            sourcePosition,
+            targetX,
+            targetY,
+            targetPosition,
+            borderRadius: 15,
+        });
+    }
 
-	const center = getEdgeCenter({
+    const center = getEdgeCenter({
 		sourceX,
 		sourceY,
 		targetX,
@@ -49,7 +60,7 @@ export default function ToolTipEdge({
 
 	return (
 		<>
-			<BaseEdge path={smoothPath} />
+            <BaseEdge path={edgePath} />
 			<EdgeLabelRenderer>
 				<div
 					className="button-edge__label nodrag nopan"

package/src/@daf/core/components/Graphs/components/Nodes/NameNode.jsx

@@ -13,6 +13,8 @@ const { useToken } = theme;
 export default function NameNode({ data }) {
   const { token } = useToken();
   const translateFN = typeof data?.t === "function" ? data.t : (key) => key;
+  const isPdf = data?.isPdf;
+
   return (
     <>
       <Handle
@@ -34,6 +36,7 @@ export default function NameNode({ data }) {
         }}
       />
       <Style
+        $isPdf={isPdf}
         style={{
           opacity: data.isEmpty ? 0.5 : 1,
         }}
@@ -95,19 +98,21 @@ export default function NameNode({ data }) {
             ) : null}
           </div>
 
-          <div
-            style={{
-              marginLeft: "auto",
-            }}
-            className="go-to"
-            onClick={() => {
-              if (typeof data.onClick === "function") {
-                data.onClick();
-              }
-            }}
-          >
-            <CustomIcon height={14} width={14} name="LinkNewTab" />
-          </div>
+          {!isPdf && (
+            <div
+                style={{
+                  marginLeft: "auto",
+                }}
+                className="go-to"
+                onClick={() => {
+                  if (typeof data.onClick === "function") {
+                    data.onClick();
+                  }
+                }}
+              >
+                <CustomIcon height={14} width={14} name="LinkNewTab" />
+            </div> 
+          )}
         </div>
       </Style>
       <Handle
@@ -129,25 +134,30 @@ export default function NameNode({ data }) {
 }
 
 const Style = styled.div`
-	width: ${NAME_CARD_WIDTH}px;
-	display: flex;
-	background: white;
-	border-radius: 8px;
-	box-shadow: 0px 3.76px 10.03px 0px #00000014;
-	box-shadow: 0px 1.88px 3.76px -2.51px #0000001f;
-	overflow: hidden;
-	box-shadow: 0px 5.64px 17.56px 5.02px #0000000d;
+    width: ${NAME_CARD_WIDTH}px;
+    display: flex;
+    background: white;
+    border-radius: 8px;
+    /* Box-shadows for screen */
+    box-shadow: 0px 3.76px 10.03px 0px #00000014;
+    box-shadow: 0px 1.88px 3.76px -2.51px #0000001f;
+    overflow: hidden;
+    box-shadow: 0px 5.64px 17.56px 5.02px #0000000d;
+    /* Ensure borders/colors survive PDF rendering */
+    border: ${(props) => (props.$isPdf ? '1px solid var(--base-gray-30)' : 'none')};
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
 
-	.left {
-		width: 32px;
-		background: red;
-		border-top-left-radius: 12px;
-		border-bottom-left-radius: 12px;
-	}
+    .left {
+        width: 32px;
+        background: red;
+        border-top-left-radius: 12px;
+        border-bottom-left-radius: 12px;
+    }
 
-	.right {
-		padding: 16px 12px;
-		width: 100%
-		border-bottom: 1px solid var(--base-gray-30);
-	}
+    .right {
+        padding: 16px 12px;
+        width: 100%;
+        border-bottom: 1px solid var(--base-gray-30);
+    }
 `;