Пример использования React Stockcharts для рисования графиков и графических элементов

import { rebind, merge } from "../utils";import { mfi } from "../calculator";import baseIndicator from "./baseIndicator";const ALGORITHM_TYPE = "MFI";export default function() {const base = baseIndicator().type(ALGORITHM_TYPE).accessor(d => d.mfi);const underlyingAlgorithm = mfi();const mergedAlgorithm = merge().algorithm(underlyingAlgorithm).merge((datum, indicator) => { datum.mfi = indicator; });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;}

import { mean } from "d3-array";import { slidingWindow } from "../utils";import { MFI as defaultOptions } from "./defaultOptionsForComputation";export default function() {let options = defaultOptions;function calculator(data) {const { windowSize } = options;let typical_price, typical_price_privious, money_flow, flow_ratio, flow_index, val_positive_minus, val_negative_minus, money_flow_privious;let val_positive = 0, val_negative = 0, ind = 0;const arr_positive = [], arr_negative = [];return data.map(function(d,i){if(i === 0){typical_price_privious = (d.high + d.low + d.close) / 3;ind++;} else {typical_price = (d.high + d.low + d.close) / 3;money_flow = typical_price * d.volume;if(typical_price >= typical_price_privious){val_positive += money_flow;arr_positive.push(money_flow);arr_negative.push(0);} else {val_negative += money_flow;arr_negative.push(money_flow);arr_positive.push(0);}if(ind >= windowSize ){if(i !== windowSize){val_positive = val_positive - val_positive_minus;val_negative = val_negative - val_negative_minus;}val_positive_minus = arr_positive[0];val_negative_minus = arr_negative[0];arr_positive.shift();arr_negative.shift();}typical_price_privious = typical_price;money_flow_privious = money_flow;if(ind >= windowSize){flow_ratio = val_positive / val_negative;flow_index = 100 - (100 / (1 + flow_ratio));ind++;return flow_index;} else {ind++;return undefined;}}});}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;}

...export const MFI = {source: d => ({volume: d.volume, high: d.high, low: d.low}), // "high", "low", "open", "close"sourcePath: "volume/high/low",windowSize: 10,};...

import React, { Component } from "react";import PropTypes from "prop-types";import GenericChartComponent from "../../GenericChartComponent";import { getMouseCanvas } from "../../GenericComponent";import {isDefined,noop,hexToRGBA,getStrokeDasharray,strokeDashTypes,} from "../../utils";class RectangleSimple extends Component {constructor(props) {super(props);this.renderSVG = this.renderSVG.bind(this);this.drawOnCanvas = this.drawOnCanvas.bind(this);this.isHover = this.isHover.bind(this);}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,});// console.log("hovering ->", hovering);return hovering;}return false;}drawOnCanvas(ctx, moreProps) {const { stroke, strokeWidth, strokeOpacity, strokeDasharray, type, fill, fillOpacity, isFill } = this.props;const { x1, y1, x2, y2 } = helper(this.props, moreProps);        const width = x2 - x1;        const height = y2 - y1;        ctx.beginPath();ctx.rect(x1, y1, width, height);ctx.stroke();          if(isFill){            ctx.fillStyle = hexToRGBA(fill, fillOpacity);            ctx.fill();        }}renderSVG(moreProps) {const { stroke, strokeWidth, strokeOpacity, strokeDasharray } = this.props;const lineWidth = strokeWidth;const { x1, y1, x2, y2 } = helper(this.props, moreProps);return ();}render() {const { selected, interactiveCursorClass } = this.props;const { onDragStart, onDrag, onDragComplete, onHover, onUnHover } = this.props;return ;}}export function isHovering2(start, end, [mouseX, mouseY], tolerance) {const m = getSlope(start, end);if (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 (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({type, start, end, xScale, yScale, m, b});case "RAY":return getRayCoordinates({type, start, end, xScale, yScale, m, b});case "LINE":return getLineCoordinates({type, start, end, xScale, yScale, m, b});}}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,};}RectangleSimple.propTypes = {x1Value: PropTypes.any.isRequired,x2Value: PropTypes.any.isRequired,y1Value: PropTypes.any.isRequired,y2Value: PropTypes.any.isRequired,interactiveCursorClass: PropTypes.string,stroke: PropTypes.string.isRequired,strokeWidth: PropTypes.number.isRequired,strokeOpacity: PropTypes.number.isRequired,strokeDasharray: PropTypes.oneOf(strokeDashTypes),type: PropTypes.oneOf(["XLINE", // extends from -Infinity to +Infinity"RAY", // extends to +/-Infinity in one direction"LINE", // extends between the set bounds]).isRequired,onEdge1Drag: PropTypes.func.isRequired,onEdge2Drag: PropTypes.func.isRequired,onDragStart: PropTypes.func.isRequired,onDrag: PropTypes.func.isRequired,onDragComplete: PropTypes.func.isRequired,onHover: PropTypes.func,onUnHover: PropTypes.func,defaultClassName: PropTypes.string,r: PropTypes.number.isRequired,edgeFill: PropTypes.string.isRequired,edgeStroke: PropTypes.string.isRequired,edgeStrokeWidth: PropTypes.number.isRequired,withEdge: PropTypes.bool.isRequired,children: PropTypes.func.isRequired,tolerance: PropTypes.number.isRequired,selected: PropTypes.bool.isRequired,};RectangleSimple.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,};export default RectangleSimple;

