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

Fix css sur la page stats

pull/2235/head
Jérémy Rialland 2022-07-26 17:14:13 +02:00 committed by Jérémy Rialland
parent fce268453f
commit 200f763df4
7 changed files with 103 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -48,42 +48,52 @@ export default function PagesChart({ data, sync = true }: PagesChartProps) {
const flattenedData = (data as any).map((d: any) => ({ ...d, ...d.nombre }))
return (
<ResponsiveContainer
width="100%"
height={500}
css={`
svg {
overflow: visible;
}
`}
>
<ComposedChart
layout="horizontal"
data={flattenedData}
syncId={sync ? '1' : undefined}
<Body as="div">
<ResponsiveContainer
width="100%"
height={500}
css={`
svg {
overflow: visible;
}
`}
>
<Legend />
<XAxis dataKey="date" type="category" tickFormatter={formatMonth} />
<YAxis
tickFormatter={(x) => formatValue(x)}
domain={['0', 'auto']}
type="number"
/>
<Tooltip content={<CustomTooltip />} />
{dataKeys.map((k, i) => (
<Bar
key={k}
dataKey={k}
name={formatLegend(k)}
fill={getColor(i)}
stackId={1}
<ComposedChart
layout="horizontal"
data={flattenedData}
syncId={sync ? '1' : undefined}
>
<Legend />
<XAxis
dataKey="date"
type="category"
tickFormatter={formatMonth}
angle={-45}
textAnchor="end"
height={60}
minTickGap={-8}
/>
))}
</ComposedChart>
</ResponsiveContainer>
<YAxis
tickFormatter={(x) => formatValue(x)}
domain={['0', 'auto']}
type="number"
/>
<Tooltip content={<CustomTooltip />} />
{dataKeys.map((k, i) => (
<Bar
key={k}
dataKey={k}
name={formatLegend(k)}
fill={getColor(i)}
stackId={1}
/>
))}
</ComposedChart>
</ResponsiveContainer>
</Body>
)
}

5
site/source/pages/Budget/Budget.tsx
View File

@ -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() {
</Select>
</Grid>
<Markdown>{ressources[selectedYear]}</Markdown>
<Body as="div">
<Markdown>{ressources[selectedYear]}</Markdown>
</Body>
{selectedYear !== '2019' && (
<>
<div

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

@ -82,9 +82,6 @@ export default function VisitsChart({
? data.map((d) => ({ ...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 (
<div
<Body
as="div"
css={`
svg {
overflow: visible;
@ -122,13 +120,18 @@ export default function VisitsChart({
)}
{grid && <CartesianGrid />}
<Legend />
<AxeA
<XAxis
dataKey="date"
type="category"
tickFormatter={period === 'jours' ? formatDay : formatMonth}
angle={-45}
textAnchor="end"
height={60}
minTickGap={-8}
/>
<AxeB
<YAxis
dataKey={dataKeys[0]}
tickFormatter={(val: number) => formatValue(val) as string}
type="number"
@ -173,7 +176,7 @@ export default function VisitsChart({
)}
</ComposedChart>
</ResponsiveContainer>
</div>
</Body>
)
}

1
site/source/pages/Stats/DemandesUtilisateurs.tsx
View File

@ -92,6 +92,7 @@ type PagerButtonProps = {
}
const PagerButton = styled.button<PagerButtonProps>`
font-family: ${({ theme }) => theme.fonts.main};
padding: 0.375rem 0.5rem;
border: 1px solid
${({ theme, currentPage }) =>

4
site/source/pages/Stats/GlobalStats.tsx
View File

@ -163,7 +163,7 @@ export default function GlobalStats({ stats }: { stats: StatsStruct }) {
/>
{currentMonthSatisfaction.total > 0 && (
<Grid item lg={12}>
<Grid item xs={12} md={8} lg={12}>
<Indicator
subTitle="Satisfaction utilisateurs"
main={
@ -178,7 +178,9 @@ export default function GlobalStats({ stats }: { stats: StatsStruct }) {
</Grid>
)}
</Grid>
<Spacing md />
<Grid container spacing={2}>
<BigIndicator
main={totalVisits}

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

@ -50,23 +50,36 @@ export default function SatisfactionChart({ data }: SatisfactionChartProps) {
.filter((d) => Object.values(d.nombre).reduce((a, b) => a + b, 0))
return (
<ResponsiveContainer width="100%" height={400}>
<BarChart data={flattenData}>
<XAxis dataKey="date" tickFormatter={formatMonth} />
<Tooltip content={CustomTooltip} />
{SatisfactionStyle.map(([level, { emoji, color }]) => (
<Bar
key={level}
dataKey={level}
stackId="1"
fill={color}
maxBarSize={50}
>
<LabelList dataKey={level} content={() => emoji} position="left" />
</Bar>
))}
</BarChart>
</ResponsiveContainer>
<Body as="div">
<ResponsiveContainer width="100%" height={400}>
<BarChart data={flattenData}>
<XAxis
dataKey="date"
tickFormatter={formatMonth}
angle={-45}
textAnchor="end"
height={60}
minTickGap={-8}
/>
<Tooltip content={CustomTooltip} />
{SatisfactionStyle.map(([level, { emoji, color }]) => (
<Bar
key={level}
dataKey={level}
stackId="1"
fill={color}
maxBarSize={50}
>
<LabelList
dataKey={level}
content={() => emoji}
position="left"
/>
</Bar>
))}
</BarChart>
</ResponsiveContainer>
</Body>
)
}

21
site/source/pages/Stats/Stats.tsx
View File

@ -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<BrushProps['onChange']>,
[visites]
)
const totals: number | Record<string, number> = useMemo(
@ -218,8 +219,6 @@ const StatsDetail = () => {
</div>
</Indicators>
<Spacing lg />
<H3>Visites</H3>
<Chart
@ -242,6 +241,7 @@ const StatsDetail = () => {
? ` à ${formatMonth(slicedVisits[slicedVisits.length - 1].date)}`
: '')}
</H3>
<Grid container spacing={2}>
<BigIndicator
main={formatValue(
@ -275,6 +275,7 @@ const StatsDetail = () => {
</>
)}
</Grid>
{period === 'mois' && !!satisfaction.length && (
<>
<H3>Satisfaction</H3>