Skip to content

Commit

Permalink
feat(stats): ajout des bilans sur la page statistiques (#6461)
Browse files Browse the repository at this point in the history
  • Loading branch information
@m-maillot
m-maillot authored Feb 24, 2025
1 parent f7fc65f commit 7bdc667
Show file tree
Hide file tree
Showing 5 changed files with 235 additions and 54 deletions.
27 changes: 27 additions & 0 deletions packages/code-du-travail-frontend/src/modules/stats/Resume.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import { toUrl } from "../../lib";
import { Tile } from "@codegouvfr/react-dsfr/Tile";

export const Resume = ({
year,
fileName,
fileSizeMb,
}: {
year: number;
fileName: string;
fileSizeMb: number;
}) => (
<Tile
downloadButton
enlargeLinkOrButton
imageSvg={false}
small
imageUrl={`/static/assets/img/modeles-de-courriers-download.svg`}
title={`Télécharger le bilan annuel de l’année ${year}`}
titleAs={`h4`}
detail={`Format PDF - ${fileSizeMb}Mo`}
imageAlt={""}
linkProps={{
href: toUrl(fileName),
}}
/>
);
31 changes: 18 additions & 13 deletions packages/code-du-travail-frontend/src/modules/stats/StatsDisplay.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,25 +8,30 @@ type StatsProps = {
};

export const StatsDisplay = (props: StatsProps) => (
<div className={fr.cx("fr-col-12", "fr-col-md-3")}>
<CallOut className={`${callOut}`}>
<span className={`${metric} ${fr.cx("fr-mt-4v", "fr-display--xs")}`}>
{props.metric}
</span>
<span className={`${title} ${fr.cx("fr-text--bold", "fr-text--xl")}`}>
{props.title}
</span>
</CallOut>
</div>
<CallOut className={`${callOut}`}>
<span className={`${metric} ${fr.cx("fr-mt-4v", "fr-m-0", "fr-h2")}`}>
{props.metric.toLocaleString("fr").split(/\s/).join("\u00a0")}
</span>
<span className={fr.cx("fr-hidden-lg")}> </span>
<span
className={`${title} ${fr.cx("fr-text--bold", "fr-mt-4v", "fr-mb-0", "fr-h5")}`}
>
{props.title}
</span>
</CallOut>
);

const metric = css({
textAlign: "right",
display: "block",
lg: { textAlign: "right", display: "block" },
textAlign: "left",
});

const title = css({
textAlign: "left",
lg: {
textAlign: "right",
marginStart: 0,
},
marginStart: "1em",
});

const callOut = css({
Expand Down
151 changes: 136 additions & 15 deletions ...es/code-du-travail-frontend/src/modules/stats/__tests__/__snapshots__/Stats.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,21 @@
exports[`<Stats /> should match snapshot 1`] = `
<div>
<div
class="fr-grid-row"
class="fr-grid-row fr-mt-8w fr-mb-8w"
>
<div
class="fr-my-4w fr-col-12"
>
<h1
class="fr-mt-0"
class="fr-mt-0 fr-mb-6w"
>
Statistiques d'utilisation
</h1>
<div
class="fr-grid-row fr-grid-row--gutters"
>
<div
class="fr-col-12 fr-col-md-3"
class="fr-col-12 fr-col-lg-3"
>
<div
class="fr-callout h_100%"
Expand All @@ -28,12 +28,17 @@ exports[`<Stats /> should match snapshot 1`] = `
>
<span
class="ta_right d_block fr-mt-4v fr-display--xs"
class="lg:ta_right lg:d_block ta_left fr-mt-4v fr-m-0 fr-h2"
>
100
</span>
<span
class="ta_left fr-text--bold fr-text--xl"
class="fr-hidden-lg"
>
</span>
<span
class="lg:ta_right lg:ms_0 ms_1em fr-text--bold fr-mt-4v fr-mb-0 fr-h5"
>
Contenus référencés
</span>
Expand All @@ -42,7 +47,7 @@ exports[`<Stats /> should match snapshot 1`] = `
</div>
</div>
<div
class="fr-col-12 fr-col-md-3"
class="fr-col-12 fr-col-lg-3"
>
<div
class="fr-callout h_100%"
Expand All @@ -53,12 +58,17 @@ exports[`<Stats /> should match snapshot 1`] = `
>
<span
class="ta_right d_block fr-mt-4v fr-display--xs"
class="lg:ta_right lg:d_block ta_left fr-mt-4v fr-m-0 fr-h2"
>
400
</span>
<span
class="ta_left fr-text--bold fr-text--xl"
class="fr-hidden-lg"
>
</span>
<span
class="lg:ta_right lg:ms_0 ms_1em fr-text--bold fr-mt-4v fr-mb-0 fr-h5"
>
Visites
</span>
Expand All @@ -67,7 +77,7 @@ exports[`<Stats /> should match snapshot 1`] = `
</div>
</div>
<div
class="fr-col-12 fr-col-md-3"
class="fr-col-12 fr-col-lg-3"
>
<div
class="fr-callout h_100%"
Expand All @@ -78,12 +88,17 @@ exports[`<Stats /> should match snapshot 1`] = `
>
<span
class="ta_right d_block fr-mt-4v fr-display--xs"
class="lg:ta_right lg:d_block ta_left fr-mt-4v fr-m-0 fr-h2"
>
300
</span>
<span
class="ta_left fr-text--bold fr-text--xl"
class="fr-hidden-lg"
>
</span>
<span
class="lg:ta_right lg:ms_0 ms_1em fr-text--bold fr-mt-4v fr-mb-0 fr-h5"
>
Recherches
</span>
Expand All @@ -92,7 +107,7 @@ exports[`<Stats /> should match snapshot 1`] = `
</div>
</div>
<div
class="fr-col-12 fr-col-md-3"
class="fr-col-12 fr-col-lg-3"
>
<div
class="fr-callout h_100%"
Expand All @@ -103,12 +118,17 @@ exports[`<Stats /> should match snapshot 1`] = `
>
<span
class="ta_right d_block fr-mt-4v fr-display--xs"
class="lg:ta_right lg:d_block ta_left fr-mt-4v fr-m-0 fr-h2"
>
200
</span>
<span
class="ta_left fr-text--bold fr-text--xl"
class="fr-hidden-lg"
>
</span>
<span
class="lg:ta_right lg:ms_0 ms_1em fr-text--bold fr-mt-4v fr-mb-0 fr-h5"
>
Consultations
</span>
Expand All @@ -118,10 +138,111 @@ exports[`<Stats /> should match snapshot 1`] = `
</div>
</div>
<p
class="fr-mt-4v"
class="fr-mt-6w"
>
Statistiques d’utilisation depuis le 01/01/2020
</p>
<h2
class="fr-mt-6w fr-h3"
>
Bilans annuels
</h2>
<div
class="fr-mt-6w fr-grid-row fr-grid-row--gutters"
>
<div
class="fr-col-12 fr-col-lg-3"
>
<div
class="fr-tile fr-enlarge-link fr-tile--vertical fr-tile--sm fr-tile--download"
id="fr-tile-:r4:"
>
<div
class="fr-tile__body"
>
<div
class="fr-tile__content"
>
<h4
class="fr-tile__title"
>
<a
aria-disabled="false"
class=""
href="bucket.url/preview/default/cdtn_bilan_2024.pdf"
>
Télécharger le bilan annuel de l’année 2024
</a>
</h4>
<p
class="fr-tile__detail"
>
Format PDF - 1Mo
</p>
</div>
</div>
<div
class="fr-tile__header"
>
<div
class="fr-tile__img"
>
<img
alt=""
class="fr-responsive-img"
src="/static/assets/img/modeles-de-courriers-download.svg"
/>
</div>
</div>
</div>
</div>
<div
class="fr-col-12 fr-col-lg-3"
>
<div
class="fr-tile fr-enlarge-link fr-tile--vertical fr-tile--sm fr-tile--download"
id="fr-tile-:r5:"
>
<div
class="fr-tile__body"
>
<div
class="fr-tile__content"
>
<h4
class="fr-tile__title"
>
<a
aria-disabled="false"
class=""
href="bucket.url/preview/default/cdtn_bilan_2023.pdf"
>
Télécharger le bilan annuel de l’année 2023
</a>
</h4>
<p
class="fr-tile__detail"
>
Format PDF - 1.1Mo
</p>
</div>
</div>
<div
class="fr-tile__header"
>
<div
class="fr-tile__img"
>
<img
alt=""
class="fr-responsive-img"
src="/static/assets/img/modeles-de-courriers-download.svg"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Expand Down
39 changes: 20 additions & 19 deletions ...-du-travail-frontend/src/modules/stats/__tests__/__snapshots__/StatsDisplay.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,29 +3,30 @@
exports[`<StatsDisplay /> should match snapshot 1`] = `
<div>
<div
class="fr-col-12 fr-col-md-3"
class="fr-callout h_100%"
id="fr-callout-:r0:"
>
<div
class="fr-callout h_100%"
id="fr-callout-:r0:"
<p
class="fr-callout__text"
>
<p
class="fr-callout__text"
<span
class="lg:ta_right lg:d_block ta_left fr-mt-4v fr-m-0 fr-h2"
>
100
</span>
<span
class="fr-hidden-lg"
>
<span
class="ta_right d_block fr-mt-4v fr-display--xs"
>
100
</span>
<span
class="ta_left fr-text--bold fr-text--xl"
>
Contenus référencés
</span>
</p>
</div>
</span>
<span
class="lg:ta_right lg:ms_0 ms_1em fr-text--bold fr-mt-4v fr-mb-0 fr-h5"
>
Contenus référencés
</span>
</p>
</div>
</div>
`;
Loading

0 comments on commit 7bdc667

Please sign in to comment.