From a188c48e8a1a95907e7617ea665ab76fc0f8c04f Mon Sep 17 00:00:00 2001 From: Thomas Catinaud Taris Date: Wed, 29 May 2024 09:24:45 +0200 Subject: [PATCH] feat(dashboard): translate page part 2 --- messages/en/pages/dashboard.json | 122 ++++++++--- messages/fr/pages/dashboard.json | 102 +++++++--- src/app/[locale]/dashboard/dashboard.tsx | 246 ++++++++++------------- src/app/[locale]/layout.tsx | 1 - src/components/Calculator.tsx | 2 +- src/components/Chart.tsx | 59 ++++-- src/components/DashboardSection.tsx | 15 +- src/components/TitleBlock.tsx | 5 +- src/styles/globals.css | 7 + 9 files changed, 343 insertions(+), 216 deletions(-) diff --git a/messages/en/pages/dashboard.json b/messages/en/pages/dashboard.json index 35f6770cf..264639d73 100644 --- a/messages/en/pages/dashboard.json +++ b/messages/en/pages/dashboard.json @@ -4,62 +4,128 @@ "title": "Dashboard" }, "title": "The numbers behind the story", - "summary": { + "sections": { "intro": { - "title": "Intro", - "sublinks": { - "salmon-collapse-block": "Wild Altantic salmon collapse", - "hyper-growth-block": "Hyper-growth in salmon farming", - "top-10-block": "Main countries producing farmed salmon", - "intro-consumption-block": "Consumption" + "title": "Introduction", + "blocks": { + "salmon-collapse": { + "title": "Wild Altantic salmon collapse", + "content": "

The Atlantic salmon was added to the IUCN Red List of Threatened Species in December 2023.

This is largely due to overfishing, habitat degradation, particularly caused by dams blocking migratory routes, as well as climate change altering their environments, impacting their growth and survival rates.

" + }, + "hyper-growth": { + "title": "Hyper-growth in salmon farming", + "content": "

Salmon production has experienced unprecedented growth.

Nearly nonexistent 30 years ago, it surged to three million tons of salmon in 2021, equivalent to the farming and slaughtering of one billion salmon.

" + }, + "top-10": { + "title": "Main countries producing farmed salmon", + "content": "

Salmon require cold waters to grow, and thus production is concentrated in a few countries located far to the North or far to the South. Today, four countries alone account for 90% of the world's salmon production.

", + "subblock": { + "title": "Salmon farming evolution by country" + } + }, + "intro-consumption": { + "title": "Salmon Consumption", + "content": "

The United States is the largest consumer of salmon, followed by Japan and Russia. European countries are also significant consumers of salmon, with France leading the pack with a high consumption rate of 4.4kg per person per year.

" + } } }, "company": { - "title": "Companies", - "sublinks": { - "top-comp-block": "Main producers of open-net salmon", - "top-land-block": "The new threat: on land-based aquaculture farms", - "future-land-based-block": "The future of land-based aquaculture farms", - "companies-consumption-block": "Consumption" + "title": "Entreprises", + "blocks": { + "top-comp": { + "title": "Main producers of open-net salmon", + "content": "

Small artisanal salmon farms have given way to industrial aquaculture.

In a few decades, the market has become dominated by a handful of multinational corporations.

Mowi, formerly known as Marine Harvest, is the leader in the sector. The company operates in 25 countries.

" + }, + "top-land": { + "title": "The new threat: on land plants", + "mainContent": "

In 2021, the theoretical combined production capacity of land-based salmon farms amounted to 2.5 million tons, nearly equaling the global production of salmon in marine farms (2.7 million tons).

", + "content": "

Land-based farms use RAS technology (Recirculating Aquaculture Systems) in fully enclosed tanks. Whilst, this approach to salmon farming gives control over the impact on biodiversity and the local environment (limited disease contamination, rejection of feces and salmon escapes), it also requires large amount of fresh water and is very energy-hungry, as it aims to recreate very precisely the natural conditions found in the sea.

As a result, the carbon footprint of salmon produced on land is higher than salmon produced in marine farms.

In order to make such farms profitable, the fish density can be 3 times higher than in marine farms. And there has been a small number of accidents where large number of fish died as a result of inadequate water conditions and a fire at a plant in Denmark.

" + }, + "future-land-based": { + "title": "The future of land-based aquaculture farms", + "mainContent": "

A land-based farm producing 10,000 tons of salmon per year - if built - would require as much electricity as a city of 45,000 inhabitants (to be confirmed). Currently, there are several projects in Europe, including mega-farms aiming to produce 100,000 tons or more per year.

", + "content": "

Despite technological and profitability challenges, the industry is investing heavily in land-based farms, with a large number of projects announced over the past 5 years. Many farms are being planned or are under construction in Europe, Asia, the Middle East, and the United States to supply their local markets.

", + "data": [ + { + "title": "+91.1", + "content": "Combined land-based farm (RAS) projects could represent an increase of over 91% in global salmon production." + }, + { + "title": "291 Billion", + "content": "More than 290 billion wild fish, known as forage fish, will be harvested annually to produce the necessary meal to feed these new salmon." + }, + { + "title": "1.4 Million", + "content": "These same meals contain soy. 975,000 hectares will be required for soy production, equivalent to approximately 1.4 million football fields." + }, + { + "title": "15.8 Million", + "content": "The electricity consumption required for filtering, cooling, and circulating water in RAS farms is equivalent to the annual consumption of 15.8 million Europeans." + } + ] + }, + "companies-consumption": { + "title": "", + "mainContent": "

Les États-Unis sont de loin les plus gros consommateurs de saumon, suivis par le Japon et la Russie. Les pays européens sont également d’importants consommateurs de ce poisson. La consommation de saumon par habitant pour ces grands pays est d'environ 2 kg/personne/an et peut atteindre des valeurs supérieures à 5 kg/personne/an.

", + "content": "

La consommation apparente de saumon (toutes espèces confondues) est calculée comme la production, y compris l'aquaculture et la capture, plus les importations moins les exportations. Toutes les données sont fournies par la FAO. Les facteurs de conversion entre le poids du produit et le poids vif sont approximés à l'aide de la documentation de la FAQ

Ces approximations peuvent conduire à des indicateurs erronés, surtout dans les pays peu peuplés et/ou à forte production. C’est pour cette raison que la consommation par habitant n’est pas incluse dans le graphique.

" + } } }, "biodiversity": { "title": "Biodiversity", - "sublinks": { - "deforestation-block": "Deforestation", - "escapes-rates-block": "Escapes" + "blocks": { + "deforestation": { + "title": "Deforestation" + }, + "escapes-rates": { + "title": "Escapes" + } } }, "health": { "title": "Human health", - "sublinks": { - "antibiotic-conso-block": "Antibiotic consumption", - "microplastics-block": "Microplastic" + "blocks": { + "antibiotic-conso": { + "title": "Antibiotic consumption" + }, + "microplastics": { + "title": "Microplastic" + } } }, "animals": { "title": "Animal welfare", - "sublinks": { - "stress-onshore-block": "Stress in land-based facilities", - "mortality-rates-block": "Mortality rate" + "blocks": { + "stress-onshore": { + "title": "Stress in land-based facilities" + }, + "mortality-rates": { + "title": "Mortality rate" + } } }, "climate": { "title": "Climate", - "sublinks": { - "carbon-bomb-block": "Carbon impact" + "blocks": { + "carbon-bomb": { + "title": "Carbon impact" + } } }, "social": { "title": "Social", - "sublinks": { - "social-carbon-block": "Carbon impact" + "blocks": { + "social-carbon": { + "title": "Carbon impact" + } } }, "alternative": { "title": "Alternatives", - "sublinks": { - "alternatives-block": "Nutrition matrix" + "blocks": { + "alternatives": { + "title": "Nutrition matrix" + } } } }, diff --git a/messages/fr/pages/dashboard.json b/messages/fr/pages/dashboard.json index 6faaf4a62..70e919ed9 100644 --- a/messages/fr/pages/dashboard.json +++ b/messages/fr/pages/dashboard.json @@ -4,62 +4,110 @@ "title": "Dashboard" }, "title": "Les chiffres derrière l’histoire", - "summary": { + "sections": { "intro": { - "title": "Intro", - "sublinks": { - "salmon-collapse-block": "Effondrement du saumon sauvage de l'Atlantique", - "hyper-growth-block": "Hyper-croissance de l’élevage du saumon", - "top-10-block": "Principaux pays producteurs de saumon d'élevage", - "intro-consumption-block": "Consommation" + "title": "Introduction", + "blocks": { + "salmon-collapse": { + "title": "Effondrement du saumon sauvage de l'Atlantique", + "content": "

Le saumon atlantique est inscrit sur la Liste rouge de l'UICN des espèces menacées en décembre 2023.

Cela est dû en grande partie à la surpêche, à la dégradation de l'habitat, notamment due aux barrages bloquant les routes migratoires, mais aussi au changement climatique qui modifie leurs environnements, impactant leurs taux de croissance et de survie.

" + }, + "hyper-growth": { + "title": "Hyper-croissance de l’élevage du saumon", + "content": "

La production de saumon a connu une croissance sans précédent.

Quasi inexistante il y a 30 ans, elle a bondi à trois millions de tonnes de saumon en 2021, soit l’équivalent de l’élevage et de l’abattage d’un milliard de saumons.

" + }, + "top-10": { + "title": "Principaux pays producteurs de saumon d'élevage", + "content": "

Le saumon a besoin d'eaux froides pour croître et la production est donc concentrée dans quelques pays situés loin au nord ou au sud.

Aujourd'hui, quatre pays représentent à eux seuls 90 % de la production mondiale de saumon.

", + "subblock": { + "title": "Evolution de l'élevage du saumon par pays" + } + }, + "intro-consumption": { + "title": "Consommation de saumon", + "content": "

Les États-Unis sont les plus gros consommateurs de saumon, suivis par le Japon et la Russie. Les pays européens sont aussi d’importants consommateurs saumon, la France étant en tête de proue avec une consommation élevée qui atteint 4,4kg/an/personne.

" + } } }, "company": { "title": "Entreprises", - "sublinks": { - "top-comp-block": "Principaux producteurs de saumon en filet ouvert", - "top-land-block": "La nouvelle menace : sur fermes aquacoles terrestres", - "future-land-based-block": "Le futur des fermes aquacoles terrestres", - "companies-consumption-block": "Consommation" + "blocks": { + "top-comp": { + "title": "Principaux producteurs de saumon en filet ouvert", + "content": "

Les petites fermes salmonicoles artisanales ont cédé la place à l’aquaculture industrielle.

En quelques décennies, le marché est devenu dominé par une poignée de multinationales.

Mowi, anciennement Marine Harvest, est leader du secteur. L'entreprise est présente dans 25 pays.

" + }, + "top-land": { + "title": "La nouvelle menace : sur fermes aquacoles terrestres", + "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).

", + "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).

" + }, + "future-land-based": { + "title": "Le futur des fermes aquacoles terrestres", + "mainContent": "

Une ferme terrestre produisant 10 000 tonnes de saumon par an - si elle était construite - nécessiterait autant d'électricité qu'une ville de 39 215 habitant·e·s. Il existe actuellement plusieurs projets en Europe, dont des méga-fermes visant à produire 100 000 tonnes ou plus par an.

", + "content": "

Malgré les défis technologiques et de rentabilité, l'industrie investit massivement dans les fermes terrestres, avec un grand nombre de projets annoncés au cours des 5 dernières années. De nombreuses fermes envisagent d'être construites ou sont déjà en cours de construction en Europe, en Asie, au Moyen-Orient et aux États-Unis pour approvisionner leurs marchés locaux.

", + "data": [ + { + "title": "+91.1%", + "content": "Les projets combinés de fermes terrestres (RAS) pourraient représenter une augmentation de plus de 91 % de la production mondiale de saumon." + }, + { + "title": "291 Milliards", + "content": "Plus de 290 milliards de poissons sauvages, appelés poissons fourrage, seront pêchés pour produire la farine nécessaire chaque année à nourrir ces nouveaux saumons." + }, + { + "title": "1.4 Millions", + "content": "Ces mêmes farines contiennent du soja. 975 000 hectares seront nécessaires à la production de ce soja, l'équivalent d'environ 1,4 millions de terrains de football." + }, + { + "title": "15.8 Millions", + "content": "La consommation électrique nécessaire pour filtrer, refroidir et faire circuler l'eau des fermes RAS représente l'équivalent de la consommation annuelle de 15,8 millions d'européens." + } + ] + }, + "companies-consumption": { + "title": "Consommation", + "mainContent": "

Les États-Unis sont de loin les plus gros consommateurs de saumon, suivis par le Japon et la Russie. Les pays européens sont également d’importants consommateurs de ce poisson. La consommation de saumon par habitant pour ces grands pays est d'environ 2 kg/personne/an et peut atteindre des valeurs supérieures à 5 kg/personne/an.

", + "content": "

La consommation apparente de saumon (toutes espèces confondues) est calculée comme la production, y compris l'aquaculture et la capture, plus les importations moins les exportations. Toutes les données sont fournies par la FAO. Les facteurs de conversion entre le poids du produit et le poids vif sont approximés à l'aide de la documentation de la FAQ

Ces approximations peuvent conduire à des indicateurs erronés, surtout dans les pays peu peuplés et/ou à forte production. C’est pour cette raison que la consommation par habitant n’est pas incluse dans le graphique.

" + } } }, "biodiversity": { "title": "Biodiversité", - "sublinks": { - "deforestation-block": "Déforestation", - "escapes-rates-block": "Les évasions" + "blocks": { + "deforestation": { "title": "Déforestation" }, + "escapes-rates": { "title": "Les évasions" } } }, "health": { "title": "Human health", - "sublinks": { - "antibiotic-conso-block": "Consommation d'antibiotiques", - "microplastics-block": "Microplastique" + "blocks": { + "antibiotic-conso": { "title": "Consommation d'antibiotiques" }, + "microplastics": { "title": "Microplastique" } } }, "animals": { "title": "Bien être animal", - "sublinks": { - "stress-onshore-block": "Densité / stress dans usine à terre", - "mortality-rates-block": "Taux de mortalité" + "blocks": { + "stress-onshore": { "title": "Densité / stress dans usine à terre" }, + "mortality-rates": { "title": "Taux de mortalité" } } }, "climate": { "title": "Climat", - "sublinks": { - "carbon-bomb-block": "Impact carbone" + "blocks": { + "carbon-bomb": { "title": "Impact carbone" } } }, "social": { "title": "Social", - "sublinks": { - "social-carbon-block": "Impact carbone" + "blocks": { + "social-carbon": { "title": "Impact carbone" } } }, "alternative": { "title": "Alternatives", - "sublinks": { - "alternatives-block": "Matrice de nutrition" + "blocks": { + "alternatives": { "title": "Matrice de nutrition" } } } }, diff --git a/src/app/[locale]/dashboard/dashboard.tsx b/src/app/[locale]/dashboard/dashboard.tsx index eff6c81d7..318db988b 100644 --- a/src/app/[locale]/dashboard/dashboard.tsx +++ b/src/app/[locale]/dashboard/dashboard.tsx @@ -1,7 +1,7 @@ "use client"; import dynamic from "next/dynamic"; -import React, { useEffect, useState } from "react"; +import React from "react"; import "@/lib/env"; import Calculator from "@/components/Calculator"; @@ -11,7 +11,6 @@ import JoinBlock from "@/components/JoinBlock"; import { SummaryLinksProps } from "@/components/Summary"; import TitleBlock from "@/components/TitleBlock"; -import { fetchData } from "@/pages/api/chart"; import { useTranslations } from "next-intl"; const Chart = dynamic(() => import("@/components/Chart"), { @@ -23,116 +22,116 @@ const Dashboard = () => { const summary: SummaryLinksProps = [ { id: "intro", - title: t("summary.intro.title"), + title: t("sections.intro.title"), sublinks: [ { - label: t("summary.intro.sublinks.salmon-collapse-block"), + label: t("sections.intro.blocks.salmon-collapse.title"), targetId: "salmon-collapse-block", }, { - label: t("summary.intro.sublinks.hyper-growth-block"), + label: t("sections.intro.blocks.hyper-growth.title"), targetId: "hyper-growth-block", }, { - label: t("summary.intro.sublinks.top-10-block"), + label: t("sections.intro.blocks.top-10.title"), targetId: "top-10-block", }, /*{ - label: t("summary.intro.sublinks.intro-consumption-block"), + label: t("sections.intro.blocks.intro-consumption.title"), targetId: "intro-consumption-block", },*/ ], }, { id: "company", - title: t("summary.company.title"), + title: t("sections.company.title"), sublinks: [ { - label: t("summary.company.sublinks.top-comp-block"), + label: t("sections.company.blocks.top-comp.title"), targetId: "top-comp-block", }, { - label: t("summary.company.sublinks.top-land-block"), + label: t("sections.company.blocks.top-land.title"), targetId: "top-land-block", }, { - label: t("summary.company.sublinks.future-land-based-block"), + label: t("sections.company.blocks.future-land-based.title"), targetId: "future-land-based-block", }, /*{ - label: t("summary.company.sublinks.companies-consumption-block"), + label: t("sections.company.blocks.companies-consumption.title"), targetId: "companies-consumption-block", },*/ ], }, { id: "biodiversity", - title: t("summary.biodiversity.title"), + title: t("sections.biodiversity.title"), sublinks: [ { - label: t("summary.biodiversity.sublinks.deforestation-block"), + label: t("sections.biodiversity.blocks.deforestation.title"), targetId: "deforestation-block", }, { - label: t("summary.biodiversity.sublinks.escapes-rates-block"), + label: t("sections.biodiversity.blocks.escapes-rates.title"), targetId: "escapes-rates-block", }, ], }, { id: "health", - title: t("summary.health.title"), + title: t("sections.health.title"), sublinks: [ { - label: t("summary.health.sublinks.antibiotic-conso-block"), + label: t("sections.health.blocks.antibiotic-conso.title"), targetId: "antibiotic-conso-block", }, { - label: t("summary.health.sublinks.microplastics-block"), + label: t("sections.health.blocks.microplastics.title"), targetId: "microplastics-block", }, ], }, { id: "animals", - title: t("summary.animals.title"), + title: t("sections.animals.title"), sublinks: [ { - label: t("summary.animals.sublinks.stress-onshore-block"), + label: t("sections.animals.blocks.stress-onshore.title"), targetId: "stress-onshore-block", }, { - label: t("summary.animals.sublinks.mortality-rates-block"), + label: t("sections.animals.blocks.mortality-rates.title"), targetId: "mortality-rates-block", }, ], }, { id: "climate", - title: t("summary.climate.title"), + title: t("sections.climate.title"), sublinks: [ { - label: t("summary.climate.sublinks.carbon-bomb-block"), + label: t("sections.climate.blocks.carbon-bomb.title"), targetId: "carbon-bomb-block", }, ], }, { id: "social", - title: t("summary.social.title"), + title: t("sections.social.title"), sublinks: [ { - label: t("summary.social.sublinks.social-carbon-block"), + label: t("sections.social.blocks.social-carbon.title"), targetId: "social-carbon-block", }, ], }, { id: "alternative", - title: t("summary.alternative.title"), + title: t("sections.alternative.title"), sublinks: [ { - label: t("summary.alternative.sublinks.alternatives-block"), + label: t("sections.alternative.blocks.alternatives.title"), targetId: "alternatives-block", }, ], @@ -147,17 +146,19 @@ const Dashboard = () => { data={[ { multiplicator: 18, label: t("calculator.salmon") }, { - multiplicator: 8107, label: t("calculator.fish"), + multiplicator: 8107, + label: t("calculator.fish"), }, { multiplicator: 0.5, label: t("calculator.companies") }, { - multiplicator: 618, label: t("calculator.money") + multiplicator: 618, + label: t("calculator.money"), }, ]} />
- + @@ -165,37 +166,37 @@ const Dashboard = () => {
- + {/* */}
- +
- +
- +
- +
- +
@@ -207,45 +208,49 @@ const Dashboard = () => { export default Dashboard; const SalmonCollapseSection = () => { + const t = useTranslations("dashboard"); + return ( ); }; const SalmonFarmingSection = () => { + const t = useTranslations("dashboard"); + return ( ); }; const TopCountriesSection = () => { + const t = useTranslations("dashboard"); + return ( <>
-

- Evolution de l'élevage du saumon par pays +

+ {t("sections.intro.blocks.top-10.subblock.title")}

-
- -
+
); @@ -253,11 +258,13 @@ const TopCountriesSection = () => { /* const SalmonConsumptionSection = () => { + const t = useTranslations("dashboard"); + return ( ); @@ -265,120 +272,72 @@ const SalmonConsumptionSection = () => { */ const MainProductionSection = () => { + const t = useTranslations("dashboard"); + return ( ); }; const LandPlantsSection = () => { - const [mapData, setMapData] = useState(""); - const fetchGraphData = async () => { - const mapResponse = await fetchData("maps", "ras-map", false); - setMapData(mapResponse); - }; - useEffect(() => { - fetchGraphData(); - }, []); - - if (!mapData) { - return <>; + const t = useTranslations("dashboard"); + const data = []; + for (let i = 0; i < 4; i++) { + data.push({ + title: t(`sections.company.blocks.future-land-based.data.${i}.title`), + content: t(`sections.company.blocks.future-land-based.data.${i}.content`), + }); } + return ( <> +
-

- Le futur des fermes aquacoles terrestres +

+ {t("sections.company.blocks.future-land-based.title")}

-

- Une ferme terrestre produisant 10 000 tonnes de saumon par an - si - elle était construite - nécessiterait autant d'électricité qu'une - ville de 39 215 habitant·e·s. Il existe actuellement plusieurs - projets en Europe, dont des méga-fermes visant à produire 100 000 - tonnes ou plus par an. -

-

- Malgré les défis technologiques et de rentabilité, l'industrie - investit massivement dans les fermes terrestres, avec un grand - nombre de projets annoncés au cours des 5 dernières années. De - nombreuses fermes envisagent d'être construites ou sont déjà en - cours de construction en Europe, en Asie, au Moyen-Orient et aux - États-Unis pour approvisionner leurs marchés locaux. -

+
+
-
-
-

+91.1%

-

- Les projets combinés de fermes terrestres (RAS) pourraient - représenter une augmentation de plus de 91 % de la production - mondiale de saumon. -

-
-
-

291 Milliards

-

- Plus de 290 milliards de poissons sauvages, appelés poissons - fourrage, seront pêchés pour produire la farine nécessaire chaque - année à nourrir ces nouveaux saumons. -

-
-
-

1.4 Millions

-

- Ces mêmes farines contiennent du soja. 975 000 hectares seront - nécessaires à la production de ce soja, l'équivalent d'environ 1,4 - millions de terrains de football. -

-
-
-

15.8 Millions

-

- La consommation électrique nécessaire pour filtrer, refroidir et - faire circuler l'eau des fermes RAS représente l'équivalent de la - consommation annuelle de 15,8 millions d'européens. -

-
+
+ {data.map((d, key) => ( +
+

{d.title}

+

{d.content}

+
+ ))}
-