Merge branch 'dev' of https://github.com/Vizzuality/tnc-blue-carbon-c…

…ost-tool into TBCCT-140-remove-id-col-all-tables
Vizzuality · Nov 26, 2024 · fbde7d9 · fbde7d9
2 parents 88b25c4 + de5b2d8
commit fbde7d9
Show file tree

Hide file tree

Showing 15 changed files with 829 additions and 40 deletions.
diff --git a/api/src/modules/import/dtos/excel-projects.dto.ts b/api/src/modules/import/dtos/excel-projects.dto.ts
@@ -18,8 +18,7 @@ export type ExcelProjects = {
   abatement_potential: number;
   total_cost_npv: number;
   total_cost: number;
-  // TODO: This column has dissapeared from the excel sheet
-  '$/tCO2e (NPV)': number;
+  cost_per_tco2e_npv: number;
   cost_per_tco2e: number;
   initial_price_assumption: string;
   price_type: PROJECT_PRICE_TYPE;

diff --git a/api/test/integration/custom-projects/custom-projects-setup.spec.ts b/api/test/integration/custom-projects/custom-projects-setup.spec.ts
@@ -65,11 +65,11 @@ describe('Create Custom Projects - Setup', () => {
 
     expect(response.body.data).toMatchObject({
       feasibilityAnalysis: 50000,
-      conservationPlanningAndAdmin: 166766.66666666666,
-      dataCollectionAndFieldCost: 26666.666666666668,
-      communityRepresentation: 67633.33333333333,
+      conservationPlanningAndAdmin: 166766.666666667,
+      dataCollectionAndFieldCost: 26666.6666666667,
+      communityRepresentation: 67633.3333333333,
       blueCarbonProjectPlanning: 100000,
-      establishingCarbonRights: 46666.666666666664,
+      establishingCarbonRights: 46666.6666666667,
       financingCost: 0.05,
       validation: 50000,
       implementationLabor: 0,

diff --git a/client/src/app/(overview)/constants.ts b/client/src/app/(overview)/constants.ts
@@ -11,7 +11,7 @@ export const FILTER_KEYS = [
   "countryCode",
   "ecosystem",
   "activity",
-  "activitySubtype",
+  "restorationActivity",
   "costRange",
   "abatementPotentialRange",
 ] as const;
diff --git a/client/src/app/(overview)/store.ts b/client/src/app/(overview)/store.ts
@@ -12,3 +12,11 @@ export const popupAtom = atom<{
   lngLat: MapMouseEvent["lngLat"];
   features: MapMouseEvent["features"];
 } | null>(null);
+
+export const projectDetailsAtom = atom<{
+  isOpen: boolean;
+  projectName: string;
+}>({
+  isOpen: false,
+  projectName: "",
+});
diff --git a/client/src/app/(overview)/url-store.ts b/client/src/app/(overview)/url-store.ts
@@ -44,7 +44,7 @@ export const INITIAL_FILTERS_STATE: z.infer<typeof filtersSchema> = {
   countryCode: "",
   ecosystem: [],
   activity: [],
-  activitySubtype: [],
+  restorationActivity: [],
   costRange: INITIAL_COST_RANGE[COST_TYPE_SELECTOR.NPV],
   abatementPotentialRange: INITIAL_ABATEMENT_POTENTIAL_RANGE,
 };

diff --git a/client/src/components/ui/bar-chart/index.tsx b/client/src/components/ui/bar-chart/index.tsx
@@ -0,0 +1,71 @@
+import { toCompactAmount } from "@/lib/format";
+
+interface BarChartProps {
+  total: number;
+  segments: {
+    value: number;
+    label: string;
+    colorClass: string;
+  }[];
+  orientation?: "horizontal" | "vertical";
+}
+
+const BarChart = ({
+  total,
+  segments,
+  orientation = "horizontal",
+}: BarChartProps) => {
+  const getSize = (value: number) => {
+    const percentage = (value / total) * 100;
+    return `${Math.max(percentage, 0)}%`;
+  };
+
+  if (orientation === "horizontal") {
+    return (
+      <div className="relative h-full min-h-[150px] w-full overflow-hidden rounded-lg">
+        <div className="absolute flex h-full w-full flex-row gap-1">
+          {segments.map((segment, index) => (
+            <div
+              key={index}
+              style={{
+                height: getSize(segment.value),
+                width: "100%",
+              }}
+              className={`relative h-full rounded transition-all duration-300 ease-in-out ${segment.colorClass}`}
+            >
+              <div className="absolute bottom-1 left-0 right-0 mx-1">
+                <div className="rounded bg-white/50 px-1.5 py-0.5 text-center text-xs font-semibold text-big-stone-950">
+                  ${toCompactAmount(segment.value)}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="relative h-40 w-full overflow-hidden rounded-lg">
+      <div className="absolute flex h-full w-full flex-col gap-1">
+        {segments.map((segment, index) => (
+          <div
+            key={index}
+            style={{
+              height: getSize(segment.value),
+            }}
+            className={`relative min-h-[30px] w-full transition-all duration-300 ease-in-out ${segment.colorClass}`}
+          >
+            <div className="absolute bottom-1 left-0 right-0 mx-1">
+              <div className="rounded bg-white/50 px-1.5 py-0.5 text-center text-xs font-semibold text-big-stone-950">
+                ${toCompactAmount(segment.value)}
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default BarChart;
diff --git a/client/src/containers/overview/filters/index.tsx b/client/src/containers/overview/filters/index.tsx
@@ -57,7 +57,7 @@ export default function ProjectsFilters() {
       countryCode: INITIAL_FILTERS_STATE.countryCode,
       ecosystem: INITIAL_FILTERS_STATE.ecosystem,
       activities: INITIAL_FILTERS_STATE.activity,
-      activitySubtype: INITIAL_FILTERS_STATE.activitySubtype,
+      restorationActivity: INITIAL_FILTERS_STATE.restorationActivity,
       abatementPotentialRange: INITIAL_FILTERS_STATE.abatementPotentialRange,
       costRange: INITIAL_FILTERS_STATE.costRange,
     }));
@@ -113,13 +113,13 @@ export default function ProjectsFilters() {
 
   const handleSubActivityChange = async (
     isChecked: CheckedState,
-    subActivity: (typeof filters.activitySubtype)[number],
+    subActivity: (typeof filters.restorationActivity)[number],
   ) => {
     await setFilters((prev) => ({
       ...prev,
-      activitySubtype: isChecked
-        ? [...prev.activitySubtype, subActivity]
-        : prev.activitySubtype.filter((e) => e !== subActivity),
+      restorationActivity: isChecked
+        ? [...prev.restorationActivity, subActivity]
+        : prev.restorationActivity.filter((e) => e !== subActivity),
     }));
   };
 
@@ -279,7 +279,7 @@ export default function ProjectsFilters() {
                       <CheckboxWrapper
                         label={subActivity.label}
                         id={subActivity.value}
-                        checked={filters.activitySubtype.includes(
+                        checked={filters.restorationActivity.includes(
                           subActivity.value,
                         )}
                         onCheckedChange={async (isChecked) => {