From d6386d9bb97dae15c62535c3edc28aedaf6732a9 Mon Sep 17 00:00:00 2001 From: plouc Date: Mon, 28 Dec 2020 10:45:40 +0900 Subject: [PATCH] feat(sunburst): improve props documentation --- .../src/data/components/sunburst/mapper.js | 11 +--- website/src/data/components/sunburst/props.js | 61 +++++++++++++------ website/src/pages/sunburst/api.js | 16 +++-- website/src/pages/sunburst/index.js | 10 +-- 4 files changed, 55 insertions(+), 43 deletions(-) diff --git a/website/src/data/components/sunburst/mapper.js b/website/src/data/components/sunburst/mapper.js index e9958b8cf..a99ffc5b9 100644 --- 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 index 2b6102495..f95f74499 100644 --- 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,6 +148,7 @@ const props = [ controlType: 'margin', group: 'Base', }, + themeProperty, { key: 'colors', help: 'Defines how to compute node color.', @@ -120,7 +156,7 @@ const props = [ 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 index c7e096767..84445ba89 100644 --- 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 index df132804f..a60be3099 100644 --- 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}