datastake-daf 0.6.826 → 0.6.827

package/dist/pages/index.js

@@ -55413,14 +55413,19 @@ const PlantingActivitiesTimeline = ({
     const dataToProcess = !activitiesTimelineChart || !Array.isArray(activitiesTimelineChart) || activitiesTimelineChart.length === 0 ? [] : activitiesTimelineChart;
 
     // Process data without cumulative calculation (for activities timeline)
-    return processChartDateData({
+    const processedData = processChartDateData({
       mainData: dataToProcess,
       isCumulative: false,
       valueField: 'count'
     });
-  }, [activitiesTimelineChart, processChartDateData]);
 
-  // Calculate max value for Y-axis (default to 100 if all values are 0 or very small)
+    // Remove trailing periods with 0 jobs (optional: remove all zero if you prefer)
+    let lastNonZeroIndex = processedData.length - 1;
+    while (lastNonZeroIndex >= 0 && (processedData[lastNonZeroIndex].jobs || 0) === 0) {
+      lastNonZeroIndex--;
+    }
+    return processedData.slice(0, lastNonZeroIndex + 1);
+  }, [activitiesTimelineChart, processChartDateData]);
   const maxActivitiesYValue = React.useMemo(() => {
     if (!activitiesTimelineData || activitiesTimelineData.length === 0) {
       return 100;
@@ -55765,6 +55770,29 @@ const CyclePartners = ({
   });
 };
 
+// Custom tooltip labels per field/value
+const FIELD_TOOLTIP_LABELS = {
+  aidKitAccessible: {
+    compliant: "Available",
+    notCompliant: "Not available",
+    empty: "No data"
+  },
+  hsTrainingConfirmation: {
+    compliant: "Training delivered",
+    notCompliant: "No training",
+    empty: "No data"
+  },
+  duosFormed: {
+    compliant: "Duos formed",
+    notCompliant: "Not implemented",
+    empty: "No data"
+  },
+  presenceOfChildren: {
+    compliant: "None reported",
+    notCompliant: "Children present",
+    empty: "No data"
+  }
+};
 const HEALTH_SAFETY_COLORS = {
   compliant: '#016C6E',
   notCompliant: '#F97066',
@@ -55776,12 +55804,6 @@ const getIndicatorType$1 = value => {
   if (value === null || value === undefined) return "empty";
   return "empty";
 };
-
-/**
- * Gets health and safety distribution data from activity data
- * @param {Object} activityData - Activity data object
- * @returns {Object} Distribution object with compliant, notCompliant, and empty counts
- */
 const getHealthAndSafetyDistributionData = activityData => {
   // Define health and safety indicator fields
   const indicators = [{
@@ -55817,53 +55839,26 @@ const getHealthAndSafetyDistributionData = activityData => {
   });
   return distribution;
 };
-
-/**
- * Checks if the health and safety distribution data is empty
- * @param {Object} healthAndSafetyDistributionData - Distribution object
- * @returns {boolean} True if all values are 0 or empty
- */
 const isHealthAndSafetyDistributionEmpty = healthAndSafetyDistributionData => {
   return Object.values(healthAndSafetyDistributionData).every(val => !val || val === 0);
 };
-
-/**
- * Calculates pie chart data from health and safety distribution
- * @param {Object} healthAndSafetyDistributionData - Distribution object
- * @param {Function} t - Translation function
- * @returns {Array} Array of pie chart data points with value, percent, color, label, and key
- */
-const calculateHealthAndSafetyPieData = (healthAndSafetyDistributionData, t) => {
-  const total = Object.values(healthAndSafetyDistributionData).reduce((all, val) => all + (val || 0), 0);
+const calculateHealthAndSafetyPieData = (data, t, selectedField) => {
+  const total = Object.values(data).reduce((a, v) => a + (v || 0), 0);
   const labels = {
     compliant: t("Available"),
     notCompliant: t("Not available"),
     empty: t("Not answered")
   };
-  return Object.keys(healthAndSafetyDistributionData).map(key => {
-    const color = HEALTH_SAFETY_COLORS[key] || '#D9D9D9';
-    return {
-      value: healthAndSafetyDistributionData[key] || 0,
-      percent: total > 0 ? (healthAndSafetyDistributionData[key] || 0) / total : 0,
-      color: color,
-      label: labels[key] || key,
-      key: key
-    };
-  });
+  return Object.keys(data).map(key => ({
+    value: data[key] || 0,
+    percent: total > 0 ? (data[key] || 0) / total : 0,
+    color: HEALTH_SAFETY_COLORS[key] || '#D9D9D9',
+    label: labels[key] || key,
+    key,
+    keyOfField: selectedField //  <-- ADD THIS
+  }));
 };
-
-/**
- * Generates tooltip content for health and safety pie chart
- * Shows all statuses with their percentages
- * @param {Object} item - The pie chart item being hovered (not used, but kept for compatibility)
- * @param {boolean} isEmpty - Whether the distribution is empty
- * @param {Object} healthAndSafetyDistributionData - Distribution object
- * @param {Function} t - Translation function
- * @param {Function} renderTooltipJsx - Function to render tooltip JSX
- * @param {string} tooltipTitle - Title to display in the tooltip (defaults to "Health and Safety")
- * @returns {JSX.Element|null} Tooltip content or null
- */
-const getHealthAndSafetyTooltipChildren = (item, isEmpty, healthAndSafetyDistributionData, t, renderTooltipJsx, tooltipTitle = "Health and Safety") => {
+const getHealthAndSafetyTooltipChildren = (item, isEmpty, healthAndSafetyDistributionData, t, renderTooltipJsx, tooltipTitle = "Health and Safety", selectedField) => {
   // If empty or no data, return null to display nothing
   if (isEmpty || !Object.keys(healthAndSafetyDistributionData).length) {
     return null;
@@ -55876,10 +55871,10 @@ const getHealthAndSafetyTooltipChildren = (item, isEmpty, healthAndSafetyDistrib
   if (total === 0) {
     return null;
   }
-  const labels = {
+  const labels = FIELD_TOOLTIP_LABELS[item?.keyOfField] || {
     compliant: t("Available"),
     notCompliant: t("Not available"),
-    empty: t("Not answered")
+    empty: t("No data")
   };
 
   // Filter items with values > 0
@@ -55962,7 +55957,6 @@ const HealthAndSafety = ({
     getData: customGetData
   });
 
-  // Process the fetched pie chart data
   // The API returns data in format: [{count: 1, [field]: "null"}, {count: 1, [field]: "no"}, {count: 1, [field]: "yes"}]
   const healthAndSafetyDistributionData = React.useMemo(() => {
     if (!pieChartData) return {
@@ -56003,7 +55997,7 @@ const HealthAndSafety = ({
     return getHealthAndSafetyDistributionData(pieChartData);
   }, [pieChartData, selectedField]);
   const isEmpty = React.useMemo(() => isHealthAndSafetyDistributionEmpty(healthAndSafetyDistributionData), [healthAndSafetyDistributionData]);
-  const pieData = React.useMemo(() => calculateHealthAndSafetyPieData(healthAndSafetyDistributionData, t), [healthAndSafetyDistributionData, t]);
+  const pieData = React.useMemo(() => calculateHealthAndSafetyPieData(healthAndSafetyDistributionData, t, selectedField), [healthAndSafetyDistributionData, t, selectedField]);
 
   // Get the label for the selected field to use as tooltip title
   const selectedFieldLabel = React.useMemo(() => {
@@ -56017,9 +56011,10 @@ const HealthAndSafety = ({
   return /*#__PURE__*/jsxRuntime.jsx(Widget, {
     loading: loading || pieChartLoading,
     title: /*#__PURE__*/jsxRuntime.jsx("div", {
-      children: t("Health and Safety")
+      children: t("Operational Health & Safety")
     }),
-    className: "with-border-header h-w-btn-header ",
+    className: "with-border-header h-w-btn-header",
+    description: t("Across all activities in this cycle."),
     addedHeader: /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [/*#__PURE__*/jsxRuntime.jsx("div", {
         className: "flex-1"
@@ -56338,17 +56333,41 @@ 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(() => {
-    // Always process data, even if empty, to generate default date range for x-axis
+    // Prepare data first
     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({
+    // Process data without cumulative calculation
+    const processedData = processChartDateData({
       mainData: dataToProcess,
       isCumulative: false,
-      valueField: 'total' // Will fallback to count/jobs/value if total doesn't exist
+      valueField: 'total' // fallback handled inside processChartDateData
     });
+
+    // Find last index with jobs > 0
+    let lastNonZeroIndex = processedData.length - 1;
+    while (lastNonZeroIndex >= 0 && (processedData[lastNonZeroIndex].jobs || 0) === 0) {
+      lastNonZeroIndex--;
+    }
+
+    // Slice up to last period with data
+    return processedData.slice(0, lastNonZeroIndex + 1);
   }, [jobsData, processChartDateData]);
   const maxYValue = React.useMemo(() => {
     if (!jobsTimelineData || jobsTimelineData.length === 0) {

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

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

@@ -20,21 +20,44 @@ 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(() => {
-        // Always process data, even if empty, to generate default date range for x-axis
-        const dataToProcess = (!jobsData || !Array.isArray(jobsData) || jobsData.length === 0) 
-            ? [] 
+        // Prepare data first
+        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({
+    
+        // Process data without cumulative calculation
+        const processedData = processChartDateData({
             mainData: dataToProcess,
             isCumulative: false,
-            valueField: 'total', // Will fallback to count/jobs/value if total doesn't exist
+            valueField: 'total', // fallback handled inside processChartDateData
         });
+    
+        // Find last index with jobs > 0
+        let lastNonZeroIndex = processedData.length - 1;
+        while (lastNonZeroIndex >= 0 && (processedData[lastNonZeroIndex].jobs || 0) === 0) {
+            lastNonZeroIndex--;
+        }
+    
+        // Slice up to last period with data
+        return processedData.slice(0, lastNonZeroIndex + 1);
     }, [jobsData, processChartDateData]);
-
+    
     const maxYValue = useMemo(() => {
         if (!jobsTimelineData || jobsTimelineData.length === 0) {
             return 100;