datastake-daf 0.6.757 → 0.6.759

package/package.json

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

package/rollup.config.js

@@ -103,26 +103,6 @@ export default [
 				requireReturnsDefault: "auto",
 			}),
 		],
-	},		
-	{
-		input: "src/constants.js",
-		output: [
-			{
-				file: "dist/constants/index.js",
-				format: "cjs",
-			},
-		],
-		external,
-		plugins: [
-			nodePolyfills(),
-			resolve({ browser: true }),
-			babel({ exclude: "node_modules/**", babelrc: true }),
-			peerDep(),
-			commonjs({
-				include: /node_modules/,
-				requireReturnsDefault: "auto",
-			}),
-		],
 	},	
 	{
 		input: "src/services.js",

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

@@ -80,4 +80,12 @@ export const ChainMap = {
 		showSider: false,
 		type: "chain",
 	},
+};
+
+export const LocationTerritoryMap = {
+	name: "Location Territory Map",
+	args: {
+		...configs.LocationTerritoryMapConfig,
+		type: "location-territory",
+	},
 };

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

@@ -20,6 +20,8 @@ export function useMapHelper({
 	mapCenter,
 	allData,
 	renderTooltip,
+	renderTooltipForLocation = null,
+	renderTooltipForTerritory = null,
 	renderTooltipTags,
 	onClickLink,
 	link,
@@ -212,10 +214,139 @@ export function useMapHelper({
 						this.setStyle({ fillOpacity: 0.7 });
 					});
 
-					marker.on("popupclose", function () {
-						this.setStyle({ fillOpacity: 0.4 });
+				marker.on("popupclose", function () {
+					this.setStyle({ fillOpacity: 0.4 });
+				});
+			} else if (type === "location-territory" || type === "territory-location") {
+				const territoryTooltip = renderTooltipForTerritory || renderTooltip;
+				const locationTooltip = renderTooltipForLocation || renderTooltip;
+
+				let polygonMarker = null;
+				if (data.area && Array.isArray(data.area) && data.area.length >= 3) {
+					// Validate area coordinates are valid arrays with numeric values
+					const validArea = data.area.filter(coord => {
+						if (!Array.isArray(coord) || coord.length < 2) {
+							return false;
+						}
+						const lat = typeof coord[0] === 'number' ? coord[0] : parseFloat(coord[0]);
+						const lng = typeof coord[1] === 'number' ? coord[1] : parseFloat(coord[1]);
+						return !isNaN(lat) && !isNaN(lng) && isFinite(lat) && isFinite(lng);
 					});
-				} else if (type === "stakeholder") {
+					
+					if (validArea && validArea.length >= 3) {
+						polygonMarker = L.polygon(validArea, {
+							color: data.color,
+							opacity: 0.4,
+						}).addTo(mapRef);
+						
+						const territoryDiv = document.createElement("div");
+						const territoryRoot = createRoot(territoryDiv);
+
+						const territoryTitle = data.territoryTitle || data.name;
+
+						territoryRoot.render(
+							<>
+								{renderTooltipHtml({
+									title: territoryTitle,
+									subTitle: data?.subTitle || data.type,
+									items: territoryTooltip(data),
+									tags: renderTooltipTags(data),
+									link,
+									total: data.sources,
+									onClickLink: () => onClickLink(data),
+								})}
+							</>,
+						);
+
+						roots.current.push(territoryRoot);
+
+						// Bind popup to polygon
+						polygonMarker.bindPopup(territoryDiv);
+
+						// Polygon hover effects
+						polygonMarker.on("popupopen", function () {
+							this.setStyle({ fillOpacity: 0.7 });
+						});
+
+						polygonMarker.on("popupclose", function () {
+							this.setStyle({ fillOpacity: 0.4 });
+						});
+					}
+				}
+
+				let locationMarker = null;
+				if (coordinates && coordinates[0] && coordinates[1]) {
+					let markerLat = typeof coordinates[0] === 'number' ? coordinates[0] : parseFloat(coordinates[0]);
+					let markerLng = typeof coordinates[1] === 'number' ? coordinates[1] : parseFloat(coordinates[1]);
+					
+					if ((markerLat < -90 || markerLat > 90) && (markerLng >= -90 && markerLng <= 90)) {
+						const temp = markerLat;
+						markerLat = markerLng;
+						markerLng = temp;
+					}
+					
+					if (!isNaN(markerLat) && !isNaN(markerLng) && isFinite(markerLat) && isFinite(markerLng) &&
+						markerLat >= -90 && markerLat <= 90 && markerLng >= -180 && markerLng <= 180) {
+						const markerCoordinates = [markerLat, markerLng];
+						
+						iconClassName = "";
+						const markerFillColor = data.markerColor || "var(--color-primary-60)";
+						innerHtml = `
+					
+						<svg
+							width="28"
+							height="33"
+							viewBox="0 0 28 33"
+							fill="none"
+							xmlns="http://www.w3.org/2000/svg"
+						>
+							<path
+								d="M5.14346 4.87419C10.0688 -0.15896 18.0528 -0.162058 22.9757 4.86861C27.6563 9.65161 27.8841 17.2616 23.6622 22.3255H23.6608C23.427 22.6141 23.1808 22.894 22.9211 23.1623L14.0671 32.2101L5.44057 23.3948L5.13868 23.096C0.215857 18.0655 0.218422 9.90737 5.14346 4.87419Z"
+								fill="${markerFillColor}"
+								stroke="white"
+							/>
+						</svg>
+						
+						`;
+
+						const locationDiv = document.createElement("div");
+						const locationRoot = createRoot(locationDiv);
+
+						locationRoot.render(
+							<>
+								{renderTooltipHtml({
+									title: data.name,
+									subTitle: data?.subTitle || data.type,
+									items: locationTooltip(data),
+									tags: renderTooltipTags(data),
+									link: false,
+									total: data.sources,
+									onClickLink: () => onClickLink(data),
+								})}
+							</>,
+						);
+
+						roots.current.push(locationRoot);
+
+					
+						locationMarker = addIconToMap(
+							markerCoordinates,
+							iconClassName,
+							data,
+							tooltipAsText ? data.name : locationDiv, 
+							iconSize,
+							innerHtml,
+						);
+
+						if (locationMarker) {
+							locationMarker.setZIndexOffset(1000); 
+							locationMarker.bindPopup(locationDiv);
+						}
+					}
+				}
+
+				marker = polygonMarker || locationMarker;
+			} else if (type === "stakeholder") {
 					marker = L.marker(coordinates, {
 						icon: L.divIcon({
 							html: `<div id="${i}"></div>`,

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

@@ -18,6 +18,8 @@ export const useMap = ({
 	polygon,
 	app,
 	renderTooltip,
+	renderTooltipForLocation = null,
+	renderTooltipForTerritory = null,
 	renderTooltipTags,
 	mapConfig,
 	tooltipAsText,
@@ -137,6 +139,8 @@ export const useMap = ({
 		allData,
 		mapCenter,
 		renderTooltip,
+		renderTooltipForLocation,
+		renderTooltipForTerritory,
 		renderTooltipTags,
 		onClickLink,
 		link,

package/src/@daf/core/components/Dashboard/Map/index.jsx

@@ -48,6 +48,16 @@ import Filters from "../../Filters/FloatingFilters/index.js";
  *   Custom renderer for tooltip content.
  *   Signature: `(dataItem) => ReactNode | string`
  *
+ * - `renderTooltipForLocation` (function, optional):
+ *   Custom renderer for location marker tooltips (used in location-territory type).
+ *   Signature: `(dataItem) => Array`
+ *   Falls back to `renderTooltip` if not provided.
+ *
+ * - `renderTooltipForTerritory` (function, optional):
+ *   Custom renderer for territory polygon tooltips (used in location-territory type).
+ *   Signature: `(dataItem) => Array`
+ *   Falls back to `renderTooltip` if not provided.
+ *
  * - `mapConfig` (object):
  *   Configuration object for the map's behavior, such as zoom levels, center, and controls.
  *
@@ -102,6 +112,8 @@ function Map({
 	link,
 	siderTitle = "Mine Description",
 	renderTooltip = () => [],
+	renderTooltipForLocation = null,
+	renderTooltipForTerritory = null,
 	renderTooltipTags = () => {},
 	mapConfig = { maxZoom: 18, center: [13, -15], zoom: 5 },
 	emptyDescriptionText = "No description provided",
@@ -134,6 +146,8 @@ function Map({
 		t,
 		app,
 		renderTooltip,
+		renderTooltipForLocation,
+		renderTooltipForTerritory,
 		renderTooltipTags,
 		onClickLink,
 		link,
@@ -260,6 +274,11 @@ Map.propTypes = {
 	filtersConfig: PropTypes.any,
 	onFilterChange: PropTypes.any,
 	nameAsSiderTitle: PropTypes.bool,
+	renderTooltip: PropTypes.func,
+	renderTooltipForLocation: PropTypes.func,
+	renderTooltipForTerritory: PropTypes.func,
+	renderTooltipTags: PropTypes.func,
+	link: PropTypes.any,
 };
 
 export default Map;

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

@@ -3,5 +3,6 @@ import { storyConfig as DefaultMapConfig } from "./storyConfig2.js";
 import { storyConfig as TerritoryMapConfig } from "./storyConfig3.js";
 import { storyConfig as StakeholderMapConfig } from "./storyConfig4.js";
 import { storyConfig as ChainMapConfig } from "./storyConfig5.js";
+import { storyConfig as LocationTerritoryMapConfig } from "./storyConfig6.js";
 
-export { DefaultMapConfig, TerritoryMapConfig, StakeholderMapConfig, EventConfig, ChainMapConfig };
+export { DefaultMapConfig, TerritoryMapConfig, StakeholderMapConfig, EventConfig, ChainMapConfig, LocationTerritoryMapConfig };

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

@@ -0,0 +1,69 @@
+export const storyConfig = {
+	data: [
+		{
+			_id: {},
+			id: "7f2aaed4-4b2e-406c-8e0a-6659c5c8367b",
+			color: "#6698E4",
+			gps: {
+				latitude: 7,
+				longitude: 1,
+			},
+			area: [
+				[6, 5],
+				[7, 1],
+				[9, 2],
+				[8, 4],
+			],
+			name: "Territory with Location - Area 1",
+			subTitle: "Mine Site",
+			type: "Territory Type",
+			datastakeId: "LOC-00000000141",
+			sources: 2,
+		},
+		{
+			_id: {},
+			id: "7f2aaed4-4b2e-406c-8e0a-6659c5c8368c",
+			color: "#D3ADF7",
+			gps: {
+				latitude: 8,
+				longitude: 2,
+			},
+			area: [
+				[7, 6],
+				[8, 2],
+				[10, 13],
+				[9, 8],
+			],
+			name: "Territory with Location - Area 2",
+			subTitle: "Processing Site",
+			type: "Territory Type",
+			datastakeId: "LOC-00000000142",
+			sources: 1,
+		},
+	],
+	// tooltipAsText: true,
+	primaryLink: true,
+	renderTooltip: (data) => {
+		return [
+			{
+				label: "Location",
+				value: data.name || "--",
+			},
+			{
+				label: "Type",
+				value: data.subTitle || data.type || "--",
+			},
+		];
+	},
+	renderTooltipTags: () => {
+		return {
+			label: "Category",
+			items: [{ label: "Active", color: "blue" }, { label: "Monitored" }],
+		};
+	},
+	link: true,
+	onClickLink: (data) => {
+		console.log(data);
+	},
+};
+

package/src/@daf/core/components/Dashboard/Widget/ActivityIndicators/config.js

@@ -53,11 +53,8 @@ export const getActivityIndicatorsConfig = ({ t, data = {}, onRemove }) => {
 		},
 		{
 			icon: "User",
-			label: t("Children presence"),
-			// Special rule: Children presence is compliant if answered 'no', not compliant if answered 'yes'
-			type: data?.childrenPresence === true ? "notCompliant" : 
-			      data?.childrenPresence === false ? "compliant" : 
-			      "empty",
+			label: t("No children"),
+			type: getType(data?.childrenPresence),
 			onClick: getOnClick("childrenPresence"),
 		},
 		{

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

@@ -18,7 +18,7 @@ export default function KeyIndicatorsWidget({
 	const component = (
 		<Widget
 			loading={loading}
-			className={formatClassname(["flex-1 with-border-header", widgetClassName])}
+			className={formatClassname(["flex-1 h-w-btn-header with-border-header", widgetClassName])}
 			title={noTitle ? undefined : t(title)}
 			noTitle={noTitle}
 		>

package/src/@daf/core/components/EditForm/form.jsx

@@ -534,7 +534,7 @@ export const EditForm = ({
 											<GetFormItem
 												inputKey={k}
 												inputData={inputData}
-												inputId={input?.type === "dataLink" ? (input?.meta?.path || inputId) : inputId}
+												inputId={inputId}
 												input={input}
 												highlightMandatory={highlightMandatory}
 												changeInputMeta={changeInputMeta}