victory-chart
Version:
Chart Component for Victory
391 lines (325 loc) • 14 kB
JavaScript
Object.defineProperty(exports,"__esModule",{value:true});var _without2=require("lodash/without");var _without3=_interopRequireDefault(_without2);var _range2=require("lodash/range");var _range3=_interopRequireDefault(_range2);var _isFunction2=require("lodash/isFunction");var _isFunction3=_interopRequireDefault(_isFunction2);var _defaultsDeep2=require("lodash/defaultsDeep");var _defaultsDeep3=_interopRequireDefault(_defaultsDeep2);var _defaults2=require("lodash/defaults");var _defaults3=_interopRequireDefault(_defaults2);var _includes2=require("lodash/includes");var _includes3=_interopRequireDefault(_includes2);
var _victoryCore=require("victory-core");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);}}
var orientationSign={
top:-1,
left:-1,
right:1,
bottom:1};exports.default=
{
getDomain:function getDomain(props,axis){
var inherentAxis=this.getAxis(props);
if(axis&&axis!==inherentAxis){
return undefined;
}
var domain=void 0;
if(Array.isArray(props.domain)){
domain=props.domain;
}else if(props.domain&&props.domain[inherentAxis]){
domain=props.domain[inherentAxis];
}else if(Array.isArray(props.tickValues)&&props.tickValues.length>1){
domain=_victoryCore.Domain.getDomainFromTickValues(props);
}
var paddedDomain=_victoryCore.Domain.padDomain(domain,props,inherentAxis);
return domain?_victoryCore.Domain.cleanDomain(paddedDomain,props,inherentAxis):undefined;
},
getAxis:function getAxis(props,flipped){
if(props.orientation){
var vertical={top:"x",bottom:"x",left:"y",right:"y"};
return vertical[props.orientation];
}
var axisType=props.dependentAxis?"dependent":"independent";
var flippedAxis={dependent:"x",independent:"y"};
var normalAxis={independent:"x",dependent:"y"};
return flipped?flippedAxis[axisType]:normalAxis[axisType];
},
getScale:function getScale(props){
var axis=this.getAxis(props);
var scale=_victoryCore.Scale.getBaseScale(props,axis);
var domain=this.getDomain(props)||scale.domain();
scale.range(_victoryCore.Helpers.getRange(props,axis));
scale.domain(domain);
return scale;
},
getStyleObject:function getStyleObject(props){var
theme=props.theme,dependentAxis=props.dependentAxis;
var generalAxisStyle=theme&&theme.axis&&theme.axis.style;
var axisType=dependentAxis?"dependentAxis":"independentAxis";
var specificAxisStyle=theme&&theme[axisType]&&theme[axisType].style;
return generalAxisStyle&&specificAxisStyle?
(0,_defaultsDeep3.default)({},
specificAxisStyle,
generalAxisStyle):
specificAxisStyle||generalAxisStyle;
},
getStyles:function getStyles(props,styleObject){
var style=props.style||{};
styleObject=styleObject||{};
var parentStyleProps={height:"auto",width:"100%"};
return{
parent:(0,_defaults3.default)(parentStyleProps,style.parent,styleObject.parent),
axis:(0,_defaults3.default)({},style.axis,styleObject.axis),
axisLabel:(0,_defaults3.default)({},style.axisLabel,styleObject.axisLabel),
grid:(0,_defaults3.default)({},style.grid,styleObject.grid),
ticks:(0,_defaults3.default)({},style.ticks,styleObject.ticks),
tickLabels:(0,_defaults3.default)({},style.tickLabels,styleObject.tickLabels)};
},
getTickProps:function getTickProps(layout,style,datum){var
position=layout.position,transform=layout.transform;
return{
x1:transform.x,
y1:transform.y,
x2:transform.x+position.x2,
y2:transform.y+position.y2,
style:style,
datum:datum};
},
getTickLabelProps:function getTickLabelProps(layout,style,anchors,datum,text){var
position=layout.position,transform=layout.transform;
return{
style:style,
x:transform.x+position.x,
y:transform.y+position.y,
verticalAnchor:anchors.verticalAnchor,
textAnchor:anchors.textAnchor,
angle:style.angle,
text:text,
datum:datum};
},
getGridProps:function getGridProps(layout,style,datum){var
edge=layout.edge,transform=layout.transform;
return{
x1:transform.x,
y1:transform.y,
x2:edge.x+transform.x,
y2:edge.y+transform.y,
style:style,
datum:datum};
},
getAxisProps:function getAxisProps(modifiedProps,calculatedValues,globalTransform){var
style=calculatedValues.style,padding=calculatedValues.padding,isVertical=calculatedValues.isVertical;var
width=modifiedProps.width,height=modifiedProps.height;
return{
style:style.axis,
x1:isVertical?globalTransform.x:padding.left+globalTransform.x,
x2:isVertical?globalTransform.x:width-padding.right+globalTransform.x,
y1:isVertical?padding.top+globalTransform.y:globalTransform.y,
y2:isVertical?height-padding.bottom+globalTransform.y:globalTransform.y};
},
getLayoutProps:function getLayoutProps(modifiedProps,calculatedValues){
var offset=this.getOffset(modifiedProps,calculatedValues);
return{
globalTransform:this.getTransform(modifiedProps,calculatedValues,offset),
gridOffset:this.getGridOffset(modifiedProps,calculatedValues,offset),
gridEdge:this.getGridEdge(modifiedProps,calculatedValues)};
},
getEvaluatedStyles:function getEvaluatedStyles(style,tick,index){
return{
tickStyle:_victoryCore.Helpers.evaluateStyle(style.ticks,tick,index),
labelStyle:_victoryCore.Helpers.evaluateStyle(style.tickLabels,tick,index),
gridStyle:_victoryCore.Helpers.evaluateStyle(style.grid,tick,index)};
},
getRole:function getRole(props){
if(props.dependentAxis){
return props.theme&&props.theme.dependentAxis?
"dependentAxis":
"axis";
}
return props.theme&&props.theme.independentAxis?
"independentAxis":
"axis";
},
getShallowMergedThemeProps:function getShallowMergedThemeProps(props,role){
var axisTheme=props.theme.axis||{};
return(0,_defaults3.default)({},props.theme[role],axisTheme);
},
modifyProps:function modifyProps(props,fallbackProps,role){
if(role!=="axis"){
props.theme[role]=this.getShallowMergedThemeProps(props,role);
}
return _victoryCore.Helpers.modifyProps(props,fallbackProps,role);
},
getBaseProps:function getBaseProps(props,fallbackProps){
var role=this.getRole(props);
props=this.modifyProps(props,fallbackProps,role);
var calculatedValues=this.getCalculatedValues(props);var
style=
calculatedValues.style,orientation=calculatedValues.orientation,isVertical=calculatedValues.isVertical,scale=calculatedValues.scale,ticks=calculatedValues.ticks,tickFormat=calculatedValues.tickFormat,stringTicks=calculatedValues.stringTicks,anchors=calculatedValues.anchors;var _getLayoutProps=
this.getLayoutProps(props,calculatedValues),globalTransform=_getLayoutProps.globalTransform,gridOffset=_getLayoutProps.gridOffset,gridEdge=_getLayoutProps.gridEdge;
var axisProps=this.getAxisProps(props,calculatedValues,globalTransform);
var axisLabelProps=this.getAxisLabelProps(props,calculatedValues,globalTransform);
var childProps={parent:{
style:style.parent,ticks:ticks,scale:scale,width:props.width,height:props.height}};
for(var index=0,len=ticks.length;index<len;index++){
var tick=stringTicks?props.tickValues[ticks[index]-1]:ticks[index];
var styles=this.getEvaluatedStyles(style,tick,index);
var tickLayout={
position:this.getTickPosition(styles,orientation,isVertical),
transform:this.getTickTransform(scale(ticks[index]),globalTransform,isVertical)};
var gridLayout={
edge:gridEdge,
transform:{
x:isVertical?
-gridOffset.x+globalTransform.x:scale(ticks[index])+globalTransform.x,
y:isVertical?
scale(ticks[index])+globalTransform.y:gridOffset.y+globalTransform.y}};
childProps[index]={
axis:axisProps,
axisLabel:axisLabelProps,
ticks:this.getTickProps(tickLayout,styles.tickStyle,tick),
tickLabels:this.getTickLabelProps(
tickLayout,styles.labelStyle,anchors,tick,tickFormat(tick,index)),
grid:this.getGridProps(gridLayout,styles.gridStyle,tick)};
}
return childProps;
},
getCalculatedValues:function getCalculatedValues(props){
var defaultStyles=this.getStyleObject(props);
var style=this.getStyles(props,defaultStyles);
var padding=_victoryCore.Helpers.getPadding(props);
var orientation=props.orientation||(props.dependentAxis?"left":"bottom");
var isVertical=_victoryCore.Helpers.isVertical(props);
var labelPadding=this.getLabelPadding(props,style);
var stringTicks=_victoryCore.Helpers.stringTicks(props);
var scale=this.getScale(props);
var ticks=this.getTicks(props,scale);
var tickFormat=this.getTickFormat(props,scale,ticks);
var anchors=this.getAnchors(orientation,isVertical);
return{
style:style,padding:padding,orientation:orientation,isVertical:isVertical,labelPadding:labelPadding,stringTicks:stringTicks,
anchors:anchors,scale:scale,ticks:ticks,tickFormat:tickFormat};
},
getAxisLabelProps:function getAxisLabelProps(props,calculatedValues,globalTransform){var
style=calculatedValues.style,orientation=calculatedValues.orientation,padding=calculatedValues.padding,labelPadding=calculatedValues.labelPadding,isVertical=calculatedValues.isVertical;
var sign=orientationSign[orientation];
var hPadding=padding.left+padding.right;
var vPadding=padding.top+padding.bottom;
var verticalAnchor=sign<0?"end":"start";
var labelStyle=style.axisLabel;
var angle=isVertical?-90:0;
var x=isVertical?globalTransform.x+sign*labelPadding:
(props.width-hPadding)/2+padding.left+globalTransform.x;
var y=isVertical?
(props.height-vPadding)/2+padding.bottom+globalTransform.y:
sign*labelPadding+globalTransform.y;
return{
x:x,
y:y,
verticalAnchor:labelStyle.verticalAnchor||verticalAnchor,
textAnchor:labelStyle.textAnchor||"middle",
angle:labelStyle.angle||angle,
style:labelStyle,
text:props.label};
},
getTicks:function getTicks(props,scale){
if(props.tickValues){
if(_victoryCore.Helpers.stringTicks(props)){
return(0,_range3.default)(1,props.tickValues.length+1);
}
return props.tickValues.length?props.tickValues:scale.domain();
}else if(scale.ticks&&(0,_isFunction3.default)(scale.ticks)){
var scaleTicks=scale.ticks(props.tickCount);
var ticks=Array.isArray(scaleTicks)&&scaleTicks.length?scaleTicks:scale.domain();
if(props.crossAxis){
var filteredTicks=(0,_includes3.default)(ticks,0)?(0,_without3.default)(ticks,0):ticks;
return filteredTicks.length?filteredTicks:ticks;
}
return ticks;
}
return scale.domain();
},
getAnchors:function getAnchors(orientation,isVertical){
var anchorOrientation={top:"end",left:"end",right:"start",bottom:"start"};
var anchor=anchorOrientation[orientation];
return{
textAnchor:isVertical?anchor:"middle",
verticalAnchor:isVertical?"middle":anchor};
},
getTickFormat:function getTickFormat(props,scale){
if(props.tickFormat&&(0,_isFunction3.default)(props.tickFormat)){
return props.tickFormat;
}else if(props.tickFormat&&Array.isArray(props.tickFormat)){
return function(x,index){return props.tickFormat[index];};
}else if(_victoryCore.Helpers.stringTicks(props)){
return function(x,index){return props.tickValues[index];};
}else if(scale.tickFormat&&(0,_isFunction3.default)(scale.tickFormat)){
return scale.tickFormat();
}else{
return function(x){return x;};
}
},
getLabelPadding:function getLabelPadding(props,style){
var labelStyle=style.axisLabel||{};
if(typeof labelStyle.padding!=="undefined"&&labelStyle.padding!==null){
return labelStyle.padding;
}
var isVertical=_victoryCore.Helpers.isVertical(props);
var fontSize=labelStyle.fontSize||14;
return props.label?fontSize*(isVertical?2.3:1.6):0;
},
getOffset:function getOffset(props,calculatedValues){var
style=
calculatedValues.style,padding=calculatedValues.padding,isVertical=calculatedValues.isVertical,orientation=calculatedValues.orientation,labelPadding=calculatedValues.labelPadding,stringTicks=calculatedValues.stringTicks,ticks=calculatedValues.ticks;
var xPadding=orientation==="right"?padding.right:padding.left;
var yPadding=orientation==="top"?padding.top:padding.bottom;
var fontSize=style.axisLabel.fontSize||14;
var offsetX=props.offsetX!==null&&props.offsetX!==undefined?
props.offsetX:xPadding;
var offsetY=props.offsetY!==null&&props.offsetY!==undefined?
props.offsetY:yPadding;
var tickSizes=ticks.map(function(data){
var tick=stringTicks?props.tickValues[data-1]:data;
var tickStyle=_victoryCore.Helpers.evaluateStyle(style.ticks,tick);
return tickStyle.size||0;
});
var totalPadding=fontSize+2*Math.max.apply(Math,_toConsumableArray(tickSizes))+labelPadding;
var minimumPadding=1.2*fontSize;
var x=isVertical?totalPadding:minimumPadding;
var y=isVertical?minimumPadding:totalPadding;
return{
x:offsetX!==null&&offsetX!==undefined?offsetX:x,
y:offsetY!==null&&offsetY!==undefined?offsetY:y};
},
getTransform:function getTransform(props,calculatedValues,offset){var
orientation=calculatedValues.orientation;
return{
top:{x:0,y:offset.y},
bottom:{x:0,y:props.height-offset.y},
left:{x:offset.x,y:0},
right:{x:props.width-offset.x,y:0}}[
orientation];
},
getTickPosition:function getTickPosition(style,orientation,isVertical){var
tickStyle=style.tickStyle,labelStyle=style.labelStyle;
var size=tickStyle.size||0;
var tickPadding=tickStyle.padding||0;
var labelPadding=labelStyle.padding||0;
var tickSpacing=size+tickPadding+labelPadding;
var sign=orientationSign[orientation];
return{
x:isVertical?sign*tickSpacing:0,
x2:isVertical?sign*size:0,
y:isVertical?0:sign*tickSpacing,
y2:isVertical?0:sign*size};
},
getTickTransform:function getTickTransform(tick,globalTransform,isVertical){
return{
x:isVertical?globalTransform.x:tick+globalTransform.x,
y:isVertical?tick+globalTransform.y:globalTransform.y};
},
getGridEdge:function getGridEdge(props,calculatedValues){var
orientation=calculatedValues.orientation,padding=calculatedValues.padding,isVertical=calculatedValues.isVertical;
var sign=-orientationSign[orientation];
var x=isVertical?
sign*(props.width-(padding.left+padding.right)):0;
var y=isVertical?
0:sign*(props.height-(padding.top+padding.bottom));
return{x:x,y:y};
},
getGridOffset:function getGridOffset(props,calculatedValues,offset){var
padding=calculatedValues.padding,orientation=calculatedValues.orientation;
var xPadding=orientation==="right"?padding.right:padding.left;
var yPadding=orientation==="top"?padding.top:padding.bottom;
return{
x:props.crossAxis?offset.x-xPadding:0,
y:props.crossAxis?offset.y-yPadding:0};
}};