fix typing

apps/fishing-map/features/reports/vessel-groups/vessels/VesselGroupReportVesselsGraph.tsx

@@ -209,7 +209,7 @@ export default function VesselGroupReportVesselsGraph({
               pageQueryParam={pageQueryParam}
             />
           }
-          labelKey="name"
+          labelKey={'name'}
           individualTooltip={<VesselGroupReportVesselsIndividualTooltip />}
           aggregatedTooltip={<ReportBarTooltip type={property} />}
         />

apps/fishing-map/features/reports/vessel-groups/vessels/vessel-group-report-vessels.selectors.ts

@@ -277,16 +277,23 @@ export const selectVGRVesselsGraphIndividualData = createSelector(
       case 'source':
         vesselsGrouped = groupBy(vessels, (vessel) => vessel.source)
     }
-    const orderedGroups: ResponsiveVisualizationData<'individual'> = Object.entries(vesselsGrouped)
+    const orderedGroups: ResponsiveVisualizationData<
+      'individual',
+      { name: string; values: any[] }
+    > = Object.entries(vesselsGrouped)
       .map(([key, value]) => ({
         name: key,
         values: value as any[],
       }))
       .sort((a, b) => {
         return b.values.length - a.values.length
       })
-    const groupsWithoutOther: ResponsiveVisualizationData<'individual'> = []
-    const otherGroups: ResponsiveVisualizationData<'individual'> = []
+    const groupsWithoutOther: ResponsiveVisualizationData<
+      'individual',
+      { name: string; values: any[] }
+    > = []
+    const otherGroups: ResponsiveVisualizationData<'individual', { name: string; values: any[] }> =
+      []
     orderedGroups.forEach((group) => {
       if (
         group.name === 'null' ||

libs/responsive-visualizations/src/charts/barchart/BarChart.tsx

@@ -17,14 +17,14 @@ import { AggregatedBarChart } from './BarChartAggregated'
 import styles from './BarChart.module.css'
 
 type ResponsiveBarChartProps = BaseResponsiveChartProps &
-  BaseResponsiveBarChartProps & { labelKey?: ResponsiveVisualizationAnyItemKey }
+  BaseResponsiveBarChartProps & { labelKey?: ResponsiveVisualizationAnyItemKey | string }
 
 export function ResponsiveBarChart({
   getIndividualData,
   getAggregatedData,
   color,
-  aggregatedValueKey = DEFAULT_AGGREGATED_VALUE_KEY,
-  individualValueKey = DEFAULT_INDIVIDUAL_VALUE_KEY,
+  aggregatedValueKey = DEFAULT_AGGREGATED_VALUE_KEY as keyof ResponsiveVisualizationData<'aggregated'>[0],
+  individualValueKey = DEFAULT_INDIVIDUAL_VALUE_KEY as keyof ResponsiveVisualizationData<'individual'>[0],
   labelKey = DEFAULT_LABEL_KEY,
   barLabel,
   aggregatedTooltip,
@@ -35,7 +35,7 @@ export function ResponsiveBarChart({
 }: ResponsiveBarChartProps) {
   const containerRef = useRef<HTMLDivElement>(null)
   const { data, isIndividualSupported } = useResponsiveVisualization(containerRef, {
-    labelKey,
+    labelKey: labelKey as ResponsiveVisualizationAnyItemKey,
     aggregatedValueKey,
     individualValueKey,
     getAggregatedData,
@@ -57,7 +57,7 @@ export function ResponsiveBarChart({
           data={data as ResponsiveVisualizationData<'individual'>}
           color={color}
           valueKey={individualValueKey}
-          labelKey={labelKey}
+          labelKey={labelKey as ResponsiveVisualizationAnyItemKey}
           onClick={onIndividualItemClick}
           barLabel={barLabel}
           customTooltip={individualTooltip}
@@ -68,7 +68,7 @@ export function ResponsiveBarChart({
           data={data as ResponsiveVisualizationData<'aggregated'>}
           color={color}
           valueKey={aggregatedValueKey}
-          labelKey={labelKey}
+          labelKey={labelKey as ResponsiveVisualizationAnyItemKey}
           onClick={onAggregatedItemClick}
           barLabel={barLabel}
           customTooltip={aggregatedTooltip}

libs/responsive-visualizations/src/charts/barchart/BarChartAggregated.tsx

@@ -33,7 +33,7 @@ export function AggregatedBarChart({
           <LabelList
             position="top"
             valueAccessor={(entry: ResponsiveVisualizationData<'aggregated'>[0]) =>
-              barValueFormatter?.(entry[valueKey]) || entry[valueKey]
+              barValueFormatter?.(entry[valueKey] as number) || entry[valueKey]
             }
           />
         </Bar>

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

@@ -81,8 +81,8 @@ export function useResponsiveVisualizationData({
             start,
             end,
             timeseriesInterval,
-            individualValueKey,
-            aggregatedValueKey,
+            individualValueKey: individualValueKey as ResponsiveVisualizationAnyItemKey,
+            aggregatedValueKey: aggregatedValueKey as ResponsiveVisualizationAnyItemKey,
           })
         ) {
           const individualData = await getIndividualData()
@@ -110,8 +110,8 @@ export function useResponsiveVisualizationData({
             start,
             end,
             timeseriesInterval,
-            individualValueKey,
-            aggregatedValueKey,
+            individualValueKey: individualValueKey as ResponsiveVisualizationAnyItemKey,
+            aggregatedValueKey: aggregatedValueKey as ResponsiveVisualizationAnyItemKey,
           })
         ) {
           setIsIndividualSupported(true)
@@ -123,7 +123,7 @@ export function useResponsiveVisualizationData({
               [labelKey]: item[labelKey],
               [individualValueKey]: value.length,
             }
-          })
+          }) as ResponsiveVisualizationData
           setIsIndividualSupported(false)
           setData(aggregatedData)
         }

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

@@ -1,7 +1,11 @@
 import { useRef } from 'react'
 import type { ResponsiveVisualizationData } from '../../types'
 import { getIsIndividualTimeseriesSupported } from '../../lib/density'
-import type { BaseResponsiveChartProps, BaseResponsiveTimeseriesProps } from '../types'
+import type {
+  BaseResponsiveChartProps,
+  BaseResponsiveTimeseriesProps,
+  ResponsiveVisualizationAnyItemKey,
+} from '../types'
 import { useResponsiveVisualization } from '../hooks'
 import {
   DEFAULT_AGGREGATED_VALUE_KEY,
@@ -14,9 +18,7 @@ import styles from './Timeseries.module.css'
 
 type ResponsiveTimeseriesProps = BaseResponsiveChartProps &
   BaseResponsiveTimeseriesProps & {
-    dateKey?:
-      | keyof ResponsiveVisualizationData<'aggregated'>[0]
-      | keyof ResponsiveVisualizationData<'individual'>[0]
+    dateKey?: ResponsiveVisualizationAnyItemKey
   }
 
 export function ResponsiveTimeseries({

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

@@ -9,7 +9,7 @@ import {
 } from 'recharts'
 import min from 'lodash/min'
 import max from 'lodash/max'
-import type { TimeseriesByTypeProps } from '../types'
+import type { ResponsiveVisualizationAnyItemKey, TimeseriesByTypeProps } from '../types'
 import { useFullTimeseries, useTimeseriesDomain } from './timeseries.hooks'
 
 const graphMargin = { top: 0, right: 0, left: -20, bottom: -10 }
@@ -42,7 +42,7 @@ export function AggregatedTimeseries({
     data,
     timeseriesInterval,
     dateKey,
-    valueKey,
+    valueKey: valueKey as ResponsiveVisualizationAnyItemKey,
   })
 
   if (!fullTimeseries.length) {

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

@@ -1,6 +1,6 @@
 import { XAxis, ResponsiveContainer, ComposedChart, Tooltip } from 'recharts'
 import cx from 'classnames'
-import type { TimeseriesByTypeProps } from '../types'
+import type { ResponsiveVisualizationAnyItemKey, TimeseriesByTypeProps } from '../types'
 import type { ResponsiveVisualizationItem } from '../../types'
 import { IndividualPoint } from '../points/IndividualPoint'
 import { AXIS_LABEL_PADDING, POINT_GAP, POINT_SIZE, TIMESERIES_PADDING } from '../config'
@@ -31,7 +31,7 @@ export function IndividualTimeseries({
     data,
     timeseriesInterval,
     dateKey,
-    valueKey,
+    valueKey: valueKey as ResponsiveVisualizationAnyItemKey,
     aggregated: false,
   })
 

libs/responsive-visualizations/src/charts/timeseries/timeseries.hooks.ts

@@ -44,7 +44,7 @@ export function useFullTimeseries({
   aggregated = true,
 }: UseFullTimeseriesProps) {
   return useMemo(() => {
-    if (!data) {
+    if (!data || !dateKey || !valueKey) {
       return []
     }
 
@@ -63,7 +63,7 @@ export function useFullTimeseries({
         const d = DateTime.fromMillis(startMillis, { zone: 'UTC' })
           .plus({ [timeseriesInterval]: i })
           .toISO()
-        const dataValue = data.find((item) => d?.startsWith(item[dateKey]))?.[valueKey]
+        const dataValue = data.find((item) => d?.startsWith(item[dateKey] as string))?.[valueKey]
         return {
           [dateKey]: d,
           [valueKey]: dataValue ? dataValue : aggregated ? 0 : [],

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

@@ -25,9 +25,8 @@ export type BaseResponsiveChartProps = {
 }
 
 // TODO: remove this
-export type ResponsiveVisualizationAnyItemKey =
-  | keyof ResponsiveVisualizationData<'aggregated'>[0]
-  | keyof ResponsiveVisualizationData<'individual'>[0]
+export type ResponsiveVisualizationAnyItemKey = keyof ResponsiveVisualizationData<'aggregated'>[0] &
+  keyof ResponsiveVisualizationData<'individual'>[0]
 
 // Shared types within the BarChart
 export type BaseResponsiveBarChartProps = {

libs/responsive-visualizations/src/lib/density.ts

@@ -9,11 +9,7 @@ import {
   COLUMN_LABEL_SIZE,
   TIMESERIES_PADDING,
 } from '../charts/config'
-import type {
-  ResponsiveVisualizationAggregatedItem,
-  ResponsiveVisualizationData,
-  ResponsiveVisualizationIndividualItem,
-} from '../types'
+import type { ResponsiveVisualizationData } from '../types'
 
 export const getBarProps = (
   data: ResponsiveVisualizationData,
@@ -32,9 +28,11 @@ export const getBiggestColumnValue = (
   individualValueKey: ResponsiveVisualizationAnyItemKey
 ): number => {
   return data.reduce((acc, column) => {
-    const value = (column as ResponsiveVisualizationIndividualItem)[aggregatedValueKey]
-      ? (column as ResponsiveVisualizationIndividualItem)[aggregatedValueKey]
-      : (column as ResponsiveVisualizationAggregatedItem)[individualValueKey]?.length || 0
+    const value = (
+      column[aggregatedValueKey]
+        ? column[aggregatedValueKey]
+        : column[individualValueKey]?.length || 0
+    ) as number
     if (value > acc) {
       return value
     }
@@ -70,8 +68,8 @@ type getIsIndividualTimeseriesSupportedParams = {
   timeseriesInterval?: FourwingsInterval
   width: number
   height: number
-  aggregatedValueKey: string
-  individualValueKey: string
+  aggregatedValueKey: ResponsiveVisualizationAnyItemKey
+  individualValueKey: ResponsiveVisualizationAnyItemKey
 }
 
 export function getIsIndividualTimeseriesSupported({