datastake-daf 0.6.817 → 0.6.818

package/dist/style/datastake/mapbox-gl.css

@@ -0,0 +1,330 @@
+/* Isolated Mapbox GL CSS - Scoped to prevent Leaflet conflicts */
+
+/* Mapbox GL Core Styles - Scoped with .mapbox-gl-scope */
+.mapbox-gl-scope .mapboxgl-map {
+  font: 12px/20px Helvetica Neue, Arial, Helvetica, sans-serif;
+  overflow: hidden;
+  position: relative;
+  -webkit-tap-highlight-color: rgb(0 0 0/0);
+}
+
+.mapbox-gl-scope .mapboxgl-canvas {
+  left: 0;
+  position: absolute;
+  top: 0;
+}
+
+.mapbox-gl-scope .mapboxgl-map:-webkit-full-screen {
+  height: 100%;
+  width: 100%;
+}
+
+.mapbox-gl-scope .mapboxgl-canary {
+  background-color: salmon;
+}
+
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-interactive,
+.mapbox-gl-scope .mapboxgl-ctrl-group button.mapboxgl-ctrl-compass {
+  cursor: grab;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-interactive.mapboxgl-track-pointer {
+  cursor: pointer;
+}
+
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-interactive:active,
+.mapbox-gl-scope .mapboxgl-ctrl-group button.mapboxgl-ctrl-compass:active {
+  cursor: grabbing;
+}
+
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate,
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate .mapboxgl-canvas {
+  touch-action: pan-x pan-y;
+}
+
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-drag-pan,
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-drag-pan .mapboxgl-canvas {
+  touch-action: pinch-zoom;
+}
+
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan,
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan .mapboxgl-canvas {
+  touch-action: none;
+}
+
+/* Control positioning */
+.mapbox-gl-scope .mapboxgl-ctrl-bottom,
+.mapbox-gl-scope .mapboxgl-ctrl-bottom-left,
+.mapbox-gl-scope .mapboxgl-ctrl-bottom-right,
+.mapbox-gl-scope .mapboxgl-ctrl-left,
+.mapbox-gl-scope .mapboxgl-ctrl-right,
+.mapbox-gl-scope .mapboxgl-ctrl-top,
+.mapbox-gl-scope .mapboxgl-ctrl-top-left,
+.mapbox-gl-scope .mapboxgl-ctrl-top-right {
+  pointer-events: none;
+  position: absolute;
+  z-index: 2;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-top-left {
+  left: 0;
+  top: 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-top {
+  left: 50%;
+  top: 0;
+  transform: translateX(-50%);
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-top-right {
+  right: 0;
+  top: 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-right {
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-bottom-right {
+  bottom: 0;
+  right: 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-bottom {
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-bottom-left {
+  bottom: 0;
+  left: 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-left {
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl {
+  clear: both;
+  pointer-events: auto;
+  transform: translate(0);
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-top-left .mapboxgl-ctrl {
+  float: left;
+  margin: 10px 0 0 10px;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-top .mapboxgl-ctrl {
+  float: left;
+  margin: 10px 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-top-right .mapboxgl-ctrl {
+  float: right;
+  margin: 10px 10px 0 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-bottom-right .mapboxgl-ctrl,
+.mapbox-gl-scope .mapboxgl-ctrl-right .mapboxgl-ctrl {
+  float: right;
+  margin: 0 10px 10px 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-bottom .mapboxgl-ctrl {
+  float: left;
+  margin: 10px 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-bottom-left .mapboxgl-ctrl,
+.mapbox-gl-scope .mapboxgl-ctrl-left .mapboxgl-ctrl {
+  float: left;
+  margin: 0 0 10px 10px;
+}
+
+/* Control group styling */
+.mapbox-gl-scope .mapboxgl-ctrl-group {
+  background: #fff;
+  border-radius: 4px;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-group:not(:empty) {
+  box-shadow: 0 0 0 2px #0000001a;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-group button {
+  background-color: initial;
+  border: 0;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: block;
+  height: 29px;
+  outline: none;
+  overflow: hidden;
+  padding: 0;
+  width: 29px;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-group button+button {
+  border-top: 1px solid #ddd;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl button .mapboxgl-ctrl-icon {
+  background-position: 50%;
+  background-repeat: no-repeat;
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-attrib-button:focus,
+.mapbox-gl-scope .mapboxgl-ctrl-group button:focus {
+  box-shadow: 0 0 2px 2px #0096ff;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl button:disabled {
+  cursor: not-allowed;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl button:disabled .mapboxgl-ctrl-icon {
+  opacity: .25;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-group button:first-child {
+  border-radius: 4px 4px 0 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-group button:last-child {
+  border-radius: 0 0 4px 4px;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-group button:only-child {
+  border-radius: inherit;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl button:not(:disabled):hover {
+  background-color: #0000000d;
+}
+
+/* Marker styles */
+.mapbox-gl-scope .mapboxgl-marker {
+  position: absolute;
+  z-index: 1;
+}
+
+.mapbox-gl-scope .mapboxgl-marker svg {
+  display: block;
+}
+
+/* Popup styles */
+.mapbox-gl-scope .mapboxgl-popup {
+  position: absolute;
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.mapbox-gl-scope .mapboxgl-popup-content-wrapper {
+  padding: 1px;
+  text-align: left;
+  border-radius: 12px;
+}
+
+.mapbox-gl-scope .mapboxgl-popup-content {
+  margin: 13px 24px 13px 20px;
+  line-height: 1.3;
+  font-size: 13px;
+  min-height: 1px;
+}
+
+.mapbox-gl-scope .mapboxgl-popup-content p {
+  margin: 17px 0;
+}
+
+.mapbox-gl-scope .mapboxgl-popup-tip-container {
+  width: 40px;
+  height: 20px;
+  position: absolute;
+  left: 50%;
+  margin-top: -1px;
+  margin-left: -20px;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.mapbox-gl-scope .mapboxgl-popup-tip {
+  width: 17px;
+  height: 17px;
+  padding: 1px;
+  margin: -10px auto 0;
+  pointer-events: auto;
+  -webkit-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+
+.mapbox-gl-scope .mapboxgl-popup-content-wrapper,
+.mapbox-gl-scope .mapboxgl-popup-tip {
+  background: white;
+  color: #333;
+  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
+}
+
+.mapbox-gl-scope .mapboxgl-popup-close-button {
+  position: absolute;
+  top: 0;
+  right: 0;
+  border: none;
+  text-align: center;
+  width: 24px;
+  height: 24px;
+  font: 16px/24px Tahoma, Verdana, sans-serif;
+  color: #757575;
+  text-decoration: none;
+  background: transparent;
+}
+
+.mapbox-gl-scope .mapboxgl-popup-close-button:hover,
+.mapbox-gl-scope .mapboxgl-popup-close-button:focus {
+  color: #585858;
+}
+
+/* Attribution */
+.mapbox-gl-scope .mapboxgl-ctrl-attribution {
+  background: #fff;
+  background: rgba(255, 255, 255, 0.8);
+  margin: 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-attribution,
+.mapbox-gl-scope .mapboxgl-ctrl-scale-line {
+  padding: 0 5px;
+  color: #333;
+  line-height: 1.4;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-attribution a {
+  text-decoration: none;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-attribution a:hover,
+.mapbox-gl-scope .mapboxgl-ctrl-attribution a:focus {
+  text-decoration: underline;
+}
+
+/* Hide attribution by default */
+.mapbox-gl-scope .mapboxgl-ctrl-attribution {
+  display: none !important;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-logo {
+  display: none !important;
+}

package/package.json

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

package/public/Vegetation/damage-from-insects-default.svg

@@ -14,3 +14,4 @@
 
 
 
+

package/public/Vegetation/dry-or-dead-default.svg

@@ -16,3 +16,4 @@
 
 
 
+

package/public/Vegetation/healthy-default.svg

@@ -14,3 +14,4 @@
 
 
 
+

package/public/Vegetation/yellowing.svg

@@ -8,3 +8,4 @@
 
 
 
+

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

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect } from "react";
+import React, { useRef, useEffect, useCallback } from "react";
 import { Radar } from "@antv/g2plot";
 import { theme } from "antd";
 import { renderTooltip } from "../../../../utils/tooltip";
@@ -39,6 +39,46 @@ const RadarChart = ({
 		legendStyle
 	} = useLegendConfig({legendConfig, isPdf});
 
+	// Helper function to wrap long text labels to multiple lines
+	// Ensures text is never hidden - wraps to multiple lines if needed
+	const wrapLabel = useCallback((text, maxLength = 10) => {
+		if (!text) {
+			return '';
+		}
+		
+		const formattedText = formattedXAxis(text);
+		
+		// If text is short enough, return as is
+		if (formattedText.length <= maxLength) {
+			return formattedText;
+		}
+		
+		// Split by spaces to find word boundaries
+		const words = formattedText.split(' ');
+		const lines = [];
+		let currentLine = '';
+		
+		words.forEach((word, index) => {
+			// If adding this word would exceed maxLength, start a new line
+			if (currentLine && (currentLine + ' ' + word).length > maxLength) {
+				if (currentLine) {
+					lines.push(currentLine);
+				}
+				currentLine = word;
+			} else {
+				currentLine = currentLine ? currentLine + ' ' + word : word;
+			}
+			
+			// If it's the last word, add it to lines
+			if (index === words.length - 1 && currentLine) {
+				lines.push(currentLine);
+			}
+		});
+		
+		// Ensure we always return something - never empty
+		return lines.length > 0 ? lines.join('\n') : formattedText;
+	}, [formattedXAxis]);
+
 	useEffect(() => {
 		if (!containerRef.current) {
 			return;
@@ -59,9 +99,19 @@ const RadarChart = ({
 				  }
 				: { showCrosshairs: false, showMarkers: true, ...tooltipConfig },
 			color: color || token.colorPrimary7,
+			// Increased padding to ensure labels are never clipped
+			padding: [50, 50, 50, 50],
 			xAxis: {
 				label: {
-					formatter: formattedXAxis,
+					formatter: (text) => wrapLabel(text, 10),
+					offset: 15,
+					autoRotate: false,
+					autoHide: false, // Never hide labels
+					autoEllipsis: false, // Never truncate with ellipsis
+					style: {
+						fontSize: 12,
+						fill: '#666',
+					},
 				},
 				line: null,
 				tickLine: null,
@@ -129,6 +179,7 @@ const RadarChart = ({
 		formattedXAxis,
 		score,
 		token.colorPrimary7,
+		wrapLabel,
 		rest,
 	]);
 

package/src/@daf/core/components/Charts/style.js

@@ -2,7 +2,7 @@ import styled from "styled-components";
 
 const Container = styled.div`
 	height: ${props => props.height || '300px'};
-	width: ${props => props.isPdf ? (props.width ? props.width : '1000px') : 'calc(100% - 48px)'}; 
+	width: ${props => props.isPdf ? (props.width ? props.width : '1000px') : 'calc(100% - 48px)'};
 `;
 
 export default Container;

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

@@ -16,16 +16,12 @@ export default function VegetationWidget({
 }) {
 	let vegetationConfig = getVegetationConfig();
 	
-	// Get all VEGETATION_KEYS values before filtering (needed for mapping check)
 	const allVegetationKeys = vegetationConfig.map(item => item.key);
 	
-	// Filter to show only specific keys if filterKeys is provided
 	if (filterKeys && Array.isArray(filterKeys)) {
 		vegetationConfig = vegetationConfig.filter(item => filterKeys.includes(item.key));
 	}
 
-	// Map growthObservations to VEGETATION_KEYS
-	// Handle both formats: growthObservations keys (e.g., "yellowing_leaves") and VEGETATION_KEYS (e.g., "yellowing")
 	const mappedGrowthObservations = Array.isArray(growthObservations)
 		? growthObservations
 			.map(obs => {

package/src/@daf/pages/Summary/Activities/MonitoringCampaign/components/BiodiversityHabitat/ObservedFauna.jsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import { Widget, BarChart } from '../../../../../../../../src/index.js';
-import { calculateNiceAxisConfig, mergeDefaultCategories } from '../chartHelpers.js';
+import { calculateNaturalAxisConfig, mergeDefaultCategories } from '../chartHelpers.js';
 
 const ObservedFauna = ({
     observedFaunaChart,
@@ -32,16 +32,11 @@ const ObservedFauna = ({
     }, [observedFaunaChart, options]);
 
     const xAxisConfig = useMemo(() => {
-        return calculateNiceAxisConfig(
-            chartData,
-            'value',
-            1.2, // multiplier: 20% padding
-            {
-                min: 0,
-                max: 10,
-                tickMethod: () => [0, 2, 4, 6, 8, 10]
-            }
-        );
+        const maxValue = chartData && chartData.length > 0
+            ? Math.max(...chartData.map(item => Number(item?.value) || 0))
+            : 0;
+
+        return calculateNaturalAxisConfig(maxValue);
     }, [chartData]);
 
     return (

package/src/@daf/pages/Summary/Activities/MonitoringCampaign/components/BiodiversityHabitat/index.jsx

@@ -83,8 +83,8 @@ const BiodiversityHabitat = ({
                     t={t}
                 />
 
-                <div style={{ display: "flex", gap: "24px" }}>
-                    <section style={{ flex: 1 }}>
+                <div style={{ display: "flex", gap: "24px", flexWrap: "wrap" }}>
+                    <section style={{ flex: 1, minWidth: "300px" }}>
                         <ObservedFauna
                             observedFaunaChart={observedFauna}
                             t={t}
@@ -92,11 +92,13 @@ const BiodiversityHabitat = ({
                         />
                     </section>
                
+                    <section style={{ flex: 1, minWidth: "300px" }}>
                         <InvasiveSpecies
                             invasiveSpeciesChart={invasiveSpecies}
                             t={t}
                             options={options}
                         />
+                    </section>
                  
                 </div>
             </Widget>

package/src/@daf/pages/Summary/Activities/MonitoringCampaign/components/MangroveGrowth/PlantedSpecies.jsx

@@ -2,7 +2,14 @@ import React, { useMemo, useCallback } from 'react';
 import { Widget, PieChart } from '../../../../../../../../src/index.js';
 import { renderTooltipJsx } from '../../../../../../utils/tooltip.js';
 
-const COLORS = ['#6AD99E', '#F5C2AC', '#F0A888', '#DF571E', '#C04B19', '#9B3D14', '#7A2F0F'];
+// Color mapping for planted species
+const PLANTED_SPECIES_COLORS = {
+    rhyzophora_mangle: '#016C6E',
+    rhyzophora: '#00AEB1',
+    rhyzophora_sp: '#A0EBEC',
+};
+
+const DEFAULT_COLOR = '#9E9E9E';
 
 const PlantedSpecies = ({
     plantedSpeciesChart,
@@ -27,7 +34,7 @@ const PlantedSpecies = ({
         return data.map((item, index) => ({
             value: Number(item?.count) || 0,
             percent: total > 0 ? (Number(item?.count) || 0) / total : 0,
-            color: COLORS[index % COLORS.length],
+            color: PLANTED_SPECIES_COLORS[item?.name] || DEFAULT_COLOR,
             label: optionsMap[item?.name] || item?.name || '',
             key: item?.name || `item-${index}`,
         }));
@@ -44,18 +51,26 @@ const PlantedSpecies = ({
                 return null;
             }
 
+            // Calculate total from all items
+            const total = pieData.reduce((sum, dataItem) => sum + (dataItem.value || 0), 0);
+
+            // Show all items in the tooltip, sorted by value (descending)
+            const allItems = pieData
+                .filter(dataItem => dataItem.value > 0)
+                .sort((a, b) => b.value - a.value)
+                .map(dataItem => ({
+                    color: dataItem.color,
+                    label: dataItem.label || '',
+                    value: dataItem.value || 0,
+                }));
+
             return renderTooltipJsx({
                 title: t("Planted Species"),
-                items: [
-                    {
-                        color: item.color,
-                        label: item.label || '',
-                        value: item.value || 0,
-                    },
-                ],
+                subTitle: total.toLocaleString(),
+                items: allItems,
             });
         },
-        [t, isEmpty]
+        [t, isEmpty, pieData]
     );
 
     return (

package/src/@daf/pages/Summary/Activities/MonitoringCampaign/components/MangroveGrowth/SeedlingsHeight.jsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import { Widget, ColumnChart } from '../../../../../../../../src/index.js';
-import { calculateNiceAxisConfig, mergeDefaultCategories } from '../chartHelpers.js';
+import { calculateNaturalAxisConfig, mergeDefaultCategories } from '../chartHelpers.js';
 
 // Default height ranges to always display
 const DEFAULT_HEIGHT_RANGES = [
@@ -26,16 +26,13 @@ const SeedlingsHeight = ({
     }, [seedlingsHeightChart]);
 
     const yAxisConfig = useMemo(() => {
-        return calculateNiceAxisConfig(
-            chartData,
-            'value',
-            2, // multiplier: double the max value
-            {
-                min: 0,
-                max: 20,
-                tickMethod: () => [0, 5, 10, 15, 20]
-            }
-        );
+        // Calculate max value from data
+        const maxValue = chartData && chartData.length > 0
+            ? Math.max(...chartData.map(item => Number(item?.value) || 0))
+            : 0;
+
+        // Use the helper function to calculate natural number axis configuration
+        return calculateNaturalAxisConfig(maxValue);
     }, [chartData]);
 
     return (
@@ -58,10 +55,10 @@ const SeedlingsHeight = ({
                             const item = data[0]?.data || data[0];
                             return {
                                 title: t("Seedlings Height"),
-                                subTitle: title,
                                 items: [
                                     {
-                                        label: t("Count"),
+                                        color: "#016C6E",
+                                        label: title,
                                         value: item?.value || 0,
                                     },
                                 ],

package/src/@daf/pages/Summary/Activities/MonitoringCampaign/components/MangroveGrowth/VegetationHealth.jsx

@@ -2,7 +2,22 @@ import React, { useMemo, useCallback } from 'react';
 import { Widget, PieChart } from '../../../../../../../../src/index.js';
 import { renderTooltipJsx } from '../../../../../../utils/tooltip.js';
 
-const COLORS = ['#016C6E', '#F5C2AC', '#F0A888', '#DF571E', '#C04B19', '#9B3D14', '#7A2F0F'];
+// Color mapping for vegetation health conditions
+const VEGETATION_HEALTH_COLORS = {
+    healthy_leaves: '#6AD99E',
+    white_spots: '#E8F0F0',
+    yellowing_leaves: '#CDC14F',
+    black_spots: '#2E3131',
+    reddish_spots: '#CB2525',
+    leaf_mosaic: '#B59E76',
+    spider_webs: '#F8F6EF',
+    damage_from_insects: '#DE8954',
+    dry_dead_leaves: '#767870',
+    no_leaves: '#F97066',
+    other: '#BDBDBD',
+};
+
+const DEFAULT_COLOR = '#9E9E9E';
 
 const VegetationHealth = ({
     vegetationHealthChart,
@@ -26,15 +41,15 @@ const VegetationHealth = ({
         return data.map((item, index) => ({
             value: Number(item?.count) || 0,
             percent: total > 0 ? (Number(item?.count) || 0) / total : 0,
-            color: COLORS[index % COLORS.length],
+            color: VEGETATION_HEALTH_COLORS[item?.name] || DEFAULT_COLOR,
             label: optionsMap[item?.name] || item?.name || '',
             key: item?.name || `item-${index}`,
         }));
     }, [vegetationHealthChart, optionsMap]);
 
     const isEmpty = useMemo(() => {
-        return !vegetationHealthChart || vegetationHealthChart.length === 0 || 
-               vegetationHealthChart.every(item => !item?.count || Number(item.count) === 0);
+        return !vegetationHealthChart || vegetationHealthChart.length === 0 ||
+            vegetationHealthChart.every(item => !item?.count || Number(item.count) === 0);
     }, [vegetationHealthChart]);
 
     const getTooltipChildren = useCallback(