Skip to content

Commit

Permalink
feat(colors): add colorIdentity support to bar & bubble
Browse files Browse the repository at this point in the history
  • Loading branch information
Raphaël Benitte authored and Raphaël Benitte committed Apr 17, 2019
1 parent 0b56414 commit 32e61b1
Show file tree
Hide file tree
Showing 15 changed files with 94 additions and 26 deletions.
4 changes: 2 additions & 2 deletions packages/bar/src/enhance.js
View file
Expand Up @@ -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),
Expand Down
4 changes: 3 additions & 1 deletion packages/bar/src/props.js
View file
Expand Up @@ -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'
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -113,6 +114,7 @@ export const BarDefaultProps = {
labelTextColor: 'theme',

colors: { scheme: 'nivo' },
colorIdentity: 'id',
defs: [],
fill: [],
borderRadius: 0,
Expand Down
4 changes: 2 additions & 2 deletions packages/circle-packing/src/enhance.js
View file
Expand Up @@ -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()
Expand Down
4 changes: 2 additions & 2 deletions packages/circle-packing/src/props.js
View file
Expand Up @@ -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,
Expand Down Expand Up @@ -65,7 +65,7 @@ const commonDefaultProps = {
padding: 1,

colors: { scheme: 'nivo' },
colorBy: 'depth',
colorIdentity: 'depth',
borderWidth: 0,
borderColor: 'inherit',

Expand Down
4 changes: 3 additions & 1 deletion packages/colors/index.d.ts
View file
Expand Up @@ -77,8 +77,10 @@ declare module '@nivo/colors' {

export type OrdinalColorScale<D = any> = (datum: D) => string

export type ColorIdentityFunction<D = any> = (datum: D) => string | number

export function getOrdinalColorScale<D = any>(
instruction: OrdinalColorsInstruction,
identity: string
identity: string | ColorIdentityFunction<D>
): OrdinalColorScale<D>
}
2 changes: 1 addition & 1 deletion packages/colors/package.json
View file
Expand Up @@ -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": {
Expand Down
24 changes: 12 additions & 12 deletions website/src/components/guides/axes/AxesTicks.js
View file
Expand Up @@ -59,8 +59,8 @@ const AxesTicks = () => {
className="guide__illustrations"
style={{ justifyContent: 'center', alignItems: 'center' }}
>
<svg role="img" width={380} height={180}>
<g transform={`translate(50,40)`}>
<svg role="img" width={380} height={191}>
<g transform={`translate(50,50)`}>
<Axis
axis="x"
scale={pointXScale}
Expand All @@ -72,11 +72,11 @@ const AxesTicks = () => {
motionDamping={0}
legend="point scale ['A', 'C', 'E', 'G', 'I']"
legendPosition="start"
legendOffset={-32}
legendOffset={-38}
ticksPosition="before"
/>
</g>
<g transform={`translate(50,110)`}>
<g transform={`translate(50,120)`}>
<Axis
axis="x"
scale={linearXScale}
Expand All @@ -88,11 +88,11 @@ const AxesTicks = () => {
motionDamping={0}
legend="linear scale [0, 20, 40, 60, 80]"
legendPosition="start"
legendOffset={-32}
legendOffset={-38}
ticksPosition="before"
/>
</g>
<g transform={`translate(50,180)`}>
<g transform={`translate(50,190)`}>
<Axis
axis="x"
scale={timeXScale}
Expand All @@ -109,13 +109,13 @@ const AxesTicks = () => {
motionDamping={0}
legend="time scale with tree dates"
legendPosition="start"
legendOffset={-32}
legendOffset={-38}
ticksPosition="before"
/>
</g>
</svg>
<svg role="img" width={380} height={180}>
<g transform={`translate(50,110)`}>
<svg role="img" width={380} height={191}>
<g transform={`translate(50,120)`}>
<Axis
axis="x"
scale={linearXScale}
Expand All @@ -127,11 +127,11 @@ const AxesTicks = () => {
motionDamping={0}
legend="linear scale, tickValues: 5"
legendPosition="start"
legendOffset={-32}
legendOffset={-38}
ticksPosition="before"
/>
</g>
<g transform={`translate(50,180)`}>
<g transform={`translate(50,190)`}>
<Axis
axis="x"
scale={timeXScale}
Expand All @@ -144,7 +144,7 @@ const AxesTicks = () => {
motionDamping={0}
legend="time scale, tickValues: 5"
legendPosition="start"
legendOffset={-32}
legendOffset={-38}
ticksPosition="before"
/>
</g>
Expand Down
31 changes: 30 additions & 1 deletion website/src/data/components/bar/props.js
View file
Expand Up @@ -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'],
Expand Down
29 changes: 29 additions & 0 deletions website/src/data/components/bubble/props.js
View file
Expand Up @@ -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: '*',
Expand Down
1 change: 1 addition & 0 deletions website/src/pages/bar/api.js
View file
Expand Up @@ -42,6 +42,7 @@ const BarApi = () => {
indexBy: 'country',

colors: { scheme: 'nivo' },
colorIdentity: 'id',
borderRadius: 0,
borderWidth: 0,
borderColor: {
Expand Down
1 change: 1 addition & 0 deletions website/src/pages/bar/canvas.js
View file
Expand Up @@ -41,6 +41,7 @@ const initialProperties = {
reverse: false,

colors: { scheme: 'red_blue' },
colorIdentity: 'id',
borderWidth: 0,
borderColor: {
type: 'inherit:darker',
Expand Down
1 change: 1 addition & 0 deletions website/src/pages/bar/index.js
View file
Expand Up @@ -39,6 +39,7 @@ const initialProperties = {
reverse: false,

colors: { scheme: 'nivo' },
colorIdentity: 'id',
defs: [
patternDotsDef('dots', {
background: 'inherit',
Expand Down
9 changes: 5 additions & 4 deletions website/src/pages/bubble/canvas.js
View file
Expand Up @@ -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),
})),
}
Expand All @@ -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,

Expand Down
1 change: 1 addition & 0 deletions website/src/pages/bubble/html.js
View file
Expand Up @@ -24,6 +24,7 @@ const initialProperties = {
identity: 'name',
value: 'loc',
colors: { scheme: 'paired' },
colorIdentity: 'depth',
padding: 1,
leavesOnly: false,

Expand Down
1 change: 1 addition & 0 deletions website/src/pages/bubble/index.js
View file
Expand Up @@ -25,6 +25,7 @@ const initialProperties = {
identity: 'name',
value: 'loc',
colors: { scheme: 'nivo' },
colorIdentity: 'depth',
padding: 6,
leavesOnly: false,

Expand Down

0 comments on commit 32e61b1

Please sign in to comment.