Update documentation (#115)

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,

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,

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 (
       <svg {...{ width, height, className, style }} {...handlers}>

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,

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);
   }