Add more tests (spotify#85)

* Mark KDE as experimental

* Add MarkerLineChart spec

* PieChart spec + fixes to PieChart

* RangeBarChart spec

* ScatterPlot spec

* TreeMap spec + fix typo on BarChart

* Axis spec

* Label spec

* Margin spec

* Update docs

* Remove console log

* Add removed import back into KernelDensityEstimation

* Eslint fix

* Fix prettier issues

docs/build/index.html

@@ -31,5 +31,5 @@
     </div>
 
     <div class="container-fluid" id="container">Loading...</div>
-<script type="text/javascript" src="bundle.d4e8ecd513dad7ce4267.js"></script></body>
+<script type="text/javascript" src="bundle.69e0c77b87c238c72417.js"></script></body>
 </html>

docs/src/docs/BarChart/propDocs.json

@@ -1,5 +1,5 @@
 {
-  "description": "BarChart represents a basic \"Value/Value\" bar chart,\nwhere each bar represents a single independent variable value and a single dependent value,\nwith bars that are centered horizontally on x-value and extend from 0 to y-value,\n(or centered vertically on their y-value and extend from 0 to the x-value, in the case of horizontal chart variant)\neg. http://www.snapsu rveys.com/wp-content/uploads/2012/10/bar_2d8.png\n\nFor other bar chart types, see RangeBarChart and AreaBarChart",
+  "description": "BarChart represents a basic \"Value/Value\" bar chart,\nwhere each bar represents a single independent variable value and a single dependent value,\nwith bars that are centered horizontally on x-value and extend from 0 to y-value,\n(or centered vertically on their y-value and extend from 0 to the x-value, in the case of horizontal chart variant)\neg. http://www.snapsurveys.com/wp-content/uploads/2012/10/bar_2d8.png\n\nFor other bar chart types, see RangeBarChart and AreaBarChart",
   "methods": [
     {
       "name": "getDomain",

docs/src/docs/KernelDensityEstimation/propDocs.json

@@ -1,5 +1,5 @@
 {
-  "description": "",
+  "description": "Kernel Density Estimation is still undergoing experimental changes!\nWe do not consider this chart to be production ready.",
   "methods": [
     {
       "name": "getDomain",
@@ -67,6 +67,14 @@
       "required": false,
       "description": "Class attribute to be applied to the line path"
     },
+    "x": {
+      "type": {
+        "name": "custom",
+        "raw": "CustomPropTypes.valueOrAccessor"
+      },
+      "required": false,
+      "description": "X value or accessor function"
+    },
     "name": {
       "type": {
         "name": "string"

docs/src/docs/PieChart/propDocs.json

@@ -276,17 +276,6 @@
       "required": false,
       "description": "Value for where to place markerline"
     },
-    "markerLineClass": {
-      "type": {
-        "name": "string"
-      },
-      "required": false,
-      "description": "[TO BE DEPRECATED. USE markerLineClassName] Class attribute to be applied to marker line.",
-      "defaultValue": {
-        "value": "\"\"",
-        "computed": false
-      }
-    },
     "markerLineClassName": {
       "type": {
         "name": "string"
@@ -351,6 +340,27 @@
       },
       "required": false,
       "description": ""
+    },
+    "onMouseEnterSlice": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": ""
+    },
+    "onMouseMoveSlice": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": ""
+    },
+    "onMouseLeaveSlice": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": ""
     }
   }
 }

docs/src/docs/TreeMap/examples/TreeMap.js.example

@@ -17,8 +17,8 @@ const TreeMapExample = props => {
     <div>
       <TreeMap
         data={data}
-        getValue="size"
-        getLabel="value"
+        getValue={d => d.size}
+        getLabel={d => d.value}
         nodeStyle={node => ({
           backgroundColor: colorScale(parseInt(node.data.size)),
           border: "1px solid #333"

package.json

@@ -69,16 +69,16 @@
     "css-loader": "^0.28.4",
     "enzyme": "^2.9.1",
     "eslint": "^4.19.1",
-    "eslint-config-prettier": "^2.9.0",
-    "eslint-plugin-prettier": "^2.6.0",
+    "eslint-config-prettier": "2.9.0",
+    "eslint-plugin-prettier": "2.6.0",
     "glob": "^7.1.2",
     "html-webpack-plugin": "^2.30.1",
     "jsdom": "^9.12.0",
     "json-loader": "^0.5.2",
     "less": "^3.0.4",
     "less-loader": "^4.0.5",
     "mocha": "4.0.1",
-    "prettier": "^1.12.1",
+    "prettier": "1.13",
     "raw-loader": "^0.5.1",
     "react": "^15.6.1",
     "react-addons-update": "^15.6.0",

src/BarChart.js

@@ -25,7 +25,7 @@ function makeRangeBarChartProps(barChartProps) {
  * where each bar represents a single independent variable value and a single dependent value,
  * with bars that are centered horizontally on x-value and extend from 0 to y-value,
  * (or centered vertically on their y-value and extend from 0 to the x-value, in the case of horizontal chart variant)
- * eg. http://www.snapsu rveys.com/wp-content/uploads/2012/10/bar_2d8.png
+ * eg. http://www.snapsurveys.com/wp-content/uploads/2012/10/bar_2d8.png
  *
  * For other bar chart types, see RangeBarChart and AreaBarChart
  */

src/KernelDensityEstimation.js

@@ -2,7 +2,13 @@ import { mean } from "d3";
 import PropTypes from "prop-types";
 import React from "react";
 import LineChart from "./LineChart.js";
+import * as CustomPropTypes from "./utils/CustomPropTypes";
 import xyPropsEqual from "./utils/xyPropsEqual";
+
+/**
+ * Kernel Density Estimation is still undergoing experimental changes!
+ * We do not consider this chart to be production ready.
+ */
 class KernelDensityEstimation extends React.Component {
   static propTypes = {
     /**
@@ -29,6 +35,10 @@ class KernelDensityEstimation extends React.Component {
      * Class attribute to be applied to the line path
      */
     lineClassName: PropTypes.string,
+    /**
+     * X value or accessor function
+     */
+    x: CustomPropTypes.valueOrAccessor,
     // common props from XYPlot
     // accessor for data values
     name: PropTypes.string,
@@ -69,6 +79,7 @@ class KernelDensityEstimation extends React.Component {
     const { data, bandwidth, sampleCount, xScale, width } = props;
     const kernel = epanechnikovKernel(bandwidth);
     const samples = xScale.ticks(sampleCount || Math.ceil(width / 2));
+
     this.setState({ kdeData: kernelDensityEstimator(kernel, samples)(data) });
   }
 

src/PieChart.js

@@ -59,10 +59,6 @@ class PieChart extends React.Component {
      * Value for where to place markerline
      */
     markerLineValue: PropTypes.number,
-    /**
-     * [TO BE DEPRECATED. USE markerLineClassName] Class attribute to be applied to marker line.
-     */
-    markerLineClass: PropTypes.string,
     /**
      * Class attribute to be applied to marker line
      */
@@ -82,15 +78,16 @@ class PieChart extends React.Component {
 
     onMouseEnterLine: PropTypes.func,
     onMouseMoveLine: PropTypes.func,
-    onMouseLeaveLine: PropTypes.func
+    onMouseLeaveLine: PropTypes.func,
+    onMouseEnterSlice: PropTypes.func,
+    onMouseMoveSlice: PropTypes.func,
+    onMouseLeaveSlice: PropTypes.func
   };
   static defaultProps = {
     getValue: null,
     centerLabelClassName: "",
     centerLabelStyle: {},
     pieSliceClassName: "",
-    // TODO deprecate
-    markerLineClass: "",
     markerLineClassName: "",
     markerLineOverhangInner: 2,
     markerLineOverhangOuter: 2,
@@ -237,11 +234,7 @@ class PieChart extends React.Component {
   }
 
   renderMarkerLine(pathData) {
-    const {
-      markerLineClass,
-      markerLineClassName,
-      markerLineStyle
-    } = this.props;
+    const { markerLineClassName, markerLineStyle } = this.props;
     const lineD = {
       value: this.props.markerLineValue
     };
@@ -259,17 +252,15 @@ class PieChart extends React.Component {
     return (
       <path
         style={markerLineStyle}
-        className={`rct-marker-line ${
-          markerLineClass ? markerLineClass : markerLineClassName
-        }`}
+        className={`rct-marker-line ${markerLineClassName}`}
         d={pathData}
         {...{ onMouseEnter, onMouseMove, onMouseLeave }}
       />
     );
   }
 
   renderCenterLabel(center) {
-    const { centerLabelStyle, centerLabelClassStyle } = this.props;
+    const { centerLabelStyle, centerLabelClassName, centerLabel } = this.props;
     const { x, y } = center;
     const style = Object.assign(
       {},
@@ -279,10 +270,10 @@ class PieChart extends React.Component {
 
     return (
       <text
-        className={`rct-pie-label-center ${centerLabelClassStyle}`}
+        className={`rct-pie-label-center ${centerLabelClassName}`}
         {...{ x, y, style }}
       >
-        {this.props.centerLabel}
+        {centerLabel}
       </text>
     );
   }
@@ -321,6 +312,7 @@ function pieSlicePath(
   const startY = Math.cos((2 * Math.PI) / (1 / startPercent));
   const endX = Math.sin((2 * Math.PI) / (1 / endPercent));
   const endY = Math.cos((2 * Math.PI) / (1 / endPercent));
+
   const largeArc = endPercent - startPercent <= 0.5 ? 0 : 1;
   const [c, r, rH, x0, x1, y0, y1] = [
     center,

src/ScatterPlot.js

@@ -77,9 +77,7 @@ export default class ScatterPlot extends React.Component {
   }
 
   render() {
-    return (
-      <g className={this.props.name}>{this.props.data.map(this.renderPoint)}</g>
-    );
+    return <g>{this.props.data.map(this.renderPoint)}</g>;
   }
   renderPoint = (d, i) => {
     const [onMouseEnter, onMouseMove, onMouseLeave] = [
@@ -131,7 +129,7 @@ export default class ScatterPlot extends React.Component {
 
     // set positioning attributes based on symbol type
     if (pointSymbol.type === "circle" || pointSymbol.type === "ellipse") {
-      _.assign(symbolProps, { cx, cy, style: pointStyle });
+      _.assign(symbolProps, { cx, cy, style: { ...style } });
     } else if (pointSymbol.type === "text") {
       _.assign(symbolProps, {
         x: cx,
@@ -142,8 +140,7 @@ export default class ScatterPlot extends React.Component {
       _.assign(symbolProps, {
         x: cx,
         y: cy,
-        // TODO figure out why this translate is here
-        style: { transform: "translate(-50%, -50%)", ...style }
+        style: { ...style }
       });
     }
 

src/TreeMap.js

@@ -6,7 +6,7 @@ import { hierarchy, treemap, treemapResquarify } from "d3-hierarchy";
 import { makeAccessor } from "./utils/Data";
 import * as CustomPropTypes from "./utils/CustomPropTypes";
 
-class TreeMapNode extends React.Component {
+export class TreeMapNode extends React.Component {
   static propTypes = {
     node: PropTypes.shape({
       parent: PropTypes.object,
@@ -50,7 +50,7 @@ class TreeMapNode extends React.Component {
           parentName
         )} node-group-i-${parentNames.indexOf(parentName)}`
       : "";
-    const className = `tree-map-node node-depth-${depth} ${nodeGroupClass}`;
+    const className = `rct-tree-map-node node-depth-${depth} ${nodeGroupClass}`;
 
     let style = {
       position: "absolute",
@@ -88,7 +88,7 @@ class TreeMapNode extends React.Component {
   }
 }
 
-class TreeMapNodeLabel extends React.Component {
+export class TreeMapNodeLabel extends React.Component {
   static propTypes = {
     node: PropTypes.object,
     getLabel: CustomPropTypes.getter,
@@ -109,7 +109,7 @@ class TreeMapNodeLabel extends React.Component {
     _.assign(style, customStyle);
 
     return (
-      <div className="node-label" {...{ style }}>
+      <div className="rct-node-label" {...{ style }}>
         {makeAccessor(getLabel)(node)}
       </div>
     );
@@ -122,19 +122,51 @@ class TreeMap extends React.Component {
     height: PropTypes.number.isRequired,
 
     data: PropTypes.object.isRequired,
+    /**
+     * Key or accessor to retrieve value of data point
+     */
     getValue: CustomPropTypes.getter,
+    /**
+     * Key or accessor to retrieve children of data point
+     */
     getChildren: CustomPropTypes.getter,
+    /**
+     * Key or accessor to retrieve label for given Node
+     */
     getLabel: CustomPropTypes.getter,
 
-    // options for d3 treemap layout - see d3 docs
+    /**
+     * Function passed in to sort nodes
+     */
     sort: PropTypes.func,
+    // options for d3 treemap layout - see d3 docs
+    /**
+     * See d3 docs for treemap - Adds outer and inner padding to tree
+     */
     padding: PropTypes.number,
+    /**
+     * See d3 docs for treemap - Enables or disables rounding
+     */
     round: PropTypes.bool,
+    /**
+     * If sticky, on data change the TreeMap will not force a recreation of the tree and animate data changes.
+     * Otherwise we recreate the tree given its new props
+     */
     sticky: PropTypes.bool,
-    mode: PropTypes.string,
+    /**
+     * Sets the desired aspect ratio of the generated rectangles
+     */
     ratio: PropTypes.number,
 
+    /**
+     * Inline style object applied to each Node,
+     * or accessor function which returns a style object
+     */
     nodeStyle: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    /**
+     * Inline style object applied to each Label,
+     * or accessor function which returns a style object
+     */
     labelStyle: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     minLabelWidth: PropTypes.number,
     minLabelHeight: PropTypes.number,
@@ -203,7 +235,7 @@ class TreeMap extends React.Component {
     const parentNames = _.uniq(_.map(nodes, "parent.data.name"));
 
     return (
-      <div className="tree-map" {...{ style }}>
+      <div className="rct-tree-map" {...{ style }}>
         {nodes.map((node, i) => (
           <NodeComponent
             {...{

src/utils/Label.js

@@ -67,7 +67,7 @@ export function getLabelXOverhang(scale, label, anchor = "middle") {
   return [overhangLeft, overhangRight];
 }
 
-function getLabelYOverhang(scale, label, anchor = "middle") {
+export function getLabelYOverhang(scale, label, anchor = "middle") {
   const [labelTop, labelBottom] = getLabelYRange(scale, label, anchor);
   const overhangTop = Math.ceil(Math.max(_.min(scale.range()) - labelTop, 0));
   const overhangBottom = Math.ceil(