feat(stats): better stats page

incubateur-ademe · Dec 18, 2023 · 66e05cb · 66e05cb
1 parent 4590d55
commit 66e05cb
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 63 deletions.
diff --git a/next.config.mjs b/next.config.mjs
@@ -65,7 +65,9 @@ const config = {
     NEXT_PUBLIC_REPOSITORY_URL: isDeployment
       ? `https://github.com/${process.env.VERCEL_GIT_REPO_OWNER}/${process.env.VERCEL_GIT_REPO_SLUG}`
       : process.env.NEXT_PUBLIC_APP_REPOSITORY_URL ?? "no repository",
-    NEXT_PUBLIC_SITE_URL: isDeployment ? `https://${process.env.VERCEL_URL}` : "http://localhost:3000",
+    NEXT_PUBLIC_SITE_URL: isDeployment
+      ? process.env.NEXT_PUBLIC_SITE_URL ?? `https://${process.env.VERCEL_URL}`
+      : "http://localhost:3000",
   },
   pageExtensions: ["js", "jsx", "md", "mdx", "ts", "tsx"],
   async headers() {

diff --git a/src/app/stats/content.tsx b/src/app/stats/content.tsx
@@ -1,42 +1,40 @@
-"use client";
+import Card from "@codegouvfr/react-dsfr/Card";
 
-import { useEffect, useState } from "react";
+import { Grid, GridCol } from "@/dsfr";
+import { fetchMatomoData } from "@/lib/matomo";
 
-import { StatTile } from "@/components/StatTile";
-import { Grid } from "@/dsfr";
-import { fetchMatomoData, type MatomoResult } from "@/lib/matomo";
-
-export const StatsContent = () => {
-  const [matomoData, setMatomoData] = useState<MatomoResult>({
-    nbPageViews: 0,
-    nbVisits: 0,
-    nbUniqPageViews: 0,
-  });
-
-  useEffect(() => {
-    void (async () => {
-      const data = await fetchMatomoData();
-      setMatomoData(data);
-    })();
-  }, []);
+export const StatsContent = async () => {
+  const matomoData = await fetchMatomoData();
 
   return (
     <Grid haveGutters>
-      <StatTile
-        title="Nombre de visites"
-        stats={matomoData.nbVisits}
-        description="C'est le nombre de visites total du site sur les 12 derniers mois"
-      />
-      <StatTile
-        title="Nombre de pages vues (total)"
-        stats={matomoData.nbPageViews}
-        description="C'est le nombre de pages vues au total sur le site sur les 12 derniers mois"
-      />
-      <StatTile
-        title="Nombre de pages vues (uniques)"
-        stats={matomoData.nbUniqPageViews}
-        description="C'est le nombre de pages vues uniques sur le site sur les 12 derniers mois"
-      />
+      <GridCol md={4}>
+        <Card
+          title="Nombre de visites"
+          desc="Nombre de visites total du site sur les 12 derniers mois"
+          start={<strong className="fr-display--md">{matomoData.nbVisits}</strong>}
+          size="large"
+          grey
+        />
+      </GridCol>
+      <GridCol md={4}>
+        <Card
+          title="Nombre de pages vues (total)"
+          desc="Nombre de pages vues au total sur le site sur les 12 derniers mois"
+          start={<strong className="fr-display--md">{matomoData.nbPageViews}</strong>}
+          size="large"
+          grey
+        />
+      </GridCol>
+      <GridCol md={4}>
+        <Card
+          title="Nombre de pages vues (uniques)"
+          desc="Nombre de pages vues uniques sur le site sur les 12 derniers mois"
+          start={<strong className="fr-display--md">{matomoData.nbUniqPageViews}</strong>}
+          size="large"
+          grey
+        />
+      </GridCol>
     </Grid>
   );
 };
diff --git a/src/components/StatTile.tsx b/src/components/StatTile.tsx
diff --git a/src/lib/matomo.ts b/src/lib/matomo.ts
@@ -1,3 +1,5 @@
+import { config } from "@/config";
+
 export interface MatomoResult {
   nbPageViews: number;
   nbUniqPageViews: number;
@@ -21,11 +23,19 @@ namespace MatomoApi {
 
 export const fetchMatomoData = async (): Promise<MatomoResult> => {
   const MATOMO_URL = [
-    `${process.env.NEXT_PUBLIC_MATOMO_URL}/?module=API&method=VisitsSummary.getVisits&idSite=${process.env.NEXT_PUBLIC_MATOMO_SITE_ID}&format=JSON&period=year&date=today`,
-    `${process.env.NEXT_PUBLIC_MATOMO_URL}/?module=API&method=Actions.get&idSite=${process.env.NEXT_PUBLIC_MATOMO_SITE_ID}&format=JSON&period=year&date=today`,
+    `${config.matomo.url}/?module=API&method=VisitsSummary.getVisits&idSite=${
+      config.matomo.siteId
+    }&format=JSON&period=year&date=today&segment=${encodeURIComponent(`pageUrl=^${config.host}`)}`,
+    `${config.matomo.url}/?module=API&method=Actions.get&idSite=${
+      config.matomo.siteId
+    }&format=JSON&period=year&date=today&segment=${encodeURIComponent(`pageUrl=^${config.host}`)}`,
   ];
   const promises = MATOMO_URL.map(url =>
-    fetch(url)
+    fetch(url, {
+      next: {
+        revalidate: 60 * 60 * 8, // 24 hours
+      },
+    })
       .then(data => data.json())
       .catch(() => {
         return null;