feat(sunburst): use @nivo/colors for inherited colors

plouc · Apr 17, 2019 · 9cb6b2a · 9cb6b2a
1 parent 4686b2b
commit 9cb6b2a
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 19 deletions.
diff --git a/packages/sunburst/src/Sunburst.js b/packages/sunburst/src/Sunburst.js
@@ -17,15 +17,13 @@ import withProps from 'recompose/withProps'
 import pure from 'recompose/pure'
 import { partition as Partition, hierarchy } from 'd3-hierarchy'
 import { arc } from 'd3-shape'
+import { withTheme, withDimensions, getAccessorFor, Container, SvgWrapper } from '@nivo/core'
 import {
+    getOrdinalColorScale,
+    ordinalColorsPropType,
+    inheritedColorPropType,
     getInheritedColorGenerator,
-    withTheme,
-    withDimensions,
-    getAccessorFor,
-    Container,
-    SvgWrapper,
-} from '@nivo/core'
-import { getOrdinalColorScale, ordinalColorsPropType } from '@nivo/colors'
+} from '@nivo/colors'
 import SunburstArc from './SunburstArc'
 
 const getAncestor = node => {
@@ -99,7 +97,7 @@ Sunburst.propTypes = {
     borderWidth: PropTypes.number.isRequired,
     borderColor: PropTypes.string.isRequired,
 
-    childColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
+    childColor: inheritedColorPropType.isRequired,
 
     isInteractive: PropTypes.bool,
 }
@@ -114,7 +112,7 @@ export const SunburstDefaultProps = {
     borderWidth: 1,
     borderColor: 'white',
 
-    childColor: 'inherit',
+    childColor: { from: 'color' },
 
     isInteractive: true,
 }
@@ -150,8 +148,8 @@ const enhance = compose(
     withPropsOnChange(['data', 'getValue'], ({ data, getValue }) => ({
         data: hierarchy(data).sum(getValue),
     })),
-    withPropsOnChange(['childColor'], ({ childColor }) => ({
-        getChildColor: getInheritedColorGenerator(childColor),
+    withPropsOnChange(['childColor', 'theme'], ({ childColor, theme }) => ({
+        getChildColor: getInheritedColorGenerator(childColor, theme),
     })),
     withPropsOnChange(
         ['data', 'partition', 'getIdentity', 'getChildColor'],

diff --git a/website/src/data/components/sunburst/mapper.js b/website/src/data/components/sunburst/mapper.js
@@ -6,8 +6,6 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  */
-import { settingsMapper, mapInheritedColor } from '../../../lib/settings'
+import { settingsMapper } from '../../../lib/settings'
 
-export default settingsMapper({
-    childColor: mapInheritedColor,
-})
+export default settingsMapper({})
diff --git a/website/src/data/components/sunburst/props.js b/website/src/data/components/sunburst/props.js
@@ -104,10 +104,10 @@ const props = [
     {
         key: 'childColor',
         help: 'Defines how to compute child nodes color.',
-        type: 'string | Function',
+        type: 'string | object | Function',
         required: false,
         defaultValue: defaults.childColor,
-        controlType: 'color',
+        controlType: 'inheritedColor',
         group: 'Base',
     },
     {

diff --git a/website/src/pages/sunburst/api.js b/website/src/pages/sunburst/api.js
@@ -49,7 +49,7 @@ const SunburstApi = () => {
                     borderColor: 'white',
 
                     childColor: {
-                        type: 'inherit',
+                        from: 'color',
                     },
                 }}
             />

diff --git a/website/src/pages/sunburst/index.js b/website/src/pages/sunburst/index.js
@@ -32,7 +32,7 @@ const initialProperties = {
 
     colors: { scheme: 'nivo' },
     childColor: {
-        type: 'inherit',
+        from: 'color',
     },
 
     animate: true,