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)} + /> +
+
+ {`${title} +
+ + ) : ( +
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 {