feat: add dsfr-chart

.env.development

@@ -2,6 +2,7 @@ NEXT_TELEMETRY_DISABLED=1
 NEXT_PUBLIC_SITE_URL=""
 NEXT_PUBLIC_SENTRY_DSN="https://xxx/yy"
 NEXT_PUBLIC_SENTRY_ENV="dev"
-NEXT_PUBLIC_MATOMO_URL=""
-NEXT_PUBLIC_MATOMO_SITE_ID=""
-NEXT_PUBLIC_APP_REPOSITORY_URL="https://github.com/betagouv/template"
+NEXT_PUBLIC_MATOMO_URL="https://stats.beta.gouv.fr"
+NEXT_PUBLIC_MATOMO_SITE_ID="1"
+NEXT_PUBLIC_APP_REPOSITORY_URL="https://github.com/betagouv/template"
+NEXT_PUBLIC_BASE_PATH=/template

.env.production

@@ -5,4 +5,5 @@ NEXT_PUBLIC_SENTRY_ENV="production"
 NEXT_PUBLIC_MATOMO_URL="https:/stats.beta.gouv.fr"
 NEXT_PUBLIC_MATOMO_SITE_ID=63
 NEXT_PUBLIC_APP_REPOSITORY_URL="https://github.com/betagouv/template"
-PRODUCTION=true
+PRODUCTION=true
+NEXT_PUBLIC_BASE_PATH=/template

.env.staging

@@ -4,4 +4,5 @@ NEXT_PUBLIC_SENTRY_DSN="https://xxx/yy"
 NEXT_PUBLIC_SENTRY_ENV="staging"
 NEXT_PUBLIC_MATOMO_URL=""
 NEXT_PUBLIC_MATOMO_SITE_ID=""
-NEXT_PUBLIC_APP_REPOSITORY_URL="https://github.com/betagouv/template"
+NEXT_PUBLIC_APP_REPOSITORY_URL="https://github.com/betagouv/template"
+NEXT_PUBLIC_BASE_PATH=/template

.talismanrc

@@ -1,10 +1,10 @@
 fileignoreconfig:
 - filename: .env.development
-  checksum: f883cd5c4caa0fd48b4c2d995fc352b3d6d51dfa9d1d1eff7dabc27ef6209b3b
+  checksum: a4985d16a821f74d637809f52a6289104c036daad9898e142cf479747745d780
 - filename: .env.production
-  checksum: b0bed73a6579de408405809f6bb0f724ac9a395b66fa182e39692be4bfd3697a
+  checksum: 75607ccfdc62cf0ef17848b55fb3f438c546d769a5a2245cdd543423fe0f6021
 - filename: .env.staging
-  checksum: 4edc189842e797a550ecb727c5792e810ec68d419fa22b4cc26a4f441aa62793
+  checksum: 09811de40e17255f54ded80f36a6bc17464f8b5656592d562c555259b06aaa9a
 - filename: .github/workflows/build.yml
   checksum: c2eaa7d33f20ce615a65740718a652474e5fe4ad0437374ca671bd73317cdd95
 - filename: .github/workflows/e2e.yml

next.config.mjs

@@ -16,7 +16,7 @@ const version = pkg.version;
 
 /** @type {import('next').NextConfig} */
 const moduleExports = {
-  basePath: "/template",
+  basePath: process.env.NEXT_PUBLIC_BASE_PATH,
   pageExtensions: ["js", "jsx", "mdx", "ts", "tsx"],
   reactStrictMode: true,
   swcMinify: true,

package.json

@@ -6,8 +6,8 @@
     "node": ">=18 || >=20"
   },
   "scripts": {
-    "predev": "only-include-used-icons",
-    "prebuild": "node -r @swc-node/register scripts/prebuild.ts && yarn only-include-used-icons",
+    "predev": "only-include-used-icons && cp -a node_modules/@codegouvfr/dsfr-chart ./public/",
+    "prebuild": "node -r @swc-node/register scripts/prebuild.ts && yarn only-include-used-icons && cp -a node_modules/@codegouvfr/dsfr-chart ./public/",
     "only-include-used-icons": "node node_modules/@codegouvfr/react-dsfr/bin/only-include-used-icons.js",
     "dev": "next dev",
     "build": "next build",
@@ -36,6 +36,7 @@
     "@emotion/react": "^11.11.4",
     "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.11.0",
+    "@gouvfr/dsfr-chart": "^1.0.0",
     "@mdx-js/loader": "^3.0.1",
     "@mdx-js/react": "^3.0.1",
     "@mui/icons-material": "^5.15.12",

src/components/DsFrChart.tsx

@@ -0,0 +1,57 @@
+import React, { useEffect, useState } from "react";
+
+const MiseryWrapper = (props: any) => {
+  const [ready, setReady] = useState(false);
+  const check = () => {
+    // @ts-ignore
+    if ("dsfr" in window && window.dsfr.colors) {
+      setReady(true);
+    } else {
+      setTimeout(check, 50);
+    }
+  };
+  useEffect(() => {
+    if (!ready) {
+      check();
+    }
+  });
+
+  if (!ready) {
+    return null;
+  }
+
+  return props.children;
+};
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      "scatter-chart": ScatterChartAttributes;
+      "pie-chart": PieChartAttributes;
+    }
+  }
+}
+
+// https://github.com/GouvernementFR/dsfr-chart/blob/main/src/components/ScatterChart.vue#L75
+interface ScatterChartAttributes {
+  x: string;
+  y: string;
+}
+
+// https://github.com/GouvernementFR/dsfr-chart/blob/main/src/components/PieChart.vue#L59
+interface PieChartAttributes {
+  x: string;
+  y: string;
+}
+
+export const ScatterChart = (props: ScatterChartAttributes) => (
+  <MiseryWrapper>
+    <scatter-chart {...props} />
+  </MiseryWrapper>
+);
+
+export const PieChart = (props: PieChartAttributes) => (
+  <MiseryWrapper>
+    <pie-chart {...props} />
+  </MiseryWrapper>
+);

