Responsive-visualization/core

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

@@ -4,7 +4,8 @@ import type { DateTimeFormatOptions } from 'luxon'
 import { DateTime } from 'luxon'
 import type { Locale } from 'types'
 
-import type { SupportedDateType } from 'utils/dates'
+import type { SupportedDateType } from '@globalfishingwatch/data-transforms'
+
 import { getUTCDateTime } from 'utils/dates'
 
 import i18n from './i18n'

apps/fishing-map/features/reports/areas/area-reports.selectors.ts

@@ -48,7 +48,7 @@ const EMPTY_ARRAY: [] = []
 type ReportVesselWithMeta = ReportVessel & {
   // Merging detections or hours depending on the activity unit into the same property
   value: number
-  sourceColor: string
+  color: string
   activityDatasetId: string
   category: ReportCategory
   dataviewId: string
@@ -58,7 +58,7 @@ type ReportVesselWithMeta = ReportVessel & {
 
 export type ReportVesselWithDatasets = Pick<ReportVessel, 'vesselId' | 'shipName'> &
   Partial<ReportVessel> &
-  Pick<ReportVesselWithMeta, 'sourceColor' | 'value'> & {
+  Pick<ReportVesselWithMeta, 'color' | 'value'> & {
     infoDataset?: Dataset
     trackDataset?: Dataset
     dataviewId?: string
@@ -140,8 +140,8 @@ export const selectReportActivityFlatten = createSelector(
               : vessel.shipName,
             activityDatasetId: datasetId,
             dataviewId: dataview?.id,
+            color: dataview?.config?.color,
             category: getReportCategoryFromDataview(dataview),
-            sourceColor: dataview?.config?.color,
           } as ReportVesselWithMeta
         })
       })

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

@@ -6,6 +6,7 @@ import parse from 'html-react-parser'
 import { DateTime } from 'luxon'
 import { useGetReportEventsStatsQuery } from 'queries/report-events-stats-api'
 
+import { getDataviewFilters } from '@globalfishingwatch/dataviews-client'
 import { Button } from '@globalfishingwatch/ui-components'
 
 import EventsEmptyState from 'assets/images/[email protected]'
@@ -41,6 +42,7 @@ import { useFetchPortsReport } from './ports-report.hooks'
 import {
   selectPortReportsDataview,
   selectPortReportVesselsGrouped,
+  selectPortReportVesselsIndividualData,
   selectPortReportVesselsPaginated,
   selectPortReportVesselsPagination,
 } from './ports-report.selectors'
@@ -72,6 +74,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,
@@ -162,6 +165,12 @@ function PortsReport() {
             color={color}
             start={start}
             end={end}
+            filters={{
+              portId,
+              ...(dataview && { ...getDataviewFilters(dataview) }),
+            }}
+            includes={['id', 'start', 'end', 'vessel']}
+            datasetId={datasetId}
             timeseries={data.timeseries || []}
           />
         )}
@@ -222,6 +231,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

@@ -13,8 +13,11 @@ import { MAX_CATEGORIES } from 'features/reports/areas/area-reports.config'
 import { getVesselsFiltered } from 'features/reports/areas/area-reports.utils'
 import { EMPTY_FIELD_PLACEHOLDER } from 'utils/info'
 
