feat: init MetaChart component

dataforgoodfr · May 30, 2024 · 9d3344d · 9d3344d
1 parent 3e92870
commit 9d3344d
Show file tree

Hide file tree

Showing 10 changed files with 240 additions and 175 deletions.
diff --git a/messages/en/components.json b/messages/en/components.json
@@ -27,7 +27,7 @@
       "content": "France, located in the top 3 of the largest consumers of salmon in the world, bears a particular responsibility in guiding practices.",
       "act": "To reverse the trend and stop the disaster, urgent action is needed. We have levers for action!",
       "link": "We act",
-      "source": "",
+      "source": "https://www.fao.org/fishery/en/collection/aquaculture?lang=en",
       "data": "https://raw.githubusercontent.com/dataforgoodfr/12_pinkbombs/main/data/numbers_salmons_farmed_1.0.csv",
       "artifact": "numbers_salmons_farmed_1.0.csv"
     },

diff --git a/messages/en/pages/dashboard.json b/messages/en/pages/dashboard.json
@@ -30,7 +30,7 @@
             "artifact": "top_10_countries_producing_1.3.csv",
             "subblock": {
               "title": "Salmon farming evolution by country",
-              "source": "",
+              "source": "https://www.fao.org/fishery/en/collection/aquaculture?lang=en",
               "data": "https://raw.githubusercontent.com/dataforgoodfr/12_pinkbombs/main/data/evolution_salmon_farming_country_iso_1.4.csv",
               "artifact": "evolution_salmon_farming_country_iso_1.4.csv"
             }

diff --git a/messages/fr/components.json b/messages/fr/components.json
@@ -27,7 +27,7 @@
       "content": "La France, située dans le top 3 des plus gros consommateurs de saumon au monde, porte une responsabilité particulière dans l'orientation des pratiques.",
       "act": "Pour inverser la tendance et stopper le désastre, il est urgent d’agir. On a des leviers d’action !",
       "link": "On agit",
-      "source": "anglais",
+      "source": "https://www.fao.org/fishery/fr/collection/aquaculture?lang=fr",
       "data": "https://raw.githubusercontent.com/dataforgoodfr/12_pinkbombs/main/data/numbers_salmons_farmed_1.0_fr.csv",
       "artifact": "numbers_salmons_farmed_1.0_fr.csv"
     },

diff --git a/messages/fr/pages/dashboard.json b/messages/fr/pages/dashboard.json
@@ -30,7 +30,7 @@
             "artifact": "top_10_countries_producing_1.3_fr.csv",
             "subblock": {
               "title": "Evolution de l'élevage du saumon par pays",
-              "source": "anglais",
+              "source": "https://www.fao.org/fishery/fr/collection/aquaculture?lang=fr",
               "data": "https://raw.githubusercontent.com/dataforgoodfr/12_pinkbombs/main/data/evolution_salmon_farming_country_iso_1.4_fr.csv",
               "artifact": "evolution_salmon_farming_country_iso_1.4_fr.csv"
             }

diff --git a/src/app/[locale]/dashboard/dashboard.tsx b/src/app/[locale]/dashboard/dashboard.tsx
@@ -9,9 +9,9 @@ import Calculator from "@/components/Calculator";
 import DashboardSection from "@/components/DashboardSection";
 import IntroBlock from "@/components/IntroBlock";
 import JoinBlock from "@/components/JoinBlock";
-import MetaItem from "@/components/MetaItem";
 import { SummaryLinksProps } from "@/components/Summary";
 import TitleBlock from "@/components/TitleBlock";
