Merge branch 'dashboard-summary-v2' of github.com:dataforgoodfr/12_pi…

…nkbombs_app into dashboard-summary-v2
dataforgoodfr · May 22, 2024 · 739e255 · 739e255
2 parents fb22593 + a3e0652
commit 739e255
Show file tree

Hide file tree

Showing 10 changed files with 179 additions and 42 deletions.
diff --git a/README.md b/README.md
@@ -20,13 +20,15 @@ yarn dev
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. You can start editing the page by modifying `src/pages/index.tsx`.
 
-### 4. Change defaults
+### 4. Build and test
 
-There are some things you need to change including title, urls, favicons, etc.
+Run the followed command:
 
-Find all comments with !STARTERCONF, then follow the guide.
-
-Don't forget to change the package name in package.json
+- Build the project: `yarn build`
+- Launch linter: `yarn lint:strict`
+- Launch Typecheck: `yarn typecheck`
+- Launch Prettier: `yarn format:check`
+- Launch Jest: `yarn test`
 
 ### 5. Commit Message Convention
 

diff --git a/public/images/bottom-dark.svg b/public/images/bottom-dark.svg
diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
@@ -4,6 +4,7 @@ import dynamic from "next/dynamic";
 import React, { useEffect, useState } from "react";
 import "@/lib/env";
 
+import Calculator from "@/components/Calculator";
 import CustomDashboardSection from "@/components/CustomDashboardSection";
 import DashboardSection from "@/components/DashboardSection";
 import IntroBlock from "@/components/IntroBlock";
