improved report pdf for synthetic data

Author: devhelpr

src/components/graphs/CountBarChart.tsx

@@ -112,7 +112,9 @@ const CountBarChart = ({ column, realData }: CountBarChartProps) => {
         const resizeObserver = new ResizeObserver(entries => {
             if (!entries || entries.length === 0) return;
             const { width } = entries[0].contentRect;
-            setContainerWidth(width);
+            if (width > 0) {
+                setContainerWidth(width);
+            }
         });
 
         if (containerRef.current) {
@@ -130,7 +132,7 @@ const CountBarChart = ({ column, realData }: CountBarChartProps) => {
         <div
             ref={containerRef}
             style={{ width: '100%', display: 'flex', overflowX: 'auto' }}
-            className={`min-h-[${height}px] flex-col`}
+            className={`chart-container min-h-[${height}px] flex-col`}
         >
             <svg ref={svgRef}></svg>
         </div>

src/components/graphs/DistributionBarChart.tsx

@@ -214,7 +214,10 @@ const DistributionBarChart = ({
         const resizeObserver = new ResizeObserver(entries => {
             if (!entries || entries.length === 0) return;
             const { width } = entries[0].contentRect;
-            setContainerWidth(width);
+
+            if (width > 0) {
+                setContainerWidth(width);
+            }
         });
 
         if (containerRef.current) {
@@ -232,7 +235,7 @@ const DistributionBarChart = ({
         <div
             ref={containerRef}
             style={{ width: '100%', display: 'flex', overflowX: 'auto' }}
-            className={`min-h-[${height}px] flex-col`}
+            className={`chart-container min-h-[${height}px] flex-col`}
         >
             <svg ref={svgRef}></svg>
         </div>

src/components/graphs/HeatMap.tsx

@@ -168,7 +168,9 @@ const HeatMapChart = ({ title, data, columns }: HeatMapChartProps) => {
         const resizeObserver = new ResizeObserver(entries => {
             if (!entries || entries.length === 0) return;
             const { width } = entries[0].contentRect;
-            setContainerWidth(width); // Update the state with the new container width
+            if (width > 0) {
+                setContainerWidth(width);
+            }
         });
 
         if (containerRef.current) {

src/components/graphs/SingleBarChart.tsx

@@ -201,7 +201,7 @@ const SingleBarChart = ({ title, data }: SingleBarChartProps) => {
         <div
             ref={containerRef}
             style={{ width: '100%', display: 'flex', overflowX: 'auto' }}
-            className={`min-h-[${height}px] flex-col`}
+            className={`chart-container min-h-[${height}px] flex-col`}
         >
             <svg ref={svgRef}></svg>
         </div>

src/index.css

@@ -12,3 +12,8 @@
         @apply list-disc list-inside;
     }
 }
+
+.showonprint .chart-container {
+    @apply min-w-[800px];
+    width: 800px !important;
+}

src/routes/SyntheticData.tsx

@@ -33,6 +33,10 @@ const PAGE_STYLE = `
             display: none !important; 
         }
 
+        .showonprint {
+            display: block !important;
+        }
+
         @page { 
             size: landscape; 
             margin: 30px 20px;