datastake-daf 0.6.817 → 0.6.818

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

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

@@ -1,8 +1,20 @@
 import React, { useMemo, useCallback } from 'react';
 import { Widget, PieChart } from '../../../../../../../../src/index.js';
 import { renderTooltipJsx } from '../../../../../../utils/tooltip.js';
+import { renderPercentage } from '../../../../../../utils/numbers.js';
 
-const COLORS = ['#6AD99E', '#FFD93D', '#F0A888', '#DF571E', '#B0B0B0', '#016C6E', '#4FB3A1'];
+// Color mapping for water quality types
+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,
@@ -26,7 +38,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}`,
         }));
@@ -43,18 +55,22 @@ const WaterQuality = ({
                 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 (

package/src/@daf/pages/Summary/Activities/MonitoringCampaign/components/chartHelpers.js

@@ -59,6 +59,80 @@ export const calculateNiceAxisConfig = (data, valueField = 'value', multiplier =
     };
 };
 
+/**
+ * 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
+ */
+export 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