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

Refacto stats

pull/2573/head
Jérémy Rialland 2023-04-18 10:33:06 +02:00 committed by Jérémy Rialland
parent d1a8720bc6
commit 5b624e3a7b
4 changed files with 66 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
site/source/pages/statistiques/Chart.tsx
View File

@ -277,11 +277,15 @@ const CustomTooltip = ({
)
}
const formatLegend = (key: string) =>
export const formatLegend = (key: string) =>
key === 'accueil'
? 'visites'
: key === 'simulation_commencee'
? 'simulation commencée'
: key === 'simulation_terminee'
? 'simulation terminée'
: key === 'declaration_resultat'
? 'déclaration résultat'
: key === 'declaration_revenu'
? 'déclaration revenu'
: key.replace(/_/g, ' ')

25
site/source/pages/statistiques/LazyStats.tsx
View File

@ -1,4 +1,4 @@
import { Suspense, lazy } from 'react'
import { Suspense, lazy, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { TrackPage } from '@/components/ATInternetTracking'
@ -7,8 +7,11 @@ import PageHeader from '@/components/PageHeader'
import Privacy from '@/components/layout/Footer/Privacy'
import Meta from '@/components/utils/Meta'
import { ScrollToTop } from '@/components/utils/Scroll'
import { Message } from '@/design-system'
import { Emoji } from '@/design-system/emoji'
import { Intro } from '@/design-system/typography/paragraphs'
import { Spacing } from '@/design-system/layout'
import { Switch } from '@/design-system/switch'
import { Body, Intro } from '@/design-system/typography/paragraphs'
import illustrationSvg from './illustration.svg'
@ -16,6 +19,7 @@ const Stats = lazy(() => import('./Stats'))
export default function StatsPage() {
const { t } = useTranslation()
const [accessibleStats, setAccessibleStats] = useState(false)
return (
<>
@ -36,16 +40,29 @@ export default function StatsPage() {
}
picture={illustrationSvg}
>
{' '}
<Intro>
Découvrez nos statistiques d'utilisation mises à jour quotidiennement.
Les données recueillies sont anonymisées.{' '}
<Privacy label="En savoir plus" />
</Intro>
<Message type="info" icon>
<Body>
Cette page contient de nombreux graphiques qui ne sont pas
accessibles pour les lecteurs d'écran, nous avons donc mis en place
un mode d'accessibilité qui les affiche sous forme de tableaux.
</Body>
<Switch
defaultSelected={accessibleStats}
onChange={setAccessibleStats}
>
Activer le mode d'accessibilité sur cette page :
</Switch>
<Spacing sm />
</Message>
</PageHeader>
<Suspense fallback={<Intro>Chargement des statistiques...</Intro>}>
<Stats />
<Stats accessibleStats={accessibleStats} />
</Suspense>
<MoreInfosOnUs />
</>

38
site/source/pages/statistiques/Stats.tsx Normal file
View File

@ -0,0 +1,38 @@
import { Message } from '@/design-system'
import { Body, Intro } from '@/design-system/typography/paragraphs'
import { useFetchData } from '@/hooks/useFetchData'
import DemandeUtilisateurs from './DemandesUtilisateurs'
import { StatsDetail } from './StatsDetail'
import StatsGlobal from './StatsGlobal'
import { StatsStruct } from './types'
interface StatsProps {
accessibleStats: boolean
}
export default function Stats({ accessibleStats }: StatsProps) {
const { data: stats, loading } = useFetchData<StatsStruct>('/data/stats.json')
const statsAvailable = stats?.visitesMois != null
return (
<>
{statsAvailable ? (
<>
<StatsDetail stats={stats} accessibleStats={accessibleStats} />
<StatsGlobal stats={stats} accessibleStats={accessibleStats} />
</>
) : loading ? (
<Intro>Chargement des statistiques...</Intro>
) : (
<Message type="error" icon mini>
<Body>Statistiques indisponibles.</Body>
</Message>
)}
<DemandeUtilisateurs />
</>
)
}

36
site/source/pages/statistiques/StatsDetail.tsx
View File

@ -15,49 +15,17 @@ import { Emoji } from '@/design-system/emoji'
import { Select } from '@/design-system/field/Select'
import { Grid, Spacing } from '@/design-system/layout'
import { H2, H3 } from '@/design-system/typography/heading'
import { Body, Intro } from '@/design-system/typography/paragraphs'
import { useFetchData } from '@/hooks/useFetchData'
import { Body } from '@/design-system/typography/paragraphs'
import useSimulatorsData, { SimulatorData } from '@/hooks/useSimulatorsData'
import { debounce, groupBy } from '@/utils'
import { SimulateurCard } from '../simulateurs-et-assistants'
import Chart, { Data, formatLegend, isDataStacked } from './Chart'
import DemandeUtilisateurs from './DemandesUtilisateurs'
import SatisfactionChart from './SatisfactionChart'
import StatsGlobal, { BigIndicator } from './StatsGlobal'
import { BigIndicator } from './StatsGlobal'
import { Page, PageChapter2, PageSatisfaction, StatsStruct } from './types'
import { formatDay, formatMonth } from './utils'
interface StatsProps {
accessibleStats: boolean
}
export default function Stats({ accessibleStats }: StatsProps) {
const { data: stats, loading } = useFetchData<StatsStruct>('/data/stats.json')
const statsAvailable = stats?.visitesMois != null
return (
<>
{statsAvailable ? (
<>
<StatsDetail stats={stats} accessibleStats={accessibleStats} />
<StatsGlobal stats={stats} accessibleStats={accessibleStats} />
</>
) : loading ? (
<Intro>Chargement des statistiques...</Intro>
) : (
<Message type="error" icon mini>
<Body>Statistiques indisponibles.</Body>
</Message>
)}
<DemandeUtilisateurs />
</>
)
}
type Period = 'mois' | 'jours'
type Chapter2 = PageChapter2 | 'PAM' | 'api-rest'