Initial setup AnnualProjectCashFlow

Vizzuality · Dec 2, 2024 · f12bb1f · f12bb1f
1 parent 7282f8a
commit f12bb1f
Show file tree

Hide file tree

Showing 21 changed files with 1,611 additions and 294 deletions.
diff --git a/client/package.json b/client/package.json
@@ -49,6 +49,7 @@
     "react-dropzone": "^14.3.5",
     "react-map-gl": "7.1.7",
     "react-resizable-panels": "2.1.6",
+    "recharts": "^2.13.3",
     "rooks": "7.14.1",
     "tailwind-merge": "2.5.3",
     "tailwindcss-animate": "1.0.7",

diff --git a/client/src/app/globals.css b/client/src/app/globals.css
@@ -4,7 +4,6 @@
 @tailwind components;
 @tailwind utilities;
 
-
 body {
   font-family: Arial, Helvetica, sans-serif;
 }
@@ -50,6 +49,11 @@ body {
     --sidebar-accent-foreground: 192, 86%, 69%;
     --sidebar-border: 220 13% 91%;
     --sidebar-ring: 212, 57%, 24%;
+    --chart-1: 150 43% 61%;
+    --chart-2: 194 88% 43%;
+    --chart-3: 191 87% 82%;
+    --chart-4: 50 80% 58%;
+    --chart-5: 213 73% 97%;
   }
 }
 
@@ -65,31 +69,52 @@ body {
 /* mapbox styles */
 .mapboxgl-popup-anchor-top {
   .mapboxgl-popup-tip {
-    @apply !border-b-popover !z-10 relative;
+    @apply relative !z-10 !border-b-popover;
   }
 }
 
 .mapboxgl-popup-anchor-bottom {
   .mapboxgl-popup-tip {
-    @apply !border-t-popover !z-10 relative;
+    @apply relative !z-10 !border-t-popover;
   }
 }
 
 .mapboxgl-popup-anchor-left {
   .mapboxgl-popup-tip {
-    @apply !border-r-popover !z-10 relative;
+    @apply relative !z-10 !border-r-popover;
   }
 }
 
 .mapboxgl-popup-anchor-right {
   .mapboxgl-popup-tip {
-    @apply !border-l-popover !z-10 relative;
+    @apply relative !z-10 !border-l-popover;
   }
 }
 
 .mapboxgl-popup-content {
-  @apply !bg-popover !rounded-md border border-border text-big-stone-50 shadow-md;
+  @apply !rounded-md border border-border !bg-popover text-big-stone-50 shadow-md;
 }
 .mapboxgl-popup-close-button {
   @apply hidden;
-}
+}
+
+/* cashflow chart */
+.cashflow-chart {
+  .recharts-cartesian-grid-vertical line {
+    stroke-dasharray: 3, 3;
+
+    &:nth-last-child(1),
+    &:nth-last-child(2) {
+      stroke: transparent;
+    }
+  }
+
+  .recharts-cartesian-grid-horizontal line {
+    stroke-dasharray: 0;
+
+    &:first-of-type,
+    &:last-of-type {
+      stroke: transparent;
+    }
+  }
+}
diff --git a/client/src/app/projects/[id]/store.ts b/client/src/app/projects/[id]/store.ts
@@ -1,3 +1,4 @@
+import { COST_TYPE_SELECTOR } from "@shared/entities/projects.entity";
 import { atom } from "jotai";
 import { parseAsStringLiteral, useQueryState } from "nuqs";
 
@@ -9,10 +10,13 @@ export const projectsUIState = atom<{
   projectSummaryOpen: false,
 });
 export const showCostDetailsAtom = atom<boolean>(false);
+export const costDetailsFilterAtom = atom<COST_TYPE_SELECTOR>(
+  COST_TYPE_SELECTOR.TOTAL,
+);
 
-export function useProjectCashFlowView() {
+export function useProjectCashFlowTab() {
   return useQueryState(
-    "cashflow",
+    "cashflowTab",
     parseAsStringLiteral(CASH_FLOW_VIEWS).withDefault("chart"),
   );
 }