datastake-daf 0.6.422 → 0.6.424

package/package.json

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

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

@@ -1,17 +1,42 @@
 import moment from "moment";
 import PropTypes from 'prop-types';
-import { Fragment, useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { formatClassname } from "../../../../../helpers/ClassesHelper";
 
 const PAGE_HEIGHT = 1587;
 const FOOTER_HEIGHT = 70;
 const HEADER_HEIGHT = 100;
-const PAGE_MARGIN_TOP = 20;
-const PAGE_MARGIN_BOTTOM = 20;
-const CONTENT_HEIGHT = 1200; // 1397px
-const SECTION_GAP = 24;
+const CONTENT_HEIGHT_PER_PAGE = 1200; // Maximum content height per page
+const PAGE_TOP_MARGIN = 30; // Margin at the top of content on new pages
 
-const isHTMLElement = (node) => node instanceof HTMLElement;
+const Row = ({ widgets, i, onChangeHeight = () => { } }) => {
+  const ref = useRef();
+  const [height, setHeight] = useState(0);
+
+  useEffect(() => {
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setHeight(entry.contentRect.height);
+      }
+    });
+
+    observer.observe(ref.current);
+
+    return () => observer.disconnect();
+  }, []);
+
+  useEffect(() => {
+    if (height) {
+      onChangeHeight(i, { height, ref });
+    }
+  }, [height])
+
+  return (
+    <section ref={ref} style={widgets.style}>
+      {typeof widgets.render === 'function' ? widgets.render() : null}
+    </section>
+  )
+};
 
 export default function PdfView({
   config = [],
@@ -23,224 +48,120 @@ export default function PdfView({
   documentId = 'IDD-0000000',
   downloadId = 'DWL-00000123',
 }) {
+  const [sectionsConfig, setSectionsConfig] = useState({});
   const [pages, setPages] = useState([1]);
-  const contentRef = useRef(null);
-  const sectionsRef = useRef([]);
 
-  const resetPaginationStyles = useCallback((sections) => {
-    sections.forEach((section) => {
-      if (!section) return;
-      section.style.marginTop = '';
-      section.style.marginBottom = '';
-      section.style.pageBreakBefore = '';
-      section.style.breakBefore = '';
-      section.removeAttribute('data-pdf-page');
-      
-      // Reset all children
-      const allElements = section.querySelectorAll('*');
-      allElements.forEach((el) => {
-        if (!isHTMLElement(el)) return;
-        el.style.marginTop = '';
-        el.style.marginBottom = '';
-        el.style.pageBreakBefore = '';
-        el.style.breakBefore = '';
-        el.removeAttribute('data-pdf-page');
+  const doSizing = useCallback(() => {
+    const keys = Object.keys(sectionsConfig);
+    let _pages = [1];
+    let _page = 1;
+
+    if (keys.length === config.length) {
+      // Reset all margins and padding first
+      keys.forEach(k => {
+        const { ref } = sectionsConfig[k];
+        ref.current.style.marginTop = '0px';
+        ref.current.style.marginBottom = '0px';
+        ref.current.style.paddingBottom = '0px';
       });
-    });
-  }, []);
 
-  const getAllBreakableElements = useCallback((section) => {
-    const elements = [];
-    
-    const shouldInclude = (el) => {
-      if (!isHTMLElement(el)) return false;
-      const style = window.getComputedStyle(el);
-      if (style.display === 'inline' || style.display === 'contents') return false;
-      if (style.position === 'absolute' || style.position === 'fixed') return false;
-      if (el.offsetHeight === 0) return false;
-      return true;
-    };
+      let currentPageHeight = 0; // Track height accumulated on current page
+      const sectionGap = 24; // Gap between sections
 
-    const traverse = (parent) => {
-      Array.from(parent.children).forEach((child) => {
-        if (shouldInclude(child)) {
-          elements.push(child);
-          traverse(child);
-        }
-      });
-    };
+      keys.forEach((k, i) => {
+        const { height, ref } = sectionsConfig[k];
+        const isFirstSection = i === 0;
+        const isLastSection = i === keys.length - 1;
 
-    traverse(section);
-    return elements;
-  }, []);
-
-  const paginateContent = useCallback(() => {
-    const sections = sectionsRef.current.filter(Boolean);
-    if (sections.length === 0) return;
-
-    resetPaginationStyles(sections);
+        // First section on first page needs header space
+        if (isFirstSection) {
+          ref.current.style.marginTop = `${HEADER_HEIGHT}px`;
+          currentPageHeight = 0; // Content height tracking starts fresh
+        }
 
-    // Force layout recalc
-    sections.forEach(s => s.offsetHeight);
+        // Check if this section would exceed the page content limit
+        const willExceedPageLimit = currentPageHeight + height > CONTENT_HEIGHT_PER_PAGE;
 
-    let currentPage = 1;
-    let currentPageHeight = 0;
-    const breaks = [];
+        if (willExceedPageLimit && !isFirstSection) {
+          // Need to break to a new page
+          _page += 1;
+          _pages.push(_page);
 
-    sections.forEach((section, sectionIndex) => {
-      // Measure height after reset
-      const sectionHeight = section.offsetHeight;
-      const isFirstOnPage = currentPageHeight === 0;
-      const gapBefore = isFirstOnPage ? 0 : SECTION_GAP;
-      
-      if (currentPageHeight + gapBefore + sectionHeight <= CONTENT_HEIGHT) {
-        // Fits in current page
-        section.setAttribute('data-pdf-page', currentPage.toString());
-        
-        if (isFirstOnPage) {
-          // First item on page
-          if (currentPage === 1) {
-            // Very first section on first page - needs to be below header
-            section.style.marginTop = '0px'; // Container padding handles this
-          } else {
-            // First section on subsequent pages - no margin (container padding handles it)
-            section.style.marginTop = '0px';
-          }
-        } else {
-          // Not first item on page - add gap
-          section.style.marginTop = `${SECTION_GAP}px`;
-        }
-        currentPageHeight += gapBefore + sectionHeight;
-      } else {
-        // Doesn't fit - need to move to next page
-        const remainingSpace = CONTENT_HEIGHT - currentPageHeight;
-        
-        // Calculate margin needed to push this section to the next page
-        // remainingSpace = space left on current page
-        // Then we need to skip: footer margin + footer + header margin + header
-        const pushMargin = remainingSpace + PAGE_MARGIN_BOTTOM + FOOTER_HEIGHT + PAGE_MARGIN_TOP + HEADER_HEIGHT;
-        
-        // Move entire section to next page
-        currentPage += 1;
-        breaks.push({ section, type: 'section', page: currentPage });
-        section.setAttribute('data-pdf-page', currentPage.toString());
-        section.style.pageBreakBefore = 'always';
-        section.style.breakBefore = 'page';
-        section.style.marginTop = `${pushMargin}px`;
-        
-        // Start fresh height counter for new page
-        currentPageHeight = sectionHeight;
-        
-        // Check if section is too tall and needs internal breaks
-        if (sectionHeight > CONTENT_HEIGHT) {
-          // Try to break within section
-          const innerElements = getAllBreakableElements(section);
-          let pageHeightInSection = 0;
-          let sectionPage = currentPage;
+          // Calculate remaining space on current page
+          const remainingSpace = PAGE_HEIGHT - currentPageHeight - HEADER_HEIGHT - FOOTER_HEIGHT;
           
-          for (const el of innerElements) {
-            const rect = el.getBoundingClientRect();
-            const sectionRect = section.getBoundingClientRect();
-            const relativeTop = rect.top - sectionRect.top;
-            const elHeight = rect.height;
-            
-            // Check if this element would exceed the page
-            if (pageHeightInSection + elHeight > CONTENT_HEIGHT && relativeTop > 50) {
-              // Calculate remaining space on this page within the section
-              const remainingInSection = CONTENT_HEIGHT - pageHeightInSection;
-              const pushMarginInner = remainingInSection + PAGE_MARGIN_BOTTOM + FOOTER_HEIGHT + PAGE_MARGIN_TOP + HEADER_HEIGHT;
-              
-              sectionPage += 1;
-              breaks.push({ element: el, type: 'inner', page: sectionPage });
-              el.setAttribute('data-pdf-page', sectionPage.toString());
-              el.style.pageBreakBefore = 'always';
-              el.style.breakBefore = 'page';
-              el.style.marginTop = `${pushMarginInner}px`;
-              
-              // Reset page height for new page within section
-              pageHeightInSection = elHeight;
-            } else {
-              pageHeightInSection += elHeight;
-            }
+          // Add margin to previous section to push current section to next page
+          if (sectionsConfig[keys[i - 1]]) {
+            const { ref: prevRef } = sectionsConfig[keys[i - 1]];
+            prevRef.current.style.marginBottom = `${remainingSpace}px`;
           }
+
+          // Position this section at the top of the new page
+          ref.current.style.marginTop = `${HEADER_HEIGHT + PAGE_TOP_MARGIN}px`;
           
-          // Update current page if we created additional pages
-          if (sectionPage > currentPage) {
-            currentPage = sectionPage;
-            currentPageHeight = pageHeightInSection;
-          }
+          // Reset page height counter for new page
+          currentPageHeight = height + sectionGap;
+        } else {
+          // Section fits on current page
+          currentPageHeight += height + sectionGap;
         }
-      }
-    });
 
-    setPages(Array.from({ length: currentPage }, (_, idx) => idx + 1));
-  }, [getAllBreakableElements, resetPaginationStyles]);
+        // Add padding to last section
+        if (isLastSection) {
+          ref.current.style.paddingBottom = `${PAGE_TOP_MARGIN}px`;
+        }
+      });
 
-  useLayoutEffect(() => {
-    // Use requestAnimationFrame to ensure DOM is painted
-    const rafId = requestAnimationFrame(() => {
-      paginateContent();
-    });
-    
-    return () => cancelAnimationFrame(rafId);
-  }, [paginateContent, config]);
+      setPages(_pages);
+    }
+  }, [sectionsConfig, config.length]);
 
   useEffect(() => {
-    const sections = sectionsRef.current.filter(Boolean);
-    if (sections.length === 0) return undefined;
-
-    const observer = new ResizeObserver(() => {
-      paginateContent();
-    });
+    doSizing();
+  }, [doSizing]);
 
-    sections.forEach(section => observer.observe(section));
-
-    return () => observer.disconnect();
-  }, [paginateContent, config.length]);
+  const onChangeHeight = useCallback((index, conf) => {
+    setSectionsConfig((prev) => ({ ...prev, [index]: conf }))
+  }, []);
 
   const contClassName = formatClassname(['daf-analysis daf-pdf-view', customClassName]);
 
-  return (
-    <div className={contClassName} style={{ position: 'relative', minHeight: `${PAGE_HEIGHT}px` }}>
+  const renderDashboard = useCallback(() => {
+    return (
       <div className="view-content">
         <div className="daf-analysis-layout">
-          <div
-            className='sections-cont'
-            ref={contentRef}
-            data-pdf-content-root="true"
-            style={{
-              marginTop: `${HEADER_HEIGHT + PAGE_MARGIN_TOP}px`,
-              // paddingBottom: `${FOOTER_HEIGHT + PAGE_MARGIN_BOTTOM}px !important`,
-              position: 'relative',
-            }}
-          >
-            {config.map((widgets, index) => (
-              <section
-                key={`dashboard-section-${index + 1}`}
-                ref={(el) => {
-                  sectionsRef.current[index] = el;
-                }}
-                style={widgets.style}
-                data-pdf-section="true"
-              >
-                {typeof widgets.render === 'function' ? widgets.render() : null}
-              </section>
+          <div className='sections-cont'>
+            {config.map((widgets, i) => (
+              <Row
+                widgets={widgets}
+                key={`dashboard-sections=${i + 1}`}
+                i={i}
+                onChangeHeight={onChangeHeight}
+              />
             ))}
           </div>
         </div>
       </div>
+    );
+  }, [config, onChangeHeight]);
+
+  // <div className="daf-analysis">
+  // <Header title={t('Dashboard Title')} />
+
+  // <div className="content">
+  //   <div className="view-content">
+  //     <div className="daf-analysis-layout">
+  //       <div className='sections-cont w-pt'>
+  //         <section>
+
+  return (
+    <div className={contClassName} style={{ position: 'relative' }}>
+      {renderDashboard()}
       {pages.map((page) => (
-        <Fragment key={`pdf-decor-${page}`}>
+        <>
           <div
-            style={{ 
-              top: ((page - 1) * PAGE_HEIGHT) + PAGE_MARGIN_TOP, 
-              width: '100%', 
-              height: HEADER_HEIGHT, 
-              position: 'absolute', 
-              left: 0, 
-              zIndex: 1000000,
-              pointerEvents: 'none'
-            }}
+            style={{ top: ((page - 1) * PAGE_HEIGHT), width: '100%', height: HEADER_HEIGHT - 24, position: 'absolute', left: 0, zIndex: 1000000 }}
+            key={`headers-${page}`}
             className="flex-row dashboard-header"
           >
             <div className="flex flex-column justify-center flex-1">
@@ -251,15 +172,8 @@ export default function PdfView({
             </div>
           </div>
           <div
-            style={{ 
-              top: (page * PAGE_HEIGHT) - FOOTER_HEIGHT - PAGE_MARGIN_BOTTOM, 
-              width: '100%', 
-              height: FOOTER_HEIGHT, 
-              position: 'absolute', 
-              left: 0, 
-              zIndex: 1000000,
-              pointerEvents: 'none'
-            }}
+            style={{ top: (page * PAGE_HEIGHT) - FOOTER_HEIGHT, width: '100%', height: FOOTER_HEIGHT, position: 'absolute', left: 0, zIndex: 1000000 }}
+            key={`footers-${page}`}
             className="dashboard-footer flex-row"
           >
             <div className="flex flex-column justify-center">
@@ -293,7 +207,7 @@ export default function PdfView({
               <h5>{page}</h5>
             </div>
           </div>
-        </Fragment>
+        </>
       ))}
     </div>
   );

package/src/@daf/core/components/Icon/configs/Straatos.js

@@ -0,0 +1,16 @@
+const config = {
+    viewBox: "0 0 11 10",
+    children: (
+        <>
+            <path d="M4.55036 5.13086H3.04412C2.90368 6.64626 1.90846 7.86667 0.666504 8.04569V10C1.1941 9.95303 1.70415 9.78769 2.1747 9.51827V7.7727L2.28734 7.76259C3.45566 7.65494 4.40651 6.53623 4.55036 5.13086Z" fill="#016C6E" />
+            <path d="M5.87407 1.32153C6.21589 0.903428 6.605 0.560262 7.02679 0.296791V0.000610352C5.995 0.09339 5.02903 0.633415 4.29468 1.53147C3.55985 2.43013 3.12002 3.61069 3.04736 4.86976H4.55653C4.62968 3.531 5.09388 2.2755 5.87407 1.32153Z" fill="#016C6E" />
+            <path d="M6.34668 5.64589C6.37058 5.47579 6.38813 5.30391 6.39789 5.13025H4.79607C4.78144 5.28845 4.75706 5.44368 4.72439 5.59474C4.65807 5.90044 4.55714 6.18948 4.42597 6.45533C4.00174 7.31355 3.26788 7.92315 2.41846 8.04567V9.99999C2.99677 9.94825 3.55411 9.75555 4.06172 9.43856V7.77269L4.17436 7.76257C4.17436 7.76257 4.17485 7.76257 4.17533 7.76257C5.1964 7.66801 6.05119 6.80147 6.3462 5.64648L6.34668 5.64589Z" fill="#016C6E" />
+            <path d="M7.14889 0.554894C7.10793 0.580468 7.06746 0.607231 7.02699 0.633995C6.67054 0.872486 6.33994 1.17343 6.04688 1.53146C5.57779 2.10539 5.22964 2.7941 5.01947 3.54526C4.93902 3.83252 4.87904 4.1287 4.84052 4.43142C4.82199 4.57654 4.80785 4.72284 4.79956 4.87034H6.40138C6.4199 4.6711 6.45355 4.47662 6.50036 4.28928C6.60471 3.55715 6.82804 2.8613 7.15718 2.23861C7.19375 2.16902 7.23178 2.10122 7.27079 2.03342C7.41708 1.78185 7.58043 1.54335 7.76182 1.32152C8.06658 0.948613 8.40938 0.633994 8.77948 0.383608V0C8.25188 0.0469846 7.74183 0.212323 7.27128 0.481741C7.23032 0.504936 7.18985 0.52932 7.14938 0.5543L7.14889 0.554894Z" fill="#016C6E" />
+            <path d="M6.58478 5.71192C6.517 5.98431 6.42094 6.24184 6.30099 6.47973C6.21809 6.64388 6.12447 6.79852 6.02012 6.94244C5.58809 7.53956 4.98394 7.94756 4.30615 8.04569V10C5.33795 9.90723 6.30391 9.3672 7.03826 8.46914C7.7731 7.57049 8.21293 6.38993 8.28558 5.13086H6.68376C6.66524 5.3301 6.63159 5.52458 6.58478 5.71192Z" fill="#016C6E" />
+            <path d="M9.02269 0.562626C8.98173 0.5882 8.94126 0.615558 8.90078 0.642916C8.85982 0.670869 8.81935 0.699417 8.77888 0.728559C8.47412 0.950992 8.18984 1.21922 7.93384 1.53206C7.56813 1.9793 7.27556 2.49673 7.06491 3.05876C7.00299 3.2235 6.94935 3.39241 6.90156 3.56429C6.83037 3.82121 6.77576 4.08588 6.73821 4.35529C6.71432 4.52539 6.69676 4.69727 6.68701 4.87034H8.28883C8.42926 3.35494 9.42448 2.13453 10.6664 1.95551V0.00119019C10.0881 0.0529327 9.53078 0.245629 9.02269 0.562626Z" fill="#016C6E" />
+        </>
+    ),
+    tag: ["logo"],
+};
+
+export default config;

package/src/@daf/core/components/Icon/configs/index.js

@@ -209,6 +209,7 @@ import Hedera01 from "./Hedera01";
 import Records from "./Records";
 import Lightning from "./Lightning";
 import MagicWand from "./MagicWant";
+import Straatos from "./Straatos";
 
 const config = {
 	Right,
@@ -422,6 +423,7 @@ const config = {
 	Records,
 	Lightning,
 	MagicWand,
+	Straatos,
 };
 
 export default config;