feat(colors): init @nivo/colors package

.gitignore

@@ -12,6 +12,3 @@ build
 /packages/*/dist
 
 *.lerna_backup
-
-_website
-

.nvmrc

@@ -0,0 +1 @@
+v10

Makefile

@@ -127,6 +127,7 @@ packages-tslint: ##@1 packages run tslint on all packages
         ./packages/axes/index.d.ts \
         ./packages/bar/index.d.ts \
         ./packages/calendar/index.d.ts \
+		./packages/colors/index.d.ts \
         ./packages/core/index.d.ts \
 		./packages/geo/index.d.ts \
         ./packages/heatmap/index.d.ts \
@@ -163,8 +164,7 @@ packages-build: ##@1 packages build all packages
 
 package-build-%: ##@1 packages build a package
 	@echo "${YELLOW}Building package ${WHITE}@nivo/${*}${RESET}"
-	@rm -rf ./packages/${*}/cjs
-	@rm -rf ./packages/${*}/umd
+	@rm -rf ./packages/${*}/dist
 	@export PACKAGE=${*}; ./node_modules/.bin/rollup -c conf/rollup.config.js
 
 packages-screenshots: ##@1 packages generate screenshots for packages readme (website dev server must be running)

api/package.json

@@ -48,7 +48,7 @@
     "express": "^4.15.4",
     "express-winston": "^2.4.0",
     "joi": "^14.3.0",
-    "lodash": "^4.17.4",
+    "lodash": "^4.17.11",
     "react": "^16.8.4",
     "react-dom": "^16.8.4",
     "uuid": "^3.1.0",

packages/axes/package.json

@@ -24,7 +24,7 @@
     "@nivo/core": "0.55.0",
     "d3-format": "^1.3.2",
     "d3-time-format": "^2.1.3",
-    "lodash": "^4.17.4",
+    "lodash": "^4.17.11",
     "react-motion": "^0.5.2",
     "recompose": "^0.30.0"
   },

packages/bar/index.d.ts

@@ -9,6 +9,7 @@ import {
     SvgDefsAndFill,
     CartesianMarkerProps,
 } from '@nivo/core'
+import { OrdinalColorsInstruction } from '@nivo/colors'
 import { LegendProps } from '@nivo/legends'
 
 declare module '@nivo/bar' {
@@ -106,6 +107,7 @@ declare module '@nivo/bar' {
             labelSkipHeight: number
             labelTextColor: string | GetColor<BarDatumWithColor>
 
+            colors: OrdinalColorsInstruction
             borderRadius: number
             borderWidth: number
             theme: Theme

packages/bar/package.json

@@ -24,11 +24,12 @@
   ],
   "dependencies": {
     "@nivo/axes": "0.55.0",
+    "@nivo/colors": "0.55.0",
     "@nivo/core": "0.55.0",
     "@nivo/legends": "0.55.0",
-    "d3-scale": "^2.1.2",
+    "d3-scale": "^3.0.0",
     "d3-shape": "^1.2.2",
-    "lodash": "^4.17.4",
+    "lodash": "^4.17.11",
     "react-motion": "^0.5.2",
     "recompose": "^0.30.0"
   },

packages/bar/src/enhance.js

@@ -10,18 +10,26 @@ import { compose } from 'recompose'
 import defaultProps from 'recompose/defaultProps'
 import withPropsOnChange from 'recompose/withPropsOnChange'
 import pure from 'recompose/pure'
-import { withTheme, withColors, withDimensions, withMotion } from '@nivo/core'
-import { getInheritedColorGenerator } from '@nivo/core'
-import { getAccessorFor, getLabelGenerator } from '@nivo/core'
+import {
+    withTheme,
+    withDimensions,
+    withMotion,
+    getInheritedColorGenerator,
+    getAccessorFor,
+    getLabelGenerator,
+} from '@nivo/core'
+import { getOrdinalColorScale } from '@nivo/colors'
 import { BarDefaultProps } from './props'
 
 export default Component =>
     compose(
         defaultProps(BarDefaultProps),
         withTheme(),
-        withColors(),
         withDimensions(),
         withMotion(),
+        withPropsOnChange(['colors'], ({ colors }) => ({
+            getColor: getOrdinalColorScale(colors, 'id'),
+        })),
         withPropsOnChange(['indexBy'], ({ indexBy }) => ({
             getIndex: getAccessorFor(indexBy),
         })),

packages/bar/src/props.js

@@ -8,6 +8,7 @@
  */
 import PropTypes from 'prop-types'
 import { noop, defsPropTypes } from '@nivo/core'
+import { ordinalColorsPropType } from '@nivo/colors'
 import { axisPropType } from '@nivo/axes'
 import { LegendPropShape } from '@nivo/legends'
 import BarItem from './BarItem'
