datastake-daf 0.6.368 → 0.6.370

package/dist/hooks/index.js

@@ -200,7 +200,6 @@ class StorageManager {
   }
 }
 
-const NEW_PAGINATION_TITLES = ["nashiriki"];
 const useFilters = ({
   view,
   module,
@@ -214,57 +213,55 @@ const useFilters = ({
   doPagination = true,
   getRedirectLink
 }) => {
-  const PAGE = NEW_PAGINATION_TITLES.includes(module) ? "skip" : "page";
-  const PAGE_SIZE = NEW_PAGINATION_TITLES.includes(module) ? "take" : "pageSize";
   const params = React.useMemo(() => new URLSearchParams(location.search), [location.search]);
   const [activeFilters, setActiveFilters] = React.useState(defaultActiveFilters || getDefaultActiveFilters(params, selectFiltersConfig, defaultPageSize, defaultUrlParams, doPagination));
   const [pagination, setPagination] = React.useState(defaultActiveFilters ? {
-    current: defaultActiveFilters[PAGE] || 1,
-    [PAGE_SIZE]: defaultActiveFilters[PAGE_SIZE] || defaultPageSize,
+    current: defaultActiveFilters.page || 1,
+    pageSize: defaultActiveFilters.pageSize || defaultPageSize,
     showSizeChanger: true
   } : {
-    current: !isNaN(Number(params.get(PAGE))) ? Number(params.get(PAGE)) || 1 : 1,
-    [PAGE_SIZE]: !isNaN(Number(params.get(PAGE_SIZE))) ? Number(params.get(PAGE_SIZE)) || defaultPageSize : defaultPageSize,
+    current: !isNaN(Number(params.get('page'))) ? Number(params.get('page')) || 1 : 1,
+    pageSize: !isNaN(Number(params.get('pageSize'))) ? Number(params.get('pageSize')) || defaultPageSize : defaultPageSize,
     showSizeChanger: true
   });
   React.useEffect(() => {
     if (defaultActiveFilters) {
       setPagination(prev => ({
         ...prev,
-        current: defaultActiveFilters[PAGE] || 1,
-        [PAGE_SIZE]: defaultActiveFilters[PAGE_SIZE] || defaultPageSize,
+        current: defaultActiveFilters.page || 1,
+        pageSize: defaultActiveFilters.pageSize || defaultPageSize,
         showSizeChanger: true
       }));
       return;
     }
     setPagination(prev => ({
       ...prev,
-      current: !isNaN(Number(params.get(PAGE))) ? Number(params.get(PAGE)) || 1 : 1,
-      [PAGE_SIZE]: !isNaN(Number(params.get(PAGE_SIZE))) ? Number(params.get(PAGE_SIZE)) || defaultPageSize : defaultPageSize,
+      current: !isNaN(Number(params.get('page'))) ? Number(params.get('page')) || 1 : 1,
+      pageSize: !isNaN(Number(params.get('pageSize'))) ? Number(params.get('pageSize')) || defaultPageSize : defaultPageSize,
       showSizeChanger: true
     }));
   }, []);
   const updateQuery = React.useCallback((filters, page) => {
     const qs = Object.keys(filters).filter(key => {
       if (!doPagination) {
-        return !!filters[key] && key !== PAGE && key !== PAGE_SIZE;
+        return !!filters[key] && key !== 'page' && key !== 'pageSize';
       }
       return !!filters[key];
     }).map(key => {
-      if (filters[key] && typeof filters[key] === "object") {
+      if (filters[key] && typeof filters[key] === 'object') {
         return `${key}=${JSON.stringify(filters[key])}`;
       }
       return `${key}=${filters[key]}`;
-    }).join("&");
+    }).join('&');
     if (view) {
-      if (typeof getRedirectLink === "function") {
-        goTo(getRedirectLink(view === "mine-monitoring" ? qs !== "" ? `${location.pathname}?${qs}` : doPagination ? `${location.pathname}?${PAGE}=${page}` : location.pathname : qs !== "" ? `${`/app/${view}`}?${qs}` : doPagination ? `${`/app/${view}`}?${PAGE}=${page}` : `${`/app/${view}`}`));
+      if (typeof getRedirectLink === 'function') {
+        goTo(getRedirectLink(view === 'mine-monitoring' ? qs !== '' ? `${location.pathname}?${qs}` : doPagination ? `${location.pathname}?page=${page}` : location.pathname : qs !== '' ? `${`/app/${view}`}?${qs}` : doPagination ? `${`/app/${view}`}?page=${page}` : `${`/app/${view}`}`));
         return;
       }
-      if (view === "mine-monitoring") {
-        goTo(qs !== "" ? `${location.pathname}?${qs}` : doPagination ? `${location.pathname}?${PAGE}=${page}` : location.pathname);
+      if (view === 'mine-monitoring') {
+        goTo(qs !== '' ? `${location.pathname}?${qs}` : doPagination ? `${location.pathname}?page=${page}` : location.pathname);
       } else {
-        goTo(qs !== "" ? `${`/app/${module}/${view}`}?${qs}` : doPagination ? `${`/app/${module}/${view}`}?${PAGE}=${page}` : `${`/app/${module}/${view}`}`);
+        goTo(qs !== '' ? `${`/app/${module}/${view}`}?${qs}` : doPagination ? `${`/app/${module}/${view}`}?page=${page}` : `${`/app/${module}/${view}`}`);
       }
     }
   }, [module, view, location.pathname]); // Updated dependency array
@@ -297,9 +294,9 @@ const useFilters = ({
     const filters = StorageManager.saveFilters(module, view, {
       ...filteredFilters
     });
-    if (!filters[PAGE_SIZE]) {
-      filters[PAGE] = 1;
-      filters[PAGE_SIZE] = pagination[PAGE_SIZE];
+    if (!filters.pageSize) {
+      filters.page = 1;
+      filters.pageSize = pagination.pageSize;
     }
     updateQuery(filters, 1);
   }, [activeFilters]);
@@ -310,7 +307,7 @@ const useFilters = ({
         const {
           show
         } = conf;
-        if (typeof show === "function") {
+        if (typeof show === 'function') {
           if (show(filters)) {
             return all;
           }
@@ -328,7 +325,7 @@ const useFilters = ({
         ...prev
       };
       Object.keys(o).forEach(k => {
-        if (Object.keys(selectFiltersConfig).includes(k) || k === "authorId") {
+        if (Object.keys(selectFiltersConfig).includes(k) || k === 'authorId') {
           delete o[k];
         }
       });
@@ -336,7 +333,7 @@ const useFilters = ({
         o[k] = v;
       });
       if (doPagination) {
-        o[PAGE] = 1;
+        o.page = 1;
       }
       return o;
     });
@@ -356,11 +353,11 @@ const useFilters = ({
     } = sorter || {};
     let fs = {
       ...activeFilters,
-      [PAGE]: page[PAGE_SIZE] !== activeFilters[PAGE_SIZE] ? 1 : page.current,
-      [PAGE_SIZE]: page[PAGE_SIZE] || defaultPageSize
+      page: page.pageSize !== activeFilters.pageSize ? 1 : page.current,
+      pageSize: page.pageSize || defaultPageSize
     };
     if (sorter && (columnKey !== sortBy || order !== sortDir)) {
-      fs[PAGE] = 1;
+      fs.page = 1;
     }
     if (order) {
       fs = {
@@ -370,8 +367,8 @@ const useFilters = ({
       };
     } else if (sortBy || sortDir) {
       fs = Object.keys(fs).reduce((all, key) => {
-        if (key !== "sortDir" && key !== "sortBy") {
-          if (key === PAGE || key === PAGE_SIZE) {
+        if (key !== 'sortDir' && key !== 'sortBy') {
+          if (key === 'page' || key === 'pageSize') {
             all[key] = fs[key];
           } else {
             all[key] = activeFilters[key];
@@ -385,19 +382,19 @@ const useFilters = ({
       page.current = 1;
     }
     const filters = StorageManager.saveFilters(module, view, {
-      [PAGE]: page.current
+      page: page.current
     }, true);
     updateQuery(filters, page.current);
     setPagination(prev => ({
       ...prev,
-      current: fs[PAGE],
-      [PAGE_SIZE]: fs[PAGE_SIZE] || defaultPageSize
+      current: fs.page,
+      pageSize: fs.pageSize || defaultPageSize
     }));
   };
   const onSearch = React.useCallback((activeFilter, value) => {
     setActiveFilters(prev => ({
       ...prev,
-      [PAGE]: 1,
+      page: 1,
       searchParams: activeFilter,
       search: value
     }));
@@ -407,7 +404,7 @@ const useFilters = ({
     }));
   }, []);
   const totalPages = React.useMemo(() => {
-    return Math.ceil(pagination.total / pagination[PAGE_SIZE]);
+    return Math.ceil(pagination.total / pagination.pageSize);
   }, [pagination]);
   const canGoPrev = React.useMemo(() => pagination.current !== 1, [pagination]);
   const canGoNext = React.useMemo(() => pagination.current !== totalPages && totalPages, [pagination, totalPages]);
@@ -1162,8 +1159,6 @@ const useIsMobile = () => {
   return isMobile;
 };
 
-const PAGE = "page";
-const PAGE_SIZE = "pageSize";
 function useSource({
   user = {},
   t = () => {},
@@ -1182,8 +1177,8 @@ function useSource({
         const {
           data
         } = await getData({
-          [PAGE]: 1,
-          [PAGE_SIZE]: 100,
+          page: 1,
+          pageSize: 100,
           type: "partners"
         });
         if (id === undefined) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "datastake-daf",
-	"version": "0.6.368",
+	"version": "0.6.370",
 	"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

@@ -14,6 +14,7 @@ import {
 	MAIN_NODE_HEIGHT,
 	ICON_NODE_WIDTH,
 	ICON_NODE_HEIGHT,
+	NAME_CARD_HEIGHT,
 } from "../components/Nodes/index.jsx";
 
 const DATA_NODE_SIZE = {
@@ -72,6 +73,7 @@ function positionDataNodes({
 	mainNode,
 	type,
 	hasContent,
+	isPdf,
 }) {
 	const DATA_NODE_WIDTH = DATA_NODE_SIZE[type].width;
 	const DATA_NODE_HEIGHT = DATA_NODE_SIZE[type].height;
@@ -103,13 +105,46 @@ function positionDataNodes({
 	const END_Y = startY + totalHeight;
 
 	const yOffset = index * MIN_SPACE_REQUIRED;
+	let yPosition;
 
-	let yPosition = startY + yOffset;
 
-	if (isAboveMainNode && END_Y >= mainNode.position.y + DATA_NODE_HEIGHT / 2) {
-		yPosition = mainNode.position.y + DATA_NODE_HEIGHT / 2 - totalHeight + yOffset;
-	} else if (!isAboveMainNode && startY < mainNode.position.y + DATA_NODE_HEIGHT / 2) {
-		yPosition = mainNode.position.y + DATA_NODE_HEIGHT / 2 + yOffset;
+    const iconNodeHandleCenterY = iconNode.position.y + (ICON_NODE_HEIGHT / 2) + (hasContent ? 10 : 0);
+
+
+	if (type === "nameNode" && total === 1) {
+		yPosition = iconNodeHandleCenterY - (DATA_NODE_HEIGHT / 2);
+	} else {
+       
+		const siblingSpace = () => {
+			if (type === "primaryNode") {
+				if (iconNode?.data.children?.length === 1 && hasContent) { 
+					return SINGLE_CHILDREN_PRIMARY_WITH_CONTENT_SPACE;
+				}
+				return DEFAULT_PRIMARY_NODE_SPACE;
+			}
+			if (iconNode?.data?.children?.length === 0) {
+				return NO_CHILDREN_SIBLING_SPACE;
+			}
+			return DEFAULT_SIBLING_SPACE;
+		};
+
+		const Y_SPACE_FROM_SIBLINGS = siblingSpace();
+		const MIN_SPACE_REQUIRED = Y_SPACE_FROM_SIBLINGS + DATA_NODE_HEIGHT;
+
+		const totalHeight = total * MIN_SPACE_REQUIRED;
+
+		const startY = iconNodeHandleCenterY - totalHeight / 2;
+		const END_Y = startY + totalHeight;
+
+		const yOffset = index * MIN_SPACE_REQUIRED;
+
+		yPosition = startY + yOffset;
+
+		if (isAboveMainNode && END_Y >= mainNode.position.y + DATA_NODE_HEIGHT / 2) {
+			yPosition = mainNode.position.y + DATA_NODE_HEIGHT / 2 - totalHeight + yOffset;
+		} else if (!isAboveMainNode && startY < mainNode.position.y + DATA_NODE_HEIGHT / 2) {
+			yPosition = mainNode.position.y + DATA_NODE_HEIGHT / 2 + yOffset;
+		}
 	}
 
 	return {
@@ -160,6 +195,7 @@ function StakeholderMappings({
 					name: emptyString,
 					icon: data?.icon || "DashboardStakeholder",
 					t: t,
+					isPdf: isPdf,
 				},
 				position: {
 					x: centerX - MAIN_NODE_WIDTH / 2,
@@ -183,6 +219,7 @@ function StakeholderMappings({
 				totalSources: data?.totalSources,
 				backgroundColor: data?.backgroundColor || "#ade9e1",
 				iconColor: data?.iconColor || "#08949a",
+				isPdf: isPdf,
 			},
 			position: {
 				x: centerX - MAIN_NODE_WIDTH / 2,
@@ -247,6 +284,7 @@ function StakeholderMappings({
 			const children = node.data.children || [];
 			const total = children?.length || 0;
 			const iconNodeId = node.id;
+			const iconNodeHasContent = node?.data?.content !== undefined && node?.data?.content !== null;
 
 			if (children.length === 0) {
 				iconEdges.push({
@@ -257,6 +295,7 @@ function StakeholderMappings({
 					data: {
 						isEmpty: true,
 						isOnlyOne: true,
+						isPdf: isPdf,
 					},
 					targetHandle:
 						node.data.order % 2 === 0 ? "left-handle-target" : "right-handle-target",
@@ -273,6 +312,7 @@ function StakeholderMappings({
 							name: node.data?.emptyName || `No${node.data?.name} identified`,
 							icon: node.data?.type,
 							t: t,
+							isPdf: isPdf,
 						},
 						position: positionDataNodes({
 							isLeftSide: node.data.order % 2 !== 0,
@@ -301,6 +341,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",
@@ -325,6 +366,7 @@ function StakeholderMappings({
 							isLeftSide: node.data.order % 2 !== 0,
 							isAboveMainNode: node.data.order <= 2,
 							iconNode: node,
+							isPdf: true,
 							index: 0,
 							total: 1,
 							mainNode,
@@ -351,6 +393,7 @@ function StakeholderMappings({
 						tooltipHeader: child.tooltipHeader,
 						tooltipLabel: child?.tooltipLabel || "Holding",
 						totalSources: child.totalSources || 0,
+						isPdf: isPdf,
 					},
 					targetHandle:
 						node.data.order % 2 === 0 ? "left-handle-target" : "right-handle-target",
@@ -382,6 +425,7 @@ function StakeholderMappings({
 						iconColor: child.iconColor || "#08949a",
 						icon: child.icon || "UserCircle",
 						content: children.length,
+						isPdf: isPdf,
 					},
 					position: positionDataNodes({
 						isLeftSide,
@@ -392,6 +436,7 @@ function StakeholderMappings({
 						mainNode,
 						type: child.type || "primaryNode",
 						hasContent: node?.data?.content ? true : false,
+						isPdf: isPdf,
 					}),
 				};
 			});
@@ -407,6 +452,7 @@ function StakeholderMappings({
 				data: {
 					group: child.id,
 					type: "mainNode",
+					isPdf: isPdf,
 				},
 			};
 		});
@@ -444,6 +490,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/DefaultEdge.jsx

@@ -1,6 +1,7 @@
+// components/Edges/DefaultEdge.jsx
 import React from "react";
 import { Popover } from "antd";
-import { BaseEdge, EdgeLabelRenderer, getSmoothStepPath, Position } from "@xyflow/react";
+import { BaseEdge, EdgeLabelRenderer, getSmoothStepPath, Position, getStraightPath } from "@xyflow/react"; // Import getStraightPath
 import { renderTooltipJsx } from "../../../../../utils/tooltip.js";
 // import { activeOpacity, disabledOpacity, edgeStroke, edgeStrokeActive } from '../../config';
 
@@ -25,21 +26,31 @@ export default function DefaultEdge({
 		renderTooltipItems = () => [],
 		getTotal = () => 0,
 		tooltipTitle,
+        isPdf, // Destructure isPdf from data
 	} = data;
 	const isSelected =
 		associatedNodes?.includes(source) && associatedNodes?.includes(target) && activeNode;
 	const opacity = activeNode ? (isSelected ? ACTIVE_OPACITY : DISABLED_OPACITY) : ACTIVE_OPACITY;
 	const arrowHeadId = `arrow-head-${id}`;
 
-	const [edgePath] = getSmoothStepPath({
-		sourceX,
-		sourceY,
-		targetX,
-		targetY,
-		sourcePosition: data.type === "left" ? Position.Left : Position.Right,
-		targetPosition: data.type === "left" ? Position.Right : Position.Left,
-		borderRadius: 20,
-	});
+	const [edgePath] = isPdf // Use straight path for PDF
+        ? getStraightPath({
+            sourceX,
+            sourceY,
+            sourcePosition: data.type === "left" ? Position.Left : Position.Right,
+            targetX,
+            targetY,
+            targetPosition: data.type === "left" ? Position.Right : Position.Left,
+        })
+        : getSmoothStepPath({ // Use smooth path for normal rendering
+            sourceX,
+            sourceY,
+            targetX,
+            targetY,
+            sourcePosition: data.type === "left" ? Position.Left : Position.Right,
+            targetPosition: data.type === "left" ? Position.Right : Position.Left,
+            borderRadius: 20,
+        });
 
 	const centerY = data.moreLeft ? sourceY : targetY;
 
@@ -123,4 +134,4 @@ export default function DefaultEdge({
 			/>
 		</g>
 	);
-}
+}

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

@@ -1,10 +1,11 @@
+// components/Edges/TooltipEdge.jsx
 import { Popover, Tag } from "antd";
 import {
 	BaseEdge,
 	EdgeLabelRenderer,
 	getEdgeCenter,
 	getSmoothStepPath,
-	// getStraightPath,
+	getStraightPath, // Import getStraightPath
 } from "@xyflow/react";
 import { renderTooltipJsx } from "../../../../../utils/tooltip.js";
 import CustomIcon from "../../../Icon/CustomIcon.jsx";
@@ -30,15 +31,26 @@ export default function ToolTipEdge({
 	data,
 	targetPosition,
 }) {
-	const [smoothPath] = getSmoothStepPath({
-		sourceX,
-		sourceY,
-		sourcePosition,
-		targetX,
-		targetY,
-		targetPosition,
-		borderRadius: 15,
-	});
+    const { isOnlyOne, isPdf } = data; // Destructure isPdf from data
+
+    const [edgePath] = isPdf && isOnlyOne // Condition for straight path in PDF for single nodes
+        ? getStraightPath({
+            sourceX,
+            sourceY,
+            sourcePosition,
+            targetX,
+            targetY,
+            targetPosition,
+        })
+        : getSmoothStepPath({
+            sourceX,
+            sourceY,
+            sourcePosition,
+            targetX,
+            targetY,
+            targetPosition,
+            borderRadius: 15,
+        });
 
 	const center = getEdgeCenter({
 		sourceX,
@@ -49,7 +61,7 @@ export default function ToolTipEdge({
 
 	return (
 		<>
-			<BaseEdge path={smoothPath} />
+			<BaseEdge path={edgePath} /> {/* Use edgePath here */}
 			<EdgeLabelRenderer>
 				<div
 					className="button-edge__label nodrag nopan"
@@ -107,4 +119,4 @@ export default function ToolTipEdge({
 			</EdgeLabelRenderer>
 		</>
 	);
-}
+}