feat(radial-bar): use the @nivo/arcs package

plouc · plouc · commit 5ec257f13713 · 2021-09-12T00:46:07.000+09:00
diff --git a/packages/radial-bar/package.json b/packages/radial-bar/package.json
@@ -29,6 +29,7 @@
     "!dist/tsconfig.tsbuildinfo"
   ],
   "dependencies": {
+    "@nivo/arcs": "0.73.0",
     "@nivo/colors": "0.73.0",
     "@nivo/legends": "0.73.0",
     "@nivo/tooltip": "0.73.0",
diff --git a/packages/radial-bar/src/RadialBar.tsx b/packages/radial-bar/src/RadialBar.tsx
@@ -27,6 +27,7 @@ const InnerRadialBar = ({
     onMouseEnter,
     onMouseMove,
     onMouseLeave,
+    transitionMode = svgDefaultProps.transitionMode,
     role,
     ariaLabel,
     ariaLabelledBy,
@@ -67,18 +68,19 @@ const InnerRadialBar = ({
 
     if (layers.includes('bars')) {
         layerById.bars = (
-            <g key="bars" transform={`translate(${center[0]}, ${center[1]})`}>
-                <RadialBarArcs
-                    bars={bars}
-                    arcGenerator={arcGenerator}
-                    isInteractive={isInteractive}
-                    tooltip={tooltip}
-                    onClick={onClick}
-                    onMouseEnter={onMouseEnter}
-                    onMouseMove={onMouseMove}
-                    onMouseLeave={onMouseLeave}
-                />
-            </g>
+            <RadialBarArcs
+                key="bars"
+                center={center}
+                bars={bars}
+                arcGenerator={arcGenerator}
+                isInteractive={isInteractive}
+                tooltip={tooltip}
+                onClick={onClick}
+                onMouseEnter={onMouseEnter}
+                onMouseMove={onMouseMove}
+                onMouseLeave={onMouseLeave}
+                transitionMode={transitionMode}
+            />
         )
     }
 
diff --git a/packages/radial-bar/src/RadialBarArc.tsx b/packages/radial-bar/src/RadialBarArc.tsx
diff --git a/packages/radial-bar/src/RadialBarArcs.tsx b/packages/radial-bar/src/RadialBarArcs.tsx
@@ -1,20 +1,23 @@
-import { useTransition } from '@react-spring/web'
-import { useMotionConfig } from '@nivo/core'
-import { ComputedBar, RadialBarArcGenerator, RadialBarCommonProps } from './types'
-import { RadialBarArc } from './RadialBarArc'
+import { createElement, MouseEvent, useCallback } from 'react'
+import { ArcsLayer, ArcGenerator } from '@nivo/arcs'
+import { useTooltip } from '@nivo/tooltip'
+import { ComputedBar, RadialBarCommonProps } from './types'
 
 interface RadialBarArcsProps {
+    center: [number, number]
     bars: ComputedBar[]
-    arcGenerator: RadialBarArcGenerator
+    arcGenerator: ArcGenerator
     isInteractive: RadialBarCommonProps['isInteractive']
     tooltip: RadialBarCommonProps['tooltip']
     onClick?: RadialBarCommonProps['onClick']
     onMouseEnter?: RadialBarCommonProps['onMouseEnter']
     onMouseMove?: RadialBarCommonProps['onMouseMove']
     onMouseLeave?: RadialBarCommonProps['onMouseLeave']
+    transitionMode: RadialBarCommonProps['transitionMode']
 }
 
 export const RadialBarArcs = ({
+    center,
     bars,
     arcGenerator,
     isInteractive,
@@ -23,71 +26,53 @@ export const RadialBarArcs = ({
     onMouseEnter,
     onMouseMove,
     onMouseLeave,
+    transitionMode,
 }: RadialBarArcsProps) => {
-    const { animate, config: springConfig } = useMotionConfig()
+    const { showTooltipFromEvent, hideTooltip } = useTooltip()
 
-    const transition = useTransition<
-        ComputedBar,
-        {
-            startAngle: number
-            endAngle: number
-            innerRadius: number
-            outerRadius: number
-            color: string
-        }
-    >(bars, {
-        keys: bar => bar.id,
-        initial: bar => ({
-            startAngle: bar.startAngle,
-            endAngle: bar.endAngle,
-            innerRadius: bar.innerRadius,
-            outerRadius: bar.outerRadius,
-            color: bar.color,
-        }),
-        from: bar => ({
-            startAngle: bar.startAngle,
-            endAngle: bar.endAngle,
-            innerRadius: bar.innerRadius,
-            outerRadius: bar.outerRadius,
-            color: bar.color,
-        }),
-        update: bar => ({
-            startAngle: bar.startAngle,
-            endAngle: bar.endAngle,
-            innerRadius: bar.innerRadius,
-            outerRadius: bar.outerRadius,
-            color: bar.color,
-        }),
-        leave: bar => ({
-            startAngle: bar.startAngle + (bar.endAngle - bar.startAngle) / 2,
-            endAngle: bar.startAngle + (bar.endAngle - bar.startAngle) / 2,
-            innerRadius: bar.innerRadius,
-            outerRadius: bar.outerRadius,
-            color: bar.color,
-        }),
-        expires: true,
-        config: springConfig,
-        immediate: !animate,
-    })
+    const handleClick = useCallback(
+        (bar: ComputedBar, event: MouseEvent) => {
+            onClick?.(bar, event)
+        },
+        [onClick]
+    )
+
+    const handleMouseEnter = useCallback(
+        (bar: ComputedBar, event: MouseEvent) => {
+            showTooltipFromEvent(createElement(tooltip, { bar }), event)
+            onMouseEnter?.(bar, event)
+        },
+        [showTooltipFromEvent, tooltip, onMouseEnter]
+    )
+
+    const handleMouseMove = useCallback(
+        (bar: ComputedBar, event: MouseEvent) => {
+            showTooltipFromEvent(createElement(tooltip, { bar }), event)
+            onMouseMove?.(bar, event)
+        },
+        [showTooltipFromEvent, tooltip, onMouseMove]
+    )
+
+    const handleMouseLeave = useCallback(
+        (bar: ComputedBar, event: MouseEvent) => {
+            hideTooltip()
+            onMouseLeave?.(bar, event)
+        },
+        [hideTooltip, onMouseLeave]
+    )
 
     return (
-        <>
-            {transition((style, bar) => {
-                return (
-                    <RadialBarArc
-                        key={bar.id}
-                        bar={bar}
-                        animated={style}
-                        arcGenerator={arcGenerator}
-                        isInteractive={isInteractive}
-                        tooltip={tooltip}
-                        onClick={onClick}
-                        onMouseEnter={onMouseEnter}
-                        onMouseMove={onMouseMove}
-                        onMouseLeave={onMouseLeave}
-                    />
-                )
-            })}
-        </>
+        <ArcsLayer<ComputedBar>
+            center={center}
+            data={bars}
+            arcGenerator={arcGenerator}
+            borderWidth={0}
+            borderColor={'#000000'}
+            transitionMode={transitionMode}
+            onClick={isInteractive ? handleClick : undefined}
+            onMouseEnter={isInteractive ? handleMouseEnter : undefined}
+            onMouseMove={isInteractive ? handleMouseMove : undefined}
+            onMouseLeave={isInteractive ? handleMouseLeave : undefined}
+        />
     )
 }
diff --git a/packages/radial-bar/src/hooks.ts b/packages/radial-bar/src/hooks.ts
@@ -2,14 +2,14 @@ import { useMemo } from 'react'
 import { scaleBand, scaleLinear } from 'd3-scale'
 import { arc as d3Arc } from 'd3-shape'
 import { degreesToRadians } from '@nivo/core'
+import { Arc } from '@nivo/arcs'
 import { useOrdinalColorScale } from '@nivo/colors'
 import { svgDefaultProps } from './props'
 import {
     ComputedBar,
     RadialBarCommonProps,
     RadialBarDataProps,
     RadialBarSerie,
-    RadialBarArcData,
 } from './types'
 
 interface RadialBarGroup {
@@ -92,7 +92,7 @@ export const useRadialBar = ({
 
     const arcGenerator = useMemo(
         () =>
-            d3Arc<RadialBarArcData>()
+            d3Arc<Arc>()
                 .startAngle(d => degreesToRadians(d.startAngle))
                 .endAngle(d => degreesToRadians(d.endAngle))
                 .innerRadius(d => d.innerRadius)
@@ -120,10 +120,12 @@ export const useRadialBar = ({
                     value: datum.y,
                     color: '',
                     stackedValue,
-                    startAngle: valueScale(currentValue),
-                    endAngle: valueScale(stackedValue),
-                    innerRadius,
-                    outerRadius,
+                    arc: {
+                        startAngle: valueScale(currentValue),
+                        endAngle: valueScale(stackedValue),
+                        innerRadius,
+                        outerRadius,
+                    },
                 }
 
                 computedDatum.color = getColor(computedDatum)
diff --git a/packages/radial-bar/src/props.ts b/packages/radial-bar/src/props.ts
@@ -15,6 +15,7 @@ export const svgDefaultProps = {
 
     animate: true,
     motionConfig: 'gentle' as const,
+    transitionMode: 'startAngle' as const,
 
     renderWrapper: true,
 }
diff --git a/packages/radial-bar/src/types.ts b/packages/radial-bar/src/types.ts
@@ -1,7 +1,7 @@
 import { AriaAttributes, FunctionComponent, MouseEvent } from 'react'
 import { Theme, Box, Dimensions, ModernMotionProps } from '@nivo/core'
+import { Arc, ArcTransitionMode } from '@nivo/arcs'
 import { OrdinalColorScaleConfig } from '@nivo/colors'
-import { Arc } from 'd3-shape'
 
 export interface RadialBarDatum {
     x: string
@@ -21,10 +21,7 @@ export interface ComputedBar {
     value: number
     color: string
     stackedValue: number
-    startAngle: number
-    endAngle: number
-    innerRadius: number
-    outerRadius: number
+    arc: Arc
 }
 
 export interface RadialBarDataProps {
@@ -38,14 +35,6 @@ export interface RadialBarTooltipProps {
 }
 export type RadialBarTooltipComponent = FunctionComponent<RadialBarTooltipProps>
 
-export interface RadialBarArcData {
-    startAngle: number
-    endAngle: number
-    innerRadius: number
-    outerRadius: number
-}
-export type RadialBarArcGenerator = Arc<unknown, RadialBarArcData>
-
 export interface RadialBarCommonProps {
     margin: Box
 
@@ -67,6 +56,8 @@ export interface RadialBarCommonProps {
 
     renderWrapper: boolean
 
+    transitionMode: ArcTransitionMode
+
     role: string
     ariaLabel: AriaAttributes['aria-label']
     ariaLabelledBy: AriaAttributes['aria-labelledby']
diff --git a/website/src/data/components/radial-bar/props.ts b/website/src/data/components/radial-bar/props.ts
diff --git a/website/src/pages/radial-bar/index.tsx b/website/src/pages/radial-bar/index.tsx

Original file line number	Diff line number	Diff line change
`@@ -15,6 +15,7 @@ export const svgDefaultProps = {`
`15`	`15`
`16`	`16`	`animate: true,`
`17`	`17`	`motionConfig: 'gentle' as const,`
	`18`	`+ transitionMode: 'startAngle' as const,`
`18`	`19`
`19`	`20`	`renderWrapper: true,`
`20`	`21`	`}`
-Original file line number
+Diff line change
 import { svgDefaultProps } from '@nivo/radial-bar'
 +import { defaultProps } from '@nivo/pie'
 +import { arcTransitionModes } from '@nivo/arcs'
 import { themeProperty, motionProperties, groupProperties } from '../../../lib/componentProperties'
 import { ChartProperty } from '../../../types'
         flavors: ['svg'],
     },
     ...motionProperties(['svg'], svgDefaultProps, 'react-spring'),
 +    {
 +        key: 'transitionMode',
 +        flavors: ['svg'],
 +        help: 'Define how transitions behave.',
 +        type: 'string',
 +        required: false,
 +        defaultValue: defaultProps.transitionMode,
 +        controlType: 'choices',
 +        group: 'Motion',
 +        controlOptions: {
 +            choices: arcTransitionModes.map(choice => ({
 +                label: choice,
 +                value: choice,
 +            })),
 +        },
 +    },
+]
 export const groups = groupProperties(props)