fix: stats

src/components/index.ts

@@ -5,3 +5,4 @@ export * from "./header/type";
 export * from "./footer/type";
 export * from "./landing";
 export * from "./mention";
+export * from "./stats";

src/components/mention/part.stories.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { MentionPart } from "./part";
+
+export default {
+  title: "MentionPart",
+  component: MentionPart,
+} as ComponentMeta<typeof MentionPart>;
+
+const Template: ComponentStory<typeof MentionPart> = args => (
+  <MentionPart {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  title: "Random title",
+  description:
+    "Non id incididunt labore enim amet cupidatat et quis in tempor ipsum ad velit cillum.",
+};
+
+export const WithChildren = Template.bind({});
+WithChildren.args = {
+  title: "Random title",
+  description:
+    "Non id incididunt labore enim amet cupidatat et quis in tempor ipsum ad velit cillum.",
+  children: <div>Hello world</div>,
+};

src/components/stats/index.ts

@@ -0,0 +1 @@
+export * from "./tile";

src/components/stats/tile.stories.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { StatsTile } from "./tile";
+
+export default {
+  title: "StatsTile",
+  component: StatsTile,
+} as ComponentMeta<typeof StatsTile>;
+
+const Template: ComponentStory<typeof StatsTile> = args => (
+  <StatsTile {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  title: "Nombre de visites",
+  stats: "1.000.000",
+  description: "C'est le nombre d'utilisateur unique ayant visité le site",
+};
+
+export const WithDescription = Template.bind({});
+WithDescription.args = {
+  title: "Nombre de visites",
+  stats: "1.000.000",
+  description: "C'est le nombre d'utilisateur unique ayant visité le site",
+};

src/components/stats/tile.tsx

@@ -0,0 +1,23 @@
+export type StatsTileProps = {
+  title: string;
+  stats: string | number;
+  description?: string | React.ReactNode;
+};
+
+export const StatsTile = (props: StatsTileProps): JSX.Element => {
+  return (
+    <div className="fr-col-12 fr-col-md-3">
+      <div className="fr-card fr-centered fr-card--no-arrow">
+        <div className="fr-card__body">
+          <strong className="fr-display-xs">{props.stats}</strong>
+          <h2 className="fr-card__title fr-mb-4w">{props.title}</h2>
+          {props.description && (
+            <div className="fr-card__desc">
+              <p>{props.description}</p>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};

src/config/layout.ts

@@ -185,6 +185,10 @@ export const footerBottomSection: FooterBottomSectionProps = {
       title: "Politique de confidentialité",
       href: "/politique-confidentialite",
     },
+    {
+      title: "Statistiques",
+      href: "/stats",
+    },
   ],
   version: process.env.NEXT_PUBLIC_APP_VERSION ?? "X.X.X",
   repositoryUrl: process.env.NEXT_PUBLIC_APP_REPOSITORY_URL ?? "",

src/lib/index.ts

@@ -0,0 +1 @@
+export * from "./matomo";

src/lib/matomo.ts

@@ -0,0 +1,25 @@
+export type MatomoResult = {
+  nbPageViews: number;
+  nbUniqPageViews: number;
+  nbVisits: number;
+};
+
+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=month&date=today`,
+    `${process.env.NEXT_PUBLIC_MATOMO_URL}/?module=API&method=Actions.get&idSite=${process.env.NEXT_PUBLIC_MATOMO_SITE_ID}&format=JSON&period=month&date=today`,
+  ];
+  const promises = MATOMO_URL.map(url =>
+    fetch(url)
+      .then(data => data.json())
+      .catch(() => {
+        return null;
+      })
+  );
+  const [nbVisitData, infoData] = await Promise.all(promises);
+  return {
+    nbPageViews: infoData?.nb_pageviews ?? 0,
+    nbUniqPageViews: infoData?.nb_uniq_pageviews ?? 0,
+    nbVisits: nbVisitData?.value ?? 0,
+  };
+};

src/pages/stats.tsx

@@ -0,0 +1,52 @@
+import { StatsTile } from "@components";
+import { fetchMatomoData, MatomoResult } from "@lib";
+import type { NextPage } from "next";
+import { NextSeo } from "next-seo";
+import React, { useEffect } from "react";
+
+const Index: NextPage = () => {
+  const [matomoData, setMatomoData] = React.useState<MatomoResult>();
+
+  useEffect(() => {
+    (async () => {
+      const matomoData = await fetchMatomoData();
+      setMatomoData(matomoData);
+    })();
+  }, []);
+  return (
+    <>
+      <NextSeo
+        title="Template | Statistiques d'utilisation"
+        description="Statistiques d'utilisation de l'application template."
+        additionalLinkTags={[
+          {
+            rel: "icon",
+            href: "/favicon.ico",
+          },
+        ]}
+      />
+      <div className="fr-container fr-my-6w">
+        <h1>Statistiques d&apos;utilisation</h1>
+        <div className="fr-grid-row fr-grid-row--gutters fr-grid-row--center fr-px-3w">
+          <StatsTile
+            title="Nombre de visites"
+            stats={matomoData?.nbVisits ?? 0}
+            description="C'est le nombre de visites total du site"
+          />
+          <StatsTile
+            title="Nombre de pages vues (total)"
+            stats={matomoData?.nbPageViews ?? 0}
+            description="C'est le nombre de pages vues au total sur le site"
+          />
+          <StatsTile
+            title="Nombre de pages vues (uniques)"
+            stats={matomoData?.nbUniqPageViews ?? 0}
+            description="C'est le nombre de pages vues uniques sur le site"
+          />
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Index;