fix(radar): switch to useAnimatedPath hook

plouc · Oct 22, 2020 · e799128 · e799128
1 parent d983b19
commit e799128
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 86 deletions.
diff --git a/packages/radar/src/Radar.js b/packages/radar/src/Radar.js
@@ -122,18 +122,23 @@ const Radar = memo(
                         label={gridLabel}
                         labelOffset={gridLabelOffset}
                     />
-                    <RadarShapes
-                        data={data}
-                        keys={keys}
-                        colorByKey={colorByKey}
-                        radiusScale={radiusScale}
-                        angleStep={angleStep}
-                        curveInterpolator={curveInterpolator}
-                        borderWidth={borderWidth}
-                        borderColor={borderColor}
-                        fillOpacity={fillOpacity}
-                        blendMode={blendMode}
-                    />
+                    {keys.map(key => (
+                        <RadarShapes
+                            key={key}
+                            {...{
+                                data,
+                                item: key,
+                                colorByKey,
+                                radiusScale,
+                                angleStep,
+                                curveInterpolator,
+                                borderWidth,
+                                borderColor,
+                                fillOpacity,
+                                blendMode,
+                            }}
+                        />
+                    ))}
                     {isInteractive && (
                         <RadarTooltip
                             data={data}

diff --git a/packages/radar/src/RadarGrid.js b/packages/radar/src/RadarGrid.js
@@ -38,12 +38,15 @@ const RadarGrid = memo(({ indices, levels, shape, radius, angleStep, label, labe
                     />
                 )
             })}
-            <RadarGridLevels
-                shape={shape}
-                radii={radii}
-                angleStep={angleStep}
-                dataLength={indices.length}
-            />
+            {radii.map((radius, i) => (
+                <RadarGridLevels
+                    key={`level.${i}`}
+                    shape={shape}
+                    radius={radius}
+                    angleStep={angleStep}
+                    dataLength={indices.length}
+                />
+            ))}
             <RadialGridLabels
                 radius={radius}
                 angles={angles}

diff --git a/packages/radar/src/RadarGridLevels.js b/packages/radar/src/RadarGridLevels.js
@@ -8,61 +8,31 @@
  */
 import React, { memo, useMemo } from 'react'
 import PropTypes from 'prop-types'
-import { lineRadial, curveLinearClosed } from 'd3-shape'
-import { useTransition, animated } from 'react-spring'
-import { useTheme, useMotionConfig } from '@nivo/core'
+import { lineRadial, curveBasisClosed, curveLinearClosed } from 'd3-shape'
+import { animated } from 'react-spring'
+import { useTheme, useAnimatedPath } from '@nivo/core'
 
-const RadarGridLevels = memo(({ shape, radii, angleStep, dataLength }) => {
+const RadarGridLevels = memo(({ shape, radius, angleStep, dataLength }) => {
     const theme = useTheme()
-    const { animate, config: springConfig } = useMotionConfig()
-    let transitions
 
     const radarLineGenerator = useMemo(
         () =>
             lineRadial()
                 .angle(i => i * angleStep)
-                .curve(curveLinearClosed),
-        [angleStep]
+                .curve(shape === 'linear' ? curveLinearClosed : curveBasisClosed),
+        [angleStep, shape]
     )
 
-    if (shape === 'circular') {
-        transitions = useTransition(radii, (_, i) => `level.${i}`, {
-            enter: radius => ({ radius }),
-            update: radius => ({ radius }),
-            leave: { radius: 0 },
-            config: springConfig,
-            immediate: !animate,
-        })
-
-        return transitions.map(({ props: animatedProps, key }) => (
-            <animated.circle
-                key={key}
-                fill="none"
-                r={animatedProps.radius.interpolate(v => Math.max(v, 0))}
-                {...theme.grid.line}
-            />
-        ))
-    }
-
     const points = Array.from({ length: dataLength }, (_, i) => i)
+    const animatedPath = useAnimatedPath(radarLineGenerator.radius(radius)(points))
 
-    transitions = useTransition(radii, (_, i) => `level.${i}`, {
-        enter: radius => ({ path: radarLineGenerator.radius(radius)(points) }),
-        update: radius => ({ path: radarLineGenerator.radius(radius)(points) }),
-        leave: { path: radarLineGenerator.radius(0)(points) },
-        config: springConfig,
-        immediate: !animate,
-    })
-
-    return transitions.map(({ props: animatedProps, key }) => (
-        <animated.path key={key} fill="none" d={animatedProps.path} {...theme.grid.line} />
-    ))
+    return <animated.path fill="none" d={animatedPath} {...theme.grid.line} />
 })
 
 RadarGridLevels.displayName = 'RadarGridLevels'
 RadarGridLevels.propTypes = {
     shape: PropTypes.oneOf(['circular', 'linear']).isRequired,
-    radii: PropTypes.arrayOf(PropTypes.number).isRequired,
+    radius: PropTypes.number.isRequired,
     angleStep: PropTypes.number.isRequired,
     dataLength: PropTypes.number.isRequired,
 }

diff --git a/packages/radar/src/RadarShapes.js b/packages/radar/src/RadarShapes.js
@@ -8,15 +8,15 @@
  */
 import React, { memo, useMemo } from 'react'
 import PropTypes from 'prop-types'
-import { useSprings, animated } from 'react-spring'
+import { useSpring, animated } from 'react-spring'
 import { lineRadial } from 'd3-shape'
-import { useMotionConfig, useTheme, blendModePropType } from '@nivo/core'
+import { useMotionConfig, useTheme, useAnimatedPath, blendModePropType } from '@nivo/core'
 import { useInheritedColor, inheritedColorPropType } from '@nivo/colors'
 
 const RadarShapes = memo(
     ({
         data,
-        keys,
+        item: key,
         colorByKey,
         radiusScale,
         angleStep,
@@ -37,39 +37,32 @@ const RadarShapes = memo(
         }, [radiusScale, angleStep, curveInterpolator])
 
         const { animate, config: springConfig } = useMotionConfig()
-        const springs = useSprings(
-            keys.length,
-            keys.map(key => ({
-                path: lineGenerator(data.map(d => d[key])),
-                fill: colorByKey[key],
-                stroke: getBorderColor({ key, color: colorByKey[key] }),
-                config: springConfig,
-                immediate: !animate,
-            }))
-        )
-
-        return springs.map((animatedProps, index) => {
-            const key = keys[index]
-
-            return (
-                <animated.path
-                    key={key}
-                    d={animatedProps.path}
-                    fill={animatedProps.fill}
-                    fillOpacity={fillOpacity}
-                    stroke={animatedProps.stroke}
-                    strokeWidth={borderWidth}
-                    style={{ mixBlendMode: blendMode }}
-                />
-            )
+        const animatedPath = useAnimatedPath(lineGenerator(data.map(d => d[key])))
+        const animatedProps = useSpring({
+            fill: colorByKey[key],
+            stroke: getBorderColor({ key, color: colorByKey[key] }),
+            config: springConfig,
+            immediate: !animate,
         })
+
+        return (
+            <animated.path
+                key={key}
+                d={animatedPath}
+                fill={animatedProps.fill}
+                fillOpacity={fillOpacity}
+                stroke={animatedProps.stroke}
+                strokeWidth={borderWidth}
+                style={{ mixBlendMode: blendMode }}
+            />
+        )
     }
 )
 
 RadarShapes.displayName = 'RadarShapes'
 RadarShapes.propTypes = {
     data: PropTypes.arrayOf(PropTypes.object).isRequired,
-    keys: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])).isRequired,
+    item: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
     colorByKey: PropTypes.object.isRequired,
 
     radiusScale: PropTypes.func.isRequired,