datastake-daf 0.6.817 → 0.6.818

package/dist/components/index.js

@@ -19302,17 +19302,10 @@ function VegetationWidget(_ref) {
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded$n);
   let vegetationConfig = getVegetationConfig();
-
-  // Get all VEGETATION_KEYS values before filtering (needed for mapping check)
   const allVegetationKeys = vegetationConfig.map(item => item.key);
-
-  // Filter to show only specific keys if filterKeys is provided
   if (filterKeys && Array.isArray(filterKeys)) {
     vegetationConfig = vegetationConfig.filter(item => filterKeys.includes(item.key));
   }
-
-  // Map growthObservations to VEGETATION_KEYS
-  // Handle both formats: growthObservations keys (e.g., "yellowing_leaves") and VEGETATION_KEYS (e.g., "yellowing")
   const mappedGrowthObservations = Array.isArray(growthObservations) ? growthObservations.map(obs => {
     // First try to map from growthObservations format
     const mapped = GROWTH_OBSERVATIONS_TO_VEGETATION_KEYS[obs];
@@ -47901,7 +47894,7 @@ function AvatarGroup(_ref) {
 
 const Container$1 = styled__default["default"].div`
 	height: ${props => props.height || '300px'};
-	width: ${props => props.isPdf ? props.width ? props.width : '1000px' : 'calc(100% - 48px)'}; 
+	width: ${props => props.isPdf ? props.width ? props.width : '1000px' : 'calc(100% - 48px)'};
 `;
 
 const _excluded$9 = ["data", "xFieldKey", "yFieldKey", "renderTooltipContent", "tooltipConfig", "animated", "isStack", "isGroup", "isPercentage", "seriesField", "formattedYAxis", "formattedXAxis", "color", "height", "t", "isPdf", "legendConfig", "width", "xAxisConfig"];
@@ -49444,6 +49437,45 @@ const RadarChart = _ref => {
     legendConfig,
     isPdf
   });
+
+  // Helper function to wrap long text labels to multiple lines
+  // Ensures text is never hidden - wraps to multiple lines if needed
+  const wrapLabel = React.useCallback(function (text) {
+    let maxLength = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 10;
+    if (!text) {
+      return '';
+    }
+    const formattedText = formattedXAxis(text);
+
+    // If text is short enough, return as is
+    if (formattedText.length <= maxLength) {
+      return formattedText;
+    }
+
+    // Split by spaces to find word boundaries
+    const words = formattedText.split(' ');
+    const lines = [];
+    let currentLine = '';
+    words.forEach((word, index) => {
+      // If adding this word would exceed maxLength, start a new line
+      if (currentLine && (currentLine + ' ' + word).length > maxLength) {
+        if (currentLine) {
+          lines.push(currentLine);
+        }
+        currentLine = word;
+      } else {
+        currentLine = currentLine ? currentLine + ' ' + word : word;
+      }
+
+      // If it's the last word, add it to lines
+      if (index === words.length - 1 && currentLine) {
+        lines.push(currentLine);
+      }
+    });
+
+    // Ensure we always return something - never empty
+    return lines.length > 0 ? lines.join('\n') : formattedText;
+  }, [formattedXAxis]);
   React.useEffect(() => {
     if (!containerRef.current) {
       return;
@@ -49462,9 +49494,21 @@ const RadarChart = _ref => {
         showMarkers: true
       }, tooltipConfig),
       color: color || token.colorPrimary7,
+      // Increased padding to ensure labels are never clipped
+      padding: [50, 50, 50, 50],
       xAxis: {
         label: {
-          formatter: formattedXAxis
+          formatter: text => wrapLabel(text, 10),
+          offset: 15,
+          autoRotate: false,
+          autoHide: false,
+          // Never hide labels
+          autoEllipsis: false,
+          // Never truncate with ellipsis
+          style: {
+            fontSize: 12,
+            fill: '#666'
+          }
         },
         line: null,
         tickLine: null,
@@ -49519,7 +49563,7 @@ const RadarChart = _ref => {
     } else {
       chartRef.current.update(chartConfig);
     }
-  }, [data, xFieldKey, yFieldKey, seriesField, renderTooltipContent, tooltipConfig, animated, color, formattedYAxis, formattedXAxis, score, token.colorPrimary7, rest]);
+  }, [data, xFieldKey, yFieldKey, seriesField, renderTooltipContent, tooltipConfig, animated, color, formattedYAxis, formattedXAxis, score, token.colorPrimary7, wrapLabel, rest]);
   React.useEffect(() => {
     return () => {
       if (chartRef.current) {

package/dist/pages/index.js

@@ -12768,7 +12768,7 @@ const mapDataForChainOfCustody = (data = {}, options = {}, goTo = () => {}) => {
 
 const Container$1 = styled__default["default"].div`
 	height: ${props => props.height || '300px'};
-	width: ${props => props.isPdf ? props.width ? props.width : '1000px' : 'calc(100% - 48px)'}; 
+	width: ${props => props.isPdf ? props.width ? props.width : '1000px' : 'calc(100% - 48px)'};
 `;
 
 const useLegendConfig = ({
@@ -49812,17 +49812,10 @@ function VegetationWidget({
   ...props
 }) {
   let vegetationConfig = getVegetationConfig();
-
-  // Get all VEGETATION_KEYS values before filtering (needed for mapping check)
   const allVegetationKeys = vegetationConfig.map(item => item.key);
-
-  // Filter to show only specific keys if filterKeys is provided
   if (filterKeys && Array.isArray(filterKeys)) {
     vegetationConfig = vegetationConfig.filter(item => filterKeys.includes(item.key));
   }
-
-  // Map growthObservations to VEGETATION_KEYS
-  // Handle both formats: growthObservations keys (e.g., "yellowing_leaves") and VEGETATION_KEYS (e.g., "yellowing")
   const mappedGrowthObservations = Array.isArray(growthObservations) ? growthObservations.map(obs => {
     // First try to map from growthObservations format
     const mapped = GROWTH_OBSERVATIONS_TO_VEGETATION_KEYS[obs];
@@ -52300,6 +52293,44 @@ const RadarChart = ({
     legendConfig,
     isPdf
   });
+
+  // Helper function to wrap long text labels to multiple lines
+  // Ensures text is never hidden - wraps to multiple lines if needed
+  const wrapLabel = React.useCallback((text, maxLength = 10) => {
+    if (!text) {
+      return '';
+    }
+    const formattedText = formattedXAxis(text);
+
+    // If text is short enough, return as is
+    if (formattedText.length <= maxLength) {
+      return formattedText;
+    }
+
+    // Split by spaces to find word boundaries
+    const words = formattedText.split(' ');
+    const lines = [];
+    let currentLine = '';
+    words.forEach((word, index) => {
+      // If adding this word would exceed maxLength, start a new line
+      if (currentLine && (currentLine + ' ' + word).length > maxLength) {
+        if (currentLine) {
+          lines.push(currentLine);
+        }
+        currentLine = word;
+      } else {
+        currentLine = currentLine ? currentLine + ' ' + word : word;
+      }
+
+      // If it's the last word, add it to lines
+      if (index === words.length - 1 && currentLine) {
+        lines.push(currentLine);
+      }
+    });
+
+    // Ensure we always return something - never empty
+    return lines.length > 0 ? lines.join('\n') : formattedText;
+  }, [formattedXAxis]);
   React.useEffect(() => {
     if (!containerRef.current) {
       return;
@@ -52320,9 +52351,21 @@ const RadarChart = ({
         ...tooltipConfig
       },
       color: color || token.colorPrimary7,
+      // Increased padding to ensure labels are never clipped
+      padding: [50, 50, 50, 50],
       xAxis: {
         label: {
-          formatter: formattedXAxis
+          formatter: text => wrapLabel(text, 10),
+          offset: 15,
+          autoRotate: false,
+          autoHide: false,
+          // Never hide labels
+          autoEllipsis: false,
+          // Never truncate with ellipsis
+          style: {
+            fontSize: 12,
+            fill: '#666'
+          }
         },
         line: null,
         tickLine: null,
@@ -52380,7 +52423,7 @@ const RadarChart = ({
     } else {
       chartRef.current.update(chartConfig);
     }
-  }, [data, xFieldKey, yFieldKey, seriesField, renderTooltipContent, tooltipConfig, animated, color, formattedYAxis, formattedXAxis, score, token.colorPrimary7, rest]);
+  }, [data, xFieldKey, yFieldKey, seriesField, renderTooltipContent, tooltipConfig, animated, color, formattedYAxis, formattedXAxis, score, token.colorPrimary7, wrapLabel, rest]);
   React.useEffect(() => {
     return () => {
       if (chartRef.current) {
@@ -57706,7 +57749,20 @@ const MonitoringScopeAndFindings = ({
   });
 };
 
-const COLORS$3 = ['#016C6E', '#F5C2AC', '#F0A888', '#DF571E', '#C04B19', '#9B3D14', '#7A2F0F'];
+const VEGETATION_HEALTH_COLORS = {
+  healthy_leaves: '#6AD99E',
+  white_spots: '#E8F0F0',
+  yellowing_leaves: '#CDC14F',
+  black_spots: '#2E3131',
+  reddish_spots: '#CB2525',
+  leaf_mosaic: '#B59E76',
+  spider_webs: '#F8F6EF',
+  damage_from_insects: '#DE8954',
+  dry_dead_leaves: '#767870',
+  no_leaves: '#F97066',
+  other: '#BDBDBD'
+};
+const DEFAULT_COLOR$3 = '#9E9E9E';
 const VegetationHealth = ({
   vegetationHealthChart,
   t = s => s,
@@ -57727,7 +57783,7 @@ const VegetationHealth = ({
     return data.map((item, index) => ({
       value: Number(item?.count) || 0,
       percent: total > 0 ? (Number(item?.count) || 0) / total : 0,
-      color: COLORS$3[index % COLORS$3.length],
+      color: VEGETATION_HEALTH_COLORS[item?.name] || DEFAULT_COLOR$3,
       label: optionsMap[item?.name] || item?.name || '',
       key: item?.name || `item-${index}`
     }));
@@ -57825,6 +57881,80 @@ const calculateNiceAxisConfig = (data, valueField = 'value', multiplier = 1.2, d
   };
 };
 
+/**
+ * Calculate y-axis configuration with natural numbers (integers) only
+ * Always starts from 0 and extends slightly above max for better visualization
+ * @param {number} maxValue - Maximum value from the data
+ * @param {Object} options - Optional configuration
+ * @param {number} options.minTicks - Minimum number of ticks to show (default: 4)
+ * @param {number} options.maxTicks - Maximum number of ticks to show (default: 6)
+ * @returns {Object} Axis configuration with min, max, and tickMethod
+ */
+const calculateNaturalAxisConfig = (maxValue, options = {}) => {
+  const {
+    minTicks = 4,
+    maxTicks = 6
+  } = options;
+  if (maxValue <= 0) {
+    return {
+      min: 0,
+      max: 4,
+      tickMethod: () => [0, 1, 2, 3, 4]
+    };
+  }
+
+  // For very small values (max <= 1), always show 0, 1, 2, 3, 4
+  if (maxValue <= 1) {
+    return {
+      min: 0,
+      max: 4,
+      tickMethod: () => [0, 1, 2, 3, 4]
+    };
+  }
+
+  // Calculate appropriate step size based on max value
+  let step = 1;
+  let displayMax = maxValue;
+  if (maxValue <= 5) {
+    // For small values, use step of 1 and extend a bit above
+    step = 1;
+    displayMax = Math.max(5, Math.ceil(maxValue * 1.5));
+  } else if (maxValue <= 10) {
+    // For medium-small values, use step of 2
+    step = 2;
+    displayMax = Math.ceil(maxValue * 1.2 / step) * step;
+  } else if (maxValue <= 20) {
+    // For medium values, use step of 5
+    step = 5;
+    displayMax = Math.ceil(maxValue * 1.2 / step) * step;
+  } else if (maxValue <= 50) {
+    // For larger values, use step of 10
+    step = 10;
+    displayMax = Math.ceil(maxValue * 1.2 / step) * step;
+  } else {
+    // For very large values, calculate step to get 4-6 ticks
+    const targetTicks = Math.min(maxTicks, Math.max(minTicks, Math.ceil(maxValue / 20)));
+    step = Math.ceil(maxValue / targetTicks / 10) * 10; // Round to nearest 10
+    displayMax = Math.ceil(maxValue * 1.2 / step) * step;
+  }
+
+  // Generate ticks from 0 to displayMax
+  const ticks = [];
+  for (let i = 0; i <= displayMax; i += step) {
+    ticks.push(i);
+  }
+
+  // Ensure max value is included if it's close
+  if (ticks[ticks.length - 1] < maxValue && maxValue - ticks[ticks.length - 1] <= step / 2) {
+    ticks.push(maxValue);
+  }
+  return {
+    min: 0,
+    max: displayMax,
+    tickMethod: () => ticks
+  };
+};
+
 /**
  * Merge default categories with backend data
  * Ensures all categories are displayed even if they have no data
@@ -57880,13 +58010,11 @@ const SeedlingsHeight$1 = ({
     return mergeDefaultCategories(seedlingsHeightChart, DEFAULT_HEIGHT_RANGES, 'range', 'count', 'label', 'value');
   }, [seedlingsHeightChart]);
   const yAxisConfig = React.useMemo(() => {
-    return calculateNiceAxisConfig(chartData, 'value', 2,
-    // multiplier: double the max value
-    {
-      min: 0,
-      max: 20,
-      tickMethod: () => [0, 5, 10, 15, 20]
-    });
+    // Calculate max value from data
+    const maxValue = chartData && chartData.length > 0 ? Math.max(...chartData.map(item => Number(item?.value) || 0)) : 0;
+
+    // Use the helper function to calculate natural number axis configuration
+    return calculateNaturalAxisConfig(maxValue);
   }, [chartData]);
   return /*#__PURE__*/jsxRuntime.jsx(Widget, {
     title: t("Seedlings Height"),
@@ -57908,9 +58036,9 @@ const SeedlingsHeight$1 = ({
             const item = data[0]?.data || data[0];
             return {
               title: t("Seedlings Height"),
-              subTitle: title,
               items: [{
-                label: t("Count"),
+                color: "#016C6E",
+                label: title,
                 value: item?.value || 0
               }]
             };
@@ -57921,7 +58049,12 @@ const SeedlingsHeight$1 = ({
   });
 };
 
-const COLORS$2 = ['#6AD99E', '#F5C2AC', '#F0A888', '#DF571E', '#C04B19', '#9B3D14', '#7A2F0F'];
+const PLANTED_SPECIES_COLORS = {
+  rhyzophora_mangle: '#016C6E',
+  rhyzophora: '#00AEB1',
+  rhyzophora_sp: '#A0EBEC'
+};
+const DEFAULT_COLOR$2 = '#9E9E9E';
 const PlantedSpecies$1 = ({
   plantedSpeciesChart,
   t = s => s,
@@ -57942,7 +58075,7 @@ const PlantedSpecies$1 = ({
     return data.map((item, index) => ({
       value: Number(item?.count) || 0,
       percent: total > 0 ? (Number(item?.count) || 0) / total : 0,
-      color: COLORS$2[index % COLORS$2.length],
+      color: PLANTED_SPECIES_COLORS[item?.name] || DEFAULT_COLOR$2,
       label: optionsMap[item?.name] || item?.name || '',
       key: item?.name || `item-${index}`
     }));
@@ -57954,15 +58087,22 @@ const PlantedSpecies$1 = ({
     if (isEmpty) {
       return null;
     }
+
+    // Calculate total from all items
+    const total = pieData.reduce((sum, dataItem) => sum + (dataItem.value || 0), 0);
+
+    // Show all items in the tooltip, sorted by value (descending)
+    const allItems = pieData.filter(dataItem => dataItem.value > 0).sort((a, b) => b.value - a.value).map(dataItem => ({
+      color: dataItem.color,
+      label: dataItem.label || '',
+      value: dataItem.value || 0
+    }));
     return renderTooltipJsx({
       title: t("Planted Species"),
-      items: [{
-        color: item.color,
-        label: item.label || '',
-        value: item.value || 0
-      }]
+      subTitle: total.toLocaleString(),
+      items: allItems
     });
-  }, [t, isEmpty]);
+  }, [t, isEmpty, pieData]);
   return /*#__PURE__*/jsxRuntime.jsx(Widget, {
     title: t("Planted Species"),
     className: "with-border-header h-w-btn-header",
@@ -58227,13 +58367,8 @@ const ObservedFauna = ({
     }));
   }, [observedFaunaChart, options]);
   const xAxisConfig = React.useMemo(() => {
-    return calculateNiceAxisConfig(chartData, 'value', 1.2,
-    // multiplier: 20% padding
-    {
-      min: 0,
-      max: 10,
-      tickMethod: () => [0, 2, 4, 6, 8, 10]
-    });
+    const maxValue = chartData && chartData.length > 0 ? Math.max(...chartData.map(item => Number(item?.value) || 0)) : 0;
+    return calculateNaturalAxisConfig(maxValue);
   }, [chartData]);
   return /*#__PURE__*/jsxRuntime.jsx(Widget, {
     title: t("Observed Fauna"),
@@ -58416,21 +58551,29 @@ const BiodiversityHabitat = ({
       }), /*#__PURE__*/jsxRuntime.jsxs("div", {
         style: {
           display: "flex",
-          gap: "24px"
+          gap: "24px",
+          flexWrap: "wrap"
         },
         children: [/*#__PURE__*/jsxRuntime.jsx("section", {
           style: {
-            flex: 1
+            flex: 1,
+            minWidth: "300px"
           },
           children: /*#__PURE__*/jsxRuntime.jsx(ObservedFauna, {
             observedFaunaChart: observedFauna,
             t: t,
             options: options
           })
-        }), /*#__PURE__*/jsxRuntime.jsx(InvasiveSpecies, {
-          invasiveSpeciesChart: invasiveSpecies,
-          t: t,
-          options: options
+        }), /*#__PURE__*/jsxRuntime.jsx("section", {
+          style: {
+            flex: 1,
+            minWidth: "300px"
+          },
+          children: /*#__PURE__*/jsxRuntime.jsx(InvasiveSpecies, {
+            invasiveSpeciesChart: invasiveSpecies,
+            t: t,
+            options: options
+          })
         })]
       })]
     })
@@ -58503,7 +58646,13 @@ const Stats = ({
   });
 };
 
-const COLORS$1 = ['#016C6E', '#4FB3A1', '#A8E6CF', '#FFD93D', '#F0A888', '#DF571E', '#C04B19'];
+const SOIL_TYPE_COLORS$1 = {
+  sandy: '#00AEB1',
+  mixed: '#016C6E',
+  clay: '#A0EBEC',
+  muddy: '#4FB3A1'
+};
+const DEFAULT_COLOR$1 = '#9E9E9E';
 const SoilType = ({
   soilTypeChart,
   t = s => s,
@@ -58524,7 +58673,7 @@ const SoilType = ({
     return data.map((item, index) => ({
       value: Number(item?.count) || 0,
       percent: total > 0 ? (Number(item?.count) || 0) / total : 0,
-      color: COLORS$1[index % COLORS$1.length],
+      color: SOIL_TYPE_COLORS$1[item?.soilType] || DEFAULT_COLOR$1,
       label: optionsMap[item?.soilType] || item?.soilType || '',
       key: item?.soilType || `item-${index}`
     }));
@@ -58536,15 +58685,18 @@ const SoilType = ({
     if (isEmpty) {
       return null;
     }
+
+    // Show all items in the tooltip, sorted by percentage (descending)
+    const allItems = pieData.filter(dataItem => dataItem.value > 0).sort((a, b) => b.percent - a.percent).map(dataItem => ({
+      color: dataItem.color,
+      label: dataItem.label || '',
+      value: renderPercentage(Math.round(dataItem.percent * 100))
+    }));
     return renderTooltipJsx({
       title: t("Soil Type"),
-      items: [{
-        color: item.color,
-        label: optionsMap[item.label] || item.label || '',
-        value: `${renderPercentage(item.percent.toFixed(2) * 100)}`
-      }]
+      items: allItems
     });
-  }, [t, isEmpty, optionsMap]);
+  }, [t, isEmpty, pieData]);
   return /*#__PURE__*/jsxRuntime.jsx(Widget, {
     title: t("Soil Type"),
     className: "with-border-header h-w-btn-header",
@@ -58645,7 +58797,16 @@ const SalinityLevels = ({
   });
 };
 
-const COLORS = ['#6AD99E', '#FFD93D', '#F0A888', '#DF571E', '#B0B0B0', '#016C6E', '#4FB3A1'];
+const WATER_QUALITY_COLORS = {
+  fairly_clear: '#32D583',
+  turbid: '#FFA940',
+  polluted: '#F97066',
+  oil_traces: '#2B3644',
+  no_water: '#DAD6CE',
+  clear: '#6AD99E',
+  other: '#9E9E9E'
+};
+const DEFAULT_COLOR = '#9E9E9E';
 const WaterQuality = ({
   waterQualityChart,
   t = s => s,
@@ -58666,7 +58827,7 @@ const WaterQuality = ({
     return data.map((item, index) => ({
       value: Number(item?.count) || 0,
       percent: total > 0 ? (Number(item?.count) || 0) / total : 0,
-      color: COLORS[index % COLORS.length],
+      color: WATER_QUALITY_COLORS[item?.waterQuality] || DEFAULT_COLOR,
       label: optionsMap[item?.waterQuality] || item?.waterQuality || '',
       key: item?.waterQuality || `item-${index}`
     }));
@@ -58678,15 +58839,18 @@ const WaterQuality = ({
     if (isEmpty) {
       return null;
     }
+
+    // Show all items in the tooltip, sorted by percentage (descending)
+    const allItems = pieData.filter(dataItem => dataItem.value > 0).sort((a, b) => b.percent - a.percent).map(dataItem => ({
+      color: dataItem.color,
+      label: dataItem.label || '',
+      value: renderPercentage(Math.round(dataItem.percent * 100))
+    }));
     return renderTooltipJsx({
       title: t("Water Quality"),
-      items: [{
-        color: item.color,
-        label: item.label || '',
-        value: `${Math.round(item.percent * 100)}%`
-      }]
+      items: allItems
     });
-  }, [t, isEmpty]);
+  }, [t, isEmpty, pieData]);
   return /*#__PURE__*/jsxRuntime.jsx(Widget, {
     title: t("Water Quality"),
     className: "with-border-header h-w-btn-header",