-import { OTHER_CATEGORY_LABEL } from '../vessel-groups/vessel-group-report.config'
-import { REPORT_FILTER_PROPERTIES } from '../vessel-groups/vessels/vessel-group-report-vessels.selectors'
+import { getVesselIndividualGroupedData } from '../shared/reports.utils'
+import {
+  OTHER_CATEGORY_LABEL,
+  REPORT_FILTER_PROPERTIES,
+} from '../vessel-groups/vessel-group-report.config'
 
 import {
   selectPortReportVesselsFilter,
@@ -119,6 +122,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/VesselGraphLink.module.css

@@ -0,0 +1,4 @@
+.hiddenLink {
+  width: 100%;
+  height: 100%;
+}

apps/fishing-map/features/reports/shared/VesselGraphLink.tsx

@@ -0,0 +1,25 @@
+import type { ReportVesselWithDatasets } from 'features/reports/areas/area-reports.selectors'
+import type { VesselGroupVesselTableParsed } from 'features/reports/vessel-groups/vessels/vessel-group-report-vessels.selectors'
+import VesselLink from 'features/vessel/VesselLink'
+
+import styles from './VesselGraphLink.module.css'
+
+export default function VesselGraphLink({
+  data,
+}: {
+  data?: VesselGroupVesselTableParsed | ReportVesselWithDatasets
+}) {
+  if (!data) {
+    return null
+  }
+  const { vesselId, dataset } = data
+  const datasetId = dataset || (data as ReportVesselWithDatasets).infoDataset?.id
+  return (
+    <VesselLink
+      className={styles.hiddenLink}
+      vesselId={vesselId}
+      datasetId={datasetId}
+      showTooltip={false}
+    />
+  )
+}

apps/fishing-map/features/reports/shared/activity/ReportActivityGraph.tsx

@@ -60,6 +60,7 @@ export default function ReportActivity() {
     if (loaded && bbox?.length) {
       fitAreaInViewport()
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [loaded, bboxHash])
 
   const { t } = useTranslation()

apps/fishing-map/features/reports/shared/activity/vessels/ReportVesselsGraph.tsx

@@ -1,10 +1,13 @@
-import React, { Fragment } from 'react'
+import React, { Fragment, useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 import cx from 'classnames'
-import { Bar, BarChart, LabelList,ResponsiveContainer, Tooltip, XAxis } from 'recharts'
 import type { CategoricalChartFunc } from 'recharts/types/chart/generateCategoricalChart'
 
+import {
+  getResponsiveVisualizationItemValue,
+  ResponsiveBarChart,
+} from '@globalfishingwatch/responsive-visualizations'
 import { Tooltip as GFWTooltip } from '@globalfishingwatch/ui-components'
 
 import {
@@ -15,18 +18,21 @@ import {
 import { selectReportVesselGraph } from 'features/app/selectors/app.reports.selector'
 import I18nNumber, { formatI18nNumber } from 'features/i18n/i18nNumber'
 import { EMPTY_API_VALUES, OTHERS_CATEGORY_LABEL } from 'features/reports/areas/area-reports.config'
-import { selectReportDataviewsWithPermissions } from 'features/reports/areas/area-reports.selectors'
 import type { ReportVesselGraph } from 'features/reports/areas/area-reports.types'
 import {
+  REPORT_GRAPH_LABEL_KEY,
   selectReportVesselsGraphDataGrouped,
+  selectReportVesselsGraphDataKeys,
   selectReportVesselsGraphDataOthers,
+  selectReportVesselsGraphIndividualData,
 } from 'features/reports/shared/activity/vessels/report-activity-vessels.selectors'
 import { cleanFlagState } from 'features/reports/shared/activity/vessels/report-activity-vessels.utils'
+import { ReportBarGraphPlaceholder } from 'features/reports/shared/placeholders/ReportBarGraphPlaceholder'
+import VesselGraphLink from 'features/reports/shared/VesselGraphLink'
+import VesselGroupReportVesselsIndividualTooltip from 'features/reports/vessel-groups/vessels/VesselGroupReportVesselsIndividualTooltip'
 import { useLocationConnect } from 'routes/routes.hook'
 import { getVesselGearTypeLabel } from 'utils/info'
 
-import { ReportBarGraphPlaceholder } from '../../placeholders/ReportBarGraphPlaceholder'
-
 import styles from './ReportVesselsGraph.module.css'
 
 const MAX_OTHER_TOOLTIP_ITEMS = 10
@@ -101,7 +107,7 @@ const CustomTick = (props: any) => {
         ? cleanFlagState(
             (
               othersData?.flatMap((d) =>
-                EMPTY_API_VALUES.includes(d.name) ? [] : getTickLabel(d.name)
+                EMPTY_API_VALUES.includes(d.name as string) ? [] : getTickLabel(d.name as string)
               ) || []
             ).join('|')
           )
@@ -115,9 +121,13 @@ const CustomTick = (props: any) => {
 
   const tooltip = isOtherCategory ? (
     <ul>
-      {othersData?.slice(0, MAX_OTHER_TOOLTIP_ITEMS).map(({ name, value }) => (
-        <li key={`${name}-${value}`}>{`${getTickLabel(name)}: ${value}`}</li>
-      ))}
+      {othersData
+        ?.slice(0, MAX_OTHER_TOOLTIP_ITEMS)
+        .map(({ name, value }) => (
+          <li
+            key={`${name}-${value}`}
+          >{`${getTickLabel(name)}: ${getResponsiveVisualizationItemValue(value)}`}</li>
+        ))}
       {othersData && othersData.length > MAX_OTHER_TOOLTIP_ITEMS && (
         <li>
           + {othersData.length - MAX_OTHER_TOOLTIP_ITEMS} {t('analysis.others', 'Others')}
@@ -165,8 +175,9 @@ const CustomTick = (props: any) => {
 }
 
 export default function ReportVesselsGraph() {
-  const dataviews = useSelector(selectReportDataviewsWithPermissions)
+  const valueKeys = useSelector(selectReportVesselsGraphDataKeys)
   const data = useSelector(selectReportVesselsGraphDataGrouped)
+  const individualData = useSelector(selectReportVesselsGraphIndividualData)
   const selectedReportVesselGraph = useSelector(selectReportVesselGraph)
   const othersData = useSelector(selectReportVesselsGraphDataOthers)
   const { dispatchQueryParams } = useLocationConnect()
@@ -186,6 +197,7 @@ export default function ReportVesselsGraph() {
         return label
     }
   }
+  // TODO: add this interaction
   const onLabelClick: CategoricalChartFunc = (e) => {
     const { payload } = e.activePayload?.[0] || {}
     if (!payload) return
@@ -195,7 +207,7 @@ export default function ReportVesselsGraph() {
           ? cleanFlagState(
               (
                 othersData?.flatMap((d) =>
-                  EMPTY_API_VALUES.includes(d.name) ? [] : getTickLabel(d.name)
+                  EMPTY_API_VALUES.includes(d.name as string) ? [] : getTickLabel(d.name as string)
                 ) || []
               ).join('|')
             )
@@ -206,56 +218,41 @@ export default function ReportVesselsGraph() {
       })
     }
   }
+
+  // const getIndividualData = useCallback(async () => {
+  //   return individualData
+  // }, [individualData])
+
+  const getAggregatedData = useCallback(async () => {
+    return data as any[]
+  }, [data])
+
+  if (!data) {
+    return (
+      <div className={styles.graph} data-test="activity-report-vessels-graph">
+        <ReportBarGraphPlaceholder animate={false} />
+      </div>
+    )
+  }
+
   return (
     <Fragment>
-      <div className={styles.graph} data-test="report-vessels-graph">
-        {data ? (
-          <ResponsiveContainer width="100%" height="100%">
-            <BarChart
-              width={500}
-              height={300}
-              data={data}
-              margin={{
-                top: 15,
-                right: 0,
-                left: 0,
-                bottom: 0,
-              }}
-              onClick={onLabelClick}
-            >
-              {data && (
-                <Tooltip content={<ReportGraphTooltip type={selectedReportVesselGraph} />} />
-              )}
-              {dataviews.map((dataview, index) => {
-                return (
-                  <Bar
-                    key={dataview.id}
-                    dataKey={dataview.id}
-                    stackId="a"
-                    fill={dataview.config?.color}
-                  >
-                    {index === dataviews.length - 1 && (
-                      <LabelList
-                        position="top"
-                        valueAccessor={(entry: any) => formatI18nNumber(entry.value[1])}
-                      />
-                    )}
-                  </Bar>
-                )
-              })}
-              <XAxis
-                dataKey="name"
-                interval="preserveStart"
-                tickLine={false}
-                minTickGap={-1000}
-                tick={<CustomTick getTickLabel={getTickLabel} />}
-                tickMargin={0}
-              />
-            </BarChart>
-          </ResponsiveContainer>
-        ) : (
-          <ReportBarGraphPlaceholder animate={false} />
-        )}
+      <div className={styles.graph} data-test="activity-report-vessels-graph">
+        <ResponsiveBarChart
+          // getIndividualData={getIndividualData}
+          getAggregatedData={getAggregatedData}
+          // onAggregatedItemClick={onBarClick}
+          // onIndividualItemClick={onPointClick}
+          aggregatedValueKey={valueKeys}
+          barValueFormatter={(value: any) => {
+            return formatI18nNumber(value).toString()
+          }}
+          barLabel={<CustomTick getTickLabel={getTickLabel} />}
+          labelKey={REPORT_GRAPH_LABEL_KEY}
+          individualTooltip={<VesselGroupReportVesselsIndividualTooltip />}
+          individualItem={<VesselGraphLink />}
+          aggregatedTooltip={<ReportGraphTooltip type={selectedReportVesselGraph} />}
+        />
       </div>
     </Fragment>
   )

apps/fishing-map/features/reports/shared/activity/vessels/ReportVesselsTable.tsx

@@ -109,11 +109,8 @@ export default function ReportVesselsTable({ activityUnit, reportName }: ReportV
                     />
                   </div>
                   <div className={cx({ [styles.border]: !isLastRow })}>
-                    {vessel.sourceColor && (
-                      <span
-                        className={styles.dot}
-                        style={{ backgroundColor: vessel.sourceColor }}
-                      ></span>
+                    {vessel.color && (
+                      <span className={styles.dot} style={{ backgroundColor: vessel.color }}></span>
                     )}
                     <VesselLink
                       className={styles.link}

apps/fishing-map/features/reports/shared/activity/vessels/ReportVesselsTableFooter.tsx

@@ -66,8 +66,7 @@ export default function ReportVesselsTableFooter({ reportName }: ReportVesselsTa
         reportVesselFilter
       )?.map((vessel) => {
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        const { dataviewId, category, sourceColor, flagTranslatedClean, hours, value, ...rest } =
-          vessel
+        const { dataviewId, category, color, flagTranslatedClean, hours, value, ...rest } = vessel
         return { ...rest, value: formatI18nNumber(hours || value) }
       })
       trackEvent({