datastake-daf 0.6.784 → 0.6.785

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/dist/utils/index.js

@@ -13134,6 +13134,63 @@ const renderPercentage = val => {
   return val + "%";
 };
 
+/**
+ * Calculates stat change object for StatCard component based on current and previous values
+ * @param {Object} data - Object with current and previous values
+ * @param {number} data.current - Current value
+ * @param {number} data.previous - Previous value
+ * @param {Object} options - Optional configuration
+ * @param {string} options.tooltipText - Custom tooltip text
+ * @param {string} options.format - Format type: 'percentage' (default) or 'absolute'
+ * @param {number} options.decimalPlaces - Number of decimal places for percentage (default: 1)
+ * @returns {Object|null} Change object for StatCard or null if data is invalid
+ */
+const calculateStatChange = (data, options = {}) => {
+  if (!data || typeof data !== 'object') {
+    return null;
+  }
+  const {
+    current,
+    previous
+  } = data;
+
+  // Validate that both values are numbers
+  if (typeof current !== 'number' || typeof previous !== 'number') {
+    return null;
+  }
+
+  // If previous is 0, we can't calculate percentage change
+  if (previous === 0) {
+    return null;
+  }
+  const {
+    tooltipText,
+    format = 'percentage',
+    decimalPlaces = 1
+  } = options;
+
+  // Calculate the difference
+  const difference = current - previous;
+  const isPositive = difference >= 0;
+  const direction = isPositive ? 'up' : 'down';
+
+  // Format the value
+  let value;
+  if (format === 'absolute') {
+    // Show absolute difference
+    value = Math.abs(difference).toLocaleString();
+  } else {
+    // Show percentage change
+    const percentageChange = Math.abs(difference) / previous * 100;
+    value = `${percentageChange.toFixed(decimalPlaces)}%`;
+  }
+  return {
+    value,
+    direction,
+    tooltipText: tooltipText || undefined
+  };
+};
+
 /**
  * Enum for message types used with Ant Design message component
  * @enum {string}
@@ -14908,6 +14965,7 @@ exports.buildBreadCrumbsHelper = buildBreadCrumbs;
 exports.buildBreadcrumbs = buildBreadcrumbs;
 exports.buildKeyIndicatorsConfig = buildKeyIndicatorsConfig;
 exports.buildQueryString = buildQueryString;
+exports.calculateStatChange = calculateStatChange;
 exports.camelCaseToTitle = camelCaseToTitle;
 exports.capitalize = capitalize;
 exports.capitalizeAll = capitalizeAll;

package/package.json

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

package/src/@daf/pages/Summary/Activities/MonitoringCampaign/components/KeyInformation/index.jsx

@@ -0,0 +1,48 @@
+import { useMemo } from 'react';
+import { KeyIndicators } from '../../../../../../../../src/index.js';
+import { getKeyIndicatorsRowConfig } from '../../config';
+import { useWidgetFetch } from '../../../../../../hooks/useWidgetFetch.js';
+
+const KeyInformation = ({ id, t = () => { }, getSummaryDetail, loading = false }) => {
+
+    const defaultConfig = useMemo(
+        () => ({
+            basepath: "events/monitoring-campaign",
+            url: `/summary/${id}/key-information`,
+            stop: !id,
+        }),
+        [id],
+    );
+
+    const customGetData = useMemo(() => {
+        if (getSummaryDetail && id) {
+            return ({ url, params = {} }) => {
+                const match = url.match(/\/summary\/[^/]+\/(.+)/);
+                if (match) {
+                    const [, type] = match;
+                    return getSummaryDetail(id, type, params);
+                }
+                throw new Error(`Invalid URL format: ${url}`);
+            };
+        }
+        return undefined;
+    }, [getSummaryDetail, id]);
+
+    const { loading: keyInformationLoading, data: keyInformationData } = useWidgetFetch({
+        config: defaultConfig,
+        getData: customGetData
+    });
+    const keyIndicatorsConfig = useMemo(() => getKeyIndicatorsRowConfig({ t, data: keyInformationData }), [t, keyInformationData]);
+    return (
+        <section>
+            <KeyIndicators
+                title={t("Key Information")}
+                config={keyIndicatorsConfig}
+                loading={loading || keyInformationLoading}
+            />
+        </section>
+    );
+};
+
+export default KeyInformation;
+

package/src/@daf/pages/Summary/Activities/MonitoringCampaign/components/MangroveGrowth/PlantedSpecies.jsx

@@ -0,0 +1,73 @@
+import React, { useMemo, useCallback } from 'react';
+import { Widget, PieChart } from '../../../../../../../../src/index.js';
+import { renderTooltipJsx } from '../../../../../../utils/tooltip.js';
+
+const COLORS = ['#016C6E', '#F5C2AC', '#F0A888', '#DF571E', '#C04B19', '#9B3D14', '#7A2F0F'];
+
+const PlantedSpecies = ({
+    plantedSpeciesChart,
+    t = (s) => s
+}) => {
+    const pieData = useMemo(() => {
+        const data = plantedSpeciesChart || [];
+        const total = data.reduce((sum, item) => sum + (Number(item?.value) || 0), 0);
+
+        return data.map((item, index) => ({
+            value: Number(item?.value) || 0,
+            percent: total > 0 ? (Number(item?.value) || 0) / total : 0,
+            color: COLORS[index % COLORS.length],
+            label: item?.type || '',
+            key: item?.type || `item-${index}`,
+        }));
+    }, [plantedSpeciesChart]);
+
+    const isEmpty = useMemo(() => {
+        return !plantedSpeciesChart || plantedSpeciesChart.length === 0 || 
+               plantedSpeciesChart.every(item => !item?.value || Number(item.value) === 0);
+    }, [plantedSpeciesChart]);
+
+    const getTooltipChildren = useCallback(
+        (item) => {
+            if (isEmpty) {
+                return null;
+            }
+
+            return renderTooltipJsx({
+                title: t("Planted Species"),
+                items: [
+                    {
+                        color: item.color,
+                        label: item.label || '',
+                        value: item.value || 0,
+                    },
+                ],
+            });
+        },
+        [t, isEmpty]
+    );
+
+    return (
+        <Widget
+            title={t("Planted Species")}
+            className="with-border-header h-w-btn-header"
+        >
+            <div className="flex flex-1 flex-column justify-content-center">
+                <div className="flex justify-content-center w-full">
+                    <PieChart
+                        data={pieData}
+                        isPie
+                        isEmpty={isEmpty}
+                        getTooltipChildren={getTooltipChildren}
+                        mouseXOffset={10}
+                        mouseYOffset={10}
+                        changeOpacityOnHover={false}
+                        doConstraints={false}
+                    />
+                </div>
+            </div>
+        </Widget>
+    );
+};
+
+export default PlantedSpecies;
+

package/src/@daf/pages/Summary/Activities/MonitoringCampaign/components/MangroveGrowth/SeedlingsHeight.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Widget, ColumnChart } from '../../../../../../../../src/index.js';
+
+const SeedlingsHeight = ({
+    seedlingsHeightChart,
+    t = (s) => s
+}) => {
+    return (
+        <Widget
+            title={t("Seedlings Height")}
+            className="with-border-header h-w-btn-header"
+        >
+            <div className="flex flex-1 flex-column justify-content-center">
+                <div className="flex justify-content-center w-full">
+                    <ColumnChart
+                        data={seedlingsHeightChart || []}
+                        xFieldKey="label"
+                        yFieldKey="value"
+                        animated={true}
+                        height={200}
+                        color="#016C6E"
+                        renderTooltipContent={(title, data) => {
+                            if (!data || data.length === 0) return {};
+                            const item = data[0]?.data || data[0];
+                            return {
+                                title: t("Seedlings Height"),
+                                subTitle: title,
+                                items: [
+                                    {
+                                        label: t("Count"),
+                                        value: item?.value || 0,
+                                    },
+                                ],
+                            };
+                        }}
+                    />
+                </div>
+            </div>
+        </Widget>
+    );
+};
+
+export default SeedlingsHeight;
+

package/src/@daf/pages/Summary/Activities/MonitoringCampaign/components/MangroveGrowth/Stats.jsx

@@ -0,0 +1,86 @@
+import React, { useMemo } from 'react';
+import { StatCard } from '../../../../../../../../src/index.js';
+import { calculateStatChange } from '../../../../../../utils/numbers.js';
+
+const Stats = ({
+    survivalRate,
+    averageHeight,
+    averageDiameter,
+    t = (s) => s
+}) => {
+    const survivalRateChange = useMemo(() => {
+        if (!survivalRate) return null;
+        return calculateStatChange(
+            {
+                current: Number(survivalRate.current) || 0,
+                previous: Number(survivalRate.previous) || 0,
+            },
+            {
+                tooltipText: t("In comparison to last period"),
+                format: 'absolute',
+            }
+        );
+    }, [survivalRate, t]);
+
+    const averageHeightChange = useMemo(() => {
+        if (!averageHeight) return null;
+        return calculateStatChange(
+            {
+                current: Number(averageHeight.current) || 0,
+                previous: Number(averageHeight.previous) || 0,
+            },
+            {
+                tooltipText: t("In comparison to last period"),
+                format: 'absolute',
+            }
+        );
+    }, [averageHeight, t]);
+
+    const averageDiameterChange = useMemo(() => {
+        if (!averageDiameter) return null;
+        return calculateStatChange(
+            {
+                current: Number(averageDiameter.current) || 0,
+                previous: Number(averageDiameter.previous) || 0,
+            },
+            {
+                tooltipText: t("In comparison to last period"),
+                format: 'absolute',
+            }
+        );
+    }, [averageDiameter, t]);
+
+    return (
+        <div style={{ display: "flex", gap: "24px", marginBottom: "24px" }}>
+            <section style={{ flex: 1 }}>
+                <StatCard
+                    title={t("Survival Rate")}
+                    value={survivalRate ? Number(survivalRate.current).toLocaleString() : "0"}
+                    icon="EventCalendar"
+                    change={survivalRateChange}
+                />
+            </section>
+
+            <section style={{ flex: 1 }}>
+                <StatCard
+                    title={t("Average Height")}
+                    value={averageHeight ? Number(averageHeight.current).toLocaleString() + " cm" : "0 cm"}
+                    icon="ProjectLocation"
+                    change={averageHeightChange}
+                />
+            </section>
+
+            <section style={{ flex: 1 }}>
+                <StatCard
+                    title={t("Average Diameter")}
+                    value={averageDiameter ? Number(averageDiameter.current).toLocaleString() + " mm" : "0 mm"}
+                    icon="Activity"
+                    change={averageDiameterChange}
+                />
+            </section>
+        </div>
+    );
+};
+
+export default Stats;
+