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/13] [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 d09a26404595fbbcbf20a36c756606c536831213 Mon Sep 17 00:00:00 2001 From: Limber Mamani Vallejos Date: Tue, 28 Jan 2025 16:53:19 -0400 Subject: [PATCH 02/13] [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 03/13] [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 04/13] [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 05/13] [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 7b5fa50bd1d1474bc5204d40adc6b66113bd296c Mon Sep 17 00:00:00 2001 From: Limber Mamani Vallejos Date: Thu, 30 Jan 2025 11:05:07 -0400 Subject: [PATCH 06/13] [TM-1605] update styles to tooltip text --- .../components/ProgressGoalsDoughnutChart.tsx | 44 ++++--------------- .../components/GoalsAndProgressSiteTab.tsx | 14 ++---- 2 files changed, 11 insertions(+), 47 deletions(-) diff --git a/src/admin/components/ResourceTabs/MonitoredTab/components/ProgressGoalsDoughnutChart.tsx b/src/admin/components/ResourceTabs/MonitoredTab/components/ProgressGoalsDoughnutChart.tsx index 35a3dde1a..763f95f50 100644 --- a/src/admin/components/ResourceTabs/MonitoredTab/components/ProgressGoalsDoughnutChart.tsx +++ b/src/admin/components/ResourceTabs/MonitoredTab/components/ProgressGoalsDoughnutChart.tsx @@ -26,7 +26,7 @@ const CustomTooltip = ({ active, payload }: any) => { const value = payload[0].value; return ( -
+

{payload[0].name}

{`${formattedValue(value)}`}

@@ -75,7 +75,7 @@ const ProgressGoalsDoughnutChart: React.FC = ({ const COLORS = ["#27A9E0FF", "#D8EAF6"]; return ( -
+
} /> @@ -83,8 +83,8 @@ const ProgressGoalsDoughnutChart: React.FC = ({ data={enhancedChartData} cx="50%" cy="50%" - innerRadius={40} - outerRadius={70} + innerRadius={35} + outerRadius={65} paddingAngle={0} dataKey="value" onMouseEnter={onPieEnter} @@ -96,19 +96,13 @@ const ProgressGoalsDoughnutChart: React.FC = ({
- } - layout="horizontal" - align="center" - verticalAlign="bottom" - wrapperStyle={{ - fontSize: "12px", - marginTop: "5px", - display: "flex", - justifyContent: "center", - marginBottom: "30px" - }} - /> */}
diff --git a/src/pages/site/[uuid]/components/GoalsAndProgressSiteTab.tsx b/src/pages/site/[uuid]/components/GoalsAndProgressSiteTab.tsx index 92b2f5c8a..85ac2a424 100644 --- a/src/pages/site/[uuid]/components/GoalsAndProgressSiteTab.tsx +++ b/src/pages/site/[uuid]/components/GoalsAndProgressSiteTab.tsx @@ -64,15 +64,7 @@ const GoalsAndProgressSiteTab = ({ site }: GoalsAndProgressSiteTabProps) => { } }; const chartDataTreesRestored = { - chartData: [ - { name: t("TREES RESTORED"), value: site.trees_restored_count }, - site.framework_key == Framework.HBF - ? { - name: t("TOTAL TREES RESTORED"), - value: 0 - } - : {} - ], + chartData: [{ name: t("TREES RESTORED"), value: site.trees_restored_count }], cardValues: { label: t("TREES RESTORED"), value: site.trees_restored_count @@ -91,10 +83,10 @@ const GoalsAndProgressSiteTab = ({ site }: GoalsAndProgressSiteTabProps) => { } }; const chartDataSaplings = { - chartData: [{ name: t("SAPLINGS RESTORED"), value: site.sapling_species_count }], + chartData: [{ name: t("SAPLINGS RESTORED"), value: site.trees_restored_count }], cardValues: { label: t("SAPLINGS RESTORED"), - value: site.sapling_species_count + value: site.trees_restored_count } }; From f3ade9f8e6c3d68c8dd533e923e228f0e7851135 Mon Sep 17 00:00:00 2001 From: Limber Mamani Vallejos Date: Thu, 30 Jan 2025 11:23:31 -0400 Subject: [PATCH 07/13] [TM-1605] add total trees restored const --- .../[uuid]/components/GoalsAndProgressSiteTab.tsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/pages/site/[uuid]/components/GoalsAndProgressSiteTab.tsx b/src/pages/site/[uuid]/components/GoalsAndProgressSiteTab.tsx index 85ac2a424..badb6780c 100644 --- a/src/pages/site/[uuid]/components/GoalsAndProgressSiteTab.tsx +++ b/src/pages/site/[uuid]/components/GoalsAndProgressSiteTab.tsx @@ -46,6 +46,7 @@ const ChartData = (values: ChartDataItem) => { const GoalsAndProgressSiteTab = ({ site }: GoalsAndProgressSiteTabProps) => { const t = useT(); + const totaTreesRestoredCount = site?.trees_planted_count + site?.regenerated_trees_count + site?.seeds_planted_count; const chartDataHectares = { chartData: [ { name: t("HECTARES RESTORED"), value: site.total_hectares_restored_sum }, @@ -64,10 +65,10 @@ const GoalsAndProgressSiteTab = ({ site }: GoalsAndProgressSiteTabProps) => { } }; const chartDataTreesRestored = { - chartData: [{ name: t("TREES RESTORED"), value: site.trees_restored_count }], + chartData: [{ name: t("TREES RESTORED"), value: totaTreesRestoredCount }], cardValues: { label: t("TREES RESTORED"), - value: site.trees_restored_count + value: totaTreesRestoredCount } }; const chartDataWorkdays = { @@ -83,10 +84,10 @@ const GoalsAndProgressSiteTab = ({ site }: GoalsAndProgressSiteTabProps) => { } }; const chartDataSaplings = { - chartData: [{ name: t("SAPLINGS RESTORED"), value: site.trees_restored_count }], + chartData: [{ name: t("SAPLINGS RESTORED"), value: totaTreesRestoredCount }], cardValues: { label: t("SAPLINGS RESTORED"), - value: site.trees_restored_count + value: totaTreesRestoredCount } }; @@ -139,7 +140,7 @@ const GoalsAndProgressSiteTab = ({ site }: GoalsAndProgressSiteTabProps) => { ))} Date: Thu, 30 Jan 2025 11:53:15 -0400 Subject: [PATCH 08/13] [TM-1605] add GoalsAndProgressSiteTab component to overview tab --- src/pages/site/[uuid]/tabs/Overview.tsx | 34 ++----------------------- 1 file changed, 2 insertions(+), 32 deletions(-) diff --git a/src/pages/site/[uuid]/tabs/Overview.tsx b/src/pages/site/[uuid]/tabs/Overview.tsx index 9a9b16eb5..5b0824b5c 100644 --- a/src/pages/site/[uuid]/tabs/Overview.tsx +++ b/src/pages/site/[uuid]/tabs/Overview.tsx @@ -7,7 +7,6 @@ import ModalIdentified from "@/admin/components/extensive/Modal/ModalIdentified" import { AuditLogButtonStates } from "@/admin/components/ResourceTabs/AuditLogTab/constants/enum"; import AddDataButton from "@/admin/components/ResourceTabs/PolygonReviewTab/components/AddDataButton"; 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 { VARIANT_FILE_INPUT_MODAL_ADD_IMAGES } from "@/components/elements/Inputs/FileInput/FileInputVariants"; @@ -23,7 +22,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"; import { useLoading } from "@/context/loaderAdmin.provider"; import { useMapAreaContext } from "@/context/mapArea.provider"; import { useModalContext } from "@/context/modal.provider"; @@ -43,6 +41,7 @@ import { FileType, UploadedFile } from "@/types/common"; import { getErrorMessageFromPayload } from "@/utils/errors"; import Log from "@/utils/log"; +import GoalsAndProgressSiteTab from "../components/GoalsAndProgressSiteTab"; import SiteArea from "../components/SiteArea"; interface SiteOverviewTabProps { @@ -409,36 +408,7 @@ const SiteOverviewTab = ({ site, refetch: refetchEntity }: SiteOverviewTabProps) } > -
-
- - -
-
- -
-
+ From c1546c8b09a165c44a2283b7e9ba165cd0e85a78 Mon Sep 17 00:00:00 2001 From: Limber Mamani Vallejos Date: Thu, 30 Jan 2025 11:57:06 -0400 Subject: [PATCH 09/13] [TM-1605] update snapshots --- .../__snapshots__/GoalProgressCard.stories.storyshot | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/elements/Cards/GoalProgressCard/__snapshots__/GoalProgressCard.stories.storyshot b/src/components/elements/Cards/GoalProgressCard/__snapshots__/GoalProgressCard.stories.storyshot index 60cb08de7..5c2eb30f3 100644 --- a/src/components/elements/Cards/GoalProgressCard/__snapshots__/GoalProgressCard.stories.storyshot +++ b/src/components/elements/Cards/GoalProgressCard/__snapshots__/GoalProgressCard.stories.storyshot @@ -69,6 +69,7 @@ exports[`Storyshots Components/Elements/Cards/GoalProgressCard/Card Progress And > of 732 +

of 150 +

Date: Thu, 30 Jan 2025 12:26:46 -0400 Subject: [PATCH 10/13] [TM-1605] update mapping param --- src/pages/site/[uuid]/components/GoalsAndProgressSiteTab.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/pages/site/[uuid]/components/GoalsAndProgressSiteTab.tsx b/src/pages/site/[uuid]/components/GoalsAndProgressSiteTab.tsx index badb6780c..00d027ffd 100644 --- a/src/pages/site/[uuid]/components/GoalsAndProgressSiteTab.tsx +++ b/src/pages/site/[uuid]/components/GoalsAndProgressSiteTab.tsx @@ -4,7 +4,7 @@ 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"; +import { ALL_TF, Framework } from "@/context/framework.provider"; interface GoalsAndProgressSiteTabProps { site: any; @@ -133,9 +133,10 @@ const GoalsAndProgressSiteTab = ({ site }: GoalsAndProgressSiteTabProps) => { ] }; + const terrafund = ALL_TF.includes(site.framework_key as Framework) ? "terrafund" : site.framework_key; return (
- {chartsDataMapping[site.framework_key as keyof ChartsData].map((chart, index) => ( + {chartsDataMapping[terrafund as keyof ChartsData]?.map((chart, index) => ( {chart} ))} Date: Thu, 30 Jan 2025 13:03:03 -0400 Subject: [PATCH 11/13] [TM-1605] update ProgressGoalsDoughnutChart component --- .../components/ProgressGoalsDoughnutChart.tsx | 117 +++++++----------- 1 file changed, 43 insertions(+), 74 deletions(-) diff --git a/src/admin/components/ResourceTabs/MonitoredTab/components/ProgressGoalsDoughnutChart.tsx b/src/admin/components/ResourceTabs/MonitoredTab/components/ProgressGoalsDoughnutChart.tsx index 763f95f50..1cab72c5b 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,105 +13,74 @@ 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 enhancedChartData = chartData.map((item: any) => ({ - ...item, - total - })); + const currentValue = chartData[0]?.value || 0; + const totalValue = chartData[1]?.value || 0; - const onPieEnter = (_: any, index: number) => { - setActiveIndex(index); - }; + const remainingValue = Math.max(totalValue - currentValue, 0); - const onPieLeave = () => { - setActiveIndex(undefined); - }; - - const COLORS = ["#27A9E0FF", "#D8EAF6"]; + const transformedData = + currentValue > totalValue + ? [{ value: 1, isProgress: true }] + : [ + { value: currentValue, isProgress: true }, + { value: remainingValue, isProgress: false } + ]; + const COLORS = ["#27A9E0", "#DFF2FB"]; return ( -
+
- } /> - {chartData[1]?.value ? ( + {totalValue > 0 && ( From 01886d426e7caa62e4f5602a8533974f376f209c Mon Sep 17 00:00:00 2001 From: Limber Mamani Vallejos Date: Thu, 30 Jan 2025 13:37:33 -0400 Subject: [PATCH 12/13] [TM-1605] change ChartData => ProgressDataCard --- .../components/GoalsAndProgressSiteTab.tsx | 35 +++++++++++++------ 1 file changed, 25 insertions(+), 10 deletions(-) diff --git a/src/pages/site/[uuid]/components/GoalsAndProgressSiteTab.tsx b/src/pages/site/[uuid]/components/GoalsAndProgressSiteTab.tsx index 00d027ffd..320c74d86 100644 --- a/src/pages/site/[uuid]/components/GoalsAndProgressSiteTab.tsx +++ b/src/pages/site/[uuid]/components/GoalsAndProgressSiteTab.tsx @@ -9,7 +9,7 @@ import { ALL_TF, Framework } from "@/context/framework.provider"; interface GoalsAndProgressSiteTabProps { site: any; } -interface ChartDataItem { +interface ProgressDataCardItem { cardValues: { label: string; value: number; @@ -27,7 +27,7 @@ type ChartsData = { hbf: JSX.Element[]; }; -const ChartData = (values: ChartDataItem) => { +const ProgressDataCard = (values: ProgressDataCardItem) => { return ( { const chartsDataMapping: ChartsData = { terrafund: [ - , - { /> ], ppc: [ - , - , - + ], hbf: [ - , - , + , - + ] }; const terrafund = ALL_TF.includes(site.framework_key as Framework) ? "terrafund" : site.framework_key; From ed58dd334fe8fa371eb661f3b40de2893d427124 Mon Sep 17 00:00:00 2001 From: Limber Mamani Vallejos Date: Thu, 30 Jan 2025 13:42:51 -0400 Subject: [PATCH 13/13] [TM-1605] change terrafund => framework --- src/pages/site/[uuid]/components/GoalsAndProgressSiteTab.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/site/[uuid]/components/GoalsAndProgressSiteTab.tsx b/src/pages/site/[uuid]/components/GoalsAndProgressSiteTab.tsx index 320c74d86..c94add938 100644 --- a/src/pages/site/[uuid]/components/GoalsAndProgressSiteTab.tsx +++ b/src/pages/site/[uuid]/components/GoalsAndProgressSiteTab.tsx @@ -148,10 +148,10 @@ const GoalsAndProgressSiteTab = ({ site }: GoalsAndProgressSiteTabProps) => { /> ] }; - const terrafund = ALL_TF.includes(site.framework_key as Framework) ? "terrafund" : site.framework_key; + const framework = ALL_TF.includes(site.framework_key as Framework) ? "terrafund" : site.framework_key; return (
- {chartsDataMapping[terrafund as keyof ChartsData]?.map((chart, index) => ( + {chartsDataMapping[framework as keyof ChartsData]?.map((chart, index) => ( {chart} ))}