+import MetaChart from "@/components/MetaChart";
 
 const Chart = dynamic(() => import("@/components/Chart"), {
   ssr: false,
@@ -173,7 +173,10 @@ const Dashboard = () => {
       </section>
 
       <section>
-        <TitleBlock id="biodiversity-section" title={t("sections.biodiversity.title")} />
+        <TitleBlock
+          id="biodiversity-section"
+          title={t("sections.biodiversity.title")}
+        />
         <DeforestationSection />
         <EscapeSection />
       </section>
@@ -216,15 +219,23 @@ const SalmonCollapseSection = () => {
       id="salmon-collapse"
       content={t.raw("sections.intro.blocks.salmon-collapse.content")}
       meta={{
-        source: {
-          link: "https://nasco.int/ices-2/statistics/",
-          moreInfo: t("sections.intro.blocks.salmon-collapse.source"),
-        },
-        methodology: { link: "/to-act#" },
-        data: {
-          link: t("sections.intro.blocks.salmon-collapse.data"),
-          artifact: t("sections.intro.blocks.salmon-collapse.artifact"),
-        },
+        data: [
+          {
+            type: "source",
+            isBlank: true,
+            link: "https://nasco.int/ices-2/statistics/",
+            moreInfo: t("sections.intro.blocks.salmon-collapse.source"),
+          },
+          {
+            type: "methodology",
+            link: "/to-act#",
+          },
+          {
+            type: "data",
+            link: t("sections.intro.blocks.salmon-collapse.data"),
+            artifact: t("sections.intro.blocks.salmon-collapse.artifact"),
+          },
+        ],
       }}
       hasChart
     />
@@ -240,15 +251,23 @@ const SalmonFarmingSection = () => {
       id="hyper-growth"
       content={t.raw("sections.intro.blocks.hyper-growth.content")}
       meta={{
-        source: {
-          link: "https://www.fao.org/fishery/en/collection/aquaculture?lang=en",
-          moreInfo: t("sections.intro.blocks.hyper-growth.source"),
-        },
-        methodology: { link: "/to-act#" },
-        data: {
-          link: t("sections.intro.blocks.hyper-growth.data"),
-          artifact: t("sections.intro.blocks.hyper-growth.artifact"),
-        },
+        data: [
+          {
+            type: "source",
+            isBlank: true,
+            link: "https://www.fao.org/fishery/en/collection/aquaculture?lang=en",
+            moreInfo: t("sections.intro.blocks.hyper-growth.source"),
+          },
+          {
+            type: "methodology",
+            link: "/to-act#",
+          },
+          {
+            type: "data",
+            link: t("sections.intro.blocks.hyper-growth.data"),
+            artifact: t("sections.intro.blocks.hyper-growth.artifact"),
+          },
+        ],
       }}
       hasChart
     />
@@ -265,15 +284,23 @@ const TopCountriesSection = () => {
         id="top-10"
         content={t.raw("sections.intro.blocks.top-10.content")}
         meta={{
-          source: {
-            link: "https://www.fao.org/fishery/en/collection/aquaculture?lang=en",
-            moreInfo: t("sections.intro.blocks.top-10.source"),
-          },
-          methodology: { link: "/to-act#" },
-          data: {
-            link: t("sections.intro.blocks.top-10.data"),
-            artifact: t("sections.intro.blocks.top-10.artifact"),
-          },
+          data: [
+            {
+              type: "source",
+              isBlank: true,
+              link: "https://www.fao.org/fishery/en/collection/aquaculture?lang=en",
+              moreInfo: t("sections.intro.blocks.top-10.source"),
+            },
+            {
+              type: "methodology",
+              link: "/to-act#",
+            },
+            {
+              type: "data",
+              link: t("sections.intro.blocks.top-10.data"),
+              artifact: t("sections.intro.blocks.top-10.artifact"),
+            },
+          ],
         }}
         hasChart
       />
@@ -283,26 +310,25 @@ const TopCountriesSection = () => {
           {t("sections.intro.blocks.top-10.subblock.title")}
         </h3>
 
-        <Chart id="evolution-map" type="maps" className="min-h-[700px]" />
-        <ul className="flex flex-wrap gap-4 mt-4 p-2 p-caption rounded-sm bg-gray-50">
-          <li>
-            <MetaItem
-              data="source"
-              link="https://www.fao.org/fishery/en/collection/aquaculture?lang=en"
-              moreInfo={t("sections.intro.blocks.top-10.subblock.source")}
-            />
-          </li>
-          <li>
-            <MetaItem data="methodology" link="/to-act#tendances" />
-          </li>
-          <li>
-            <MetaItem
-              data="data"
-              link={t("sections.intro.blocks.top-10.subblock.data")}
-              artifact={t("sections.intro.blocks.top-10.subblock.artifact")}
-            />
-          </li>
-        </ul>
+        <Chart id="evolution-map" className="min-h-[700px]" />
+        <MetaChart
+          data={[
+            {
+              type: "source",
+              link: t("sections.intro.blocks.top-10.subblock.source"),
+              isBlank: true,
+            },
+            {
+              type: "methodology",
+              link: "/to-act#tendances",
+            },
+            {
+              type: "data",
+              link: t("sections.intro.blocks.top-10.subblock.data"),
+              artifact: t("sections.intro.blocks.top-10.subblock.artifact"),
+            },
+          ]}
+        />
       </div>
     </>
   );
@@ -332,15 +358,23 @@ const MainProductionSection = () => {
       id="top-comp"
       content={t.raw("sections.company.blocks.top-comp.content")}
       meta={{
-        source: {
-          link: "https://mowi.com/wp-content/uploads/2023/06/2023-Salmon-Farming-Industry-Handbook-2023.pdf",
-          moreInfo: t("sections.company.blocks.top-comp.source"),
-        },
-        methodology: { link: "/to-act#" },
-        data: {
-          link: t("sections.company.blocks.top-comp.data"),
-          artifact: t("sections.company.blocks.top-comp.artifact"),
-        },
+        data: [
+          {
+            type: "source",
+            artifact: "2023-Salmon-Farming-Industry-Handbook-2023.pdf",
+            link: "https://mowi.com/wp-content/uploads/2023/06/2023-Salmon-Farming-Industry-Handbook-2023.pdf",
+            moreInfo: t("sections.company.blocks.top-comp.source"),
+          },
+          {
+            type: "methodology",
+            link: "/to-act#",
+          },
+          {
+            type: "data",
+            link: t("sections.company.blocks.top-comp.data"),
+            artifact: t("sections.company.blocks.top-comp.artifact"),
+          },
+        ],
       }}
       hasChart
     />
@@ -365,11 +399,17 @@ const LandPlantsSection = () => {
         mainContent={t.raw("sections.company.blocks.top-land.mainContent")}
         content={t.raw("sections.company.blocks.top-land.content")}
         meta={{
-          methodology: { link: "/to-act#" },
-          data: {
-            link: t("sections.company.blocks.top-comp.data"),
-            artifact: t("sections.company.blocks.top-comp.artifact"),
-          },
+          data: [
+            {
+              type: "methodology",
+              link: "/to-act#",
+            },
+            {
+              type: "data",
+              link: t("sections.company.blocks.top-comp.data"),
+              artifact: t("sections.company.blocks.top-comp.artifact"),
+            },
+          ],
         }}
         hasChart
       />
@@ -407,11 +447,15 @@ const LandPlantsSection = () => {
             </div>
           ))}
         </div>
-        <ul className="flex flex-wrap gap-4 mt-4 mb-20 p-2 p-caption rounded-sm bg-gray-50">
-          <li>
-            <MetaItem data="methodology" link="/to-act#tendances" />
-          </li>
-        </ul>
+        <MetaChart
+          data={[
+            {
+              type: "methodology",
+              link: "/to-act#tendances",
+            },
+          ]}
+        />
+
         <Chart id="ras-map" type="maps" className="min-h-[900px]" />
       </div>
     </>

diff --git a/src/components/Chart.tsx b/src/components/Chart.tsx
@@ -58,7 +58,7 @@ const Chart = ({
     return (
       <p
         className={clsx(
-          "flex items-center justify-center p-caption text-center bg-gray-50 min-h-[300px]",
+          "flex items-center justify-center p-caption text-center bg-gray-50 min-h-[450px]",
           className,
         )}
       >
@@ -88,7 +88,7 @@ const Chart = ({
             height,
           }}
           config={{ responsive: true }}
-          className={clsx("!block min-h-[300px]", className)}
+          className={clsx("!block min-h-[450px]", className)}
         />
       )}
     </>

diff --git a/src/components/DashboardSection.tsx b/src/components/DashboardSection.tsx
@@ -3,7 +3,7 @@ import dynamic from "next/dynamic";
 import Image from "next/image";
 import React, { ReactNode } from "react";
 
-import MetaItem, { chartMeta } from "@/components/MetaItem";
+import MetaChart, { MetaChartProps } from "@/components/MetaChart";
 
 const Chart = dynamic(() => import("@/components/Chart"), {
   ssr: false,
@@ -18,14 +18,7 @@ type DashboardSectionProps = {
   cta?: ReactNode;
   src?: string;
   hasChart?: boolean;
-  meta?: Record<
-    (typeof chartMeta)[number],
-    {
-      link: string;
-      moreInfo?: string;
-      artifact?: string;
-    }
-  >;
+  meta?: MetaChartProps;
 };
 
 const DashboardSection = ({
@@ -81,15 +74,7 @@ const DashboardSection = ({
 
           {hasChart ? <Chart id={id} className="min-h-[300px]" /> : null}
 
-          {meta ? (
-            <ul className="flex flex-wrap gap-4 mt-4 p-2 p-caption rounded-sm bg-gray-50">
-              {Object.keys(meta).map((data, key) => (
-                <li key={`meta-${key}`}>
-                  <MetaItem data={data} {...meta[data]} />
-                </li>
-              ))}
-            </ul>
-          ) : null}
+          {meta ? <MetaChart {...meta} /> : null}
         </div>
       </div>
     </div>

diff --git a/src/components/JoinBlock.tsx b/src/components/JoinBlock.tsx
@@ -9,7 +9,7 @@ const Chart = dynamic(() => import("@/components/Chart"), {
 });
 
 import PrimaryButton from "@/components/buttons/PrimaryButton";
-import MetaItem from "@/components/MetaItem";
+import MetaChart from "@/components/MetaChart";
 
 const IntroBlock = ({
   className,
@@ -50,25 +50,25 @@ const IntroBlock = ({
           </p>
           <p className="pb-4 md:pb-16 max-w-3xl">{t("join.content")}</p>
           <Chart id="alternatives" height={700} />
-          <ul className="flex flex-wrap justify-center gap-4 p-caption">
-            <li>
-              <MetaItem
-                data="source"
-                link="https://www.fao.org/fishery/en/collection/aquaculture?lang=en"
-                moreInfo={t("join.source")}
-              />
-            </li>
-            <li>
-              <MetaItem data="methodology" link="/to-act#tendances" />
-            </li>
-            <li>
-              <MetaItem
-                data="data"
-                link={t("join.data")}
-                artifact={t("join.artifact")}
-              />
-            </li>
-          </ul>
+          <MetaChart
+            hasBackground={false}
+            data={[
+              {
+                type: "source",
+                link: t("join.source"),
+                isBlank: true,
+              },
+              {
+                type: "methodology",
+                link: "/to-act#tendances",
+              },
+              {
+                type: "data",
+                link: t("join.data"),
+                artifact: t("join.artifact"),
+              },
+            ]}
+          />
         </div>
       </div>