victory-chart
Version:
Chart Component for Victory
236 lines (107 loc) • 11.3 kB
JavaScript
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);