victory-chart
Version:
Chart Component for Victory
279 lines (165 loc) • 11.2 kB
JavaScript
Object.defineProperty(exports,"__esModule",{value:true});var _defaults2=require("lodash/defaults");var _defaults3=_interopRequireDefault(_defaults2);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 _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 fallbackProps={
width:450,
height:300,
padding:50};var
VictoryChart=function(_React$Component){_inherits(VictoryChart,_React$Component);
function VictoryChart(props){_classCallCheck(this,VictoryChart);var _this=_possibleConstructorReturn(this,(VictoryChart.__proto__||Object.getPrototypeOf(VictoryChart)).call(this,
props));
if(props.animate){
_this.state={
nodesShouldLoad:false,
nodesDoneLoad:false,
animating:true};
_this.setAnimationState=_wrapper2.default.setAnimationState.bind(_this);
}return _this;
}_createClass(VictoryChart,[{key:"componentWillReceiveProps",value:function componentWillReceiveProps(
nextProps){
if(this.props.animate){
this.setAnimationState(this.props,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,scale=calculatedProps.scale,originSign=calculatedProps.originSign;
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;
var orientation=_axis2.default.getOrientation(child,axis,originSign[axis]);
return{
domain:domain[axis],
scale:scale[axis],
tickValues:tickValues,
tickFormat:tickFormat,
offsetY:child.props.offsetY||offsetY,
offsetX:child.props.offsetX||offsetX,
crossAxis:crossAxis,
orientation:orientation};
}},{key:"getChildProps",value:function getChildProps(
child,props,calculatedProps){
var axisChild=_axis2.default.findAxisComponents([child]);
if(axisChild.length>0){
return this.getAxisProps(axisChild[0],props,calculatedProps);
}
return{
domain:calculatedProps.domain,
scale:calculatedProps.scale,
categories:calculatedProps.categories};
}},{key:"getCalculatedProps",value:function getCalculatedProps(
props,childComponents){
var style=this.getStyles(props);
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,"x",childComponents),
y:_helperMethods2.default.getDomain(props,"y",childComponents)};
var range={
x:_victoryCore.Helpers.getRange(props,"x"),
y:_victoryCore.Helpers.getRange(props,"y")};
var baseScale={
x:_victoryCore.Scale.getScaleFromProps(props,"x")||
axisComponents.x&&axisComponents.x.type.getScale(axisComponents.x.props)||
_victoryCore.Scale.getDefaultScale(),
y:_victoryCore.Scale.getScaleFromProps(props,"y")||
axisComponents.y&&axisComponents.y.type.getScale(axisComponents.y.props)||
_victoryCore.Scale.getDefaultScale()};
var scale={
x:baseScale.x.domain(domain.x).range(range.x),
y:baseScale.y.domain(domain.y).range(range.y)};
var origin={
x:_axis2.default.getOrigin(domain.x),
y:_axis2.default.getOrigin(domain.y)};
var originSign={
x:_axis2.default.getOriginSign(origin.x,domain.x),
y:_axis2.default.getOriginSign(origin.y,domain.y)};
var categories={
x:_wrapper2.default.getCategories(props,"x",childComponents),
y:_wrapper2.default.getCategories(props,"y",childComponents)};
var stringMap={
x:_helperMethods2.default.createStringMap(props,"x",childComponents),
y:_helperMethods2.default.createStringMap(props,"y",childComponents)};
var defaultDomainPadding=_helperMethods2.default.getDefaultDomainPadding(childComponents,horizontal);
return{
axisComponents:axisComponents,categories:categories,domain:domain,horizontal:horizontal,scale:scale,stringMap:stringMap,
style:style,origin:origin,originSign:originSign,defaultDomainPadding:defaultDomainPadding};
}},{key:"getNewChildren",value:function getNewChildren(
props,childComponents,calculatedProps){
var baseStyle=calculatedProps.style.parent;
var getAnimationProps=_wrapper2.default.getAnimationProps.bind(this);
var newChildren=[];
for(var index=0,len=childComponents.length;index<len;index++){
var child=childComponents[index];
var style=(0,_defaults3.default)({},child.props.style,{parent:baseStyle});
var childProps=this.getChildProps(child,props,calculatedProps);
var newProps=(0,_defaults3.default)({
animate:getAnimationProps(props,child,index),
height:props.height,
width:props.width,
clipWidth:props.width,
clipHeight:props.height,
domainPadding:child.props.domainPadding||
props.domainPadding||calculatedProps.defaultDomainPadding,
padding:_victoryCore.Helpers.getPadding(props),
ref:index,
key:index,
theme:props.theme,
standalone:false,
style:style},
childProps);
newChildren[index]=_react2.default.cloneElement(child,newProps);
}
return newChildren;
}},{key:"getContainer",value:function getContainer(
props,calculatedProps){var
width=props.width,height=props.height,containerComponent=props.containerComponent;var
scale=calculatedProps.scale,style=calculatedProps.style;
var parentProps=(0,_defaults3.default)(
{},
containerComponent.props,
{style:style.parent,scale:scale,width:width,height:height});
return _react2.default.cloneElement(containerComponent,parentProps);
}},{key:"renderGroup",value:function renderGroup(
children,style){
return _react2.default.cloneElement(
this.props.groupComponent,
{role:"presentation",style:style},
children);
}},{key:"render",value:function render()
{
var props=this.state&&this.state.nodesWillExit?
this.state.oldProps||this.props:this.props;
var modifiedProps=_victoryCore.Helpers.modifyProps(props,fallbackProps,"chart");var
standalone=modifiedProps.standalone,events=modifiedProps.events,eventKey=modifiedProps.eventKey;
var childComponents=_helperMethods2.default.getChildComponents(modifiedProps,
modifiedProps.defaultAxes);
var calculatedProps=this.getCalculatedProps(modifiedProps,childComponents);
var newChildren=this.getNewChildren(modifiedProps,childComponents,calculatedProps);
var group=this.renderGroup(newChildren,calculatedProps.style.parent);
var container=standalone?this.getContainer(modifiedProps,calculatedProps):group;
if(events){
return(
_react2.default.createElement(_victoryCore.VictorySharedEvents,{events:events,eventKey:eventKey,container:container},
newChildren));
}
return standalone?_react2.default.cloneElement(container,container.props,group):group;
}}]);return VictoryChart;}(_react2.default.Component);VictoryChart.displayName="VictoryChart";VictoryChart.propTypes={animate:_react.PropTypes.object,children:_react2.default.PropTypes.oneOfType([_react2.default.PropTypes.arrayOf(_react2.default.PropTypes.node),_react2.default.PropTypes.node]),containerComponent:_react.PropTypes.element,defaultAxes:_react.PropTypes.shape({independent:_react.PropTypes.element,dependent:_react.PropTypes.element}),domain:_react.PropTypes.oneOfType([_victoryCore.PropTypes.domain,_react.PropTypes.shape({x:_victoryCore.PropTypes.domain,y:_victoryCore.PropTypes.domain})]),domainPadding:_react.PropTypes.oneOfType([_react.PropTypes.shape({x:_react.PropTypes.oneOfType([_react.PropTypes.number,_victoryCore.PropTypes.domain]),y:_react.PropTypes.oneOfType([_react.PropTypes.number,_victoryCore.PropTypes.domain])}),_react.PropTypes.number]),events:_react.PropTypes.arrayOf(_react.PropTypes.shape({childName:_react.PropTypes.oneOfType([_react.PropTypes.string,_react.PropTypes.array]),target:_react.PropTypes.string,eventKey:_react.PropTypes.oneOfType([_react.PropTypes.array,_react.PropTypes.func,_victoryCore.PropTypes.allOfType([_victoryCore.PropTypes.integer,_victoryCore.PropTypes.nonNegative]),_react.PropTypes.string]),eventHandlers:_react.PropTypes.object})),eventKey:_react.PropTypes.oneOfType([_react.PropTypes.func,_victoryCore.PropTypes.allOfType([_victoryCore.PropTypes.integer,_victoryCore.PropTypes.nonNegative]),_react.PropTypes.string]),groupComponent:_react.PropTypes.element,height:_victoryCore.PropTypes.nonNegative,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})]),scale:_react.PropTypes.oneOfType([_victoryCore.PropTypes.scale,_react.PropTypes.shape({x:_victoryCore.PropTypes.scale,y:_victoryCore.PropTypes.scale})]),standalone:_react.PropTypes.bool,style:_react.PropTypes.object,theme:_react.PropTypes.object,width:_victoryCore.PropTypes.nonNegative};VictoryChart.defaultProps={standalone:true,containerComponent:_react2.default.createElement(_victoryCore.VictoryContainer,null),groupComponent:_react2.default.createElement("g",null),theme:_victoryCore.VictoryTheme.grayscale,defaultAxes:{independent:_react2.default.createElement(_victoryAxis2.default,null),dependent:_react2.default.createElement(_victoryAxis2.default,{dependentAxis:true})}};exports.default=VictoryChart;