test('scales-utils #getAttributeScale', t => {
// without props
let result = getAttributeScale({}, 'x');
t.ok(result === null, 'No props: Result should be null');
// with props
result = getAttributeScale({xRange, xDomain}, 'x');
const isFunction = typeof result === 'function';
t.ok(isFunction, 'Result should be a function');
t.equal(result(_allData[0][0].x), xRange[0], 'Result scale is valid');
t.end();
});
render() {
const {animation, centerX, centerY} = this.props;
if (animation) {
return (
<Animation {...this.props} animatedProps={animatedProps}>
<CircularGridLines {...this.props} animation={null}/>
</Animation>
);
}
const props = {
...this._getDefaultProps(),
...this.props
};
const {
tickTotal,
tickValues,
marginLeft,
marginTop,
rRange,
style
} = props;
const xScale = getAttributeScale(props, 'x');
const yScale = getAttributeScale(props, 'y');
const values = getTickValues(xScale, tickTotal, tickValues);
return (
<g
transform={`translate(${xScale(centerX) + marginLeft},${yScale(centerY) + marginTop})`}
className="rv-xy-plot__circular-grid-lines">
{values.reduce((res, value, index) => {
const radius = xScale(value);
if (rRange && (radius < rRange[0] || radius > rRange[1])) {
return res;
}
return res.concat([
<circle
{...{cx: 0, cy: 0, r: radius}}
key={index}
className="rv-xy-plot__circular-grid-lines__line"
style={style} />
]);
}, [])}
</g>
);
}
render() {
const {
attr,
orientation,
width,
height,
tickFormat,
tickTotal,
tickValues
} = this.props;
const x = orientation === LEFT ? width : 0;
const y = orientation === TOP ? height : 0;
const scale = getAttributeScale(this.props, attr);
const values = getTickValues(scale, tickTotal, tickValues);
const tickFormatFn = _getTickFormatFn(scale, tickTotal, tickFormat);
const translateFn = this._getTickContainerPropsGetterFn();
const pathProps = this._getTickLineProps();
const textProps = this._getTickLabelProps();
const ticks = values.map((v, i) => {
const pos = scale(v);
const text = tickFormatFn(v);
return (
<g key={i} {...translateFn(pos, 0)} className="rv-xy-plot__axis__tick">
<line {...pathProps} className="rv-xy-plot__axis__tick__line"/>
<text {...textProps} className="rv-xy-plot__axis__tick__text">
{text}
</text>
</g>
);
});
return (
<g
transform={`translate(${x}, ${y})`}
className="rv-xy-plot__axis__ticks">
{ticks}
</g>
);
}
render() {
const {animation} = this.props;
if (animation) {
const animatedProps = animation.nonAnimatedProps
? defaultAnimatedProps.filter(
prop => animation.nonAnimatedProps.indexOf(prop) < 0
)
: defaultAnimatedProps;
return (
<Animation {...this.props} {...{animatedProps}}>
<Axis {...this.props} animation={null} />
</Animation>
);
}
const props = {
...this._getDefaultAxisProps(),
...this.props
};
const {
attrAxis,
className,
height,
hideLine,
hideTicks,
left,
marginTop,
on0,
orientation,
position,
style,
title,
top,
width
} = props;
const isVertical = [LEFT, RIGHT].indexOf(orientation) > -1;
const axisClassName = isVertical
? VERTICAL_CLASS_NAME
: HORIZONTAL_CLASS_NAME;
let leftPos = left;
let topPos = top;
if (on0) {
const scale = getAttributeScale(props, attrAxis);
if (isVertical) {
leftPos = scale(0);
} else {
topPos = marginTop + scale(0);
}
}
return (
<g
transform={`translate(${leftPos},${topPos})`}
className={`${predefinedClassName} ${axisClassName} ${className}`}
style={style}
>
{!hideLine && (
<AxisLine
height={height}
width={width}
orientation={orientation}
style={{...style, ...style.line}}
/>
)}
{!hideTicks && (
<AxisTicks {...props} style={{...style, ...style.ticks}} />
)}
{title ? (
<AxisTitle
position={position}
title={title}
height={height}
width={width}
style={{...style, ...style.title}}
orientation={orientation}
/>
) : null}
</g>
);
}