Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: update dashboard titles position with graph #23

Merged
merged 2 commits into from
May 22, 2024
Merged

feat: update dashboard titles position with graph #23

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
510b801
feat: init change
May 22, 2024
d02a985
feat: change title and graph
May 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 6 additions & 7 deletions src/app/dashboard/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ 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";
import JoinBlock from "@/components/JoinBlock";
Expand Down Expand Up @@ -265,7 +264,7 @@ const TopCountriesSection = () => {

// const SalmonConsumptionSection = () => {
// return (
// <CustomDashboardSection
// <DashboardSection
// title="Consommation de saumon"
// id="intro-consumption"
// 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. "
Expand Down Expand Up @@ -393,7 +392,7 @@ const LandPlantsSection = () => {

// const SalmonConsumptionBisSection = () => {
// return (
// <CustomDashboardSection
// <DashboardSection
// title="Consommation"
// id="companies-consumption"
// 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."
Expand All @@ -405,7 +404,7 @@ const LandPlantsSection = () => {

const DeforestationSection = () => {
return (
<CustomDashboardSection
<DashboardSection
title="Déforestation"
src="/images/deforestation.webp"
id="deforestation"
Expand Down Expand Up @@ -439,7 +438,7 @@ const AntibioticSection = () => {

const MicroplasticSection = () => {
return (
<CustomDashboardSection
<DashboardSection
title="Microplastique"
src="/images/microplastics.webp"
id="microplastics"
Expand All @@ -453,7 +452,7 @@ const MicroplasticSection = () => {

const StressOnshoreSection = () => {
return (
<CustomDashboardSection
<DashboardSection
title="Densité / stress dans usine à terre"
src="/images/stress.webp"
id="stress-onshore"
Expand Down Expand Up @@ -490,7 +489,7 @@ Cette valeur est extrapolée à partir des émissions de 9 des plus grands produ

const SocialCarbonSection = () => {
return (
<CustomDashboardSection
<DashboardSection
title="Impact carbone"
src="/images/social-carbon.webp"
id="social-carbon"
Expand Down
32 changes: 0 additions & 32 deletions src/components/CustomDashboardSection.tsx
View file
Open in desktop

This file was deleted.

36 changes: 28 additions & 8 deletions src/components/DashboardSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import clsx from "clsx";
import dynamic from "next/dynamic";
import Image from "next/image";
import React, { useEffect, useState } from "react";
import { ReactNode } from "react";

Expand All @@ -11,14 +13,19 @@ const DashboardSection = ({
title,
id,
mainContent,
className,
content,
cta,
src,
...rest
}: {
title?: string | undefined;
title?: string;
mainContent?: string;
content?: string | undefined;
className?: string;
content?: string;
id: string;
cta?: ReactNode | undefined;
cta?: ReactNode;
src?: string;
}) => {
const [chartData, setChartData] = useState({
data: [],
Expand All @@ -27,6 +34,8 @@ const DashboardSection = ({

const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
if (src) return;

const fetchGraphData = async () => {
if (id.length > 0) {
const response = await fetchData("graphs", id);
Expand All @@ -35,24 +44,35 @@ const DashboardSection = ({
}
};
fetchGraphData();
}, [id]);
}, [id, src]);

if (!chartData) {
return <></>;
}

return (
<div className="p-6 md:p-12">
<div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-[1fr_2fr] max-w-[1500px] mx-auto">
<div
className={clsx(className, "p-6 md:p-12 max-w-[1596px] mx-auto")}
{...rest}
>
<h3 className="h3 text-red1 mb-4 lg:mb-8 max-w-screen-md">{title}</h3>
<div className="grid gap-4 grid-cols-1 lg:grid-cols-2 xl:grid-cols-[1fr_2fr]">
<div>
<h3 className="h3 text-red1 py-8">{title}</h3>
<p className="font-semibold">{mainContent}</p>
<p className="py-7">{content}</p>

{cta && <div className="text-center py-8">{cta}</div>}
</div>
<div className="self-center min-h-[300px] overflow-y-auto h-full text-center">
{id && isLoading ? (
{src ? (
<Image
src={src}
className="block mx-auto object-contain max-w-full"
alt=""
width={700}
height={300}
/>
) : id && isLoading ? (
<p className="text-xl text-center">Loading...</p>
) : (
<DashboardChart
Expand Down
Loading