[TM-1342] Trees planted graph (#559)

* [TM-1342] start up stacked bar chart * [TM-1342] edit position img * [TM-1342] resize chart for trees planted section * [TM-1342] edit position treeBackground * [TM-1342] edit position treeBackground * [TM-1342] use fixed values for width to keep same dimension for trees planted chart --------- Co-authored-by: Dotty <[email protected]>
wri · Oct 15, 2024 · 881bc98 · 881bc98
1 parent 93e7ec5
commit 881bc98
Show file tree

Hide file tree

Showing 11 changed files with 316 additions and 42 deletions.
diff --git a/package.json b/package.json
@@ -68,6 +68,7 @@
     "react-if": "^4.1.4",
     "react-inlinesvg": "^3.0.0",
     "react-joyride": "^2.5.5",
+    "recharts": "^2.13.0",
     "swiper": "^9.0.5",
     "tailwind-merge": "^1.14.0",
     "typescript": "4.9.4",

diff --git a/public/images/treeBackground.svg b/public/images/treeBackground.svg
diff --git a/src/pages/dashboard/charts/HorizontalStackedBarChart.tsx b/src/pages/dashboard/charts/HorizontalStackedBarChart.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+import { Bar, BarChart, ResponsiveContainer, XAxis, YAxis } from "recharts";
+
+const HorizontalStackedBarChart = ({ data, className }: { data: any; className?: string }) => {
+  const totalValue = data[0].value;
+  const enterpriseValue = data[1].value;
+  const nonProfitValue = data[2].value;
+  const remainingValue = totalValue - enterpriseValue - nonProfitValue;
+
+  const chartData = [
+    {
+      nonProfit: nonProfitValue,
+      enterprise: enterpriseValue,
+      remaining: remainingValue
+    }
+  ];
+
+  return (
+    <div className={`absolute inset-0 right-0 ${className}`}>
+      <ResponsiveContainer width="100%" height="100%">
+        <BarChart
+          layout="vertical"
+          data={chartData}
+          margin={{ top: 1, right: 0, left: 0, bottom: 1 }}
+          barCategoryGap="0%"
+        >
+          <XAxis type="number" hide={true} domain={[0, totalValue]} />
+          <YAxis type="category" hide={true} />
+          <Bar dataKey="nonProfit" stackId="a" fill="#7BBD31" />
+          <Bar dataKey="enterprise" stackId="a" fill="#27A9E0" />
+          <Bar dataKey="remaining" stackId="a" fill="#DDDDDD" />
+        </BarChart>
+      </ResponsiveContainer>
+    </div>
+  );
+};
+
+export default HorizontalStackedBarChart;
diff --git a/src/pages/dashboard/components/SecDashboard.tsx b/src/pages/dashboard/components/SecDashboard.tsx
@@ -12,6 +12,7 @@ import ToolTip from "@/components/elements/Tooltip/Tooltip";
 import Icon, { IconNames } from "@/components/extensive/Icon/Icon";
 import { TextVariants } from "@/types/common";
 
+import HorizontalStackedBarChart from "../charts/HorizontalStackedBarChart";
 import { DashboardDataProps } from "../project/index.page";
 import GraphicDashboard from "./GraphicDashboard";
 import GraphicIconDashoard from "./GraphicIconDashoard";
@@ -31,7 +32,9 @@ const SecDashboard = ({
   variantTitle,
   tooltip,
   isTableProject,
-  data
+  data,
+  dataForChart,
+  chartType
 }: {
   title: string;
   type?: "legend" | "toggle";
@@ -45,6 +48,8 @@ const SecDashboard = ({
   data: DashboardDataProps;
   isTableProject?: boolean;
   tooltip?: string;
+  dataForChart?: any;
+  chartType?: string;
 }) => {
   const [toggleValue, setToggleValue] = useState(0);
   const t = useT();
@@ -108,7 +113,17 @@ const SecDashboard = ({
       <div className={classNames("relative mt-3 flex items-center justify-between", classNameBody)}>
         {data?.value && <ValueNumberDashboard value={data.value} unit={data.unit} totalValue={data.totalValue} />}
         <When condition={data?.totalValue}>
-          <img src="/images/img-tree.png" alt="secondValue" className="h-9" />
+          <div className="relative h-9 w-[315px]">
+            <div className="absolute inset-0 z-0 h-full w-full">
+              <HorizontalStackedBarChart data={dataForChart} className="h-full w-full" />
+            </div>
+            <img
+              src="/images/treeBackground.svg"
+              id="treeBackground"
+              alt="secondValue"
+              className="absolute right-0 z-10 h-9 w-[316px]"
+            />
+          </div>
         </When>
         <When condition={tooltipGraphic}>
           <TooltipGraphicDashboard />

diff --git a/src/pages/dashboard/components/ValueNumberDashboard.tsx b/src/pages/dashboard/components/ValueNumberDashboard.tsx
@@ -2,11 +2,12 @@ import { useT } from "@transifex/react";
 import { When } from "react-if";
 
 import Text from "@/components/elements/Text/Text";
+import { formatNumberUS } from "@/utils/dashboardUtils";
 
 export interface ValueNumberDashboardProps {
-  value: string;
+  value: number;
   unit?: string;
-  totalValue?: string;
+  totalValue?: number;
 }
 
 const ValueNumberDashboard = ({ value, unit, totalValue }: ValueNumberDashboardProps) => {
@@ -15,14 +16,14 @@ const ValueNumberDashboard = ({ value, unit, totalValue }: ValueNumberDashboardP
   return (
     <div className="flex items-baseline">
       <Text variant="text-32-bold" className="text-blueCustom">
-        {t(value)}
+        {formatNumberUS(value)}
       </Text>
       <Text variant="text-32-bold" className="text-blueCustom">
         {t(unit)}
       </Text>
       <When condition={totalValue}>
         <Text variant="text-20" className="ml-2 text-darkCustom opacity-50">
-          {t("out of ")} {t(totalValue)}
+          {t("out of ")} {totalValue !== undefined ? formatNumberUS(totalValue) : ""}
           {t(unit)}
         </Text>
       </When>

diff --git a/src/pages/dashboard/hooks/useDashboardData.ts b/src/pages/dashboard/hooks/useDashboardData.ts
@@ -4,8 +4,10 @@ import { useLoading } from "@/context/loaderAdmin.provider";
 import {
   useGetV2DashboardJobsCreated,
   useGetV2DashboardTopTreesPlanted,
-  useGetV2DashboardTotalSectionHeader
+  useGetV2DashboardTotalSectionHeader,
+  useGetV2DashboardTreeRestorationGoal
 } from "@/generated/apiComponents";
+import { DashboardTreeRestorationGoalResponse } from "@/generated/apiSchemas";
 
 export const useDashboardData = (filters: any) => {
   const [topProject, setTopProjects] = useState<any>([]);
@@ -26,12 +28,15 @@ export const useDashboardData = (filters: any) => {
       tooltip: "Number of jobs created to date."
     }
   ]);
-  const [totalFtJobs, setTotalFtJobs] = useState({ value: "0" });
-  const [totalPtJobs, setTotalPtJobs] = useState({ value: "0" });
+  const [totalFtJobs, setTotalFtJobs] = useState({ value: 0 });
+  const [totalPtJobs, setTotalPtJobs] = useState({ value: 0 });
   const [numberTreesPlanted, setNumberTreesPlanted] = useState({
-    value: "0",
-    totalValue: "0"
+    value: 0,
+    totalValue: 0
   });
+  const [restorationGoals, setRestorationGoals] = useState<
+    { name: string; value: number | undefined; color: string }[]
+  >([]);
   const [updateFilters, setUpdateFilters] = useState<any>({});
   useEffect(() => {
     const parsedFilters = {
@@ -68,12 +73,17 @@ export const useDashboardData = (filters: any) => {
   );
   const { data: topData } = useGetV2DashboardTopTreesPlanted<any>({ queryParams: queryParams });
 
+  const { data: dashboardRestorationGoalData } =
+    useGetV2DashboardTreeRestorationGoal<DashboardTreeRestorationGoalResponse>({
+      queryParams: queryParams
+    });
+
   useEffect(() => {
     if (jobsCreatedData?.data?.total_ft) {
-      setTotalFtJobs({ value: formatNumberUS(jobsCreatedData?.data?.total_ft) });
+      setTotalFtJobs({ value: jobsCreatedData?.data?.total_ft });
     }
     if (jobsCreatedData?.data?.total_pt) {
-      setTotalPtJobs({ value: formatNumberUS(jobsCreatedData?.data?.total_pt) });
+      setTotalPtJobs({ value: jobsCreatedData?.data?.total_pt });
     }
   }, [jobsCreatedData]);
 
@@ -102,14 +112,27 @@ export const useDashboardData = (filters: any) => {
         { ...prev[2], value: totalSectionHeader.total_entries.toLocaleString() }
       ]);
       setNumberTreesPlanted({
-        value: formatNumberUS(totalSectionHeader.total_trees_restored),
-        totalValue: formatNumberUS(totalSectionHeader.total_trees_restored_goal)
+        value: totalSectionHeader.total_trees_restored,
+        totalValue: totalSectionHeader.total_trees_restored_goal
       });
     }
   }, [totalSectionHeader]);
 
-  return { dashboardHeader, totalFtJobs, totalPtJobs, numberTreesPlanted, topProject, refetchTotalSectionHeader };
-};
+  useEffect(() => {
+    setRestorationGoals([
+      { name: "Total", value: dashboardRestorationGoalData?.totalTreesGrownGoal, color: "#13487A" },
+      { name: "Enterprise", value: dashboardRestorationGoalData?.forProfitTreeCount, color: "#7BBD31" },
+      { name: "Non Profit", value: dashboardRestorationGoalData?.nonProfitTreeCount, color: "#B9EDFF" }
+    ]);
+  }, [dashboardRestorationGoalData]);
 
-const formatNumberUS = (value: number) =>
-  value ? (value >= 1000000 ? `${(value / 1000000).toFixed(2)}M` : value.toLocaleString("en-US")) : "";
+  return {
+    dashboardHeader,
+    restorationGoals,
+    totalFtJobs,
+    totalPtJobs,
+    numberTreesPlanted,
+    topProject,
+    refetchTotalSectionHeader
+  };
+};
diff --git a/src/pages/dashboard/index.page.tsx b/src/pages/dashboard/index.page.tsx
@@ -40,8 +40,15 @@ export interface GraphicLegendProps {
 const Dashboard = () => {
   const t = useT();
   const { filters } = useDashboardContext();
-  const { dashboardHeader, totalFtJobs, totalPtJobs, numberTreesPlanted, topProject, refetchTotalSectionHeader } =
-    useDashboardData(filters);
+  const {
+    dashboardHeader,
+    restorationGoals,
+    totalFtJobs,
+    totalPtJobs,
+    numberTreesPlanted,
+    topProject,
+    refetchTotalSectionHeader
+  } = useDashboardData(filters);
 
   const dataToggle = ["Absolute", "Relative"];
   const dataToggleGraphic = ["Table", "Graphic"];
@@ -205,6 +212,8 @@ const Dashboard = () => {
                 "Total number of trees that funded projects have planted to date, including through assisted natural regeneration, as reported through 6-month progress reports and displayed as progress towards goal."
               )}
               data={numberTreesPlanted}
+              dataForChart={restorationGoals}
+              chartType="treesPlantedBarChart"
             />
             <SecDashboard
               title={t("Number of Trees Planted by Year")}

diff --git a/src/pages/dashboard/mockedData/dashboard.ts b/src/pages/dashboard/mockedData/dashboard.ts
@@ -10,7 +10,7 @@ export const LABEL_LEGEND = [
 ];
 
 export const NUMBER_OF_TREES_PLANTED = {
-  value: "12.2",
+  value: 12.2,
   unit: "M"
 };
 
@@ -90,11 +90,11 @@ export const TOP_20_TREE_SPECIES_PLANTED = {
 };
 
 export const TOTAL_HECTARES_UNDER_RESTORATION = {
-  value: "23,000"
+  value: 23000
 };
 
 export const TOTAL_NUMBER_OF_SITES = {
-  value: "345"
+  value: 345
 };
 
 export const RESTORATION_STRATEGIES_REPRESENTED = {
@@ -152,11 +152,11 @@ export const TARGET_LAND_USE_TYPES_REPRESENTED = {
 };
 
 export const NEW_PART_TIME_JOBS = {
-  value: "22,000"
+  value: 22000
 };
 
 export const NEW_FULL_TIME_JOBS = {
-  value: "1,000"
+  value: 1000
 };
 
 export const JOBS_CREATED_BY_GENDER = {
@@ -192,7 +192,7 @@ export const JOBS_CREATED_BY_AGE = {
 };
 
 export const TOTAL_VOLUNTEERS = {
-  value: "23,000"
+  value: 23000
 };
 
 export const VOLUNTEERS_CREATED_BY_GENDER = {

diff --git a/src/pages/dashboard/project/index.page.tsx b/src/pages/dashboard/project/index.page.tsx
@@ -41,7 +41,7 @@ export interface GraphicLegendProps {
 }
 
 export interface DashboardDataProps {
-  value?: string;
+  value?: number;
   unit?: string;
   secondValue?: string;
   graphic?: string;
@@ -52,7 +52,7 @@ export interface DashboardDataProps {
   objetiveText?: string;
   preferredLanguage?: string;
   landTenure?: string;
-  totalValue?: string;
+  totalValue?: number;
 }
 
 const ProjectView = () => {

diff --git a/src/utils/dashboardUtils.ts b/src/utils/dashboardUtils.ts
@@ -0,0 +1,2 @@
+export const formatNumberUS = (value: number) =>
+  value ? (value >= 1000000 ? `${(value / 1000000).toFixed(2)}M` : value.toLocaleString("en-US")) : "";
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export const formatNumberUS = (value: number) =>
		value ? (value >= 1000000 ? `${(value / 1000000).toFixed(2)}M` : value.toLocaleString("en-US")) : "";