From 8c8bfcdc19ee6bbf97d706cd843ac4a8f323c43a Mon Sep 17 00:00:00 2001 From: j8seangel Date: Mon, 13 Jan 2025 20:17:07 +0100 Subject: [PATCH] fix typing --- .../vessels/VesselGroupReportVesselsGraph.tsx | 2 +- .../vessel-group-report-vessels.selectors.ts | 13 ++++++++++--- .../src/charts/barchart/BarChart.tsx | 12 ++++++------ .../src/charts/barchart/BarChartAggregated.tsx | 2 +- .../src/charts/hooks.ts | 10 +++++----- .../src/charts/timeseries/Timeseries.tsx | 10 ++++++---- .../charts/timeseries/TimeseriesAggregated.tsx | 4 ++-- .../charts/timeseries/TimeseriesIndividual.tsx | 4 ++-- .../src/charts/timeseries/timeseries.hooks.ts | 4 ++-- .../src/charts/types.ts | 5 ++--- .../src/lib/density.ts | 18 ++++++++---------- 11 files changed, 45 insertions(+), 39 deletions(-) diff --git a/apps/fishing-map/features/reports/vessel-groups/vessels/VesselGroupReportVesselsGraph.tsx b/apps/fishing-map/features/reports/vessel-groups/vessels/VesselGroupReportVesselsGraph.tsx index cd068e6a8f..130c90007e 100644 --- a/apps/fishing-map/features/reports/vessel-groups/vessels/VesselGroupReportVesselsGraph.tsx +++ b/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={} aggregatedTooltip={} /> diff --git a/apps/fishing-map/features/reports/vessel-groups/vessels/vessel-group-report-vessels.selectors.ts b/apps/fishing-map/features/reports/vessel-groups/vessels/vessel-group-report-vessels.selectors.ts index f635904ca1..e1094fa46c 100644 --- a/apps/fishing-map/features/reports/vessel-groups/vessels/vessel-group-report-vessels.selectors.ts +++ b/apps/fishing-map/features/reports/vessel-groups/vessels/vessel-group-report-vessels.selectors.ts @@ -277,7 +277,10 @@ 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[], @@ -285,8 +288,12 @@ export const selectVGRVesselsGraphIndividualData = createSelector( .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' || diff --git a/libs/responsive-visualizations/src/charts/barchart/BarChart.tsx b/libs/responsive-visualizations/src/charts/barchart/BarChart.tsx index 609d1d920f..cb6579c870 100644 --- a/libs/responsive-visualizations/src/charts/barchart/BarChart.tsx +++ b/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(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} diff --git a/libs/responsive-visualizations/src/charts/barchart/BarChartAggregated.tsx b/libs/responsive-visualizations/src/charts/barchart/BarChartAggregated.tsx index c29fbe2448..a25f27e5f7 100644 --- a/libs/responsive-visualizations/src/charts/barchart/BarChartAggregated.tsx +++ b/libs/responsive-visualizations/src/charts/barchart/BarChartAggregated.tsx @@ -33,7 +33,7 @@ export function AggregatedBarChart({ [0]) => - barValueFormatter?.(entry[valueKey]) || entry[valueKey] + barValueFormatter?.(entry[valueKey] as number) || entry[valueKey] } /> diff --git a/libs/responsive-visualizations/src/charts/hooks.ts b/libs/responsive-visualizations/src/charts/hooks.ts index 35c8405827..6e81ecc401 100644 --- a/libs/responsive-visualizations/src/charts/hooks.ts +++ b/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) } diff --git a/libs/responsive-visualizations/src/charts/timeseries/Timeseries.tsx b/libs/responsive-visualizations/src/charts/timeseries/Timeseries.tsx index 0f767da93a..77d23a996f 100644 --- a/libs/responsive-visualizations/src/charts/timeseries/Timeseries.tsx +++ b/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({ diff --git a/libs/responsive-visualizations/src/charts/timeseries/TimeseriesAggregated.tsx b/libs/responsive-visualizations/src/charts/timeseries/TimeseriesAggregated.tsx index a3da63e7d4..1a2f6aff2a 100644 --- a/libs/responsive-visualizations/src/charts/timeseries/TimeseriesAggregated.tsx +++ b/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) { diff --git a/libs/responsive-visualizations/src/charts/timeseries/TimeseriesIndividual.tsx b/libs/responsive-visualizations/src/charts/timeseries/TimeseriesIndividual.tsx index dad69018c6..87493cd9f7 100644 --- a/libs/responsive-visualizations/src/charts/timeseries/TimeseriesIndividual.tsx +++ b/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, }) diff --git a/libs/responsive-visualizations/src/charts/timeseries/timeseries.hooks.ts b/libs/responsive-visualizations/src/charts/timeseries/timeseries.hooks.ts index 57cc027588..4f1ffd83c1 100644 --- a/libs/responsive-visualizations/src/charts/timeseries/timeseries.hooks.ts +++ b/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 : [], diff --git a/libs/responsive-visualizations/src/charts/types.ts b/libs/responsive-visualizations/src/charts/types.ts index a02db32c9a..82f33cbe4c 100644 --- a/libs/responsive-visualizations/src/charts/types.ts +++ b/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 = { diff --git a/libs/responsive-visualizations/src/lib/density.ts b/libs/responsive-visualizations/src/lib/density.ts index 5b556d106a..ac766055f4 100644 --- a/libs/responsive-visualizations/src/lib/density.ts +++ b/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({