feat(sunburst): improve props documentation

plouc · Apr 23, 2021 · d6386d9 · d6386d9
1 parent a6b5b92
commit d6386d9
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 43 deletions.
diff --git a/website/src/data/components/sunburst/mapper.js b/website/src/data/components/sunburst/mapper.js
@@ -1,15 +1,7 @@
-/*
- * This file is part of the nivo project.
- *
- * Copyright 2016-present, Raphaël Benitte.
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
 import React from 'react'
 import styled from 'styled-components'
 import { patternLinesDef } from '@nivo/core'
-import { settingsMapper } from '../../../lib/settings'
+import { mapFormat, settingsMapper } from '../../../lib/settings'
 
 const TooltipWrapper = styled.div`
     display: grid;
@@ -42,6 +34,7 @@ const CustomTooltip = node => {
 
 export default settingsMapper(
     {
+        valueFormat: mapFormat,
         arcLabel: value => {
             if (value === `d => \`\${d.id} (\${d.value})\``) return d => `${d.id} (${d.value})`
             return value

diff --git a/website/src/data/components/sunburst/props.js b/website/src/data/components/sunburst/props.js
@@ -1,6 +1,11 @@
 import { defaultProps } from '@nivo/sunburst'
 import { arcTransitionModes } from '@nivo/arcs'
-import { groupProperties, defsProperties, motionProperties } from '../../../lib/componentProperties'
+import {
+    groupProperties,
+    defsProperties,
+    motionProperties,
+    themeProperty,
+} from '../../../lib/componentProperties'
 
 const props = [
     {
@@ -67,6 +72,36 @@ const props = [
         required: false,
         defaultValue: defaultProps.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.
+        `,
+        required: false,
+        type: 'string | (value: number) => string | number',
+        controlType: 'valueFormat',
+    },
+    {
+        key: 'cornerRadius',
+        help: 'Round node shape.',
+        type: 'number',
+        required: false,
+        defaultValue: defaultProps.cornerRadius,
+        controlType: 'range',
+        group: 'Base',
+        controlOptions: {
+            unit: 'px',
+            min: 0,
+            max: 45,
+            step: 1,
+        },
+    },
     {
         key: 'width',
         enableControlForFlavors: ['api'],
@@ -113,14 +148,15 @@ const props = [
         controlType: 'margin',
         group: 'Base',
     },
+    themeProperty,
     {
         key: 'colors',
         help: 'Defines how to compute node color.',
         required: false,
         defaultValue: defaultProps.colors,
         controlType: 'ordinalColors',
         type: 'string | Function | string[]',
-        group: 'Base',
+        group: 'Style',
     },
     {
         key: 'childColor',
@@ -129,7 +165,7 @@ const props = [
         required: false,
         defaultValue: defaultProps.childColor,
         controlType: 'inheritedColor',
-        group: 'Base',
+        group: 'Style',
     },
     {
         key: 'borderWidth',
@@ -138,7 +174,7 @@ const props = [
         required: false,
         defaultValue: defaultProps.borderWidth,
         controlType: 'lineWidth',
-        group: 'Base',
+        group: 'Style',
     },
     {
         key: 'borderColor',
@@ -147,22 +183,7 @@ const props = [
         required: false,
         defaultValue: defaultProps.borderColor,
         controlType: 'inheritedColor',
-        group: 'Base',
-    },
-    {
-        key: 'cornerRadius',
-        help: 'Round node shape.',
-        type: 'number',
-        required: false,
-        defaultValue: defaultProps.cornerRadius,
-        controlType: 'range',
-        group: 'Base',
-        controlOptions: {
-            unit: 'px',
-            min: 0,
-            max: 45,
-            step: 1,
-        },
+        group: 'Style',
     },
     ...defsProperties('Style', ['svg', 'api']),
     {

diff --git a/website/src/pages/sunburst/api.js b/website/src/pages/sunburst/api.js
@@ -24,26 +24,30 @@ const SunburstApi = () => {
                     width: 600,
                     height: 600,
                     data: JSON.stringify(data, null, '  '),
-
                     margin: {
                         top: 10,
                         right: 10,
                         bottom: 10,
                         left: 10,
                     },
-
-                    identity: 'name',
+                    id: 'name',
                     value: 'loc',
-
+                    valueFormat: { format: '', enabled: false },
                     cornerRadius: 2,
-
                     borderWidth: 1,
                     borderColor: 'white',
-
                     colors: { scheme: 'nivo' },
                     childColor: {
                         from: 'color',
                     },
+                    enableArcLabels: true,
+                    arcLabel: 'formattedValue',
+                    arcLabelsRadiusOffset: 0.5,
+                    arcLabelsSkipAngle: 10,
+                    arcLabelsTextColor: {
+                        from: 'color',
+                        modifiers: [['darker', 1.4]],
+                    },
                 }}
             />
         </>

diff --git a/website/src/pages/sunburst/index.js b/website/src/pages/sunburst/index.js
@@ -20,21 +20,17 @@ const initialProperties = {
         bottom: 10,
         left: 10,
     },
-
     id: 'name',
     value: 'loc',
-
+    valueFormat: { format: '', enabled: false },
     cornerRadius: 2,
-
     borderWidth: 1,
     borderColor: { theme: 'background' },
-
     colors: { scheme: 'nivo' },
     childColor: {
         from: 'color',
         modifiers: [['brighter', 0.1]],
     },
-
     enableArcLabels: true,
     arcLabel: 'formattedValue',
     arcLabelsRadiusOffset: 0.5,
@@ -43,14 +39,11 @@ const initialProperties = {
         from: 'color',
         modifiers: [['darker', 1.4]],
     },
-
     animate: defaultProps.animate,
     motionConfig: defaultProps.motionConfig,
     transitionMode: defaultProps.transitionMode,
-
     defs: [],
     fill: [],
-
     isInteractive: true,
     'custom tooltip example': false,
     tooltip: null,
@@ -66,6 +59,7 @@ const Sunburst = () => {
             flavors={meta.flavors}
             currentFlavor="svg"
             properties={groups}
+            defaultProperties={defaultProps}
             initialProperties={initialProperties}
             propertiesMapper={mapper}
             generateData={generateData}