fix(website): update sunburst to not crash on hover

packages/sunburst/src/Sunburst.tsx

@@ -7,49 +7,47 @@ import { defaultProps } from './props'
 import { useSunburst, useSunburstLayerContext } from './hooks'
 import { SvgProps, SunburstLayerId, SunburstLayer } from './types'
 
-const InnerSunburst = <RawDatum,>(props: SvgProps<RawDatum>) => {
-    const {
-        data,
-        id,
-        value,
-        valueFormat,
-
-        layers = defaultProps.layers as SunburstLayer<RawDatum>[],
-
-        colors,
-        childColor,
+const InnerSunburst = <RawDatum,>({
+    data,
+    id = defaultProps.id,
+    value = defaultProps.value,
+    valueFormat,
 
-        margin: partialMargin,
-        width,
-        height,
+    layers = defaultProps.layers as SunburstLayer<RawDatum>[],
 
-        cornerRadius,
+    colors = defaultProps.colors,
+    childColor = defaultProps.childColor,
 
-        borderWidth,
-        borderColor,
+    margin: partialMargin,
+    width,
+    height,
 
-        // slices labels
-        enableSliceLabels,
-        sliceLabel,
-        sliceLabelsSkipAngle,
-        sliceLabelsTextColor,
+    cornerRadius = defaultProps.cornerRadius,
 
-        defs = [],
-        fill = [],
+    borderWidth = defaultProps.borderWidth,
+    borderColor = defaultProps.borderColor,
 
-        role,
+    // slices labels
+    enableSliceLabels = defaultProps.enableSliceLabels,
+    sliceLabel = defaultProps.sliceLabel,
+    sliceLabelsSkipAngle = defaultProps.sliceLabelsSkipAngle,
+    sliceLabelsTextColor = defaultProps.sliceLabelsTextColor,
 
-        // interactivity
-        isInteractive,
-        tooltip,
+    defs = defaultProps.defs,
+    fill = defaultProps.fill,
 
-        // event handlers
-        onClick,
-        onMouseEnter,
-        onMouseLeave,
-        onMouseMove,
-    } = { ...defaultProps, ...props }
+    role = defaultProps.role,
 
+    // interactivity
+    isInteractive = defaultProps.isInteractive,
+    tooltip = defaultProps.tooltip,
+
+    // event handlers
+    onClick,
+    onMouseEnter,
+    onMouseLeave,
+    onMouseMove,
+}: SvgProps<RawDatum>) => {
     const { innerHeight, innerWidth, margin, outerHeight, outerWidth } = useDimensions(
         width,
         height,

packages/sunburst/src/props.ts

@@ -27,5 +27,8 @@ export const defaultProps = {
     animate: false,
     motionConfig: 'gentle',
 
+    defs: [],
+    fill: [],
+
     tooltip: SunburstTooltip,
 }

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

@@ -22,19 +22,19 @@ const props = [
         description: `
             Chart data, which must conform to this structure
             if using the default \`id\` and \`value\` accessors:
-            
+
             \`\`\`
             Array<{
                 id:    string | number,
                 value: number
             }>
             \`\`\`
-            
+
             If using a different data structure, you must make sure
             to adjust both \`id\` and \`value\`. Meaning you can provide
             a completely different data structure as long as \`id\` and \`value\`
             return the appropriate values.
-            
+
             Immutability of the data is important as re-computations
             depends on it.
         `,
@@ -63,15 +63,15 @@ const props = [
         `,
         type: 'string | (datum: RawDatum): number',
         required: false,
-        defaultValue: defaults.id,
+        defaultValue: defaults.value,
     },
     {
         key: 'valueFormat',
         group: 'Base',
         help: 'Optional formatter for values.',
         description: `
             The formatted value can then be used for labels & tooltips.
-            
+
             Under the hood, nivo uses [d3-format](https://github.com/d3/d3-format),
             please have a look at it for available formats, you can also pass a function
             which will receive the raw value and should return the formatted one.
@@ -481,7 +481,7 @@ const props = [
         description: `
             You can also use this to insert extra layers
             to the chart, the extra layer must be a function.
-            
+
             The layer component which will receive the chart's
             context & computed data and must return a valid SVG element
             for the \`Pie\` component.
@@ -494,9 +494,9 @@ const props = [
             \`context.restore()\` if you make some global
             modifications to the 2d context inside this function
             to avoid side effects.
-            
+
             The context passed to layers has the following structure:
-            
+
             \`\`\`
             {
                 dataWithArc:  DatumWithArc[],
@@ -565,13 +565,13 @@ const props = [
             A function allowing complete tooltip customisation,
             it must return a valid HTML element and will receive
             the following props:
-            
+
             \`\`\`
             {
                 datum: PieComputedDatum
             }
             \`\`\`
-            
+
             You can also customize the style of the tooltip using
             the \`theme.tooltip\` object.
         `,

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

@@ -13,8 +13,12 @@ import { settingsMapper } from '../../../lib/settings'
 
 const TooltipWrapper = styled.div`
     display: grid;
+    background: #fff;
     grid-template-columns: 1fr 1fr;
     grid-column-gap: 12px;
+    font-size: 12px;
+    border-radius: 2px;
+    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.15);
 `
 const TooltipKey = styled.span`
     font-weight: 600;
@@ -39,7 +43,7 @@ const CustomTooltip = node => {
 export default settingsMapper(
     {
         tooltip: (value, values) => {
-            if (!values['custom tooltip example']) return null
+            if (!values['custom tooltip example']) return undefined
 
             return CustomTooltip
         },