diff --git a/site/source/components/charts/PagesCharts.tsx b/site/source/components/charts/PagesCharts.tsx index 4304cc9c6..d836f446a 100644 --- a/site/source/components/charts/PagesCharts.tsx +++ b/site/source/components/charts/PagesCharts.tsx @@ -1,6 +1,6 @@ import { formatValue } from 'publicodes' import { ComponentProps, ReactElement } from 'react' -import { useTranslation } from 'react-i18next' +import { Trans, useTranslation } from 'react-i18next' import { Bar, ComposedChart, @@ -18,6 +18,8 @@ import { Body } from '@/design-system/typography/paragraphs' import { useDarkMode } from '@/hooks/useDarkMode' import { RealResponsiveContainer } from '@/pages/statistiques/Chart' +import FoldingMessage from '../ui/FoldingMessage' + type Data = | Array<{ date: string; nombre: number }> | Array<{ date: string; nombre: Record }> @@ -57,6 +59,7 @@ export default function PagesChart({ data, sync = true }: PagesChartProps) { const ComposedChartWithRole = ( props: ComponentProps | { role: string } ): ReactElement => + console.log(flattenedData) return ( @@ -73,7 +76,9 @@ export default function PagesChart({ data, sync = true }: PagesChartProps) { layout="horizontal" data={flattenedData} syncId={sync ? '1' : undefined} - aria-label={t('Graphique des principaux simulateurs')} + aria-label={t( + 'Graphique des principaux simulateurs, présence d’une alternative accessible après l’image' + )} role="img" > @@ -108,10 +113,63 @@ export default function PagesChart({ data, sync = true }: PagesChartProps) { ))} + ) } +const AccessibleVersion = ({ data }: PagesChartProps) => { + const { t } = useTranslation() + + return ( + + + + + + + {/* Dynamically add the page keys as th */} + {Object.keys(data[0].nombre).map((key) => ( + + ))} + + + + {data.map((item) => { + const date = new Date(item.date) + const year = date.getFullYear() + const month = date.getMonth() + 1 + + return ( + + + {Object.entries(item.nombre).map(([key, value]) => { + return ( + + ) + })} + + ) + })} + +
+ + Tableau présentant le nombre de visites par page et par mois. + +
+ Date + + {key} +
{`${ + String(month).length === 1 ? `0${month}` : month + }/${year}`}{value ?? 0}
+ + ) +} + function formatMonth(date: string | Date) { return new Date(date).toLocaleString('default', { month: 'short', diff --git a/site/source/pages/statistiques/Chart.tsx b/site/source/pages/statistiques/Chart.tsx index c2fdfbbc7..92267622c 100644 --- a/site/source/pages/statistiques/Chart.tsx +++ b/site/source/pages/statistiques/Chart.tsx @@ -118,7 +118,7 @@ export default function VisitsChart({ data={flattenData} syncId={sync ? '1' : undefined} aria-label={t( - 'Graphique statistiques détaillés du nombre visites par jour' + 'Graphique statistiques détaillés du nombre visites par jour, présence d’une alternative accessible après l’image' )} role="img" > diff --git a/site/source/pages/statistiques/SatisfactionChart.tsx b/site/source/pages/statistiques/SatisfactionChart.tsx index 3600427fc..38f6d4dcd 100644 --- a/site/source/pages/statistiques/SatisfactionChart.tsx +++ b/site/source/pages/statistiques/SatisfactionChart.tsx @@ -10,6 +10,7 @@ import { } from 'recharts' import { StyledLegend } from '@/components/charts/PagesCharts' +import FoldingMessage from '@/components/ui/FoldingMessage' import { Radio, ToggleGroup } from '@/design-system' import { Emoji } from '@/design-system/emoji' import { Spacing } from '@/design-system/layout' @@ -46,6 +47,7 @@ type SatisfactionChartProps = { data: Array<{ date: string nombre: Record + percent: Record }> } @@ -96,7 +98,9 @@ export default function SatisfactionChart({ data }: SatisfactionChartProps) { + ) } +const AccessibleVersion = ({ + data, + dataType, +}: SatisfactionChartProps & { dataType: string }) => { + const { t } = useTranslation() + + const dataKey = dataType === 'pourcentage' ? 'percent' : 'nombre' + + return ( + + + + + + + + + + + + + + {data.map((item) => { + const date = new Date(item.date) + const year = date.getFullYear() + const month = date.getMonth() + 1 + + return ( + + + + + + + + ) + })} + +
+ + Tableau présentant le nombre de visites par page et par mois en{' '} + {dataType === 'pourcentage' ? 'pourcentage' : 'nombres'}. + +
+ Date + + Très bien + + Bien + + Moyen + + Mauvais +
{`${ + String(month).length === 1 ? `0${month}` : month + }/${year}`}{item[dataKey]['très bien'] ?? 0}{item[dataKey].bien ?? 0}{item[dataKey].moyen ?? 0}{item[dataKey].mauvais ?? 0}
+ + ) +} + const ChangeJanuary2022 = () => { return ( diff --git a/site/source/pages/statistiques/Stats.tsx b/site/source/pages/statistiques/Stats.tsx index 80d88e0f2..8d83804ac 100644 --- a/site/source/pages/statistiques/Stats.tsx +++ b/site/source/pages/statistiques/Stats.tsx @@ -1,12 +1,13 @@ import { formatValue } from 'publicodes' import { useCallback, useEffect, useMemo, useState } from 'react' -import { Trans } from 'react-i18next' +import { Trans, useTranslation } from 'react-i18next' import { useSearchParams } from 'react-router-dom' import { BrushProps } from 'recharts' import styled from 'styled-components' import { toAtString } from '@/components/ATInternetTracking' import PagesChart from '@/components/charts/PagesCharts' +import FoldingMessage from '@/components/ui/FoldingMessage' import { useScrollToHash } from '@/components/utils/markdown' import { Message } from '@/design-system' import InfoBulle from '@/design-system/InfoBulle' @@ -191,6 +192,8 @@ const StatsDetail = ({ stats }: StatsDetailProps) => { (searchParams.get('module') as Chapter2) ?? '' ) + const { t } = useTranslation() + useEffect(() => { const paramsEntries = [ ['periode', period !== defaultPeriod ? period : ''], @@ -229,7 +232,11 @@ const StatsDetail = ({ stats }: StatsDetailProps) => { const satisfaction = useMemo(() => { return filterByChapter2(stats.satisfaction as Pageish[], chapter2) - }, [chapter2]) + }, [chapter2]) as Array<{ + date: string + nombre: Record + percent: Record + }> const [[startDateIndex, endDateIndex], setDateIndex] = useState< [startIndex: number, endIndex: number] @@ -333,14 +340,58 @@ const StatsDetail = ({ stats }: StatsDetailProps) => {

Visites

{visites.length ? ( - + <> + + + + + + + + + + + + {visites.map((visite) => { + const visiteDateParts = visite.date.split('-') + + return ( + + + + + ) + })} + +
+ + Tableau présentant le nombre de visites sur le site + mon-entreprise par mois ou par jours. + +
+ {period} + + Nombre de visites +
+ {period === 'mois' + ? `${visiteDateParts[1]}-${visiteDateParts[2]}` + : visite.date} + {visite.nombre}
+ + ) : ( Aucune donnée disponible. )}