From 200f763df46e83ca37a40fd6c03d0a10b4128b1a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Rialland?= Date: Tue, 26 Jul 2022 17:14:13 +0200 Subject: [PATCH] Fix css sur la page stats --- site/source/components/charts/PagesCharts.tsx | 78 +++++++++++-------- site/source/pages/Budget/Budget.tsx | 5 +- site/source/pages/Stats/Chart.tsx | 17 ++-- .../pages/Stats/DemandesUtilisateurs.tsx | 1 + site/source/pages/Stats/GlobalStats.tsx | 4 +- site/source/pages/Stats/SatisfactionChart.tsx | 47 +++++++---- site/source/pages/Stats/Stats.tsx | 21 ++--- 7 files changed, 103 insertions(+), 70 deletions(-) diff --git a/site/source/components/charts/PagesCharts.tsx b/site/source/components/charts/PagesCharts.tsx index 80a37f7eb..58ee84cb4 100644 --- a/site/source/components/charts/PagesCharts.tsx +++ b/site/source/components/charts/PagesCharts.tsx @@ -48,42 +48,52 @@ export default function PagesChart({ data, sync = true }: PagesChartProps) { const flattenedData = (data as any).map((d: any) => ({ ...d, ...d.nombre })) return ( - - + - - - - formatValue(x)} - domain={['0', 'auto']} - type="number" - /> - - } /> - - {dataKeys.map((k, i) => ( - + + - ))} - - + + formatValue(x)} + domain={['0', 'auto']} + type="number" + /> + + } /> + + {dataKeys.map((k, i) => ( + + ))} + + + ) } diff --git a/site/source/pages/Budget/Budget.tsx b/site/source/pages/Budget/Budget.tsx index 055200156..95d5da315 100644 --- a/site/source/pages/Budget/Budget.tsx +++ b/site/source/pages/Budget/Budget.tsx @@ -13,6 +13,7 @@ import { TrackPage } from '../../ATInternetTracking' import Meta from '../../components/utils/Meta' import prose from './budget.md?raw' import budget from './budget.yaml' +import { Body } from '@/design-system/typography/paragraphs' // Splitting the markdown file to insert React components in-between is a bit // arcane, we may consider MDX in the future https://github.com/mdx-js/mdx. @@ -80,7 +81,9 @@ export default function Budget() { - {ressources[selectedYear]} + + {ressources[selectedYear]} + {selectedYear !== '2019' && ( <>
({ ...d, ...d.nombre })) : data - const AxeA = layout === 'horizontal' ? XAxis : YAxis - const AxeB = layout === 'horizontal' ? YAxis : XAxis - function getColor(i: number): string { if (!colored) { return [ @@ -98,7 +95,8 @@ export default function VisitsChart({ } return ( -
} - - formatValue(val) as string} type="number" @@ -173,7 +176,7 @@ export default function VisitsChart({ )} -
+ ) } diff --git a/site/source/pages/Stats/DemandesUtilisateurs.tsx b/site/source/pages/Stats/DemandesUtilisateurs.tsx index a31c86b6b..9530ff744 100644 --- a/site/source/pages/Stats/DemandesUtilisateurs.tsx +++ b/site/source/pages/Stats/DemandesUtilisateurs.tsx @@ -92,6 +92,7 @@ type PagerButtonProps = { } const PagerButton = styled.button` + font-family: ${({ theme }) => theme.fonts.main}; padding: 0.375rem 0.5rem; border: 1px solid ${({ theme, currentPage }) => diff --git a/site/source/pages/Stats/GlobalStats.tsx b/site/source/pages/Stats/GlobalStats.tsx index ab834435f..7b0194dce 100644 --- a/site/source/pages/Stats/GlobalStats.tsx +++ b/site/source/pages/Stats/GlobalStats.tsx @@ -163,7 +163,7 @@ export default function GlobalStats({ stats }: { stats: StatsStruct }) { /> {currentMonthSatisfaction.total > 0 && ( - + )} + + Object.values(d.nombre).reduce((a, b) => a + b, 0)) return ( - - - - - {SatisfactionStyle.map(([level, { emoji, color }]) => ( - - emoji} position="left" /> - - ))} - - + + + + + + {SatisfactionStyle.map(([level, { emoji, color }]) => ( + + emoji} + position="left" + /> + + ))} + + + ) } diff --git a/site/source/pages/Stats/Stats.tsx b/site/source/pages/Stats/Stats.tsx index 55cc03baf..424f9eee5 100644 --- a/site/source/pages/Stats/Stats.tsx +++ b/site/source/pages/Stats/Stats.tsx @@ -11,6 +11,7 @@ import { formatValue } from 'publicodes' import { useCallback, useEffect, useMemo, useState } from 'react' import { Trans } from 'react-i18next' import { useSearchParams } from 'react-router-dom-v5-compat' +import { BrushProps } from 'recharts' import styled from 'styled-components' import { toAtString } from '../../ATInternetTracking' import { debounce, groupBy } from '../../utils' @@ -168,15 +169,15 @@ const StatsDetail = () => { setSlicedVisits(visites) }, [visites]) + // eslint-disable-next-line react-hooks/exhaustive-deps const handleDateChange = useCallback( - () => - debounce(1000, ({ startIndex, endIndex }: BrushStartEndIndex) => { - if (startIndex && endIndex) { - setDateIndex([startIndex, endIndex]) - setSlicedVisits(visites.slice(startIndex, endIndex + 1)) - } - })(), - [setDateIndex, visites] + debounce(1000, ({ startIndex, endIndex }) => { + if (startIndex != null && endIndex != null) { + setDateIndex([startIndex, endIndex]) + setSlicedVisits(visites.slice(startIndex, endIndex + 1)) + } + }) as NonNullable, + [visites] ) const totals: number | Record = useMemo( @@ -218,8 +219,6 @@ const StatsDetail = () => {
- -

Visites

{ ? ` à ${formatMonth(slicedVisits[slicedVisits.length - 1].date)}` : '')} + { )} + {period === 'mois' && !!satisfaction.length && ( <>

Satisfaction