diff --git a/src/PropTypes.js b/src/PropTypes.js
new file mode 100644
index 000000000..2383e791d
--- /dev/null
+++ b/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.
+]);
diff --git a/src/components/layouts/Pie.js b/src/components/layouts/Pie.js
index aa21b858c..6b672c743 100644
--- a/src/components/layouts/Pie.js
+++ b/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
};
diff --git a/src/components/layouts/Stack.js b/src/components/layouts/Stack.js
index f972d4fbe..085e041a0 100644
--- a/src/components/layouts/Stack.js
+++ b/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 (
-
-
- );
+ return ;
}
}
-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
};
diff --git a/src/components/layouts/TreeMap.js b/src/components/layouts/TreeMap.js
index f00331be9..0ec90d0cd 100644
--- a/src/components/layouts/TreeMap.js
+++ b/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
};