diff --git a/src/components/ui/chart.tsx b/src/components/ui/chart.tsx index 90d9e85..7e7fd62 100644 --- a/src/components/ui/chart.tsx +++ b/src/components/ui/chart.tsx @@ -1,8 +1,8 @@ -/* eslint-disable @typescript-eslint/no-explicit-any */ 'use client'; import * as React from 'react'; import * as RechartsPrimitive from 'recharts'; +import type { LegendPayload, TooltipContentProps } from 'recharts'; import { cn } from '@/lib/utils'; @@ -94,19 +94,13 @@ const ChartTooltip = RechartsPrimitive.Tooltip; const ChartTooltipContent = React.forwardRef< HTMLDivElement, - Omit, 'content'> & + TooltipContentProps & React.ComponentProps<'div'> & { hideLabel?: boolean; hideIndicator?: boolean; indicator?: 'line' | 'dot' | 'dashed'; nameKey?: string; labelKey?: string; - payload?: any; - label?: any; - active?: boolean; - labelFormatter?: any; - formatter?: any; - color?: string; labelClassName?: string; } >( @@ -170,21 +164,30 @@ const ChartTooltipContent = React.forwardRef< > {!nestLabel ? tooltipLabel : null}
- {payload.map((item: any, index: number) => { + {payload.map((item, index) => { const key = `${nameKey || item.name || item.dataKey || 'value'}`; const itemConfig = getPayloadConfigFromPayload(config, item, key); const indicatorColor = color || item.payload.fill || item.color; return (
svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground', indicator === 'dot' && 'items-center', )} > {formatter && item?.value !== undefined && item.name ? ( - formatter(item.value, item.name, item, index, item.payload) + // Recharts 3 formatter expects ValueType/NameType, cast for compatibility + ( + formatter as ( + value: unknown, + name: unknown, + item: unknown, + index: number, + payload: unknown, + ) => React.ReactNode + )(item.value, item.name, item, index, item.payload) ) : ( <> {itemConfig?.icon ? ( @@ -240,7 +243,7 @@ const ChartLegend = RechartsPrimitive.Legend; const ChartLegendContent = React.forwardRef< HTMLDivElement, React.ComponentProps<'div'> & { - payload?: any[]; + payload?: LegendPayload[]; verticalAlign?: 'top' | 'bottom' | 'middle'; hideIcon?: boolean; nameKey?: string; @@ -257,7 +260,7 @@ const ChartLegendContent = React.forwardRef< ref={ref} className={cn('flex items-center justify-center gap-4', verticalAlign === 'top' ? 'pb-3' : 'pt-3', className)} > - {payload.map((item: any) => { + {payload.map((item) => { const key = `${nameKey || item.dataKey || 'value'}`; const itemConfig = getPayloadConfigFromPayload(config, item, key);