From 51443d351608eb16df680bd2d6c29fe0ae402c8b Mon Sep 17 00:00:00 2001 From: Limber Mamani <154026979+LimberHope@users.noreply.github.com> Date: Fri, 31 Jan 2025 10:50:33 -0400 Subject: [PATCH] Feat/[TM-1607] progress goals (#864) * [TM-1605] add component to progress and goals pie chart * [TM-1607] add charts * [TM-1605] add mapping to data charts * [TM-1605] add params to chartData component * [TM-1605] add external component to progress and goals site * [TM-1605] update name chartData * [TM-1607] add pie chart with component and data for PPc * [TM-1607] modify pie chart style * [TM-1607] improve code to GoalsAndProgressEntity component * [TM-1607] update snapshots --------- Co-authored-by: JORGE Co-authored-by: cesarLima1 --- .../components/ProgressGoalsDoughnutChart.tsx | 2 + .../GoalProgressCard/GoalProgressCard.tsx | 2 +- .../GoalProgressCard.stories.storyshot | 9 ++ src/pages/project/[uuid]/index.page.tsx | 2 +- .../project/[uuid]/tabs/GoalsAndProgress.tsx | 94 +------------ src/pages/project/[uuid]/tabs/Overview.tsx | 47 +------ ...eTab.tsx => GoalsAndProgressEntityTab.tsx} | 126 +++++++++++++----- .../site/[uuid]/tabs/GoalsAndProgress.tsx | 4 +- src/pages/site/[uuid]/tabs/Overview.tsx | 4 +- 9 files changed, 118 insertions(+), 172 deletions(-) rename src/pages/site/[uuid]/components/{GoalsAndProgressSiteTab.tsx => GoalsAndProgressEntityTab.tsx} (50%) diff --git a/src/admin/components/ResourceTabs/MonitoredTab/components/ProgressGoalsDoughnutChart.tsx b/src/admin/components/ResourceTabs/MonitoredTab/components/ProgressGoalsDoughnutChart.tsx index 1cab72c5b..7561617fc 100644 --- a/src/admin/components/ResourceTabs/MonitoredTab/components/ProgressGoalsDoughnutChart.tsx +++ b/src/admin/components/ResourceTabs/MonitoredTab/components/ProgressGoalsDoughnutChart.tsx @@ -13,6 +13,7 @@ export interface ProgressGoalsData { interface ProgressGoalsDoughnutChartProps { data?: ProgressGoalsData; } + const percentage = (current: number, total: number) => { const percentValue = Math.min((current / total) * 100, 100); return percentValue.toFixed(0); @@ -33,6 +34,7 @@ const ProgressGoalsDoughnutChart: React.FC = ({ { value: currentValue, isProgress: true }, { value: remainingValue, isProgress: false } ]; + const COLORS = ["#27A9E0", "#DFF2FB"]; return ( 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/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)

+

{ return ( - -

- - - - - - - - -
+ + 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]/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) } > - +