react-financial-charts
Version:
React charts specific to finance.
48 lines • 2.02 kB
JavaScript
import * as React from "react";
import { colorToRGBA, first, last } from "../utils";
export class AxisLine extends React.Component {
render() {
const { orient, outerTickSize = 0, fill, stroke, strokeWidth, className, shapeRendering, opacity, range, } = this.props;
const sign = orient === "top" || orient === "left" ? -1 : 1;
// var range = d3_scaleRange(scale);
let d;
if (orient === "bottom" || orient === "top") {
d = "M" + range[0] + "," + sign * outerTickSize + "V0H" + range[1] + "V" + sign * outerTickSize;
}
else {
d = "M" + sign * outerTickSize + "," + range[0] + "H0V" + range[1] + "H" + sign * outerTickSize;
}
return (React.createElement("path", { className: className, shapeRendering: shapeRendering, d: d, fill: fill, opacity: opacity, stroke: stroke, strokeWidth: strokeWidth }));
}
}
AxisLine.defaultProps = {
className: "react-financial-charts-axis-line",
shapeRendering: "crispEdges",
fill: "none",
stroke: "#000000",
strokeWidth: 1,
opacity: 1,
};
AxisLine.drawOnCanvasStatic = (props, ctx /* , xScale, yScale*/) => {
props = Object.assign(Object.assign({}, AxisLine.defaultProps), props);
const { orient, outerTickSize, stroke, strokeWidth, opacity, range } = props;
const sign = orient === "top" || orient === "left" ? -1 : 1;
const xAxis = (orient === "bottom" || orient === "top");
ctx.lineWidth = strokeWidth;
ctx.strokeStyle = colorToRGBA(stroke, opacity);
ctx.beginPath();
if (xAxis) {
ctx.moveTo(first(range), sign * outerTickSize);
ctx.lineTo(first(range), 0);
ctx.lineTo(last(range), 0);
ctx.lineTo(last(range), sign * outerTickSize);
}
else {
ctx.moveTo(sign * outerTickSize, first(range));
ctx.lineTo(0, first(range));
ctx.lineTo(0, last(range));
ctx.lineTo(sign * outerTickSize, last(range));
}
ctx.stroke();
};
//# sourceMappingURL=AxisLine.js.map