Histogram improvements + tests (spotify#57)

* Add react-docgen to devDependencies

* Histogram improvements - calculate yDomain and based off given data. Include mouse interaction and styling props. Add tests.

* Test horizontal props for BarChart

* Histogram - move binning into render function to handle dynamic data, make value prop a function, improve docs, remove unused code

* rebuild docs

docs/build/index.html

@@ -31,5 +31,5 @@
     </div>
 
     <div class="container-fluid" id="container">Loading...</div>
-<script type="text/javascript" src="bundle.516c9163d916aee71935.js"></script></body>
+<script type="text/javascript" src="bundle.3d450b6d776ceddf9090.js"></script></body>
 </html>

docs/src/docs/Histogram/examples/Histogram.js.example

@@ -1,34 +1,48 @@
 const HistogramExample = (props) => {
   const randomNormalArr = _.times(1000, d3.randomNormal(0, 1)).concat(_.times(1000, d3.randomNormal(3, 0.5)));
-  const domain = {x: [-4, 5], y: [0, 200]};
 
   return <div>
     <div>
-      <XYPlot width={450} height={300}>
+      <XYPlot
+        width={450}
+        height={300}
+      >
         <XAxis /><YAxis />
         <Histogram
-          data={randomNormalArr} value={d => d}
+          data={randomNormalArr}
+          value={d => d}
+        />
+      </XYPlot>
+    </div>
+    <div>
+      <h4>With nicing applied</h4>
+      <XYPlot
+        width={450}
+        height={300}
+      >
+        <XAxis /><YAxis />
+        <Histogram
+          data={randomNormalArr}
+          value={d => d}
+          nice={true}
+          thresholds={10}
+        />
+      </XYPlot>
+    </div>
+    <div>
+      <h4>With specified binDomain</h4>
+      <XYPlot
+        width={450}
+        height={300}
+      >
+        <XAxis /><YAxis />
+        <Histogram
+          data={randomNormalArr}
+          value={d => d}
+          binDomain={[-6, 6]}
         />
       </XYPlot>
     </div>
-    {/*<div>*/}
-      {/*<XYPlot*/}
-        {/*domain={domain}*/}
-        {/*marginLeft={40}*/}
-        {/*marginRight={8}*/}
-        {/*width={450} height={40}*/}
-        {/*showGrid={false}*/}
-        {/*showLabels={false}*/}
-        {/*showTicks={false}*/}
-      {/*>*/}
-        {/*<ScatterPlot*/}
-          {/*data={randomNormalArr}*/}
-          {/*x={d => d}*/}
-          {/*getY={() => Math.random()*200}*/}
-          {/*pointRadius={1}*/}
-        {/*/>*/}
-      {/*</XYPlot>*/}
-    {/*</div>*/}
   </div>;
 };
 

docs/src/docs/Histogram/propDocs.json

@@ -23,6 +23,36 @@
         }
       ],
       "returns": null
+    },
+    {
+      "name": "computeHistogram",
+      "docblock": null,
+      "modifiers": [
+        "static"
+      ],
+      "params": [
+        {
+          "name": "data",
+          "type": null
+        },
+        {
+          "name": "thresholds",
+          "type": null
+        },
+        {
+          "name": "accessor",
+          "type": null
+        },
+        {
+          "name": "binDomain",
+          "type": null
+        },
+        {
+          "name": "nice",
+          "type": null
+        }
+      ],
+      "returns": null
     }
   ],
   "props": {
@@ -31,7 +61,11 @@
         "name": "array"
       },
       "required": true,
-      "description": "the array of data objects"
+      "description": "the array of data objects",
+      "defaultValue": {
+        "value": "[]",
+        "computed": false
+      }
     },
     "value": {
       "type": {
@@ -48,12 +82,107 @@
       "required": false,
       "description": ""
     },
-    "scale": {
+    "xScale": {
       "type": {
-        "name": "object"
+        "name": "func"
       },
       "required": false,
-      "description": ""
+      "description": "D3 scale for X axis - provided by XYPlot"
+    },
+    "yScale": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "D3 scale for Y axis - provided by XYPlot"
+    },
+    "thresholds": {
+      "type": {
+        "name": "union",
+        "value": [
+          {
+            "name": "number"
+          },
+          {
+            "name": "array"
+          }
+        ]
+      },
+      "required": true,
+      "description": "Following [d3's thresholds documentation](https://github.com/d3/d3-array#histogram_thresholds) ...\n\nIf a number `count`  is specified, then the domain will be uniformly divided into approximately `count` bins.\n\nIf an array `[x0, x1 ... xN]` is specified, then any value less than `x0` will be placed in the first bin; any value greater than\nor equal to `x0` but less than `x1` will be placed in the second bin; and so on. The generated histogram will have `array.length` + 1 bins.",
+      "defaultValue": {
+        "value": "30",
+        "computed": false
+      }
+    },
+    "binDomain": {
+      "type": {
+        "name": "array"
+      },
+      "required": false,
+      "description": "The domain to which your data will be mapped and binned. binDomain is defined as an array `[min, max]`.\n\nWarning: This prop takes priority if `nice = true`"
+    },
+    "nice": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Nicely rounds the start and end values of your bins. Implemented using [d3's ticks nicing logic](https://github.com/d3/d3-array#ticks)",
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      }
+    },
+    "barClassName": {
+      "type": {
+        "name": "union",
+        "value": [
+          {
+            "name": "string"
+          },
+          {
+            "name": "func"
+          }
+        ]
+      },
+      "required": false,
+      "description": "Class attribute to be applied to each bar.\nor accessor function which returns a class;"
+    },
+    "barStyle": {
+      "type": {
+        "name": "union",
+        "value": [
+          {
+            "name": "object"
+          },
+          {
+            "name": "func"
+          }
+        ]
+      },
+      "required": false,
+      "description": "Inline style object to be applied to each bar,\nor accessor function which returns a style object;"
+    },
+    "onMouseMoveBar": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "`mousemove` event handler callback, called when user's mouse moves within a bar."
+    },
+    "onMouseEnterBar": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "`mouseenter` event handler callback, called when user's mouse enters a bar."
+    },
+    "onMouseLeaveBar": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "`mouseleave` event handler callback, called when user's mouse leaves a bar."
     }
   }
 }