datastake-daf 0.6.814 → 0.6.816

package/dist/pages/index.js

@@ -12752,7 +12752,8 @@ const mapDataForChainOfCustody = (data = {}, options = {}, goTo = () => {}) => {
 
 const Container$1 = styled__default["default"].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)'};
+	overflow: ${props => props.style?.overflow || 'visible'};
 `;
 
 const useLegendConfig = ({
@@ -48955,17 +48956,10 @@ function VegetationWidget({
   ...props
 }) {
   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 => {
     // First try to map from growthObservations format
     const mapped = GROWTH_OBSERVATIONS_TO_VEGETATION_KEYS[obs];
@@ -51463,9 +51457,17 @@ const RadarChart = ({
         ...tooltipConfig
       },
       color: color || token.colorPrimary7,
+      paddingX: 60,
+      paddingY: 60,
       xAxis: {
         label: {
-          formatter: formattedXAxis
+          formatter: formattedXAxis,
+          offset: 15,
+          style: {
+            fontSize: 12,
+            fill: '#666',
+            textAlign: 'center'
+          }
         },
         line: null,
         tickLine: null,
@@ -51534,12 +51536,23 @@ const RadarChart = ({
   }, []);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "flex flex-1 flex-column justify-content-center",
+    style: {
+      overflow: 'visible'
+    },
     children: [/*#__PURE__*/jsxRuntime.jsx("div", {
       className: "flex justify-content-center",
+      style: {
+        paddingX: '30px',
+        overflow: 'visible',
+        width: '100%'
+      },
       children: /*#__PURE__*/jsxRuntime.jsx(Container$1, {
         ref: containerRef,
         height: height,
-        isPdf: isPdf
+        isPdf: isPdf,
+        style: {
+          paddingX: '30px'
+        }
       })
     }), legendEnabled && legendPosition === 'bottom' && /*#__PURE__*/jsxRuntime.jsx(CustomLegend, {
       items: legendItems,
@@ -56849,7 +56862,20 @@ const MonitoringScopeAndFindings = ({
   });
 };
 
-const COLORS$3 = ['#016C6E', '#F5C2AC', '#F0A888', '#DF571E', '#C04B19', '#9B3D14', '#7A2F0F'];
+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$3 = '#9E9E9E';
 const VegetationHealth = ({
   vegetationHealthChart,
   t = s => s,
@@ -56870,7 +56896,7 @@ const VegetationHealth = ({
     return data.map((item, index) => ({
       value: Number(item?.count) || 0,
       percent: total > 0 ? (Number(item?.count) || 0) / total : 0,
-      color: COLORS$3[index % COLORS$3.length],
+      color: VEGETATION_HEALTH_COLORS[item?.name] || DEFAULT_COLOR$3,
       label: optionsMap[item?.name] || item?.name || '',
       key: item?.name || `item-${index}`
     }));
@@ -56968,6 +56994,80 @@ const calculateNiceAxisConfig = (data, valueField = 'value', multiplier = 1.2, d
   };
 };
 
+/**
+ * Calculate y-axis configuration with natural numbers (integers) only
+ * Always starts from 0 and extends slightly above max for better visualization
+ * @param {number} maxValue - Maximum value from the data
+ * @param {Object} options - Optional configuration
+ * @param {number} options.minTicks - Minimum number of ticks to show (default: 4)
+ * @param {number} options.maxTicks - Maximum number of ticks to show (default: 6)
+ * @returns {Object} Axis configuration with min, max, and tickMethod
+ */
+const calculateNaturalAxisConfig = (maxValue, options = {}) => {
+  const {
+    minTicks = 4,
+    maxTicks = 6
+  } = options;
+  if (maxValue <= 0) {
+    return {
+      min: 0,
+      max: 4,
+      tickMethod: () => [0, 1, 2, 3, 4]
+    };
+  }
+
+  // For very small values (max <= 1), always show 0, 1, 2, 3, 4
+  if (maxValue <= 1) {
+    return {
+      min: 0,
+      max: 4,
+      tickMethod: () => [0, 1, 2, 3, 4]
+    };
+  }
+
+  // Calculate appropriate step size based on max value
+  let step = 1;
+  let displayMax = maxValue;
+  if (maxValue <= 5) {
+    // For small values, use step of 1 and extend a bit above
+    step = 1;
+    displayMax = Math.max(5, Math.ceil(maxValue * 1.5));
+  } else if (maxValue <= 10) {
+    // For medium-small values, use step of 2
+    step = 2;
+    displayMax = Math.ceil(maxValue * 1.2 / step) * step;
+  } else if (maxValue <= 20) {
+    // For medium values, use step of 5
+    step = 5;
+    displayMax = Math.ceil(maxValue * 1.2 / step) * step;
+  } else if (maxValue <= 50) {
+    // For larger values, use step of 10
+    step = 10;
+    displayMax = Math.ceil(maxValue * 1.2 / step) * step;
+  } else {
+    // For very large values, calculate step to get 4-6 ticks
+    const targetTicks = Math.min(maxTicks, Math.max(minTicks, Math.ceil(maxValue / 20)));
+    step = Math.ceil(maxValue / targetTicks / 10) * 10; // Round to nearest 10
+    displayMax = Math.ceil(maxValue * 1.2 / step) * step;
+  }
+
+  // Generate ticks from 0 to displayMax
+  const ticks = [];
+  for (let i = 0; i <= displayMax; i += step) {
+    ticks.push(i);
+  }
+
+  // Ensure max value is included if it's close
+  if (ticks[ticks.length - 1] < maxValue && maxValue - ticks[ticks.length - 1] <= step / 2) {
+    ticks.push(maxValue);
+  }
+  return {
+    min: 0,
+    max: displayMax,
+    tickMethod: () => ticks
+  };
+};
+
 /**
  * Merge default categories with backend data
  * Ensures all categories are displayed even if they have no data
@@ -57023,13 +57123,11 @@ const SeedlingsHeight$1 = ({
     return mergeDefaultCategories(seedlingsHeightChart, DEFAULT_HEIGHT_RANGES, 'range', 'count', 'label', 'value');
   }, [seedlingsHeightChart]);
   const yAxisConfig = React.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 /*#__PURE__*/jsxRuntime.jsx(Widget, {
     title: t("Seedlings Height"),
@@ -57051,9 +57149,9 @@ const SeedlingsHeight$1 = ({
             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
               }]
             };
@@ -57064,7 +57162,12 @@ const SeedlingsHeight$1 = ({
   });
 };
 
-const COLORS$2 = ['#6AD99E', '#F5C2AC', '#F0A888', '#DF571E', '#C04B19', '#9B3D14', '#7A2F0F'];
+const PLANTED_SPECIES_COLORS = {
+  rhyzophora_mangle: '#016C6E',
+  rhyzophora: '#00AEB1',
+  rhyzophora_sp: '#A0EBEC'
+};
+const DEFAULT_COLOR$2 = '#9E9E9E';
 const PlantedSpecies$1 = ({
   plantedSpeciesChart,
   t = s => s,
@@ -57085,7 +57188,7 @@ const PlantedSpecies$1 = ({
     return data.map((item, index) => ({
       value: Number(item?.count) || 0,
       percent: total > 0 ? (Number(item?.count) || 0) / total : 0,
-      color: COLORS$2[index % COLORS$2.length],
+      color: PLANTED_SPECIES_COLORS[item?.name] || DEFAULT_COLOR$2,
       label: optionsMap[item?.name] || item?.name || '',
       key: item?.name || `item-${index}`
     }));
@@ -57097,15 +57200,22 @@ const PlantedSpecies$1 = ({
     if (isEmpty) {
       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 /*#__PURE__*/jsxRuntime.jsx(Widget, {
     title: t("Planted Species"),
     className: "with-border-header h-w-btn-header",
@@ -57370,13 +57480,8 @@ const ObservedFauna = ({
     }));
   }, [observedFaunaChart, options]);
   const xAxisConfig = React.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 /*#__PURE__*/jsxRuntime.jsx(Widget, {
     title: t("Observed Fauna"),
@@ -57646,7 +57751,13 @@ const Stats = ({
   });
 };
 
-const COLORS$1 = ['#016C6E', '#4FB3A1', '#A8E6CF', '#FFD93D', '#F0A888', '#DF571E', '#C04B19'];
+const SOIL_TYPE_COLORS$1 = {
+  sandy: '#00AEB1',
+  mixed: '#016C6E',
+  clay: '#A0EBEC',
+  muddy: '#4FB3A1'
+};
+const DEFAULT_COLOR$1 = '#9E9E9E';
 const SoilType = ({
   soilTypeChart,
   t = s => s,
@@ -57667,7 +57778,7 @@ const SoilType = ({
     return data.map((item, index) => ({
       value: Number(item?.count) || 0,
       percent: total > 0 ? (Number(item?.count) || 0) / total : 0,
-      color: COLORS$1[index % COLORS$1.length],
+      color: SOIL_TYPE_COLORS$1[item?.soilType] || DEFAULT_COLOR$1,
       label: optionsMap[item?.soilType] || item?.soilType || '',
       key: item?.soilType || `item-${index}`
     }));
@@ -57679,15 +57790,18 @@ const SoilType = ({
     if (isEmpty) {
       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 /*#__PURE__*/jsxRuntime.jsx(Widget, {
     title: t("Soil Type"),
     className: "with-border-header h-w-btn-header",
@@ -57788,7 +57902,16 @@ const SalinityLevels = ({
   });
 };
 
-const COLORS = ['#6AD99E', '#FFD93D', '#F0A888', '#DF571E', '#B0B0B0', '#016C6E', '#4FB3A1'];
+const WATER_QUALITY_COLORS = {
+  fairly_clear: '#32D583',
+  turbid: '#FFA940',
+  polluted: '#F97066',
+  oil_traces: '#2B3644',
+  no_water: '#DAD6CE',
+  clear: '#6AD99E',
+  other: '#9E9E9E'
+};
+const DEFAULT_COLOR = '#9E9E9E';
 const WaterQuality = ({
   waterQualityChart,
   t = s => s,
@@ -57809,7 +57932,7 @@ const WaterQuality = ({
     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: WATER_QUALITY_COLORS[item?.waterQuality] || DEFAULT_COLOR,
       label: optionsMap[item?.waterQuality] || item?.waterQuality || '',
       key: item?.waterQuality || `item-${index}`
     }));
@@ -57821,15 +57944,18 @@ const WaterQuality = ({
     if (isEmpty) {
       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("Water Quality"),
-      items: [{
-        color: item.color,
-        label: item.label || '',
-        value: `${Math.round(item.percent * 100)}%`
-      }]
+      items: allItems
     });
-  }, [t, isEmpty]);
+  }, [t, isEmpty, pieData]);
   return /*#__PURE__*/jsxRuntime.jsx(Widget, {
     title: t("Water Quality"),
     className: "with-border-header h-w-btn-header",

package/package.json

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

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

@@ -59,9 +59,18 @@ const RadarChart = ({
 				  }
 				: { showCrosshairs: false, showMarkers: true, ...tooltipConfig },
 			color: color || token.colorPrimary7,
+			
+			paddingX: 60,
+			paddingY: 60,
 			xAxis: {
 				label: {
 					formatter: formattedXAxis,
+					offset: 15,
+					style: {
+						fontSize: 12,
+						fill: '#666',
+						textAlign: 'center',
+					},
 				},
 				line: null,
 				tickLine: null,
@@ -142,9 +151,9 @@ const RadarChart = ({
 	}, []);
 
 	return (
-		<div className="flex flex-1 flex-column justify-content-center">
-			<div className="flex justify-content-center">
-				<Container ref={containerRef} height={height} isPdf={isPdf}></Container>
+		<div className="flex flex-1 flex-column justify-content-center" style={{ overflow: 'visible' }}>
+			<div className="flex justify-content-center" style={{ paddingX: '30px', overflow: 'visible', width: '100%' }}>
+				<Container ref={containerRef} height={height} isPdf={isPdf} style={{ paddingX: '30px' }}></Container>
 			</div>
 			{legendEnabled && legendPosition === 'bottom' && (
 				<CustomLegend

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

@@ -2,7 +2,8 @@ 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)'};
+	overflow: ${props => props.style?.overflow || 'visible'};
 `;
 
 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/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(