feat(radar): fix typings

plouc · Sep 7, 2021 · 113a6e2 · 113a6e2
1 parent bdb231c
commit 113a6e2
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 12 deletions.
diff --git a/packages/radar/src/RadarDots.tsx b/packages/radar/src/RadarDots.tsx
@@ -8,7 +8,7 @@ import {
     DotsItem,
 } from '@nivo/core'
 import { InheritedColorConfig, getInheritedColorGenerator } from '@nivo/colors'
-import { RadarDataProps } from './types'
+import { RadarCommonProps, RadarDataProps } from './types'
 import { ScaleLinear } from 'd3-scale'
 
 interface RadarDotsProps<D extends Record<string, unknown>> {
@@ -18,7 +18,7 @@ interface RadarDotsProps<D extends Record<string, unknown>> {
     getIndex: (d: D) => string | number
     colorByKey: Record<string | number, string>
     angleStep: number
-    // symbol: PropTypes.func,
+    symbol?: RadarCommonProps<D>['dotSymbol']
     size?: number
     color?: InheritedColorConfig<any>
     borderWidth?: number

diff --git a/packages/radar/src/RadarShapes.tsx b/packages/radar/src/RadarShapes.tsx
@@ -42,7 +42,7 @@ export const RadarShapes = <D extends Record<string, unknown>>({
     }, [radiusScale, angleStep, curveFactory])
 
     const { animate, config: springConfig } = useMotionConfig()
-    const animatedPath = useAnimatedPath(lineGenerator(data.map(d => d[key])))
+    const animatedPath = useAnimatedPath(lineGenerator(data.map(d => d[key] as number)) as string)
     const animatedProps = useSpring<{ fill: string; stroke: string }>({
         fill: colorByKey[key],
         stroke: getBorderColor({ key, color: colorByKey[key] }),

diff --git a/packages/radar/src/RadarTooltip.tsx b/packages/radar/src/RadarTooltip.tsx
@@ -10,7 +10,6 @@ interface RadarTooltipProps<D extends Record<string, unknown>> {
     radius: number
     angleStep: number
     tooltipFormat: any
-    // tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
 }
 
 export const RadarTooltip = <D extends Record<string, unknown>>({

diff --git a/packages/radar/src/RadarTooltipItem.tsx b/packages/radar/src/RadarTooltipItem.tsx
@@ -13,7 +13,7 @@ interface RadarTooltipItemProps<D extends Record<string, unknown>> {
     endAngle: number
     radius: number
     arcGenerator: Arc<any, { startAngle: number; endAngle: number }>
-    // tooltipFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+    tooltipFormat: any
 }
 
 export const RadarTooltipItem = <D extends Record<string, unknown>>({

diff --git a/packages/radar/src/hooks.ts b/packages/radar/src/hooks.ts
@@ -41,10 +41,11 @@ export const useRadar = <D extends Record<string, unknown>>({
     )
 
     const { radius, radiusScale, centerX, centerY, angleStep } = useMemo(() => {
-        const computedMaxValue =
-            maxValue !== 'auto'
-                ? maxValue
-                : Math.max(...data.reduce((acc, d) => [...acc, ...keys.map(key => d[key])], []))
+        const allValues: number[] = data.reduce(
+            (acc: number[], d) => [...acc, ...keys.map(key => d[key] as number)],
+            [] as number[]
+        )
+        const computedMaxValue = maxValue !== 'auto' ? maxValue : Math.max(...allValues)
 
         const radius = Math.min(width, height) / 2
         const radiusScale = scaleLinear<number, number>()

diff --git a/packages/radar/stories/radar.stories.tsx b/packages/radar/stories/radar.stories.tsx
@@ -1,6 +1,7 @@
 import { Meta } from '@storybook/react'
 import { withKnobs, select } from '@storybook/addon-knobs'
 import { generateWinesTastes } from '@nivo/generators'
+import { ClosedCurveFactoryId } from '@nivo/core'
 // @ts-ignore
 import { Radar, GridLabelProps } from '../src'
 
@@ -19,7 +20,12 @@ const commonProperties = {
     animate: true,
 }
 
-const curveOptions = ['linearClosed', 'basisClosed', 'catmullRomClosed', 'cardinalClosed']
+const curveOptions: ClosedCurveFactoryId[] = [
+    'linearClosed',
+    'basisClosed',
+    'catmullRomClosed',
+    'cardinalClosed',
+]
 
 export const Default = () => <Radar {...commonProperties} />
 
@@ -31,14 +37,14 @@ export const LinearGridShape = () => (
     <Radar
         {...commonProperties}
         gridShape="linear"
-        curve={select('curve', curveOptions, 'linearClosed')}
+        curve={select<ClosedCurveFactoryId>('curve', curveOptions, 'linearClosed')}
     />
 )
 
 export const WithDotLabel = () => (
     <Radar
         {...commonProperties}
-        curve={select('curve', curveOptions, 'linearClosed')}
+        curve={select<ClosedCurveFactoryId>('curve', curveOptions, 'linearClosed')}
         gridShape="linear"
         dotSize={10}
         dotBorderColor="#fff"