feat #309: migrate getTopVesselsInActivity to getTopVesselsInMpas (da…

…shboard)
dataforgoodfr · Dec 23, 2024 · 0b89742 · 0b89742
1 parent 4ae6a37
commit 0b89742
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 37 deletions.
diff --git a/frontend/app/dashboard/page.tsx b/frontend/app/dashboard/page.tsx
@@ -1,11 +1,17 @@
-"use client"
+"use client";
+
+import { useMemo, useState } from "react";
+import { useDashboardData } from "@/services/dashboard.service";
+
+
+
+import { getDateRange } from "@/libs/dateUtils";
+import DashboardHeader from "@/components/dashboard/dashboard-header";
+import DashboardOverview from "@/components/dashboard/dashboard-overview";
+
+
 
-import { useMemo, useState } from "react"
-import { useDashboardData } from "@/services/dashboard.service"
 
-import { getDateRange } from "@/libs/dateUtils"
-import DashboardHeader from "@/components/dashboard/dashboard-header"
-import DashboardOverview from "@/components/dashboard/dashboard-overview"
 
 export default function DashboardPage() {
   const [selectedDays, setSelectedDays] = useState(7)
@@ -14,7 +20,7 @@ export default function DashboardPage() {
   }, [selectedDays])
 
   const {
-    topVesselsInActivity,
+    topVesselsInMpas,
     topAmpsVisited,
     totalVesselsInActivity,
     totalAmpsVisited,
@@ -31,15 +37,15 @@ export default function DashboardPage() {
 
         <div className="size-full">
           <DashboardOverview
-            topVesselsInActivity={topVesselsInActivity}
+            topVesselsInMpas={topVesselsInMpas}
             topAmpsVisited={topAmpsVisited}
             totalVesselsActive={totalVesselsInActivity}
             totalAmpsVisited={totalAmpsVisited}
             totalVesselsTracked={totalVesselsTracked}
             onDateRangeChange={(value) => {
               setSelectedDays(Number(value))
             }}
-            topVesselsInActivityLoading={isLoading.topVesselsInActivity}
+            topVesselsInMpasLoading={isLoading.topVesselsInMpas}
             topAmpsVisitedLoading={isLoading.topAmpsVisited}
             totalVesselsActiveLoading={isLoading.totalVesselsInActivity}
             totalAmpsVisitedLoading={isLoading.totalAmpsVisited}
@@ -49,4 +55,4 @@ export default function DashboardPage() {
       </div>
     </section>
   )
-}
+}
diff --git a/frontend/components/dashboard/dashboard-overview.tsx b/frontend/components/dashboard/dashboard-overview.tsx
@@ -1,16 +1,21 @@
-"use client"
+"use client";
 
-import { TOTAL_AMPS, TOTAL_VESSELS } from "@/constants/totals.constants"
+import { TOTAL_AMPS, TOTAL_VESSELS } from "@/constants/totals.constants";
 
-import { Item } from "@/types/item"
-import ListCard from "@/components/ui/list-card"
-import KPICard from "@/components/dashboard/kpi-card"
 
