show individual data graphs

GlobalFishingWatch · Jan 24, 2025 · 712999f · 712999f
1 parent ce2e036
commit 712999f
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 34 deletions.
diff --git a/apps/fishing-map/features/reports/shared/activity/vessels/ReportVesselsGraph.tsx b/apps/fishing-map/features/reports/shared/activity/vessels/ReportVesselsGraph.tsx
@@ -219,9 +219,9 @@ export default function ReportVesselsGraph() {
     }
   }
 
-  // const getIndividualData = useCallback(async () => {
-  //   return individualData
-  // }, [individualData])
+  const getIndividualData = useCallback(async () => {
+    return individualData
+  }, [individualData])
 
   const getAggregatedData = useCallback(async () => {
     return data as any[]
@@ -239,7 +239,7 @@ export default function ReportVesselsGraph() {
     <Fragment>
       <div className={styles.graph} data-test="activity-report-vessels-graph">
         <ResponsiveBarChart
-          // getIndividualData={getIndividualData}
+          getIndividualData={getIndividualData}
           getAggregatedData={getAggregatedData}
           // onAggregatedItemClick={onBarClick}
           // onIndividualItemClick={onPointClick}

diff --git a/apps/fishing-map/features/reports/shared/events/EventsReportGraph.tsx b/apps/fishing-map/features/reports/shared/events/EventsReportGraph.tsx
@@ -150,25 +150,25 @@ export default function EventsReportGraph({
   }
 
   const getAggregatedData = useCallback(async () => timeseries, [timeseries])
-  // const getIndividualData = useCallback(async () => {
-  //   const params = {
-  //     ...getEventsStatsQuery({
-  //       start,
-  //       end,
-  //       filters: filtersMemo,
-  //       dataset: datasetId,
-  //     }),
-  //     ...(includesMemo && { includes: includesMemo }),
-  //     limit: 1000,
-  //     offset: 0,
-  //   }
-  //   const data = await GFWAPI.fetch<APIPagination<ApiEvent>>(`/v3/events?${stringify(params)}`)
-  //   const groupedData = groupBy(data.entries, (item) => getISODateByInterval(item.start, interval))
-
-  //   return Object.entries(groupedData)
-  //     .map(([date, events]) => ({ date, values: events }))
-  //     .sort((a, b) => a.date.localeCompare(b.date))
-  // }, [start, end, filtersMemo, includesMemo, datasetId, interval])
+  const getIndividualData = useCallback(async () => {
+    const params = {
+      ...getEventsStatsQuery({
+        start,
+        end,
+        filters: filtersMemo,
+        dataset: datasetId,
+      }),
+      ...(includesMemo && { includes: includesMemo }),
+      limit: 1000,
+      offset: 0,
+    }
+    const data = await GFWAPI.fetch<APIPagination<ApiEvent>>(`/v3/events?${stringify(params)}`)
+    const groupedData = groupBy(data.entries, (item) => getISODateByInterval(item.start, interval))
+
+    return Object.entries(groupedData)
+      .map(([date, events]) => ({ date, values: events }))
+      .sort((a, b) => a.date.localeCompare(b.date))
+  }, [start, end, filtersMemo, includesMemo, datasetId, interval])
 
   if (!timeseries.length) {
     return null
@@ -181,7 +181,7 @@ export default function EventsReportGraph({
         end={end}
         timeseriesInterval={interval}
         getAggregatedData={getAggregatedData}
-        // getIndividualData={getIndividualData}
+        getIndividualData={getIndividualData}
         tickLabelFormatter={formatDateTicks}
         aggregatedTooltip={<AggregatedGraphTooltip />}
         individualTooltip={<IndividualGraphTooltip eventType={eventType} />}

diff --git a/apps/fishing-map/features/reports/vessel-groups/insights/VGRInsightCoverageGraph.tsx b/apps/fishing-map/features/reports/vessel-groups/insights/VGRInsightCoverageGraph.tsx
@@ -105,11 +105,11 @@ export default function VesselGroupReportInsightCoverageGraph({
   data: VesselGroupInsightResponse['coverage']
 }) {
   const vesselGroup = useSelector(selectVGRData)
-  // const getIndividualData = useCallback(async () => {
-  //   if (vesselGroup?.vessels.length) {
-  //     return parseCoverageGraphIndividualData(data, vesselGroup.vessels)
-  //   } else return []
-  // }, [data, vesselGroup?.vessels])
+  const getIndividualData = useCallback(async () => {
+    if (vesselGroup?.vessels.length) {
+      return parseCoverageGraphIndividualData(data, vesselGroup.vessels)
+    } else return []
+  }, [data, vesselGroup?.vessels])
   const getAggregatedData = useCallback(async () => {
     if (vesselGroup?.vessels.length) {
       return parseCoverageGraphAggregatedData(data, vesselGroup.vessels)
@@ -121,7 +121,7 @@ export default function VesselGroupReportInsightCoverageGraph({
     <div className={styles.graph} data-test="insights-report-vessels-graph">
       <ResponsiveBarChart
         color={reportDataview?.config?.color || COLOR_PRIMARY_BLUE}
-        // getIndividualData={getIndividualData}
+        getIndividualData={getIndividualData}
         getAggregatedData={getAggregatedData}
         barValueFormatter={(value: any) => {
           return formatI18nNumber(value).toString()

diff --git a/apps/fishing-map/features/reports/vessel-groups/vessels/VesselGroupReportVesselsGraph.tsx b/apps/fishing-map/features/reports/vessel-groups/vessels/VesselGroupReportVesselsGraph.tsx
@@ -186,15 +186,15 @@ export default function VesselGroupReportVesselsGraph({
     return data
   }, [data])
 
-  // const getIndividualData = useCallback(async () => {
-  //   return individualData
-  // }, [individualData])
+  const getIndividualData = useCallback(async () => {
+    return individualData
+  }, [individualData])
 
   return (
     <div className={styles.graph} data-test="report-vessels-graph">
       <ResponsiveBarChart
         color={color}
-        // getIndividualData={getIndividualData}
+        getIndividualData={getIndividualData}
         getAggregatedData={getAggregatedData}
         onAggregatedItemClick={onBarClick}
         barValueFormatter={(value: any) => {