Hack to resize charts for googlebot

betagouv · Jul 27, 2022 · 410d6e0 · 410d6e0
1 parent 200f763
commit 410d6e0
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 16 deletions.
diff --git a/site/source/components/charts/PagesCharts.tsx b/site/source/components/charts/PagesCharts.tsx
@@ -1,12 +1,12 @@
 import { Strong } from '@/design-system/typography'
 import { Li, Ul } from '@/design-system/typography/list'
 import { Body } from '@/design-system/typography/paragraphs'
+import { RealResponsiveContainer } from '@/pages/Stats/Chart'
 import { formatValue } from 'publicodes'
 import {
 	Bar,
 	ComposedChart,
 	Legend,
-	ResponsiveContainer,
 	Tooltip,
 	TooltipProps,
 	XAxis,
@@ -49,7 +49,7 @@ export default function PagesChart({ data, sync = true }: PagesChartProps) {
 
 	return (
 		<Body as="div">
-			<ResponsiveContainer
+			<RealResponsiveContainer
 				width="100%"
 				height={500}
 				css={`
@@ -92,7 +92,7 @@ export default function PagesChart({ data, sync = true }: PagesChartProps) {
 						/>
 					))}
 				</ComposedChart>
-			</ResponsiveContainer>
+			</RealResponsiveContainer>
 		</Body>
 	)
 }

diff --git a/site/source/pages/Stats/Chart.tsx b/site/source/pages/Stats/Chart.tsx
@@ -3,7 +3,7 @@ import { Strong } from '@/design-system/typography'
 import { Li, Ul } from '@/design-system/typography/list'
 import { Body } from '@/design-system/typography/paragraphs'
 import { formatValue } from 'publicodes'
-import { useContext } from 'react'
+import { ComponentProps, useContext } from 'react'
 import {
 	Area,
 	Bar,
@@ -103,7 +103,7 @@ export default function VisitsChart({
 				}
 			`}
 		>
-			<ResponsiveContainer width="100%" height={500}>
+			<RealResponsiveContainer width="100%" height={500}>
 				<ComposedChart
 					layout={layout}
 					data={flattenData}
@@ -175,11 +175,36 @@ export default function VisitsChart({
 						)
 					)}
 				</ComposedChart>
-			</ResponsiveContainer>
+			</RealResponsiveContainer>
 		</Body>
 	)
 }
 
+export const RealResponsiveContainer = (
+	props: ComponentProps<typeof ResponsiveContainer>
+) => (
+	<div
+		style={{
+			width: props.width,
+			height: props.height,
+			overflow: 'hidden',
+			position: 'relative',
+		}}
+	>
+		<div
+			style={{
+				width: '100%',
+				height: '100%',
+				position: 'absolute',
+				top: 0,
+				left: 0,
+			}}
+		>
+			<ResponsiveContainer {...props} width="100%" height="100%" />
+		</div>
+	</div>
+)
+
 function formatDay(date: string | Date) {
 	return new Date(date).toLocaleString('default', {
 		day: '2-digit',

diff --git a/site/source/pages/Stats/SatisfactionChart.tsx b/site/source/pages/Stats/SatisfactionChart.tsx
@@ -3,14 +3,8 @@ import Emoji from '@/components/utils/Emoji'
 import { Strong } from '@/design-system/typography'
 import { Li, Ul } from '@/design-system/typography/list'
 import { Body } from '@/design-system/typography/paragraphs'
-import {
-	Bar,
-	BarChart,
-	LabelList,
-	ResponsiveContainer,
-	Tooltip,
-	XAxis,
-} from 'recharts'
+import { Bar, BarChart, LabelList, Tooltip, XAxis } from 'recharts'
+import { RealResponsiveContainer } from './Chart'
 import { SatisfactionLevel } from './types'
 
 export const SatisfactionStyle: [
@@ -51,7 +45,7 @@ export default function SatisfactionChart({ data }: SatisfactionChartProps) {
 
 	return (
 		<Body as="div">
-			<ResponsiveContainer width="100%" height={400}>
+			<RealResponsiveContainer width="100%" height={400}>
 				<BarChart data={flattenData}>
 					<XAxis
 						dataKey="date"
@@ -78,7 +72,7 @@ export default function SatisfactionChart({ data }: SatisfactionChartProps) {
 						</Bar>
 					))}
 				</BarChart>
-			</ResponsiveContainer>
+			</RealResponsiveContainer>
 		</Body>
 	)
 }