victory-chart
Version:
Chart Component for Victory
271 lines (145 loc) • 11.3 kB
JavaScript
Object.defineProperty(exports,"__esModule",{value:true});var _defaults2=require("lodash/defaults");var _defaults3=_interopRequireDefault(_defaults2);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 _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
VictoryStack=function(_React$Component){_inherits(VictoryStack,_React$Component);
function VictoryStack(props){_classCallCheck(this,VictoryStack);var _this=_possibleConstructorReturn(this,(VictoryStack.__proto__||Object.getPrototypeOf(VictoryStack)).call(this,
props));
if(props.animate){
_this.state={
nodesShouldLoad:false,
nodesDoneLoad:false,
animating:true};
_this.setAnimationState=_wrapper2.default.setAnimationState.bind(_this);
}return _this;
}_createClass(VictoryStack,[{key:"componentWillReceiveProps",value:function componentWillReceiveProps(
nextProps){
if(this.props.animate){
this.setAnimationState(this.props,nextProps);
}
}},{key:"getCalculatedProps",value:function getCalculatedProps(
props,childComponents,style){
var horizontal=props.horizontal||childComponents.every(
function(component){return component.props.horizontal;});
var datasets=_wrapper2.default.getDataFromChildren(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:_victoryCore.Scale.getScaleFromProps(props,"x")||_victoryCore.Scale.getDefaultScale(),
y:_victoryCore.Scale.getScaleFromProps(props,"y")||_victoryCore.Scale.getDefaultScale()};
var xScale=baseScale.x.domain(domain.x).range(range.x);
var yScale=baseScale.y.domain(domain.y).range(range.y);
var scale={
x:horizontal?yScale:xScale,
y:horizontal?xScale:yScale};
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){
var xOffset=props.xOffset||0;
return datasets[index].map(function(datum){
var yOffset=_wrapper2.default.getY0(datum,index,calculatedProps)||0;
return(0,_assign3.default)({},datum,{
y0:datum.y instanceof Date?yOffset&&new Date(yOffset)||datum.y:yOffset,
y1:datum.y instanceof Date?new Date(+datum.y+ +yOffset):datum.y+yOffset,
x1:datum.x instanceof Date?new Date(+datum.x+ +xOffset):datum.x+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,domain=calculatedProps.domain,scale=calculatedProps.scale,horizontal=calculatedProps.horizontal;
return{
height:props.height,
width:props.width,
padding:_victoryCore.Helpers.getPadding(props),
standalone:false,
theme:props.theme,
categories:categories,
domain:domain,
scale:scale,
horizontal:horizontal};
}},{key:"getColorScale",value:function getColorScale(
props,child){
var role=child.type&&child.type.role;
var colorScaleOptions=child.props.colorScale||props.colorScale;
if(role!=="group"&&role!=="stack"){
return undefined;
}
return props.theme?colorScaleOptions||props.theme.props.colorScale:
colorScaleOptions;
}},{key:"getNewChildren",value:function getNewChildren(
props,childComponents,calculatedProps){var
datasets=calculatedProps.datasets;
var childProps=this.getChildProps(props,calculatedProps);
var getAnimationProps=_wrapper2.default.getAnimationProps.bind(this);
var newChildren=[];
for(var index=0,len=childComponents.length;index<len;index++){
var child=childComponents[index];
var data=this.addLayoutData(props,calculatedProps,datasets,index);
var style=_wrapper2.default.getChildStyle(child,index,calculatedProps);
var labels=props.labels?this.getLabels(props,datasets,index):child.props.labels;
newChildren[index]=_react2.default.cloneElement(child,(0,_assign3.default)({
animate:getAnimationProps(props,child,index),
key:index,
labels:labels,
domainPadding:child.props.domainPadding||props.domainPadding,
theme:props.theme,
labelComponent:props.labelComponent||child.props.labelComponent,
style:style,
colorScale:this.getColorScale(props,child),
data:data},
childProps));
}
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,"stack");var
theme=modifiedProps.theme,standalone=modifiedProps.standalone,events=modifiedProps.events,eventKey=modifiedProps.eventKey;
var fallbackStyle=theme&&theme.stack&&theme.stack.style?
theme.stack.style:{};
var style=_victoryCore.Helpers.getStyles(modifiedProps.style,fallbackStyle,"auto","100%");
var childComponents=_react2.default.Children.toArray(modifiedProps.children);
var calculatedProps=this.getCalculatedProps(modifiedProps,childComponents,style);
var newChildren=this.getNewChildren(modifiedProps,childComponents,calculatedProps);
var group=this.renderGroup(newChildren,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 VictoryStack;}(_react2.default.Component);VictoryStack.displayName="VictoryStack";VictoryStack.role="stack";VictoryStack.propTypes={animate:_react.PropTypes.object,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)})]),children:_react2.default.PropTypes.oneOfType([_react2.default.PropTypes.arrayOf(_react2.default.PropTypes.node),_react2.default.PropTypes.node]),colorScale:_react.PropTypes.oneOfType([_react.PropTypes.arrayOf(_react.PropTypes.string),_react.PropTypes.oneOf(["grayscale","qualitative","heatmap","warm","cool","red","green","blue"])]),containerComponent:_react.PropTypes.element,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]),dataComponent:_react.PropTypes.element,domain:_react.PropTypes.oneOfType([_victoryCore.PropTypes.domain,_react.PropTypes.shape({x:_victoryCore.PropTypes.domain,y:_victoryCore.PropTypes.domain})]),events:_react.PropTypes.arrayOf(_react.PropTypes.shape({childName:_react.PropTypes.oneOfType([_react.PropTypes.string,_react.PropTypes.array]),target:_react.PropTypes.oneOf(["data","labels","parent"]),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,horizontal:_react.PropTypes.bool,labels:_react.PropTypes.oneOfType([_react.PropTypes.func,_react.PropTypes.array]),labelComponent:_react.PropTypes.element,name:_react.PropTypes.string,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})]),samples:_victoryCore.PropTypes.nonNegative,scale:_react.PropTypes.oneOfType([_victoryCore.PropTypes.scale,_react.PropTypes.shape({x:_victoryCore.PropTypes.scale,y:_victoryCore.PropTypes.scale})]),sharedEvents:_react.PropTypes.shape({events:_react.PropTypes.array,getEventState:_react.PropTypes.func}),standalone:_react.PropTypes.bool,style:_react.PropTypes.shape({parent:_react.PropTypes.object,data:_react.PropTypes.object,labels:_react.PropTypes.object}),theme:_react.PropTypes.object,width:_victoryCore.PropTypes.nonNegative,xOffset:_react.PropTypes.number};VictoryStack.defaultProps={scale:"linear",standalone:true,containerComponent:_react2.default.createElement(_victoryCore.VictoryContainer,null),groupComponent:_react2.default.createElement("g",null),theme:_victoryCore.VictoryTheme.grayscale};VictoryStack.getDomain=_wrapper2.default.getStackedDomain.bind(_wrapper2.default);VictoryStack.getData=_wrapper2.default.getData.bind(_wrapper2.default);exports.default=VictoryStack;