feat(sunburst): add animation support

packages/sunburst/package.json

@@ -32,7 +32,8 @@
     "@nivo/tooltip": "0.66.0",
     "d3-hierarchy": "^1.1.8",
     "d3-shape": "^1.3.5",
-    "lodash": "^4.17.11"
+    "lodash": "^4.17.11",
+    "react-spring": "9.0.0-rc.3"
   },
   "devDependencies": {
     "@nivo/core": "0.66.0",

packages/sunburst/src/Sunburst.tsx

@@ -104,10 +104,12 @@ const InnerSunburst = <RawDatum,>(props: SvgProps<RawDatum>) => {
 
 export const Sunburst = <RawDatum,>({
     isInteractive = defaultProps.isInteractive,
+    animate = defaultProps.animate,
+    motionConfig = defaultProps.motionConfig,
     theme,
     ...otherProps
 }: SvgProps<RawDatum>) => (
-    <Container theme={theme} isInteractive={isInteractive} animate={false}>
+    <Container theme={theme} {...{ isInteractive, animate, motionConfig }}>
         <InnerSunburst<RawDatum> isInteractive={isInteractive} {...otherProps} />
     </Container>
 )

packages/sunburst/src/SunburstArc.tsx

@@ -1,5 +1,7 @@
 import React, { useMemo } from 'react'
 import { BasicTooltip, useTooltip } from '@nivo/tooltip'
+import { animated } from 'react-spring'
+import { useAnimatedPath } from '@nivo/core'
 import { SunburstArcProps } from './types'
 
 export const SunburstArc = <RawDatum,>({
@@ -34,13 +36,15 @@ export const SunburstArc = <RawDatum,>({
         [_tooltip, node.data, tooltipFormat]
     )
 
+    const animatedPath = useAnimatedPath(path ?? '')
+
     if (!path) {
         return null
     }
 
     return (
-        <path
-            d={path}
+        <animated.path
+            d={animatedPath}
             fill={node.data.fill ?? node.data.color}
             stroke={borderColor}
             strokeWidth={borderWidth}

packages/sunburst/src/props.ts

@@ -19,4 +19,6 @@ export const defaultProps = {
     sliceLabelsTextColor: { theme: 'labels.text.fill' },
 
     isInteractive: true,
+    animate: false,
+    motionConfig: 'gentle',
 } as const

packages/sunburst/src/types.ts

@@ -1,7 +1,14 @@
 import { Arc } from 'd3-shape'
 import { HierarchyRectangularNode } from 'd3-hierarchy'
 import { OrdinalColorScaleConfig, InheritedColorConfig } from '@nivo/colors'
-import { Theme, Dimensions, Box, DataFormatter, SvgDefsAndFill } from '@nivo/core'
+import {
+    Theme,
+    Dimensions,
+    Box,
+    DataFormatter,
+    SvgDefsAndFill,
+    ModernMotionProps,
+} from '@nivo/core'
 
 export type DatumId = string | number
 export type DatumValue = number
@@ -77,6 +84,7 @@ export type SvgProps<RawDatum> = DataProps<RawDatum> &
     Dimensions &
     SvgDefsAndFill<RawDatum> &
     MouseEventHandlers<SVGPathElement> &
+    ModernMotionProps &
     Partial<CommonProps>
 
 export type SunburstArcProps<RawDatum> = Pick<

packages/sunburst/stories/sunburst.stories.tsx

@@ -1,7 +1,7 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { storiesOf } from '@storybook/react'
 import { action } from '@storybook/addon-actions'
-import { withKnobs } from '@storybook/addon-knobs'
+import { withKnobs, boolean, select } from '@storybook/addon-knobs'
 import { generateLibTree } from '@nivo/generators'
 // @ts-ignore
 import { linearGradientDef, patternDotsDef } from '@nivo/core'
@@ -106,3 +106,50 @@ stories.add('patterns & gradients', () => (
         ]}
     />
 ))
+
+const flatten = data =>
+    data.reduce((acc, item) => {
+        if (item.children) {
+            return [...acc, item, ...flatten(item.children)]
+        }
+
+        return [...acc, item]
+    }, [])
+
+const findObject = (data, name) => data.find(searchedName => searchedName.name === name)
+
+stories.add(
+    'children drill down',
+    () => {
+        const [data, setData] = useState(commonProperties.data)
+
+        return (
+            <>
+                <button onClick={() => setData(commonProperties.data)}>Reset</button>
+                <Sunburst
+                    {...commonProperties}
+                    animate={boolean('animate', false)}
+                    motionConfig={select(
+                        'motion config',
+                        ['default', 'gentle', 'wobbly', 'stiff', 'slow', 'molasses'],
+                        'gentle'
+                    )}
+                    data={data}
+                    onClick={clickedData => {
+                        const foundObject = findObject(flatten(data.children), clickedData.id)
+                        if (foundObject && foundObject.children) {
+                            setData(foundObject)
+                        }
+                    }}
+                />
+            </>
+        )
+    },
+    {
+        info: {
+            text: `
+            You can drill down into individual children by clicking on them
+        `,
+        },
+    }
+)

website/src/data/components/sunburst/meta.yml

@@ -26,6 +26,8 @@ Sunburst:
       link: sunburst--enter-leave-check-actions
     - label: with patterns and gradients
       link: sunburst--patterns-gradients
+    - label: drill down to children
+      link: sunburst--children-drill-down
   description: |
     The responsive alternative of this component is
     `ResponsiveSunburst`.

website/src/data/components/sunburst/props.js

@@ -7,7 +7,7 @@
  * file that was distributed with this source code.
  */
 import { defaultProps } from '@nivo/sunburst'
-import { groupProperties, defsProperties } from '../../../lib/componentProperties'
+import { groupProperties, defsProperties, motionProperties } from '../../../lib/componentProperties'
 
 const props = [
     {
@@ -155,6 +155,7 @@ const props = [
         controlType: 'switch',
         group: 'Interactivity',
     },
+    ...motionProperties(['svg'], defaultProps, 'react-spring'),
     {
         key: 'tooltip',
         flavors: ['svg'],

website/src/pages/sunburst/index.js

@@ -39,13 +39,12 @@ const initialProperties = {
         from: 'color',
     },
 
+    animate: false,
+    motionConfig: 'gentle',
+
     defs: [],
     fill: [],
 
-    animate: true,
-    motionStiffness: 90,
-    motionDamping: 15,
-
     isInteractive: true,
     'custom tooltip example': false,
     tooltip: null,
@@ -63,11 +62,6 @@ const Sunburst = () => {
             properties={groups}
             initialProperties={initialProperties}
             propertiesMapper={mapper}
-            codePropertiesMapper={(properties, data) => ({
-                keys: data.keys,
-                ...properties,
-                tooltip: properties.tooltip ? Tooltip : undefined,
-            })}
             generateData={generateLibTree}
         >
             {(properties, data, theme, logAction) => {