@react-financial-charts/interactive
Version:
Interactive features for react-financial-charts
78 lines • 4.33 kB
JavaScript
import { ChartContext, last } from "@react-financial-charts/core";
import { interpolateNumber } from "d3-interpolate";
import * as React from "react";
export class ZoomButtons extends React.Component {
constructor() {
super(...arguments);
this.handleZoomIn = () => {
if (this.interval) {
return;
}
this.zoom(-1);
};
this.handleZoomOut = () => {
if (this.interval) {
return;
}
this.zoom(1);
};
this.zoom = (direction) => {
const { xAxisZoom, xScale, plotData, xAccessor } = this.context;
const cx = xScale(xAccessor(last(plotData)));
const { zoomMultiplier } = this.props;
const c = direction > 0 ? 1 * zoomMultiplier : 1 / zoomMultiplier;
const [start, end] = xScale.domain();
const [newStart, newEnd] = xScale
.range()
.map((x) => cx + (x - cx) * c)
.map(xScale.invert);
const left = interpolateNumber(start, newStart);
const right = interpolateNumber(end, newEnd);
const foo = [0.25, 0.3, 0.5, 0.6, 0.75, 1].map((i) => {
return [left(i), right(i)];
});
this.interval = window.setInterval(() => {
xAxisZoom(foo.shift());
if (foo.length === 0) {
clearInterval(this.interval);
delete this.interval;
}
}, 10);
};
}
render() {
const { chartConfig } = this.context;
const { width, height } = chartConfig;
const { heightFromBase, r, fill, fillOpacity, onReset, stroke, strokeWidth, textFill } = this.props;
const centerX = Math.round(width / 2);
const y = height - heightFromBase;
const zoomOutX = centerX - 16 - r * 2;
const zoomInX = centerX - 8;
const resetX = centerX + 16 + r * 2;
return (React.createElement("g", { className: "react-financial-charts-zoom-buttons" },
React.createElement("circle", { className: "react-financial-charts-button", cx: zoomOutX - r / 2, cy: y + r / 2, fill: fill, fillOpacity: fillOpacity, stroke: stroke, strokeWidth: strokeWidth, r: r }),
React.createElement("g", { transform: `translate (${zoomOutX - 20}, ${y - 8 + r / 4})` },
React.createElement("path", { d: "M19,13H5V11H19V13Z", fill: textFill })),
React.createElement("circle", { className: "react-financial-charts-button", cx: zoomInX - r / 2, cy: y + r / 2, fill: fill, fillOpacity: fillOpacity, stroke: stroke, strokeWidth: strokeWidth, r: r }),
React.createElement("g", { transform: `translate (${zoomInX - 20}, ${y - 8 + r / 4})` },
React.createElement("path", { d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z", fill: textFill })),
React.createElement("circle", { className: "react-financial-charts-button", cx: resetX - r / 2, cy: y + r / 2, fill: fill, fillOpacity: fillOpacity, stroke: stroke, strokeWidth: strokeWidth, r: r }),
React.createElement("g", { transform: `translate (${resetX - r}, ${y - 4 + r / 4})` },
React.createElement("path", { d: "M2.35 2.35A7.958 7.958 0 018 0a8 8 0 110 16c-3.73 0-6.84-2.55-7.73-6h2.08c.82 2.33 3.04 4 5.65 4A6 6 0 108 2c-1.66 0-3.14.69-4.22 1.78L7 7H0V0l2.35 2.35z", fill: textFill })),
React.createElement("circle", { className: "react-financial-charts-enable-interaction out", onClick: this.handleZoomOut, cx: zoomOutX - r / 2, cy: y + r / 2, r: r, fill: "none" }),
React.createElement("circle", { className: "react-financial-charts-enable-interaction in", onClick: this.handleZoomIn, cx: zoomInX - r / 2, cy: y + r / 2, r: r, fill: "none" }),
React.createElement("circle", { className: "react-financial-charts-enable-interaction reset", onClick: onReset, cx: resetX - r / 2, cy: y + r / 2, r: r, fill: "none" })));
}
}
ZoomButtons.defaultProps = {
fill: "#ffffff",
fillOpacity: 0.75,
heightFromBase: 32,
r: 16,
stroke: "#e0e3eb",
strokeWidth: 1,
textFill: "#000000",
zoomMultiplier: 1.5,
};
ZoomButtons.contextType = ChartContext;
//# sourceMappingURL=ZoomButtons.js.map