datastake-daf 0.6.767 → 0.6.769

package/package.json

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

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

@@ -104,6 +104,8 @@ export default function ColumnChart({
 	width,
 	legendConfig = {},
 	isPdf = false,
+	yAxis: customYAxis,
+	xAxis: customXAxis,
 	...rest
 }) {
 	const containerRef = React.useRef(null);
@@ -146,6 +148,7 @@ export default function ColumnChart({
 				label: {
 					formatter: formattedXAxis,
 				},
+				...(customXAxis || {}),
 			},
 			yAxis: {
 				...(isPercentage
@@ -163,7 +166,12 @@ export default function ColumnChart({
 									(s) => `${s},`
 								) + " %"
 						: formattedYAxis,
+					...(customYAxis?.label || {}),
 				},
+				// Merge customYAxis properties (excluding label which is already merged above)
+				...(customYAxis ? Object.fromEntries(
+					Object.entries(customYAxis).filter(([key]) => key !== 'label')
+				) : {}),
 			},
 			legend: false,
 			...(showBackground && isPercentage && {
@@ -196,6 +204,8 @@ export default function ColumnChart({
 		color,
 		token.colorPrimary9,
 		groupField,
+		customYAxis,
+		customXAxis,
 	]);
 
 	React.useEffect(() => {

package/src/@daf/core/components/Charts/LineChart/index.jsx

@@ -88,6 +88,8 @@ export default function LineChart({
 	isPdf = false,
 	legendConfig = {},
 	width,
+	yAxis: customYAxis,
+	xAxis: customXAxis,
 	...rest
 }) {
 	const containerRef = React.useRef(null);
@@ -129,7 +131,12 @@ export default function LineChart({
 					style: {
 						fontSize: !autoHideXLabel ? 10 : undefined,
 					},
+					...(customXAxis?.label || {}),
 				},
+				// Merge customXAxis properties (excluding label which is already merged above)
+				...(customXAxis ? Object.fromEntries(
+					Object.entries(customXAxis).filter(([key]) => key !== 'label')
+				) : {}),
 			},
 			yAxis: {
 				...(isPercentage
@@ -143,7 +150,12 @@ export default function LineChart({
 					formatter: isPercentage
 						? (v) => `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`) + " %"
 						: formattedYAxis,
+					...(customYAxis?.label || {}),
 				},
+				// Merge customYAxis properties (excluding label which is already merged above)
+				...(customYAxis ? Object.fromEntries(
+					Object.entries(customYAxis).filter(([key]) => key !== 'label')
+				) : {}),
 			},
 			smooth: isSmooth,
 			meta: {
@@ -183,6 +195,8 @@ export default function LineChart({
 		tooltipConfig,
 		isPdf,
 		t,
+		customYAxis,
+		customXAxis,
 	]);
 
 	React.useEffect(() => {

package/src/@daf/core/components/Dashboard/Map/ChainIcon/Markers/StakeholderMarker.js

@@ -90,7 +90,7 @@ export default function StakeholderIcon({
 	useEffect(() => {
 		linkNodesData.map((node) => {
 			const isConnectingToStakeholder = node.isStakeholder;
-			const id = `${data.datastakeId}-${node.stakeholderId}`;
+			const id = `${data.datastakeId}-${node.stakeholderId || node.datastakeId}`;
 			const targetsParentId = node.parentId;
 			const targetMarkerIndex = node.stakeholdersIndex;
 			const isSibling = targetsParentId === parentId;
@@ -234,7 +234,10 @@ export default function StakeholderIcon({
 						onClickLink(data);
 					},
 				})}
-				getPopupContainer={() => document.getElementById("map")}
+				getPopupContainer={(triggerNode) => {
+					const mapElement = document.getElementById("map");
+					return mapElement || triggerNode.parentElement || document.body;
+				}}
 			>
 				<StakeholderMarker
 					className={`${data.type} ${

package/src/@daf/core/components/Dashboard/Map/ChainIcon/index.js

@@ -32,7 +32,8 @@ export default function LocationIcon({
 	activeMarker,
 	setActiveMarker,
 }) {
-	const root = useRef(null);
+	const rootsMapRef = useRef(new Map());
+	const markersRef = useRef([])
 	const isSelected = selectedMarkersId.includes(data.datastakeId);
 	const Marker = useMemo(() => {
 		if (isMineSite(data.type)) {
@@ -75,7 +76,22 @@ export default function LocationIcon({
 	}, [data.stakeholders, zoom]);
 
 	useEffect(() => {
-		stakeholdersOfLocation.map((stakeholder, index) => {
+		const currentRoots = rootsMapRef.current;
+		const currentMarkers = markersRef.current;
+
+		currentMarkers.forEach(marker => {
+			if (mapRef.hasLayer(marker)) {
+				mapRef.removeLayer(marker);
+			}
+		});
+		currentRoots.forEach(root => {
+			root.unmount();
+		});
+		currentRoots.clear();
+		markersRef.current = [];
+
+		// Create new markers
+		stakeholdersOfLocation.forEach((stakeholder, index) => {
 			const markerId = `${stakeholder.datastakeId}`;
 			const { x, y, radius, center } = getStakeholderPosition({
 				zoom,
@@ -94,6 +110,7 @@ export default function LocationIcon({
 			const pathLocLatLng = mapRef.layerPointToLatLng(pathLocPoint);
 			const isForceOpen = activeMarker?.datastakeId === data.datastakeId;
 			const iconSize = isSmallMarker(zoom) || isExtraSmallMarker(zoom) ? [11, 11] : [25, 25];
+			
 			const marker = L.marker(stakeholderLatLng, {
 				icon: L.divIcon({
 					html: `<div id="${markerId}"></div>`,
@@ -102,31 +119,38 @@ export default function LocationIcon({
 				}),
 			}).addTo(mapRef);
 
-			const div = document.getElementById(markerId);
-			root.current = createRoot(div);
+			markersRef.current.push(marker);
 
-			root.current.render(
-				<StakeholderIcon
-					data={stakeholder}
-					zoom={zoom}
-					allData={allData}
-					link={link}
-					parentId={data.datastakeId}
-					renderTooltip={renderTooltip}
-					onClickLink={onClickLink}
-					selectedMarkersId={selectedMarkersId}
-					handleSelectMarker={handleSelectMarker}
-					mapRef={mapRef}
-					radius={radius}
-					index={index}
-					x={x}
-					y={y}
-					openPopupIdRef={openPopupIdRef}
-					polylinesRef={polylinesRef}
-					isForceOpen={isForceOpen}
-					activeMarker={activeMarker}
-				/>,
-			);
+			setTimeout(() => {
+				const div = document.getElementById(markerId);
+				if (div && !rootsMapRef.current.has(markerId)) {
+					const root = createRoot(div);
+					rootsMapRef.current.set(markerId, root);
+					
+					root.render(
+						<StakeholderIcon
+							data={stakeholder}
+							zoom={zoom}
+							allData={allData}
+							link={link}
+							parentId={data.datastakeId}
+							renderTooltip={renderTooltip}
+							onClickLink={onClickLink}
+							selectedMarkersId={selectedMarkersId}
+							handleSelectMarker={handleSelectMarker}
+							mapRef={mapRef}
+							radius={radius}
+							index={index}
+							x={x}
+							y={y}
+							openPopupIdRef={openPopupIdRef}
+							polylinesRef={polylinesRef}
+							isForceOpen={isForceOpen}
+							activeMarker={activeMarker}
+						/>,
+					);
+				}
+			}, 0);
 
 			setMapMarkers((prev) => {
 				const array = [
@@ -162,6 +186,19 @@ export default function LocationIcon({
 				listOfPolylines: polylinesRef.current,
 			});
 		});
+
+		return () => {
+			markersRef.current.forEach(marker => {
+				if (mapRef.hasLayer(marker)) {
+					mapRef.removeLayer(marker);
+				}
+			});
+			rootsMapRef.current.forEach(root => {
+				root.unmount();
+			});
+			rootsMapRef.current.clear();
+			markersRef.current = [];
+		};
 	}, [stakeholdersOfLocation, selectedMarkersId, activeMarker]);
 
 	linkedNodesData.map((node) => {
@@ -213,7 +250,10 @@ export default function LocationIcon({
 			// 	(!openPopupIdRef.current || openPopupIdRef.current === data.datastakeId) &&
 			// 	isHovering
 			// }
-			getPopupContainer={() => document.getElementById("map")}
+			getPopupContainer={(triggerNode) => {
+				const mapElement = document.getElementById("map");
+				return mapElement || triggerNode.parentElement || document.body;
+			}}
 		>
 			<div style={{ position: "relative", display: "inline-block" }}>
 				{(isSelected || selectedMarkersId.length === 0) && (

package/src/@daf/core/components/Dashboard/Map/hook.js

@@ -82,43 +82,37 @@ export const useMap = ({
 		const highlightTable = {};
 
 		for (const [node] of graph) {
-			const visited = new Set();
-			const queue = [node];
-
-			while (queue.length) {
-				const current = queue.shift();
-				if (visited.has(current)) continue;
-
-				const currentType = nodeTypes.get(current);
-
-				if (current !== node && isLocation(currentType)) continue;
-
-				visited.add(current);
-
-				for (const neighbor of graph.get(current)) {
-					if (!visited.has(neighbor)) queue.push(neighbor);
-				}
+			const highlighted = new Set();
+			
+			highlighted.add(node);
+			
+			const nodeIsStakeholder = !isLocation(nodeTypes.get(node));
+			if (nodeIsStakeholder && stakeToLoc.has(node)) {
+				const parentLoc = stakeToLoc.get(node);
+				highlighted.add(parentLoc);
 			}
-
-			if (!isLocation(nodeTypes.get(node)) && stakeToLoc.has(node)) {
-				visited.add(stakeToLoc.get(node));
-			}
-
-			visited.add(node);
-
-			const extraLocs = new Set();
-			for (const n of visited) {
-				for (const neighbor of graph.get(n) || []) {
-					if (isLocation(nodeTypes.get(neighbor))) {
-						extraLocs.add(neighbor);
+			
+			for (const neighbor of graph.get(node) || []) {
+				const neighborIsStakeholder = !isLocation(nodeTypes.get(neighbor));
+				
+				if (neighborIsStakeholder && stakeToLoc.has(neighbor)) {
+					const neighborParent = stakeToLoc.get(neighbor);
+					
+					if (
+						(isLocation(nodeTypes.get(node)) && neighborParent === node) ||
+						(nodeIsStakeholder && stakeToLoc.get(node) === neighborParent)
+					) {
+						highlighted.add(neighbor);
+					} else {
+						highlighted.add(neighbor);
+						highlighted.add(neighborParent);
 					}
+				} else {
+					highlighted.add(neighbor);
 				}
 			}
-			for (const loc of extraLocs) {
-				visited.add(loc);
-			}
 
-			highlightTable[node] = [...visited];
+			highlightTable[node] = [...highlighted];
 		}
 
 		return highlightTable;

package/src/@daf/core/components/Dashboard/Widget/ActivityIndicators/index.jsx

@@ -48,6 +48,7 @@ export default function ActivityIndicatorsWidget({
 	}, [config, filterMode]);
 
 	const component = (
+		<section>
 		<Widget
 			loading={loading}
 			className={formatClassname(["flex-1 with-border-header h-w-btn-header no-p-body", widgetClassName])}
@@ -81,6 +82,7 @@ export default function ActivityIndicatorsWidget({
 				))}
 			</Style>
 		</Widget>
+		</section>
 	);
 
 	if (noMinWidth) {

package/src/@daf/core/components/Dashboard/Widget/StatCard/StatCard.stories.js

@@ -0,0 +1,226 @@
+import ThemeLayout from "../../../ThemeLayout";
+import StatCard from "./index";
+import Widget from "../index.jsx";
+import DashboardLayout from "../../DashboardLayout/index.jsx";
+
+export default {
+	title: "Dashboard/Widgets/StatCard",
+	component: StatCard,
+	tags: ["autodocs"],
+	decorators: [
+		(Story) => (
+			<ThemeLayout>
+				<Story />
+			</ThemeLayout>
+		),
+	],
+};
+
+export const Primary = {
+	name: "StatCard - With All Props",
+	args: {
+		title: "Activity Participants",
+		value: "325",
+		icon: "Users",
+		change: {
+			value: 20,
+			direction: "up",
+		},
+	},
+};
+
+export const WithPositiveChange = {
+	name: "With Positive Change",
+	args: {
+		title: "Activity Participants",
+		value: "325",
+		icon: "Users",
+		change: {
+			value: 20,
+			direction: "up",
+		},
+	},
+};
+
+export const WithNegativeChange = {
+	name: "With Negative Change",
+	args: {
+		title: "Total Revenue",
+		value: "$12,450",
+		icon: "Package",
+		change: {
+			value: 15,
+			direction: "down",
+		},
+	},
+};
+
+export const WithoutChange = {
+	name: "Without Change Indicator",
+	args: {
+		title: "Total Projects",
+		value: "48",
+		icon: "Lock",
+	},
+};
+
+export const WithoutIcon = {
+	name: "Without Icon",
+	args: {
+		title: "Active Users",
+		value: "1,234",
+		change: {
+			value: 12,
+			direction: "up",
+		},
+	},
+};
+
+export const CustomChangeColors = {
+	name: "Custom Change Colors",
+	args: {
+		title: "Custom Metric",
+		value: "999",
+		icon: "Package",
+		change: {
+			value: 5,
+			direction: "up",
+			color: "#E0F2FE",
+			borderColor: "#7DD3FC",
+			textColor: "#0369A1",
+		},
+	},
+};
+
+export const MultipleCards = {
+	name: "Multiple Stat Cards",
+	render: () => (
+		<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(250px, 1fr))", gap: "16px" }}>
+			<StatCard
+				title="Activity Participants"
+				value="325"
+				icon="Users"
+				change={{
+					value: 20,
+					direction: "up",
+				}}
+			/>
+			<StatCard
+				title="Total Revenue"
+				value="$12,450"
+				icon="Package"
+				change={{
+					value: 15,
+					direction: "down",
+				}}
+			/>
+			<StatCard
+				title="Total Projects"
+				value="48"
+				icon="Lock"
+			/>
+			<StatCard
+				title="Active Users"
+				value="1,234"
+				icon="User"
+				change={{
+					value: 8,
+					direction: "up",
+				}}
+			/>
+		</div>
+	),
+};
+
+export const InWidget = {
+	name: "Inside Widget",
+	render: () => (
+		<Widget title="Key Statistics" className="with-border-header">
+			<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(250px, 1fr))", gap: "16px" }}>
+				<StatCard
+					title="Activity Participants"
+					value="325"
+					icon="Users"
+					change={{
+						value: 20,
+						direction: "up",
+					}}
+				/>
+				<StatCard
+					title="Total Revenue"
+					value="$12,450"
+					icon="Package"
+					change={{
+						value: 15,
+						direction: "down",
+					}}
+				/>
+				<StatCard
+					title="Total Projects"
+					value="48"
+					icon="Lock"
+				/>
+			</div>
+		</Widget>
+	),
+};
+
+export const InDashboard = {
+	name: "In Dashboard Layout",
+	render: () => (
+		<DashboardLayout>
+			<section>
+				<Widget>
+					<div
+						style={{
+							height: "500px",
+							backgroundColor: "#f0f0f0",
+							display: "flex",
+							alignItems: "center",
+							justifyContent: "center",
+						}}
+					>
+						Placeholder
+					</div>
+				</Widget>
+				<Widget title="Statistics Overview" className="with-border-header">
+					<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(250px, 1fr))", gap: "16px" }}>
+						<StatCard
+							title="Activity Participants"
+							value="325"
+							icon="Users"
+							change={{
+								value: 20,
+								direction: "up",
+							}}
+						/>
+						<StatCard
+							title="Total Revenue"
+							value="$12,450"
+							icon="Package"
+							change={{
+								value: 15,
+								direction: "down",
+							}}
+						/>
+						<StatCard
+							title="Total Projects"
+							value="48"
+							icon="Lock"
+						/>
+						<StatCard
+							title="Active Users"
+							value="1,234"
+							icon="User"
+							change={{
+								value: 8,
+								direction: "up",
+							}}
+						/>
+					</div>
+				</Widget>
+			</section>
+		</DashboardLayout>
+	),
+};
+

package/src/@daf/core/components/Dashboard/Widget/StatCard/index.js

@@ -0,0 +1,103 @@
+import React from 'react';
+import { Tooltip } from 'antd';
+import CustomIcon from '../../../Icon/CustomIcon.jsx';
+import Style from './style.js';
+
+const StatCard = ({
+    title,
+    value,
+    icon,
+    iconTooltip,
+    change = null, // Object with { value, direction?, color?, borderColor?, textColor? }
+}) => {
+    // Default colors for positive change (green)
+    const getChangeColors = () => {
+        if (!change) return {};
+        
+        const isPositive = change.direction !== 'down';
+        const defaultPositive = {
+            backgroundColor: '#ECFDF3',
+            borderColor: '#A7F3D0',
+            textColor: '#52C41A',
+        };
+        const defaultNegative = {
+            backgroundColor: '#FEF3F2',
+            borderColor: '#FECACA',
+            textColor: '#D92D20',
+        };
+        
+        const defaults = isPositive ? defaultPositive : defaultNegative;
+        
+        return {
+            changeColor: change.color || defaults.backgroundColor,
+            changeBorderColor: change.borderColor || defaults.borderColor,
+            changeTextColor: change.textColor || defaults.textColor,
+        };
+    };
+
+    const changeColors = getChangeColors();
+    const isPositive = change?.direction !== 'down';
+
+    // Check if change value is 0 (handle both number and string formats like "0", "0%", "0.0%")
+    const isChangeZero = () => {
+        if (!change || !change.value) return true;
+        const valueStr = String(change.value).replace(/[%,]/g, '').trim();
+        const numValue = parseFloat(valueStr);
+        return isNaN(numValue) || numValue === 0;
+    };
+
+    const shouldShowChange = change && !isChangeZero();
+
+    return (
+        <Style {...changeColors}>
+            <div className="stat-card-header">
+                <h3 className="stat-card-title">{title}</h3>
+                {icon && (       
+                        <div className="stat-card-icon">
+                            <CustomIcon name={icon} width={24} height={24} />
+                        </div>          
+                )}
+            </div>
+            <div className="stat-card-content">
+                <h2 className="stat-card-value">{value}</h2>
+                {shouldShowChange && (
+                    <Tooltip 
+                        title={
+                            change.tooltipText || 
+                            (isPositive 
+                                ? `Increased by ${change.value}` 
+                                : `Decreased by ${change.value}`)
+                        }
+                    >
+                        <div className="stat-card-change">
+                            <div className="change-icon">
+                                {isPositive ? (
+                                    <>
+                                        <CustomIcon 
+                                            name="Up" 
+                                            width={10} 
+                                            height={10} 
+                                            color={changeColors.changeTextColor}
+                                        />
+                                    </>
+                                ) : (
+                                    <>
+                                        <CustomIcon 
+                                            name="Down" 
+                                            width={10} 
+                                            height={10} 
+                                            color={changeColors.changeTextColor}
+                                        />
+                                    </>
+                                )}
+                            </div>
+                            <span className="change-value">{change.value}</span>
+                        </div>
+                    </Tooltip>
+                )}
+            </div>
+        </Style>
+    );
+}
+
+export default StatCard;