victory-chart
Version:
Chart Component for Victory
305 lines (274 loc) • 13.7 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
var _defaults2 = require("lodash/defaults");
var _defaults3 = _interopRequireDefault(_defaults2);
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _react = require("react");
var _react2 = _interopRequireDefault(_react);
var _victoryCore = require("victory-core");
var _victoryAxis = require("../victory-axis/victory-axis");
var _victoryAxis2 = _interopRequireDefault(_victoryAxis);
var _helperMethods = require("./helper-methods");
var _helperMethods2 = _interopRequireDefault(_helperMethods);
var _axis = require("../../helpers/axis");
var _axis2 = _interopRequireDefault(_axis);
var _scale = require("../../helpers/scale");
var _scale2 = _interopRequireDefault(_scale);
var _wrapper = require("../../helpers/wrapper");
var _wrapper2 = _interopRequireDefault(_wrapper);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var defaultAxes = {
independent: _react2.default.createElement(_victoryAxis2.default, null),
dependent: _react2.default.createElement(_victoryAxis2.default, { dependentAxis: true })
};
var VictoryChart = function (_React$Component) {
_inherits(VictoryChart, _React$Component);
function VictoryChart() {
_classCallCheck(this, VictoryChart);
return _possibleConstructorReturn(this, Object.getPrototypeOf(VictoryChart).apply(this, arguments));
}
_createClass(VictoryChart, [{
key: "componentWillReceiveProps",
value: function componentWillReceiveProps(nextProps) {
var setAnimationState = _wrapper2.default.setAnimationState.bind(this);
setAnimationState(nextProps);
}
}, {
key: "getStyles",
value: function getStyles(props) {
var styleProps = props.style && props.style.parent;
return {
parent: (0, _defaults3.default)({
height: "auto",
width: "100%"
}, styleProps) };
}
}, {
key: "getAxisProps",
value: function getAxisProps(child, props, calculatedProps) {
var domain = calculatedProps.domain;
var scale = calculatedProps.scale;
var axis = child.type.getAxis(child.props);
var axisOffset = _helperMethods2.default.getAxisOffset(props, calculatedProps);
var tickValues = _helperMethods2.default.getTicks(calculatedProps, axis, child);
var tickFormat = child.props.tickFormat || _helperMethods2.default.getTickFormat(child, axis, calculatedProps);
var offsetY = axis === "y" ? undefined : axisOffset.y;
var offsetX = axis === "x" ? undefined : axisOffset.x;
var crossAxis = child.props.crossAxis === false ? false : true;
return {
domain: domain[axis],
scale: scale[axis],
tickValues: tickValues,
tickFormat: tickFormat,
offsetY: child.props.offsetY || offsetY,
offsetX: child.props.offsetX || offsetX,
crossAxis: crossAxis
};
}
}, {
key: "getChildProps",
value: function getChildProps(child, props, calculatedProps) {
var type = child.type && child.type.role;
if (type === "axis") {
return this.getAxisProps(child, props, calculatedProps);
}
return {
domain: calculatedProps.domain,
scale: calculatedProps.scale,
categories: calculatedProps.categories
};
}
}, {
key: "getCalculatedProps",
value: function getCalculatedProps(props, childComponents) {
var horizontal = childComponents.some(function (component) {
return component.props.horizontal;
});
var axisComponents = {
x: _axis2.default.getAxisComponent(childComponents, "x"),
y: _axis2.default.getAxisComponent(childComponents, "y")
};
var domain = {
x: _helperMethods2.default.getDomain(props, childComponents, "x"),
y: _helperMethods2.default.getDomain(props, childComponents, "y")
};
var range = {
x: _victoryCore.Helpers.getRange(props, "x"),
y: _victoryCore.Helpers.getRange(props, "y")
};
var baseScale = {
x: _scale2.default.getScaleFromProps(props, "x") || axisComponents.x && axisComponents.x.type.getScale(axisComponents.x.props) || _scale2.default.getDefaultScale(),
y: _scale2.default.getScaleFromProps(props, "y") || axisComponents.y && axisComponents.y.type.getScale(axisComponents.y.props) || _scale2.default.getDefaultScale()
};
var scale = {
x: baseScale.x.domain(domain.x).range(range.x),
y: baseScale.y.domain(domain.y).range(range.y)
};
// TODO: check
var categories = {
x: _wrapper2.default.getCategories(childComponents, props, "x"),
y: _wrapper2.default.getCategories(childComponents, props, "y")
};
var stringMap = {
x: _helperMethods2.default.createStringMap(childComponents, "x"),
y: _helperMethods2.default.createStringMap(childComponents, "y")
};
return { axisComponents: axisComponents, categories: categories, domain: domain, horizontal: horizontal, scale: scale, stringMap: stringMap };
}
}, {
key: "getNewChildren",
value: function getNewChildren(props, childComponents, baseStyle) {
var _this2 = this;
var calculatedProps = this.getCalculatedProps(props, childComponents);
var getAnimationProps = _wrapper2.default.getAnimationProps.bind(this);
return childComponents.map(function (child, index) {
var style = (0, _defaults3.default)({}, child.props.style, { parent: baseStyle.parent });
var childProps = _this2.getChildProps(child, props, calculatedProps);
var newProps = (0, _defaults3.default)({
animate: getAnimationProps(props, child, index),
height: props.height,
width: props.width,
padding: _victoryCore.Helpers.getPadding(props),
ref: index,
key: index,
standalone: false,
style: style
}, childProps);
return _react2.default.cloneElement(child, newProps);
});
}
}, {
key: "render",
value: function render() {
var props = this.state && this.state.nodesWillExit ? this.state.oldProps : this.props;
var style = this.getStyles(props);
var childComponents = _helperMethods2.default.getChildComponents(props, defaultAxes);
var group = _react2.default.createElement(
"g",
{ style: style.parent },
this.getNewChildren(props, childComponents, style)
);
return this.props.standalone ? _react2.default.createElement(
"svg",
_extends({
style: style.parent,
viewBox: "0 0 " + props.width + " " + props.height
}, props.events),
group
) : group;
}
}]);
return VictoryChart;
}(_react2.default.Component);
VictoryChart.propTypes = {
/**
* The animate prop specifies props for VictoryAnimation to use. If this prop is
* given, all children defined in chart will pass the options specified in this prop to
* VictoryTransition and VictoryAnimation. Child animation props will be added for any
* values not provided via the animation prop for VictoryChart. The animate prop should
* also be used to specify enter and exit transition configurations with the `onExit`
* and `onEnter` namespaces respectively. VictoryChart will coodrinate transitions between all
* of its child components so that animation stays in sync
* @examples {duration: 500, onEnd: () => {}, onEnter: {duration: 500, before: () => ({y: 0})})}
*/
animate: _react.PropTypes.object,
/**
* VictoryChart is a wrapper component that controls the layout and animation behaviors of its
* children. VictoryChart works with VictoryArea, VictoryAxis, VictoryBar, VictoryLine, and
* VictoryScatter. Wrapper components like VictoryGroup and VictoryStack may also be
* wrapped with VictoryChart. If not children are provided, VictoryChart will render a
* set of empty axes.
*/
children: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.arrayOf(_react2.default.PropTypes.node), _react2.default.PropTypes.node]),
/**
* The domain prop describes the range of values your chart will include. This prop can be
* given as a array of the minimum and maximum expected values for your chart,
* or as an object that specifies separate arrays for x and y.
* If this prop is not provided, a domain will be calculated from data, or other
* available information.
* @examples: [-1, 1], {x: [0, 100], y: [0, 1]}
*/
domain: _react.PropTypes.oneOfType([_victoryCore.PropTypes.domain, _react.PropTypes.shape({
x: _victoryCore.PropTypes.domain,
y: _victoryCore.PropTypes.domain
})]),
/**
* The domainPadding prop specifies a number of pixels of padding to add to the
* beginning and end of a domain. This prop is useful for explicitly spacing ticks farther
* from the origin to prevent crowding. This prop should be given as an object with
* numbers specified for x and y.
*/
domainPadding: _react.PropTypes.oneOfType([_react.PropTypes.shape({
x: _victoryCore.PropTypes.nonNegative,
y: _victoryCore.PropTypes.nonNegative
}), _victoryCore.PropTypes.nonNegative]),
/**
* The events prop attaches arbitrary event handlers to the top level chart svg.
* To attach events to individual pieces of data, use the events prop in child componenets.
* Event handlers on VictoryCharts are called with their corresponding events.
* @examples {(evt) => alert(`x: ${evt.clientX}, y: ${evt.clientY}`)}
*/
events: _react.PropTypes.object,
/**
* The height props specifies the height the svg viewBox of the chart container.
* This value should be given as a number of pixels
*/
height: _victoryCore.PropTypes.nonNegative,
/**
* The padding props specifies the amount of padding in number of pixels between
* the edge of the chart and any rendered child components. This prop can be given
* as a number or as an object with padding specified for top, bottom, left
* and right.
*/
padding: _react.PropTypes.oneOfType([_react.PropTypes.number, _react.PropTypes.shape({
top: _react.PropTypes.number,
bottom: _react.PropTypes.number,
left: _react.PropTypes.number,
right: _react.PropTypes.number
})]),
/**
* The scale prop determines which scales your chart should use. This prop can be
* given as a string or a function, or as an object that specifies separate scales for x and y.
* Supported string scales are "linear", "time", "log" and "sqrt"
* @examples d3.time.scale(), {x: "linear", y: "log" }
*/
scale: _react.PropTypes.oneOfType([_victoryCore.PropTypes.scale, _react.PropTypes.shape({
x: _victoryCore.PropTypes.scale,
y: _victoryCore.PropTypes.scale
})]),
/**
* The standalone prop determines whether the component will render a standalone svg
* or a <g> tag that will be included in an external svg. Set standalone to false to
* compose VictoryChart with other components within an enclosing <svg> tag. Victory
* Component are responsive by default. If you need to create a fixed-size chart, set
* standalone to false, and wrap VictoryChart in a custom <svg>
*/
standalone: _react.PropTypes.bool,
/**
* The style prop specifies styles for your chart. Any valid inline style properties
* will be applied. Height, width, and padding should be specified via the height,
* width, and padding props, as they are used to calculate the alignment of
* components within chart.
* @examples {border: "1px solid #ccc", margin: "2%", maxWidth: "40%"}
*/
style: _react.PropTypes.object,
/**
* The width props specifies the width of the svg viewBox of the chart container
* This value should be given as a number of pixels
*/
width: _victoryCore.PropTypes.nonNegative
};
VictoryChart.defaultProps = {
events: {},
height: 300,
width: 450,
padding: 50,
standalone: true
};
exports.default = VictoryChart;