Responsive-visualization/core

apps/fishing-map/features/i18n/i18nDate.tsx

@@ -2,8 +2,8 @@ import { Fragment } from 'react'
 import type { DateTimeFormatOptions } from 'luxon'
 import { DateTime } from 'luxon'
 import { useTranslation } from 'react-i18next'
+import type { SupportedDateType } from '@globalfishingwatch/data-transforms'
 import type { Locale } from 'types'
-import type { SupportedDateType } from 'utils/dates'
 import { getUTCDateTime } from 'utils/dates'
 import i18n from './i18n'
 

apps/fishing-map/features/reports/ports/PortsReport.tsx

@@ -4,8 +4,9 @@ import { Fragment } from 'react'
 import { useTranslation } from 'react-i18next'
 import parse from 'html-react-parser'
 import { DateTime } from 'luxon'
-import { Button } from '@globalfishingwatch/ui-components'
 import { useGetReportEventsStatsQuery } from 'queries/report-events-stats-api'
+import { Button } from '@globalfishingwatch/ui-components'
+import { getDataviewFilters } from '@globalfishingwatch/dataviews-client'
 import EventsReportGraph from 'features/reports/shared/events/EventsReportGraph'
 import { selectReportPortId } from 'routes/routes.selectors'
 import EventsReportVesselPropertySelector from 'features/reports/shared/events/EventsReportVesselPropertySelector'
@@ -30,6 +31,7 @@ import { useFetchPortsReport } from './ports-report.hooks'
 import {
   selectPortReportsDataview,
   selectPortReportVesselsGrouped,
+  selectPortReportVesselsIndividualData,
   selectPortReportVesselsPaginated,
   selectPortReportVesselsPagination,
 } from './ports-report.selectors'
@@ -65,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,
@@ -155,6 +158,12 @@ function PortsReport() {
             color={color}
             start={start}
             end={end}
+            filters={{
+              portId,
+              ...(dataview && { ...getDataviewFilters(dataview) }),
+            }}
+            includes={['id', 'start', 'end', 'vessel']}
+            datasetId={datasetId}
             timeseries={data.timeseries || []}
           />
         )}