@@ -19,6 +20,7 @@ const DashboardChart = dynamic(() => import("@/components/DashboardChart"), {
 
 const summary: SummaryLinksProps = [
   {
+    id: "intro",
     title: "Intro",
     sublinks: [
       {
@@ -40,6 +42,7 @@ const summary: SummaryLinksProps = [
     ],
   },
   {
+    id: "company",
     title: "Entreprises",
     sublinks: [
       {
@@ -61,6 +64,7 @@ const summary: SummaryLinksProps = [
     ],
   },
   {
+    id: "biondiversity",
     title: "Biodiversité",
     sublinks: [
       {
@@ -74,6 +78,7 @@ const summary: SummaryLinksProps = [
     ],
   },
   {
+    id: "health",
     title: "Human health",
     sublinks: [
       {
@@ -87,6 +92,7 @@ const summary: SummaryLinksProps = [
     ],
   },
   {
+    id: "animals",
     title: "Bien être animal",
     sublinks: [
       {
@@ -100,6 +106,7 @@ const summary: SummaryLinksProps = [
     ],
   },
   {
+    id: "climate",
     title: "Climat",
     sublinks: [
       {
@@ -109,6 +116,7 @@ const summary: SummaryLinksProps = [
     ],
   },
   {
+    id: "social",
     title: "Social",
     sublinks: [
       {
@@ -118,6 +126,7 @@ const summary: SummaryLinksProps = [
     ],
   },
   {
+    id: "alternative",
     title: "Alternatives",
     sublinks: [
       {
@@ -133,6 +142,23 @@ const DashboardPage = () => {
     <>
       <IntroBlock title="Les chiffres derrière l’histoire" />
       <Summary links={summary} />
+
+      <Calculator
+        data={[
+          { multiplicator: 18, label: "saumons abattus" },
+          {
+            multiplicator: 8107,
+            label: "poissons fourrages pêchés pour alimenter les saumons",
+          },
+          { multiplicator: 0.5, label: "tonnes de CO2 émis par l'industrie" },
+          {
+            multiplicator: 618,
+            label:
+              "Euros de chiffre d'affaire pour les entreprises leadeurs du marché",
+          },
+        ]}
+      />
+
       <section>
         <TitleBlock id="intro" title="Intro" />
         <SalmonCollapseSection />
@@ -238,11 +264,13 @@ const TopCountriesSection = () => {
           Evolution de l'élevage du saumon par pays
         </h3>
 
-        <DashboardChart
-          data={mapData.data}
-          layout={mapData.layout}
-          id="evolution-map"
-        />
+        <div className="flex md:justify-center min-h-[450px] overflow-y-auto">
+          <DashboardChart
+            data={mapData.data}
+            layout={mapData.layout}
+            id="evolution-map"
+          />
+        </div>
       </div>
     </>
   );

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import { Metadata } from "next";
 import { Barlow_Condensed, Montserrat } from "next/font/google";
 import * as React from "react";
@@ -60,7 +61,10 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="fr" className={`${barlow.variable} ${montserrat.variable}`}>
+    <html
+      lang="fr"
+      className={clsx(barlow.variable, montserrat.variable, "scroll-smooth")}
+    >
       <body>
         <Navbar />
         <main>{children}</main>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -217,7 +217,7 @@ const BusinessSection = () => {
           connaît depuis quelques décennies une hyper-croissance à l’échelle
           globale.
         </p>
-        <div className="flex justify-center">
+        <div className="flex md:justify-center min-h-[450px] overflow-y-auto bg-white">
           <Plot data={plot.data} layout={plot.layout} />
         </div>
       </div>

diff --git a/src/components/Calculator.tsx b/src/components/Calculator.tsx
@@ -0,0 +1,58 @@
+import clsx from "clsx";
+import React, { useEffect, useState } from "react";
+
+type CalculatorProps = {
+  data: {
+    multiplicator: number;
+    label: string;
+  }[];
+  className?: string;
+};
+
+const Calculator = ({ data, className, ...rest }: CalculatorProps) => {
+  const [seconds, setSeconds] = useState(0);
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setSeconds(seconds + 1);
+    }, 1000);
+
+    return () => clearInterval(timer);
+  });
+
+  if (!data.length) {
+    return <></>;
+  }
+
+  return (
+    <div
+      className={clsx(
+        "p-6 md:p-12 max-w-[1500px] mx-auto text-center",
+        className,
+      )}
+      {...rest}
+    >
+      <h2>
+        Voici les impacts de l'industrie du saumon dans le monde depuis que vous
+        avez ouvert cette page web.
+      </h2>
+      <div className="h4 pb-6 md:pb-12 text-red1">
+        {seconds} {seconds > 1 ? "secondes" : "seconde"}
+      </div>
+
+      <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 lg:gap-12">
+        {data.map((element, key) => (
+          <li key={key}>
+            <span className="h3 block p-2 md:p-4 text-red1">
+              {new Intl.NumberFormat("fr").format(
+                element.multiplicator * (seconds + 1),
+              )}
+            </span>
+            <span className="">{element.label}</span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+export default Calculator;
diff --git a/src/components/Edito.tsx b/src/components/Edito.tsx
@@ -3,7 +3,7 @@ import Image from "next/image";
 import Link from "next/link";
 import React from "react";
 
-const IconCard = ({
+const Edito = ({
   className,
   title,
   image,
@@ -101,4 +101,4 @@ const IconCard = ({
     </div>
   );
 };
-export default IconCard;
+export default Edito;
diff --git a/src/components/IntroBlock.tsx b/src/components/IntroBlock.tsx
@@ -19,11 +19,11 @@ const IntroBlock = ({
     <header
       className={clsx(
         className,
-        "flex p-6 lg:p-12 text-red1 bg-pink1",
-        image ? "h-screen min-h-[300px]" : "min-h-[660px]",
+        "flex p-6 lg:p-12 text-red1 bg-pink1 min-h-[300px]",
+        image ? "h-screen min-h-[300px]" : "lg:pt-60",
       )}
     >
-      <div className="grid grid-rows-[1fr, auto, 1fr] w-full">
+      <div className="grid grid-rows-[1fr, auto, 1fr] w-full max-w-[1500px] mx-auto">
         {image && (
           <Image
             src="/images/salmon.svg"

diff --git a/src/components/JoinBlock.tsx b/src/components/JoinBlock.tsx
@@ -67,7 +67,7 @@ const IntroBlock = ({
             saumon au monde, porte une responsabilité particulière dans
             l'orientation des pratiques.
           </p>
-          <div className="flex justify-center">
+          <div className="flex lg:justify-center min-h-[300px] overflow-y-auto bg-white">
             <Plot data={plot.data} layout={plot.layout} />
           </div>
         </div>

diff --git a/src/components/Summary.tsx b/src/components/Summary.tsx
@@ -1,7 +1,9 @@
 import clsx from "clsx";
-import React from "react";
+import Image from "next/image";
+import React, { useState } from "react";
 
 export type SummaryLinksProps = {
+  id: string;
   title: string;
   sublinks: {
     label: string;
@@ -16,37 +18,77 @@ const Summary = ({
   className?: string;
   links: SummaryLinksProps;
 }) => {
+  const [openMenu, setOpenMenu] = useState("");
+  const handleClickLink = (
+    e: React.MouseEvent<HTMLAnchorElement, MouseEvent>,
+    id: string,
+  ) => {
+    e.preventDefault();
+    setOpenMenu(openMenu === id ? "" : id);
+  };
+
   if (!links) {
     return <></>;
   }
 
   return (
     <nav
-      className={clsx(className, "bg-darkblue1 p-6 md:p-12 lg:py-20")}
-      aria-label="Navigation page"
+      className={clsx(className, "p-6 lg:p-12 text-red1 bg-pink1")}
+      aria-label="page"
     >
-      <div className="max-w-[1500px] mx-auto">
-        <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 gap-y-8 lg:gap-y-14">
-          {links.map((link, keyLink) => (
-            <li key={`link-${keyLink}`}>
-              <p className="h4 pb-6 text-red1">{link.title}</p>
+      <ul
+        role="menubar"
+        className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-6 2xl:grid-cols-8 max-w-[1500px] mx-auto bg-white text-darkblue1 rounded-md"
+      >
+        {links.map((link, keyLink) => (
+          <li role="none" className="flex-1 relative" key={`link-${keyLink}`}>
+            <a
+              role="menuitem"
+              aria-haspopup="true"
+              aria-expanded={openMenu === link.id}
+              href={`#${link.sublinks[0].targetId}`}
+              onClick={(e) => handleClickLink(e, link.id)}
+              className={clsx(
+                "min-w-max flex justify-between p-4 hover:bg-red1 hover:text-white",
+                openMenu === link.id ? "bg-red1 text-white" : "",
+              )}
+            >
+              {link.title}
+              <Image
+                src="/images/bottom-dark.svg"
+                alt=""
+                width="10"
+                height="7"
+                className="ml-2"
+              />
+            </a>
 
-              <ul className="space-y-4">
-                {link.sublinks.map((sublink, keySubLink) => (
-                  <li key={`link-${keyLink}-${keySubLink}`}>
-                    <a
-                      href={`#${sublink.targetId}`}
-                      className="block p-4 md:px-8 md:py-5 bg-white text-darkblue1 font-bold text-xl hover:bg-red1"
-                    >
-                      {sublink.label}
-                    </a>
-                  </li>
-                ))}
-              </ul>
-            </li>
-          ))}
-        </ul>
-      </div>
+            <ul
+              role="menu"
+              className={clsx(
+                "sm:absolute z-10 w-full bg-white",
+                openMenu === link.id ? "block" : "hidden",
+              )}
+              aria-label={link.title}
+            >
+              {link.sublinks.map((sublink, keySubLink) => (
+                <li key={`link-${keyLink}-${keySubLink}`}>
+                  <a
+                    href={`#${sublink.targetId}`}
+                    role="menuitem"
+                    className="block p-2 hover:text-red1"
+                    onClick={() => {
+                      setOpenMenu("");
+                    }}
+                  >
+                    {sublink.label}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </li>
+        ))}
+      </ul>
     </nav>
   );
 };