UNPKG

victory-chart

Version:
236 lines (107 loc) 11.3 kB
Object.defineProperty(exports,"__esModule",{value:true});var _partialRight2=require("lodash/partialRight");var _partialRight3=_interopRequireDefault(_partialRight2);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 _helperMethods=require("./helper-methods");var _helperMethods2=_interopRequireDefault(_helperMethods); var _axis=require("../../helpers/axis");var _axis2=_interopRequireDefault(_axis);function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj};}function _toConsumableArray(arr){if(Array.isArray(arr)){for(var i=0,arr2=Array(arr.length);i<arr.length;i++){arr2[i]=arr[i];}return arr2;}else{return Array.from(arr);}}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 VictoryAxis=function(_React$Component){_inherits(VictoryAxis,_React$Component);function VictoryAxis(){_classCallCheck(this,VictoryAxis);return _possibleConstructorReturn(this,(VictoryAxis.__proto__||Object.getPrototypeOf(VictoryAxis)).apply(this,arguments));}_createClass(VictoryAxis,[{key:"renderLine",value:function renderLine( props){var axisComponent=props.axisComponent; var axisProps=this.getComponentProps(axisComponent,"axis",0); return _react2.default.cloneElement(axisComponent,axisProps); }},{key:"renderLabel",value:function renderLabel( props){var axisLabelComponent=props.axisLabelComponent; var axisLabelProps=this.getComponentProps(axisLabelComponent,"axisLabel",0); return _react2.default.cloneElement(axisLabelComponent,axisLabelProps); }},{key:"renderGridAndTicks",value:function renderGridAndTicks( props){var tickComponent=props.tickComponent,tickLabelComponent=props.tickLabelComponent,gridComponent=props.gridComponent; var gridAndTickComponents=[]; for(var index=0,len=this.dataKeys.length;index<len;index++){ var key=this.dataKeys[index]; var tickProps=this.getComponentProps(tickComponent,"ticks",index); var TickComponent=_react2.default.cloneElement(tickComponent,tickProps); var gridProps=this.getComponentProps(gridComponent,"grid",index); var GridComponent=_react2.default.cloneElement(gridComponent,gridProps); var tickLabelProps=this.getComponentProps(tickLabelComponent,"tickLabels",index); var TickLabel=_react2.default.cloneElement(tickLabelComponent,tickLabelProps); gridAndTickComponents[index]=_react2.default.cloneElement( props.groupComponent,{key:"tick-group-"+key},GridComponent,TickComponent,TickLabel); } return gridAndTickComponents; }},{key:"fixLabelOverlap",value:function fixLabelOverlap( gridAndTicks,props){ var isVertical=_victoryCore.Helpers.isVertical(props); var size=isVertical?props.height:props.width; var isVictoryLabel=function isVictoryLabel(child){return child.type.name==="VictoryLabel";}; var labels=gridAndTicks.map(function(gridAndTick){return gridAndTick.props.children;}). reduce(function(accumulator,childArr){return accumulator.concat(childArr);}). filter(isVictoryLabel). map(function(child){return child.props;}); var paddingToObject=function paddingToObject(padding){return( typeof padding==="object"? (0,_assign3.default)({},{top:0,right:0,bottom:0,left:0},padding): {top:padding,right:padding,bottom:padding,left:padding});}; var labelsSumSize=labels.reduce(function(sum,label){ var padding=paddingToObject(label.style.padding); var labelSize=_victoryCore.TextSize.approximateTextSize(label.text,{ angle:label.angle, fontSize:label.style.fontSize, letterSpacing:label.style.letterSpacing, fontFamily:label.style.fontFamily}); return sum+(isVertical? labelSize.height+padding.top+padding.bottom: labelSize.width+padding.right+padding.left); },0); var availiableLabelCount=Math.floor(size*gridAndTicks.length/labelsSumSize); var divider=Math.ceil(gridAndTicks.length/availiableLabelCount)||1; var getLabelCoord=function getLabelCoord(gridAndTick){return gridAndTick.props.children. filter(isVictoryLabel). reduce(function(prev,child){return(isVertical?child.props.y:child.props.x)||0;},0);}; var sorted=gridAndTicks.sort(function(a,b){return isVertical? getLabelCoord(b)-getLabelCoord(a): getLabelCoord(a)-getLabelCoord(b);}); return sorted.filter(function(gridAndTick,index){return index%divider===0;}); }},{key:"renderContainer",value:function renderContainer( props,group){var containerComponent=props.containerComponent; var parentProps=this.getComponentProps(containerComponent,"parent","parent"); return _react2.default.cloneElement(containerComponent,parentProps,group); }},{key:"renderGroup",value:function renderGroup( children,style){ return _react2.default.cloneElement.apply(_react2.default,[ this.props.groupComponent, {role:"presentation",style:style}].concat(_toConsumableArray( children))); }},{key:"shouldAnimate",value:function shouldAnimate() { return!!this.props.animate; }},{key:"render",value:function render() { var props=_victoryCore.Helpers.modifyProps(this.props,fallbackProps,"axis");var animate=props.animate,standalone=props.standalone; if(this.shouldAnimate()){ var whitelist=[ "style","domain","range","tickCount","tickValues", "offsetX","offsetY","padding","width","height"]; return( _react2.default.createElement(_victoryCore.VictoryTransition,{animate:animate,animationWhitelist:whitelist}, _react2.default.createElement(this.constructor,props))); } var styleObject=_helperMethods2.default.getStyleObject(props); var style=_helperMethods2.default.getStyles(props,styleObject); var gridAndTicks=this.renderGridAndTicks(props); var modifiedGridAndTicks=props.fixLabelOverlap? this.fixLabelOverlap(gridAndTicks,props): gridAndTicks; var children=[].concat(_toConsumableArray( modifiedGridAndTicks),[ this.renderLine(props), this.renderLabel(props)]); var group=this.renderGroup(children,style.parent); return standalone?this.renderContainer(props,group):group; }}]);return VictoryAxis;}(_react2.default.Component);VictoryAxis.displayName="VictoryAxis";VictoryAxis.role="axis";VictoryAxis.defaultTransitions={onExit:{duration:500},onEnter:{duration:500}};VictoryAxis.propTypes={animate:_react.PropTypes.object,axisComponent:_react.PropTypes.element,axisLabelComponent:_react.PropTypes.element,containerComponent:_react.PropTypes.element,crossAxis:_react.PropTypes.bool,dependentAxis:_react.PropTypes.bool,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({target:_react.PropTypes.oneOf(["axis","axisLabel","grid","ticks","tickLabels","parent"]),eventKey:_react.PropTypes.oneOfType([_react.PropTypes.array,_victoryCore.PropTypes.allOfType([_victoryCore.PropTypes.integer,_victoryCore.PropTypes.nonNegative]),_react.PropTypes.string]),eventHandlers:_react.PropTypes.object})),fixLabelOverlap:_react.PropTypes.bool,gridComponent:_react.PropTypes.element,groupComponent:_react.PropTypes.element,height:_victoryCore.PropTypes.nonNegative,label:_react.PropTypes.any,name:_react.PropTypes.string,offsetX:_react.PropTypes.number,offsetY:_react.PropTypes.number,orientation:_react.PropTypes.oneOf(["top","bottom","left","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})]),scale:_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,axis:_react.PropTypes.object,axisLabel:_react.PropTypes.object,grid:_react.PropTypes.object,ticks:_react.PropTypes.object,tickLabels:_react.PropTypes.object}),theme:_react.PropTypes.object,tickComponent:_react.PropTypes.element,tickCount:_victoryCore.PropTypes.allOfType([_victoryCore.PropTypes.integer,_victoryCore.PropTypes.greaterThanZero]),tickFormat:_react.PropTypes.oneOfType([_react.PropTypes.func,_victoryCore.PropTypes.homogeneousArray]),tickLabelComponent:_react.PropTypes.element,tickValues:_victoryCore.PropTypes.homogeneousArray,width:_victoryCore.PropTypes.nonNegative};VictoryAxis.defaultProps={axisComponent:_react2.default.createElement(_victoryCore.Line,{type:"axis"}),axisLabelComponent:_react2.default.createElement(_victoryCore.VictoryLabel,null),tickLabelComponent:_react2.default.createElement(_victoryCore.VictoryLabel,null),tickComponent:_react2.default.createElement(_victoryCore.Line,{type:"tick"}),gridComponent:_react2.default.createElement(_victoryCore.Line,{type:"grid"}),scale:"linear",standalone:true,theme:_victoryCore.VictoryTheme.grayscale,tickCount:5,containerComponent:_react2.default.createElement(_victoryCore.VictoryContainer,null),groupComponent:_react2.default.createElement("g",null),fixLabelOverlap:false};VictoryAxis.getDomain=_helperMethods2.default.getDomain.bind(_helperMethods2.default);VictoryAxis.getAxis=_axis2.default.getAxis.bind(_axis2.default);VictoryAxis.getScale=_helperMethods2.default.getScale.bind(_helperMethods2.default);VictoryAxis.getStyles=(0,_partialRight3.default)(_helperMethods2.default.getStyles.bind(_helperMethods2.default),fallbackProps.style);VictoryAxis.getBaseProps=(0,_partialRight3.default)(_helperMethods2.default.getBaseProps.bind(_helperMethods2.default),fallbackProps);VictoryAxis.expectedComponents=["axisComponent","axisLabelComponent","groupComponent","containerComponent","tickComponent","tickLabelComponent","gridComponent"];exports.default= (0,_victoryCore.addEvents)(VictoryAxis);