use event icons in individual timeseries

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

@@ -1,10 +1,10 @@
+import type { ReactElement } from 'react'
 import React, { useCallback } from 'react'
-import { useTranslation } from 'react-i18next'
 import { DateTime } from 'luxon'
 import { groupBy } from 'es-toolkit'
 import { stringify } from 'qs'
-import { getEventsStatsQuery } from 'queries/report-events-stats-api'
 import type { BaseReportEventsVesselsParamsFilters } from 'queries/report-events-stats-api'
+import { getEventsStatsQuery } 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'
@@ -76,6 +76,7 @@ export default function EventsReportGraph({
   end,
   start,
   timeseries,
+  icon,
 }: {
   datasetId: string
   filters?: BaseReportEventsVesselsParamsFilters
@@ -84,9 +85,9 @@ export default function EventsReportGraph({
   end: string
   start: string
   timeseries: { date: string; value: number }[]
+  icon?: ReactElement
 }) {
   const containerRef = React.useRef<HTMLDivElement>(null)
-  const { t } = useTranslation()
 
   const startMillis = DateTime.fromISO(start).toMillis()
   const endMillis = DateTime.fromISO(end).toMillis()
@@ -130,6 +131,7 @@ export default function EventsReportGraph({
         aggregatedTooltip={<AggregatedGraphTooltip />}
         individualTooltip={<IndividualGraphTooltip />}
         color={color}
+        individualIcon={icon}
       />
     </div>
   )

apps/fishing-map/features/reports/vessel-groups/events/VGREvents.tsx

@@ -1,18 +1,19 @@
 import { useSelector } from 'react-redux'
+import type { ReactElement } from 'react'
 import { Fragment } from 'react'
 import parse from 'html-react-parser'
 import { DateTime } from 'luxon'
 import { useTranslation } from 'react-i18next'
 import { lowerCase } from 'es-toolkit'
-import {
-  useGetReportEventsStatsQuery,
-  useGetReportEventsVesselsQuery,
-} from 'queries/report-events-stats-api'
 import type {
   ReportEventsStatsResponseGroups,
   ReportEventsVesselsParams,
   ReportEventsStatsParams,
 } from 'queries/report-events-stats-api'
+import {
+  useGetReportEventsStatsQuery,
+  useGetReportEventsVesselsQuery,
+} from 'queries/report-events-stats-api'
 import { Icon } from '@globalfishingwatch/ui-components'
 import { DatasetTypes } from '@globalfishingwatch/api-types'
 import { getDataviewFilters } from '@globalfishingwatch/dataviews-client'
@@ -50,6 +51,9 @@ import ReportEventsPlaceholder from 'features/reports/shared/placeholders/Report
 import { selectVGREventsVesselsPaginated } from 'features/reports/vessel-groups/events/vgr-events.selectors'
 import { selectTimeRange } from 'features/app/selectors/app.timebar.selectors'
 import VGREventsVesselsTableFooter from '../../shared/events/EventsReportVesselsTableFooter'
+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 './VGREvents.module.css'
 
 function VGREvents() {
@@ -136,6 +140,14 @@ function VGREvents() {
   }
   const eventDataset = eventsDataview?.datasets?.find((d) => d.type === DatasetTypes.Events)
   const subCategoryDatasetCategory = eventDataset?.subcategory
+  let icon: ReactElement | undefined
+  if (subCategoryDatasetCategory === 'encounter') {
+    icon = <EncounterIcon />
+  } else if (subCategoryDatasetCategory === 'loitering') {
+    icon = <LoiteringIcon />
+  } else if (subCategoryDatasetCategory === 'port_visit') {
+    icon = <PortVisitIcon />
+  }
   const totalEvents = data.timeseries.reduce((acc, group) => acc + group.value, 0)
   return (
     <Fragment>
@@ -182,6 +194,7 @@ function VGREvents() {
                 start={start}
                 end={end}
                 timeseries={data.timeseries || []}
+                icon={icon}
               />
             )}
           </div>

libs/responsive-visualizations/src/charts/points/IndividualPoint.module.css

@@ -1,13 +1,14 @@
 .point {
-  display: block;
-  background-color: red;
-  border-radius: 50%;
   position: relative;
   border: 2px solid transparent;
   transition: border-color 0.3s linear;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.point:hover {
+.point:not(.withIcon):hover {
   border: var(--border-thick);
 }
 

libs/responsive-visualizations/src/charts/points/IndividualPoint.tsx

@@ -1,4 +1,12 @@
-import { useFloating, offset, flip, shift, useInteractions, useHover, FloatingPortal } from '@floating-ui/react'
+import {
+  useFloating,
+  offset,
+  flip,
+  shift,
+  useInteractions,
+  useHover,
+  FloatingPortal,
+} from '@floating-ui/react'
 import { cloneElement, useState, type ReactElement } from 'react'
 import cx from 'classnames'
 import type { ResponsiveVisualizationItem } from '../../types'
@@ -10,9 +18,10 @@ type IndividualPointProps = {
   point: ResponsiveVisualizationItem
   tooltip?: ReactElement
   className?: string
+  icon?: ReactElement
 }
 
-export function IndividualPoint({ point, color, tooltip, className }: IndividualPointProps) {
+export function IndividualPoint({ point, color, tooltip, className, icon }: IndividualPointProps) {
   const [isOpen, setIsOpen] = useState(false)
 
   const { refs, floatingStyles, context } = useFloating({
@@ -29,13 +38,14 @@ export function IndividualPoint({ point, color, tooltip, className }: Individual
     <li
       ref={refs.setReference}
       {...getReferenceProps()}
-      className={styles.point}
+      className={cx(styles.point, { [styles.withIcon]: icon })}
       style={{
         width: POINT_SIZE,
         height: POINT_SIZE,
-        ...color && {
-          backgroundColor: color,
-        }
+        ...(color &&
+          !icon && {
+            backgroundColor: color,
+          }),
       }}
     >
       {isOpen && (
@@ -50,6 +60,7 @@ export function IndividualPoint({ point, color, tooltip, className }: Individual
           </div>
         </FloatingPortal>
       )}
+      {icon && <span className={styles.icon}>{icon}</span>}
     </li>
   )
 }

libs/responsive-visualizations/src/charts/timeseries/Timeseries.tsx

@@ -37,6 +37,7 @@ export function ResponsiveTimeseries({
   individualTooltip,
   onIndividualItemClick,
   onAggregatedItemClick,
+  individualIcon,
 }: ResponsiveTimeseriesProps) {
   const containerRef = useRef<HTMLDivElement>(null)
   const { width, data, isIndividualSupported } = useResponsiveVisualization(containerRef, {
@@ -73,6 +74,7 @@ export function ResponsiveTimeseries({
           onClick={onIndividualItemClick}
           tickLabelFormatter={tickLabelFormatter}
           customTooltip={individualTooltip}
+          icon={individualIcon}
         />
       ) : (
         <AggregatedTimeseries

libs/responsive-visualizations/src/charts/timeseries/TimeseriesIndividual.tsx

@@ -1,5 +1,6 @@
 import { XAxis, ResponsiveContainer, ComposedChart, Tooltip } from 'recharts'
 import cx from 'classnames'
+import type { ReactElement } from 'react'
 import type { TimeseriesByTypeProps } from '../types'
 import type { ResponsiveVisualizationData, ResponsiveVisualizationItem } from '../../types'
 import { IndividualPoint } from '../points/IndividualPoint'
@@ -11,6 +12,7 @@ const graphMargin = { top: 0, right: POINT_SIZE, left: POINT_SIZE, bottom: 0 }
 
 type IndividualTimeseriesProps = TimeseriesByTypeProps<'individual'> & {
   width: number
+  icon?: ReactElement
 }
 
 export function IndividualTimeseries({
@@ -23,6 +25,7 @@ export function IndividualTimeseries({
   timeseriesInterval,
   tickLabelFormatter,
   customTooltip,
+  icon,
 }: IndividualTimeseriesProps) {
   const domain = useTimeseriesDomain({ start, end, timeseriesInterval })
   const fullTimeseries = useFullTimeseries({
@@ -62,6 +65,7 @@ export function IndividualTimeseries({
                         point={point}
                         color={color}
                         tooltip={customTooltip}
+                        icon={icon}
                       />
                     ))}
                   </ul>

libs/responsive-visualizations/src/charts/types.ts

@@ -22,6 +22,7 @@ export type BaseResponsiveChartProps = {
   onIndividualItemClick?: ResponsiveVisualizationInteractionCallback
   getIndividualData?: () => Promise<ResponsiveVisualizationData<'individual'> | undefined>
   individualValueKey?: keyof ResponsiveVisualizationData<'individual'>[0]
+  individualIcon?: ReactElement
 }
 
 export type ResponsiveVisualizationAnyItemKey =