datastake-daf 0.6.817 → 0.6.819

package/dist/services/index.js

@@ -1458,11 +1458,6 @@ class LinkedSubjectsService extends BaseService {
   getForm({
     namespace
   }, language = "en", scope) {
-    console.log({
-      namespace,
-      language,
-      scope
-    });
     return this.apiGet({
       url: `forms/${namespace === "documents" ? namespace : getNamespace(namespace)}`,
       isApp: true,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "datastake-daf",
-	"version": "0.6.817",
+	"version": "0.6.819",
 	"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/core/components/ViewForm/components/Records/config.js

@@ -4,6 +4,7 @@ export const getSourcesType = (subject) => {
       locations: "location",
       location: "location",
       "production-sites": "location",
+      scl: "location",
       
       stakeholders: "stakeholder",
       stakeholder: "stakeholder",

package/src/@daf/core/components/ViewForm/components/Records/index.jsx

@@ -39,7 +39,6 @@ const Records = ({
             const { data } = await VersionService.getSources({ type, id, params: {
                 source: selectedSource,
             } });
-            console.log({data})
             setVersions(data);
         } catch (error) {
             console.error('Error fetching versions:', error);

package/src/@daf/pages/Dashboards/SupplyChain/components/KeyIndicators/config.js

@@ -2,7 +2,7 @@ import React from "react";
 import CustomIcon from '../../../../../core/components/Icon/CustomIcon.jsx';
 import KeyIndicatorNavigateLabel from '../../../../../core/components/UI/KeyIndicatorNavigateLabel/index.jsx';
 
-export const getRowConfig = ({ t, data = {}, goTo, getRedirectLink, theme = {} }) => [
+export const getRowConfig = ({ t, data = {}, goTo, getRedirectLink, theme = {}, APP }) => [
 	{
 		label: (
 			<KeyIndicatorNavigateLabel 
@@ -10,7 +10,7 @@ export const getRowConfig = ({ t, data = {}, goTo, getRedirectLink, theme = {} }
 				getRedirectLink={getRedirectLink} 
 				theme={theme} 
 				label="Identified Mine Sites" 
-				link="/app/production-sites" 
+				link={APP === 'nashiriki' ? '/app/scl' : '/app/production-sites'} 
 			/>
 		),
 		render: () => {

package/src/@daf/pages/Dashboards/SupplyChain/components/KeyIndicators/index.js

@@ -13,7 +13,7 @@ const defaultFetchConfig = {
     },
 };
 
-function KeyIndicators({selectedSources = {}, theme = {}, getRedirectLink = () => {}, t = () => {}, goTo = () => {} }) {
+function KeyIndicators({selectedSources = {}, theme = {}, getRedirectLink = () => {}, t = () => {}, goTo = () => {}, APP }) {
     const fetchConfig = useMemo(() => ({
         ...defaultFetchConfig,
         filters: { ...defaultFetchConfig.filters, sources: selectedSources?.partners || [] },
@@ -29,8 +29,9 @@ function KeyIndicators({selectedSources = {}, theme = {}, getRedirectLink = () =
             goTo,
             getRedirectLink,
             theme,
+            APP
         })
-    }, [t, data, goTo, getRedirectLink, theme])
+    }, [t, data, goTo, getRedirectLink, theme, APP])
     
     return (
         <KeyIndicatorsWidget

package/src/@daf/pages/Dashboards/SupplyChain/index.jsx

@@ -21,6 +21,8 @@ function SupplyChain({
     informationSources,
     hardcodedData,
     breadcrumbs = [],
+    supportText,
+    APP,
 }) {
 
     const sourceOptions = useMemo(() => {
@@ -69,12 +71,13 @@ function SupplyChain({
                             />
                         </div>
                     }
+                    supportText={supportText}
                     breadcrumbs={breadcrumbs}
                 />
             }
         >
             <section>
-                <KeyIndicators selectedSources={selectedPartners} theme={theme} t={t} goTo={goTo} getRedirectLink={getRedirectLink} />
+                <KeyIndicators selectedSources={selectedPartners} theme={theme} t={t} goTo={goTo} getRedirectLink={getRedirectLink} APP={APP} />
             </section>                
             <section>
                 <SupplyChainMap selectedSources={selectedPartners} t={t} goTo={goTo} options={options} getRedirectLink={getRedirectLink} />

package/src/@daf/pages/Dashboards/UserDashboard/components/KeyIndicators/config.js

@@ -2,7 +2,7 @@ import React from 'react';
 import CustomIcon from '../../../../../core/components/Icon/CustomIcon.jsx';
 import KeyIndicatorNavigateLabel from '../../../../../core/components/UI/KeyIndicatorNavigateLabel/index.jsx';
 
-export const getRowConfig = ({ t, data = {}, goTo, getRedirectLink, theme = {} }) => [
+export const getRowConfig = ({ t, data = {}, goTo, getRedirectLink, theme = {}, APP }) => [
 	{
 		label: (
 			<KeyIndicatorNavigateLabel 
@@ -35,8 +35,8 @@ export const getRowConfig = ({ t, data = {}, goTo, getRedirectLink, theme = {} }
 				t={t} 
 				getRedirectLink={getRedirectLink} 
 				theme={theme} 
-				label="Activities" 
-				link="/app/activities" 
+				label={APP === 'nashiriki' ? 'Corrective Actions' : 'Activities'}
+				link={APP === 'nashiriki' ? '/app/corrective-actions' : '/app/activities'}
 			/>
 		),
 		render: () => {

package/src/@daf/pages/Dashboards/UserDashboard/components/KeyIndicators/index.jsx

@@ -17,6 +17,7 @@ function KeyIndicators({
     getRedirectLink = () => {},
 	theme = {},
 	partners = [],
+	APP,
 }) {
     const fetchConfig = useMemo(
 		() => ({
@@ -33,9 +34,10 @@ function KeyIndicators({
 				data: { ...data, partners },
 				goTo,
 				getRedirectLink,
-				theme
+				theme,
+				APP
 			}),
-		[t, data, goTo, getRedirectLink, partners, theme],
+		[t, data, goTo, getRedirectLink, partners, theme, APP],
 	);
 
     return (

package/src/@daf/pages/Dashboards/UserDashboard/components/MineSites/config.js

@@ -9,7 +9,7 @@ export const getTabs = (t) => {
 export const getFiltersConfig = ({t, filters, activeTab, options}) => {
     const value = filters.type ? { value: filters.type } : {};
 
-	const eventCategoryOptions = (options?.eventCategoryOptions || [])?.map((item) => ({
+	const eventCategoryOptions = (options?.eventCategoryOptions || options?.categoryOptions || [])?.map((item) => ({
 		value: item.value,
 		label: typeof item.label === 'object' ? Object.values(item.label)[1] : item.label,
 	}))
@@ -22,7 +22,7 @@ export const getFiltersConfig = ({t, filters, activeTab, options}) => {
 				key: "category",
 				type: "select",
 				...value,
-				options: options?.categoriesOptions ?? [],
+				options: options?.categoriesOptions || options?.category || [],
 			},
 		];
 	}

package/src/@daf/pages/Dashboards/UserDashboard/config.js

@@ -2,12 +2,12 @@ export const getActionWidgetsConfig = ({ goTo, getRedirectLink, APP, t }) => [
     {
         icon: "MineSite",
         title: t("Create Mine Site"),
-        onClick: () => goTo(getRedirectLink("/app/production-sites?create=true")),
+        onClick: () => goTo(getRedirectLink(`/app/${APP === 'nashiriki' ? 'scl' : 'production-sites'}?create=true`)),
     },
     {
         icon: "FileEdit",
         title: "Report Activity",
-        onClick: () => goTo(getRedirectLink("/app/activities?create=true")),
+        onClick: () => goTo(getRedirectLink(`/app/${APP === 'nashiriki' ? 'corrective-actions' : 'activities'}?create=true`)),
     },
     {
         icon: "ReportIncidents",

package/src/@daf/pages/Dashboards/UserDashboard/index.jsx

@@ -67,6 +67,7 @@ function UserDashboard({
                     t={t} 
                     goTo={goTo} 
                     getRedirectLink={getRedirectLink} 
+                    APP={APP}
                 />
             </section>
             <section>

package/src/@daf/pages/Dashboards/helper.js

@@ -53,7 +53,7 @@ export const mapDataForChainOfCustody = (data = {}, options = {}, goTo = () => {
 			number: 0,
 			name: item.name,
 			sources: parentId ? [parentId] : [],
-			subTitle: findOptions(item?.category, options?.categoriesOptions),
+			subTitle: findOptions(item?.category, options?.categoriesOptions || options?.category || []),
 			leftIcon: type === "client" ? rightIcon : leftIcon,
 			leftBackground: type === "client" ? rightBackground : leftBackground,
 			topIcon: mapIcon(item.category),
@@ -70,7 +70,7 @@ export const mapDataForChainOfCustody = (data = {}, options = {}, goTo = () => {
 		id: data.id,
 		number: 0,
 		name: data.name,
-		subTitle: findOptions(data?.category, options?.categoriesOptions),
+		subTitle: findOptions(data?.category, options?.categoriesOptions || options?.category || []),
 		leftIcon: middleIcon,
 		leftBackground: theme.colorPrimary10,
 		topIcon: mapIcon(data.category),

package/src/@daf/pages/Events/config.js

@@ -117,7 +117,7 @@ export const getFilterOptions = (options, t) => {
 		eventCategoryOptions,
 	  } = options || {};
 
-	const catOptions = eventCategoryOptions?.map((item) => ({
+	const catOptions = (eventCategoryOptions || categoryOptions || [])?.map((item) => ({
 		value: item.value,
 		label: typeof item.label === 'object' ? Object.values(item.label)[1] : item.label,
 	}))

package/src/@daf/pages/Locations/MineSite/columns.js

@@ -188,7 +188,7 @@ export const getColumns = ({t, goTo, user, options, activeTab, getRedirectLink,
               label: t("Summary"),
               value: "Summary",
               onClick: () => {
-                let link = `/app/${subject === 'scl' ? 'summary/scl' : 'mine-summary'}/${all.datastakeId}`
+                let link = `/app/mine-summary/${all.datastakeId}`
                 if (activeTab === "shared") {
                   link += `?sourceId=${all?.authorId?.id}`;
                 }

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(

package/src/@daf/pages/Summary/Activities/MonitoringCampaign/components/SoilWaterProfile/SoilType.jsx

@@ -3,7 +3,15 @@ import { Widget, PieChart } from '../../../../../../../../src/index.js';
 import { renderTooltipJsx } from '../../../../../../utils/tooltip.js';
 import { renderPercentage } from '../../../../../../utils/numbers.js';
 
-const COLORS = ['#016C6E', '#4FB3A1', '#A8E6CF', '#FFD93D', '#F0A888', '#DF571E', '#C04B19'];
+// Color mapping for soil types
+const SOIL_TYPE_COLORS = {
+    sandy: '#00AEB1',
+    mixed: '#016C6E',
+    clay: '#A0EBEC',
+    muddy: '#4FB3A1',
+};
+
+const DEFAULT_COLOR = '#9E9E9E';
 
 const SoilType = ({
     soilTypeChart,
@@ -28,7 +36,7 @@ const SoilType = ({
         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: SOIL_TYPE_COLORS[item?.soilType] || DEFAULT_COLOR,
             label: optionsMap[item?.soilType] || item?.soilType || '',
             key: item?.soilType || `item-${index}`,
         }));
@@ -45,17 +53,21 @@ const SoilType = ({
                 return null;
             }
 
+            // Show all items in the tooltip, sorted by percentage (descending)
+            const allItems = pieData
+                .filter(dataItem => dataItem.value > 0)
+                .sort((a, b) => b.percent - a.percent)
+                .map(dataItem => ({
+                    color: dataItem.color,
+                    label: dataItem.label || '',
+                    value: renderPercentage(Math.round(dataItem.percent * 100)),
+                }));
+
             return renderTooltipJsx({
                 title: t("Soil Type"),
-                items: [
-                    {
-                        color: item.color,
-                        label: optionsMap[item.label] || item.label || '',
-                        value: `${ renderPercentage(item.percent.toFixed(2) * 100)}`,
-                    },
-                ],
+                items: allItems,
             });
-        }, [t, isEmpty, optionsMap]);
+        }, [t, isEmpty, pieData]);
 
     return (
         <Widget