From f967380e2900d893f5174c5070743a9b4dffa9ec Mon Sep 17 00:00:00 2001 From: plouc Date: Sun, 28 Jun 2020 18:50:44 +0900 Subject: [PATCH] feat(website): add theme property documentation to all components --- .../src/data/components/area-bump/props.js | 2 ++ website/src/data/components/bar/props.js | 2 ++ website/src/data/components/bubble/props.js | 8 ++++++- website/src/data/components/bullet/props.js | 3 ++- website/src/data/components/bump/props.js | 8 ++++++- website/src/data/components/calendar/props.js | 8 +++---- website/src/data/components/chord/props.js | 3 ++- .../src/data/components/choropleth/props.js | 2 +- website/src/data/components/funnel/props.js | 3 ++- website/src/data/components/geo/props.js | 3 ++- website/src/data/components/heatmap/props.js | 8 ++++++- website/src/data/components/line/props.js | 3 ++- .../components/parallel-coordinates/props.js | 3 ++- website/src/data/components/pie/props.js | 3 ++- website/src/data/components/radar/props.js | 3 ++- website/src/data/components/sankey/props.js | 21 ++++++++++--------- .../src/data/components/scatterplot/props.js | 2 ++ website/src/data/components/stream/props.js | 2 ++ .../src/data/components/swarmplot/props.js | 9 ++++++-- website/src/data/components/waffle/props.js | 2 ++ website/src/lib/componentProperties.js | 15 +++++++++++-- 21 files changed, 83 insertions(+), 30 deletions(-) diff --git a/website/src/data/components/area-bump/props.js b/website/src/data/components/area-bump/props.js index c2e418b1af..2423c8e3c4 100644 --- a/website/src/data/components/area-bump/props.js +++ b/website/src/data/components/area-bump/props.js @@ -8,6 +8,7 @@ */ import { AreaBumpDefaultProps as defaults } from '@nivo/bump' import { + themeProperty, axesProperties, defsProperties, groupProperties, @@ -137,6 +138,7 @@ const props = [ step: 0.05, }, }, + themeProperty, { key: 'colors', group: 'Style', diff --git a/website/src/data/components/bar/props.js b/website/src/data/components/bar/props.js index ebf7ddc338..9a7a55b45e 100644 --- a/website/src/data/components/bar/props.js +++ b/website/src/data/components/bar/props.js @@ -8,6 +8,7 @@ */ import { BarDefaultProps as defaults } from '@nivo/bar' import { + themeProperty, axesProperties, motionProperties, defsProperties, @@ -214,6 +215,7 @@ const props = [ controlType: 'margin', group: 'Base', }, + themeProperty, { key: 'colors', help: 'Defines color range.', diff --git a/website/src/data/components/bubble/props.js b/website/src/data/components/bubble/props.js index 97aee27c1c..add14dc7ae 100644 --- a/website/src/data/components/bubble/props.js +++ b/website/src/data/components/bubble/props.js @@ -7,7 +7,12 @@ * file that was distributed with this source code. */ import { BubbleDefaultProps as defaults } from '@nivo/circle-packing' -import { motionProperties, defsProperties, groupProperties } from '../../../lib/componentProperties' +import { + themeProperty, + motionProperties, + defsProperties, + groupProperties, +} from '../../../lib/componentProperties' const props = [ { @@ -133,6 +138,7 @@ const props = [ max: 32, }, }, + themeProperty, { key: 'colors', help: 'Defines how to compute node color.', diff --git a/website/src/data/components/bullet/props.js b/website/src/data/components/bullet/props.js index 81b51f7190..63b82c4e2a 100644 --- a/website/src/data/components/bullet/props.js +++ b/website/src/data/components/bullet/props.js @@ -7,7 +7,7 @@ * file that was distributed with this source code. */ import { BulletDefaultProps as defaults } from '@nivo/bullet' -import { motionProperties, groupProperties } from '../../../lib/componentProperties' +import { themeProperty, motionProperties, groupProperties } from '../../../lib/componentProperties' const props = [ { @@ -146,6 +146,7 @@ const props = [ step: 0.05, }, }, + themeProperty, { key: 'rangeComponent', flavors: ['svg'], diff --git a/website/src/data/components/bump/props.js b/website/src/data/components/bump/props.js index d31bc80d07..72f0dfd422 100644 --- a/website/src/data/components/bump/props.js +++ b/website/src/data/components/bump/props.js @@ -7,7 +7,12 @@ * file that was distributed with this source code. */ import { BumpDefaultProps as defaults } from '@nivo/bump' -import { motionProperties, axesProperties, groupProperties } from '../../../lib/componentProperties' +import { + themeProperty, + motionProperties, + axesProperties, + groupProperties, +} from '../../../lib/componentProperties' const props = [ { @@ -134,6 +139,7 @@ const props = [ step: 0.05, }, }, + themeProperty, { key: 'colors', help: 'Defines color range.', diff --git a/website/src/data/components/calendar/props.js b/website/src/data/components/calendar/props.js index 6281681e42..8af28b1fa6 100644 --- a/website/src/data/components/calendar/props.js +++ b/website/src/data/components/calendar/props.js @@ -8,7 +8,7 @@ */ import { boxAlignments } from '@nivo/core' import { CalendarDefaultProps as defaults } from '@nivo/calendar' -import { groupProperties } from '../../../lib/componentProperties' +import { themeProperty, groupProperties } from '../../../lib/componentProperties' const props = [ { @@ -161,10 +161,10 @@ const props = [ max: 600, }, }, + themeProperty, { key: 'colors', - help: 'Chart colors.', - group: 'Base', + group: 'Style', help: 'Cell colors.', description: ` An array of colors to be used in conjunction with @@ -183,7 +183,7 @@ const props = [ required: false, defaultValue: defaults.emptyColor, controlType: 'colorPicker', - group: 'Base', + group: 'Style', }, { key: 'pixelRatio', diff --git a/website/src/data/components/chord/props.js b/website/src/data/components/chord/props.js index 57fc2d2a81..7ee3badc74 100644 --- a/website/src/data/components/chord/props.js +++ b/website/src/data/components/chord/props.js @@ -8,6 +8,7 @@ */ import { ChordDefaultProps as defaults } from '@nivo/chord' import { + themeProperty, motionProperties, groupProperties, getLegendsProps, @@ -166,6 +167,7 @@ const props = [ step: 0.01, }, }, + themeProperty, { key: 'colors', help: 'Defines how to compute arc/ribbon color.', @@ -284,7 +286,6 @@ const props = [ }, { key: 'labelTextColor', - help: 'Labels color.', description: ` How to compute label text color, [see dedicated documentation](self:/guides/colors). diff --git a/website/src/data/components/choropleth/props.js b/website/src/data/components/choropleth/props.js index ae70530d33..20cdc31ee4 100644 --- a/website/src/data/components/choropleth/props.js +++ b/website/src/data/components/choropleth/props.js @@ -7,7 +7,7 @@ * file that was distributed with this source code. */ import { GeoMapDefaultProps, ChoroplethDefaultProps } from '@nivo/geo' -import { getLegendsProps, groupProperties } from '../../../lib/componentProperties' +import { themeProperty, getLegendsProps, groupProperties } from '../../../lib/componentProperties' import { props as geoProps } from '../geo/props' const props = [ diff --git a/website/src/data/components/funnel/props.js b/website/src/data/components/funnel/props.js index e51ddfae42..af3105a7d1 100644 --- a/website/src/data/components/funnel/props.js +++ b/website/src/data/components/funnel/props.js @@ -7,7 +7,7 @@ * file that was distributed with this source code. */ import { FunnelDefaultProps as defaults } from '@nivo/funnel' -import { groupProperties, motionProperties } from '../../../lib/componentProperties' +import { themeProperty, groupProperties, motionProperties } from '../../../lib/componentProperties' const props = [ { @@ -103,6 +103,7 @@ const props = [ controlType: 'valueFormat', group: 'Base', }, + themeProperty, { key: 'colors', help: 'Defines how to compute parts color.', diff --git a/website/src/data/components/geo/props.js b/website/src/data/components/geo/props.js index ad7e5dc9d0..a8960a6ae8 100644 --- a/website/src/data/components/geo/props.js +++ b/website/src/data/components/geo/props.js @@ -7,7 +7,7 @@ * file that was distributed with this source code. */ import { GeoMapDefaultProps } from '@nivo/geo' -import { defsProperties } from '../../../lib/componentProperties' +import { themeProperty, defsProperties } from '../../../lib/componentProperties' export const props = [ { @@ -145,6 +145,7 @@ export const props = [ ], }, }, + themeProperty, { key: 'borderWidth', help: 'Control border width.', diff --git a/website/src/data/components/heatmap/props.js b/website/src/data/components/heatmap/props.js index 6c917709de..2e2220037d 100644 --- a/website/src/data/components/heatmap/props.js +++ b/website/src/data/components/heatmap/props.js @@ -7,7 +7,12 @@ * file that was distributed with this source code. */ import { HeatMapDefaultProps as defaults } from '@nivo/heatmap' -import { axesProperties, motionProperties, groupProperties } from '../../../lib/componentProperties' +import { + themeProperty, + axesProperties, + motionProperties, + groupProperties, +} from '../../../lib/componentProperties' const props = [ { @@ -181,6 +186,7 @@ const props = [ controlType: 'margin', group: 'Base', }, + themeProperty, { key: 'cellShape', help: `Cell shape/component.`, diff --git a/website/src/data/components/line/props.js b/website/src/data/components/line/props.js index 885d5521ab..f1457f7f89 100644 --- a/website/src/data/components/line/props.js +++ b/website/src/data/components/line/props.js @@ -9,6 +9,7 @@ import { lineCurvePropKeys, DotsItemDefaultProps as dotDefaults } from '@nivo/core' import { LineDefaultProps as defaults } from '@nivo/line' import { + themeProperty, axesProperties, motionProperties, getLegendsProps, @@ -209,6 +210,7 @@ const props = [ })), }, }, + themeProperty, { key: 'colors', help: 'Defines color range.', @@ -362,7 +364,6 @@ const props = [ required: false, defaultValue: defaults.enablePointLabel, controlType: 'switch', - group: 'Points', }, { key: 'pointLabel', diff --git a/website/src/data/components/parallel-coordinates/props.js b/website/src/data/components/parallel-coordinates/props.js index e9f5c30003..c0f27da8bc 100644 --- a/website/src/data/components/parallel-coordinates/props.js +++ b/website/src/data/components/parallel-coordinates/props.js @@ -8,7 +8,7 @@ */ import { lineCurvePropKeys } from '@nivo/core' import { commonDefaultProps as defaults } from '@nivo/parallel-coordinates' -import { motionProperties, groupProperties } from '../../../lib/componentProperties' +import { themeProperty, motionProperties, groupProperties } from '../../../lib/componentProperties' const props = [ { @@ -218,6 +218,7 @@ const props = [ controlType: 'margin', group: 'Base', }, + themeProperty, { key: 'colors', help: 'Defines color range.', diff --git a/website/src/data/components/pie/props.js b/website/src/data/components/pie/props.js index 5da1cfeaf1..1d46350434 100644 --- a/website/src/data/components/pie/props.js +++ b/website/src/data/components/pie/props.js @@ -7,7 +7,7 @@ * file that was distributed with this source code. */ import { PieDefaultProps as defaults } from '@nivo/pie' -import { defsProperties, groupProperties } from '../../../lib/componentProperties' +import { themeProperty, defsProperties, groupProperties } from '../../../lib/componentProperties' const props = [ { @@ -178,6 +178,7 @@ const props = [ controlType: 'margin', group: 'Base', }, + themeProperty, { key: 'colors', help: 'Defines color range.', diff --git a/website/src/data/components/radar/props.js b/website/src/data/components/radar/props.js index 16ee9e0510..0c4fea48b6 100644 --- a/website/src/data/components/radar/props.js +++ b/website/src/data/components/radar/props.js @@ -8,7 +8,7 @@ */ import { closedCurvePropKeys, DotsItemDefaultProps as dotDefaults } from '@nivo/core' import { RadarDefaultProps as defaults, RadarDots } from '@nivo/radar' -import { motionProperties, groupProperties } from '../../../lib/componentProperties' +import { themeProperty, motionProperties, groupProperties } from '../../../lib/componentProperties' const dotsDefaults = RadarDots.defaultProps @@ -149,6 +149,7 @@ const props = [ controlType: 'margin', group: 'Base', }, + themeProperty, { key: 'colors', help: 'Defines how to compute slice color.', diff --git a/website/src/data/components/sankey/props.js b/website/src/data/components/sankey/props.js index a981a7a42d..06d51093b1 100644 --- a/website/src/data/components/sankey/props.js +++ b/website/src/data/components/sankey/props.js @@ -7,7 +7,7 @@ * file that was distributed with this source code. */ import { SankeyDefaultProps as defaults, sankeyAlignmentPropKeys } from '@nivo/sankey' -import { motionProperties, groupProperties } from '../../../lib/componentProperties' +import { themeProperty, motionProperties, groupProperties } from '../../../lib/componentProperties' const props = [ { @@ -97,15 +97,6 @@ const props = [ })), }, }, - { - key: 'colors', - help: 'Defines how to compute nodes color.', - type: 'string | Function | string[]', - required: false, - defaultValue: defaults.colors, - controlType: 'ordinalColors', - group: 'Base', - }, { key: 'width', enableControlForFlavors: ['api'], @@ -152,6 +143,16 @@ const props = [ controlType: 'margin', group: 'Base', }, + themeProperty, + { + key: 'colors', + help: 'Defines how to compute nodes color.', + type: 'string | Function | string[]', + required: false, + defaultValue: defaults.colors, + controlType: 'ordinalColors', + group: 'Style', + }, { key: 'nodeThickness', help: 'Node thickness.', diff --git a/website/src/data/components/scatterplot/props.js b/website/src/data/components/scatterplot/props.js index 4fa723220f..18f8575be5 100644 --- a/website/src/data/components/scatterplot/props.js +++ b/website/src/data/components/scatterplot/props.js @@ -8,6 +8,7 @@ */ import { ScatterPlotDefaultProps as defaults } from '@nivo/scatterplot' import { + themeProperty, axesProperties, motionProperties, getLegendsProps, @@ -268,6 +269,7 @@ const props = [ controlType: 'margin', group: 'Base', }, + themeProperty, { key: 'colors', group: 'Style', diff --git a/website/src/data/components/stream/props.js b/website/src/data/components/stream/props.js index a182fd1e43..085815e99d 100644 --- a/website/src/data/components/stream/props.js +++ b/website/src/data/components/stream/props.js @@ -9,6 +9,7 @@ import { areaCurvePropKeys, stackOrderPropKeys, stackOffsetPropKeys } from '@nivo/core' import { StreamDefaultProps as defaults } from '@nivo/stream' import { + themeProperty, axesProperties, motionProperties, defsProperties, @@ -109,6 +110,7 @@ const props = [ controlType: 'margin', group: 'Base', }, + themeProperty, { key: 'colors', help: 'Defines how to compute line color.', diff --git a/website/src/data/components/swarmplot/props.js b/website/src/data/components/swarmplot/props.js index a6ab42c308..115e0f1439 100644 --- a/website/src/data/components/swarmplot/props.js +++ b/website/src/data/components/swarmplot/props.js @@ -7,7 +7,12 @@ * file that was distributed with this source code. */ import { SwarmPlotDefaultProps } from '@nivo/swarmplot' -import { motionProperties, axesProperties, groupProperties } from '../../../lib/componentProperties' +import { + themeProperty, + motionProperties, + axesProperties, + groupProperties, +} from '../../../lib/componentProperties' const defaults = SwarmPlotDefaultProps @@ -245,6 +250,7 @@ const props = [ max: 100, }, }, + themeProperty, { key: 'colors', help: 'Defines how to compute node color.', @@ -302,7 +308,6 @@ const props = [ required: false, defaultValue: defaults.colorBy, controlType: 'choices', - group: 'Style', controlOptions: { choices: ['group', 'id'].map(key => ({ label: key, diff --git a/website/src/data/components/waffle/props.js b/website/src/data/components/waffle/props.js index 13ee8094ab..89d96df6c4 100644 --- a/website/src/data/components/waffle/props.js +++ b/website/src/data/components/waffle/props.js @@ -8,6 +8,7 @@ */ import { WaffleDefaultProps } from '@nivo/waffle' import { + themeProperty, motionProperties, defsProperties, getLegendsProps, @@ -159,6 +160,7 @@ const props = [ controlType: 'margin', group: 'Base', }, + themeProperty, { key: 'cellComponent', flavors: ['svg', 'html'], diff --git a/website/src/lib/componentProperties.js b/website/src/lib/componentProperties.js index 6db0680a02..7c3d9f13b6 100644 --- a/website/src/lib/componentProperties.js +++ b/website/src/lib/componentProperties.js @@ -10,12 +10,23 @@ import upperFirst from 'lodash/upperFirst' import uniq from 'lodash/uniq' import { defaultAnimate, defaultMotionStiffness, defaultMotionDamping } from '@nivo/core' +export const themeProperty = { + key: 'theme', + group: 'Style', + help: 'Define style for common elements such as labels, axes…', + description: ` + Please have a look at [the dedicated guide](self:/guides/theming) + on how to define a theme for your charts. + `, + required: false, +} + export const defsProperties = (group, flavors) => [ { key: 'defs', group, flavors, - help: 'Defines patterns and gradients.', + help: 'Define patterns and gradients.', description: ` Supports [gradients](self:/guides/gradients/) and @@ -28,7 +39,7 @@ export const defsProperties = (group, flavors) => [ key: 'fill', group, flavors, - help: 'Defines rules to apply patterns and gradients', + help: 'Define rules to apply patterns and gradients', description: ` Supports [gradients](self:/guides/gradients/) and