@@ -55,6 +56,7 @@ export const BarPropTypes = {
     labelLinkColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
     getLabelLinkColor: PropTypes.func.isRequired, // computed
 
+    colors: ordinalColorsPropType.isRequired,
     borderRadius: PropTypes.number.isRequired,
     getColor: PropTypes.func.isRequired, // computed
     ...defsPropTypes,
@@ -110,6 +112,7 @@ export const BarDefaultProps = {
     labelLinkColor: 'theme',
     labelTextColor: 'theme',
 
+    colors: { scheme: 'nivo' },
     defs: [],
     fill: [],
     borderRadius: 0,

packages/bar/stories/bar.stories.js

@@ -56,8 +56,8 @@ stories.add('with marker', () => (
     />
 ))
 
-stories.add('using custom colorBy', () => (
-    <Bar {...commonProps} colorBy={({ id, data }) => data[`${id}Color`]} />
+stories.add('using custom color', () => (
+    <Bar {...commonProps} colors={({ id, data }) => data[`${id}Color`]} />
 ))
 
 const divergingData = range(9).map(i => {

packages/bullet/package.json

@@ -23,10 +23,11 @@
     "dist/"
   ],
   "dependencies": {
+    "@nivo/colors": "0.55.0",
     "@nivo/core": "0.55.0",
     "@nivo/legends": "0.55.0",
-    "d3-scale": "^2.1.2",
-    "lodash": "^4.17.4",
+    "d3-scale": "^3.0.0",
+    "lodash": "^4.17.11",
     "react-motion": "^0.5.2",
     "recompose": "^0.30.0"
   },

packages/bullet/src/BulletMarkers.js

@@ -9,7 +9,8 @@
 import React, { Component, Fragment } from 'react'
 import PropTypes from 'prop-types'
 import { TransitionMotion, spring } from 'react-motion'
-import { motionPropTypes, colorMotionSpring, getInterpolatedColor } from '@nivo/core'
+import { motionPropTypes } from '@nivo/core'
+import { interpolateColor, getInterpolatedColor } from '@nivo/colors'
 import partial from 'lodash/partial'
 
 const getPositionGenerator = ({ layout, reverse, scale, height, markerSize }) => {
@@ -118,7 +119,7 @@ export default class BulletMarkers extends Component {
                             y: spring(position.y, springConfig),
                             size: spring(position.size, springConfig),
                             rotation: spring(position.rotation, springConfig),
-                            ...colorMotionSpring(marker.color, springConfig),
+                            ...interpolateColor(marker.color, springConfig),
                         },
                     }
                 })}

packages/bullet/src/BulletRects.js

@@ -13,7 +13,8 @@ import { TransitionMotion, spring } from 'react-motion'
 import compose from 'recompose/compose'
 import withPropsOnChange from 'recompose/withPropsOnChange'
 import pure from 'recompose/pure'
-import { motionPropTypes, colorMotionSpring, getInterpolatedColor } from '@nivo/core'
+import { motionPropTypes } from '@nivo/core'
+import { interpolateColor, getInterpolatedColor } from '@nivo/colors'
 import { computeRects } from './compute'
 
 class BulletRects extends Component {
@@ -106,7 +107,7 @@ class BulletRects extends Component {
                             y: spring(rect.y, springConfig),
                             width: spring(rect.width, springConfig),
                             height: spring(rect.height, springConfig),
-                            ...colorMotionSpring(rect.data.color, springConfig),
+                            ...interpolateColor(rect.data.color, springConfig),
                         },
                     }))}
                 >

packages/calendar/package.json

@@ -25,7 +25,7 @@
   "dependencies": {
     "@nivo/core": "0.55.0",
     "@nivo/legends": "0.55.0",
-    "d3-scale": "^2.1.2",
+    "d3-scale": "^3.0.0",
     "d3-time": "^1.0.10",
     "d3-time-format": "^2.1.3",
     "lodash.isdate": "^4.0.1",

packages/chord/package.json

@@ -22,12 +22,13 @@
     "dist/"
   ],
   "dependencies": {
+    "@nivo/colors": "0.55.0",
     "@nivo/core": "0.55.0",
     "@nivo/legends": "0.55.0",
     "d3-chord": "^1.0.6",
     "d3-format": "^1.3.2",
     "d3-shape": "^1.3.5",
-    "lodash": "^4.17.4",
+    "lodash": "^4.17.11",
     "react-motion": "^0.5.2",
     "recompose": "^0.30.0"
   },

packages/chord/src/ChordArcs.js

@@ -10,7 +10,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { TransitionMotion, spring } from 'react-motion'
 import pure from 'recompose/pure'
-import { colorMotionSpring, getInterpolatedColor } from '@nivo/core'
+import { interpolateColor, getInterpolatedColor } from '@nivo/colors'
 import ChordArcTooltip from './ChordArcTooltip'
 import { motionPropTypes } from '@nivo/core'
 
@@ -88,7 +88,7 @@ const ChordArcs = ({
                         startAngle: spring(arc.startAngle, springConfig),
                         endAngle: spring(arc.endAngle, springConfig),
                         opacity: spring(getOpacity(arc), springConfig),
-                        ...colorMotionSpring(arc.color, springConfig),
+                        ...interpolateColor(arc.color, springConfig),
                     },
                 }
             })}

