datastake-daf 0.6.430 → 0.6.431

package/dist/components/index.js

@@ -13302,10 +13302,11 @@ DAFFooter.propTypes = {
   isViewMode: PropTypes__default["default"].bool
 };
 
-const PAGE_HEIGHT = 1587;
-// margin-top: 20, bottom: 20;
+const PAGE_HEIGHT = 1200; // Full page height
 const FOOTER_HEIGHT = 70;
 const HEADER_HEIGHT = 100;
+const SECTION_GAP = 24; // Spacing between sections on the same page
+
 const Row = _ref => {
   let {
     widgets,
@@ -13351,55 +13352,64 @@ function PdfView(_ref2) {
   const [sectionsConfig, setSectionsConfig] = React.useState({});
   const [pages, setPages] = React.useState([1]);
   const doSizing = React.useCallback(() => {
-    const keys = Object.keys(sectionsConfig);
-    let _pages = [1];
-    let _page = 1;
+    const keys = Object.keys(sectionsConfig).sort((a, b) => Number(a) - Number(b));
+    const pageContentHeight = PAGE_HEIGHT - HEADER_HEIGHT - FOOTER_HEIGHT;
+    let computedPages = [1];
+    let currentPage = 1;
+    let usedHeightOnPage = 0; // Height used within the current page's content area (excludes header/footer)
+
     if (keys.length === config.length) {
-      let incrHeight = 0;
+      // Reset margins before recalculating
       keys.forEach(k => {
         const {
           ref
         } = sectionsConfig[k];
-        ref.current.style.marginBottom = '0px';
-        // ref.current.style.marginTop = '15px';
+        if (ref && ref.current) {
+          ref.current.style.marginTop = '0px';
+          ref.current.style.marginBottom = '0px';
+        }
       });
       keys.forEach((k, i) => {
         const {
           height,
           ref
         } = sectionsConfig[k];
-        if (i === 0) {
-          ref.current.style.marginTop = "".concat(HEADER_HEIGHT, "px");
-          incrHeight += HEADER_HEIGHT;
-        }
-        const newHeight = incrHeight + height;
-        if (i === keys.length - 1) {
-          ref.current.style.paddingBottom = '30px';
-        }
-        if (newHeight > PAGE_HEIGHT - 30 - FOOTER_HEIGHT - HEADER_HEIGHT) {
-          const dif = Math.abs(PAGE_HEIGHT - incrHeight);
-          ref.current.style.marginTop = '30px';
-          _page += 1;
-          _pages.push(_page);
-          if (sectionsConfig[keys[i - 1]]) {
-            const {
-              ref: topRef
-            } = sectionsConfig[keys[i - 1]];
-            console.log({
-              dif
-            });
-            topRef.current.style.marginBottom = "".concat(250, "px");
-            incrHeight = height + 24 + HEADER_HEIGHT;
-            // console.log('margin', dif);
+        const isFirstOnPage = usedHeightOnPage === 0;
+        const gapAbove = isFirstOnPage ? 0 : SECTION_GAP;
+
+        // If adding this section would overflow the current page, move it to the next page
+        if (usedHeightOnPage + gapAbove + height > pageContentHeight && i > 0) {
+          const prevKey = keys[i - 1];
+          const {
+            ref: prevRef
+          } = sectionsConfig[prevKey];
+          const remainingOnPage = Math.max(0, pageContentHeight - usedHeightOnPage);
+
+          // Push the next section to start at the top of the next page (after the header)
+          if (prevRef && prevRef.current) {
+            // Only fill the remaining content area; the next section will add HEADER_HEIGHT as its top margin
+            prevRef.current.style.marginBottom = "".concat(remainingOnPage, "px");
           }
+
+          // Start new page
+          currentPage += 1;
+          computedPages.push(currentPage);
+          usedHeightOnPage = 0;
+        }
+
+        // Apply top margin: header spacing if first on page, otherwise standard section gap
+        if (usedHeightOnPage === 0) {
+          ref.current.style.marginTop = "".concat(HEADER_HEIGHT, "px");
         } else {
-          incrHeight = newHeight + 24;
+          ref.current.style.marginTop = "".concat(SECTION_GAP, "px");
         }
-        // console.groupEnd();
+
+        // Accumulate height used on the page
+        usedHeightOnPage += (usedHeightOnPage === 0 ? 0 : SECTION_GAP) + height;
       });
-      setPages(_pages);
+      setPages(computedPages);
     }
-  }, [sectionsConfig]);
+  }, [sectionsConfig, config.length]);
   React.useEffect(() => {
     doSizing();
   }, [doSizing]);
@@ -13438,7 +13448,8 @@ function PdfView(_ref2) {
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: contClassName,
     style: {
-      position: 'relative'
+      position: 'relative',
+      minHeight: pages.length * PAGE_HEIGHT
     },
     children: [renderDashboard(), pages.map(page => /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [/*#__PURE__*/jsxRuntime.jsxs("div", {

package/package.json

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

package/src/@daf/core/components/Dashboard/PdfView/index.jsx

@@ -3,10 +3,10 @@ import PropTypes from 'prop-types';
 import { useCallback, useEffect, useRef, useState } from "react";
 import { formatClassname } from "../../../../../helpers/ClassesHelper";
 
-const PAGE_HEIGHT = 1587;
-// margin-top: 20, bottom: 20;
+const PAGE_HEIGHT = 1200; // Full page height
 const FOOTER_HEIGHT = 70;
 const HEADER_HEIGHT = 100;
+const SECTION_GAP = 24; // Spacing between sections on the same page
 
 const Row = ({ widgets, i, onChangeHeight = () => { } }) => {
   const ref = useRef();
@@ -51,54 +51,60 @@ export default function PdfView({
   const [pages, setPages] = useState([1]);
 
   const doSizing = useCallback(() => {
-    const keys = Object.keys(sectionsConfig);
-    let _pages = [1];
-    let _page = 1;
+    const keys = Object.keys(sectionsConfig).sort((a, b) => Number(a) - Number(b));
+    const pageContentHeight = PAGE_HEIGHT - HEADER_HEIGHT - FOOTER_HEIGHT;
 
-    if (keys.length === config.length) {
-      let incrHeight = 0;
+    let computedPages = [1];
+    let currentPage = 1;
+    let usedHeightOnPage = 0; // Height used within the current page's content area (excludes header/footer)
 
+    if (keys.length === config.length) {
+      // Reset margins before recalculating
       keys.forEach(k => {
         const { ref } = sectionsConfig[k];
-        ref.current.style.marginBottom = '0px';
-        // ref.current.style.marginTop = '15px';
-      })
+        if (ref && ref.current) {
+          ref.current.style.marginTop = '0px';
+          ref.current.style.marginBottom = '0px';
+        }
+      });
 
       keys.forEach((k, i) => {
         const { height, ref } = sectionsConfig[k];
+        const isFirstOnPage = usedHeightOnPage === 0;
+        const gapAbove = isFirstOnPage ? 0 : SECTION_GAP;
+
+        // If adding this section would overflow the current page, move it to the next page
+        if (usedHeightOnPage + gapAbove + height > pageContentHeight && i > 0) {
+          const prevKey = keys[i - 1];
+          const { ref: prevRef } = sectionsConfig[prevKey];
+          const remainingOnPage = Math.max(0, pageContentHeight - usedHeightOnPage);
+
+          // Push the next section to start at the top of the next page (after the header)
+          if (prevRef && prevRef.current) {
+            // Only fill the remaining content area; the next section will add HEADER_HEIGHT as its top margin
+            prevRef.current.style.marginBottom = `${remainingOnPage}px`;
+          }
 
-        if (i === 0) {
-          ref.current.style.marginTop = `${HEADER_HEIGHT}px`;
-          incrHeight += HEADER_HEIGHT;
-        }
-
-        const newHeight = incrHeight + height;
-
-        if (i === keys.length - 1) {
-          ref.current.style.paddingBottom = '30px';
+          // Start new page
+          currentPage += 1;
+          computedPages.push(currentPage);
+          usedHeightOnPage = 0;
         }
 
-        if (newHeight > PAGE_HEIGHT - 30 - FOOTER_HEIGHT - HEADER_HEIGHT) {
-          const dif = Math.abs(PAGE_HEIGHT - incrHeight);
-          ref.current.style.marginTop = '30px';
-          _page += 1;
-          _pages.push(_page);
-
-          if (sectionsConfig[keys[i - 1]]) {
-            const { ref: topRef } = sectionsConfig[keys[i - 1]];
-            console.log({dif})
-            topRef.current.style.marginBottom = `${250}px`;
-            incrHeight = height + 24 + HEADER_HEIGHT;
-            // console.log('margin', dif);
-          }
+        // Apply top margin: header spacing if first on page, otherwise standard section gap
+        if (usedHeightOnPage === 0) {
+          ref.current.style.marginTop = `${HEADER_HEIGHT}px`;
         } else {
-          incrHeight = newHeight + 24;
+          ref.current.style.marginTop = `${SECTION_GAP}px`;
         }
-        // console.groupEnd();
-      })
-      setPages(_pages);
+
+        // Accumulate height used on the page
+        usedHeightOnPage += (usedHeightOnPage === 0 ? 0 : SECTION_GAP) + height;
+      });
+
+      setPages(computedPages);
     }
-  }, [sectionsConfig]);
+  }, [sectionsConfig, config.length]);
 
   useEffect(() => {
     doSizing();
@@ -139,7 +145,7 @@ export default function PdfView({
   //         <section>
 
   return (
-    <div className={contClassName} style={{ position: 'relative' }}>
+    <div className={contClassName} style={{ position: 'relative', minHeight: pages.length * PAGE_HEIGHT }}>
       {renderDashboard()}
       {pages.map((page) => (
         <>