datastake-daf 0.6.161 → 0.6.162

package/dist/components/index.js

@@ -15028,7 +15028,18 @@ const PdfForm = _ref3 => {
   // Group objects under headers based on position
   const organizeFormByHeaders = formData => {
     const organizedSections = {};
-    Object.keys(formData).forEach(sectionKey => {
+
+    // Sort sections by position before processing
+    const sortedSectionKeys = Object.keys(formData).filter(sectionKey => {
+      const section = formData[sectionKey];
+      return typeof section === 'object' && section.label;
+    }).sort((a, b) => {
+      var _formData$a, _formData$b;
+      const positionA = ((_formData$a = formData[a]) === null || _formData$a === void 0 ? void 0 : _formData$a.position) || 0;
+      const positionB = ((_formData$b = formData[b]) === null || _formData$b === void 0 ? void 0 : _formData$b.position) || 0;
+      return positionA - positionB;
+    });
+    sortedSectionKeys.forEach(sectionKey => {
       const section = formData[sectionKey];
       if (typeof section !== 'object' || !section.label) {
         return;
@@ -17547,57 +17558,6 @@ function useMapHelper$1({
       let iconSize = [25, 25];
       if (type === "event") {
         iconClassName = "incident rounded";
-
-        /* 					const incidents = data?.data || [];
-        const totals = {
-        major: incidents.filter((d) => d.type === "major_incident").length,
-        minor: incidents.filter((d) => d.type === "minor_incident").length,
-        moderate: incidents.filter((d) => d.type === "moderate_incident").length,
-        correctiveActions: incidents.filter((d) => d.type === "correctiveActions")
-        .length,
-        };
-        const total = incidents.length;
-        let background = "#f1f1f1";
-        if (total > 0) {
-        const categories = [
-        { key: "major", value: totals.major, color: EVENT_COLORS.MAJOR },
-        {
-        key: "moderate",
-        value: totals.moderate,
-        color: EVENT_COLORS.MODERATE,
-        },
-        { key: "minor", value: totals.minor, color: EVENT_COLORS.MINOR },
-        {
-        key: "corrective",
-        value: totals.correctiveActions,
-        color: EVENT_COLORS.CORRECTIVE,
-        },
-        ]
-        .filter((c) => c.value > 0)
-        .map((c) => ({ ...c, perc: (c.value / total) * 100 }));
-        if (categories.length === 1) {
-        background = categories[0].color;
-        } else {
-        let currentStop = 0;
-        const gradientStops = categories.map((cat, index) => {
-        const stop = categories
-        .slice(0, index)
-        .reduce((acc, c) => acc + c.perc, 0);
-        return `${cat.color} ${Math.round(stop)}%`;
-        });
-        background = `radial-gradient(circle, ${gradientStops.join(", ")})`;
-        }
-        }
-        let radius = 35;
-        if (data.total > 20) {
-        radius = 65;
-        } else if (data.total > 10) {
-        radius = 50;
-        } else {
-        radius = 40;
-        }
-        */
-
         const {
           background,
           radius,
@@ -18133,7 +18093,17 @@ const useMap$1 = ({
       }
       addAllDataToMap();
     }
-  }, [data, mapRef, zoom, selectedMarkersId, markerWithPopup, openPopupIdRef.current, polylinesRef.current.length, activeStakeholder]);
+  }, [data, mapRef, activeStakeholder]);
+  React.useEffect(() => {
+    if (mapRef && data && type === "chain") {
+      if (!initialMarkerSetIsDone) {
+        setInitialMarkerSetIsDone(true);
+      } else {
+        clearMapMarkers();
+      }
+      addAllDataToMap();
+    }
+  }, [zoom, selectedMarkersId, markerWithPopup, openPopupIdRef.current, polylinesRef.current.length]);
   React.useEffect(() => {
     const marker = mapMarkers.find(m => m.id === activeMarker);
     if (getZoom && marker && mapRef) {
@@ -20480,8 +20450,10 @@ const ProjectWidgetItems = dt.ul`
 const SDGList = dt.ul`
 	list-style: none;
 	padding: 0;
+	width: 100%;
+	overflow-x: hidden;
 	display: flex;
-	flex-wrap: wrap;
+	flex-wrap: nowrap;
 	gap: 4px;
 	margin: 0;
 
@@ -20492,6 +20464,14 @@ const SDGList = dt.ul`
 		background-position: center;
 		background-repeat: no-repeat;
 	}
+
+	.sdg-item-more {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: var(--base-gray-30);
+		color: var(--base-gray-90);
+	}
 `;
 const Label = dt.span`
 	font-family: SF UI Display;
@@ -20504,6 +20484,82 @@ const Label = dt.span`
 	color: #6c737f;
 `;
 
+const SDG_IMAGE_WIDTH = 24;
+const GAP_BETWEEN_SDGS = 4;
+const TOTAL_SPACE_FOR_SDG = SDG_IMAGE_WIDTH + GAP_BETWEEN_SDGS;
+function SdgList({
+  sdgList = [],
+  t,
+  cardWidth
+}) {
+  const maxSdgToShow = React.useMemo(() => {
+    return Math.floor(cardWidth / TOTAL_SPACE_FOR_SDG);
+  }, [cardWidth]);
+  const {
+    visibleSdgs,
+    hiddenCount
+  } = React.useMemo(() => {
+    if (sdgList.length <= maxSdgToShow) {
+      return {
+        visibleSdgs: sdgList,
+        hiddenCount: 0
+      };
+    }
+    return {
+      visibleSdgs: sdgList.slice(0, maxSdgToShow - 1),
+      hiddenCount: sdgList.length - (maxSdgToShow - 1)
+    };
+  }, [sdgList, maxSdgToShow]);
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(Label, {
+      children: "SDGs:"
+    }), /*#__PURE__*/jsxRuntime.jsxs(SDGList, {
+      children: [visibleSdgs.map((sdg, index) => /*#__PURE__*/jsxRuntime.jsx("li", {
+        className: "project-widget-item",
+        children: /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
+          title: t(`SDGS::${sdg}`),
+          children: /*#__PURE__*/jsxRuntime.jsx("div", {
+            style: {
+              backgroundImage: `url(${SDG_IMAGES[sdg].img})`
+            },
+            className: "sdg-item-image"
+          })
+        })
+      }, index)), hiddenCount > 0 && /*#__PURE__*/jsxRuntime.jsx("li", {
+        className: "project-widget-item",
+        children: /*#__PURE__*/jsxRuntime.jsx(antd.Popover, {
+          placement: "top",
+          content: /*#__PURE__*/jsxRuntime.jsx("div", {
+            style: {
+              display: "flex",
+              gap: "4px",
+              flexWrap: "wrap",
+              maxWidth: 200
+            },
+            children: sdgList.slice(visibleSdgs.length).map((sdg, idx) => /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
+              title: t(`SDGS::${sdg}`),
+              children: /*#__PURE__*/jsxRuntime.jsx("div", {
+                style: {
+                  width: SDG_IMAGE_WIDTH,
+                  height: SDG_IMAGE_WIDTH,
+                  backgroundImage: `url(${SDG_IMAGES[sdg].img})`,
+                  backgroundSize: "cover",
+                  borderRadius: 4
+                },
+                title: t(`SDGS::${sdg}`)
+              })
+            }, idx))
+          }),
+          children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "sdg-item-image sdg-item-more",
+            children: ["+", hiddenCount]
+          })
+        })
+      })]
+    })]
+  });
+}
+
 const _excluded$c = ["title", "description", "onLinkClick", "image", "linkIcon", "sdgList", "items", "onCardClick", "hideSDGList", "t"];
 const {
   Meta
@@ -20529,9 +20585,20 @@ function ProjectWidget(_ref) {
   const {
     token
   } = useToken$i();
+  const cardRef = React__default["default"].useRef(null);
+  const [cardWidth, setCardWidth] = React__default["default"].useState(0);
+  React__default["default"].useEffect(() => {
+    const resizeObserver = new ResizeObserver(entries => {
+      setCardWidth(entries[0].contentRect.width);
+    });
+    resizeObserver.observe(cardRef.current);
+    return () => resizeObserver.disconnect();
+  }, [cardRef]);
   return /*#__PURE__*/jsxRuntime.jsxs(antd.Card, _objectSpread2(_objectSpread2({
     style: {
-      flex: 1
+      flex: 1,
+      width: "100%",
+      minWidth: "200px"
     },
     hoverable: true,
     onMouseEnter: () => setIsHovered(true),
@@ -20565,29 +20632,17 @@ function ProjectWidget(_ref) {
           children: item.label
         }), item.render()]
       }, index))
-    }), !hideSDGList && /*#__PURE__*/jsxRuntime.jsxs("div", {
+    }), !hideSDGList && /*#__PURE__*/jsxRuntime.jsx("div", {
       style: {
         borderTop: "1px solid var(--base-gray-30)",
         paddingTop: "10px"
       },
-      children: [/*#__PURE__*/jsxRuntime.jsx(Label, {
-        children: "SDGs:"
-      }), /*#__PURE__*/jsxRuntime.jsx(SDGList, {
-        children: sdgList.map((sdg, index) => {
-          return /*#__PURE__*/jsxRuntime.jsx("li", {
-            className: "project-widget-item",
-            children: /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
-              title: t("SDGS::".concat(sdg)),
-              children: /*#__PURE__*/jsxRuntime.jsx("div", {
-                style: {
-                  backgroundImage: "url(".concat(SDG_IMAGES[sdg].img, ")")
-                },
-                className: "sdg-item-image"
-              })
-            })
-          }, index);
-        })
-      })]
+      ref: cardRef,
+      children: /*#__PURE__*/jsxRuntime.jsx(SdgList, {
+        sdgList: sdgList,
+        t: t,
+        cardWidth: cardWidth
+      })
     })]
   }));
 }
@@ -47171,7 +47226,6 @@ function AvatarGroup(_ref) {
   const {
     token
   } = useToken$f();
-  console.log("token", token);
   return /*#__PURE__*/jsxRuntime.jsx(antd.Avatar.Group, {
     max: {
       count: count,

package/package.json

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

package/src/@daf/core/components/AvatarGroup/index.jsx

@@ -11,7 +11,6 @@ export default function AvatarGroup({
 }) {
   const count = items.length === maxLength + 1 ? items.length : maxLength;
   const { token } = useToken();
-  console.log("token", token);
   return (
     <Avatar.Group
       max={{