Made dashboard more printable

onyx-initiative · Sep 3, 2024 · f1c9234 · f1c9234
1 parent b54292c
commit f1c9234
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 12 deletions.
diff --git a/frontend/pages/Dashboard.tsx b/frontend/pages/Dashboard.tsx
@@ -241,7 +241,9 @@ export default function Dashboard() {
 
   return (
     <>
-      <Navbar />
+      <div className={styles.noPrint}>
+        <Navbar />
+      </div>
       <main className={styles.wrapper}>
         {pageError ? <DashboardErrorMessage message={pageError.message} /> : DashboardContent}
       </main>

diff --git a/frontend/src/components/admin/DashboardClickChart.tsx b/frontend/src/components/admin/DashboardClickChart.tsx
@@ -1,6 +1,7 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import styles from '../../../styles/components/DashboardClickChart.module.css'
 import Chart from 'react-google-charts'
+import Image from 'next/image'
 
 type ClickChartProps = {
   data: [
@@ -62,16 +63,39 @@ export default function DashboardClickChart({ data, interval, type }: ClickChart
     axisTitlesPosition: 'none',
   }
 
+  // Get chart PNG for printing
+  const [chartWrapper, setChartWrapper] = useState<any>(null)
+  const [chartImageURI, setChartImageURI] = useState('')
+  useEffect(() => {
+    if (chartWrapper !== null) {
+      setChartImageURI(chartWrapper.getChart().getImageURI())
+    }
+  }, [chartWrapper])
+
   return (
-    <div className={styles.chart}>
-      <div className={styles.chartTitle}>{title}</div>
-      {data.length ? (
-        <div className={styles.googleChartContainer}>
-          <Chart chartType='AreaChart' width='100%' height='100%' data={clickCounts} options={chartOptions} />
-        </div>
-      ) : (
-        <div className={styles.noDataMessage}>No data</div>
-      )}
-    </div>
+    <>
+      <div className={styles.chart}>
+        <div className={styles.chartTitle}>{title}</div>
+        {data.length ? (
+          <>
+            <div className={styles.googleChartContainer}>
+              <Chart
+                chartType='AreaChart'
+                width='100%'
+                height='100%'
+                data={clickCounts}
+                options={chartOptions}
+                getChartWrapper={(wrapper) => setChartWrapper(wrapper)}
+              />
+            </div>
+            <div className={styles.chartImageContainer}>
+              <Image src={chartImageURI} alt={`${title} Chart`} layout='fill' />
+            </div>
+          </>
+        ) : (
+          <div className={styles.noDataMessage}>No data</div>
+        )}
+      </div>
+    </>
   )
 }
diff --git a/frontend/styles/Dashboard.module.css b/frontend/styles/Dashboard.module.css
@@ -53,3 +53,10 @@
     align-items: end;
   }
 }
+
+@media print {
+  .noPrint,
+  .dateLimitsForm {
+    display: none;
+  }
+}
diff --git a/frontend/styles/components/DashboardClickChart.module.css b/frontend/styles/components/DashboardClickChart.module.css
@@ -6,6 +6,7 @@
   padding: 2rem 2rem 1rem;
   border: #333 1px solid;
   border-radius: 1rem;
+  break-inside: avoid;
 }
 
 .chartTitle {
@@ -35,3 +36,20 @@
   padding-bottom: 1rem;
   font-style: italic;
 }
+
+.chartImageContainer {
+  display: none;
+  position: relative;
+  width: 100%;
+  height: 300px;
+}
+
+@media print {
+  .googleChartContainer {
+    display: none;
+  }
+
+  .chartImageContainer {
+    display: block;
+  }
+}
diff --git a/frontend/styles/components/DashboardTwoItemTable.module.css b/frontend/styles/components/DashboardTwoItemTable.module.css
@@ -2,6 +2,7 @@
   overflow-x: auto;
   display: flex;
   align-items: stretch;
+  break-inside: avoid;
 }
 
 .dataTable table {