-import { DateRangeSelector } from "../ui/date-range-selector"
+
+import { Item } from "@/types/item";
+import ListCard from "@/components/ui/list-card";
+import KPICard from "@/components/dashboard/kpi-card";
+
+
+
+import { DateRangeSelector } from "../ui/date-range-selector";
+
 
 type Props = {
-  topVesselsInActivity: Item[]
-  topVesselsInActivityLoading: boolean
+  topVesselsInMpas: Item[]
+  topVesselsInMpasLoading: boolean
   topAmpsVisited: Item[]
   topAmpsVisitedLoading: boolean
   totalVesselsActive: number
@@ -23,8 +28,8 @@ type Props = {
 }
 
 export default function DashboardOverview({
-  topVesselsInActivity,
-  topVesselsInActivityLoading,
+  topVesselsInMpas,
+  topVesselsInMpasLoading,
   topAmpsVisited,
   topAmpsVisitedLoading,
   totalVesselsActive,
@@ -74,14 +79,14 @@ export default function DashboardOverview({
             <ListCard
               key="top-vessels-in-activity"
               title="Top Vessels visiting MPAs"
-              items={topVesselsInActivity ?? []}
+              items={topVesselsInMpas ?? []}
               enableViewDetails
-              loading={topVesselsInActivityLoading}
+              loading={topVesselsInMpasLoading}
               titleClassName="absolute -top-8 xl:-top-10"
             />
           </div>
         </div>
       </div>
     </section>
   )
-}
+}
diff --git a/frontend/libs/mapper.tsx b/frontend/libs/mapper.tsx
@@ -11,7 +11,7 @@ export function convertVesselDtoToItem(metrics: VesselMetrics[]): Item[] {
         id: `${vessel.id}`,
         title: vessel.ship_name,
         description: `IMO ${vessel.imo} / MMSI ${vessel.mmsi} / ${vessel.length} m`,
-        value: convertDurationToString(vesselMetrics.total_time_at_sea),
+        value: convertDurationToString(vesselMetrics.total_time_in_mpas),
         type: "vessel",
         countryIso3: vessel.country_iso3,
       }

diff --git a/frontend/services/backend-rest-client.ts b/frontend/services/backend-rest-client.ts
@@ -114,12 +114,12 @@ export async function getVesselFirstExcursionSegments(vesselId: number) {
   }
 }
 
-export function getTopVesselsInActivity(
+export function getTopVesselsInMpas(
   startAt: string,
   endAt: string,
   topVesselsLimit: number
 ) {
-  const url = `${BASE_URL}/metrics/vessels-in-activity?start_at=${startAt}&end_at=${endAt}&limit=${topVesselsLimit}&order=DESC`
+  const url = `${BASE_URL}/metrics/vessels/activity-in-mpas?start_at=${startAt}&end_at=${endAt}&limit=${topVesselsLimit}&order=DESC`
   console.log(`GET ${url}`)
   return axios.get<VesselMetrics[]>(url)
 }

diff --git a/frontend/services/dashboard.service.ts b/frontend/services/dashboard.service.ts
@@ -1,6 +1,6 @@
 import { TOTAL_VESSELS } from "@/constants/totals.constants"
 import {
-  getTopVesselsInActivity,
+  getTopVesselsInMpas,
   getTopZonesVisited,
   getVesselsAtSea,
   getVesselsTrackedCount,
@@ -13,13 +13,13 @@ import { convertVesselDtoToItem, convertZoneDtoToItem } from "@/libs/mapper"
 const TOP_ITEMS_SIZE = 5
 
 type DashboardData = {
-  topVesselsInActivity: any[]
+  topVesselsInMpas: any[]
   topAmpsVisited: any[]
   totalVesselsInActivity: number
   totalAmpsVisited: number
   totalVesselsTracked: number
   isLoading: {
-    topVesselsInActivity: boolean
+    topVesselsInMpas: boolean
     topAmpsVisited: boolean
     totalVesselsInActivity: boolean
     totalAmpsVisited: boolean
@@ -32,21 +32,21 @@ export const useDashboardData = (
   endAt: string
 ): DashboardData => {
   const {
-    data: topVesselsInActivity = [],
-    isLoading: topVesselsInActivityLoading,
+    data: topVesselsInMpas = [],
+    isLoading: topVesselsInMpasLoading,
   } = useSWR(
-    `topVesselsInActivity-${startAt}`,
+    `topVesselsInMpas-${startAt}`,
     async () => {
       try {
-        const response = await getTopVesselsInActivity(
+        const response = await getTopVesselsInMpas(
           startAt,
           endAt,
           TOP_ITEMS_SIZE
         )
         return convertVesselDtoToItem(response?.data || [])
       } catch (error) {
         console.log(
-          "An error occurred while fetching top vessels in activity: " + error
+          "An error occurred while fetching top vessels in MPAs: " + error
         )
         return []
       }
@@ -137,13 +137,13 @@ export const useDashboardData = (
   )
 
   return {
-    topVesselsInActivity,
+    topVesselsInMpas,
     topAmpsVisited,
     totalVesselsInActivity,
     totalAmpsVisited,
     totalVesselsTracked,
     isLoading: {
-      topVesselsInActivity: topVesselsInActivityLoading,
+      topVesselsInMpas: topVesselsInMpasLoading,
       topAmpsVisited: topAmpsVisitedLoading,
       totalVesselsInActivity: totalVesselsInActivityLoading,
       totalAmpsVisited: totalAmpsVisitedLoading,

diff --git a/frontend/types/vessel.ts b/frontend/types/vessel.ts
@@ -19,7 +19,7 @@ export type Vessel = {
 
 export type VesselMetrics = {
   vessel: VesselDetails
-  total_time_at_sea: string
+  total_time_in_mpas: string
 }
 
 export type VesselDetails = {