diff --git a/docs/src/ExampleSection.js b/docs/src/ExampleSection.js index fb7d0475..1d3a6754 100644 --- a/docs/src/ExampleSection.js +++ b/docs/src/ExampleSection.js @@ -1,6 +1,7 @@ import React from "react"; import ReactDOM from "react-dom"; import _ from "lodash"; +import moment from "moment"; import * as d3 from "d3"; import Playground from "component-playground"; @@ -53,6 +54,7 @@ export default class ExampleSection extends React.Component { ReactDOM, d3, _, + moment, randomWalk, randomWalkSeries, randomWalkTimeSeries, diff --git a/src/XAxis.js b/src/XAxis.js index 7cdaa62e..dd7ac876 100644 --- a/src/XAxis.js +++ b/src/XAxis.js @@ -21,6 +21,11 @@ export default class XAxis extends React.Component { height: PropTypes.number, position: PropTypes.string, placement: PropTypes.string, + /** + * Extends the x domain to start and end on rounded values, + * guaranteeing the original domain will be covered. + * See d3 docs for more information + */ nice: PropTypes.bool, ticks: PropTypes.array, tickCount: PropTypes.number, diff --git a/src/XYPlot.js b/src/XYPlot.js index 93629e66..2fc05532 100644 --- a/src/XYPlot.js +++ b/src/XYPlot.js @@ -99,21 +99,30 @@ class XYPlot extends React.Component { */ height: PropTypes.number, /** - * The X and/or Y domains of the data in {x: [...], y: [...]} format. + * The X domain of the data as an array. * For numerical scales, this is represented as [min, max] of the data; * for ordinal/categorical scales it is an array of known values ie. ['a', 'b', 'c']. * Automatically determined from data if not passed. */ xDomain: PropTypes.array, + /** + * The Y domain of the data as an array. + * For numerical scales, this is represented as [min, max] of the data; + * for ordinal/categorical scales it is an array of known values ie. ['a', 'b', 'c']. + * Automatically determined from data if not passed. + */ yDomain: PropTypes.array, xScaleType: PropTypes.string, yScaleType: PropTypes.string, /** - * Whether or not to invert the x and y scales + * Whether or not to invert the x scale */ invertXScale: PropTypes.bool, + /** + * Whether or not to invert the y scale + */ invertYScale: PropTypes.bool, /** @@ -265,7 +274,7 @@ class XYPlot extends React.Component { ...scales }; - const className = `rct-xy-plot ${this.props.xyPlotClassName}`; + const className = `rct-xy-plot ${xyPlotClassName}`; return ( diff --git a/src/YAxis.js b/src/YAxis.js index 907486cf..905b02c2 100644 --- a/src/YAxis.js +++ b/src/YAxis.js @@ -21,6 +21,11 @@ export default class YAxis extends React.Component { height: PropTypes.number, position: PropTypes.string, placement: PropTypes.string, + /** + * Extends the y domain to start and end on rounded values, + * guaranteeing the original domain will be covered. + * See d3 docs for more information + */ nice: PropTypes.bool, ticks: PropTypes.array, tickCount: PropTypes.number, diff --git a/src/utils/Scale.js b/src/utils/Scale.js index e645836f..e0c61c80 100644 --- a/src/utils/Scale.js +++ b/src/utils/Scale.js @@ -90,12 +90,13 @@ export function getScaleTicks(scale, scaleType, tickCount = 10) { export function getTickDomain(scale, { ticks, tickCount, nice } = {}) { const scaleType = inferScaleType(scale); - // bug - d3 linearScale.copy().nice() modifies original scale, so we must create a new scale instead of copy()ing - // todo replace this with d3-scale from d3 v4.0 - // check if d3 still has this issue + const scaleDomain = scale.domain(); + if (nice && scaleType !== "ordinal") { - scale = initScale(scaleType) - .domain(scale.domain()) + // If nicing, initialize a new scale and nice it + scale = scale + .copy() + .domain(scaleDomain) .nice(tickCount || 10); }