{
+
+ public static defaultProps = {
+ margin: { top: 20, right: 30, bottom: 30, left: 80 },
+ type: "hybrid",
+ pointsPerPxThreshold: 2,
+ minPointsPerPxThreshold: 1 / 100,
+ className: "react-stockchart",
+ zIndex: 1,
+ xExtents: [min, max],
+ postCalculator: identity,
+ padding: 0,
+ xAccessor: identity,
+ flipXScale: false,
+ useCrossHairStyleCursor: true,
+ defaultFocus: true,
+ onLoadMore: noop,
+ onSelect: noop,
+ mouseMoveEvent: true,
+ panEvent: true,
+ zoomEvent: true,
+ zoomMultiplier: 1.1,
+ clamp: false,
+ zoomAnchor: mouseBasedZoomAnchor,
+ maintainPointsPerPixelOnResize: true,
+ disableInteraction: false,
+ };
+
+ public static childContextTypes = {
+ plotData: PropTypes.array,
+ fullData: PropTypes.array,
+ chartConfig: PropTypes.arrayOf(
+ PropTypes.shape({
+ id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+ origin: PropTypes.arrayOf(PropTypes.number).isRequired,
+ padding: PropTypes.oneOfType([
+ PropTypes.number,
+ PropTypes.shape({
+ top: PropTypes.number,
+ bottom: PropTypes.number,
+ }),
+ ]),
+ yExtents: PropTypes.arrayOf(PropTypes.func),
+ yExtentsProvider: PropTypes.func,
+ yScale: PropTypes.func.isRequired,
+ mouseCoordinates: PropTypes.shape({
+ at: PropTypes.string,
+ format: PropTypes.func,
+ }),
+ width: PropTypes.number.isRequired,
+ height: PropTypes.number.isRequired,
+ }),
+ ).isRequired,
+ xScale: PropTypes.func.isRequired,
+ xAccessor: PropTypes.func.isRequired,
+ displayXAccessor: PropTypes.func.isRequired,
+ width: PropTypes.number.isRequired,
+ height: PropTypes.number.isRequired,
+ chartCanvasType: PropTypes.oneOf(["svg", "hybrid"]).isRequired,
+ margin: PropTypes.object.isRequired,
+ ratio: PropTypes.number.isRequired,
+ getCanvasContexts: PropTypes.func,
+ xAxisZoom: PropTypes.func,
+ yAxisZoom: PropTypes.func,
+ amIOnTop: PropTypes.func,
+ redraw: PropTypes.func,
+ subscribe: PropTypes.func,
+ unsubscribe: PropTypes.func,
+ setCursorClass: PropTypes.func,
+ generateSubscriptionId: PropTypes.func,
+ getMutableState: PropTypes.func,
+ };
+
+ public static ohlcv = (d) => ({ date: d.date, open: d.open, high: d.high, low: d.low, close: d.close, volume: d.volume });
+
+ private canvasContainerNode;
+ private eventCaptureNode;
+ private finalPinch?: boolean;
+ private fullData;
+ private lastSubscriptionId;
+ private mutableState;
+ private panInProgress: boolean;
+ private prevMouseXY;
+ private subscriptions;
+ private waitingForPinchZoomAnimationFrame?: boolean;
+ private waitingForPanAnimationFrame?: boolean;
+ private waitingForMouseMoveAnimationFrame?: boolean;
+
+ // tslint:disable-next-line: variable-name
+ private hackyWayToStopPanBeyondBounds__plotData;
+ // tslint:disable-next-line: variable-name
+ private hackyWayToStopPanBeyondBounds__domain;
+
+ constructor(props: ChartCanvasProps) {
+ super(props);
+
+ this.getDataInfo = this.getDataInfo.bind(this);
+ this.getCanvasContexts = this.getCanvasContexts.bind(this);
+
+ this.handleMouseMove = this.handleMouseMove.bind(this);
+ this.handleMouseEnter = this.handleMouseEnter.bind(this);
+ this.handleMouseLeave = this.handleMouseLeave.bind(this);
+ this.handleZoom = this.handleZoom.bind(this);
+ this.handlePinchZoom = this.handlePinchZoom.bind(this);
+ this.handlePinchZoomEnd = this.handlePinchZoomEnd.bind(this);
+ this.handlePan = this.handlePan.bind(this);
+ this.handlePanEnd = this.handlePanEnd.bind(this);
+ this.handleClick = this.handleClick.bind(this);
+ this.handleMouseDown = this.handleMouseDown.bind(this);
+ this.handleDoubleClick = this.handleDoubleClick.bind(this);
+ this.handleContextMenu = this.handleContextMenu.bind(this);
+ this.handleDragStart = this.handleDragStart.bind(this);
+ this.handleDrag = this.handleDrag.bind(this);
+ this.handleDragEnd = this.handleDragEnd.bind(this);
+
+ this.panHelper = this.panHelper.bind(this);
+ this.pinchZoomHelper = this.pinchZoomHelper.bind(this);
+ this.xAxisZoom = this.xAxisZoom.bind(this);
+ this.yAxisZoom = this.yAxisZoom.bind(this);
+ this.resetYDomain = this.resetYDomain.bind(this);
+ this.calculateStateForDomain = this.calculateStateForDomain.bind(this);
+ this.generateSubscriptionId = this.generateSubscriptionId.bind(this);
+ this.draw = this.draw.bind(this);
+ this.redraw = this.redraw.bind(this);
+ this.getAllPanConditions = this.getAllPanConditions.bind(this);
+
+ this.subscriptions = [];
+ this.subscribe = this.subscribe.bind(this);
+ this.unsubscribe = this.unsubscribe.bind(this);
+ this.amIOnTop = this.amIOnTop.bind(this);
+ this.saveEventCaptureNode = this.saveEventCaptureNode.bind(this);
+ this.saveCanvasContainerNode = this.saveCanvasContainerNode.bind(this);
+ this.setCursorClass = this.setCursorClass.bind(this);
+ this.getMutableState = this.getMutableState.bind(this);
+
+ this.panInProgress = false;
+ this.state = {};
+ this.mutableState = {};
+ this.lastSubscriptionId = 0;
+
+ const { fullData, ...state } = resetChart(props, true);
+ this.state = state;
+ this.fullData = fullData;
+ }
+
+ public saveEventCaptureNode(node) {
+ this.eventCaptureNode = node;
+ }
+
+ public saveCanvasContainerNode(node) {
+ this.canvasContainerNode = node;
+ }
+
+ public getMutableState() {
+ return this.mutableState;
+ }
+
+ public getDataInfo() {
+ return {
+ ...this.state,
+ fullData: this.fullData,
+ };
+ }
+ public getCanvasContexts() {
+ if (this.canvasContainerNode) {
+ return this.canvasContainerNode.getCanvasContexts();
+ }
+ }
+ public generateSubscriptionId() {
+ this.lastSubscriptionId++;
+ return this.lastSubscriptionId;
+ }
+ public clearBothCanvas() {
+ const canvases = this.getCanvasContexts();
+ if (canvases && canvases.axes) {
+ clearCanvas([
+ canvases.axes,
+ // canvases.hover,
+ canvases.mouseCoord,
+ ], this.props.ratio);
+ }
+ }
+ public clearMouseCanvas() {
+ const canvases = this.getCanvasContexts();
+ if (canvases && canvases.mouseCoord) {
+ clearCanvas([
+ canvases.mouseCoord,
+ // canvases.hover,
+ ], this.props.ratio);
+ }
+ }
+ public clearThreeCanvas() {
+ const canvases = this.getCanvasContexts();
+ if (canvases && canvases.axes) {
+ clearCanvas([
+ canvases.axes,
+ // canvases.hover,
+ canvases.mouseCoord,
+ canvases.bg,
+ ], this.props.ratio);
+ }
+ }
+ public subscribe(id, rest) {
+ const { getPanConditions = functor({
+ draggable: false,
+ panEnabled: true,
+ }) } = rest;
+ this.subscriptions = this.subscriptions.concat({
+ id,
+ ...rest,
+ getPanConditions,
+ });
+ }
+ public unsubscribe(id) {
+ this.subscriptions = this.subscriptions.filter((each) => each.id !== id);
+ }
+ public getAllPanConditions() {
+ return this.subscriptions
+ .map((each) => each.getPanConditions());
+ }
+ public setCursorClass(className) {
+ if (this.eventCaptureNode != null) {
+ this.eventCaptureNode.setCursorClass(className);
+ }
+ }
+ public amIOnTop(id) {
+ const dragableComponents = this.subscriptions
+ .filter((each) => each.getPanConditions().draggable);
+
+ return dragableComponents.length > 0
+ && last(dragableComponents).id === id;
+ }
+ public handleContextMenu(mouseXY, e) {
+ const { xAccessor, chartConfig, plotData, xScale } = this.state;
+
+ const currentCharts = getCurrentCharts(chartConfig, mouseXY);
+ const currentItem = getCurrentItem(xScale, xAccessor, mouseXY, plotData);
+
+ this.triggerEvent("contextmenu", {
+ mouseXY,
+ currentItem,
+ currentCharts,
+ }, e);
+ }
+ public calculateStateForDomain(newDomain) {
+ const {
+ xAccessor,
+ displayXAccessor,
+ xScale: initialXScale,
+ chartConfig: initialChartConfig,
+ plotData: initialPlotData,
+ } = this.state;
+
+ const { filterData } = this.state;
+ const { fullData } = this;
+ const { postCalculator } = this.props;
+
+ const { plotData: beforePlotData, domain } = filterData(
+ fullData,
+ newDomain,
+ xAccessor,
+ initialXScale,
+ {
+ currentPlotData: initialPlotData,
+ currentDomain: initialXScale.domain(),
+ },
+ );
+
+ const plotData = postCalculator(beforePlotData);
+ const updatedScale = initialXScale.copy().domain(domain);
+
+ // @ts-ignore
+ const chartConfig = getChartConfigWithUpdatedYScales(
+ initialChartConfig,
+ { plotData, xAccessor, displayXAccessor, fullData },
+ updatedScale.domain(),
+ );
+
+ return {
+ xScale: updatedScale,
+ plotData,
+ chartConfig,
+ };
+ }
+ public pinchZoomHelper(initialPinch, finalPinch) {
+ const { xScale: initialPinchXScale } = initialPinch;
+
+ const {
+ xScale: initialXScale,
+ chartConfig: initialChartConfig,
+ plotData: initialPlotData,
+ xAccessor,
+ displayXAccessor,
+ } = this.state;
+ const { filterData } = this.state;
+ const { fullData } = this;
+ const { postCalculator } = this.props;
+
+ const { topLeft: iTL, bottomRight: iBR } = pinchCoordinates(initialPinch);
+ const { topLeft: fTL, bottomRight: fBR } = pinchCoordinates(finalPinch);
+
+ const e = initialPinchXScale.range()[1];
+
+ const xDash = Math.round(-(iBR[0] * fTL[0] - iTL[0] * fBR[0]) / (iTL[0] - iBR[0]));
+ const yDash = Math.round(e + ((e - iBR[0]) * (e - fTL[0]) - (e - iTL[0]) * (e - fBR[0])) / ((e - iTL[0]) - (e - iBR[0])));
+
+ const x = Math.round(-xDash * iTL[0] / (-xDash + fTL[0]));
+ const y = Math.round(e - (yDash - e) * (e - iTL[0]) / (yDash + (e - fTL[0])));
+
+ const newDomain = [x, y].map(initialPinchXScale.invert);
+ // var domainR = initial.right + right;
+
+ const { plotData: beforePlotData, domain } = filterData(
+ fullData,
+ newDomain,
+ xAccessor,
+ initialPinchXScale,
+ {
+ currentPlotData: initialPlotData,
+ currentDomain: initialXScale.domain(),
+ },
+ );
+
+ const plotData = postCalculator(beforePlotData);
+ const updatedScale = initialXScale.copy().domain(domain);
+
+ const mouseXY = finalPinch.touch1Pos;
+
+ // @ts-ignore
+ const chartConfig = getChartConfigWithUpdatedYScales(
+ initialChartConfig,
+ { plotData, xAccessor, displayXAccessor, fullData },
+ updatedScale.domain(),
+ );
+ const currentItem = getCurrentItem(updatedScale, xAccessor, mouseXY, plotData);
+
+ return {
+ chartConfig,
+ xScale: updatedScale,
+ plotData,
+ mouseXY,
+ currentItem,
+ };
+ }
+
+ public cancelDrag() {
+ this.eventCaptureNode.cancelDrag();
+ this.triggerEvent("dragcancel");
+ }
+
+ public handlePinchZoom(initialPinch, finalPinch, e) {
+ if (!this.waitingForPinchZoomAnimationFrame) {
+ this.waitingForPinchZoomAnimationFrame = true;
+ const state = this.pinchZoomHelper(initialPinch, finalPinch);
+
+ this.triggerEvent("pinchzoom", state, e);
+
+ this.finalPinch = finalPinch;
+
+ requestAnimationFrame(() => {
+ this.clearBothCanvas();
+ this.draw({ trigger: "pinchzoom" });
+ this.waitingForPinchZoomAnimationFrame = false;
+ });
+ }
+ }
+ public handlePinchZoomEnd(initialPinch, e) {
+ const { xAccessor } = this.state;
+
+ if (this.finalPinch) {
+ const state = this.pinchZoomHelper(initialPinch, this.finalPinch);
+ const { xScale } = state;
+ this.triggerEvent("pinchzoom", state, e);
+
+ this.finalPinch = undefined;
+
+ this.clearThreeCanvas();
+
+ const { fullData } = this;
+ const firstItem = head(fullData);
+
+ const start = head(xScale.domain());
+ const end = xAccessor(firstItem);
+ const { onLoadMore } = this.props;
+
+ this.setState(state, () => {
+ if (start < end) {
+ onLoadMore(start, end);
+ }
+ });
+ }
+ }
+ public handleZoom(zoomDirection, mouseXY, e) {
+ if (this.panInProgress) {
+ return;
+ }
+ // console.log("zoomDirection ", zoomDirection, " mouseXY ", mouseXY);
+ const { xAccessor, xScale: initialXScale, plotData: initialPlotData } = this.state;
+ const {
+ zoomMultiplier = ChartCanvas.defaultProps.zoomMultiplier,
+ zoomAnchor,
+ } = this.props;
+ const { fullData } = this;
+ const item = zoomAnchor({
+ xScale: initialXScale,
+ xAccessor,
+ mouseXY,
+ plotData: initialPlotData,
+ fullData,
+ });
+
+ const cx = initialXScale(item);
+ const c = zoomDirection > 0 ? 1 * zoomMultiplier : 1 / zoomMultiplier;
+ const newDomain = initialXScale.range().map((x) => cx + (x - cx) * c).map(initialXScale.invert);
+
+ const { xScale, plotData, chartConfig } = this.calculateStateForDomain(newDomain);
+
+ const currentItem = getCurrentItem(xScale, xAccessor, mouseXY, plotData);
+ const currentCharts = getCurrentCharts(chartConfig, mouseXY);
+
+ this.clearThreeCanvas();
+
+ const firstItem = head(fullData);
+
+ const start = head(xScale.domain());
+ const end = xAccessor(firstItem);
+ const { onLoadMore } = this.props;
+
+ this.mutableState = {
+ mouseXY,
+ currentItem,
+ currentCharts,
+ };
+
+ this.triggerEvent("zoom", {
+ xScale,
+ plotData,
+ chartConfig,
+ mouseXY,
+ currentCharts,
+ currentItem,
+ show: true,
+ }, e);
+
+ this.setState({
+ xScale,
+ plotData,
+ chartConfig,
+ }, () => {
+ if (start < end) {
+ onLoadMore(start, end);
+ }
+ });
+ }
+ public xAxisZoom(newDomain) {
+ const { xScale, plotData, chartConfig } = this.calculateStateForDomain(newDomain);
+ this.clearThreeCanvas();
+
+ const { xAccessor } = this.state;
+ const { fullData } = this;
+ const firstItem = head(fullData);
+ const start = head(xScale.domain());
+ const end = xAccessor(firstItem);
+ const { onLoadMore } = this.props;
+
+ this.setState({
+ xScale,
+ plotData,
+ chartConfig,
+ }, () => {
+ if (start < end) { onLoadMore(start, end); }
+ });
+ }
+ public yAxisZoom(chartId, newDomain) {
+ this.clearThreeCanvas();
+ const { chartConfig: initialChartConfig } = this.state;
+ const chartConfig = initialChartConfig
+ .map((each) => {
+ if (each.id === chartId) {
+ const { yScale } = each;
+ return {
+ ...each,
+ yScale: yScale.copy().domain(newDomain),
+ yPanEnabled: true,
+ };
+ } else {
+ return each;
+ }
+ });
+
+ this.setState({
+ chartConfig,
+ });
+ }
+
+ public triggerEvent(type, props?, e?) {
+
+ this.subscriptions.forEach((each) => {
+ const state = {
+ ...this.state,
+ fullData: this.fullData,
+ subscriptions: this.subscriptions,
+ };
+ each.listener(type, props, state, e);
+ });
+ }
+
+ public draw(props) {
+ this.subscriptions.forEach((each) => {
+ if (isDefined(each.draw)) {
+ each.draw(props);
+ }
+ });
+ }
+ public redraw() {
+ this.clearThreeCanvas();
+ this.draw({ force: true });
+ }
+ public panHelper(mouseXY, initialXScale, { dx, dy }, chartsToPan) {
+ const { xAccessor, displayXAccessor, chartConfig: initialChartConfig } = this.state;
+ const { filterData } = this.state;
+ const { fullData } = this;
+ const { postCalculator } = this.props;
+
+ // console.log(dx, dy);
+ if (isNotDefined(initialXScale.invert)) {
+ throw new Error("xScale provided does not have an invert() method."
+ + "You are likely using an ordinal scale. This scale does not support zoom, pan");
+ }
+
+ const newDomain = initialXScale.range().map((x) => x - dx).map(initialXScale.invert);
+
+ const { plotData: beforePlotData, domain } = filterData(
+ fullData,
+ newDomain,
+ xAccessor,
+ initialXScale,
+ {
+ currentPlotData: this.hackyWayToStopPanBeyondBounds__plotData,
+ currentDomain: this.hackyWayToStopPanBeyondBounds__domain,
+ },
+ );
+
+ const updatedScale = initialXScale.copy().domain(domain);
+ const plotData = postCalculator(beforePlotData);
+ // console.log(last(plotData));
+
+ const currentItem = getCurrentItem(updatedScale, xAccessor, mouseXY, plotData);
+ const chartConfig = getChartConfigWithUpdatedYScales(
+ initialChartConfig,
+ { plotData, xAccessor, displayXAccessor, fullData },
+ updatedScale.domain(),
+ dy,
+ chartsToPan,
+ );
+ const currentCharts = getCurrentCharts(chartConfig, mouseXY);
+
+ // console.log(initialXScale.domain(), newDomain, updatedScale.domain());
+ return {
+ xScale: updatedScale,
+ plotData,
+ chartConfig,
+ mouseXY,
+ currentCharts,
+ currentItem,
+ };
+ }
+ public handlePan(mousePosition, panStartXScale, dxdy, chartsToPan, e) {
+ if (!this.waitingForPanAnimationFrame) {
+ this.waitingForPanAnimationFrame = true;
+
+ this.hackyWayToStopPanBeyondBounds__plotData = this.hackyWayToStopPanBeyondBounds__plotData || this.state.plotData;
+ this.hackyWayToStopPanBeyondBounds__domain = this.hackyWayToStopPanBeyondBounds__domain || this.state.xScale.domain();
+
+ const state = this.panHelper(mousePosition, panStartXScale, dxdy, chartsToPan);
+
+ this.hackyWayToStopPanBeyondBounds__plotData = state.plotData;
+ this.hackyWayToStopPanBeyondBounds__domain = state.xScale.domain();
+
+ this.panInProgress = true;
+ // console.log(panStartXScale.domain(), state.xScale.domain());
+
+ this.triggerEvent("pan", state, e);
+
+ this.mutableState = {
+ mouseXY: state.mouseXY,
+ currentItem: state.currentItem,
+ currentCharts: state.currentCharts,
+ };
+ requestAnimationFrame(() => {
+ this.waitingForPanAnimationFrame = false;
+ this.clearBothCanvas();
+ this.draw({ trigger: "pan" });
+ });
+ }
+ }
+ public handlePanEnd(mousePosition, panStartXScale, dxdy, chartsToPan, e) {
+ const state = this.panHelper(mousePosition, panStartXScale, dxdy, chartsToPan);
+ // console.log(this.canvasDrawCallbackList.map(d => d.type));
+ this.hackyWayToStopPanBeyondBounds__plotData = null;
+ this.hackyWayToStopPanBeyondBounds__domain = null;
+
+ this.panInProgress = false;
+
+ // console.log("PANEND", panEnd++);
+ const {
+ xScale,
+ plotData,
+ chartConfig,
+ } = state;
+
+ this.triggerEvent("panend", state, e);
+
+ requestAnimationFrame(() => {
+ const { xAccessor } = this.state;
+ const { fullData } = this;
+
+ const firstItem = head(fullData);
+ const start = head(xScale.domain());
+ const end = xAccessor(firstItem);
+ // console.log(start, end, start < end ? "Load more" : "I have it");
+
+ const { onLoadMore } = this.props;
+
+ this.clearThreeCanvas();
+
+ this.setState({
+ xScale,
+ plotData,
+ chartConfig,
+ }, () => {
+ if (start < end) { onLoadMore(start, end); }
+ });
+ });
+ }
+ public handleMouseDown(mousePosition, currentCharts, e) {
+ this.triggerEvent("mousedown", this.mutableState, e);
+ }
+ public handleMouseEnter(e) {
+ this.triggerEvent("mouseenter", {
+ show: true,
+ }, e);
+ }
+ public handleMouseMove(mouseXY, inputType, e) {
+ if (!this.waitingForMouseMoveAnimationFrame) {
+ this.waitingForMouseMoveAnimationFrame = true;
+
+ const { chartConfig, plotData, xScale, xAccessor } = this.state;
+ const currentCharts = getCurrentCharts(chartConfig, mouseXY);
+ const currentItem = getCurrentItem(xScale, xAccessor, mouseXY, plotData);
+ this.triggerEvent("mousemove", {
+ show: true,
+ mouseXY,
+ // prevMouseXY is used in interactive components
+ prevMouseXY: this.prevMouseXY,
+ currentItem,
+ currentCharts,
+ }, e);
+
+ this.prevMouseXY = mouseXY;
+ this.mutableState = {
+ mouseXY,
+ currentItem,
+ currentCharts,
+ };
+
+ requestAnimationFrame(() => {
+ this.clearMouseCanvas();
+ this.draw({ trigger: "mousemove" });
+ this.waitingForMouseMoveAnimationFrame = false;
+ });
+ }
+ }
+ public handleMouseLeave(e) {
+ this.triggerEvent("mouseleave", { show: false }, e);
+ this.clearMouseCanvas();
+ this.draw({ trigger: "mouseleave" });
+ }
+ public handleDragStart({ startPos }, e) {
+ this.triggerEvent("dragstart", { startPos }, e);
+ }
+ public handleDrag({ startPos, mouseXY }, e) {
+ const { chartConfig, plotData, xScale, xAccessor } = this.state;
+ const currentCharts = getCurrentCharts(chartConfig, mouseXY);
+ const currentItem = getCurrentItem(xScale, xAccessor, mouseXY, plotData);
+
+ this.triggerEvent("drag", {
+ startPos,
+ mouseXY,
+ currentItem,
+ currentCharts,
+ }, e);
+
+ this.mutableState = {
+ mouseXY,
+ currentItem,
+ currentCharts,
+ };
+
+ requestAnimationFrame(() => {
+ this.clearMouseCanvas();
+ this.draw({ trigger: "drag" });
+ });
+ }
+ public handleDragEnd({ mouseXY }, e) {
+ this.triggerEvent("dragend", { mouseXY }, e);
+
+ requestAnimationFrame(() => {
+ this.clearMouseCanvas();
+ this.draw({ trigger: "dragend" });
+ });
+ }
+ public handleClick(mousePosition, e) {
+ this.triggerEvent("click", this.mutableState, e);
+
+ requestAnimationFrame(() => {
+ this.clearMouseCanvas();
+ this.draw({ trigger: "click" });
+ });
+ }
+ public handleDoubleClick(mousePosition, e) {
+ this.triggerEvent("dblclick", {}, e);
+ }
+ public getChildContext() {
+ const dimensions = getDimensions(this.props);
+ return {
+ fullData: this.fullData,
+ plotData: this.state.plotData,
+ width: dimensions.width,
+ height: dimensions.height,
+ chartConfig: this.state.chartConfig,
+ xScale: this.state.xScale,
+ xAccessor: this.state.xAccessor,
+ displayXAccessor: this.state.displayXAccessor,
+ chartCanvasType: this.props.type,
+ margin: this.props.margin,
+ ratio: this.props.ratio,
+ xAxisZoom: this.xAxisZoom,
+ yAxisZoom: this.yAxisZoom,
+ getCanvasContexts: this.getCanvasContexts,
+ redraw: this.redraw,
+ subscribe: this.subscribe,
+ unsubscribe: this.unsubscribe,
+ generateSubscriptionId: this.generateSubscriptionId,
+ getMutableState: this.getMutableState,
+ amIOnTop: this.amIOnTop,
+ setCursorClass: this.setCursorClass,
+ };
+ }
+
+ public UNSAFE_componentWillReceiveProps(nextProps) {
+ const reset = shouldResetChart(this.props, nextProps);
+
+ const interaction = isInteractionEnabled(this.state.xScale, this.state.xAccessor, this.state.plotData);
+ const { chartConfig: initialChartConfig } = this.state;
+
+ let newState;
+ if (!interaction || reset || !shallowEqual(this.props.xExtents, nextProps.xExtents)) {
+ // do reset
+ newState = resetChart(nextProps);
+ this.mutableState = {};
+ } else {
+
+ const [start, end] = this.state.xScale.domain();
+ const prevLastItem = last(this.fullData);
+
+ const calculatedState = calculateFullData(nextProps);
+ const { xAccessor } = calculatedState;
+ const lastItemWasVisible = xAccessor(prevLastItem) <= end && xAccessor(prevLastItem) >= start;
+
+ newState = updateChart(
+ calculatedState,
+ this.state.xScale,
+ nextProps,
+ lastItemWasVisible,
+ initialChartConfig,
+ );
+ }
+
+ const { fullData, ...state } = newState;
+
+ if (!this.panInProgress) {
+ this.clearThreeCanvas();
+
+ this.setState(state);
+ }
+ this.fullData = fullData;
+ }
+
+ public resetYDomain(chartId) {
+ const { chartConfig } = this.state;
+ let changed = false;
+ const newChartConfig = chartConfig
+ .map((each) => {
+ if ((isNotDefined(chartId) || each.id === chartId)
+ && !shallowEqual(each.yScale.domain(), each.realYDomain)) {
+ changed = true;
+ return {
+ ...each,
+ yScale: each.yScale.domain(each.realYDomain),
+ yPanEnabled: false,
+ };
+ }
+ return each;
+ });
+
+ if (changed) {
+ this.clearThreeCanvas();
+ this.setState({
+ chartConfig: newChartConfig,
+ });
+ }
+ }
+
+ public shouldComponentUpdate() {
+ return !this.panInProgress;
+ }
+
+ public render() {
+
+ const {
+ type,
+ height,
+ width,
+ margin = ChartCanvas.defaultProps.margin,
+ className,
+ zIndex = ChartCanvas.defaultProps.zIndex,
+ defaultFocus, ratio, mouseMoveEvent, panEvent, zoomEvent } = this.props;
+ const { useCrossHairStyleCursor, onSelect } = this.props;
+
+ const { plotData, xScale, xAccessor, chartConfig } = this.state;
+ const dimensions = getDimensions(this.props);
+
+ const interaction = isInteractionEnabled(xScale, xAccessor, plotData);
+
+ const cursorStyle = useCrossHairStyleCursor && interaction;
+ const cursor = getCursorStyle();
+ return (
+
+
+
+
+ );
+ }
+}
diff --git a/packages/react-financial-charts/src/EventCapture.tsx b/packages/react-financial-charts/src/EventCapture.tsx
new file mode 100644
index 000000000..d196e60bd
--- /dev/null
+++ b/packages/react-financial-charts/src/EventCapture.tsx
@@ -0,0 +1,644 @@
+import { event as d3Event, mouse, select, touches } from "d3-selection";
+import * as React from "react";
+
+import {
+ d3Window, getTouchProps, isDefined, MOUSEENTER,
+ MOUSELEAVE,
+ MOUSEMOVE, mousePosition,
+ MOUSEUP, noop,
+ TOUCHEND, TOUCHMOVE,
+ touchPosition,
+} from "./utils";
+import { getCurrentCharts } from "./utils/ChartDataUtil";
+
+interface EventCaptureProps {
+ mouseMove: boolean;
+ zoom: boolean;
+ pan: boolean;
+ panSpeedMultiplier: number;
+ focus: boolean;
+ useCrossHairStyleCursor?: boolean;
+ width: number;
+ height: number;
+ chartConfig: Array<{ origin: number[], height: number }>;
+ xAccessor: any; // func
+ xScale: any; // func
+ disableInteraction: boolean;
+ getAllPanConditions: () => Array<{ panEnabled: boolean, draggable: boolean }>;
+ onMouseMove?: (touchXY: number[], eventType: string, event: React.TouchEvent) => void;
+ onMouseEnter?: (event: any) => void;
+ onMouseLeave?: (event: React.MouseEvent) => void;
+ onZoom?: (zoomDir: 1 | -1, mouseXY: number[], event: React.WheelEvent) => void;
+ onPinchZoom?: any; // func
+ onPinchZoomEnd: any; // func
+ onPan?: any; // func
+ onPanEnd?: any; // func
+ onDragStart?: (details: { startPos: number[] }, event: React.MouseEvent) => void;
+ onDrag?: (details: { startPos: number[], mouseXY: number[] }, event: React.MouseEvent) => void;
+ onDragComplete?: (details: { mouseXY: number[] }, event: React.MouseEvent) => void;
+ onClick?: (mouseXY: number[], event: React.MouseEvent) => void;
+ onDoubleClick?: (mouseXY: number[], event: React.MouseEvent) => void;
+ onContextMenu?: (mouseXY: number[], event: React.MouseEvent) => void;
+ onMouseDown?: (mouseXY: number[], currentCharts: any, event: React.MouseEvent) => void;
+}
+
+interface EventCaptureState {
+ cursorOverrideClass?: string;
+ dragInProgress?: boolean;
+ dragStartPosition?: any;
+ panInProgress: boolean;
+ panStart?: any;
+ pinchZoomStart?: any;
+}
+
+export class EventCapture extends React.Component {
+
+ public static defaultProps = {
+ mouseMove: false,
+ zoom: false,
+ pan: false,
+ panSpeedMultiplier: 1,
+ focus: false,
+ onDragComplete: noop,
+ disableInteraction: false,
+ };
+
+ private clicked?: boolean;
+ private dx: number = 0;
+ private dy: number = 0;
+ private dragHappened?: boolean;
+ private focus?: boolean;
+ private lastNewPos?;
+ private mouseInside: boolean;
+ private mouseInteraction: boolean;
+ private node;
+ private panEndTimeout?;
+ private panHappened?: boolean;
+
+ constructor(props: EventCaptureProps) {
+ super(props);
+
+ this.handleEnter = this.handleEnter.bind(this);
+ this.handleLeave = this.handleLeave.bind(this);
+ this.handleWheel = this.handleWheel.bind(this);
+ this.handleMouseMove = this.handleMouseMove.bind(this);
+ this.handleMouseDown = this.handleMouseDown.bind(this);
+ this.handlePanEnd = this.handlePanEnd.bind(this);
+ this.handlePan = this.handlePan.bind(this);
+ this.handleTouchStart = this.handleTouchStart.bind(this);
+ this.handleTouchMove = this.handleTouchMove.bind(this);
+ this.handlePinchZoom = this.handlePinchZoom.bind(this);
+ this.handlePinchZoomEnd = this.handlePinchZoomEnd.bind(this);
+ this.handleClick = this.handleClick.bind(this);
+ this.handleRightClick = this.handleRightClick.bind(this);
+ this.handleDrag = this.handleDrag.bind(this);
+ this.handleDragEnd = this.handleDragEnd.bind(this);
+ this.shouldPan = this.shouldPan.bind(this);
+ this.canPan = this.canPan.bind(this);
+ this.setCursorClass = this.setCursorClass.bind(this);
+ this.saveNode = this.saveNode.bind(this);
+ this.mouseInside = false;
+ this.mouseInteraction = true;
+ this.focus = props.focus;
+ this.state = {
+ panInProgress: false,
+ };
+ }
+
+ public saveNode(node) {
+ this.node = node;
+ }
+
+ public componentDidMount() {
+ if (this.node) {
+ select(this.node)
+ .on(MOUSEENTER, this.handleEnter)
+ .on(MOUSELEAVE, this.handleLeave);
+ }
+ }
+
+ public componentDidUpdate() {
+ this.componentDidMount();
+ }
+
+ public componentWillUnmount() {
+ if (this.node) {
+ select(this.node)
+ .on(MOUSEENTER, null)
+ .on(MOUSELEAVE, null);
+ const win = d3Window(this.node);
+ select(win)
+ .on(MOUSEMOVE, null);
+ }
+ }
+
+ public handleEnter() {
+ const { onMouseEnter } = this.props;
+ if (onMouseEnter === undefined) {
+ return;
+ }
+
+ const e = d3Event;
+ this.mouseInside = true;
+ if (!this.state.panInProgress
+ && !this.state.dragInProgress) {
+ const win = d3Window(this.node);
+ select(win)
+ .on(MOUSEMOVE, this.handleMouseMove);
+ }
+ onMouseEnter(e);
+ }
+
+ public handleLeave(e: React.MouseEvent) {
+ const { onMouseLeave } = this.props;
+ if (onMouseLeave === undefined) {
+ return;
+ }
+
+ this.mouseInside = false;
+ if (!this.state.panInProgress
+ && !this.state.dragInProgress) {
+ const win = d3Window(this.node);
+ select(win)
+ .on(MOUSEMOVE, null);
+ }
+ onMouseLeave(e);
+ }
+
+ public handleWheel(e: React.WheelEvent) {
+ const { zoom, onZoom } = this.props;
+ const { panInProgress } = this.state;
+
+ const yZoom = Math.abs(e.deltaY) > Math.abs(e.deltaX) && Math.abs(e.deltaY) > 0;
+ const mouseXY = mousePosition(e);
+ e.preventDefault();
+
+ if (zoom && this.focus && yZoom && !panInProgress) {
+ const zoomDir = e.deltaY > 0 ? 1 : -1;
+
+ if (onZoom !== undefined) {
+ onZoom(zoomDir, mouseXY, e);
+ }
+ } else if (this.focus) {
+ if (this.shouldPan()) {
+ // pan already in progress
+ const {
+ panStartXScale,
+ chartsToPan,
+ } = this.state.panStart;
+ this.lastNewPos = mouseXY;
+ this.panHappened = true;
+
+ this.dx += e.deltaX;
+ this.dy += e.deltaY;
+ const dxdy = { dx: this.dx, dy: this.dy };
+
+ this.props.onPan(mouseXY, panStartXScale, dxdy, chartsToPan, e);
+ } else {
+ const { xScale, chartConfig } = this.props;
+ const currentCharts = getCurrentCharts(chartConfig, mouseXY);
+
+ this.dx = 0;
+ this.dy = 0;
+ this.setState({
+ panInProgress: true,
+ panStart: {
+ panStartXScale: xScale,
+ panOrigin: mouseXY,
+ chartsToPan: currentCharts,
+ },
+ });
+ }
+ this.queuePanEnd();
+ }
+ }
+
+ public queuePanEnd() {
+ if (isDefined(this.panEndTimeout)) {
+ clearTimeout(this.panEndTimeout);
+ }
+ this.panEndTimeout = setTimeout(() => {
+ this.handlePanEnd();
+ }, 100);
+ }
+
+ public handleMouseMove() {
+ const e = d3Event;
+
+ const { onMouseMove, mouseMove } = this.props;
+
+ if (this.mouseInteraction &&
+ mouseMove &&
+ !this.state.panInProgress) {
+
+ const newPos = mouse(this.node);
+
+ if (onMouseMove !== undefined) {
+ onMouseMove(newPos, "mouse", e);
+ }
+ }
+ }
+
+ public handleClick(e: React.MouseEvent) {
+ const mouseXY = mousePosition(e);
+ const { onClick, onDoubleClick } = this.props;
+
+ if (!this.panHappened && !this.dragHappened) {
+ if (this.clicked && onDoubleClick !== undefined) {
+ onDoubleClick(mouseXY, e);
+ this.clicked = false;
+ } else if (onClick !== undefined) {
+ onClick(mouseXY, e);
+ this.clicked = true;
+ setTimeout(() => {
+ if (this.clicked) {
+ this.clicked = false;
+ }
+ }, 400);
+ }
+ }
+ }
+
+ public handleRightClick(e: React.MouseEvent) {
+ e.stopPropagation();
+ e.preventDefault();
+ const { onContextMenu, onPanEnd } = this.props;
+
+ const mouseXY = mousePosition(e, this.node.getBoundingClientRect());
+
+ if (isDefined(this.state.panStart)) {
+ const { panStartXScale, panOrigin, chartsToPan } = this.state.panStart;
+ if (this.panHappened) {
+ onPanEnd(mouseXY, panStartXScale, panOrigin, chartsToPan, e);
+ }
+ const win = d3Window(this.node);
+ select(win)
+ .on(MOUSEMOVE, null)
+ .on(MOUSEUP, null);
+
+ this.setState({
+ panInProgress: false,
+ panStart: null,
+ });
+ }
+
+ if (onContextMenu !== undefined) {
+ onContextMenu(mouseXY, e);
+ }
+ }
+
+ public handleDrag() {
+ const e = d3Event;
+ if (this.props.onDrag) {
+ this.dragHappened = true;
+ const mouseXY = mouse(this.node);
+ this.props.onDrag({
+ startPos: this.state.dragStartPosition,
+ mouseXY,
+ }, e);
+ }
+ }
+
+ public cancelDrag() {
+ const win = d3Window(this.node);
+ select(win)
+ .on(MOUSEMOVE, this.mouseInside ? this.handleMouseMove : null)
+ .on(MOUSEUP, null);
+
+ this.setState({
+ dragInProgress: false,
+ });
+ this.mouseInteraction = true;
+ }
+
+ public handleDragEnd() {
+ const e = d3Event;
+ const mouseXY = mouse(this.node);
+
+ const win = d3Window(this.node);
+ select(win)
+ .on(MOUSEMOVE, this.mouseInside ? this.handleMouseMove : null)
+ .on(MOUSEUP, null);
+
+ if (this.dragHappened) {
+ const { onDragComplete } = this.props;
+ if (onDragComplete !== undefined) {
+ onDragComplete({ mouseXY }, e);
+ }
+ }
+
+ this.setState({
+ dragInProgress: false,
+ });
+ this.mouseInteraction = true;
+ }
+
+ public canPan() {
+ const { getAllPanConditions } = this.props;
+ const { pan: initialPanEnabled } = this.props;
+
+ const {
+ panEnabled,
+ draggable: somethingSelected,
+ } = getAllPanConditions()
+ .reduce((returnObj, a) => {
+ return {
+ draggable: returnObj.draggable || a.draggable,
+ panEnabled: returnObj.panEnabled && a.panEnabled,
+ };
+ }, {
+ draggable: false,
+ panEnabled: initialPanEnabled,
+ });
+
+ return {
+ panEnabled,
+ somethingSelected,
+ };
+ }
+
+ public handleMouseDown(e: React.MouseEvent) {
+ if (e.button !== 0) {
+ return;
+ }
+ const { xScale, chartConfig, onMouseDown } = this.props;
+
+ this.panHappened = false;
+ this.dragHappened = false;
+ this.focus = true;
+
+ if (!this.state.panInProgress
+ && this.mouseInteraction
+ ) {
+
+ const mouseXY = mousePosition(e);
+ const currentCharts = getCurrentCharts(chartConfig, mouseXY);
+ const {
+ panEnabled, somethingSelected,
+ } = this.canPan();
+ const pan = panEnabled && !somethingSelected;
+
+ if (pan) {
+ this.setState({
+ panInProgress: pan,
+ panStart: {
+ panStartXScale: xScale,
+ panOrigin: mouseXY,
+ chartsToPan: currentCharts,
+ },
+ });
+
+ const win = d3Window(this.node);
+ select(win)
+ .on(MOUSEMOVE, this.handlePan)
+ .on(MOUSEUP, this.handlePanEnd);
+
+ } else if (somethingSelected) {
+ this.setState({
+ panInProgress: false,
+ dragInProgress: true,
+ panStart: null,
+ dragStartPosition: mouseXY,
+ });
+
+ const { onDragStart } = this.props;
+
+ if (onDragStart !== undefined) {
+ onDragStart({ startPos: mouseXY }, e);
+ }
+
+ const win = d3Window(this.node);
+ select(win)
+ .on(MOUSEMOVE, this.handleDrag)
+ .on(MOUSEUP, this.handleDragEnd);
+ }
+
+ if (onMouseDown !== undefined) {
+ onMouseDown(mouseXY, currentCharts, e);
+ }
+ }
+ e.preventDefault();
+ }
+
+ public shouldPan() {
+ const { pan: panEnabled, onPan } = this.props;
+ return panEnabled
+ && onPan
+ && isDefined(this.state.panStart);
+ }
+
+ public handlePan() {
+ const e = d3Event;
+
+ if (this.shouldPan()) {
+ this.panHappened = true;
+
+ const { panStartXScale, panOrigin, chartsToPan } = this.state.panStart;
+
+ const mouseXY = this.mouseInteraction
+ ? mouse(this.node)
+ : touches(this.node)[0];
+
+ this.lastNewPos = mouseXY;
+ const dx = mouseXY[0] - panOrigin[0];
+ const dy = mouseXY[1] - panOrigin[1];
+
+ this.dx = dx;
+ this.dy = dy;
+
+ this.props.onPan(
+ mouseXY, panStartXScale, { dx, dy }, chartsToPan, e,
+ );
+ }
+ }
+
+ public handlePanEnd() {
+ const e = d3Event;
+ const { pan: panEnabled, onPanEnd } = this.props;
+
+ if (isDefined(this.state.panStart)) {
+ const { panStartXScale, chartsToPan } = this.state.panStart;
+
+ const win = d3Window(this.node);
+ select(win)
+ .on(MOUSEMOVE, this.mouseInside ? this.handleMouseMove : null)
+ .on(MOUSEUP, null)
+ .on(TOUCHMOVE, null)
+ .on(TOUCHEND, null);
+
+ if (this.panHappened
+ // && !this.contextMenuClicked
+ && panEnabled
+ && onPanEnd) {
+ const { dx, dy } = this;
+
+ delete this.dx;
+ delete this.dy;
+ onPanEnd(this.lastNewPos, panStartXScale, { dx, dy }, chartsToPan, e);
+ }
+
+ this.setState({
+ panInProgress: false,
+ panStart: null,
+ });
+ }
+ }
+
+ public handleTouchMove(e: React.TouchEvent) {
+ const { onMouseMove } = this.props;
+ if (onMouseMove === undefined) {
+ return;
+ }
+
+ const touchXY = touchPosition(getTouchProps(e.touches[0]), e);
+ onMouseMove(touchXY, "touch", e);
+ }
+
+ public handleTouchStart(e: React.TouchEvent) {
+ this.mouseInteraction = false;
+
+ const { pan: panEnabled, chartConfig, onMouseMove } = this.props;
+ const { xScale, onPanEnd } = this.props;
+
+ if (e.touches.length === 1) {
+
+ this.panHappened = false;
+ const touchXY = touchPosition(getTouchProps(e.touches[0]), e);
+ if (onMouseMove !== undefined) {
+ onMouseMove(touchXY, "touch", e);
+ }
+
+ if (panEnabled) {
+ const currentCharts = getCurrentCharts(chartConfig, touchXY);
+
+ this.setState({
+ panInProgress: true,
+ panStart: {
+ panStartXScale: xScale,
+ panOrigin: touchXY,
+ chartsToPan: currentCharts,
+ },
+ });
+
+ const win = d3Window(this.node);
+ select(win)
+ .on(TOUCHMOVE, this.handlePan, false)
+ .on(TOUCHEND, this.handlePanEnd, false);
+
+ }
+ } else if (e.touches.length === 2) {
+ // pinch zoom begin
+ // do nothing pinch zoom is handled in handleTouchMove
+ const { panInProgress, panStart } = this.state;
+
+ if (panInProgress && panEnabled && onPanEnd) {
+ const { panStartXScale, panOrigin, chartsToPan } = panStart;
+
+ const win = d3Window(this.node);
+ select(win)
+ .on(MOUSEMOVE, this.mouseInside ? this.handleMouseMove : null)
+ .on(MOUSEUP, null)
+ .on(TOUCHMOVE, this.handlePinchZoom, false)
+ .on(TOUCHEND, this.handlePinchZoomEnd, false);
+
+ const touch1Pos = touchPosition(getTouchProps(e.touches[0]), e);
+ const touch2Pos = touchPosition(getTouchProps(e.touches[1]), e);
+
+ if (this.panHappened
+ // && !this.contextMenuClicked
+ && panEnabled
+ && onPanEnd) {
+
+ onPanEnd(this.lastNewPos, panStartXScale, panOrigin, chartsToPan, e);
+ }
+
+ this.setState({
+ panInProgress: false,
+ pinchZoomStart: {
+ xScale,
+ touch1Pos,
+ touch2Pos,
+ range: xScale.range(),
+ chartsToPan,
+ },
+ });
+ }
+ }
+ }
+
+ public handlePinchZoom() {
+ const e = d3Event;
+ const [touch1Pos, touch2Pos] = touches(this.node);
+ const { xScale, zoom: zoomEnabled, onPinchZoom } = this.props;
+
+ // eslint-disable-next-line no-unused-vars
+ const { chartsToPan, ...initialPinch } = this.state.pinchZoomStart;
+
+ if (zoomEnabled && onPinchZoom) {
+ onPinchZoom(initialPinch, {
+ touch1Pos,
+ touch2Pos,
+ xScale,
+ }, e);
+ }
+ }
+
+ public handlePinchZoomEnd() {
+ const e = d3Event;
+
+ const win = d3Window(this.node);
+ select(win)
+ .on(TOUCHMOVE, null)
+ .on(TOUCHEND, null);
+
+ const { zoom: zoomEnabled, onPinchZoomEnd } = this.props;
+
+ // eslint-disable-next-line no-unused-vars
+ const { chartsToPan, ...initialPinch } = this.state.pinchZoomStart;
+
+ if (zoomEnabled && onPinchZoomEnd) {
+ onPinchZoomEnd(initialPinch, e);
+ }
+
+ this.setState({
+ pinchZoomStart: undefined,
+ });
+ }
+
+ public setCursorClass(cursorOverrideClass) {
+ if (cursorOverrideClass !== this.state.cursorOverrideClass) {
+ this.setState({
+ cursorOverrideClass,
+ });
+ }
+ }
+
+ public render() {
+ const { height, width, disableInteraction, useCrossHairStyleCursor } = this.props;
+ const className = this.state.cursorOverrideClass !== undefined
+ ? this.state.cursorOverrideClass
+ : !useCrossHairStyleCursor ? "" : this.state.panInProgress
+ ? "react-stockcharts-grabbing-cursor"
+ : "react-stockcharts-crosshair-cursor";
+
+ const interactionProps = disableInteraction || {
+ onWheel: this.handleWheel,
+ onMouseDown: this.handleMouseDown,
+ onClick: this.handleClick,
+ onContextMenu: this.handleRightClick,
+ onTouchStart: this.handleTouchStart,
+ onTouchMove: this.handleTouchMove,
+ };
+
+ return (
+
+ );
+ }
+}
diff --git a/packages/react-financial-charts/src/GenericChartComponent.tsx b/packages/react-financial-charts/src/GenericChartComponent.tsx
new file mode 100644
index 000000000..3426083d4
--- /dev/null
+++ b/packages/react-financial-charts/src/GenericChartComponent.tsx
@@ -0,0 +1,140 @@
+import * as PropTypes from "prop-types";
+
+import GenericComponent from "./GenericComponent";
+import {
+ find,
+ isDefined,
+} from "./utils";
+
+const ALWAYS_TRUE_TYPES = [
+ "drag",
+ "dragend",
+];
+
+class GenericChartComponent extends GenericComponent {
+
+ public static defaultProps = GenericComponent.defaultProps;
+
+ public static contextTypes = {
+ width: PropTypes.number.isRequired,
+ height: PropTypes.number.isRequired,
+ margin: PropTypes.object.isRequired,
+ chartId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+ getCanvasContexts: PropTypes.func,
+ chartCanvasType: PropTypes.string,
+ xScale: PropTypes.func.isRequired,
+ xAccessor: PropTypes.func.isRequired,
+ displayXAccessor: PropTypes.func.isRequired,
+ plotData: PropTypes.array.isRequired,
+ fullData: PropTypes.array.isRequired,
+ chartConfig: PropTypes.oneOfType([
+ PropTypes.array,
+ PropTypes.object,
+ ]).isRequired,
+ morePropsDecorator: PropTypes.func,
+ generateSubscriptionId: PropTypes.func,
+ getMutableState: PropTypes.func.isRequired,
+ amIOnTop: PropTypes.func.isRequired,
+ subscribe: PropTypes.func.isRequired,
+ unsubscribe: PropTypes.func.isRequired,
+ setCursorClass: PropTypes.func.isRequired,
+ canvasOriginX: PropTypes.number,
+ canvasOriginY: PropTypes.number,
+ ratio: PropTypes.number.isRequired,
+ };
+
+ public constructor(props, context) {
+ super(props, context);
+
+ this.preCanvasDraw = this.preCanvasDraw.bind(this);
+ this.postCanvasDraw = this.postCanvasDraw.bind(this);
+ this.shouldTypeProceed = this.shouldTypeProceed.bind(this);
+ this.preEvaluate = this.preEvaluate.bind(this);
+ }
+
+ public preCanvasDraw(ctx, moreProps) {
+
+ super.preCanvasDraw(ctx, moreProps);
+
+ ctx.save();
+ const { margin, ratio } = this.context;
+ const { chartConfig } = moreProps;
+
+ const canvasOriginX = (0.5 * ratio) + chartConfig.origin[0] + margin.left;
+ const canvasOriginY = (0.5 * ratio) + chartConfig.origin[1] + margin.top;
+
+ const { chartConfig: { width, height } } = moreProps;
+ const { clip, edgeClip } = this.props;
+
+ ctx.setTransform(1, 0, 0, 1, 0, 0);
+ ctx.scale(ratio, ratio);
+ if (edgeClip) {
+ ctx.beginPath();
+ ctx.rect(-1, canvasOriginY - 10, width + margin.left + margin.right + 1, height + 20);
+ ctx.clip();
+ }
+
+ ctx.translate(canvasOriginX, canvasOriginY);
+
+ if (clip) {
+ ctx.beginPath();
+ ctx.rect(-1, -1, width + 1, height + 1);
+ ctx.clip();
+ }
+ }
+
+ public postCanvasDraw(ctx, moreProps) {
+ super.postCanvasDraw(ctx, moreProps);
+ ctx.restore();
+ }
+
+ public updateMoreProps(moreProps) {
+ super.updateMoreProps(moreProps);
+ const { chartConfig: chartConfigList } = moreProps;
+
+ if (chartConfigList && Array.isArray(chartConfigList)) {
+ const { chartId } = this.context;
+ const chartConfig = find(chartConfigList, (each) => each.id === chartId);
+ this.moreProps.chartConfig = chartConfig;
+ }
+ if (isDefined(this.moreProps.chartConfig)) {
+ const { origin: [ox, oy] } = this.moreProps.chartConfig;
+ if (isDefined(moreProps.mouseXY)) {
+ const { mouseXY: [x, y] } = moreProps;
+ this.moreProps.mouseXY = [
+ x - ox,
+ y - oy,
+ ];
+ }
+ if (isDefined(moreProps.startPos)) {
+ const { startPos: [x, y] } = moreProps;
+ this.moreProps.startPos = [
+ x - ox,
+ y - oy,
+ ];
+ }
+ }
+ }
+
+ public preEvaluate(/* type, moreProps */) {
+ ///
+ }
+
+ public shouldTypeProceed(type, moreProps) {
+ if (
+ (type === "mousemove" || type === "click")
+ && this.props.disablePan) {
+ return true;
+ }
+ if (
+ ALWAYS_TRUE_TYPES.indexOf(type) === -1
+ && isDefined(moreProps)
+ && isDefined(moreProps.currentCharts)
+ ) {
+ return (moreProps.currentCharts.indexOf(this.context.chartId) > -1);
+ }
+ return true;
+ }
+}
+
+export default GenericChartComponent;
diff --git a/packages/react-financial-charts/src/GenericComponent.tsx b/packages/react-financial-charts/src/GenericComponent.tsx
new file mode 100644
index 000000000..0c29ad4f6
--- /dev/null
+++ b/packages/react-financial-charts/src/GenericComponent.tsx
@@ -0,0 +1,505 @@
+import * as PropTypes from "prop-types";
+import * as React from "react";
+
+import {
+ functor,
+ identity,
+ isDefined,
+ isNotDefined,
+ noop,
+} from "./utils";
+
+const aliases = {
+ mouseleave: "mousemove", // to draw interactive after mouse exit
+ panend: "pan",
+ pinchzoom: "pan",
+ mousedown: "mousemove",
+ click: "mousemove",
+ contextmenu: "mousemove",
+ dblclick: "mousemove",
+ dragstart: "drag",
+ dragend: "drag",
+ dragcancel: "drag",
+};
+
+interface GenericComponentProps {
+ svgDraw: any; // func
+ canvasDraw?: any; // func
+ drawOn: any[];
+ clip?: boolean;
+ edgeClip?: boolean;
+ interactiveCursorClass?: string;
+ selected?: boolean;
+ enableDragOnHover?: boolean;
+ disablePan?: boolean;
+ canvasToDraw: any; // func
+ isHover?: any; // func
+ onClick?: any; // func
+ onClickWhenHover?: any; // func
+ onClickOutside?: any; // func
+ onPan?: any; // func
+ onPanEnd?: any; // func
+ onDragStart?: any; // func
+ onDrag?: any; // func
+ onDragComplete?: any; // func
+ onDoubleClick?: any; // func
+ onDoubleClickWhenHover?: any; // func
+ onContextMenu?: any; // func
+ onContextMenuWhenHover?: any; // func
+ onMouseMove?: any; // func
+ onMouseDown?: any; // func
+ onHover?: any; // func
+ onUnHover?: any; // func
+ debug?: any; // func
+}
+
+interface GenericComponentState {
+ updateCount: number;
+}
+
+class GenericComponent extends React.Component {
+
+ public static defaultProps = {
+ svgDraw: functor(null),
+ draw: [],
+ canvasToDraw: (contexts) => contexts.mouseCoord,
+ clip: true,
+ edgeClip: false,
+ selected: false,
+ disablePan: false,
+ enableDragOnHover: false,
+ onClickWhenHover: noop,
+ onClickOutside: noop,
+ onDragStart: noop,
+ onMouseMove: noop,
+ onMouseDown: noop,
+ debug: noop,
+ };
+
+ public static contextTypes = {
+ width: PropTypes.number.isRequired,
+ height: PropTypes.number.isRequired,
+ margin: PropTypes.object.isRequired,
+ chartId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+ getCanvasContexts: PropTypes.func,
+ chartCanvasType: PropTypes.string,
+ xScale: PropTypes.func.isRequired,
+ xAccessor: PropTypes.func.isRequired,
+ displayXAccessor: PropTypes.func.isRequired,
+ plotData: PropTypes.array.isRequired,
+ fullData: PropTypes.array.isRequired,
+ chartConfig: PropTypes.oneOfType([
+ PropTypes.array,
+ PropTypes.object,
+ ]).isRequired,
+ morePropsDecorator: PropTypes.func,
+ generateSubscriptionId: PropTypes.func,
+ getMutableState: PropTypes.func.isRequired,
+ amIOnTop: PropTypes.func.isRequired,
+ subscribe: PropTypes.func.isRequired,
+ unsubscribe: PropTypes.func.isRequired,
+ setCursorClass: PropTypes.func.isRequired,
+ };
+
+ public moreProps;
+
+ private dragInProgress;
+ private evaluationInProgress;
+ private iSetTheCursorClass;
+ private suscriberId;
+
+ public constructor(props, context) {
+ super(props, context);
+ this.drawOnCanvas = this.drawOnCanvas.bind(this);
+ this.getMoreProps = this.getMoreProps.bind(this);
+ this.listener = this.listener.bind(this);
+ this.draw = this.draw.bind(this);
+ this.updateMoreProps = this.updateMoreProps.bind(this);
+ this.evaluateType = this.evaluateType.bind(this);
+ this.isHover = this.isHover.bind(this);
+ this.preCanvasDraw = this.preCanvasDraw.bind(this);
+ this.postCanvasDraw = this.postCanvasDraw.bind(this);
+ this.getPanConditions = this.getPanConditions.bind(this);
+ this.shouldTypeProceed = this.shouldTypeProceed.bind(this);
+ this.preEvaluate = this.preEvaluate.bind(this);
+
+ const { generateSubscriptionId } = context;
+ this.suscriberId = generateSubscriptionId();
+
+ this.moreProps = {};
+
+ this.state = {
+ updateCount: 0,
+ };
+ }
+
+ public updateMoreProps(moreProps) {
+ Object.keys(moreProps).forEach((key) => {
+ this.moreProps[key] = moreProps[key];
+ });
+ }
+
+ public shouldTypeProceed(type, moreProps) {
+ return true;
+ }
+
+ public preEvaluate() {
+ /// empty
+ }
+
+ public listener(type, moreProps, state, e) {
+ if (isDefined(moreProps)) {
+ this.updateMoreProps(moreProps);
+ }
+ this.evaluationInProgress = true;
+ this.evaluateType(type, e);
+ this.evaluationInProgress = false;
+ }
+
+ public evaluateType(type, e) {
+ const newType = aliases[type] || type;
+ const proceed = this.props.drawOn.indexOf(newType) > -1;
+
+ if (!proceed) {
+ return;
+ }
+
+ // @ts-ignore
+ this.preEvaluate(type, this.moreProps, e);
+
+ if (!this.shouldTypeProceed(type, this.moreProps)) {
+ return;
+ }
+
+ switch (type) {
+ case "zoom":
+ case "mouseenter":
+ // DO NOT DRAW FOR THESE EVENTS
+ break;
+ case "mouseleave": {
+ this.moreProps.hovering = false;
+ const moreProps = this.getMoreProps();
+
+ if (this.props.onUnHover) {
+ this.props.onUnHover(moreProps, e);
+ }
+ break;
+ }
+ case "contextmenu": {
+ if (this.props.onContextMenu) {
+ this.props.onContextMenu(this.getMoreProps(), e);
+ }
+ if (
+ this.moreProps.hovering
+ && this.props.onContextMenuWhenHover
+ ) {
+ this.props.onContextMenuWhenHover(this.getMoreProps(), e);
+ }
+ break;
+ }
+ case "mousedown": {
+ if (this.props.onMouseDown) {
+ this.props.onMouseDown(this.getMoreProps(), e);
+ }
+ break;
+ }
+ case "click": {
+ const moreProps = this.getMoreProps();
+ if (this.moreProps.hovering) {
+ this.props.onClickWhenHover(moreProps, e);
+ } else {
+ this.props.onClickOutside(moreProps, e);
+ }
+ if (this.props.onClick) {
+ this.props.onClick(moreProps, e);
+ }
+ break;
+ }
+ case "mousemove": {
+
+ const prevHover = this.moreProps.hovering;
+ this.moreProps.hovering = this.isHover(e);
+
+ const { amIOnTop, setCursorClass } = this.context;
+
+ if (this.moreProps.hovering
+ && !this.props.selected
+ /* && !prevHover */
+ && amIOnTop(this.suscriberId)
+ && isDefined(this.props.onHover)) {
+ setCursorClass("react-stockcharts-pointer-cursor");
+ this.iSetTheCursorClass = true;
+ } else if (this.moreProps.hovering
+ && this.props.selected
+ && amIOnTop(this.suscriberId)) {
+ setCursorClass(this.props.interactiveCursorClass);
+ this.iSetTheCursorClass = true;
+ } else if (prevHover
+ && !this.moreProps.hovering
+ && this.iSetTheCursorClass) {
+ this.iSetTheCursorClass = false;
+ setCursorClass(null);
+ }
+ const moreProps = this.getMoreProps();
+
+ if (this.moreProps.hovering && !prevHover) {
+ if (this.props.onHover) {
+ this.props.onHover(moreProps, e);
+ }
+ }
+ if (prevHover && !this.moreProps.hovering) {
+ if (this.props.onUnHover) {
+ this.props.onUnHover(moreProps, e);
+ }
+ }
+
+ if (this.props.onMouseMove) {
+ this.props.onMouseMove(moreProps, e);
+ }
+ break;
+ }
+ case "dblclick": {
+ const moreProps = this.getMoreProps();
+
+ if (this.props.onDoubleClick) {
+ this.props.onDoubleClick(moreProps, e);
+ }
+ if (
+ this.moreProps.hovering
+ && this.props.onDoubleClickWhenHover
+ ) {
+ this.props.onDoubleClickWhenHover(moreProps, e);
+ }
+ break;
+ }
+ case "pan": {
+ this.moreProps.hovering = false;
+ if (this.props.onPan) {
+ this.props.onPan(this.getMoreProps(), e);
+ }
+ break;
+ }
+ case "panend": {
+ if (this.props.onPanEnd) {
+ this.props.onPanEnd(this.getMoreProps(), e);
+ }
+ break;
+ }
+ case "dragstart": {
+ if (this.getPanConditions().draggable) {
+ const { amIOnTop } = this.context;
+ if (amIOnTop(this.suscriberId)) {
+ this.dragInProgress = true;
+ this.props.onDragStart(this.getMoreProps(), e);
+ }
+ }
+ break;
+ }
+ case "drag": {
+ if (this.dragInProgress && this.props.onDrag) {
+ this.props.onDrag(this.getMoreProps(), e);
+ }
+ break;
+ }
+ case "dragend": {
+ if (this.dragInProgress && this.props.onDragComplete) {
+ this.props.onDragComplete(this.getMoreProps(), e);
+ }
+ this.dragInProgress = false;
+ break;
+ }
+ case "dragcancel": {
+ if (this.dragInProgress || this.iSetTheCursorClass) {
+ const { setCursorClass } = this.context;
+ setCursorClass(null);
+ }
+ break;
+ }
+ }
+ }
+
+ public isHover(e) {
+ return isDefined(this.props.isHover)
+ ? this.props.isHover(this.getMoreProps(), e)
+ : false;
+ }
+
+ public getPanConditions() {
+ const draggable = (
+ !!(this.props.selected && this.moreProps.hovering)
+ || (this.props.enableDragOnHover && this.moreProps.hovering)
+ );
+
+ return {
+ draggable,
+ panEnabled: !this.props.disablePan,
+ };
+ }
+
+ // @ts-ignore
+ public draw({ trigger, force } = { force: false }) {
+ const type = aliases[trigger] || trigger;
+ const proceed = this.props.drawOn.indexOf(type) > -1;
+
+ if (proceed
+ || this.props.selected /* this is to draw as soon as you select */
+ || force
+ ) {
+ const { chartCanvasType } = this.context;
+ const { canvasDraw } = this.props;
+
+ if (isNotDefined(canvasDraw) || chartCanvasType === "svg") {
+ const { updateCount } = this.state;
+ this.setState({
+ updateCount: updateCount + 1,
+ });
+ } else {
+ this.drawOnCanvas();
+ }
+ }
+ }
+
+ public UNSAFE_componentWillMount() {
+ const { subscribe, chartId } = this.context;
+ const { clip, edgeClip } = this.props;
+
+ subscribe(this.suscriberId,
+ {
+ chartId, clip, edgeClip,
+ listener: this.listener,
+ draw: this.draw,
+ getPanConditions: this.getPanConditions,
+ },
+ );
+ this.UNSAFE_componentWillReceiveProps(this.props, this.context);
+ }
+
+ public componentWillUnmount() {
+ const { unsubscribe } = this.context;
+ unsubscribe(this.suscriberId);
+ if (this.iSetTheCursorClass) {
+ const { setCursorClass } = this.context;
+ setCursorClass(null);
+ }
+ }
+
+ public componentDidMount() {
+ this.componentDidUpdate(this.props);
+ }
+
+ public componentDidUpdate(prevProps) {
+ const { chartCanvasType } = this.context;
+ const { canvasDraw, selected, interactiveCursorClass } = this.props;
+
+ if (prevProps.selected !== selected) {
+ const { setCursorClass } = this.context;
+ if (selected && this.moreProps.hovering) {
+ this.iSetTheCursorClass = true;
+ setCursorClass(interactiveCursorClass);
+ } else {
+ this.iSetTheCursorClass = false;
+ setCursorClass(null);
+ }
+ }
+ if (isDefined(canvasDraw)
+ && !this.evaluationInProgress
+ && chartCanvasType !== "svg") {
+
+ this.updateMoreProps(this.moreProps);
+ this.drawOnCanvas();
+ }
+ }
+
+ public UNSAFE_componentWillReceiveProps(nextProps, nextContext) {
+ const { xScale, plotData, chartConfig, getMutableState } = nextContext;
+
+ this.props.debug(nextContext);
+ this.moreProps = {
+ ...this.moreProps,
+ ...getMutableState(),
+ /*
+ ^ this is so
+ mouseXY, currentCharts, currentItem are available to
+ newly created components like MouseHoverText which
+ is created right after a new interactive object is drawn
+ */
+ xScale, plotData, chartConfig,
+ };
+ }
+
+ public getMoreProps() {
+ const {
+ xScale,
+ plotData,
+ chartConfig,
+ morePropsDecorator,
+ xAccessor,
+ displayXAccessor,
+ width,
+ height,
+ } = this.context;
+
+ const { chartId, fullData } = this.context;
+
+ const moreProps = {
+ xScale, plotData, chartConfig,
+ xAccessor, displayXAccessor,
+ width, height,
+ chartId,
+ fullData,
+ ...this.moreProps,
+ };
+
+ return (morePropsDecorator || identity)(moreProps);
+ }
+
+ public preCanvasDraw(ctx, moreProps) {
+ // do nothing
+ }
+
+ public postCanvasDraw(ctx, moreProps) {
+ // empty
+ }
+
+ public drawOnCanvas() {
+ const { canvasDraw, canvasToDraw } = this.props;
+ const { getCanvasContexts } = this.context;
+
+ const moreProps = this.getMoreProps();
+
+ const ctx = canvasToDraw(getCanvasContexts());
+
+ this.preCanvasDraw(ctx, moreProps);
+ canvasDraw(ctx, moreProps);
+ this.postCanvasDraw(ctx, moreProps);
+ }
+
+ public render() {
+ const { chartCanvasType, chartId } = this.context;
+ const { canvasDraw, clip, svgDraw } = this.props;
+
+ if (isDefined(canvasDraw) && chartCanvasType !== "svg") {
+ return null;
+ }
+
+ const suffix = isDefined(chartId) ? "-" + chartId : "";
+
+ const style = clip ? { clipPath: `url(#chart-area-clip${suffix})` } : undefined;
+
+ return (
+
+ {svgDraw(this.getMoreProps())}
+
+ );
+ }
+}
+
+export default GenericComponent;
+
+export function getAxisCanvas(contexts) {
+ return contexts.axes;
+}
+
+export function getMouseCanvas(contexts) {
+ return contexts.mouseCoord;
+}
diff --git a/packages/react-financial-charts/src/ZoomButtons.tsx b/packages/react-financial-charts/src/ZoomButtons.tsx
new file mode 100644
index 000000000..f2f27d440
--- /dev/null
+++ b/packages/react-financial-charts/src/ZoomButtons.tsx
@@ -0,0 +1,217 @@
+import { interpolateNumber } from "d3-interpolate";
+import { path as d3Path } from "d3-path";
+import * as PropTypes from "prop-types";
+import * as React from "react";
+
+import { last, noop } from "./utils";
+
+interface ZoomButtonsProps {
+ zoomMultiplier: number;
+ size: number[];
+ heightFromBase: number;
+ rx: number;
+ ry: number;
+ stroke: string;
+ strokeWidth: number;
+ strokeOpacity: number;
+ fill: string;
+ fillOpacity: number;
+ fontSize: number;
+ textDy: string;
+ textFill: string;
+ textStrokeWidth: number;
+ onReset: any; // func
+}
+
+class ZoomButtons extends React.Component {
+
+ public static defaultProps = {
+ size: [30, 24],
+ heightFromBase: 50,
+ rx: 3,
+ ry: 3,
+ stroke: "#000000",
+ strokeOpacity: 0.3,
+ strokeWidth: 1,
+ fill: "#D6D6D6",
+ fillOpacity: 0.4,
+ fontSize: 16,
+ textDy: ".3em",
+ textFill: "#000000",
+ textStrokeWidth: 2,
+ zoomMultiplier: 1.5,
+ onReset: noop,
+ };
+
+ public static contextTypes = {
+ xScale: PropTypes.func.isRequired,
+ chartConfig: PropTypes.object.isRequired,
+ plotData: PropTypes.array.isRequired,
+ xAccessor: PropTypes.func.isRequired,
+ xAxisZoom: PropTypes.func.isRequired,
+ };
+
+ private interval?: any;
+
+ public render() {
+ const { chartConfig } = this.context;
+ const { width, height } = chartConfig;
+ const { size, heightFromBase, rx, ry } = this.props;
+ const { stroke, strokeOpacity, fill, strokeWidth, fillOpacity } = this.props;
+ const { textFill, textStrokeWidth } = this.props;
+ const { onReset } = this.props;
+ const centerX = Math.round(width / 2);
+ const y = height - heightFromBase;
+
+ const [w, h] = size;
+ const hLength = 5;
+ const wLength = 6;
+
+ const textY = Math.round(y + h / 2);
+
+ const resetX = centerX;
+
+ const zoomOut = d3Path();
+ const zoomOutX = centerX - w - 2 * strokeWidth;
+ zoomOut.moveTo(zoomOutX - wLength, textY);
+ zoomOut.lineTo(zoomOutX + wLength, textY);
+ zoomOut.closePath();
+
+ const zoomIn = d3Path();
+ const zoomInX = centerX + w + 2 * strokeWidth;
+
+ zoomIn.moveTo(zoomInX - wLength, textY);
+ zoomIn.lineTo(zoomInX + wLength, textY);
+
+ zoomIn.moveTo(zoomInX, textY - hLength);
+ zoomIn.lineTo(zoomInX, textY + hLength);
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+
+ private readonly handleZoomIn = () => {
+ if (this.interval) { return; }
+ this.zoom(-1);
+ }
+
+ private readonly handleZoomOut = () => {
+ if (this.interval) { return; }
+ this.zoom(1);
+ }
+
+ private readonly zoom = (direction: number) => {
+ 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 = setInterval(() => {
+ xAxisZoom(foo.shift());
+ if (foo.length === 0) {
+ clearInterval(this.interval);
+ delete this.interval;
+ }
+ }, 10);
+ }
+}
+
+export default ZoomButtons;
diff --git a/packages/react-financial-charts/src/algorithm/index.ts b/packages/react-financial-charts/src/algorithm/index.ts
new file mode 100644
index 000000000..83abef6ec
--- /dev/null
+++ b/packages/react-financial-charts/src/algorithm/index.ts
@@ -0,0 +1,53 @@
+// tslint:disable: only-arrow-functions space-before-function-paren
+
+import { identity, merge, slidingWindow } from "../utils";
+
+export default function () {
+
+ let windowSize = 1;
+ let accumulator = identity;
+ let mergeAs = identity;
+
+ function algorithm(data: any) {
+
+ const defaultAlgorithm = slidingWindow()
+ .windowSize(windowSize)
+ // @ts-ignore
+ .accumulator(accumulator);
+
+ const calculator = merge()
+ .algorithm(defaultAlgorithm)
+ // @ts-ignore
+ .merge(mergeAs);
+
+ const newData = calculator(data);
+
+ return newData;
+ }
+
+ algorithm.accumulator = function (x: any) {
+ if (!arguments.length) {
+ return accumulator;
+ }
+ accumulator = x;
+ return algorithm;
+ };
+
+ algorithm.windowSize = function (x: any) {
+ if (!arguments.length) {
+ return windowSize;
+ }
+ windowSize = x;
+ return algorithm;
+ };
+
+ algorithm.merge = function (x: any) {
+ if (!arguments.length) {
+ return mergeAs;
+ }
+ mergeAs = x;
+ return algorithm;
+ };
+
+ return algorithm;
+}
diff --git a/packages/react-financial-charts/src/annotation/Annotate.tsx b/packages/react-financial-charts/src/annotation/Annotate.tsx
new file mode 100644
index 000000000..13262dbd8
--- /dev/null
+++ b/packages/react-financial-charts/src/annotation/Annotate.tsx
@@ -0,0 +1,54 @@
+import * as React from "react";
+
+import GenericChartComponent from "../GenericChartComponent";
+
+interface AnnotateProps {
+ readonly className?: string;
+ readonly with?: any; // func
+ readonly when?: any; // func
+ readonly usingProps?: object;
+}
+
+export class Annotate extends React.Component {
+
+ public static defaultProps = {
+ className: "react-stockcharts-annotate react-stockcharts-default-cursor",
+ };
+
+ public render() {
+ return (
+
+ );
+ }
+
+ private readonly renderSVG = (moreProps: any) => {
+ const { xAccessor } = moreProps;
+ const { xScale, chartConfig: { yScale }, plotData } = moreProps;
+
+ const { className, usingProps, with: Annotation, when } = this.props;
+
+ const data = this.plotfilter(when, plotData);
+
+ return (
+
+ {data.map((d: any, idx) => {
+ return (
+
+ );
+ })}
+
+ );
+ }
+
+ private readonly plotfilter = (when: any, plotData: any[]) => {
+ return plotData.filter(when);
+ }
+}
diff --git a/packages/react-financial-charts/src/annotation/BarAnnotation.tsx b/packages/react-financial-charts/src/annotation/BarAnnotation.tsx
new file mode 100644
index 000000000..478f31615
--- /dev/null
+++ b/packages/react-financial-charts/src/annotation/BarAnnotation.tsx
@@ -0,0 +1,162 @@
+import * as React from "react";
+import { functor } from "../utils";
+
+interface BarAnnotationProps {
+ readonly className?: string;
+ readonly path?: any; // func
+ readonly onClick?: any; // func
+ readonly xAccessor?: any; // func
+ readonly xScale?: any; // func
+ readonly yScale?: any; // func
+ readonly datum?: object;
+ readonly stroke?: string;
+ readonly fill?: string;
+ readonly opacity?: number;
+ readonly text?: string;
+ readonly textAnchor?: string;
+ readonly fontFamily?: string;
+ readonly fontSize?: number;
+ readonly textOpacity?: number;
+ readonly textFill?: string;
+ readonly textRotate?: number;
+ readonly textXOffset?: number;
+ readonly textYOffset?: number;
+ readonly textIcon?: string;
+ readonly textIconFontSize?: number;
+ readonly textIconOpacity?: number;
+ readonly textIconFill?: string;
+ readonly textIconRotate?: number;
+ readonly textIconXOffset?: number;
+ readonly textIconYOffset?: number;
+ readonly textIconAnchor?: string;
+}
+
+export class BarAnnotation extends React.Component {
+
+ public static defaultProps = {
+ className: "react-stockcharts-bar-annotation",
+ opacity: 1,
+ fill: "#000000",
+ textAnchor: "middle",
+ fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif",
+ fontSize: 10,
+ textFill: "#000000",
+ textOpacity: 1,
+ textIconFill: "#000000",
+ textIconFontSize: 10,
+ x: ({ xScale, xAccessor, datum }) => xScale(xAccessor(datum)),
+ };
+
+ public render() {
+ const { className, stroke, opacity } = this.props;
+ const { xAccessor, xScale, yScale, path } = this.props;
+ const {
+ text,
+ textXOffset,
+ textYOffset,
+ textAnchor,
+ fontFamily,
+ fontSize,
+ textFill,
+ textOpacity,
+ textRotate,
+ } = this.props;
+
+ const { x, y, fill, tooltip } = helper(
+ this.props,
+ xAccessor,
+ xScale,
+ yScale,
+ );
+
+ const {
+ textIcon,
+ textIconFontSize,
+ textIconFill,
+ textIconOpacity,
+ textIconRotate,
+ textIconXOffset,
+ textIconYOffset,
+ } = this.props;
+
+ return (
+
+ {tooltip != null ? {tooltip} : null}
+ {text != null ? (
+
+ {text}
+
+ ) : null}
+ {textIcon != null ? (
+
+ {textIcon}
+
+ ) : null}
+ {path != null ? (
+
+ ) : null}
+
+ );
+ }
+
+ private readonly onClick = (e: React.MouseEvent) => {
+ const { onClick } = this.props;
+
+ if (onClick) {
+ const { xScale, yScale, datum } = this.props;
+ onClick({ xScale, yScale, datum }, e);
+ }
+ }
+}
+
+function helper(props, xAccessor, xScale, yScale) {
+ const { x, y, datum, fill, tooltip, plotData } = props;
+
+ const xFunc = functor(x);
+ const yFunc = functor(y);
+
+ const [xPos, yPos] = [
+ xFunc({ xScale, xAccessor, datum, plotData }),
+ yFunc({ yScale, datum, plotData }),
+ ];
+
+ return {
+ x: xPos,
+ y: yPos,
+ fill: functor(fill)(datum),
+ tooltip: functor(tooltip)(datum),
+ };
+}
diff --git a/packages/react-financial-charts/src/annotation/Label.tsx b/packages/react-financial-charts/src/annotation/Label.tsx
new file mode 100644
index 000000000..b920d899e
--- /dev/null
+++ b/packages/react-financial-charts/src/annotation/Label.tsx
@@ -0,0 +1,117 @@
+import * as PropTypes from "prop-types";
+import * as React from "react";
+import GenericComponent from "../GenericComponent";
+
+import { functor, hexToRGBA, isDefined } from "../utils";
+import { helper, LabelAnnotation } from "./LabelAnnotation";
+
+interface LabelProps {
+ readonly className?: string;
+ readonly selectCanvas?: any; // func
+ readonly text?: string | any; // func
+ readonly textAnchor?: string;
+ readonly fontFamily?: string;
+ readonly fontSize?: number;
+ readonly opacity?: number;
+ readonly rotate?: number;
+ readonly onClick?: any; // func
+ readonly xAccessor?: any; // func
+ readonly xScale?: any; // func
+ readonly yScale?: any; // func
+ readonly datum?: object;
+ readonly x?: number | any; // func
+ readonly y?: number | any; // func
+}
+
+export class Label extends React.Component {
+
+ public static defaultProps = {
+ textAnchor: "middle",
+ fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif",
+ fontSize: 12,
+ fill: "#000000",
+ opacity: 1,
+ rotate: 0,
+ x: ({ xScale, xAccessor, datum }) => xScale(xAccessor(datum)),
+ selectCanvas: (canvases) => canvases.bg,
+ };
+
+ public static contextTypes = {
+ canvasOriginX: PropTypes.number,
+ canvasOriginY: PropTypes.number,
+
+ margin: PropTypes.object.isRequired,
+ ratio: PropTypes.number.isRequired,
+ };
+
+ public render() {
+ return (
+
+ );
+ }
+
+ private readonly drawOnCanvas = (ctx, moreProps) => {
+ drawOnCanvas2(ctx, this.props, this.context, moreProps);
+ }
+
+ private readonly renderSVG = (moreProps) => {
+ const { chartConfig } = moreProps;
+
+ return (
+
+ );
+ }
+}
+
+function getText(props) {
+ return functor(props.text)(props);
+}
+
+function getYScale(chartConfig) {
+ return Array.isArray(chartConfig) ? undefined : chartConfig.yScale;
+}
+
+function drawOnCanvas2(ctx, props, context, moreProps) {
+ ctx.save();
+
+ const { canvasOriginX, canvasOriginY, margin, ratio } = context;
+ ctx.setTransform(1, 0, 0, 1, 0, 0);
+ ctx.scale(ratio, ratio);
+
+ if (isDefined(canvasOriginX)) {
+ ctx.translate(canvasOriginX, canvasOriginY);
+ } else {
+ ctx.translate(margin.left + (0.5 * ratio), margin.top + (0.5 * ratio));
+ }
+
+ drawOnCanvas(ctx, props, moreProps);
+
+ ctx.restore();
+
+}
+
+function drawOnCanvas(ctx, props, moreProps) {
+ const { textAnchor, fontFamily, fontSize, opacity, rotate } = props;
+ const { xScale, chartConfig, xAccessor } = moreProps;
+
+ const { xPos, yPos, fill, text } = helper(props, xAccessor, xScale, getYScale(chartConfig));
+
+ const radians = (rotate / 180) * Math.PI;
+ ctx.save();
+ ctx.translate(xPos, yPos);
+ ctx.rotate(radians);
+
+ ctx.font = `${fontSize}px ${fontFamily}`;
+ ctx.fillStyle = hexToRGBA(fill, opacity);
+ ctx.textAlign = textAnchor === "middle" ? "center" : textAnchor;
+
+ ctx.beginPath();
+ ctx.fillText(text, 0, 0);
+ ctx.restore();
+}
diff --git a/packages/react-financial-charts/src/annotation/LabelAnnotation.tsx b/packages/react-financial-charts/src/annotation/LabelAnnotation.tsx
new file mode 100644
index 000000000..3f6976937
--- /dev/null
+++ b/packages/react-financial-charts/src/annotation/LabelAnnotation.tsx
@@ -0,0 +1,77 @@
+import * as React from "react";
+import { functor } from "../utils";
+
+interface LabelAnnotationProps {
+ readonly className?: string;
+ readonly text?: string | any; // func
+ readonly textAnchor?: string;
+ readonly fontFamily?: string;
+ readonly fontSize?: number;
+ readonly opacity?: number;
+ readonly rotate?: number;
+ readonly onClick?: any; // func
+ readonly xAccessor?: any; // func
+ readonly xScale?: any; // func
+ readonly yScale?: any; // func
+ readonly datum?: object;
+ readonly x?: number | any; // func
+ readonly y?: number | any; // func
+}
+
+export class LabelAnnotation extends React.Component {
+
+ public static defaultProps = {
+ className: "react-stockcharts-labelannotation",
+ textAnchor: "middle",
+ fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif",
+ fontSize: 12,
+ fill: "#000000",
+ opacity: 1,
+ rotate: 0,
+ x: ({ xScale, xAccessor, datum }) => xScale(xAccessor(datum)),
+ };
+
+ public render() {
+ const { className, textAnchor, fontFamily, fontSize, opacity, rotate } = this.props;
+ const { xAccessor, xScale, yScale } = this.props;
+
+ const { xPos, yPos, fill, text, tooltip } = helper(this.props, xAccessor, xScale, yScale);
+
+ return (
+ {tooltip}
+ {text}
+ );
+ }
+
+ private readonly handleClick = (e) => {
+ const { onClick } = this.props;
+
+ if (onClick) {
+ const { xScale, yScale, datum } = this.props;
+ onClick({ xScale, yScale, datum }, e);
+ }
+ }
+}
+
+export const helper = (props, xAccessor, xScale, yScale) => {
+ const { x, y, datum, fill, text, tooltip, plotData } = props;
+
+ const xFunc = functor(x);
+ const yFunc = functor(y);
+
+ const [xPos, yPos] = [xFunc({ xScale, xAccessor, datum, plotData }), yFunc({ yScale, datum, plotData })];
+
+ return {
+ xPos,
+ yPos,
+ text: functor(text)(datum),
+ fill: functor(fill)(datum),
+ tooltip: functor(tooltip)(datum),
+ };
+};
diff --git a/packages/react-financial-charts/src/annotation/SvgPathAnnotation.tsx b/packages/react-financial-charts/src/annotation/SvgPathAnnotation.tsx
new file mode 100644
index 000000000..2d66c830f
--- /dev/null
+++ b/packages/react-financial-charts/src/annotation/SvgPathAnnotation.tsx
@@ -0,0 +1,62 @@
+import * as React from "react";
+import { functor } from "../utils";
+
+interface SvgPathAnnotationProps {
+ readonly className?: string;
+ readonly path: any; // func
+ readonly onClick?: any; // func
+ readonly xAccessor?: any; // func
+ readonly xScale?: any; // func
+ readonly yScale?: any; // func
+ readonly datum?: object;
+ readonly stroke?: string;
+ readonly fill?: string;
+ readonly opacity?: number;
+}
+
+export class SvgPathAnnotation extends React.Component {
+
+ public static defaultProps = {
+ className: "react-stockcharts-svgpathannotation",
+ opacity: 1,
+ x: ({ xScale, xAccessor, datum }) => xScale(xAccessor(datum)),
+ };
+
+ public render() {
+ const { className, stroke, opacity } = this.props;
+
+ const { xAccessor, xScale, yScale, path } = this.props;
+
+ const { x, y, fill, tooltip } = helper(this.props, xAccessor, xScale, yScale);
+
+ return (
+ {tooltip}
+
+ );
+ }
+
+ private readonly handleClick = (e: React.MouseEvent) => {
+ const { onClick } = this.props;
+
+ if (onClick) {
+ const { xScale, yScale, datum } = this.props;
+ onClick({ xScale, yScale, datum }, e);
+ }
+ }
+}
+
+function helper(props, xAccessor, xScale, yScale) {
+ const { x, y, datum, fill, tooltip, plotData } = props;
+
+ const xFunc = functor(x);
+ const yFunc = functor(y);
+
+ const [xPos, yPos] = [xFunc({ xScale, xAccessor, datum, plotData }), yFunc({ yScale, datum, plotData })];
+
+ return {
+ x: xPos,
+ y: yPos,
+ fill: functor(fill)(datum),
+ tooltip: functor(tooltip)(datum),
+ };
+}
diff --git a/packages/react-financial-charts/src/annotation/index.ts b/packages/react-financial-charts/src/annotation/index.ts
new file mode 100644
index 000000000..cb5f4ce97
--- /dev/null
+++ b/packages/react-financial-charts/src/annotation/index.ts
@@ -0,0 +1,30 @@
+export * from "./Annotate";
+export { LabelAnnotation } from "./LabelAnnotation";
+export * from "./SvgPathAnnotation";
+export * from "./Label";
+
+const halfWidth = 10;
+const bottomWidth = 3;
+const height = 20;
+
+export const buyPath = ({ x, y }: { x: number; y: number }) => {
+ return `M${x} ${y} `
+ + `L${x + halfWidth} ${y + halfWidth} `
+ + `L${x + bottomWidth} ${y + halfWidth} `
+ + `L${x + bottomWidth} ${y + height} `
+ + `L${x - bottomWidth} ${y + height} `
+ + `L${x - bottomWidth} ${y + halfWidth} `
+ + `L${x - halfWidth} ${y + halfWidth} `
+ + "Z";
+};
+
+export const sellPath = ({ x, y }: { x: number; y: number }) => {
+ return `M${x} ${y} `
+ + `L${x + halfWidth} ${y - halfWidth} `
+ + `L${x + bottomWidth} ${y - halfWidth} `
+ + `L${x + bottomWidth} ${y - height} `
+ + `L${x - bottomWidth} ${y - height} `
+ + `L${x - bottomWidth} ${y - halfWidth} `
+ + `L${x - halfWidth} ${y - halfWidth} `
+ + "Z";
+};
diff --git a/packages/react-financial-charts/src/axes/Axis.tsx b/packages/react-financial-charts/src/axes/Axis.tsx
new file mode 100644
index 000000000..bc9029cc3
--- /dev/null
+++ b/packages/react-financial-charts/src/axes/Axis.tsx
@@ -0,0 +1,452 @@
+import { range as d3Range } from "d3-array";
+import { forceCollide, forceSimulation, forceX } from "d3-force";
+import * as React from "react";
+
+import GenericChartComponent from "../GenericChartComponent";
+import { getAxisCanvas } from "../GenericComponent";
+import { AxisZoomCapture } from "./AxisZoomCapture";
+
+import { first, getStrokeDasharray, hexToRGBA, identity, isDefined, isNotDefined, last, strokeDashTypes, zipper } from "../utils";
+
+interface AxisProps {
+ innerTickSize?: number;
+ outerTickSize?: number;
+ tickFormat?: any; // func
+ tickPadding?: number;
+ tickSize?: number;
+ ticks?: number;
+ tickLabelFill?: string;
+ tickStroke?: string;
+ tickStrokeOpacity?: number;
+ tickStrokeWidth?: number;
+ tickStrokeDasharray?: strokeDashTypes;
+ tickValues?: number[] | any; // func
+ tickInterval?: number;
+ tickIntervalFunction?: any; // func
+ showDomain?: boolean;
+ showTicks?: boolean;
+ className?: string;
+ axisZoomCallback?: any; // func
+ zoomEnabled?: boolean;
+ inverted?: boolean;
+ zoomCursorClassName?: string;
+ transform: number[];
+ range: number[];
+ getMouseDelta: any; // func
+ getScale: any; // func
+ bg: {
+ h: number;
+ x: number;
+ w: number;
+ y: number;
+ };
+ edgeClip: boolean;
+ onContextMenu?: any; // func
+ onDoubleClick?: any; // func
+}
+
+class Axis extends React.Component {
+
+ public static defaultProps = {
+ zoomEnabled: false,
+ zoomCursorClassName: "",
+ edgeClip: false,
+ };
+
+ private node;
+
+ public render() {
+ const { bg, axisZoomCallback, className, zoomCursorClassName, zoomEnabled, getScale, inverted } = this.props;
+ const { transform, getMouseDelta, edgeClip } = this.props;
+ const { onContextMenu, onDoubleClick } = this.props;
+
+ const zoomCapture = zoomEnabled
+ ?
+ : null;
+
+ return (
+
+ {zoomCapture}
+
+
+ );
+ }
+
+ private readonly saveNode = (node) => {
+ this.node = node;
+ }
+
+ private readonly getMoreProps = () => {
+ return this.node.getMoreProps();
+ }
+
+ private readonly renderSVG = (moreProps) => {
+ const { className } = this.props;
+ const { showDomain, showTicks, range, getScale } = this.props;
+
+ const ticks = showTicks ? axisTicksSVG(this.props, getScale(moreProps)) : null;
+ const domain = showDomain ? axisLineSVG(this.props, range) : null;
+
+ return
+ {ticks}
+ {domain}
+ ;
+ }
+
+ private readonly drawOnCanvas = (ctx, moreProps) => {
+ const { showDomain, showTicks, transform, range, getScale } = this.props;
+
+ ctx.save();
+ ctx.translate(transform[0], transform[1]);
+
+ if (showDomain) { drawAxisLine(ctx, this.props, range); }
+ if (showTicks) {
+ const tickProps = tickHelper(this.props, getScale(moreProps));
+ drawTicks(ctx, tickProps);
+ }
+
+ ctx.restore();
+ }
+}
+
+function tickHelper(props, scale) {
+ const {
+ orient, innerTickSize, tickFormat, tickPadding,
+ tickLabelFill, tickStrokeWidth, tickStrokeDasharray,
+ fontSize, fontFamily, fontWeight, showTicks, flexTicks,
+ showTickLabel,
+ } = props;
+ const {
+ ticks: tickArguments, tickValues: tickValuesProp,
+ tickStroke, tickStrokeOpacity, tickInterval, tickIntervalFunction,
+ } = props;
+
+ let tickValues;
+ if (isDefined(tickValuesProp)) {
+ if (typeof tickValuesProp === "function") {
+ tickValues = tickValuesProp(scale.domain());
+ } else {
+ tickValues = tickValuesProp;
+ }
+ } else if (isDefined(tickInterval)) {
+ const [min, max] = scale.domain();
+ const baseTickValues = d3Range(min, max, (max - min) / tickInterval);
+
+ tickValues = tickIntervalFunction
+ ? tickIntervalFunction(min, max, tickInterval)
+ : baseTickValues;
+ } else if (isDefined(scale.ticks)) {
+ tickValues = scale.ticks(tickArguments, flexTicks);
+ } else {
+ tickValues = scale.domain();
+ }
+
+ const baseFormat = scale.tickFormat
+ ? scale.tickFormat(tickArguments)
+ : identity;
+
+ const format = isNotDefined(tickFormat)
+ ? baseFormat
+ : (d) => tickFormat(d) || "";
+
+ const sign = orient === "top" || orient === "left" ? -1 : 1;
+ const tickSpacing = Math.max(innerTickSize, 0) + tickPadding;
+
+ let ticks;
+ let dy;
+ // tslint:disable-next-line: variable-name
+ let canvas_dy;
+ let textAnchor;
+
+ if (orient === "bottom" || orient === "top") {
+ dy = sign < 0 ? "0em" : ".71em";
+ canvas_dy = sign < 0 ? 0 : (fontSize * .71);
+ textAnchor = "middle";
+
+ ticks = tickValues.map((d) => {
+ const x = Math.round(scale(d));
+ return {
+ value: d,
+ x1: x,
+ y1: 0,
+ x2: x,
+ y2: sign * innerTickSize,
+ labelX: x,
+ labelY: sign * tickSpacing,
+ };
+ });
+
+ if (showTicks && flexTicks) {
+
+ const nodes = ticks.map((d) => ({ id: d.value, value: d.value, fy: d.y2, origX: d.x1 }));
+
+ const simulation = forceSimulation(nodes)
+ .force("x", forceX((d) => d.origX).strength(1))
+ .force("collide", forceCollide(22))
+ .stop();
+
+ for (let i = 0; i < 100; ++i) { simulation.tick(); }
+
+ const zip = zipper()
+ .combine((a, b) => {
+ if (Math.abs(b.x - b.origX) > 0.01) {
+ return {
+ ...a,
+ x2: b.x,
+ labelX: b.x,
+ };
+ }
+ return a;
+ });
+
+ // @ts-ignore
+ ticks = zip(ticks, nodes);
+ }
+
+ } else {
+ ticks = tickValues.map((d) => {
+ const y = Math.round(scale(d));
+ return {
+ value: d,
+ x1: 0,
+ y1: y,
+ x2: sign * innerTickSize,
+ y2: y,
+ labelX: sign * tickSpacing,
+ labelY: y,
+ };
+ });
+
+ dy = ".32em";
+ canvas_dy = (fontSize * .32);
+ textAnchor = sign < 0 ? "end" : "start";
+ }
+
+ return {
+ ticks, scale, tickStroke,
+ tickLabelFill: (tickLabelFill || tickStroke),
+ tickStrokeOpacity,
+ tickStrokeWidth,
+ tickStrokeDasharray,
+ dy,
+ canvas_dy,
+ textAnchor,
+ fontSize,
+ fontFamily,
+ fontWeight,
+ format,
+ showTickLabel,
+ };
+}
+
+/* eslint-disable react/prop-types */
+function axisLineSVG(props, range) {
+ const { orient, outerTickSize } = props;
+ const { domainClassName, fill, stroke, strokeWidth, opacity } = props;
+
+ const sign = orient === "top" || orient === "left" ? -1 : 1;
+
+ 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 (
+
+
+ );
+}
+/* eslint-enable react/prop-types */
+
+function drawAxisLine(ctx, props, range) {
+ // props = { ...AxisLine.defaultProps, ...props };
+
+ const { orient, outerTickSize, stroke, strokeWidth, opacity } = props;
+
+ const sign = orient === "top" || orient === "left" ? -1 : 1;
+ const xAxis = (orient === "bottom" || orient === "top");
+
+ // var range = d3_scaleRange(xAxis ? xScale : yScale);
+
+ ctx.lineWidth = strokeWidth;
+ ctx.strokeStyle = hexToRGBA(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();
+}
+
+interface TickProps {
+ children: string;
+ x1: number;
+ y1: number;
+ x2: number;
+ y2: number;
+ labelX: number;
+ labelY: number;
+ dy: string;
+ tickStroke?: string;
+ tickLabelFill?: string;
+ tickStrokeWidth?: number;
+ tickStrokeOpacity?: number;
+ tickStrokeDasharray?: strokeDashTypes;
+ textAnchor?: string;
+ fontSize?: number;
+ fontFamily?: string;
+ fontWeight?: number | string;
+}
+
+function Tick(props: TickProps) {
+ const {
+ tickLabelFill,
+ tickStroke,
+ tickStrokeOpacity,
+ tickStrokeDasharray,
+ tickStrokeWidth,
+ textAnchor,
+ fontSize,
+ fontFamily,
+ fontWeight,
+ } = props;
+
+ const { x1, y1, x2, y2, labelX, labelY, dy } = props;
+
+ return (
+
+
+
+ {props.children}
+
+
+ );
+}
+
+function axisTicksSVG(props, scale) {
+ const result = tickHelper(props, scale);
+
+ const { tickLabelFill, tickStroke, tickStrokeOpacity, tickStrokeWidth, tickStrokeDasharray, textAnchor } = result;
+ const { fontSize, fontFamily, fontWeight, ticks, format } = result;
+
+ const { dy } = result;
+
+ return (
+
+ {ticks.map((tick, idx) => {
+ return (
+ {format(tick.value)}
+ );
+ })}
+
+ );
+}
+
+function drawTicks(ctx, result) {
+
+ const { tickStroke, tickStrokeOpacity, tickLabelFill } = result;
+ const { textAnchor, fontSize, fontFamily, fontWeight, ticks, showTickLabel } = result;
+
+ ctx.strokeStyle = hexToRGBA(tickStroke, tickStrokeOpacity);
+
+ ctx.fillStyle = tickStroke;
+ // ctx.textBaseline = 'middle';
+
+ ticks.forEach((tick) => {
+ drawEachTick(ctx, tick, result);
+ });
+
+ ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
+ ctx.fillStyle = tickLabelFill;
+ ctx.textAlign = textAnchor === "middle" ? "center" : textAnchor;
+
+ if (showTickLabel) {
+ ticks.forEach((tick) => {
+ drawEachTickLabel(ctx, tick, result);
+ });
+ }
+}
+
+function drawEachTick(ctx, tick, result) {
+ const { tickStrokeWidth, tickStrokeDasharray } = result;
+
+ ctx.beginPath();
+
+ ctx.moveTo(tick.x1, tick.y1);
+ ctx.lineTo(tick.x2, tick.y2);
+ ctx.lineWidth = tickStrokeWidth;
+ ctx.setLineDash(getStrokeDasharray(tickStrokeDasharray).split(","));
+ ctx.stroke();
+}
+
+function drawEachTickLabel(ctx, tick, result) {
+ const { canvas_dy, format } = result;
+
+ ctx.beginPath();
+ ctx.fillText(format(tick.value), tick.labelX, tick.labelY + canvas_dy);
+}
+
+export default Axis;
diff --git a/packages/react-financial-charts/src/axes/AxisLine.tsx b/packages/react-financial-charts/src/axes/AxisLine.tsx
new file mode 100644
index 000000000..986f07ac2
--- /dev/null
+++ b/packages/react-financial-charts/src/axes/AxisLine.tsx
@@ -0,0 +1,104 @@
+import * as React from "react";
+import { first, hexToRGBA, last } from "../utils";
+
+interface AxisLineProps {
+ className?: string;
+ shapeRendering?: string;
+ orient: string;
+ scale: any; // func
+ outerTickSize?: number;
+ fill?: string;
+ stroke?: string;
+ strokeWidth?: number;
+ opacity?: number;
+ range: number[];
+}
+
+/*
+function d3_scaleExtent(domain) {
+ var start = domain[0], stop = domain[domain.length - 1];
+ return start < stop ? [start, stop] : [stop, start];
+}
+
+function d3_scaleRange(scale) {
+ return scale.rangeExtent ? scale.rangeExtent() : d3_scaleExtent(scale.range());
+}
+*/
+export class AxisLine extends React.Component {
+
+ public static defaultProps = {
+ className: "react-stockcharts-axis-line",
+ shapeRendering: "crispEdges",
+ fill: "none",
+ stroke: "#000000",
+ strokeWidth: 1,
+ opacity: 1,
+ };
+
+ public static drawOnCanvasStatic = (props, ctx/* , xScale, yScale*/) => {
+ props = { ...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");
+
+ // var range = d3_scaleRange(xAxis ? xScale : yScale);
+
+ ctx.lineWidth = strokeWidth;
+ ctx.strokeStyle = hexToRGBA(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();
+ }
+
+ public 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 (
+
+
+ );
+ }
+}
diff --git a/packages/react-financial-charts/src/axes/AxisTicks.tsx b/packages/react-financial-charts/src/axes/AxisTicks.tsx
new file mode 100644
index 000000000..bc1eacf03
--- /dev/null
+++ b/packages/react-financial-charts/src/axes/AxisTicks.tsx
@@ -0,0 +1,193 @@
+import * as React from "react";
+
+import { hexToRGBA, identity, isNotDefined } from "../utils";
+
+function tickTransform_svg_axisX(scale, tick) {
+ return [Math.round(scale(tick)), 0];
+}
+
+function tickTransform_svg_axisY(scale, tick) {
+ return [0, Math.round(scale(tick))];
+}
+
+interface TickProps {
+ transform: number[];
+ tickStroke?: string;
+ tickStrokeOpacity?: number;
+ textAnchor?: string;
+ fontSize?: number;
+ fontFamily?: string;
+ x?: number;
+ y?: number;
+ x2?: number;
+ y2?: number;
+ dy?: string;
+}
+
+class Tick extends React.Component {
+
+ public static drawOnCanvasStatic = (tick, ctx, result) => {
+ const { scale, tickTransform, canvas_dy, x, y, x2, y2, format } = result;
+
+ const origin = tickTransform(scale, tick);
+
+ ctx.beginPath();
+
+ ctx.moveTo(origin[0], origin[1]);
+ ctx.lineTo(origin[0] + x2, origin[1] + y2);
+ ctx.stroke();
+
+ ctx.fillText(format(tick), origin[0] + x, origin[1] + y + canvas_dy);
+ }
+
+ public render() {
+ const { transform, tickStroke, tickStrokeOpacity, textAnchor, fontSize, fontFamily } = this.props;
+ const { x, y, x2, y2, dy } = this.props;
+ return (
+
+
+
+ {this.props.children}
+
+
+ );
+ }
+}
+
+interface AxisTicksProps {
+ orient: "top" | "bottom" | "left" | "right";
+ innerTickSize?: number;
+ tickFormat?: any; // func
+ tickPadding?: number;
+ ticks?: number[];
+ tickValues?: number[];
+ scale: any; // func
+ tickStroke?: string;
+ tickStrokeOpacity?: number;
+}
+
+// tslint:disable-next-line: max-classes-per-file
+export class AxisTicks extends React.Component {
+
+ public static defaultProps = {
+ innerTickSize: 5,
+ tickPadding: 6,
+ ticks: [10],
+ tickStroke: "#000",
+ tickStrokeOpacity: 1,
+ };
+
+ public static drawOnCanvasStatic = (props, ctx, xScale, yScale) => {
+ props = { ...AxisTicks.defaultProps, ...props };
+
+ const { orient } = props;
+ const xAxis = (orient === "bottom" || orient === "top");
+
+ const result = AxisTicks.helper(props, xAxis ? xScale : yScale);
+
+ const { tickStroke, tickStrokeOpacity, textAnchor, fontSize, fontFamily } = result;
+
+ ctx.strokeStyle = hexToRGBA(tickStroke, tickStrokeOpacity);
+
+ ctx.font = `${fontSize}px ${fontFamily}`;
+ ctx.fillStyle = tickStroke;
+ ctx.textAlign = textAnchor === "middle" ? "center" : textAnchor;
+
+ result.ticks.forEach((tick) => {
+ Tick.drawOnCanvasStatic(tick, ctx, result);
+ });
+ }
+
+ public static helper = (props, scale) => {
+ const { orient, innerTickSize, tickFormat, tickPadding, fontSize, fontFamily } = props;
+ const { ticks: tickArguments, tickValues, tickStroke, tickStrokeOpacity } = props;
+
+ const ticks = isNotDefined(tickValues)
+ ? (scale.ticks
+ ? scale.ticks(...tickArguments)
+ : scale.domain())
+ : tickValues;
+
+ const baseFormat = scale.tickFormat
+ ? scale.tickFormat(...tickArguments)
+ : identity;
+
+ const format = isNotDefined(tickFormat)
+ ? baseFormat
+ : (d) => baseFormat(d) ? tickFormat(d) : "";
+
+ const sign = orient === "top" || orient === "left" ? -1 : 1;
+ const tickSpacing = Math.max(innerTickSize, 0) + tickPadding;
+
+ let tickTransform;
+ let x;
+ let y;
+ let x2;
+ let y2;
+ let dy;
+ // tslint:disable-next-line: variable-name
+ let canvas_dy;
+ let textAnchor;
+
+ if (orient === "bottom" || orient === "top") {
+ tickTransform = tickTransform_svg_axisX;
+ x2 = 0;
+ y2 = sign * innerTickSize;
+ x = 0;
+ y = sign * tickSpacing;
+ dy = sign < 0 ? "0em" : ".71em";
+ canvas_dy = sign < 0 ? 0 : (fontSize * .71);
+ textAnchor = "middle";
+ } else {
+ tickTransform = tickTransform_svg_axisY;
+ x2 = sign * innerTickSize;
+ y2 = 0;
+ x = sign * tickSpacing;
+ y = 0;
+ dy = ".32em";
+ canvas_dy = (fontSize * .32);
+ textAnchor = sign < 0 ? "end" : "start";
+ }
+ return {
+ ticks,
+ scale,
+ tickTransform,
+ tickStroke, tickStrokeOpacity, dy, canvas_dy, x, y, x2, y2, textAnchor, fontSize, fontFamily, format,
+ };
+ }
+
+ public render() {
+ const result = AxisTicks.helper(this.props, this.props.scale);
+ const {
+ ticks,
+ scale,
+ tickTransform,
+ tickStroke,
+ tickStrokeOpacity,
+ dy,
+ x,
+ y,
+ x2,
+ y2,
+ textAnchor, fontSize, fontFamily, format } = result;
+
+ return (
+
+ {ticks.map((tick, idx) => {
+ return (
+ {format(tick)}
+ );
+ })}
+
+ );
+ }
+}
diff --git a/packages/react-financial-charts/src/axes/AxisZoomCapture.tsx b/packages/react-financial-charts/src/axes/AxisZoomCapture.tsx
new file mode 100644
index 000000000..ce18f1985
--- /dev/null
+++ b/packages/react-financial-charts/src/axes/AxisZoomCapture.tsx
@@ -0,0 +1,219 @@
+import { mean } from "d3-array";
+import { event as d3Event, mouse, select, touches } from "d3-selection";
+import * as React from "react";
+
+import {
+ d3Window,
+ first,
+ getTouchProps,
+ isDefined,
+ last,
+ MOUSEMOVE,
+ mousePosition,
+ MOUSEUP,
+ noop,
+ sign,
+ TOUCHEND,
+ TOUCHMOVE,
+ touchPosition,
+} from "../utils";
+
+interface AxisZoomCaptureProps {
+ innerTickSize?: number;
+ outerTickSize?: number;
+ tickFormat?: any; // func
+ tickPadding?: number;
+ tickSize?: number;
+ ticks?: number;
+ tickValues?: number[];
+ showDomain?: boolean;
+ showTicks?: boolean;
+ className?: string;
+ axisZoomCallback?: any; // func
+ inverted?: boolean;
+ bg: {
+ h: number;
+ x: number;
+ w: number;
+ y: number;
+ };
+ zoomCursorClassName?: string;
+ getMoreProps: any; // func
+ getScale: any; // func
+ getMouseDelta: any; // func
+ onDoubleClick: any; // func
+ onContextMenu: any; // func
+}
+
+interface AxisZoomCaptureState {
+ startPosition: any | null;
+}
+
+export class AxisZoomCapture extends React.Component {
+
+ public static defaultProps = {
+ onDoubleClick: noop,
+ onContextMenu: noop,
+ inverted: true,
+ };
+
+ private node;
+ private mouseInteraction;
+ private clicked;
+ private dragHappened;
+
+ public constructor(props) {
+ super(props);
+ this.state = {
+ startPosition: null,
+ };
+ }
+
+ public render() {
+ const { bg, className, zoomCursorClassName } = this.props;
+
+ const cursor = isDefined(this.state.startPosition)
+ ? zoomCursorClassName
+ : "react-stockcharts-default-cursor";
+
+ return (
+
+ );
+ }
+
+ private readonly handleDragEnd = () => {
+
+ if (!this.dragHappened) {
+ if (this.clicked) {
+ const e = d3Event;
+ const mouseXY = this.mouseInteraction
+ ? mouse(this.node)
+ : touches(this.node)[0];
+ const { onDoubleClick } = this.props;
+
+ onDoubleClick(mouseXY, e);
+ } else {
+ this.clicked = true;
+ setTimeout(() => {
+ this.clicked = false;
+ }, 300);
+ }
+ }
+
+ select(d3Window(this.node))
+ .on(MOUSEMOVE, null)
+ .on(MOUSEUP, null)
+ .on(TOUCHMOVE, null)
+ .on(TOUCHEND, null);
+
+ this.setState({
+ startPosition: null,
+ });
+ }
+
+ private readonly handleDrag = () => {
+ const { startPosition } = this.state;
+ const { getMouseDelta, inverted } = this.props;
+
+ this.dragHappened = true;
+ if (isDefined(startPosition)) {
+ const { startScale } = startPosition;
+ const { startXY } = startPosition;
+
+ const mouseXY = this.mouseInteraction
+ ? mouse(this.node)
+ : touches(this.node)[0];
+
+ const diff = getMouseDelta(startXY, mouseXY);
+
+ const center = mean(startScale.range());
+
+ const tempRange = startScale.range()
+ .map((d) => inverted ? d - sign(d - center) * diff : d + sign(d - center) * diff);
+
+ const newDomain = tempRange.map(startScale.invert);
+
+ if (sign(last(startScale.range()) - first(startScale.range())) === sign(last(tempRange) - first(tempRange))) {
+
+ const { axisZoomCallback } = this.props;
+ axisZoomCallback(newDomain);
+ }
+ }
+ }
+
+ private readonly handleDragStartTouch = (e) => {
+ this.mouseInteraction = false;
+
+ const { getScale, getMoreProps } = this.props;
+ const startScale = getScale(getMoreProps());
+ this.dragHappened = false;
+
+ if (e.touches.length === 1 && startScale.invert) {
+ select(d3Window(this.node))
+ .on(TOUCHMOVE, this.handleDrag)
+ .on(TOUCHEND, this.handleDragEnd);
+
+ const startXY = touchPosition(getTouchProps(e.touches[0]), e);
+
+ this.setState({
+ startPosition: {
+ startXY,
+ startScale,
+ },
+ });
+ }
+ }
+
+ private readonly handleDragStartMouse = (e) => {
+ this.mouseInteraction = true;
+
+ const { getScale, getMoreProps } = this.props;
+ const startScale = getScale(getMoreProps());
+ this.dragHappened = false;
+
+ if (startScale.invert) {
+ select(d3Window(this.node))
+ .on(MOUSEMOVE, this.handleDrag, false)
+ .on(MOUSEUP, this.handleDragEnd, false);
+
+ const startXY = mousePosition(e);
+
+ this.setState({
+ startPosition: {
+ startXY,
+ startScale,
+ },
+ });
+ }
+ e.preventDefault();
+ }
+
+ private readonly handleRightClick = (e) => {
+ e.stopPropagation();
+ e.preventDefault();
+
+ const { onContextMenu } = this.props;
+
+ const mouseXY = mousePosition(e, this.node.getBoundingClientRect());
+
+ select(d3Window(this.node))
+ .on(MOUSEMOVE, null)
+ .on(MOUSEUP, null);
+ this.setState({
+ startPosition: null,
+ });
+
+ onContextMenu(mouseXY, e);
+ }
+
+ private readonly saveNode = (node) => {
+ this.node = node;
+ }
+}
diff --git a/packages/react-financial-charts/src/axes/LICENSE b/packages/react-financial-charts/src/axes/LICENSE
new file mode 100644
index 000000000..68b028aa2
--- /dev/null
+++ b/packages/react-financial-charts/src/axes/LICENSE
@@ -0,0 +1,28 @@
+Implementation of AxisTicks and AxisLine
+derived from d3's axis.js
+Copyright (c) 2010-2015, Michael Bostock
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice, this
+ list of conditions and the following disclaimer.
+
+* Redistributions in binary form must reproduce the above copyright notice,
+ this list of conditions and the following disclaimer in the documentation
+ and/or other materials provided with the distribution.
+
+* The name Michael Bostock may not be used to endorse or promote products
+ derived from this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL MICHAEL BOSTOCK BE LIABLE FOR ANY DIRECT,
+INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING,
+BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
+OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
+NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE,
+EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
diff --git a/packages/react-financial-charts/src/axes/XAxis.tsx b/packages/react-financial-charts/src/axes/XAxis.tsx
new file mode 100644
index 000000000..bcfa7d6ae
--- /dev/null
+++ b/packages/react-financial-charts/src/axes/XAxis.tsx
@@ -0,0 +1,127 @@
+import * as PropTypes from "prop-types";
+import * as React from "react";
+import Axis from "./Axis";
+
+interface XAxisProps {
+ readonly axisAt: number | "top" | "bottom" | "middle";
+ readonly orient: "top" | "bottom";
+ readonly innerTickSize?: number;
+ readonly outerTickSize?: number;
+ readonly tickFormat?: any; // func
+ readonly tickPadding?: number;
+ readonly tickSize?: number;
+ readonly ticks?: number;
+ readonly tickValues?: number[];
+ readonly showTicks?: boolean;
+ readonly className?: string;
+ readonly zoomEnabled?: boolean;
+ readonly onContextMenu?: any; // func
+ readonly onDoubleClick?: any; // func
+ readonly getMouseDelta?: (startXY: number[], mouseXY: number[]) => number;
+ readonly xZoomHeight?: number;
+}
+
+export class XAxis extends React.Component {
+
+ public static defaultProps = {
+ showTicks: true,
+ showTickLabel: true,
+ showDomain: true,
+ className: "react-stockcharts-x-axis",
+ ticks: 10,
+ outerTickSize: 0,
+ fill: "none",
+ stroke: "#000000",
+ strokeWidth: 1,
+ opacity: 1,
+ domainClassName: "react-stockcharts-axis-domain",
+ innerTickSize: 5,
+ tickPadding: 6,
+ tickStroke: "#000000",
+ tickStrokeOpacity: 1,
+ fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif",
+ fontSize: 12,
+ fontWeight: 400,
+ xZoomHeight: 25,
+ zoomEnabled: true,
+ getMouseDelta: (startXY, mouseXY) => startXY[0] - mouseXY[0],
+ };
+
+ public static contextTypes = {
+ chartConfig: PropTypes.object.isRequired,
+ xAxisZoom: PropTypes.func.isRequired,
+ };
+
+ public render() {
+ const {
+ getMouseDelta = XAxis.defaultProps.getMouseDelta,
+ zoomEnabled,
+ ...rest
+ } = this.props;
+
+ const { ...moreProps } = helper(this.props, this.context);
+
+ return (
+
+ );
+ }
+
+ private readonly axisZoomCallback = (newXDomain) => {
+ const { xAxisZoom } = this.context;
+
+ xAxisZoom(newXDomain);
+ }
+}
+
+function helper(props: XAxisProps, context) {
+ const {
+ axisAt,
+ xZoomHeight = XAxis.defaultProps.xZoomHeight,
+ orient,
+ } = props;
+ const { chartConfig: { width, height } } = context;
+
+ let axisLocation;
+ const x = 0;
+ const w = width;
+ const h = xZoomHeight;
+
+ if (axisAt === "top") {
+ axisLocation = 0;
+ } else if (axisAt === "bottom") {
+ axisLocation = height;
+ } else if (axisAt === "middle") {
+ axisLocation = (height) / 2;
+ } else {
+ axisLocation = axisAt;
+ }
+
+ const y = (orient === "top") ? -xZoomHeight : 0;
+
+ return {
+ transform: [0, axisLocation],
+ range: [0, width],
+ getScale: getXScale,
+ bg: { x, y, h, w },
+ };
+}
+
+function getXScale(moreProps) {
+ const { xScale: scale, width } = moreProps;
+
+ if (scale.invert) {
+ const trueRange = [0, width];
+ const trueDomain = trueRange.map(scale.invert);
+ return scale.copy()
+ .domain(trueDomain)
+ .range(trueRange);
+ }
+
+ return scale;
+}
diff --git a/packages/react-financial-charts/src/axes/YAxis.tsx b/packages/react-financial-charts/src/axes/YAxis.tsx
new file mode 100644
index 000000000..a6f72f0a0
--- /dev/null
+++ b/packages/react-financial-charts/src/axes/YAxis.tsx
@@ -0,0 +1,127 @@
+import * as PropTypes from "prop-types";
+import * as React from "react";
+import Axis from "./Axis";
+
+interface YAxisProps {
+ readonly axisAt: number | "left" | "right" | "middle";
+ readonly orient: "left" | "right";
+ readonly innerTickSize?: number;
+ readonly outerTickSize?: number;
+ readonly tickFormat?: any; // func
+ readonly tickPadding?: number;
+ readonly tickSize?: number;
+ readonly ticks?: number;
+ readonly yZoomWidth?: number;
+ readonly tickValues?: number[];
+ readonly showTicks?: boolean;
+ readonly className?: string;
+ readonly zoomEnabled?: boolean;
+ readonly onContextMenu?: any; // func
+ readonly onDoubleClick?: any; // func
+ readonly getMouseDelta?: (startXY: number[], mouseXY: number[]) => number;
+}
+
+export class YAxis extends React.Component {
+
+ public static defaultProps = {
+ showTicks: true,
+ showTickLabel: true,
+ showDomain: true,
+ className: "react-stockcharts-y-axis",
+ ticks: 10,
+ outerTickSize: 0,
+ domainClassName: "react-stockcharts-axis-domain",
+ fill: "none",
+ stroke: "#000000",
+ strokeWidth: 1,
+ opacity: 1,
+ innerTickSize: 5,
+ tickPadding: 6,
+ tickStroke: "#000000",
+ tickStrokeOpacity: 1,
+ fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif",
+ fontSize: 12,
+ fontWeight: 400,
+ yZoomWidth: 40,
+ zoomEnabled: true,
+ getMouseDelta: (startXY, mouseXY) => startXY[1] - mouseXY[1],
+ };
+
+ public static contextTypes = {
+ yAxisZoom: PropTypes.func.isRequired,
+ chartId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+ chartConfig: PropTypes.object.isRequired,
+ };
+
+ public render() {
+
+ const {
+ getMouseDelta = YAxis.defaultProps.getMouseDelta,
+ ...rest
+ } = this.props;
+
+ const { zoomEnabled, ...moreProps } = helper(this.props, this.context);
+
+ return (
+
+ );
+ }
+
+ private readonly axisZoomCallback = (newYDomain) => {
+ const { chartId, yAxisZoom } = this.context;
+ yAxisZoom(chartId, newYDomain);
+ }
+}
+
+function helper(props: YAxisProps, 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: getYScale,
+ bg: { x, y, h, w },
+ zoomEnabled: context.chartConfig.yPan,
+ };
+}
+
+function 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;
+}
diff --git a/packages/react-financial-charts/src/axes/index.ts b/packages/react-financial-charts/src/axes/index.ts
new file mode 100644
index 000000000..d24baa079
--- /dev/null
+++ b/packages/react-financial-charts/src/axes/index.ts
@@ -0,0 +1,2 @@
+export * from "./XAxis";
+export * from "./YAxis";
diff --git a/packages/react-financial-charts/src/calculator/atr.ts b/packages/react-financial-charts/src/calculator/atr.ts
new file mode 100644
index 000000000..e0ce5bb04
--- /dev/null
+++ b/packages/react-financial-charts/src/calculator/atr.ts
@@ -0,0 +1,69 @@
+import { sum } from "d3-array";
+
+import { isDefined, last, slidingWindow } from "../utils";
+
+import { ATR as defaultOptions } from "./defaultOptionsForComputation";
+
+export default function () {
+
+ let options = defaultOptions;
+ let source = (d) => ({ open: d.open, high: d.high, low: d.low, close: d.close });
+
+ function calculator(data) {
+ const { windowSize } = options;
+
+ const trueRangeAlgorithm = slidingWindow()
+ .windowSize(2)
+ // @ts-ignore
+ .source(source)
+ .undefinedValue((d) => d.high - d.low) // the first TR value is simply the High minus the Low
+ .accumulator((values) => {
+ const prev = values[0];
+ const d = values[1];
+ return Math.max(d.high - d.low,
+ d.high - prev.close,
+ d.low - prev.close);
+ });
+
+ let prevATR;
+
+ const atrAlgorithm = slidingWindow()
+ .skipInitial(1) // trueRange starts from index 1 so ATR starts from 1
+ // @ts-ignore
+ .windowSize(windowSize)
+ .accumulator((values) => {
+ const tr = last(values);
+ const atr = isDefined(prevATR)
+ ? ((prevATR * (windowSize - 1)) + tr) / windowSize
+ : sum(values) / windowSize;
+
+ prevATR = atr;
+ return atr;
+ });
+
+ const newData = atrAlgorithm(trueRangeAlgorithm(data));
+
+ return newData;
+ }
+ calculator.undefinedLength = function () {
+ const { windowSize } = options;
+ return windowSize - 1;
+ };
+ calculator.options = function (x) {
+ if (!arguments.length) {
+ return options;
+ }
+ options = { ...defaultOptions, ...x };
+ return calculator;
+ };
+
+ calculator.source = function (x) {
+ if (!arguments.length) {
+ return source;
+ }
+ source = x;
+ return calculator;
+ };
+
+ return calculator;
+}
diff --git a/packages/react-financial-charts/src/calculator/bollingerband.ts b/packages/react-financial-charts/src/calculator/bollingerband.ts
new file mode 100644
index 000000000..9c72aeeb7
--- /dev/null
+++ b/packages/react-financial-charts/src/calculator/bollingerband.ts
@@ -0,0 +1,84 @@
+/*
+https://github.com/ScottLogic/d3fc/blob/master/src/indicator/algorithm/calculator/bollingerBands.js
+
+The MIT License (MIT)
+
+Copyright (c) 2014-2015 Scott Logic Ltd.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+*/
+
+import { deviation, mean } from "d3-array";
+
+import { last, path, slidingWindow, zipper } from "../utils";
+import ema from "./ema";
+
+import { BollingerBand as defaultOptions } from "./defaultOptionsForComputation";
+
+export default function () {
+ let options = defaultOptions;
+
+ function calculator(data) {
+ const { windowSize, multiplier, movingAverageType, sourcePath } = options;
+
+ // @ts-ignore
+ const source = path(sourcePath);
+
+ const meanAlgorithm = movingAverageType === "ema"
+ ? ema().options({ windowSize, sourcePath })
+ : slidingWindow()
+ .windowSize(windowSize)
+ // @ts-ignore
+ .accumulator((values) => mean(values))
+ .sourcePath(sourcePath);
+
+ const bollingerBandAlgorithm = slidingWindow()
+ .windowSize(windowSize)
+ // @ts-ignore
+ .accumulator((values) => {
+ const avg = last(values).mean;
+ const stdDev = deviation(values, (each) => source(each.datum));
+ return {
+ top: avg + multiplier * stdDev,
+ middle: avg,
+ bottom: avg - multiplier * stdDev,
+ };
+ });
+
+ const zip = zipper()
+ .combine((datum, meanValue) => ({ datum, meanValue }));
+
+ // @ts-ignore
+ const tuples = zip(data, meanAlgorithm(data));
+ return bollingerBandAlgorithm(tuples);
+ }
+ calculator.undefinedLength = function () {
+ const { windowSize } = options;
+ return windowSize - 1;
+ };
+ calculator.options = function (x) {
+ if (!arguments.length) {
+ return options;
+ }
+ options = { ...defaultOptions, ...x };
+ return calculator;
+ };
+
+ return calculator;
+}
diff --git a/packages/react-financial-charts/src/calculator/change.ts b/packages/react-financial-charts/src/calculator/change.ts
new file mode 100644
index 000000000..6c869dbc4
--- /dev/null
+++ b/packages/react-financial-charts/src/calculator/change.ts
@@ -0,0 +1,36 @@
+import { slidingWindow } from "../utils";
+import { Change as defaultOptions } from "./defaultOptionsForComputation";
+
+export default function () {
+ let options = defaultOptions;
+
+ function calculator(data) {
+ const { sourcePath } = options;
+
+ const algo = slidingWindow()
+ .windowSize(2)
+ // @ts-ignore
+ .sourcePath(sourcePath)
+ .accumulator(([prev, curr]) => {
+ const absoluteChange = curr - prev;
+ const percentChange = absoluteChange * 100 / prev;
+ return { absoluteChange, percentChange };
+ });
+
+ const newData = algo(data);
+
+ return newData;
+ }
+ calculator.undefinedLength = function () {
+ return 1;
+ };
+ calculator.options = function (x) {
+ if (!arguments.length) {
+ return options;
+ }
+ options = { ...defaultOptions, ...x };
+ return calculator;
+ };
+
+ return calculator;
+}
diff --git a/packages/react-financial-charts/src/calculator/compare.ts b/packages/react-financial-charts/src/calculator/compare.ts
new file mode 100644
index 000000000..16c3b1a5e
--- /dev/null
+++ b/packages/react-financial-charts/src/calculator/compare.ts
@@ -0,0 +1,58 @@
+import { head, isDefined, isNotDefined, path } from "../utils";
+import { Change as defaultOptions } from "./defaultOptionsForComputation";
+
+export default function () {
+ let options = defaultOptions;
+
+ function calculator(data) {
+ const { basePath, mainKeys, compareKeys } = options;
+
+ // @ts-ignore
+ const base = path(basePath);
+
+ const first = head(data);
+ const b = base(first);
+
+ const firsts = {};
+
+ const compareData = data.map((d) => {
+ const result = {};
+
+ mainKeys.forEach((key) => {
+ if (typeof d[key] === "object") {
+ // @ts-ignore
+ result[key] = {};
+ Object.keys(d[key]).forEach((subkey) => {
+ // @ts-ignore
+ result[key][subkey] = (d[key][subkey] - b) / b;
+ });
+ } else {
+ // @ts-ignore
+ result[key] = (d[key] - b) / b;
+ }
+ });
+
+ compareKeys.forEach((key) => {
+ if (isDefined(d[key]) && isNotDefined(firsts[key])) {
+ // @ts-ignore
+ firsts[key] = d[key];
+ }
+ if (isDefined(d[key]) && isDefined(firsts[key])) {
+ // @ts-ignore
+ result[key] = (d[key] - firsts[key]) / firsts[key];
+ }
+ });
+ return result;
+ });
+
+ return compareData;
+ }
+ calculator.options = function (x) {
+ if (!arguments.length) {
+ return options;
+ }
+ options = { ...defaultOptions, ...x };
+ return calculator;
+ };
+ return calculator;
+}
diff --git a/packages/react-financial-charts/src/calculator/defaultOptionsForComputation.ts b/packages/react-financial-charts/src/calculator/defaultOptionsForComputation.ts
new file mode 100644
index 000000000..5372ee57c
--- /dev/null
+++ b/packages/react-financial-charts/src/calculator/defaultOptionsForComputation.ts
@@ -0,0 +1,116 @@
+export const BollingerBand = {
+ windowSize: 20,
+ // source: d => d.close, // "high", "low", "open", "close"
+ sourcePath: "close",
+ multiplier: 2,
+ movingAverageType: "sma",
+};
+
+export const ATR = {
+ windowSize: 14,
+};
+
+export const ForceIndex = {
+ sourcePath: "close", // "high", "low", "open", "close"
+ volumePath: "volume",
+};
+
+export const SmoothedForceIndex = {
+ sourcePath: "close", // "high", "low", "open", "close"
+ volumePath: "volume",
+ smoothingType: "ema",
+ smoothingWindow: 13,
+};
+
+export const Change = {
+ sourcePath: "close", // "high", "low", "open", "close"
+ basePath: "close",
+ mainKeys: [],
+ compareKeys: [],
+};
+
+export const Compare = {
+ basePath: "close",
+ mainKeys: ["open", "high", "low", "close"],
+ compareKeys: [],
+};
+
+export const ElderRay = {
+ windowSize: 13,
+ // source: d => d.close, // "high", "low", "open", "close"
+ sourcePath: "close", // "high", "low", "open", "close"
+ movingAverageType: "sma",
+};
+
+export const ElderImpulse = {
+ sourcePath: "close", // "high", "low", "open", "close"
+};
+
+export const SAR = {
+ accelerationFactor: 0.02,
+ maxAccelerationFactor: 0.2,
+};
+
+export const MACD = {
+ fast: 12,
+ slow: 26,
+ signal: 9,
+ // source: d => d.close, // "high", "low", "open", "close"
+ sourcePath: "close",
+};
+
+export const FullStochasticOscillator = {
+ windowSize: 12,
+ kWindowSize: 3,
+ dWindowSize: 3,
+};
+
+export const RSI = {
+ windowSize: 14,
+ // source: d => d.close, // "high", "low", "open", "close"
+ sourcePath: "close", // "high", "low", "open", "close"
+};
+
+export const EMA = {
+ // source: d => d.close, // "high", "low", "open", "close"
+ sourcePath: "close",
+ windowSize: 10,
+};
+
+export const SMA = {
+ // source: d => d.close, // "high", "low", "open", "close"
+ sourcePath: "close",
+ windowSize: 10,
+};
+
+export const WMA = {
+ // source: d => d.close, // "high", "low", "open", "close"
+ sourcePath: "close",
+ windowSize: 10,
+};
+
+export const TMA = {
+ // source: d => d.close, // "high", "low", "open", "close"
+ sourcePath: "close",
+ windowSize: 10,
+};
+
+export const Kagi = {
+ reversalType: "ATR", // "ATR", "FIXED"
+ windowSize: 14,
+ reversal: 2,
+ sourcePath: "close", // "high", "low", "open", "close"
+};
+
+export const Renko = {
+ reversalType: "ATR", // "ATR", "FIXED"
+ windowSize: 14,
+ fixedBrickSize: 2,
+ sourcePath: "high/low", // "close", "high/low"
+};
+
+export const PointAndFigure = {
+ boxSize: 0.5,
+ reversal: 3,
+ sourcePath: "high/low", // "close", "high/low"
+};
diff --git a/packages/react-financial-charts/src/calculator/elderRay.ts b/packages/react-financial-charts/src/calculator/elderRay.ts
new file mode 100644
index 000000000..b2a349c5b
--- /dev/null
+++ b/packages/react-financial-charts/src/calculator/elderRay.ts
@@ -0,0 +1,80 @@
+/*
+https://github.com/ScottLogic/d3fc/blob/master/src/indicator/algorithm/calculator/elderRay.js
+
+The MIT License (MIT)
+
+Copyright (c) 2014-2015 Scott Logic Ltd.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+*/
+
+import { mean } from "d3-array";
+
+import ema from "./ema";
+
+import { isDefined, slidingWindow, zipper } from "../utils";
+import { ElderRay as defaultOptions } from "./defaultOptionsForComputation";
+
+export default function () {
+
+ let options = defaultOptions;
+ let ohlc = (d) => ({ open: d.open, high: d.high, low: d.low, close: d.close });
+
+ function calculator(data) {
+ const { windowSize, sourcePath, movingAverageType } = options;
+
+ const meanAlgorithm = movingAverageType === "ema"
+ ? ema().options({ windowSize, sourcePath })
+ : slidingWindow()
+ .windowSize(windowSize)
+ // @ts-ignore
+ .accumulator((values) => mean(values)).sourcePath(sourcePath);
+
+ const zip = zipper()
+ .combine((datum, meanValue) => {
+ const bullPower = isDefined(meanValue) ? ohlc(datum).high - meanValue : undefined;
+ const bearPower = isDefined(meanValue) ? ohlc(datum).low - meanValue : undefined;
+ return { bullPower, bearPower };
+ });
+
+ // @ts-ignore
+ const newData = zip(data, meanAlgorithm(data));
+ return newData;
+ }
+ calculator.undefinedLength = function () {
+ const { windowSize } = options;
+ return windowSize - 1;
+ };
+ calculator.ohlc = function (x) {
+ if (!arguments.length) {
+ return ohlc;
+ }
+ ohlc = x;
+ return calculator;
+ };
+ calculator.options = function (x) {
+ if (!arguments.length) {
+ return options;
+ }
+ options = { ...defaultOptions, ...x };
+ return calculator;
+ };
+
+ return calculator;
+}
diff --git a/packages/react-financial-charts/src/calculator/ema.ts b/packages/react-financial-charts/src/calculator/ema.ts
new file mode 100644
index 000000000..1a0c9f35c
--- /dev/null
+++ b/packages/react-financial-charts/src/calculator/ema.ts
@@ -0,0 +1,77 @@
+/*
+https://github.com/ScottLogic/d3fc/blob/master/src/indicator/algorithm/calculator/exponentialMovingAverage.js
+
+The MIT License (MIT)
+
+Copyright (c) 2014-2015 Scott Logic Ltd.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+*/
+
+import { isNotDefined, path } from "../utils";
+import { EMA as defaultOptions } from "./defaultOptionsForComputation";
+
+export default function () {
+
+ let options = defaultOptions;
+
+ function calculator(data) {
+ const { windowSize, sourcePath } = options;
+
+ // @ts-ignore
+ const source = path(sourcePath);
+ const alpha = 2 / (windowSize + 1);
+ let previous;
+ let initialAccumulator = 0;
+ let skip = 0;
+
+ return data.map(function (d, i) {
+ const v = source(d, i);
+ if (isNotDefined(previous) && isNotDefined(v)) {
+ skip++;
+ return undefined;
+ } else if (i < windowSize + skip - 1) {
+ initialAccumulator += v;
+ return undefined;
+ } else if (i === windowSize + skip - 1) {
+ initialAccumulator += v;
+ const initialValue = initialAccumulator / windowSize;
+ previous = initialValue;
+ return initialValue;
+ } else {
+ const nextValue = v * alpha + (1 - alpha) * previous;
+ previous = nextValue;
+ return nextValue;
+ }
+ });
+ }
+ calculator.undefinedLength = function () {
+ const { windowSize } = options;
+ return windowSize - 1;
+ };
+ calculator.options = function (x) {
+ if (!arguments.length) {
+ return options;
+ }
+ options = { ...defaultOptions, ...x };
+ return calculator;
+ };
+
+ return calculator;
+}
diff --git a/packages/react-financial-charts/src/calculator/forceIndex.ts b/packages/react-financial-charts/src/calculator/forceIndex.ts
new file mode 100644
index 000000000..5c26dfb6f
--- /dev/null
+++ b/packages/react-financial-charts/src/calculator/forceIndex.ts
@@ -0,0 +1,38 @@
+import { path, slidingWindow } from "../utils";
+import { ForceIndex as defaultOptions } from "./defaultOptionsForComputation";
+
+export default function () {
+
+ let options = defaultOptions;
+
+ function calculator(data) {
+ const { sourcePath, volumePath } = options;
+
+ // @ts-ignore
+ const source = path(sourcePath);
+
+ // @ts-ignore
+ const volume = path(volumePath);
+
+ const forceIndexCalulator = slidingWindow()
+ .windowSize(2)
+ // @ts-ignore
+ .accumulator(([prev, curr]) => (source(curr) - source(prev)) * volume(curr));
+
+ const forceIndex = forceIndexCalulator(data);
+
+ return forceIndex;
+ }
+ calculator.undefinedLength = function () {
+ return 2;
+ };
+ calculator.options = function (x) {
+ if (!arguments.length) {
+ return options;
+ }
+ options = { ...defaultOptions, ...x };
+ return calculator;
+ };
+
+ return calculator;
+}
diff --git a/packages/react-financial-charts/src/calculator/heikinAshi.ts b/packages/react-financial-charts/src/calculator/heikinAshi.ts
new file mode 100644
index 000000000..7add11109
--- /dev/null
+++ b/packages/react-financial-charts/src/calculator/heikinAshi.ts
@@ -0,0 +1,36 @@
+import { identity, mappedSlidingWindow } from "../utils";
+
+export default function () {
+
+ let source = identity;
+
+ function calculator(data) {
+ const algorithm = mappedSlidingWindow()
+ .windowSize(2)
+ // @ts-ignore
+ .undefinedValue(({ open, high, low, close }) => {
+ close = (open + high + low + close) / 4;
+ return { open, high, low, close };
+ })
+ .accumulator(([prev, now]) => {
+ // console.log(prev, now);
+ const { date, volume } = now;
+ const close = (now.open + now.high + now.low + now.close) / 4;
+ const open = (prev.open + prev.close) / 2;
+ const high = Math.max(open, now.high, close);
+ const low = Math.min(open, now.low, close);
+ return { date, open, high, low, close, volume };
+ });
+
+ return algorithm(data);
+ }
+ calculator.source = function (x) {
+ if (!arguments.length) {
+ return source;
+ }
+ source = x;
+ return calculator;
+ };
+
+ return calculator;
+}
diff --git a/packages/react-financial-charts/src/calculator/index.ts b/packages/react-financial-charts/src/calculator/index.ts
new file mode 100644
index 000000000..aae131da9
--- /dev/null
+++ b/packages/react-financial-charts/src/calculator/index.ts
@@ -0,0 +1,19 @@
+export { default as ema } from "./ema";
+export { default as sma } from "./sma";
+export { default as wma } from "./wma";
+export { default as tma } from "./tma";
+export { default as bollingerband } from "./bollingerband";
+export { default as heikinAshi } from "./heikinAshi";
+export { default as kagi } from "./kagi";
+export { default as pointAndFigure } from "./pointAndFigure";
+export { default as renko } from "./renko";
+export { default as macd } from "./macd";
+export { default as rsi } from "./rsi";
+export { default as sto } from "./sto";
+export { default as atr } from "./atr";
+export { default as forceIndex } from "./forceIndex";
+export { default as smoothedForceIndex } from "./smoothedForceIndex";
+export { default as elderRay } from "./elderRay";
+export { default as sar } from "./sar";
+export { default as compare } from "./compare";
+export { default as change } from "./change";
diff --git a/packages/react-financial-charts/src/calculator/kagi.ts b/packages/react-financial-charts/src/calculator/kagi.ts
new file mode 100644
index 000000000..5adf8e9ce
--- /dev/null
+++ b/packages/react-financial-charts/src/calculator/kagi.ts
@@ -0,0 +1,226 @@
+import { functor, isNotDefined, merge, path } from "../utils";
+import atr from "./atr";
+
+import { Kagi as defaultOptions } from "./defaultOptionsForComputation";
+
+export default function () {
+
+ let options = defaultOptions;
+ let dateAccessor = (d) => d.date;
+ let dateMutator = (d, date) => { d.date = date; };
+
+ function calculator(data) {
+ const { reversalType, windowSize, reversal, sourcePath } = options;
+
+ // @ts-ignore
+ const source = path(sourcePath);
+ let reversalThreshold;
+
+ if (reversalType === "ATR") {
+ // calculateATR(rawData, period);
+ const atrAlgorithm = atr().options({ windowSize });
+
+ const atrCalculator = merge()
+ .algorithm(atrAlgorithm)
+ // @ts-ignore
+ .merge((d, c) => { d["atr" + windowSize] = c; });
+
+ atrCalculator(data);
+ reversalThreshold = (d) => d["atr" + windowSize];
+ } else {
+ reversalThreshold = functor(reversal);
+ }
+
+ const kagiData: any[] = [];
+
+ let prevPeak;
+ let prevTrough;
+ let direction;
+
+ let line: {
+ added?: any;
+ date?: any;
+ from?: any;
+ to?: any;
+ open?: number;
+ high?: number;
+ low?: number;
+ close?: number;
+ current?: any;
+ changePoint?: any;
+ changeTo?: any;
+ volume?: number;
+ reverseAt?: any;
+ startAs?: any;
+ startOfYear?: any;
+ startOfQuarter?: any;
+ startOfMonth?: any;
+ startOfWeek?: any;
+ } = {};
+
+ data.forEach(function (d) {
+ if (isNotDefined(line.from)) {
+ dateMutator(line, dateAccessor(d));
+ line.from = dateAccessor(d);
+
+ if (!line.open) { line.open = d.open; }
+ line.high = d.high;
+ line.low = d.low;
+ if (!line.close) { line.close = source(d); }
+ line.startOfYear = d.startOfYear;
+ line.startOfQuarter = d.startOfQuarter;
+ line.startOfMonth = d.startOfMonth;
+ line.startOfWeek = d.startOfWeek;
+ }
+
+ if (!line.startOfYear) {
+ line.startOfYear = d.startOfYear;
+ if (line.startOfYear) {
+ line.date = d.date;
+ // line.displayDate = d.displayDate;
+ }
+ }
+
+ if (!line.startOfQuarter) {
+ line.startOfQuarter = d.startOfQuarter;
+ if (line.startOfQuarter && !line.startOfYear) {
+ line.date = d.date;
+ // line.displayDate = d.displayDate;
+ }
+ }
+
+ if (!line.startOfMonth) {
+ line.startOfMonth = d.startOfMonth;
+ if (line.startOfMonth && !line.startOfQuarter) {
+ line.date = d.date;
+ // line.displayDate = d.displayDate;
+ }
+ }
+ if (!line.startOfWeek) {
+ line.startOfWeek = d.startOfWeek;
+ if (line.startOfWeek && !line.startOfMonth) {
+ line.date = d.date;
+ // line.displayDate = d.displayDate;
+ }
+ }
+ line.volume = (line.volume || 0) + d.volume;
+ // @ts-ignore
+ line.high = Math.max(line.high, d.high);
+ // @ts-ignore
+ line.low = Math.min(line.low, d.low);
+ line.to = dateAccessor(d);
+
+ // @ts-ignore
+ const priceMovement = (source(d) - line.close);
+
+ // console.log(source(d), priceMovement)
+ // @ts-ignore
+ if ((line.close >= line.open /* going up */ && priceMovement > 0 /* and moving in same direction */)
+ // @ts-ignore
+ || (line.close < line.open /* going down */ && priceMovement < 0 /* and moving in same direction */)) {
+ line.close = source(d);
+ // @ts-ignore
+ if (prevTrough && line.close < prevTrough) {
+ // going below the prevTrough, so change from yang to yin
+ // A yin line forms when a Kagi line breaks below the prior trough.
+ line.changePoint = prevTrough;
+ if (line.startAs !== "yin") {
+ line.changeTo = "yin";
+ // line.startAs = "yang";
+ }
+ }
+
+ // @ts-ignore
+ if (prevPeak && line.close > prevPeak) {
+ // going above the prevPeak, so change from yin to yang
+ // A yang line forms when a Kagi line breaks above the prior peak
+ line.changePoint = prevPeak;
+ if (line.startAs !== "yang") {
+ line.changeTo = "yang";
+ // line.startAs = "yin";
+ }
+ }
+ // @ts-ignore
+ } else if ((line.close >= line.open /* going up */
+ && priceMovement < 0 /* and moving in other direction */
+ && Math.abs(priceMovement) > reversalThreshold(d) /* and the movement is big enough for reversal */)
+ // @ts-ignore
+ || (line.close < line.open /* going down */
+ && priceMovement > 0 /* and moving in other direction */
+ /* and the movement is big enough for reversal */
+ && Math.abs(priceMovement) > reversalThreshold(d))) {
+ // reverse direction
+ const nextLineOpen = line.close;
+
+ // @ts-ignore
+ direction = (line.close - line.open) / Math.abs(line.close - line.open);
+
+ let nextChangePoint;
+ let nextChangeTo;
+ if (direction < 0 /* if direction so far has been -ve*/) {
+ // compare with line.close becomes prevTrough
+ if (isNotDefined(prevPeak)) { prevPeak = line.open; }
+ prevTrough = line.close;
+ if (source(d) > prevPeak) {
+ nextChangePoint = prevPeak;
+ nextChangeTo = "yang";
+ }
+ } else {
+ if (isNotDefined(prevTrough)) { prevTrough = line.open; }
+ prevPeak = line.close;
+ if (source(d) < prevTrough) {
+ nextChangePoint = prevTrough;
+ nextChangeTo = "yin";
+ }
+ }
+ if (isNotDefined(line.startAs)) {
+ line.startAs = direction > 0 ? "yang" : "yin";
+ }
+
+ const startAs = line.changeTo || line.startAs;
+ line.added = true;
+ kagiData.push(line);
+ direction = -1 * direction; // direction is reversed
+
+ line = { ...line };
+ line.open = nextLineOpen;
+ line.close = source(d);
+ line.startAs = startAs;
+ line.changePoint = nextChangePoint;
+ line.changeTo = nextChangeTo;
+ line.added = false;
+ line.from = undefined;
+ line.volume = 0;
+ } else {
+ // console.log("MOVING IN REV DIR BUT..", line.open, line.close, source(d));
+ }
+ line.current = source(d);
+ // @ts-ignore
+ let dir = line.close - line.open;
+ dir = dir === 0 ? 1 : dir / Math.abs(dir);
+ // @ts-ignore
+ line.reverseAt = dir > 0 ? line.close - reversalThreshold(d) : line.open - reversalThreshold(d);
+ });
+ if (!line.added) { kagiData.push(line); }
+
+ return kagiData;
+ }
+ calculator.options = function (x) {
+ if (!arguments.length) {
+ return options;
+ }
+ options = { ...defaultOptions, ...x };
+ return calculator;
+ };
+ calculator.dateMutator = function (x) {
+ if (!arguments.length) { return dateMutator; }
+ dateMutator = x;
+ return calculator;
+ };
+ calculator.dateAccessor = function (x) {
+ if (!arguments.length) { return dateAccessor; }
+ dateAccessor = x;
+ return calculator;
+ };
+ return calculator;
+}
diff --git a/packages/react-financial-charts/src/calculator/macd.ts b/packages/react-financial-charts/src/calculator/macd.ts
new file mode 100644
index 000000000..fb6b20eac
--- /dev/null
+++ b/packages/react-financial-charts/src/calculator/macd.ts
@@ -0,0 +1,85 @@
+/*
+https://github.com/ScottLogic/d3fc/blob/master/src/indicator/algorithm/calculator/macd.js
+
+The MIT License (MIT)
+
+Copyright (c) 2014-2015 Scott Logic Ltd.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+*/
+
+import ema from "./ema";
+
+import { isDefined, zipper } from "../utils";
+import { MACD as defaultOptions } from "./defaultOptionsForComputation";
+
+export default function () {
+ let options = defaultOptions;
+
+ function calculator(data) {
+ const { fast, slow, signal, sourcePath } = options;
+
+ const fastEMA = ema()
+ .options({ windowSize: fast, sourcePath });
+
+ const slowEMA = ema()
+ .options({ windowSize: slow, sourcePath });
+
+ const signalEMA = ema()
+ .options({ windowSize: signal, sourcePath: undefined });
+
+ const macdCalculator = zipper()
+ .combine((fastEMAValue, slowEMAValue) => {
+ return (isDefined(fastEMAValue) && isDefined(slowEMAValue)) ? fastEMAValue - slowEMAValue : undefined;
+ });
+
+ // @ts-ignore
+ const macdArray = macdCalculator(fastEMA(data), slowEMA(data));
+
+ const undefinedArray = new Array(slow);
+ // @ts-ignore
+ const signalArray = undefinedArray.concat(signalEMA(macdArray.slice(slow)));
+
+ const zip = zipper()
+ .combine((macdValue, signalValue) => ({
+ macdValue,
+ signalValue,
+ divergence: (isDefined(macdValue) && isDefined(signalValue)) ? macdValue - signalValue : undefined,
+ }));
+
+ // @ts-ignore
+ const macd = zip(macdArray, signalArray);
+
+ return macd;
+ }
+
+ calculator.undefinedLength = function () {
+ const { slow, signal } = options;
+ return slow + signal - 1;
+ };
+ calculator.options = function (x) {
+ if (!arguments.length) {
+ return options;
+ }
+ options = { ...defaultOptions, ...x };
+ return calculator;
+ };
+
+ return calculator;
+}
diff --git a/packages/react-financial-charts/src/calculator/pointAndFigure.ts b/packages/react-financial-charts/src/calculator/pointAndFigure.ts
new file mode 100644
index 000000000..0edafa439
--- /dev/null
+++ b/packages/react-financial-charts/src/calculator/pointAndFigure.ts
@@ -0,0 +1,244 @@
+import { isNotDefined } from "../utils";
+import { PointAndFigure as defaultOptions } from "./defaultOptionsForComputation";
+
+function createBox(d, dateAccessor, dateMutator) {
+ const box = {
+ open: d.open,
+ fromDate: dateAccessor(d),
+ toDate: dateAccessor(d),
+ startOfYear: d.startOfYear,
+ startOfQuarter: d.startOfQuarter,
+ startOfMonth: d.startOfMonth,
+ startOfWeek: d.startOfWeek,
+ };
+ dateMutator(box, dateAccessor(d));
+ return box;
+}
+
+function updateColumns(columnData, dateAccessor, dateMutator) {
+ columnData.forEach(function (d) {
+ // var lastBox = d.boxes[d.boxes.length - 1];
+
+ d.startOfYear = false;
+ d.startOfQuarter = false;
+ d.startOfMonth = false;
+ d.startOfWeek = false;
+
+ d.boxes.forEach(function (eachBox) {
+ if (isNotDefined(d.open)) { d.open = eachBox.open; }
+ d.close = eachBox.close;
+ d.high = Math.max(d.open, d.close);
+ d.low = Math.min(d.open, d.close);
+
+ if (isNotDefined(d.fromDate)) { d.fromDate = eachBox.fromDate; }
+ if (isNotDefined(d.date)) { d.date = eachBox.date; }
+ d.toDate = eachBox.toDate;
+
+ if (eachBox.startOfYear) {
+ d.startOfYear = d.startOfYear || eachBox.startOfYear;
+ d.startOfQuarter = eachBox.startOfQuarter;
+ d.startOfMonth = eachBox.startOfMonth;
+ d.startOfWeek = eachBox.startOfWeek;
+
+ dateMutator(d, dateAccessor(eachBox));
+ }
+ if (d.startOfQuarter !== true && eachBox.startOfQuarter) {
+ d.startOfQuarter = eachBox.startOfQuarter;
+ d.startOfMonth = eachBox.startOfMonth;
+ d.startOfWeek = eachBox.startOfWeek;
+ // d.displayDate = eachBox.displayDate;
+ dateMutator(d, dateAccessor(eachBox));
+ }
+ if (d.startOfMonth !== true && eachBox.startOfMonth) {
+ d.startOfMonth = eachBox.startOfMonth;
+ d.startOfWeek = eachBox.startOfWeek;
+ // d.displayDate = eachBox.displayDate;
+ dateMutator(d, dateAccessor(eachBox));
+ }
+ if (d.startOfWeek !== true && eachBox.startOfWeek) {
+ d.startOfWeek = eachBox.startOfWeek;
+ // d.displayDate = eachBox.displayDate;
+ dateMutator(d, dateAccessor(eachBox));
+ }
+ });
+
+ });
+
+ // console.table(columnData);
+ // console.table(rawData);
+ return columnData;
+}
+
+export default function () {
+ let options = defaultOptions;
+ let dateAccessor = (d) => d.date;
+ let dateMutator = (d, date) => { d.date = date; };
+
+ function calculator(rawData) {
+ const { reversal, boxSize, sourcePath } = options;
+
+ const source = sourcePath === "high/low"
+ ? (d) => ({ high: d.high, low: d.low })
+ : (d) => ({ high: d.close, low: d.close });
+
+ const pricingMethod = source;
+ const columnData: any[] = [];
+
+ // @ts-ignore
+ let column: {
+ boxes: any[];
+ direction: any;
+ open: number;
+ close?: number;
+ } = {
+ boxes: [],
+ open: rawData[0].open,
+ };
+ let box = createBox(rawData[0], dateAccessor, dateMutator);
+
+ columnData.push(column);
+
+ rawData.forEach(function (d) {
+ // @ts-ignore
+ column.volume = (column.volume || 0) + d.volume;
+
+ if (!box.startOfYear) {
+ box.startOfYear = d.startOfYear;
+ if (box.startOfYear) {
+ dateMutator(box, dateAccessor(d));
+ // box.displayDate = d.displayDate;
+ }
+ }
+
+ if (!box.startOfYear && !box.startOfQuarter) {
+ box.startOfQuarter = d.startOfQuarter;
+ if (box.startOfQuarter && !box.startOfYear) {
+ dateMutator(box, dateAccessor(d));
+ // box.displayDate = d.displayDate;
+ }
+ }
+
+ if (!box.startOfQuarter && !box.startOfMonth) {
+ box.startOfMonth = d.startOfMonth;
+ if (box.startOfMonth && !box.startOfQuarter) {
+ dateMutator(box, dateAccessor(d));
+ // box.displayDate = d.displayDate;
+ }
+ }
+ if (!box.startOfMonth && !box.startOfWeek) {
+ box.startOfWeek = d.startOfWeek;
+ if (box.startOfWeek && !box.startOfMonth) {
+ dateMutator(box, dateAccessor(d));
+ // box.displayDate = d.displayDate;
+ }
+ }
+
+ if (columnData.length === 1 && column.boxes.length === 0) {
+ const upwardMovement = (Math.max((pricingMethod(d).high - column.open), 0)); // upward movement
+ const downwardMovement = Math.abs(Math.min((column.open - pricingMethod(d).low), 0)); // downward movement
+ column.direction = upwardMovement > downwardMovement ? 1 : -1;
+ if (boxSize * reversal < upwardMovement
+ || boxSize * reversal < downwardMovement) {
+ // enough movement to trigger a reversal
+ box.toDate = dateAccessor(d);
+ box.open = column.open;
+ const noOfBoxes = column.direction > 0
+ ? Math.floor(upwardMovement / boxSize)
+ : Math.floor(downwardMovement / boxSize);
+ for (let i = 0; i < noOfBoxes; i++) {
+ // @ts-ignore
+ box.close = box.open + column.direction * boxSize;
+ // @ts-ignore
+ const prevBoxClose = box.close;
+ column.boxes.push(box);
+ box = createBox(box, dateAccessor, dateMutator);
+ // box = cloneMe(box);
+ box.open = prevBoxClose;
+ }
+ box.fromDate = dateAccessor(d);
+ // @ts-ignore
+ box.date = dateAccessor(d);
+ }
+ } else {
+ // one or more boxes already formed in the current column
+ const upwardMovement = (Math.max((pricingMethod(d).high - box.open), 0)); // upward movement
+ const downwardMovement = Math.abs(Math.min((pricingMethod(d).low - box.open), 0)); // downward movement
+
+ if ((column.direction > 0 && upwardMovement > boxSize) /* rising column AND box can be formed */
+ || (column.direction < 0 && downwardMovement > boxSize) /* falling column AND box can be formed */) {
+ // form another box
+ // @ts-ignore
+ box.close = box.open + column.direction * boxSize;
+ box.toDate = dateAccessor(d);
+
+ // @ts-ignore
+ const prevBoxClose = box.close;
+ column.boxes.push(box);
+ box = createBox(d, dateAccessor, dateMutator);
+ box.open = prevBoxClose;
+ box.fromDate = dateAccessor(d);
+ dateMutator(box, dateAccessor(d));
+ } else if (
+ /* rising column and there is downward movement to trigger a reversal */
+ (column.direction > 0 && downwardMovement > boxSize * reversal)
+ /* falling column and there is downward movement to trigger a reversal */
+ || (column.direction < 0 && upwardMovement > boxSize * reversal)) {
+ // reversal
+
+ box.open = box.open + -1 * column.direction * boxSize;
+ box.toDate = dateAccessor(d);
+ // box.displayDate = d.displayDate;
+ dateMutator(box, dateAccessor(d));
+ // box.startOfYear = d.startOfYear;
+ // box.startOfQuarter = d.startOfQuarter;
+ // box.startOfMonth = d.startOfMonth;
+ // box.startOfWeek = d.startOfWeek;
+ // console.table(column.boxes);
+ // var idx = index + 1;
+ column = {
+ boxes: [],
+ // @ts-ignore
+ volume: 0,
+ direction: -1 * column.direction,
+ };
+ const noOfBoxes = column.direction > 0
+ ? Math.floor(upwardMovement / boxSize)
+ : Math.floor(downwardMovement / boxSize);
+ for (let i = 0; i < noOfBoxes; i++) {
+ // @ts-ignore
+ box.close = box.open + column.direction * boxSize;
+ // @ts-ignore
+ const prevBoxClose = box.close;
+ column.boxes.push(box);
+ box = createBox(d, dateAccessor, dateMutator);
+ box.open = prevBoxClose;
+ }
+
+ columnData.push(column);
+ }
+ }
+ });
+ updateColumns(columnData, dateAccessor, dateMutator);
+
+ return columnData;
+ }
+ calculator.options = function (x) {
+ if (!arguments.length) {
+ return options;
+ }
+ options = { ...defaultOptions, ...x };
+ return calculator;
+ };
+ calculator.dateMutator = function (x) {
+ if (!arguments.length) { return dateMutator; }
+ dateMutator = x;
+ return calculator;
+ };
+ calculator.dateAccessor = function (x) {
+ if (!arguments.length) { return dateAccessor; }
+ dateAccessor = x;
+ return calculator;
+ };
+
+ return calculator;
+}
diff --git a/packages/react-financial-charts/src/calculator/renko.ts b/packages/react-financial-charts/src/calculator/renko.ts
new file mode 100644
index 000000000..0e31a0469
--- /dev/null
+++ b/packages/react-financial-charts/src/calculator/renko.ts
@@ -0,0 +1,217 @@
+
+import { functor, isNotDefined, merge } from "../utils";
+
+import atr from "./atr";
+
+import { Renko as defaultOptions } from "./defaultOptionsForComputation";
+
+export default function () {
+ let options = defaultOptions;
+
+ let dateAccessor = (d) => d.date;
+ let dateMutator = (d, date) => { d.date = date; };
+
+ function calculator(rawData) {
+ const { reversalType, fixedBrickSize, sourcePath, windowSize } = options;
+
+ const source = sourcePath === "high/low"
+ ? (d) => ({ high: d.high, low: d.low })
+ : (d) => ({ high: d.close, low: d.close });
+
+ const pricingMethod = source;
+ let brickSize;
+
+ if (reversalType === "ATR") {
+ // calculateATR(rawData, period);
+ const atrAlgorithm = atr().options({ windowSize });
+
+ const atrCalculator = merge()
+ .algorithm(atrAlgorithm)
+ // @ts-ignore
+ .merge((d, c) => { d["atr" + windowSize] = c; });
+
+ atrCalculator(rawData);
+ brickSize = (d) => d["atr" + windowSize];
+ } else {
+ brickSize = functor(fixedBrickSize);
+ }
+
+ const renkoData: any[] = [];
+
+ let index = 0;
+ let prevBrickClose = rawData[index].open;
+ let prevBrickOpen = rawData[index].open;
+ let brick: {
+ added?: any;
+ date?: any;
+ direction?: any;
+ from?: any;
+ fromDate?: any;
+ to?: any;
+ toDate?: any;
+ open?: number;
+ high?: number;
+ low?: number;
+ close?: number;
+ fullyFormed?: any;
+ current?: any;
+ changePoint?: any;
+ changeTo?: any;
+ volume?: number;
+ reverseAt?: any;
+ startAs?: any;
+ startOfYear?: any;
+ startOfQuarter?: any;
+ startOfMonth?: any;
+ startOfWeek?: any;
+ } = {};
+ let direction = 0;
+
+ rawData.forEach(function (d, idx) {
+ if (isNotDefined(brick.from)) {
+ brick.high = d.high;
+ brick.low = d.low;
+ brick.startOfYear = d.startOfYear;
+ brick.startOfQuarter = d.startOfQuarter;
+ brick.startOfMonth = d.startOfMonth;
+ brick.startOfWeek = d.startOfWeek;
+
+ brick.from = idx;
+ brick.fromDate = dateAccessor(d);
+ // indexMutator(brick, index++);
+ dateMutator(brick, dateAccessor(d));
+ }
+ brick.volume = (brick.volume || 0) + d.volume;
+
+ const prevCloseToHigh = (prevBrickClose - pricingMethod(d).high);
+ const prevCloseToLow = (prevBrickClose - pricingMethod(d).low);
+ const prevOpenToHigh = (prevBrickOpen - pricingMethod(d).high);
+ const prevOpenToLow = (prevBrickOpen - pricingMethod(d).low);
+ const priceMovement = Math.min(
+ Math.abs(prevCloseToHigh),
+ Math.abs(prevCloseToLow),
+ Math.abs(prevOpenToHigh),
+ Math.abs(prevOpenToLow));
+
+ // @ts-ignore
+ brick.high = Math.max(brick.high, d.high);
+ // @ts-ignore
+ brick.low = Math.min(brick.low, d.low);
+
+ if (!brick.startOfYear) {
+ brick.startOfYear = d.startOfYear;
+ if (brick.startOfYear) {
+ dateMutator(brick, dateAccessor(d));
+ // brick.displayDate = d.displayDate;
+ }
+ }
+
+ if (!brick.startOfQuarter) {
+ brick.startOfQuarter = d.startOfQuarter;
+ if (brick.startOfQuarter && !brick.startOfYear) {
+ dateMutator(brick, dateAccessor(d));
+ // brick.displayDate = d.displayDate;
+ }
+ }
+
+ if (!brick.startOfMonth) {
+ brick.startOfMonth = d.startOfMonth;
+ if (brick.startOfMonth && !brick.startOfQuarter) {
+ dateMutator(brick, dateAccessor(d));
+ // brick.displayDate = d.displayDate;
+ }
+ }
+ if (!brick.startOfWeek) {
+ brick.startOfWeek = d.startOfWeek;
+ if (brick.startOfWeek && !brick.startOfMonth) {
+ dateMutator(brick, dateAccessor(d));
+ // brick.displayDate = d.displayDate;
+ }
+ }
+
+ // d.brick = JSON.stringify(brick);
+ if (brickSize(d)) {
+ const noOfBricks = Math.floor(priceMovement / brickSize(d));
+
+ brick.open = (Math.abs(prevCloseToHigh) < Math.abs(prevOpenToHigh)
+ || Math.abs(prevCloseToLow) < Math.abs(prevOpenToLow))
+ ? prevBrickClose
+ : prevBrickOpen;
+
+ if (noOfBricks >= 1) {
+ let j = 0;
+ for (j = 0; j < noOfBricks; j++) {
+ // @ts-ignore
+ brick.close = (brick.open < pricingMethod(d).high)
+ // if brick open is less than current price it means it is green/hollow brick
+ ? brick.open + brickSize(d)
+ // @ts-ignore
+ : brick.open - brickSize(d);
+ // @ts-ignore
+ direction = brick.close > brick.open ? 1 : -1;
+ brick.direction = direction;
+ brick.to = idx;
+ brick.toDate = dateAccessor(d);
+ // brick.diff = brick.open - brick.close;
+ // brick.atr = d.atr;
+ brick.fullyFormed = true;
+ renkoData.push(brick);
+
+ prevBrickClose = brick.close;
+ prevBrickOpen = brick.open;
+
+ const newBrick = {
+ high: brick.high,
+ low: brick.low,
+ open: brick.close,
+ startOfYear: false,
+ startOfMonth: false,
+ startOfQuarter: false,
+ startOfWeek: false,
+ };
+ brick = newBrick;
+ brick.from = idx;
+ brick.fromDate = dateAccessor(d);
+ // indexMutator(brick, index + j);
+ dateMutator(brick, dateAccessor(d));
+ brick.volume = (brick.volume || 0) + d.volume;
+ }
+ index = index + j - 1;
+ brick = {};
+ } else {
+ if (idx === rawData.length - 1) {
+ brick.close = direction > 0 ? pricingMethod(d).high : pricingMethod(d).low;
+ brick.to = idx;
+ brick.toDate = dateAccessor(d);
+ dateMutator(brick, dateAccessor(d));
+ brick.fullyFormed = false;
+ renkoData.push(brick);
+ }
+ }
+ }
+
+ });
+ return renkoData;
+
+ }
+ calculator.options = function (x) {
+ if (!arguments.length) {
+ return options;
+ }
+ options = { ...defaultOptions, ...x };
+ return calculator;
+ };
+
+ calculator.dateMutator = function (x) {
+ if (!arguments.length) { return dateMutator; }
+ dateMutator = x;
+ return calculator;
+ };
+ calculator.dateAccessor = function (x) {
+ if (!arguments.length) { return dateAccessor; }
+ dateAccessor = x;
+ return calculator;
+ };
+
+ return calculator;
+}
diff --git a/packages/react-financial-charts/src/calculator/rsi.ts b/packages/react-financial-charts/src/calculator/rsi.ts
new file mode 100644
index 000000000..575aafced
--- /dev/null
+++ b/packages/react-financial-charts/src/calculator/rsi.ts
@@ -0,0 +1,100 @@
+/*
+https://github.com/ScottLogic/d3fc/blob/master/src/indicator/algorithm/calculator/relativeStrengthIndex.js
+
+The MIT License (MIT)
+
+Copyright (c) 2014-2015 Scott Logic Ltd.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+*/
+
+import { mean } from "d3-array";
+
+import { isDefined, last, path, slidingWindow } from "../utils";
+import { RSI as defaultOptions } from "./defaultOptionsForComputation";
+
+export default function () {
+
+ let options = defaultOptions;
+
+ function calculator(data) {
+ const { windowSize, sourcePath } = options;
+
+ // @ts-ignore
+ const source = path(sourcePath);
+
+ let prevAvgGain;
+ let prevAvgLoss;
+ const rsiAlgorithm = slidingWindow()
+ .windowSize(windowSize)
+ // @ts-ignore
+ .accumulator((values) => {
+
+ const avgGain = isDefined(prevAvgGain)
+ ? (prevAvgGain * (windowSize - 1) + last(values).gain) / windowSize
+ : mean(values, (each) => each.gain);
+
+ const avgLoss = isDefined(prevAvgLoss)
+ ? (prevAvgLoss * (windowSize - 1) + last(values).loss) / windowSize
+ : mean(values, (each) => each.loss);
+
+ const relativeStrength = avgGain / avgLoss;
+ const rsi = 100 - (100 / (1 + relativeStrength));
+
+ prevAvgGain = avgGain;
+ prevAvgLoss = avgLoss;
+
+ return rsi;
+ });
+
+ const gainsAndLossesCalculator = slidingWindow()
+ .windowSize(2)
+ // @ts-ignore
+ .undefinedValue(() => [0, 0])
+ .accumulator((tuple) => {
+ const prev = tuple[0];
+ const now = tuple[1];
+ const change = source(now) - source(prev);
+ return {
+ gain: Math.max(change, 0),
+ loss: Math.abs(Math.min(change, 0)),
+ };
+ });
+
+ const gainsAndLosses = gainsAndLossesCalculator(data);
+
+ const rsiData = rsiAlgorithm(gainsAndLosses);
+
+ return rsiData;
+ }
+ calculator.undefinedLength = function () {
+ const { windowSize } = options;
+
+ return windowSize - 1;
+ };
+ calculator.options = function (x) {
+ if (!arguments.length) {
+ return options;
+ }
+ options = { ...defaultOptions, ...x };
+ return calculator;
+ };
+
+ return calculator;
+}
diff --git a/packages/react-financial-charts/src/calculator/sar.ts b/packages/react-financial-charts/src/calculator/sar.ts
new file mode 100644
index 000000000..049a6a7c1
--- /dev/null
+++ b/packages/react-financial-charts/src/calculator/sar.ts
@@ -0,0 +1,113 @@
+import { isDefined, isNotDefined, mappedSlidingWindow } from "../utils";
+import { SAR as defaultOptions } from "./defaultOptionsForComputation";
+
+function calc(prev, now) {
+ const risingSar = prev.risingSar
+ + prev.af * (prev.risingEp - prev.risingSar);
+
+ const fallingSar = prev.fallingSar
+ - prev.af * (prev.fallingSar - prev.fallingEp);
+
+ const risingEp = Math.max(prev.risingEp, now.high);
+ const fallingEp = Math.min(prev.fallingEp, now.low);
+
+ return {
+ risingSar,
+ fallingSar,
+ risingEp,
+ fallingEp,
+ };
+}
+
+export default function () {
+
+ let options = defaultOptions;
+
+ function calculator(data) {
+ const { accelerationFactor, maxAccelerationFactor } = options;
+
+ const algorithm = mappedSlidingWindow()
+ .windowSize(2)
+ // @ts-ignore
+ .undefinedValue(({ high, low }) => {
+ return {
+ risingSar: low,
+ risingEp: high,
+ fallingSar: high,
+ fallingEp: low,
+ af: accelerationFactor,
+ };
+ })
+ .accumulator(([prev, now]) => {
+
+ const {
+ risingSar,
+ fallingSar,
+ risingEp,
+ fallingEp,
+ } = calc(prev, now);
+
+ if (isNotDefined(prev.use)
+ && risingSar > now.low
+ && fallingSar < now.high) {
+ return {
+ risingSar,
+ fallingSar,
+ risingEp,
+ fallingEp,
+ };
+ }
+
+ const use = isDefined(prev.use)
+ ? prev.use === "rising"
+ ? risingSar > now.low ? "falling" : "rising"
+ : fallingSar < now.high ? "rising" : "falling"
+ : risingSar > now.low
+ ? "falling"
+ : "rising";
+
+ const current = prev.use === use
+ ? {
+ af: Math.min(maxAccelerationFactor, prev.af + accelerationFactor),
+ fallingEp,
+ risingEp,
+ fallingSar,
+ risingSar,
+ }
+ : {
+ af: accelerationFactor,
+ fallingEp: now.low,
+ risingEp: now.high,
+ fallingSar: Math.max(prev.risingEp, now.high),
+ risingSar: Math.min(prev.fallingEp, now.low),
+ };
+
+ const { date, high, low } = now;
+ return {
+ date,
+ high,
+ low,
+ ...current,
+ use,
+ sar: use === "falling" ? current.fallingSar : current.risingSar,
+ };
+ });
+
+ const calculatedData = algorithm(data).map((d) => d.sar);
+ // console.log(calculatedData);
+
+ return calculatedData;
+ }
+ calculator.undefinedLength = function () {
+ return 1;
+ };
+ calculator.options = function (x) {
+ if (!arguments.length) {
+ return options;
+ }
+ options = { ...defaultOptions, ...x };
+ return calculator;
+ };
+
+ return calculator;
+}
diff --git a/packages/react-financial-charts/src/calculator/sma.ts b/packages/react-financial-charts/src/calculator/sma.ts
new file mode 100644
index 000000000..40ca46469
--- /dev/null
+++ b/packages/react-financial-charts/src/calculator/sma.ts
@@ -0,0 +1,34 @@
+import { mean } from "d3-array";
+
+import { slidingWindow } from "../utils";
+import { SMA as defaultOptions } from "./defaultOptionsForComputation";
+
+export default function () {
+
+ let options = defaultOptions;
+
+ function calculator(data) {
+ const { windowSize, sourcePath } = options;
+
+ const average = slidingWindow()
+ .windowSize(windowSize)
+ // @ts-ignore
+ .sourcePath(sourcePath)
+ .accumulator((values) => mean(values));
+
+ return average(data);
+ }
+ calculator.undefinedLength = function () {
+ const { windowSize } = options;
+ return windowSize - 1;
+ };
+ calculator.options = function (x) {
+ if (!arguments.length) {
+ return options;
+ }
+ options = { ...defaultOptions, ...x };
+ return calculator;
+ };
+
+ return calculator;
+}
diff --git a/packages/react-financial-charts/src/calculator/smoothedForceIndex.ts b/packages/react-financial-charts/src/calculator/smoothedForceIndex.ts
new file mode 100644
index 000000000..0a84f019b
--- /dev/null
+++ b/packages/react-financial-charts/src/calculator/smoothedForceIndex.ts
@@ -0,0 +1,53 @@
+import { zipper } from "../utils";
+import { SmoothedForceIndex as defaultOptions } from "./defaultOptionsForComputation";
+import ema from "./ema";
+import forceIndex from "./forceIndex";
+import sma from "./sma";
+
+export default function () {
+
+ const underlyingAlgorithm = forceIndex();
+ const merge = zipper()
+ .combine((force, smoothed) => {
+ return { force, smoothed };
+ });
+
+ let options = defaultOptions;
+ function calculator(data) {
+ const { smoothingType, smoothingWindow } = options;
+ const { sourcePath, volumePath } = options;
+
+ const algo = underlyingAlgorithm
+ .options({ sourcePath, volumePath });
+
+ // @ts-ignore
+ const force = algo(data);
+
+ const ma = smoothingType === "ema" ? ema() : sma();
+ const forceMA = ma
+ .options({
+ windowSize: smoothingWindow,
+ sourcePath: undefined,
+ });
+
+ // @ts-ignore
+ const smoothed = forceMA(force);
+
+ // @ts-ignore
+ return merge(force, smoothed);
+ }
+
+ calculator.undefinedLength = function () {
+ const { smoothingWindow } = options;
+ return underlyingAlgorithm.undefinedLength() + smoothingWindow - 1;
+ };
+ calculator.options = function (x) {
+ if (!arguments.length) {
+ return options;
+ }
+ options = { ...defaultOptions, ...x };
+ return calculator;
+ };
+
+ return calculator;
+}
diff --git a/packages/react-financial-charts/src/calculator/sto.ts b/packages/react-financial-charts/src/calculator/sto.ts
new file mode 100644
index 000000000..62dd26d33
--- /dev/null
+++ b/packages/react-financial-charts/src/calculator/sto.ts
@@ -0,0 +1,102 @@
+/*
+https://github.com/ScottLogic/d3fc/blob/master/src/indicator/algorithm/calculator/stochasticOscillator.js
+
+The MIT License (MIT)
+
+Copyright (c) 2014-2015 Scott Logic Ltd.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+*/
+
+import { max, mean, min } from "d3-array";
+
+import { last, slidingWindow, zipper } from "../utils";
+import { FullStochasticOscillator as defaultOptions } from "./defaultOptionsForComputation";
+
+export default function () {
+
+ let options = defaultOptions;
+
+ let source = (d) => ({ open: d.open, high: d.high, low: d.low, close: d.close });
+
+ function calculator(data) {
+ const { windowSize, kWindowSize, dWindowSize } = options;
+
+ const high = (d) => source(d).high;
+ const low = (d) => source(d).low;
+ const close = (d) => source(d).close;
+
+ const kWindow = slidingWindow()
+ .windowSize(windowSize)
+ // @ts-ignore
+ .accumulator((values) => {
+
+ const highestHigh = max(values, high);
+ const lowestLow = min(values, low);
+
+ const currentClose = close(last(values));
+ const k = (currentClose - lowestLow) / (highestHigh - lowestLow) * 100;
+
+ return k;
+ });
+
+ const kSmoothed = slidingWindow()
+ .skipInitial(windowSize - 1)
+ // @ts-ignore
+ .windowSize(kWindowSize)
+ .accumulator((values) => mean(values));
+
+ const dWindow = slidingWindow()
+ .skipInitial(windowSize - 1 + kWindowSize - 1)
+ // @ts-ignore
+ .windowSize(dWindowSize)
+ .accumulator((values) => mean(values));
+
+ const stoAlgorithm = zipper()
+ .combine((K, D) => ({ K, D }));
+
+ const kData = kSmoothed(kWindow(data));
+ const dData = dWindow(kData);
+
+ // @ts-ignore
+ const indicatorData = stoAlgorithm(kData, dData);
+
+ return indicatorData;
+ }
+ calculator.undefinedLength = function () {
+ const { windowSize, kWindowSize, dWindowSize } = options;
+ return windowSize + kWindowSize + dWindowSize;
+ };
+ calculator.source = function (x) {
+ if (!arguments.length) {
+ return source;
+ }
+ source = x;
+ return calculator;
+ };
+ calculator.options = function (x) {
+ if (!arguments.length) {
+ return options;
+ }
+ options = { ...defaultOptions, ...x };
+ return calculator;
+ };
+
+ return calculator;
+}
diff --git a/packages/react-financial-charts/src/calculator/tma.ts b/packages/react-financial-charts/src/calculator/tma.ts
new file mode 100644
index 000000000..d16b1e788
--- /dev/null
+++ b/packages/react-financial-charts/src/calculator/tma.ts
@@ -0,0 +1,79 @@
+/*
+ TRIMA (Triangular Moving Average).
+
+ The Triangular Moving Average can be used like any other Moving Average, to
+ obtain a smoother representation of the underlying data.
+ It is important to note that the Triangular Moving Average is typically much
+ smoother than other moving averages.
+
+ Triangular moving averages give greater weight to prices at the centre of the
+ chosen period andi it is calculated as double smoothed SMA (simple moving average).
+
+ Examples:
+ For TimeSerie={a,b,c,d,e,f...} ('a' is the older price)
+
+ 1st value for TMA 4-Period is: ((1*a)+(2*b)+(2*c)+(1*d)) / 6
+ 2nd value for TMA 4-Period is: ((1*b)+(2*c)+(2*d)+(1*e)) / 6
+
+ 1st value for TMA 5-Period is: ((1*a)+(2*b)+(3*c)+(2*d)+(1*e)) / 9
+ 2nd value for TMA 5-Period is: ((1*b)+(2*c)+(3*d)+(2*e)+(1*f)) / 9
+
+ Using algebra, it can be demonstrated that the TMA is equivalent to
+ doing a SMA of a SMA. The following explain the rules:
+
+ (1) When the period is even, TMA(x,period)=SMA(SMA(x,period/2),(period/2)+1)
+ (2) When the period is odd, TMA(x,period)=SMA(SMA(x,(period+1)/2),(period+1)/2)
+
+ In other word:
+ (1) A period of 4 becomes TMA(x,4) = SMA( SMA( x, 2), 3 )
+ (2) A period of 5 becomes TMA(x,5) = SMA( SMA( x, 3), 3 )
+
+ The SMA of a SMA is the algorithm generally found in books.
+*/
+
+import { sum } from "d3-array";
+
+import { slidingWindow } from "../utils";
+import { TMA as defaultOptions } from "./defaultOptionsForComputation";
+
+export default function () {
+ let options = defaultOptions;
+
+ function calculator(data) {
+ const { windowSize, sourcePath } = options;
+
+ const n = Math.floor(windowSize / 2);
+ const weight = (windowSize % 2) === 0
+ ? n * (n + 1)
+ : (n + 1) * (n + 1);
+
+ const triaverage = slidingWindow()
+ .windowSize(windowSize)
+ // @ts-ignore
+ .sourcePath(sourcePath)
+ .accumulator((values) => {
+ const total = sum(values, (v, i) => {
+ return i < n
+ ? (i + 1) * v
+ : (windowSize - i) * v;
+ });
+ return total / weight;
+ });
+
+ return triaverage(data);
+
+ }
+ calculator.undefinedLength = function () {
+ const { windowSize } = options;
+ return windowSize - 1;
+ };
+ calculator.options = function (x) {
+ if (!arguments.length) {
+ return options;
+ }
+ options = { ...defaultOptions, ...x };
+ return calculator;
+ };
+
+ return calculator;
+}
diff --git a/packages/react-financial-charts/src/calculator/wma.ts b/packages/react-financial-charts/src/calculator/wma.ts
new file mode 100644
index 000000000..a8c13a5c3
--- /dev/null
+++ b/packages/react-financial-charts/src/calculator/wma.ts
@@ -0,0 +1,42 @@
+import { sum } from "d3-array";
+
+import { slidingWindow } from "../utils";
+import { WMA as defaultOptions } from "./defaultOptionsForComputation";
+
+export default function () {
+
+ let options = defaultOptions;
+
+ function calculator(data) {
+ const { windowSize, sourcePath } = options;
+
+ const weight = windowSize * (windowSize + 1) / 2;
+
+ const waverage = slidingWindow()
+ .windowSize(windowSize)
+ // @ts-ignore
+ .sourcePath(sourcePath)
+ .accumulator((values) => {
+ const total = sum(values, (v, i) => {
+ return (i + 1) * v;
+ });
+ return total / weight;
+ });
+
+ return waverage(data);
+ }
+ calculator.undefinedLength = function () {
+ const { windowSize } = options;
+
+ return windowSize - 1;
+ };
+ calculator.options = function (x) {
+ if (!arguments.length) {
+ return options;
+ }
+ options = { ...defaultOptions, ...x };
+ return calculator;
+ };
+
+ return calculator;
+}
diff --git a/packages/react-financial-charts/src/coordinates/CrossHairCursor.tsx b/packages/react-financial-charts/src/coordinates/CrossHairCursor.tsx
new file mode 100644
index 000000000..8a1d4aac2
--- /dev/null
+++ b/packages/react-financial-charts/src/coordinates/CrossHairCursor.tsx
@@ -0,0 +1,130 @@
+import * as PropTypes from "prop-types";
+import * as React from "react";
+import GenericComponent, { getMouseCanvas } from "../GenericComponent";
+
+import { getStrokeDasharray, hexToRGBA, isDefined, isNotDefined, strokeDashTypes } from "../utils";
+
+interface CrossHairCursorProps {
+ readonly className?: string;
+ readonly opacity?: number;
+ readonly snapX?: boolean;
+ readonly stroke?: string;
+ readonly strokeDasharray?: strokeDashTypes;
+}
+
+const defaultCustomX = (props: CrossHairCursorProps, moreProps) => {
+ const { xScale, xAccessor, currentItem, mouseXY } = moreProps;
+ const { snapX } = props;
+ const x = snapX
+ ? Math.round(xScale(xAccessor(currentItem)))
+ : mouseXY[0];
+ return x;
+};
+
+export class CrossHairCursor extends React.Component {
+
+ public static defaultProps = {
+ stroke: "#000000",
+ opacity: 0.3,
+ strokeDasharray: "ShortDash",
+ snapX: true,
+ customX: defaultCustomX,
+ };
+
+ public static contextTypes = {
+ margin: PropTypes.object.isRequired,
+ ratio: PropTypes.number.isRequired,
+ };
+
+ public render() {
+ return (
+
+ );
+ }
+
+ private readonly renderSVG = (moreProps) => {
+ const { className } = this.props;
+ const lines = this.helper(this.props, moreProps);
+
+ if (lines === undefined) {
+ return null;
+ }
+
+ return (
+
+ {lines.map(({ strokeDasharray, ...rest }, idx) =>
+ )}
+
+ );
+ }
+
+ private readonly drawOnCanvas = (ctx, moreProps) => {
+ const lines = this.helper(this.props, moreProps);
+
+ if (lines !== undefined && isDefined(lines)) {
+
+ const { margin, ratio } = this.context;
+ const originX = 0.5 * ratio + margin.left;
+ const originY = 0.5 * ratio + margin.top;
+
+ ctx.save();
+ ctx.setTransform(1, 0, 0, 1, 0, 0);
+ ctx.scale(ratio, ratio);
+
+ ctx.translate(originX, originY);
+
+ lines.forEach((line) => {
+ const dashArray = getStrokeDasharray(line.strokeDasharray)
+ .split(",")
+ .map((d) => +d);
+
+ ctx.strokeStyle = hexToRGBA(line.stroke, line.opacity);
+ ctx.setLineDash(dashArray);
+ ctx.beginPath();
+ ctx.moveTo(line.x1, line.y1);
+ ctx.lineTo(line.x2, line.y2);
+ ctx.stroke();
+ });
+
+ ctx.restore();
+ }
+ }
+
+ private readonly helper = (props, moreProps) => {
+ const {
+ mouseXY, currentItem, show, height, width,
+ } = moreProps;
+
+ const { customX, stroke, opacity, strokeDasharray } = props;
+
+ if (!show || isNotDefined(currentItem)) {
+ return undefined;
+ }
+
+ const line1 = {
+ x1: 0,
+ x2: width,
+ y1: mouseXY[1],
+ y2: mouseXY[1],
+ stroke, strokeDasharray, opacity,
+ };
+ const x = customX(props, moreProps);
+
+ const line2 = {
+ x1: x,
+ x2: x,
+ y1: 0,
+ y2: height,
+ stroke, strokeDasharray, opacity,
+ };
+ return [line1, line2];
+ }
+}
diff --git a/packages/react-financial-charts/src/coordinates/CurrentCoordinate.tsx b/packages/react-financial-charts/src/coordinates/CurrentCoordinate.tsx
new file mode 100644
index 000000000..b547a89f1
--- /dev/null
+++ b/packages/react-financial-charts/src/coordinates/CurrentCoordinate.tsx
@@ -0,0 +1,76 @@
+import * as React from "react";
+
+import GenericChartComponent from "../GenericChartComponent";
+import { getMouseCanvas } from "../GenericComponent";
+import { isNotDefined } from "../utils";
+
+interface CurrentCoordinateProps {
+ readonly className?: string;
+ readonly fill?: any;
+ readonly r: number;
+ readonly yAccessor: (item: any) => number;
+}
+
+export class CurrentCoordinate extends React.Component {
+
+ public static defaultProps = {
+ r: 3,
+ className: "react-stockcharts-current-coordinate",
+ };
+
+ public render() {
+ return (
+
+ );
+ }
+
+ private readonly drawOnCanvas = (ctx, moreProps) => {
+ const circle = this.helper(this.props, moreProps);
+ if (!circle) { return null; }
+
+ ctx.fillStyle = circle.fill;
+ ctx.beginPath();
+ ctx.arc(circle.x, circle.y, circle.r, 0, 2 * Math.PI, false);
+ ctx.fill();
+ }
+
+ private readonly renderSVG = (moreProps) => {
+ const { className } = this.props;
+
+ const circle = this.helper(this.props, moreProps);
+ if (!circle) { return null; }
+
+ const fillColor = circle.fill instanceof Function ? circle.fill(moreProps.currentItem) : circle.fill;
+
+ return (
+
+ );
+ }
+
+ private readonly helper = (props: CurrentCoordinateProps, moreProps) => {
+ const { fill, yAccessor, r } = props;
+
+ const { show, xScale, chartConfig: { yScale }, currentItem, xAccessor } = moreProps;
+
+ if (!show || isNotDefined(currentItem)) {
+ return null;
+ }
+
+ const xValue = xAccessor(currentItem);
+ const yValue = yAccessor(currentItem);
+
+ if (isNotDefined(yValue)) {
+ return null;
+ }
+
+ const x = Math.round(xScale(xValue));
+ const y = Math.round(yScale(yValue));
+
+ return { x, y, r, fill };
+ }
+}
diff --git a/packages/react-financial-charts/src/coordinates/Cursor.tsx b/packages/react-financial-charts/src/coordinates/Cursor.tsx
new file mode 100644
index 000000000..0b6f48512
--- /dev/null
+++ b/packages/react-financial-charts/src/coordinates/Cursor.tsx
@@ -0,0 +1,284 @@
+import * as PropTypes from "prop-types";
+import * as React from "react";
+import GenericComponent, { getMouseCanvas } from "../GenericComponent";
+
+import {
+ first,
+ getStrokeDasharray,
+ hexToRGBA,
+ isNotDefined,
+ last,
+ strokeDashTypes,
+} from "../utils";
+
+interface CursorProps {
+ className?: string;
+ stroke?: string;
+ strokeDasharray?: strokeDashTypes;
+ snapX?: boolean;
+ opacity?: number;
+ disableYCursor?: boolean;
+ useXCursorShape?: boolean;
+ xCursorShapeFill?: string | any; // func
+ xCursorShapeStroke: string | any; // func
+ xCursorShapeStrokeDasharray?: strokeDashTypes;
+ xCursorShapeOpacity?: number;
+}
+
+const defaultCustomSnapX = (props: CursorProps, moreProps) => {
+ const { xScale, xAccessor, currentItem, mouseXY } = moreProps;
+ const { snapX } = props;
+ const x = snapX ? Math.round(xScale(xAccessor(currentItem))) : mouseXY[0];
+ return x;
+};
+
+class Cursor extends React.Component {
+
+ public static defaultProps = {
+ stroke: "#000000",
+ opacity: 0.3,
+ strokeDasharray: "ShortDash",
+ snapX: true,
+ customSnapX: defaultCustomSnapX,
+ disableYCursor: false,
+ useXCursorShape: false,
+ xCursorShapeStroke: "#000000",
+ xCursorShapeOpacity: 0.5,
+ };
+
+ public static contextTypes = {
+ margin: PropTypes.object.isRequired,
+ ratio: PropTypes.number.isRequired,
+ // xScale for getting update event upon pan end, this is needed to get past the PureComponent shouldComponentUpdate
+ // xScale: PropTypes.func.isRequired,
+ };
+
+ public render() {
+ return (
+
+ );
+ }
+
+ private getXCursorShapeStroke(moreProps) {
+ const { xCursorShapeStroke } = this.props;
+ const { currentItem } = moreProps;
+ return xCursorShapeStroke instanceof Function
+ ? xCursorShapeStroke(currentItem)
+ : xCursorShapeStroke;
+ }
+
+ private getXCursorShapeFill(moreProps) {
+ const { xCursorShapeFill } = this.props;
+ const { currentItem } = moreProps;
+ return xCursorShapeFill instanceof Function
+ ? xCursorShapeFill(currentItem)
+ : xCursorShapeFill;
+ }
+
+ private getXCursorShape(moreProps/* , ctx */) {
+ const { height, xScale, currentItem, plotData } = moreProps;
+ const { xAccessor } = moreProps;
+ const xValue = xAccessor(currentItem);
+ const centerX = xScale(xValue);
+ const shapeWidth =
+ Math.abs(
+ xScale(xAccessor(last(plotData))) -
+ xScale(xAccessor(first(plotData))),
+ ) / (plotData.length - 1);
+ const xPos = centerX - shapeWidth / 2;
+
+ return { height, xPos, shapeWidth };
+ }
+
+ private getXYCursor(props, moreProps) {
+ const { mouseXY, currentItem, show, height, width } = moreProps;
+ const {
+ customSnapX,
+ stroke,
+ opacity,
+ strokeDasharray,
+ disableYCursor,
+ } = props;
+
+ if (!show || isNotDefined(currentItem)) {
+ return undefined;
+ }
+
+ const yCursor = {
+ x1: 0,
+ x2: width,
+ y1: mouseXY[1],
+ y2: mouseXY[1],
+ stroke,
+ strokeDasharray,
+ opacity,
+ id: "yCursor",
+ };
+ const x = customSnapX(props, moreProps);
+
+ const xCursor = {
+ x1: x,
+ x2: x,
+ y1: 0,
+ y2: height,
+ stroke,
+ strokeDasharray,
+ opacity,
+ id: "xCursor",
+ };
+
+ return disableYCursor ? [xCursor] : [yCursor, xCursor];
+ }
+
+ private readonly drawOnCanvas = (ctx, moreProps) => {
+ const cursors = this.getXYCursor(this.props, moreProps);
+
+ if (cursors !== undefined) {
+ const { useXCursorShape } = this.props;
+
+ const { margin, ratio } = this.context;
+ const originX = 0.5 * ratio + margin.left;
+ const originY = 0.5 * ratio + margin.top;
+
+ ctx.save();
+ ctx.setTransform(1, 0, 0, 1, 0, 0);
+ ctx.scale(ratio, ratio);
+
+ ctx.translate(originX, originY);
+
+ cursors.forEach((line) => {
+ const dashArray = getStrokeDasharray(line.strokeDasharray)
+ .split(",")
+ .map((d) => +d);
+ const xShapeFill = this.getXCursorShapeFill(moreProps);
+
+ if (useXCursorShape && line.id === "xCursor") {
+ const {
+ xCursorShapeOpacity,
+ xCursorShapeStrokeDasharray,
+ } = this.props;
+ const xShape = this.getXCursorShape(moreProps);
+
+ if (xCursorShapeStrokeDasharray != null) {
+ const xShapeStroke = this.getXCursorShapeStroke(
+ moreProps,
+ );
+ ctx.strokeStyle = hexToRGBA(
+ xShapeStroke,
+ xCursorShapeOpacity,
+ );
+ ctx.setLineDash(
+ getStrokeDasharray(xCursorShapeStrokeDasharray)
+ .split(",")
+ .map((d) => +d),
+ );
+ }
+
+ ctx.beginPath();
+ ctx.fillStyle =
+ xShapeFill != null
+ ? hexToRGBA(xShapeFill, xCursorShapeOpacity)
+ : "rgba(0, 0, 0, 0)"; // ="transparent"
+
+ ctx.beginPath();
+ xCursorShapeStrokeDasharray == null
+ ? ctx.fillRect(
+ xShape.xPos,
+ 0,
+ xShape.shapeWidth,
+ xShape.height,
+ )
+ : ctx.rect(
+ xShape.xPos,
+ 0,
+ xShape.shapeWidth,
+ xShape.height,
+ );
+ ctx.fill();
+ } else {
+ ctx.strokeStyle = hexToRGBA(line.stroke, line.opacity);
+ ctx.setLineDash(dashArray);
+ ctx.beginPath();
+ ctx.moveTo(line.x1, line.y1);
+ ctx.lineTo(line.x2, line.y2);
+ }
+
+ ctx.stroke();
+ });
+
+ ctx.restore();
+ }
+ }
+
+ private readonly renderSVG = (moreProps) => {
+ const cursors = this.getXYCursor(this.props, moreProps);
+ if (cursors === undefined) {
+ return null;
+ }
+
+ const { className, useXCursorShape } = this.props;
+
+ return (
+
+ {cursors.map(({ strokeDasharray, id, ...rest }, idx) => {
+ if (useXCursorShape && id === "xCursor") {
+ const {
+ xCursorShapeOpacity,
+ xCursorShapeStrokeDasharray,
+ } = this.props;
+ const xShape = this.getXCursorShape(moreProps);
+ const xShapeFill = this.getXCursorShapeFill(moreProps);
+ const xShapeStroke = this.getXCursorShapeStroke(
+ moreProps,
+ );
+ return (
+
+ );
+ }
+
+ return (
+
+ );
+ })}
+
+ );
+ }
+}
+
+export default Cursor;
diff --git a/packages/react-financial-charts/src/coordinates/EdgeCoordinate.tsx b/packages/react-financial-charts/src/coordinates/EdgeCoordinate.tsx
new file mode 100644
index 000000000..ba90d40df
--- /dev/null
+++ b/packages/react-financial-charts/src/coordinates/EdgeCoordinate.tsx
@@ -0,0 +1,192 @@
+
+import * as React from "react";
+
+import { hexToRGBA, isDefined } from "../utils";
+
+const helper = (props) => {
+ const { coordinate: displayCoordinate, show, type, orient, edgeAt, hideLine } = props;
+ const { fill, opacity, fontFamily, fontSize, textFill, lineStroke, lineOpacity, arrowWidth } = props;
+ const { rectWidth, rectHeight } = props;
+ const { x1, y1, x2, y2 } = props;
+
+ if (!show) { return null; }
+
+ let edgeXRect;
+ let edgeYRect;
+ let edgeXText;
+ let edgeYText;
+
+ if (type === "horizontal") {
+
+ edgeXRect = (orient === "right") ? edgeAt + 1 : edgeAt - rectWidth - arrowWidth - 1;
+ edgeYRect = y1 - (rectHeight / 2);
+ edgeXText = (orient === "right") ? edgeAt + (rectWidth / 2) + arrowWidth : edgeAt - (rectWidth / 2) - arrowWidth;
+ edgeYText = y1;
+ } else {
+ edgeXRect = x1 - (rectWidth / 2);
+ edgeYRect = (orient === "bottom") ? edgeAt : edgeAt - rectHeight;
+ edgeXText = x1;
+ edgeYText = (orient === "bottom") ? edgeAt + (rectHeight / 2) : edgeAt - (rectHeight / 2);
+ }
+
+ let coordinateBase;
+ let coordinate;
+ const textAnchor = "middle";
+ if (isDefined(displayCoordinate)) {
+ coordinateBase = {
+ edgeXRect, edgeYRect, rectHeight, rectWidth, fill, opacity, arrowWidth,
+ };
+ coordinate = {
+ edgeXText, edgeYText, textAnchor, fontFamily, fontSize, textFill, displayCoordinate,
+ };
+ }
+
+ const line = hideLine ? undefined : {
+ opacity: lineOpacity, stroke: lineStroke, x1, y1, x2, y2,
+ };
+ return {
+ coordinateBase, coordinate, line, orient,
+ };
+};
+
+interface EdgeCoordinateProps {
+ className?: string;
+ type: "vertical" | "horizontal";
+ coordinate: any;
+ x1: number;
+ y1: number;
+ x2: number;
+ y2: number;
+ orient?: "bottom" | "top" | "left" | "right";
+ rectWidth?: number;
+ hideLine?: boolean;
+ fill?: string;
+ opacity?: number;
+ fontFamily: string;
+ fontSize: number;
+}
+
+export class EdgeCoordinate extends React.Component {
+
+ public static defaultProps = {
+ className: "react-stockcharts-edgecoordinate",
+ orient: "left",
+ hideLine: false,
+ fill: "#8a8a8a",
+ opacity: 1,
+ fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif",
+ fontSize: 13,
+ textFill: "#FFFFFF",
+ lineStroke: "#000000",
+ lineOpacity: 0.3,
+ arrowWidth: 10,
+ };
+
+ public static drawOnCanvasStatic = (ctx, props) => {
+ props = { ...EdgeCoordinate.defaultProps, ...props };
+
+ const edge = helper(props);
+
+ if (edge === null) { return; }
+
+ if (isDefined(edge.coordinateBase)) {
+ const { rectWidth, rectHeight, arrowWidth } = edge.coordinateBase;
+
+ ctx.fillStyle = hexToRGBA(edge.coordinateBase.fill, edge.coordinateBase.opacity);
+
+ const x = edge.coordinateBase.edgeXRect;
+ const y = edge.coordinateBase.edgeYRect;
+
+ ctx.beginPath();
+
+ if (edge.orient === "right") {
+ ctx.moveTo(x, y + rectHeight / 2);
+ ctx.lineTo(x + arrowWidth, y);
+ ctx.lineTo(x + rectWidth + arrowWidth, y);
+ ctx.lineTo(x + rectWidth + arrowWidth, y + rectHeight);
+ ctx.lineTo(x + arrowWidth, y + rectHeight);
+ ctx.closePath();
+ } else if (edge.orient === "left") {
+ ctx.moveTo(x, y);
+ ctx.lineTo(x + rectWidth, y);
+ ctx.lineTo(x + rectWidth + arrowWidth, y + rectHeight / 2);
+ ctx.lineTo(x + rectWidth, y + rectHeight);
+ ctx.lineTo(x, y + rectHeight);
+ ctx.closePath();
+ } else {
+ ctx.rect(x, y, rectWidth, rectHeight);
+ }
+ ctx.fill();
+
+ ctx.font = `${edge.coordinate.fontSize}px ${edge.coordinate.fontFamily}`;
+ ctx.fillStyle = edge.coordinate.textFill;
+ ctx.textAlign = edge.coordinate.textAnchor === "middle" ? "center" : edge.coordinate.textAnchor;
+ ctx.textBaseline = "middle";
+
+ ctx.fillText(edge.coordinate.displayCoordinate, edge.coordinate.edgeXText, edge.coordinate.edgeYText);
+ }
+
+ if (edge.line !== undefined) {
+ ctx.strokeStyle = hexToRGBA(edge.line.stroke, edge.line.opacity);
+
+ ctx.beginPath();
+ ctx.moveTo(edge.line.x1, edge.line.y1);
+ ctx.lineTo(edge.line.x2, edge.line.y2);
+ ctx.stroke();
+ }
+ }
+
+ public render() {
+ const { className } = this.props;
+
+ const edge = helper(this.props);
+ if (edge === null) {
+ return null;
+ }
+ let line;
+ let coordinateBase;
+ let coordinate;
+
+ if (edge.line !== undefined) {
+ line = ;
+ }
+
+ if (isDefined(edge.coordinateBase)) {
+
+ const { rectWidth, rectHeight, arrowWidth } = edge.coordinateBase;
+
+ const path = edge.orient === "left"
+ ? `M0,0L0,${rectHeight}L${rectWidth},${rectHeight}L${rectWidth + arrowWidth},10L${rectWidth},0L0,0L0,0`
+ : `M0,${arrowWidth}L${arrowWidth},${rectHeight}L${rectWidth + arrowWidth},${rectHeight}L${rectWidth + arrowWidth},0L${arrowWidth},0L0,${arrowWidth}`;
+
+ coordinateBase = edge.orient === "left" || edge.orient === "right"
+ ?
+
+
+ : ;
+
+ coordinate = ({edge.coordinate.displayCoordinate});
+ }
+ return (
+
+ {line}
+ {coordinateBase}
+ {coordinate}
+
+ );
+ }
+}
diff --git a/packages/react-financial-charts/src/coordinates/EdgeCoordinateV2.tsx b/packages/react-financial-charts/src/coordinates/EdgeCoordinateV2.tsx
new file mode 100644
index 000000000..84cafd6fc
--- /dev/null
+++ b/packages/react-financial-charts/src/coordinates/EdgeCoordinateV2.tsx
@@ -0,0 +1,153 @@
+import * as React from "react";
+
+import { hexToRGBA, isDefined } from "../utils";
+
+export function renderSVG(props) {
+ const { className } = props;
+
+ const edge = helper(props);
+ if (edge === null) { return null; }
+ let line;
+ let coordinateBase;
+ let coordinate;
+
+ if (edge.line !== undefined && isDefined(edge.line)) {
+ line = ;
+ }
+
+ if (isDefined(edge.coordinateBase)) {
+
+ const { rectWidth, rectHeight, arrowWidth } = edge.coordinateBase;
+
+ const path = edge.orient === "left"
+ ? `M0,0L0,${rectHeight}L${rectWidth},${rectHeight}L${rectWidth + arrowWidth},10L${rectWidth},0L0,0L0,0`
+ : `M0,${arrowWidth}L${arrowWidth},${rectHeight}L${rectWidth + arrowWidth},${rectHeight}L${rectWidth + arrowWidth},0L${arrowWidth},0L0,${arrowWidth}`;
+
+ coordinateBase = edge.orient === "left" || edge.orient === "right"
+ ?
+
+
+ : ;
+
+ coordinate = ({edge.coordinate.displayCoordinate});
+ }
+ return (
+
+ {line}
+ {coordinateBase}
+ {coordinate}
+
+ );
+}
+
+function helper(props) {
+ const { coordinate: displayCoordinate, show, type, orient, edgeAt, hideLine } = props;
+ const { fill, opacity, fontFamily, fontSize, textFill, lineStroke, lineOpacity, arrowWidth } = props;
+ const { rectWidth, rectHeight } = props;
+ const { x1, y1, x2, y2, dx } = props;
+
+ if (!show) {
+ return null;
+ }
+
+ let edgeXRect;
+ let edgeYRect;
+ let edgeXText;
+ let edgeYText;
+
+ if (type === "horizontal") {
+
+ edgeXRect = dx + ((orient === "right") ? edgeAt + 1 : edgeAt - rectWidth - arrowWidth - 1);
+ edgeYRect = y1 - (rectHeight / 2);
+ edgeXText = dx + ((orient === "right") ? edgeAt + (rectWidth / 2) + arrowWidth : edgeAt - (rectWidth / 2) - arrowWidth);
+ edgeYText = y1;
+ } else {
+ edgeXRect = x1 - (rectWidth / 2);
+ edgeYRect = (orient === "bottom") ? edgeAt : edgeAt - rectHeight;
+ edgeXText = x1;
+ edgeYText = (orient === "bottom") ? edgeAt + (rectHeight / 2) : edgeAt - (rectHeight / 2);
+ }
+ let coordinateBase;
+ let coordinate;
+ const textAnchor = "middle";
+ if (isDefined(displayCoordinate)) {
+ coordinateBase = {
+ edgeXRect, edgeYRect, rectHeight, rectWidth, fill, opacity, arrowWidth,
+ };
+ coordinate = {
+ edgeXText, edgeYText, textAnchor, fontFamily, fontSize, textFill, displayCoordinate,
+ };
+ }
+
+ const line = hideLine ? undefined : {
+ opacity: lineOpacity, stroke: lineStroke, x1, y1, x2, y2,
+ };
+ return {
+ coordinateBase, coordinate, line, orient,
+ };
+}
+
+export function drawOnCanvas(ctx, props) {
+ const edge = helper(props);
+
+ if (edge === null) { return; }
+
+ if (isDefined(edge.coordinateBase)) {
+ const { rectWidth, rectHeight, arrowWidth } = edge.coordinateBase;
+
+ ctx.fillStyle = hexToRGBA(edge.coordinateBase.fill, edge.coordinateBase.opacity);
+
+ const x = edge.coordinateBase.edgeXRect;
+ const y = edge.coordinateBase.edgeYRect;
+
+ ctx.beginPath();
+
+ if (edge.orient === "right") {
+ ctx.moveTo(x, y + rectHeight / 2);
+ ctx.lineTo(x + arrowWidth, y);
+ ctx.lineTo(x + rectWidth + arrowWidth, y);
+ ctx.lineTo(x + rectWidth + arrowWidth, y + rectHeight);
+ ctx.lineTo(x + arrowWidth, y + rectHeight);
+ ctx.closePath();
+ } else if (edge.orient === "left") {
+ ctx.moveTo(x, y);
+ ctx.lineTo(x + rectWidth, y);
+ ctx.lineTo(x + rectWidth + arrowWidth, y + rectHeight / 2);
+ ctx.lineTo(x + rectWidth, y + rectHeight);
+ ctx.lineTo(x, y + rectHeight);
+ ctx.closePath();
+ } else {
+ ctx.rect(x, y, rectWidth, rectHeight);
+ }
+ ctx.fill();
+
+ ctx.font = `${edge.coordinate.fontSize}px ${edge.coordinate.fontFamily}`;
+ ctx.fillStyle = edge.coordinate.textFill;
+ ctx.textAlign = edge.coordinate.textAnchor === "middle" ? "center" : edge.coordinate.textAnchor;
+ ctx.textBaseline = "middle";
+
+ ctx.fillText(edge.coordinate.displayCoordinate, edge.coordinate.edgeXText, edge.coordinate.edgeYText);
+ }
+ if (edge.line !== undefined && isDefined(edge.line)) {
+ ctx.strokeStyle = hexToRGBA(edge.line.stroke, edge.line.opacity);
+
+ ctx.beginPath();
+ ctx.moveTo(edge.line.x1, edge.line.y1);
+ ctx.lineTo(edge.line.x2, edge.line.y2);
+ ctx.stroke();
+ }
+}
diff --git a/packages/react-financial-charts/src/coordinates/EdgeCoordinateV3.tsx b/packages/react-financial-charts/src/coordinates/EdgeCoordinateV3.tsx
new file mode 100644
index 000000000..35d3693ee
--- /dev/null
+++ b/packages/react-financial-charts/src/coordinates/EdgeCoordinateV3.tsx
@@ -0,0 +1,307 @@
+import * as React from "react";
+
+import { getStrokeDasharray, hexToRGBA, isDefined } from "../utils";
+
+export function renderSVG(props) {
+ const { className } = props;
+
+ const edge = helper(props);
+ if (edge === null) { return null; }
+ let line;
+ let coordinateBase;
+ let coordinate;
+
+ if (edge.line !== undefined && isDefined(edge.line)) {
+ line = (
+
+ );
+ }
+ if (isDefined(edge.coordinateBase)) {
+ const { rectWidth, rectHeight, arrowWidth } = edge.coordinateBase;
+
+ const path =
+ edge.orient === "left"
+ ? `M0,0L0,${rectHeight}L${rectWidth},${rectHeight}L${rectWidth +
+ arrowWidth},10L${rectWidth},0L0,0L0,0`
+ : `M0,${arrowWidth}L${arrowWidth},${rectHeight}L${rectWidth +
+ arrowWidth},${rectHeight}L${rectWidth +
+ arrowWidth},0L${arrowWidth},0L0,${arrowWidth}`;
+
+ coordinateBase =
+ edge.orient === "left" || edge.orient === "right" ? (
+
+
+
+ ) : (
+
+ );
+
+ coordinate = (
+
+ {edge.coordinate.displayCoordinate}
+
+ );
+ }
+ return (
+
+ {line}
+ {coordinateBase}
+ {coordinate}
+
+ );
+}
+/* eslint-enable react/prop-types */
+
+function helper(props) {
+ const {
+ coordinate: displayCoordinate,
+ show,
+ type,
+ orient,
+ edgeAt,
+ hideLine,
+ lineStrokeDasharray,
+ } = props;
+ const {
+ fill,
+ opacity,
+ fontFamily,
+ fontSize,
+ textFill,
+ lineStroke,
+ lineOpacity,
+ } = props;
+ const { stroke, strokeOpacity, strokeWidth } = props;
+ const { arrowWidth, rectWidth, rectHeight, rectRadius } = props;
+ const { x1, y1, x2, y2, dx } = props;
+
+ if (!show) { return null; }
+
+ let coordinateBase;
+ let coordinate;
+ if (isDefined(displayCoordinate)) {
+ const textAnchor = "middle";
+ // TODO: Below it is necessary to implement logic for the possibility of alignment from the right or from the left.
+
+ let edgeXRect;
+ let edgeYRect;
+ let edgeXText;
+ let edgeYText;
+
+ if (type === "horizontal") {
+ edgeXRect =
+ dx + (orient === "right" ? edgeAt + 1 : edgeAt - rectWidth - 1);
+ edgeYRect = y1 - rectHeight / 2 - strokeWidth;
+ edgeXText =
+ dx +
+ (orient === "right"
+ ? edgeAt + rectWidth / 2
+ : edgeAt - rectWidth / 2);
+ edgeYText = y1;
+ } else {
+ const dy = orient === "bottom" ? strokeWidth - 1 : -strokeWidth + 1;
+ edgeXRect = x1 - rectWidth / 2;
+ edgeYRect =
+ (orient === "bottom" ? edgeAt : edgeAt - rectHeight) + dy;
+ edgeXText = x1;
+ edgeYText =
+ (orient === "bottom"
+ ? edgeAt + rectHeight / 2
+ : edgeAt - rectHeight / 2) + dy;
+ }
+
+ coordinateBase = {
+ edgeXRect,
+ edgeYRect,
+ rectHeight: rectHeight + strokeWidth,
+ rectWidth,
+ rectRadius,
+ fill,
+ opacity,
+ arrowWidth,
+ stroke,
+ strokeOpacity,
+ strokeWidth,
+ };
+ coordinate = {
+ edgeXText,
+ edgeYText,
+ textAnchor,
+ fontFamily,
+ fontSize,
+ textFill,
+ displayCoordinate,
+ };
+ }
+
+ const line = hideLine
+ ? undefined
+ : {
+ opacity: lineOpacity,
+ stroke: lineStroke,
+ strokeDasharray: lineStrokeDasharray,
+ x1,
+ y1,
+ x2,
+ y2,
+ };
+
+ return {
+ coordinateBase,
+ coordinate,
+ line,
+ orient,
+ };
+}
+
+export function drawOnCanvas(ctx, props) {
+ const { fontSize, fontFamily } = props;
+
+ ctx.font = `${fontSize}px ${fontFamily}`;
+ ctx.textBaseline = "middle";
+ const width = Math.round(ctx.measureText(props.coordinate).width + 10);
+
+ const edge = helper({ ...props, rectWidth: width });
+
+ if (edge === null) { return; }
+
+ if (edge.line !== undefined && isDefined(edge.line)) {
+ const dashArray = getStrokeDasharray(edge.line.strokeDasharray)
+ .split(",")
+ .map((d) => +d);
+ ctx.setLineDash(dashArray);
+ ctx.strokeStyle = hexToRGBA(edge.line.stroke, edge.line.opacity);
+ ctx.lineWidth = 1;
+ ctx.beginPath();
+ ctx.moveTo(edge.line.x1, edge.line.y1);
+ ctx.lineTo(edge.line.x2, edge.line.y2);
+ ctx.stroke();
+ }
+
+ ctx.setLineDash([]);
+ if (isDefined(edge.coordinateBase)) {
+ const {
+ rectWidth,
+ rectHeight,
+ rectRadius,
+ arrowWidth,
+ } = edge.coordinateBase;
+
+ ctx.fillStyle = hexToRGBA(
+ edge.coordinateBase.fill,
+ edge.coordinateBase.opacity,
+ );
+ if (isDefined(edge.coordinateBase.stroke)) {
+ ctx.strokeStyle = hexToRGBA(
+ edge.coordinateBase.stroke,
+ edge.coordinateBase.strokeOpacity,
+ );
+ ctx.lineWidth = edge.coordinateBase.strokeWidth;
+ }
+
+ let x = edge.coordinateBase.edgeXRect;
+ const y = edge.coordinateBase.edgeYRect;
+ const halfHeight = rectHeight / 2;
+
+ ctx.beginPath();
+ if (edge.orient === "right") {
+ x -= arrowWidth;
+ ctx.moveTo(x, y + halfHeight);
+ ctx.lineTo(x + arrowWidth, y);
+ ctx.lineTo(x + rectWidth + arrowWidth, y);
+ ctx.lineTo(x + rectWidth + arrowWidth, y + rectHeight);
+ ctx.lineTo(x + arrowWidth, y + rectHeight);
+ ctx.closePath();
+ } else if (edge.orient === "left") {
+ // x += arrowWidth;
+ ctx.moveTo(x, y);
+ ctx.lineTo(x + rectWidth, y);
+ ctx.lineTo(x + rectWidth + arrowWidth, y + halfHeight);
+ ctx.lineTo(x + rectWidth, y + rectHeight);
+ ctx.lineTo(x, y + rectHeight);
+ ctx.closePath();
+ } else {
+ // console.error(x, y, rectWidth, rectHeight)
+ if (rectRadius) {
+ roundRect(ctx, x, y, rectWidth, rectHeight, 3);
+ } else {
+ ctx.rect(x, y, rectWidth, rectHeight);
+ }
+ }
+ ctx.fill();
+
+ if (isDefined(edge.coordinateBase.stroke)) {
+ ctx.stroke();
+ }
+
+ ctx.fillStyle = edge.coordinate.textFill;
+ ctx.textAlign =
+ edge.coordinate.textAnchor === "middle"
+ ? "center"
+ : edge.coordinate.textAnchor;
+ ctx.fillText(
+ edge.coordinate.displayCoordinate,
+ edge.coordinate.edgeXText,
+ edge.coordinate.edgeYText,
+ );
+ }
+}
+
+function roundRect(ctx, x, y, width, height, radius) {
+ ctx.beginPath();
+ ctx.moveTo(x + radius, y);
+ ctx.lineTo(x + width - radius, y);
+ ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
+ ctx.lineTo(x + width, y + height - radius);
+ ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
+ ctx.lineTo(x + radius, y + height);
+ ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
+ ctx.lineTo(x, y + radius);
+ ctx.quadraticCurveTo(x, y, x + radius, y);
+ ctx.closePath();
+}
+
+// export default EdgeCoordinate;
diff --git a/packages/react-financial-charts/src/coordinates/EdgeIndicator.tsx b/packages/react-financial-charts/src/coordinates/EdgeIndicator.tsx
new file mode 100644
index 000000000..698749552
--- /dev/null
+++ b/packages/react-financial-charts/src/coordinates/EdgeIndicator.tsx
@@ -0,0 +1,136 @@
+import { format } from "d3-format";
+import * as React from "react";
+
+import GenericChartComponent from "../GenericChartComponent";
+import { getAxisCanvas } from "../GenericComponent";
+import { drawOnCanvas, renderSVG } from "./EdgeCoordinateV3";
+
+import { first, functor, isDefined, last, noop, strokeDashTypes } from "../utils";
+
+interface EdgeIndicatorProps {
+ yAccessor?: any; // func
+ type?: "horizontal";
+ className?: string;
+ fill?: string | any; // func
+ lineStroke?: string | any; // func
+ textFill?: string | any; // func
+ itemType: "first" | "last";
+ orient?: "left" | "right";
+ edgeAt?: "left" | "right";
+ displayFormat?: any; // func
+ rectHeight?: number;
+ rectWidth?: number;
+ arrowWidth?: number;
+ lineStrokeDasharray?: strokeDashTypes;
+}
+
+export class EdgeIndicator extends React.Component {
+
+ public static defaultProps = {
+ className: "react-stockcharts-edgeindicator",
+ type: "horizontal",
+ orient: "left",
+ edgeAt: "left",
+ textFill: "#FFFFFF",
+ displayFormat: format(".2f"),
+ yAxisPad: 0,
+ rectHeight: 20,
+ rectWidth: 50,
+ arrowWidth: 10,
+ fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif",
+ fontSize: 13,
+ dx: 0,
+ hideLine: false,
+ fill: "#8a8a8a",
+ opacity: 1,
+ stroke: noop,
+ strokeOpacity: 1,
+ strokeWidth: 3,
+ lineStroke: "#000000",
+ lineOpacity: 0.3,
+ lineStrokeDasharray: "ShortDash",
+ };
+
+ public render() {
+ return ;
+ }
+
+ private readonly drawOnCanvas = (ctx, moreProps) => {
+ const edge = this.helper(this.props, moreProps);
+ const props = {
+ ...this.props,
+ ...edge,
+ };
+ drawOnCanvas(ctx, props);
+ }
+
+ private readonly renderSVG = (moreProps) => {
+ const edge = this.helper(this.props, moreProps);
+ const props = {
+ ...this.props,
+ ...edge,
+ };
+ return renderSVG(props);
+ }
+
+ private readonly helper = (props, moreProps) => {
+ const { itemType, yAccessor } = props;
+ const { plotData } = moreProps;
+
+ const item = itemType === "first"
+ ? first(plotData, yAccessor)
+ : last(plotData, yAccessor);
+
+ const edge = isDefined(item)
+ ? this.getEdge(props, moreProps, item)
+ : null;
+
+ return edge;
+ }
+
+ private readonly getEdge = (props, moreProps, item) => {
+ const { type: edgeType, displayFormat, edgeAt, yAxisPad, orient, lineStroke } = props;
+
+ const { yAccessor, fill, textFill, rectHeight, rectWidth, arrowWidth } = props;
+ const { fontFamily, fontSize } = props;
+ const { stroke } = props;
+
+ const { xScale, chartConfig: { yScale }, xAccessor, width } = moreProps;
+
+ const yValue = yAccessor(item);
+ const xValue = xAccessor(item);
+
+ const x1 = Math.round(xScale(xValue));
+ const y1 = Math.round(yScale(yValue));
+
+ const [left, right] = [0, width];
+ const edgeX = edgeAt === "left"
+ ? left - yAxisPad
+ : right + yAxisPad;
+
+ return {
+ coordinate: displayFormat(yValue),
+ show: true,
+ type: edgeType,
+ orient,
+ edgeAt: edgeX,
+ fill: functor(fill)(item),
+ lineStroke: functor(lineStroke)(item),
+ stroke: functor(stroke)(item),
+ fontFamily, fontSize,
+ textFill: functor(textFill)(item),
+ rectHeight, rectWidth, arrowWidth,
+ x1,
+ y1,
+ x2: right,
+ y2: y1,
+ };
+ }
+}
diff --git a/packages/react-financial-charts/src/coordinates/MouseCoordinateX.tsx b/packages/react-financial-charts/src/coordinates/MouseCoordinateX.tsx
new file mode 100644
index 000000000..90242227e
--- /dev/null
+++ b/packages/react-financial-charts/src/coordinates/MouseCoordinateX.tsx
@@ -0,0 +1,131 @@
+import * as React from "react";
+
+import GenericChartComponent from "../GenericChartComponent";
+import { getMouseCanvas } from "../GenericComponent";
+import { drawOnCanvas, renderSVG } from "./EdgeCoordinateV3";
+
+import { isNotDefined } from "../utils";
+
+interface MouseCoordinateXProps {
+ readonly displayFormat: any; // func
+ readonly yAxisPad?: number;
+ readonly rectWidth?: number;
+ readonly rectHeight?: number;
+ readonly orient?: "bottom" | "top" | "left" | "right";
+ readonly at?: "bottom" | "top" | "left" | "right";
+ readonly fill?: string;
+ readonly opacity?: number;
+ readonly fontFamily?: string;
+ readonly fontSize?: number;
+ readonly textFill?: string;
+ readonly snapX?: boolean;
+}
+
+const defaultCustomX = (props: MouseCoordinateXProps, moreProps) => {
+ const { xScale, xAccessor, currentItem, mouseXY } = moreProps;
+ const { snapX } = props;
+ const x = snapX
+ ? xScale(xAccessor(currentItem))
+ : mouseXY[0];
+
+ const { displayXAccessor } = moreProps;
+ const { displayFormat } = props;
+ const coordinate = snapX
+ ? displayFormat(displayXAccessor(currentItem))
+ : displayFormat(xScale.invert(x));
+ return { x, coordinate };
+};
+
+export class MouseCoordinateX extends React.Component {
+
+ public static defaultProps = {
+ yAxisPad: 0,
+ rectWidth: 80,
+ rectHeight: 20,
+ strokeOpacity: 1,
+ strokeWidth: 1,
+ orient: "bottom",
+ at: "bottom",
+ fill: "#525252",
+ opacity: 1,
+ fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif",
+ fontSize: 13,
+ textFill: "#FFFFFF",
+ snapX: true,
+ customX: defaultCustomX,
+ };
+
+ public render() {
+ return (
+
+ );
+ }
+
+ private readonly drawOnCanvas = (ctx, moreProps) => {
+ const props = this.helper(this.props, moreProps);
+ if (isNotDefined(props)) { return null; }
+
+ drawOnCanvas(ctx, props);
+ }
+
+ private readonly renderSVG = (moreProps) => {
+ const props = this.helper(this.props, moreProps);
+ if (isNotDefined(props)) { return null; }
+
+ return renderSVG(props);
+ }
+
+ private readonly helper = (props, moreProps) => {
+ const { show, currentItem } = moreProps;
+ const { chartConfig: { height } } = moreProps;
+
+ if (isNotDefined(currentItem)) { return null; }
+
+ const { customX } = props;
+
+ const { orient, at } = props;
+ const { stroke, strokeOpacity, strokeWidth } = props;
+ const { rectRadius, rectWidth, rectHeight } = props;
+ const { fill, opacity, fontFamily, fontSize, textFill } = props;
+
+ const edgeAt = (at === "bottom")
+ ? height
+ : 0;
+
+ const {
+ x,
+ coordinate,
+ } = customX(props, moreProps);
+
+ const type = "vertical";
+ const y1 = 0;
+ const y2 = height;
+ const hideLine = true;
+
+ const coordinateProps = {
+ coordinate,
+ show,
+ type,
+ orient,
+ edgeAt,
+ hideLine,
+ fill, opacity, fontFamily, fontSize, textFill,
+ stroke, strokeOpacity, strokeWidth,
+ rectWidth,
+ rectHeight,
+ rectRadius,
+ arrowWidth: 0,
+ x1: x,
+ x2: x,
+ y1,
+ y2,
+ };
+ return coordinateProps;
+ }
+}
diff --git a/packages/react-financial-charts/src/coordinates/MouseCoordinateXV2.tsx b/packages/react-financial-charts/src/coordinates/MouseCoordinateXV2.tsx
new file mode 100644
index 000000000..854040e76
--- /dev/null
+++ b/packages/react-financial-charts/src/coordinates/MouseCoordinateXV2.tsx
@@ -0,0 +1,157 @@
+
+import * as React from "react";
+
+import GenericChartComponent from "../GenericChartComponent";
+import { getMouseCanvas } from "../GenericComponent";
+
+interface MouseCoordinateXV2Props {
+ xPosition?: any; // func
+ drawCoordinate?: any; // func
+ displayFormat: any; // func
+ at?: "bottom" | "top";
+ orient?: "bottom" | "top";
+ text?: {
+ fontStyle: string,
+ fontWeight: string,
+ fontFamily: string,
+ fontSize: number,
+ fill: string | any, // func
+ };
+ bg: {
+ fill: string | any, // func
+ stroke: string,
+ strokeWidth: number,
+ padding: {
+ left: number,
+ right: number,
+ top: number,
+ bottom: number,
+ },
+ };
+ dx?: number;
+ dy?: number;
+}
+
+export class MouseCoordinateXV2 extends React.Component {
+
+ public static defaultProps = {
+ xPosition: defaultXPosition,
+ drawCoordinate: defaultDrawCoordinate,
+ at: "bottom",
+ orient: "bottom",
+ text: {
+ fontStyle: "",
+ fontWeight: "",
+ fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif",
+ fontSize: 13,
+ fill: "rgb(35, 35, 35)",
+ },
+ bg: {
+ fill: "rgb(255, 255, 255)",
+ stroke: "rgb(35, 35, 35)",
+ strokeWidth: 1,
+ padding: {
+ left: 7,
+ right: 7,
+ top: 4,
+ bottom: 4,
+ },
+ },
+ dx: 7,
+ dy: 7,
+ };
+
+ public render() {
+ return (
+
+ );
+ }
+
+ private readonly drawOnCanvas = (ctx, moreProps) => {
+ const { show, currentItem } = moreProps;
+ const { drawCoordinate } = this.props;
+
+ if (show && currentItem != null) {
+ const shape = getXCoordinateInfo(ctx, this.props, moreProps);
+ drawCoordinate(ctx, shape, this.props, moreProps);
+ }
+ }
+}
+
+function defaultXPosition(props, moreProps) {
+ const { currentItem, xAccessor } = moreProps;
+ return xAccessor(currentItem);
+}
+
+function getXCoordinateInfo(ctx, props, moreProps) {
+ const { xPosition } = props;
+ const xValue = xPosition(props, moreProps);
+ const { at, displayFormat } = props;
+ const { text } = props;
+ const { xScale, chartConfig: { height } } = moreProps;
+ ctx.font = `${text.fontStyle} ${text.fontWeight} ${text.fontSize}px ${text.fontFamily}`;
+
+ const t = displayFormat(xValue);
+ const textWidth = ctx.measureText(t).width;
+
+ const y = at === "bottom" ? height : 0;
+ const x = Math.round(xScale(xValue));
+
+ return {
+ x,
+ y,
+ textWidth,
+ text: t,
+ };
+}
+
+function defaultDrawCoordinate(
+ ctx,
+ shape,
+ props,
+ moreProps,
+) {
+ const { x, y, textWidth, text } = shape;
+ const { orient, dx, dy } = props;
+
+ const {
+ bg: { padding, fill, stroke, strokeWidth },
+ text: { fontSize, fill: textFill },
+ } = props;
+
+ ctx.textAlign = "center";
+
+ const sign = orient === "top" ? -1 : 1;
+ const halfWidth = Math.round(textWidth / 2 + padding.right);
+ const height = Math.round(fontSize + padding.top + padding.bottom);
+
+ ctx.strokeStyle = typeof stroke === "function" ? stroke(moreProps, ctx) : stroke;
+ ctx.fillStyle = typeof fill === "function" ? fill(moreProps, ctx) : fill;
+ ctx.lineWidth = typeof strokeWidth === "function" ? strokeWidth(moreProps) : strokeWidth;
+
+ ctx.beginPath();
+
+ ctx.moveTo(x, y);
+ ctx.lineTo(x + dx, y + sign * dy);
+ ctx.lineTo(x + halfWidth, y + sign * dy);
+ ctx.lineTo(x + halfWidth, y + sign * (dy + height));
+ ctx.lineTo(x - halfWidth, y + sign * (dy + height));
+ ctx.lineTo(x - halfWidth, y + sign * dy);
+ ctx.lineTo(x - dx, y + sign * dy);
+ ctx.closePath();
+ ctx.stroke();
+ ctx.fill();
+
+ ctx.beginPath();
+ ctx.fillStyle = typeof textFill === "function" ? textFill(moreProps, ctx) : textFill;
+
+ ctx.textBaseline = orient === "top" ? "alphabetic" : "hanging";
+ const pad = orient === "top" ? padding.bottom : padding.top;
+
+ ctx.fillText(text, x, y + sign * (dy + pad + 2));
+}
diff --git a/packages/react-financial-charts/src/coordinates/MouseCoordinateY.tsx b/packages/react-financial-charts/src/coordinates/MouseCoordinateY.tsx
new file mode 100644
index 000000000..303a39346
--- /dev/null
+++ b/packages/react-financial-charts/src/coordinates/MouseCoordinateY.tsx
@@ -0,0 +1,135 @@
+
+import * as React from "react";
+
+import GenericChartComponent from "../GenericChartComponent";
+import { getMouseCanvas } from "../GenericComponent";
+import { drawOnCanvas, renderSVG } from "./EdgeCoordinateV3";
+
+import { isNotDefined } from "../utils";
+
+interface MouseCoordinateYProps {
+ displayFormat: any; // func
+ yAxisPad?: number;
+ rectWidth?: number;
+ rectHeight?: number;
+ orient?: "bottom" | "top" | "left" | "right";
+ at?: "bottom" | "top" | "left" | "right";
+ dx?: number;
+ fill?: string;
+ opacity?: number;
+ fontFamily?: string;
+ fontSize?: number;
+ textFill?: string;
+}
+
+export class MouseCoordinateY extends React.Component {
+
+ public static defaultProps = {
+ yAxisPad: 0,
+ rectWidth: 50,
+ rectHeight: 20,
+ orient: "left",
+ at: "left",
+ dx: 0,
+ arrowWidth: 10,
+ fill: "#525252",
+ opacity: 1,
+ fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif",
+ fontSize: 13,
+ textFill: "#FFFFFF",
+ strokeOpacity: 1,
+ strokeWidth: 1,
+ };
+
+ public render() {
+ return (
+
+ );
+ }
+
+ private readonly renderSVG = (moreProps) => {
+ const props = this.helper(this.props, moreProps);
+ if (isNotDefined(props)) { return null; }
+
+ return renderSVG(props);
+ }
+
+ private readonly drawOnCanvas = (ctx, moreProps) => {
+ const props = this.helper(this.props, moreProps);
+ if (isNotDefined(props)) { return null; }
+
+ drawOnCanvas(ctx, props);
+ }
+
+ private readonly helper = (props, moreProps) => {
+ const { chartId } = moreProps;
+ const { currentCharts, mouseXY } = moreProps;
+
+ if (isNotDefined(mouseXY)) { return null; }
+ if (currentCharts.indexOf(chartId) < 0) { return null; }
+
+ const { show } = moreProps;
+ if (!show) { return null; }
+
+ const y = mouseXY[1];
+ const { chartConfig: { yScale } } = moreProps;
+ const { displayFormat } = props;
+
+ const coordinate = displayFormat(yScale.invert(y));
+
+ return getYCoordinate(y, coordinate, props, moreProps);
+ }
+}
+
+export function getYCoordinate(y, displayValue, props, moreProps) {
+ const { width } = moreProps;
+
+ const { orient, at, rectWidth, rectHeight, dx } = props;
+ const { fill, opacity, fontFamily, fontSize, textFill, arrowWidth } = props;
+ const { stroke, strokeOpacity, strokeWidth } = props;
+
+ const x1 = 0;
+ const x2 = width;
+ const edgeAt = (at === "right")
+ ? width
+ : 0;
+
+ const type = "horizontal";
+ const hideLine = true;
+
+ const coordinateProps = {
+ coordinate: displayValue,
+ show: true,
+ type,
+ orient,
+ edgeAt,
+ hideLine,
+ fill,
+ opacity,
+
+ fontFamily,
+ fontSize,
+ textFill,
+
+ stroke,
+ strokeOpacity,
+ strokeWidth,
+
+ rectWidth,
+ rectHeight,
+
+ arrowWidth,
+ dx,
+ x1,
+ x2,
+ y1: y,
+ y2: y,
+ };
+ return coordinateProps;
+}
diff --git a/packages/react-financial-charts/src/coordinates/PriceCoordinate.tsx b/packages/react-financial-charts/src/coordinates/PriceCoordinate.tsx
new file mode 100644
index 000000000..8bfc9f2b5
--- /dev/null
+++ b/packages/react-financial-charts/src/coordinates/PriceCoordinate.tsx
@@ -0,0 +1,126 @@
+import * as React from "react";
+
+import GenericChartComponent from "../GenericChartComponent";
+import { getAxisCanvas } from "../GenericComponent";
+import { functor, strokeDashTypes } from "../utils";
+import { drawOnCanvas, renderSVG } from "./EdgeCoordinateV3";
+
+interface PriceCoordinateProps {
+ displayFormat: any; // func
+ yAxisPad?: number;
+ rectWidth?: number;
+ rectHeight?: number;
+ orient?: "bottom" | "top" | "left" | "right";
+ at?: "bottom" | "top" | "left" | "right";
+ price?: number;
+ dx?: number;
+ arrowWidth?: number;
+ opacity?: number;
+ lineOpacity?: number;
+ lineStroke?: string;
+ fontFamily?: string;
+ fontSize?: number;
+ fill?: string | any; // func
+ strokeDasharray?: strokeDashTypes;
+ stroke?: string;
+ strokeOpacity?: number;
+ strokeWidth?: number;
+ textFill?: string | any; // func
+}
+
+export class PriceCoordinate extends React.Component {
+
+ public static defaultProps = {
+ yAxisPad: 0,
+ rectWidth: 50,
+ rectHeight: 20,
+ orient: "left",
+ at: "left",
+ price: 0,
+ dx: 0,
+ arrowWidth: 0,
+ fill: "#BAB8b8",
+ opacity: 1,
+ lineOpacity: 0.2,
+ lineStroke: "#000000",
+ fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif",
+ fontSize: 13,
+ textFill: "#FFFFFF",
+ strokeOpacity: 1,
+ strokeWidth: 1,
+ strokeDasharray: "Solid",
+ };
+
+ public render() {
+ return (
+
+ );
+ }
+
+ private readonly drawOnCanvas = (ctx, moreProps) => {
+ const props = this.helper(this.props, moreProps);
+ drawOnCanvas(ctx, props);
+ }
+
+ private readonly renderSVG = (moreProps) => {
+ const props = this.helper(this.props, moreProps);
+ return renderSVG(props);
+ }
+
+ private readonly helper = (props, moreProps) => {
+ const { width } = moreProps;
+ const { chartConfig: { yScale } } = moreProps;
+ const [lowerYValue, upperYValue] = yScale.domain();
+
+ const { price, stroke, strokeDasharray, strokeOpacity, strokeWidth } = props;
+ const { orient, at, rectWidth, rectHeight, displayFormat, dx } = props;
+ const { fill, opacity, fontFamily, fontSize, textFill, arrowWidth, lineOpacity, lineStroke } = props;
+
+ const x1 = 0;
+ const x2 = width;
+ const edgeAt = (at === "right")
+ ? width
+ : 0;
+
+ const type = "horizontal";
+
+ const y = yScale(price);
+ const show = (price <= upperYValue && price >= lowerYValue);
+
+ const coordinate = displayFormat(yScale.invert(y));
+ const hideLine = false;
+
+ const coordinateProps = {
+ coordinate,
+ show,
+ type,
+ orient,
+ edgeAt,
+ hideLine,
+ lineOpacity,
+ lineStroke,
+ lineStrokeDasharray: strokeDasharray,
+ stroke,
+ strokeOpacity,
+ strokeWidth,
+ fill: functor(fill)(price),
+ textFill: functor(textFill)(price),
+ opacity, fontFamily, fontSize,
+ rectWidth,
+ rectHeight,
+ arrowWidth,
+ dx,
+ x1,
+ x2,
+ y1: y,
+ y2: y,
+ };
+ return coordinateProps;
+ }
+}
diff --git a/packages/react-financial-charts/src/coordinates/index.ts b/packages/react-financial-charts/src/coordinates/index.ts
new file mode 100644
index 000000000..b8e14d1c0
--- /dev/null
+++ b/packages/react-financial-charts/src/coordinates/index.ts
@@ -0,0 +1,8 @@
+export * from "./EdgeIndicator";
+export * from "./CurrentCoordinate";
+export * from "./MouseCoordinateX";
+export { MouseCoordinateXV2 } from "./MouseCoordinateXV2";
+
+export { MouseCoordinateY } from "./MouseCoordinateY";
+export * from "./CrossHairCursor";
+export * from "./PriceCoordinate";
diff --git a/packages/react-financial-charts/src/index.ts b/packages/react-financial-charts/src/index.ts
new file mode 100644
index 000000000..579ae713a
--- /dev/null
+++ b/packages/react-financial-charts/src/index.ts
@@ -0,0 +1,2 @@
+export { ChartCanvas } from "./ChartCanvas";
+export { Chart } from "./Chart";
diff --git a/packages/react-financial-charts/src/indicator/atr.ts b/packages/react-financial-charts/src/indicator/atr.ts
new file mode 100644
index 000000000..f56da489a
--- /dev/null
+++ b/packages/react-financial-charts/src/indicator/atr.ts
@@ -0,0 +1,33 @@
+import { atr } from "../calculator";
+import { merge, rebind } from "../utils";
+
+import baseIndicator from "./baseIndicator";
+
+const ALGORITHM_TYPE = "ATR";
+
+export default function () {
+
+ const base = baseIndicator()
+ .type(ALGORITHM_TYPE);
+
+ const underlyingAlgorithm = atr();
+
+ const mergedAlgorithm = merge()
+ .algorithm(underlyingAlgorithm)
+ // @ts-ignore
+ .merge((datum, i) => { datum.atr = i; });
+
+ const indicator = function (data, options = { merge: true }) {
+ if (options.merge) {
+ if (!base.accessor()) { throw new Error(`Set an accessor to ${ALGORITHM_TYPE} before calculating`); }
+ return mergedAlgorithm(data);
+ }
+ return underlyingAlgorithm(data);
+ };
+
+ rebind(indicator, base, "id", "accessor", "stroke", "fill", "echo", "type");
+ rebind(indicator, underlyingAlgorithm, "options");
+ rebind(indicator, mergedAlgorithm, "merge", "skipUndefined");
+
+ return indicator;
+}
diff --git a/packages/react-financial-charts/src/indicator/baseIndicator.ts b/packages/react-financial-charts/src/indicator/baseIndicator.ts
new file mode 100644
index 000000000..c606a5745
--- /dev/null
+++ b/packages/react-financial-charts/src/indicator/baseIndicator.ts
@@ -0,0 +1,49 @@
+import { overlayColors } from "../utils";
+
+let i = 0;
+
+export default function () {
+
+ let id = i++;
+ let accessor;
+ let stroke;
+ let fill;
+ let echo;
+ let type;
+
+ // tslint:disable-next-line: no-empty
+ function baseIndicator() {
+ }
+
+ baseIndicator.id = function (x) {
+ if (!arguments.length) { return id; }
+ id = x;
+ return baseIndicator;
+ };
+ baseIndicator.accessor = function (x) {
+ if (!arguments.length) { return accessor; }
+ accessor = x;
+ return baseIndicator;
+ };
+ baseIndicator.stroke = function (x) {
+ if (!arguments.length) { return !stroke ? stroke = overlayColors(id) : stroke; }
+ stroke = x;
+ return baseIndicator;
+ };
+ baseIndicator.fill = function (x) {
+ if (!arguments.length) { return !fill ? fill = overlayColors(id) : fill; }
+ fill = x;
+ return baseIndicator;
+ };
+ baseIndicator.echo = function (x) {
+ if (!arguments.length) { return echo; }
+ echo = x;
+ return baseIndicator;
+ };
+ baseIndicator.type = function (x) {
+ if (!arguments.length) { return type; }
+ type = x;
+ return baseIndicator;
+ };
+ return baseIndicator;
+}
diff --git a/packages/react-financial-charts/src/indicator/bollingerBand.ts b/packages/react-financial-charts/src/indicator/bollingerBand.ts
new file mode 100644
index 000000000..cb92ca79d
--- /dev/null
+++ b/packages/react-financial-charts/src/indicator/bollingerBand.ts
@@ -0,0 +1,33 @@
+import { merge, rebind } from "../utils";
+
+import { bollingerband } from "../calculator";
+import baseIndicator from "./baseIndicator";
+
+const ALGORITHM_TYPE = "BollingerBand";
+
+export default function () {
+
+ const base = baseIndicator()
+ .type(ALGORITHM_TYPE);
+
+ const underlyingAlgorithm = bollingerband();
+
+ const mergedAlgorithm = merge()
+ .algorithm(underlyingAlgorithm)
+ // @ts-ignore
+ .merge((datum, i) => { datum.bollingerBand = i; });
+
+ const indicator = function (data, options = { merge: true }) {
+ if (options.merge) {
+ if (!base.accessor()) { throw new Error(`Set an accessor to ${ALGORITHM_TYPE} before calculating`); }
+ return mergedAlgorithm(data);
+ }
+ return underlyingAlgorithm(data);
+ };
+
+ rebind(indicator, base, "id", "accessor", "stroke", "fill", "echo", "type");
+ rebind(indicator, underlyingAlgorithm, "options");
+ rebind(indicator, mergedAlgorithm, "merge", "skipUndefined");
+
+ return indicator;
+}
diff --git a/packages/react-financial-charts/src/indicator/change.ts b/packages/react-financial-charts/src/indicator/change.ts
new file mode 100644
index 000000000..bd54e35d1
--- /dev/null
+++ b/packages/react-financial-charts/src/indicator/change.ts
@@ -0,0 +1,35 @@
+import { merge, rebind } from "../utils";
+
+import { change } from "../calculator";
+
+import baseIndicator from "./baseIndicator";
+
+const ALGORITHM_TYPE = "Change";
+
+export default function () {
+
+ const base = baseIndicator()
+ .type(ALGORITHM_TYPE);
+
+ const underlyingAlgorithm = change();
+
+ const mergedAlgorithm = merge()
+ .algorithm(underlyingAlgorithm)
+ // @ts-ignore
+ .merge((datum, i) => {
+ datum.absoluteChange = i.absoluteChange;
+ datum.percentChange = i.percentChange;
+ });
+
+ const indicator = function (data, options = { merge: true }) {
+ if (options.merge) {
+ return mergedAlgorithm(data);
+ }
+ return underlyingAlgorithm(data);
+ };
+ rebind(indicator, base, "id", "accessor", "stroke", "fill", "echo", "type");
+ rebind(indicator, underlyingAlgorithm, "options");
+ rebind(indicator, mergedAlgorithm, "merge", "skipUndefined");
+
+ return indicator;
+}
diff --git a/packages/react-financial-charts/src/indicator/compare.ts b/packages/react-financial-charts/src/indicator/compare.ts
new file mode 100644
index 000000000..f019efcff
--- /dev/null
+++ b/packages/react-financial-charts/src/indicator/compare.ts
@@ -0,0 +1,36 @@
+
+import { merge, rebind } from "../utils";
+
+import { compare } from "../calculator";
+
+import baseIndicator from "./baseIndicator";
+
+const ALGORITHM_TYPE = "Compare";
+
+export default function () {
+
+ const base = baseIndicator()
+ .type(ALGORITHM_TYPE)
+ .accessor((d) => d.compare);
+
+ const underlyingAlgorithm = compare();
+
+ const mergedAlgorithm = merge()
+ .algorithm(underlyingAlgorithm)
+ // @ts-ignore
+ .merge((datum, i) => { datum.compare = i; });
+
+ const indicator = function (data, options = { merge: true }) {
+ if (options.merge) {
+ if (!base.accessor()) { throw new Error(`Set an accessor to ${ALGORITHM_TYPE} before calculating`); }
+ return mergedAlgorithm(data);
+ }
+ return underlyingAlgorithm(data);
+ };
+
+ rebind(indicator, base, "id", "accessor", "stroke", "fill", "echo", "type");
+ rebind(indicator, underlyingAlgorithm, "options");
+ rebind(indicator, mergedAlgorithm, "merge");
+
+ return indicator;
+}
diff --git a/packages/react-financial-charts/src/indicator/defaultOptionsForAppearance.ts b/packages/react-financial-charts/src/indicator/defaultOptionsForAppearance.ts
new file mode 100644
index 000000000..852039a38
--- /dev/null
+++ b/packages/react-financial-charts/src/indicator/defaultOptionsForAppearance.ts
@@ -0,0 +1,77 @@
+export const themes = {
+ light: {
+ BollingerBand: {
+ stroke: {
+ top: "#964B00",
+ middle: "#000000",
+ bottom: "#964B00",
+ },
+ fill: "#4682B4",
+ },
+ ElderImpulse: {
+ stroke: {
+ up: "#6BA583",
+ down: "#FF0000",
+ neutral: "#0000FF",
+ },
+ },
+ MACD: {
+ fill: {
+ divergence: "#4682B4",
+ },
+ stroke: {
+ macd: "#FF0000",
+ signal: "#00F300",
+ },
+ },
+ FullStochasticOscillator: {
+ stroke: {
+ top: "#37a600",
+ middle: "#b8ab00",
+ bottom: "#37a600",
+ dLine: "#17becf",
+ kLine: "#ff7f0e",
+ },
+ },
+ },
+ dark: {
+ BollingerBand: {
+ stroke: {
+ top: "#964B00",
+ middle: "#FF6600",
+ bottom: "#964B00",
+ },
+ fill: "#4682B4",
+ },
+ ElderImpulse: {
+ stroke: {
+ up: "#6BA583",
+ down: "#FF0000",
+ neutral: "#0000FF",
+ },
+ },
+ MACD: {
+ fill: {
+ divergence: "#FF6600",
+ },
+ stroke: {
+ macd: "#ea2bff",
+ signal: "#74d400",
+ },
+ },
+ FullStochasticOscillator: {
+ stroke: {
+ top: "#37a600",
+ middle: "#b8ab00",
+ bottom: "#37a600",
+ dLine: "#ea2bff",
+ kLine: "#74d400",
+ },
+ },
+ },
+};
+
+export const BollingerBand = themes.light.BollingerBand;
+export const ElderImpulse = themes.light.ElderImpulse;
+export const MACD = themes.light.MACD;
+export const FullStochasticOscillator = themes.light.FullStochasticOscillator;
diff --git a/packages/react-financial-charts/src/indicator/elderImpulse.ts b/packages/react-financial-charts/src/indicator/elderImpulse.ts
new file mode 100644
index 000000000..b3f6ec3bf
--- /dev/null
+++ b/packages/react-financial-charts/src/indicator/elderImpulse.ts
@@ -0,0 +1,68 @@
+import { isDefined, isNotDefined, merge, rebind, slidingWindow } from "../utils";
+
+import baseIndicator from "./baseIndicator";
+import { ElderImpulse as appearanceOptions } from "./defaultOptionsForAppearance";
+
+const ALGORITHM_TYPE = "ElderImpulse";
+
+export default function () {
+
+ let macdSource;
+ let emaSource;
+
+ const base = baseIndicator()
+ .type(ALGORITHM_TYPE)
+ .stroke(appearanceOptions.stroke)
+ .fill(undefined);
+
+ const underlyingAlgorithm = slidingWindow()
+ .windowSize(2)
+ // @ts-ignore
+ .undefinedValue("neutral")
+ .accumulator(([prev, curr]) => {
+ if (isNotDefined(macdSource)) { throw new Error(`macdSource not defined for ${ALGORITHM_TYPE} calculator`); }
+ if (isNotDefined(emaSource)) { throw new Error(`emaSource not defined for ${ALGORITHM_TYPE} calculator`); }
+
+ if (isDefined(macdSource(prev)) && isDefined(emaSource(prev))) {
+ const prevMACDDivergence = macdSource(prev).divergence;
+ const currMACDDivergence = macdSource(curr).divergence;
+
+ const prevEMA = emaSource(prev);
+ const currEMA = emaSource(curr);
+
+ if (currMACDDivergence >= prevMACDDivergence
+ && currEMA >= prevEMA) { return "up"; }
+
+ if (currMACDDivergence <= prevMACDDivergence
+ && currEMA <= prevEMA) { return "down"; }
+ }
+ return "neutral";
+ });
+
+ const mergedAlgorithm = merge()
+ .algorithm(underlyingAlgorithm)
+ // @ts-ignore
+ .merge((datum, i) => { datum.elderImpulse = i; });
+
+ const indicator = function (data, options = { merge: true }) {
+ const newData = options.merge
+ ? mergedAlgorithm(data)
+ : underlyingAlgorithm(data);
+
+ return newData;
+ };
+ indicator.macdSource = function (x) {
+ if (!arguments.length) { return macdSource; }
+ macdSource = x;
+ return indicator;
+ };
+ indicator.emaSource = function (x) {
+ if (!arguments.length) { return emaSource; }
+ emaSource = x;
+ return indicator;
+ };
+ rebind(indicator, base, "id", "echo", "type", "stroke");
+ rebind(indicator, mergedAlgorithm, "merge", "skipUndefined");
+
+ return indicator;
+}
diff --git a/packages/react-financial-charts/src/indicator/elderRay.ts b/packages/react-financial-charts/src/indicator/elderRay.ts
new file mode 100644
index 000000000..da9555642
--- /dev/null
+++ b/packages/react-financial-charts/src/indicator/elderRay.ts
@@ -0,0 +1,34 @@
+import { elderRay } from "../calculator";
+import { merge, rebind } from "../utils";
+
+import baseIndicator from "./baseIndicator";
+
+const ALGORITHM_TYPE = "ElderRay";
+
+export default function () {
+
+ const base = baseIndicator()
+ .type(ALGORITHM_TYPE)
+ .accessor((d) => d.elderRay);
+
+ const underlyingAlgorithm = elderRay();
+
+ const mergedAlgorithm = merge()
+ .algorithm(underlyingAlgorithm)
+ // @ts-ignore
+ .merge((datum, i) => { datum.elderRay = i; });
+
+ const indicator = function (data, options = { merge: true }) {
+ if (options.merge) {
+ if (!base.accessor()) { throw new Error(`Set an accessor to ${ALGORITHM_TYPE} before calculating`); }
+ return mergedAlgorithm(data);
+ }
+ return underlyingAlgorithm(data);
+ };
+
+ rebind(indicator, base, "id", "accessor", "stroke", "fill", "echo", "type");
+ rebind(indicator, underlyingAlgorithm, "options");
+ rebind(indicator, mergedAlgorithm, "merge", "skipUndefined");
+
+ return indicator;
+}
diff --git a/packages/react-financial-charts/src/indicator/ema.ts b/packages/react-financial-charts/src/indicator/ema.ts
new file mode 100644
index 000000000..66110731e
--- /dev/null
+++ b/packages/react-financial-charts/src/indicator/ema.ts
@@ -0,0 +1,34 @@
+import { merge, rebind } from "../utils";
+
+import { ema } from "../calculator";
+import baseIndicator from "./baseIndicator";
+
+const ALGORITHM_TYPE = "EMA";
+
+export default function () {
+
+ const base = baseIndicator()
+ .type(ALGORITHM_TYPE)
+ .accessor((d) => d.ema);
+
+ const underlyingAlgorithm = ema();
+
+ const mergedAlgorithm = merge()
+ .algorithm(underlyingAlgorithm)
+ // @ts-ignore
+ .merge((datum, i) => { datum.ema = i; });
+
+ const indicator = function (data, options = { merge: true }) {
+ if (options.merge) {
+ if (!base.accessor()) { throw new Error(`Set an accessor to ${ALGORITHM_TYPE} before calculating`); }
+ return mergedAlgorithm(data);
+ }
+ return underlyingAlgorithm(data);
+ };
+
+ rebind(indicator, base, "id", "accessor", "stroke", "fill", "echo", "type");
+ rebind(indicator, underlyingAlgorithm, "options", "undefinedLength");
+ rebind(indicator, mergedAlgorithm, "merge", "skipUndefined");
+
+ return indicator;
+}
diff --git a/packages/react-financial-charts/src/indicator/forceIndex.ts b/packages/react-financial-charts/src/indicator/forceIndex.ts
new file mode 100644
index 000000000..0023410c6
--- /dev/null
+++ b/packages/react-financial-charts/src/indicator/forceIndex.ts
@@ -0,0 +1,35 @@
+import { merge, rebind } from "../utils";
+
+import { forceIndex } from "../calculator";
+
+import baseIndicator from "./baseIndicator";
+
+const ALGORITHM_TYPE = "ForceIndex";
+
+export default function () {
+
+ const base = baseIndicator()
+ .type(ALGORITHM_TYPE)
+ .accessor((d) => d.forceIndex);
+
+ const underlyingAlgorithm = forceIndex();
+
+ const mergedAlgorithm = merge()
+ .algorithm(underlyingAlgorithm)
+ // @ts-ignore
+ .merge((datum, i) => { datum.forceIndex = i; });
+
+ const indicator = function (data, options = { merge: true }) {
+ if (options.merge) {
+ if (!base.accessor()) { throw new Error(`Set an accessor to ${ALGORITHM_TYPE} before calculating`); }
+ return mergedAlgorithm(data);
+ }
+ return underlyingAlgorithm(data);
+ };
+
+ rebind(indicator, base, "id", "accessor", "stroke", "fill", "echo", "type");
+ rebind(indicator, underlyingAlgorithm, "options");
+ rebind(indicator, mergedAlgorithm, "merge", "skipUndefined");
+
+ return indicator;
+}
diff --git a/packages/react-financial-charts/src/indicator/heikinAshi.ts b/packages/react-financial-charts/src/indicator/heikinAshi.ts
new file mode 100644
index 000000000..dd2c1c748
--- /dev/null
+++ b/packages/react-financial-charts/src/indicator/heikinAshi.ts
@@ -0,0 +1,35 @@
+import { heikinAshi } from "../calculator";
+import baseIndicator from "./baseIndicator";
+
+import { merge, rebind } from "../utils";
+
+const ALGORITHM_TYPE = "HeikinAshi";
+
+export default function () {
+
+ const base = baseIndicator()
+ .type(ALGORITHM_TYPE)
+ .accessor((d) => d.ha);
+
+ const underlyingAlgorithm = heikinAshi();
+
+ const mergedAlgorithm = merge()
+ .algorithm(underlyingAlgorithm)
+ // @ts-ignore
+ .merge((datum, i) => {
+ return { ...datum, ...i };
+ });
+
+ const indicator = function (data, options = { merge: true }) {
+ if (options.merge) {
+ if (!base.accessor()) { throw new Error(`Set an accessor to ${ALGORITHM_TYPE} before calculating`); }
+ return mergedAlgorithm(data);
+ }
+ return underlyingAlgorithm(data);
+ };
+
+ rebind(indicator, base, "accessor", "stroke", "fill", "echo", "type");
+ rebind(indicator, mergedAlgorithm, "merge");
+
+ return indicator;
+}
diff --git a/packages/react-financial-charts/src/indicator/index.ts b/packages/react-financial-charts/src/indicator/index.ts
new file mode 100644
index 000000000..3b98b7b01
--- /dev/null
+++ b/packages/react-financial-charts/src/indicator/index.ts
@@ -0,0 +1,27 @@
+export { default as ema } from "./ema";
+export { default as sma } from "./sma";
+export { default as wma } from "./wma";
+export { default as tma } from "./tma";
+export { default as bollingerBand } from "./bollingerBand";
+export { default as heikinAshi } from "./heikinAshi";
+export { default as kagi } from "./kagi";
+export { default as pointAndFigure } from "./pointAndFigure";
+export { default as renko } from "./renko";
+export { default as macd } from "./macd";
+export { default as rsi } from "./rsi";
+export { default as atr } from "./atr";
+export { default as stochasticOscillator } from "./stochasticOscillator";
+export { default as forceIndex } from "./forceIndex";
+export { default as sar } from "./sar";
+export { default as elderRay } from "./elderRay";
+export { default as change } from "./change";
+export { default as elderImpulse } from "./elderImpulse";
+export { default as compare } from "./compare";
+
+import * as defaultOptionsForComputation from "../calculator/defaultOptionsForComputation";
+import * as defaultOptionsForAppearance from "./defaultOptionsForAppearance";
+
+export {
+ defaultOptionsForComputation,
+ defaultOptionsForAppearance
+};
diff --git a/packages/react-financial-charts/src/indicator/kagi.ts b/packages/react-financial-charts/src/indicator/kagi.ts
new file mode 100644
index 000000000..3fccdf801
--- /dev/null
+++ b/packages/react-financial-charts/src/indicator/kagi.ts
@@ -0,0 +1,22 @@
+import { rebind } from "../utils";
+
+import { kagi } from "../calculator";
+import baseIndicator from "./baseIndicator";
+
+const ALGORITHM_TYPE = "Kagi";
+
+export default function () {
+
+ const base = baseIndicator()
+ .type(ALGORITHM_TYPE);
+
+ const underlyingAlgorithm = kagi();
+
+ const indicator = underlyingAlgorithm;
+
+ rebind(indicator, base, "id", "stroke", "fill", "echo", "type");
+ rebind(indicator, underlyingAlgorithm, "dateAccessor", "dateMutator");
+ rebind(indicator, underlyingAlgorithm, "options");
+
+ return indicator;
+}
diff --git a/packages/react-financial-charts/src/indicator/macd.ts b/packages/react-financial-charts/src/indicator/macd.ts
new file mode 100644
index 000000000..33995e182
--- /dev/null
+++ b/packages/react-financial-charts/src/indicator/macd.ts
@@ -0,0 +1,38 @@
+import { merge, rebind } from "../utils";
+
+import { macd } from "../calculator";
+
+import baseIndicator from "./baseIndicator";
+import { MACD as appearanceOptions } from "./defaultOptionsForAppearance";
+
+const ALGORITHM_TYPE = "MACD";
+
+export default function () {
+
+ const base = baseIndicator()
+ .type(ALGORITHM_TYPE)
+ .fill(appearanceOptions.fill)
+ .stroke(appearanceOptions.stroke)
+ .accessor((d) => d.macd);
+
+ const underlyingAlgorithm = macd();
+
+ const mergedAlgorithm = merge()
+ .algorithm(underlyingAlgorithm)
+ // @ts-ignore
+ .merge((datum, i) => { datum.macd = i; });
+
+ const indicator = function (data, options = { merge: true }) {
+ if (options.merge) {
+ if (!base.accessor()) { throw new Error(`Set an accessor to ${ALGORITHM_TYPE} before calculating`); }
+ return mergedAlgorithm(data);
+ }
+ return underlyingAlgorithm(data);
+ };
+
+ rebind(indicator, base, "id", "accessor", "stroke", "fill", "echo", "type");
+ rebind(indicator, underlyingAlgorithm, "options", "undefinedLength");
+ rebind(indicator, mergedAlgorithm, "merge", "skipUndefined");
+
+ return indicator;
+}
diff --git a/packages/react-financial-charts/src/indicator/pointAndFigure.ts b/packages/react-financial-charts/src/indicator/pointAndFigure.ts
new file mode 100644
index 000000000..673f13956
--- /dev/null
+++ b/packages/react-financial-charts/src/indicator/pointAndFigure.ts
@@ -0,0 +1,22 @@
+import { rebind } from "../utils";
+
+import { pointAndFigure } from "../calculator";
+import baseIndicator from "./baseIndicator";
+
+const ALGORITHM_TYPE = "PointAndFigure";
+
+export default function () {
+
+ const base = baseIndicator()
+ .type(ALGORITHM_TYPE);
+
+ const underlyingAlgorithm = pointAndFigure();
+
+ const indicator = underlyingAlgorithm;
+
+ rebind(indicator, base, "id", "stroke", "fill", "echo", "type");
+ rebind(indicator, underlyingAlgorithm, "dateAccessor", "dateMutator");
+ rebind(indicator, underlyingAlgorithm, "options");
+
+ return indicator;
+}
diff --git a/packages/react-financial-charts/src/indicator/renko.ts b/packages/react-financial-charts/src/indicator/renko.ts
new file mode 100644
index 000000000..27208b8f1
--- /dev/null
+++ b/packages/react-financial-charts/src/indicator/renko.ts
@@ -0,0 +1,22 @@
+import { rebind } from "../utils";
+
+import { renko } from "../calculator";
+import baseIndicator from "./baseIndicator";
+
+const ALGORITHM_TYPE = "Renko";
+
+export default function () {
+
+ const base = baseIndicator()
+ .type(ALGORITHM_TYPE);
+
+ const underlyingAlgorithm = renko();
+
+ const indicator = underlyingAlgorithm;
+
+ rebind(indicator, base, "id", "stroke", "fill", "echo", "type");
+ rebind(indicator, underlyingAlgorithm, "dateAccessor", "dateMutator");
+ rebind(indicator, underlyingAlgorithm, "options");
+
+ return indicator;
+}
diff --git a/packages/react-financial-charts/src/indicator/rsi.ts b/packages/react-financial-charts/src/indicator/rsi.ts
new file mode 100644
index 000000000..889490892
--- /dev/null
+++ b/packages/react-financial-charts/src/indicator/rsi.ts
@@ -0,0 +1,34 @@
+import { merge, rebind } from "../utils";
+
+import { rsi } from "../calculator";
+
+import baseIndicator from "./baseIndicator";
+
+const ALGORITHM_TYPE = "RSI";
+
+export default function () {
+ const base = baseIndicator()
+ .type(ALGORITHM_TYPE)
+ .accessor((d) => d.rsi);
+
+ const underlyingAlgorithm = rsi();
+
+ const mergedAlgorithm = merge()
+ .algorithm(underlyingAlgorithm)
+ // @ts-ignore
+ .merge((datum, i) => { datum.rsi = i; });
+
+ const indicator = function (data, options = { merge: true }) {
+ if (options.merge) {
+ if (!base.accessor()) { throw new Error(`Set an accessor to ${ALGORITHM_TYPE} before calculating`); }
+ return mergedAlgorithm(data);
+ }
+ return underlyingAlgorithm(data);
+ };
+
+ rebind(indicator, base, "id", "accessor", "stroke", "fill", "echo", "type");
+ rebind(indicator, underlyingAlgorithm, "options", "undefinedLength");
+ rebind(indicator, mergedAlgorithm, "merge", "skipUndefined");
+
+ return indicator;
+}
diff --git a/packages/react-financial-charts/src/indicator/sar.ts b/packages/react-financial-charts/src/indicator/sar.ts
new file mode 100644
index 000000000..f438b80c3
--- /dev/null
+++ b/packages/react-financial-charts/src/indicator/sar.ts
@@ -0,0 +1,36 @@
+import { merge, rebind } from "../utils";
+
+import { sar } from "../calculator";
+
+import baseIndicator from "./baseIndicator";
+
+const ALGORITHM_TYPE = "SMA";
+
+export default function () {
+
+ const base = baseIndicator()
+ .type(ALGORITHM_TYPE)
+ .accessor((d) => d.sar);
+
+ const underlyingAlgorithm = sar();
+
+ const mergedAlgorithm = merge()
+ .algorithm(underlyingAlgorithm)
+ // @ts-ignore
+ .merge((datum, i) => { datum.sar = i; });
+
+ const indicator = function (data, options = { merge: true }) {
+ if (options.merge) {
+ if (!base.accessor()) { throw new Error(`Set an accessor to ${ALGORITHM_TYPE} before calculating`); }
+ return mergedAlgorithm(data);
+ }
+ return underlyingAlgorithm(data);
+ };
+
+ rebind(indicator, base, "id", "accessor", "stroke", "echo", "type");
+ rebind(indicator, underlyingAlgorithm, "undefinedLength");
+ rebind(indicator, underlyingAlgorithm, "options");
+ rebind(indicator, mergedAlgorithm, "merge");
+
+ return indicator;
+}
diff --git a/packages/react-financial-charts/src/indicator/sma.ts b/packages/react-financial-charts/src/indicator/sma.ts
new file mode 100644
index 000000000..a4b1fda15
--- /dev/null
+++ b/packages/react-financial-charts/src/indicator/sma.ts
@@ -0,0 +1,34 @@
+import { merge, rebind } from "../utils";
+
+import { sma } from "../calculator";
+import baseIndicator from "./baseIndicator";
+
+const ALGORITHM_TYPE = "SMA";
+
+export default function () {
+
+ const base = baseIndicator()
+ .type(ALGORITHM_TYPE)
+ .accessor((d) => d.sma);
+
+ const underlyingAlgorithm = sma();
+
+ const mergedAlgorithm = merge()
+ .algorithm(underlyingAlgorithm)
+ // @ts-ignore
+ .merge((datum, i) => { datum.sma = i; });
+
+ const indicator = function (data, options = { merge: true }) {
+ if (options.merge) {
+ if (!base.accessor()) { throw new Error(`Set an accessor to ${ALGORITHM_TYPE} before calculating`); }
+ return mergedAlgorithm(data);
+ }
+ return underlyingAlgorithm(data);
+ };
+ rebind(indicator, base, "id", "accessor", "stroke", "fill", "echo", "type");
+ rebind(indicator, underlyingAlgorithm, "undefinedLength");
+ rebind(indicator, underlyingAlgorithm, "options");
+ rebind(indicator, mergedAlgorithm, "merge", "skipUndefined");
+
+ return indicator;
+}
diff --git a/packages/react-financial-charts/src/indicator/stochasticOscillator.ts b/packages/react-financial-charts/src/indicator/stochasticOscillator.ts
new file mode 100644
index 000000000..036dc7ef7
--- /dev/null
+++ b/packages/react-financial-charts/src/indicator/stochasticOscillator.ts
@@ -0,0 +1,33 @@
+import { merge, rebind } from "../utils";
+
+import { sto } from "../calculator";
+
+import baseIndicator from "./baseIndicator";
+
+const ALGORITHM_TYPE = "STO";
+
+export default function () {
+ const base = baseIndicator()
+ .type(ALGORITHM_TYPE);
+
+ const underlyingAlgorithm = sto();
+
+ const mergedAlgorithm = merge()
+ .algorithm(underlyingAlgorithm)
+ // @ts-ignore
+ .merge((datum, i) => { datum.sto = i; });
+
+ const indicator = function (data, options = { merge: true }) {
+ if (options.merge) {
+ if (!base.accessor()) { throw new Error(`Set an accessor to ${ALGORITHM_TYPE} before calculating`); }
+ return mergedAlgorithm(data);
+ }
+ return underlyingAlgorithm(data);
+ };
+
+ rebind(indicator, base, "id", "accessor", "stroke", "fill", "echo", "type");
+ rebind(indicator, underlyingAlgorithm, "options", "undefinedLength");
+ rebind(indicator, mergedAlgorithm, "merge", "skipUndefined");
+
+ return indicator;
+}
diff --git a/packages/react-financial-charts/src/indicator/tma.ts b/packages/react-financial-charts/src/indicator/tma.ts
new file mode 100644
index 000000000..e7d14575e
--- /dev/null
+++ b/packages/react-financial-charts/src/indicator/tma.ts
@@ -0,0 +1,35 @@
+import { merge, rebind } from "../utils";
+
+import { tma } from "../calculator";
+
+import baseIndicator from "./baseIndicator";
+
+const ALGORITHM_TYPE = "TMA";
+
+export default function () {
+
+ const base = baseIndicator()
+ .type(ALGORITHM_TYPE)
+ .accessor((d) => d.tma);
+
+ const underlyingAlgorithm = tma();
+
+ const mergedAlgorithm = merge()
+ .algorithm(underlyingAlgorithm)
+ // @ts-ignore
+ .merge((datum, i) => { datum.tma = i; });
+
+ const indicator = function (data, options = { merge: true }) {
+ if (options.merge) {
+ if (!base.accessor()) { throw new Error(`Set an accessor to ${ALGORITHM_TYPE} before calculating`); }
+ return mergedAlgorithm(data);
+ }
+ return underlyingAlgorithm(data);
+ };
+ rebind(indicator, base, "id", "accessor", "stroke", "fill", "echo", "type");
+ rebind(indicator, underlyingAlgorithm, "undefinedLength");
+ rebind(indicator, underlyingAlgorithm, "options");
+ rebind(indicator, mergedAlgorithm, "merge", "skipUndefined");
+
+ return indicator;
+}
diff --git a/packages/react-financial-charts/src/indicator/wma.ts b/packages/react-financial-charts/src/indicator/wma.ts
new file mode 100644
index 000000000..9d531897d
--- /dev/null
+++ b/packages/react-financial-charts/src/indicator/wma.ts
@@ -0,0 +1,36 @@
+import { merge, rebind } from "../utils";
+
+import { wma } from "../calculator";
+
+import baseIndicator from "./baseIndicator";
+
+const ALGORITHM_TYPE = "WMA";
+
+export default function () {
+
+ const base = baseIndicator()
+ .type(ALGORITHM_TYPE)
+ .accessor((d) => d.wma);
+
+ const underlyingAlgorithm = wma();
+
+ const mergedAlgorithm = merge()
+ .algorithm(underlyingAlgorithm)
+ // @ts-ignore
+ .merge((datum, i) => { datum.wma = i; });
+
+ const indicator = function (data, options = { merge: true }) {
+ if (options.merge) {
+ if (!base.accessor()) { throw new Error(`Set an accessor to ${ALGORITHM_TYPE} before calculating`); }
+ return mergedAlgorithm(data);
+ }
+ return underlyingAlgorithm(data);
+ };
+
+ rebind(indicator, base, "id", "accessor", "stroke", "fill", "echo", "type");
+ rebind(indicator, underlyingAlgorithm, "undefinedLength");
+ rebind(indicator, underlyingAlgorithm, "options");
+ rebind(indicator, mergedAlgorithm, "merge", "skipUndefined");
+
+ return indicator;
+}
diff --git a/packages/react-financial-charts/src/interactive/Brush.tsx b/packages/react-financial-charts/src/interactive/Brush.tsx
new file mode 100644
index 000000000..d15376317
--- /dev/null
+++ b/packages/react-financial-charts/src/interactive/Brush.tsx
@@ -0,0 +1,207 @@
+import * as React from "react";
+
+import GenericChartComponent from "../GenericChartComponent";
+import { getMouseCanvas } from "../GenericComponent";
+import {
+ getStrokeDasharray,
+ hexToRGBA,
+ isDefined,
+ noop,
+} from "../utils";
+
+interface BrushProps {
+ enabled: boolean;
+ onStart: any; // func
+ onBrush: any; // func
+ type?: "1D" | "2D";
+ stroke?: string;
+ fill?: string;
+ strokeOpacity?: number;
+ fillOpacity?: number;
+ interactiveState: object;
+ strokeDashArray?: string;
+}
+
+interface BrushState {
+ end?: any;
+ rect: any | null;
+ selected?: boolean;
+ start?: any;
+ x1y1?: any;
+}
+
+export class Brush extends React.Component {
+
+ public static defaultProps = {
+ type: "2D",
+ stroke: "#000000",
+ fillOpacity: 0.3,
+ strokeOpacity: 1,
+ fill: "#3h3h3h",
+ onBrush: noop,
+ onStart: noop,
+ strokeDashArray: "ShortDash",
+ };
+
+ private zoomHappening?: boolean;
+
+ constructor(props: BrushProps, context) {
+ super(props, context);
+
+ this.terminate = this.terminate.bind(this);
+ this.state = {
+ rect: null,
+ };
+ }
+
+ public terminate() {
+ this.zoomHappening = false;
+ this.setState({
+ x1y1: null,
+ start: null,
+ end: null,
+ rect: null,
+ });
+ }
+
+ public render() {
+ const { enabled } = this.props;
+ if (!enabled) {
+ return null;
+ }
+
+ return (
+
+ );
+ }
+
+ private readonly drawOnCanvas = (ctx) => {
+ const { rect } = this.state;
+ if (isDefined(rect)) {
+ const { x, y, height, width } = rect;
+ const { stroke, fill, strokeDashArray } = this.props;
+ const { strokeOpacity, fillOpacity } = this.props;
+
+ const dashArray = getStrokeDasharray(strokeDashArray)
+ .split(",")
+ .map((d) => +d);
+
+ ctx.strokeStyle = hexToRGBA(stroke, strokeOpacity);
+ ctx.fillStyle = hexToRGBA(fill, fillOpacity);
+ ctx.setLineDash(dashArray);
+ ctx.beginPath();
+ ctx.fillRect(x, y, width, height);
+ ctx.strokeRect(x, y, width, height);
+ }
+ }
+
+ private readonly handleZoomStart = (moreProps) => {
+ this.zoomHappening = false;
+ const {
+ mouseXY: [, mouseY],
+ currentItem,
+ chartConfig: { yScale },
+ xAccessor,
+ xScale,
+ } = moreProps;
+
+ const x1y1 = [
+ xScale(xAccessor(currentItem)),
+ mouseY,
+ ];
+
+ this.setState({
+ selected: true,
+ x1y1,
+ start: {
+ item: currentItem,
+ xValue: xAccessor(currentItem),
+ yValue: yScale.invert(mouseY),
+ },
+ });
+ }
+
+ private readonly handleDrawSquare = (moreProps) => {
+ if (this.state.x1y1 == null) { return; }
+
+ this.zoomHappening = true;
+
+ const {
+ mouseXY: [, mouseY],
+ currentItem,
+ chartConfig: { yScale },
+ xAccessor,
+ xScale,
+ } = moreProps;
+
+ const [x2, y2] = [
+ xScale(xAccessor(currentItem)),
+ mouseY,
+ ];
+
+ const { x1y1: [x1, y1] } = this.state;
+
+ const x = Math.min(x1, x2);
+ const y = Math.min(y1, y2);
+ const height = Math.abs(y2 - y1);
+ const width = Math.abs(x2 - x1);
+
+ this.setState({
+ selected: true,
+ end: {
+ item: currentItem,
+ xValue: xAccessor(currentItem),
+ yValue: yScale.invert(mouseY),
+ },
+ rect: {
+ x, y, height, width,
+ },
+ });
+ }
+
+ private readonly handleZoomComplete = (moreProps) => {
+ if (this.zoomHappening) {
+ const { onBrush } = this.props;
+ const { start, end } = this.state;
+ onBrush({ start, end }, moreProps);
+ }
+ this.setState({
+ selected: false,
+ rect: null,
+ });
+ }
+
+ private readonly renderSVG = () => {
+ const { rect } = this.state;
+ if (isDefined(rect)) {
+ const { x, y, height, width } = rect;
+ const { stroke, strokeDashArray } = this.props;
+ const { strokeOpacity, fillOpacity } = this.props;
+
+ const dashArray = getStrokeDasharray(strokeDashArray);
+
+ return (
+
+ );
+ }
+ }
+}
diff --git a/packages/react-financial-charts/src/interactive/ClickCallback.tsx b/packages/react-financial-charts/src/interactive/ClickCallback.tsx
new file mode 100644
index 000000000..bad4bc82c
--- /dev/null
+++ b/packages/react-financial-charts/src/interactive/ClickCallback.tsx
@@ -0,0 +1,51 @@
+import * as React from "react";
+
+import GenericChartComponent from "../GenericChartComponent";
+import { getMouseCanvas } from "../GenericComponent";
+import { noop } from "../utils";
+
+interface ClickCallbackProps {
+ disablePan: boolean;
+ onMouseDown?: any; // func
+ onClick?: any; // func
+ onDoubleClick?: any; // func
+ onContextMenu?: any; // func
+ onMouseMove?: any; // func
+ onPan?: any; // func
+ onPanEnd?: any; // func
+}
+
+export class ClickCallback extends React.Component {
+
+ public static defaultProps = {
+ disablePan: false,
+ };
+
+ public render() {
+ const {
+ onMouseDown,
+ onClick,
+ onDoubleClick,
+ onContextMenu,
+ onMouseMove,
+ onPan,
+ onPanEnd,
+ } = this.props;
+
+ return (
+
+ );
+ }
+}
diff --git a/packages/react-financial-charts/src/interactive/DrawingObjectSelector.tsx b/packages/react-financial-charts/src/interactive/DrawingObjectSelector.tsx
new file mode 100644
index 000000000..29bf0f6c5
--- /dev/null
+++ b/packages/react-financial-charts/src/interactive/DrawingObjectSelector.tsx
@@ -0,0 +1,105 @@
+import * as React from "react";
+import { head, isDefined, mapObject, noop } from "../utils";
+import { getMorePropsForChart, getSelected } from "./utils";
+
+import GenericComponent, { getMouseCanvas } from "../GenericComponent";
+
+interface DrawingObjectSelectorProps {
+ readonly getInteractiveNodes: any; // func
+ readonly onSelect: any; // func
+ readonly onDoubleClick: any; // func
+ readonly drawingObjectMap: object;
+ readonly enabled: boolean;
+}
+
+export class DrawingObjectSelector extends React.Component {
+
+ public static defaultProps = {
+ enabled: true,
+ onDoubleClick: noop,
+ };
+
+ public render() {
+ return (
+
+ );
+ }
+
+ private readonly getInteraction = (moreProps) => {
+ const { getInteractiveNodes, drawingObjectMap } = this.props;
+ const interactiveNodes = getInteractiveNodes();
+ const interactives = mapObject(interactiveNodes, (each) => {
+ const key = drawingObjectMap[each.type];
+
+ const valueArray = isDefined(key)
+ ? each.node.props[key]
+ : undefined;
+
+ const valuePresent = isDefined(valueArray)
+ && Array.isArray(valueArray)
+ && valueArray.length > 0;
+ if (valuePresent) {
+ // console.log("Value present for ", each.type, each.chartId);
+ const morePropsForChart = getMorePropsForChart(
+ moreProps, each.chartId,
+ );
+
+ const objects = each.node.getSelectionState(morePropsForChart);
+
+ return {
+ type: each.type,
+ chartId: each.chartId,
+ objects,
+ };
+ }
+ return {
+ type: each.type,
+ chartId: each.chartId,
+ objects: [],
+ };
+ });
+
+ return interactives;
+ }
+
+ private readonly handleClick = (moreProps, e) => {
+ e.preventDefault();
+ const { onSelect } = this.props;
+ const { enabled } = this.props;
+ if (!enabled) { return; }
+
+ const interactives = this.getInteraction(moreProps);
+
+ onSelect(interactives, moreProps);
+ }
+
+ private readonly handleDoubleClick = (moreProps, e) => {
+ e.preventDefault();
+ const { onDoubleClick } = this.props;
+ const { enabled } = this.props;
+ if (!enabled) { return; }
+
+ const interactives = this.getInteraction(moreProps);
+ const allSelected = getSelected(interactives);
+
+ if (allSelected.length > 0) {
+ const selected = head(allSelected);
+ const item = {
+ type: selected.type,
+ chartId: selected.chartId,
+ object: head(selected.objects),
+ };
+ const morePropsForChart = getMorePropsForChart(
+ moreProps, selected.chartId,
+ );
+ onDoubleClick(item, morePropsForChart);
+ }
+ }
+}
diff --git a/packages/react-financial-charts/src/interactive/EquidistantChannel.tsx b/packages/react-financial-charts/src/interactive/EquidistantChannel.tsx
new file mode 100644
index 000000000..11bacfec4
--- /dev/null
+++ b/packages/react-financial-charts/src/interactive/EquidistantChannel.tsx
@@ -0,0 +1,254 @@
+import * as React from "react";
+
+import { isDefined, isNotDefined, noop } from "../utils";
+import { HoverTextNearMouse } from "./components/HoverTextNearMouse";
+import { MouseLocationIndicator } from "./components/MouseLocationIndicator";
+import { getSlope, getYIntercept } from "./components/StraightLine";
+import {
+ isHoverForInteractiveType,
+ saveNodeType,
+ terminate,
+} from "./utils";
+import { EachEquidistantChannel } from "./wrapper/EachEquidistantChannel";
+
+interface EquidistantChannelProps {
+ enabled: boolean;
+ onStart: any; // func
+ onComplete: any; // func
+ onSelect: any; // func
+ currentPositionStroke?: string;
+ currentPositionStrokeWidth?: number;
+ currentPositionOpacity?: number;
+ currentPositionRadius?: number;
+ hoverText: object;
+ channels: any[];
+ appearance: {
+ stroke: string;
+ strokeOpacity: number;
+ strokeWidth: number;
+ fill: string;
+ fillOpacity: number;
+ edgeStroke: string;
+ edgeFill: string;
+ edgeFill2: string;
+ edgeStrokeWidth: number;
+ r: number;
+ };
+}
+
+interface EquidistantChannelState {
+ current?: any;
+ override?: any;
+}
+
+export class EquidistantChannel extends React.Component {
+
+ public static defaultProps = {
+ onStart: noop,
+ onComplete: noop,
+ onSelect: noop,
+ currentPositionStroke: "#000000",
+ currentPositionOpacity: 1,
+ currentPositionStrokeWidth: 3,
+ currentPositionRadius: 4,
+ hoverText: {
+ ...HoverTextNearMouse.defaultProps,
+ enable: true,
+ bgHeight: 18,
+ bgWidth: 120,
+ text: "Click to select object",
+ },
+ channels: [],
+ appearance: {
+ stroke: "#000000",
+ strokeOpacity: 1,
+ strokeWidth: 1,
+ fill: "#8AAFE2",
+ fillOpacity: 0.7,
+ edgeStroke: "#000000",
+ edgeFill: "#FFFFFF",
+ edgeFill2: "#250B98",
+ edgeStrokeWidth: 1,
+ r: 5,
+ },
+ };
+
+ // @ts-ignore
+ private terminate: () => void;
+ private saveNodeType;
+ // @ts-ignore
+ private getSelectionState;
+ private mouseMoved;
+
+ public constructor(props) {
+ super(props);
+
+ this.terminate = terminate.bind(this);
+ this.saveNodeType = saveNodeType.bind(this);
+
+ this.getSelectionState = isHoverForInteractiveType("channels")
+ .bind(this);
+
+ this.state = {
+ };
+ }
+
+ public render() {
+ const { appearance } = this.props;
+ const { enabled } = this.props;
+ const { currentPositionRadius, currentPositionStroke } = this.props;
+ const { currentPositionOpacity, currentPositionStrokeWidth } = this.props;
+ const { channels, hoverText } = this.props;
+ const { current, override } = this.state;
+ const overrideIndex = isDefined(override) ? override.index : null;
+
+ const tempChannel = isDefined(current) && isDefined(current.endXY)
+ ?
+ : null;
+
+ return
+ {channels.map((each, idx) => {
+ const eachAppearance = isDefined(each.appearance)
+ ? { ...appearance, ...each.appearance }
+ : appearance;
+
+ return ;
+ })}
+ {tempChannel}
+
+ ;
+ }
+
+ private readonly handleDragChannel = (index, newXYValue) => {
+ this.setState({
+ override: {
+ index,
+ ...newXYValue,
+ },
+ });
+ }
+
+ private readonly handleDragChannelComplete = (moreProps) => {
+ const { override } = this.state;
+ const { channels } = this.props;
+
+ if (isDefined(override)) {
+ const { index, ...rest } = override;
+ const newChannels = channels
+ .map((each, idx) => idx === index
+ ? { ...each, ...rest, selected: true }
+ : each);
+
+ this.setState({
+ override: null,
+ }, () => {
+ this.props.onComplete(newChannels, moreProps);
+ });
+ }
+ }
+
+ private readonly handleStart = (xyValue) => {
+ const { current } = this.state;
+
+ if (isNotDefined(current) || isNotDefined(current.startXY)) {
+ this.mouseMoved = false;
+ this.setState({
+ current: {
+ startXY: xyValue,
+ endXY: null,
+ },
+ }, () => {
+ this.props.onStart();
+ });
+ }
+ }
+
+ private readonly handleEnd = (xyValue, moreProps, e) => {
+ const { current } = this.state;
+ const { channels, appearance } = this.props;
+
+ if (this.mouseMoved
+ && isDefined(current)
+ && isDefined(current.startXY)
+ ) {
+
+ if (isNotDefined(current.dy)) {
+ this.setState({
+ current: {
+ ...current,
+ dy: 0,
+ },
+ });
+ } else {
+ const newChannels = [
+ ...channels.map((d) => ({ ...d, selected: false })),
+ {
+ ...current, selected: true,
+ appearance,
+ },
+ ];
+
+ this.setState({
+ current: null,
+ }, () => {
+
+ this.props.onComplete(newChannels, moreProps, e);
+ });
+ }
+ }
+ }
+
+ private readonly handleDrawChannel = (xyValue) => {
+ const { current } = this.state;
+
+ if (isDefined(current)
+ && isDefined(current.startXY)) {
+ this.mouseMoved = true;
+ if (isNotDefined(current.dy)) {
+ this.setState({
+ current: {
+ startXY: current.startXY,
+ endXY: xyValue,
+ },
+ });
+ } else {
+ const m = getSlope(current.startXY, current.endXY);
+ const b = getYIntercept(m, current.endXY);
+
+ // @ts-ignore
+ const y = m * xyValue[0] + b;
+ const dy = xyValue[1] - y;
+
+ this.setState({
+ current: {
+ ...current,
+ dy,
+ },
+ });
+ }
+ }
+ }
+}
diff --git a/packages/react-financial-charts/src/interactive/FibonacciRetracement.tsx b/packages/react-financial-charts/src/interactive/FibonacciRetracement.tsx
new file mode 100644
index 000000000..4ac7fb06f
--- /dev/null
+++ b/packages/react-financial-charts/src/interactive/FibonacciRetracement.tsx
@@ -0,0 +1,304 @@
+import * as React from "react";
+
+import { isDefined, isNotDefined, noop } from "../utils";
+import { HoverTextNearMouse } from "./components/HoverTextNearMouse";
+import { MouseLocationIndicator } from "./components/MouseLocationIndicator";
+import {
+ isHoverForInteractiveType,
+ saveNodeType,
+ terminate,
+} from "./utils";
+import { EachFibRetracement } from "./wrapper/EachFibRetracement";
+
+interface FibonacciRetracementProps {
+ enabled: boolean;
+ width?: number;
+ onStart?: any; // func
+ onComplete?: any; // func
+ onSelect?: any; // func
+ type:
+ "EXTEND" | // extends from -Infinity to +Infinity
+ "RAY" | // extends to +/-Infinity in one direction
+ "BOUND"; // extends between the set bounds
+ hoverText: object;
+ currentPositionStroke?: string;
+ currentPositionStrokeWidth?: number;
+ currentPositionOpacity?: number;
+ currentPositionRadius?: number;
+ retracements: any[];
+ appearance: {
+ stroke: string;
+ strokeWidth: number;
+ strokeOpacity: number;
+ fontFamily: string;
+ fontSize: number;
+ fontFill: string;
+ edgeStroke: string;
+ edgeFill: string;
+ nsEdgeFill: string;
+ edgeStrokeWidth: number;
+ r: number;
+ };
+}
+
+interface FibonacciRetracementState {
+ current?: any;
+ override?: any;
+}
+
+export class FibonacciRetracement extends React.Component {
+
+ public static defaultProps = {
+ enabled: true,
+ type: "RAY",
+ retracements: [],
+ onStart: noop,
+ onComplete: noop,
+ onSelect: noop,
+ hoverText: {
+ ...HoverTextNearMouse.defaultProps,
+ enable: true,
+ bgHeight: "auto",
+ bgWidth: "auto",
+ text: "Click to select object",
+ selectedText: "",
+ },
+ currentPositionStroke: "#000000",
+ currentPositionOpacity: 1,
+ currentPositionStrokeWidth: 3,
+ currentPositionRadius: 4,
+ appearance: {
+ stroke: "#000000",
+ strokeWidth: 1,
+ strokeOpacity: 1,
+ fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif",
+ fontSize: 11,
+ fontFill: "#000000",
+ edgeStroke: "#000000",
+ edgeFill: "#FFFFFF",
+ nsEdgeFill: "#000000",
+ edgeStrokeWidth: 1,
+ r: 5,
+ },
+ };
+
+ // @ts-ignore
+ private getSelectionState;
+ private mouseMoved;
+ private saveNodeType;
+
+ // @ts-ignore
+ private terminate;
+
+ constructor(props) {
+ super(props);
+
+ this.handleEdge1Drag = this.handleEdge1Drag.bind(this);
+ this.handleEdge2Drag = this.handleEdge2Drag.bind(this);
+
+ this.terminate = terminate.bind(this);
+ this.getSelectionState = isHoverForInteractiveType("retracements")
+ .bind(this);
+
+ this.saveNodeType = saveNodeType.bind(this);
+ this.state = {};
+ }
+
+ public render() {
+ const { current, override } = this.state;
+ const { retracements } = this.props;
+
+ const {
+ appearance,
+ type,
+ } = this.props;
+ const {
+ currentPositionStroke,
+ currentPositionOpacity,
+ currentPositionStrokeWidth,
+ currentPositionRadius,
+ } = this.props;
+
+ const { enabled, hoverText } = this.props;
+ const overrideIndex = isDefined(override) ? override.index : null;
+ const hoverTextWidthDefault = {
+ ...FibonacciRetracement.defaultProps.hoverText,
+ ...hoverText,
+ };
+
+ const currentRetracement = isDefined(current) && isDefined(current.x2)
+ ?
+ : null;
+ return (
+
+ {retracements.map((each, idx) => {
+ const eachAppearance = isDefined(each.appearance)
+ ? { ...appearance, ...each.appearance }
+ : appearance;
+
+ const eachHoverText = isDefined(each.hoverText)
+ ? { ...hoverTextWidthDefault, ...each.hoverText }
+ : hoverTextWidthDefault;
+
+ return (
+
+ );
+ })}
+ {currentRetracement}
+
+
+ );
+ }
+
+ private readonly handleDrawRetracement = (xyValue) => {
+ const { current } = this.state;
+ if (isDefined(current) && isDefined(current.x1)) {
+ this.mouseMoved = true;
+ this.setState({
+ current: {
+ ...current,
+ x2: xyValue[0],
+ y2: xyValue[1],
+ },
+ });
+ }
+ }
+
+ private readonly handleEdge1Drag = (echo, newXYValue, origXYValue) => {
+ const { retracements } = this.props;
+ const { index } = echo;
+
+ const dx = origXYValue.x1Value - newXYValue.x1Value;
+
+ this.setState({
+ override: {
+ index,
+ x1: retracements[index].x1 - dx,
+ y1: retracements[index].y1,
+ x2: retracements[index].x2,
+ y2: retracements[index].y2,
+ },
+ });
+ }
+
+ private readonly handleDrag = (index, xy) => {
+ this.setState({
+ override: {
+ index,
+ ...xy,
+ },
+ });
+ }
+
+ private readonly handleEdge2Drag = (echo, newXYValue, origXYValue) => {
+ const { retracements } = this.props;
+ const { index } = echo;
+
+ const dx = origXYValue.x2Value - newXYValue.x2Value;
+
+ this.setState({
+ override: {
+ index,
+ x1: retracements[index].x1,
+ y1: retracements[index].y1,
+ x2: retracements[index].x2 - dx,
+ y2: retracements[index].y2,
+ },
+ });
+ }
+
+ private readonly handleDragComplete = (moreProps) => {
+ const { retracements } = this.props;
+ const { override } = this.state;
+ if (isDefined(override)) {
+ const { index, ...rest } = override;
+
+ const newRetracements = retracements.map(
+ (each, idx) =>
+ (idx === index
+ ? { ...each, ...rest, selected: true }
+ : each),
+ );
+ this.setState(
+ {
+ override: null,
+ },
+ () => {
+ this.props.onComplete(newRetracements, moreProps);
+ },
+ );
+ }
+ }
+
+ private readonly handleStart = (xyValue, moreProps) => {
+ const { current } = this.state;
+ if (isNotDefined(current) || isNotDefined(current.x1)) {
+ this.mouseMoved = false;
+ this.setState(
+ {
+ current: {
+ x1: xyValue[0],
+ y1: xyValue[1],
+ x2: null,
+ y2: null,
+ },
+ },
+ () => {
+ this.props.onStart(moreProps);
+ },
+ );
+ }
+ }
+
+ private readonly handleEnd = (xyValue, moreProps, e) => {
+ const { retracements, appearance, type } = this.props;
+ const { current } = this.state;
+
+ if (this.mouseMoved && isDefined(current) && isDefined(current.x1)) {
+ const newRetracements = retracements.concat({
+ ...current,
+ x2: xyValue[0],
+ y2: xyValue[1],
+ selected: true,
+ appearance,
+ type,
+ });
+
+ this.setState(
+ {
+ current: null,
+ },
+ () => {
+ this.props.onComplete(newRetracements, moreProps, e);
+ },
+ );
+ }
+ }
+}
diff --git a/packages/react-financial-charts/src/interactive/GannFan.tsx b/packages/react-financial-charts/src/interactive/GannFan.tsx
new file mode 100644
index 000000000..f061c4116
--- /dev/null
+++ b/packages/react-financial-charts/src/interactive/GannFan.tsx
@@ -0,0 +1,237 @@
+import * as React from "react";
+
+import { isDefined, isNotDefined, noop } from "../utils";
+import { HoverTextNearMouse } from "./components/HoverTextNearMouse";
+import { MouseLocationIndicator } from "./components/MouseLocationIndicator";
+import {
+ isHoverForInteractiveType,
+ saveNodeType,
+ terminate,
+} from "./utils";
+import { EachGannFan } from "./wrapper/EachGannFan";
+
+interface GannFanProps {
+ enabled: boolean;
+ onStart: any; // func
+ onComplete: any; // func
+ onSelect?: any; // func
+ currentPositionStroke?: string;
+ currentPositionStrokeWidth?: number;
+ currentPositionOpacity?: number;
+ currentPositionRadius?: number;
+ appearance: {
+ stroke: string;
+ strokeOpacity: number;
+ fillOpacity: number;
+ strokeWidth: number;
+ edgeStroke: string;
+ edgeFill: string;
+ edgeStrokeWidth: number;
+ r: number;
+ fill: string[],
+ fontFamily: string;
+ fontSize: number;
+ fontFill: string;
+ };
+ hoverText: object;
+ fans: any[];
+}
+
+interface GannFanState {
+ current?: any;
+ override?: any;
+}
+
+export class GannFan extends React.Component {
+
+ public static defaultProps = {
+ appearance: {
+ stroke: "#000000",
+ fillOpacity: 0.2,
+ strokeOpacity: 1,
+ strokeWidth: 1,
+ edgeStroke: "#000000",
+ edgeFill: "#FFFFFF",
+ edgeStrokeWidth: 1,
+ r: 5,
+ fill: [
+ "#e41a1c",
+ "#377eb8",
+ "#4daf4a",
+ "#984ea3",
+ "#ff7f00",
+ "#ffff33",
+ "#a65628",
+ "#f781bf",
+ ],
+ fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif",
+ fontSize: 12,
+ fontFill: "#000000",
+ },
+ onStart: noop,
+ onComplete: noop,
+ onSelect: noop,
+ currentPositionStroke: "#000000",
+ currentPositionOpacity: 1,
+ currentPositionStrokeWidth: 3,
+ currentPositionRadius: 4,
+ hoverText: {
+ ...HoverTextNearMouse.defaultProps,
+ enable: true,
+ bgHeight: 18,
+ bgWidth: 120,
+ text: "Click to select object",
+ },
+ fans: [],
+ };
+
+ private mouseMoved;
+ // @ts-ignore
+ private getSelectionState;
+ private saveNodeType;
+
+ // @ts-ignore
+ private terminate;
+
+ public constructor(props) {
+ super(props);
+
+ this.terminate = terminate.bind(this);
+ this.saveNodeType = saveNodeType.bind(this);
+
+ this.getSelectionState = isHoverForInteractiveType("fans")
+ .bind(this);
+
+ this.state = {};
+ }
+
+ public render() {
+ const { enabled, appearance } = this.props;
+ const { currentPositionRadius, currentPositionStroke } = this.props;
+ const { currentPositionOpacity, currentPositionStrokeWidth } = this.props;
+ const { hoverText, fans } = this.props;
+ const { current, override } = this.state;
+ const overrideIndex = isDefined(override) ? override.index : null;
+
+ const tempChannel = isDefined(current) && isDefined(current.endXY)
+ ?
+ : null;
+
+ return (
+
+ {fans.map((each, idx) => {
+ const eachAppearance = isDefined(each.appearance)
+ ? { ...appearance, ...each.appearance }
+ : appearance;
+
+ return ;
+ })}
+ {tempChannel}
+
+
+ );
+ }
+
+ private readonly handleEnd = (xyValyue, moreProps, e) => {
+ const { current } = this.state;
+ const { fans, appearance } = this.props;
+
+ if (this.mouseMoved
+ && isDefined(current)
+ && isDefined(current.startXY)
+ ) {
+ const newfans = [
+ ...fans.map((d) => ({ ...d, selected: false })),
+ { ...current, selected: true, appearance },
+ ];
+ this.setState({
+ current: null,
+ }, () => {
+ this.props.onComplete(newfans, moreProps, e);
+ });
+ }
+ }
+
+ private readonly handleStart = (xyValue) => {
+ const { current } = this.state;
+
+ if (isNotDefined(current) || isNotDefined(current.startXY)) {
+ this.mouseMoved = false;
+
+ this.setState({
+ current: {
+ startXY: xyValue,
+ endXY: null,
+ },
+ }, () => {
+ this.props.onStart();
+ });
+ }
+ }
+
+ private readonly handleDrawFan = (xyValue) => {
+ const { current } = this.state;
+
+ if (isDefined(current) && isDefined(current.startXY)) {
+ this.mouseMoved = true;
+
+ this.setState({
+ current: {
+ startXY: current.startXY,
+ endXY: xyValue,
+ },
+ });
+ }
+ }
+
+ private readonly handleDragFanComplete = (moreProps) => {
+ const { override } = this.state;
+ const { fans } = this.props;
+
+ if (isDefined(override)) {
+ const { index, ...rest } = override;
+ const newfans = fans
+ .map((each, idx) => idx === index
+ ? { ...each, ...rest, selected: true }
+ : each);
+ this.setState({
+ override: null,
+ }, () => {
+ this.props.onComplete(newfans, moreProps);
+ });
+ }
+ }
+
+ private readonly handleDragFan = (index, newXYValue) => {
+ this.setState({
+ override: {
+ index,
+ ...newXYValue,
+ },
+ });
+ }
+}
diff --git a/packages/react-financial-charts/src/interactive/InteractiveText.tsx b/packages/react-financial-charts/src/interactive/InteractiveText.tsx
new file mode 100644
index 000000000..528cf35bc
--- /dev/null
+++ b/packages/react-financial-charts/src/interactive/InteractiveText.tsx
@@ -0,0 +1,192 @@
+import * as PropTypes from "prop-types";
+import * as React from "react";
+
+import { isDefined, noop } from "../utils";
+
+import GenericChartComponent from "../GenericChartComponent";
+import { getMouseCanvas } from "../GenericComponent";
+import { HoverTextNearMouse } from "./components/HoverTextNearMouse";
+import {
+ getValueFromOverride,
+ isHoverForInteractiveType,
+ saveNodeType,
+ terminate,
+} from "./utils";
+import { EachText } from "./wrapper/EachText";
+
+interface InteractiveTextProps {
+ onChoosePosition: any; // func
+ onDragComplete: any; // func
+ onSelect?: any; // func
+ defaultText: {
+ bgFill: string;
+ bgOpacity: number;
+ bgStrokeWidth?: number;
+ bgStroke?: string;
+ textFill: string;
+ fontFamily: string;
+ fontWeight: string;
+ fontStyle: string;
+ fontSize: number;
+ text: string;
+ };
+ hoverText: object;
+ textList: any[];
+ enabled: boolean;
+}
+
+interface InteractiveTextState {
+ current?: any;
+ override?: any;
+}
+
+export class InteractiveText extends React.Component {
+
+ public static defaultProps = {
+ onChoosePosition: noop,
+ onDragComplete: noop,
+ onSelect: noop,
+ defaultText: {
+ bgFill: "#D3D3D3",
+ bgOpacity: 1,
+ bgStrokeWidth: 1,
+ textFill: "#F10040",
+ fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif",
+ fontSize: 12,
+ fontStyle: "normal",
+ fontWeight: "normal",
+ text: "Lorem ipsum...",
+ },
+ hoverText: {
+ ...HoverTextNearMouse.defaultProps,
+ enable: true,
+ bgHeight: "auto",
+ bgWidth: "auto",
+ text: "Click to select object",
+ selectedText: "",
+ },
+ textList: [],
+ };
+
+ public static contextTypes = {
+ subscribe: PropTypes.func.isRequired,
+ unsubscribe: PropTypes.func.isRequired,
+ generateSubscriptionId: PropTypes.func.isRequired,
+ chartId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+ };
+
+ // @ts-ignore
+ private getSelectionState;
+ private saveNodeType;
+
+ // @ts-ignore
+ private terminate;
+
+ constructor(props) {
+ super(props);
+
+ this.terminate = terminate.bind(this);
+
+ this.saveNodeType = saveNodeType.bind(this);
+ this.getSelectionState = isHoverForInteractiveType("textList")
+ .bind(this);
+
+ this.state = {};
+ }
+
+ public render() {
+ const { textList, defaultText, hoverText } = this.props;
+ const { override } = this.state;
+ return
+ {textList.map((each, idx) => {
+ const defaultHoverText = InteractiveText.defaultProps.hoverText;
+ const props = {
+ ...defaultText,
+ ...each,
+ hoverText: {
+ ...defaultHoverText,
+ ...hoverText,
+ ...(each.hoverText || {}),
+ },
+ };
+ return ;
+ })}
+ ;
+ ;
+ }
+
+ private readonly handleDraw = (moreProps, e) => {
+ const { enabled } = this.props;
+ if (enabled) {
+ const {
+ mouseXY: [, mouseY],
+ chartConfig: { yScale },
+ xAccessor,
+ currentItem,
+ } = moreProps;
+
+ const xyValue = [xAccessor(currentItem), yScale.invert(mouseY)];
+
+ const { defaultText, onChoosePosition } = this.props;
+
+ const newText = {
+ ...defaultText,
+ position: xyValue,
+ };
+ onChoosePosition(newText, moreProps, e);
+ }
+ }
+
+ private readonly handleDragComplete = (moreProps) => {
+ const { override } = this.state;
+ if (isDefined(override)) {
+ const { textList } = this.props;
+ const newTextList = textList
+ .map((each, idx) => {
+ const selected = (idx === override.index);
+ return selected
+ ? {
+ ...each,
+ position: override.position,
+ selected,
+ }
+ : {
+ ...each,
+ selected,
+ };
+ });
+ this.setState({
+ override: null,
+ }, () => {
+ this.props.onDragComplete(newTextList, moreProps);
+ });
+ }
+ }
+
+ private readonly handleDrag = (index, position) => {
+ this.setState({
+ override: {
+ index,
+ position,
+ },
+ });
+ }
+}
diff --git a/packages/react-financial-charts/src/interactive/InteractiveYCoordinate.tsx b/packages/react-financial-charts/src/interactive/InteractiveYCoordinate.tsx
new file mode 100644
index 000000000..d894c683b
--- /dev/null
+++ b/packages/react-financial-charts/src/interactive/InteractiveYCoordinate.tsx
@@ -0,0 +1,216 @@
+import * as PropTypes from "prop-types";
+import * as React from "react";
+
+import { format } from "d3-format";
+import { isDefined, noop, strokeDashTypes } from "../utils";
+
+import { HoverTextNearMouse } from "./components/HoverTextNearMouse";
+import {
+ getValueFromOverride,
+ isHoverForInteractiveType,
+ saveNodeType,
+ terminate,
+} from "./utils";
+import { EachInteractiveYCoordinate } from "./wrapper/EachInteractiveYCoordinate";
+
+interface InteractiveYCoordinateProps {
+ onChoosePosition: any; // func
+ onDragComplete: any; // func
+ onSelect?: any; // func
+ onDelete?: any; // func
+ defaultPriceCoordinate: {
+ bgFill: string;
+ bgOpacity: number;
+ stroke: string;
+ strokeDasharray: strokeDashTypes;
+ strokeOpacity: number;
+ strokeWidth: number;
+ textFill: string;
+ fontFamily: string;
+ fontWeight: string;
+ fontStyle: string;
+ fontSize: number;
+ text: string;
+ textBox: {
+ height: number;
+ left: number;
+ padding: {
+ left: number;
+ right: number;
+ };
+ closeIcon: {
+ padding: {
+ left: number;
+ right: number;
+ };
+ width: number;
+ };
+ };
+ edge: {
+ stroke: string;
+ strokeOpacity: number;
+ strokeWidth: number;
+ fill: string;
+ fillOpacity: number;
+ };
+ };
+ hoverText: object;
+ yCoordinateList: any[];
+ enabled: boolean;
+}
+
+interface InteractiveYCoordinateState {
+ current?: any;
+ override?: any;
+}
+
+export class InteractiveYCoordinate extends React.Component {
+
+ public static defaultProps = {
+ onChoosePosition: noop,
+ onDragComplete: noop,
+ onSelect: noop,
+ onDelete: noop,
+ defaultPriceCoordinate: {
+ bgFill: "#FFFFFF",
+ bgOpacity: 1,
+
+ stroke: "#6574CD",
+ strokeOpacity: 1,
+ strokeDasharray: "ShortDash2",
+ strokeWidth: 1,
+
+ textFill: "#6574CD",
+ fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif",
+ fontSize: 12,
+ fontStyle: "normal",
+ fontWeight: "normal",
+ text: "Alert",
+ textBox: {
+ height: 24,
+ left: 20,
+ padding: { left: 10, right: 5 },
+ closeIcon: {
+ padding: { left: 5, right: 8 },
+ width: 8,
+ },
+ },
+ edge: {
+ stroke: "#6574CD",
+ strokeOpacity: 1,
+ strokeWidth: 1,
+
+ fill: "#FFFFFF",
+ fillOpacity: 1,
+ orient: "right",
+ at: "right",
+ arrowWidth: 10,
+ dx: 0,
+ rectWidth: 50,
+ rectHeight: 20,
+ displayFormat: format(".2f"),
+ },
+ },
+ hoverText: {
+ ...HoverTextNearMouse.defaultProps,
+ enable: true,
+ bgHeight: 18,
+ bgWidth: 175,
+ text: "Click and drag the edge circles",
+ },
+ yCoordinateList: [],
+ };
+
+ public static contextTypes = {
+ subscribe: PropTypes.func.isRequired,
+ unsubscribe: PropTypes.func.isRequired,
+ generateSubscriptionId: PropTypes.func.isRequired,
+ chartId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+ };
+
+ // @ts-ignore
+ private getSelectionState;
+ private saveNodeType;
+
+ // @ts-ignore
+ private terminate;
+
+ constructor(props) {
+ super(props);
+
+ this.terminate = terminate.bind(this);
+
+ this.saveNodeType = saveNodeType.bind(this);
+ this.getSelectionState = isHoverForInteractiveType("yCoordinateList")
+ .bind(this);
+
+ this.state = {};
+ }
+
+ public render() {
+ const { yCoordinateList } = this.props;
+ const { override } = this.state;
+ return (
+
+ {yCoordinateList.map((each, idx) => {
+ const props = each;
+ return (
+
+ );
+ })}
+
+ );
+ }
+
+ private readonly handleDelete = (index, moreProps) => {
+ const { onDelete, yCoordinateList } = this.props;
+
+ onDelete(yCoordinateList[index], moreProps);
+ }
+
+ private readonly handleDragComplete = (moreProps) => {
+ const { override } = this.state;
+ if (isDefined(override)) {
+ const { yCoordinateList } = this.props;
+ const newAlertList = yCoordinateList
+ .map((each, idx) => {
+ const selected = (idx === override.index);
+ return selected
+ ? {
+ ...each,
+ yValue: override.yValue,
+ selected,
+ }
+ : {
+ ...each,
+ selected,
+ };
+ });
+ const draggedAlert = newAlertList[override.index];
+ this.setState({
+ override: null,
+ }, () => {
+ this.props.onDragComplete(newAlertList, moreProps, draggedAlert);
+ });
+ }
+ }
+
+ private readonly handleDrag = (index, yValue) => {
+ this.setState({
+ override: {
+ index,
+ yValue,
+ },
+ });
+ }
+}
diff --git a/packages/react-financial-charts/src/interactive/StandardDeviationChannel.tsx b/packages/react-financial-charts/src/interactive/StandardDeviationChannel.tsx
new file mode 100644
index 000000000..1fbc2570b
--- /dev/null
+++ b/packages/react-financial-charts/src/interactive/StandardDeviationChannel.tsx
@@ -0,0 +1,257 @@
+import * as React from "react";
+
+import { isDefined, isNotDefined, noop } from "../utils";
+
+import {
+ getValueFromOverride,
+ isHoverForInteractiveType,
+ saveNodeType,
+ terminate,
+} from "./utils";
+
+import { HoverTextNearMouse } from "./components/HoverTextNearMouse";
+import { MouseLocationIndicator } from "./components/MouseLocationIndicator";
+import { EachLinearRegressionChannel } from "./wrapper/EachLinearRegressionChannel";
+
+interface StandardDeviationChannelProps {
+ enabled: boolean;
+ snapTo?: any; // func
+ onStart?: any; // func
+ onComplete: any; // func
+ onSelect?: any; // func
+ currentPositionStroke?: string;
+ currentPositionStrokeWidth?: number;
+ currentPositionOpacity?: number;
+ currentPositionRadius?: number;
+ appearance: {
+ stroke?: string;
+ strokeOpacity?: number;
+ strokeWidth?: number;
+ fill?: string;
+ fillOpacity?: number;
+ edgeStrokeWidth?: number;
+ edgeStroke?: string;
+ edgeFill?: string;
+ r?: number;
+ };
+ hoverText: object;
+ channels: any[];
+}
+
+interface StandardDeviationChannelState {
+ current?: any;
+ override?: any;
+}
+
+export class StandardDeviationChannel extends React.Component {
+
+ public static defaultProps = {
+ snapTo: (d) => d.close,
+ appearance: {
+ stroke: "#000000",
+ fillOpacity: 0.2,
+ strokeOpacity: 1,
+ strokeWidth: 1,
+ fill: "#8AAFE2",
+ edgeStrokeWidth: 2,
+ edgeStroke: "#000000",
+ edgeFill: "#FFFFFF",
+ r: 5,
+ },
+ onStart: noop,
+ onComplete: noop,
+ onSelect: noop,
+ currentPositionStroke: "#000000",
+ currentPositionOpacity: 1,
+ currentPositionStrokeWidth: 3,
+ currentPositionRadius: 4,
+ hoverText: {
+ ...HoverTextNearMouse.defaultProps,
+ enable: true,
+ bgHeight: "auto",
+ bgWidth: "auto",
+ text: "Click and drag the edge circles",
+ selectedText: "",
+ },
+ channels: [],
+ };
+
+ // @ts-ignore
+ private getSelectionState;
+ private mouseMoved;
+ private saveNodeType;
+
+ // @ts-ignore
+ private terminate;
+
+ public constructor(props) {
+ super(props);
+
+ this.terminate = terminate.bind(this);
+ this.saveNodeType = saveNodeType.bind(this);
+
+ this.getSelectionState = isHoverForInteractiveType("channels")
+ .bind(this);
+
+ this.state = {};
+ }
+
+ public render() {
+ const { appearance } = this.props;
+ const { enabled, snapTo } = this.props;
+ const { currentPositionRadius, currentPositionStroke } = this.props;
+ const { currentPositionOpacity, currentPositionStrokeWidth } = this.props;
+ const { hoverText, channels } = this.props;
+ const { current, override } = this.state;
+
+ const eachDefaultAppearance = {
+ ...StandardDeviationChannel.defaultProps.appearance,
+ ...appearance,
+ };
+
+ const hoverTextDefault = {
+ ...StandardDeviationChannel.defaultProps.hoverText,
+ ...hoverText,
+ };
+
+ const tempLine = isDefined(current) && isDefined(current.end)
+ ?
+ : null;
+
+ return
+ {channels.map((each, idx) => {
+ const eachAppearance = isDefined(each.appearance)
+ ? { ...eachDefaultAppearance, ...each.appearance }
+ : eachDefaultAppearance;
+
+ const eachHoverText = isDefined(each.hoverText)
+ ? { ...hoverTextDefault, ...each.hoverText }
+ : hoverTextDefault;
+
+ return ;
+ })}
+ {tempLine}
+
+ ;
+ }
+
+ private handleEnd = (xyValue, moreProps, e) => {
+ const { current } = this.state;
+ const { appearance, channels } = this.props;
+
+ if (this.mouseMoved
+ && isDefined(current)
+ && isDefined(current.start)
+ ) {
+ const newChannels = [
+ ...channels.map((d) => ({ ...d, selected: false })),
+ {
+ start: current.start,
+ end: xyValue,
+ selected: true,
+ appearance,
+ },
+ ];
+
+ this.setState({
+ current: null,
+ }, () => {
+ this.props.onComplete(newChannels, moreProps, e);
+ });
+ }
+ }
+
+ private readonly handleStart = (xyValue) => {
+ const { current } = this.state;
+
+ if (isNotDefined(current) || isNotDefined(current.start)) {
+ this.mouseMoved = false;
+
+ this.setState({
+ current: {
+ start: xyValue,
+ end: null,
+ },
+ }, () => {
+ this.props.onStart();
+ });
+ }
+ }
+
+ private readonly handleDrawLine = (xyValue) => {
+ const { current } = this.state;
+
+ if (isDefined(current) && isDefined(current.start)) {
+ this.mouseMoved = true;
+ this.setState({
+ current: {
+ start: current.start,
+ end: xyValue,
+ },
+ });
+ }
+ }
+
+ private readonly handleDragLineComplete = (moreProps) => {
+ const { override } = this.state;
+ const { channels } = this.props;
+ if (isDefined(override)) {
+
+ const newChannels = channels
+ .map((each, idx) => idx === override.index
+ ? {
+ ...each,
+ start: [override.x1Value, override.y1Value],
+ end: [override.x2Value, override.y2Value],
+ selected: true,
+ }
+ : each);
+ this.setState({
+ override: null,
+ }, () => {
+ this.props.onComplete(newChannels, moreProps);
+ });
+ }
+ }
+
+ private readonly handleDragLine = (index, newXYValue) => {
+ this.setState({
+ override: {
+ index,
+ ...newXYValue,
+ },
+ });
+ }
+}
diff --git a/packages/react-financial-charts/src/interactive/TrendLine.tsx b/packages/react-financial-charts/src/interactive/TrendLine.tsx
new file mode 100644
index 000000000..060b08d2e
--- /dev/null
+++ b/packages/react-financial-charts/src/interactive/TrendLine.tsx
@@ -0,0 +1,267 @@
+import * as React from "react";
+
+import { isDefined, isNotDefined, noop, strokeDashTypes } from "../utils";
+
+import {
+ getValueFromOverride,
+ isHoverForInteractiveType,
+ saveNodeType,
+ terminate,
+} from "./utils";
+
+import { HoverTextNearMouse } from "./components/HoverTextNearMouse";
+import { MouseLocationIndicator } from "./components/MouseLocationIndicator";
+import StraightLine from "./components/StraightLine";
+import { EachTrendLine } from "./wrapper/EachTrendLine";
+
+interface TrendLineProps {
+ snap: boolean;
+ enabled: boolean;
+ snapTo?: any; // func
+ shouldDisableSnap: any; // func
+ onStart: any; // func
+ onComplete: any; // func
+ onSelect?: any; // func
+ currentPositionStroke?: string;
+ currentPositionStrokeWidth?: number;
+ currentPositionstrokeOpacity?: number;
+ currentPositionRadius?: number;
+ type:
+ "XLINE" | // extends from -Infinity to +Infinity
+ "RAY" | // extends to +/-Infinity in one direction
+ "LINE"; // extends between the set bounds
+ hoverText: object;
+ trends: any[];
+ appearance: {
+ stroke: string;
+ strokeOpacity: number;
+ strokeWidth: number;
+ strokeDasharray: strokeDashTypes;
+ edgeStrokeWidth: number;
+ edgeFill: string;
+ edgeStroke: string;
+ };
+}
+
+interface TrendLineState {
+ current?: any;
+ override?: any;
+ trends?: any;
+}
+
+export class TrendLine extends React.Component {
+
+ public static defaultProps = {
+ type: "XLINE",
+ onStart: noop,
+ onComplete: noop,
+ onSelect: noop,
+ currentPositionStroke: "#000000",
+ currentPositionstrokeOpacity: 1,
+ currentPositionStrokeWidth: 3,
+ currentPositionRadius: 0,
+ shouldDisableSnap: (e) => (e.button === 2 || e.shiftKey),
+ hoverText: {
+ ...HoverTextNearMouse.defaultProps,
+ enable: true,
+ bgHeight: "auto",
+ bgWidth: "auto",
+ text: "Click to select object",
+ selectedText: "",
+ },
+ trends: [],
+ appearance: {
+ stroke: "#000000",
+ strokeOpacity: 1,
+ strokeWidth: 1,
+ strokeDasharray: "Solid",
+ edgeStrokeWidth: 1,
+ edgeFill: "#FFFFFF",
+ edgeStroke: "#000000",
+ r: 6,
+ },
+ };
+
+ // @ts-ignore
+ private getSelectionState;
+ private mouseMoved;
+ private saveNodeType;
+ // @ts-ignore
+ private terminate;
+
+ public constructor(props: TrendLineProps) {
+ super(props);
+
+ this.terminate = terminate.bind(this);
+ this.saveNodeType = saveNodeType.bind(this);
+
+ this.getSelectionState = isHoverForInteractiveType("trends")
+ .bind(this);
+
+ this.state = {
+ };
+ }
+
+ public render() {
+ const { appearance } = this.props;
+ const { enabled, snap, shouldDisableSnap, snapTo, type } = this.props;
+ const { currentPositionRadius, currentPositionStroke } = this.props;
+ const { currentPositionstrokeOpacity, currentPositionStrokeWidth } = this.props;
+ const { hoverText, trends } = this.props;
+ const { current, override } = this.state;
+
+ const tempLine = isDefined(current) && isDefined(current.end)
+ ?
+ : null;
+
+ return
+ {trends.map((each, idx) => {
+ const eachAppearance = isDefined(each.appearance)
+ ? { ...appearance, ...each.appearance }
+ : appearance;
+
+ const hoverTextWithDefault = {
+ ...TrendLine.defaultProps.hoverText,
+ ...hoverText,
+ };
+
+ return ;
+ })}
+ {tempLine}
+
+ ;
+ }
+
+ private readonly handleEnd = (xyValue, moreProps, e) => {
+ const { current } = this.state;
+ const { trends, appearance, type } = this.props;
+
+ if (this.mouseMoved
+ && isDefined(current)
+ && isDefined(current.start)
+ ) {
+ const newTrends = [
+ ...trends.map((d) => ({ ...d, selected: false })),
+ {
+ start: current.start,
+ end: xyValue,
+ selected: true,
+ appearance,
+ type,
+ },
+ ];
+ this.setState({
+ current: null,
+ trends: newTrends,
+ }, () => {
+ this.props.onComplete(newTrends, moreProps, e);
+ });
+ }
+ }
+
+ private readonly handleStart = (xyValue, moreProps, e) => {
+ const { current } = this.state;
+
+ if (isNotDefined(current) || isNotDefined(current.start)) {
+ this.mouseMoved = false;
+
+ this.setState({
+ current: {
+ start: xyValue,
+ end: null,
+ },
+ }, () => {
+ this.props.onStart(moreProps, e);
+ });
+ }
+ }
+
+ private readonly handleDrawLine = (xyValue) => {
+ const { current } = this.state;
+ if (isDefined(current) && isDefined(current.start)) {
+ this.mouseMoved = true;
+ this.setState({
+ current: {
+ start: current.start,
+ end: xyValue,
+ },
+ });
+ }
+ }
+
+ private readonly handleDragLineComplete = (moreProps) => {
+ const { override } = this.state;
+ if (isDefined(override)) {
+ const { trends } = this.props;
+ const newTrends = trends
+ .map((each, idx) => idx === override.index
+ ? {
+ ...each,
+ start: [override.x1Value, override.y1Value],
+ end: [override.x2Value, override.y2Value],
+ selected: true,
+ }
+ : {
+ ...each,
+ selected: false,
+ });
+
+ this.setState({
+ override: null,
+ }, () => {
+ this.props.onComplete(newTrends, moreProps);
+ });
+ }
+ }
+
+ private readonly handleDragLine = (index, newXYValue) => {
+ this.setState({
+ override: {
+ index,
+ ...newXYValue,
+ },
+ });
+ }
+}
diff --git a/packages/react-financial-charts/src/interactive/components/ChannelWithArea.tsx b/packages/react-financial-charts/src/interactive/components/ChannelWithArea.tsx
new file mode 100644
index 000000000..0594a9475
--- /dev/null
+++ b/packages/react-financial-charts/src/interactive/components/ChannelWithArea.tsx
@@ -0,0 +1,258 @@
+import { path as d3Path } from "d3-path";
+import * as React from "react";
+
+import GenericChartComponent from "../../GenericChartComponent";
+import { getMouseCanvas } from "../../GenericComponent";
+import { generateLine, isHovering } from "./StraightLine";
+
+import { hexToRGBA, isDefined, isNotDefined, noop } from "../../utils";
+
+interface ChannelWithAreaProps {
+ startXY?: number[];
+ endXY?: number[];
+ dy?: number;
+ interactiveCursorClass?: string;
+ stroke: string;
+ strokeWidth: number;
+ fill: string;
+ fillOpacity: number;
+ strokeOpacity: number;
+ type:
+ "XLINE" | // extends from -Infinity to +Infinity
+ "RAY" | // extends to +/-Infinity in one direction
+ "LINE"; // extends between the set bounds
+ onDragStart: any; // func
+ onDrag: any; // func
+ onDragComplete: any; // func
+ onHover?: any; // func
+ onUnHover?: any; // func
+ defaultClassName?: string;
+ tolerance: number;
+ selected: boolean;
+}
+
+export class ChannelWithArea extends React.Component {
+
+ public static defaultProps = {
+ onDragStart: noop,
+ onDrag: noop,
+ onDragComplete: noop,
+ type: "LINE",
+ strokeWidth: 1,
+ tolerance: 4,
+ selected: false,
+ };
+
+ public render() {
+ const { selected, interactiveCursorClass } = this.props;
+ const { onDragStart, onDrag, onDragComplete, onHover, onUnHover } = this.props;
+
+ return (
+
+ );
+ }
+
+ private readonly renderSVG = (moreProps) => {
+ const { stroke, strokeWidth, fillOpacity, fill, strokeOpacity } = this.props;
+ const { line1, line2 } = helper(this.props, moreProps);
+
+ if (line1 !== undefined) {
+ const { x1, y1, x2, y2 } = line1;
+ const line = line2 !== undefined
+ ?
+ : null;
+ const area = isDefined(line2)
+ ?
+ : null;
+
+ return (
+
+
+ {line}
+ {area}
+
+ );
+ }
+ }
+
+ private readonly drawOnCanvas = (ctx, moreProps) => {
+ const { stroke, strokeWidth, fillOpacity, strokeOpacity, fill } = this.props;
+ const { line1, line2 } = helper(this.props, moreProps);
+
+ if (line1 !== undefined) {
+ const { x1, y1, x2, y2 } = line1;
+
+ ctx.lineWidth = strokeWidth;
+ ctx.strokeStyle = hexToRGBA(stroke, strokeOpacity);
+
+ ctx.beginPath();
+ ctx.moveTo(x1, y1);
+ ctx.lineTo(x2, y2);
+ ctx.stroke();
+
+ if (line2 !== undefined) {
+ const {
+ y1: line2Y1,
+ y2: line2Y2,
+ } = line2;
+
+ ctx.beginPath();
+ ctx.moveTo(x1, line2Y1);
+ ctx.lineTo(x2, line2Y2);
+ ctx.stroke();
+
+ ctx.fillStyle = hexToRGBA(fill, fillOpacity);
+ ctx.beginPath();
+ ctx.moveTo(x1, y1);
+
+ ctx.lineTo(x2, y2);
+ ctx.lineTo(x2, line2Y2);
+ ctx.lineTo(x1, line2Y1);
+
+ ctx.closePath();
+ ctx.fill();
+ }
+ }
+ }
+
+ private readonly isHover = (moreProps) => {
+ const { tolerance, onHover } = this.props;
+
+ if (isDefined(onHover)) {
+
+ const { line1, line2 } = helper(this.props, moreProps);
+
+ if (line1 !== undefined && line2 !== undefined) {
+ const { mouseXY, xScale, chartConfig: { yScale } } = moreProps;
+
+ const line1Hovering = isHovering({
+ x1Value: line1.x1,
+ y1Value: line1.y1,
+ x2Value: line1.x2,
+ y2Value: line1.y2,
+ type: "LINE",
+ mouseXY,
+ tolerance,
+ xScale,
+ yScale,
+ });
+
+ const line2Hovering = isHovering({
+ x1Value: line2.x1,
+ y1Value: line2.y1,
+ x2Value: line2.x2,
+ y2Value: line2.y2,
+ type: "LINE",
+ mouseXY,
+ tolerance,
+ xScale,
+ yScale,
+ });
+
+ return line1Hovering || line2Hovering;
+ }
+ }
+ return false;
+ }
+}
+
+function getPath(line1, line2) {
+ const ctx = d3Path();
+ ctx.moveTo(line1.x1, line1.y1);
+ ctx.lineTo(line1.x2, line1.y2);
+ ctx.lineTo(line1.x2, line2.y2);
+ ctx.lineTo(line1.x1, line2.y1);
+
+ ctx.closePath();
+ return ctx.toString();
+}
+
+function getLines(props: ChannelWithAreaProps, moreProps) {
+ const { startXY, endXY, dy, type } = props;
+ const { xScale } = moreProps;
+
+ if (isNotDefined(startXY) || isNotDefined(endXY)) {
+ return {};
+ }
+ const line1 = generateLine({
+ type,
+ start: startXY,
+ end: endXY,
+ xScale,
+ yScale: undefined,
+ });
+ const line2 = isDefined(dy)
+ ? {
+ ...line1,
+ y1: line1.y1 + dy,
+ y2: line1.y2 + dy,
+ }
+ : undefined;
+
+ return {
+ line1,
+ line2,
+ };
+}
+
+function helper(props: ChannelWithAreaProps, moreProps) {
+ const lines = getLines(props, moreProps);
+ const { xScale, chartConfig: { yScale } } = moreProps;
+
+ const line1 = lines.line1 !== undefined
+ ? {
+ x1: xScale(lines.line1.x1),
+ y1: yScale(lines.line1.y1),
+ x2: xScale(lines.line1.x2),
+ y2: yScale(lines.line1.y2),
+ }
+ : undefined;
+
+ const line2 = lines.line2 !== undefined
+ ? {
+ x1: line1!.x1,
+ y1: yScale(lines.line2.y1),
+ x2: line1!.x2,
+ y2: yScale(lines.line2.y2),
+ }
+ : undefined;
+
+ return {
+ lines,
+ line1,
+ line2,
+ };
+}
diff --git a/packages/react-financial-charts/src/interactive/components/ClickableCircle.tsx b/packages/react-financial-charts/src/interactive/components/ClickableCircle.tsx
new file mode 100644
index 000000000..110397927
--- /dev/null
+++ b/packages/react-financial-charts/src/interactive/components/ClickableCircle.tsx
@@ -0,0 +1,124 @@
+import * as React from "react";
+
+import GenericChartComponent from "../../GenericChartComponent";
+import { getMouseCanvas } from "../../GenericComponent";
+import { hexToRGBA, isDefined, noop } from "../../utils";
+
+interface ClickableCircleProps {
+ readonly xyProvider?: any; // func
+ readonly onDragStart: any; // func
+ readonly onDrag: any; // func
+ readonly onDragComplete: any; // func
+ readonly strokeWidth: number;
+ readonly stroke: string;
+ readonly fill: string;
+ readonly r: number;
+ readonly cx?: number;
+ readonly cy?: number;
+ readonly className: string;
+ readonly show: boolean;
+ readonly strokeOpacity: number;
+ readonly fillOpacity: number;
+ readonly interactiveCursorClass?: string;
+}
+
+export class ClickableCircle extends React.Component {
+
+ public static defaultProps = {
+ className: "react-stockcharts-interactive-line-edge",
+ onDragStart: noop,
+ onDrag: noop,
+ onDragComplete: noop,
+ onMove: noop,
+ show: false,
+ fillOpacity: 1,
+ strokeOpacity: 1,
+ };
+
+ public render() {
+ const { interactiveCursorClass } = this.props;
+ const { show } = this.props;
+ const { onDragStart, onDrag, onDragComplete } = this.props;
+
+ if (!show) {
+ return null;
+ }
+
+ return (
+
+ );
+ }
+
+ private readonly renderSVG = (moreProps) => {
+ const { stroke, strokeWidth, fill } = this.props;
+ const { fillOpacity, strokeOpacity } = this.props;
+ const { r } = this.props;
+
+ const [x, y] = this.helper(this.props, moreProps);
+
+ return (
+
+ );
+ }
+
+ private readonly drawOnCanvas = (ctx, moreProps) => {
+ const { stroke, strokeWidth, fill } = this.props;
+ const { fillOpacity, strokeOpacity } = this.props;
+ const { r } = this.props;
+
+ const [x, y] = this.helper(this.props, moreProps);
+
+ ctx.lineWidth = strokeWidth;
+ ctx.fillStyle = hexToRGBA(fill, fillOpacity);
+ ctx.strokeStyle = hexToRGBA(stroke, strokeOpacity);
+
+ ctx.beginPath();
+ ctx.arc(x, y, r, 0, 2 * Math.PI, false);
+ ctx.fill();
+ ctx.stroke();
+ }
+
+ private readonly isHover = (moreProps) => {
+ const { mouseXY } = moreProps;
+ const r = this.props.r + 7;
+ const [x, y] = this.helper(this.props, moreProps);
+
+ const [mx, my] = mouseXY;
+ const hover = (x - r) < mx && mx < (x + r)
+ && (y - r) < my && my < (y + r);
+
+ return hover;
+ }
+
+ private readonly helper = (props, moreProps) => {
+ const { xyProvider, cx, cy } = props;
+
+ if (isDefined(xyProvider)) {
+ return xyProvider(moreProps);
+ }
+
+ const { xScale, chartConfig: { yScale } } = moreProps;
+
+ const x = xScale(cx);
+ const y = yScale(cy);
+ return [x, y];
+ }
+}
diff --git a/packages/react-financial-charts/src/interactive/components/ClickableShape.tsx b/packages/react-financial-charts/src/interactive/components/ClickableShape.tsx
new file mode 100644
index 000000000..1db5d4acf
--- /dev/null
+++ b/packages/react-financial-charts/src/interactive/components/ClickableShape.tsx
@@ -0,0 +1,126 @@
+import * as React from "react";
+
+import GenericChartComponent from "../../GenericChartComponent";
+import { getMouseCanvas } from "../../GenericComponent";
+
+import { hexToRGBA } from "../../utils";
+import { isHovering2 } from "./StraightLine";
+
+interface ClickableShapeProps {
+ fontWeight: string;
+ fontFamily: string;
+ fontStyle: string;
+ fontSize: number;
+ stroke: string;
+ strokeOpacity: number;
+ strokeWidth: number;
+ text: string;
+ textBox: {
+ closeIcon: any;
+ left: number;
+ padding: any;
+ };
+ hovering?: boolean;
+ interactiveCursorClass?: string;
+ show?: boolean;
+ onHover?: any; // func
+ onUnHover?: any; // func
+ onClick?: any; // func
+ yValue: number;
+}
+
+export class ClickableShape extends React.Component {
+
+ public static defaultProps = {
+ show: false,
+ fillOpacity: 1,
+ strokeOpacity: 1,
+ strokeWidth: 1,
+ };
+
+ private closeIcon;
+
+ public render() {
+ const { interactiveCursorClass } = this.props;
+ const { show } = this.props;
+ const { onHover, onUnHover, onClick } = this.props;
+
+ if (!show) {
+ return null;
+ }
+
+ return (
+
+ );
+ }
+
+ private readonly renderSVG = () => {
+ throw new Error("svg not implemented");
+ }
+
+ private readonly drawOnCanvas = (ctx, moreProps) => {
+ const { stroke, strokeWidth, strokeOpacity, hovering, textBox } = this.props;
+
+ const [x, y] = this.helper(this.props, moreProps, ctx);
+
+ this.closeIcon = { x, y };
+ ctx.beginPath();
+
+ ctx.lineWidth = hovering ? strokeWidth + 1 : strokeWidth;
+ ctx.strokeStyle = hexToRGBA(stroke, strokeOpacity);
+ const halfWidth = textBox.closeIcon.width / 2;
+ ctx.moveTo(x - halfWidth, y - halfWidth);
+ ctx.lineTo(x + halfWidth, y + halfWidth);
+ ctx.moveTo(x - halfWidth, y + halfWidth);
+ ctx.lineTo(x + halfWidth, y - halfWidth);
+ ctx.stroke();
+ }
+
+ private readonly isHover = (moreProps) => {
+ const { mouseXY } = moreProps;
+ if (this.closeIcon) {
+ const { textBox } = this.props;
+ const { x, y } = this.closeIcon;
+ const halfWidth = textBox.closeIcon.width / 2;
+
+ const start1 = [x - halfWidth, y - halfWidth];
+ const end1 = [x + halfWidth, y + halfWidth];
+ const start2 = [x - halfWidth, y + halfWidth];
+ const end2 = [x + halfWidth, y - halfWidth];
+
+ if (isHovering2(start1, end1, mouseXY, 3) || isHovering2(start2, end2, mouseXY, 3)) {
+ return true;
+ }
+ }
+ return false;
+ }
+
+ private readonly helper = (props: ClickableShapeProps, moreProps, ctx) => {
+ const { yValue, text, textBox } = props;
+ const { fontFamily, fontStyle, fontWeight, fontSize } = props;
+ ctx.font = `${fontStyle} ${fontWeight} ${fontSize}px ${fontFamily}`;
+
+ const { chartConfig: { yScale } } = moreProps;
+
+ const x = textBox.left
+ + textBox.padding.left
+ + ctx.measureText(text).width
+ + textBox.padding.right
+ + textBox.closeIcon.padding.left
+ + textBox.closeIcon.width / 2;
+
+ const y = yScale(yValue);
+
+ return [x, y];
+ }
+}
diff --git a/packages/react-financial-charts/src/interactive/components/GannFan.tsx b/packages/react-financial-charts/src/interactive/components/GannFan.tsx
new file mode 100644
index 000000000..16613eb7a
--- /dev/null
+++ b/packages/react-financial-charts/src/interactive/components/GannFan.tsx
@@ -0,0 +1,297 @@
+import { pairs } from "d3-array";
+import { path as d3Path } from "d3-path";
+import * as React from "react";
+
+import GenericChartComponent from "../../GenericChartComponent";
+import { getMouseCanvas } from "../../GenericComponent";
+import { generateLine, isHovering2 } from "./StraightLine";
+
+import {
+ hexToRGBA, isDefined,
+ isNotDefined, noop,
+} from "../../utils";
+
+interface GannFanProps {
+ startXY: number[];
+ endXY: number[];
+ interactiveCursorClass?: string;
+ stroke: string;
+ strokeWidth: number;
+ fill: string[];
+ strokeOpacity: number;
+ fillOpacity: number;
+ fontFamily: string;
+ fontSize: number;
+ fontFill: string;
+ onDragStart: any; // func
+ onDrag: any; // func
+ onDragComplete: any; // func
+ onHover?: any; // func
+ onUnHover?: any; // func
+ defaultClassName?: string;
+ tolerance: number;
+ selected: boolean;
+}
+
+export class GannFan extends React.Component {
+
+ public static defaultProps = {
+ onDragStart: noop,
+ onDrag: noop,
+ onDragComplete: noop,
+ strokeWidth: 1,
+ tolerance: 4,
+ selected: false,
+ };
+
+ public render() {
+ const { selected, interactiveCursorClass } = this.props;
+ const { onDragStart, onDrag, onDragComplete, onHover, onUnHover } = this.props;
+
+ return (
+
+ );
+ }
+
+ private readonly renderSVG = (moreProps) => {
+ const { stroke, strokeWidth, fillOpacity, fill, strokeOpacity } = this.props;
+
+ const lines = this.helper(this.props, moreProps);
+ const pairsOfLines = pairs(lines);
+
+ return (
+
+ {lines.map((each, idx) => {
+ const { x1, y1, x2, y2 } = each;
+ return (
+
+ );
+ })}
+ {pairsOfLines.map(([line1, line2], idx) => {
+ const ctx = d3Path();
+ ctx.moveTo(line1.x1, line1.y1);
+ ctx.lineTo(line1.x2, line1.y2);
+ ctx.lineTo(line2.x2, line2.y2);
+ ctx.closePath();
+ return (
+
+ );
+ })}
+
+ );
+ }
+
+ private readonly drawOnCanvas = (ctx, moreProps) => {
+ const {
+ stroke, strokeWidth, strokeOpacity,
+ fill, fillOpacity,
+ fontFamily, fontSize, fontFill,
+ } = this.props;
+
+ const lines = this.helper(this.props, moreProps);
+
+ ctx.lineWidth = strokeWidth;
+ ctx.strokeStyle = hexToRGBA(stroke, strokeOpacity);
+
+ ctx.font = `${fontSize}px ${fontFamily}`;
+ ctx.fillStyle = fontFill;
+
+ lines.forEach((line) => {
+ const {
+ x1, y1, x2, y2, label,
+ } = line;
+
+ ctx.beginPath();
+ ctx.moveTo(x1, y1);
+ ctx.lineTo(x2, y2);
+ ctx.stroke();
+ ctx.beginPath();
+ ctx.fillText(label.text, label.x, label.y);
+ });
+ const pairsOfLines = pairs(lines);
+
+ pairsOfLines.forEach(([line1, line2], idx) => {
+ ctx.fillStyle = hexToRGBA(fill[idx], fillOpacity);
+
+ ctx.beginPath();
+ ctx.moveTo(line1.x1, line1.y1);
+ ctx.lineTo(line1.x2, line1.y2);
+ ctx.lineTo(line2.x2, line2.y2);
+ ctx.closePath();
+ ctx.fill();
+ });
+ }
+
+ private readonly isHover = (moreProps) => {
+ const { tolerance, onHover } = this.props;
+ const { mouseXY } = moreProps;
+ const [mouseX, mouseY] = mouseXY;
+
+ let hovering = false;
+ if (isDefined(onHover)) {
+
+ const lines = this.helper(this.props, moreProps);
+
+ // tslint:disable-next-line: prefer-for-of
+ for (let i = 0; i < lines.length; i++) {
+ const line1 = lines[i];
+
+ const left = Math.min(line1.x1, line1.x2);
+ const right = Math.max(line1.x1, line1.x2);
+ const top = Math.min(line1.y1, line1.y2);
+ const bottom = Math.max(line1.y1, line1.y2);
+
+ const isWithinLineBounds = mouseX >= left && mouseX <= right
+ && mouseY >= top && mouseY <= bottom;
+
+ hovering = isWithinLineBounds
+ && isHovering2(
+ [line1.x1, line1.y1],
+ [line1.x2, line1.y2],
+ mouseXY,
+ tolerance);
+
+ if (hovering) { break; }
+ }
+ }
+ return hovering;
+ }
+
+ private readonly getLineCoordinates = (start, endX, endY, text) => {
+ const end = [
+ endX,
+ endY,
+ ];
+ return {
+ start, end, text,
+ };
+ }
+
+ private readonly helper = (props: GannFanProps, moreProps) => {
+ const { startXY, endXY } = props;
+
+ const {
+ xScale,
+ chartConfig: { yScale },
+ } = moreProps;
+ if (isNotDefined(startXY) || isNotDefined(endXY)) {
+ return [];
+ }
+ const [x1, y1] = startXY;
+ const [x2, y2] = endXY;
+
+ const dx = x2 - x1;
+ const dy = y2 - y1;
+
+ if (dx !== 0 && dy !== 0) {
+ const halfY = this.getLineCoordinates(
+ startXY,
+ x2,
+ y1 + dy / 2,
+ "2/1",
+ );
+ const oneThirdY = this.getLineCoordinates(
+ startXY,
+ x2,
+ y1 + dy / 3,
+ "3/1",
+ );
+ const oneFourthY = this.getLineCoordinates(
+ startXY,
+ x2,
+ y1 + dy / 4,
+ "4/1",
+ );
+ const oneEighthY = this.getLineCoordinates(
+ startXY,
+ x2,
+ y1 + dy / 8,
+ "8/1",
+ );
+ const halfX = this.getLineCoordinates(
+ startXY,
+ x1 + dx / 2,
+ y2,
+ "1/2",
+ );
+ const oneThirdX = this.getLineCoordinates(
+ startXY,
+ x1 + dx / 3,
+ y2,
+ "1/3",
+ );
+ const oneFourthX = this.getLineCoordinates(
+ startXY,
+ x1 + dx / 4,
+ y2,
+ "1/4",
+ );
+ const oneEighthX = this.getLineCoordinates(
+ startXY,
+ x1 + dx / 8,
+ y2,
+ "1/8",
+ );
+ const lines = [
+ oneEighthX,
+ oneFourthX,
+ oneThirdX,
+ halfX,
+ { start: startXY, end: endXY, text: "1/1" },
+ halfY,
+ oneThirdY,
+ oneFourthY,
+ oneEighthY,
+ ];
+ const lineCoods = lines.map((line) => {
+ // tslint:disable-next-line: no-shadowed-variable
+ const { x1, y1, x2, y2 } = generateLine({
+ type: "RAY",
+ start: line.start,
+ end: line.end,
+ xScale,
+ yScale,
+ });
+ return {
+ x1: xScale(x1),
+ y1: yScale(y1),
+ x2: xScale(x2),
+ y2: yScale(y2),
+ label: {
+ x: xScale(line.end[0]),
+ y: yScale(line.end[1]),
+ text: line.text,
+ },
+ };
+ });
+ return lineCoods;
+ }
+ return [];
+ }
+}
diff --git a/packages/react-financial-charts/src/interactive/components/HoverTextNearMouse.tsx b/packages/react-financial-charts/src/interactive/components/HoverTextNearMouse.tsx
new file mode 100644
index 000000000..6b3486c3e
--- /dev/null
+++ b/packages/react-financial-charts/src/interactive/components/HoverTextNearMouse.tsx
@@ -0,0 +1,197 @@
+import * as React from "react";
+
+import GenericChartComponent from "../../GenericChartComponent";
+import { isDefined } from "../../utils";
+
+const PADDING = 10;
+const MIN_WIDTH = PADDING;
+
+interface HoverTextNearMouseProps {
+ fontFamily: string;
+ fontSize: number;
+ fill: string;
+ text: string;
+ bgFill: string;
+ bgOpacity: number;
+ bgWidth: number | string;
+ bgHeight: number | string;
+ show: boolean;
+}
+
+interface HoverTextNearMouseState {
+ textHeight?: number;
+ textWidth?: number;
+}
+
+export class HoverTextNearMouse extends React.Component {
+
+ public static defaultProps = {
+ fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif",
+ fontSize: 12,
+ fill: "#000000",
+ bgFill: "#FA9325",
+ bgOpacity: 0.5,
+ };
+
+ private textNode;
+
+ public constructor(props: HoverTextNearMouseProps) {
+ super(props);
+
+ this.state = {
+ textWidth: undefined,
+ textHeight: undefined,
+ };
+ }
+
+ public componentDidMount() {
+ this.updateTextSize();
+ }
+
+ public componentDidUpdate() {
+ this.updateTextSize();
+ }
+
+ public render() {
+ const { text } = this.props;
+ if (text) {
+ return (
+
+ );
+ } else {
+ return null;
+ }
+ }
+
+ private readonly renderSVG = (moreProps) => {
+ const {
+ fontFamily,
+ fontSize,
+ fill,
+ bgFill,
+ bgOpacity,
+ } = this.props;
+
+ const textMetaData = helper({
+ ...this.props,
+ bgWidth: this.getBgWidth(),
+ bgHeight: this.getBgHeight(),
+ }, moreProps);
+
+ if (textMetaData !== undefined && isDefined(textMetaData)) {
+ const { rect, text } = textMetaData;
+ return (
+
+
+ {text.text}
+
+ );
+ }
+ }
+
+ private readonly getBgHeight = () => {
+ const { bgHeight } = this.props;
+ const { textHeight } = this.state;
+
+ if (bgHeight !== "auto") {
+ return bgHeight;
+ } else if (textHeight !== undefined) {
+ return textHeight + PADDING;
+ } else {
+ return MIN_WIDTH;
+ }
+ }
+
+ private readonly getBgWidth = () => {
+ const { bgWidth } = this.props;
+ const { textWidth } = this.state;
+
+ if (bgWidth !== "auto") {
+ return bgWidth;
+ } else if (textWidth !== undefined) {
+ return textWidth + PADDING;
+ } else {
+ return MIN_WIDTH;
+ }
+ }
+
+ private readonly updateTextSize = () => {
+ const { bgWidth, bgHeight } = this.props;
+ if (bgWidth === "auto" || bgHeight === "auto") {
+ const textNode = this.textNode;
+ if (textNode) {
+ const { width, height } = textNode.getBBox();
+ if (this.state.textWidth !== width || this.state.textHeight !== height) {
+ this.setState({
+ textWidth: width,
+ textHeight: height,
+ });
+ }
+ }
+ }
+ }
+
+ private readonly saveNode = (node) => {
+ this.textNode = node;
+ }
+}
+
+function helper(props, moreProps) {
+ const {
+ show,
+ bgWidth,
+ bgHeight,
+ } = props;
+
+ const {
+ mouseXY,
+ chartConfig: { height, width },
+ show: mouseInsideCanvas,
+ } = moreProps;
+
+ if (show && mouseInsideCanvas) {
+ const [x, y] = mouseXY;
+
+ const cx = x < width / 2
+ ? x + PADDING
+ : x - bgWidth - PADDING;
+
+ const cy = y < height / 2
+ ? y + PADDING
+ : y - bgHeight - PADDING;
+
+ const rect = {
+ x: cx,
+ y: cy,
+ width: bgWidth,
+ height: bgHeight,
+ };
+
+ const text = {
+ text: props.text,
+ x: cx + PADDING / 2,
+ y: cy + bgHeight / 2,
+ };
+
+ return {
+ rect,
+ text,
+ };
+ }
+}
diff --git a/packages/react-financial-charts/src/interactive/components/InteractiveText.tsx b/packages/react-financial-charts/src/interactive/components/InteractiveText.tsx
new file mode 100644
index 000000000..e69ba9f1b
--- /dev/null
+++ b/packages/react-financial-charts/src/interactive/components/InteractiveText.tsx
@@ -0,0 +1,171 @@
+import * as React from "react";
+
+import GenericChartComponent from "../../GenericChartComponent";
+import { getMouseCanvas } from "../../GenericComponent";
+
+import { hexToRGBA, isDefined, noop } from "../../utils";
+
+interface InteractiveTextProps {
+ bgFill: string;
+ bgOpacity: number;
+ bgStrokeWidth: number;
+ bgStroke: string;
+ textFill: string;
+ fontFamily: string;
+ fontSize: number;
+ fontWeight: number | string;
+ fontStyle: string;
+ text: string;
+ onDragStart: any; // func
+ onDrag: any; // func
+ onDragComplete: any; // func
+ onHover?: any; // func
+ onUnHover?: any; // func
+ position?: any;
+ defaultClassName?: string;
+ interactiveCursorClass?: string;
+ tolerance: number;
+ selected: boolean;
+}
+
+export class InteractiveText extends React.Component {
+
+ public static defaultProps = {
+ onDragStart: noop,
+ onDrag: noop,
+ onDragComplete: noop,
+ type: "SD", // standard dev
+ fontWeight: "normal", // standard dev
+ tolerance: 4,
+ selected: false,
+ };
+
+ private calculateTextWidth = true;
+ private textWidth;
+
+ public UNSAFE_componentWillReceiveProps(nextProps) {
+ this.calculateTextWidth = (
+ nextProps.text !== this.props.text
+ || nextProps.fontStyle !== this.props.fontStyle
+ || nextProps.fontWeight !== this.props.fontWeight
+ || nextProps.fontSize !== this.props.fontSize
+ || nextProps.fontFamily !== this.props.fontFamily
+ );
+ }
+
+ public render() {
+ const { selected, interactiveCursorClass } = this.props;
+ const { onHover, onUnHover } = this.props;
+ const { onDragStart, onDrag, onDragComplete } = this.props;
+
+ return (
+
+ );
+ }
+
+ private readonly isHover = (moreProps) => {
+ const { onHover } = this.props;
+
+ if (
+ isDefined(onHover)
+ && isDefined(this.textWidth)
+ && !this.calculateTextWidth
+ ) {
+ const { rect } = this.helper(this.props, moreProps, this.textWidth);
+ const { mouseXY: [x, y] } = moreProps;
+
+ if (
+ x >= rect.x
+ && y >= rect.y
+ && x <= rect.x + rect.width
+ && y <= rect.y + rect.height
+ ) {
+ return true;
+ }
+ }
+ return false;
+ }
+
+ private readonly drawOnCanvas = (ctx, moreProps) => {
+ const {
+ bgFill,
+ bgOpacity,
+ bgStrokeWidth,
+ bgStroke,
+ textFill,
+ fontFamily,
+ fontSize,
+ fontStyle,
+ fontWeight,
+ text,
+ } = this.props;
+
+ if (this.calculateTextWidth) {
+ ctx.font = `${fontStyle} ${fontWeight} ${fontSize}px ${fontFamily}`;
+ const { width } = ctx.measureText(text);
+ this.textWidth = width;
+ this.calculateTextWidth = false;
+ }
+
+ const { selected } = this.props;
+
+ const { x, y, rect } = this.helper(this.props, moreProps, this.textWidth);
+
+ ctx.fillStyle = hexToRGBA(bgFill, bgOpacity);
+
+ ctx.beginPath();
+ ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
+
+ if (selected) {
+ ctx.strokeStyle = bgStroke;
+ ctx.lineWidth = bgStrokeWidth;
+ ctx.strokeRect(rect.x, rect.y, rect.width, rect.height);
+ }
+
+ ctx.fillStyle = textFill;
+ ctx.textBaseline = "middle";
+ ctx.textAlign = "center";
+ ctx.font = `${fontStyle} ${fontWeight} ${fontSize}px ${fontFamily}`;
+
+ ctx.beginPath();
+ ctx.fillText(text, x, y);
+ }
+
+ private readonly renderSVG = () => {
+ throw new Error("svg not implemented");
+ }
+
+ private readonly helper = (props, moreProps, textWidth) => {
+ const { position, fontSize } = props;
+
+ const { xScale, chartConfig: { yScale } } = moreProps;
+
+ const [xValue, yValue] = position;
+ const x = xScale(xValue);
+ const y = yScale(yValue);
+
+ const rect = {
+ x: x - textWidth / 2 - fontSize,
+ y: y - fontSize,
+ width: textWidth + fontSize * 2,
+ height: fontSize * 2,
+ };
+
+ return {
+ x, y, rect,
+ };
+ }
+}
diff --git a/packages/react-financial-charts/src/interactive/components/InteractiveYCoordinate.tsx b/packages/react-financial-charts/src/interactive/components/InteractiveYCoordinate.tsx
new file mode 100644
index 000000000..7b16fdc38
--- /dev/null
+++ b/packages/react-financial-charts/src/interactive/components/InteractiveYCoordinate.tsx
@@ -0,0 +1,212 @@
+import * as React from "react";
+
+import { drawOnCanvas } from "../../coordinates/EdgeCoordinateV3";
+import { getYCoordinate } from "../../coordinates/MouseCoordinateY";
+import GenericChartComponent from "../../GenericChartComponent";
+import { getMouseCanvas } from "../../GenericComponent";
+import { getStrokeDasharrayCanvas, hexToRGBA, isDefined, noop } from "../../utils";
+
+interface InteractiveYCoordinateProps {
+ bgFill: string;
+ bgOpacity: number;
+ stroke: string;
+ strokeWidth: number;
+ strokeOpacity: number;
+ strokeDasharray: string;
+ textFill: string;
+ fontFamily: string;
+ fontSize: number;
+ fontWeight: number | string;
+ fontStyle: string;
+ text: string;
+ edge: object;
+ textBox: {
+ closeIcon: any;
+ padding: any;
+ };
+ yValue: number;
+ onDragStart: any; // func
+ onDrag: any; // func
+ onDragComplete: any; // func
+ onHover?: any; // func
+ onUnHover?: any; // func
+ defaultClassName?: string;
+ interactiveCursorClass?: string;
+ tolerance: number;
+ selected: boolean;
+ hovering: boolean;
+}
+
+export class InteractiveYCoordinate extends React.Component {
+
+ public static defaultProps = {
+ onDragStart: noop,
+ onDrag: noop,
+ onDragComplete: noop,
+ fontWeight: "normal", // standard dev
+ strokeWidth: 1,
+ tolerance: 4,
+ selected: false,
+ hovering: false,
+ };
+
+ private width;
+
+ public render() {
+ const { interactiveCursorClass } = this.props;
+ const { onHover, onUnHover } = this.props;
+ const { onDragStart, onDrag, onDragComplete } = this.props;
+
+ return (
+
+ );
+ }
+
+ private readonly renderSVG = () => {
+ throw new Error("svg not implemented");
+ }
+
+ private readonly drawOnCanvas = (ctx, moreProps) => {
+ const {
+ bgFill,
+ bgOpacity,
+
+ textFill,
+ fontFamily,
+ fontSize,
+
+ fontStyle,
+ fontWeight,
+ stroke,
+ strokeWidth,
+ strokeOpacity,
+ strokeDasharray,
+ text,
+ textBox,
+ edge,
+ } = this.props;
+
+ const { selected, hovering } = this.props;
+
+ const values = helper(this.props, moreProps);
+ if (values == null) { return; }
+
+ const { x1, x2, y, rect } = values;
+
+ ctx.strokeStyle = hexToRGBA(stroke, strokeOpacity);
+
+ ctx.beginPath();
+ if (selected || hovering) {
+ ctx.lineWidth = strokeWidth + 1;
+ } else {
+ ctx.lineWidth = strokeWidth;
+ }
+ ctx.textBaseline = "middle";
+ ctx.textAlign = "start";
+ ctx.font = `${fontStyle} ${fontWeight} ${fontSize}px ${fontFamily}`;
+
+ this.width = textBox.padding.left
+ + ctx.measureText(text).width
+ + textBox.padding.right
+ + textBox.closeIcon.padding.left
+ + textBox.closeIcon.width
+ + textBox.closeIcon.padding.right;
+
+ ctx.setLineDash(getStrokeDasharrayCanvas(strokeDasharray));
+ ctx.moveTo(x1, y);
+ ctx.lineTo(rect.x, y);
+
+ ctx.moveTo(rect.x + this.width, y);
+ ctx.lineTo(x2, y);
+ ctx.stroke();
+
+ ctx.setLineDash([]);
+
+ ctx.fillStyle = hexToRGBA(bgFill, bgOpacity);
+
+ ctx.fillRect(rect.x, rect.y, this.width, rect.height);
+ ctx.strokeRect(rect.x, rect.y, this.width, rect.height);
+
+ ctx.fillStyle = textFill;
+
+ ctx.beginPath();
+ ctx.fillText(text, rect.x + 10, y);
+ const newEdge = {
+ ...edge,
+ textFill,
+ fontFamily,
+ fontSize,
+ opacity: bgOpacity,
+ };
+
+ // @ts-ignore
+ const yValue = edge.displayFormat(this.props.yValue);
+ const yCoord = getYCoordinate(y, yValue, newEdge, moreProps);
+ drawOnCanvas(ctx, yCoord);
+ }
+
+ private readonly isHover = (moreProps) => {
+ const { onHover } = this.props;
+
+ if (isDefined(onHover)) {
+ const values = helper(this.props, moreProps);
+ if (values == null) { return false; }
+
+ const { x1, x2, y, rect } = values;
+ const { mouseXY: [mouseX, mouseY] } = moreProps;
+
+ if (
+ mouseX >= rect.x
+ && mouseX <= rect.x + this.width
+ && mouseY >= rect.y
+ && mouseY <= rect.y + rect.height
+ ) {
+ return true;
+ }
+ if (
+ x1 <= mouseX
+ && x2 >= mouseX
+ && Math.abs(mouseY - y) < 4
+ ) {
+ return true;
+ }
+ }
+ return false;
+ }
+}
+
+function helper(props, moreProps) {
+ const { yValue, textBox } = props;
+
+ const { chartConfig: { width, yScale, height } } = moreProps;
+
+ const y = Math.round(yScale(yValue));
+
+ if (y >= 0 && y <= height) {
+ const rect = {
+ x: textBox.left,
+ y: y - textBox.height / 2,
+ height: textBox.height,
+ };
+ return {
+ x1: 0,
+ x2: width,
+ y,
+ rect,
+ };
+ }
+}
diff --git a/packages/react-financial-charts/src/interactive/components/LinearRegressionChannelWithArea.tsx b/packages/react-financial-charts/src/interactive/components/LinearRegressionChannelWithArea.tsx
new file mode 100644
index 000000000..16f0e4d2c
--- /dev/null
+++ b/packages/react-financial-charts/src/interactive/components/LinearRegressionChannelWithArea.tsx
@@ -0,0 +1,221 @@
+import { deviation, sum } from "d3-array";
+import { path as d3Path } from "d3-path";
+import * as React from "react";
+
+import GenericChartComponent from "../../GenericChartComponent";
+import { getMouseCanvas } from "../../GenericComponent";
+import { isHovering2 } from "./StraightLine";
+
+import { getClosestItemIndexes, hexToRGBA, isDefined, noop, zipper } from "../../utils";
+
+interface LinearRegressionChannelWithAreaProps {
+ x1Value: any;
+ x2Value: any;
+ type:
+ "SD" | // standard deviation channel
+ "Raff"; // Raff Regression Channel
+ interactiveCursorClass?: string;
+ stroke: string;
+ strokeWidth: number;
+ fill: string;
+ fillOpacity: number;
+ strokeOpacity: number;
+ onDragStart: any; // func
+ onDrag: any; // func
+ onDragComplete: any; // func
+ onHover?: any; // func
+ onUnHover?: any; // func
+ defaultClassName?: string;
+ tolerance: number;
+ selected: boolean;
+}
+
+export class LinearRegressionChannelWithArea extends React.Component {
+
+ public static defaultProps = {
+ onDragStart: noop,
+ onDrag: noop,
+ onDragComplete: noop,
+ type: "SD", // standard dev
+ strokeWidth: 1,
+ tolerance: 4,
+ selected: false,
+ };
+
+ public render() {
+ const { selected, interactiveCursorClass } = this.props;
+ const { onHover, onUnHover } = this.props;
+
+ return ;
+ }
+
+ private readonly renderSVG = (moreProps) => {
+ const { stroke, strokeWidth, fillOpacity, strokeOpacity, fill } = this.props;
+ const { x1, y1, x2, y2, dy } = helper(this.props, moreProps);
+ const line = {
+ strokeWidth,
+ stroke,
+ strokeOpacity,
+ };
+ const ctx = d3Path();
+ ctx.moveTo(x1, y1 - dy);
+ ctx.lineTo(x2, y2 - dy);
+ ctx.lineTo(x2, y2 + dy);
+ ctx.lineTo(x1, y1 + dy);
+ ctx.closePath();
+ return (
+
+
+
+
+
+
+ );
+ }
+
+ private readonly drawOnCanvas = (ctx, moreProps) => {
+ const { stroke, strokeWidth, fillOpacity, strokeOpacity, fill } = this.props;
+ const { x1, y1, x2, y2, dy } = helper(this.props, moreProps);
+
+ ctx.lineWidth = strokeWidth;
+ ctx.strokeStyle = hexToRGBA(stroke, strokeOpacity);
+ ctx.fillStyle = hexToRGBA(fill, fillOpacity);
+
+ ctx.beginPath();
+ ctx.moveTo(x1, y1 - dy);
+ ctx.lineTo(x2, y2 - dy);
+ ctx.stroke();
+
+ ctx.beginPath();
+ ctx.moveTo(x2, y2 + dy);
+ ctx.lineTo(x1, y1 + dy);
+ ctx.stroke();
+
+ ctx.beginPath();
+ ctx.moveTo(x1, y1 - dy);
+ ctx.lineTo(x2, y2 - dy);
+ ctx.lineTo(x2, y2 + dy);
+ ctx.lineTo(x1, y1 + dy);
+ ctx.closePath();
+ ctx.fill();
+
+ ctx.beginPath();
+ ctx.moveTo(x2, y2);
+ ctx.lineTo(x1, y1);
+ ctx.stroke();
+ }
+
+ private readonly isHover = (moreProps) => {
+ const { tolerance, onHover } = this.props;
+
+ if (isDefined(onHover)) {
+ const { mouseXY } = moreProps;
+
+ const { x1, y1, x2, y2, dy } = helper(this.props, moreProps);
+ const yDiffs = [-dy, 0, dy];
+
+ const hovering = yDiffs.reduce((result, diff) => result || isHovering2(
+ [x1, y1 + diff], [x2, y2 + diff], mouseXY, tolerance,
+ ), false);
+ return hovering;
+ }
+ return false;
+ }
+}
+
+export function edge1Provider(props) {
+ return function (moreProps) {
+ const { x1, y1 } = helper(props, moreProps);
+ return [x1, y1];
+ };
+}
+
+export function edge2Provider(props) {
+ return function (moreProps) {
+ const { x2, y2 } = helper(props, moreProps);
+ return [x2, y2];
+ };
+}
+
+function helper(props, moreProps) {
+ const { x1Value, x2Value, type } = props;
+
+ const { xScale, chartConfig: { yScale }, fullData } = moreProps;
+ const { xAccessor } = moreProps;
+
+ const { left } = getClosestItemIndexes(fullData, x1Value, xAccessor);
+ const { right } = getClosestItemIndexes(fullData, x2Value, xAccessor);
+
+ const startIndex = Math.min(left, right);
+ const endIndex = Math.max(left, right) + 1;
+
+ const array = fullData.slice(startIndex, endIndex);
+
+ const xs = array.map((d) => xAccessor(d).valueOf());
+ const ys = array.map((d) => d.close);
+ const n = array.length;
+
+ const combine = zipper()
+ .combine((x, y) => x * y);
+
+ // @ts-ignore
+ const xys = combine(xs, ys);
+ const xSquareds = xs.map((x) => Math.pow(x, 2));
+
+ const b = (n * sum(xys) - sum(xs) * sum(ys)) / (n * sum(xSquareds) - Math.pow(sum(xs), 2));
+ const a = (sum(ys) - b * sum(xs)) / n;
+
+ const newy1 = a + b * x1Value;
+ const newy2 = a + b * x2Value;
+
+ const x1 = xScale(x1Value);
+ const y1 = yScale(newy1);
+ const x2 = xScale(x2Value);
+ const y2 = yScale(newy2);
+
+ const stdDev = type === "SD"
+ ? deviation(array, (d) => d.close)
+ : 0;
+
+ const dy = yScale(newy1 - stdDev) - y1;
+
+ return {
+ x1, y1, x2, y2, dy,
+ };
+}
diff --git a/packages/react-financial-charts/src/interactive/components/MouseLocationIndicator.tsx b/packages/react-financial-charts/src/interactive/components/MouseLocationIndicator.tsx
new file mode 100644
index 000000000..e4fe4543d
--- /dev/null
+++ b/packages/react-financial-charts/src/interactive/components/MouseLocationIndicator.tsx
@@ -0,0 +1,149 @@
+import * as React from "react";
+
+import GenericChartComponent from "../../GenericChartComponent";
+import { getMouseCanvas } from "../../GenericComponent";
+
+import { functor, getClosestValue, isDefined, noop, shallowEqual } from "../../utils";
+import { getXValue } from "../../utils/ChartDataUtil";
+
+interface MouseLocationIndicatorProps {
+ enabled: boolean;
+ snap: boolean;
+ shouldDisableSnap: any; // func;
+ snapTo?: any; // func;
+ onMouseMove: any; // func;
+ onMouseDown: any; // func;
+ onClick: any; // func;
+ r?: number;
+ stroke: string;
+ strokeWidth: number;
+ opacity: number;
+ disablePan: boolean;
+}
+
+export class MouseLocationIndicator extends React.Component {
+
+ public static defaultProps = {
+ onMouseMove: noop,
+ onMouseDown: noop,
+ onClick: noop,
+ shouldDisableSnap: functor(false),
+ stroke: "#000000",
+ strokeWidth: 1,
+ opacity: 1,
+ disablePan: true,
+ };
+
+ private mutableState;
+
+ constructor(props) {
+ super(props);
+ this.renderSVG = this.renderSVG.bind(this);
+ this.drawOnCanvas = this.drawOnCanvas.bind(this);
+
+ this.handleMousePosChange = this.handleMousePosChange.bind(this);
+ this.handleMouseDown = this.handleMouseDown.bind(this);
+ this.handleClick = this.handleClick.bind(this);
+ this.xy = this.xy.bind(this);
+
+ this.mutableState = {};
+ }
+
+ public render() {
+ const { enabled, disablePan } = this.props;
+
+ return (
+
+ );
+ }
+
+ private readonly xy = (moreProps, e) => {
+ const { xAccessor, plotData } = moreProps;
+ const { mouseXY, currentItem, xScale, chartConfig: { yScale } } = moreProps;
+ const { enabled, snap, shouldDisableSnap, snapTo } = this.props;
+
+ if (enabled && isDefined(currentItem) && isDefined(e)) {
+ const xValue = snap && !shouldDisableSnap(e)
+ ? xAccessor(currentItem)
+ : getXValue(xScale, xAccessor, mouseXY, plotData);
+ const yValue = snap && !shouldDisableSnap(e)
+ ? getClosestValue(snapTo(currentItem), yScale.invert(mouseXY[1]))
+ : yScale.invert(mouseXY[1]);
+
+ const x = xScale(xValue);
+ const y = yScale(yValue);
+
+ return { xValue, yValue, x, y };
+ }
+ }
+
+ private readonly handleClick = (moreProps, e) => {
+ const pos = this.xy(moreProps, e);
+ if (pos !== undefined && isDefined(pos)) {
+ const { xValue, yValue, x, y } = pos;
+ this.mutableState = { x, y };
+ this.props.onClick([xValue, yValue], moreProps, e);
+ }
+ }
+
+ private readonly handleMouseDown = (moreProps, e) => {
+ const pos = this.xy(moreProps, e);
+ if (pos !== undefined && isDefined(pos)) {
+ const { xValue, yValue, x, y } = pos;
+ this.mutableState = { x, y };
+ this.props.onMouseDown([xValue, yValue], moreProps, e);
+ }
+ }
+
+ private readonly handleMousePosChange = (moreProps, e) => {
+ if (!shallowEqual(moreProps.mousXY, moreProps.prevMouseXY)) {
+ const pos = this.xy(moreProps, e);
+ if (pos !== undefined && isDefined(pos)) {
+ const { xValue, yValue, x, y } = pos;
+ this.mutableState = { x, y };
+ this.props.onMouseMove([xValue, yValue], e);
+ }
+ }
+ }
+
+ private readonly drawOnCanvas = (ctx, moreProps) => {
+ const { enabled, r, stroke, strokeWidth } = this.props;
+ const { x, y } = this.mutableState;
+ const { show } = moreProps;
+ if (enabled && show && isDefined(x)) {
+ ctx.lineWidth = strokeWidth;
+ ctx.strokeStyle = stroke;
+ ctx.moveTo(x, y);
+ ctx.beginPath();
+ ctx.arc(x, y, r, 0, 2 * Math.PI, false);
+ ctx.stroke();
+ }
+ }
+
+ private readonly renderSVG = (moreProps) => {
+ const { enabled, r, stroke, strokeWidth, opacity } = this.props;
+ const { x, y } = this.mutableState;
+ const { show } = moreProps;
+
+ return enabled && show && isDefined(x)
+ ?
+ : null;
+ }
+}
diff --git a/packages/react-financial-charts/src/interactive/components/StraightLine.tsx b/packages/react-financial-charts/src/interactive/components/StraightLine.tsx
new file mode 100644
index 000000000..cfa2a90d8
--- /dev/null
+++ b/packages/react-financial-charts/src/interactive/components/StraightLine.tsx
@@ -0,0 +1,328 @@
+import * as React from "react";
+
+import GenericChartComponent from "../../GenericChartComponent";
+import { getMouseCanvas } from "../../GenericComponent";
+
+import {
+ getStrokeDasharray,
+ hexToRGBA,
+ isDefined,
+ noop,
+ strokeDashTypes,
+} from "../../utils";
+
+interface StraightLineProps {
+ x1Value: any;
+ x2Value: any;
+ y1Value: any;
+ y2Value: any;
+
+ interactiveCursorClass?: string;
+ stroke: string;
+ strokeWidth: number;
+ strokeOpacity: number;
+ strokeDasharray: strokeDashTypes;
+ type:
+ "XLINE" | // extends from -Infinity to +Infinity
+ "RAY" | // extends to +/-Infinity in one direction
+ "LINE"; // extends between the set bounds
+
+ onEdge1Drag: any; // func
+ onEdge2Drag: any; // func
+ onDragStart: any; // func
+ onDrag: any; // func
+ onDragComplete: any; // func
+ onHover?: any; // func
+ onUnHover?: any; // func
+ defaultClassName?: string;
+ r: number;
+ edgeFill: string;
+ edgeStroke: string;
+ edgeStrokeWidth: number;
+ withEdge: boolean;
+ children: any; // func
+ tolerance: number;
+ selected: boolean;
+}
+
+class StraightLine extends React.Component {
+
+ public static defaultProps = {
+ onEdge1Drag: noop,
+ onEdge2Drag: noop,
+ onDragStart: noop,
+ onDrag: noop,
+ onDragComplete: noop,
+ edgeStrokeWidth: 3,
+ edgeStroke: "#000000",
+ edgeFill: "#FFFFFF",
+ r: 10,
+ withEdge: false,
+ strokeWidth: 1,
+ strokeDasharray: "Solid",
+ children: noop,
+ tolerance: 7,
+ selected: false,
+ };
+
+ public render() {
+ const { selected, interactiveCursorClass } = this.props;
+ const { onDragStart, onDrag, onDragComplete, onHover, onUnHover } = this.props;
+
+ return (
+
+ );
+ }
+
+ private readonly isHover = (moreProps) => {
+ const { tolerance, onHover } = this.props;
+
+ if (isDefined(onHover)) {
+ const { x1Value, x2Value, y1Value, y2Value, type } = this.props;
+ const { mouseXY, xScale } = moreProps;
+ const { chartConfig: { yScale } } = moreProps;
+
+ const hovering = isHovering({
+ x1Value, y1Value,
+ x2Value, y2Value,
+ mouseXY,
+ type,
+ tolerance,
+ xScale,
+ yScale,
+ });
+
+ return hovering;
+ }
+ return false;
+ }
+
+ private readonly renderSVG = (moreProps) => {
+ const { stroke, strokeWidth, strokeOpacity, strokeDasharray } = this.props;
+
+ const lineWidth = strokeWidth;
+
+ const { x1, y1, x2, y2 } = helper(this.props, moreProps);
+ return (
+
+ );
+ }
+
+ private readonly drawOnCanvas = (ctx, moreProps) => {
+ const { stroke, strokeWidth, strokeOpacity, strokeDasharray } = this.props;
+ const { x1, y1, x2, y2 } = helper(this.props, moreProps);
+
+ ctx.lineWidth = strokeWidth;
+ ctx.strokeStyle = hexToRGBA(stroke, strokeOpacity);
+ ctx.setLineDash(getStrokeDasharray(strokeDasharray).split(","));
+
+ ctx.beginPath();
+ ctx.moveTo(x1, y1);
+ ctx.lineTo(x2, y2);
+ ctx.stroke();
+ }
+}
+
+export function isHovering2(start, end, [mouseX, mouseY], tolerance) {
+ const m = getSlope(start, end);
+
+ if (m !== undefined && isDefined(m)) {
+ const b = getYIntercept(m, end);
+ const y = m * mouseX + b;
+ return (mouseY < y + tolerance)
+ && mouseY > (y - tolerance)
+ && mouseX > Math.min(start[0], end[0]) - tolerance
+ && mouseX < Math.max(start[0], end[0]) + tolerance;
+ } else {
+ return mouseY >= Math.min(start[1], end[1])
+ && mouseY <= Math.max(start[1], end[1])
+ && mouseX < start[0] + tolerance
+ && mouseX > start[0] - tolerance;
+ }
+}
+
+export function isHovering({
+ x1Value, y1Value,
+ x2Value, y2Value,
+ mouseXY,
+ type,
+ tolerance,
+ xScale,
+ yScale,
+}) {
+
+ const line = generateLine({
+ type,
+ start: [x1Value, y1Value],
+ end: [x2Value, y2Value],
+ xScale,
+ yScale,
+ });
+
+ const start = [xScale(line.x1), yScale(line.y1)];
+ const end = [xScale(line.x2), yScale(line.y2)];
+
+ const m = getSlope(start, end);
+ const [mouseX, mouseY] = mouseXY;
+
+ if (m !== undefined && isDefined(m)) {
+ const b = getYIntercept(m, end);
+ const y = m * mouseX + b;
+
+ return mouseY < (y + tolerance)
+ && mouseY > (y - tolerance)
+ && mouseX > Math.min(start[0], end[0]) - tolerance
+ && mouseX < Math.max(start[0], end[0]) + tolerance;
+ } else {
+ return mouseY >= Math.min(start[1], end[1])
+ && mouseY <= Math.max(start[1], end[1])
+ && mouseX < start[0] + tolerance
+ && mouseX > start[0] - tolerance;
+ }
+}
+
+function helper(props, moreProps) {
+ const { x1Value, x2Value, y1Value, y2Value, type } = props;
+
+ const { xScale, chartConfig: { yScale } } = moreProps;
+
+ const modLine = generateLine({
+ type,
+ start: [x1Value, y1Value],
+ end: [x2Value, y2Value],
+ xScale,
+ yScale,
+ });
+
+ const x1 = xScale(modLine.x1);
+ const y1 = yScale(modLine.y1);
+ const x2 = xScale(modLine.x2);
+ const y2 = yScale(modLine.y2);
+
+ return {
+ x1, y1, x2, y2,
+ };
+}
+
+export function getSlope(start, end) {
+ const m /* slope */ = end[0] === start[0]
+ ? undefined
+ : (end[1] - start[1]) / (end[0] - start[0]);
+ return m;
+}
+export function getYIntercept(m, end) {
+ const b /* y intercept */ = -1 * m * end[0] + end[1];
+ return b;
+}
+
+export function generateLine({
+ type, start, end, xScale, yScale,
+}) {
+ const m /* slope */ = getSlope(start, end);
+ // console.log(end[0] - start[0], m)
+ const b /* y intercept */ = getYIntercept(m, start);
+
+ switch (type) {
+ case "XLINE":
+ return getXLineCoordinates({
+ start, end, xScale, yScale, m, b,
+ });
+ case "RAY":
+ return getRayCoordinates({
+ start, end, xScale, yScale, m, b,
+ });
+ default:
+ case "LINE":
+ return getLineCoordinates({
+ start, end,
+ });
+ }
+}
+
+function getXLineCoordinates({
+ start, end, xScale, yScale, m, b,
+}) {
+ const [xBegin, xFinish] = xScale.domain();
+ const [yBegin, yFinish] = yScale.domain();
+
+ if (end[0] === start[0]) {
+ return {
+ x1: end[0], y1: yBegin,
+ x2: end[0], y2: yFinish,
+ };
+ }
+ const [x1, x2] = end[0] > start[0]
+ ? [xBegin, xFinish]
+ : [xFinish, xBegin];
+
+ return {
+ x1, y1: m * x1 + b,
+ x2, y2: m * x2 + b,
+ };
+}
+
+function getRayCoordinates({
+ start, end, xScale, yScale, m, b,
+}) {
+ const [xBegin, xFinish] = xScale.domain();
+ const [yBegin, yFinish] = yScale.domain();
+
+ const x1 = start[0];
+ if (end[0] === start[0]) {
+ return {
+ x1,
+ y1: start[1],
+ x2: x1,
+ y2: end[1] > start[1] ? yFinish : yBegin,
+ };
+ }
+
+ const x2 = end[0] > start[0]
+ ? xFinish
+ : xBegin;
+
+ return {
+ x1, y1: m * x1 + b,
+ x2, y2: m * x2 + b,
+ };
+}
+
+function getLineCoordinates({
+ start, end,
+}) {
+
+ const [x1, y1] = start;
+ const [x2, y2] = end;
+ if (end[0] === start[0]) {
+ return {
+ x1,
+ y1: start[1],
+ x2: x1,
+ y2: end[1],
+ };
+ }
+
+ return {
+ x1, y1,
+ x2, y2,
+ };
+}
+
+export default StraightLine;
diff --git a/packages/react-financial-charts/src/interactive/components/Text.tsx b/packages/react-financial-charts/src/interactive/components/Text.tsx
new file mode 100644
index 000000000..36da57ec8
--- /dev/null
+++ b/packages/react-financial-charts/src/interactive/components/Text.tsx
@@ -0,0 +1,74 @@
+import * as React from "react";
+
+import GenericChartComponent from "../../GenericChartComponent";
+import { getMouseCanvas } from "../../GenericComponent";
+
+interface TextProps {
+ xyProvider: (moreProps: any) => number[];
+ fontFamily: string;
+ fontSize: number;
+ fill: string;
+ children: string;
+ selected: boolean;
+}
+
+export class Text extends React.Component {
+
+ public static defaultProps = {
+ selected: false,
+ };
+
+ public render() {
+ const { selected } = this.props;
+
+ return (
+
+ );
+ }
+
+ private readonly isHover = () => {
+ return false;
+ }
+
+ private readonly drawOnCanvas = (ctx, moreProps) => {
+ const {
+ xyProvider,
+ fontFamily,
+ fontSize,
+ fill,
+ children,
+ } = this.props;
+ const [x, y] = xyProvider(moreProps);
+
+ ctx.font = `${fontSize}px ${fontFamily}`;
+ ctx.fillStyle = fill;
+
+ ctx.beginPath();
+ ctx.fillText(children, x, y);
+ }
+
+ private readonly renderSVG = (moreProps) => {
+ const {
+ xyProvider,
+ fontFamily,
+ fontSize,
+ fill,
+ children,
+ } = this.props;
+ const [x, y] = xyProvider(moreProps);
+
+ return {children};
+ }
+}
diff --git a/packages/react-financial-charts/src/interactive/index.ts b/packages/react-financial-charts/src/interactive/index.ts
new file mode 100644
index 000000000..03ea2aa7d
--- /dev/null
+++ b/packages/react-financial-charts/src/interactive/index.ts
@@ -0,0 +1,10 @@
+export { TrendLine } from "./TrendLine";
+export { FibonacciRetracement } from "./FibonacciRetracement";
+export { EquidistantChannel } from "./EquidistantChannel";
+export { StandardDeviationChannel } from "./StandardDeviationChannel";
+export { GannFan } from "./GannFan";
+export { ClickCallback } from "./ClickCallback";
+export { Brush } from "./Brush";
+export { InteractiveText } from "./InteractiveText";
+export { InteractiveYCoordinate } from "./InteractiveYCoordinate";
+export { DrawingObjectSelector } from "./DrawingObjectSelector";
diff --git a/packages/react-financial-charts/src/interactive/utils.ts b/packages/react-financial-charts/src/interactive/utils.ts
new file mode 100644
index 000000000..561fd5ca2
--- /dev/null
+++ b/packages/react-financial-charts/src/interactive/utils.ts
@@ -0,0 +1,103 @@
+import {
+ find,
+ isDefined,
+ isNotDefined,
+ mapObject,
+} from "../utils";
+
+export function getValueFromOverride(override, index, key, defaultValue) {
+ if (isDefined(override) && override.index === index) {
+ return override[key];
+ }
+ return defaultValue;
+}
+
+export function terminate() {
+ // @ts-ignore
+ this.setState({
+ current: null,
+ override: null,
+ });
+}
+
+export function saveNodeType(type) {
+ return (node) => {
+ // @ts-ignore
+ if (isNotDefined(node) && isDefined(this.nodes[type])) {
+ // @ts-ignore
+ delete this.nodes[type];
+ } else {
+ // @ts-ignore
+ this.nodes[type] = node;
+ }
+ // console.error(this.nodes)
+ };
+}
+export function isHoverForInteractiveType(interactiveType) {
+ return function (moreProps) { // this has to be function as it is bound to this
+
+ // @ts-ignore
+ if (isDefined(this.nodes)) {
+ // @ts-ignore
+ const selecedNodes = this.nodes
+ .map((node) => node.isHover(moreProps));
+ // @ts-ignore
+ const interactive = this.props[interactiveType].map((t, idx) => {
+ return {
+ ...t,
+ selected: selecedNodes[idx],
+ };
+ });
+ return interactive;
+ }
+ };
+}
+
+export function isHover(moreProps) {
+ // @ts-ignore
+ const hovering = mapObject(this.nodes, (node) => node.isHover(moreProps))
+ .reduce((a, b) => {
+ return a || b;
+ });
+ return hovering;
+}
+
+function getMouseXY(moreProps, [ox, oy]) {
+ if (Array.isArray(moreProps.mouseXY)) {
+ const { mouseXY: [x, y] } = moreProps;
+ const mouseXY = [
+ x - ox,
+ y - oy,
+ ];
+ return mouseXY;
+ }
+ return moreProps.mouseXY;
+}
+
+export function getMorePropsForChart(moreProps, chartId) {
+ const { chartConfig: chartConfigList } = moreProps;
+ const chartConfig = find(chartConfigList, (each) => each.id === chartId);
+
+ const { origin } = chartConfig;
+ const mouseXY = getMouseXY(moreProps, origin);
+ return {
+ ...moreProps,
+ chartConfig,
+ mouseXY,
+ };
+}
+
+export function getSelected(interactives) {
+ const selected = interactives
+ .map((each) => {
+ const objects = each.objects.filter((obj) => {
+ return obj.selected;
+ });
+ return {
+ ...each,
+ objects,
+ };
+ })
+ .filter((each) => each.objects.length > 0);
+ return selected;
+}
diff --git a/packages/react-financial-charts/src/interactive/wrapper/EachEquidistantChannel.tsx b/packages/react-financial-charts/src/interactive/wrapper/EachEquidistantChannel.tsx
new file mode 100644
index 000000000..62bfc79c5
--- /dev/null
+++ b/packages/react-financial-charts/src/interactive/wrapper/EachEquidistantChannel.tsx
@@ -0,0 +1,310 @@
+import * as React from "react";
+
+import { isDefined, noop } from "../../utils";
+import { getXValue } from "../../utils/ChartDataUtil";
+import { isHover, saveNodeType } from "../utils";
+
+import { ChannelWithArea } from "../components/ChannelWithArea";
+import { ClickableCircle } from "../components/ClickableCircle";
+import { HoverTextNearMouse } from "../components/HoverTextNearMouse";
+
+interface EachEquidistantChannelProps {
+ readonly startXY: number[];
+ readonly endXY: number[];
+ readonly dy?: number;
+ readonly interactive: boolean;
+ readonly selected: boolean;
+ readonly hoverText: {
+ enable: boolean;
+ fontFamily: string;
+ fontSize: number;
+ fill: string;
+ text: string;
+ bgFill: string;
+ bgOpacity: number;
+ bgWidth: number | string;
+ bgHeight: number | string;
+ };
+ readonly appearance: {
+ stroke: string;
+ fillOpacity: number;
+ strokeOpacity: number;
+ strokeWidth: number;
+ fill: string;
+ edgeStroke: string;
+ edgeFill: string;
+ edgeFill2: string;
+ edgeStrokeWidth: number;
+ r: number;
+ };
+ readonly index?: number;
+ readonly onDrag: any; // func
+ readonly onDragComplete: any; // func
+}
+
+interface EachEquidistantChannelState {
+ hover: boolean;
+}
+
+export class EachEquidistantChannel extends React.Component {
+
+ public static defaultProps = {
+ yDisplayFormat: (d) => d.toFixed(2),
+ interactive: true,
+ selected: false,
+ onDrag: noop,
+ onDragComplete: noop,
+ hoverText: {
+ enable: false,
+ },
+ };
+
+ private dragStart;
+ // @ts-ignore
+ private isHover;
+ private saveNodeType;
+
+ constructor(props: EachEquidistantChannelProps) {
+ super(props);
+
+ this.isHover = isHover.bind(this);
+ this.saveNodeType = saveNodeType.bind(this);
+
+ this.state = {
+ hover: false,
+ };
+ }
+
+ public render() {
+ const { startXY, endXY, dy } = this.props;
+ const { interactive, hoverText, appearance } = this.props;
+ const {
+ edgeFill, edgeFill2,
+ stroke, strokeWidth, strokeOpacity,
+ fill, fillOpacity,
+ } = appearance;
+ const { selected } = this.props;
+ const { onDragComplete } = this.props;
+ const { hover } = this.state;
+ const { enable: hoverTextEnabled, ...restHoverTextProps } = hoverText;
+
+ const hoverHandler = interactive
+ ? { onHover: this.handleHover, onUnHover: this.handleHover }
+ : {};
+
+ const line1Edge = isDefined(startXY) && isDefined(endXY)
+ ?
+ {this.getEdgeCircle({
+ xy: startXY,
+ dragHandler: this.handleLine1Edge1Drag,
+ cursor: "react-stockcharts-move-cursor",
+ fill: edgeFill,
+ edge: "line1edge1",
+ })}
+ {this.getEdgeCircle({
+ xy: endXY,
+ dragHandler: this.handleLine1Edge2Drag,
+ cursor: "react-stockcharts-move-cursor",
+ fill: edgeFill,
+ edge: "line1edge2",
+ })}
+
+ : null;
+ const line2Edge = dy !== undefined && isDefined(dy)
+ ?
+ {this.getEdgeCircle({
+ xy: [startXY[0], startXY[1] + dy],
+ dragHandler: this.handleChannelHeightChange,
+ cursor: "react-stockcharts-ns-resize-cursor",
+ fill: edgeFill2,
+ edge: "line2edge1",
+ })}
+ {this.getEdgeCircle({
+ xy: [endXY[0], endXY[1] + dy],
+ dragHandler: this.handleChannelHeightChange,
+ cursor: "react-stockcharts-ns-resize-cursor",
+ fill: edgeFill2,
+ edge: "line2edge2",
+ })}
+
+ : null;
+
+ return
+
+ {line1Edge}
+ {line2Edge}
+
+ ;
+ }
+
+ private readonly getEdgeCircle = ({ xy, dragHandler, cursor, fill, edge }) => {
+ const { hover } = this.state;
+ const { appearance } = this.props;
+ const { edgeStroke, edgeStrokeWidth, r } = appearance;
+ const { selected } = this.props;
+ const { onDragComplete } = this.props;
+
+ return ;
+ }
+
+ private readonly handleChannelHeightChange = (moreProps) => {
+ const { index, onDrag } = this.props;
+
+ const {
+ startXY, endXY,
+ } = this.dragStart;
+
+ const { chartConfig: { yScale } } = moreProps;
+ const { startPos, mouseXY } = moreProps;
+
+ const y2 = yScale(endXY[1]);
+
+ const dy = startPos[1] - mouseXY[1];
+
+ const newY2Value = yScale.invert(y2 - dy);
+
+ const newDy = newY2Value - endXY[1] + this.dragStart.dy;
+
+ onDrag(index, {
+ startXY,
+ endXY,
+ dy: newDy,
+ });
+ }
+
+ private readonly handleLine1Edge2Drag = (moreProps) => {
+ const { index, onDrag } = this.props;
+ const {
+ endXY,
+ } = this.dragStart;
+
+ const {
+ startPos, mouseXY, xAccessor,
+ xScale, fullData,
+ chartConfig: { yScale },
+ } = moreProps;
+
+ const dx = startPos[0] - mouseXY[0];
+ const dy = startPos[1] - mouseXY[1];
+
+ const x1 = xScale(endXY[0]);
+ const y1 = yScale(endXY[1]);
+
+ const newX1Value = getXValue(xScale, xAccessor, [x1 - dx, y1 - dy], fullData);
+ const newY1Value = yScale.invert(y1 - dy);
+
+ onDrag(index, {
+ startXY: this.dragStart.startXY,
+ endXY: [newX1Value, newY1Value],
+ dy: this.dragStart.dy,
+ });
+ }
+
+ private readonly handleLine1Edge1Drag = (moreProps) => {
+ const { index, onDrag } = this.props;
+ const {
+ startXY,
+ } = this.dragStart;
+
+ const {
+ startPos, mouseXY, xAccessor,
+ xScale, fullData,
+ chartConfig: { yScale },
+ } = moreProps;
+
+ const dx = startPos[0] - mouseXY[0];
+ const dy = startPos[1] - mouseXY[1];
+
+ const x1 = xScale(startXY[0]);
+ const y1 = yScale(startXY[1]);
+
+ const newX1Value = getXValue(xScale, xAccessor, [x1 - dx, y1 - dy], fullData);
+ const newY1Value = yScale.invert(y1 - dy);
+
+ onDrag(index, {
+ startXY: [newX1Value, newY1Value],
+ endXY: this.dragStart.endXY,
+ dy: this.dragStart.dy,
+ });
+ }
+
+ private readonly handleChannelDrag = (moreProps) => {
+ const { index, onDrag } = this.props;
+
+ const {
+ startXY, endXY,
+ } = this.dragStart;
+
+ const { xScale, chartConfig: { yScale }, xAccessor, fullData } = moreProps;
+ const { startPos, mouseXY } = moreProps;
+
+ const x1 = xScale(startXY[0]);
+ const y1 = yScale(startXY[1]);
+ const x2 = xScale(endXY[0]);
+ const y2 = yScale(endXY[1]);
+
+ const dx = startPos[0] - mouseXY[0];
+ const dy = startPos[1] - mouseXY[1];
+
+ const newX1Value = getXValue(xScale, xAccessor, [x1 - dx, y1 - dy], fullData);
+ const newY1Value = yScale.invert(y1 - dy);
+ const newX2Value = getXValue(xScale, xAccessor, [x2 - dx, y2 - dy], fullData);
+ const newY2Value = yScale.invert(y2 - dy);
+
+ // const newDy = newY2Value - endXY[1] + this.dragStart.dy;
+
+ onDrag(index, {
+ startXY: [newX1Value, newY1Value],
+ endXY: [newX2Value, newY2Value],
+ dy: this.dragStart.dy,
+ });
+ }
+
+ private readonly handleDragStart = () => {
+ const {
+ startXY, endXY, dy,
+ } = this.props;
+
+ this.dragStart = {
+ startXY, endXY, dy,
+ };
+ }
+
+ private readonly handleHover = (moreProps) => {
+ if (this.state.hover !== moreProps.hovering) {
+ this.setState({
+ hover: moreProps.hovering,
+ });
+ }
+ }
+}
diff --git a/packages/react-financial-charts/src/interactive/wrapper/EachFibRetracement.tsx b/packages/react-financial-charts/src/interactive/wrapper/EachFibRetracement.tsx
new file mode 100644
index 000000000..369475841
--- /dev/null
+++ b/packages/react-financial-charts/src/interactive/wrapper/EachFibRetracement.tsx
@@ -0,0 +1,354 @@
+import * as React from "react";
+
+import { head, last, noop } from "../../utils";
+import { getXValue } from "../../utils/ChartDataUtil";
+import { isHover, saveNodeType } from "../utils";
+
+import { ClickableCircle } from "../components/ClickableCircle";
+import { HoverTextNearMouse } from "../components/HoverTextNearMouse";
+import StraightLine, { generateLine } from "../components/StraightLine";
+import { Text } from "../components/Text";
+import { getNewXY } from "./EachTrendLine";
+
+interface EachFibRetracementProps {
+ x1: any;
+ x2: any;
+ y1: number;
+ y2: number;
+ yDisplayFormat: any; // func
+ type: string;
+ selected: boolean;
+ appearance: {
+ stroke: string;
+ strokeWidth: number;
+ strokeOpacity: number;
+ fontFamily: string;
+ fontSize: number;
+ fontFill: string;
+ edgeStroke: string;
+ edgeFill: string;
+ nsEdgeFill: string;
+ edgeStrokeWidth: number;
+ r: number;
+ };
+ interactive: boolean;
+ hoverText: {
+ enable: boolean;
+ fontFamily: string;
+ fontSize: number;
+ fill: string;
+ text: string;
+ bgFill: string;
+ bgOpacity: number;
+ bgWidth: number | string;
+ bgHeight: number | string;
+ selectedText: string;
+ };
+ index?: number;
+ onDrag: any; // func
+ onDragComplete: any; // func
+}
+
+interface EachFibRetracementState {
+ hover: boolean;
+}
+
+export class EachFibRetracement extends React.Component {
+
+ public static defaultProps = {
+ yDisplayFormat: (d) => d.toFixed(2),
+ interactive: true,
+ appearance: {
+ stroke: "#000000",
+ strokeWidth: 1,
+ strokeOpacity: 1,
+ fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif",
+ fontSize: 10,
+ fontFill: "#000000",
+ edgeStroke: "#000000",
+ edgeFill: "#FFFFFF",
+ nsEdgeFill: "#000000",
+ edgeStrokeWidth: 1,
+ r: 5,
+ },
+ selected: false,
+ onDrag: noop,
+ onDragComplete: noop,
+ hoverText: {
+ enable: false,
+ },
+ };
+
+ private dragStart;
+ // @ts-ignore
+ private isHover;
+ private saveNodeType;
+
+ public constructor(props) {
+ super(props);
+
+ this.isHover = isHover.bind(this);
+ this.saveNodeType = saveNodeType.bind(this);
+
+ this.state = {
+ hover: false,
+ };
+ }
+
+ public render() {
+ const { x1, x2, y1, y2 } = this.props;
+ const { interactive, yDisplayFormat, type, appearance } = this.props;
+ const { stroke, strokeWidth, strokeOpacity } = appearance;
+ const { fontFamily, fontSize, fontFill } = appearance;
+ const { edgeStroke, edgeFill, nsEdgeFill, edgeStrokeWidth, r } = appearance;
+ const { hoverText, selected } = this.props;
+ const { hover } = this.state;
+ const { onDragComplete } = this.props;
+ const lines = helper({ x1, x2, y1, y2 });
+
+ const {
+ enable: hoverTextEnabled,
+ selectedText: hoverTextSelected,
+ text: hoverTextUnselected,
+ ...restHoverTextProps
+ } = hoverText;
+
+ const lineType = type === "EXTEND" ? "XLINE" : type === "BOUND" ? "LINE" : "RAY";
+ const dir = head(lines).y1 > last(lines).y1 ? 3 : -1.3;
+
+ return (
+
+ {lines.map((line, j) => {
+ const text = `${yDisplayFormat(line.y)} (${line.percent.toFixed(2)}%)`;
+
+ const xyProvider = ({ xScale, chartConfig }) => {
+ const { yScale } = chartConfig;
+ const { x1: lineX1, y1: lineY1, x2: lineX2 } = generateLine({
+ type: lineType,
+ start: [line.x1, line.y],
+ end: [line.x2, line.y],
+ xScale,
+ yScale,
+ });
+
+ const x = xScale(Math.min(lineX1, lineX2)) + 10;
+ const y = yScale(lineY1) + dir * 4;
+ return [x, y];
+ };
+
+ const firstOrLast = (j === 0) || (j === lines.length - 1);
+
+ const interactiveCursorClass = firstOrLast
+ ? "react-stockcharts-ns-resize-cursor"
+ : "react-stockcharts-move-cursor";
+
+ const interactiveEdgeCursorClass = firstOrLast
+ ? "react-stockcharts-ns-resize-cursor"
+ : "react-stockcharts-ew-resize-cursor";
+
+ const dragHandler = j === 0
+ ? this.handleLineNSResizeTop
+ : j === lines.length - 1
+ ? this.handleLineNSResizeBottom
+ : this.handleLineMove;
+
+ const edge1DragHandler = j === 0
+ ? this.handleLineNSResizeTop
+ : j === lines.length - 1
+ ? this.handleLineNSResizeBottom
+ : this.handleEdge1Drag;
+ const edge2DragHandler = j === 0
+ ? this.handleLineNSResizeTop
+ : j === lines.length - 1
+ ? this.handleLineNSResizeBottom
+ : this.handleEdge2Drag;
+
+ const hoverHandler = interactive
+ ? { onHover: this.handleHover, onUnHover: this.handleHover }
+ : {};
+ return
+
+ {text}
+
+
+ ;
+ })}
+
+
+ );
+ }
+
+ private readonly handleEdge2Drag = (moreProps) => {
+ const { index, onDrag } = this.props;
+ const {
+ x1, y1, y2,
+ } = this.props;
+
+ const [x2] = getNewXY(moreProps);
+
+ onDrag(index, {
+ x1,
+ y1,
+ x2,
+ y2,
+ });
+ }
+
+ private readonly handleEdge1Drag = (moreProps) => {
+ const { index, onDrag } = this.props;
+ const {
+ y1, x2, y2,
+ } = this.props;
+
+ const [x1] = getNewXY(moreProps);
+
+ onDrag(index, {
+ x1,
+ y1,
+ x2,
+ y2,
+ });
+ }
+
+ private readonly handleLineNSResizeBottom = (moreProps) => {
+ const { index, onDrag } = this.props;
+ const {
+ x1, y1, x2,
+ } = this.props;
+
+ const [, y2] = getNewXY(moreProps);
+
+ onDrag(index, {
+ x1,
+ y1,
+ x2,
+ y2,
+ });
+ }
+
+ private readonly handleLineNSResizeTop = (moreProps) => {
+ const { index, onDrag } = this.props;
+ const {
+ x1, x2, y2,
+ } = this.props;
+
+ const [, y1] = getNewXY(moreProps);
+
+ onDrag(index, {
+ x1,
+ y1,
+ x2,
+ y2,
+ });
+ }
+
+ private readonly handleLineMove = (moreProps) => {
+ const { index, onDrag } = this.props;
+
+ const {
+ x1: x1Value, y1: y1Value, x2: x2Value, y2: y2Value,
+ } = this.dragStart;
+
+ const { xScale, chartConfig: { yScale }, xAccessor, fullData } = moreProps;
+ const { startPos, mouseXY } = moreProps;
+
+ const x1 = xScale(x1Value);
+ const y1 = yScale(y1Value);
+ const x2 = xScale(x2Value);
+ const y2 = yScale(y2Value);
+
+ const dx = startPos[0] - mouseXY[0];
+ const dy = startPos[1] - mouseXY[1];
+
+ const newX1Value = getXValue(xScale, xAccessor, [x1 - dx, y1 - dy], fullData);
+ const newY1Value = yScale.invert(y1 - dy);
+ const newX2Value = getXValue(xScale, xAccessor, [x2 - dx, y2 - dy], fullData);
+ const newY2Value = yScale.invert(y2 - dy);
+
+ onDrag(index, {
+ x1: newX1Value,
+ y1: newY1Value,
+ x2: newX2Value,
+ y2: newY2Value,
+ });
+ }
+
+ private readonly handleLineDragStart = () => {
+ const {
+ x1, y1, x2, y2,
+ } = this.props;
+
+ this.dragStart = {
+ x1, y1, x2, y2,
+ };
+ }
+
+ private readonly handleHover = (moreProps) => {
+ if (this.state.hover !== moreProps.hovering) {
+ this.setState({
+ hover: moreProps.hovering,
+ });
+ }
+ }
+}
+
+function helper({ x1, y1, x2, y2 }) {
+ const dy = y2 - y1;
+ const retracements = [100, 61.8, 50, 38.2, 23.6, 0]
+ .map((each) => ({
+ percent: each,
+ x1,
+ x2,
+ y: (y2 - (each / 100) * dy),
+ }));
+
+ return retracements;
+}
diff --git a/packages/react-financial-charts/src/interactive/wrapper/EachGannFan.tsx b/packages/react-financial-charts/src/interactive/wrapper/EachGannFan.tsx
new file mode 100644
index 000000000..98108103e
--- /dev/null
+++ b/packages/react-financial-charts/src/interactive/wrapper/EachGannFan.tsx
@@ -0,0 +1,300 @@
+import * as React from "react";
+
+import { isDefined, noop } from "../../utils";
+import { getXValue } from "../../utils/ChartDataUtil";
+import { isHover, saveNodeType } from "../utils";
+
+import { ClickableCircle } from "../components/ClickableCircle";
+import { GannFan } from "../components/GannFan";
+import { HoverTextNearMouse } from "../components/HoverTextNearMouse";
+
+interface EachGannFanProps {
+ startXY: number[];
+ endXY: number[];
+ dy?: number;
+ interactive: boolean;
+ selected: boolean;
+ appearance: {
+ stroke: string;
+ strokeOpacity: number;
+ fillOpacity: number;
+ strokeWidth: number;
+ edgeStroke: string;
+ edgeFill: string;
+ edgeStrokeWidth: number;
+ r: number;
+ fill: string[];
+ fontFamily: string;
+ fontSize: number;
+ fontFill: string;
+ };
+ hoverText: {
+ enable: boolean;
+ fontFamily: string;
+ fontSize: number;
+ fill: string;
+ text: string;
+ bgFill: string;
+ bgOpacity: number;
+ bgWidth: number | string;
+ bgHeight: number | string;
+ selectedText: string;
+ };
+ index?: number;
+ onDrag: any; // func
+ onDragComplete: any; // func
+}
+
+interface EachGannFanState {
+ hover: boolean;
+}
+
+export class EachGannFan extends React.Component {
+
+ public static defaultProps = {
+ yDisplayFormat: (d) => d.toFixed(2),
+ interactive: true,
+ selected: false,
+ appearance: {
+ stroke: "#000000",
+ fillOpacity: 0.2,
+ strokeOpacity: 1,
+ strokeWidth: 1,
+ edgeStroke: "#000000",
+ edgeFill: "#FFFFFF",
+ edgeStrokeWidth: 1,
+ r: 5,
+ fill: [
+ "#1f77b4",
+ "#ff7f0e",
+ "#2ca02c",
+ "#d62728",
+ "#9467bd",
+ "#8c564b",
+ "#e377c2",
+ "#7f7f7f",
+ ],
+ fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif",
+ fontSize: 10,
+ fontFill: "#000000",
+ },
+ onDrag: noop,
+ onDragComplete: noop,
+ hoverText: {
+ ...HoverTextNearMouse.defaultProps,
+ enable: true,
+ bgHeight: 18,
+ bgWidth: 120,
+ text: "Click to select object",
+ },
+ };
+
+ // @ts-ignore
+ private isHover;
+ private dragStart;
+ private saveNodeType;
+
+ constructor(props) {
+ super(props);
+
+ this.isHover = isHover.bind(this);
+ this.saveNodeType = saveNodeType.bind(this);
+
+ this.state = {
+ hover: false,
+ };
+ }
+
+ public render() {
+ const { startXY, endXY } = this.props;
+ const { interactive, appearance } = this.props;
+ const {
+ edgeFill,
+ stroke, strokeWidth, strokeOpacity,
+ fill, fillOpacity,
+ } = appearance;
+ const { fontFamily, fontSize, fontFill } = appearance;
+ const { hoverText, selected } = this.props;
+ const { onDragComplete } = this.props;
+ const { hover } = this.state;
+ const { enable: hoverTextEnabled, ...restHoverTextProps } = hoverText;
+
+ const hoverHandler = interactive
+ ? { onHover: this.handleHover, onUnHover: this.handleHover }
+ : {};
+
+ const line1Edge = isDefined(startXY) && isDefined(endXY)
+ ?
+ {this.getEdgeCircle({
+ xy: startXY,
+ dragHandler: this.handleLine1Edge1Drag,
+ cursor: "react-stockcharts-move-cursor",
+ fill: edgeFill,
+ edge: "edge1",
+ })}
+ {this.getEdgeCircle({
+ xy: endXY,
+ dragHandler: this.handleLine1Edge2Drag,
+ cursor: "react-stockcharts-move-cursor",
+ fill: edgeFill,
+ edge: "edge2",
+ })}
+
+ : null;
+
+ return (
+
+
+ {line1Edge}
+
+
+ );
+ }
+
+ private readonly getEdgeCircle = ({ xy, dragHandler, cursor, fill, edge }) => {
+ const { hover } = this.state;
+ const { selected, appearance } = this.props;
+ const { edgeStroke, edgeStrokeWidth, r } = appearance;
+ const { onDragComplete } = this.props;
+
+ return ;
+ }
+
+ private readonly handleLine1Edge2Drag = (moreProps) => {
+ const { index, onDrag } = this.props;
+ const {
+ endXY,
+ } = this.dragStart;
+
+ const {
+ startPos, mouseXY, xAccessor,
+ xScale, fullData,
+ chartConfig: { yScale },
+ } = moreProps;
+
+ const dx = startPos[0] - mouseXY[0];
+ const dy = startPos[1] - mouseXY[1];
+
+ const x1 = xScale(endXY[0]);
+ const y1 = yScale(endXY[1]);
+
+ const newX1Value = getXValue(xScale, xAccessor, [x1 - dx, y1 - dy], fullData);
+ const newY1Value = yScale.invert(y1 - dy);
+
+ onDrag(index, {
+ startXY: this.dragStart.startXY,
+ endXY: [newX1Value, newY1Value],
+ dy: this.dragStart.dy,
+ });
+ }
+
+ private readonly handleLine1Edge1Drag = (moreProps) => {
+ const { index, onDrag } = this.props;
+ const {
+ startXY,
+ } = this.dragStart;
+
+ const {
+ startPos, mouseXY, xAccessor,
+ xScale, fullData,
+ chartConfig: { yScale },
+ } = moreProps;
+
+ const dx = startPos[0] - mouseXY[0];
+ const dy = startPos[1] - mouseXY[1];
+
+ const x1 = xScale(startXY[0]);
+ const y1 = yScale(startXY[1]);
+
+ const newX1Value = getXValue(xScale, xAccessor, [x1 - dx, y1 - dy], fullData);
+ const newY1Value = yScale.invert(y1 - dy);
+
+ onDrag(index, {
+ startXY: [newX1Value, newY1Value],
+ endXY: this.dragStart.endXY,
+ dy: this.dragStart.dy,
+ });
+ }
+
+ private readonly handleFanDrag = (moreProps) => {
+ const { index, onDrag } = this.props;
+
+ const {
+ startXY, endXY,
+ } = this.dragStart;
+
+ const { xScale, chartConfig: { yScale }, xAccessor, fullData } = moreProps;
+ const { startPos, mouseXY } = moreProps;
+
+ const x1 = xScale(startXY[0]);
+ const y1 = yScale(startXY[1]);
+ const x2 = xScale(endXY[0]);
+ const y2 = yScale(endXY[1]);
+
+ const dx = startPos[0] - mouseXY[0];
+ const dy = startPos[1] - mouseXY[1];
+
+ const newX1Value = getXValue(xScale, xAccessor, [x1 - dx, y1 - dy], fullData);
+ const newY1Value = yScale.invert(y1 - dy);
+ const newX2Value = getXValue(xScale, xAccessor, [x2 - dx, y2 - dy], fullData);
+ const newY2Value = yScale.invert(y2 - dy);
+
+ // const newDy = newY2Value - endXY[1] + this.dragStart.dy;
+
+ onDrag(index, {
+ startXY: [newX1Value, newY1Value],
+ endXY: [newX2Value, newY2Value],
+ dy: this.dragStart.dy,
+ });
+ }
+
+ private readonly handleDragStart = () => {
+ const {
+ startXY, endXY, dy,
+ } = this.props;
+
+ this.dragStart = {
+ startXY, endXY, dy,
+ };
+ }
+
+ private readonly handleHover = (moreProps) => {
+ if (this.state.hover !== moreProps.hovering) {
+ this.setState({
+ hover: moreProps.hovering,
+ });
+ }
+ }
+}
diff --git a/packages/react-financial-charts/src/interactive/wrapper/EachInteractiveYCoordinate.tsx b/packages/react-financial-charts/src/interactive/wrapper/EachInteractiveYCoordinate.tsx
new file mode 100644
index 000000000..f4ab1800d
--- /dev/null
+++ b/packages/react-financial-charts/src/interactive/wrapper/EachInteractiveYCoordinate.tsx
@@ -0,0 +1,203 @@
+import * as React from "react";
+
+import { noop } from "../../utils";
+import { isHover, saveNodeType } from "../utils";
+
+import { ClickableShape } from "../components/ClickableShape";
+import { InteractiveYCoordinate } from "../components/InteractiveYCoordinate";
+
+interface EachInteractiveYCoordinateProps {
+ index?: number;
+ draggable: boolean;
+ yValue: number;
+ bgFill: string;
+ bgOpacity: number;
+ stroke: string;
+ strokeWidth: number;
+ strokeOpacity: number;
+ strokeDasharray: string;
+ textFill: string;
+ fontWeight: string;
+ fontFamily: string;
+ fontStyle: string;
+ fontSize: number;
+ text: string;
+ selected: boolean;
+ edge: object;
+ textBox: {
+ closeIcon: any;
+ left: number;
+ padding: any;
+ };
+ onDrag: any; // func
+ onDragComplete: any; // func
+ onDelete: any; // func
+}
+
+interface EachInteractiveYCoordinateState {
+ closeIconHover: boolean;
+ hover: boolean;
+}
+
+export class EachInteractiveYCoordinate extends React.Component {
+
+ public static defaultProps = {
+ onDrag: noop,
+ onDragComplete: noop,
+ strokeWidth: 1,
+ opacity: 1,
+ selected: false,
+ fill: "#FFFFFF",
+ draggable: false,
+ };
+
+ private dragStartPosition;
+ // @ts-ignore
+ private isHover;
+ private saveNodeType;
+
+ public constructor(props) {
+ super(props);
+
+ this.isHover = isHover.bind(this);
+ this.saveNodeType = saveNodeType.bind(this);
+
+ this.state = {
+ hover: false,
+ closeIconHover: false,
+ };
+ }
+
+ public render() {
+ const {
+ yValue,
+ bgFill,
+ bgOpacity,
+ textFill,
+ fontFamily,
+ fontSize,
+ fontWeight,
+ fontStyle,
+ text,
+ // hoverText,
+ selected,
+ onDragComplete,
+ stroke,
+ strokeOpacity,
+ strokeDasharray,
+ strokeWidth,
+ edge,
+ textBox,
+ draggable,
+ } = this.props;
+
+ const { hover, closeIconHover } = this.state;
+
+ const hoverHandler = {
+ onHover: this.handleHover,
+ onUnHover: this.handleHover,
+ };
+
+ const dragProps = draggable
+ ? {
+ onDragStart: this.handleDragStart,
+ onDrag: this.handleDrag,
+ onDragComplete,
+ }
+ : {};
+ return (
+
+
+
+
+ );
+ }
+
+ private readonly handleCloseIconHover = (moreProps) => {
+ if (this.state.closeIconHover !== moreProps.hovering) {
+ this.setState({
+ closeIconHover: moreProps.hovering,
+ });
+ }
+ }
+
+ private readonly handleHover = (moreProps) => {
+ if (this.state.hover !== moreProps.hovering) {
+ this.setState({
+ hover: moreProps.hovering,
+ closeIconHover: moreProps.hovering ? this.state.closeIconHover : false,
+ });
+ }
+ }
+
+ private readonly handleDelete = (moreProps) => {
+ const { index, onDelete } = this.props;
+ onDelete(index, moreProps);
+ }
+
+ private readonly handleDrag = (moreProps) => {
+ const { index, onDrag } = this.props;
+ const {
+ mouseXY: [, mouseY],
+ chartConfig: { yScale },
+ } = moreProps;
+
+ const { dy } = this.dragStartPosition;
+
+ const newYValue = yScale.invert(mouseY - dy);
+
+ onDrag(index, newYValue);
+ }
+
+ private readonly handleDragStart = (moreProps) => {
+ const {
+ yValue,
+ } = this.props;
+ const { mouseXY } = moreProps;
+ const { chartConfig: { yScale } } = moreProps;
+ const [, mouseY] = mouseXY;
+
+ const dy = mouseY - yScale(yValue);
+
+ this.dragStartPosition = {
+ yValue, dy,
+ };
+ }
+}
diff --git a/packages/react-financial-charts/src/interactive/wrapper/EachLinearRegressionChannel.tsx b/packages/react-financial-charts/src/interactive/wrapper/EachLinearRegressionChannel.tsx
new file mode 100644
index 000000000..8b815081c
--- /dev/null
+++ b/packages/react-financial-charts/src/interactive/wrapper/EachLinearRegressionChannel.tsx
@@ -0,0 +1,221 @@
+import * as React from "react";
+
+import { noop } from "../../utils";
+import { getCurrentItem } from "../../utils/ChartDataUtil";
+import { isHover, saveNodeType } from "../utils";
+
+import { HoverTextNearMouse } from "../components/HoverTextNearMouse";
+import {
+ edge1Provider,
+ edge2Provider,
+ LinearRegressionChannelWithArea,
+} from "../components/LinearRegressionChannelWithArea";
+
+import { ClickableCircle } from "../components/ClickableCircle";
+
+interface EachLinearRegressionChannelProps {
+ defaultClassName?: string;
+ x1Value: any;
+ x2Value: any;
+ index?: number;
+ appearance: {
+ stroke: string;
+ fillOpacity: number;
+ strokeOpacity: number;
+ strokeWidth: number;
+ fill: string;
+ edgeStrokeWidth: number;
+ edgeStroke: string;
+ edgeFill: string;
+ r: number;
+ };
+ edgeInteractiveCursor?: string;
+ onDrag: any; // func
+ onDragComplete: any; // func
+ snapTo?: any; // func
+ interactive: boolean;
+ selected: boolean;
+ hoverText: {
+ enable: boolean;
+ fontFamily: string;
+ fontSize: number;
+ fill: string;
+ text: string;
+ bgFill: string;
+ bgOpacity: number;
+ bgWidth: number | string;
+ bgHeight: number | string;
+ selectedText: string;
+ };
+}
+
+interface EachLinearRegressionChannelState {
+ hover: boolean;
+}
+
+export class EachLinearRegressionChannel extends React.Component {
+
+ public static defaultProps = {
+ onDrag: noop,
+ onDragComplete: noop,
+ appearance: {
+ stroke: "#000000",
+ fillOpacity: 0.7,
+ strokeOpacity: 1,
+ strokeWidth: 1,
+ fill: "#8AAFE2",
+ edgeStrokeWidth: 2,
+ edgeStroke: "#000000",
+ edgeFill: "#FFFFFF",
+ r: 5,
+ },
+ interactive: true,
+ selected: false,
+ hoverText: {
+ ...HoverTextNearMouse.defaultProps,
+ enable: true,
+ bgHeight: 18,
+ bgWidth: 175,
+ text: "Click and drag the edge circles",
+ },
+ };
+
+ // @ts-ignore
+ private isHover;
+ private saveNodeType;
+
+ constructor(props) {
+ super(props);
+
+ this.isHover = isHover.bind(this);
+ this.saveNodeType = saveNodeType.bind(this);
+
+ this.state = {
+ hover: false,
+ };
+ }
+
+ public render() {
+ const {
+ x1Value,
+ x2Value,
+ appearance,
+ edgeInteractiveCursor,
+ hoverText,
+ interactive,
+ selected,
+ onDragComplete,
+ } = this.props;
+ const {
+ stroke,
+ strokeWidth,
+ strokeOpacity,
+ fill,
+ fillOpacity,
+ r,
+ edgeStrokeWidth,
+ edgeFill,
+ edgeStroke,
+ } = appearance;
+ const { hover } = this.state;
+
+ const hoverHandler = interactive
+ ? { onHover: this.handleHover, onUnHover: this.handleHover }
+ : {};
+
+ const {
+ enable: hoverTextEnabled,
+ selectedText: hoverTextSelected,
+ text: hoverTextUnselected,
+ ...restHoverTextProps
+ } = hoverText;
+
+ return
+
+
+
+
+ ;
+ }
+
+ private readonly handleHover = (moreProps) => {
+ if (this.state.hover !== moreProps.hovering) {
+ this.setState({
+ hover: moreProps.hovering,
+ });
+ }
+ }
+
+ private readonly handleEdge2Drag = (moreProps) => {
+ const { index, onDrag, snapTo } = this.props;
+ const {
+ x1Value,
+ } = this.props;
+
+ const [x2Value] = getNewXY(moreProps, snapTo);
+
+ onDrag(index, {
+ x1Value,
+ x2Value,
+ });
+ }
+
+ private readonly handleEdge1Drag = (moreProps) => {
+ const { index, onDrag, snapTo } = this.props;
+ const {
+ x2Value,
+ } = this.props;
+
+ const [x1Value] = getNewXY(moreProps, snapTo);
+
+ onDrag(index, {
+ x1Value,
+ x2Value,
+ });
+ }
+}
+
+export function getNewXY(moreProps, snapTo) {
+ const { xScale, xAccessor, plotData, mouseXY } = moreProps;
+
+ const currentItem = getCurrentItem(xScale, xAccessor, mouseXY, plotData);
+ const x = xAccessor(currentItem);
+ const y = snapTo(currentItem);
+
+ return [x, y];
+}
diff --git a/packages/react-financial-charts/src/interactive/wrapper/EachText.tsx b/packages/react-financial-charts/src/interactive/wrapper/EachText.tsx
new file mode 100644
index 000000000..376b106b1
--- /dev/null
+++ b/packages/react-financial-charts/src/interactive/wrapper/EachText.tsx
@@ -0,0 +1,193 @@
+import * as React from "react";
+
+import { noop } from "../../utils";
+import { getXValue } from "../../utils/ChartDataUtil";
+import { isHover, saveNodeType } from "../utils";
+
+import { HoverTextNearMouse } from "../components/HoverTextNearMouse";
+import { InteractiveText } from "../components/InteractiveText";
+
+interface EachTextProps {
+ index?: number;
+ position?: any;
+ bgFill: string;
+ bgOpacity: number;
+ bgStrokeWidth: number;
+ bgStroke?: string;
+ textFill: string;
+ fontWeight: string;
+ fontFamily: string;
+ fontStyle: string;
+ fontSize: number;
+ text: string;
+ selected: boolean;
+ onDrag: any; // func
+ onDragComplete: any; // func
+ hoverText: {
+ enable: boolean;
+ fontFamily: string;
+ fontSize: number;
+ fill: string;
+ text: string;
+ selectedText: string;
+ bgFill: string;
+ bgOpacity: number;
+ bgWidth: number | string;
+ bgHeight: number | string;
+ };
+}
+
+interface EachTextState {
+ hover: boolean;
+}
+
+export class EachText extends React.Component {
+
+ public static defaultProps = {
+ onDrag: noop,
+ onDragComplete: noop,
+ bgOpacity: 1,
+ bgStrokeWidth: 1,
+ selected: false,
+ fill: "#8AAFE2",
+ hoverText: {
+ ...HoverTextNearMouse.defaultProps,
+ enable: true,
+ bgHeight: "auto",
+ bgWidth: "auto",
+ text: "Click to select object",
+ },
+ };
+
+ private dragStartPosition;
+ // @ts-ignore
+ private isHover;
+ private saveNodeType;
+
+ constructor(props) {
+ super(props);
+
+ this.handleHover = this.handleHover.bind(this);
+
+ this.handleDragStart = this.handleDragStart.bind(this);
+ this.handleDrag = this.handleDrag.bind(this);
+
+ this.isHover = isHover.bind(this);
+ this.saveNodeType = saveNodeType.bind(this);
+
+ this.state = {
+ hover: false,
+ };
+ }
+
+ public render() {
+ const {
+ position,
+ bgFill,
+ bgOpacity,
+ bgStroke,
+ bgStrokeWidth,
+ textFill,
+ fontFamily,
+ fontSize,
+ fontWeight,
+ fontStyle,
+ text,
+ hoverText,
+ selected,
+ onDragComplete,
+ } = this.props;
+ const { hover } = this.state;
+
+ const hoverHandler = {
+ onHover: this.handleHover,
+ onUnHover: this.handleHover,
+ };
+
+ const {
+ enable: hoverTextEnabled,
+ selectedText: hoverTextSelected,
+ text: hoverTextUnselected,
+ ...restHoverTextProps
+ } = hoverText;
+
+ return (
+
+
+
+
+ );
+ }
+
+ private readonly handleHover = (moreProps) => {
+ if (this.state.hover !== moreProps.hovering) {
+ this.setState({
+ hover: moreProps.hovering,
+ });
+ }
+ }
+
+ private readonly handleDrag = (moreProps) => {
+ const { index, onDrag } = this.props;
+ const {
+ mouseXY: [, mouseY],
+ chartConfig: { yScale },
+ xAccessor,
+ mouseXY,
+ plotData,
+ xScale,
+ } = moreProps;
+
+ const { dx, dy } = this.dragStartPosition;
+ const xValue = xScale.invert(
+ xScale(getXValue(xScale, xAccessor, mouseXY, plotData)) - dx,
+ );
+ // xScale.invert(xScale(xAccessor(currentItem)) - dx);
+ const xyValue = [
+ xValue,
+ yScale.invert(mouseY - dy),
+ ];
+
+ onDrag(index, xyValue);
+ }
+
+ private readonly handleDragStart = (moreProps) => {
+ const {
+ position,
+ } = this.props;
+ const { mouseXY } = moreProps;
+ const { chartConfig: { yScale }, xScale } = moreProps;
+ const [mouseX, mouseY] = mouseXY;
+
+ const [textCX, textCY] = position;
+ const dx = mouseX - xScale(textCX);
+ const dy = mouseY - yScale(textCY);
+
+ this.dragStartPosition = {
+ position, dx, dy,
+ };
+ }
+}
diff --git a/packages/react-financial-charts/src/interactive/wrapper/EachTrendLine.tsx b/packages/react-financial-charts/src/interactive/wrapper/EachTrendLine.tsx
new file mode 100644
index 000000000..1061ffd68
--- /dev/null
+++ b/packages/react-financial-charts/src/interactive/wrapper/EachTrendLine.tsx
@@ -0,0 +1,298 @@
+import * as React from "react";
+
+import { ascending as d3Ascending } from "d3-array";
+import { noop, strokeDashTypes } from "../../utils";
+import { getXValue } from "../../utils/ChartDataUtil";
+import { isHover, saveNodeType } from "../utils";
+
+import { ClickableCircle } from "../components/ClickableCircle";
+import { HoverTextNearMouse } from "../components/HoverTextNearMouse";
+import StraightLine from "../components/StraightLine";
+
+interface EachTrendLineProps {
+ x1Value: any;
+ x2Value: any;
+ y1Value: any;
+ y2Value: any;
+ index?: number;
+ type: "XLINE" | // extends from -Infinity to +Infinity
+ "RAY" | // extends to +/-Infinity in one direction
+ "LINE"; // extends between the set bounds
+ onDrag: any; // func
+ onEdge1Drag: any; // func
+ onEdge2Drag: any; // func
+ onDragComplete: any; // func
+ onSelect: any; // func
+ onUnSelect: any; // func
+ r: number;
+ strokeOpacity: number;
+ defaultClassName?: string;
+ selected?: boolean;
+ stroke: string;
+ strokeWidth: number;
+ strokeDasharray: strokeDashTypes;
+ edgeStrokeWidth: number;
+ edgeStroke: string;
+ edgeInteractiveCursor: string;
+ lineInteractiveCursor: string;
+ edgeFill: string;
+ hoverText: {
+ enable: boolean;
+ fontFamily: string;
+ fontSize: number;
+ fill: string;
+ text: string;
+ selectedText: string;
+ bgFill: string;
+ bgOpacity: number;
+ bgWidth: number | string;
+ bgHeight: number | string;
+ };
+}
+
+interface EachTrendLineState {
+ anchor?: string;
+ hover?: any;
+}
+
+export class EachTrendLine extends React.Component {
+
+ public static defaultProps = {
+ onDrag: noop,
+ onEdge1Drag: noop,
+ onEdge2Drag: noop,
+ onDragComplete: noop,
+ onSelect: noop,
+ onUnSelect: noop,
+ selected: false,
+ edgeStroke: "#000000",
+ edgeFill: "#FFFFFF",
+ edgeStrokeWidth: 2,
+ r: 5,
+ strokeWidth: 1,
+ strokeOpacity: 1,
+ strokeDasharray: "Solid",
+ hoverText: {
+ enable: false,
+ },
+ };
+
+ private dragStart;
+ // @ts-ignore
+ private isHover;
+ private saveNodeType;
+
+ constructor(props) {
+ super(props);
+
+ this.isHover = isHover.bind(this);
+ this.saveNodeType = saveNodeType.bind(this);
+
+ this.state = {
+ hover: false,
+ };
+ }
+
+ public render() {
+ const {
+ x1Value,
+ y1Value,
+ x2Value,
+ y2Value,
+ type,
+ stroke,
+ strokeWidth,
+ strokeOpacity,
+ strokeDasharray,
+ r,
+ edgeStrokeWidth,
+ edgeFill,
+ edgeStroke,
+ edgeInteractiveCursor,
+ lineInteractiveCursor,
+ hoverText,
+ selected,
+
+ onDragComplete,
+ } = this.props;
+
+ const {
+ enable: hoverTextEnabled,
+ selectedText: hoverTextSelected,
+ text: hoverTextUnselected,
+ ...restHoverTextProps
+ } = hoverText;
+
+ const { hover, anchor } = this.state;
+
+ return
+
+
+
+
+ ;
+ }
+
+ private readonly handleHover = (moreProps) => {
+ if (this.state.hover !== moreProps.hovering) {
+ this.setState({
+ hover: moreProps.hovering,
+ });
+ }
+ }
+
+ private readonly handleEdge2Drag = (moreProps) => {
+ const { index, onDrag } = this.props;
+ const {
+ x1Value, y1Value,
+ } = this.props;
+
+ const [x2Value, y2Value] = getNewXY(moreProps);
+
+ onDrag(index, {
+ x1Value,
+ y1Value,
+ x2Value,
+ y2Value,
+ });
+ }
+
+ private readonly handleEdge1Drag = (moreProps) => {
+ const { index, onDrag } = this.props;
+ const {
+ x2Value, y2Value,
+ } = this.props;
+
+ const [x1Value, y1Value] = getNewXY(moreProps);
+
+ onDrag(index, {
+ x1Value,
+ y1Value,
+ x2Value,
+ y2Value,
+ });
+ }
+
+ private readonly handleDragComplete = (...rest) => {
+ this.setState({
+ anchor: undefined,
+ });
+ this.props.onDragComplete(...rest);
+ }
+
+ private readonly handleEdge2DragStart = () => {
+ this.setState({
+ anchor: "edge1",
+ });
+ }
+
+ private readonly handleEdge1DragStart = () => {
+ this.setState({
+ anchor: "edge2",
+ });
+ }
+
+ private readonly handleLineDrag = (moreProps) => {
+ const { index, onDrag } = this.props;
+
+ const {
+ x1Value, y1Value,
+ x2Value, y2Value,
+ } = this.dragStart;
+
+ const { xScale, chartConfig: { yScale }, xAccessor, fullData } = moreProps;
+ const { startPos, mouseXY } = moreProps;
+
+ const x1 = xScale(x1Value);
+ const y1 = yScale(y1Value);
+ const x2 = xScale(x2Value);
+ const y2 = yScale(y2Value);
+
+ const dx = startPos[0] - mouseXY[0];
+ const dy = startPos[1] - mouseXY[1];
+
+ const newX1Value = getXValue(xScale, xAccessor, [x1 - dx, y1 - dy], fullData);
+ const newY1Value = yScale.invert(y1 - dy);
+ const newX2Value = getXValue(xScale, xAccessor, [x2 - dx, y2 - dy], fullData);
+ const newY2Value = yScale.invert(y2 - dy);
+
+ onDrag(index, {
+ x1Value: newX1Value,
+ y1Value: newY1Value,
+ x2Value: newX2Value,
+ y2Value: newY2Value,
+ });
+ }
+
+ private readonly handleLineDragStart = () => {
+ const {
+ x1Value, y1Value,
+ x2Value, y2Value,
+ } = this.props;
+
+ this.dragStart = {
+ x1Value, y1Value,
+ x2Value, y2Value,
+ };
+ }
+}
+
+export function getNewXY(moreProps) {
+ const { xScale, chartConfig: { yScale }, xAccessor, plotData, mouseXY } = moreProps;
+ const mouseY = mouseXY[1];
+
+ const x = getXValue(xScale, xAccessor, mouseXY, plotData);
+
+ const [small, big] = yScale.domain().slice().sort(d3Ascending);
+ const y = yScale.invert(mouseY);
+ const newY = Math.min(Math.max(y, small), big);
+
+ return [x, newY];
+}
diff --git a/packages/react-financial-charts/src/scale/discontinuousTimeScaleProvider.ts b/packages/react-financial-charts/src/scale/discontinuousTimeScaleProvider.ts
new file mode 100644
index 000000000..a7f6d09d2
--- /dev/null
+++ b/packages/react-financial-charts/src/scale/discontinuousTimeScaleProvider.ts
@@ -0,0 +1,225 @@
+import { timeFormat, timeFormatDefaultLocale } from "d3-time-format";
+
+import { identity, isNotDefined, slidingWindow, zipper } from "../utils";
+import financeDiscontinuousScale from "./financeDiscontinuousScale";
+import { defaultFormatters, levelDefinition } from "./levels";
+
+function evaluateLevel(d, date, i, formatters) {
+ return levelDefinition
+ .map((eachLevel, idx) => {
+ return {
+ level: levelDefinition.length - idx - 1,
+
+ // @ts-ignore
+ format: formatters[eachLevel(d, date, i)],
+ };
+ })
+ .find((l) => !!l.format);
+}
+
+const discontinuousIndexCalculator = slidingWindow()
+ .windowSize(2)
+ // @ts-ignore
+ .undefinedValue((d, idx, { initialIndex, formatters }) => {
+ const i = initialIndex;
+ const row = {
+ date: d.getTime(),
+ startOf30Seconds: false,
+ startOfMinute: false,
+ startOf5Minutes: false,
+ startOf15Minutes: false,
+ startOf30Minutes: false,
+ startOfHour: false,
+ startOfEighthOfADay: false,
+ startOfQuarterDay: false,
+ startOfHalfDay: false,
+ startOfDay: true,
+ startOfWeek: false,
+ startOfMonth: false,
+ startOfQuarter: false,
+ startOfYear: false,
+ };
+ const level = evaluateLevel(row, d, i, formatters);
+ return { ...row, index: i, ...level };
+ });
+
+const discontinuousIndexCalculatorLocalTime = discontinuousIndexCalculator
+ .accumulator(([prevDate, nowDate], i, idx, { initialIndex, formatters }) => {
+ const startOf30Seconds = nowDate.getSeconds() % 30 === 0;
+
+ const startOfMinute = nowDate.getMinutes() !== prevDate.getMinutes();
+ const startOf5Minutes = startOfMinute && nowDate.getMinutes() % 5 <= prevDate.getMinutes() % 5;
+ const startOf15Minutes = startOfMinute && nowDate.getMinutes() % 15 <= prevDate.getMinutes() % 15;
+ const startOf30Minutes = startOfMinute && nowDate.getMinutes() % 30 <= prevDate.getMinutes() % 30;
+
+ const startOfHour = nowDate.getHours() !== prevDate.getHours();
+
+ const startOfEighthOfADay = startOfHour && nowDate.getHours() % 3 === 0;
+ const startOfQuarterDay = startOfHour && nowDate.getHours() % 6 === 0;
+ const startOfHalfDay = startOfHour && nowDate.getHours() % 12 === 0;
+
+ const startOfDay = nowDate.getDay() !== prevDate.getDay();
+ // According to ISO calendar
+ // Sunday = 0, Monday = 1, ... Saturday = 6
+ // day of week of today < day of week of yesterday then today is start of week
+ const startOfWeek = nowDate.getDay() < prevDate.getDay();
+ // month of today != month of yesterday then today is start of month
+ const startOfMonth = nowDate.getMonth() !== prevDate.getMonth();
+ // if start of month and month % 3 === 0 then it is start of quarter
+ const startOfQuarter = startOfMonth && (nowDate.getMonth() % 3 <= prevDate.getMonth() % 3);
+ // year of today != year of yesterday then today is start of year
+ const startOfYear = nowDate.getFullYear() !== prevDate.getFullYear();
+
+ const row = {
+ date: nowDate.getTime(),
+ startOf30Seconds,
+ startOfMinute,
+ startOf5Minutes,
+ startOf15Minutes,
+ startOf30Minutes,
+ startOfHour,
+ startOfEighthOfADay,
+ startOfQuarterDay,
+ startOfHalfDay,
+ startOfDay,
+ startOfWeek,
+ startOfMonth,
+ startOfQuarter,
+ startOfYear,
+ };
+ const level = evaluateLevel(row, nowDate, i, formatters);
+
+ return { ...row, index: i + initialIndex, ...level };
+ });
+
+function doStuff(realDateAccessor, inputDateAccessor, initialIndex, formatters) {
+ return function (data) {
+ const dateAccessor = realDateAccessor(inputDateAccessor);
+ const calculate = discontinuousIndexCalculatorLocalTime
+ .source(dateAccessor)
+ .misc({ initialIndex, formatters });
+
+ const index = calculate(data).map((each) => {
+ const { format } = each;
+ return {
+ // ...each,
+ index: each.index,
+ level: each.level,
+ date: new Date(each.date),
+ format: timeFormat(format),
+ };
+ });
+
+ return { index };
+ };
+}
+
+export function discontinuousTimeScaleProviderBuilder() {
+ let initialIndex = 0;
+ let realDateAccessor = identity;
+ let inputDateAccessor = (d) => d.date;
+ let indexAccessor = (d) => d.idx;
+ let indexMutator = (d, idx) => ({ ...d, idx });
+ let withIndex;
+
+ let currentFormatters = defaultFormatters;
+
+ const discontinuousTimeScaleProvider = function (data) {
+
+ let index = withIndex;
+
+ if (isNotDefined(index)) {
+ const response = doStuff(
+ realDateAccessor,
+ inputDateAccessor,
+ initialIndex,
+ currentFormatters,
+ )(data);
+
+ index = response.index;
+ }
+
+ const inputIndex = index;
+
+ // @ts-ignore
+ const xScale = financeDiscontinuousScale(
+ inputIndex,
+ );
+
+ const mergedData = zipper()
+ .combine(indexMutator);
+
+ // @ts-ignore
+ const finalData = mergedData(data, inputIndex);
+
+ return {
+ data: finalData,
+ xScale,
+ xAccessor: (d) => d && indexAccessor(d).index,
+ displayXAccessor: realDateAccessor(inputDateAccessor),
+ };
+ };
+
+ discontinuousTimeScaleProvider.initialIndex = function (x) {
+ if (!arguments.length) {
+ return initialIndex;
+ }
+ initialIndex = x;
+ return discontinuousTimeScaleProvider;
+ };
+ discontinuousTimeScaleProvider.inputDateAccessor = function (x) {
+ if (!arguments.length) {
+ return inputDateAccessor;
+ }
+ inputDateAccessor = x;
+ return discontinuousTimeScaleProvider;
+ };
+ discontinuousTimeScaleProvider.indexAccessor = function (x) {
+ if (!arguments.length) {
+ return indexAccessor;
+ }
+ indexAccessor = x;
+ return discontinuousTimeScaleProvider;
+ };
+ discontinuousTimeScaleProvider.indexMutator = function (x) {
+ if (!arguments.length) {
+ return indexMutator;
+ }
+ indexMutator = x;
+ return discontinuousTimeScaleProvider;
+ };
+ discontinuousTimeScaleProvider.withIndex = function (x) {
+ if (!arguments.length) {
+ return withIndex;
+ }
+ withIndex = x;
+ return discontinuousTimeScaleProvider;
+ };
+ discontinuousTimeScaleProvider.utc = function () {
+ realDateAccessor = (dateAccessor) => (d) => {
+ const date = dateAccessor(d);
+ // The getTimezoneOffset() method returns the time-zone offset from UTC, in minutes, for the current locale.
+ const offsetInMillis = date.getTimezoneOffset() * 60 * 1000;
+ return new Date(date.getTime() + offsetInMillis);
+ };
+ return discontinuousTimeScaleProvider;
+ };
+ discontinuousTimeScaleProvider.setLocale = function (locale, formatters = null) {
+ if (locale) {
+ timeFormatDefaultLocale(locale);
+ }
+ if (formatters) {
+ // @ts-ignore
+ currentFormatters = formatters;
+ }
+ return discontinuousTimeScaleProvider;
+ };
+
+ discontinuousTimeScaleProvider.indexCalculator = function () {
+ return doStuff(realDateAccessor, inputDateAccessor, initialIndex, currentFormatters);
+ };
+
+ return discontinuousTimeScaleProvider;
+}
+
+export default discontinuousTimeScaleProviderBuilder();
diff --git a/packages/react-financial-charts/src/scale/evaluator.ts b/packages/react-financial-charts/src/scale/evaluator.ts
new file mode 100644
index 000000000..d8f1dfadb
--- /dev/null
+++ b/packages/react-financial-charts/src/scale/evaluator.ts
@@ -0,0 +1,171 @@
+import {
+ getClosestItemIndexes,
+ getLogger,
+ head,
+ isDefined,
+ isNotDefined,
+ last,
+} from "../utils";
+
+const log = getLogger("evaluator");
+
+function getNewEnd(fallbackEnd, xAccessor, initialXScale, start) {
+ const {
+ lastItem, lastItemX,
+ } = fallbackEnd;
+ const lastItemXValue = xAccessor(lastItem);
+ const [rangeStart, rangeEnd] = initialXScale.range();
+
+ const newEnd = (rangeEnd - rangeStart) / (lastItemX - rangeStart) * (lastItemXValue - start) + start;
+ return newEnd;
+}
+
+function extentsWrapper(useWholeData, clamp, pointsPerPxThreshold, minPointsPerPxThreshold, flipXScale) {
+ function filterData(
+ data, inputDomain, xAccessor, initialXScale,
+ // @ts-ignore
+ { currentPlotData, currentDomain, fallbackStart, fallbackEnd } = {},
+ ) {
+ if (useWholeData) {
+ return { plotData: data, domain: inputDomain };
+ }
+
+ let left = head(inputDomain);
+ let right = last(inputDomain);
+ let clampedDomain = inputDomain;
+
+ let filteredData = getFilteredResponse(data, left, right, xAccessor);
+
+ if (filteredData.length === 1 && isDefined(fallbackStart)) {
+ left = fallbackStart;
+ right = getNewEnd(fallbackEnd, xAccessor, initialXScale, left);
+
+ clampedDomain = [
+ left,
+ right,
+ ];
+ filteredData = getFilteredResponse(data, left, right, xAccessor);
+ }
+
+ if (typeof clamp === "function") {
+ clampedDomain = clamp(clampedDomain, [xAccessor(head(data)), xAccessor(last(data))]);
+ } else {
+ if (clamp === "left" || clamp === "both" || clamp === true) {
+ clampedDomain = [
+ Math.max(left, xAccessor(head(data))),
+ clampedDomain[1],
+ ];
+ }
+
+ if (clamp === "right" || clamp === "both" || clamp === true) {
+ clampedDomain = [
+ clampedDomain[0],
+ Math.min(right, xAccessor(last(data))),
+ ];
+ }
+ }
+
+ if (clampedDomain !== inputDomain) {
+ filteredData = getFilteredResponse(data, clampedDomain[0], clampedDomain[1], xAccessor);
+ }
+
+ const realInputDomain = clampedDomain;
+ // [xAccessor(head(filteredData)), xAccessor(last(filteredData))];
+
+ const xScale = initialXScale.copy().domain(realInputDomain);
+
+ let width = Math.floor(xScale(xAccessor(last(filteredData)))
+ - xScale(xAccessor(head(filteredData))));
+
+ // prevent negative width when flipXScale
+ if (flipXScale && width < 0) {
+ width = width * -1;
+ }
+
+ let plotData;
+ let domain;
+
+ const chartWidth = last(xScale.range()) - head(xScale.range());
+
+ // @ts-ignore
+ log(`Trying to show ${filteredData.length} points in ${width}px,`
+ + ` I can show up to ${showMaxThreshold(width, pointsPerPxThreshold) - 1} points in that width. `
+ + `Also FYI the entire chart width is ${chartWidth}px and pointsPerPxThreshold is ${pointsPerPxThreshold}`);
+
+ if (canShowTheseManyPeriods(width, filteredData.length, pointsPerPxThreshold, minPointsPerPxThreshold)) {
+ plotData = filteredData;
+ domain = realInputDomain;
+
+ // @ts-ignore
+ log("AND IT WORKED");
+ } else {
+ if (chartWidth > showMaxThreshold(width, pointsPerPxThreshold) && isDefined(fallbackEnd)) {
+ plotData = filteredData;
+ const newEnd = getNewEnd(fallbackEnd, xAccessor, initialXScale, head(realInputDomain));
+ domain = [
+ head(realInputDomain),
+ newEnd,
+ ];
+
+ const newXScale = xScale.copy().domain(domain);
+ const newWidth = Math.floor(newXScale(xAccessor(last(plotData)))
+ - newXScale(xAccessor(head(plotData))));
+
+ // @ts-ignore
+ log(`and ouch, that is too much, so instead showing ${plotData.length} in ${newWidth}px`);
+ } else {
+ plotData = currentPlotData || filteredData.slice(filteredData.length - showMax(width, pointsPerPxThreshold));
+ domain = currentDomain || [xAccessor(head(plotData)), xAccessor(last(plotData))];
+
+ const newXScale = xScale.copy().domain(domain);
+ const newWidth = Math.floor(newXScale(xAccessor(last(plotData)))
+ - newXScale(xAccessor(head(plotData))));
+
+ // @ts-ignore
+ log(`and ouch, that is too much, so instead showing ${plotData.length} in ${newWidth}px`);
+ }
+ }
+ return { plotData, domain };
+ }
+ return { filterData };
+}
+
+function canShowTheseManyPeriods(width, arrayLength, maxThreshold, minThreshold) {
+ return arrayLength > showMinThreshold(width, minThreshold) && arrayLength < showMaxThreshold(width, maxThreshold);
+}
+
+function showMinThreshold(width, threshold) {
+ return Math.max(1, Math.ceil(width * threshold));
+}
+
+function showMaxThreshold(width, threshold) {
+ return Math.floor(width * threshold);
+}
+
+function showMax(width, threshold) {
+ return Math.floor(showMaxThreshold(width, threshold) * 0.97);
+}
+
+function getFilteredResponse(data, left, right, xAccessor) {
+ const newLeftIndex = getClosestItemIndexes(data, left, xAccessor).right;
+ const newRightIndex = getClosestItemIndexes(data, right, xAccessor).left;
+
+ const filteredData = data.slice(newLeftIndex, newRightIndex + 1);
+ // console.log(right, newRightIndex, dataForInterval.length);
+
+ return filteredData;
+}
+
+export default function ({
+ xScale, useWholeData, clamp,
+ pointsPerPxThreshold, minPointsPerPxThreshold,
+ flipXScale,
+}) {
+ return extentsWrapper(
+ useWholeData || isNotDefined(xScale.invert),
+ clamp,
+ pointsPerPxThreshold,
+ minPointsPerPxThreshold,
+ flipXScale,
+ );
+}
diff --git a/packages/react-financial-charts/src/scale/financeDiscontinuousScale.ts b/packages/react-financial-charts/src/scale/financeDiscontinuousScale.ts
new file mode 100644
index 000000000..7aad1219e
--- /dev/null
+++ b/packages/react-financial-charts/src/scale/financeDiscontinuousScale.ts
@@ -0,0 +1,148 @@
+import { ascending } from "d3-array";
+import { map, set } from "d3-collection";
+import { scaleLinear } from "d3-scale";
+
+import { head, isDefined, isNotDefined, last } from "../utils";
+import { levelDefinition } from "./levels";
+
+const MAX_LEVEL = levelDefinition.length - 1;
+
+export default function financeDiscontinuousScale(
+ index,
+ futureProvider,
+ backingLinearScale = scaleLinear(),
+) {
+
+ if (isNotDefined(index)) {
+ throw new Error("Use the discontinuousTimeScaleProvider to create financeDiscontinuousScale");
+ }
+
+ function scale(x) {
+ return backingLinearScale(x);
+ }
+ scale.invert = function (x) {
+ const inverted = backingLinearScale.invert(x);
+ return Math.round(inverted * 10000) / 10000;
+ };
+ scale.domain = function (x) {
+ if (!arguments.length) { return backingLinearScale.domain(); }
+ backingLinearScale.domain(x);
+ return scale;
+ };
+ scale.range = function (x) {
+ if (!arguments.length) { return backingLinearScale.range(); }
+ backingLinearScale.range(x);
+ return scale;
+ };
+ scale.rangeRound = function (x) {
+ return backingLinearScale.range(x);
+ };
+ scale.clamp = function (x) {
+ if (!arguments.length) { return backingLinearScale.clamp(); }
+ backingLinearScale.clamp(x);
+ return scale;
+ };
+ scale.interpolate = function (x) {
+ if (!arguments.length) { return backingLinearScale.interpolate(); }
+ backingLinearScale.interpolate(x);
+ return scale;
+ };
+ scale.ticks = function (m, flexTicks) {
+ const backingTicks = backingLinearScale.ticks(m);
+ const ticksMap = map();
+
+ const [domainStart, domainEnd] = backingLinearScale.domain();
+
+ const start = Math.max(Math.ceil(domainStart), head(index).index) + Math.abs(head(index).index);
+ const end = Math.min(Math.floor(domainEnd), last(index).index) + Math.abs(head(index).index);
+
+ if (Math.floor(domainEnd) > end) {
+ // console.log(end, domainEnd, index);
+ }
+
+ const desiredTickCount = Math.ceil((end - start) / (domainEnd - domainStart) * backingTicks.length);
+
+ for (let i = MAX_LEVEL; i >= 0; i--) {
+ const ticksAtLevel = ticksMap.get(i);
+ const temp = isNotDefined(ticksAtLevel)
+ ? []
+ : ticksAtLevel.slice();
+
+ for (let j = start; j <= end; j++) {
+ if (index[j].level === i) {
+ temp.push(index[j]);
+ }
+ }
+
+ ticksMap.set(i, temp);
+ }
+
+ let unsortedTicks = [];
+ for (let i = MAX_LEVEL; i >= 0; i--) {
+ if ((ticksMap.get(i).length + unsortedTicks.length) > desiredTickCount * 1.5) { break; }
+ unsortedTicks = unsortedTicks.concat(ticksMap.get(i).map((d) => d.index));
+ }
+
+ const ticks = unsortedTicks.sort(ascending);
+
+ // console.log(backingTicks.length, desiredTickCount, ticks, ticksMap);
+
+ if (!flexTicks && end - start > ticks.length) {
+ const ticksSet = set(ticks);
+
+ const d = Math.abs(head(index).index);
+
+ // ignore ticks within this distance
+ const distance = Math.ceil(
+ (backingTicks.length > 0
+ ? (last(backingTicks) - head(backingTicks)) / (backingTicks.length) / 4
+ : 1) * 1.5);
+
+ for (let i = 0; i < ticks.length - 1; i++) {
+ for (let j = i + 1; j < ticks.length; j++) {
+ if (ticks[j] - ticks[i] <= distance) {
+ ticksSet.remove(index[ticks[i] + d].level >= index[ticks[j] + d].level ? ticks[j] : ticks[i]);
+ }
+ }
+ }
+
+ const tickValues = ticksSet
+ .values()
+ .map((i) => parseInt(i, 10));
+
+ // console.log(ticks.length, tickValues, level);
+ // console.log(ticks, tickValues, distance);
+
+ return tickValues;
+ }
+
+ return ticks;
+ };
+ scale.tickFormat = function () {
+ return function (x) {
+ const d = Math.abs(head(index).index);
+ const { format, date } = index[Math.floor(x + d)];
+ return format(date);
+ };
+ };
+ scale.value = function (x) {
+ const d = Math.abs(head(index).index);
+ if (isDefined(index[Math.floor(x + d)])) {
+ const { date } = index[Math.floor(x + d)];
+ return date;
+ }
+ };
+ scale.nice = function (m) {
+ backingLinearScale.nice(m);
+ return scale;
+ };
+ scale.index = function (x) {
+ if (!arguments.length) { return index; }
+ index = x;
+ return scale;
+ };
+ scale.copy = function () {
+ return financeDiscontinuousScale(index, futureProvider, backingLinearScale.copy());
+ };
+ return scale;
+}
diff --git a/packages/react-financial-charts/src/scale/index.ts b/packages/react-financial-charts/src/scale/index.ts
new file mode 100644
index 000000000..010d12a42
--- /dev/null
+++ b/packages/react-financial-charts/src/scale/index.ts
@@ -0,0 +1,9 @@
+export {
+ default as discontinuousTimeScaleProvider,
+ discontinuousTimeScaleProviderBuilder,
+} from "./discontinuousTimeScaleProvider";
+export { default as financeDiscontinuousScale } from "./financeDiscontinuousScale";
+
+export function defaultScaleProvider(xScale) {
+ return (data, xAccessor) => ({ data, xScale, xAccessor, displayXAccessor: xAccessor });
+}
diff --git a/packages/react-financial-charts/src/scale/levels.ts b/packages/react-financial-charts/src/scale/levels.ts
new file mode 100644
index 000000000..d8a648abd
--- /dev/null
+++ b/packages/react-financial-charts/src/scale/levels.ts
@@ -0,0 +1,36 @@
+export const defaultFormatters = {
+ yearFormat: "%Y",
+ quarterFormat: "%b %Y",
+ monthFormat: "%b",
+ weekFormat: "%d %b",
+ dayFormat: "%a %d",
+ hourFormat: "%_I %p",
+ minuteFormat: "%I:%M %p",
+ secondFormat: "%I:%M:%S %p",
+ milliSecondFormat: "%L",
+};
+
+export const levelDefinition = [
+ /* eslint-disable no-unused-vars */
+ /* 19 */(d, date, i) => d.startOfYear && date.getFullYear() % 12 === 0 && "yearFormat",
+ /* 18 */(d, date, i) => d.startOfYear && date.getFullYear() % 4 === 0 && "yearFormat",
+ /* 17 */(d, date, i) => d.startOfYear && date.getFullYear() % 2 === 0 && "yearFormat",
+ /* 16 */(d, date, i) => d.startOfYear && "yearFormat",
+ /* 15 */(d, date, i) => d.startOfQuarter && "quarterFormat",
+ /* 14 */(d, date, i) => d.startOfMonth && "monthFormat",
+ /* 13 */(d, date, i) => d.startOfWeek && "weekFormat",
+ /* 12 */(d, date, i) => d.startOfDay && i % 2 === 0 && "dayFormat",
+ /* 11 */(d, date, i) => d.startOfDay && "dayFormat",
+ /* 10 */(d, date, i) => d.startOfHalfDay && "hourFormat", // 12h
+ /* 9 */(d, date, i) => d.startOfQuarterDay && "hourFormat", // 6h
+ /* 8 */(d, date, i) => d.startOfEighthOfADay && "hourFormat", // 3h
+ /* 7 */(d, date, i) => d.startOfHour && date.getHours() % 2 === 0 && "hourFormat", // 2h -- REMOVE THIS
+ /* 6 */(d, date, i) => d.startOfHour && "hourFormat", // 1h
+ /* 5 */(d, date, i) => d.startOf30Minutes && "minuteFormat",
+ /* 4 */(d, date, i) => d.startOf15Minutes && "minuteFormat",
+ /* 3 */(d, date, i) => d.startOf5Minutes && "minuteFormat",
+ /* 2 */(d, date, i) => d.startOfMinute && "minuteFormat",
+ /* 1 */(d, date, i) => d.startOf30Seconds && "secondFormat",
+ /* 0 */(d, date, i) => "secondFormat",
+ /* eslint-enable no-unused-vars */
+];
diff --git a/packages/react-financial-charts/src/series/AlternatingFillAreaSeries.tsx b/packages/react-financial-charts/src/series/AlternatingFillAreaSeries.tsx
new file mode 100644
index 000000000..7d851599f
--- /dev/null
+++ b/packages/react-financial-charts/src/series/AlternatingFillAreaSeries.tsx
@@ -0,0 +1,199 @@
+import * as React from "react";
+
+import { strokeDashTypes } from "../utils";
+import { AreaSeries } from "./AreaSeries";
+import { SVGComponent } from "./SVGComponent";
+
+interface AlternatingFillAreaSeriesProps {
+ stroke: {
+ top: string;
+ bottom: string;
+ };
+ strokeWidth: {
+ top: number;
+ bottom: number;
+ };
+ strokeOpacity: {
+ top: number;
+ bottom: number;
+ };
+ fill: {
+ top: string;
+ bottom: string;
+ };
+ fillOpacity: {
+ top: number,
+ bottom: number,
+ };
+ strokeDasharray: {
+ top: strokeDashTypes;
+ bottom: strokeDashTypes;
+ };
+ className?: string;
+ yAccessor: any; // func;
+ baseAt: number;
+ interpolation?: any; // func
+}
+
+export class AlternatingFillAreaSeries extends React.Component {
+
+ public static defaultProps = {
+ stroke: {
+ top: "#38C172",
+ bottom: "#E3342F",
+ },
+ strokeWidth: {
+ top: 2,
+ bottom: 2,
+ },
+ strokeOpacity: {
+ top: 1,
+ bottom: 1,
+ },
+ fill: {
+ top: "#A2F5BF",
+ bottom: "#EF5753",
+ },
+ fillOpacity: {
+ top: 0.5,
+ bottom: 0.5,
+ },
+ strokeDasharray: {
+ top: "Solid",
+ bottom: "Solid",
+ },
+ className: "react-stockcharts-alternating-area",
+ };
+
+ private clipPathId1: string;
+ private clipPathId2: string;
+
+ public constructor(props) {
+ super(props);
+ this.renderClip = this.renderClip.bind(this);
+ this.topClip = this.topClip.bind(this);
+ this.bottomClip = this.bottomClip.bind(this);
+ this.baseAt = this.baseAt.bind(this);
+
+ const id1 = String(Math.round(Math.random() * 10000 * 10000));
+ this.clipPathId1 = `alternating-area-clip-${id1}`;
+
+ const id2 = String(Math.round(Math.random() * 10000 * 10000));
+ this.clipPathId2 = `alternating-area-clip-${id2}`;
+ }
+
+ public topClip(ctx, moreProps) {
+ const { chartConfig } = moreProps;
+ const { baseAt } = this.props;
+ const { yScale, width } = chartConfig;
+
+ ctx.beginPath();
+ ctx.rect(
+ 0,
+ 0,
+ width,
+ yScale(baseAt),
+ );
+ ctx.clip();
+ }
+
+ public bottomClip(ctx, moreProps) {
+ const { chartConfig } = moreProps;
+ const { baseAt } = this.props;
+ const { yScale, width, height } = chartConfig;
+
+ ctx.beginPath();
+ ctx.rect(
+ 0,
+ yScale(baseAt),
+ width,
+ height - yScale(baseAt),
+ );
+ ctx.clip();
+ }
+
+ public renderClip(moreProps) {
+ const { chartConfig } = moreProps;
+ const { baseAt } = this.props;
+ const { yScale, width, height } = chartConfig;
+
+ return (
+
+
+
+
+
+
+
+
+ );
+ }
+
+ public baseAt(yScale) {
+ return yScale(this.props.baseAt);
+ }
+
+ public render() {
+ const { className, yAccessor, interpolation } = this.props;
+ const {
+ stroke,
+ strokeWidth,
+ strokeOpacity,
+ strokeDasharray,
+
+ fill,
+ fillOpacity,
+ } = this.props;
+
+ const style1 = { clipPath: `url(#${this.clipPathId1})` };
+ const style2 = { clipPath: `url(#${this.clipPathId2})` };
+
+ return (
+
+
+ {this.renderClip}
+
+
+
+
+ );
+ }
+}
diff --git a/packages/react-financial-charts/src/series/AreaOnlySeries.tsx b/packages/react-financial-charts/src/series/AreaOnlySeries.tsx
new file mode 100644
index 000000000..27adf8577
--- /dev/null
+++ b/packages/react-financial-charts/src/series/AreaOnlySeries.tsx
@@ -0,0 +1,112 @@
+import { area as d3Area } from "d3-shape";
+import * as React from "react";
+
+import GenericChartComponent from "../GenericChartComponent";
+import { getAxisCanvas } from "../GenericComponent";
+
+import { first, functor, hexToRGBA, isDefined } from "../utils";
+
+interface AreaOnlySeriesProps {
+ className?: string;
+ yAccessor: any; // func
+ stroke?: string;
+ fill?: string;
+ opacity?: number;
+ defined?: any; // func
+ base?: number | any; // func
+ interpolation?: any; // func
+ canvasClip?: any; // func
+ style?: React.CSSProperties;
+ canvasGradient?: any; // func
+}
+
+export class AreaOnlySeries extends React.Component {
+
+ public static defaultProps = {
+ className: "line",
+ fill: "none",
+ opacity: 1,
+ defined: (d) => !isNaN(d),
+ base: (yScale /* , d, moreProps */) => first(yScale.range()),
+ };
+
+ public render() {
+ return (
+
+ );
+ }
+
+ private readonly renderSVG = (moreProps) => {
+ const { yAccessor, defined, base, style } = this.props;
+ const { stroke, fill, className = "line", opacity, interpolation } = this.props;
+
+ const { xScale, chartConfig: { yScale }, plotData, xAccessor } = moreProps;
+
+ const newBase = functor(base);
+ const areaSeries = d3Area()
+ .defined((d) => defined(yAccessor(d)))
+ .x((d) => Math.round(xScale(xAccessor(d))))
+ .y0((d) => newBase(yScale, d, moreProps))
+ .y1((d) => Math.round(yScale(yAccessor(d))));
+
+ if (isDefined(interpolation)) {
+ areaSeries.curve(interpolation);
+ }
+
+ const data = areaSeries(plotData);
+ const newClassName = className.concat(isDefined(stroke) ? "" : " line-stroke");
+ return (
+
+ );
+ }
+
+ private readonly drawOnCanvas = (ctx, moreProps) => {
+ const { yAccessor, defined, base, canvasGradient } = this.props;
+ const { fill, stroke, opacity, interpolation, canvasClip } = this.props;
+
+ const { xScale, chartConfig: { yScale }, plotData, xAccessor } = moreProps;
+
+ if (canvasClip) {
+ ctx.save();
+ canvasClip(ctx, moreProps);
+ }
+
+ if (canvasGradient != null) {
+ ctx.fillStyle = canvasGradient(moreProps, ctx);
+ } else {
+ ctx.fillStyle = hexToRGBA(fill, opacity);
+ }
+ ctx.strokeStyle = stroke;
+
+ ctx.beginPath();
+ const newBase = functor(base);
+ const areaSeries = d3Area()
+ .defined((d) => defined(yAccessor(d)))
+ .x((d) => Math.round(xScale(xAccessor(d))))
+ .y0((d) => newBase(yScale, d, moreProps))
+ .y1((d) => Math.round(yScale(yAccessor(d))))
+ .context(ctx);
+
+ if (isDefined(interpolation)) {
+ areaSeries.curve(interpolation);
+ }
+ areaSeries(plotData);
+ ctx.fill();
+
+ if (canvasClip) {
+ ctx.restore();
+ }
+ }
+}
diff --git a/packages/react-financial-charts/src/series/AreaSeries.tsx b/packages/react-financial-charts/src/series/AreaSeries.tsx
new file mode 100644
index 000000000..a53da80cc
--- /dev/null
+++ b/packages/react-financial-charts/src/series/AreaSeries.tsx
@@ -0,0 +1,80 @@
+import * as React from "react";
+
+import { strokeDashTypes } from "../utils";
+import { AreaOnlySeries } from "./AreaOnlySeries";
+import { LineSeries } from "./LineSeries";
+
+interface AreaSeriesProps {
+ stroke?: string;
+ strokeWidth?: number;
+ canvasGradient?: any; // func
+ fill: string;
+ strokeOpacity: number;
+ opacity: number;
+ className?: string;
+ yAccessor: any; // func
+ baseAt?: any; // func
+ interpolation?: any; // func
+ canvasClip?: any; // func
+ style: React.CSSProperties;
+ strokeDasharray: strokeDashTypes;
+}
+
+export class AreaSeries extends React.Component {
+
+ public static defaultProps = {
+ stroke: "#4682B4",
+ strokeWidth: 1,
+ strokeOpacity: 1,
+ strokeDasharray: "Solid",
+ opacity: 0.5,
+ fill: "#4682B4",
+ className: "react-stockcharts-area",
+ };
+
+ public render() {
+ const {
+ baseAt,
+ className,
+ opacity,
+ stroke,
+ strokeWidth,
+ strokeOpacity,
+ strokeDasharray,
+ canvasGradient,
+ fill,
+ interpolation,
+ style,
+ canvasClip,
+ yAccessor,
+ } = this.props;
+
+ return (
+
+
+
+
+ );
+ }
+}
diff --git a/packages/react-financial-charts/src/series/BarSeries.tsx b/packages/react-financial-charts/src/series/BarSeries.tsx
new file mode 100644
index 000000000..c8a68075c
--- /dev/null
+++ b/packages/react-financial-charts/src/series/BarSeries.tsx
@@ -0,0 +1,124 @@
+import * as React from "react";
+
+import GenericChartComponent from "../GenericChartComponent";
+import { getAxisCanvas } from "../GenericComponent";
+
+import {
+ drawOnCanvas2,
+ drawOnCanvasHelper,
+ getBarsSVG2,
+ identityStack,
+ StackedBarSeries,
+ svgHelper,
+} from "./StackedBarSeries";
+
+import { functor, isDefined } from "../utils";
+
+interface BarSeriesProps {
+ baseAt?: number | any; // func
+ stroke?: boolean;
+ width?: number | any; // func
+ yAccessor: any; // func
+ opacity?: number;
+ fill?: number | any; // func
+ className?: number | any; // func
+ clip?: boolean;
+ swapScales?: boolean;
+}
+
+export class BarSeries extends React.Component {
+
+ public static defaultProps = StackedBarSeries.defaultProps;
+
+ public render() {
+ const { clip } = this.props;
+
+ return (
+
+ );
+ }
+
+ private readonly drawOnCanvas = (ctx, moreProps) => {
+ if (this.props.swapScales) {
+ const { xAccessor } = moreProps;
+ drawOnCanvasHelper(ctx, this.props, moreProps, xAccessor, identityStack);
+ } else {
+ const bars = getBars(this.props, moreProps);
+ drawOnCanvas2(this.props, ctx, bars);
+ }
+
+ }
+
+ private readonly renderSVG = (moreProps) => {
+ if (this.props.swapScales) {
+ const { xAccessor } = moreProps;
+ return {svgHelper(this.props, moreProps, xAccessor, identityStack)};
+ } else {
+ const bars = getBars(this.props, moreProps);
+ return {getBarsSVG2(this.props, bars)};
+ }
+ }
+}
+
+/*
+ Initially, this program was using StackedBarSeries.getBars
+ to benefit from code reuse and having a single place that
+ contains the logic for drawing all types of bar charts
+ simple, grouped, horizontal, but turnes out
+ making it highly cuztimizable also made it slow for the
+ most simple case, a regular bar chart.
+ This function contains just the necessary logic
+ to create bars
+*/
+function getBars(props, moreProps) {
+ const { baseAt, fill, stroke, yAccessor } = props;
+ const { xScale, xAccessor, plotData, chartConfig: { yScale } } = moreProps;
+
+ const getFill = functor(fill);
+ const getBase = functor(baseAt);
+
+ const widthFunctor = functor(props.width);
+
+ const width = widthFunctor(props, {
+ xScale,
+ xAccessor,
+ plotData,
+ });
+
+ const offset = Math.floor(0.5 * width);
+
+ const bars = plotData
+ .filter((d) => isDefined(yAccessor(d)))
+ .map((d) => {
+ const yValue = yAccessor(d);
+ let y = yScale(yValue);
+
+ const x = Math.round(xScale(xAccessor(d))) - offset;
+ let h = getBase(xScale, yScale, d) - yScale(yValue);
+
+ if (h < 0) {
+ y = y + h;
+ h = -h;
+ }
+
+ return {
+ // type: "line"
+ x,
+ y: Math.round(y),
+ height: Math.round(h),
+ width: offset * 2,
+ fill: getFill(d, 0),
+ stroke: stroke ? getFill(d, 0) : "none",
+ };
+ });
+
+ return bars;
+}
diff --git a/packages/react-financial-charts/src/series/BollingerSeries.tsx b/packages/react-financial-charts/src/series/BollingerSeries.tsx
new file mode 100644
index 000000000..df9ddb593
--- /dev/null
+++ b/packages/react-financial-charts/src/series/BollingerSeries.tsx
@@ -0,0 +1,75 @@
+import * as React from "react";
+
+import { AreaOnlySeries } from "./AreaOnlySeries";
+import { LineSeries } from "./LineSeries";
+
+interface BollingerSeriesProps {
+ yAccessor: any; // func
+ className?: string;
+ areaClassName?: string;
+ opacity?: number;
+ type?: string;
+ stroke: {
+ top: string,
+ middle: string,
+ bottom: string,
+ };
+ fill: string;
+}
+
+export class BollingerSeries extends React.Component {
+
+ public static defaultProps = {
+ className: "react-stockcharts-bollinger-band-series",
+ areaClassName: "react-stockcharts-bollinger-band-series-area",
+ opacity: 0.2,
+ };
+
+ public render() {
+ const { areaClassName, className, opacity } = this.props;
+ const { stroke, fill } = this.props;
+
+ return (
+
+
+
+
+
+
+ );
+ }
+
+ private readonly yAccessorForScalledBottom = (scale, d) => {
+ const { yAccessor } = this.props;
+ return scale(yAccessor(d) && yAccessor(d).bottom);
+ }
+
+ private readonly yAccessorForBottom = (d) => {
+ const { yAccessor } = this.props;
+ return yAccessor(d) && yAccessor(d).bottom;
+ }
+
+ private readonly yAccessorForMiddle = (d) => {
+ const { yAccessor } = this.props;
+ return yAccessor(d) && yAccessor(d).middle;
+ }
+
+ private readonly yAccessorForTop = (d) => {
+ const { yAccessor } = this.props;
+ return yAccessor(d) && yAccessor(d).top;
+ }
+}
diff --git a/packages/react-financial-charts/src/series/CandlestickSeries.tsx b/packages/react-financial-charts/src/series/CandlestickSeries.tsx
new file mode 100644
index 000000000..5a3d3de52
--- /dev/null
+++ b/packages/react-financial-charts/src/series/CandlestickSeries.tsx
@@ -0,0 +1,237 @@
+import { nest } from "d3-collection";
+import * as React from "react";
+
+import GenericChartComponent from "../GenericChartComponent";
+import { getAxisCanvas } from "../GenericComponent";
+
+import {
+ functor, head, hexToRGBA, isDefined, plotDataLengthBarWidth,
+} from "../utils";
+
+interface CandlestickSeriesProps {
+ readonly className?: string;
+ readonly wickClassName?: string;
+ readonly candleClassName?: string;
+ readonly candleStrokeWidth?: number | string;
+ readonly widthRatio?: number;
+ readonly width?: number | any; // func
+ readonly classNames?: string | any; // func
+ readonly fill?: string | any; // func
+ readonly stroke?: string | any; // func
+ readonly wickStroke?: string | any; // func
+ readonly yAccessor?: any; // func
+ readonly clip?: boolean;
+ readonly opacity?: number;
+}
+
+export class CandlestickSeries extends React.Component {
+
+ public static defaultProps = {
+ className: "react-stockcharts-candlestick",
+ wickClassName: "react-stockcharts-candlestick-wick",
+ candleClassName: "react-stockcharts-candlestick-candle",
+ yAccessor: (d) => ({ open: d.open, high: d.high, low: d.low, close: d.close }),
+ classNames: (d) => d.close > d.open ? "up" : "down",
+ width: plotDataLengthBarWidth,
+ wickStroke: "#000000",
+ fill: (d) => d.close > d.open ? "#6BA583" : "#FF0000",
+ stroke: "#000000",
+ candleStrokeWidth: 0.5,
+ widthRatio: 0.8,
+ opacity: 0.5,
+ clip: true,
+ };
+
+ public render() {
+ const { clip } = this.props;
+
+ return (
+
+ );
+ }
+
+ private readonly drawOnCanvas = (ctx, moreProps) => {
+ drawOnCanvas(ctx, this.props, moreProps);
+ }
+
+ private readonly renderSVG = (moreProps) => {
+ const { className, wickClassName, candleClassName } = this.props;
+ const { xScale, chartConfig: { yScale }, plotData, xAccessor } = moreProps;
+
+ const candleData = getCandleData(this.props, xAccessor, xScale, yScale, plotData);
+
+ return
+
+ {getWicksSVG(candleData)}
+
+
+ {getCandlesSVG(this.props, candleData)}
+
+ ;
+ }
+}
+
+function getWicksSVG(candleData) {
+
+ const wicks = candleData
+ .map((each, idx) => {
+ const d = each.wick;
+ return ;
+ });
+
+ return wicks;
+}
+
+function getCandlesSVG(props: CandlestickSeriesProps, candleData) {
+
+ const { opacity, candleStrokeWidth } = props;
+
+ const candles = candleData.map((d, idx) => {
+ if (d.width <= 1) {
+ return (
+
+ );
+ } else if (d.height === 0) {
+ return (
+
+ );
+ }
+ return (
+
+ );
+ });
+ return candles;
+}
+
+function drawOnCanvas(ctx, props: CandlestickSeriesProps, moreProps) {
+ const { opacity, candleStrokeWidth } = props;
+ const { xScale, chartConfig: { yScale }, plotData, xAccessor } = moreProps;
+
+ const candleData = getCandleData(props, xAccessor, xScale, yScale, plotData);
+
+ const wickNest = nest()
+ .key((d) => d.wick.stroke)
+ .entries(candleData);
+
+ wickNest.forEach((outer) => {
+ const { key, values } = outer;
+ ctx.strokeStyle = key;
+ ctx.fillStyle = key;
+ values.forEach((each) => {
+
+ const d = each.wick;
+
+ ctx.fillRect(d.x - 0.5, d.y1, 1, d.y2 - d.y1);
+ ctx.fillRect(d.x - 0.5, d.y3, 1, d.y4 - d.y3);
+ });
+ });
+
+ const candleNest = nest()
+ .key((d) => d.stroke)
+ .key((d) => d.fill)
+ .entries(candleData);
+
+ candleNest.forEach((outer) => {
+ const { key: strokeKey, values: strokeValues } = outer;
+ if (strokeKey !== "none") {
+ ctx.strokeStyle = strokeKey;
+ ctx.lineWidth = candleStrokeWidth;
+ }
+ strokeValues.forEach((inner) => {
+ const { key, values } = inner;
+ const fillStyle = head(values).width <= 1
+ ? key
+ : hexToRGBA(key, opacity);
+ ctx.fillStyle = fillStyle;
+
+ values.forEach((d) => {
+ if (d.width <= 1) {
+ ctx.fillRect(d.x - 0.5, d.y, 1, d.height);
+ } else if (d.height === 0) {
+ ctx.fillRect(d.x, d.y - 0.5, d.width, 1);
+ } else {
+ ctx.fillRect(d.x, d.y, d.width, d.height);
+ if (strokeKey !== "none") {
+ ctx.strokeRect(d.x, d.y, d.width, d.height);
+ }
+ }
+ });
+ });
+ });
+}
+
+function getCandleData(props: CandlestickSeriesProps, xAccessor, xScale, yScale, plotData) {
+
+ const { wickStroke: wickStrokeProp } = props;
+ const wickStroke = functor(wickStrokeProp);
+
+ const { classNames, fill: fillProp, stroke: strokeProp, yAccessor } = props;
+ const className = functor(classNames);
+
+ const fill = functor(fillProp);
+ const stroke = functor(strokeProp);
+
+ const widthFunctor = functor(props.width);
+ const width = widthFunctor(props, {
+ xScale,
+ xAccessor,
+ plotData,
+ });
+
+ const trueOffset = 0.5 * width;
+ const offset = trueOffset > 0.7
+ ? Math.round(trueOffset)
+ : Math.floor(trueOffset);
+
+ const candles: any[] = [];
+
+ // tslint:disable-next-line: prefer-for-of
+ for (let i = 0; i < plotData.length; i++) {
+ const d = plotData[i];
+ if (isDefined(yAccessor(d).close)) {
+ const x = Math.round(xScale(xAccessor(d)));
+
+ const ohlc = yAccessor(d);
+ const y = Math.round(yScale(Math.max(ohlc.open, ohlc.close)));
+ const height = Math.round(Math.abs(yScale(ohlc.open) - yScale(ohlc.close)));
+
+ candles.push({
+ // type: "line"
+ x: x - offset,
+ y,
+ wick: {
+ stroke: wickStroke(ohlc),
+ x,
+ y1: Math.round(yScale(ohlc.high)),
+ y2: y,
+ y3: y + height, // Math.round(yScale(Math.min(ohlc.open, ohlc.close))),
+ y4: Math.round(yScale(ohlc.low)),
+ },
+ height,
+ width: offset * 2,
+ className: className(ohlc),
+ fill: fill(ohlc),
+ stroke: stroke(ohlc),
+ direction: (ohlc.close - ohlc.open),
+ });
+ }
+ }
+
+ return candles;
+}
diff --git a/packages/react-financial-charts/src/series/CircleMarker.tsx b/packages/react-financial-charts/src/series/CircleMarker.tsx
new file mode 100644
index 000000000..586d3ef5e
--- /dev/null
+++ b/packages/react-financial-charts/src/series/CircleMarker.tsx
@@ -0,0 +1,70 @@
+import * as React from "react";
+
+import { functor, hexToRGBA } from "../utils";
+
+interface CircleProps {
+ stroke?: string;
+ fill: string;
+ opacity: number;
+ point: {
+ x: number,
+ y: number,
+ datum: any,
+ };
+ className?: string;
+ strokeWidth?: number;
+ r: number | any; // func
+}
+
+export class Circle extends React.Component {
+
+ public static defaultProps = {
+ stroke: "#4682B4",
+ strokeWidth: 1,
+ opacity: 0.5,
+ fill: "#4682B4",
+ className: "react-stockcharts-marker-circle",
+ };
+
+ public static drawOnCanvas = (props, point, ctx) => {
+
+ const { stroke, fill, opacity, strokeWidth } = props;
+
+ ctx.strokeStyle = stroke;
+ ctx.lineWidth = strokeWidth;
+
+ if (fill !== "none") {
+ ctx.fillStyle = hexToRGBA(fill, opacity);
+ }
+
+ Circle.drawOnCanvasWithNoStateChange(props, point, ctx);
+ }
+
+ public static drawOnCanvasWithNoStateChange = (props, point, ctx) => {
+
+ const { r } = props;
+ const radius = functor(r)(point.datum);
+
+ ctx.moveTo(point.x, point.y);
+ ctx.beginPath();
+ ctx.arc(point.x, point.y, radius, 0, 2 * Math.PI, false);
+ ctx.stroke();
+ ctx.fill();
+ }
+
+ public render() {
+ const { className, stroke, strokeWidth, opacity, fill, point, r } = this.props;
+ const radius = functor(r)(point.datum);
+ return (
+
+ );
+ }
+}
diff --git a/packages/react-financial-charts/src/series/ElderRaySeries.tsx b/packages/react-financial-charts/src/series/ElderRaySeries.tsx
new file mode 100644
index 000000000..71bfec5f1
--- /dev/null
+++ b/packages/react-financial-charts/src/series/ElderRaySeries.tsx
@@ -0,0 +1,93 @@
+import * as React from "react";
+
+import OverlayBarSeries from "./OverlayBarSeries";
+import { StraightLine } from "./StraightLine";
+
+interface ElderRaySeriesProps {
+ className?: string;
+ yAccessor: any; // func
+ opacity?: number;
+ stroke?: boolean;
+ bullPowerFill?: string;
+ bearPowerFill?: string;
+ straightLineStroke?: string;
+ straightLineOpacity?: number;
+ widthRatio?: number;
+ clip: boolean;
+}
+
+export class ElderRaySeries extends React.Component {
+
+ public static defaultProps = {
+ className: "react-stockcharts-elderray-series",
+ straightLineStroke: "#000000",
+ straightLineOpacity: 0.3,
+ opacity: 0.5,
+ stroke: true,
+ bullPowerFill: "#6BA583",
+ bearPowerFill: "#FF0000",
+ widthRatio: 0.8,
+ clip: true,
+ };
+
+ public render() {
+ const { className, opacity, stroke,
+ straightLineStroke,
+ straightLineOpacity,
+ widthRatio,
+ } = this.props;
+ const { clip } = this.props;
+
+ return (
+
+
+
+
+ );
+ }
+
+ private readonly yAccessorBullTop = (d) => {
+ const { yAccessor } = this.props;
+ return yAccessor(d) && (yAccessor(d).bullPower > 0 ? yAccessor(d).bullPower : undefined);
+ }
+
+ private readonly yAccessorBearTop = (d) => {
+ const { yAccessor } = this.props;
+ return yAccessor(d) && (yAccessor(d).bearPower > 0 ? yAccessor(d).bearPower : undefined);
+ }
+
+ private readonly yAccessorBullBottom = (d) => {
+ const { yAccessor } = this.props;
+ return yAccessor(d) && (yAccessor(d).bullPower < 0 ? 0 : undefined);
+ }
+
+ private readonly yAccessorBearBottom = (d) => {
+ const { yAccessor } = this.props;
+ return yAccessor(d) && (yAccessor(d).bullPower < 0
+ || yAccessor(d).bullPower * yAccessor(d).bearPower < 0 // bullPower is +ve and bearPower is -ve
+ ? Math.min(0, yAccessor(d).bullPower) : undefined);
+ }
+
+ private readonly yAccessorForBarBase = (xScale, yScale, d) => {
+ const { yAccessor } = this.props;
+ const y = yAccessor(d) && Math.min(yAccessor(d).bearPower, 0);
+ return yScale(y);
+ }
+
+ private readonly fillForEachBar = (d, yAccessorNumber) => {
+ const { bullPowerFill, bearPowerFill } = this.props;
+ return yAccessorNumber % 2 === 0 ? bullPowerFill : bearPowerFill;
+ }
+}
diff --git a/packages/react-financial-charts/src/series/GroupedBarSeries.tsx b/packages/react-financial-charts/src/series/GroupedBarSeries.tsx
new file mode 100644
index 000000000..6e4d41cee
--- /dev/null
+++ b/packages/react-financial-charts/src/series/GroupedBarSeries.tsx
@@ -0,0 +1,62 @@
+import * as React from "react";
+
+import GenericChartComponent from "../GenericChartComponent";
+import { getAxisCanvas } from "../GenericComponent";
+import { drawOnCanvasHelper, identityStack, StackedBarSeries, svgHelper } from "./StackedBarSeries";
+
+interface GroupedBarSeriesProps {
+ baseAt: number | any; // func
+ direction: "up" | "down";
+ stroke: boolean;
+ widthRatio: number;
+ opacity: number;
+ fill: string | any; // func
+ className: string | any; // func
+ yAccessor: any[]; // func
+}
+
+export class GroupedBarSeries extends React.Component {
+
+ public static defaultProps = {
+ ...StackedBarSeries.defaultProps,
+ widthRatio: 0.8,
+ spaceBetweenBar: 5,
+ };
+
+ public render() {
+ return (
+
+ );
+ }
+
+ private readonly drawOnCanvas = (ctx, moreProps) => {
+ const { xAccessor } = moreProps;
+
+ drawOnCanvasHelper(ctx, this.props, moreProps, xAccessor, identityStack, this.postProcessor);
+ }
+
+ private readonly renderSVG = (moreProps) => {
+ const { xAccessor } = moreProps;
+
+ return (
+
+ {svgHelper(this.props, moreProps, xAccessor, identityStack, this.postProcessor)}
+
+ );
+ }
+
+ private readonly postProcessor = (array) => {
+ return array.map((each) => {
+ return {
+ ...each,
+ x: each.x + each.offset - each.groupOffset,
+ width: each.groupWidth,
+ };
+ });
+ }
+}
diff --git a/packages/react-financial-charts/src/series/KagiSeries.tsx b/packages/react-financial-charts/src/series/KagiSeries.tsx
new file mode 100644
index 000000000..448bb5f79
--- /dev/null
+++ b/packages/react-financial-charts/src/series/KagiSeries.tsx
@@ -0,0 +1,178 @@
+import { curveStepBefore, line } from "d3-shape";
+import * as React from "react";
+
+import GenericChartComponent from "../GenericChartComponent";
+import { getAxisCanvas } from "../GenericComponent";
+import { isDefined, isNotDefined } from "../utils";
+
+interface KagiSeriesProps {
+ readonly className?: string;
+ readonly stroke?: {
+ yang: string;
+ yin: string;
+ };
+ readonly fill?: {
+ yang: string;
+ yin: string;
+ };
+ readonly strokeWidth: number;
+}
+
+export class KagiSeries extends React.Component {
+
+ public static defaultProps = {
+ className: "react-stockcharts-kagi",
+ strokeWidth: 2,
+ stroke: {
+ yang: "#6BA583",
+ yin: "#E60000",
+ },
+ fill: {
+ yang: "none",
+ yin: "none",
+ },
+ currentValueStroke: "#000000",
+ };
+
+ public render() {
+ return (
+
+ );
+ }
+
+ private readonly renderSVG = (moreProps) => {
+ const { xAccessor, xScale, chartConfig: { yScale }, plotData } = moreProps;
+
+ const {
+ className,
+ stroke = KagiSeries.defaultProps.stroke,
+ fill = KagiSeries.defaultProps.fill,
+ strokeWidth,
+ } = this.props;
+
+ const paths = helper(plotData, xAccessor)
+ .map((each, i) => {
+ const dataSeries = line()
+ .x((item) => xScale(item[0]))
+ .y((item) => yScale(item[1]))
+ .curve(curveStepBefore);
+
+ dataSeries(each.plot);
+
+ return (
+
+ );
+ });
+ return (
+
+ {paths}
+
+ );
+ }
+
+ private readonly drawOnCanvas = (ctx, moreProps) => {
+ const { xAccessor } = moreProps;
+
+ drawOnCanvas(ctx, this.props, moreProps, xAccessor);
+ }
+}
+
+function drawOnCanvas(ctx, props, moreProps, xAccessor) {
+ const { stroke, strokeWidth, currentValueStroke } = props;
+ const { xScale, chartConfig: { yScale }, plotData } = moreProps;
+
+ const paths = helper(plotData, xAccessor);
+
+ let begin = true;
+
+ paths.forEach((each) => {
+ ctx.strokeStyle = stroke[each.type];
+ ctx.lineWidth = strokeWidth;
+
+ ctx.beginPath();
+ let prevX;
+ each.plot.forEach((d) => {
+ const [x1, y] = [xScale(d[0]), yScale(d[1])];
+ if (begin) {
+ ctx.moveTo(x1, y);
+ begin = false;
+ } else {
+ if (isDefined(prevX)) {
+ ctx.lineTo(prevX, y);
+ }
+ ctx.lineTo(x1, y);
+ }
+ prevX = x1;
+ });
+ ctx.stroke();
+ });
+ const lastPlot = paths[paths.length - 1].plot;
+ const last = lastPlot[lastPlot.length - 1];
+ ctx.beginPath();
+ ctx.lineWidth = 1;
+
+ const [x, y1, y2] = [xScale(last[0]), yScale(last[2]), yScale(last[3])];
+ ctx.moveTo(x, y1);
+ ctx.lineTo(x + 10, y1);
+ ctx.stroke();
+
+ ctx.beginPath();
+ ctx.strokeStyle = currentValueStroke;
+ ctx.moveTo(x - 10, y2);
+ ctx.lineTo(x, y2);
+ ctx.stroke();
+}
+
+function helper(plotData, xAccessor) {
+ const kagiLine: any[] = [];
+ let kagi: {
+ added?: boolean;
+ plot?: any;
+ type?: any;
+ } = {};
+ let d = plotData[0];
+ let idx = xAccessor(d);
+
+ // tslint:disable-next-line: prefer-for-of
+ for (let i = 0; i < plotData.length; i++) {
+ d = plotData[i];
+
+ if (isNotDefined(d.close)) { continue; }
+ if (isNotDefined(kagi.type)) { kagi.type = d.startAs; }
+ if (isNotDefined(kagi.plot)) { kagi.plot = []; }
+
+ idx = xAccessor(d);
+ kagi.plot.push([idx, d.open]);
+
+ if (isDefined(d.changeTo)) {
+ kagi.plot.push([idx, d.changePoint]);
+ kagi.added = true;
+ kagiLine.push(kagi);
+
+ kagi = {
+ type: d.changeTo,
+ plot: [],
+ added: false,
+ };
+ kagi.plot.push([idx, d.changePoint]);
+ }
+ }
+
+ if (!kagi.added) {
+ kagi.plot.push([idx, d.close, d.current, d.reverseAt]);
+ kagiLine.push(kagi);
+ }
+
+ return kagiLine;
+}
diff --git a/packages/react-financial-charts/src/series/LineSeries.tsx b/packages/react-financial-charts/src/series/LineSeries.tsx
new file mode 100644
index 000000000..f70cca625
--- /dev/null
+++ b/packages/react-financial-charts/src/series/LineSeries.tsx
@@ -0,0 +1,208 @@
+
+import { line as d3Line } from "d3-shape";
+import * as React from "react";
+
+import GenericChartComponent from "../GenericChartComponent";
+import { getAxisCanvas, getMouseCanvas } from "../GenericComponent";
+
+import {
+ getClosestItemIndexes,
+ getStrokeDasharray,
+ hexToRGBA,
+ isDefined,
+ strokeDashTypes,
+} from "../utils";
+
+interface LineSeriesProps {
+ className?: string;
+ strokeWidth?: number;
+ strokeOpacity?: number;
+ stroke?: string;
+ hoverStrokeWidth?: number;
+ fill?: string;
+ defined?: any; // func
+ hoverTolerance?: number;
+ strokeDasharray?: strokeDashTypes;
+ highlightOnHover?: boolean;
+ onClick?: any; // func
+ onDoubleClick?: any; // func
+ onHover?: any; // func
+ onUnHover?: any; // func
+ onContextMenu?: any; // func
+ yAccessor?: any; // func
+ connectNulls?: boolean;
+ interpolation?: any; // func
+ canvasClip?: any; // func
+ style?: React.CSSProperties;
+}
+
+export class LineSeries extends React.Component {
+
+ public static defaultProps = {
+ className: "line ",
+ strokeWidth: 1,
+ strokeOpacity: 1,
+ hoverStrokeWidth: 4,
+ fill: "none",
+ stroke: "#4682B4",
+ strokeDasharray: "Solid",
+ defined: (d) => !isNaN(d),
+ hoverTolerance: 6,
+ highlightOnHover: false,
+ connectNulls: false,
+ };
+
+ public render() {
+ const { highlightOnHover, onHover, onUnHover } = this.props;
+ const hoverProps = (highlightOnHover || onHover || onUnHover)
+ ? {
+ isHover: this.isHover,
+ drawOn: ["mousemove", "pan"],
+ canvasToDraw: getMouseCanvas,
+ }
+ : {
+ drawOn: ["pan"],
+ canvasToDraw: getAxisCanvas,
+ };
+
+ return (
+
+ );
+ }
+
+ private readonly renderSVG = (moreProps) => {
+ const { yAccessor, stroke, strokeOpacity, strokeWidth, hoverStrokeWidth, defined, strokeDasharray } = this.props;
+ const { connectNulls } = this.props;
+ const { interpolation, style } = this.props;
+ const { xAccessor, chartConfig } = moreProps;
+
+ const { xScale, plotData, hovering } = moreProps;
+
+ const { yScale } = chartConfig;
+ const dataSeries = d3Line()
+ .x((d) => Math.round(xScale(xAccessor(d))))
+ .y((d) => Math.round(yScale(yAccessor(d))));
+
+ if (isDefined(interpolation)) {
+ dataSeries.curve(interpolation);
+ }
+ if (!connectNulls) {
+ dataSeries.defined((d) => defined(yAccessor(d)));
+ }
+
+ const data = dataSeries(plotData);
+
+ const { fill, className } = this.props;
+
+ return (
+
+ );
+ }
+
+ private readonly drawOnCanvas = (ctx, moreProps) => {
+ const {
+ yAccessor,
+ stroke,
+ strokeOpacity,
+ strokeWidth,
+ hoverStrokeWidth,
+ defined,
+ strokeDasharray,
+ interpolation,
+ canvasClip,
+ } = this.props;
+
+ const { connectNulls } = this.props;
+
+ const { xAccessor } = moreProps;
+ const { xScale, chartConfig: { yScale }, plotData, hovering } = moreProps;
+
+ if (canvasClip) {
+ ctx.save();
+ canvasClip(ctx, moreProps);
+ }
+
+ ctx.lineWidth = hovering ? hoverStrokeWidth : strokeWidth;
+
+ ctx.strokeStyle = hexToRGBA(stroke, strokeOpacity);
+ ctx.setLineDash(getStrokeDasharray(strokeDasharray).split(","));
+
+ const dataSeries = d3Line()
+ .x((d) => Math.round(xScale(xAccessor(d))))
+ .y((d) => Math.round(yScale(yAccessor(d))));
+
+ if (isDefined(interpolation)) {
+ dataSeries.curve(interpolation);
+ }
+ if (!connectNulls) {
+ dataSeries.defined((d) => defined(yAccessor(d)));
+ }
+
+ ctx.beginPath();
+ dataSeries.context(ctx)(plotData);
+ ctx.stroke();
+
+ if (canvasClip) {
+ ctx.restore();
+ }
+ }
+
+ private readonly isHover = (moreProps) => {
+ const { highlightOnHover, yAccessor, hoverTolerance = LineSeries.defaultProps.hoverTolerance } = this.props;
+
+ if (!highlightOnHover) { return false; }
+
+ const { mouseXY, currentItem, xScale, plotData } = moreProps;
+ const { chartConfig: { yScale, origin } } = moreProps;
+
+ const { xAccessor } = moreProps;
+
+ const [x, y] = mouseXY;
+ const radius = hoverTolerance;
+
+ const { left, right } = getClosestItemIndexes(plotData, xScale.invert(x), xAccessor);
+ if (left === right) {
+ const cy = yScale(yAccessor(currentItem)) + origin[1];
+ const cx = xScale(xAccessor(currentItem)) + origin[0];
+
+ const hovering1 = Math.pow(x - cx, 2) + Math.pow(y - cy, 2) < Math.pow(radius, 2);
+
+ return hovering1;
+ } else {
+ const l = plotData[left];
+ const r = plotData[right];
+ const x1 = xScale(xAccessor(l)) + origin[0];
+ const y1 = yScale(yAccessor(l)) + origin[1];
+ const x2 = xScale(xAccessor(r)) + origin[0];
+ const y2 = yScale(yAccessor(r)) + origin[1];
+
+ // y = m * x + b
+ const m /* slope */ = (y2 - y1) / (x2 - x1);
+ const b /* y intercept */ = -1 * m * x1 + y1;
+
+ const desiredY = Math.round(m * x + b);
+
+ const hovering2 = y >= desiredY - radius && y <= desiredY + radius;
+
+ return hovering2;
+ }
+ }
+}
diff --git a/packages/react-financial-charts/src/series/MACDSeries.tsx b/packages/react-financial-charts/src/series/MACDSeries.tsx
new file mode 100644
index 000000000..50c418e2b
--- /dev/null
+++ b/packages/react-financial-charts/src/series/MACDSeries.tsx
@@ -0,0 +1,92 @@
+import * as React from "react";
+
+import { BarSeries } from "./BarSeries";
+import { LineSeries } from "./LineSeries";
+import { StraightLine } from "./StraightLine";
+
+interface MACDSeriesProps {
+ className?: string;
+ yAccessor?: any; // func
+ opacity?: number;
+ divergenceStroke?: boolean;
+ zeroLineStroke?: string;
+ zeroLineOpacity?: number;
+ clip: boolean;
+ stroke: {
+ macd: string;
+ signal: string;
+ };
+ fill: {
+ divergence: string | any; // func
+ };
+ widthRatio?: number;
+ width?: number | any; // func
+}
+
+export class MACDSeries extends React.Component {
+
+ public static defaultProps = {
+ className: "react-stockcharts-macd-series",
+ zeroLineStroke: "#000000",
+ zeroLineOpacity: 0.3,
+ opacity: 0.6,
+ divergenceStroke: false,
+ clip: true,
+ widthRatio: 0.5,
+ width: BarSeries.defaultProps.width,
+ };
+
+ public render() {
+ const { className, opacity, divergenceStroke, widthRatio, width } = this.props;
+ const { stroke, fill } = this.props;
+
+ const { clip } = this.props;
+ const { zeroLineStroke, zeroLineOpacity } = this.props;
+
+ return (
+
+
+
+
+
+
+ );
+ }
+
+ private readonly yAccessorForDivergenceBase = (xScale, yScale) => {
+ return yScale(0);
+ }
+
+ private readonly yAccessorForDivergence = (d) => {
+ const { yAccessor } = this.props;
+ return yAccessor(d) && yAccessor(d).divergence;
+ }
+
+ private readonly yAccessorForSignal = (d) => {
+ const { yAccessor } = this.props;
+ return yAccessor(d) && yAccessor(d).signal;
+ }
+
+ private readonly yAccessorForMACD = (d) => {
+ const { yAccessor } = this.props;
+ return yAccessor(d) && yAccessor(d).macd;
+ }
+}
diff --git a/packages/react-financial-charts/src/series/OHLCSeries.tsx b/packages/react-financial-charts/src/series/OHLCSeries.tsx
new file mode 100644
index 000000000..f0a7223d4
--- /dev/null
+++ b/packages/react-financial-charts/src/series/OHLCSeries.tsx
@@ -0,0 +1,124 @@
+import { nest } from "d3-collection";
+import * as React from "react";
+import GenericChartComponent from "../GenericChartComponent";
+import { getAxisCanvas } from "../GenericComponent";
+
+import { functor, isDefined } from "../utils";
+
+interface OHLCSeriesProps {
+ className?: string;
+ classNames: string | any; // func
+ stroke: string | any; // func
+ yAccessor: any; // func
+ clip: boolean;
+}
+
+export class OHLCSeries extends React.Component {
+
+ public static defaultProps = {
+ className: "react-stockcharts-ohlc",
+ yAccessor: (d) => ({ open: d.open, high: d.high, low: d.low, close: d.close }),
+ classNames: (d) => isDefined(d.absoluteChange) ? (d.absoluteChange > 0 ? "up" : "down") : "firstbar",
+ stroke: (d) => isDefined(d.absoluteChange) ? (d.absoluteChange > 0 ? "#6BA583" : "#FF0000") : "#000000",
+ clip: true,
+ };
+
+ public render() {
+ const { clip } = this.props;
+
+ return ;
+ }
+
+ private readonly renderSVG = (moreProps) => {
+ const { className, yAccessor } = this.props;
+ const { xAccessor } = moreProps;
+ const { xScale, chartConfig: { yScale }, plotData } = moreProps;
+
+ const barData = getOHLCBars(this.props, xAccessor, yAccessor, xScale, yScale, plotData);
+
+ const { strokeWidth, bars } = barData;
+
+ return
+ {bars.map((d, idx) => )}
+ ;
+ }
+
+ private readonly drawOnCanvas = (ctx, moreProps) => {
+ const { yAccessor } = this.props;
+ const { xAccessor } = moreProps;
+ const { xScale, chartConfig: { yScale }, plotData } = moreProps;
+
+ const barData = getOHLCBars(this.props, xAccessor, yAccessor, xScale, yScale, plotData);
+ drawOnCanvas(ctx, barData);
+ }
+}
+
+function drawOnCanvas(ctx, barData) {
+
+ const { strokeWidth, bars } = barData;
+
+ const wickNest = nest()
+ .key((d) => d.stroke)
+ .entries(bars);
+
+ ctx.lineWidth = strokeWidth;
+
+ wickNest.forEach((outer) => {
+ const { key, values } = outer;
+ ctx.strokeStyle = key;
+ values.forEach((d) => {
+ ctx.beginPath();
+ ctx.moveTo(d.x, d.y1);
+ ctx.lineTo(d.x, d.y2);
+
+ ctx.moveTo(d.openX1, d.openY);
+ ctx.lineTo(d.openX2, d.openY);
+
+ ctx.moveTo(d.closeX1, d.closeY);
+ ctx.lineTo(d.closeX2, d.closeY);
+
+ ctx.stroke();
+ });
+ });
+}
+
+function getOHLCBars(props, xAccessor, yAccessor, xScale, yScale, plotData) {
+ const { classNames: classNamesProp, stroke: strokeProp } = props;
+
+ const strokeFunc = functor(strokeProp);
+ const classNameFunc = functor(classNamesProp);
+
+ const width = xScale(xAccessor(plotData[plotData.length - 1]))
+ - xScale(xAccessor(plotData[0]));
+
+ const barWidth = Math.max(1, Math.round(width / (plotData.length - 1) / 2) - 1.5);
+ const strokeWidth = Math.min(barWidth, 6);
+
+ const bars = plotData
+ .filter((d) => isDefined(yAccessor(d).close))
+ .map((d) => {
+ const ohlc = yAccessor(d);
+ const x = Math.round(xScale(xAccessor(d)));
+ const y1 = yScale(ohlc.high);
+ const y2 = yScale(ohlc.low);
+ const openX1 = x - barWidth;
+ const openX2 = x + strokeWidth / 2;
+ const openY = yScale(ohlc.open);
+ const closeX1 = x - strokeWidth / 2;
+ const closeX2 = x + barWidth;
+ const closeY = yScale(ohlc.close);
+ const className = classNameFunc(d);
+ const stroke = strokeFunc(d);
+
+ return { x, y1, y2, openX1, openX2, openY, closeX1, closeX2, closeY, stroke, className };
+ });
+ return { barWidth, strokeWidth, bars };
+}
diff --git a/packages/react-financial-charts/src/series/OverlayBarSeries.tsx b/packages/react-financial-charts/src/series/OverlayBarSeries.tsx
new file mode 100644
index 000000000..b426d5fd2
--- /dev/null
+++ b/packages/react-financial-charts/src/series/OverlayBarSeries.tsx
@@ -0,0 +1,123 @@
+import { merge } from "d3-array";
+
+import * as React from "react";
+
+import GenericChartComponent from "../GenericChartComponent";
+import { getAxisCanvas } from "../GenericComponent";
+
+import { first, functor, isDefined, isNotDefined, plotDataLengthBarWidth } from "../utils";
+import { drawOnCanvas2, getBarsSVG2 } from "./StackedBarSeries";
+
+interface OverlayBarSeriesProps {
+ baseAt: number | any; // func
+ direction: "up" | "down";
+ stroke: boolean;
+ widthRatio: number;
+ opacity: number;
+ fill: string | any; // func
+ className: string | any; // func
+ xAccessor?: any; // func
+ yAccessor?: any[]; // func
+ xScale?: any; // func
+ yScale?: any; // func
+ plotData?: number[];
+ clip: boolean;
+}
+
+export class OverlayBarSeries extends React.Component {
+
+ public static defaultProps = {
+ baseAt: (xScale, yScale/* , d*/) => first(yScale.range()),
+ direction: "up",
+ className: "bar",
+ stroke: false,
+ fill: "#4682B4",
+ opacity: 1,
+ widthRatio: 0.5,
+ width: plotDataLengthBarWidth,
+ clip: true,
+ };
+
+ public render() {
+ const { clip } = this.props;
+
+ return (
+
+ );
+ }
+
+ private readonly renderSVG = (moreProps) => {
+ const { yAccessor } = this.props;
+
+ const bars = getBars(this.props, moreProps, yAccessor);
+ return (
+
+ {getBarsSVG2(this.props, bars)}
+
+ );
+ }
+
+ private readonly drawOnCanvas = (ctx, moreProps) => {
+ const { yAccessor } = this.props;
+ const bars = getBars(this.props, moreProps, yAccessor);
+
+ drawOnCanvas2(this.props, ctx, bars);
+ }
+}
+
+function getBars(props, moreProps, yAccessor) {
+ const { xScale, xAccessor, chartConfig: { yScale }, plotData } = moreProps;
+ const { baseAt, className, fill, stroke } = props;
+
+ const getClassName = functor(className);
+ const getFill = functor(fill);
+ const getBase = functor(baseAt);
+ const widthFunctor = functor(props.width);
+
+ const width = widthFunctor(props, moreProps);
+ const offset = Math.floor(0.5 * width);
+
+ const bars = plotData
+ .map((d) => {
+ const innerBars = yAccessor.map((eachYAccessor, i) => {
+ const yValue = eachYAccessor(d);
+ if (isNotDefined(yValue)) { return undefined; }
+
+ const xValue = xAccessor(d);
+ const x = Math.round(xScale(xValue)) - offset;
+ const y = yScale(yValue);
+ return {
+ width: offset * 2,
+ x,
+ y,
+ className: getClassName(d, i),
+ stroke: stroke ? getFill(d, i) : "none",
+ fill: getFill(d, i),
+ i,
+ };
+ }).filter((yValue) => isDefined(yValue));
+
+ let b = getBase(xScale, yScale, d);
+ let h;
+ for (let i = innerBars.length - 1; i >= 0; i--) {
+ h = b - innerBars[i].y;
+ if (h < 0) {
+ innerBars[i].y = b;
+ h = -1 * h;
+ }
+ innerBars[i].height = h;
+ b = innerBars[i].y;
+ }
+ return innerBars;
+ });
+
+ return merge(bars);
+}
+
+export default OverlayBarSeries;
diff --git a/packages/react-financial-charts/src/series/PointAndFigureSeries.tsx b/packages/react-financial-charts/src/series/PointAndFigureSeries.tsx
new file mode 100644
index 000000000..4fac1a28e
--- /dev/null
+++ b/packages/react-financial-charts/src/series/PointAndFigureSeries.tsx
@@ -0,0 +1,172 @@
+import * as React from "react";
+import GenericChartComponent from "../GenericChartComponent";
+import { getAxisCanvas } from "../GenericComponent";
+
+import { isDefined, isNotDefined } from "../utils";
+
+interface PointAndFigureSeriesProps {
+ className?: string;
+ strokeWidth: number;
+ stroke: {
+ up: string,
+ down: string,
+ };
+ fill: {
+ up: string,
+ down: string,
+ };
+ clip: boolean;
+}
+
+export class PointAndFigureSeries extends React.Component {
+
+ public static defaultProps = {
+ className: "react-stockcharts-point-and-figure",
+ strokeWidth: 1,
+ stroke: {
+ up: "#6BA583",
+ down: "#FF0000",
+ },
+ fill: {
+ up: "none",
+ down: "none",
+ },
+ clip: true,
+ };
+
+ public render() {
+ const { clip } = this.props;
+
+ return (
+
+ );
+ }
+
+ private readonly renderSVG = (moreProps) => {
+ const { xAccessor } = moreProps;
+ const { xScale, chartConfig: { yScale }, plotData } = moreProps;
+
+ const { stroke, fill, strokeWidth, className } = this.props;
+
+ const columns = getColumns(xScale, xAccessor, yScale, plotData);
+
+ return (
+
+ {columns.map((col, idx) => (
+
+ {col.boxes.map((box, i) => {
+ if (col.direction > 0) {
+ return (
+
+
+
+
+ );
+ }
+ return (
+
+ );
+ })}
+
+ ))}
+
+ );
+ }
+
+ private readonly drawOnCanvas = (ctx, moreProps) => {
+ const { xAccessor } = moreProps;
+ const { xScale, chartConfig: { yScale }, plotData } = moreProps;
+ const columns = getColumns(xScale, xAccessor, yScale, plotData);
+
+ drawOnCanvas(ctx, this.props, columns);
+ }
+}
+
+function drawOnCanvas(ctx, props, columns) {
+ const { stroke, fill, strokeWidth } = props;
+
+ ctx.lineWidth = strokeWidth;
+
+ columns.forEach((col) => {
+ const [offsetX, offsetY] = col.offset;
+ col.boxes.forEach((box) => {
+ if (col.direction > 0) {
+ ctx.fillStyle = fill.up;
+ ctx.strokeStyle = stroke.up;
+
+ ctx.beginPath();
+
+ ctx.moveTo(offsetX, offsetY + box.open);
+ ctx.lineTo(offsetX + box.columnWidth, offsetY + box.close);
+ ctx.moveTo(offsetX, offsetY + box.close);
+ ctx.lineTo(offsetX + box.columnWidth, offsetY + box.open);
+
+ ctx.stroke();
+ } else {
+ ctx.fillStyle = fill.down;
+ ctx.strokeStyle = stroke.down;
+
+ ctx.beginPath();
+
+ const [x, y] = [offsetX + box.columnWidth / 2, offsetY + box.open + box.boxHeight / 2];
+ const [rx, ry] = [box.columnWidth / 2, box.boxHeight / 2];
+
+ ctx.ellipse(x, y, rx, ry, 0, 0, 2 * Math.PI);
+ ctx.stroke();
+ }
+ });
+ });
+
+ ctx.stroke();
+}
+
+function getColumns(xScale, xAccessor, yScale, plotData) {
+
+ const width = xScale(xAccessor(plotData[plotData.length - 1]))
+ - xScale(xAccessor(plotData[0]));
+
+ const columnWidth = (width / (plotData.length - 1));
+
+ let anyBox;
+ let j = 0;
+ while (isNotDefined(anyBox)) {
+ if (isDefined(plotData[j].close)) {
+ anyBox = plotData[j].boxes[0];
+ } else {
+ break;
+ }
+ j++;
+ }
+
+ const boxHeight = Math.abs(yScale(anyBox.open) - yScale(anyBox.close));
+
+ const columns = plotData
+ .filter((d) => isDefined(d.close))
+ .map((d) => {
+ const boxes = d.boxes.map((box) => ({
+ columnWidth,
+ boxHeight,
+ open: yScale(box.open),
+ close: yScale(box.close),
+ }));
+
+ const xOffset = (xScale(xAccessor(d)) - (columnWidth / 2));
+ return {
+ boxes,
+ direction: d.direction,
+ offset: [xOffset, 0],
+ };
+ });
+ return columns;
+}
diff --git a/packages/react-financial-charts/src/series/RSISeries.tsx b/packages/react-financial-charts/src/series/RSISeries.tsx
new file mode 100644
index 000000000..16be85f77
--- /dev/null
+++ b/packages/react-financial-charts/src/series/RSISeries.tsx
@@ -0,0 +1,215 @@
+import * as React from "react";
+import {
+ strokeDashTypes,
+} from "../utils";
+import { LineSeries } from "./LineSeries";
+import { StraightLine } from "./StraightLine";
+import { SVGComponent } from "./SVGComponent";
+
+interface RSISeriesProps {
+ className?: string;
+ yAccessor: any; // func
+ stroke: {
+ line: strokeDashTypes;
+ top: string;
+ middle: string;
+ bottom: string;
+ outsideThreshold: string;
+ insideThreshold: string;
+ };
+ opacity: {
+ top: number;
+ middle: number;
+ bottom: number;
+ };
+ strokeDasharray: {
+ line: strokeDashTypes;
+ top: strokeDashTypes;
+ middle: strokeDashTypes;
+ bottom: strokeDashTypes;
+ };
+ strokeWidth: {
+ outsideThreshold: number;
+ insideThreshold: number;
+ top: number;
+ middle: number;
+ bottom: number;
+ };
+ overSold: number;
+ middle: number;
+ overBought: number;
+}
+
+export class RSISeries extends React.Component {
+
+ public static defaultProps = {
+ className: "react-stockcharts-rsi-series",
+ stroke: {
+ line: "#000000",
+ top: "#B8C2CC",
+ middle: "#8795A1",
+ bottom: "#B8C2CC",
+ outsideThreshold: "#b300b3",
+ insideThreshold: "#ffccff",
+ },
+ opacity: {
+ top: 1,
+ middle: 1,
+ bottom: 1,
+ },
+ strokeDasharray: {
+ line: "Solid",
+ top: "ShortDash",
+ middle: "ShortDash",
+ bottom: "ShortDash",
+ },
+ strokeWidth: {
+ outsideThreshold: 1,
+ insideThreshold: 1,
+ top: 1,
+ middle: 1,
+ bottom: 1,
+ },
+ overSold: 70,
+ middle: 50,
+ overBought: 30,
+ };
+
+ private clipPathId1: string;
+ private clipPathId2: string;
+
+ constructor(props) {
+ super(props);
+
+ const id1 = String(Math.round(Math.random() * 10000 * 10000));
+ this.clipPathId1 = `rsi-clip-${id1}`;
+
+ const id2 = String(Math.round(Math.random() * 10000 * 10000));
+ this.clipPathId2 = `rsi-clip-${id2}`;
+ }
+
+ public render() {
+ const { className, stroke, opacity, strokeDasharray, strokeWidth } = this.props;
+ const { yAccessor } = this.props;
+ const { overSold, middle, overBought } = this.props;
+
+ const style1 = { clipPath: `url(#${this.clipPathId1})` };
+ const style2 = { clipPath: `url(#${this.clipPathId2})` };
+
+ return (
+
+
+ {this.renderClip}
+
+
+
+
+
+
+
+ );
+ }
+
+ private readonly renderClip = (moreProps) => {
+ const { chartConfig } = moreProps;
+ const { overSold, overBought } = this.props;
+ const { yScale, width, height } = chartConfig;
+
+ return (
+
+
+
+
+
+
+
+
+
+ );
+ }
+
+ private readonly mainClip = (ctx, moreProps) => {
+ const { chartConfig } = moreProps;
+ const { overSold, overBought } = this.props;
+ const { yScale, width, height } = chartConfig;
+
+ ctx.beginPath();
+ ctx.rect(
+ 0,
+ 0,
+ width,
+ yScale(overSold),
+ );
+ ctx.rect(
+ 0,
+ yScale(overBought),
+ width,
+ height - yScale(overBought),
+ );
+ ctx.clip();
+ }
+
+ private readonly topAndBottomClip = (ctx, moreProps) => {
+ const { chartConfig } = moreProps;
+ const { overSold, overBought } = this.props;
+ const { yScale, width } = chartConfig;
+
+ ctx.beginPath();
+ ctx.rect(
+ 0,
+ yScale(overSold),
+ width,
+ yScale(overBought) - yScale(overSold),
+ );
+ ctx.clip();
+ }
+}
diff --git a/packages/react-financial-charts/src/series/RenkoSeries.tsx b/packages/react-financial-charts/src/series/RenkoSeries.tsx
new file mode 100644
index 000000000..60857d9ab
--- /dev/null
+++ b/packages/react-financial-charts/src/series/RenkoSeries.tsx
@@ -0,0 +1,134 @@
+import * as React from "react";
+import GenericChartComponent from "../GenericChartComponent";
+import { getAxisCanvas } from "../GenericComponent";
+
+import { isDefined } from "../utils";
+
+interface RenkoSeriesProps {
+ classNames?: {
+ up: string,
+ down: string,
+ };
+ stroke: {
+ up: string,
+ down: string,
+ };
+ fill: {
+ up: string,
+ down: string,
+ partial: string,
+ };
+ yAccessor: any; // func
+ clip: boolean;
+}
+
+export class RenkoSeries extends React.Component {
+
+ public static defaultProps = {
+ classNames: {
+ up: "up",
+ down: "down",
+ },
+ stroke: {
+ up: "none",
+ down: "none",
+ },
+ fill: {
+ up: "#6BA583",
+ down: "#E60000",
+ partial: "#4682B4",
+ },
+ yAccessor: (d) => ({ open: d.open, high: d.high, low: d.low, close: d.close }),
+ clip: true,
+ };
+
+ public render() {
+ const { clip } = this.props;
+
+ return ;
+ }
+
+ private readonly renderSVG = (moreProps) => {
+ const { xAccessor } = moreProps;
+ const { xScale, chartConfig: { yScale }, plotData } = moreProps;
+
+ const { yAccessor } = this.props;
+
+ const candles = getRenko(this.props, plotData, xScale, xAccessor, yScale, yAccessor)
+ .map((each, idx) => ());
+
+ return (
+
+
+ {candles}
+
+
+ );
+ }
+
+ private readonly drawOnCanvas = (ctx, moreProps) => {
+ const { xAccessor } = moreProps;
+ const { xScale, chartConfig: { yScale }, plotData } = moreProps;
+
+ const { yAccessor } = this.props;
+
+ const candles = getRenko(this.props, plotData, xScale, xAccessor, yScale, yAccessor);
+
+ drawOnCanvas(ctx, candles);
+ }
+}
+
+function drawOnCanvas(ctx, renko) {
+ renko.forEach((d) => {
+ ctx.beginPath();
+
+ ctx.strokeStyle = d.stroke;
+ ctx.fillStyle = d.fill;
+
+ ctx.rect(d.x, d.y, d.width, d.height);
+ ctx.closePath();
+ ctx.fill();
+ });
+}
+
+function getRenko(props, plotData, xScale, xAccessor, yScale, yAccessor) {
+ const { classNames, fill } = props;
+ const width = xScale(xAccessor(plotData[plotData.length - 1]))
+ - xScale(xAccessor(plotData[0]));
+
+ const candleWidth = (width / (plotData.length - 1));
+ const candles = plotData
+ .filter((d) => isDefined(yAccessor(d).close))
+ .map((d) => {
+ const ohlc = yAccessor(d);
+ const x = xScale(xAccessor(d)) - 0.5 * candleWidth;
+ const y = yScale(Math.max(ohlc.open, ohlc.close));
+ const height = Math.abs(yScale(ohlc.open) - yScale(ohlc.close));
+ const className = (ohlc.open <= ohlc.close) ? classNames.up : classNames.down;
+
+ const svgfill = d.fullyFormed
+ ? (ohlc.open <= ohlc.close ? fill.up : fill.down)
+ : fill.partial;
+
+ return {
+ className,
+ fill: svgfill,
+ x,
+ y,
+ height,
+ width: candleWidth,
+ };
+ });
+ return candles;
+}
diff --git a/packages/react-financial-charts/src/series/SARSeries.tsx b/packages/react-financial-charts/src/series/SARSeries.tsx
new file mode 100644
index 000000000..6c40ca27a
--- /dev/null
+++ b/packages/react-financial-charts/src/series/SARSeries.tsx
@@ -0,0 +1,114 @@
+import * as React from "react";
+
+import GenericChartComponent from "../GenericChartComponent";
+import { getAxisCanvas, getMouseCanvas } from "../GenericComponent";
+
+import { first, hexToRGBA, isDefined, last } from "../utils";
+
+interface SARSeriesProps {
+ className?: string;
+ fill: {
+ falling: string;
+ rising: string;
+ };
+ yAccessor: any; // func
+ opacity: number;
+ onClick?: any; // func
+ onDoubleClick?: any; // func
+ onContextMenu?: any; // func
+ highlightOnHover?: boolean;
+}
+
+export class SARSeries extends React.Component {
+
+ public static defaultProps = {
+ className: "react-stockcharts-sar",
+ fill: {
+ falling: "#4682B4",
+ rising: "#15EC2E",
+ },
+ highlightOnHover: true,
+ opacity: 0.2,
+ };
+
+ public render() {
+ const { highlightOnHover } = this.props;
+
+ const hoverProps = highlightOnHover
+ ? {
+ isHover: this.isHover,
+ drawOn: ["mousemove", "pan"],
+ canvasToDraw: getMouseCanvas,
+ }
+ : {
+ drawOn: ["pan"],
+ canvasToDraw: getAxisCanvas,
+ };
+
+ return (
+
+ );
+ }
+
+ private readonly renderSVG = (moreProps) => {
+ const { className, yAccessor } = this.props;
+ const { xAccessor, plotData, xScale, chartConfig: { yScale } } = moreProps;
+
+ return
+ {plotData
+ .filter((each) => isDefined(yAccessor(each)))
+ .map((each, idx) => {
+ return (
+
+ );
+ })}
+ ;
+ }
+
+ private readonly drawOnCanvas = (ctx, moreProps) => {
+ const { yAccessor, fill, opacity } = this.props;
+ const { xAccessor, plotData, xScale, chartConfig: { yScale }, hovering } = moreProps;
+
+ const width = xScale(xAccessor(last(plotData))) - xScale(xAccessor(first(plotData)));
+
+ const d = (width / plotData.length) * 0.5 / 2;
+ const radius = Math.min(2, Math.max(0.5, d)) + (hovering ? 2 : 0);
+
+ plotData.forEach((each) => {
+ const centerX = xScale(xAccessor(each));
+ const centerY = yScale(yAccessor(each));
+ const color = yAccessor(each) > each.close
+ ? fill.falling
+ : fill.rising;
+
+ ctx.fillStyle = hexToRGBA(color, opacity);
+ ctx.strokeStyle = color;
+
+ ctx.beginPath();
+ ctx.ellipse(centerX, centerY, radius, radius, 0, 0, 2 * Math.PI);
+ ctx.closePath();
+ ctx.fill();
+ ctx.stroke();
+ });
+ }
+
+ private readonly isHover = (moreProps) => {
+ const { mouseXY, currentItem, chartConfig: { yScale } } = moreProps;
+ const { yAccessor } = this.props;
+ const y = mouseXY[1];
+ const currentY = yScale(yAccessor(currentItem));
+ return y < currentY + 5 && y > currentY - 5;
+ }
+}
diff --git a/packages/react-financial-charts/src/series/SVGComponent.tsx b/packages/react-financial-charts/src/series/SVGComponent.tsx
new file mode 100644
index 000000000..afe36a0c0
--- /dev/null
+++ b/packages/react-financial-charts/src/series/SVGComponent.tsx
@@ -0,0 +1,15 @@
+import * as React from "react";
+
+import GenericChartComponent from "../GenericChartComponent";
+
+export class SVGComponent extends React.Component {
+ public render() {
+ const { children } = this.props;
+ return (
+
+ );
+ }
+}
diff --git a/packages/react-financial-charts/src/series/ScatterSeries.tsx b/packages/react-financial-charts/src/series/ScatterSeries.tsx
new file mode 100644
index 000000000..7b440b804
--- /dev/null
+++ b/packages/react-financial-charts/src/series/ScatterSeries.tsx
@@ -0,0 +1,109 @@
+import { nest as d3Nest } from "d3-collection";
+import * as React from "react";
+
+import GenericChartComponent from "../GenericChartComponent";
+import { getAxisCanvas } from "../GenericComponent";
+
+import { functor, hexToRGBA } from "../utils";
+
+interface ScatterSeriesProps {
+ className?: string;
+ yAccessor: any; // func
+ marker?: any; // func
+ markerProvider?: any; // func
+ markerProps?: object;
+}
+
+export class ScatterSeries extends React.Component {
+
+ public static defaultProps = {
+ className: "react-stockcharts-scatter",
+ };
+
+ public render() {
+ return (
+
+ );
+ }
+
+ private readonly renderSVG = (moreProps) => {
+ const { className, markerProps } = this.props;
+ const { xAccessor } = moreProps;
+
+ const points = this.helper(this.props, moreProps, xAccessor);
+
+ return
+ {points.map((point, idx) => {
+ const { marker: Marker } = point;
+ return ;
+ })}
+ ;
+ }
+
+ private readonly drawOnCanvas = (ctx, moreProps) => {
+ const { xAccessor } = moreProps;
+
+ const points = this.helper(this.props, moreProps, xAccessor);
+
+ this.drawOnCanvasHelper(ctx, this.props, points);
+ }
+
+ private readonly helper = (props, moreProps, xAccessor) => {
+ const { yAccessor, markerProvider, markerProps } = props;
+ let { marker: Marker } = props;
+ const { xScale, chartConfig: { yScale }, plotData } = moreProps;
+
+ if (!(markerProvider || Marker)) { throw new Error("required prop, either marker or markerProvider missing"); }
+
+ return plotData.map((d) => {
+
+ if (markerProvider) { Marker = markerProvider(d); }
+
+ const mProps = { ...Marker.defaultProps, ...markerProps };
+
+ const fill = functor(mProps.fill);
+ const stroke = functor(mProps.stroke);
+
+ return {
+ x: xScale(xAccessor(d)),
+ y: yScale(yAccessor(d)),
+ fill: hexToRGBA(fill(d), mProps.opacity),
+ stroke: stroke(d),
+ datum: d,
+ marker: Marker,
+ };
+ });
+ }
+
+ private readonly drawOnCanvasHelper = (ctx, props, points) => {
+
+ const { markerProps } = props;
+
+ const nest = d3Nest()
+ .key((d) => d.fill)
+ .key((d) => d.stroke)
+ .entries(points);
+
+ nest.forEach((fillGroup) => {
+ const { key: fillKey, values: fillValues } = fillGroup;
+
+ if (fillKey !== "none") {
+ ctx.fillStyle = fillKey;
+ }
+
+ fillValues.forEach((strokeGroup) => {
+ const { values: strokeValues } = strokeGroup;
+
+ strokeValues.forEach((point) => {
+ const { marker } = point;
+ marker.drawOnCanvas({ ...marker.defaultProps, ...markerProps, fill: fillKey }, point, ctx);
+ });
+ });
+ });
+ }
+}
diff --git a/packages/react-financial-charts/src/series/SquareMarker.tsx b/packages/react-financial-charts/src/series/SquareMarker.tsx
new file mode 100644
index 000000000..166b70d67
--- /dev/null
+++ b/packages/react-financial-charts/src/series/SquareMarker.tsx
@@ -0,0 +1,72 @@
+import * as React from "react";
+import { functor, hexToRGBA } from "../utils";
+
+interface SquareProps {
+ stroke?: string;
+ fill: string;
+ opacity: number;
+ point: {
+ x: number,
+ y: number,
+ datum: any,
+ };
+ className?: string;
+ strokeWidth?: number;
+ width: number | any; // func
+}
+
+export class Square extends React.Component {
+
+ public static defaultProps = {
+ stroke: "#4682B4",
+ strokeWidth: 1,
+ opacity: 0.5,
+ fill: "#4682B4",
+ className: "react-stockcharts-marker-rect",
+ };
+
+ public static drawOnCanvas = (props, point, ctx) => {
+ const { stroke, fill, opacity, strokeWidth } = props;
+ ctx.strokeStyle = stroke;
+ ctx.lineWidth = strokeWidth;
+ if (fill !== "none") {
+ ctx.fillStyle = hexToRGBA(fill, opacity);
+ }
+ Square.drawOnCanvasWithNoStateChange(props, point, ctx);
+ }
+
+ public static drawOnCanvasWithNoStateChange = (props, point, ctx) => {
+ const { width } = props;
+ const w = functor(width)(point.datum);
+ const x = point.x - (w / 2);
+ const y = point.y - (w / 2);
+ ctx.beginPath();
+ ctx.rect(x, y, w, w);
+ ctx.stroke();
+ ctx.fill();
+ }
+
+ public render() {
+ const {
+ className, stroke, strokeWidth,
+ opacity, fill, point, width,
+ } = this.props;
+ const w = functor(width)(point.datum);
+ const x = point.x - (w / 2);
+ const y = point.y - (w / 2);
+
+ return (
+
+ );
+ }
+}
diff --git a/packages/react-financial-charts/src/series/StackedBarSeries.tsx b/packages/react-financial-charts/src/series/StackedBarSeries.tsx
new file mode 100644
index 000000000..9789e8483
--- /dev/null
+++ b/packages/react-financial-charts/src/series/StackedBarSeries.tsx
@@ -0,0 +1,270 @@
+import { merge } from "d3-array";
+import { nest as d3Nest } from "d3-collection";
+import { stack as d3Stack } from "d3-shape";
+import * as React from "react";
+
+import GenericChartComponent from "../GenericChartComponent";
+import { getAxisCanvas } from "../GenericComponent";
+
+import { functor, head, hexToRGBA, identity, plotDataLengthBarWidth } from "../utils";
+
+interface StackedBarSeriesProps {
+ readonly baseAt: number | any; // func
+ readonly direction: "up" | "down";
+ readonly stroke: boolean;
+ readonly width: number | any; // func
+ readonly opacity: number;
+ readonly fill: string | any; // func
+ readonly className: string | any; // func
+ readonly clip: boolean;
+}
+
+export class StackedBarSeries extends React.Component {
+
+ public static defaultProps = {
+ baseAt: (xScale, yScale/* , d*/) => head(yScale.range()),
+ direction: "up",
+ className: "bar",
+ stroke: true,
+ fill: "#4682B4",
+ opacity: 0.5,
+ width: plotDataLengthBarWidth,
+ widthRatio: 0.8,
+ clip: true,
+ swapScales: false,
+ };
+
+ public render() {
+ const { clip } = this.props;
+
+ return (
+
+ );
+ }
+
+ private readonly drawOnCanvas = (ctx, moreProps) => {
+ const { xAccessor } = moreProps;
+
+ drawOnCanvasHelper(ctx, this.props, moreProps, xAccessor, d3Stack);
+ }
+
+ private readonly renderSVG = (moreProps) => {
+ const { xAccessor } = moreProps;
+
+ return {svgHelper(this.props, moreProps, xAccessor, d3Stack)};
+ }
+}
+
+export function identityStack() {
+ let keys = [];
+ function stack(data) {
+ const response = keys.map((key, i) => {
+ const arrays = data.map((d) => {
+ const array = [0, d[key]];
+
+ // @ts-ignore
+ array.data = d;
+ return array;
+ });
+ arrays.key = key;
+ arrays.index = i;
+ return arrays;
+ });
+ return response;
+ }
+ stack.keys = function (x) {
+ if (!arguments.length) {
+ return keys;
+ }
+ keys = x;
+ return stack;
+ };
+ return stack;
+}
+
+export function drawOnCanvasHelper(ctx, props, moreProps, xAccessor, stackFn, defaultPostAction = identity, postRotateAction = rotateXY) {
+ const { xScale, chartConfig: { yScale }, plotData } = moreProps;
+
+ const bars = doStuff(props, xAccessor, plotData, xScale, yScale, stackFn, postRotateAction, defaultPostAction);
+
+ drawOnCanvas2(props, ctx, bars);
+}
+
+function convertToArray(item) {
+ return Array.isArray(item) ? item : [item];
+}
+
+export function svgHelper(props, moreProps, xAccessor, stackFn, defaultPostAction = identity, postRotateAction = rotateXY) {
+ const { xScale, chartConfig: { yScale }, plotData } = moreProps;
+ const bars = doStuff(props, xAccessor, plotData, xScale, yScale, stackFn, postRotateAction, defaultPostAction);
+ return getBarsSVG2(props, bars);
+}
+
+function doStuff(props, xAccessor, plotData, xScale, yScale, stackFn, postRotateAction, defaultPostAction) {
+ const { yAccessor, swapScales } = props;
+
+ const modifiedYAccessor = swapScales ? convertToArray(props.xAccessor) : convertToArray(yAccessor);
+ const modifiedXAccessor = swapScales ? yAccessor : xAccessor;
+
+ const modifiedXScale = swapScales ? yScale : xScale;
+ const modifiedYScale = swapScales ? xScale : yScale;
+
+ const postProcessor = swapScales ? postRotateAction : defaultPostAction;
+
+ const bars = getBars(props, modifiedXAccessor, modifiedYAccessor, modifiedXScale, modifiedYScale, plotData, stackFn, postProcessor);
+
+ return bars;
+}
+
+export const rotateXY = (array) => array.map((each) => {
+ return {
+ ...each,
+ x: each.y,
+ y: each.x,
+ height: each.width,
+ width: each.height,
+ };
+});
+
+export function getBarsSVG2(props, bars) {
+ /* eslint-disable react/prop-types */
+ const { opacity } = props;
+ /* eslint-enable react/prop-types */
+
+ return bars.map((d, idx) => {
+ if (d.width <= 1) {
+ return ;
+ }
+ return ;
+ });
+}
+
+export function drawOnCanvas2(props, ctx, bars) {
+ const { stroke } = props;
+
+ const nest = d3Nest()
+ .key((d) => d.fill)
+ .entries(bars);
+
+ nest.forEach((outer) => {
+ const { key, values } = outer;
+ if (head(values).width > 1) {
+ ctx.strokeStyle = key;
+ }
+ const fillStyle = head(values).width <= 1
+ ? key
+ : hexToRGBA(key, props.opacity);
+ ctx.fillStyle = fillStyle;
+
+ values.forEach((d) => {
+ if (d.width <= 1) {
+ ctx.fillRect(d.x - 0.5, d.y, 1, d.height);
+ } else {
+ ctx.fillRect(d.x, d.y, d.width, d.height);
+ if (stroke) { ctx.strokeRect(d.x, d.y, d.width, d.height); }
+ }
+
+ });
+ });
+}
+
+export function getBars(props, xAccessor, yAccessor, xScale, yScale, plotData, stack = identityStack, after = identity) {
+ const { baseAt, className, fill, stroke, spaceBetweenBar = 0 } = props;
+
+ const getClassName = functor(className);
+ const getFill = functor(fill);
+ const getBase = functor(baseAt);
+
+ const widthFunctor = functor(props.width);
+ const width = widthFunctor(props, {
+ xScale,
+ xAccessor,
+ plotData,
+ });
+
+ const barWidth = Math.round(width);
+
+ const eachBarWidth = (barWidth - spaceBetweenBar * (yAccessor.length - 1)) / yAccessor.length;
+
+ const offset = (barWidth === 1 ? 0 : 0.5 * width);
+
+ const ds = plotData
+ .map((each) => {
+ const d = {
+ appearance: {
+ },
+ x: xAccessor(each),
+ };
+ yAccessor.forEach((eachYAccessor, i) => {
+ const key = `y${i}`;
+ d[key] = eachYAccessor(each);
+ const appearance = {
+ className: getClassName(each, i),
+ stroke: stroke ? getFill(each, i) : "none",
+ fill: getFill(each, i),
+ };
+ d.appearance[key] = appearance;
+ });
+ return d;
+ });
+
+ const keys = yAccessor.map((_, i) => `y${i}`);
+
+ // @ts-ignore
+ const data = stack().keys(keys)(ds);
+
+ const newData = data.map((each, i) => {
+ const key = each.key;
+ return each.map((d) => {
+ const array = [d[0], d[1]];
+
+ // @ts-ignore
+ array.data = {
+ x: d.data.x,
+ i,
+ appearance: d.data.appearance[key],
+ };
+ return array;
+ });
+ });
+
+ const bars = merge(newData)
+ .map((d) => {
+ let y = yScale(d[1]);
+ let h = getBase(xScale, yScale, d.data) - yScale(d[1] - d[0]);
+ if (h < 0) {
+ y = y + h;
+ h = -h;
+ }
+
+ return {
+ ...d.data.appearance,
+ x: Math.round(xScale(d.data.x) - width / 2),
+ y,
+ groupOffset: Math.round(offset - (d.data.i > 0 ? (eachBarWidth + spaceBetweenBar) * d.data.i : 0)),
+ groupWidth: Math.round(eachBarWidth),
+ offset: Math.round(offset),
+ height: h,
+ width: barWidth,
+ };
+ })
+ .filter((bar) => !isNaN(bar.y));
+
+ return after(bars);
+}
diff --git a/packages/react-financial-charts/src/series/StochasticSeries.tsx b/packages/react-financial-charts/src/series/StochasticSeries.tsx
new file mode 100644
index 000000000..f1363d4e7
--- /dev/null
+++ b/packages/react-financial-charts/src/series/StochasticSeries.tsx
@@ -0,0 +1,79 @@
+import * as React from "react";
+
+import { LineSeries } from "./LineSeries";
+import { StraightLine } from "./StraightLine";
+
+interface StochasticSeriesProps {
+ className?: string;
+ yAccessor: any; // func
+ stroke: {
+ top: string;
+ middle: string;
+ bottom: string;
+ dLine: string;
+ kLine: string;
+ };
+ overSold: number;
+ middle: number;
+ overBought: number;
+ refLineOpacity: number;
+}
+
+export class StochasticSeries extends React.Component {
+
+ public static defaultProps = {
+ className: "react-stockcharts-stochastic-series",
+ stroke: {
+ top: "#964B00",
+ middle: "#000000",
+ bottom: "#964B00",
+ dLine: "#EA2BFF",
+ kLine: "#74D400",
+ },
+ overSold: 80,
+ middle: 50,
+ overBought: 20,
+ refLineOpacity: 0.3,
+ };
+
+ public render() {
+ const { className, stroke, refLineOpacity } = this.props;
+ const { overSold, middle, overBought } = this.props;
+ return (
+
+
+
+
+
+
+
+ );
+ }
+
+ private readonly yAccessorForK = (d) => {
+ const { yAccessor } = this.props;
+
+ return yAccessor(d) && yAccessor(d).K;
+ }
+
+ private readonly yAccessorForD = (d) => {
+ const { yAccessor } = this.props;
+
+ return yAccessor(d) && yAccessor(d).D;
+ }
+}
diff --git a/packages/react-financial-charts/src/series/StraightLine.tsx b/packages/react-financial-charts/src/series/StraightLine.tsx
new file mode 100644
index 000000000..a6fc0258b
--- /dev/null
+++ b/packages/react-financial-charts/src/series/StraightLine.tsx
@@ -0,0 +1,86 @@
+import * as React from "react";
+
+import GenericChartComponent from "../GenericChartComponent";
+import { getAxisCanvas } from "../GenericComponent";
+import { getStrokeDasharray, hexToRGBA, strokeDashTypes } from "../utils";
+
+interface StraightLineProps {
+ className?: string;
+ type?: "vertical" | "horizontal";
+ stroke?: string;
+ strokeWidth?: number;
+ strokeDasharray?: strokeDashTypes;
+ opacity: number;
+ yValue?: number;
+ xValue?: number;
+}
+
+export class StraightLine extends React.Component {
+
+ public static defaultProps = {
+ className: "line",
+ type: "horizontal",
+ stroke: "#000000",
+ opacity: 0.5,
+ strokeWidth: 1,
+ strokeDasharray: "Solid",
+ };
+
+ public render() {
+ return (
+
+ );
+ }
+
+ private readonly renderSVG = (moreProps) => {
+ const { width, height } = moreProps;
+ const { xScale, chartConfig: { yScale } } = moreProps;
+
+ const { className } = this.props;
+ const { type, stroke, strokeWidth, opacity, strokeDasharray } = this.props;
+ const { yValue, xValue } = this.props;
+
+ const lineCoordinates = this.getLineCoordinates(type, xScale, yScale, xValue, yValue, width, height);
+
+ return (
+
+ );
+ }
+
+ private readonly drawOnCanvas = (ctx, moreProps) => {
+ const { type, stroke, strokeWidth, opacity, strokeDasharray } = this.props;
+ const { yValue, xValue } = this.props;
+ const { xScale } = moreProps;
+ const { chartConfig: { yScale, width, height } } = moreProps;
+
+ ctx.beginPath();
+
+ ctx.strokeStyle = hexToRGBA(stroke, opacity);
+ ctx.lineWidth = strokeWidth;
+
+ const { x1, y1, x2, y2 } = this.getLineCoordinates(type, xScale, yScale, xValue, yValue, width, height);
+
+ ctx.setLineDash(getStrokeDasharray(strokeDasharray).split(","));
+ ctx.moveTo(x1, y1);
+ ctx.lineTo(x2, y2);
+ ctx.stroke();
+ }
+
+ private readonly getLineCoordinates = (type, xScale, yScale, xValue, yValue, width, height) => {
+ return type === "horizontal"
+ ? { x1: 0, y1: Math.round(yScale(yValue)), x2: width, y2: Math.round(yScale(yValue)) }
+ : { x1: Math.round(xScale(xValue)), y1: 0, x2: Math.round(xScale(xValue)), y2: height };
+ }
+}
diff --git a/packages/react-financial-charts/src/series/TriangleMarker.tsx b/packages/react-financial-charts/src/series/TriangleMarker.tsx
new file mode 100644
index 000000000..d62a735a8
--- /dev/null
+++ b/packages/react-financial-charts/src/series/TriangleMarker.tsx
@@ -0,0 +1,145 @@
+import * as React from "react";
+import { functor, hexToRGBA } from "../utils";
+
+interface TriangleProps {
+ direction: "top" | "bottom" | "left" | "right" | "hide";
+ stroke: string | any; // func
+ fill: string | any;
+ opacity: number;
+ point: {
+ x: number,
+ y: number,
+ datum: any,
+ };
+ className?: string;
+ strokeWidth?: number;
+ width: number | any; // func
+}
+
+export class Triangle extends React.Component {
+
+ public static defaultProps = {
+ direction: "top",
+ stroke: "#4682B4",
+ strokeWidth: 1,
+ opacity: 0.5,
+ fill: "#4682B4",
+ className: "react-stockcharts-marker-triangle",
+ };
+
+ public static drawOnCanvas = (props, point, ctx) => {
+ const { stroke, fill, opacity, strokeWidth } = props;
+ ctx.strokeStyle = stroke;
+ ctx.lineWidth = strokeWidth;
+ if (fill !== "none") {
+ ctx.fillStyle = hexToRGBA(fill, opacity);
+ }
+ Triangle.drawOnCanvasWithNoStateChange(props, point, ctx);
+ }
+
+ public static drawOnCanvasWithNoStateChange = (props, point, ctx) => {
+
+ const { width } = props;
+ const w = functor(width)(point.datum);
+ const { x, y } = point;
+ const { innerOpposite, innerHypotenuse } = getTrianglePoints(w);
+ const rotationDeg = getRotationInDegrees(props, point);
+
+ ctx.beginPath();
+ ctx.moveTo(x, y - innerHypotenuse);
+ ctx.lineTo(x + (w / 2), y + innerOpposite);
+ ctx.lineTo(x - (w / 2), y + innerOpposite);
+ ctx.stroke();
+
+ // TODO: rotation does not work
+ // example: https://gist.github.com/geoffb/6392450
+ if (rotationDeg !== null && rotationDeg !== 0) {
+ ctx.save();
+ ctx.translate(x, y);
+ ctx.rotate(rotationDeg * Math.PI / 180); // 45 degrees
+ ctx.fill();
+ ctx.restore();
+ }
+ ctx.fill();
+ }
+
+ public render() {
+
+ const {
+ className, strokeWidth,
+ opacity, point, width,
+ } = this.props;
+
+ const rotation = getRotationInDegrees(this.props, point);
+ if (rotation == null) {
+ return null;
+ }
+
+ const fillColor = getFillColor(this.props);
+ const strokeColor = getStrokeColor(this.props);
+
+ const w = functor(width)(point.datum);
+ const { x, y } = point;
+ const { innerOpposite, innerHypotenuse } = getTrianglePoints(w);
+ const points = `
+ ${x} ${y - innerHypotenuse},
+ ${x + (w / 2)} ${y + innerOpposite},
+ ${x - (w / 2)} ${y + innerOpposite}
+ `;
+
+ return (
+
+ );
+ }
+}
+
+function getTrianglePoints(width) {
+ const innerHypotenuse = (width / 2) * (1 / Math.cos(30 * Math.PI / 180));
+ const innerOpposite = (width / 2) * (1 / Math.tan(60 * Math.PI / 180));
+ return {
+ innerOpposite,
+ innerHypotenuse,
+ };
+}
+
+function getFillColor(props) {
+ const { fill, point } = props;
+
+ return fill instanceof Function ? fill(point.datum) : fill;
+}
+
+function getStrokeColor(props) {
+ const { stroke, point } = props;
+
+ return stroke instanceof Function ? stroke(point.datum) : stroke;
+}
+
+function getRotationInDegrees(props, point) {
+ const { direction } = props;
+ const directionVal = direction instanceof Function ? direction(point.datum) : direction;
+ if (directionVal === "hide") {
+ return null;
+ }
+
+ let rotate = 0;
+ switch (directionVal) {
+ case "bottom":
+ rotate = 180;
+ break;
+ case "left":
+ rotate = -90;
+ break;
+ case "right":
+ rotate = 90;
+ break;
+ }
+ return rotate;
+}
diff --git a/packages/react-financial-charts/src/series/VolumeProfileSeries.tsx b/packages/react-financial-charts/src/series/VolumeProfileSeries.tsx
new file mode 100644
index 000000000..5fc3c29cb
--- /dev/null
+++ b/packages/react-financial-charts/src/series/VolumeProfileSeries.tsx
@@ -0,0 +1,237 @@
+import { ascending, descending, histogram as d3Histogram, max, merge, sum, zip } from "d3-array";
+import { nest } from "d3-collection";
+import { scaleLinear } from "d3-scale";
+import * as React from "react";
+
+import GenericChartComponent from "../GenericChartComponent";
+import { getAxisCanvas } from "../GenericComponent";
+
+import { accumulatingWindow, functor, head, hexToRGBA, identity, last } from "../utils";
+
+interface VolumeProfileSeriesProps {
+ className?: string;
+ opacity?: number;
+ showSessionBackground?: boolean;
+ sessionBackGround?: string;
+ sessionBackGroundOpacity?: number;
+}
+
+export class VolumeProfileSeries extends React.Component {
+
+ public static defaultProps = {
+ className: "line ",
+ bins: 20,
+ opacity: 0.5,
+ maxProfileWidthPercent: 50,
+ fill: ({ type }) => type === "up" ? "#6BA583" : "#FF0000",
+ stroke: "#FFFFFF",
+ showSessionBackground: false,
+ sessionBackGround: "#4682B4",
+ sessionBackGroundOpacity: 0.3,
+ source: (d) => d.close,
+ volume: (d) => d.volume,
+ absoluteChange: (d) => d.absoluteChange,
+ bySession: false,
+ sessionStart: ({ d, i, plotData }) => i > 0 && plotData[i - 1].date.getMonth() !== d.date.getMonth(),
+ orient: "left",
+ partialStartOK: true,
+ partialEndOK: true,
+ };
+
+ public render() {
+ return (
+
+ );
+ }
+
+ private readonly drawOnCanvas = (ctx, moreProps) => {
+ const { xAccessor, width } = moreProps;
+ const { rects, sessionBg } = this.helper(this.props, moreProps, xAccessor, width);
+
+ this.drawOnCanvasContext(ctx, this.props, rects, sessionBg);
+ }
+
+ private readonly renderSVG = (moreProps) => {
+ const { className, opacity } = this.props;
+ const { showSessionBackground, sessionBackGround, sessionBackGroundOpacity } = this.props;
+
+ const { xAccessor, width } = moreProps;
+ const { rects, sessionBg } = this.helper(this.props, moreProps, xAccessor, width);
+
+ const sessionBgSvg = showSessionBackground
+ ? sessionBg.map((d, idx) => )
+ : null;
+
+ return (
+
+ {sessionBgSvg}
+ {rects.map((d, i) =>
+
+
+ )}
+
+ );
+ }
+
+ private readonly drawOnCanvasContext = (ctx, props, rects, sessionBg) => {
+ const { opacity, sessionBackGround, sessionBackGroundOpacity, showSessionBackground } = props;
+
+ if (showSessionBackground) {
+ ctx.fillStyle = hexToRGBA(sessionBackGround, sessionBackGroundOpacity);
+
+ sessionBg.forEach((each) => {
+ const { x, y, height, width } = each;
+
+ ctx.beginPath();
+ ctx.rect(x, y, width, height);
+ ctx.closePath();
+ ctx.fill();
+ });
+ }
+
+ rects.forEach((each) => {
+ const { x, y, height, w1, w2, stroke1, stroke2, fill1, fill2 } = each;
+
+ if (w1 > 0) {
+ ctx.fillStyle = hexToRGBA(fill1, opacity);
+ if (stroke1 !== "none") { ctx.strokeStyle = stroke1; }
+
+ ctx.beginPath();
+ ctx.rect(x, y, w1, height);
+ ctx.closePath();
+ ctx.fill();
+
+ if (stroke1 !== "none") { ctx.stroke(); }
+ }
+
+ if (w2 > 0) {
+ ctx.fillStyle = hexToRGBA(fill2, opacity);
+ if (stroke2 !== "none") { ctx.strokeStyle = stroke2; }
+
+ ctx.beginPath();
+ ctx.rect(x + w1, y, w2, height);
+ ctx.closePath();
+ ctx.fill();
+
+ if (stroke2 !== "none") { ctx.stroke(); }
+ }
+ });
+ }
+
+ private readonly helper = (props, moreProps, xAccessor, width) => {
+ const { xScale: realXScale, chartConfig: { yScale }, plotData } = moreProps;
+
+ const { sessionStart, bySession, partialStartOK, partialEndOK } = props;
+
+ const { bins, maxProfileWidthPercent, source, volume, absoluteChange, orient, fill, stroke } = props;
+
+ const sessionBuilder = accumulatingWindow()
+ .discardTillStart(!partialStartOK)
+ // @ts-ignore
+ .discardTillEnd(!partialEndOK)
+ .accumulateTill((d, i) => {
+ return sessionStart({ d, i, ...moreProps });
+ })
+ .accumulator(identity);
+
+ const dx = plotData.length > 1 ? realXScale(xAccessor(plotData[1])) - realXScale(xAccessor(head(plotData))) : 0;
+
+ const sessions = bySession ? sessionBuilder(plotData) : [plotData];
+
+ const allRects = sessions.map((session) => {
+
+ const begin = bySession ? realXScale(xAccessor(head(session))) : 0;
+ const finish = bySession ? realXScale(xAccessor(last(session))) : width;
+ const sessionWidth = finish - begin + dx;
+
+ const histogram2 = d3Histogram()
+ .value(source)
+ .thresholds(bins);
+
+ const rollup = nest()
+ .key((d) => d.direction)
+ .sortKeys(orient === "right" ? descending : ascending)
+ .rollup((leaves) => sum(leaves, (d) => d.volume));
+
+ const values = histogram2(session);
+
+ const volumeInBins = values
+ .map((arr) => arr.map((d) => {
+ return absoluteChange(d) > 0 ? { direction: "up", volume: volume(d) } : { direction: "down", volume: volume(d) };
+ }))
+ .map((arr) => rollup.entries(arr));
+
+ const volumeValues = volumeInBins
+ .map((each) => sum(each.map((d) => d.value)));
+
+ const base = (xScaleD) => head(xScaleD.range());
+
+ const [start, end] = orient === "right"
+ ? [begin, begin + sessionWidth * maxProfileWidthPercent / 100]
+ : [finish, finish - sessionWidth * (100 - maxProfileWidthPercent) / 100];
+
+ const xScale = scaleLinear()
+ .domain([0, max(volumeValues)])
+ .range([start, end]);
+
+ const totalVolumes = volumeInBins.map((volumes) => {
+
+ const totalVolume = sum(volumes, (d) => d.value);
+ const totalVolumeX = xScale(totalVolume);
+ const widthLocal = base(xScale) - totalVolumeX;
+ const x = widthLocal < 0 ? totalVolumeX + widthLocal : totalVolumeX;
+
+ const ws = volumes.map((d) => {
+ return {
+ type: d.key,
+ width: d.value * Math.abs(widthLocal) / totalVolume,
+ };
+ });
+
+ return { x, ws, totalVolumeX };
+ });
+
+ const rects = zip(values, totalVolumes)
+ .map(([d, { x, ws }]) => {
+ const w1 = ws[0] || { type: "up", width: 0 };
+ const w2 = ws[1] || { type: "down", width: 0 };
+
+ return {
+ y: yScale(d.x1),
+ height: yScale(d.x1) - yScale(d.x0),
+ x,
+ width,
+ w1: w1.width,
+ w2: w2.width,
+ stroke1: functor(stroke)(w1),
+ stroke2: functor(stroke)(w2),
+ fill1: functor(fill)(w1),
+ fill2: functor(fill)(w2),
+ };
+ });
+
+ const sessionBg = {
+ x: begin,
+ y: last(rects).y,
+ height: head(rects).y - last(rects).y + head(rects).height,
+ width: sessionWidth,
+ };
+
+ return { rects, sessionBg };
+ });
+
+ return {
+ rects: merge(allRects.map((d) => d.rects)),
+ sessionBg: allRects.map((d) => d.sessionBg),
+ };
+ }
+}
diff --git a/packages/react-financial-charts/src/series/index.ts b/packages/react-financial-charts/src/series/index.ts
new file mode 100644
index 000000000..db18712ca
--- /dev/null
+++ b/packages/react-financial-charts/src/series/index.ts
@@ -0,0 +1,24 @@
+export * from "./AreaSeries";
+export * from "./AlternatingFillAreaSeries";
+export * from "./AreaOnlySeries";
+export * from "./CircleMarker";
+export * from "./TriangleMarker";
+export * from "./SquareMarker";
+export * from "./LineSeries";
+export * from "./CandlestickSeries";
+export * from "./OHLCSeries";
+export * from "./BarSeries";
+export { StackedBarSeries } from "./StackedBarSeries";
+export * from "./GroupedBarSeries";
+export * from "./KagiSeries";
+export * from "./PointAndFigureSeries";
+export * from "./RenkoSeries";
+export * from "./MACDSeries";
+export * from "./BollingerSeries";
+export * from "./RSISeries";
+export * from "./StochasticSeries";
+export * from "./ElderRaySeries";
+export * from "./VolumeProfileSeries";
+export * from "./ScatterSeries";
+export * from "./StraightLine";
+export * from "./SARSeries";
diff --git a/packages/react-financial-charts/src/tooltip/BollingerBandTooltip.tsx b/packages/react-financial-charts/src/tooltip/BollingerBandTooltip.tsx
new file mode 100644
index 000000000..2432f0072
--- /dev/null
+++ b/packages/react-financial-charts/src/tooltip/BollingerBandTooltip.tsx
@@ -0,0 +1,87 @@
+import { format } from "d3-format";
+import * as React from "react";
+import GenericChartComponent from "../GenericChartComponent";
+import { default as defaultDisplayValuesFor } from "./displayValuesFor";
+
+import { functor, isDefined } from "../utils";
+import { ToolTipText } from "./ToolTipText";
+import { ToolTipTSpanLabel } from "./ToolTipTSpanLabel";
+
+interface BollingerBandTooltipProps {
+ className?: string;
+ yAccessor: any; // func
+ displayValuesFor?: any; // func
+ displayFormat: any; // func
+ origin: number[];
+ onClick?: any; // func
+ options: {
+ sourcePath: string;
+ windowSize: number;
+ multiplier: number;
+ movingAverageType: string;
+ };
+ textFill?: string;
+ labelFill?: string;
+ fontFamily?: string;
+ fontSize?: number;
+}
+
+export class BollingerBandTooltip extends React.Component {
+
+ public static defaultProps = {
+ className: "react-stockcharts-tooltip react-stockcharts-bollingerband-tooltip",
+ displayFormat: format(".2f"),
+ displayValuesFor: defaultDisplayValuesFor,
+ origin: [0, 10],
+ };
+
+ public render() {
+ return (
+
+ );
+ }
+
+ private readonly renderSVG = (moreProps) => {
+ const { onClick, displayFormat, yAccessor, options, textFill, labelFill } = this.props;
+ const { displayValuesFor } = this.props;
+
+ const { chartConfig: { width, height } } = moreProps;
+
+ const currentItem = displayValuesFor(this.props, moreProps);
+
+ let top;
+ let middle;
+ let bottom;
+ top = middle = bottom = "n/a";
+
+ if (isDefined(currentItem)
+ && isDefined(yAccessor(currentItem))) {
+ const item = yAccessor(currentItem);
+ top = displayFormat(item.top);
+ middle = displayFormat(item.middle);
+ bottom = displayFormat(item.bottom);
+ }
+
+ const { origin: originProp } = this.props;
+ const origin = functor(originProp);
+ const [x, y] = origin(width, height);
+
+ const { sourcePath, windowSize, multiplier, movingAverageType } = options;
+ const tooltipLabel = `BB(${sourcePath}, ${windowSize}, ${multiplier}, ${movingAverageType}): `;
+ const tooltipValue = `${top}, ${middle}, ${bottom}`;
+ return (
+
+
+ {tooltipLabel}
+ {tooltipValue}
+
+
+ );
+ }
+}
diff --git a/packages/react-financial-charts/src/tooltip/GroupTooltip.tsx b/packages/react-financial-charts/src/tooltip/GroupTooltip.tsx
new file mode 100644
index 000000000..e8489db27
--- /dev/null
+++ b/packages/react-financial-charts/src/tooltip/GroupTooltip.tsx
@@ -0,0 +1,261 @@
+import { format } from "d3-format";
+import * as React from "react";
+import GenericChartComponent from "../GenericChartComponent";
+import { default as defaultDisplayValuesFor } from "./displayValuesFor";
+import { ToolTipText } from "./ToolTipText";
+import { ToolTipTSpanLabel } from "./ToolTipTSpanLabel";
+
+type layouts =
+ "horizontal" |
+ "horizontalRows" |
+ "horizontalInline" |
+ "vertical" |
+ "verticalRows";
+
+interface SingleTooltipProps {
+ origin: number[];
+ yLabel: string;
+ yValue: string;
+ onClick?: ((details: any, event: React.MouseEvent) => void);
+ fontFamily?: string;
+ labelFill: string;
+ valueFill: string;
+ fontSize?: number;
+ withShape: boolean;
+ forChart: number | string;
+ options: any;
+ layout: layouts;
+}
+
+export class SingleTooltip extends React.Component {
+
+ public static defaultProps = {
+ labelFill: "#4682B4",
+ valueFill: "#000000",
+ withShape: false,
+ };
+
+ /*
+ * Renders the value next to the label.
+ */
+ public renderValueNextToLabel() {
+ const { origin, yLabel, yValue, labelFill, valueFill, withShape, fontSize, fontFamily } = this.props;
+
+ return (
+
+ {withShape ? : null}
+
+ {yLabel}:
+ {yValue}
+
+
+ );
+ }
+
+ /*
+ * Renders the value beneath the label.
+ */
+ public renderValueBeneathToLabel() {
+ const { origin, yLabel, yValue, labelFill, valueFill, withShape, fontSize, fontFamily } = this.props;
+
+ return (
+
+ {withShape ? : null}
+
+ {yLabel}
+ {yValue}
+
+
+ );
+ }
+
+ /*
+ * Renders the value next to the label.
+ * The parent component must have a "text"-element.
+ */
+ public renderInline() {
+ const { yLabel, yValue, labelFill, valueFill, fontSize, fontFamily } = this.props;
+
+ return (
+
+ {yLabel}:
+ {yValue}
+
+ );
+ }
+
+ public render() {
+
+ const { layout } = this.props;
+ let comp: JSX.Element | null = null;
+
+ switch (layout) {
+ case "horizontal":
+ comp = this.renderValueNextToLabel();
+ break;
+ case "horizontalRows":
+ comp = this.renderValueBeneathToLabel();
+ break;
+ case "horizontalInline":
+ comp = this.renderInline();
+ break;
+ case "vertical":
+ comp = this.renderValueNextToLabel();
+ break;
+ case "verticalRows":
+ comp = this.renderValueBeneathToLabel();
+ break;
+ default:
+ comp = this.renderValueNextToLabel();
+ }
+
+ return comp;
+ }
+
+ private readonly handleClick = (e: React.MouseEvent) => {
+ const { onClick, forChart, options } = this.props;
+
+ if (onClick !== undefined) {
+ onClick({ chartId: forChart, ...options }, e);
+ }
+ }
+}
+
+interface GroupTooltipProps {
+ className?: string;
+ layout: layouts;
+ position: "topRight" | "bottomLeft" | "bottomRight";
+ displayFormat: any; // func
+ origin: number[];
+ displayValuesFor: any; // func
+ onClick?: ((event: React.MouseEvent) => void);
+ fontFamily?: string;
+ fontSize?: number;
+ width?: number; // "width" only be used, if layout is "horizontal" or "horizontalRows".
+ verticalSize?: number; // "verticalSize" only be used, if layout is "vertical", "verticalRows".
+ options: Array<{
+ labelFill?: string;
+ yLabel: string | any; // func
+ yAccessor: any;
+ valueFill?: string;
+ withShape?: boolean;
+ }>;
+ yAccessor: any; // func
+ labelFill?: string;
+ valueFill?: string;
+ withShape: boolean; // "withShape" is ignored, if layout is "horizontalInline" or "vertical".
+}
+
+// tslint:disable-next-line: max-classes-per-file
+export class GroupTooltip extends React.Component {
+
+ public static defaultProps = {
+ className: "react-stockcharts-tooltip react-stockcharts-group-tooltip",
+ layout: "horizontal",
+ displayFormat: format(".2f"),
+ displayValuesFor: defaultDisplayValuesFor,
+ origin: [0, 0],
+ width: 60,
+ verticalSize: 13,
+ };
+
+ public getPosition(moreProps) {
+ const { position } = this.props;
+ const { height, width } = moreProps.chartConfig;
+
+ const dx = 20;
+ const dy = 40;
+ let textAnchor: string | undefined;
+ let xyPos: Array | null = null;
+
+ if (position !== undefined) {
+ switch (position) {
+ case "topRight":
+ xyPos = [width - dx, null];
+ textAnchor = "end";
+ break;
+ case "bottomLeft":
+ xyPos = [null, height - dy];
+ break;
+ case "bottomRight":
+ xyPos = [width - dx, height - dy];
+ textAnchor = "end";
+ break;
+ default:
+ xyPos = [null, null];
+ }
+ } else {
+ xyPos = [null, null];
+ }
+
+ return { xyPos, textAnchor };
+ }
+
+ public render() {
+ return (
+
+ );
+ }
+
+ private readonly renderSVG = (moreProps) => {
+
+ const { displayValuesFor } = this.props;
+ const { chartId } = moreProps;
+
+ const { className, onClick, width = 60, verticalSize = 13, fontFamily, fontSize, layout } = this.props;
+ const { origin, displayFormat, options } = this.props;
+ const currentItem = displayValuesFor(this.props, moreProps);
+ const { xyPos, textAnchor } = this.getPosition(moreProps);
+
+ const xPos = xyPos != null && xyPos[0] != null ? xyPos[0] : origin[0];
+ const yPos = xyPos != null && xyPos[1] != null ? xyPos[1] : origin[1];
+
+ const singleTooltip = options.map((each, idx) => {
+
+ const yValue = currentItem && each.yAccessor(currentItem);
+ const yDisplayValue = yValue ? displayFormat(yValue) : "n/a";
+
+ const orig = () => {
+ if (layout === "horizontal" || layout === "horizontalRows") {
+ return [width * idx, 0];
+ }
+ if (layout === "vertical") {
+ return [0, verticalSize * idx];
+ }
+ if (layout === "verticalRows") {
+ return [0, verticalSize * 2.3 * idx];
+ }
+ return [0, 0];
+ };
+
+ return ;
+ });
+
+ return (
+
+ {layout === "horizontalInline"
+ ? {singleTooltip}
+ : singleTooltip
+ }
+
+ );
+ }
+}
diff --git a/packages/react-financial-charts/src/tooltip/HoverTooltip.tsx b/packages/react-financial-charts/src/tooltip/HoverTooltip.tsx
new file mode 100644
index 000000000..560153b94
--- /dev/null
+++ b/packages/react-financial-charts/src/tooltip/HoverTooltip.tsx
@@ -0,0 +1,283 @@
+import { sum } from "d3-array";
+import * as PropTypes from "prop-types";
+import * as React from "react";
+import GenericComponent from "../GenericComponent";
+
+import { first, hexToRGBA, isDefined, isNotDefined, last } from "../utils";
+
+interface HoverTooltipProps {
+ chartId?: number | string;
+ yAccessor?: any; // func
+ tooltipSVG?: any; // func
+ backgroundShapeSVG?: any; // func
+ bgwidth?: number;
+ bgheight?: number;
+ bgFill: string;
+ bgOpacity: number;
+ tooltipContent: any; // func
+ origin: number[] | any; // func
+ fontFamily?: string;
+ fontSize?: number;
+}
+
+class HoverTooltip extends React.Component {
+
+ public static defaultProps = {
+ tooltipSVG,
+ tooltipCanvas,
+ origin,
+ fill: "#D4E2FD",
+ bgFill: "#D4E2FD",
+ bgOpacity: 0.5,
+ stroke: "#9B9BFF",
+ fontFill: "#000000",
+ opacity: 0.8,
+ backgroundShapeSVG,
+ backgroundShapeCanvas,
+ fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif",
+ fontSize: 12,
+ };
+
+ public static contextTypes = {
+ margin: PropTypes.object.isRequired,
+ ratio: PropTypes.number.isRequired,
+ };
+
+ public render() {
+ return ;
+ }
+
+ private readonly renderSVG = (moreProps) => {
+
+ const pointer = helper(this.props, moreProps);
+
+ if (pointer === undefined) {
+ return null;
+ }
+
+ const { bgFill, bgOpacity, backgroundShapeSVG, tooltipSVG } = this.props;
+ const { bgheight, bgwidth } = this.props;
+ const { height } = moreProps;
+
+ const { x, y, content, centerX, pointWidth, bgSize } = pointer;
+
+ const bgShape = isDefined(bgwidth) && isDefined(bgheight)
+ ? { width: bgwidth, height: bgheight }
+ : bgSize;
+
+ return (
+
+
+
+ {backgroundShapeSVG(this.props, bgShape)}
+ {tooltipSVG(this.props, content)}
+
+
+ );
+ }
+ private readonly drawOnCanvas = (ctx, moreProps) => {
+ const pointer = helper(this.props, moreProps, ctx);
+ const { height } = moreProps;
+
+ if (isNotDefined(pointer)) {
+ return null;
+ }
+
+ drawOnCanvas(ctx, this.props, this.context, pointer, height);
+ }
+}
+
+const PADDING = 5;
+const X = 10;
+const Y = 10;
+
+function backgroundShapeSVG({ fill, stroke, opacity }, { height, width }) {
+ return ;
+}
+
+function tooltipSVG({ fontFamily, fontSize, fontFill }, content) {
+ const tspans: any[] = [];
+ const startY = Y + fontSize * 0.9;
+
+ for (let i = 0; i < content.y.length; i++) {
+ const y = content.y[i];
+ const textY = startY + (fontSize * (i + 1));
+
+ tspans.push({y.label});
+ tspans.push(: );
+ tspans.push({y.value});
+ }
+ return
+ {content.x}
+ {tspans}
+ ;
+}
+
+function backgroundShapeCanvas(props, { width, height }, ctx) {
+ const { fill, stroke, opacity } = props;
+
+ ctx.fillStyle = hexToRGBA(fill, opacity);
+ ctx.strokeStyle = stroke;
+ ctx.beginPath();
+ ctx.rect(0, 0, width, height);
+ ctx.fill();
+ ctx.stroke();
+}
+
+function tooltipCanvas({ fontFamily, fontSize, fontFill }, content, ctx) {
+ const startY = Y + fontSize * 0.9;
+ ctx.font = `${fontSize}px ${fontFamily}`;
+ ctx.fillStyle = fontFill;
+ ctx.textAlign = "left";
+ ctx.fillText(content.x, X, startY);
+
+ for (let i = 0; i < content.y.length; i++) {
+ const y = content.y[i];
+ const textY = startY + (fontSize * (i + 1));
+ ctx.fillStyle = y.stroke || fontFill;
+ ctx.fillText(y.label, X, textY);
+
+ ctx.fillStyle = fontFill;
+ ctx.fillText(": " + y.value, X + ctx.measureText(y.label).width, textY);
+ }
+}
+
+function drawOnCanvas(ctx, props, context, pointer, height) {
+
+ const { margin, ratio } = context;
+ const { bgFill, bgOpacity } = props;
+ const { backgroundShapeCanvas, tooltipCanvas } = props;
+
+ const originX = 0.5 * ratio + margin.left;
+ const originY = 0.5 * ratio + margin.top;
+
+ ctx.save();
+
+ ctx.setTransform(1, 0, 0, 1, 0, 0);
+ ctx.scale(ratio, ratio);
+
+ ctx.translate(originX, originY);
+
+ const { x, y, content, centerX, pointWidth, bgSize } = pointer;
+
+ ctx.fillStyle = hexToRGBA(bgFill, bgOpacity);
+ ctx.beginPath();
+ ctx.rect(centerX - pointWidth / 2, 0, pointWidth, height);
+ ctx.fill();
+
+ ctx.translate(x, y);
+ backgroundShapeCanvas(props, bgSize, ctx);
+ tooltipCanvas(props, content, ctx);
+
+ ctx.restore();
+}
+
+function calculateTooltipSize({ fontFamily, fontSize, fontFill }, content, ctx) {
+ if (isNotDefined(ctx)) {
+ const canvas = document.createElement("canvas");
+ ctx = canvas.getContext("2d");
+ }
+
+ ctx.font = `${fontSize}px ${fontFamily}`;
+ ctx.fillStyle = fontFill;
+ ctx.textAlign = "left";
+
+ const measureText = (str) => ({
+ width: ctx.measureText(str).width,
+ height: fontSize,
+ });
+
+ const { width, height } = content.y
+ .map(({ label, value }) => measureText(`${label}: ${value}`))
+ // Sum all y and x sizes (begin with x label size)
+ .reduce((res, size) => sumSizes(res, size), measureText(String(content.x)))
+ ;
+
+ return {
+ width: width + 2 * X,
+ height: height + 2 * Y,
+ };
+}
+
+function sumSizes(...sizes) {
+ return {
+ width: Math.max(...sizes.map((size) => size.width)),
+ height: sum(sizes, (d) => d.height),
+ };
+}
+
+function normalizeX(x, bgSize, pointWidth, width) {
+ // return x - bgSize.width - pointWidth / 2 - PADDING * 2 < 0
+ return x < width / 2
+ ? x + pointWidth / 2 + PADDING
+ : x - bgSize.width - pointWidth / 2 - PADDING;
+}
+
+function normalizeY(y, bgSize) {
+ return y - bgSize.height <= 0
+ ? y + PADDING
+ : y - bgSize.height - PADDING;
+}
+
+function origin(props, moreProps, bgSize, pointWidth) {
+ const { chartId, yAccessor } = props;
+ const { mouseXY, xAccessor, currentItem, xScale, chartConfig, width } = moreProps;
+
+ // @ts-ignore
+ let y = last(mouseXY);
+
+ const xValue = xAccessor(currentItem);
+ let x = Math.round(xScale(xValue));
+
+ if (isDefined(chartId) && isDefined(yAccessor)
+ && isDefined(chartConfig) && isDefined(chartConfig.findIndex)) {
+ const yValue = yAccessor(currentItem);
+ const chartIndex = chartConfig.findIndex(x => x.id === chartId);
+
+ y = Math.round(chartConfig[chartIndex].yScale(yValue));
+ }
+
+ x = normalizeX(x, bgSize, pointWidth, width);
+ y = normalizeY(y, bgSize);
+
+ return [x, y];
+}
+
+function helper(props, moreProps, ctx?) {
+ const { show, xScale, currentItem, plotData } = moreProps;
+ const { origin, tooltipContent } = props;
+ const { xAccessor, displayXAccessor } = moreProps;
+
+ if (!show || isNotDefined(currentItem)) { return; }
+
+ const xValue = xAccessor(currentItem);
+
+ if (!show || isNotDefined(xValue)) { return; }
+
+ const content = tooltipContent({ currentItem, xAccessor: displayXAccessor });
+ const centerX = xScale(xValue);
+ // @ts-ignore
+ const pointWidth = Math.abs(xScale(xAccessor(last(plotData))) - xScale(xAccessor(first(plotData)))) / (plotData.length - 1);
+
+ const bgSize = calculateTooltipSize(props, content, ctx);
+
+ const [x, y] = origin(props, moreProps, bgSize, pointWidth);
+
+ return { x, y, content, centerX, pointWidth, bgSize };
+}
+
+export default HoverTooltip;
diff --git a/packages/react-financial-charts/src/tooltip/MACDTooltip.tsx b/packages/react-financial-charts/src/tooltip/MACDTooltip.tsx
new file mode 100644
index 000000000..ed49013b3
--- /dev/null
+++ b/packages/react-financial-charts/src/tooltip/MACDTooltip.tsx
@@ -0,0 +1,94 @@
+import { format } from "d3-format";
+import * as React from "react";
+
+import GenericChartComponent from "../GenericChartComponent";
+import { default as defaultDisplayValuesFor } from "./displayValuesFor";
+
+import { functor } from "../utils";
+import { ToolTipText } from "./ToolTipText";
+import { ToolTipTSpanLabel } from "./ToolTipTSpanLabel";
+
+interface MACDTooltipProps {
+ origin: number[] | any; // func
+ className?: string;
+ fontFamily?: string;
+ fontSize?: number;
+ labelFill?: string;
+ yAccessor: any; // func
+ options: {
+ slow: number;
+ fast: number;
+ signal: number;
+ };
+ appearance: {
+ stroke: {
+ macd: string,
+ signal: string,
+ },
+ fill: {
+ divergence: string,
+ },
+ };
+ displayFormat: any; // func
+ displayValuesFor: any; // func
+ onClick?: any; // func
+}
+
+export class MACDTooltip extends React.Component {
+
+ public static defaultProps = {
+ className: "react-stockcharts-tooltip",
+ displayFormat: format(".2f"),
+ displayValuesFor: defaultDisplayValuesFor,
+ origin: [0, 0],
+ };
+
+ public render() {
+ return (
+
+ );
+ }
+
+ private readonly renderSVG = (moreProps) => {
+ const { onClick, fontFamily, fontSize, displayFormat, className } = this.props;
+ const { yAccessor, options, appearance, labelFill } = this.props;
+ const { displayValuesFor } = this.props;
+
+ const { chartConfig: { width, height } } = moreProps;
+
+ const currentItem = displayValuesFor(this.props, moreProps);
+ const macdValue = currentItem && yAccessor(currentItem);
+
+ const macd = (macdValue && macdValue.macd && displayFormat(macdValue.macd)) || "n/a";
+ const signal = (macdValue && macdValue.signal && displayFormat(macdValue.signal)) || "n/a";
+ const divergence = (macdValue && macdValue.divergence && displayFormat(macdValue.divergence)) || "n/a";
+
+ const { origin: originProp } = this.props;
+ const origin = functor(originProp);
+ const [x, y] = origin(width, height);
+
+ return (
+
+
+ MACD (
+ {options.slow}
+ ,
+ {options.fast}
+ ):
+ {macd}
+ Signal (
+ {options.signal}
+ ):
+ {signal}
+ Divergence:
+ {divergence}
+
+
+ );
+ }
+}
diff --git a/packages/react-financial-charts/src/tooltip/MovingAverageTooltip.tsx b/packages/react-financial-charts/src/tooltip/MovingAverageTooltip.tsx
new file mode 100644
index 000000000..cdd7b3f7f
--- /dev/null
+++ b/packages/react-financial-charts/src/tooltip/MovingAverageTooltip.tsx
@@ -0,0 +1,146 @@
+
+import { format } from "d3-format";
+import * as React from "react";
+import GenericChartComponent from "../GenericChartComponent";
+import { default as defaultDisplayValuesFor } from "./displayValuesFor";
+
+import { ToolTipText } from "./ToolTipText";
+import { ToolTipTSpanLabel } from "./ToolTipTSpanLabel";
+
+import { functor } from "../utils";
+
+interface SingleMAToolTipProps {
+ origin: number[];
+ color: string;
+ displayName: string;
+ value: string;
+ onClick?: ((details: any, event: React.MouseEvent) => void);
+ fontFamily?: string;
+ textFill?: string;
+ labelFill?: string;
+ fontSize?: number;
+ forChart: number | string;
+ options: any;
+}
+
+export class SingleMAToolTip extends React.Component {
+
+ public render() {
+ const { textFill, labelFill } = this.props;
+ const translate = "translate(" + this.props.origin[0] + ", " + this.props.origin[1] + ")";
+ return (
+
+
+
+ {this.props.displayName}
+ {this.props.value}
+
+
+
+ );
+ }
+
+ private readonly onClick = (event: React.MouseEvent) => {
+ const { onClick, forChart, options } = this.props;
+
+ if (onClick !== undefined) {
+ onClick({ chartId: forChart, ...options }, event);
+ }
+ }
+}
+
+interface MovingAverageTooltipProps {
+ className?: string;
+ displayFormat: any; // func
+ origin: number[];
+ displayValuesFor?: any; // func
+ onClick?: ((event: React.MouseEvent) => void);
+ textFill?: string;
+ labelFill?: string;
+ fontFamily?: string;
+ fontSize?: number;
+ width?: number;
+ options: Array<{
+ yAccessor: any; // func
+ type: string;
+ stroke: string;
+ windowSize: number;
+ echo: any;
+ }>;
+}
+
+// tslint:disable-next-line: max-classes-per-file
+export class MovingAverageTooltip extends React.Component {
+
+ public static defaultProps = {
+ className: "react-stockcharts-tooltip react-stockcharts-moving-average-tooltip",
+ displayFormat: format(".2f"),
+ displayValuesFor: defaultDisplayValuesFor,
+ origin: [0, 10],
+ width: 65,
+ };
+
+ public render() {
+ return (
+
+ );
+ }
+
+ private readonly renderSVG = (moreProps) => {
+ const { displayValuesFor } = this.props;
+
+ const { chartId } = moreProps;
+ const { chartConfig } = moreProps;
+
+ const { className, onClick, width = 65, fontFamily, fontSize, textFill, labelFill } = this.props;
+ const { origin: originProp, displayFormat, options } = this.props;
+ const { chartConfig: { height } } = moreProps;
+
+ const currentItem = displayValuesFor(this.props, moreProps);
+ const config = chartConfig;
+
+ const origin = functor(originProp);
+ const [x, y] = origin(width, height);
+ const [ox, oy] = config.origin;
+
+ return (
+
+ {options
+ .map((each, idx) => {
+ const yValue = currentItem && each.yAccessor(currentItem);
+
+ const tooltipLabel = `${each.type} (${each.windowSize})`;
+ const yDisplayValue = yValue ? displayFormat(yValue) : "n/a";
+ return (
+
+ );
+ })}
+
+ );
+ }
+}
diff --git a/packages/react-financial-charts/src/tooltip/OHLCTooltip.tsx b/packages/react-financial-charts/src/tooltip/OHLCTooltip.tsx
new file mode 100644
index 000000000..a6c54057f
--- /dev/null
+++ b/packages/react-financial-charts/src/tooltip/OHLCTooltip.tsx
@@ -0,0 +1,183 @@
+
+import { format } from "d3-format";
+import { timeFormat } from "d3-time-format";
+import * as React from "react";
+import GenericChartComponent from "../GenericChartComponent";
+import { default as defaultDisplayValuesFor } from "./displayValuesFor";
+
+import { functor, isDefined } from "../utils";
+import { ToolTipText } from "./ToolTipText";
+import { ToolTipTSpanLabel } from "./ToolTipTSpanLabel";
+
+const displayTextsDefault = {
+ d: "Date: ",
+ o: " O: ",
+ h: " H: ",
+ l: " L: ",
+ c: " C: ",
+ v: " Vol: ",
+ na: "n/a",
+};
+
+const defaultDisplay = (props, _, itemsToDisplay) => {
+
+ const {
+ className,
+ textFill,
+ labelFill,
+ onClick,
+ fontFamily,
+ fontSize,
+ displayTexts,
+ } = props;
+
+ const {
+ displayDate,
+ open,
+ high,
+ low,
+ close,
+ volume,
+ x,
+ y,
+ } = itemsToDisplay;
+
+ return (
+
+
+
+ {displayTexts.d}
+
+ {displayDate}
+ {displayTexts.o}
+ {open}
+ {displayTexts.h}
+ {high}
+ {displayTexts.l}
+ {low}
+ {displayTexts.c}
+ {close}
+ {displayTexts.v}
+ {volume}
+
+
+ );
+};
+
+interface OHLCTooltipProps {
+ className?: string;
+ accessor?: any; // func
+ xDisplayFormat?: any; // func
+ children?: any; // func
+ volumeFormat?: any; // func
+ percentFormat?: any; // func
+ ohlcFormat?: any; // func
+ origin?: number[] | any; // func
+ fontFamily?: string;
+ fontSize?: number;
+ onClick?: ((event: React.MouseEvent) => void);
+ displayValuesFor?: any; // func
+ textFill?: string;
+ labelFill?: string;
+ displayTexts?: any;
+}
+
+export class OHLCTooltip extends React.Component {
+
+ public static defaultProps = {
+ accessor: (d) => {
+ return {
+ date: d.date,
+ open: d.open,
+ high: d.high,
+ low: d.low,
+ close: d.close,
+ volume: d.volume,
+ };
+ },
+ xDisplayFormat: timeFormat("%Y-%m-%d"),
+ volumeFormat: format(".4s"),
+ percentFormat: format(".2%"),
+ ohlcFormat: format(".2f"),
+ displayValuesFor: defaultDisplayValuesFor,
+ origin: [0, 0],
+ children: defaultDisplay,
+ displayTexts: displayTextsDefault,
+ };
+
+ public render() {
+ return (
+
+ );
+ }
+
+ private readonly renderSVG = (moreProps) => {
+ const { displayValuesFor } = this.props;
+ const {
+ xDisplayFormat,
+ accessor,
+ volumeFormat,
+ ohlcFormat,
+ percentFormat,
+ displayTexts,
+ } = this.props;
+
+ const { chartConfig: { width, height } } = moreProps;
+ const { displayXAccessor } = moreProps;
+
+ const currentItem = displayValuesFor(this.props, moreProps);
+
+ let displayDate;
+ let open;
+ let high;
+ let low;
+ let close;
+ let volume;
+ let percent;
+ displayDate = open = high = low = close = volume = percent = displayTexts.na;
+
+ if (isDefined(currentItem) && isDefined(accessor(currentItem))) {
+ const item = accessor(currentItem);
+ volume = isDefined(item.volume) ? volumeFormat(item.volume) : displayTexts.na;
+
+ displayDate = xDisplayFormat(displayXAccessor(item));
+ open = ohlcFormat(item.open);
+ high = ohlcFormat(item.high);
+ low = ohlcFormat(item.low);
+ close = ohlcFormat(item.close);
+ percent = percentFormat((item.close - item.open) / item.open);
+ }
+
+ const { origin: originProp } = this.props;
+ const origin = functor(originProp);
+ const [x, y] = origin(width, height);
+
+ const itemsToDisplay = {
+ displayDate,
+ open,
+ high,
+ low,
+ close,
+ percent,
+ volume,
+ x,
+ y,
+ };
+ return this.props.children(this.props, moreProps, itemsToDisplay);
+ }
+}
diff --git a/packages/react-financial-charts/src/tooltip/RSITooltip.tsx b/packages/react-financial-charts/src/tooltip/RSITooltip.tsx
new file mode 100644
index 000000000..884e86e93
--- /dev/null
+++ b/packages/react-financial-charts/src/tooltip/RSITooltip.tsx
@@ -0,0 +1,74 @@
+import { format } from "d3-format";
+import * as React from "react";
+import GenericChartComponent from "../GenericChartComponent";
+import { default as defaultDisplayValuesFor } from "./displayValuesFor";
+
+import { functor, isDefined } from "../utils";
+import { ToolTipText } from "./ToolTipText";
+import { ToolTipTSpanLabel } from "./ToolTipTSpanLabel";
+
+interface RSITooltipProps {
+ origin: number[] | any; // func
+ options: {
+ windowSize: number;
+ };
+ className?: string;
+ fontFamily?: string;
+ fontSize?: number;
+ onClick?: ((event: React.MouseEvent) => void);
+ yAccessor: any; // func
+ displayFormat: any; // func
+ displayValuesFor?: any; // func
+ textFill?: string;
+ labelFill?: string;
+}
+
+export class RSITooltip extends React.Component {
+
+ public static defaultProps = {
+ displayFormat: format(".2f"),
+ displayValuesFor: defaultDisplayValuesFor,
+ origin: [0, 0],
+ className: "react-stockcharts-tooltip",
+ };
+
+ public render() {
+ return (
+
+ );
+ }
+
+ private readonly renderSVG = (moreProps) => {
+ const { onClick, fontFamily, fontSize, yAccessor, displayFormat, className } = this.props;
+ const { options, labelFill, textFill } = this.props;
+ const { displayValuesFor } = this.props;
+
+ const { chartConfig: { width, height } } = moreProps;
+
+ const currentItem = displayValuesFor(this.props, moreProps);
+ const rsi = isDefined(currentItem) && yAccessor(currentItem);
+ const value = (rsi && displayFormat(rsi)) || "n/a";
+
+ const { origin: originProp } = this.props;
+ const origin = functor(originProp);
+ const [x, y] = origin(width, height);
+
+ const tooltipLabel = `RSI (${options.windowSize}): `;
+ return (
+
+
+ {tooltipLabel}
+ {value}
+
+
+ );
+ }
+}
diff --git a/packages/react-financial-charts/src/tooltip/SingleValueTooltip.tsx b/packages/react-financial-charts/src/tooltip/SingleValueTooltip.tsx
new file mode 100644
index 000000000..6c668a874
--- /dev/null
+++ b/packages/react-financial-charts/src/tooltip/SingleValueTooltip.tsx
@@ -0,0 +1,86 @@
+
+import { format } from "d3-format";
+import * as React from "react";
+import GenericChartComponent from "../GenericChartComponent";
+import { default as defaultDisplayValuesFor } from "./displayValuesFor";
+
+import { functor, identity, isDefined, noop } from "../utils";
+import { ToolTipText } from "./ToolTipText";
+import { ToolTipTSpanLabel } from "./ToolTipTSpanLabel";
+
+interface SingleValueTooltipProps {
+ xDisplayFormat?: any; // func
+ yDisplayFormat: any; // func
+ xLabel?: string;
+ yLabel: string;
+ labelFill?: string;
+ valueFill?: string;
+ origin?: number[] | any; // func
+ className?: string;
+ fontFamily?: string;
+ fontSize?: number;
+ onClick?: ((event: React.MouseEvent) => void);
+ displayValuesFor?: any; // func
+ xAccessor?: any; // func
+ yAccessor?: any; // func
+}
+
+export class SingleValueTooltip extends React.Component {
+
+ public static defaultProps = {
+ origin: [0, 0],
+ labelFill: "#4682B4",
+ valueFill: "#000000",
+ yDisplayFormat: format(".2f"),
+ displayValuesFor: defaultDisplayValuesFor,
+ xAccessor: noop,
+ yAccessor: identity,
+ className: "react-stockcharts-tooltip",
+ };
+
+ public render() {
+ return (
+
+ );
+ }
+
+ private readonly renderSVG = (moreProps) => {
+
+ const { onClick, fontFamily, fontSize, labelFill, valueFill, className } = this.props;
+ const { xDisplayFormat, yDisplayFormat, xLabel, yLabel, xAccessor, yAccessor } = this.props;
+ const { displayValuesFor } = this.props;
+
+ const { chartConfig: { width, height } } = moreProps;
+ const currentItem = displayValuesFor(this.props, moreProps);
+
+ const xDisplayValue = isDefined(currentItem) && isDefined(xAccessor(currentItem)) ? xDisplayFormat(xAccessor(currentItem)) : "n/a";
+ const yDisplayValue = isDefined(currentItem) && isDefined(yAccessor(currentItem)) ? yDisplayFormat(yAccessor(currentItem)) : "n/a";
+
+ const { origin: originProp } = this.props;
+ const origin = functor(originProp);
+ const [x, y] = origin(width, height);
+
+ return (
+
+
+ {xLabel ? {`${xLabel}: `} : null}
+ {xLabel ? {`${xDisplayValue} `} : null}
+
+ {`${yLabel}: `}
+
+
+ {yDisplayValue}
+
+
+
+ );
+ }
+}
diff --git a/packages/react-financial-charts/src/tooltip/StochasticTooltip.tsx b/packages/react-financial-charts/src/tooltip/StochasticTooltip.tsx
new file mode 100644
index 000000000..763b040ec
--- /dev/null
+++ b/packages/react-financial-charts/src/tooltip/StochasticTooltip.tsx
@@ -0,0 +1,87 @@
+import { format } from "d3-format";
+import * as React from "react";
+import GenericChartComponent from "../GenericChartComponent";
+import { default as defaultDisplayValuesFor } from "./displayValuesFor";
+
+import { functor } from "../utils";
+
+import { ToolTipText } from "./ToolTipText";
+import { ToolTipTSpanLabel } from "./ToolTipTSpanLabel";
+
+interface StochasticTooltipProps {
+ origin: number[] | any; // func
+ className?: string;
+ fontFamily?: string;
+ fontSize?: number;
+ labelFill?: string;
+ onClick?: any; // func
+ yAccessor: any; // func
+ options: {
+ windowSize: number;
+ kWindowSize: number;
+ dWindowSize: number;
+ };
+ appearance: {
+ stroke: {
+ dLine: string;
+ kLine: string;
+ },
+ };
+ displayFormat: any; // func
+ displayValuesFor?: any; // func
+ label: string;
+}
+
+export class StochasticTooltip extends React.Component {
+
+ public static defaultProps = {
+ displayFormat: format(".2f"),
+ displayValuesFor: defaultDisplayValuesFor,
+ origin: [0, 0],
+ className: "react-stockcharts-tooltip",
+ label: "STO",
+ };
+
+ public render() {
+ return (
+
+ );
+ }
+
+ private readonly renderSVG = (moreProps) => {
+ const { onClick, fontFamily, fontSize, yAccessor, displayFormat, label } = this.props;
+ const { className, options, appearance, labelFill } = this.props;
+ const { displayValuesFor } = this.props;
+ const { chartConfig: { width, height } } = moreProps;
+
+ const currentItem = displayValuesFor(this.props, moreProps);
+ const { stroke } = appearance;
+ const stochastic = currentItem && yAccessor(currentItem);
+
+ const K = (stochastic && stochastic.K && displayFormat(stochastic.K)) || "n/a";
+ const D = (stochastic && stochastic.D && displayFormat(stochastic.D)) || "n/a";
+
+ const { origin: originProp } = this.props;
+ const origin = functor(originProp);
+ const [x, y] = origin(width, height);
+
+ return (
+
+
+ {`${label} %K(`}
+ {`${options.windowSize}, ${options.kWindowSize}`}
+ ):
+ {K}
+ %D (
+ {options.dWindowSize}
+ ):
+ {D}
+
+
+ );
+ }
+}
diff --git a/packages/react-financial-charts/src/tooltip/ToolTipTSpanLabel.tsx b/packages/react-financial-charts/src/tooltip/ToolTipTSpanLabel.tsx
new file mode 100644
index 000000000..a31227b2e
--- /dev/null
+++ b/packages/react-financial-charts/src/tooltip/ToolTipTSpanLabel.tsx
@@ -0,0 +1,24 @@
+import * as React from "react";
+
+interface ToolTipTSpanLabelProps extends React.SVGProps {
+ readonly fill: string | undefined;
+}
+
+export class ToolTipTSpanLabel extends React.Component {
+
+ public static defaultProps = {
+ className: "react-stockcharts-tooltip-label",
+ fill: "#4682B4",
+ };
+
+ public render() {
+
+ const { children, ...rest } = this.props;
+
+ return (
+
+ {children}
+
+ );
+ }
+}
diff --git a/packages/react-financial-charts/src/tooltip/ToolTipText.tsx b/packages/react-financial-charts/src/tooltip/ToolTipText.tsx
new file mode 100644
index 000000000..5699ce942
--- /dev/null
+++ b/packages/react-financial-charts/src/tooltip/ToolTipText.tsx
@@ -0,0 +1,27 @@
+import * as React from "react";
+
+interface ToolTipTextProps extends React.SVGProps {
+}
+
+export class ToolTipText extends React.Component {
+
+ public static defaultProps = {
+ className: "react-stockcharts-tooltip",
+ fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif",
+ fontSize: 11,
+ };
+
+ public render() {
+
+ const { children, fontFamily, fontSize, ...rest } = this.props;
+
+ return (
+
+ {children}
+
+ );
+ }
+}
diff --git a/packages/react-financial-charts/src/tooltip/displayValuesFor.ts b/packages/react-financial-charts/src/tooltip/displayValuesFor.ts
new file mode 100644
index 000000000..c06b73689
--- /dev/null
+++ b/packages/react-financial-charts/src/tooltip/displayValuesFor.ts
@@ -0,0 +1,4 @@
+export default function displayValuesFor(props, moreProps) {
+ const { currentItem } = moreProps;
+ return currentItem;
+}
diff --git a/packages/react-financial-charts/src/tooltip/index.ts b/packages/react-financial-charts/src/tooltip/index.ts
new file mode 100644
index 000000000..43291452b
--- /dev/null
+++ b/packages/react-financial-charts/src/tooltip/index.ts
@@ -0,0 +1,11 @@
+export * from "./MACDTooltip";
+export * from "./OHLCTooltip";
+export * from "./SingleValueTooltip";
+export * from "./MovingAverageTooltip";
+export * from "./BollingerBandTooltip";
+export * from "./RSITooltip";
+export * from "./StochasticTooltip";
+export { default as HoverTooltip } from "./HoverTooltip";
+export * from "./ToolTipText";
+export * from "./ToolTipTSpanLabel";
+export * from "./GroupTooltip";
diff --git a/packages/react-financial-charts/src/utils/ChartDataUtil.ts b/packages/react-financial-charts/src/utils/ChartDataUtil.ts
new file mode 100644
index 000000000..1ca4f692a
--- /dev/null
+++ b/packages/react-financial-charts/src/utils/ChartDataUtil.ts
@@ -0,0 +1,266 @@
+
+import { extent } from "d3-array";
+import { set } from "d3-collection";
+import flattenDeep from "lodash.flattendeep";
+import * as React from "react";
+
+import { Chart } from "../Chart";
+
+import {
+ find,
+ functor,
+ getClosestItem,
+ isDefined,
+ isNotDefined,
+ isObject,
+ last,
+ mapObject,
+ shallowEqual,
+ zipper,
+} from "./index";
+
+export function getChartOrigin(origin, contextWidth, contextHeight) {
+ const originCoordinates = typeof origin === "function"
+ ? origin(contextWidth, contextHeight)
+ : origin;
+ return originCoordinates;
+}
+
+export function getDimensions({ width, height }, chartProps) {
+
+ const chartHeight = (chartProps.height || height);
+
+ return {
+ availableHeight: height,
+ width,
+ height: chartHeight,
+ };
+}
+
+function values(func) {
+ return (d) => {
+ const obj = func(d);
+ if (isObject(obj)) {
+ return mapObject(obj);
+ }
+ return obj;
+ };
+}
+
+function isArraySize2AndNumber(yExtentsProp) {
+ if (Array.isArray(yExtentsProp) && yExtentsProp.length === 2) {
+ const [a, b] = yExtentsProp;
+ return (typeof a === "number" && typeof b === "number");
+ }
+ return false;
+}
+
+export function getNewChartConfig(innerDimension, children, existingChartConfig = []) {
+ return React.Children.map(children, (each) => {
+ if (each && each.type.toString() === Chart.toString()) {
+ const chartProps = {
+ ...Chart.defaultProps,
+ ...each.props,
+ };
+ const {
+ id,
+ origin,
+ padding,
+ yExtents: yExtentsProp,
+ yScale: yScaleProp,
+ flipYScale,
+ yExtentsCalculator,
+ } = chartProps;
+
+ const yScale = yScaleProp.copy();
+ const {
+ width, height, availableHeight,
+ } = getDimensions(innerDimension, chartProps);
+
+ const { yPan } = chartProps;
+ let { yPanEnabled } = chartProps;
+ const yExtents = isDefined(yExtentsProp)
+ ? (Array.isArray(yExtentsProp) ? yExtentsProp : [yExtentsProp]).map(functor)
+ : undefined;
+
+ const prevChartConfig = find(existingChartConfig, (d) => d.id === id);
+
+ if (isArraySize2AndNumber(yExtentsProp)) {
+ if (
+ isDefined(prevChartConfig)
+ && prevChartConfig.yPan
+ && prevChartConfig.yPanEnabled
+ && yPan
+ && yPanEnabled
+ && shallowEqual(prevChartConfig.originalYExtentsProp, yExtentsProp)
+ ) {
+ // console.log(prevChartConfig.originalYExtentsProp, yExtentsProp)
+ // console.log(prevChartConfig.yScale.domain())
+ yScale.domain(prevChartConfig.yScale.domain());
+ } else {
+ const [a, b] = yExtentsProp;
+ yScale.domain([a, b]);
+ }
+ } else if (isDefined(prevChartConfig) && prevChartConfig.yPanEnabled) {
+ if (isArraySize2AndNumber(prevChartConfig.originalYExtentsProp)) {
+ // do nothing
+ } else {
+ yScale.domain(prevChartConfig.yScale.domain());
+ yPanEnabled = true;
+ }
+ }
+
+ return {
+ id,
+ origin: functor(origin)(width, availableHeight),
+ padding,
+ originalYExtentsProp: yExtentsProp,
+ yExtents,
+ yExtentsCalculator,
+ flipYScale,
+ // yScale: setRange(yScale.copy(), height, padding, flipYScale),
+ yScale,
+ yPan,
+ yPanEnabled,
+ // mouseCoordinates,
+ width,
+ height,
+ };
+ }
+ return undefined;
+ }).filter((each) => isDefined(each));
+}
+export function getCurrentCharts(chartConfig, mouseXY) {
+ const currentCharts = chartConfig.filter((eachConfig) => {
+ const top = eachConfig.origin[1];
+ const bottom = top + eachConfig.height;
+ return (mouseXY[1] > top && mouseXY[1] < bottom);
+ }).map((config) => config.id);
+
+ return currentCharts;
+}
+
+function setRange(scale, height, padding, flipYScale) {
+ if (scale.rangeRoundPoints || isNotDefined(scale.invert)) {
+ if (isNaN(padding)) { throw new Error("padding has to be a number for ordinal scale"); }
+ if (scale.rangeRoundPoints) { scale.rangeRoundPoints(flipYScale ? [0, height] : [height, 0], padding); }
+ if (scale.rangeRound) { scale.range(flipYScale ? [0, height] : [height, 0]).padding(padding); }
+ } else {
+ const { top, bottom } = isNaN(padding)
+ ? padding
+ : { top: padding, bottom: padding };
+
+ scale.range(flipYScale ? [top, height - bottom] : [height - bottom, top]);
+ }
+ return scale;
+}
+
+function yDomainFromYExtents(yExtents, yScale, plotData) {
+ const yValues = yExtents.map((eachExtent) =>
+ plotData.map(values(eachExtent)));
+
+ const allYValues = flattenDeep(yValues);
+ // console.log(allYValues)
+ const realYDomain = (yScale.invert)
+ ? extent(allYValues)
+ : set(allYValues).values();
+
+ return realYDomain;
+}
+
+export function getChartConfigWithUpdatedYScales(
+ chartConfig,
+ { plotData, xAccessor, displayXAccessor, fullData },
+ xDomain,
+ dy,
+ chartsToPan,
+) {
+ const yDomains = chartConfig
+ .map(({ yExtentsCalculator, yExtents, yScale }) => {
+
+ const realYDomain = isDefined(yExtentsCalculator)
+ ? yExtentsCalculator({ plotData, xDomain, xAccessor, displayXAccessor, fullData })
+ : yDomainFromYExtents(yExtents, yScale, plotData);
+
+ // console.log("yScale.domain() ->", yScale.domain())
+
+ const yDomainDY = isDefined(dy)
+ ? yScale.range().map((each) => each - dy).map(yScale.invert)
+ : yScale.domain();
+ return {
+ realYDomain,
+ yDomainDY,
+ prevYDomain: yScale.domain(),
+ };
+ });
+
+ const combine = zipper()
+ .combine((config, { realYDomain, yDomainDY, prevYDomain }) => {
+ const { id, padding, height, yScale, yPan, flipYScale, yPanEnabled = false } = config;
+
+ const another = isDefined(chartsToPan)
+ ? chartsToPan.indexOf(id) > -1
+ : true;
+ const domain = yPan && yPanEnabled
+ ? another ? yDomainDY : prevYDomain
+ : realYDomain;
+
+ // console.log(id, yPan, yPanEnabled, another);
+ // console.log(domain, realYDomain, prevYDomain);
+ const newYScale = setRange(
+ yScale.copy().domain(domain), height, padding, flipYScale,
+ );
+ return {
+ ...config,
+ yScale: newYScale,
+ realYDomain,
+ };
+ // return { ...config, yScale: yScale.copy().domain(domain).range([height - padding, padding]) };
+ });
+
+ // @ts-ignore
+ const updatedChartConfig = combine(chartConfig, yDomains);
+ // console.error(yDomains, dy, chartsToPan, updatedChartConfig.map(d => d.yScale.domain()));
+ // console.log(updatedChartConfig.map(d => ({ id: d.id, domain: d.yScale.domain() })))
+
+ return updatedChartConfig;
+}
+
+export function getCurrentItem(xScale, xAccessor, mouseXY, plotData) {
+ let xValue;
+ let item;
+ if (xScale.invert) {
+ xValue = xScale.invert(mouseXY[0]);
+ item = getClosestItem(plotData, xValue, xAccessor);
+ } else {
+ const dr = xScale
+ .range()
+ .map((d, idx) => ({ x: Math.abs(d - mouseXY[0]), idx }))
+ .reduce((a, b) => a.x < b.x ? a : b);
+
+ item = isDefined(dr) ? plotData[dr.idx] : plotData[0];
+ }
+ return item;
+}
+
+export function getXValue(xScale, xAccessor, mouseXY, plotData) {
+
+ let xValue;
+ let item;
+ if (xScale.invert) {
+ xValue = xScale.invert(mouseXY[0]);
+ if (xValue > xAccessor(last(plotData)) && xScale.value) {
+ return Math.round(xValue);
+ } else {
+ item = getClosestItem(plotData, xValue, xAccessor);
+ }
+ } else {
+ const dr = xScale
+ .range()
+ .map((d, idx) => ({ x: Math.abs(d - mouseXY[0]), idx }))
+ .reduce((a, b) => a.x < b.x ? a : b);
+
+ item = isDefined(dr) ? plotData[dr.idx] : plotData[0];
+ }
+ return xAccessor(item);
+}
diff --git a/packages/react-financial-charts/src/utils/PureComponent.tsx b/packages/react-financial-charts/src/utils/PureComponent.tsx
new file mode 100644
index 000000000..65546f1de
--- /dev/null
+++ b/packages/react-financial-charts/src/utils/PureComponent.tsx
@@ -0,0 +1,10 @@
+import * as React from "react";
+import shallowEqual from "./shallowEqual";
+
+export class PureComponent extends React.Component {
+ public shouldComponentUpdate(nextProps, nextState, nextContext) {
+ return !shallowEqual(this.props, nextProps)
+ || !shallowEqual(this.state, nextState)
+ || !shallowEqual(this.context, nextContext);
+ }
+}
diff --git a/packages/react-financial-charts/src/utils/accumulatingWindow.ts b/packages/react-financial-charts/src/utils/accumulatingWindow.ts
new file mode 100644
index 000000000..a618f66ad
--- /dev/null
+++ b/packages/react-financial-charts/src/utils/accumulatingWindow.ts
@@ -0,0 +1,104 @@
+/*
+
+Taken from https://github.com/ScottLogic/d3fc/blob/master/src/indicator/algorithm/calculator/slidingWindow.js
+
+The MIT License (MIT)
+
+Copyright (c) 2014-2015 Scott Logic Ltd.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+*/
+
+import identity from "./identity";
+import { functor } from "./index";
+import noop from "./noop";
+
+export default function () {
+
+ let accumulateTill = functor(false);
+ let accumulator = noop;
+ let value = identity;
+ let discardTillStart = false;
+ let discardTillEnd = false;
+
+ const accumulatingWindow = function (data) {
+ let accumulatedWindow: any[] | undefined = discardTillStart ? undefined : [];
+ const response: any[] = [];
+ let accumulatorIdx = 0;
+ let i = 0;
+ for (i = 0; i < data.length; i++) {
+ const d = data[i];
+ if (accumulateTill(d, i, (accumulatedWindow || []))) {
+ if (accumulatedWindow && accumulatedWindow.length > 0) {
+ // @ts-ignore
+ response.push(accumulator(accumulatedWindow, i, accumulatorIdx++));
+ }
+
+ accumulatedWindow = [value(d)];
+ } else if (accumulatedWindow) {
+ accumulatedWindow.push(value(d));
+ }
+ }
+
+ if (!discardTillEnd) {
+ // @ts-ignore
+ response.push(accumulator(accumulatedWindow, i, accumulatorIdx));
+ }
+
+ return response;
+ };
+
+ accumulatingWindow.accumulateTill = function (x) {
+ if (!arguments.length) {
+ return accumulateTill;
+ }
+ accumulateTill = functor(x);
+ return accumulatingWindow;
+ };
+ accumulatingWindow.accumulator = function (x) {
+ if (!arguments.length) {
+ return accumulator;
+ }
+ accumulator = x;
+ return accumulatingWindow;
+ };
+ accumulatingWindow.value = function (x) {
+ if (!arguments.length) {
+ return value;
+ }
+ value = x;
+ return accumulatingWindow;
+ };
+ accumulatingWindow.discardTillStart = function (x) {
+ if (!arguments.length) {
+ return discardTillStart;
+ }
+ discardTillStart = x;
+ return accumulatingWindow;
+ };
+ accumulatingWindow.discardTillEnd = function (x) {
+ if (!arguments.length) {
+ return discardTillEnd;
+ }
+ discardTillEnd = x;
+ return accumulatingWindow;
+ };
+ return accumulatingWindow;
+}
diff --git a/packages/react-financial-charts/src/utils/barWidth.ts b/packages/react-financial-charts/src/utils/barWidth.ts
new file mode 100644
index 000000000..d6879bd40
--- /dev/null
+++ b/packages/react-financial-charts/src/utils/barWidth.ts
@@ -0,0 +1,40 @@
+import { head } from ".";
+
+/**
+ * Bar width is based on the amount of items in the plot data and the distance between the first and last of those
+ * items.
+ * @param props the props passed to the series.
+ * @param moreProps an object holding the xScale, xAccessor and plotData.
+ * @return {number} the bar width.
+ */
+export const plotDataLengthBarWidth = (props: { widthRatio: number }, moreProps: { xScale: any; }): number => {
+ const { widthRatio } = props;
+ const { xScale } = moreProps;
+
+ const [l, r] = xScale.range();
+
+ const totalWidth = Math.abs(r - l);
+ if (xScale.invert != null) {
+ const [dl, dr] = xScale.domain();
+ const width = totalWidth / Math.abs(dl - dr);
+ return width * widthRatio;
+ } else {
+ const width = totalWidth / xScale.domain().length;
+ return width * widthRatio;
+ }
+};
+
+/**
+ * Generates a width function that calculates the bar width based on the given time interval.
+ * @param interval a d3-time time interval.
+ * @return {Function} the width function.
+ */
+export const timeIntervalBarWidth = (interval) => {
+ return function (props: { widthRatio: number }, moreProps: { xScale: any; xAccessor: any; plotData: any }) {
+ const { widthRatio } = props;
+ const { xScale, xAccessor, plotData } = moreProps;
+
+ const first = xAccessor(head(plotData));
+ return Math.abs(xScale(interval.offset(first, 1)) - xScale(first)) * widthRatio;
+ };
+};
diff --git a/packages/react-financial-charts/src/utils/identity.ts b/packages/react-financial-charts/src/utils/identity.ts
new file mode 100644
index 000000000..d9aabe12a
--- /dev/null
+++ b/packages/react-financial-charts/src/utils/identity.ts
@@ -0,0 +1 @@
+export default (d) => d;
diff --git a/packages/react-financial-charts/src/utils/index.ts b/packages/react-financial-charts/src/utils/index.ts
new file mode 100644
index 000000000..0e8db023f
--- /dev/null
+++ b/packages/react-financial-charts/src/utils/index.ts
@@ -0,0 +1,311 @@
+import { bisector } from "d3-array";
+import { scaleOrdinal, schemeCategory10 } from "d3-scale";
+import identity from "./identity";
+import noop from "./noop";
+
+export { default as rebind } from "./rebind";
+export { default as zipper } from "./zipper";
+export { default as merge } from "./merge";
+export { default as slidingWindow } from "./slidingWindow";
+export { default as identity } from "./identity";
+export { default as noop } from "./noop";
+export { default as shallowEqual } from "./shallowEqual";
+export { default as mappedSlidingWindow } from "./mappedSlidingWindow";
+export { default as accumulatingWindow } from "./accumulatingWindow";
+
+export * from "./barWidth";
+export * from "./strokeDasharray";
+
+export function getLogger(prefix) {
+ let logger = noop;
+ if (process.env.NODE_ENV !== "production") {
+ logger = require("debug")("react-financial-charts:" + prefix);
+ }
+ return logger;
+}
+
+export function sign(x) {
+ // @ts-ignore
+ return (x > 0) - (x < 0);
+}
+
+export const yes = () => true;
+
+export function path(loc = []) {
+ const key = Array.isArray(loc) ? loc : [loc];
+ const length = key.length;
+
+ return function (obj, defaultValue?) {
+ if (length === 0) { return isDefined(obj) ? obj : defaultValue; }
+
+ let index = 0;
+ while (obj != null && index < length) {
+ obj = obj[key[index++]];
+ }
+ return (index === length) ? obj : defaultValue;
+ };
+}
+
+export function functor(v) {
+ return typeof v === "function" ? v : () => v;
+}
+
+export function createVerticalLinearGradient(stops) {
+ return function (moreProps, ctx) {
+ const { chartConfig: { height } } = moreProps;
+
+ const grd = ctx.createLinearGradient(0, height, 0, 0);
+ stops.forEach((each) => {
+ grd.addColorStop(each.stop, each.color);
+ });
+
+ return grd;
+ };
+}
+
+export function getClosestItemIndexes2(array, value, accessor) {
+ let left = bisector(accessor).left(array, value);
+ left = Math.max(left - 1, 0);
+ let right = Math.min(left + 1, array.length - 1);
+
+ const item = accessor(array[left]);
+ if (item >= value && item <= value) { right = left; }
+
+ return { left, right };
+}
+
+export function getClosestValue(inputValue, currentValue) {
+ const values = isArray(inputValue) ? inputValue : [inputValue];
+
+ const diff = values
+ .map((each) => each - currentValue)
+ .reduce((diff1, diff2) => Math.abs(diff1) < Math.abs(diff2) ? diff1 : diff2);
+ return currentValue + diff;
+}
+
+// @ts-ignore
+export function find(list, predicate, context = this) {
+ for (let i = 0; i < list.length; ++i) {
+ if (predicate.call(context, list[i], i, list)) {
+ return list[i];
+ }
+ }
+ return undefined;
+}
+
+export function d3Window(node) {
+ const d3win = node
+ && (node.ownerDocument && node.ownerDocument.defaultView
+ || node.document && node
+ || node.defaultView);
+ return d3win;
+}
+
+export const MOUSEENTER = "mouseenter.interaction";
+export const MOUSELEAVE = "mouseleave.interaction";
+export const MOUSEMOVE = "mousemove.pan";
+export const MOUSEUP = "mouseup.pan";
+export const TOUCHMOVE = "touchmove.pan";
+export const TOUCHEND = "touchend.pan touchcancel.pan";
+
+export function getTouchProps(touch) {
+ if (!touch) { return {}; }
+ return {
+ pageX: touch.pageX,
+ pageY: touch.pageY,
+ clientX: touch.clientX,
+ clientY: touch.clientY,
+ };
+}
+
+export function getClosestItemIndexes(array, value, accessor) {
+ let lo = 0;
+ let hi = array.length - 1;
+ while (hi - lo > 1) {
+ const mid = Math.round((lo + hi) / 2);
+ if (accessor(array[mid]) <= value) {
+ lo = mid;
+ } else {
+ hi = mid;
+ }
+ }
+ // for Date object === does not work, so using the <= in combination with >=
+ // the same code works for both dates and numbers
+ if (accessor(array[lo]).valueOf() === value.valueOf()) { hi = lo; }
+ if (accessor(array[hi]).valueOf() === value.valueOf()) { lo = hi; }
+
+ if (accessor(array[lo]) < value && accessor(array[hi]) < value) { lo = hi; }
+ if (accessor(array[lo]) > value && accessor(array[hi]) > value) { hi = lo; }
+
+ return { left: lo, right: hi };
+}
+
+export function getClosestItem(array, value, accessor) {
+ const { left, right } = getClosestItemIndexes(array, value, accessor);
+
+ if (left === right) {
+ return array[left];
+ }
+
+ const closest = (Math.abs(accessor(array[left]) - value) < Math.abs(accessor(array[right]) - value))
+ ? array[left]
+ : array[right];
+
+ return closest;
+}
+
+export const overlayColors = scaleOrdinal(schemeCategory10);
+
+export function head(array, accessor?) {
+ if (accessor && array) {
+ let value;
+ // tslint:disable-next-line: prefer-for-of
+ for (let i = 0; i < array.length; i++) {
+ value = array[i];
+ if (isDefined(accessor(value))) {
+ return value;
+ }
+ }
+ return undefined;
+ }
+ return array ? array[0] : undefined;
+}
+
+export function tail(array, accessor) {
+ if (accessor && array) {
+ return array.map(accessor).slice(1);
+ }
+ return array ? array.slice(1) : undefined;
+}
+
+export const first = head;
+
+export function last(array, accessor?) {
+ if (accessor && array) {
+ let value;
+ for (let i = array.length - 1; i >= 0; i--) {
+ value = array[i];
+ if (isDefined(accessor(value))) { return value; }
+ }
+ return undefined;
+ }
+ const length = array ? array.length : 0;
+ return length ? array[length - 1] : undefined;
+}
+
+export const isDefined = (d: T) => {
+ return d !== null && d !== undefined;
+};
+
+export function isNotDefined(d) {
+ return !isDefined(d);
+}
+
+export function isObject(d) {
+ return isDefined(d) && typeof d === "object" && !Array.isArray(d);
+}
+
+export const isArray = Array.isArray;
+
+export function touchPosition(touch, e) {
+ const container = e.target;
+ const rect = container.getBoundingClientRect();
+ const x = touch.clientX - rect.left - container.clientLeft;
+ const y = touch.clientY - rect.top - container.clientTop;
+ const xy = [Math.round(x), Math.round(y)];
+ return xy;
+}
+
+export function mousePosition(e: React.MouseEvent, defaultRect?) {
+ const container = e.currentTarget;
+ const rect = defaultRect || container.getBoundingClientRect();
+ const x = e.clientX - rect.left - container.clientLeft;
+ const y = e.clientY - rect.top - container.clientTop;
+ const xy = [Math.round(x), Math.round(y)];
+ return xy;
+}
+
+export function clearCanvas(canvasList, ratio) {
+ canvasList.forEach((each) => {
+ each.setTransform(1, 0, 0, 1, 0, 0);
+ each.clearRect(-1, -1, each.canvas.width + 2, each.canvas.height + 2);
+ each.scale(ratio, ratio);
+ });
+}
+
+export function capitalizeFirst(str) {
+ return str.charAt(0).toUpperCase() + str.substring(1);
+}
+
+export function hexToRGBA(inputHex, opacity) {
+ const hex = inputHex.replace("#", "");
+ if (inputHex.indexOf("#") > -1 && (hex.length === 3 || hex.length === 6)) {
+
+ const multiplier = (hex.length === 3) ? 1 : 2;
+
+ const r = parseInt(hex.substring(0, 1 * multiplier), 16);
+ const g = parseInt(hex.substring(1 * multiplier, 2 * multiplier), 16);
+ const b = parseInt(hex.substring(2 * multiplier, 3 * multiplier), 16);
+
+ const result = `rgba(${r}, ${g}, ${b}, ${opacity})`;
+
+ return result;
+ }
+ return inputHex;
+}
+
+export function toObject(array, iteratee = identity) {
+ return array.reduce((returnObj, a) => {
+ const [key, value] = iteratee(a);
+ return {
+ ...returnObj,
+ [key]: value,
+ };
+ }, {});
+}
+
+// copied from https://github.com/lodash/lodash/blob/master/mapValue.js
+export function mapValue(object, iteratee) {
+ object = Object(object);
+ // eslint-disable-next-line prefer-const
+ const result = {};
+
+ Object.keys(object).forEach((key) => {
+ const mappedValue = iteratee(object[key], key, object);
+
+ if (isDefined(mappedValue)) {
+ result[key] = mappedValue;
+ }
+ });
+ return result;
+}
+
+// copied from https://github.com/lodash/lodash/blob/master/mapObject.js
+export function mapObject(object = {}, iteratee = identity) {
+ const props = Object.keys(object);
+
+ // eslint-disable-next-line prefer-const
+ const result = new Array(props.length);
+
+ props.forEach((key, index) => {
+ // @ts-ignore
+ result[index] = iteratee(object[key], key, object);
+ });
+ return result;
+}
+
+export function replaceAtIndex(array, index, value) {
+ if (isDefined(array) && array.length > index) {
+ return array.slice(0, index)
+ .concat(value)
+ .concat(array.slice(index + 1));
+ }
+ return array;
+}
+
+// copied from https://github.com/lodash/lodash/blob/master/forOwn.js
+export function forOwn(obj, iteratee) {
+ const object = Object(obj);
+ Object.keys(object)
+ .forEach((key) => iteratee(object[key], key, object));
+}
diff --git a/packages/react-financial-charts/src/utils/mappedSlidingWindow.ts b/packages/react-financial-charts/src/utils/mappedSlidingWindow.ts
new file mode 100644
index 000000000..2438baf9e
--- /dev/null
+++ b/packages/react-financial-charts/src/utils/mappedSlidingWindow.ts
@@ -0,0 +1,82 @@
+
+import identity from "./identity";
+import { functor } from "./index";
+import noop from "./noop";
+
+export default function () {
+
+ let undefinedValue;
+ let windowSize = 10;
+ let accumulator = noop;
+ let source = identity;
+ let skipInitial = 0;
+
+ const mappedSlidingWindow = function (data) {
+ // @ts-ignore
+ const size = functor(windowSize).apply(this, arguments);
+ const windowData: any[] = [];
+ let accumulatorIdx = 0;
+ const undef = functor(undefinedValue);
+ const result: any[] = [];
+ data.forEach(function (d, i) {
+ let mapped;
+ if (i < (skipInitial + size - 1)) {
+ mapped = undef(d, i);
+ result.push(mapped);
+ windowData.push(mapped);
+ return;
+ }
+ if (i >= (skipInitial + size)) {
+ windowData.shift();
+ }
+ // @ts-ignore
+ windowData.push(source(d, i));
+
+ // @ts-ignore
+ mapped = accumulator(windowData, i, accumulatorIdx++);
+ result.push(mapped);
+ windowData.pop();
+ windowData.push(mapped);
+ return;
+ });
+ return result;
+ };
+
+ mappedSlidingWindow.undefinedValue = function (x) {
+ if (!arguments.length) {
+ return undefinedValue;
+ }
+ undefinedValue = x;
+ return mappedSlidingWindow;
+ };
+ mappedSlidingWindow.windowSize = function (x) {
+ if (!arguments.length) {
+ return windowSize;
+ }
+ windowSize = x;
+ return mappedSlidingWindow;
+ };
+ mappedSlidingWindow.accumulator = function (x) {
+ if (!arguments.length) {
+ return accumulator;
+ }
+ accumulator = x;
+ return mappedSlidingWindow;
+ };
+ mappedSlidingWindow.skipInitial = function (x) {
+ if (!arguments.length) {
+ return skipInitial;
+ }
+ skipInitial = x;
+ return mappedSlidingWindow;
+ };
+ mappedSlidingWindow.source = function (x) {
+ if (!arguments.length) {
+ return source;
+ }
+ source = x;
+ return mappedSlidingWindow;
+ };
+
+ return mappedSlidingWindow;
+}
diff --git a/packages/react-financial-charts/src/utils/merge.ts b/packages/react-financial-charts/src/utils/merge.ts
new file mode 100644
index 000000000..ceea13a84
--- /dev/null
+++ b/packages/react-financial-charts/src/utils/merge.ts
@@ -0,0 +1,79 @@
+/*
+https://github.com/ScottLogic/d3fc/blob/master/src/indicator/algorithm/merge.js
+
+The MIT License (MIT)
+
+Copyright (c) 2014-2015 Scott Logic Ltd.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+*/
+
+import identity from "./identity";
+import noop from "./noop";
+import zipper from "./zipper";
+
+import { isNotDefined } from "./index";
+
+// applies an algorithm to an array, merging the result back into
+// the source array using the given merge function.
+export default function () {
+
+ let algorithm = identity;
+ let skipUndefined = true;
+ let merge = noop;
+
+ function mergeCompute(data) {
+ const zip = zipper()
+ .combine((datum, indicator) => {
+ const result = (skipUndefined && isNotDefined(indicator))
+ ? datum
+ // @ts-ignore
+ : merge(datum, indicator);
+ return isNotDefined(result) ? datum : result;
+ });
+
+ // @ts-ignore
+ return zip(data, algorithm(data));
+ }
+
+ mergeCompute.algorithm = function (x) {
+ if (!arguments.length) {
+ return algorithm;
+ }
+ algorithm = x;
+ return mergeCompute;
+ };
+
+ mergeCompute.merge = function (x) {
+ if (!arguments.length) {
+ return merge;
+ }
+ merge = x;
+ return mergeCompute;
+ };
+ mergeCompute.skipUndefined = function (x) {
+ if (!arguments.length) {
+ return skipUndefined;
+ }
+ skipUndefined = x;
+ return mergeCompute;
+ };
+
+ return mergeCompute;
+}
diff --git a/packages/react-financial-charts/src/utils/noop.ts b/packages/react-financial-charts/src/utils/noop.ts
new file mode 100644
index 000000000..c39d398e9
--- /dev/null
+++ b/packages/react-financial-charts/src/utils/noop.ts
@@ -0,0 +1,2 @@
+// tslint:disable-next-line: no-empty
+export default () => { };
diff --git a/packages/react-financial-charts/src/utils/rebind.ts b/packages/react-financial-charts/src/utils/rebind.ts
new file mode 100644
index 000000000..8f9cacbb3
--- /dev/null
+++ b/packages/react-financial-charts/src/utils/rebind.ts
@@ -0,0 +1,19 @@
+// copied from https://github.com/d3fc/d3fc-rebind/blob/master/src/rebind.js
+
+function createReboundMethod(target, source, name) {
+ const method = source[name];
+ if (typeof method !== "function") {
+ throw new Error(`Attempt to rebind ${name} which isn't a function on the source object`);
+ }
+ return (...args) => {
+ const value = method.apply(source, args);
+ return value === source ? target : value;
+ };
+}
+
+export default function rebind(target, source, ...names) {
+ for (const name of names) {
+ target[name] = createReboundMethod(target, source, name);
+ }
+ return target;
+}
diff --git a/packages/react-financial-charts/src/utils/shallowEqual.ts b/packages/react-financial-charts/src/utils/shallowEqual.ts
new file mode 100644
index 000000000..871490324
--- /dev/null
+++ b/packages/react-financial-charts/src/utils/shallowEqual.ts
@@ -0,0 +1,58 @@
+// https://github.com/jonschlinkert/is-equal-shallow/
+
+/*
+The MIT License (MIT)
+
+Copyright (c) 2015, Jon Schlinkert.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+*/
+
+function isDate(date) {
+ return Object.prototype.toString.call(date) === "[object Date]";
+}
+
+function isEqual(val1, val2) {
+ return (isDate(val1) && isDate(val2))
+ ? val1.getTime() === val2.getTime()
+ : val1 === val2;
+}
+
+export default function shallowEqual(a, b) {
+ if (!a && !b) { return true; }
+ if (!a && b || a && !b) { return false; }
+
+ let numKeysA = 0;
+ let numKeysB = 0;
+ let key;
+
+ // tslint:disable: forin
+ for (key in b) {
+ numKeysB++;
+ if ((b.hasOwnProperty(key) && !a.hasOwnProperty(key)) || !isEqual(a[key], b[key])) {
+ return false;
+ }
+ }
+
+ for (key in a) {
+ numKeysA++;
+ }
+
+ return numKeysA === numKeysB;
+}
diff --git a/packages/react-financial-charts/src/utils/slidingWindow.ts b/packages/react-financial-charts/src/utils/slidingWindow.ts
new file mode 100644
index 000000000..17d323336
--- /dev/null
+++ b/packages/react-financial-charts/src/utils/slidingWindow.ts
@@ -0,0 +1,117 @@
+/*
+
+Taken from https://github.com/ScottLogic/d3fc/blob/master/src/indicator/algorithm/calculator/slidingWindow.js
+
+The MIT License (MIT)
+
+Copyright (c) 2014-2015 Scott Logic Ltd.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+*/
+
+import { functor, path } from "./index";
+import noop from "./noop";
+
+export default function () {
+
+ let undefinedValue;
+ let windowSize = 10;
+ let accumulator = noop;
+ let sourcePath;
+ let source;
+ let skipInitial = 0;
+ let misc;
+
+ const slidingWindow = function (data) {
+ const sourceFunction = source || path(sourcePath);
+
+ // @ts-ignore
+ const size = functor(windowSize).apply(this, arguments);
+ const windowData = data.slice(skipInitial, size + skipInitial).map(sourceFunction);
+ let accumulatorIdx = 0;
+ const undef = functor(undefinedValue);
+ return data.map(function (d, i) {
+ // console.log(d, i);
+ if (i < (skipInitial + size - 1)) {
+ return undef(sourceFunction(d), i, misc);
+ }
+ if (i >= (skipInitial + size)) {
+ // Treat windowData as FIFO rolling buffer
+ windowData.shift();
+ windowData.push(sourceFunction(d, i));
+ }
+
+ // @ts-ignore
+ return accumulator(windowData, i, accumulatorIdx++, misc);
+ });
+ };
+
+ slidingWindow.undefinedValue = function (...args) {
+ if (!args.length) {
+ return undefinedValue;
+ }
+ undefinedValue = args;
+ return slidingWindow;
+ };
+ slidingWindow.windowSize = function (x) {
+ if (!arguments.length) {
+ return windowSize;
+ }
+ windowSize = x;
+ return slidingWindow;
+ };
+ slidingWindow.misc = function (x) {
+ if (!arguments.length) {
+ return misc;
+ }
+ misc = x;
+ return slidingWindow;
+ };
+ slidingWindow.accumulator = function (x) {
+ if (!arguments.length) {
+ return accumulator;
+ }
+ accumulator = x;
+ return slidingWindow;
+ };
+ slidingWindow.skipInitial = function (x) {
+ if (!arguments.length) {
+ return skipInitial;
+ }
+ skipInitial = x;
+ return slidingWindow;
+ };
+ slidingWindow.sourcePath = function (x) {
+ if (!arguments.length) {
+ return sourcePath;
+ }
+ sourcePath = x;
+ return slidingWindow;
+ };
+ slidingWindow.source = function (x) {
+ if (!arguments.length) {
+ return source;
+ }
+ source = x;
+ return slidingWindow;
+ };
+
+ return slidingWindow;
+}
diff --git a/packages/react-financial-charts/src/utils/strokeDasharray.ts b/packages/react-financial-charts/src/utils/strokeDasharray.ts
new file mode 100644
index 000000000..e770a6d7f
--- /dev/null
+++ b/packages/react-financial-charts/src/utils/strokeDasharray.ts
@@ -0,0 +1,51 @@
+export type strokeDashTypes =
+ "Solid" |
+ "ShortDash" |
+ "ShortDash2" |
+ "ShortDot" |
+ "ShortDashDot" |
+ "ShortDashDotDot" |
+ "Dot" |
+ "Dash" |
+ "LongDash" |
+ "DashDot" |
+ "LongDashDot" |
+ "LongDashDotDot";
+
+export function getStrokeDasharrayCanvas(type) {
+ const a = getStrokeDasharray(type).split(",");
+
+ if (a.length === 1) { return []; }
+
+ return a.map((d) => Number(d));
+
+}
+export const getStrokeDasharray = (type) => {
+ switch (type) {
+ default:
+ case "Solid":
+ return "none";
+ case "ShortDash":
+ return "6, 2";
+ case "ShortDash2":
+ return "6, 3";
+ case "ShortDot":
+ return "2, 2";
+ case "ShortDashDot":
+ return "6, 2, 2, 2";
+ case "ShortDashDotDot":
+ return "6, 2, 2, 2, 2, 2";
+ case "Dot":
+ return "2, 6";
+ case "Dash":
+ return "8, 6";
+ case "LongDash":
+ return "16, 6";
+ case "DashDot":
+ return "8, 6, 2, 6";
+ case "LongDashDot":
+ return "16, 6, 2, 6";
+ case "LongDashDotDot":
+ return "16, 6, 2, 6, 2, 6";
+ }
+};
diff --git a/packages/react-financial-charts/src/utils/zipper.ts b/packages/react-financial-charts/src/utils/zipper.ts
new file mode 100644
index 000000000..8d1d7e569
--- /dev/null
+++ b/packages/react-financial-charts/src/utils/zipper.ts
@@ -0,0 +1,39 @@
+/* an extension to d3.zip so we call a function instead of an array */
+
+import { min } from "d3-array";
+
+import identity from "./identity";
+
+export default function zipper() {
+ let combine = identity;
+
+ function zip() {
+ const n = arguments.length;
+ if (!n) { return []; }
+ const m = min(arguments, d3_zipLength);
+
+ let i;
+ const zips = new Array(m);
+ for (i = -1; ++i < m;) {
+ // tslint:disable-next-line: no-shadowed-variable
+ for (let j = -1, zip = zips[i] = new Array(n); ++j < n;) {
+ zip[j] = arguments[j][i];
+ }
+
+ // @ts-ignore
+ zips[i] = combine.apply(this, zips[i]);
+ }
+ return zips;
+ }
+ function d3_zipLength(d) {
+ return d.length;
+ }
+ zip.combine = function (x) {
+ if (!arguments.length) {
+ return combine;
+ }
+ combine = x;
+ return zip;
+ };
+ return zip;
+}
diff --git a/packages/react-financial-charts/src/utils/zoomBehavior.ts b/packages/react-financial-charts/src/utils/zoomBehavior.ts
new file mode 100644
index 000000000..6ec77a5f1
--- /dev/null
+++ b/packages/react-financial-charts/src/utils/zoomBehavior.ts
@@ -0,0 +1,40 @@
+import {
+ getCurrentItem,
+} from "./ChartDataUtil";
+
+import {
+ last,
+} from "./index";
+
+export function mouseBasedZoomAnchor({
+ xScale,
+ xAccessor,
+ mouseXY,
+ plotData,
+ fullData,
+}) {
+ const currentItem = getCurrentItem(xScale, xAccessor, mouseXY, plotData);
+ return xAccessor(currentItem);
+}
+
+export function lastVisibleItemBasedZoomAnchor({
+ xScale,
+ xAccessor,
+ mouseXY,
+ plotData,
+ fullData,
+}) {
+ const lastItem = last(plotData);
+ return xAccessor(lastItem);
+}
+
+export function rightDomainBasedZoomAnchor({
+ xScale,
+ xAccessor,
+ mouseXY,
+ plotData,
+ fullData,
+}) {
+ const [, end] = xScale.domain();
+ return end;
+}
diff --git a/packages/react-financial-charts/tsconfig.json b/packages/react-financial-charts/tsconfig.json
new file mode 100644
index 000000000..ba5a25607
--- /dev/null
+++ b/packages/react-financial-charts/tsconfig.json
@@ -0,0 +1,25 @@
+{
+ "compilerOptions": {
+ "declaration": true,
+ "experimentalDecorators": true,
+ "forceConsistentCasingInFileNames": true,
+ "jsx": "react",
+ "module": "esnext",
+ "moduleResolution": "node",
+ "noImplicitAny": false,
+ "noImplicitThis": true,
+ "noUnusedLocals": true,
+ "outDir": "lib",
+ "removeComments": true,
+ "sourceMap": true,
+ "strict": true,
+ "target": "es2017"
+ },
+ "include": [
+ "src"
+ ],
+ "exclude": [
+ "lib",
+ "**/__tests__/**"
+ ]
+}
diff --git a/packages/react-financial-charts/tslint.yaml b/packages/react-financial-charts/tslint.yaml
new file mode 100644
index 000000000..7325d2a01
--- /dev/null
+++ b/packages/react-financial-charts/tslint.yaml
@@ -0,0 +1,10 @@
+---
+extends: "tslint:recommended"
+rules:
+ completed-docs: false
+ interface-name: false
+ object-literal-sort-keys: false
+ only-arrow-functions: false
+ space-before-function-paren: false
+ max-line-length:
+ options: [140]