feat(radar): improve dots related typings

Author: plouc

packages/core/index.d.ts

@@ -500,4 +500,27 @@ declare module '@nivo/core' {
     export const curveFromProp: (interpolation: CurveFactoryId) => CurveFactory
 
     export const useCurveInterpolation: (interpolation: CurveFactoryId) => CurveFactory
+
+    export interface DotsItemSymbolProps {
+        size: number
+        color: string
+        borderWidth: number
+        borderColor: string
+    }
+    export type DotsItemSymbolComponent = React.FunctionComponent<DotsItemSymbolProps>
+
+    export interface DotsItemProps<D = any> {
+        datum: D
+        x: number
+        y: number
+        size: number
+        color: string
+        borderWidth: number
+        borderColor: string
+        label?: string | number
+        labelTextAnchor?: 'start' | 'middle' | 'end'
+        labelYOffset?: number
+        symbol?: DotsItemSymbolComponent
+    }
+    export const DotsItem: React.FunctionComponent<DotsItemProps>
 }

packages/core/src/components/dots/DotsItem.js

@@ -1,34 +1,26 @@
-/*
- * This file is part of the nivo project.
- *
- * Copyright 2016-present, Raphaël Benitte.
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
 import { createElement, memo } from 'react'
 import PropTypes from 'prop-types'
 import { useSpring, animated } from '@react-spring/web'
-import { dotsThemePropType } from '../../theming'
+import { useTheme } from '../../theming'
 import { useMotionConfig } from '../../motion'
 import DotsItemSymbol from './DotsItemSymbol'
 
 const DotsItem = ({
     x,
     y,
-    symbol,
+    symbol = DotsItemSymbol,
     size,
     datum,
     color,
     borderWidth,
     borderColor,
     label,
-    labelTextAnchor,
-    labelYOffset,
-    theme,
+    labelTextAnchor = 'middle',
+    labelYOffset = -12,
 }) => {
-    const { animate, config: springConfig } = useMotionConfig()
+    const theme = useTheme()
 
+    const { animate, config: springConfig } = useMotionConfig()
     const animatedProps = useSpring({
         transform: `translate(${x}, ${y})`,
         config: springConfig,
@@ -68,19 +60,6 @@ DotsItem.propTypes = {
     label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     labelTextAnchor: PropTypes.oneOf(['start', 'middle', 'end']),
     labelYOffset: PropTypes.number.isRequired,
-
-    theme: PropTypes.shape({
-        dots: dotsThemePropType.isRequired,
-    }).isRequired,
 }
 
-export const DotsItemDefaultProps = {
-    symbol: DotsItemSymbol,
-
-    labelTextAnchor: 'middle',
-    labelYOffset: -12,
-}
-
-DotsItem.defaultProps = DotsItemDefaultProps
-
 export default memo(DotsItem)

packages/radar/src/RadarDots.tsx

@@ -1,12 +1,6 @@
 import { useMemo } from 'react'
 import { ScaleLinear } from 'd3-scale'
-import {
-    useTheme,
-    positionFromAngle,
-    // @ts-ignore: core package should be converted to TypeScript
-    DotsItem,
-    usePropertyAccessor,
-} from '@nivo/core'
+import { useTheme, positionFromAngle, DotsItem, usePropertyAccessor } from '@nivo/core'
 import { getInheritedColorGenerator } from '@nivo/colors'
 import { RadarCommonProps, RadarDataProps, PointProps, PointData, RadarColorMapping } from './types'
 
@@ -67,7 +61,7 @@ export const RadarDots = <D extends Record<string, unknown>>({
 
                     acc.push({
                         key: `${key}.${index}`,
-                        label: enableLabel ? getLabel(pointData) : null,
+                        label: enableLabel ? getLabel(pointData) : undefined,
                         style: {
                             fill: fillColor(pointData),
                             stroke: strokeColor(pointData),
@@ -84,10 +78,12 @@ export const RadarDots = <D extends Record<string, unknown>>({
             }, [] as PointProps[]),
         [
             data,
+            keys,
             getIndex,
             colorByKey,
             enableLabel,
             getLabel,
+            formatValue,
             fillColor,
             strokeColor,
             angleStep,
@@ -109,7 +105,6 @@ export const RadarDots = <D extends Record<string, unknown>>({
                     borderColor={point.style.stroke}
                     label={point.label}
                     labelYOffset={labelYOffset}
-                    theme={theme}
                     datum={point.data}
                 />
             ))}

packages/radar/src/RadarGridLevels.tsx

@@ -1,4 +1,4 @@
-import { memo, useMemo } from 'react'
+import { memo, SVGProps, useMemo } from 'react'
 import { lineRadial, curveLinearClosed } from 'd3-shape'
 import { animated, useSpring, to } from '@react-spring/web'
 import { useTheme, useAnimatedPath, useMotionConfig } from '@nivo/core'
@@ -22,7 +22,7 @@ const RadarGridLevelCircular = memo(({ radius }: RadarGridLevelCircularProps) =>
         <animated.circle
             fill="none"
             r={to(animatedProps.radius, value => Math.max(value, 0))}
-            {...(theme.grid.line as any)}
+            {...(theme.grid.line as Omit<SVGProps<SVGCircleElement>, 'ref'>)}
         />
     )
 })
@@ -48,7 +48,13 @@ const RadarGridLevelLinear = ({ radius, angleStep, dataLength }: RadarGridLevelL
     const points = Array.from({ length: dataLength }, (_, i) => i)
     const animatedPath = useAnimatedPath(radarLineGenerator(points) as string)
 
-    return <animated.path fill="none" d={animatedPath} {...(theme.grid.line as any)} />
+    return (
+        <animated.path
+            fill="none"
+            d={animatedPath}
+            {...(theme.grid.line as Omit<SVGProps<SVGPathElement>, 'ref'>)}
+        />
+    )
 }
 
 interface RadarGridLevelsProps {

packages/radar/src/RadarTooltipItem.tsx

@@ -13,7 +13,7 @@ interface RadarTooltipItemProps<D extends Record<string, unknown>> {
     startAngle: number
     endAngle: number
     radius: number
-    arcGenerator: Arc<any, { startAngle: number; endAngle: number }>
+    arcGenerator: Arc<void, { startAngle: number; endAngle: number }>
 }
 
 type TooltipRow = [ReactNode, string, number | string]
@@ -49,7 +49,7 @@ export const RadarTooltipItem = <D extends Record<string, unknown>>({
         })
 
         return <TableTooltip title={<strong>{index}</strong>} rows={rows} />
-    }, [datum, keys, index, formatValue, colorByKey, theme])
+    }, [datum, keys, index, formatValue, colorByKey])
     const showItemTooltip = useCallback(
         event => {
             setIsHover(true)

packages/radar/src/hooks.ts

@@ -59,7 +59,7 @@ export const useRadar = <D extends Record<string, unknown>>({
             centerY: height / 2,
             angleStep: (Math.PI * 2) / data.length,
         }
-    }, [keys, indexBy, data, maxValue, width, height])
+    }, [keys, data, maxValue, width, height])
 
     const curveFactory = useCurveInterpolation(curve)
 

packages/radar/src/types.ts

@@ -1,4 +1,4 @@
-import { FunctionComponent, AriaAttributes, ReactNode } from 'react'
+import { FunctionComponent, AriaAttributes } from 'react'
 import { AnimatedProps } from '@react-spring/web'
 import {
     Box,
@@ -9,6 +9,7 @@ import {
     PropertyAccessor,
     ValueFormat,
     ClosedCurveFactoryId,
+    DotsItemSymbolComponent,
 } from '@nivo/core'
 import { InheritedColorConfig, OrdinalColorScaleConfig } from '@nivo/colors'
 import { LegendProps } from '@nivo/legends'
@@ -41,7 +42,7 @@ export type PointData = {
 
 export interface PointProps {
     key: string
-    label: ReactNode | null
+    label: string | number | undefined
     data: PointData
     style: {
         fill: string
@@ -51,14 +52,6 @@ export interface PointProps {
     }
 }
 
-export interface DotSymbolProps {
-    size: number
-    color: InheritedColorConfig<PointData>
-    borderWidth: number
-    borderColor: InheritedColorConfig<PointData>
-}
-export type DotSymbolComponent = FunctionComponent<DotSymbolProps>
-
 export type RadarLayerId = 'grid' | 'shapes' | 'dots' | 'legends'
 
 export type RadarColorMapping = Record<string, string>
@@ -79,7 +72,7 @@ export interface RadarCommonProps {
     gridLabelOffset: number
 
     enableDots: boolean
-    dotSymbol: DotSymbolComponent
+    dotSymbol: DotsItemSymbolComponent
     dotSize: number
     dotColor: InheritedColorConfig<PointData>
     dotBorderWidth: number

website/src/data/components/line/props.ts

@@ -1,4 +1,4 @@
-import { lineCurvePropKeys, DotsItemDefaultProps as dotDefaults } from '@nivo/core'
+import { lineCurvePropKeys } from '@nivo/core'
 import { LineDefaultProps as defaults } from '@nivo/line'
 import {
     themeProperty,
@@ -383,7 +383,7 @@ const props: ChartProperty[] = [
         help: 'Label Y offset from point shape.',
         type: 'number',
         required: false,
-        defaultValue: dotDefaults.labelYOffset,
+        defaultValue: -12,
         controlType: 'range',
         controlOptions: {
             unit: 'px',

website/src/pages/radar/api.js

@@ -27,6 +27,7 @@ const RadarApi = () => {
                     keys,
                     indexBy: 'taste',
                     maxValue: 'auto',
+                    valueFormat: { format: '>-.2f', enabled: true },
 
                     margin: {
                         top: 70,

website/src/pages/radar/index.tsx

@@ -1,12 +1,20 @@
 import React from 'react'
 import { generateWinesTastes } from '@nivo/generators'
-import { ResponsiveRadar, svgDefaultProps } from '@nivo/radar'
+import { ResponsiveRadar, RadarSvgProps, svgDefaultProps } from '@nivo/radar'
 import { ComponentTemplate } from '../../components/components/ComponentTemplate'
 import meta from '../../data/components/radar/meta.yml'
 import mapper from '../../data/components/radar/mapper'
 import { groups } from '../../data/components/radar/props'
 
-const initialProperties = {
+type MappedRadarProps = Omit<RadarSvgProps<any>, 'data' | 'keys' | 'width' | 'height'>
+type UnmappedRadarProps = Omit<MappedRadarProps, 'valueFormat'> & {
+    valueFormat: {
+        format: string
+        enabled: boolean
+    }
+}
+
+const initialProperties: UnmappedRadarProps = {
     indexBy: 'taste',
     maxValue: 'auto',
     valueFormat: { format: '>-.2f', enabled: true },
@@ -72,7 +80,7 @@ const initialProperties = {
 }
 
 const Radar = () => (
-    <ComponentTemplate
+    <ComponentTemplate<UnmappedRadarProps, MappedRadarProps, any>
         name="Radar"
         meta={meta.Radar}
         icon="radar"
@@ -82,7 +90,7 @@ const Radar = () => (
         initialProperties={initialProperties}
         defaultProperties={svgDefaultProps}
         propertiesMapper={mapper}
-        codePropertiesMapper={(properties, data) => ({
+        codePropertiesMapper={(properties: any, data: any) => ({
             keys: data.keys,
             ...properties,
         })}