feat: dashboard page

src/app/about/page.tsx

@@ -2,7 +2,6 @@
 
 import * as React from "react";
 import "@/lib/env";
-
 import IntroBlock from "@/components/IntroBlock";
 
 const AboutPage = () => {

src/app/dashboard/page.tsx

@@ -66,33 +66,46 @@ const summary: SummaryLinksProps = [
     ],
   },
   {
-    title: "Condition animale",
+    title: "Human health",
     sublinks: [
       {
-        label: "Stress dans usine à terre",
-        targetId: "salmon-collapse",
+        label: "Antibiotic consumption",
+        targetId: "antibiotic-conso",
       },
       {
-        label: "Taux de mortalité",
-        targetId: "hyper-growth",
+        label: "Microplastics",
+        targetId: "microplastics",
       },
     ],
   },
   {
-    title: "Climat",
+    title: "Animal welfare",
     sublinks: [
       {
-        label: "Carbone",
-        targetId: "salmon-collapse",
+        label: "Density / stress in onshore factory",
+        targetId: "stress-onshore",
+      },
+      {
+        label: "Mortality rate",
+        targetId: "mortality-rates",
+      },
+    ],
+  },
+  {
+    title: "Climate",
+    sublinks: [
+      {
+        label: "Carbon",
+        targetId: "carbon-bomb",
       },
     ],
   },
   {
     title: "Social",
     sublinks: [
       {
-        label: "Social",
-        targetId: "salmon-collapse",
+        label: "Carbon",
+        targetId: "social-carbon",
       },
     ],
   },
