From 9d3344df73d21897c0ea38d87aa0a8858ca8c164 Mon Sep 17 00:00:00 2001 From: Thomas Catinaud Taris Date: Thu, 30 May 2024 21:39:12 +0200 Subject: [PATCH 1/3] feat: init MetaChart component --- messages/en/components.json | 2 +- messages/en/pages/dashboard.json | 2 +- messages/fr/components.json | 2 +- messages/fr/pages/dashboard.json | 2 +- src/app/[locale]/dashboard/dashboard.tsx | 180 ++++++++++++++--------- src/components/Chart.tsx | 4 +- src/components/DashboardSection.tsx | 21 +-- src/components/JoinBlock.tsx | 40 ++--- src/components/MetaChart.tsx | 99 +++++++++++++ src/components/MetaItem.tsx | 63 -------- 10 files changed, 240 insertions(+), 175 deletions(-) create mode 100644 src/components/MetaChart.tsx delete mode 100644 src/components/MetaItem.tsx diff --git a/messages/en/components.json b/messages/en/components.json index e630857f1..11e3d067c 100644 --- 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 index 5339c925f..048fb6972 100644 --- 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 index b49fea109..0aa2ee0d4 100644 --- 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 index 8ee35ea66..e0136f9b1 100644 --- 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 index 62cfe3eb0..6d670ae91 100644 --- 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 = () => {
- +
@@ -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")} - - + + ); @@ -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 = () => { ))} -
    -
  • - -
    • -
+ + diff --git a/src/components/Chart.tsx b/src/components/Chart.tsx index 132700715..60ed1ed48 100644 --- a/src/components/Chart.tsx +++ b/src/components/Chart.tsx @@ -58,7 +58,7 @@ const Chart = ({ return (

@@ -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 index a67c70b23..f3b048dd5 100644 --- 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 ? : null} - {meta ? ( -

    - {Object.keys(meta).map((data, key) => ( -
  • - -
    • - ))} -
- ) : null} + {meta ? : null} diff --git a/src/components/JoinBlock.tsx b/src/components/JoinBlock.tsx index ca622ff5a..0adafed39 100644 --- 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 = ({

{t("join.content")}

-
    -
  • - -
    • -
  • - -
    • -
  • - -
    • -
+ diff --git a/src/components/MetaChart.tsx b/src/components/MetaChart.tsx new file mode 100644 index 000000000..bc2285357 --- /dev/null +++ b/src/components/MetaChart.tsx @@ -0,0 +1,99 @@ +import clsx from "clsx"; +import Link from "next/link"; +import { useTranslations } from "next-intl"; +import React from "react"; + +export type MetaChartProps = { + data: { + type: "source" | "methodology" | "image" | "data" | "document"; + link: string; + moreInfo?: string; + artifact?: string; + isBlank?: boolean; + }[]; + hasBackground?: boolean; + className?: string; +}; + +const MetaChart = ({ + data, + className, + hasBackground = true, + ...rest +}: MetaChartProps) => { + const t = useTranslations("components"); + + const handleClick = ( + e: React.MouseEvent, + link: string, + artifact: string, + ) => { + e.preventDefault(); + + const url = URL.createObjectURL(new Blob([link])); + const a = document.createElement("a"); + document.body.appendChild(a); + a.href = url; + a.setAttribute("download", artifact); + a.click(); + window.URL.revokeObjectURL(url); + }; + + if (!data.length) return; + + return ( +
    + {data.map((d, key) => ( +
  • + handleClick(e, d.link, d.artifact || d.link) + : undefined + } + className={"underline hover:no-underline"} + target={d.isBlank ? "_blank" : undefined} + rel={d.isBlank ? "noopener" : undefined} + download={d.artifact} + {...rest} + > + {t(`metaItem.${d.type}`)} + {d.moreInfo ? <> ({d.moreInfo}) : null} + + {d.isBlank ? ( + + + + ) : d.artifact ? ( + + + + ) : null} + +
    • + ))} +
+ ); +}; + +export default MetaChart; diff --git a/src/components/MetaItem.tsx b/src/components/MetaItem.tsx deleted file mode 100644 index 7eaec71df..000000000 --- a/src/components/MetaItem.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import clsx from "clsx"; -import Link from "next/link"; -import { useTranslations } from "next-intl"; -import React from "react"; - -export const chartMeta = ["source", "methodology", "image", "data", "document"]; - -type MetaItemProps = { - data: (typeof chartMeta)[number]; - link: string; - moreInfo?: string; - artifact?: string; - className?: string; -}; - -const MetaItem = ({ - data, - link, - moreInfo, - artifact, - className, - ...rest -}: MetaItemProps) => { - const t = useTranslations("components"); - - return ( - - {t(`metaItem.${data}`)} - {moreInfo ? <> ({moreInfo}) : null} - - {data === "source" ? ( - - - - ) : artifact ? ( - - - - ) : null} - - ); -}; - -export default MetaItem; From 5e30ed212b5c0b84ff91a7f111ac6892c28785f4 Mon Sep 17 00:00:00 2001 From: Thomas Catinaud Taris Date: Thu, 30 May 2024 21:41:09 +0200 Subject: [PATCH 2/3] fix: lint --- src/app/[locale]/dashboard/dashboard.tsx | 2 +- src/components/MetaChart.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/[locale]/dashboard/dashboard.tsx b/src/app/[locale]/dashboard/dashboard.tsx index 6d670ae91..b4223b080 100644 --- 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 MetaChart from "@/components/MetaChart"; import { SummaryLinksProps } from "@/components/Summary"; import TitleBlock from "@/components/TitleBlock"; -import MetaChart from "@/components/MetaChart"; const Chart = dynamic(() => import("@/components/Chart"), { ssr: false, diff --git a/src/components/MetaChart.tsx b/src/components/MetaChart.tsx index bc2285357..bc5ee995c 100644 --- a/src/components/MetaChart.tsx +++ b/src/components/MetaChart.tsx @@ -59,7 +59,7 @@ const MetaChart = ({ ? (e) => handleClick(e, d.link, d.artifact || d.link) : undefined } - className={"underline hover:no-underline"} + className="underline hover:no-underline" target={d.isBlank ? "_blank" : undefined} rel={d.isBlank ? "noopener" : undefined} download={d.artifact} From c0069cd8b3ab7ba9d468d20fe76cf37b881fa77f Mon Sep 17 00:00:00 2001 From: Thomas Catinaud Taris Date: Thu, 30 May 2024 21:43:18 +0200 Subject: [PATCH 3/3] fix: type check --- src/components/MetaChart.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MetaChart.tsx b/src/components/MetaChart.tsx index bc5ee995c..aad20b95a 100644 --- a/src/components/MetaChart.tsx +++ b/src/components/MetaChart.tsx @@ -39,7 +39,7 @@ const MetaChart = ({ window.URL.revokeObjectURL(url); }; - if (!data.length) return; + if (!data.length) return <>; return (