datastake-daf 0.6.845 → 0.6.847

package/dist/hooks/index.js

@@ -2294,6 +2294,7 @@ var DashboardService$1 = createLazyService(DashboardService);
 //     url: string
 //     basePath: string,
 // }
+
 const useWidgetFetch = ({
   config,
   getData = DashboardService$1.getWidget,
@@ -2306,15 +2307,12 @@ 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 () => {
     setLoading(true);
     try {
       const {
         data
       } = await getData(rest);
-      if (!isMounted.current) return;
       setData(data || defaultData);
       if (isErrorResponse(data)) {
         const errorMessage = getErrorMessage(data);
@@ -2322,20 +2320,11 @@ const useWidgetFetch = ({
         return;
       }
       onFetch();
-      setInitFetchDone(true);
     } catch (err) {
       console.log(err);
     }
-    if (isMounted.current) {
-      setLoading(false);
-    }
+    setLoading(false);
   };
-  React.useEffect(() => {
-    isMounted.current = true;
-    return () => {
-      isMounted.current = false;
-    };
-  }, []);
   React.useEffect(() => {
     if (!stop) {
       fetchData();
@@ -2344,8 +2333,7 @@ const useWidgetFetch = ({
   return {
     data,
     loading,
-    setData,
-    initFetchDone
+    setData
   };
 };
 

package/dist/pages/index.js

@@ -7500,6 +7500,7 @@ var DashboardService$1 = createLazyService(DashboardService);
 //     url: string
 //     basePath: string,
 // }
+
 const useWidgetFetch = ({
   config,
   getData = DashboardService$1.getWidget,
@@ -7512,15 +7513,12 @@ 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 () => {
     setLoading(true);
     try {
       const {
         data
       } = await getData(rest);
-      if (!isMounted.current) return;
       setData(data || defaultData);
       if (isErrorResponse(data)) {
         const errorMessage = getErrorMessage(data);
@@ -7528,20 +7526,11 @@ const useWidgetFetch = ({
         return;
       }
       onFetch();
-      setInitFetchDone(true);
     } catch (err) {
       console.log(err);
     }
-    if (isMounted.current) {
-      setLoading(false);
-    }
+    setLoading(false);
   };
-  React.useEffect(() => {
-    isMounted.current = true;
-    return () => {
-      isMounted.current = false;
-    };
-  }, []);
   React.useEffect(() => {
     if (!stop) {
       fetchData();
@@ -7550,8 +7539,7 @@ const useWidgetFetch = ({
   return {
     data,
     loading,
-    setData,
-    initFetchDone
+    setData
   };
 };
 
@@ -55752,13 +55740,6 @@ 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', 'yearly')
- * @returns {string} Formatted date string
- */
 const getFormatDate = (date, breakLine = false, timeFilter = 'monthly') => {
   switch (timeFilter) {
     case "daily":
@@ -55772,12 +55753,6 @@ const getFormatDate = (date, breakLine = false, timeFilter = 'monthly') => {
       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', 'yearly')
- * @returns {string} Time quantity string ('days', 'weeks', 'months', 'years')
- */
 const getTimeQuantity = (timeFilter = 'monthly') => {
   switch (timeFilter) {
     case "daily":
@@ -55790,15 +55765,6 @@ const getTimeQuantity = (timeFilter = 'monthly') => {
       return "months";
   }
 };
-
-/**
- * Gets previous cumulative score from data before start date
- * @param {Array} dates - Array of data objects with date field
- * @param {dayjs.Dayjs} startDate - The start date
- * @param {string} timeFilter - The time filter
- * @param {string} valueField - The field name to extract value from (default: 'total')
- * @returns {Object} Object with hasPreviousData, previousCumulativeScore, previousMaxScore
- */
 const getPreviousGraphData = (dates, startDate, timeFilter, valueField = 'total') => {
   let previousCumulativeScore = 0;
   let previousMaxScore = 0;
@@ -55834,17 +55800,6 @@ const getPreviousGraphData = (dates, startDate, timeFilter, valueField = 'total'
     previousMaxScore
   };
 };
-
-/**
- * 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', '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')
- * @returns {Array} Processed chart data array
- */
 const processChartDateData = ({
   mainData,
   timeFilter: filter,
@@ -55856,8 +55811,35 @@ const processChartDateData = ({
   const dates = mainData || [];
   const isEmpty = !mainData || !Array.isArray(mainData) || mainData.length === 0;
   const _data = [];
-  let end = filters?.timeframe?.endDate || dayjs__default["default"]();
-  let start = filters?.timeframe?.startDate || dayjs__default["default"]().add(-12, timeQuantity);
+
+  // Derive date range from actual data if no filters provided and data exists
+  let end, start;
+  if (filters?.timeframe?.endDate) {
+    end = filters.timeframe.endDate;
+  } else if (!isEmpty) {
+    // Find the latest date in the data
+    const sortedDates = dates.map(d => dayjs__default["default"](d.date, "YYYY-MM-DD")).filter(d => d.isValid()).sort((a, b) => b.valueOf() - a.valueOf());
+    end = sortedDates.length > 0 ? sortedDates[0] : dayjs__default["default"]();
+  } else {
+    end = dayjs__default["default"]();
+  }
+  if (filters?.timeframe?.startDate) {
+    start = filters.timeframe.startDate;
+  } else if (!isEmpty) {
+    // Find the earliest date in the data
+    const sortedDates = dates.map(d => dayjs__default["default"](d.date, "YYYY-MM-DD")).filter(d => d.isValid()).sort((a, b) => a.valueOf() - b.valueOf());
+    start = sortedDates.length > 0 ? sortedDates[0] : dayjs__default["default"]().add(-12, timeQuantity);
+
+    // For daily filter, limit to last 14 days to avoid overcrowded x-axis
+    if (filter === "daily" && end) {
+      const maxDailyStart = end.subtract(13, 'days'); // 14 days total including end date
+      if (start.isBefore(maxDailyStart)) {
+        start = maxDailyStart;
+      }
+    }
+  } else {
+    start = dayjs__default["default"]().add(-12, timeQuantity);
+  }
 
   // Normalize start and end to period boundaries
   if (filter === "daily") {
@@ -55873,6 +55855,30 @@ const processChartDateData = ({
     start = start.startOf('month');
     end = end.startOf('month');
   }
+
+  // Ensure minimum number of periods to fill the x-axis properly
+  const getMinPeriods = f => {
+    switch (f) {
+      case "daily":
+        return 14;
+      // At least 14 days
+      case "weekly":
+        return 8;
+      // At least 8 weeks
+      case "yearly":
+        return 5;
+      // At least 5 years
+      default:
+        return 12;
+      // At least 12 months
+    }
+  };
+  const minPeriods = getMinPeriods(filter);
+  const periodsDiff = end.diff(start, timeQuantity);
+  if (periodsDiff < minPeriods - 1) {
+    const periodsToAdd = minPeriods - 1 - periodsDiff;
+    start = start.subtract(periodsToAdd, timeQuantity);
+  }
   let i = 0;
   let cumulativeScore = 0;
 
@@ -55939,13 +55945,6 @@ const processChartDateData = ({
   }
   return _data;
 };
-
-/**
- * Formats date axis labels, checking if already formatted
- * @param {string} label - The label to format
- * @param {Function} getFormatDateFn - Function to format dates
- * @returns {string} Formatted date string
- */
 const formatDateAxis = (label, getFormatDateFn) => {
   if (!label) return label;
 

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.845",
+	"version": "0.6.847",
 	"dependencies": {
 		"@ant-design/icons": "^5.2.5",
 		"@antv/g2": "^5.1.1",

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

@@ -2,6 +2,7 @@ import { useState, useEffect, useRef } from "react";
 import DashboardService from "../services/DashboardService.js";
 import { isErrorResponse, getErrorMessage } from "../../helpers/errorHandling.js";
 import { message } from "antd";
+
 // config: {
 //     stop: boolean,
 //     defaultData: object,
@@ -9,48 +10,42 @@ import { message } from "antd";
 //     url: string
 //     basePath: string,
 // }
-export const useWidgetFetch = ({config, getData = DashboardService.getWidget, onFetch = () => {}}) => {
-    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 () => {
-        setLoading(true);
-        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();
-            setInitFetchDone(true);
-        } catch (err) {
-            console.log(err);
-        }
-        if (isMounted.current) {
-            setLoading(false);
-        }
-    };
-    useEffect(() => {
-        isMounted.current = true;
-        return () => {
-            isMounted.current = false;
-        };
-    }, []);
-    useEffect(() => {
-        if(!stop) {
-			fetchData();
-		}
-    }, [JSON.stringify(config), stop]);
-    return {
-        data,
-        loading,
-        setData,
-        initFetchDone
-    }
-}
+
+export const useWidgetFetch = ({ config, getData = DashboardService.getWidget, onFetch = () => { } }) => {
+   const { stop, defaultData, ...rest } = config;
+   const [data, setData] = useState(defaultData || {});
+   const [loading, setLoading] = useState(false);
+
+   const fetchData = async () => {
+
+       setLoading(true);
+
+       try {
+           const { data } = await getData(rest);
+           setData(data || defaultData);
+           if (isErrorResponse(data)) {
+               const errorMessage = getErrorMessage(data);
+               message.error(errorMessage);
+               return;
+           }
+           onFetch();
+       } catch (err) {
+           console.log(err);
+       }
+
+       setLoading(false);
+   };
+
+
+   useEffect(() => {
+       if (!stop) {
+           fetchData();
+       }
+   }, [JSON.stringify(config), stop]);
+
+   return {
+       data,
+       loading,
+       setData,
+   }
+}