datastake-daf 0.6.809 → 0.6.811

package/src/@daf/pages/Summary/Activities/MonitoringCampaign/components/BiodiversityHabitat/InvasiveSpecies.jsx

@@ -0,0 +1,107 @@
+import React, { useMemo } from 'react';
+import { Widget, RadarChart } from '../../../../../../../../src/index.js';
+
+// Define the specific 5 categories to show in radar chart
+const RADAR_CATEGORIES = ['spiders', 'scaleInsects', 'caterpillars', 'ants', 'unidentifiedPests'];
+
+// Custom labels for the radar chart
+const RADAR_LABELS = {
+    'spiders': 'Spiders',
+    'scaleInsects': 'Scale insects',
+    'caterpillars': 'Caterpillars',
+    'ants': 'Ants',
+    'unidentifiedPests': 'Unidentified pests'
+};
+
+const InvasiveSpecies = ({
+    invasiveSpeciesChart,
+    t = (s) => s,
+    options = {}
+}) => {
+
+    const chartData = useMemo(() => {
+        const speciesOptions = options?.invasiveSpecies || [];
+        
+        // Create a map of existing data
+        const dataMap = new Map();
+        if (invasiveSpeciesChart && Array.isArray(invasiveSpeciesChart)) {
+            invasiveSpeciesChart.forEach(item => {
+                if (item?.invasiveSpecies) {
+                    dataMap.set(item.invasiveSpecies, Number(item?.count) || 0);
+                }
+            });
+        }
+        
+        // Create chart data for all 5 radar categories
+        const data = RADAR_CATEGORIES.map((categoryValue) => {
+            return {
+                item: RADAR_LABELS[categoryValue] || categoryValue,
+                score: dataMap.get(categoryValue) || 0,
+                invasiveSpecies: categoryValue
+            };
+        });
+        
+        return data;
+    }, [invasiveSpeciesChart, options]);
+
+    const maxScore = useMemo(() => {
+        if (!chartData || chartData.length === 0) return 100;
+        const max = Math.max(...chartData.map(item => item.score || 0));
+        return max > 0 ? Math.ceil(max * 1.2) : 100;
+    }, [chartData]);
+
+    const isEmpty = useMemo(() => {
+        // Never empty since we always show 5 categories
+        return false;
+    }, []);
+
+    console.log('InvasiveSpecies - chartData:', chartData);
+    return (
+        <Widget
+            title={t("Invasive Species")}
+            className="with-border-header h-w-btn-header"
+        >
+           
+                    {isEmpty ? (
+                        <div style={{ 
+                            display: 'flex', 
+                            alignItems: 'center', 
+                            justifyContent: 'center', 
+                            height: '100%',
+                            color: '#999'
+                        }}>
+                            {t("No data available")}
+                        </div>
+                    ) : (
+                        <RadarChart
+                            data={chartData}
+                            xFieldKey="item"
+                            yFieldKey="score"
+                            animated={true}
+                            height={400}
+                            score={{
+                                max: maxScore,
+                                min: 0
+                            }}
+                            renderTooltipContent={(title, data) => {
+                                if (!data || data.length === 0) return {};
+                                const item = data[0]?.data || data[0];
+                                return {
+                                    title: title,
+                                    items: [
+                                        {
+                                            label: t("Sightings"),
+                                            value: item?.score || 0,
+                                        },
+                                    ],
+                                };
+                            }}
+                        />
+                    )}
+           
+        </Widget>
+    );
+};
+
+export default InvasiveSpecies;
+

package/src/@daf/pages/Summary/Activities/MonitoringCampaign/components/BiodiversityHabitat/ObservedFauna.jsx

