datastake-daf 0.6.773 → 0.6.775

package/src/@daf/pages/Summary/Activities/PlantingCycle/components/CycleOutcomes/RestoredArea.jsx

@@ -0,0 +1,150 @@
+import React, { useMemo } from 'react';
+import { Widget, LineChart } from '../../../../../../../../src/index.js';
+import { Select } from 'antd';
+import { useTimeFilter } from '../../../../../../hooks/useTimeFilter.js';
+
+const selectOptions = [
+    { label: "Daily", value: "daily" },
+    { label: "Weekly", value: "weekly" },
+    { label: "Monthly", value: "monthly" },
+];
+
+const RestoredArea = ({
+    restoredAreaChart,
+    t = (s) => s
+}) => {
+    const { timeFilter, setTimeFilter, formatDateAxis, processChartDateData } = useTimeFilter({ defaultFilter: 'monthly' });
+
+    // Map restoredAreaChart data to LineChart format with time filter support
+    // Y-axis: total/cumulated value
+    // X-axis: date (formatted based on timeFilter)
+    // Fill all periods in the range, even if empty
+    const restoredAreaChartData = useMemo(() => {
+        if (!restoredAreaChart || !Array.isArray(restoredAreaChart) || restoredAreaChart.length === 0) {
+            return [];
+        }
+
+        // Process data with cumulative calculation (for restored area)
+        return processChartDateData({
+            mainData: restoredAreaChart,
+            isCumulative: true,
+            valueField: 'total',
+        });
+    }, [restoredAreaChart, processChartDateData]);
+
+    // Calculate max value for yAxis dynamically (round up to nearest 10)
+    const maxYValue = useMemo(() => {
+        if (!restoredAreaChartData || restoredAreaChartData.length === 0) {
+            return 80;
+        }
+        const maxValue = Math.max(...restoredAreaChartData.map(item => item.value || 0));
+        // If max is 0, set default to 80 to show Y-axis
+        // Otherwise, round up to nearest 10
+        if (maxValue === 0) {
+            return 80;
+        }
+        return Math.ceil(maxValue / 10) * 10 || 80;
+    }, [restoredAreaChartData]);
+
+
+    return (
+        <Widget
+            title={t("Restored Area")}
+            className="with-border-header h-w-btn-header"
+            addedHeader={
+                <>
+                    <div className="flex-1" />
+                    <Select
+                        value={timeFilter}
+                        style={{ width: 100 }}
+                        onChange={(value) => setTimeFilter(value)}
+                        options={selectOptions}
+                        popupMatchSelectWidth={120}
+                    />
+                </>
+            }
+        >
+            <div className="flex flex-1 flex-column justify-content-center">
+                <div className="flex justify-content-center w-full">
+                    <LineChart
+                        animated
+                        isArea
+                        color={'#00AEB1'}
+                        data={restoredAreaChartData}
+                        fillOpacity={0.7}
+                        height={200}
+                        renderTooltipContent={(title, data) => {
+                            if (!data || data.length === 0) return {};
+                            const item = data[0]?.data || data[0];
+                            const periodValue = item?.period !== undefined ? item.period : (item?.value || 0);
+                            const cumulatedValue = item?.value || 0;
+                            
+                            return {
+                                title:  t("Restored Area"),
+                                subTitle: formatDateAxis(title),
+                                items: [
+                                    {
+                                        label: t("Period"),
+                                        value: `${periodValue.toLocaleString()} ha`,
+                                    },
+                                    {
+                                        label: t("Cumulated"),
+                                        value: `${cumulatedValue.toLocaleString()} ha`,
+                                    },
+                                ],
+                            };
+                        }}
+                        xFieldKey="date"
+                        yFieldKey="value"
+                        formattedXAxis={formatDateAxis}
+                        style={{ width: '100%' }}
+                        yAxis={{
+                            min: 0,
+                            max: maxYValue,
+                            tickMethod: () => {
+                                // Generate ticks every 10 units for maxYValue of 80
+                                // For other values, show ticks every 10 units
+                                const step = maxYValue <= 80 ? 10 : Math.max(10, Math.floor(maxYValue / 8));
+                                const ticks = [];
+                                for (let i = 0; i <= maxYValue; i += step) {
+                                    ticks.push(i);
+                                }
+                                // Ensure max value is included
+                                if (ticks.length === 0 || ticks[ticks.length - 1] < maxYValue) {
+                                    ticks.push(maxYValue);
+                                }
+                                return ticks;
+                            },
+                            label: {
+                                style: {
+                                    fontSize: 12,
+                                    fill: '#666',
+                                },
+                            },
+                            grid: {
+                                line: {
+                                    style: {
+                                        stroke: '#E5E7EB',
+                                        lineWidth: 1,
+                                    },
+                                },
+                            },
+                        }}
+                        xAxis={{
+                            label: {
+                                formatter: formatDateAxis,
+                                style: {
+                                    fontSize: 12,
+                                    fill: '#666',
+                                },
+                            },
+                        }}
+                    />
+                </div>
+            </div>
+        </Widget>
+    );
+};
+
+export default RestoredArea;
+