import React, { Component } from "react";import PropTypes from "prop-types";import { ascending as d3Ascending } from "d3-array";import { noop, strokeDashTypes } from "../../utils";import { saveNodeType, isHover } from "../utils";import { getXValue } from "../../utils/ChartDataUtil";import Rectangle from "../components/Rectangle";import ClickableCircle from "../components/ClickableCircle";import HoverTextNearMouse from "../components/HoverTextNearMouse";class EachRectangle extends Component {constructor(props) {super(props);this.handleEdge1Drag = this.handleEdge1Drag.bind(this);this.handleEdge2Drag = this.handleEdge2Drag.bind(this);this.handleLineDragStart = this.handleLineDragStart.bind(this);this.handleLineDrag = this.handleLineDrag.bind(this);this.handleEdge1DragStart = this.handleEdge1DragStart.bind(this);this.handleEdge2DragStart = this.handleEdge2DragStart.bind(this);this.handleDragComplete = this.handleDragComplete.bind(this);this.handleHover = this.handleHover.bind(this);this.isHover = isHover.bind(this);this.saveNodeType = saveNodeType.bind(this);this.nodes = {};this.state = {hover: false,};}handleLineDragStart() {const {x1Value, y1Value,x2Value, y2Value,} = this.props;this.dragStart = {x1Value, y1Value,x2Value, y2Value,};}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,});}handleEdge1DragStart() {this.setState({anchor: "edge2"});}handleEdge2DragStart() {this.setState({anchor: "edge1"});}handleDragComplete(...rest) {this.setState({anchor: undefined});this.props.onDragComplete(...rest);}handleEdge1Drag(moreProps) {const { index, onDrag } = this.props;const {x2Value, y2Value,} = this.props;const [x1Value, y1Value] = getNewXY(moreProps);onDrag(index, {x1Value,y1Value,x2Value,y2Value,});}handleEdge2Drag(moreProps) {const { index, onDrag } = this.props;const {x1Value, y1Value,} = this.props;const [x2Value, y2Value] = getNewXY(moreProps);onDrag(index, {x1Value,y1Value,x2Value,y2Value,});}handleHover(moreProps) {if (this.state.hover !== moreProps.hovering) {this.setState({hover: moreProps.hovering});}}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 ;}}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];}EachRectangle.propTypes = {x1Value: PropTypes.any.isRequired,x2Value: PropTypes.any.isRequired,y1Value: PropTypes.any.isRequired,y2Value: PropTypes.any.isRequired,index: PropTypes.number,type: PropTypes.oneOf(["XLINE", // extends from -Infinity to +Infinity"RAY", // extends to +/-Infinity in one direction"LINE", // extends between the set bounds]).isRequired,onDrag: PropTypes.func.isRequired,onEdge1Drag: PropTypes.func.isRequired,onEdge2Drag: PropTypes.func.isRequired,onDragComplete: PropTypes.func.isRequired,onSelect: PropTypes.func.isRequired,onUnSelect: PropTypes.func.isRequired,r: PropTypes.number.isRequired,strokeOpacity: PropTypes.number.isRequired,defaultClassName: PropTypes.string,selected: PropTypes.bool,stroke: PropTypes.string.isRequired,strokeWidth: PropTypes.number.isRequired,strokeDasharray: PropTypes.oneOf(strokeDashTypes),edgeStrokeWidth: PropTypes.number.isRequired,edgeStroke: PropTypes.string.isRequired,edgeInteractiveCursor: PropTypes.string.isRequired,lineInteractiveCursor: PropTypes.string.isRequired,edgeFill: PropTypes.string.isRequired,hoverText: PropTypes.object.isRequired,};EachRectangle.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,}};export default EachRectangle;

import React, { Component } from "react";import PropTypes from "prop-types";import { isDefined, isNotDefined, noop, strokeDashTypes } from "../utils";import {getValueFromOverride,terminate,saveNodeType,isHoverForInteractiveType,} from "./utils";import EachRectangle from "./wrapper/EachRectangle";import MouseLocationIndicator from "./components/MouseLocationIndicator";import HoverTextNearMouse from "./components/HoverTextNearMouse";class Rectangle extends Component {constructor(props) {super(props);this.handleStart = this.handleStart.bind(this);this.handleEnd = this.handleEnd.bind(this);this.handleDrawLine = this.handleDrawLine.bind(this);this.handleDragLine = this.handleDragLine.bind(this);this.handleDragLineComplete = this.handleDragLineComplete.bind(this);this.terminate = terminate.bind(this);this.saveNodeType = saveNodeType.bind(this);this.getSelectionState = isHoverForInteractiveType("trends").bind(this);this.state = {};this.nodes = [];}handleDragLine(index, newXYValue) {this.setState({override: {index,...newXYValue}});}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);});}}handleDrawLine(xyValue) {const { current } = this.state;if (isDefined(current) && isDefined(current.start)) {this.mouseMoved = true;this.setState({current: {start: current.start,end: xyValue,}});}}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);});}}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);});}}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 = {...Rectangle.defaultProps.hoverText,...hoverText};return ;})}{tempLine};}}Rectangle.propTypes = {snap: PropTypes.bool.isRequired,enabled: PropTypes.bool.isRequired,snapTo: PropTypes.func,shouldDisableSnap: PropTypes.func.isRequired,onStart: PropTypes.func.isRequired,onComplete: PropTypes.func.isRequired,onSelect: PropTypes.func,currentPositionStroke: PropTypes.string,currentPositionStrokeWidth: PropTypes.number,currentPositionstrokeOpacity: PropTypes.number,currentPositionRadius: PropTypes.number,type: PropTypes.oneOf(['RECTANGLE']),hoverText: PropTypes.object.isRequired,trends: PropTypes.array.isRequired,appearance: PropTypes.shape({        isFill: true,stroke: PropTypes.string.isRequired,strokeOpacity: PropTypes.number.isRequired,strokeWidth: PropTypes.number.isRequired,strokeDasharray: PropTypes.oneOf(strokeDashTypes),edgeStrokeWidth: PropTypes.number.isRequired,edgeFill: PropTypes.string.isRequired,edgeStroke: PropTypes.string.isRequired,}).isRequired};Rectangle.defaultProps = {type: "RECTANGLE",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,                fill: '#8AAFE2',                fillOpacity: 0.7,                text: '',        }};export default Rectangle;