feat(colors): add colors config for Pie/Stack/TreeMap components

src/PropTypes.js

@@ -0,0 +1,18 @@
+import { PropTypes } from 'react';
+
+
+export const lineInterpolation = PropTypes.oneOf([
+    'linear',          // piecewise linear segments, as in a polyline.
+    'linear-closed',   // close the linear segments to form a polygon.
+    'step',            // alternate between horizontal and vertical segments, as in a step function.
+    'step-before',     // alternate between vertical and horizontal segments, as in a step function.
+    'step-after',      // alternate between horizontal and vertical segments, as in a step function.
+    'basis',           // a B-spline, with control point duplication on the ends.
+    'basis-open',      // an open B-spline; may not intersect the start or end.
+    'basis-closed',    // a closed B-spline, as in a loop.
+    'bundle',          // equivalent to basis, except the tension parameter is used to straighten the spline.
+    'cardinal',        // a Cardinal spline, with control point duplication on the ends.
+    'cardinal-open',   // an open Cardinal spline; may not intersect the start or end, but will intersect other control points.
+    'cardinal-closed', // a closed Cardinal spline, as in a loop.
+    'monotone'         // cubic interpolation that preserves monotonicity in y.
+]);

src/components/layouts/Pie.js

@@ -3,6 +3,7 @@ import _                                  from 'lodash';
 import d3                                 from 'd3';
 import Nivo                               from '../../Nivo';
 import { degreesToRadians, findNeighbor } from '../../ArcUtils';
+import { getColorRange }                  from '../../ColorUtils';
 
 
 class Pie extends Component {
@@ -13,6 +14,7 @@ class Pie extends Component {
             sort,
             keyProp, valueProp,
             startAngle, endAngle, padAngle,
+            colors,
             innerRadius,
             transitionDuration, transitionEasing,
         } = nextProps;
@@ -43,7 +45,7 @@ class Pie extends Component {
             endAngle:   degreesToRadians(endAngle)
         }));
 
-        const color = d3.scale.category20();
+        const color = getColorRange(colors);
 
         let slices = container.selectAll('.chart__layout__pie__slice');
         const previousData = slices.data();
@@ -138,7 +140,7 @@ class Pie extends Component {
     }
 }
 
-const { array, number, string, func } = PropTypes;
+const { array, number, string, func, any } = PropTypes;
 
 Pie.propTypes = {
     width:              number.isRequired,
@@ -150,6 +152,7 @@ Pie.propTypes = {
     startAngle:         number.isRequired,
     endAngle:           number.isRequired,
     padAngle:           number.isRequired,
+    colors:             any.isRequired,
     transitionDuration: number.isRequired,
     transitionEasing:   string.isRequired,
     innerRadius:        number.isRequired
@@ -164,7 +167,8 @@ Pie.defaultProps = {
     padAngle:           0,
     transitionDuration: Nivo.defaults.transitionDuration,
     transitionEasing:   Nivo.defaults.transitionEasing,
-    innerRadius:        0
+    innerRadius:        0,
+    colors:             Nivo.defaults.colorRange
 };
 
 

src/components/layouts/Stack.js

@@ -1,6 +1,8 @@
-import React, { Component, PropTypes } from 'react';
-import d3                              from 'd3';
-import Nivo                            from '../../Nivo';
+import React, { Component, PropTypes }        from 'react';
+import d3                                     from 'd3';
+import Nivo                                   from '../../Nivo';
+import { lineInterpolation }                  from '../../PropTypes';
+import { getColorStyleObject, getColorRange } from '../../ColorUtils';
 
 
 class Stack extends Component {
@@ -10,6 +12,7 @@ class Stack extends Component {
             offset,
             width, height,
             interpolation,
+            colors,
             transitionDuration, transitionEasing
         } = nextProps;
 
@@ -30,7 +33,7 @@ class Stack extends Component {
             .domain([0, d3.max(stacked, layer => d3.max(layer, d => (d.y0 + d.y)))])
         ;
 
-        const color = d3.scale.ordinal().range(['#ba1300', '#c6482e', '#ff9068', '#cd600f', '#ff9068', '#7b2113']);
+        const color = getColorRange(colors);
 
         const area = d3.svg.area()
             .interpolate(interpolation)
@@ -83,14 +86,11 @@ class Stack extends Component {
     }
 
     render() {
-        return (
-            <g>
-            </g>
-        );
+        return <g />;
     }
 }
 
-const { array, number, string, func, oneOf } = PropTypes;
+const { array, number, string, func, any, oneOf } = PropTypes;
 
 Stack.propTypes = {
     width:              number.isRequired,
@@ -100,7 +100,8 @@ Stack.propTypes = {
     offset:             oneOf(['silhouette', 'wiggle', 'expand', 'zero']).isRequired,
     keyProp:            string.isRequired,
     valueProp:          string.isRequired,
-    interpolation:      PropTypes.string.isRequired,
+    interpolation:      lineInterpolation,
+    colors:             any.isRequired,
     transitionDuration: number.isRequired,
     transitionEasing:   string.isRequired
 };
@@ -112,7 +113,8 @@ Stack.defaultProps = {
     valueProp:          'value',
     interpolation:      'monotone',
     transitionDuration: Nivo.defaults.transitionDuration,
-    transitionEasing:   Nivo.defaults.transitionEasing
+    transitionEasing:   Nivo.defaults.transitionEasing,
+    colors:             Nivo.defaults.colorRange
 };
 
 

src/components/layouts/TreeMap.js

@@ -1,9 +1,9 @@
-import React, { Component, PropTypes } from 'react';
-import _                               from 'lodash';
-import d3                              from 'd3';
-import Dimensions                      from 'react-dimensions';
-import Nivo                            from '../../Nivo';
-import { getColorStyleObject }         from '../../ColorUtils';
+import React, { Component, PropTypes }        from 'react';
+import _                                      from 'lodash';
+import d3                                     from 'd3';
+import Dimensions                             from 'react-dimensions';
+import Nivo                                   from '../../Nivo';
+import { getColorStyleObject, getColorRange } from '../../ColorUtils';
 
 function nodePosition() {
     this
@@ -21,6 +21,7 @@ class TreeMap extends Component {
             mode,
             valueAccessor, labelFn,
             containerWidth, containerHeight,
+            colors,
             transitionDuration, transitionEasing
         } = nextProps;
 
@@ -50,8 +51,7 @@ class TreeMap extends Component {
             })
         ;
 
-        //const color = d3.scale.category20c();
-        const color = d3.scale.ordinal().range(['#ba1300', '#c6482e', '#ff9068', '#cd600f', '#ff9068', '#7b2113']);
+        const color = getColorRange(colors);
 
         const nodes = wrapper.datum(root).selectAll('.nivo_treemap_node').data(treemap.nodes);
 
@@ -125,9 +125,10 @@ TreeMap.propTypes = {
     valueAccessor:      func.isRequired,
     labelFn:            func.isRequired,
     mode:               oneOf(['squarify', 'slice', 'dice', 'slice-dice']),
+    colors:             any.isRequired,
+    borderColor:        any.isRequired,
     transitionDuration: number.isRequired,
     transitionEasing:   string.isRequired,
-    borderColor:        any.isRequired,
     margin:             shape({
         top:    number,
         right:  number,
@@ -143,7 +144,8 @@ TreeMap.defaultProps = {
     transitionDuration: Nivo.defaults.transitionDuration,
     transitionEasing:   Nivo.defaults.transitionEasing,
     margin:             Nivo.defaults.margin,
-    borderColor:        'none'
+    borderColor:        'none',
+    colors:             Nivo.defaults.colorRange
 };