Added infobutton content for project overview filters

Vizzuality · Dec 17, 2024 · b3085c2 · b3085c2
1 parent d64ac97
commit b3085c2
Show file tree

Hide file tree

Showing 2 changed files with 88 additions and 0 deletions.
diff --git a/client/src/constants/tooltip.tsx b/client/src/constants/tooltip.tsx
@@ -80,6 +80,85 @@ export const FILTERS = {
   COST: "Total cost (incl. CAPEX and OPEX)",
   ABATEMENT_POTENTIAL:
     "Estimation of the total amount of CO2e abatement that is expected during the life of the project. Used to determine whether the scale justifies the development costs",
+  PROJECT_SIZE: (
+    <div className="space-y-2">
+      <p>
+        Project size refers to the scale of restoration or conservation efforts,
+        measured in hectares, and is determined using a standardized approach to
+        ensure comparability across different ecosystems and project types.
+      </p>
+      <p>
+        Sizes are defined based on their &quot;carbon equivalency&quot; — the
+        impact a conservation project has on carbon emissions is aligned with an
+        equivalent restoration effort.
+      </p>
+      <p>
+        For instance, &quot;medium&quot; projects involve 500 hectares of
+        restored mangroves, salt marshes, or seagrass, compared to conservation
+        efforts that avoid the loss of approximately 20,000 ha of mangroves,
+        4,000 ha of salt marshes, or 2,000 ha of seagrass.
+      </p>
+      <p>
+        This method allows for meaningful &quot;apples-to-apples&quot;
+        comparisons across project activities and ecosystem types.
+      </p>
+    </div>
+  ),
+  CARBON_PRICING_TYPE: (
+    <div className="space-y-2">
+      <p>
+        The Carbon Price Type defines the pricing approach used to calculate the
+        cost of carbon credits, which impacts project costs, including
+        contributions to the “community benefit sharing fund.” There are two
+        pricing archetypes available:
+      </p>
+      <ul className="list-disc space-y-2 pl-4">
+        <li>
+          Market Price: A standardized premium price of $30 per ton of CO₂e,
+          reflecting the added value of co-benefits such as climate resilience
+          and biodiversity. This price is consistent across all projects.
+        </li>
+        <li>
+          OPEX Breakeven Price: A project-specific price designed to cover the
+          operational expenditure (OPEX) of an individual project. This price
+          varies depending on the unique costs associated with each project.
+        </li>
+      </ul>
+      <p>
+        These two options allow for flexible cost assessments based on
+        standardized market values or project-specific operational needs.
+      </p>
+    </div>
+  ),
+  COST_TYPE: (
+    <div className="space-y-2">
+      <p>
+        The Cost Type defines the method used to calculate and present project
+        costs. It offers two approaches to understand the financial requirements
+        of a project:
+      </p>
+      <ul className="list-disc space-y-2 pl-4">
+        <li>
+          Total Cost: The full cost of the project, including both capital
+          expenditures (CAPEX) and operational expenditures (OPEX), without
+          adjustments for the time value of money. This provides a
+          straightforward, cumulative view of project costs.
+        </li>
+        <li>
+          Net Present Value (NPV) Cost: The present value of total project costs
+          (CAPEX + OPEX) per ton of CO₂e, excluding financing costs. The NPV
+          Cost accounts for the time value of money, providing a more accurate
+          view of a project&apos;s long-term financial viability. This metric
+          allows for better comparison across projects by normalizing future
+          costs to their present-day value.
+        </li>
+      </ul>
+      <p>
+        These two cost perspectives offer different insights into project
+        affordability and financial planning.
+      </p>
+    </div>
+  ),
 };
 
 export const MAP_LEGEND =

diff --git a/client/src/containers/overview/header/parameters/index.tsx b/client/src/containers/overview/header/parameters/index.tsx
@@ -9,8 +9,11 @@ import { FILTER_KEYS } from "@/app/(overview)/constants";
 import { Parameter, useGlobalFilters } from "@/app/(overview)/url-store";
 import { filtersSchema } from "@/app/(overview)/url-store";
 
+import { FILTERS } from "@/constants/tooltip";
+
 import { INITIAL_COST_RANGE } from "@/containers/overview/filters/constants";
 
+import InfoButton from "@/components/ui/info-button";
 import { Label } from "@/components/ui/label";
 import {
   Select,
@@ -25,6 +28,7 @@ export const PROJECT_PARAMETERS: Parameter[] = [
     key: FILTER_KEYS[1],
     label: "Project size",
     className: "w-[125px]",
+    tooltipContent: FILTERS.PROJECT_SIZE,
     options: [
       {
         label: PROJECT_SIZE_FILTER.SMALL,
@@ -44,6 +48,7 @@ export const PROJECT_PARAMETERS: Parameter[] = [
     key: FILTER_KEYS[2],
     label: "Carbon pricing type",
     className: "w-[195px]",
+    tooltipContent: FILTERS.CARBON_PRICING_TYPE,
     options: [
       {
         label: PROJECT_PRICE_TYPE.MARKET_PRICE,
@@ -60,6 +65,7 @@ export const PROJECT_PARAMETERS: Parameter[] = [
     key: FILTER_KEYS[3],
     label: "Cost",
     className: "w-[85px]",
+    tooltipContent: FILTERS.COST_TYPE,
     options: [
       {
         label: COST_TYPE_SELECTOR.TOTAL,
@@ -94,6 +100,9 @@ export default function ParametersProjects() {
       {PROJECT_PARAMETERS.map((parameter) => (
         <div key={parameter.label} className="flex items-center space-x-2">
           <Label htmlFor={parameter.label}>{parameter.label}</Label>
+          <InfoButton title={parameter.label}>
+            {parameter.tooltipContent}
+          </InfoButton>
           <Select
             name={parameter.label}
             defaultValue={String(filters[parameter.key])}