diff --git a/frontend/pages/Dashboard.tsx b/frontend/pages/Dashboard.tsx
index 0398891..5aa5a64 100644
--- a/frontend/pages/Dashboard.tsx
+++ b/frontend/pages/Dashboard.tsx
@@ -241,7 +241,9 @@ export default function Dashboard() {
return (
<>
-
+
+
+
{pageError ? : DashboardContent}
diff --git a/frontend/src/components/admin/DashboardClickChart.tsx b/frontend/src/components/admin/DashboardClickChart.tsx
index 00dff6f..978577a 100644
--- 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(null)
+ const [chartImageURI, setChartImageURI] = useState('')
+ useEffect(() => {
+ if (chartWrapper !== null) {
+ setChartImageURI(chartWrapper.getChart().getImageURI())
+ }
+ }, [chartWrapper])
+
return (
-
-
{title}
- {data.length ? (
-
-
-
- ) : (
-
No data
- )}
-
+ <>
+
+
{title}
+ {data.length ? (
+ <>
+
+ setChartWrapper(wrapper)}
+ />
+
+
+
+
+ >
+ ) : (
+
No data
+ )}
+
+ >
)
}
diff --git a/frontend/styles/Dashboard.module.css b/frontend/styles/Dashboard.module.css
index 1929157..484b6b8 100644
--- 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
index d6f4f1b..6bca284 100644
--- 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
index fcf5569..cea9139 100644
--- 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 {