victory-chart
Version:
Chart Component for Victory
345 lines (313 loc) • 15.3 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _uniq2 = require("lodash/uniq");
var _uniq3 = _interopRequireDefault(_uniq2);
var _assign2 = require("lodash/assign");
var _assign3 = _interopRequireDefault(_assign2);
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 _scale = require("../../helpers/scale");
var _scale2 = _interopRequireDefault(_scale);
var _data = require("../../helpers/data");
var _data2 = _interopRequireDefault(_data);
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 defaultStyles = {
data: {
width: 8,
padding: 6
}
};
var VictoryStack = function (_React$Component) {
_inherits(VictoryStack, _React$Component);
function VictoryStack() {
_classCallCheck(this, VictoryStack);
return _possibleConstructorReturn(this, Object.getPrototypeOf(VictoryStack).apply(this, arguments));
}
_createClass(VictoryStack, [{
key: "componentWillReceiveProps",
value: function componentWillReceiveProps(nextProps) {
var setAnimationState = _wrapper2.default.setAnimationState.bind(this);
setAnimationState(nextProps);
}
}, {
key: "getCalculatedProps",
value: function getCalculatedProps(props, childComponents, style) {
var horizontal = props.horizontal || childComponents.every(function (component) {
return component.props.horizontal;
});
var datasets = childComponents.map(function (child) {
return child.type.getData(child.props) || _data2.default.getData(child.props);
});
var domain = {
x: _wrapper2.default.getStackedDomain(props, "x", datasets),
y: _wrapper2.default.getStackedDomain(props, "y", datasets)
};
var range = {
x: _victoryCore.Helpers.getRange(props, "x"),
y: _victoryCore.Helpers.getRange(props, "y")
};
var baseScale = {
x: _scale2.default.getScaleFromProps(props, "x") || _scale2.default.getDefaultScale(),
y: _scale2.default.getScaleFromProps(props, "y") || _scale2.default.getDefaultScale()
};
var scale = {
x: baseScale.x.domain(domain.x).range(range.x),
y: baseScale.y.domain(domain.y).range(range.y)
};
var categories = {
x: _wrapper2.default.getCategories(props, "x"),
y: _wrapper2.default.getCategories(props, "y")
};
var colorScale = props.colorScale;
return { datasets: datasets, categories: categories, range: range, domain: domain, horizontal: horizontal, scale: scale, style: style, colorScale: colorScale };
}
}, {
key: "addLayoutData",
value: function addLayoutData(props, calculatedProps, datasets, index) {
// eslint-disable-line max-params
return datasets[index].map(function (datum) {
return (0, _assign3.default)(datum, {
yOffset: _wrapper2.default.getY0(datum, index, calculatedProps),
xOffset: props.xOffset
});
});
}
}, {
key: "getLabels",
value: function getLabels(props, datasets, index) {
if (!props.labels) {
return undefined;
}
return datasets.length === index + 1 ? props.labels : undefined;
}
}, {
key: "getChildProps",
value: function getChildProps(props, calculatedProps) {
var categories = calculatedProps.categories;
var domain = calculatedProps.domain;
var scale = calculatedProps.scale;
var horizontal = calculatedProps.horizontal;
return {
height: props.height,
width: props.width,
padding: _victoryCore.Helpers.getPadding(props),
standalone: false,
categories: categories,
domain: domain,
scale: scale,
horizontal: horizontal
};
}
// the old ones were bad
}, {
key: "getNewChildren",
value: function getNewChildren(props, childComponents, calculatedProps) {
var _this2 = this;
var datasets = calculatedProps.datasets;
var childProps = this.getChildProps(props, calculatedProps);
var getAnimationProps = _wrapper2.default.getAnimationProps.bind(this);
return childComponents.map(function (child, index) {
var data = _this2.addLayoutData(props, calculatedProps, datasets, index);
var style = _wrapper2.default.getChildStyle(child, index, calculatedProps);
return _react2.default.cloneElement(child, (0, _assign3.default)({
animate: getAnimationProps(props, child, index),
key: index,
labels: _this2.getLabels(props, datasets, index) || child.props.labels,
labelComponent: props.labelComponent || child.props.labelComponent,
style: style,
data: data
}, childProps));
});
}
}, {
key: "render",
value: function render() {
var props = this.state && this.state.nodesWillExit ? this.state.oldProps : this.props;
var style = _victoryCore.Helpers.getStyles(props.style, defaultStyles, "auto", "100%");
var childComponents = _react2.default.Children.toArray(props.children);
var types = (0, _uniq3.default)(childComponents.map(function (child) {
return child.type.role;
}));
if (types.length > 1) {
_victoryCore.Log.warn("Only components of the same type can be stacked");
}
if (types.some(function (type) {
return type === "group-wrapper";
})) {
_victoryCore.Log.warn("It is not possible to stack groups.");
}
var calculatedProps = this.getCalculatedProps(props, childComponents, style);
var group = _react2.default.createElement(
"g",
{ style: style.parent },
this.getNewChildren(props, childComponents, calculatedProps)
);
return props.standalone ? _react2.default.createElement(
"svg",
{ style: style.parent, viewBox: "0 0 " + props.width + " " + props.height },
group
) : group;
}
}]);
return VictoryStack;
}(_react2.default.Component);
VictoryStack.role = "stack-wrapper";
VictoryStack.propTypes = {
/**
* The animate prop specifies props for VictoryAnimation to use. If this prop is
* given, all children of VictoryStack 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 VictoryStack. The animate prop should
* also be used to specify enter and exit transition configurations with the `onExit`
* and `onEnter` namespaces respectively. VictoryStack 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,
/**
* The categories prop specifies how categorical data for a chart should be ordered.
* This prop should be given as an array of string values, or an object with
* these values for x and y. When categories are not given as an object
* When this prop is set on a wrapper component, it will dictate the categories of
* its the children. If this prop is not set, any categories on child component
* or catigorical data, will be merged to create a shared set of categories.
* @examples ["dogs", "cats", "mice"]
*/
categories: _react.PropTypes.oneOfType([_react.PropTypes.arrayOf(_react.PropTypes.string), _react.PropTypes.shape({
x: _react.PropTypes.arrayOf(_react.PropTypes.string),
y: _react.PropTypes.arrayOf(_react.PropTypes.string)
})]),
/**
* VictoryStack is a wrapper component that controls the layout and animation behaviors of its
* children. VictoryStack creates a stacked layout for VictoryArea, or VictoryBar components.
*/
children: _react.PropTypes.oneOfType([_react.PropTypes.arrayOf(_react.PropTypes.node), _react.PropTypes.node]),
/**
* The colorScale prop is an optional prop that defines the color scale the chart's bars
* will be created on. This prop should be given as an array of CSS colors, or as a string
* corresponding to one of the built in color scales. VictoryBar will automatically assign
* values from this color scale to the bars unless colors are explicitly provided in the
* `dataAttributes` prop.
*/
colorScale: _react.PropTypes.oneOfType([_react.PropTypes.arrayOf(_react.PropTypes.string), _react.PropTypes.oneOf(["greyscale", "qualitative", "heatmap", "warm", "cool", "red", "green", "blue"])]),
/**
* 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 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 horizontal prop determines whether the bars will be laid vertically or
* horizontally. The bars will be vertical if this prop is false or unspecified,
* or horizontal if the prop is set to true.
*/
horizontal: _react.PropTypes.bool,
/**
* The labels prop defines labels that will appear above stack of data.
* This prop should be given as an array of values or as a function of data.
* If given as an array, the number of elements in the array should be equal to
* the length of the data array. Stack labels will appear above the last
* series of the stack, and will override the labels prop of child components.
* To use group labels with individual data labels, individual labels should be
* added directly to data.
* @examples: ["spring", "summer", "fall", "winter"], (datum) => datum.title
*/
labels: _react.PropTypes.oneOfType([_react.PropTypes.func, _react.PropTypes.array]),
/**
* The labelComponent prop takes in an entire, HTML-complete label
* component which will be used to create labels for each stack of data in the
* chart. The new element created from the passed labelComponent will have
* property data provided by the bar's datum; properties x, y, textAnchor,
* and verticalAnchor preserved or default values provided by the data component; and
* styles filled out with defaults provided by the component, and overrides from
* the datum. If labelComponent is omitted, a new VictoryLabel will be
* created with props and styles from the bar.
*/
labelComponent: _react.PropTypes.element,
/**
* 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 function, or as an object that specifies separate functions for x and y.
* @examples d3.time.scale(), {x: d3.scale.linear(), y: d3.scale.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.
*/
standalone: _react.PropTypes.bool,
/**
* The style prop specifies styles for your grouped chart. These styles will be
* applied to all grouped children
*/
style: _react.PropTypes.shape({
parent: _react.PropTypes.object,
data: _react.PropTypes.object,
labels: _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,
/**
* The xOffset prop is used for grouping stacks of bars. This prop will be set
* by the VictoryGroup component wrapper, or can be set manually.
*/
xOffset: _react.PropTypes.number
};
VictoryStack.defaultProps = {
scale: "linear",
height: 300,
width: 450,
padding: 50,
standalone: true
};
VictoryStack.getDomain = _wrapper2.default.getStackedDomain.bind(_wrapper2.default);
VictoryStack.getData = _wrapper2.default.getData.bind(_wrapper2.default);
exports.default = VictoryStack;