packages/chord/src/ChordRibbons.js

@@ -15,15 +15,8 @@ import { format as d3Format } from 'd3-format'
 import compose from 'recompose/compose'
 import withPropsOnChange from 'recompose/withPropsOnChange'
 import pure from 'recompose/pure'
-import {
-    colorMotionSpring,
-    getInterpolatedColor,
-    blendModePropType,
-    midAngle,
-    TableTooltip,
-    Chip,
-    motionPropTypes,
-} from '@nivo/core'
+import { blendModePropType, midAngle, TableTooltip, Chip, motionPropTypes } from '@nivo/core'
+import { interpolateColor, getInterpolatedColor } from '@nivo/colors'
 
 /**
  * Used to get ribbon angles, instead of using source and target arcs,
@@ -76,13 +69,13 @@ const getRibbonAngles = ({ source, target }, useMiddleAngle, springConfig) => {
 const ribbonWillEnter = ({ data: ribbon }) => ({
     ...getRibbonAngles(ribbon, true),
     opacity: 0,
-    ...colorMotionSpring(ribbon.source.color),
+    ...interpolateColor(ribbon.source.color),
 })
 
 const ribbonWillLeave = springConfig => ({ data: ribbon }) => ({
     ...getRibbonAngles(ribbon, true, springConfig),
     opacity: 0,
-    ...colorMotionSpring(ribbon.source.color, springConfig),
+    ...interpolateColor(ribbon.source.color, springConfig),
 })
 
 const ChordRibbons = ({
@@ -178,7 +171,7 @@ const ChordRibbons = ({
                     style: {
                         ...getRibbonAngles(ribbon, false, springConfig),
                         opacity: spring(getOpacity(ribbon), springConfig),
-                        ...colorMotionSpring(ribbon.source.color, springConfig),
+                        ...interpolateColor(ribbon.source.color, springConfig),
                     },
                 }
             })}

packages/chord/src/enhance.js

@@ -13,9 +13,14 @@ import withPropsOnChange from 'recompose/withPropsOnChange'
 import pure from 'recompose/pure'
 import { arc as d3Arc } from 'd3-shape'
 import { chord as d3Chord, ribbon as d3Ribbon } from 'd3-chord'
-import { getInheritedColorGenerator, getColorRange } from '@nivo/core'
-import { getLabelGenerator } from '@nivo/core'
-import { withMotion, withTheme, withDimensions } from '@nivo/core'
+import {
+    getInheritedColorGenerator,
+    getLabelGenerator,
+    withMotion,
+    withTheme,
+    withDimensions,
+} from '@nivo/core'
+import { getOrdinalColorScale } from '@nivo/colors'
 import { ChordDefaultProps } from './props'
 
 export default Component =>
@@ -36,11 +41,11 @@ export default Component =>
             getLabelTextColor: getInheritedColorGenerator(labelTextColor, 'labels.textColor'),
         })),
         withPropsOnChange(['colors', 'keys'], ({ colors, keys }) => {
-            const color = getColorRange(colors)
+            const getColor = getOrdinalColorScale(colors, 'key')
 
             return {
                 colorById: keys.reduce((acc, key) => {
-                    acc[key] = color(key)
+                    acc[key] = getColor({ key })
                     return acc
                 }, {}),
             }

packages/chord/src/props.js

@@ -8,6 +8,7 @@
  */
 import PropTypes from 'prop-types'
 import { blendModePropType } from '@nivo/core'
+import { ordinalColorsPropType } from '@nivo/colors'
 import { LegendPropShape } from '@nivo/legends'
 
 export const ChordPropTypes = {
@@ -37,7 +38,7 @@ export const ChordPropTypes = {
     labelTextColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
     getLabelTextColor: PropTypes.func.isRequired, // computed
 
-    colors: PropTypes.any.isRequired,
+    colors: ordinalColorsPropType.isRequired,
 
     isInteractive: PropTypes.bool.isRequired,
     arcHoverOpacity: PropTypes.number.isRequired,
@@ -71,7 +72,7 @@ export const ChordDefaultProps = {
     labelRotation: 0,
     labelTextColor: 'inherit:darker(1)',
 
-    colors: 'nivo',
+    colors: { scheme: 'nivo' },
 
     isInteractive: true,
     arcHoverOpacity: 1,

packages/chord/stories/chord.stories.js

@@ -36,7 +36,7 @@ stories.add('alternative colors', () => (
         labelRotation={-90}
         padAngle={0.02}
         innerRadiusOffset={0.02}
-        colors="category10"
+        colors={{ scheme: 'category10' }}
     />
 ))
 

packages/circle-packing/package.json

@@ -22,9 +22,10 @@
     "dist/"
   ],
   "dependencies": {
+    "@nivo/colors": "0.55.0",
     "@nivo/core": "0.55.0",
     "d3-hierarchy": "^1.1.8",
-    "lodash": "^4.17.4",
+    "lodash": "^4.17.11",
     "react-motion": "^0.5.2",
     "recompose": "^0.30.0"
   },