From 32e61b16db29926314b541125205de06bf0f26aa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rapha=C3=ABl=20Benitte?= Date: Thu, 11 Apr 2019 08:57:30 +0900 Subject: [PATCH] feat(colors): add colorIdentity support to bar & bubble --- packages/bar/src/enhance.js | 4 +-- packages/bar/src/props.js | 4 ++- packages/circle-packing/src/enhance.js | 4 +-- packages/circle-packing/src/props.js | 4 +-- packages/colors/index.d.ts | 4 ++- packages/colors/package.json | 2 +- .../src/components/guides/axes/AxesTicks.js | 24 +++++++------- website/src/data/components/bar/props.js | 31 ++++++++++++++++++- website/src/data/components/bubble/props.js | 29 +++++++++++++++++ website/src/pages/bar/api.js | 1 + website/src/pages/bar/canvas.js | 1 + website/src/pages/bar/index.js | 1 + website/src/pages/bubble/canvas.js | 9 +++--- website/src/pages/bubble/html.js | 1 + website/src/pages/bubble/index.js | 1 + 15 files changed, 94 insertions(+), 26 deletions(-) diff --git a/packages/bar/src/enhance.js b/packages/bar/src/enhance.js index facc8aa5d..6b0289e4d 100644 --- a/packages/bar/src/enhance.js +++ b/packages/bar/src/enhance.js @@ -27,8 +27,8 @@ export default Component => withTheme(), withDimensions(), withMotion(), - withPropsOnChange(['colors'], ({ colors }) => ({ - getColor: getOrdinalColorScale(colors, 'id'), + withPropsOnChange(['colors', 'colorIdentity'], ({ colors, colorIdentity }) => ({ + getColor: getOrdinalColorScale(colors, colorIdentity), })), withPropsOnChange(['indexBy'], ({ indexBy }) => ({ getIndex: getAccessorFor(indexBy), diff --git a/packages/bar/src/props.js b/packages/bar/src/props.js index e02770332..8759fb561 100644 --- a/packages/bar/src/props.js +++ b/packages/bar/src/props.js @@ -8,7 +8,7 @@ */ import PropTypes from 'prop-types' import { noop, defsPropTypes } from '@nivo/core' -import { ordinalColorsPropType } from '@nivo/colors' +import { ordinalColorsPropType, colorIdentityPropType } from '@nivo/colors' import { axisPropType } from '@nivo/axes' import { LegendPropShape } from '@nivo/legends' import BarItem from './BarItem' @@ -57,6 +57,7 @@ export const BarPropTypes = { getLabelLinkColor: PropTypes.func.isRequired, // computed colors: ordinalColorsPropType.isRequired, + colorIdentity: colorIdentityPropType.isRequired, borderRadius: PropTypes.number.isRequired, getColor: PropTypes.func.isRequired, // computed ...defsPropTypes, @@ -113,6 +114,7 @@ export const BarDefaultProps = { labelTextColor: 'theme', colors: { scheme: 'nivo' }, + colorIdentity: 'id', defs: [], fill: [], borderRadius: 0, diff --git a/packages/circle-packing/src/enhance.js b/packages/circle-packing/src/enhance.js index 2f3092895..a1828e2b8 100644 --- a/packages/circle-packing/src/enhance.js +++ b/packages/circle-packing/src/enhance.js @@ -30,8 +30,8 @@ const commonEnhancers = [ withHierarchy(), withDimensions(), withTheme(), - withPropsOnChange(['colors', 'colorBy'], ({ colors, colorBy }) => ({ - getColor: getOrdinalColorScale(colors, colorBy), + withPropsOnChange(['colors', 'colorIdentity'], ({ colors, colorIdentity }) => ({ + getColor: getOrdinalColorScale(colors, colorIdentity), })), withPropsOnChange(['width', 'height', 'padding'], ({ width, height, padding }) => ({ pack: pack() diff --git a/packages/circle-packing/src/props.js b/packages/circle-packing/src/props.js index 90e6e1da8..342f43711 100644 --- a/packages/circle-packing/src/props.js +++ b/packages/circle-packing/src/props.js @@ -21,7 +21,7 @@ const commonPropTypes = { // theme managed by `withTheme()` HOC colors: ordinalColorsPropType.isRequired, - colorBy: colorIdentityPropType.isRequired, + colorIdentity: colorIdentityPropType.isRequired, leavesOnly: PropTypes.bool.isRequired, padding: PropTypes.number.isRequired, @@ -65,7 +65,7 @@ const commonDefaultProps = { padding: 1, colors: { scheme: 'nivo' }, - colorBy: 'depth', + colorIdentity: 'depth', borderWidth: 0, borderColor: 'inherit', diff --git a/packages/colors/index.d.ts b/packages/colors/index.d.ts index 0da4f4055..a25921dc6 100644 --- a/packages/colors/index.d.ts +++ b/packages/colors/index.d.ts @@ -77,8 +77,10 @@ declare module '@nivo/colors' { export type OrdinalColorScale = (datum: D) => string + export type ColorIdentityFunction = (datum: D) => string | number + export function getOrdinalColorScale( instruction: OrdinalColorsInstruction, - identity: string + identity: string | ColorIdentityFunction ): OrdinalColorScale } diff --git a/packages/colors/package.json b/packages/colors/package.json index bfd46e6ba..27ab8f9a6 100644 --- a/packages/colors/package.json +++ b/packages/colors/package.json @@ -19,7 +19,7 @@ "d3-scale": "^3.0.0", "d3-scale-chromatic": "^1.3.3", "lodash.get": "^4.4.2", - "lodash.isplainobject": "^4.6.0", + "lodash.isplainobject": "^4.0.6", "react-motion": "^0.5.2" }, "peerDependencies": { diff --git a/website/src/components/guides/axes/AxesTicks.js b/website/src/components/guides/axes/AxesTicks.js index b0034bcc4..ee6c5982c 100644 --- a/website/src/components/guides/axes/AxesTicks.js +++ b/website/src/components/guides/axes/AxesTicks.js @@ -59,8 +59,8 @@ const AxesTicks = () => { className="guide__illustrations" style={{ justifyContent: 'center', alignItems: 'center' }} > - - + + { motionDamping={0} legend="point scale ['A', 'C', 'E', 'G', 'I']" legendPosition="start" - legendOffset={-32} + legendOffset={-38} ticksPosition="before" /> - + { motionDamping={0} legend="linear scale [0, 20, 40, 60, 80]" legendPosition="start" - legendOffset={-32} + legendOffset={-38} ticksPosition="before" /> - + { motionDamping={0} legend="time scale with tree dates" legendPosition="start" - legendOffset={-32} + legendOffset={-38} ticksPosition="before" /> - - + + { motionDamping={0} legend="linear scale, tickValues: 5" legendPosition="start" - legendOffset={-32} + legendOffset={-38} ticksPosition="before" /> - + { motionDamping={0} legend="time scale, tickValues: 5" legendPosition="start" - legendOffset={-32} + legendOffset={-38} ticksPosition="before" /> diff --git a/website/src/data/components/bar/props.js b/website/src/data/components/bar/props.js index 311be6994..31d69fc8b 100644 --- a/website/src/data/components/bar/props.js +++ b/website/src/data/components/bar/props.js @@ -251,10 +251,39 @@ const props = [ help: 'Defines color range.', type: 'string | Function | string[]', required: false, - defaultValue: { scheme: 'nivo' }, + defaultValue: defaults.colors, controlType: 'ordinalColors', group: 'Style', }, + { + key: 'colorIdentity', + scopes: '*', + type: 'string | Function', + help: 'Property used to determine node color.', + description: ` + Property to use to determine node color. + If a function is provided, it will receive + the current node data and must return + a string or number which will be passed + to the color generator. + `, + required: false, + defaultValue: defaults.colorIdentity, + controlType: 'choices', + group: 'Style', + controlOptions: { + choices: [ + { + label: 'id', + value: 'id', + }, + { + label: 'index', + value: 'index', + }, + ], + }, + }, { key: 'borderRadius', scopes: ['Bar', 'api'], diff --git a/website/src/data/components/bubble/props.js b/website/src/data/components/bubble/props.js index a10e7c385..6eb267787 100644 --- a/website/src/data/components/bubble/props.js +++ b/website/src/data/components/bubble/props.js @@ -157,6 +157,35 @@ const props = [ controlType: 'ordinalColors', group: 'Style', }, + { + key: 'colorIdentity', + scopes: ['Bubble', 'BubbleHtml', 'BubbleCanvas'], + type: 'string | Function', + help: 'Property used to determine node color.', + description: ` + Property to use to determine node color. + If a function is provided, it will receive + the current node data and must return + a string or number which will be passed + to the color generator. + `, + required: false, + defaultValue: defaults.colorIdentity, + controlType: 'choices', + group: 'Style', + controlOptions: { + choices: [ + { + label: 'depth', + value: 'depth', + }, + { + label: 'name', + value: 'name', + }, + ], + }, + }, { key: 'borderWidth', scopes: '*', diff --git a/website/src/pages/bar/api.js b/website/src/pages/bar/api.js index 1c394da3b..66f0c19ca 100644 --- a/website/src/pages/bar/api.js +++ b/website/src/pages/bar/api.js @@ -42,6 +42,7 @@ const BarApi = () => { indexBy: 'country', colors: { scheme: 'nivo' }, + colorIdentity: 'id', borderRadius: 0, borderWidth: 0, borderColor: { diff --git a/website/src/pages/bar/canvas.js b/website/src/pages/bar/canvas.js index 6c8f0d1a7..abbf908f5 100644 --- a/website/src/pages/bar/canvas.js +++ b/website/src/pages/bar/canvas.js @@ -41,6 +41,7 @@ const initialProperties = { reverse: false, colors: { scheme: 'red_blue' }, + colorIdentity: 'id', borderWidth: 0, borderColor: { type: 'inherit:darker', diff --git a/website/src/pages/bar/index.js b/website/src/pages/bar/index.js index 919ff24a7..1beac888f 100644 --- a/website/src/pages/bar/index.js +++ b/website/src/pages/bar/index.js @@ -39,6 +39,7 @@ const initialProperties = { reverse: false, colors: { scheme: 'nivo' }, + colorIdentity: 'id', defs: [ patternDotsDef('dots', { background: 'inherit', diff --git a/website/src/pages/bubble/canvas.js b/website/src/pages/bubble/canvas.js index 85a9a5df2..428b8260a 100644 --- a/website/src/pages/bubble/canvas.js +++ b/website/src/pages/bubble/canvas.js @@ -19,9 +19,9 @@ const NODE_COUNT = 2000 const generateData = () => { return { - id: 'root', + name: 'root', children: range(NODE_COUNT).map(i => ({ - id: `node.${i}`, + name: `node.${i}`, value: random(10, 100000), })), } @@ -38,10 +38,11 @@ const initialProperties = { pixelRatio: typeof window !== 'undefined' && window.devicePixelRatio ? window.devicePixelRatio : 1, - identity: 'id', + identity: 'name', value: 'value', - colors: { scheme: 'set3' }, + colors: { scheme: 'yellow_orange_red' }, + colorIdentity: 'name', padding: 1, leavesOnly: true, diff --git a/website/src/pages/bubble/html.js b/website/src/pages/bubble/html.js index 9c9ffd6a2..86ec06852 100644 --- a/website/src/pages/bubble/html.js +++ b/website/src/pages/bubble/html.js @@ -24,6 +24,7 @@ const initialProperties = { identity: 'name', value: 'loc', colors: { scheme: 'paired' }, + colorIdentity: 'depth', padding: 1, leavesOnly: false, diff --git a/website/src/pages/bubble/index.js b/website/src/pages/bubble/index.js index 98a6a6253..0aa9fbc46 100644 --- a/website/src/pages/bubble/index.js +++ b/website/src/pages/bubble/index.js @@ -25,6 +25,7 @@ const initialProperties = { identity: 'name', value: 'loc', colors: { scheme: 'nivo' }, + colorIdentity: 'depth', padding: 6, leavesOnly: false,