From fe75b76dc3ae4e22dc26f260468e1426560f5fb8 Mon Sep 17 00:00:00 2001 From: Julien Bouquillon Date: Tue, 19 Mar 2024 11:01:10 +0100 Subject: [PATCH] feat: add dsfr-chart --- .env.development | 7 +- .env.production | 3 +- .env.staging | 3 +- .talismanrc | 6 +- next.config.mjs | 2 +- package.json | 5 +- src/components/DsFrChart.tsx | 57 +++++++ src/lib/matomo.ts | 4 +- src/pages/_app.tsx | 1 + src/pages/index.tsx | 27 ++- src/pages/sos.mdx | 2 +- src/pages/stats.tsx | 36 +++- yarn.lock | 317 ++++++++++++++++++++++++++++++++++- 13 files changed, 445 insertions(+), 25 deletions(-) create mode 100644 src/components/DsFrChart.tsx diff --git a/.env.development b/.env.development index fe9f04d5..ecf53188 100644 --- a/.env.development +++ b/.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" \ No newline at end of file +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 \ No newline at end of file diff --git a/.env.production b/.env.production index 708f9cc2..4ff93d69 100644 --- a/.env.production +++ b/.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 \ No newline at end of file +PRODUCTION=true +NEXT_PUBLIC_BASE_PATH=/template \ No newline at end of file diff --git a/.env.staging b/.env.staging index a4c7242d..c53a0ee3 100644 --- a/.env.staging +++ b/.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" \ No newline at end of file +NEXT_PUBLIC_APP_REPOSITORY_URL="https://github.com/betagouv/template" +NEXT_PUBLIC_BASE_PATH=/template \ No newline at end of file diff --git a/.talismanrc b/.talismanrc index 6b9fadca..257dde18 100644 --- a/.talismanrc +++ b/.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 diff --git a/next.config.mjs b/next.config.mjs index 12c8153e..30896032 100644 --- a/next.config.mjs +++ b/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, diff --git a/package.json b/package.json index 2e05033b..7362a435 100644 --- a/package.json +++ b/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", diff --git a/src/components/DsFrChart.tsx b/src/components/DsFrChart.tsx new file mode 100644 index 00000000..79b2068a --- /dev/null +++ b/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) => ( + + + +); + +export const PieChart = (props: PieChartAttributes) => ( + + + +); diff --git a/src/lib/matomo.ts b/src/lib/matomo.ts index 2000df46..2548b213 100644 --- a/src/lib/matomo.ts +++ b/src/lib/matomo.ts @@ -9,9 +9,9 @@ export const fetchMatomoData = async (): Promise => { `${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; }) diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 4441e15b..4ca90c24 100644 --- a/src/pages/_app.tsx +++ b/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 ?? "", diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 5ca2c907..cb6dd2e4 100644 --- a/src/pages/index.tsx +++ b/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 = () => { .

- Le template est livré 100% accessible. Intègre le tracker matomo pour analyser l'usage du service. @@ -84,9 +84,26 @@ const Home: NextPage = () => {
    -
  • Page de statistiques pour suivres les KPIs
  • -
  • Page de budget pour exposer son budget
  • -
  • Page SOS pour venir en aide aux usager(e)s
  • +
  • Site web accessible
  • +
  • + Page de statistiques avec{" "} + + dsfr-chart + {" "} + pour suivre les KPIs +
  • +
  • + Page de budget pour publier son + budget +
  • +
  • + Page SOS pour venir en aide aux + usager(e)s +
@@ -151,7 +168,7 @@ const Home: NextPage = () => {