src/lib/matomo.ts

@@ -9,9 +9,9 @@ export const fetchMatomoData = async (): Promise<MatomoResult> => {
     `${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`,
   ];
-  const promises = MATOMO_URL.map(url =>
+  const promises = MATOMO_URL.map((url) =>
     fetch(url)
-      .then(data => data.json())
+      .then((data) => data.json())
       .catch(() => {
         return null;
       })

src/pages/_app.tsx

@@ -215,6 +215,7 @@ const Layout = ({ children }: { children: ReactNode }) => {
 
 function App({ Component, pageProps }: AppProps) {
   useEffect(() => {
+    console.log("init");
     init({
       url: process.env.NEXT_PUBLIC_MATOMO_URL ?? "",
       siteId: process.env.NEXT_PUBLIC_MATOMO_SITE_ID ?? "",

src/pages/index.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import Head from "next/head";
 import { NextPage } from "next";
 import Stack from "@mui/material/Stack";
+import Link from "next/link";
 
 import { push as matomoPush } from "@socialgouv/matomo-next";
 import { Accordion } from "@codegouvfr/react-dsfr/Accordion";
@@ -60,7 +61,6 @@ const Home: NextPage = () => {
             </a>
             .<br />
             <br />
-            Le template est livré 100% accessible.
           </Accordion>
           <Accordion label="📊 Matomo Analytics">
             Intègre le tracker matomo pour analyser l'usage du service.
@@ -84,9 +84,26 @@ const Home: NextPage = () => {
           </Accordion>
           <Accordion label="✅ Standards beta">
             <ul>
-              <li>Page de statistiques pour suivres les KPIs</li>
-              <li>Page de budget pour exposer son budget</li>
-              <li>Page SOS pour venir en aide aux usager(e)s</li>
+              <li>Site web accessible</li>
+              <li>
+                <Link href="/stats">Page de statistiques</Link> avec{" "}
+                <a
+                  target="_blank"
+                  rel="noreferrer noopener"
+                  href="https://github.com/GouvernementFR/dsfr-chart"
+                >
+                  dsfr-chart
+                </a>{" "}
+                pour suivre les KPIs
+              </li>
+              <li>
+                <Link href="/budget">Page de budget</Link> pour publier son
+                budget
+              </li>
+              <li>
+                <Link href="/sos">Page SOS</Link> pour venir en aide aux
+                usager(e)s
+              </li>
             </ul>
           </Accordion>
           <Accordion label="🔐 Sécurité">
@@ -151,7 +168,7 @@ const Home: NextPage = () => {
         <Button
           title="Trigger matomo event"
           onClick={() => {
-            matomoPush(["click", "button", "homepage"]);
+            matomoPush(["trackEvent", "click", "home"]);
           }}
         >
           Trigger matomo event

src/pages/sos.mdx

@@ -20,7 +20,7 @@ import Alert from "@codegouvfr/react-dsfr/Alert";
 
 Réponse 1
 
-### Question 3
+### Question 2
 
 Réponse 2
 

src/pages/stats.tsx

@@ -1,12 +1,15 @@
 import React, { useEffect } from "react";
 import type { NextPage } from "next";
 import Head from "next/head";
-
+import Script from "next/script";
 import { StatTile } from "../components/StatTile";
 
 import { fetchMatomoData, MatomoResult } from "../lib";
 
+import { ScatterChart, PieChart } from "../components/DsFrChart";
+
 const Stats: NextPage = () => {
+  // fetch stats from public matomo
   const [matomoData, setMatomoData] = React.useState<MatomoResult>({
     nbPageViews: 0,
     nbVisits: 0,
@@ -19,13 +22,20 @@ const Stats: NextPage = () => {
       setMatomoData(data);
     })();
   }, []);
+
+  const basePath = process.env.NEXT_PUBLIC_BASE_PATH;
   return (
     <>
+      <Script src={`${basePath}/dsfr-chart/Charts/dsfr-chart.umd.js`} />
       <Head>
         <title>Template | Statistiques d&apos;utilisation</title>
+        <link
+          rel="stylesheet"
+          href={`${basePath}/dsfr-chart/Charts/dsfr-chart.css`}
+        />
       </Head>
       <div className="fr-container fr-my-10w">
-        <h1>Statistiques d&apos;utilisation</h1>
+        <h1>Usage web</h1>
         <div className="fr-grid-row fr-grid-row--gutters fr-grid-row--center">
           <StatTile
             title="Nombre de visites"
@@ -43,6 +53,28 @@ const Stats: NextPage = () => {
             description="C'est le nombre de pages vues uniques sur le site sur les 12 derniers mois"
           />
         </div>
+        <br />
+        <br />
+        <h1>Statistiques d&apos;impact</h1>
+        <ScatterChart
+          x={JSON.stringify([
+            [1, 5, 8],
+            [1, 2, 15],
+          ])}
+          y={JSON.stringify([
+            [30, 10, 20],
+            [10, 20, 30],
+          ])}
+        ></ScatterChart>
+        <br />
+        <br />
+        <PieChart
+          x={JSON.stringify([1, 2, 3])}
+          y={JSON.stringify([10, 20, 30])}
+        ></PieChart>
+        ;
+        <br />
+        <br />
       </div>
     </>
   );