@@ -0,0 +1,80 @@
+import React, { useMemo } from 'react';
+import { Widget, BarChart } from '../../../../../../../../src/index.js';
+import { calculateNiceAxisConfig, mergeDefaultCategories } from '../chartHelpers.js';
+
+const ObservedFauna = ({
+    observedFaunaChart,
+    t = (s) => s,
+    options = {}
+}) => {
+    const chartData = useMemo(() => {
+        const allFaunaTypes = options?.faunaObserved || [];
+        
+        if (allFaunaTypes.length === 0) {
+            return [];
+        }
+        
+        const mergedData = mergeDefaultCategories(
+            observedFaunaChart,
+            allFaunaTypes,
+            'fauna',
+            'count',
+            'label',
+            'value'
+        );
+        
+        // Rename 'label' to 'type' for BarChart compatibility
+        return mergedData.map(item => ({
+            type: item.label,
+            value: item.value,
+            fauna: item.fauna
+        }));
+    }, [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]
+            }
+        );
+    }, [chartData]);
+
+    return (
+        <Widget
+            title={t("Observed Fauna")}
+            className="with-border-header h-w-btn-header"
+        >
+                <BarChart
+                    data={chartData}
+                    yFieldKey="type"
+                    xFieldKey="value"
+                    animated={true}
+                    color="#00AEB1"
+                    xAxisConfig={xAxisConfig}
+                    renderTooltipContent={(title, data) => {
+                        if (!data || data.length === 0) return {};
+                        const item = data[0]?.data || data[0];
+                        return {
+                            title: title,
+                            subTitle: t("Sightings"),
+                            items: [
+                                {
+                                    label: t("Count"),
+                                    value: item?.value || 0,
+                                },
+                            ],
+                        };
+                    }}
+                />
+            
+        </Widget>
+    );
+};
+
+export default ObservedFauna;
+

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

@@ -0,0 +1,62 @@
+import React, { useMemo } from 'react';
+import { StatCard } from '../../../../../../../../src/index.js';
+import { calculateStatChange } from '../../../../../../utils/numbers.js';
+
+const Stats = ({
+    faunaSightings,
+    invasiveSpeciesSightings,
+    t = (s) => s
+}) => {
+    const faunaSightingsChange = useMemo(() => {
+        if (!faunaSightings) return null;
+        return calculateStatChange(
+            {
+                current: Number(faunaSightings.current) || 0,
+                previous: Number(faunaSightings.previous) || 0,
+            },
+            {
+                tooltipText: t("In comparison to last period"),
+                format: 'absolute',
+            }
+        );
+    }, [faunaSightings, t]);
+
+    const invasiveSpeciesSightingsChange = useMemo(() => {
+        if (!invasiveSpeciesSightings) return null;
+        return calculateStatChange(
+            {
+                current: Number(invasiveSpeciesSightings.current) || 0,
+                previous: Number(invasiveSpeciesSightings.previous) || 0,
+            },
+            {
+                tooltipText: t("In comparison to last period"),
+                format: 'absolute',
+            }
+        );
+    }, [invasiveSpeciesSightings, t]);
+
+    return (
+        <div style={{ display: "flex", gap: "24px", marginBottom: "24px" }}>
+            <section style={{ flex: 1 }}>
+                <StatCard
+                    title={t("Fauna Sightings")}
+                    value={faunaSightings ? Number(faunaSightings.current).toLocaleString() : "0"}
+                    icon="Fish"
+                    change={faunaSightingsChange}
+                />
+            </section>
+
+            <section style={{ flex: 1 }}>
+                <StatCard
+                    title={t("Invasive Species Sightings")}
+                    value={invasiveSpeciesSightings ? Number(invasiveSpeciesSightings.current).toLocaleString() : "0"}
+                    icon="Ant"
+                    change={invasiveSpeciesSightingsChange}
+                />
+            </section>
+        </div>
+    );
+};
+
+export default Stats;
+

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

