render individual points in port report events vessels

GlobalFishingWatch · Jan 14, 2025 · 18f13c4 · 18f13c4
1 parent ad22fc1
commit 18f13c4
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 2 deletions.
diff --git a/apps/fishing-map/features/reports/ports/PortsReport.tsx b/apps/fishing-map/features/reports/ports/PortsReport.tsx
@@ -31,6 +31,7 @@ import { useFetchPortsReport } from './ports-report.hooks'
 import {
   selectPortReportsDataview,
   selectPortReportVesselsGrouped,
+  selectPortReportVesselsIndividualData,
   selectPortReportVesselsPaginated,
   selectPortReportVesselsPagination,
 } from './ports-report.selectors'
@@ -66,6 +67,7 @@ function PortsReport() {
   const portsReportData = useSelector(selectPortsReportData)
   const portsReportDataStatus = useSelector(selectPortsReportStatus)
   const portsReportVesselsGrouped = useSelector(selectPortReportVesselsGrouped)
+  const portReportIndividualData = useSelector(selectPortReportVesselsIndividualData)
   const portsReportVesselsPaginated = useSelector(selectPortReportVesselsPaginated)
   const {
     data,
@@ -222,6 +224,7 @@ function PortsReport() {
           </div>
           <EventsReportVesselsGraph
             data={portsReportVesselsGrouped}
+            individualData={portReportIndividualData}
             color={color}
             property={portReportVesselsProperty}
             filterQueryParam="portsReportVesselsFilter"

diff --git a/apps/fishing-map/features/reports/ports/ports-report.selectors.ts b/apps/fishing-map/features/reports/ports/ports-report.selectors.ts
@@ -10,7 +10,10 @@ import {
   TEMPLATE_VESSEL_DATAVIEW_SLUG,
 } from 'data/workspaces'
 import { selectAllDataviews } from 'features/dataviews/dataviews.slice'
-import { REPORT_FILTER_PROPERTIES } from '../vessel-groups/vessels/vessel-group-report-vessels.selectors'
+import {
+  getVesselIndividualGroupedData,
+  REPORT_FILTER_PROPERTIES,
+} from '../vessel-groups/vessels/vessel-group-report-vessels.selectors'
 import { OTHER_CATEGORY_LABEL } from '../vessel-groups/vessel-group-report.config'
 import { selectPortsReportVessels } from './ports-report.slice'
 import {
@@ -115,6 +118,14 @@ export const selectPortReportVesselsGrouped = createSelector(
   }
 )
 
+export const selectPortReportVesselsIndividualData = createSelector(
+  [selectPortReportVesselsFiltered, selectPortReportVesselsProperty],
+  (vessels, groupBy) => {
+    if (!vessels || !groupBy) return []
+    return getVesselIndividualGroupedData(vessels, groupBy)
+  }
+)
+
 export const selectPortReportVesselsPaginated = createSelector(
   [
     selectPortReportVesselsFiltered,

diff --git a/...shing-map/features/reports/vessel-groups/vessels/vessel-group-report-vessels.selectors.ts b/...shing-map/features/reports/vessel-groups/vessels/vessel-group-report-vessels.selectors.ts
@@ -266,7 +266,7 @@ export const selectVGRVesselsGraphAggregatedData = createSelector(
   }
 )
 
-function getVesselIndividualGroupedData(
+export function getVesselIndividualGroupedData(
   vessels: (EventsStatsVessel | VesselGroupVesselTableParsed)[],
   groupByProperty: VGRSubsection | VGREventsVesselsProperty
 ) {