datastake-daf 0.6.810 → 0.6.812

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

@@ -6,24 +6,35 @@ const COLORS = ['#016C6E', '#F5C2AC', '#F0A888', '#DF571E', '#C04B19', '#9B3D14'
 
 const VegetationHealth = ({
     vegetationHealthChart,
-    t = (s) => s
+    t = (s) => s,
+    options = {}
 }) => {
+    const optionsMap = useMemo(() => {
+        if (!options || !Array.isArray(options)) return {};
+        return options.reduce((acc, option) => {
+            if (option?.value) {
+                acc[option.value] = option.label;
+            }
+            return acc;
+        }, {});
+    }, [options]);
+
     const pieData = useMemo(() => {
         const data = vegetationHealthChart || [];
-        const total = data.reduce((sum, item) => sum + (Number(item?.value) || 0), 0);
+        const total = data.reduce((sum, item) => sum + (Number(item?.count) || 0), 0);
 
         return data.map((item, index) => ({
-            value: Number(item?.value) || 0,
-            percent: total > 0 ? (Number(item?.value) || 0) / total : 0,
+            value: Number(item?.count) || 0,
+            percent: total > 0 ? (Number(item?.count) || 0) / total : 0,
             color: COLORS[index % COLORS.length],
-            label: item?.type || '',
-            key: item?.type || `item-${index}`,
+            label: optionsMap[item?.name] || item?.name || '',
+            key: item?.name || `item-${index}`,
         }));
-    }, [vegetationHealthChart]);
+    }, [vegetationHealthChart, optionsMap]);
 
     const isEmpty = useMemo(() => {
         return !vegetationHealthChart || vegetationHealthChart.length === 0 || 
-               vegetationHealthChart.every(item => !item?.value || Number(item.value) === 0);
+               vegetationHealthChart.every(item => !item?.count || Number(item.count) === 0);
     }, [vegetationHealthChart]);
 
     const getTooltipChildren = useCallback(

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

@@ -10,12 +10,13 @@ const MangroveGrowth = ({
     id,
     getSummaryDetail,
     loading = false,
-    t = (s) => s
+    t = (s) => s, 
+    options = {}
 }) => {
     const defaultConfig = useMemo(
         () => ({
-            basepath: "events/monitoring-campaign",
-            url: `/summary/${id}/outcomes`,
+            basepath: "events/monitoring-campaign-summary",
+            url: `/summary/${id}/mangrove-growth`,  
             stop: !id,
         }),
         [id],
@@ -44,9 +45,9 @@ const MangroveGrowth = ({
         survivalRate,
         averageHeight,
         averageDiameter,
-        vegetationHealthChart,
-        seedlingsHeightChart,
-        plantedSpeciesChart
+        vegetationHealth,
+        seedlingsTimelineChart,
+        plantedSpecies
     } = outcomesData || {};
 
     return (
@@ -66,20 +67,23 @@ const MangroveGrowth = ({
                 <div style={{ display: "flex", gap: "24px" }}>
                     <section style={{ flex: 1 }}>
                         <VegetationHealth
-                            vegetationHealthChart={vegetationHealthChart}
+                            vegetationHealthChart={vegetationHealth}
                             t={t}
+                            options={options.growthObservations}
                         />
                     </section>
                     <section style={{ flex: 1 }}>
                         <SeedlingsHeight
-                            seedlingsHeightChart={seedlingsHeightChart}
+                            seedlingsHeightChart={seedlingsTimelineChart}
                             t={t}
+                            options={options.seedlingsHeight}
                         />
                     </section>
                     <section style={{ flex: 1 }}>
                         <PlantedSpecies
-                            plantedSpeciesChart={plantedSpeciesChart}
+                            plantedSpeciesChart={plantedSpecies}
                             t={t}
+                            options={options.mangroveSpecies}
                         />
                     </section>
                 </div>

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

@@ -0,0 +1,100 @@
+import React, { useMemo } from 'react';
+import { Widget, ColumnChart } from '../../../../../../../../src/index.js';
+import { renderNumber } from '../../../../../../utils/numbers.js';
+import { calculateNiceAxisConfig } from '../chartHelpers.js';
+
+const SOIL_TYPE_COLORS = {
+    'sandy': '#F6E1BF',
+    'clay': '#B16100',
+    'muddy': '#776D59',
+    'mixed': '#00AEB1'
+};
+
+const SalinityLevels = ({
+    salinityLevelsChart,
+    t = (s) => s,
+    options = {}
+}) => {
+
+
+    const chartData = useMemo(() => {
+        const soilTypes = options?.soilTypes || [];
+
+
+        // Create a map of existing data
+        const dataMap = new Map();
+        if (salinityLevelsChart && Array.isArray(salinityLevelsChart)) {
+            salinityLevelsChart.forEach(item => {
+                if (item?.soilType) {
+                    dataMap.set(item.soilType, Number(item?.averageSalinity) || 0);
+                }
+            });
+        }
+
+        // Create chart data with all soil types from options
+        const data = soilTypes.map((soilType) => ({
+            label: soilType?.label || soilType?.value || '',
+            value: dataMap.get(soilType?.value) || 0,
+            soilType: soilType?.value || '',
+            color: SOIL_TYPE_COLORS[soilType?.value] || '#B16100'
+        }));
+
+
+        return data;
+    }, [salinityLevelsChart, options]);
+
+    const yAxisConfig = useMemo(() => {
+        return calculateNiceAxisConfig(
+            chartData,
+            'value',
+            1.2, // multiplier: 20% padding
+            {
+                min: 0,
+                max: 10,
+                tickMethod: () => [0, 2, 4, 6, 8, 10]
+            }
+        );
+    }, [chartData]);
+
+    return (
+        <Widget
+            title={t("Salinity Levels")}
+            className="with-border-header h-w-btn-header"
+        >
+            <div className="flex flex-1 flex-column justify-content-center">
+                <div className="flex justify-content-center w-full">
+                    <ColumnChart
+                        data={chartData}
+                        xFieldKey="label"
+                        yFieldKey="value"
+                        color={(item) => {
+
+                            const dataItem = chartData.find(d => d.label === item.label);
+                            const color = dataItem ? SOIL_TYPE_COLORS[dataItem.soilType] : '#B16100';
+                            return color;
+                        }}
+                        animated={true}
+                        height={200}
+                        yAxis={yAxisConfig}
+                        renderTooltipContent={(title, data) => {
+                            if (!data || data.length === 0) return {};
+                            const item = data[0]?.data || data[0];
+                            return {
+                                title: options?.soilTypes?.find(option => option.value === item?.soilType)?.label || title,
+                                items: [
+                                    {
+                                        label: t("Average salinity"),
+                                        value: `${renderNumber(item?.value || 0)} dS/m`,
+                                    },
+                                ],
+                            };
+                        }}
+                    />
+                </div>
+            </div>
+        </Widget>
+    );
+};
+
+export default SalinityLevels;
+

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

@@ -0,0 +1,84 @@
+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 = ['#016C6E', '#4FB3A1', '#A8E6CF', '#FFD93D', '#F0A888', '#DF571E', '#C04B19'];
+
+const SoilType = ({
+    soilTypeChart,
+    t = (s) => s,
+    options = {}
+}) => {
+
+    const optionsMap = useMemo(() => {
+        if (!options?.soilTypes || !Array.isArray(options.soilTypes)) return {};
+        return options.soilTypes.reduce((acc, option) => {
+            if (option?.value) {
+                acc[option.value] = option.label;
+            }
+            return acc;
+        }, {});
+    }, [options]);
+
+    const pieData = useMemo(() => {
+        const data = soilTypeChart || [];
+        const total = data.reduce((sum, item) => sum + (Number(item?.count) || 0), 0);
+
+        return data.map((item, index) => ({
+            value: Number(item?.count) || 0,
+            percent: total > 0 ? (Number(item?.count) || 0) / total : 0,
+            color: COLORS[index % COLORS.length],
+            label: optionsMap[item?.soilType] || item?.soilType || '',
+            key: item?.soilType || `item-${index}`,
+        }));
+    }, [soilTypeChart, optionsMap]);
+
+    const isEmpty = useMemo(() => {
+        return !soilTypeChart || soilTypeChart.length === 0 || 
+               soilTypeChart.every(item => !item?.count || Number(item.count) === 0);
+    }, [soilTypeChart]);
+
+    const getTooltipChildren = useCallback(
+        (item) => {
+            if (isEmpty) {
+                return null;
+            }
+
+            return renderTooltipJsx({
+                title: t("Soil Type"),
+                items: [
+                    {
+                        color: item.color,
+                        label: optionsMap[item.label] || item.label || '',
+                        value: `${ renderPercentage(item.percent.toFixed(2) * 100)}`,
+                    },
+                ],
+            });
+        }, [t, isEmpty, optionsMap]);
+
+    return (
+        <Widget
+            title={t("Soil Type")}
+            className="with-border-header h-w-btn-header"
+        >
+            <div className="flex flex-1 flex-column justify-content-center">
+                <div className="flex justify-content-center w-full">
+                    <PieChart
+                        data={pieData}
+                        isPie
+                        isEmpty={isEmpty}
+                        getTooltipChildren={getTooltipChildren}
+                        mouseXOffset={10}
+                        mouseYOffset={10}
+                        changeOpacityOnHover={false}
+                        doConstraints={false}
+                    />
+                </div>
+            </div>
+        </Widget>
+    );
+};
+
+export default SoilType;
+

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

@@ -0,0 +1,72 @@
+import React, { useMemo } from 'react';
+import { StatCard } from '../../../../../../../../src/index.js';
+import { calculateStatChange } from '../../../../../../utils/numbers.js';
+
+const Stats = ({
+    monitoredArea,
+    predominantSoilType,
+    averagePhLevel,
+    t = (s) => s,
+    options = {}
+}) => {
+    const monitoredAreaChange = useMemo(() => {
+        if (!monitoredArea) return null;
+        return calculateStatChange(
+            {
+                current: Number(monitoredArea.current) || 0,
+                previous: Number(monitoredArea.previous) || 0,
+            },
+            {
+                tooltipText: t("In comparison to last period"),
+                format: 'absolute',
+            }
+        );
+    }, [monitoredArea, t]);
+
+    const averagePhLevelChange = useMemo(() => {
+        if (!averagePhLevel) return null;
+        return calculateStatChange(
+            {
+                current: Number(averagePhLevel.current) || 0,
+                previous: Number(averagePhLevel.previous) || 0,
+            },
+            {
+                tooltipText: t("In comparison to last period"),
+                format: 'absolute',
+            }
+        );
+    }, [averagePhLevel, t]);
+
+    return (
+        <div style={{ display: "flex", gap: "24px", marginBottom: "24px" }}>
+            <section style={{ flex: 1 }}>
+                <StatCard
+                    title={t("Monitored Area")}
+                    value={monitoredArea ? Number(monitoredArea.current).toLocaleString() + " ha" : "0 ha"}
+                    icon="Tree"
+                    change={monitoredAreaChange}
+                />
+            </section>
+
+            <section style={{ flex: 1 }}>
+                <StatCard
+                    title={t("Predominant Soil type")}
+                    value={ options?.soilTypes?.find(option => option.value === predominantSoilType)?.label || "-"}
+                    icon="Earth"
+                />
+            </section>
+
+            <section style={{ flex: 1 }}>
+                <StatCard
+                    title={t("Average pH Level")}
+                    value={averagePhLevel ? Number(averagePhLevel.current).toFixed(1) : "0.0"}
+                    icon="Droplets"
+                    change={averagePhLevelChange}
+                />
+            </section>
+        </div>
+    );
+};
+
+export default Stats;
+

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

@@ -0,0 +1,84 @@
+import React, { useMemo, useCallback } from 'react';
+import { Widget, PieChart } from '../../../../../../../../src/index.js';
+import { renderTooltipJsx } from '../../../../../../utils/tooltip.js';
+
+const COLORS = ['#6AD99E', '#FFD93D', '#F0A888', '#DF571E', '#B0B0B0', '#016C6E', '#4FB3A1'];
+
+const WaterQuality = ({
+    waterQualityChart,
+    t = (s) => s,
+    options = {}
+}) => {
+    const optionsMap = useMemo(() => {
+        if (!options?.waterQuality || !Array.isArray(options.waterQuality)) return {};
+        return options.waterQuality.reduce((acc, option) => {
+            if (option?.value) {
+                acc[option.value] = option.label;
+            }
+            return acc;
+        }, {});
+    }, [options]);
+
+    const pieData = useMemo(() => {
+        const data = waterQualityChart || [];
+        const total = data.reduce((sum, item) => sum + (Number(item?.count) || 0), 0);
+
+        return data.map((item, index) => ({
+            value: Number(item?.count) || 0,
+            percent: total > 0 ? (Number(item?.count) || 0) / total : 0,
+            color: COLORS[index % COLORS.length],
+            label: optionsMap[item?.waterQuality] || item?.waterQuality || '',
+            key: item?.waterQuality || `item-${index}`,
+        }));
+    }, [waterQualityChart, optionsMap]);
+
+    const isEmpty = useMemo(() => {
+        return !waterQualityChart || waterQualityChart.length === 0 || 
+               waterQualityChart.every(item => !item?.count || Number(item.count) === 0);
+    }, [waterQualityChart]);
+
+    const getTooltipChildren = useCallback(
+        (item) => {
+            if (isEmpty) {
+                return null;
+            }
+
+            return renderTooltipJsx({
+                title: t("Water Quality"),
+                items: [
+                    {
+                        color: item.color,
+                        label: item.label || '',
+                        value: `${Math.round(item.percent * 100)}%`,
+                    },
+                ],
+            });
+        },
+        [t, isEmpty]
+    );
+
+    return (
+        <Widget
+            title={t("Water Quality")}
+            className="with-border-header h-w-btn-header"
+        >
+            <div className="flex flex-1 flex-column justify-content-center">
+                <div className="flex justify-content-center w-full">
+                    <PieChart
+                        data={pieData}
+                        isPie
+                        isEmpty={isEmpty}
+                        getTooltipChildren={getTooltipChildren}
+                        mouseXOffset={10}
+                        mouseYOffset={10}
+                        changeOpacityOnHover={false}
+                        doConstraints={false}
+                    />
+                </div>
+            </div>
+        </Widget>
+    );
+};
+
+export default WaterQuality;
+

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

@@ -0,0 +1,101 @@
+import React, { useMemo } from 'react';
+import { Widget } from '../../../../../../../../src/index.js';
+import { useWidgetFetch } from '../../../../../../hooks/useWidgetFetch.js';
+import Stats from './Stats.jsx';
+import SoilType from './SoilType.jsx';
+import SalinityLevels from './SalinityLevels.jsx';
+import WaterQuality from './WaterQuality.jsx';
+
+const SoilWaterProfile = ({
+    id,
+    getSummaryDetail,
+    loading = false,
+    t = (s) => s,
+    options = {}
+}) => {
+    const defaultConfig = useMemo(
+        () => ({
+            basepath: "events/monitoring-campaign-summary",
+            url: `/summary/${id}/soil-water-profile`,
+            stop: !id,
+        }),
+        [id],
+    );
+
+    const customGetData = useMemo(() => {
+        if (getSummaryDetail && id) {
+            return ({ url, params = {} }) => {
+                const match = url.match(/\/summary\/[^/]+\/(.+)/);
+                if (match) {
+                    const [, type] = match;
+                    return getSummaryDetail(id, type, params);
+                }
+                throw new Error(`Invalid URL format: ${url}`);
+            };
+        }
+        return undefined;
+    }, [getSummaryDetail, id]);
+
+    const { loading: outcomesLoading, data: outcomesData } = useWidgetFetch({
+        config: defaultConfig,
+        getData: customGetData
+    });
+
+    const {
+        monitoredArea,
+        predominantSoilType,
+        phLevel,
+        previousPhLevel,
+        soilType,
+        salinityLevels,
+        waterQuality
+    } = outcomesData || {};
+
+    const averagePhLevel = useMemo(() => {
+        return {
+            current: Number(phLevel) || 0,
+            previous: Number(previousPhLevel) || 0
+        };
+    }, [phLevel, previousPhLevel]);
+
+    return (
+        <section>
+            <Widget
+                title={t("Soil & Water Profile")}
+                loading={loading || outcomesLoading}
+                className="with-border-header h-w-btn-header"
+            >
+                <Stats
+                    monitoredArea={monitoredArea}
+                    predominantSoilType={predominantSoilType}
+                    averagePhLevel={averagePhLevel}
+                    t={t}
+                    options={options}
+                />
+                
+                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '24px' }}>
+                    <SoilType
+                        soilTypeChart={soilType}
+                        t={t}
+                        options={options}
+                    />
+                    
+                    <SalinityLevels
+                        salinityLevelsChart={salinityLevels}
+                        t={t}
+                        options={options}
+                    />
+                    
+                    <WaterQuality
+                        waterQualityChart={waterQuality}
+                        t={t}
+                        options={options}
+                    />
+                </div>
+            </Widget>
+        </section>
+    );
+};
+
+export default SoilWaterProfile;
+

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

@@ -0,0 +1,102 @@
+/**
+ * Calculate nice axis configuration with clean round numbers
+ * @param {Array} data - Chart data array
+ * @param {string} valueField - Field name containing the numeric values
+ * @param {number} multiplier - Multiplier for calculating max (e.g., 1.2 for 20% padding, 2 for double)
+ * @param {Object} defaultConfig - Default configuration when data is empty or all zeros
+ * @returns {Object} Axis configuration with min, max, and tickMethod
+ */
+export const calculateNiceAxisConfig = (data, valueField = 'value', multiplier = 1.2, defaultConfig = { min: 0, max: 10, tickMethod: () => [0, 2, 4, 6, 8, 10] }) => {
+    if (!data || data.length === 0) {
+        return defaultConfig;
+    }
+    
+    const maxValue = Math.max(...data.map(item => item[valueField] || 0));
+    
+    if (maxValue <= 0) {
+        return defaultConfig;
+    }
+    
+    // Calculate a nice round max value
+    const rawMax = maxValue * multiplier;
+    
+    // Find appropriate tick interval that gives nice round numbers
+    const magnitude = Math.pow(10, Math.floor(Math.log10(rawMax)));
+    const possibleIntervals = [
+        magnitude * 0.1,
+        magnitude * 0.2,
+        magnitude * 0.5,
+        magnitude * 1,
+        magnitude * 2,
+        magnitude * 5,
+        magnitude * 10
+    ];
+    
+    // Pick the interval that gives us 4-6 ticks
+    let tickInterval = possibleIntervals[0];
+    for (const interval of possibleIntervals) {
+        const numTicks = Math.ceil(rawMax / interval);
+        if (numTicks >= 4 && numTicks <= 6) {
+            tickInterval = interval;
+            break;
+        }
+    }
+    
+    const niceMax = Math.ceil(rawMax / tickInterval) * tickInterval;
+    const numTicks = Math.round(niceMax / tickInterval);
+    
+    // Determine decimal places based on interval size
+    const decimalPlaces = tickInterval < 1 ? 1 : 0;
+    
+    return {
+        min: 0,
+        max: niceMax,
+        tickMethod: () => Array.from({ length: numTicks + 1 }, (_, i) => {
+            const tick = i * tickInterval;
+            // Round to avoid floating point precision issues
+            return Math.round(tick * Math.pow(10, decimalPlaces)) / Math.pow(10, decimalPlaces);
+        })
+    };
+};
+
+/**
+ * Merge default categories with backend data
+ * Ensures all categories are displayed even if they have no data
+ * @param {Array} backendData - Data from backend
+ * @param {Array} defaultCategories - Default categories to always display
+ * @param {string} categoryKey - Key in backendData for category matching
+ * @param {string} valueKey - Key in backendData for value
+ * @param {string} labelKey - Key in defaultCategories for label
+ * @param {string} valueFieldKey - Key in defaultCategories for value matching
+ * @returns {Array} Merged data with all categories
+ */
+export const mergeDefaultCategories = (
+    backendData,
+    defaultCategories,
+    categoryKey = 'range',
+    valueKey = 'count',
+    labelKey = 'label',
+    valueFieldKey = 'value'
+) => {
+    if (!defaultCategories || defaultCategories.length === 0) {
+        return [];
+    }
+    
+    // Create a map of backend data
+    const dataMap = new Map();
+    if (backendData && Array.isArray(backendData)) {
+        backendData.forEach(item => {
+            if (item?.[categoryKey]) {
+                dataMap.set(item[categoryKey], Number(item?.[valueKey]) || 0);
+            }
+        });
+    }
+    
+    // Merge with default categories, maintaining order from defaults
+    return defaultCategories.map(category => ({
+        label: category?.[labelKey] || category?.[valueFieldKey] || '',
+        value: dataMap.get(category?.[valueFieldKey]) ?? 0,
+        [categoryKey]: category?.[valueFieldKey] || ''
+    }));
+};
+

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

@@ -2,8 +2,11 @@ import { DashboardLayout, Header } from '../../../../../../src/index.js'
 import KeyInformation from './components/KeyInformation/index.jsx';
 import MonitoringScopeAndFindings from './components/MonitoringScopeAndFindings/index.jsx';
 import MangroveGrowth from './components/MangroveGrowth/index.jsx';
+import BiodiversityHabitat from './components/BiodiversityHabitat/index.jsx';
+import SoilWaterProfile from './components/SoilWaterProfile/index.jsx';
+import AssociatedInformation from '../PlantingCycle/components/AssociatedInformation/index.jsx';
 
-const MonitoringCampaignSummary = ({ header, activityData, loading = false, id, projectId, t = () => { }, getSummaryDetail, navigate, selectOptions }) => {
+const MonitoringCampaignSummary = ({ header, activityData, loading = false, id, projectId, t = () => { }, getSummaryDetail, navigate, selectOptions,   }) => {
     return (
         <DashboardLayout
             header={
@@ -21,7 +24,10 @@ const MonitoringCampaignSummary = ({ header, activityData, loading = false, id,
         >
             <KeyInformation id={id} t={t} getSummaryDetail={getSummaryDetail} loading={loading} />
             <MonitoringScopeAndFindings id={id} t={t} getSummaryDetail={getSummaryDetail} loading={loading} />
-            <MangroveGrowth id={id} t={t} getSummaryDetail={getSummaryDetail} loading={loading} />
+            <MangroveGrowth id={id} t={t} getSummaryDetail={getSummaryDetail} loading={loading} options={selectOptions} />
+            <BiodiversityHabitat  id={id} t={t} getSummaryDetail={getSummaryDetail} loading={loading} options={selectOptions} />
+            <SoilWaterProfile id={id} t={t} getSummaryDetail={getSummaryDetail} loading={loading} options={selectOptions} />
+            <AssociatedInformation id={id} t={t} getSummaryDetail={getSummaryDetail} loading={loading} projectId={projectId} navigate={navigate} options={selectOptions} />
         </DashboardLayout>
     )
 }

package/src/@daf/utils/numbers.js

@@ -50,7 +50,7 @@ export const calculateStatChange = (data, options = {}) => {
     }
 
     const { current, previous } = data;
-    
+
     // Validate that both values are numbers
     if (typeof current !== 'number' || typeof previous !== 'number') {
         return null;