package/src/@daf/pages/Summary/Activities/PlantingCycle/components/CycleOutcomes/index.jsx

@@ -1,8 +1,9 @@
 import React, { useMemo } from 'react';
-import dayjs from 'dayjs';
-import { Widget, StatCard, LineChart, ColumnChart } from '../../../../../../../../src/index.js';
+import { Widget, StatCard } from '../../../../../../../../src/index.js';
 import { useWidgetFetch } from '../../../../../../hooks/useWidgetFetch.js';
 import { calculateStatChange } from '../../helper.js';
+import RestoredArea from './RestoredArea.jsx';
+import PlantingActivitiesTimeline from './PlantingActivitiesTimeline.jsx';
 
 const CycleOutcomes = ({
     id,
@@ -11,7 +12,6 @@ const CycleOutcomes = ({
     t = (s) => s
 }) => {
 
-
     const defaultConfig = useMemo(
         () => ({
             basepath: "planting-cycle",
@@ -71,228 +71,6 @@ const CycleOutcomes = ({
         );
     }, [locationsCount, t]);
 
-    // Map restoredAreaChart data to LineChart format
-    // Y-axis: total/cumulated value
-    // X-axis: date
-    // Fill all months in the range, even if empty
-    const restoredAreaChartData = useMemo(() => {
-        // Always show last 12 months, even if no data
-        const now = dayjs().startOf('month');
-        const twelveMonthsAgo = now.subtract(11, 'month'); // 11 months ago + current month = 12 months
-        
-        // Create a map of existing data by month (YYYY-MM format)
-        const dataMap = new Map();
-        const dates = [];
-        
-        // Process restored area data if available
-        if (restoredAreaChart && Array.isArray(restoredAreaChart) && restoredAreaChart.length > 0) {
-            restoredAreaChart.forEach((item) => {
-                if (typeof item === 'object' && item !== null) {
-                    // Priority: look for date field first
-                    const dateValue = item.date || item.label || item.name || item.period || item.month;
-                    if (dateValue) {
-                        const date = dayjs(dateValue);
-                        if (date.isValid()) {
-                            const monthKey = date.format('YYYY-MM');
-                            // Total/cumulated value for Y-axis (this is what gets plotted)
-                            const totalValue = Number(item.cumulated || item.cumulative || item.total || item.value || 0) || 0;
-                            // Period value for tooltip only
-                            const periodValue = Number(item.period || item.area || item.count || 0) || 0;
-                            dates.push(date);
-                            
-                            // If multiple entries for same month, use the latest one (or sum if needed)
-                            if (!dataMap.has(monthKey) || dataMap.get(monthKey).value < totalValue) {
-                                dataMap.set(monthKey, {
-                                    date: dateValue,
-                                    value: totalValue,
-                                    period: periodValue,
-                                });
-                            }
-                        }
-                    }
-                }
-            });
-        }
-        
-        // Determine date range
-        let minDate = twelveMonthsAgo;
-        let maxDate = now;
-        
-        // If we have data, adjust range to include it
-        if (dates.length > 0) {
-            const sortedDates = dates.sort((a, b) => a.valueOf() - b.valueOf());
-            const firstDataDate = sortedDates[0].startOf('month');
-            const lastDataDate = sortedDates[sortedDates.length - 1].startOf('month');
-            
-            // Start from the earlier of: 12 months ago, or first data date
-            minDate = twelveMonthsAgo.isBefore(firstDataDate) ? twelveMonthsAgo : firstDataDate;
-            
-            // End at the later of: current month, or last data date
-            maxDate = now.isAfter(lastDataDate) ? now : lastDataDate;
-        }
-        
-        // Generate all months in the range
-        const result = [];
-        let currentDate = minDate.clone();
-        let lastKnownValue = 0; // For cumulative data, carry forward the last known value
-        
-        while (currentDate.isBefore(maxDate) || currentDate.isSame(maxDate, 'month')) {
-            const monthKey = currentDate.format('YYYY-MM');
-            const existingData = dataMap.get(monthKey);
-            
-            if (existingData) {
-                lastKnownValue = existingData.value;
-                result.push(existingData);
-            } else {
-                // Fill missing month - for cumulative data, use last known value
-                result.push({
-                    date: currentDate.format('YYYY-MM-DD'),
-                    value: lastKnownValue, // Carry forward cumulative value
-                    period: 0,
-                });
-            }
-            
-            currentDate = currentDate.add(1, 'month');
-        }
-        
-        return result;
-    }, [restoredAreaChart]);
-
-    // Calculate max value for yAxis dynamically (round up to nearest 10)
-    const maxYValue = useMemo(() => {
-        if (!restoredAreaChartData || restoredAreaChartData.length === 0) {
-            return 80;
-        }
-        const maxValue = Math.max(...restoredAreaChartData.map(item => item.value || 0));
-        // If max is 0, set default to 80 to show Y-axis
-        // Otherwise, round up to nearest 10
-        if (maxValue === 0) {
-            return 80;
-        }
-        return Math.ceil(maxValue / 10) * 10 || 80;
-    }, [restoredAreaChartData]);
-
-    // Format date to "Mmm YY" format for X-axis
-    const formatDateAxis = useMemo(() => {
-        return (label) => {
-            if (!label) return label;
-            
-            // Try to parse the date using dayjs with various formats
-            let date = dayjs(label);
-            
-            // If first attempt fails, try parsing as ISO date string
-            if (!date.isValid() && typeof label === 'string') {
-                date = dayjs(label, ['YYYY-MM-DD', 'YYYY-MM', 'MMM YY', 'MMM YYYY'], true);
-            }
-            
-            // If it's a valid date, format it as "Mmm YY"
-            if (date.isValid()) {
-                return date.format('MMM YY');
-            }
-            
-            // If it's already in "Mmm YY" format or similar, return as is
-            // Otherwise return the original label
-            return label;
-        };
-    }, []);
-
-    // Map activitiesTimelineChart data to ColumnChart format
-    // Data structure: [{count: 2, date: "2025-11-03"}]
-    // Fill all months in the range, even if empty
-    const activitiesTimelineData = useMemo(() => {
-        // Always show last 12 months, even if no data
-        const now = dayjs().startOf('month');
-        const twelveMonthsAgo = now.subtract(11, 'month'); // 11 months ago + current month = 12 months
-        
-        // Create a map of existing data by month (YYYY-MM format)
-        const dataMap = new Map();
-        const dates = [];
-        
-        // Process activities timeline data if available
-        if (activitiesTimelineChart && Array.isArray(activitiesTimelineChart) && activitiesTimelineChart.length > 0) {
-            activitiesTimelineChart.forEach((item) => {
-                if (typeof item === 'object' && item !== null && item.date) {
-                    const date = dayjs(item.date);
-                    if (date.isValid()) {
-                        const monthKey = date.format('YYYY-MM');
-                        const count = Number(item.count || item.jobs || item.value || 0) || 0;
-                        dates.push(date);
-                        
-                        // If multiple entries for same month, sum them
-                        if (dataMap.has(monthKey)) {
-                            dataMap.set(monthKey, {
-                                ...dataMap.get(monthKey),
-                                jobs: dataMap.get(monthKey).jobs + count,
-                            });
-                        } else {
-                            dataMap.set(monthKey, {
-                                month: item.date,
-                                jobs: count,
-                                date: item.date,
-                            });
-                        }
-                    }
-                }
-            });
-        }
-        
-        // Determine date range
-        let minDate = twelveMonthsAgo;
-        let maxDate = now;
-        
-        // If we have data, adjust range to include it
-        if (dates.length > 0) {
-            const sortedDates = dates.sort((a, b) => a.valueOf() - b.valueOf());
-            const firstDataDate = sortedDates[0].startOf('month');
-            const lastDataDate = sortedDates[sortedDates.length - 1].startOf('month');
-            
-            // Start from the earlier of: 12 months ago, or first data date
-            minDate = twelveMonthsAgo.isBefore(firstDataDate) ? twelveMonthsAgo : firstDataDate;
-            
-            // End at the later of: current month, or last data date
-            maxDate = now.isAfter(lastDataDate) ? now : lastDataDate;
-        }
-        
-        // Generate all months in the range
-        const result = [];
-        let currentDate = minDate.clone();
-        
-        while (currentDate.isBefore(maxDate) || currentDate.isSame(maxDate, 'month')) {
-            const monthKey = currentDate.format('YYYY-MM');
-            const existingData = dataMap.get(monthKey);
-            
-            if (existingData) {
-                result.push(existingData);
-            } else {
-                // Fill missing month with 0
-                result.push({
-                    month: currentDate.format('YYYY-MM-DD'), // Use first day of month
-                    jobs: 0,
-                    date: currentDate.format('YYYY-MM-DD'),
-                });
-            }
-            
-            currentDate = currentDate.add(1, 'month');
-        }
-        
-        return result;
-    }, [activitiesTimelineChart]);
-
-    // Calculate max value for Y-axis (default to 100 if all values are 0 or very small)
-    const maxActivitiesYValue = useMemo(() => {
-        if (!activitiesTimelineData || activitiesTimelineData.length === 0) {
-            return 100;
-        }
-        const maxValue = Math.max(...activitiesTimelineData.map(item => item.jobs || 0));
-        // If max is 0, set default to 100 to show Y-axis
-        if (maxValue === 0) {
-            return 100;
-        }
-        // Round up to nearest 10, but ensure minimum of 100
-        const roundedMax = Math.ceil(maxValue / 10) * 10;
-        return Math.max(100, roundedMax);
-    }, [activitiesTimelineData]);
-
     return (
         <section>
             <Widget
@@ -322,173 +100,16 @@ const CycleOutcomes = ({
 
                 <div style={{ display: "flex", gap: "24px" }}>
                     <section style={{ flex: 1 }}>
-                        <Widget
-                            title={t("Restored Area")}
-                            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">
-                                    <LineChart
-                                        animated
-                                        isArea
-                                        color={'#00AEB1'}
-                                        data={restoredAreaChartData}
-                                        fillOpacity={0.7}
-                                        height={200}
-                                        renderTooltipContent={(title, data) => {
-                                            if (!data || data.length === 0) return {};
-                                            const item = data[0]?.data || data[0];
-                                            const periodValue = item?.period !== undefined ? item.period : (item?.value || 0);
-                                            const cumulatedValue = item?.value || 0;
-                                            
-                                            return {
-                                                title:  t("Restored Area"),
-                                                subTitle: formatDateAxis(title),
-                                                items: [
-                                                    {
-                                                        label: t("Period"),
-                                                        value: `${periodValue.toLocaleString()} ha`,
-                                                    },
-                                                    {
-                                                        label: t("Cumulated"),
-                                                        value: `${cumulatedValue.toLocaleString()} ha`,
-                                                    },
-                                                ],
-                                            };
-                                        }}
-                                        xFieldKey="date"
-                                        yFieldKey="value"
-                                        formattedXAxis={formatDateAxis}
-                                        style={{ width: '100%' }}
-                                        yAxis={{
-                                            min: 0,
-                                            max: maxYValue,
-                                            tickMethod: () => {
-                                                // Generate ticks every 10 units for maxYValue of 80
-                                                // For other values, show ticks every 10 units
-                                                const step = maxYValue <= 80 ? 10 : Math.max(10, Math.floor(maxYValue / 8));
-                                                const ticks = [];
-                                                for (let i = 0; i <= maxYValue; i += step) {
-                                                    ticks.push(i);
-                                                }
-                                                // Ensure max value is included
-                                                if (ticks.length === 0 || ticks[ticks.length - 1] < maxYValue) {
-                                                    ticks.push(maxYValue);
-                                                }
-                                                return ticks;
-                                            },
-                                            label: {
-                                                style: {
-                                                    fontSize: 12,
-                                                    fill: '#666',
-                                                },
-                                            },
-                                            grid: {
-                                                line: {
-                                                    style: {
-                                                        stroke: '#E5E7EB',
-                                                        lineWidth: 1,
-                                                    },
-                                                },
-                                            },
-                                        }}
-                                        xAxis={{
-                                            label: {
-                                                formatter: formatDateAxis, // Ensure formatter is applied
-                                                style: {
-                                                    fontSize: 12,
-                                                    fill: '#666',
-                                                },
-                                            },
-                                        }}
-                                    />
-                                </div>
-                            </div>
-                        </Widget>
+                        <RestoredArea
+                            restoredAreaChart={restoredAreaChart}
+                            t={t}
+                        />
                     </section>
                     <section style={{ flex: 1 }}>
-                        <Widget
-                            title={t("Planting Activities Timeline")}
-                            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={activitiesTimelineData}
-                                        xFieldKey="month"
-                                        yFieldKey="jobs"
-                                        animated={true}
-                                        height={400}
-                                        color="#016C6E"
-                                        renderTooltipContent={(title, data) => {
-                                            if (!data || data.length === 0) return {};
-                                            // For ColumnChart, data structure: data[0]?.data contains the actual data point
-                                            const item = data[0]?.data || data[0];
-                                            const count = item?.jobs || item?.value || 0;
-                                            // Title is the X-axis value (month/date), use it for formatting
-                                            const dateValue = item?.date || title || '';
-                                            
-                                            return {
-                                                title: t("Planting Activities"),
-                                                subTitle: formatDateAxis(dateValue),
-                                                items: [
-                                                    {
-                                                        label: t("Total"),
-                                                        value: count,
-                                                    },
-                                                ],
-                                            };
-                                        }}
-                                        formattedXAxis={formatDateAxis}
-                                        formattedYAxis={(value) => {
-                                            return `${value}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`);
-                                        }}
-                                        yAxis={{
-                                            min: 0,
-                                            max: maxActivitiesYValue,
-                                            tickMethod: () => {
-                                                // Generate ticks: for 100 max, show 0, 20, 40, 60, 80, 100
-                                                // For other values, show ticks every 20 units
-                                                const step = maxActivitiesYValue <= 100 ? 20 : Math.max(20, Math.floor(maxActivitiesYValue / 5));
-                                                const ticks = [];
-                                                for (let i = 0; i <= maxActivitiesYValue; i += step) {
-                                                    ticks.push(i);
-                                                }
-                                                // Ensure max value is included
-                                                if (ticks.length === 0 || ticks[ticks.length - 1] < maxActivitiesYValue) {
-                                                    ticks.push(maxActivitiesYValue);
-                                                }
-                                                return ticks;
-                                            },
-                                            label: {
-                                                style: {
-                                                    fontSize: 12,
-                                                    fill: '#666',
-                                                },
-                                            },
-                                            grid: {
-                                                line: {
-                                                    style: {
-                                                        stroke: '#E5E7EB',
-                                                        lineWidth: 1,
-                                                    },
-                                                },
-                                            },
-                                        }}
-                                        xAxis={{
-                                            label: {
-                                                formatter: formatDateAxis, 
-                                                autoHide: true,
-                                                style: {
-                                                    fontSize: 12,
-                                                    fill: '#666',
-                                                },
-                                            },
-                                        }}
-                                    />
-                                </div>
-                            </div>
-                        </Widget>
+                        <PlantingActivitiesTimeline
+                            activitiesTimelineChart={activitiesTimelineChart}
+                            t={t}
+                        />
                     </section>
                 </div>
             </Widget>

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

@@ -6,7 +6,7 @@ import CommunityParticipation from './components/CommunityParticipation/index.js
 import AssociatedInformation from './components/AssociatedInformation/index.jsx';
 import KeyInformation from './components/KeyInformation/index.jsx';
 
-const PlantingCycleSummary = ({ header, activityData, loading = false, id, projectId, t = () => { }, getSummaryDetail, navigate }) => {
+const PlantingCycleSummary = ({ header, activityData, loading = false, id, projectId, t = () => { }, getSummaryDetail, navigate, selectOptions }) => {
     return (
         <DashboardLayout
             header={
@@ -27,7 +27,7 @@ const PlantingCycleSummary = ({ header, activityData, loading = false, id, proje
             <CycleOutcomes id={id} getSummaryDetail={getSummaryDetail}  loading={loading} t={t} />
             <CycleIndicators id={id} getSummaryDetail={getSummaryDetail} loading={loading} t={t} />
             <CommunityParticipation id={id} getSummaryDetail={getSummaryDetail} loading={loading} t={t} />
-            <AssociatedInformation id={id} projectId={projectId} getSummaryDetail={getSummaryDetail} loading={loading} t={t} navigate={navigate} />
+            <AssociatedInformation id={id} projectId={projectId} getSummaryDetail={getSummaryDetail} loading={loading} t={t} navigate={navigate} selectOptions={selectOptions} />
         </DashboardLayout>
     )
 }

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

@@ -61,4 +61,6 @@ export const removeKeysFromObject = (obj = {}, keys = []) => {
         }
     }
     return result;
-}
+}
+
+export const hasKeyInObject = (obj, key) => Object.keys(obj || {}).includes(key);