diff --git a/package.json b/package.json index 4712c122..6f56fcc7 100644 --- a/package.json +++ b/package.json @@ -66,6 +66,8 @@ "react-router": "^4.1.2", "react-router-dom": "^4.1.2", "shelljs": "^0.7.8", + "sinon": "^4.1.2", + "sinon-chai": "^2.14.0", "style-loader": "^0.18.2", "webpack": "^3.4.1", "webpack-dev-server": "^2.7.1" diff --git a/src/Bar.js b/src/Bar.js index 78e121d5..e011a933 100644 --- a/src/Bar.js +++ b/src/Bar.js @@ -6,7 +6,7 @@ import {hasXYScales} from './utils/Scale'; import PropTypes from 'prop-types'; /** - * Bar is a low-level component to be used in XYPlot-type charts (namely BarChart) + * Bar is a low-level component to be used in XYPlot-type charts (namely BarChart). * It is specified in terms of a range (min & max) of values on one axis (the bar's long axis) * and a single value on the other axis. * Passing props `xValue`, `xEndValue` and `yValue` specifies a horizontal bar, @@ -16,14 +16,54 @@ import PropTypes from 'prop-types'; export default class Bar extends React.Component { static propTypes = { + /** + * D3 scales for the X and Y axes of the chart, in {x, y} object format. + */ scale: PropTypes.shape({x: PropTypes.func.isRequired, y: PropTypes.func.isRequired}), + /** + * For a vertical bar, xValue represents the X data value on which the bar is centered. + * For a horizontal bar, represents the *starting* X data value of the bar, ie. the minimum of the range it spans + */ xValue: PropTypes.any, + /** + * For a horizontal bar, yValue represents the Y data value on which the bar is centered. + * For a vertical bar, represents the *starting* Y data value of the bar, ie. the minimum of the range it spans + */ yValue: PropTypes.any, + /** + * For a horizontal bar, represents the *ending* X data value of the bar, ie. the maximum of the range it spans. + * Should be undefined if the bar is vertical. + */ xEndValue: PropTypes.any, + /** + * For a vertical bar, represents the *ending* Y data value of the bar, ie. the maximum of the range it spans. + * Should be undefined if the bar is horizontal. + */ yEndValue: PropTypes.any, + /** + * The thickness of the bar, in pixels. (width of vertical bar, or height of horizontal bar) + */ thickness: PropTypes.number, + /** + * Class name(s) to be included on the bar's element + */ className: PropTypes.string, - style: PropTypes.object + /** + * Inline style object to be included on the bar's element + */ + style: PropTypes.object, + /** + * onMouseMove event handler callback, called when user's mouse moves within the bar. + */ + onMouseMove: PropTypes.func, + /** + * onMouseEnter event handler callback, called when user's mouse enters the bar. + */ + onMouseEnter: PropTypes.func, + /** + * onMouseLeave event handler callback, called when user's mouse leaves the bar. + */ + onMouseLeave: PropTypes.func }; static defaultProps = { xValue: 0, @@ -65,7 +105,7 @@ export default class Bar extends React.Component { return } } diff --git a/src/RangeBarChart.js b/src/RangeBarChart.js index 7f99d75b..eb57325e 100644 --- a/src/RangeBarChart.js +++ b/src/RangeBarChart.js @@ -1,4 +1,5 @@ import React from 'react'; +import _ from 'lodash'; import invariant from 'invariant'; import PropTypes from 'prop-types'; import * as CustomPropTypes from './utils/CustomPropTypes'; diff --git a/src/XYPlot.js b/src/XYPlot.js index beba1263..d49e3f98 100644 --- a/src/XYPlot.js +++ b/src/XYPlot.js @@ -45,12 +45,34 @@ function getMouseOptions(event, {scale, height, width, margin}) { class XYPlot extends React.Component { static propTypes = { + /** + * (outer) width of the chart (SVG element). + */ width: PropTypes.number, + /** + * (outer) width of the chart (SVG element). + */ height: PropTypes.number, - scale: PropTypes.object, - scaleType: PropTypes.object, + /** + * The X and/or Y domains of the data in {x: [...], y: [...]} format. + * 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. + */ domain: PropTypes.object, + /** + * + */ margin: PropTypes.object, + + /** + * d3 scales for the X and Y axes of the chart, in {x, y} object format. + * (optional, normally determined automatically by XYPlot) + */ + scale: PropTypes.object, + + scaleType: PropTypes.object, + spacing: PropTypes.object, // todo spacing & padding... padding: PropTypes.object,