datastake-daf 0.6.815 → 0.6.816

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

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

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

@@ -45,14 +45,6 @@ import {
     viewConfig as viewConfigIncidents
 } from '../Events/Incidents/config.js';
 import { getColumns as getColumnsIncidents } from "../Events/Incidents/columns.js";
-
-import { 
-    getFiltersConfig as getFiltersConfigTestimonials, 
-    getFilterOptions as getFilterOptionsTestimonials,
-    formConfig as formConfigTestimonials,
-    viewConfig as viewConfigTestimonials
-} from '../Events/Testimonials/config.js';
-import { getColumns as getColumnsTestimonials } from "../Events/Testimonials/columns.js";
   
 import { 
     getFiltersConfig as getFiltersConfigLocations, 
@@ -131,13 +123,6 @@ export const FILTER_REGISTRY = {
       viewConfig: viewConfigIncidents,
       columns: getColumnsIncidents,
     },
-    testimonials: {
-      config: getFiltersConfigTestimonials,
-      options: getFilterOptionsTestimonials,
-      formConfig: formConfigTestimonials,
-      viewConfig: viewConfigTestimonials,
-      columns: getColumnsTestimonials,
-    },
     locations: {
       config: getFiltersConfigLocations,
       options: getFilterOptionsLocations,

package/src/helpers/errorHandling.js

@@ -1,135 +1,67 @@
 import { message } from 'antd';
 
-/**
- * Check if a successful response contains embedded error data
- */
-export const isErrorResponse = (data) => {
-  if (!data) return false;
-  
-  return (
-    // Check for Exception names
-    (data.name && data.name.includes('Exception')) ||
-    // Check for nested response with error status
-    (data.response?.statusCode && data.response.statusCode >= 400) ||
-    // Check for top-level error status
-    (data.statusCode && data.statusCode >= 400) ||
-    // Check for explicit error flag
-    data.error === true ||
-    // Check for nested error property
-    (data.response?.error && data.response.error !== null)
-  );
-};
-
-/**
- * Extract error message from various error response formats
- */
-export const getErrorMessage = (data) => {
-  return (
-    data?.message ||
-    data?.response?.message ||
-    data?.response?.error ||
-    'An error occurred'
-  );
-};
-
 /**
  * Generic error handler factory for axios requests
  * Highly configurable to adapt to different project needs
  */
 export const createErrorHandler = (config = {}) => {
-  const {
-    onUnauthorized,
-    handleError,
-    getStorageManager,
-    checkTokenValidity = true,
-    unauthorizedRedirect = '/',
-    tokenStorageKey = 'token',
-    handleNetworkError = true,
-  } = config;
-
-  return (error, customOnUnauthorized) => {
-    // Handle cases where error.response doesn't exist (network errors)
-    if (!error.response) {
-      if (handleNetworkError && handleError) {
-        handleError({
-          status: 0,
-          statusText: "Network Error",
-          data: ["Please check your internet connection."],
-        });
+    const {
+      onUnauthorized,
+      handleError,
+      getStorageManager,
+      checkTokenValidity = true,
+      unauthorizedRedirect = '/',
+      tokenStorageKey = 'token',
+      handleNetworkError = true,
+    } = config;
+  
+    return (error, customOnUnauthorized) => {
+      // Handle cases where error.response doesn't exist (network errors)
+      if (!error.response) {
+        if (handleNetworkError && handleError) {
+          handleError({
+            status: 0,
+            statusText: "Network Error",
+            data: ["Please check your internet connection."],
+          });
+        }
+        return Promise.reject(error);
       }
-      return Promise.reject(error);
-    }
-
-    const { status, statusText, data: { errors, message } = {} } = error.response || { data: {} };
-    
-    // Handle 401 Unauthorized
-    if (status === 401) {
-      if (checkTokenValidity && getStorageManager) {
-        const token = getStorageManager().get(tokenStorageKey);
-        if (token) {
-          if (typeof customOnUnauthorized === 'function') {
-            customOnUnauthorized();
-          } else if (typeof onUnauthorized === 'function') {
-            onUnauthorized();
-          } else {
-            getStorageManager().clearOne(tokenStorageKey);
-            if (typeof window !== 'undefined') {
-              window.location.href = unauthorizedRedirect;
+  
+      const { status, statusText, data: { errors, message } = {} } = error.response || { data: {} };
+      
+      // Handle 401 Unauthorized
+      if (status === 401) {
+        if (checkTokenValidity && getStorageManager) {
+          const token = getStorageManager().get(tokenStorageKey);
+          if (token) {
+            if (typeof customOnUnauthorized === 'function') {
+              customOnUnauthorized();
+            } else if (typeof onUnauthorized === 'function') {
+              onUnauthorized();
+            } else {
+              getStorageManager().clearOne(tokenStorageKey);
+              if (typeof window !== 'undefined') {
+                window.location.href = unauthorizedRedirect;
+              }
             }
           }
         }
       }
-    }
-    
-    // Handle 4xx and 5xx errors
-    if (status >= 400 && status <= 500) {
-      if (handleError) {
-        handleError({ 
-          status, 
-          statusText: message || statusText, 
-          data: errors || [] 
-        });
-      }
-    }
-    
-    return Promise.reject(error);
-  };
-};
-
-/**
- * Create axios response interceptor to catch embedded errors in successful responses
- */
-export const createResponseInterceptor = (config = {}) => {
-  const { showNotification = true } = config;
-  
-  return {
-    onSuccess: (response) => {
-      // Check if the response data contains an error
-      if (isErrorResponse(response.data)) {
-        const errorMessage = getErrorMessage(response.data);
-        
-        if (showNotification) {
-          message.error(errorMessage);
+      
+      // Handle 4xx and 5xx errors
+      if (status >= 400 && status <= 500) {
+        if (handleError) {
+          handleError({ 
+            status, 
+            statusText: message || statusText, 
+            data: errors || [] 
+          });
         }
-        
-        // Convert to a rejected promise so catch blocks handle it
-        const error = new Error(errorMessage);
-        error.response = {
-          data: response.data,
-          status: response.data.statusCode || response.data.response?.statusCode || 200,
-          statusText: errorMessage,
-        };
-        error.isEmbeddedError = true; // Flag to identify these special errors
-        
-        return Promise.reject(error);
       }
       
-      return response;
-    },
-    onError: (error) => {
       return Promise.reject(error);
-    }
-  };
+    };
 };
 
 /**
@@ -137,29 +69,29 @@ export const createResponseInterceptor = (config = {}) => {
  * Useful for quick error notifications
  */
 export const handleError = (err) => {
-  const errorMessage = err?.response?.data?.message || 
-                       err?.message || 
-                       'An error occurred';
-  message.error(errorMessage);
-};
-
-/**
- * Success message handler
- */
-export const handleSuccess = (msg) => {
-  message.success(msg || 'Operation successful');
-};
-
-/**
- * Warning message handler
- */
-export const handleWarning = (msg) => {
-  message.warning(msg || 'Warning');
-};
-
-/**
- * Info message handler
- */
-export const handleInfo = (msg) => {
-  message.info(msg);
-};
+    const errorMessage = err?.response?.data?.message || 
+                         err?.message || 
+                         'An error occurred';
+    message.error(errorMessage);
+  };
+  
+  /**
+   * Success message handler
+   */
+  export const handleSuccess = (msg) => {
+    message.success(msg || 'Operation successful');
+  };
+  
+  /**
+   * Warning message handler
+   */
+  export const handleWarning = (msg) => {
+    message.warning(msg || 'Warning');
+  };
+  
+  /**
+   * Info message handler
+   */
+  export const handleInfo = (msg) => {
+    message.info(msg);
+  };

package/src/utils.js

@@ -46,7 +46,7 @@ export { StorageManager } from './helpers/StorageManager.js';
 
 export { assignParamsToUrl, buildQueryString } from './helpers/urlHelpers.js';
 
-export { createErrorHandler, handleError, handleSuccess, handleWarning, handleInfo, isErrorResponse, getErrorMessage } from './helpers/errorHandling.js';
+export { createErrorHandler, handleError, handleSuccess, handleWarning, handleInfo } from './helpers/errorHandling.js';
 
 export { createTheme, createAdminTheme } from './helpers/theme.js';