@@ -0,0 +1,109 @@
+import React, { useMemo } from 'react';
+import { Widget } from '../../../../../../../../src/index.js';
+import { useWidgetFetch } from '../../../../../../hooks/useWidgetFetch.js';
+import Stats from './Stats.jsx';
+import ObservedFauna from './ObservedFauna.jsx';
+import InvasiveSpecies from './InvasiveSpecies.jsx';
+
+const BiodiversityHabitat = ({
+    id,
+    getSummaryDetail,
+    loading = false,
+    t = (s) => s,
+    options = {}
+}) => {
+    const defaultConfig = useMemo(
+        () => ({
+            basepath: "events/monitoring-campaign-summary",
+            url: `/summary/${id}/biodiversity-habitat`,
+            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 {
+        faunaSightings,
+        invasiveSpecies,
+        previousCycleFaunaSightings,
+        previousCycleInvasiveSpecies,
+        observedFauna
+    } = outcomesData || {};
+
+
+    const transformedFaunaSightings = useMemo(() => {
+        const current = Array.isArray(faunaSightings) && faunaSightings.length > 0
+            ? faunaSightings.reduce((sum, item) => sum + (Number(item?.count) || 0), 0)
+            : 0;
+        const previous = Array.isArray(previousCycleFaunaSightings) && previousCycleFaunaSightings.length > 0
+            ? previousCycleFaunaSightings.reduce((sum, item) => sum + (Number(item?.count) || 0), 0)
+            : 0;
+        return { current, previous };
+    }, [faunaSightings, previousCycleFaunaSightings]);
+
+    const transformedInvasiveSpecies = useMemo(() => {
+        const current = Array.isArray(invasiveSpecies) && invasiveSpecies.length > 0
+            ? invasiveSpecies.reduce((sum, item) => sum + (Number(item?.count) || 0), 0)
+            : 0;
+        const previous = Array.isArray(previousCycleInvasiveSpecies) && previousCycleInvasiveSpecies.length > 0
+            ? previousCycleInvasiveSpecies.reduce((sum, item) => sum + (Number(item?.count) || 0), 0)
+            : 0;
+        return { current, previous };
+    }, [invasiveSpecies, previousCycleInvasiveSpecies]);
+
+
+    return (
+        <section>
+            <Widget
+                title={t("Biodiversity & Habitat")}
+                loading={loading || outcomesLoading}
+                className="with-border-header h-w-btn-header"
+            >
+                <Stats
+                    faunaSightings={transformedFaunaSightings}
+                    invasiveSpeciesSightings={transformedInvasiveSpecies}
+                    t={t}
+                />
+
+                <div style={{ display: "flex", gap: "24px" }}>
+                    <section style={{ flex: 1 }}>
+                        <ObservedFauna
+                            observedFaunaChart={observedFauna}
+                            t={t}
+                            options={options}
+                        />
+                    </section>
+               
+                        <InvasiveSpecies
+                            invasiveSpeciesChart={invasiveSpecies}
+                            t={t}
+                            options={options}
+                        />
+                 
+                </div>
+            </Widget>
+
+        </section>
+    );
+};
+
+export default BiodiversityHabitat;
+

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

@@ -7,8 +7,8 @@ const KeyInformation = ({ id, t = () => { }, getSummaryDetail, loading = false }
 
     const defaultConfig = useMemo(
         () => ({
-            basepath: "events/monitoring-campaign",
-            url: `/summary/${id}/key-information`,
+            basepath: "events/monitoring-campaign-summary",
+            url: `/${id}/key-information`,
             stop: !id,
         }),
         [id],
@@ -16,10 +16,14 @@ const KeyInformation = ({ id, t = () => { }, getSummaryDetail, loading = false }
 
     const customGetData = useMemo(() => {
         if (getSummaryDetail && id) {
-            return ({ url, params = {} }) => {
-                const match = url.match(/\/summary\/[^/]+\/(.+)/);
+            return (rest) => {
+                const { url, filters: restFilters } = rest;
+                const match = url.match(/\/[^/]+\/(.+)/);
                 if (match) {
                     const [, type] = match;
+                    const params = {
+                        ...(restFilters || {}),
+                    };
                     return getSummaryDetail(id, type, params);
                 }
                 throw new Error(`Invalid URL format: ${url}`);

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

@@ -2,28 +2,40 @@ 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'];
+const COLORS = ['#6AD99E', '#F5C2AC', '#F0A888', '#DF571E', '#C04B19', '#9B3D14', '#7A2F0F'];
 
 const PlantedSpecies = ({
     plantedSpeciesChart,
-    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 = plantedSpeciesChart || [];
-        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}`,
         }));
-    }, [plantedSpeciesChart]);
+    }, [plantedSpeciesChart, optionsMap]);
 
     const isEmpty = useMemo(() => {
         return !plantedSpeciesChart || plantedSpeciesChart.length === 0 || 
-               plantedSpeciesChart.every(item => !item?.value || Number(item.value) === 0);
+               plantedSpeciesChart.every(item => !item?.count || Number(item.count) === 0);
     }, [plantedSpeciesChart]);
 
     const getTooltipChildren = useCallback(

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

@@ -1,10 +1,43 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Widget, ColumnChart } from '../../../../../../../../src/index.js';
+import { calculateNiceAxisConfig, mergeDefaultCategories } from '../chartHelpers.js';
+
+// Default height ranges to always display
+const DEFAULT_HEIGHT_RANGES = [
+    { value: '0-10', label: '0-10 cm' },
+    { value: '11-20', label: '11-20 cm' },
+    { value: '21-30', label: '21-30 cm' },
+    { value: '30+', label: '30+ cm' }
+];
 
 const SeedlingsHeight = ({
     seedlingsHeightChart,
     t = (s) => s
 }) => {
+    const chartData = useMemo(() => {
+        return mergeDefaultCategories(
+            seedlingsHeightChart,
+            DEFAULT_HEIGHT_RANGES,
+            'range',
+            'count',
+            'label',
+            'value'
+        );
+    }, [seedlingsHeightChart]);
+
+    const yAxisConfig = useMemo(() => {
+        return calculateNiceAxisConfig(
+            chartData,
+            'value',
+            2, // multiplier: double the max value
+            {
+                min: 0,
+                max: 20,
+                tickMethod: () => [0, 5, 10, 15, 20]
+            }
+        );
+    }, [chartData]);
+
     return (
         <Widget
             title={t("Seedlings Height")}
@@ -13,12 +46,13 @@ const SeedlingsHeight = ({
             <div className="flex flex-1 flex-column justify-content-center">
                 <div className="flex justify-content-center w-full">
                     <ColumnChart
-                        data={seedlingsHeightChart || []}
+                        data={chartData}
                         xFieldKey="label"
                         yFieldKey="value"
                         animated={true}
                         height={200}
                         color="#016C6E"
+                        yAxis={yAxisConfig}
                         renderTooltipContent={(title, data) => {
                             if (!data || data.length === 0) return {};
                             const item = data[0]?.data || data[0];

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

@@ -56,7 +56,7 @@ const Stats = ({
                 <StatCard
                     title={t("Survival Rate")}
                     value={survivalRate ? Number(survivalRate.current).toLocaleString() : "0"}
-                    icon="EventCalendar"
+                    icon="TrendUp"
                     change={survivalRateChange}
                 />
             </section>
@@ -65,7 +65,7 @@ const Stats = ({
                 <StatCard
                     title={t("Average Height")}
                     value={averageHeight ? Number(averageHeight.current).toLocaleString() + " cm" : "0 cm"}
-                    icon="ProjectLocation"
+                    icon="SpacingHeight"
                     change={averageHeightChange}
                 />
             </section>
@@ -74,7 +74,7 @@ const Stats = ({
                 <StatCard
                     title={t("Average Diameter")}
                     value={averageDiameter ? Number(averageDiameter.current).toLocaleString() + " mm" : "0 mm"}
-                    icon="Activity"
+                    icon="Tree"
                     change={averageDiameterChange}
                 />
             </section>

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>