react-financial-charts
Version:
React charts specific to finance.
102 lines • 4.11 kB
JavaScript
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import * as PropTypes from "prop-types";
import * as React from "react";
import Axis from "./Axis";
export class YAxis extends React.Component {
constructor() {
super(...arguments);
this.axisZoomCallback = (newYDomain) => {
const { chartId, yAxisZoom } = this.context;
yAxisZoom(chartId, newYDomain);
};
this.helper = (props, context) => {
const { axisAt, yZoomWidth = YAxis.defaultProps.yZoomWidth, orient, } = props;
const { chartConfig: { width, height } } = context;
let axisLocation;
const y = 0;
const w = yZoomWidth;
const h = height;
if (axisAt === "left") {
axisLocation = 0;
}
else if (axisAt === "right") {
axisLocation = width;
}
else if (axisAt === "middle") {
axisLocation = (width) / 2;
}
else {
axisLocation = axisAt;
}
const x = (orient === "left") ? -yZoomWidth : 0;
return {
transform: [axisLocation, 0],
range: [0, height],
getScale: this.getYScale,
bg: { x, y, h, w },
zoomEnabled: context.chartConfig.yPan,
};
};
this.getYScale = (moreProps) => {
const { yScale: scale, flipYScale, height } = moreProps.chartConfig;
if (scale.invert) {
const trueRange = flipYScale ? [0, height] : [height, 0];
const trueDomain = trueRange.map(scale.invert);
return scale
.copy()
.domain(trueDomain)
.range(trueRange);
}
return scale;
};
}
render() {
const _a = this.props, { getMouseDelta = YAxis.defaultProps.getMouseDelta, outerTickSize = YAxis.defaultProps.outerTickSize, stroke = YAxis.defaultProps.stroke, strokeWidth = YAxis.defaultProps.strokeWidth } = _a, rest = __rest(_a, ["getMouseDelta", "outerTickSize", "stroke", "strokeWidth"]);
const _b = this.helper(this.props, this.context), { zoomEnabled } = _b, moreProps = __rest(_b, ["zoomEnabled"]);
return (React.createElement(Axis, Object.assign({}, rest, moreProps, { edgeClip: true, getMouseDelta: getMouseDelta, outerTickSize: outerTickSize, stroke: stroke, strokeWidth: strokeWidth, zoomEnabled: this.props.zoomEnabled && zoomEnabled, axisZoomCallback: this.axisZoomCallback })));
}
}
YAxis.defaultProps = {
axisAt: "right",
className: "react-financial-charts-y-axis",
domainClassName: "react-financial-charts-axis-domain",
fill: "none",
fontFamily: "-apple-system, system-ui, Roboto, 'Helvetica Neue', Ubuntu, sans-serif",
fontSize: 12,
fontWeight: 400,
getMouseDelta: (startXY, mouseXY) => startXY[1] - mouseXY[1],
innerTickSize: 5,
outerTickSize: 0,
opacity: 1,
orient: "right",
showTicks: true,
showTickLabel: true,
showDomain: true,
stroke: "#000000",
strokeWidth: 1,
strokeOpacity: 1,
tickPadding: 6,
tickLabelFill: "#000000",
ticks: 10,
tickStroke: "#000000",
tickStrokeOpacity: 1,
yZoomWidth: 40,
zoomEnabled: true,
zoomCursorClassName: "react-financial-charts-ns-resize-cursor",
};
YAxis.contextTypes = {
yAxisZoom: PropTypes.func.isRequired,
chartId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
chartConfig: PropTypes.object.isRequired,
};
//# sourceMappingURL=YAxis.js.map