@@ -215,6 +224,7 @@ function PortsReport() {
           </div>
           <EventsReportVesselsGraph
             data={portsReportVesselsGrouped}
+            individualData={portReportIndividualData}
             color={color}
             property={portReportVesselsProperty}
             filterQueryParam="portsReportVesselsFilter"

apps/fishing-map/features/reports/ports/ports-report.selectors.ts

@@ -10,8 +10,11 @@ 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 { OTHER_CATEGORY_LABEL } from '../vessel-groups/vessel-group-report.config'
+import { getVesselIndividualGroupedData } from '../vessel-groups/vessels/vessel-group-report-vessels.selectors'
+import {
+  OTHER_CATEGORY_LABEL,
+  REPORT_FILTER_PROPERTIES,
+} from '../vessel-groups/vessel-group-report.config'
 import { selectPortsReportVessels } from './ports-report.slice'
 import {
   selectPortReportVesselsFilter,
@@ -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,

apps/fishing-map/features/reports/shared/events/EventsReportGraph.module.css

@@ -36,3 +36,22 @@
 .graph :global(.recharts-tooltip-cursor) {
   stroke: var(--color-secondary-blue);
 }
+
+.event {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-S);
+}
+
+.properties {
+  display: flex;
+  gap: var(--space-S);
+}
+
+.property label {
+  font: var(--font-XS);
+}
+
+.property span {
+  font: var(--font-S);
+}

apps/fishing-map/features/reports/shared/events/EventsReportGraph.tsx

@@ -1,25 +1,27 @@
-import React, { useMemo } from 'react'
-import {
-  ResponsiveContainer,
-  CartesianGrid,
-  XAxis,
-  YAxis,
-  Tooltip,
-  Line,
-  ComposedChart,
-} from 'recharts'
-import min from 'lodash/min'
-import max from 'lodash/max'
-import type { DurationUnit } from 'luxon'
-import { DateTime, Duration } from 'luxon'
+import type { ReactElement } from 'react'
+import React, { useCallback } from 'react'
+import { DateTime } from 'luxon'
+import { groupBy } from 'es-toolkit'
+import { stringify } from 'qs'
 import { useTranslation } from 'react-i18next'
-import type { FourwingsInterval } from '@globalfishingwatch/deck-loaders'
-import { getFourwingsInterval } from '@globalfishingwatch/deck-loaders'
+import { getEventsStatsQuery } from 'queries/report-events-stats-api'
+import type { BaseReportEventsVesselsParamsFilters } from 'queries/report-events-stats-api'
+import { getFourwingsInterval, type FourwingsInterval } from '@globalfishingwatch/deck-loaders'
+import type { BaseResponsiveTimeseriesProps } from '@globalfishingwatch/responsive-visualizations'
+import { ResponsiveTimeseries } from '@globalfishingwatch/responsive-visualizations'
+import { GFWAPI } from '@globalfishingwatch/api-client'
+import type { ApiEvent, APIPagination, EventType } from '@globalfishingwatch/api-types'
+import { useMemoCompare } from '@globalfishingwatch/react-hooks'
+import { getISODateByInterval } from '@globalfishingwatch/data-transforms'
 import i18n from 'features/i18n/i18n'
 import { formatDateForInterval, getUTCDateTime } from 'utils/dates'
 import { formatI18nNumber } from 'features/i18n/i18nNumber'
-import { tickFormatter } from 'features/reports/areas/area-reports.utils'
 import { COLOR_PRIMARY_BLUE } from 'features/app/app.config'
+import { formatInfoField } from 'utils/info'
+import { getTimeLabels } from 'utils/events'
+import EncounterIcon from '../../shared/events/icons/event-encounter.svg'
+import LoiteringIcon from '../../shared/events/icons/event-loitering.svg'
+import PortVisitIcon from '../../shared/events/icons/event-port.svg'
 import styles from './EventsReportGraph.module.css'
 
 type EventsReportGraphTooltipProps = {
@@ -37,7 +39,7 @@ type EventsReportGraphTooltipProps = {
   timeChunkInterval: FourwingsInterval
 }
 
-const ReportGraphTooltip = (props: any) => {
+const AggregatedGraphTooltip = (props: any) => {
   const { active, payload, label, timeChunkInterval } = props as EventsReportGraphTooltipProps
 
   if (active && payload && payload.length) {
@@ -56,111 +58,130 @@ const ReportGraphTooltip = (props: any) => {
   return null
 }
 
-const formatDateTicks = (tick: string, timeChunkInterval: FourwingsInterval) => {
+const IndividualGraphTooltip = ({ data, eventType }: { data?: any; eventType?: EventType }) => {
+  const { t } = useTranslation()
+  if (!data?.vessel?.name) {
+    return null
+  }
+  console.log('data:', data)
+  if (eventType === 'encounter') {
+    const { start, duration } = getTimeLabels({ start: data.start, end: data.end })
+    return (
+      <div className={styles.event}>
+        <div className={styles.properties}>
+          <div className={styles.property}>
+            <label>{t('eventInfo.start', 'Start')}</label>
+            <span>{start}</span>
+          </div>
+          <div className={styles.property}>
+            <label>{t('eventInfo.duration', 'Duration')}</label>
+            <span>{duration}</span>
+          </div>
+        </div>
+        <div className={styles.properties}>
+          <div className={styles.property}>
+            <label>{formatInfoField(data.vessel?.type, 'shiptypes')}</label>
+            <span>{formatInfoField(data.vessel?.name, 'shipname')}</span>
+          </div>
+          <div className={styles.property}>
+            <label>{formatInfoField(data.encounter?.vessel?.type, 'shiptypes')}</label>
+            <span>{formatInfoField(data.encounter?.vessel?.name, 'shipname')}</span>
+          </div>
+        </div>
+      </div>
+    )
+  }
+  return formatInfoField(data.vessel.name, 'shipname')
+}
+
+const formatDateTicks: BaseResponsiveTimeseriesProps['tickLabelFormatter'] = (
+  tick,
+  timeChunkInterval
+) => {
   const date = getUTCDateTime(tick).setLocale(i18n.language)
   return formatDateForInterval(date, timeChunkInterval)
 }
 
-const graphMargin = { top: 0, right: 0, left: -20, bottom: -10 }
-
 export default function EventsReportGraph({
+  datasetId,
+  filters,
+  includes,
   color = COLOR_PRIMARY_BLUE,
   end,
   start,
   timeseries,
+  eventType,
 }: {
+  datasetId: string
+  filters?: BaseReportEventsVesselsParamsFilters
+  includes?: string[]
   color?: string
   end: string
   start: string
   timeseries: { date: string; value: number }[]
+  eventType?: EventType
 }) {
-  const { t } = useTranslation()
+  const containerRef = React.useRef<HTMLDivElement>(null)
+
   const startMillis = DateTime.fromISO(start).toMillis()
   const endMillis = DateTime.fromISO(end).toMillis()
   const interval = getFourwingsInterval(startMillis, endMillis)
+  const filtersMemo = useMemoCompare(filters)
+  const includesMemo = useMemoCompare(includes)
 
-  const domain = useMemo(() => {
-    if (start && end && interval) {
-      const cleanEnd = DateTime.fromISO(end, { zone: 'utc' })
-        .minus({ [interval]: 1 })
-        .toISO() as string
-      return [new Date(start).getTime(), new Date(cleanEnd).getTime()]
-    }
-  }, [start, end, interval])
-
-  const dataMin: number = timeseries.length
-    ? (min(timeseries.map(({ value }: { value: number }) => value)) as number)
-    : 0
-  const dataMax: number = timeseries.length
-    ? (max(timeseries.map(({ value }: { value: number }) => value)) as number)
-    : 0
+  let icon: ReactElement | undefined
+  if (eventType === 'encounter') {
+    icon = <EncounterIcon />
+  } else if (eventType === 'loitering') {
+    icon = <LoiteringIcon />
+  } else if (eventType === 'port_visit') {
+    icon = <PortVisitIcon />
+  }
 
-  const domainPadding = (dataMax - dataMin) / 8
-  const paddedDomain: [number, number] = [
-    Math.max(0, Math.floor(dataMin - domainPadding)),
-    Math.ceil(dataMax + domainPadding),
-  ]
-  const intervalDiff = Math.floor(
-    Duration.fromMillis(endMillis - startMillis).as(interval.toLowerCase() as DurationUnit)
-  )
-  const fullTimeseries = useMemo(() => {
-    if (!timeseries || !domain) {
-      return []
+  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,
     }
-    return Array(intervalDiff)
-      .fill(0)
-      .map((_, i) => i)
-      .map((i) => {
-        const d = DateTime.fromMillis(startMillis, { zone: 'UTC' })
-          .plus({ [interval]: i })
-          .toISO()
-        return {
-          date: d,
-          value: timeseries.find(({ date }: { date: string }) => date === d)?.value || 0,
-        }
-      })
-  }, [timeseries, domain, intervalDiff, startMillis, interval])
+    const data = await GFWAPI.fetch<APIPagination<ApiEvent>>(`/v3/events?${stringify(params)}`)
+    const groupedData = groupBy(data.entries, (item) => getISODateByInterval(item.start, interval))
+    console.log(
+      Object.entries(groupedData)
+        .map(([date, events]) => ({ date, values: events }))
+        .sort((a, b) => a.date.localeCompare(b.date))
+    )
+
+    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 (!fullTimeseries.length || !domain) {
+  if (!timeseries.length) {
     return null
   }
 
   return (
-    <div className={styles.graph}>
-      <ResponsiveContainer width="100%" height="100%">
-        <ComposedChart data={fullTimeseries} margin={graphMargin}>
-          <CartesianGrid vertical={false} />
-          <XAxis
-            domain={domain}
-            dataKey="date"
-            interval="preserveStartEnd"
-            tickFormatter={(tick: string) => formatDateTicks(tick, interval)}
-            axisLine={paddedDomain[0] === 0}
-          />
-          <YAxis
-            scale="linear"
-            domain={paddedDomain}
-            interval="preserveEnd"
-            tickFormatter={tickFormatter}
-            axisLine={false}
-            tickLine={false}
-            tickCount={4}
-          />
-          {timeseries?.length && (
-            <Tooltip content={<ReportGraphTooltip timeChunkInterval={interval} />} />
-          )}
-          <Line
-            name="line"
-            type="monotone"
-            dataKey="value"
-            unit={t('common.events', 'Events').toLowerCase()}
-            dot={false}
-            isAnimationActive={false}
-            stroke={color}
-            strokeWidth={2}
-          />
-        </ComposedChart>
-      </ResponsiveContainer>
+    <div ref={containerRef} className={styles.graph}>
+      <ResponsiveTimeseries
+        start={start}
+        end={end}
+        timeseriesInterval={interval}
+        getAggregatedData={getAggregatedData}
+        getIndividualData={getIndividualData}
+        tickLabelFormatter={formatDateTicks}
+        aggregatedTooltip={<AggregatedGraphTooltip />}
+        individualTooltip={<IndividualGraphTooltip eventType={eventType} />}
+        color={color}
+        individualIcon={icon}
+      />
     </div>
   )
 }