@@ -136,6 +149,28 @@ const DashboardPage = () => {
       <section>
         <TitleBlock id="human-health" title="Santé humaine" />
         <AntibioticSection />
+        <MicroplasticSection />
+      </section>
+
+      <section>
+        <TitleBlock id="animal-welfare" title="Animal welfare" />
+        <StressOnshoreSection />
+        <MortalityRateSection />
+      </section>
+
+      <section>
+        <TitleBlock id="climate" title="Climate" />
+        <CarbonSection />
+      </section>
+
+      <section>
+        <TitleBlock id="social" title="Social" />
+        <SocialCarbonSection />
+      </section>
+
+      <section>
+        <TitleBlock id="alternatives" title="Alternatives" />
+        <NutritionMatrixSection />
       </section>
 
       <JoinBlock headDark={false} />
@@ -226,29 +261,41 @@ const MainProductionSection = () => {
 };
 
 const LandPlantsSection = () => {
+  const [mapData, setMapData] = useState("");
+  const fetchGraphData = async () => {
+    const mapResponse = await fetchData("maps", "ras-map", false);
+    setMapData(mapResponse);
+  };
+  useEffect(() => {
+    fetchGraphData();
+  }, []);
+  console.log(mapData);
+  if (!mapData) {
+    return <></>;
+  }
   return (
     <>
       <DashboardSection
         title="La nouvelle menace: Les fermes aquacoles terrestres"
         id="top-land"
         mainContent="
-        En 2021, la capacité de production théorique combinée des élevages terrestres 
-        de saumon s’élève à 2,5 millions de tonnes, soit presque autant que la production 
-        mondiale de saumon dans les élevages marins (2,7 millions de tonnes)."
+    En 2021, la capacité de production théorique combinée des élevages terrestres
+    de saumon s’élève à 2,5 millions de tonnes, soit presque autant que la production
+    mondiale de saumon dans les élevages marins (2,7 millions de tonnes)."
         content="
-        Les fermes terrestres utilisent la technologie RAS (Recycled Aquaculture Systems) 
-        dans des réservoirs entièrement fermés. Si cette approche de l'élevage du saumon permet de 
-        limiter l'impact sur la biodiversité et l'environnement local (contamination limitée par les maladies, 
-        rejet des excréments et des évasions de saumons), elle nécessite également de grandes quantités 
-        d'eau douce et est très gourmande en énergie, car elle vise à recréer très précisément 
-        les conditions de l’habitat naturel des saumons.
-        En conséquence, l’empreinte carbone du saumon produit sur terre est plus élevée que celle 
-        du saumon produit dans les fermes marines. Afin de rentabiliser de telles fermes, 
-        la densité de poissons peut être 3 fois plus élevée que dans les fermes marines. 
-        La technologie n’est pas encore totalement maîtrisée : actuellement, aucune usine en 
-        fonctionnement ne produit plus de 5 000 tonnes et les incidents techniques sont fréquents. 
-        Une usine au Danemark en a subi cinq, résultant de défaillances techniques 
-        (pollution au chlorure de fer dans le fjord, incendie complet de son usine, engendrant pollution de l’air et de l’eau)."
+    Les fermes terrestres utilisent la technologie RAS (Recycled Aquaculture Systems)
+    dans des réservoirs entièrement fermés. Si cette approche de l'élevage du saumon permet de
+    limiter l'impact sur la biodiversité et l'environnement local (contamination limitée par les maladies,
+    rejet des excréments et des évasions de saumons), elle nécessite également de grandes quantités
+    d'eau douce et est très gourmande en énergie, car elle vise à recréer très précisément
+    les conditions de l’habitat naturel des saumons.
+    En conséquence, l’empreinte carbone du saumon produit sur terre est plus élevée que celle
+    du saumon produit dans les fermes marines. Afin de rentabiliser de telles fermes,
+    la densité de poissons peut être 3 fois plus élevée que dans les fermes marines.
+    La technologie n’est pas encore totalement maîtrisée : actuellement, aucune usine en
+    fonctionnement ne produit plus de 5 000 tonnes et les incidents techniques sont fréquents.
+    Une usine au Danemark en a subi cinq, résultant de défaillances techniques
+    (pollution au chlorure de fer dans le fjord, incendie complet de son usine, engendrant pollution de l’air et de l’eau)."
       />
       <div
         id="future-land-based"
@@ -310,11 +357,12 @@ const LandPlantsSection = () => {
         </div>
         <iframe
           title="Land plants map"
-          src="/iframes/map-land-plan.html"
+          id="ras-map"
+          srcDoc={mapData}
           width={1000}
           height={900}
           className="w-full"
-        ></iframe>
+        />
       </div>
     </>
   );
@@ -348,7 +396,7 @@ const EscapeSection = () => {
       title="Les évasions"
       id="escapes-rates"
       content="De 2018 à 2022, plus de 4 000 000 de saumons se sont échappés des élevages des 11 plus grands producteurs*. Ces saumons menacent la faune car ils... [source].
-      
+
       *Aucune donnée de Cooke n’a été trouvée."
     />
   );
@@ -364,3 +412,82 @@ const AntibioticSection = () => {
     />
   );
 };
+
+const MicroplasticSection = () => {
+  return (
+    <CustomDashboardSection
+      title="Microplastics"
+      src="/images/microplastics.webp"
+      id="microplastics"
+      content="A 5 kg salmon contains approximately 575 microplastics.
+      An average French person consuming 4.4 kg of salmon per year will ingest around 575 microplastics per year out of a total of 97,500 from various sources.
+      Microplastics are particularly prevalent in salmon due to bioaccumulation in the food chain and the affinity of plastics for fats.
+      This affects mainly farmed salmon, which are significantly fattier and live in environments rich in plastics."
+    />
+  );
+};
+
+const StressOnshoreSection = () => {
+  return (
+    <CustomDashboardSection
+      title="Density / stress in onshore factory"
+      src="/images/stress.webp"
+      id="stress-onshore"
+      content="The density of salmon is three times higher in onshore factories compared to already dense sea farms, for reasons of profitability.
+      The consequences can be numerous:
+      mass mortality linked to pathogens, higher levels of stress."
+    />
+  );
+};
+
+const MortalityRateSection = () => {
+  return (
+    <DashboardSection
+      title="Mortality Rate"
+      id="mortality-rates"
+      mainContent="Mortality rates vary considerably from one producer to another and from year to year. Exceptionally high rates are observed, reaching 20% in some years."
+      content="If Norway is claiming to have less than 99% of its aquaculture antibiotics-free, other countries are not as vertuous. In Chile, the use of antibiotics has increased by 1/3 since covid-crisis.  In Chile: 421 tonnes of atb used for the 17 major producers, i.e. 0.04% (tonnes of atb /tonne of fish produced) on average. Rates diminished in 2018, but because of the covid crisis, they have risen again in 2021 to reach a rate of tonnes atb/tonnes fish i.e., 1/3 higher than in 2018."
+    />
+  );
+};
+
+const CarbonSection = () => {
+  return (
+    <DashboardSection
+      title="Carbon"
+      id="carbon-bomb"
+      content="
+      The salmon industry emitted approximately 16 million tonnes of CO2 in 2021, similar to a country like Slovenia or the emissions target of 8 million humans by 2050.
+      About 90% of the total emissions come from the value chain, mainly from fish feed and transportation.
+      This figure is extrapolated from the emissions of 9 of the largest salmon producers."
+    />
+  );
+};
+
+const SocialCarbonSection = () => {
+  return (
+    <CustomDashboardSection
+      title="Carbon"
+      src="/images/social-carbon.webp"
+      id="social-carbon"
+      mainContent="In 2020, 3% of all fish caught worldwide were raised for Atlantic salmon (2.72 million tonnes)."
+      content="
+      As salmon are carnivorous, they need to be fed with fishmeal. On average, farmed salmon consume the equivalent of 5 times their own weight in fish sourced from industrial fishing. This kind of overfishing has had numerous negative social impacts, as seen in Mauritania and Gambia, where the quantity of fish in the sea has diminished, and the few fish caught are bought by industries for an insignificant price, limiting employment opportunities and the local community's access to one of their main sources of food.
+      [Article on the impact of industrial fishing] -> [here] (or another)
+      Global annual catches of fish, shellfish, and crustaceans are projected to reach around 90 million tonnes by 2020. The vast majority of this volume is intended for human consumption (about 70 million tonnes). Then, nearly half of what remains (42%) is used for global fishmeal production, supplying the aquaculture sector (for fish farming)."
+    />
+  );
+};
+
+const NutritionMatrixSection = () => {
+  return (
+    <DashboardSection
+      title="Nutrition matrix / ethical alternative"
+      id="alternatives"
+      mainContent="Despite some nutritional advantages, which are nonetheless replaceable, the negative environmental and social impacts of salmon should prompt us to consider alternatives in our diet."
+      content="As you can see, there are many reasons why salmon consumption is problematic. So why do we eat so much of it? Firstly, the storytelling surrounding salmon conveys a very positive image (for special occasions, desirable...), but we also hear a lot of good things about its nutritional benefits.
+      It seems interesting to put these nutritional benefits into perspective, taking into account the various impacts on health, the environment, and society. This will give us a comprehensive view of the consequences of salmon consumption, but will also help us discover alternatives to this product,
+      which could be as good for us as they are for the environment and the rest of humanity."
+    />
+  );
+};

src/app/page.tsx

@@ -15,7 +15,6 @@ import Edito from "@/components/Edito";
 import IconCard from "@/components/IconCard";
 import IntroBlock from "@/components/IntroBlock";
 import JoinBlock from "@/components/JoinBlock";
-
 import { fetchData } from "@/pages/api/chart";
 
 const HomePage = () => {

src/app/to-act/page.tsx

@@ -2,7 +2,6 @@
 
 import * as React from "react";
 import "@/lib/env";
-
 import IntroBlock from "@/components/IntroBlock";
 
 const ToActPage = () => {

src/pages/api/chart.ts

@@ -1,5 +1,9 @@
 "use server";
-export const fetchData = async (apiPath: string, chartName: string) => {
+export const fetchData = async (
+  apiPath: string,
+  chartName: string,
+  parse = true,
+) => {
   const dataUrl = process.env.PINKBOMBS_DATA_URL;
   const apiKey = process.env.PINKBOMBS_DATA_API_KEY;
   try {
@@ -15,6 +19,9 @@ export const fetchData = async (apiPath: string, chartName: string) => {
     }
 
     const data = await response.json();
+    if (!parse) {
+      return data.graph;
+    }
     return JSON.parse(data.graph);
   } catch (error) {
     return null;