betagouv
/
mon-entreprise
mirror of https://github.com/betagouv/mon-entreprise
1
0
Fork 0
Code Releases Activity

Hack to resize charts for googlebot

pull/2235/head v1.23.0
Jérémy Rialland 2022-07-26 18:01:17 +02:00 committed by Jérémy Rialland
parent 200f763df4
commit 410d6e0960
3 changed files with 35 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
site/source/components/charts/PagesCharts.tsx
View File

@ -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>
)
}

31
site/source/pages/Stats/Chart.tsx
View File

@ -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',

14
site/source/pages/Stats/SatisfactionChart.tsx
View File

@ -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>
)
}