From ee1f3d58401230f7e1ecd3cb3ea4a6d80bacc559 Mon Sep 17 00:00:00 2001 From: Limber Mamani Vallejos Date: Tue, 28 Jan 2025 12:00:21 -0400 Subject: [PATCH 01/10] [TM-1605] add component to progress and goals pie chart --- .../components/ProgressGoalsDoughnutChart.tsx | 150 ++++++++++++++++++ 1 file changed, 150 insertions(+) create mode 100644 src/admin/components/ResourceTabs/MonitoredTab/components/ProgressGoalsDoughnutChart.tsx diff --git a/src/admin/components/ResourceTabs/MonitoredTab/components/ProgressGoalsDoughnutChart.tsx b/src/admin/components/ResourceTabs/MonitoredTab/components/ProgressGoalsDoughnutChart.tsx new file mode 100644 index 000000000..d67e4ddaa --- /dev/null +++ b/src/admin/components/ResourceTabs/MonitoredTab/components/ProgressGoalsDoughnutChart.tsx @@ -0,0 +1,150 @@ +import React, { useState } from "react"; +import { Cell, Label, Legend, Pie, PieChart, ResponsiveContainer, Sector, Tooltip } from "recharts"; + +interface ChartDataItem { + name: string; + value: number; +} + +export interface ProgressGoalsData { + chartData: ChartDataItem[]; + hectares?: boolean; +} + +interface ProgressGoalsDoughnutChartProps { + data?: ProgressGoalsData; +} +const percentage = (value: number, total: number) => ((value / total) * 100).toFixed(0); + +const formattedValue = (value: number) => + value.toLocaleString("en-US", { + minimumFractionDigits: 1, + maximumFractionDigits: 1 + }); + +const CustomTooltip = ({ active, payload }: any) => { + if (active && payload && payload.length) { + const value = payload[0].value; + + return ( +
+

{payload[0].name}

+

{`${formattedValue(value)}`}

+
+ ); + } + return null; +}; + +const renderActiveShape = (props: any) => { + const { cx, cy, innerRadius, outerRadius, startAngle, endAngle, fill } = props; + return ( + + + + ); +}; + +const ProgressGoalsDoughnutChart: React.FC = ({ data }) => { + const { chartData, hectares } = data as any; + + const [activeIndex, setActiveIndex] = useState(undefined); + + const total = chartData.reduce((sum: any, item: any) => sum + item.value, 0); + + const enhancedChartData = chartData.map((item: any) => ({ + ...item, + total + })); + + const onPieEnter = (_: any, index: number) => { + setActiveIndex(index); + }; + + const onPieLeave = () => { + setActiveIndex(undefined); + }; + + const COLORS = ["#27A9E0FF", "#D8EAF6"]; + + return ( +
+ + + } /> + + + + + {formattedValue(Math.round(chartData[0]?.value)) ?? 0} + + + of {formattedValue(Math.round(chartData[1]?.value)) ?? 0} {hectares ? "ha" : null} + +
+ } + layout="horizontal" + align="center" + verticalAlign="bottom" + wrapperStyle={{ + fontSize: "12px", + marginTop: "5px", + display: "flex", + justifyContent: "center", + marginBottom: "30px" + }} + /> + + + + ); +}; + +export default ProgressGoalsDoughnutChart; From e7c5e4a0ef44c61105297ceff7d47bc573689116 Mon Sep 17 00:00:00 2001 From: JORGE Date: Tue, 28 Jan 2025 14:39:51 -0400 Subject: [PATCH 02/10] [TM-1607] add charts --- src/pages/project/[uuid]/tabs/Overview.tsx | 58 +++++++++++++++++----- 1 file changed, 46 insertions(+), 12 deletions(-) diff --git a/src/pages/project/[uuid]/tabs/Overview.tsx b/src/pages/project/[uuid]/tabs/Overview.tsx index a8d4baa0a..eac039cf0 100644 --- a/src/pages/project/[uuid]/tabs/Overview.tsx +++ b/src/pages/project/[uuid]/tabs/Overview.tsx @@ -2,6 +2,7 @@ import { useT } from "@transifex/react"; import Link from "next/link"; import { useRouter } from "next/router"; +import ProgressGoalsDoughnutChart from "@/admin/components/ResourceTabs/MonitoredTab/components/ProgressGoalsDoughnutChart"; import Button from "@/components/elements/Button/Button"; import GoalProgressCard from "@/components/elements/Cards/GoalProgressCard/GoalProgressCard"; import ItemMonitoringCards from "@/components/elements/Cards/ItemMonitoringCard/ItemMonitoringCards"; @@ -13,7 +14,6 @@ import PageBody from "@/components/extensive/PageElements/Body/PageBody"; import PageCard from "@/components/extensive/PageElements/Card/PageCard"; import PageColumn from "@/components/extensive/PageElements/Column/PageColumn"; import PageRow from "@/components/extensive/PageElements/Row/PageRow"; -import { Framework } from "@/context/framework.provider"; interface ProjectOverviewTabProps { project: any; @@ -22,7 +22,38 @@ interface ProjectOverviewTabProps { const ProjectOverviewTab = ({ project }: ProjectOverviewTabProps) => { const t = useT(); const router = useRouter(); + const jobsCreatedData = { + chartData: [ + { name: "Jobs Created", value: project.total_jobs_created }, + { + name: "Total Jobs Created Goal", + value: project.jobs_created_goal + } + ], + hectares: false + }; + const hectaresData = { + chartData: [ + { name: "Hectares Restored", value: project.total_hectares_restored_sum }, + { + name: "Total Hectares Restored Goal", + value: project.total_hectares_restored_goal + } + ], + hectares: true + }; + const treesRestoredData = { + chartData: [ + { name: "Trees Restored", value: project.trees_restored_count }, + { + name: "Total Trees Restored Goal", + value: project.trees_grown_goal + } + ], + hectares: false + }; + console.log("project", project); return ( @@ -42,39 +73,42 @@ const ProjectOverviewTab = ({ project }: ProjectOverviewTabProps) => { >
- - */} + + + + {/* - */} + {/* + /> */}
- + /> */}
Date: Tue, 28 Jan 2025 16:53:19 -0400 Subject: [PATCH 03/10] [TM-1605] add mapping to data charts --- .../components/ProgressGoalsDoughnutChart.tsx | 60 ++++--- .../GoalProgressCard/GoalProgressCard.tsx | 25 ++- .../site/[uuid]/tabs/GoalsAndProgress.tsx | 168 ++++++++++++------ 3 files changed, 160 insertions(+), 93 deletions(-) diff --git a/src/admin/components/ResourceTabs/MonitoredTab/components/ProgressGoalsDoughnutChart.tsx b/src/admin/components/ResourceTabs/MonitoredTab/components/ProgressGoalsDoughnutChart.tsx index d67e4ddaa..ca7148501 100644 --- a/src/admin/components/ResourceTabs/MonitoredTab/components/ProgressGoalsDoughnutChart.tsx +++ b/src/admin/components/ResourceTabs/MonitoredTab/components/ProgressGoalsDoughnutChart.tsx @@ -1,5 +1,5 @@ import React, { useState } from "react"; -import { Cell, Label, Legend, Pie, PieChart, ResponsiveContainer, Sector, Tooltip } from "recharts"; +import { Cell, Label, Pie, PieChart, ResponsiveContainer, Sector, Tooltip } from "recharts"; interface ChartDataItem { name: string; @@ -54,7 +54,7 @@ const renderActiveShape = (props: any) => { }; const ProgressGoalsDoughnutChart: React.FC = ({ data }) => { - const { chartData, hectares } = data as any; + const { chartData } = data as any; const [activeIndex, setActiveIndex] = useState(undefined); @@ -76,7 +76,7 @@ const ProgressGoalsDoughnutChart: React.FC = ({ const COLORS = ["#27A9E0FF", "#D8EAF6"]; return ( -
+
} /> @@ -84,8 +84,8 @@ const ProgressGoalsDoughnutChart: React.FC = ({ data={enhancedChartData} cx="50%" cy="50%" - innerRadius={50} - outerRadius={80} + innerRadius={40} + outerRadius={70} paddingAngle={0} dataKey="value" onMouseEnter={onPieEnter} @@ -93,33 +93,35 @@ const ProgressGoalsDoughnutChart: React.FC = ({ activeIndex={activeIndex} activeShape={renderActiveShape} > -
diff --git a/src/components/elements/Cards/GoalProgressCard/GoalProgressCard.tsx b/src/components/elements/Cards/GoalProgressCard/GoalProgressCard.tsx index 73939e398..04f24c5e9 100644 --- a/src/components/elements/Cards/GoalProgressCard/GoalProgressCard.tsx +++ b/src/components/elements/Cards/GoalProgressCard/GoalProgressCard.tsx @@ -1,6 +1,6 @@ import classNames from "classnames"; import { DetailedHTMLProps, FC, HTMLAttributes } from "react"; -import { Else, If, Then, When } from "react-if"; +import { When } from "react-if"; import Text from "@/components/elements/Text/Text"; import { withFrameworkShow } from "@/context/framework.provider"; @@ -22,6 +22,9 @@ export interface GoalProgressCardProps extends DetailedHTMLProps = ({ @@ -38,6 +41,9 @@ const GoalProgressCard: FC = ({ labelVariant, classNameCard, classNameLabelValue, + chart, + hectares, + graph = true, ...rest }) => { const value = _val ?? 0; @@ -53,20 +59,13 @@ const GoalProgressCard: FC = ({ {label} - - - - arrow-right - - - arrow-right - - - + {graph ? chart : null} {value?.toLocaleString()}  - - of {limit?.toLocaleString() ?? totalValue?.toLocaleString()} + + + of {limit?.toLocaleString() ?? totalValue?.toLocaleString()} {hectares ? "ha" : null} + {labelValue} diff --git a/src/pages/site/[uuid]/tabs/GoalsAndProgress.tsx b/src/pages/site/[uuid]/tabs/GoalsAndProgress.tsx index 41a13cb4f..a6ba2502e 100644 --- a/src/pages/site/[uuid]/tabs/GoalsAndProgress.tsx +++ b/src/pages/site/[uuid]/tabs/GoalsAndProgress.tsx @@ -1,6 +1,8 @@ import { useT } from "@transifex/react"; +import React from "react"; import { Else, If, Then, When } from "react-if"; +import ProgressGoalsDoughnutChart from "@/admin/components/ResourceTabs/MonitoredTab/components/ProgressGoalsDoughnutChart"; import GoalProgressCard from "@/components/elements/Cards/GoalProgressCard/GoalProgressCard"; import Text from "@/components/elements/Text/Text"; import { IconNames } from "@/components/extensive/Icon/Icon"; @@ -29,6 +31,43 @@ export const LABEL_LEGEND = [ color: "bg-secondary-600" } ]; +interface ChartDataItem { + cardValues: { + label: string; + value: number; + totalName?: string; + totalValue?: number; + }; + chartData: any; + graph?: boolean; +} +// interface ChartData { +// name?: string; +// value?: number; +// totalValue?: number; +// hectares?: boolean; +// } +type ChartsData = { + terrafund: JSX.Element[]; + ppc: JSX.Element[]; + hbf: JSX.Element[]; +}; + +const CharData = (values: ChartDataItem) => { + return ( + } + /> + ); +}; const GoalsAndProgressTab = ({ site }: GoalsAndProgressTabProps) => { const t = useT(); @@ -104,63 +143,90 @@ const GoalsAndProgressTab = ({ site }: GoalsAndProgressTabProps) => { nonTreeCount: "7,500" } ]; + const chartDataHectares = { + chartData: [ + { name: t("HECTARES RESTORED"), value: site.total_hectares_restored_sum }, + site.framework_key !== Framework.PPC + ? { + name: t("TOTAL HECTARES RESTORED"), + value: parseFloat(site.hectares_to_restore_goal) + } + : {} + ], + cardValues: { + label: t("HECTARES RESTORED"), + value: site.total_hectares_restored_sum, + totalName: t("TOTAL HECTARES RESTORED"), + totalValue: parseFloat(site.hectares_to_restore_goal) + }, + hectares: true + }; + const chartDataTreesRestored = { + chartData: [ + { name: t("TREES RESTORED"), value: site.trees_restored_count }, + site.framework_key == Framework.HBF + ? { + name: t("TOTAL TREES RESTORED"), + value: 0 + } + : {} + ], + cardValues: { + label: t("TREES RESTORED"), + value: site.trees_restored_count + }, + hectares: false + }; + const chartDataWorkdays = { + chartData: [{ name: t("WORKDAYS CREATED"), value: site.workday_count }], + cardValues: { + label: t("WORKDAYS CREATED"), + value: site.workday_count + }, + hectares: false + }; + const chartDataSaplings = { + chartData: [ + { name: t("SAPLINGS RESTORED"), value: 100 }, + { + name: t("TOTAL SAPLINGS RESTORED"), + value: 200 + } + ], + cardValues: { + label: t("SAPLINGS RESTORED"), + value: 100, + totalName: t("TOTAL SAPLINGS RESTORED"), + totalValue: 200 + }, + hectares: false + }; + + const chartsDataMapping: ChartsData = { + terrafund: [ + , + + ], + ppc: [ + , + , + + ], + hbf: [ + , + , + + ] + }; return (
- - - - - - + {chartsDataMapping[site.framework_key as keyof ChartsData].map((chart, index) => ( + {chart} + ))} Date: Wed, 29 Jan 2025 11:33:13 -0400 Subject: [PATCH 04/10] [TM-1605] add params to chartData component --- .../components/ProgressGoalsDoughnutChart.tsx | 1 - .../GoalProgressCard/GoalProgressCard.tsx | 2 +- .../site/[uuid]/tabs/GoalsAndProgress.tsx | 79 ++++++++++++------- 3 files changed, 50 insertions(+), 32 deletions(-) diff --git a/src/admin/components/ResourceTabs/MonitoredTab/components/ProgressGoalsDoughnutChart.tsx b/src/admin/components/ResourceTabs/MonitoredTab/components/ProgressGoalsDoughnutChart.tsx index ca7148501..35a3dde1a 100644 --- a/src/admin/components/ResourceTabs/MonitoredTab/components/ProgressGoalsDoughnutChart.tsx +++ b/src/admin/components/ResourceTabs/MonitoredTab/components/ProgressGoalsDoughnutChart.tsx @@ -8,7 +8,6 @@ interface ChartDataItem { export interface ProgressGoalsData { chartData: ChartDataItem[]; - hectares?: boolean; } interface ProgressGoalsDoughnutChartProps { diff --git a/src/components/elements/Cards/GoalProgressCard/GoalProgressCard.tsx b/src/components/elements/Cards/GoalProgressCard/GoalProgressCard.tsx index 04f24c5e9..2fd4c4258 100644 --- a/src/components/elements/Cards/GoalProgressCard/GoalProgressCard.tsx +++ b/src/components/elements/Cards/GoalProgressCard/GoalProgressCard.tsx @@ -42,7 +42,7 @@ const GoalProgressCard: FC = ({ classNameCard, classNameLabelValue, chart, - hectares, + hectares = false, graph = true, ...rest }) => { diff --git a/src/pages/site/[uuid]/tabs/GoalsAndProgress.tsx b/src/pages/site/[uuid]/tabs/GoalsAndProgress.tsx index a6ba2502e..7daadfc07 100644 --- a/src/pages/site/[uuid]/tabs/GoalsAndProgress.tsx +++ b/src/pages/site/[uuid]/tabs/GoalsAndProgress.tsx @@ -40,13 +40,9 @@ interface ChartDataItem { }; chartData: any; graph?: boolean; + hectares?: boolean; } -// interface ChartData { -// name?: string; -// value?: number; -// totalValue?: number; -// hectares?: boolean; -// } + type ChartsData = { terrafund: JSX.Element[]; ppc: JSX.Element[]; @@ -59,7 +55,8 @@ const CharData = (values: ChartDataItem) => { label={values.cardValues.label} value={values.cardValues.value} totalValue={values.cardValues.totalValue} - hectares={values.chartData.hectares} + hectares={values.hectares} + graph={values.graph} classNameLabel="text-neutral-650 uppercase mb-3" labelVariant="text-14" classNameCard="text-center flex flex-col items-center" @@ -158,8 +155,7 @@ const GoalsAndProgressTab = ({ site }: GoalsAndProgressTabProps) => { value: site.total_hectares_restored_sum, totalName: t("TOTAL HECTARES RESTORED"), totalValue: parseFloat(site.hectares_to_restore_goal) - }, - hectares: true + } }; const chartDataTreesRestored = { chartData: [ @@ -174,48 +170,71 @@ const GoalsAndProgressTab = ({ site }: GoalsAndProgressTabProps) => { cardValues: { label: t("TREES RESTORED"), value: site.trees_restored_count - }, - hectares: false + } }; const chartDataWorkdays = { chartData: [{ name: t("WORKDAYS CREATED"), value: site.workday_count }], cardValues: { label: t("WORKDAYS CREATED"), value: site.workday_count - }, - hectares: false + } }; const chartDataSaplings = { chartData: [ - { name: t("SAPLINGS RESTORED"), value: 100 }, - { - name: t("TOTAL SAPLINGS RESTORED"), - value: 200 - } + { name: t("SAPLINGS RESTORED"), value: site.sapling_species_count } + // { + // name: t("TOTAL SAPLINGS RESTORED"), + // value: 200 + // } ], cardValues: { label: t("SAPLINGS RESTORED"), - value: 100, - totalName: t("TOTAL SAPLINGS RESTORED"), - totalValue: 200 - }, - hectares: false + value: site.sapling_species_count + // totalName: t("TOTAL SAPLINGS RESTORED"), + // totalValue: 200 + } }; const chartsDataMapping: ChartsData = { terrafund: [ - , - + , + ], ppc: [ - , - , + , + , ], hbf: [ - , - , - + , + , + ] }; From 85b9d1c28b7ea03a618daeb82802f7af74385eae Mon Sep 17 00:00:00 2001 From: Limber Mamani Vallejos Date: Wed, 29 Jan 2025 15:56:44 -0400 Subject: [PATCH 05/10] [TM-1605] add external component to progress and goals site --- .../components/GoalsAndProgressSiteTab.tsx | 181 ++++++++++++++++++ .../site/[uuid]/tabs/GoalsAndProgress.tsx | 170 +--------------- 2 files changed, 184 insertions(+), 167 deletions(-) create mode 100644 src/pages/site/[uuid]/components/GoalsAndProgressSiteTab.tsx diff --git a/src/pages/site/[uuid]/components/GoalsAndProgressSiteTab.tsx b/src/pages/site/[uuid]/components/GoalsAndProgressSiteTab.tsx new file mode 100644 index 000000000..6dbb06b9b --- /dev/null +++ b/src/pages/site/[uuid]/components/GoalsAndProgressSiteTab.tsx @@ -0,0 +1,181 @@ +import { useT } from "@transifex/react"; +import React from "react"; + +import ProgressGoalsDoughnutChart from "@/admin/components/ResourceTabs/MonitoredTab/components/ProgressGoalsDoughnutChart"; +import GoalProgressCard from "@/components/elements/Cards/GoalProgressCard/GoalProgressCard"; +import { IconNames } from "@/components/extensive/Icon/Icon"; +import { Framework } from "@/context/framework.provider"; + +interface GoalsAndProgressSiteTabProps { + site: any; +} +interface ChartDataItem { + cardValues: { + label: string; + value: number; + totalName?: string; + totalValue?: number; + }; + chartData: any; + graph?: boolean; + hectares?: boolean; +} + +type ChartsData = { + terrafund: JSX.Element[]; + ppc: JSX.Element[]; + hbf: JSX.Element[]; +}; + +const CharData = (values: ChartDataItem) => { + return ( + } + /> + ); +}; + +const GoalsAndProgressSiteTab = ({ site }: GoalsAndProgressSiteTabProps) => { + const t = useT(); + const chartDataHectares = { + chartData: [ + { name: t("HECTARES RESTORED"), value: site.total_hectares_restored_sum }, + site.framework_key !== Framework.PPC + ? { + name: t("TOTAL HECTARES RESTORED"), + value: parseFloat(site.hectares_to_restore_goal) + } + : {} + ], + cardValues: { + label: t("HECTARES RESTORED"), + value: site.total_hectares_restored_sum, + totalName: t("TOTAL HECTARES RESTORED"), + totalValue: parseFloat(site.hectares_to_restore_goal) + } + }; + const chartDataTreesRestored = { + chartData: [ + { name: t("TREES RESTORED"), value: site.trees_restored_count }, + site.framework_key == Framework.HBF + ? { + name: t("TOTAL TREES RESTORED"), + value: 0 + } + : {} + ], + cardValues: { + label: t("TREES RESTORED"), + value: site.trees_restored_count + } + }; + const chartDataWorkdays = { + chartData: [ + { + name: t("WORKDAYS CREATED"), + value: site.framework_key == Framework.PPC ? site.combined_workday_count : site.workday_count + } + ], + cardValues: { + label: t("WORKDAYS CREATED"), + value: site.framework_key == Framework.PPC ? site.combined_workday_count : site.workday_count + } + }; + const chartDataSaplings = { + chartData: [{ name: t("SAPLINGS RESTORED"), value: site.sapling_species_count }], + cardValues: { + label: t("SAPLINGS RESTORED"), + value: site.sapling_species_count + } + }; + + const chartsDataMapping: ChartsData = { + terrafund: [ + , + + ], + ppc: [ + , + , + + ], + hbf: [ + , + , + + ] + }; + return ( +
+ {chartsDataMapping[site.framework_key as keyof ChartsData].map((chart, index) => ( + {chart} + ))} + +
+ ); +}; +export default GoalsAndProgressSiteTab; diff --git a/src/pages/site/[uuid]/tabs/GoalsAndProgress.tsx b/src/pages/site/[uuid]/tabs/GoalsAndProgress.tsx index 7daadfc07..7aa4cb5de 100644 --- a/src/pages/site/[uuid]/tabs/GoalsAndProgress.tsx +++ b/src/pages/site/[uuid]/tabs/GoalsAndProgress.tsx @@ -2,7 +2,6 @@ import { useT } from "@transifex/react"; import React from "react"; import { Else, If, Then, When } from "react-if"; -import ProgressGoalsDoughnutChart from "@/admin/components/ResourceTabs/MonitoredTab/components/ProgressGoalsDoughnutChart"; import GoalProgressCard from "@/components/elements/Cards/GoalProgressCard/GoalProgressCard"; import Text from "@/components/elements/Text/Text"; import { IconNames } from "@/components/extensive/Icon/Icon"; @@ -13,6 +12,8 @@ import TreeSpeciesTablePD from "@/components/extensive/Tables/TreeSpeciesTablePD import { Framework } from "@/context/framework.provider"; import { TextVariants } from "@/types/common"; +import GoalsAndProgressSiteTab from "../components/GoalsAndProgressSiteTab"; + interface GoalsAndProgressTabProps { site: any; } @@ -31,40 +32,6 @@ export const LABEL_LEGEND = [ color: "bg-secondary-600" } ]; -interface ChartDataItem { - cardValues: { - label: string; - value: number; - totalName?: string; - totalValue?: number; - }; - chartData: any; - graph?: boolean; - hectares?: boolean; -} - -type ChartsData = { - terrafund: JSX.Element[]; - ppc: JSX.Element[]; - hbf: JSX.Element[]; -}; - -const CharData = (values: ChartDataItem) => { - return ( - } - /> - ); -}; const GoalsAndProgressTab = ({ site }: GoalsAndProgressTabProps) => { const t = useT(); @@ -140,143 +107,12 @@ const GoalsAndProgressTab = ({ site }: GoalsAndProgressTabProps) => { nonTreeCount: "7,500" } ]; - const chartDataHectares = { - chartData: [ - { name: t("HECTARES RESTORED"), value: site.total_hectares_restored_sum }, - site.framework_key !== Framework.PPC - ? { - name: t("TOTAL HECTARES RESTORED"), - value: parseFloat(site.hectares_to_restore_goal) - } - : {} - ], - cardValues: { - label: t("HECTARES RESTORED"), - value: site.total_hectares_restored_sum, - totalName: t("TOTAL HECTARES RESTORED"), - totalValue: parseFloat(site.hectares_to_restore_goal) - } - }; - const chartDataTreesRestored = { - chartData: [ - { name: t("TREES RESTORED"), value: site.trees_restored_count }, - site.framework_key == Framework.HBF - ? { - name: t("TOTAL TREES RESTORED"), - value: 0 - } - : {} - ], - cardValues: { - label: t("TREES RESTORED"), - value: site.trees_restored_count - } - }; - const chartDataWorkdays = { - chartData: [{ name: t("WORKDAYS CREATED"), value: site.workday_count }], - cardValues: { - label: t("WORKDAYS CREATED"), - value: site.workday_count - } - }; - const chartDataSaplings = { - chartData: [ - { name: t("SAPLINGS RESTORED"), value: site.sapling_species_count } - // { - // name: t("TOTAL SAPLINGS RESTORED"), - // value: 200 - // } - ], - cardValues: { - label: t("SAPLINGS RESTORED"), - value: site.sapling_species_count - // totalName: t("TOTAL SAPLINGS RESTORED"), - // totalValue: 200 - } - }; - - const chartsDataMapping: ChartsData = { - terrafund: [ - , - - ], - ppc: [ - , - , - - ], - hbf: [ - , - , - - ] - }; return ( -
- {chartsDataMapping[site.framework_key as keyof ChartsData].map((chart, index) => ( - {chart} - ))} - -
+ From ffe8435b6a26dc59c61e74e3520a77cbfa70ef83 Mon Sep 17 00:00:00 2001 From: Limber Mamani Vallejos Date: Wed, 29 Jan 2025 15:59:44 -0400 Subject: [PATCH 06/10] [TM-1605] update name chartData --- .../components/GoalsAndProgressSiteTab.tsx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/pages/site/[uuid]/components/GoalsAndProgressSiteTab.tsx b/src/pages/site/[uuid]/components/GoalsAndProgressSiteTab.tsx index 6dbb06b9b..92b2f5c8a 100644 --- a/src/pages/site/[uuid]/components/GoalsAndProgressSiteTab.tsx +++ b/src/pages/site/[uuid]/components/GoalsAndProgressSiteTab.tsx @@ -27,7 +27,7 @@ type ChartsData = { hbf: JSX.Element[]; }; -const CharData = (values: ChartDataItem) => { +const ChartData = (values: ChartDataItem) => { return ( { const chartsDataMapping: ChartsData = { terrafund: [ - , - { /> ], ppc: [ - , - , - + ], hbf: [ - , - , + , - + ] }; return ( From 6c23e3cd8307a4117040a56f93f7bb385c2b27b1 Mon Sep 17 00:00:00 2001 From: JORGE Date: Wed, 29 Jan 2025 16:53:28 -0400 Subject: [PATCH 07/10] [TM-1607] add pie chart with component and data for PPc --- src/pages/project/[uuid]/index.page.tsx | 2 +- .../project/[uuid]/tabs/GoalsAndProgress.tsx | 95 +------- src/pages/project/[uuid]/tabs/Overview.tsx | 58 +---- .../components/GoalsAndProgressProjectTab.tsx | 207 ++++++++++++++++++ 4 files changed, 223 insertions(+), 139 deletions(-) create mode 100644 src/pages/site/[uuid]/components/GoalsAndProgressProjectTab.tsx diff --git a/src/pages/project/[uuid]/index.page.tsx b/src/pages/project/[uuid]/index.page.tsx index 5a2dc084d..e31052a73 100644 --- a/src/pages/project/[uuid]/index.page.tsx +++ b/src/pages/project/[uuid]/index.page.tsx @@ -15,13 +15,13 @@ import ProjectHeader from "@/pages/project/[uuid]/components/ProjectHeader"; import StatusBar from "@/pages/project/[uuid]/components/StatusBar"; import ProjectDetailTab from "@/pages/project/[uuid]/tabs/Details"; import GalleryTab from "@/pages/project/[uuid]/tabs/Gallery"; -import GoalsAndProgressTab from "@/pages/project/[uuid]/tabs/GoalsAndProgress"; import ProjectOverviewTab from "@/pages/project/[uuid]/tabs/Overview"; import ProjectNurseriesTab from "@/pages/project/[uuid]/tabs/ProjectNurseries"; import ProjectSitesTab from "@/pages/project/[uuid]/tabs/ProjectSites"; import ReportingTasksTab from "@/pages/project/[uuid]/tabs/ReportingTasks"; import AuditLog from "./tabs/AuditLog"; +import GoalsAndProgressTab from "./tabs/GoalsAndProgress"; const ButtonStates = { PROJECTS: 0, diff --git a/src/pages/project/[uuid]/tabs/GoalsAndProgress.tsx b/src/pages/project/[uuid]/tabs/GoalsAndProgress.tsx index b92131721..b45d896a5 100644 --- a/src/pages/project/[uuid]/tabs/GoalsAndProgress.tsx +++ b/src/pages/project/[uuid]/tabs/GoalsAndProgress.tsx @@ -10,6 +10,7 @@ import PageRow from "@/components/extensive/PageElements/Row/PageRow"; import TreeSpeciesTablePD from "@/components/extensive/Tables/TreeSpeciesTablePD"; import { ContextCondition } from "@/context/ContextCondition"; import { Framework } from "@/context/framework.provider"; +import GoalsAndProgressProjectTab from "@/pages/site/[uuid]/components/GoalsAndProgressProjectTab"; interface GoalsAndProgressProps { project: any; @@ -295,98 +296,8 @@ const GoalsAndProgressTab = ({ project }: GoalsAndProgressProps) => { return ( - -
- - - - - - - - -
+ + diff --git a/src/pages/project/[uuid]/tabs/Overview.tsx b/src/pages/project/[uuid]/tabs/Overview.tsx index eac039cf0..a8d4baa0a 100644 --- a/src/pages/project/[uuid]/tabs/Overview.tsx +++ b/src/pages/project/[uuid]/tabs/Overview.tsx @@ -2,7 +2,6 @@ import { useT } from "@transifex/react"; import Link from "next/link"; import { useRouter } from "next/router"; -import ProgressGoalsDoughnutChart from "@/admin/components/ResourceTabs/MonitoredTab/components/ProgressGoalsDoughnutChart"; import Button from "@/components/elements/Button/Button"; import GoalProgressCard from "@/components/elements/Cards/GoalProgressCard/GoalProgressCard"; import ItemMonitoringCards from "@/components/elements/Cards/ItemMonitoringCard/ItemMonitoringCards"; @@ -14,6 +13,7 @@ import PageBody from "@/components/extensive/PageElements/Body/PageBody"; import PageCard from "@/components/extensive/PageElements/Card/PageCard"; import PageColumn from "@/components/extensive/PageElements/Column/PageColumn"; import PageRow from "@/components/extensive/PageElements/Row/PageRow"; +import { Framework } from "@/context/framework.provider"; interface ProjectOverviewTabProps { project: any; @@ -22,38 +22,7 @@ interface ProjectOverviewTabProps { const ProjectOverviewTab = ({ project }: ProjectOverviewTabProps) => { const t = useT(); const router = useRouter(); - const jobsCreatedData = { - chartData: [ - { name: "Jobs Created", value: project.total_jobs_created }, - { - name: "Total Jobs Created Goal", - value: project.jobs_created_goal - } - ], - hectares: false - }; - const hectaresData = { - chartData: [ - { name: "Hectares Restored", value: project.total_hectares_restored_sum }, - { - name: "Total Hectares Restored Goal", - value: project.total_hectares_restored_goal - } - ], - hectares: true - }; - const treesRestoredData = { - chartData: [ - { name: "Trees Restored", value: project.trees_restored_count }, - { - name: "Total Trees Restored Goal", - value: project.trees_grown_goal - } - ], - hectares: false - }; - console.log("project", project); return ( @@ -73,42 +42,39 @@ const ProjectOverviewTab = ({ project }: ProjectOverviewTabProps) => { >
- {/* */} - - - - {/* + */} - {/* + */} + />
- {/* */} + />
{ + return ( + } + /> + ); +}; + +const GoalsAndProgressProjectTab = ({ project }: GoalsAndProgressProjectTabProps) => { + const t = useT(); + console.log("project", project, parseFloat(project.total_hectares_restored_goal)); + const chartDataJobs = { + chartData: [ + { name: t("JOBS CREATED"), value: project.total_jobs_created }, + { + name: t("TOTAL JOBS CREATED GOAL"), + value: project.jobs_created_goal + } + ], + cardValues: { + label: t("Jobs Created"), + value: project.total_jobs_created, + totalName: t("TOTAL JOBS CREATED GOAL"), + totalValue: project.jobs_created_goal + }, + graph: true, + hectares: false + }; + const chartDataHectares = { + chartData: [ + { name: t("HECTARES RESTORED"), value: project.total_hectares_restored_sum }, + { + name: t("TOTAL HECTARES RESTORED"), + value: parseFloat(project.total_hectares_restored_goal) + } + ], + cardValues: { + label: t("HECTARES RESTORED"), + value: project.total_hectares_restored_sum, + totalName: t("TOTAL HECTARES RESTORED"), + totalValue: parseFloat(project.total_hectares_restored_goal) + }, + graph: true + }; + const chartDataTreesRestored = { + chartData: [ + { name: t("TREES RESTORED"), value: project.trees_restored_count }, + { + name: t("TOTAL TREES RESTORED"), + value: parseFloat(project.trees_grown_goal) + } + ], + cardValues: { + label: t("TREES RESTORED"), + value: project.trees_restored_count, + totalName: t("TOTAL TREES RESTORED"), + totalValue: parseFloat(project.trees_grown_goal) + }, + graph: true + }; + const chartDataWorkdays = { + chartData: [ + { + name: t("WORKDAYS CREATED"), + value: project.framework_key == Framework.PPC ? project.combined_workday_count : project.workday_count + } + ], + cardValues: { + label: t("WORKDAYS CREATED"), + value: project.framework_key == Framework.PPC ? project.combined_workday_count : project.workday_count + } + }; + const chartDataSaplings = { + chartData: [{ name: t("SAPLINGS RESTORED"), value: project.sapling_species_count }], + cardValues: { + label: t("SAPLINGS RESTORED"), + value: project.sapling_species_count + } + }; + + const chartsDataMapping: ChartsData = { + terrafund: [ + , + , + + ], + ppc: [ + , + , + + ], + hbf: [ + , + , + + ] + }; + return ( +
+ {chartsDataMapping[project.framework_key as keyof ChartsData].map((chart, index) => ( + {chart} + ))} + +
+ ); +}; +export default GoalsAndProgressProjectTab; From 2f53c05de5ea3d4a082e57d62f1f10d56372f1d9 Mon Sep 17 00:00:00 2001 From: cesarLima1 Date: Thu, 30 Jan 2025 12:37:53 -0400 Subject: [PATCH 08/10] [TM-1607] modify pie chart style --- .../components/ProgressGoalsDoughnutChart.tsx | 125 +++++------------- 1 file changed, 34 insertions(+), 91 deletions(-) diff --git a/src/admin/components/ResourceTabs/MonitoredTab/components/ProgressGoalsDoughnutChart.tsx b/src/admin/components/ResourceTabs/MonitoredTab/components/ProgressGoalsDoughnutChart.tsx index 35a3dde1a..7561617fc 100644 --- a/src/admin/components/ResourceTabs/MonitoredTab/components/ProgressGoalsDoughnutChart.tsx +++ b/src/admin/components/ResourceTabs/MonitoredTab/components/ProgressGoalsDoughnutChart.tsx @@ -1,5 +1,5 @@ -import React, { useState } from "react"; -import { Cell, Label, Pie, PieChart, ResponsiveContainer, Sector, Tooltip } from "recharts"; +import React from "react"; +import { Cell, Label, Pie, PieChart, ResponsiveContainer } from "recharts"; interface ChartDataItem { name: string; @@ -13,89 +13,50 @@ export interface ProgressGoalsData { interface ProgressGoalsDoughnutChartProps { data?: ProgressGoalsData; } -const percentage = (value: number, total: number) => ((value / total) * 100).toFixed(0); -const formattedValue = (value: number) => - value.toLocaleString("en-US", { - minimumFractionDigits: 1, - maximumFractionDigits: 1 - }); - -const CustomTooltip = ({ active, payload }: any) => { - if (active && payload && payload.length) { - const value = payload[0].value; - - return ( -
-

{payload[0].name}

-

{`${formattedValue(value)}`}

-
- ); - } - return null; -}; - -const renderActiveShape = (props: any) => { - const { cx, cy, innerRadius, outerRadius, startAngle, endAngle, fill } = props; - return ( - - - - ); +const percentage = (current: number, total: number) => { + const percentValue = Math.min((current / total) * 100, 100); + return percentValue.toFixed(0); }; const ProgressGoalsDoughnutChart: React.FC = ({ data }) => { const { chartData } = data as any; - const [activeIndex, setActiveIndex] = useState(undefined); - - const total = chartData.reduce((sum: any, item: any) => sum + item.value, 0); + const currentValue = chartData[0]?.value || 0; + const totalValue = chartData[1]?.value || 0; - const enhancedChartData = chartData.map((item: any) => ({ - ...item, - total - })); + const remainingValue = Math.max(totalValue - currentValue, 0); - const onPieEnter = (_: any, index: number) => { - setActiveIndex(index); - }; + const transformedData = + currentValue > totalValue + ? [{ value: 1, isProgress: true }] + : [ + { value: currentValue, isProgress: true }, + { value: remainingValue, isProgress: false } + ]; - const onPieLeave = () => { - setActiveIndex(undefined); - }; - - const COLORS = ["#27A9E0FF", "#D8EAF6"]; + const COLORS = ["#27A9E0", "#DFF2FB"]; return (
- } /> - {chartData[1]?.value ? ( + {totalValue > 0 && ( - {/* - - {formattedValue(Math.round(chartData[0]?.value)) ?? 0} - - - of {formattedValue(Math.round(chartData[1]?.value)) ?? 0} {hectares ? "ha" : null} - -
- } - layout="horizontal" - align="center" - verticalAlign="bottom" - wrapperStyle={{ - fontSize: "12px", - marginTop: "5px", - display: "flex", - justifyContent: "center", - marginBottom: "30px" - }} - /> */}
From 72590c6bbde97c8c2c6a1a27f9ee52866c0acd61 Mon Sep 17 00:00:00 2001 From: Limber Mamani Vallejos Date: Fri, 31 Jan 2025 10:02:30 -0400 Subject: [PATCH 09/10] [TM-1607] improve code to GoalsAndProgressEntity component --- .../GoalProgressCard/GoalProgressCard.tsx | 2 +- .../project/[uuid]/tabs/GoalsAndProgress.tsx | 4 +- src/pages/project/[uuid]/tabs/Overview.tsx | 47 +--- ...eTab.tsx => GoalsAndProgressEntityTab.tsx} | 126 ++++++++--- .../components/GoalsAndProgressProjectTab.tsx | 207 ------------------ .../site/[uuid]/tabs/GoalsAndProgress.tsx | 4 +- src/pages/site/[uuid]/tabs/Overview.tsx | 4 +- 7 files changed, 105 insertions(+), 289 deletions(-) rename src/pages/site/[uuid]/components/{GoalsAndProgressSiteTab.tsx => GoalsAndProgressEntityTab.tsx} (50%) delete mode 100644 src/pages/site/[uuid]/components/GoalsAndProgressProjectTab.tsx diff --git a/src/components/elements/Cards/GoalProgressCard/GoalProgressCard.tsx b/src/components/elements/Cards/GoalProgressCard/GoalProgressCard.tsx index 2fd4c4258..ae66861e2 100644 --- a/src/components/elements/Cards/GoalProgressCard/GoalProgressCard.tsx +++ b/src/components/elements/Cards/GoalProgressCard/GoalProgressCard.tsx @@ -59,7 +59,7 @@ const GoalProgressCard: FC = ({ {label} - {graph ? chart : null} + {graph ?
{chart}
: null} {value?.toLocaleString()}  diff --git a/src/pages/project/[uuid]/tabs/GoalsAndProgress.tsx b/src/pages/project/[uuid]/tabs/GoalsAndProgress.tsx index b45d896a5..1f51ae368 100644 --- a/src/pages/project/[uuid]/tabs/GoalsAndProgress.tsx +++ b/src/pages/project/[uuid]/tabs/GoalsAndProgress.tsx @@ -10,7 +10,7 @@ import PageRow from "@/components/extensive/PageElements/Row/PageRow"; import TreeSpeciesTablePD from "@/components/extensive/Tables/TreeSpeciesTablePD"; import { ContextCondition } from "@/context/ContextCondition"; import { Framework } from "@/context/framework.provider"; -import GoalsAndProgressProjectTab from "@/pages/site/[uuid]/components/GoalsAndProgressProjectTab"; +import GoalsAndProgressEntityTab from "@/pages/site/[uuid]/components/GoalsAndProgressEntityTab"; interface GoalsAndProgressProps { project: any; @@ -297,7 +297,7 @@ const GoalsAndProgressTab = ({ project }: GoalsAndProgressProps) => { - + diff --git a/src/pages/project/[uuid]/tabs/Overview.tsx b/src/pages/project/[uuid]/tabs/Overview.tsx index a8d4baa0a..a978180d5 100644 --- a/src/pages/project/[uuid]/tabs/Overview.tsx +++ b/src/pages/project/[uuid]/tabs/Overview.tsx @@ -3,7 +3,6 @@ import Link from "next/link"; import { useRouter } from "next/router"; import Button from "@/components/elements/Button/Button"; -import GoalProgressCard from "@/components/elements/Cards/GoalProgressCard/GoalProgressCard"; import ItemMonitoringCards from "@/components/elements/Cards/ItemMonitoringCard/ItemMonitoringCards"; import Dropdown from "@/components/elements/Inputs/Dropdown/Dropdown"; import OverviewMapArea from "@/components/elements/Map-mapbox/components/OverviewMapArea"; @@ -13,7 +12,7 @@ import PageBody from "@/components/extensive/PageElements/Body/PageBody"; import PageCard from "@/components/extensive/PageElements/Card/PageCard"; import PageColumn from "@/components/extensive/PageElements/Column/PageColumn"; import PageRow from "@/components/extensive/PageElements/Row/PageRow"; -import { Framework } from "@/context/framework.provider"; +import GoalsAndProgressEntityTab from "@/pages/site/[uuid]/components/GoalsAndProgressEntityTab"; interface ProjectOverviewTabProps { project: any; @@ -40,49 +39,7 @@ const ProjectOverviewTab = ({ project }: ProjectOverviewTabProps) => { } > -
-
- - - -
- -
-
- -
-
+ diff --git a/src/pages/site/[uuid]/components/GoalsAndProgressSiteTab.tsx b/src/pages/site/[uuid]/components/GoalsAndProgressEntityTab.tsx similarity index 50% rename from src/pages/site/[uuid]/components/GoalsAndProgressSiteTab.tsx rename to src/pages/site/[uuid]/components/GoalsAndProgressEntityTab.tsx index c94add938..58bbcb362 100644 --- a/src/pages/site/[uuid]/components/GoalsAndProgressSiteTab.tsx +++ b/src/pages/site/[uuid]/components/GoalsAndProgressEntityTab.tsx @@ -6,8 +6,9 @@ import GoalProgressCard from "@/components/elements/Cards/GoalProgressCard/GoalP import { IconNames } from "@/components/extensive/Icon/Icon"; import { ALL_TF, Framework } from "@/context/framework.provider"; -interface GoalsAndProgressSiteTabProps { - site: any; +interface GoalsAndProgressEntityTabProps { + entity: any; + project?: boolean; } interface ProgressDataCardItem { cardValues: { @@ -44,66 +45,131 @@ const ProgressDataCard = (values: ProgressDataCardItem) => { ); }; -const GoalsAndProgressSiteTab = ({ site }: GoalsAndProgressSiteTabProps) => { +const GoalsAndProgressEntityTab = ({ entity, project = false }: GoalsAndProgressEntityTabProps) => { const t = useT(); - const totaTreesRestoredCount = site?.trees_planted_count + site?.regenerated_trees_count + site?.seeds_planted_count; + const totaTreesRestoredCount = + entity?.trees_planted_count + entity?.regenerated_trees_count + entity?.seeds_planted_count; + const keyAttribute = project ? "project" : "site"; + const attribMapping: { [key: string]: any } = { + project: { + total_jobs_created: entity.total_jobs_created, + jobs_created_goal: entity.jobs_created_goal, + total_hectares_restored_sum: entity.total_hectares_restored_sum, + total_hectares_restored_goal: entity.total_hectares_restored_goal, + trees_restored_count: entity.trees_restored_count, + trees_grown_goal: entity.trees_grown_goal, + workday_count: entity.framework_key == Framework.PPC ? entity.combined_workday_count : entity.workday_count + }, + site: { + total_jobs_created: null, + jobs_created_goal: null, + total_hectares_restored_sum: entity.total_hectares_restored_sum, + total_hectares_restored_goal: entity.hectares_to_restore_goal, + trees_restored_count: entity?.trees_planted_count + entity?.regenerated_trees_count + entity?.seeds_planted_count, + trees_grown_goal: null, + workday_count: entity.framework_key == Framework.PPC ? entity.combined_workday_count : entity.workday_count + } + }; + const chartDataJobs = { + chartData: [ + { name: t("JOBS CREATED"), value: attribMapping[keyAttribute].total_jobs_created }, + { + name: t("TOTAL JOBS CREATED GOAL"), + value: attribMapping[keyAttribute].jobs_created_goal + } + ], + cardValues: { + label: t("Jobs Created"), + value: attribMapping[keyAttribute].total_jobs_created, + totalName: t("TOTAL JOBS CREATED GOAL"), + totalValue: attribMapping[keyAttribute].jobs_created_goal + }, + graph: true, + hectares: false + }; const chartDataHectares = { chartData: [ - { name: t("HECTARES RESTORED"), value: site.total_hectares_restored_sum }, - site.framework_key !== Framework.PPC - ? { - name: t("TOTAL HECTARES RESTORED"), - value: parseFloat(site.hectares_to_restore_goal) - } - : {} + { name: t("HECTARES RESTORED"), value: attribMapping[keyAttribute].total_hectares_restored_sum }, + { + name: t("TOTAL HECTARES RESTORED"), + value: parseFloat(attribMapping[keyAttribute].total_hectares_restored_goal) + } ], cardValues: { label: t("HECTARES RESTORED"), - value: site.total_hectares_restored_sum, + value: attribMapping[keyAttribute].total_hectares_restored_sum, totalName: t("TOTAL HECTARES RESTORED"), - totalValue: parseFloat(site.hectares_to_restore_goal) + totalValue: parseFloat(attribMapping[keyAttribute].total_hectares_restored_goal) } }; const chartDataTreesRestored = { - chartData: [{ name: t("TREES RESTORED"), value: totaTreesRestoredCount }], + chartData: [ + { name: t("TREES RESTORED"), value: attribMapping[keyAttribute].trees_restored_count }, + { + name: t("TOTAL TREES RESTORED"), + value: parseFloat(attribMapping[keyAttribute].trees_grown_goal) + } + ], cardValues: { label: t("TREES RESTORED"), - value: totaTreesRestoredCount + value: attribMapping[keyAttribute].trees_restored_count, + totalName: t("TOTAL TREES RESTORED"), + totalValue: parseFloat(attribMapping[keyAttribute].trees_grown_goal) } }; const chartDataWorkdays = { chartData: [ { name: t("WORKDAYS CREATED"), - value: site.framework_key == Framework.PPC ? site.combined_workday_count : site.workday_count + value: attribMapping[keyAttribute].workday_count } ], cardValues: { label: t("WORKDAYS CREATED"), - value: site.framework_key == Framework.PPC ? site.combined_workday_count : site.workday_count + value: attribMapping[keyAttribute].workday_count } }; const chartDataSaplings = { - chartData: [{ name: t("SAPLINGS RESTORED"), value: totaTreesRestoredCount }], + chartData: [ + { name: t("SAPLINGS RESTORED"), value: attribMapping[keyAttribute].trees_restored_count }, + { + name: t("TOTAL SAPLINGS RESTORED"), + value: parseFloat(attribMapping[keyAttribute].trees_grown_goal) + } + ], cardValues: { label: t("SAPLINGS RESTORED"), - value: totaTreesRestoredCount + value: attribMapping[keyAttribute].trees_restored_count, + totalName: t("TOTAL SAPLINGS RESTORED"), + totalValue: parseFloat(attribMapping[keyAttribute].trees_grown_goal) } }; const chartsDataMapping: ChartsData = { terrafund: [ + ...(project + ? [ + + ] + : []), , ], ppc: [ @@ -111,14 +177,14 @@ const GoalsAndProgressSiteTab = ({ site }: GoalsAndProgressSiteTabProps) => { key={"ppc-1"} cardValues={chartDataHectares.cardValues} chartData={chartDataHectares} - graph={false} + graph={project} hectares={true} />, , { key={"hbf-3"} cardValues={chartDataSaplings.cardValues} chartData={chartDataSaplings} - graph={false} + graph={project} /> ] }; - const framework = ALL_TF.includes(site.framework_key as Framework) ? "terrafund" : site.framework_key; + const framework = ALL_TF.includes(entity.framework_key as Framework) ? "terrafund" : entity.framework_key; return (
{chartsDataMapping[framework as keyof ChartsData]?.map((chart, index) => ( @@ -156,8 +222,8 @@ const GoalsAndProgressSiteTab = ({ site }: GoalsAndProgressSiteTabProps) => { ))} { label: t("Trees Planted:"), variantLabel: "text-14", classNameLabel: " text-neutral-650 uppercase", - value: site.trees_planted_count + value: entity.trees_planted_count }, { iconName: IconNames.LEAF_CIRCLE_PD, label: t("Seeds Planted:"), variantLabel: "text-14", classNameLabel: " text-neutral-650 uppercase", - value: site.seeds_planted_count + value: entity.seeds_planted_count }, { iconName: IconNames.REFRESH_CIRCLE_PD, label: t("Trees Regenerating:"), variantLabel: "text-14", classNameLabel: " text-neutral-650 uppercase", - value: site.regenerated_trees_count + value: entity.regenerated_trees_count } ]} className="pr-[41px] lg:pr-[150px]" @@ -187,4 +253,4 @@ const GoalsAndProgressSiteTab = ({ site }: GoalsAndProgressSiteTabProps) => {
); }; -export default GoalsAndProgressSiteTab; +export default GoalsAndProgressEntityTab; diff --git a/src/pages/site/[uuid]/components/GoalsAndProgressProjectTab.tsx b/src/pages/site/[uuid]/components/GoalsAndProgressProjectTab.tsx deleted file mode 100644 index aae9cf171..000000000 --- a/src/pages/site/[uuid]/components/GoalsAndProgressProjectTab.tsx +++ /dev/null @@ -1,207 +0,0 @@ -import { useT } from "@transifex/react"; -import React from "react"; - -import ProgressGoalsDoughnutChart from "@/admin/components/ResourceTabs/MonitoredTab/components/ProgressGoalsDoughnutChart"; -import GoalProgressCard from "@/components/elements/Cards/GoalProgressCard/GoalProgressCard"; -import { IconNames } from "@/components/extensive/Icon/Icon"; -import { Framework } from "@/context/framework.provider"; - -interface GoalsAndProgressProjectTabProps { - project: any; -} -interface ChartDataItem { - cardValues: { - label: string; - value: number; - totalName?: string; - totalValue?: number; - }; - chartData: any; - graph?: boolean; - hectares?: boolean; -} - -type ChartsData = { - terrafund: JSX.Element[]; - ppc: JSX.Element[]; - hbf: JSX.Element[]; -}; - -const CharData = (values: ChartDataItem) => { - return ( - } - /> - ); -}; - -const GoalsAndProgressProjectTab = ({ project }: GoalsAndProgressProjectTabProps) => { - const t = useT(); - console.log("project", project, parseFloat(project.total_hectares_restored_goal)); - const chartDataJobs = { - chartData: [ - { name: t("JOBS CREATED"), value: project.total_jobs_created }, - { - name: t("TOTAL JOBS CREATED GOAL"), - value: project.jobs_created_goal - } - ], - cardValues: { - label: t("Jobs Created"), - value: project.total_jobs_created, - totalName: t("TOTAL JOBS CREATED GOAL"), - totalValue: project.jobs_created_goal - }, - graph: true, - hectares: false - }; - const chartDataHectares = { - chartData: [ - { name: t("HECTARES RESTORED"), value: project.total_hectares_restored_sum }, - { - name: t("TOTAL HECTARES RESTORED"), - value: parseFloat(project.total_hectares_restored_goal) - } - ], - cardValues: { - label: t("HECTARES RESTORED"), - value: project.total_hectares_restored_sum, - totalName: t("TOTAL HECTARES RESTORED"), - totalValue: parseFloat(project.total_hectares_restored_goal) - }, - graph: true - }; - const chartDataTreesRestored = { - chartData: [ - { name: t("TREES RESTORED"), value: project.trees_restored_count }, - { - name: t("TOTAL TREES RESTORED"), - value: parseFloat(project.trees_grown_goal) - } - ], - cardValues: { - label: t("TREES RESTORED"), - value: project.trees_restored_count, - totalName: t("TOTAL TREES RESTORED"), - totalValue: parseFloat(project.trees_grown_goal) - }, - graph: true - }; - const chartDataWorkdays = { - chartData: [ - { - name: t("WORKDAYS CREATED"), - value: project.framework_key == Framework.PPC ? project.combined_workday_count : project.workday_count - } - ], - cardValues: { - label: t("WORKDAYS CREATED"), - value: project.framework_key == Framework.PPC ? project.combined_workday_count : project.workday_count - } - }; - const chartDataSaplings = { - chartData: [{ name: t("SAPLINGS RESTORED"), value: project.sapling_species_count }], - cardValues: { - label: t("SAPLINGS RESTORED"), - value: project.sapling_species_count - } - }; - - const chartsDataMapping: ChartsData = { - terrafund: [ - , - , - - ], - ppc: [ - , - , - - ], - hbf: [ - , - , - - ] - }; - return ( -
- {chartsDataMapping[project.framework_key as keyof ChartsData].map((chart, index) => ( - {chart} - ))} - -
- ); -}; -export default GoalsAndProgressProjectTab; diff --git a/src/pages/site/[uuid]/tabs/GoalsAndProgress.tsx b/src/pages/site/[uuid]/tabs/GoalsAndProgress.tsx index 7aa4cb5de..b454d451d 100644 --- a/src/pages/site/[uuid]/tabs/GoalsAndProgress.tsx +++ b/src/pages/site/[uuid]/tabs/GoalsAndProgress.tsx @@ -12,7 +12,7 @@ import TreeSpeciesTablePD from "@/components/extensive/Tables/TreeSpeciesTablePD import { Framework } from "@/context/framework.provider"; import { TextVariants } from "@/types/common"; -import GoalsAndProgressSiteTab from "../components/GoalsAndProgressSiteTab"; +import GoalsAndProgressEntityTab from "../components/GoalsAndProgressEntityTab"; interface GoalsAndProgressTabProps { site: any; @@ -112,7 +112,7 @@ const GoalsAndProgressTab = ({ site }: GoalsAndProgressTabProps) => { - + diff --git a/src/pages/site/[uuid]/tabs/Overview.tsx b/src/pages/site/[uuid]/tabs/Overview.tsx index 5b0824b5c..b4a07f0d6 100644 --- a/src/pages/site/[uuid]/tabs/Overview.tsx +++ b/src/pages/site/[uuid]/tabs/Overview.tsx @@ -41,7 +41,7 @@ import { FileType, UploadedFile } from "@/types/common"; import { getErrorMessageFromPayload } from "@/utils/errors"; import Log from "@/utils/log"; -import GoalsAndProgressSiteTab from "../components/GoalsAndProgressSiteTab"; +import GoalsAndProgressEntityTab from "../components/GoalsAndProgressEntityTab"; import SiteArea from "../components/SiteArea"; interface SiteOverviewTabProps { @@ -408,7 +408,7 @@ const SiteOverviewTab = ({ site, refetch: refetchEntity }: SiteOverviewTabProps) } > - + From 4d3a25016a9bc114bf6ef61edf9f690bf194b591 Mon Sep 17 00:00:00 2001 From: Limber Mamani Vallejos Date: Fri, 31 Jan 2025 10:30:40 -0400 Subject: [PATCH 10/10] [TM-1607] update snapshots --- .../__snapshots__/GoalProgressCard.stories.storyshot | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/components/elements/Cards/GoalProgressCard/__snapshots__/GoalProgressCard.stories.storyshot b/src/components/elements/Cards/GoalProgressCard/__snapshots__/GoalProgressCard.stories.storyshot index 5c2eb30f3..dafa902f8 100644 --- a/src/components/elements/Cards/GoalProgressCard/__snapshots__/GoalProgressCard.stories.storyshot +++ b/src/components/elements/Cards/GoalProgressCard/__snapshots__/GoalProgressCard.stories.storyshot @@ -16,6 +16,9 @@ exports[`Storyshots Components/Elements/Cards/GoalProgressCard/Card No Progress > Hectors Restored

+

Trees Restored

+

Workday (PPC)

+