datastake-daf 0.6.837 → 0.6.839

package/build/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

package/build/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

package/dist/hooks/index.js

@@ -2307,6 +2307,8 @@ const useWidgetFetch = ({
   } = config;
   const [data, setData] = React.useState(defaultData || {});
   const [loading, setLoading] = React.useState(false);
+  const [initFetchDone, setInitFetchDone] = React.useState(false);
+  const isMounted = React.useRef(true);
   const fetchData = async () => {
     if (stop) {
       return;
@@ -2316,6 +2318,7 @@ const useWidgetFetch = ({
       const {
         data
       } = await getData(rest);
+      if (!isMounted.current) return;
       setData(data || defaultData);
       if (isErrorResponse(data)) {
         const errorMessage = getErrorMessage(data);
@@ -2323,18 +2326,28 @@ const useWidgetFetch = ({
         return;
       }
       onFetch();
+      setInitFetchDone(true);
     } catch (err) {
       console.log(err);
     }
-    setLoading(false);
+    if (isMounted.current) {
+      setLoading(false);
+    }
   };
+  React.useEffect(() => {
+    isMounted.current = true;
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
   React.useEffect(() => {
     fetchData();
-  }, [JSON.stringify(rest?.filters)]);
+  }, [JSON.stringify(config)]);
   return {
     data,
     loading,
-    setData
+    setData,
+    initFetchDone
   };
 };
 

package/dist/pages/index.js

@@ -7506,6 +7506,8 @@ const useWidgetFetch = ({
   } = config;
   const [data, setData] = React.useState(defaultData || {});
   const [loading, setLoading] = React.useState(false);
+  const [initFetchDone, setInitFetchDone] = React.useState(false);
+  const isMounted = React.useRef(true);
   const fetchData = async () => {
     if (stop) {
       return;
@@ -7515,6 +7517,7 @@ const useWidgetFetch = ({
       const {
         data
       } = await getData(rest);
+      if (!isMounted.current) return;
       setData(data || defaultData);
       if (isErrorResponse(data)) {
         const errorMessage = getErrorMessage(data);
@@ -7522,18 +7525,28 @@ const useWidgetFetch = ({
         return;
       }
       onFetch();
+      setInitFetchDone(true);
     } catch (err) {
       console.log(err);
     }
-    setLoading(false);
+    if (isMounted.current) {
+      setLoading(false);
+    }
   };
+  React.useEffect(() => {
+    isMounted.current = true;
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
   React.useEffect(() => {
     fetchData();
-  }, [JSON.stringify(rest?.filters)]);
+  }, [JSON.stringify(config)]);
   return {
     data,
     loading,
-    setData
+    setData,
+    initFetchDone
   };
 };
 
@@ -55561,7 +55574,7 @@ const PlantingLocations = ({
     return eventsWithGPS.map((event, index) => {
       const locationCheckArrival = event.locationCheckArrival;
       const matchingLocation = locations.find(location => locationCheckArrival.name === location.name || locationCheckArrival._id === location.id || location.id === locationCheckArrival._id) || locations[0];
-      const area = matchingLocation?.perimeter ? matchingLocation.perimeter.map(coord => Array.isArray(coord) && coord.length >= 2 ? [coord[1], coord[0]] : coord) : null;
+      const area = matchingLocation?.perimeter ? matchingLocation.perimeter.map(coord => Array.isArray(coord) && coord.length >= 2 ? [coord[0], coord[1]] : coord) : null;
 
       // Only include area if it has at least 3 valid coordinates
       const validArea = area && Array.isArray(area) && area.length >= 3 ? area : null;
@@ -55680,7 +55693,7 @@ const PlantingLocations = ({
  * Formats a date based on the time filter
  * @param {dayjs.Dayjs} date - The date to format
  * @param {boolean} breakLine - Whether to add a line break (for tooltips)
- * @param {string} timeFilter - The time filter ('daily', 'weekly', 'monthly')
+ * @param {string} timeFilter - The time filter ('daily', 'weekly', 'monthly', 'yearly')
  * @returns {string} Formatted date string
  */
 const getFormatDate = (date, breakLine = false, timeFilter = 'monthly') => {
@@ -55689,20 +55702,30 @@ const getFormatDate = (date, breakLine = false, timeFilter = 'monthly') => {
       return date.format("DD/MM");
     case "weekly":
       return `W${renderNumber$1(date.week())}`;
+    case "yearly":
+      return date.format("YYYY");
     default:
       // Monthly format: "Dec 24", "Jan 25", etc.
-
       return breakLine ? `${capitalize(date.format("MMM"))}\n${date.format("YY")}` : `${capitalize(date.format("MMM"))} ${date.format("YY")}`;
   }
 };
 
 /**
  * Gets the time quantity string for dayjs operations
- * @param {string} timeFilter - The time filter ('daily', 'weekly', 'monthly')
- * @returns {string} Time quantity string ('days', 'weeks', 'months')
+ * @param {string} timeFilter - The time filter ('daily', 'weekly', 'monthly', 'yearly')
+ * @returns {string} Time quantity string ('days', 'weeks', 'months', 'years')
  */
 const getTimeQuantity = (timeFilter = 'monthly') => {
-  return timeFilter === "monthly" ? "months" : timeFilter === "daily" ? "days" : "weeks";
+  switch (timeFilter) {
+    case "daily":
+      return "days";
+    case "weekly":
+      return "weeks";
+    case "yearly":
+      return "years";
+    default:
+      return "months";
+  }
 };
 
 /**
@@ -55728,6 +55751,9 @@ const getPreviousGraphData = (dates, startDate, timeFilter, valueField = 'total'
       case "weekly":
         isBeforeStart = date.isBefore(startDate, 'week');
         break;
+      case "yearly":
+        isBeforeStart = date.isBefore(startDate, 'year');
+        break;
       default:
         isBeforeStart = date.isBefore(startDate, 'month');
         break;
@@ -55750,7 +55776,7 @@ const getPreviousGraphData = (dates, startDate, timeFilter, valueField = 'total'
  * Processes chart data with time filtering support
  * @param {Object} params - Parameters object
  * @param {Array} params.mainData - Array of data objects with date and value fields
- * @param {string} params.timeFilter - Time filter ('daily', 'weekly', 'monthly')
+ * @param {string} params.timeFilter - Time filter ('daily', 'weekly', 'monthly', 'yearly')
  * @param {Object} params.filters - Optional filters object with timeframe
  * @param {boolean} params.isCumulative - Whether to calculate cumulative values (default: false)
  * @param {string} params.valueField - Field name to extract value from (default: 'total', also checks 'count', 'jobs', 'value')
@@ -55777,6 +55803,9 @@ const processChartDateData = ({
   } else if (filter === "weekly") {
     start = start.startOf('week');
     end = end.startOf('week');
+  } else if (filter === "yearly") {
+    start = start.startOf('year');
+    end = end.startOf('year');
   } else {
     start = start.startOf('month');
     end = end.startOf('month');
@@ -55793,9 +55822,24 @@ const processChartDateData = ({
     cumulativeScore = hasPreviousData ? previousCumulativeScore : 0;
   }
 
+  // Get the period unit for comparison
+  const getPeriodUnit = f => {
+    switch (f) {
+      case "daily":
+        return "day";
+      case "weekly":
+        return "week";
+      case "yearly":
+        return "year";
+      default:
+        return "month";
+    }
+  };
+  const periodUnit = getPeriodUnit(filter);
+
   // Loop until we reach the end date
   let currentDate = start.clone();
-  while (currentDate.isBefore(end) || currentDate.isSame(end, filter === "daily" ? "day" : filter === "weekly" ? "week" : "month")) {
+  while (currentDate.isBefore(end) || currentDate.isSame(end, periodUnit)) {
     // Filter data points that fall within this period
     const score = isEmpty ? 0 : dates.filter(d => {
       if (!d.date) return false;
@@ -55804,6 +55848,8 @@ const processChartDateData = ({
           return d.date === currentDate.format("YYYY-MM-DD");
         case "weekly":
           return dayjs__default["default"](d.date, "YYYY-MM-DD").week() === currentDate.week() && dayjs__default["default"](d.date, "YYYY-MM-DD").year() === currentDate.year();
+        case "yearly":
+          return dayjs__default["default"](d.date, "YYYY-MM-DD").year() === currentDate.year();
         default:
           return dayjs__default["default"](d.date, "YYYY-MM-DD").format("YYYY-MM") === currentDate.format("YYYY-MM");
       }
@@ -55840,7 +55886,7 @@ const processChartDateData = ({
 const formatDateAxis = (label, getFormatDateFn) => {
   if (!label) return label;
 
-  // Check if label is already in the correct format (MMM YY, DD/MM, or W#)
+  // Check if label is already in the correct format (MMM YY, DD/MM, W#, or YYYY)
   // If it matches our format patterns, return as-is
   if (typeof label === 'string') {
     // Check for MMM YY format (e.g., "Dec 24", "Jan 25")
@@ -55855,6 +55901,10 @@ const formatDateAxis = (label, getFormatDateFn) => {
     if (/^W\d+$/.test(label)) {
       return label;
     }
+    // Check for YYYY format (e.g., "2024", "2025")
+    if (/^\d{4}$/.test(label)) {
+      return label;
+    }
   }
 
   // Otherwise, try to parse and format it
@@ -55862,7 +55912,7 @@ const formatDateAxis = (label, getFormatDateFn) => {
 
   // If first attempt fails, try parsing as ISO date string
   if (!date.isValid() && typeof label === 'string') {
-    date = dayjs__default["default"](label, ['YYYY-MM-DD', 'YYYY-MM', 'MMM YY', 'MMM YYYY', 'DD/MM'], true);
+    date = dayjs__default["default"](label, ['YYYY-MM-DD', 'YYYY-MM', 'YYYY', 'MMM YY', 'MMM YYYY', 'DD/MM'], true);
   }
 
   // If it's a valid date, format it using getFormatDate
@@ -55879,7 +55929,7 @@ const formatDateAxis = (label, getFormatDateFn) => {
  * Provides state management and formatting functions for time-based charts
  * 
  * @param {Object} options - Configuration options
- * @param {string} options.defaultFilter - Default time filter ('daily', 'weekly', 'monthly')
+ * @param {string} options.defaultFilter - Default time filter ('daily', 'weekly', 'monthly', 'yearly')
  * @returns {Object} Time filter state and utilities
  */
 const useTimeFilter = ({
@@ -55930,6 +55980,9 @@ const selectOptions$2 = [{
 }, {
   label: "Monthly",
   value: "monthly"
+}, {
+  label: "Yearly",
+  value: "yearly"
 }];
 const RestoredArea = ({
   restoredAreaChart,
@@ -56073,6 +56126,9 @@ const selectOptions$1 = [{
 }, {
   label: "Monthly",
   value: "monthly"
+}, {
+  label: "Yearly",
+  value: "yearly"
 }];
 const PlantingActivitiesTimeline = ({
   activitiesTimelineChart,
@@ -56101,6 +56157,11 @@ const PlantingActivitiesTimeline = ({
     while (lastNonZeroIndex >= 0 && (processedData[lastNonZeroIndex].jobs || 0) === 0) {
       lastNonZeroIndex--;
     }
+
+    // If all values are 0, return full processed data to show x-axis with default date range
+    if (lastNonZeroIndex < 0) {
+      return processedData;
+    }
     return processedData.slice(0, lastNonZeroIndex + 1);
   }, [activitiesTimelineChart, processChartDateData]);
   const maxActivitiesYValue = React.useMemo(() => {
@@ -56995,6 +57056,9 @@ const selectOptions = [{
 }, {
   label: "Monthly",
   value: "monthly"
+}, {
+  label: "Yearly",
+  value: "yearly"
 }];
 const JobsTimeline = ({
   dayJobsTimeline,
@@ -57010,22 +57074,6 @@ const JobsTimeline = ({
     defaultFilter: 'monthly'
   });
   const jobsData = Array.isArray(dayJobsTimeline) ? dayJobsTimeline : dayJobsTimeline?.jobsTimeline || dayJobsTimeline?.jobs || dayJobsTimeline?.timeline || [];
-
-  // const jobsTimelineData = useMemo(() => {
-  //     // Always process data, even if empty, to generate default date range for x-axis
-  //     const dataToProcess = (!jobsData || !Array.isArray(jobsData) || jobsData.length === 0) 
-  //         ? [] 
-  //         : jobsData;
-
-  //     // Process data without cumulative calculation (for jobs timeline)
-  //     // Try to find value in total, count, jobs, or value fields
-  //     return processChartDateData({
-  //         mainData: dataToProcess,
-  //         isCumulative: false,
-  //         valueField: 'total', // Will fallback to count/jobs/value if total doesn't exist
-  //     });
-  // }, [jobsData, processChartDateData]);
-
   const jobsTimelineData = React.useMemo(() => {
     // Prepare data first
     const dataToProcess = !jobsData || !Array.isArray(jobsData) || jobsData.length === 0 ? [] : jobsData;
@@ -57043,7 +57091,12 @@ const JobsTimeline = ({
       lastNonZeroIndex--;
     }
 
-    // Slice up to last period with data
+    // If all values are 0, return full processed data to show x-axis with default date range
+    if (lastNonZeroIndex < 0) {
+      return processedData;
+    }
+
+    // Otherwise, slice up to last period with data
     return processedData.slice(0, lastNonZeroIndex + 1);
   }, [jobsData, processChartDateData]);
   const maxYValue = React.useMemo(() => {

package/dist/style/datastake/mapbox-gl.css

@@ -0,0 +1,330 @@
+/* Isolated Mapbox GL CSS - Scoped to prevent Leaflet conflicts */
+
+/* Mapbox GL Core Styles - Scoped with .mapbox-gl-scope */
+.mapbox-gl-scope .mapboxgl-map {
+  font: 12px/20px Helvetica Neue, Arial, Helvetica, sans-serif;
+  overflow: hidden;
+  position: relative;
+  -webkit-tap-highlight-color: rgb(0 0 0/0);
+}
+
+.mapbox-gl-scope .mapboxgl-canvas {
+  left: 0;
+  position: absolute;
+  top: 0;
+}
+
+.mapbox-gl-scope .mapboxgl-map:-webkit-full-screen {
+  height: 100%;
+  width: 100%;
+}
+
+.mapbox-gl-scope .mapboxgl-canary {
+  background-color: salmon;
+}
+
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-interactive,
+.mapbox-gl-scope .mapboxgl-ctrl-group button.mapboxgl-ctrl-compass {
+  cursor: grab;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-interactive.mapboxgl-track-pointer {
+  cursor: pointer;
+}
+
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-interactive:active,
+.mapbox-gl-scope .mapboxgl-ctrl-group button.mapboxgl-ctrl-compass:active {
+  cursor: grabbing;
+}
+
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate,
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate .mapboxgl-canvas {
+  touch-action: pan-x pan-y;
+}
+
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-drag-pan,
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-drag-pan .mapboxgl-canvas {
+  touch-action: pinch-zoom;
+}
+
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan,
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan .mapboxgl-canvas {
+  touch-action: none;
+}
+
+/* Control positioning */
+.mapbox-gl-scope .mapboxgl-ctrl-bottom,
+.mapbox-gl-scope .mapboxgl-ctrl-bottom-left,
+.mapbox-gl-scope .mapboxgl-ctrl-bottom-right,
+.mapbox-gl-scope .mapboxgl-ctrl-left,
+.mapbox-gl-scope .mapboxgl-ctrl-right,
+.mapbox-gl-scope .mapboxgl-ctrl-top,
+.mapbox-gl-scope .mapboxgl-ctrl-top-left,
+.mapbox-gl-scope .mapboxgl-ctrl-top-right {
+  pointer-events: none;
+  position: absolute;
+  z-index: 2;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-top-left {
+  left: 0;
+  top: 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-top {
+  left: 50%;
+  top: 0;
+  transform: translateX(-50%);
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-top-right {
+  right: 0;
+  top: 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-right {
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-bottom-right {
+  bottom: 0;
+  right: 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-bottom {
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-bottom-left {
+  bottom: 0;
+  left: 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-left {
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl {
+  clear: both;
+  pointer-events: auto;
+  transform: translate(0);
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-top-left .mapboxgl-ctrl {
+  float: left;
+  margin: 10px 0 0 10px;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-top .mapboxgl-ctrl {
+  float: left;
+  margin: 10px 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-top-right .mapboxgl-ctrl {
+  float: right;
+  margin: 10px 10px 0 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-bottom-right .mapboxgl-ctrl,
+.mapbox-gl-scope .mapboxgl-ctrl-right .mapboxgl-ctrl {
+  float: right;
+  margin: 0 10px 10px 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-bottom .mapboxgl-ctrl {
+  float: left;
+  margin: 10px 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-bottom-left .mapboxgl-ctrl,
+.mapbox-gl-scope .mapboxgl-ctrl-left .mapboxgl-ctrl {
+  float: left;
+  margin: 0 0 10px 10px;
+}
+
+/* Control group styling */
+.mapbox-gl-scope .mapboxgl-ctrl-group {
+  background: #fff;
+  border-radius: 4px;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-group:not(:empty) {
+  box-shadow: 0 0 0 2px #0000001a;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-group button {
+  background-color: initial;
+  border: 0;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: block;
+  height: 29px;
+  outline: none;
+  overflow: hidden;
+  padding: 0;
+  width: 29px;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-group button+button {
+  border-top: 1px solid #ddd;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl button .mapboxgl-ctrl-icon {
+  background-position: 50%;
+  background-repeat: no-repeat;
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-attrib-button:focus,
+.mapbox-gl-scope .mapboxgl-ctrl-group button:focus {
+  box-shadow: 0 0 2px 2px #0096ff;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl button:disabled {
+  cursor: not-allowed;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl button:disabled .mapboxgl-ctrl-icon {
+  opacity: .25;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-group button:first-child {
+  border-radius: 4px 4px 0 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-group button:last-child {
+  border-radius: 0 0 4px 4px;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-group button:only-child {
+  border-radius: inherit;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl button:not(:disabled):hover {
+  background-color: #0000000d;
+}
+
+/* Marker styles */
+.mapbox-gl-scope .mapboxgl-marker {
+  position: absolute;
+  z-index: 1;
+}
+
+.mapbox-gl-scope .mapboxgl-marker svg {
+  display: block;
+}
+
+/* Popup styles */
+.mapbox-gl-scope .mapboxgl-popup {
+  position: absolute;
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.mapbox-gl-scope .mapboxgl-popup-content-wrapper {
+  padding: 1px;
+  text-align: left;
+  border-radius: 12px;
+}
+
+.mapbox-gl-scope .mapboxgl-popup-content {
+  margin: 13px 24px 13px 20px;
+  line-height: 1.3;
+  font-size: 13px;
+  min-height: 1px;
+}
+
+.mapbox-gl-scope .mapboxgl-popup-content p {
+  margin: 17px 0;
+}
+
+.mapbox-gl-scope .mapboxgl-popup-tip-container {
+  width: 40px;
+  height: 20px;
+  position: absolute;
+  left: 50%;
+  margin-top: -1px;
+  margin-left: -20px;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.mapbox-gl-scope .mapboxgl-popup-tip {
+  width: 17px;
+  height: 17px;
+  padding: 1px;
+  margin: -10px auto 0;
+  pointer-events: auto;
+  -webkit-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+
+.mapbox-gl-scope .mapboxgl-popup-content-wrapper,
+.mapbox-gl-scope .mapboxgl-popup-tip {
+  background: white;
+  color: #333;
+  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
+}
+
+.mapbox-gl-scope .mapboxgl-popup-close-button {
+  position: absolute;
+  top: 0;
+  right: 0;
+  border: none;
+  text-align: center;
+  width: 24px;
+  height: 24px;
+  font: 16px/24px Tahoma, Verdana, sans-serif;
+  color: #757575;
+  text-decoration: none;
+  background: transparent;
+}
+
+.mapbox-gl-scope .mapboxgl-popup-close-button:hover,
+.mapbox-gl-scope .mapboxgl-popup-close-button:focus {
+  color: #585858;
+}
+
+/* Attribution */
+.mapbox-gl-scope .mapboxgl-ctrl-attribution {
+  background: #fff;
+  background: rgba(255, 255, 255, 0.8);
+  margin: 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-attribution,
+.mapbox-gl-scope .mapboxgl-ctrl-scale-line {
+  padding: 0 5px;
+  color: #333;
+  line-height: 1.4;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-attribution a {
+  text-decoration: none;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-attribution a:hover,
+.mapbox-gl-scope .mapboxgl-ctrl-attribution a:focus {
+  text-decoration: underline;
+}
+
+/* Hide attribution by default */
+.mapbox-gl-scope .mapboxgl-ctrl-attribution {
+  display: none !important;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-logo {
+  display: none !important;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "datastake-daf",
-	"version": "0.6.837",
+	"version": "0.6.839",
 	"dependencies": {
 		"@ant-design/icons": "^5.2.5",
 		"@antv/g2": "^5.1.1",

package/src/@daf/hooks/useTimeFilter.js

@@ -6,7 +6,7 @@ import { getFormatDate, getTimeQuantity, processChartDateData, formatDateAxis }
  * Provides state management and formatting functions for time-based charts
  * 
  * @param {Object} options - Configuration options
- * @param {string} options.defaultFilter - Default time filter ('daily', 'weekly', 'monthly')
+ * @param {string} options.defaultFilter - Default time filter ('daily', 'weekly', 'monthly', 'yearly')
  * @returns {Object} Time filter state and utilities
  */
 export const useTimeFilter = ({ defaultFilter = 'monthly' } = {}) => {

package/src/@daf/hooks/useWidgetFetch.js

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import DashboardService from "../services/DashboardService.js";
 import { isErrorResponse, getErrorMessage } from "../../helpers/errorHandling.js";
 import { message } from "antd";
@@ -15,7 +15,8 @@ export const useWidgetFetch = ({config, getData = DashboardService.getWidget, on
     const { stop, defaultData, ...rest} = config;
     const [ data, setData ] = useState(defaultData || {});
     const [ loading, setLoading ] = useState(false);
-
+    const [ initFetchDone, setInitFetchDone ] = useState(false);
+    const isMounted = useRef(true);
 
 	const fetchData = async () => {
 		if (stop) {
@@ -26,27 +27,39 @@ export const useWidgetFetch = ({config, getData = DashboardService.getWidget, on
 
 		try {
 			const { data } = await getData(rest);
+			if (!isMounted.current) return;
 			setData(data || defaultData);
 			if (isErrorResponse(data)) {
 				const errorMessage = getErrorMessage(data);
 				message.error(errorMessage);
 				return;
 			}
-            onFetch()
+            onFetch();
+            setInitFetchDone(true);
 		} catch (err) {
 			console.log(err);
 		}
 
-		setLoading(false);
+		if (isMounted.current) {
+			setLoading(false);
+		}
 	};
 
     useEffect(() => {
-        fetchData();
-    }, [JSON.stringify(rest?.filters)]);
+        isMounted.current = true;
+        return () => {
+            isMounted.current = false;
+        };
+    }, []);
+
+	useEffect(() => {
+		fetchData();
+	}, [JSON.stringify(config)]);
 
     return {
         data,
         loading,
-		setData
+		setData,
+        initFetchDone
     }
 } 

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

@@ -7,6 +7,7 @@ const selectOptions = [
     { label: "Daily", value: "daily" },
     { label: "Weekly", value: "weekly" },
     { label: "Monthly", value: "monthly" },
+    { label: "Yearly", value: "yearly" },
 ];
 
 const JobsTimeline = ({
@@ -20,20 +21,6 @@ const JobsTimeline = ({
         ? dayJobsTimeline 
         : (dayJobsTimeline?.jobsTimeline || dayJobsTimeline?.jobs || dayJobsTimeline?.timeline || []);
 
-    // const jobsTimelineData = useMemo(() => {
-    //     // Always process data, even if empty, to generate default date range for x-axis
-    //     const dataToProcess = (!jobsData || !Array.isArray(jobsData) || jobsData.length === 0) 
-    //         ? [] 
-    //         : jobsData;
-
-    //     // Process data without cumulative calculation (for jobs timeline)
-    //     // Try to find value in total, count, jobs, or value fields
-    //     return processChartDateData({
-    //         mainData: dataToProcess,
-    //         isCumulative: false,
-    //         valueField: 'total', // Will fallback to count/jobs/value if total doesn't exist
-    //     });
-    // }, [jobsData, processChartDateData]);
 
     const jobsTimelineData = useMemo(() => {
         // Prepare data first
@@ -54,7 +41,12 @@ const JobsTimeline = ({
             lastNonZeroIndex--;
         }
     
-        // Slice up to last period with data
+        // If all values are 0, return full processed data to show x-axis with default date range
+        if (lastNonZeroIndex < 0) {
+            return processedData;
+        }
+    
+        // Otherwise, slice up to last period with data
         return processedData.slice(0, lastNonZeroIndex + 1);
     }, [jobsData, processChartDateData]);
     

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

@@ -7,6 +7,7 @@ const selectOptions = [
     { label: "Daily", value: "daily" },
     { label: "Weekly", value: "weekly" },
     { label: "Monthly", value: "monthly" },
+    { label: "Yearly", value: "yearly" },
 ];
 
 const PlantingActivitiesTimeline = ({
@@ -34,6 +35,11 @@ const PlantingActivitiesTimeline = ({
             lastNonZeroIndex--;
         }
     
+        // If all values are 0, return full processed data to show x-axis with default date range
+        if (lastNonZeroIndex < 0) {
+            return processedData;
+        }
+    
         return processedData.slice(0, lastNonZeroIndex + 1);
     }, [activitiesTimelineChart, processChartDateData]);
     

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

@@ -7,6 +7,7 @@ const selectOptions = [
     { label: "Daily", value: "daily" },
     { label: "Weekly", value: "weekly" },
     { label: "Monthly", value: "monthly" },
+    { label: "Yearly", value: "yearly" },
 ];
 
 const RestoredArea = ({

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

@@ -64,11 +64,11 @@ const PlantingLocations = ({
           ) || locations[0];
 
         
-          const area = matchingLocation?.perimeter ? matchingLocation.perimeter.map(coord =>
-              Array.isArray(coord) && coord.length >= 2
-                  ? [coord[1], coord[0]]
-                  : coord
-          ) : null;
+            const area = matchingLocation?.perimeter ? matchingLocation.perimeter.map(coord =>
+                Array.isArray(coord) && coord.length >= 2
+                    ? [coord[0], coord[1]] 
+                    : coord
+            ) : null;
 
           // Only include area if it has at least 3 valid coordinates
           const validArea = area && Array.isArray(area) && area.length >= 3 ? area : null;

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

@@ -6,18 +6,19 @@ import { renderNumber } from './numbers.js';
  * Formats a date based on the time filter
  * @param {dayjs.Dayjs} date - The date to format
  * @param {boolean} breakLine - Whether to add a line break (for tooltips)
- * @param {string} timeFilter - The time filter ('daily', 'weekly', 'monthly')
+ * @param {string} timeFilter - The time filter ('daily', 'weekly', 'monthly', 'yearly')
  * @returns {string} Formatted date string
  */
 export const getFormatDate = (date, breakLine = false, timeFilter = 'monthly') => {
     switch (timeFilter) {
         case "daily":
             return date.format("DD/MM");
-        case "weekly" :
+        case "weekly":
             return `W${renderNumber(date.week())}`;
+        case "yearly":
+            return date.format("YYYY");
         default:
             // Monthly format: "Dec 24", "Jan 25", etc.
-
             return breakLine
                 ? `${capitalize(date.format("MMM"))}\n${date.format("YY")}`
                 : `${capitalize(date.format("MMM"))} ${date.format("YY")}`;
@@ -26,15 +27,20 @@ export const getFormatDate = (date, breakLine = false, timeFilter = 'monthly') =
 
 /**
  * Gets the time quantity string for dayjs operations
- * @param {string} timeFilter - The time filter ('daily', 'weekly', 'monthly')
- * @returns {string} Time quantity string ('days', 'weeks', 'months')
+ * @param {string} timeFilter - The time filter ('daily', 'weekly', 'monthly', 'yearly')
+ * @returns {string} Time quantity string ('days', 'weeks', 'months', 'years')
  */
 export const getTimeQuantity = (timeFilter = 'monthly') => {
-    return timeFilter === "monthly"
-        ? "months"
-        : timeFilter === "daily"
-        ? "days"
-        : "weeks";
+    switch (timeFilter) {
+        case "daily":
+            return "days";
+        case "weekly":
+            return "weeks";
+        case "yearly":
+            return "years";
+        default:
+            return "months";
+    }
 };
 
 /**
@@ -62,6 +68,9 @@ export const getPreviousGraphData = (dates, startDate, timeFilter, valueField =
             case "weekly":
                 isBeforeStart = date.isBefore(startDate, 'week');
                 break;
+            case "yearly":
+                isBeforeStart = date.isBefore(startDate, 'year');
+                break;
             default:
                 isBeforeStart = date.isBefore(startDate, 'month');
                 break;
@@ -86,7 +95,7 @@ export const getPreviousGraphData = (dates, startDate, timeFilter, valueField =
  * Processes chart data with time filtering support
  * @param {Object} params - Parameters object
  * @param {Array} params.mainData - Array of data objects with date and value fields
- * @param {string} params.timeFilter - Time filter ('daily', 'weekly', 'monthly')
+ * @param {string} params.timeFilter - Time filter ('daily', 'weekly', 'monthly', 'yearly')
  * @param {Object} params.filters - Optional filters object with timeframe
  * @param {boolean} params.isCumulative - Whether to calculate cumulative values (default: false)
  * @param {string} params.valueField - Field name to extract value from (default: 'total', also checks 'count', 'jobs', 'value')
@@ -114,6 +123,9 @@ export const processChartDateData = ({
     } else if (filter === "weekly") {
         start = start.startOf('week');
         end = end.startOf('week');
+    } else if (filter === "yearly") {
+        start = start.startOf('year');
+        end = end.startOf('year');
     } else {
         start = start.startOf('month');
         end = end.startOf('month');
@@ -133,9 +145,20 @@ export const processChartDateData = ({
         cumulativeScore = hasPreviousData ? previousCumulativeScore : 0;
     }
 
+    // Get the period unit for comparison
+    const getPeriodUnit = (f) => {
+        switch (f) {
+            case "daily": return "day";
+            case "weekly": return "week";
+            case "yearly": return "year";
+            default: return "month";
+        }
+    };
+    const periodUnit = getPeriodUnit(filter);
+
     // Loop until we reach the end date
     let currentDate = start.clone();
-    while (currentDate.isBefore(end) || currentDate.isSame(end, filter === "daily" ? "day" : filter === "weekly" ? "week" : "month")) {
+    while (currentDate.isBefore(end) || currentDate.isSame(end, periodUnit)) {
         // Filter data points that fall within this period
         const score = isEmpty ? 0 : dates
             .filter((d) => {
@@ -146,6 +169,8 @@ export const processChartDateData = ({
                     case "weekly":
                         return dayjs(d.date, "YYYY-MM-DD").week() === currentDate.week() &&
                                dayjs(d.date, "YYYY-MM-DD").year() === currentDate.year();
+                    case "yearly":
+                        return dayjs(d.date, "YYYY-MM-DD").year() === currentDate.year();
                     default:
                         return (
                             dayjs(d.date, "YYYY-MM-DD").format("YYYY-MM") ===
@@ -187,7 +212,7 @@ export const processChartDateData = ({
 export const formatDateAxis = (label, getFormatDateFn) => {
     if (!label) return label;
     
-    // Check if label is already in the correct format (MMM YY, DD/MM, or W#)
+    // Check if label is already in the correct format (MMM YY, DD/MM, W#, or YYYY)
     // If it matches our format patterns, return as-is
     if (typeof label === 'string') {
         // Check for MMM YY format (e.g., "Dec 24", "Jan 25")
@@ -202,6 +227,10 @@ export const formatDateAxis = (label, getFormatDateFn) => {
         if (/^W\d+$/.test(label)) {
             return label;
         }
+        // Check for YYYY format (e.g., "2024", "2025")
+        if (/^\d{4}$/.test(label)) {
+            return label;
+        }
     }
     
     // Otherwise, try to parse and format it
@@ -209,7 +238,7 @@ export const formatDateAxis = (label, getFormatDateFn) => {
     
     // 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', 'DD/MM'], true);
+        date = dayjs(label, ['YYYY-MM-DD', 'YYYY-MM', 'YYYY', 'MMM YY', 'MMM YYYY', 'DD/MM'], true);
     }
     
     // If it's a valid date, format it using getFormatDate