Skip to content

Instantly share code, notes, and snippets.

@shprink
Created October 19, 2016 09:02
Show Gist options
  • Save shprink/e0e5975b4aac7efa3342ffbe08b9b178 to your computer and use it in GitHub Desktop.
Save shprink/e0e5975b4aac7efa3342ffbe08b9b178 to your computer and use it in GitHub Desktop.
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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment