feat(dsfr): ajout de la page stats (#6090)

* fix: pandacss

* fix: build

* fix: build

* fix(stats): add page

* fix: stats

packages/code-du-travail-frontend/app/stats/page.tsx

@@ -0,0 +1,36 @@
+import { Metadata } from "next";
+import { DsfrLayout } from "../../src/modules/layout";
+import { Stats } from "../../src/modules/stats";
+import { getStatsService } from "../../src/api";
+import { cache } from "react";
+import { REVALIDATE_TIME_DAY } from "../../src/config";
+
+export const dynamic = "force-static";
+
+export const revalidate = REVALIDATE_TIME_DAY;
+
+export const metadata: Metadata = {
+  title: "Statistiques",
+  description: "Statistiques d’utilisation du Code du travail numérique",
+};
+
+const getStats = cache(async () => {
+  return getStatsService();
+});
+
+async function Index() {
+  const data = await getStats();
+
+  return (
+    <DsfrLayout>
+      <Stats
+        nbDocuments={data.nbDocuments}
+        nbVisits={data.nbVisits}
+        nbSearches={data.nbSearches}
+        nbPageViews={data.nbPageViews}
+      />
+    </DsfrLayout>
+  );
+}
+
+export default Index;

packages/code-du-travail-frontend/src/config.ts

@@ -11,8 +11,9 @@ export const COMMIT = process.env.NEXT_PUBLIC_COMMIT ?? "";
 export const SITE_URL =
   process.env.NEXT_PUBLIC_SITE_URL ?? `http://localhost:3000`;
 export const PACKAGE_VERSION = version;
-export const PIWIK_SITE_ID = process.env.NEXT_PUBLIC_PIWIK_SITE_ID ?? "";
-export const PIWIK_URL = process.env.NEXT_PUBLIC_PIWIK_URL ?? "";
+export const PIWIK_SITE_ID = process.env.NEXT_PUBLIC_PIWIK_SITE_ID ?? "3";
+export const PIWIK_URL =
+  process.env.NEXT_PUBLIC_PIWIK_URL ?? "https://matomo.fabrique.social.gouv.fr";
 export const IS_PREPROD =
   process.env.NEXT_PUBLIC_IS_PREPRODUCTION_DEPLOYMENT ?? false;
 export const IS_PROD =

packages/code-du-travail-frontend/src/modules/stats/StatsDisplay.tsx

@@ -0,0 +1,34 @@
+import { fr } from "@codegouvfr/react-dsfr";
+import { CallOut } from "@codegouvfr/react-dsfr/CallOut";
+import { css } from "../../../styled-system/css";
+
+type StatsProps = {
+  title: string;
+  metric: number;
+};
+
+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>
+);
+
+const metric = css({
+  textAlign: "right",
+  display: "block",
+});
+
+const title = css({
+  textAlign: "left",
+});
+
+const callOut = css({
+  height: "100%",
+});

packages/code-du-travail-frontend/src/modules/stats/index.tsx

@@ -0,0 +1,26 @@
+import { fr } from "@codegouvfr/react-dsfr";
+import { StatsDisplay } from "./StatsDisplay";
+
+type StatsProps = {
+  nbDocuments: number;
+  nbVisits: number;
+  nbSearches: number;
+  nbPageViews: number;
+};
+
+export const Stats = (props: StatsProps) => (
+  <div className={fr.cx("fr-grid-row")}>
+    <div className={fr.cx("fr-my-4w", "fr-col-12")}>
+      <h1 className={fr.cx("fr-mt-0")}>Statistiques d&apos;utilisation</h1>
+      <div className={fr.cx("fr-grid-row", "fr-grid-row--gutters")}>
+        <StatsDisplay title="Contenus référencés" metric={props.nbDocuments} />
+        <StatsDisplay title="Visites" metric={props.nbVisits} />
+        <StatsDisplay title="Recherches" metric={props.nbSearches} />
+        <StatsDisplay title="Consultations" metric={props.nbPageViews} />
+      </div>
+      <p className={fr.cx("fr-mt-4v")}>
+        Statistiques d’utilisation depuis le 01/01/2020
+      </p>
+    </div>
+  </div>
+);