react stockchart

import React, { Component } from 'react';
import { format } from "d3-format";
import { timeFormat } from "d3-time-format";
import ReStock from "react-stockcharts";

const { ChartCanvas, Chart, series, scale, coordinates, tooltip, axes, helper } = ReStock;

const { LineSeries, AreaSeries, ScatterSeries, CircleMarker } = series;

const { discontinuousTimeScaleProvider } = scale;
const { CrossHairCursor, MouseCoordinateX, MouseCoordinateY } = coordinates;
const { OHLCTooltip } = tooltip;
const { XAxis, YAxis } = axes;
const { fitWidth } = helper;

class StockChartLine extends Component {
    state = { rows: [] };
    maxPoints = 1000;
    maxY = 10000;
    minY = 0;
    nbrLines = 4;
    date = new Date();

    componentWillMount() {
        console.log('componentWillMount')
        this.reRender();
        setInterval(() => {
            this.state.rows.shift()
            this.setState({
                rows: [...this.state.rows, this.getRandomRow()]
            })
        }, 1000)
    }

    getRandomYValue() {
        return Math.floor(Math.random() * (this.maxY - this.minY)) + this.minY;
    }

    getRandomRow() {
        let row = {
            date: new Date(this.date.setDate(this.date.getDate() + 1)),
            close: this.getRandomYValue()
        };
        return row;
    }

    getRandomRows() {
        let rows = [];
        for (let i = 0; i < this.maxPoints; i++) {
            rows.push(this.getRandomRow());
        }
        return rows;
    }

    reRender() {
        this.date = new Date();
        this.setState({
            rows: this.getRandomRows()
        })
    }

    render() {
        const { rows: data } = this.state;
        var { type = 'hybrid', width = 1000, ratio = 2 } = this.props;
        return (
            <ChartCanvas ratio={ratio} width={width} height={400}
                margin={{ left: 50, right: 50, top: 10, bottom: 30 }}
                seriesName="MSFT"
                data={data} type={type}
                xAccessor={d => d.date} xScaleProvider={discontinuousTimeScaleProvider}
                xExtents={[data[0].date, data[data.length - 1].date]}>
                <Chart id={0} yExtents={d => d.close}>
                    <XAxis axisAt="bottom" orient="bottom" />
                    <YAxis axisAt="right" orient="right" ticks={5} />
                    <LineSeries yAccessor={d => d.close} />
                    <ScatterSeries yAccessor={d => d.close} marker={CircleMarker} markerProps={{ r: 2 }} />
                </Chart>
            </ChartCanvas>
        );
        // return (
        //     <ChartCanvas ratio={ratio} width={width} height={400}
        //         margin={{ left: 70, right: 70, top: 20, bottom: 30 }} type={type}
        //         seriesName="MSFT"
        //         data={rows}
        //         xAccessor={d => d.date} xScaleProvider={discontinuousTimeScaleProvider}
        //         xExtents={[new Date(2012, 0, 1), new Date(2012, 2, 2)]}>
        //         <Chart id={1}
        //             yExtents={d => [d.high, d.low]}>
        //             <XAxis axisAt="bottom" orient="bottom" />
        //             <YAxis axisAt="right" orient="right" ticks={5} />
        //             <MouseCoordinateX
        //                 at="bottom"
        //                 orient="bottom"
        //                 displayFormat={timeFormat("%Y-%m-%d")} />
        //             <MouseCoordinateY
        //                 at="right"
        //                 orient="right"
        //                 displayFormat={format(".2f")} />

        //             <LineSeries yAccessor={d => d.close} />
        //             <ScatterSeries yAccessor={d => d.close} marker={CircleMarker} markerProps={{ r: 3 }} />
        //             <OHLCTooltip forChart={1} origin={[-40, 0]} />
        //         </Chart>
        //         <CrossHairCursor />
        //     </ChartCanvas>
        // );
    }
}

StockChartLine = fitWidth(StockChartLine);


export default StockChartLine;