Merge branch 'staging' of https://github.com/wri/wri-terramatch-website…

… into TM-1571-text-updates-to-the-dashboards-learn-more-page
wri · Dec 17, 2024 · 881cf4d · 881cf4d
2 parents c06a9fe + 0a7af7f
commit 881cf4d
Show file tree

Hide file tree

Showing 17 changed files with 118 additions and 38 deletions.
diff --git a/src/admin/components/ResourceTabs/MonitoredTab/components/DataCard.tsx b/src/admin/components/ResourceTabs/MonitoredTab/components/DataCard.tsx
@@ -378,7 +378,7 @@ const DataCard = ({
 }: React.HTMLAttributes<HTMLDivElement> & {
   type?: EntityName;
 }) => {
-  const [tabActive, setTabActive] = useState(0);
+  const [tabActive, setTabActive] = useState(1);
   const [selected, setSelected] = useState<OptionValue[]>(["1"]);
   const [selectedPolygonUuid, setSelectedPolygonUuid] = useState<any>("0");
   const basename = useBasename();
@@ -624,7 +624,7 @@ const DataCard = ({
                 </Button>
               </When>
 
-              <Toggle items={toggleItems} onChangeActiveIndex={setTabActive} />
+              <Toggle items={toggleItems} onChangeActiveIndex={setTabActive} defaultActiveIndex={tabActive} />
             </div>
           </div>
           <When condition={tabActive === 0}>

diff --git a/src/admin/components/ResourceTabs/MonitoredTab/components/MonitoredCharts.tsx b/src/admin/components/ResourceTabs/MonitoredTab/components/MonitoredCharts.tsx
@@ -57,7 +57,7 @@ const RestorationMetrics = ({
       tooltip={TOTAL_HECTARES_UNDER_RESTORATION_TOOLTIP}
       showTreesRestoredGraph={false}
     />
-    <SimpleBarChart data={strategiesData} />
+    <SimpleBarChart data={strategiesData} total={record.total_hectares_restored_sum} />
   </div>
 );
 

diff --git a/src/components/elements/Inputs/TreeSpeciesInput/RHFSeedingTableInput.tsx b/src/components/elements/Inputs/TreeSpeciesInput/RHFSeedingTableInput.tsx
@@ -32,6 +32,8 @@ const RHFSeedingTableInput = (props: PropsWithChildren<RHFSeedingTableInputProps
       {...props}
       title={t("Seed species or Mix")}
       buttonCaptionSuffix={t("Species or mix")}
+      withPreviousCounts={false}
+      useTaxonomicBackbone={false}
       value={value ?? []}
       onChange={onChange}
       collection={collection}

diff --git a/src/components/elements/Inputs/TreeSpeciesInput/RHFTreeSpeciesInput.tsx b/src/components/elements/Inputs/TreeSpeciesInput/RHFTreeSpeciesInput.tsx
@@ -30,6 +30,8 @@ const RHFTreeSpeciesInput = (props: PropsWithChildren<RHFTreeSpeciesInputProps>)
       {...props}
       title={t("Tree Species")}
       buttonCaptionSuffix={t("Species")}
+      withPreviousCounts={true}
+      useTaxonomicBackbone={true}
       value={value ?? []}
       onChange={onChange}
       collection={collection}

diff --git a/src/components/elements/Inputs/TreeSpeciesInput/TreeSpeciesInput.stories.tsx b/src/components/elements/Inputs/TreeSpeciesInput/TreeSpeciesInput.stories.tsx
@@ -27,6 +27,8 @@ export const Default: Story = {
     label: "Tree Species Grown",
     description:
       "List the tree species that you expect to restore on this project, across all sites. Please enter the scientific name for each tree species.",
+    withPreviousCounts: false,
+    useTaxonomicBackbone: true,
     required: true,
     value: [
       {

diff --git a/src/components/elements/Inputs/TreeSpeciesInput/TreeSpeciesInput.tsx b/src/components/elements/Inputs/TreeSpeciesInput/TreeSpeciesInput.tsx
@@ -14,6 +14,7 @@ import { EstablishmentEntityType, useEstablishmentTrees } from "@/connections/Es
 import { useEntityContext } from "@/context/entity.provider";
 import { useModalContext } from "@/context/modal.provider";
 import { useDebounce } from "@/hooks/useDebounce";
+import { useValueChanged } from "@/hooks/useValueChanged";
 import { isReportModelName } from "@/types/common";
 import { updateArrayState } from "@/utils/array";
 
@@ -29,6 +30,8 @@ export interface TreeSpeciesInputProps extends Omit<InputWrapperProps, "error">
   title: string;
   buttonCaptionSuffix: string;
   withNumbers?: boolean;
+  withPreviousCounts: boolean;
+  useTaxonomicBackbone: boolean;
   value: TreeSpeciesValue[];
   onChange: (value: any[]) => void;
   clearErrors: () => void;
@@ -101,16 +104,31 @@ const TreeSpeciesInput = (props: TreeSpeciesInputProps) => {
   const { entityUuid, entityName } = useEntityContext();
   const isEntity = entityName != null && entityUuid != null;
   const isReport = isEntity && isReportModelName(entityName);
-  const handleBaseEntityTrees = isReport || (isEntity && ["sites", "nurseries"].includes(entityName));
+  const handleBaseEntityTrees =
+    props.withPreviousCounts && (isReport || (isEntity && ["sites", "nurseries"].includes(entityName)));
+  const displayPreviousCounts = props.withPreviousCounts && isReport;
 
   const entity = (handleBaseEntityTrees ? entityName : undefined) as EstablishmentEntityType;
   const uuid = handleBaseEntityTrees ? entityUuid : undefined;
-  const [, { establishmentTrees, previousPlantingCounts }] = useEstablishmentTrees({ entity, uuid });
+  const [establishmentLoaded, { establishmentTrees, previousPlantingCounts }] = useEstablishmentTrees({ entity, uuid });
+  const shouldPrepopulate = value.length == 0 && Object.values(previousPlantingCounts ?? {}).length > 0;
+  useValueChanged(shouldPrepopulate, function () {
+    if (shouldPrepopulate) {
+      onChange(
+        Object.entries(previousPlantingCounts!).map(([name, previousCount]) => ({
+          uuid: uuidv4(),
+          name,
+          taxon_id: previousCount.taxonId,
+          amount: 0
+        }))
+      );
+    }
+  });
 
   const totalWithPrevious = useMemo(
     () =>
       props.value.reduce(
-        (total, { name, amount }) => total + (amount ?? 0) + (previousPlantingCounts?.[name ?? ""] ?? 0),
+        (total, { name, amount }) => total + (amount ?? 0) + (previousPlantingCounts?.[name ?? ""]?.amount ?? 0),
         0
       ),
     [previousPlantingCounts, props.value]
@@ -157,7 +175,7 @@ const TreeSpeciesInput = (props: TreeSpeciesInputProps) => {
       handleCreate?.({
         uuid: uuidv4(),
         name: valueAutoComplete,
-        taxon_id: taxonId,
+        taxon_id: props.useTaxonomicBackbone ? taxonId : undefined,
         amount: props.withNumbers ? 0 : undefined
       });
 
@@ -183,7 +201,7 @@ const TreeSpeciesInput = (props: TreeSpeciesInputProps) => {
       handleUpdate({
         ...editValue,
         name: valueAutoComplete,
-        taxon_id: findTaxonId(valueAutoComplete)
+        taxon_id: props.useTaxonomicBackbone ? taxonId : undefined
       });
 
       setValueAutoComplete("");
@@ -202,6 +220,8 @@ const TreeSpeciesInput = (props: TreeSpeciesInputProps) => {
     addValue(e);
   };
 
+  if (!establishmentLoaded || shouldPrepopulate) return null;
+
   return (
     <InputWrapper
       inputId={id}
@@ -235,6 +255,8 @@ const TreeSpeciesInput = (props: TreeSpeciesInputProps) => {
                 value={valueAutoComplete}
                 onChange={e => setValueAutoComplete(e.target.value)}
                 onSearch={async search => {
+                  if (!props.useTaxonomicBackbone) return [];
+
                   const result = await autocompleteSearch(search);
                   setSearchResult(result);
                   return result;
@@ -289,23 +311,26 @@ const TreeSpeciesInput = (props: TreeSpeciesInputProps) => {
           </div>
         </When>
         <div className="mb-1 mt-9 flex gap-6 border-b pb-4">
-          <div className={classNames({ "w-[75%]": !isReport, "w-[50%]": isReport })} ref={refTreeSpecies}>
+          <div
+            className={classNames({ "w-[75%]": !displayPreviousCounts, "w-[50%]": displayPreviousCounts })}
+            ref={refTreeSpecies}
+          >
             <Text variant="text-14-bold" className="uppercase text-black">
               {props.title}
             </Text>
             <Text variant="text-20-bold" className="text-primary">
               {props.value.length}
             </Text>
           </div>
-          <div className={classNames({ "border-r pr-6": isReport })} ref={refPlanted}>
+          <div className={classNames({ "border-r pr-6": displayPreviousCounts })} ref={refPlanted}>
             <Text variant="text-14-bold" className="uppercase text-black">
               {isReport ? t("SPECIES PLANTED:") : t("TREES TO BE PLANTED:")}
             </Text>
             <Text variant="text-20-bold" className="text-primary">
               {props.withNumbers ? props.value.reduce((total, v) => total + (v.amount || 0), 0).toLocaleString() : "0"}
             </Text>
           </div>
-          <When condition={isReport}>
+          <When condition={displayPreviousCounts}>
             <div>
               <Text variant="text-14-bold" className="uppercase text-black">
                 {t("TOTAL PLANTED TO DATE:")}
@@ -368,7 +393,7 @@ const TreeSpeciesInput = (props: TreeSpeciesInputProps) => {
                 }
               >
                 <div className="flex items-center gap-1">
-                  <When condition={value.taxon_id == null}>
+                  <When condition={props.useTaxonomicBackbone && value.taxon_id == null}>
                     <div title={t("Non-Scientific Name")}>
                       <Icon name={IconNames.NON_SCIENTIFIC_NAME} className="min-h-8 min-w-8 h-8 w-8" />
                     </div>
@@ -410,9 +435,9 @@ const TreeSpeciesInput = (props: TreeSpeciesInputProps) => {
                   containerClassName=""
                 />
               </div>
-              <When condition={isReport}>
+              <When condition={displayPreviousCounts}>
                 <Text variant="text-14-light" className="text-black ">
-                  {(previousPlantingCounts?.[value.name ?? ""] ?? 0).toLocaleString()}
+                  {(previousPlantingCounts?.[value.name ?? ""]?.amount ?? 0).toLocaleString()}
                 </Text>
               </When>
               <div className="flex flex-1 justify-end gap-6">
@@ -426,11 +451,21 @@ const TreeSpeciesInput = (props: TreeSpeciesInputProps) => {
                     autoCompleteRef.current?.focus();
                   }}
                 />
-                <IconButton
-                  iconProps={{ name: IconNames.TRASH_TA, width: 24 }}
-                  className="text-blueCustom-700 hover:text-primary"
-                  onClick={() => setDeleteIndex(value.uuid ?? null)}
-                />
+                <When
+                  condition={
+                    !displayPreviousCounts ||
+                    previousPlantingCounts == null ||
+                    // If we're using previous counts, only allow delete if this row has never been
+                    // reported on before.
+                    Object.keys(previousPlantingCounts).find(name => name === value.name) == null
+                  }
+                >
+                  <IconButton
+                    iconProps={{ name: IconNames.TRASH_TA, width: 24 }}
+                    className="text-blueCustom-700 hover:text-primary"
+                    onClick={() => setDeleteIndex(value.uuid ?? null)}
+                  />
+                </When>
               </div>
             </div>
           )}

diff --git a/src/components/elements/Toggle/Toggle.tsx b/src/components/elements/Toggle/Toggle.tsx
@@ -14,12 +14,19 @@ export interface ToggleProps {
   disabledIndexes?: number[];
   variant?: ToggleVariants;
   onChangeActiveIndex?: (index: number) => void;
+  defaultActiveIndex?: number;
 }
 
 const Toggle = (props: ToggleProps) => {
-  const { items, disabledIndexes = [], variant = VARIANT_TOGGLE_PRIMARY, onChangeActiveIndex } = props;
+  const {
+    items,
+    disabledIndexes = [],
+    variant = VARIANT_TOGGLE_PRIMARY,
+    onChangeActiveIndex,
+    defaultActiveIndex = 0
+  } = props;
 
-  const [activeIndex, setActiveIndex] = useState(0);
+  const [activeIndex, setActiveIndex] = useState(defaultActiveIndex);
   const [width, setWidth] = useState(0);
   const buttonRefs = useRef<(HTMLButtonElement | null)[]>([]);
 

diff --git a/src/components/extensive/WizardForm/WizardForm.stories.tsx b/src/components/extensive/WizardForm/WizardForm.stories.tsx
@@ -187,6 +187,8 @@ const getSteps = (edit?: boolean): FormStepSchema[] => {
           description: "TRee species input description",
           fieldProps: {
             title: "Tree Species",
+            withPreviousCounts: false,
+            useTaxonomicBackbone: false,
             buttonCaptionSuffix: "Species",
             required: true
           },
@@ -204,6 +206,8 @@ const getSteps = (edit?: boolean): FormStepSchema[] => {
 
           fieldProps: {
             title: "Tree Species",
+            withPreviousCounts: false,
+            useTaxonomicBackbone: false,
             buttonCaptionSuffix: "Species",
             required: true,
             withNumbers: true

diff --git a/src/generated/v3/entityService/entityServiceSchemas.ts b/src/generated/v3/entityService/entityServiceSchemas.ts
@@ -3,6 +3,17 @@
  *
  * @version 1.0
  */
+export type PreviousPlantingCountDto = {
+  /**
+   * Taxonomic ID for this tree species row
+   */
+  taxonId: string | null;
+  /**
+   * Number of trees of this type that have been planted in all previous reports on this entity.
+   */
+  amount: number;
+};
+
 export type ScientificNameDto = {
   /**
    * The scientific name for this tree species
@@ -20,9 +31,9 @@ export type EstablishmentsTreesDto = {
   /**
    * If the entity in this request is a report, the sum totals of previous planting by species.
    *
-   * @example {"Aster persaliens":256,"Cirsium carniolicum":1024}
+   * @example {"Aster persaliens":{"amount":256},"Cirsium carniolicum":{"taxonId":"wfo-0000130112","amount":1024}}
    */
   previousPlantingCounts: {
-    [key: string]: number;
+    [key: string]: PreviousPlantingCountDto;
   } | null;
 };
diff --git a/src/helpers/customForms.ts b/src/helpers/customForms.ts
@@ -732,7 +732,7 @@ const getFieldValidation = (question: FormQuestionRead, t: typeof useT, framewor
       const arrayItemShape = question.with_numbers
         ? yup.object({
             name: yup.string().required(),
-            amount: yup.number().min(1).required()
+            amount: yup.number().min(0).required()
           })
         : yup.object({
             name: yup.string().required()

diff --git a/src/pages/dashboard/charts/CustomBarJobsCreated.tsx b/src/pages/dashboard/charts/CustomBarJobsCreated.tsx
@@ -10,6 +10,9 @@ interface CustomBarProps {
 
 export const CustomBar: React.FC<CustomBarProps> = ({ fill, x, y, width, height }) => {
   const radius = 5;
+  if (width === 0 || height === 0) {
+    return null;
+  }
   const path = `
     M${x},${y + height}
     L${x},${y + radius}

diff --git a/src/pages/dashboard/charts/CustomTooltip.tsx b/src/pages/dashboard/charts/CustomTooltip.tsx
@@ -2,13 +2,23 @@ import React from "react";
 
 export const CustomTooltip: React.FC<any> = ({ active, payload, label }) => {
   if (!active || !payload || !payload.length) return null;
+  const value = payload[0].value;
+  const total = payload[0].payload.total;
+  const percentage = (value / total) * 100;
+
+  const formattedValue = value.toLocaleString("en-US", {
+    minimumFractionDigits: 1,
+    maximumFractionDigits: 1
+  });
+
+  const formattedPercentage = percentage.toFixed(0);
+
   return (
     <div className="border-gray-300 custom-tooltip rounded-lg border bg-white p-2">
       <p className="text-12-bold text-black">{label}</p>
       {payload.map((item: any, index: number) => (
         <p key={index} className="text-12">
-          <span className="text-12 font-normal text-black">{item.name}: </span>
-          <span className="text-12-bold text-black">{item.value.toLocaleString()}</span>
+          <p className="text-gray-600">{`${formattedValue}ha (${formattedPercentage}%)`}</p>
         </p>
       ))}
     </div>

diff --git a/src/pages/dashboard/charts/SimpleBarChart.tsx b/src/pages/dashboard/charts/SimpleBarChart.tsx
@@ -17,12 +17,14 @@ type ResturationStrategy = {
 type FormattedData = {
   name: string;
   Value: number;
+  total: number;
 };
 
-const SimpleBarChart = ({ data }: { data: ResturationStrategy[] }) => {
+const SimpleBarChart = ({ data, total }: { data: ResturationStrategy[]; total?: number }) => {
   const formattedData: FormattedData[] = data.map(item => ({
     name: item.label.split(",").join(" + ").replace(/-/g, " "),
-    Value: item.value
+    Value: item.value,
+    total: total ?? 0
   }));
 
   return (

diff --git a/src/pages/dashboard/components/GraphicIconDashboard.tsx b/src/pages/dashboard/components/GraphicIconDashboard.tsx
@@ -83,12 +83,12 @@ const GraphicIconDashboard = ({ data, maxValue }: { data: DashboardTableDataProp
             className="shadow-md fixed z-10 w-auto rounded border border-darkCustom bg-white p-2"
             style={{
               left: `${tooltip.x}px`,
-              top: `${tooltip.y - 50}px`,
+              top: `${tooltip.y - 65}px`,
               transform: "translateX(-50%)"
             }}
           >
-            <span className="text-12-light text-darkCustom">{`${t(tooltip.label)} `}</span>
-            <span className="text-12-bold text-darkCustom">{t(tooltip.text)}</span>
+            <p className="text-12-bold text-darkCustom">{`${t(tooltip.label)} `}</p>
+            <span className="text-12-light text-darkCustom">{t(tooltip.text)}</span>
           </div>
         )}
         <div className="w-full">

diff --git a/src/pages/organization/[id]/components/edit/getEditOrganisationSteps.ts b/src/pages/organization/[id]/components/edit/getEditOrganisationSteps.ts
@@ -599,6 +599,8 @@ export const getSteps = (t: typeof useT, uuid: string): FormStepSchema[] => {
           ),
           fieldProps: {
             title: t("Tree Species"),
+            withPreviousCounts: false,
+            useTaxonomicBackbone: true,
             buttonCaptionSuffix: t("Species"),
             withNumbers: false
           }

diff --git a/src/pages/organization/[id]/project-pitch/create/[pitchUUID]/getCreatePitchSteps.ts b/src/pages/organization/[id]/project-pitch/create/[pitchUUID]/getCreatePitchSteps.ts
@@ -332,6 +332,8 @@ export const getSteps = (t: typeof useT, uuid: string): FormStepSchema[] => [
         ),
         fieldProps: {
           title: t("Tree Species"),
+          withPreviousCounts: false,
+          useTaxonomicBackbone: true,
           buttonCaptionSuffix: t("Species"),
           withNumbers: true
         }