107 lines
2.7 KiB
JavaScript
107 lines
2.7 KiB
JavaScript
import React, {Component} from "react";
|
|
|
|
import * as d3 from "d3";
|
|
|
|
export default class extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.state = {
|
|
tooltip: {display: false, data: {key: '', value: ''}},
|
|
width: 0
|
|
};
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.renderGraph()
|
|
}
|
|
|
|
componentDidUpdate() {
|
|
this.renderGraph()
|
|
}
|
|
|
|
renderGraph() {
|
|
if (!this.props.historicalData) {
|
|
return;
|
|
}
|
|
|
|
let data = this.props.historicalData;
|
|
let parseTime = d3.timeParse("%d-%m-%y");
|
|
data.forEach((datum) => {
|
|
datum.date = parseTime(datum.date);
|
|
datum.price = +datum.price;
|
|
});
|
|
|
|
d3.select(this.refs.historyGraph).selectAll("svg").remove();
|
|
let svg = d3.select(this.refs.historyGraph).append('svg');
|
|
|
|
svg.attr('height', '250')
|
|
.attr('width', '400');
|
|
|
|
let margin = {top: 20, right: 20, bottom: 30, left: 0},
|
|
width = +svg.attr('width') - margin.left - margin.right,
|
|
height = +svg.attr('height') - margin.top - margin.bottom,
|
|
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
|
|
|
|
|
|
let x = d3.scaleTime()
|
|
.rangeRound([0, width]);
|
|
|
|
let y = d3.scaleLinear()
|
|
.rangeRound([height, 0]);
|
|
|
|
let line = d3.line()
|
|
.x(function (d) {
|
|
return x(d.date);
|
|
})
|
|
.y(function (d) {
|
|
return y(d.price);
|
|
});
|
|
|
|
x.domain(d3.extent(data, function (d) {
|
|
return d.date;
|
|
}));
|
|
y.domain(d3.extent(data, function (d) {
|
|
return d.price;
|
|
}));
|
|
|
|
g.append("g")
|
|
.attr("transform", "translate(0," + height + ")")
|
|
.call(d3.axisBottom(x));
|
|
|
|
g.append("g")
|
|
.call(d3.axisLeft(y))
|
|
.append("text")
|
|
.attr("fill", "#000")
|
|
.attr("transform", "rotate(-90)")
|
|
.attr("y", 6)
|
|
.attr("dy", "0.71em")
|
|
.attr("text-anchor", "end")
|
|
.text("Price ($)");
|
|
|
|
g.append("path")
|
|
.datum(data)
|
|
.attr("fill", "none")
|
|
.attr("stroke", "steelblue")
|
|
.attr("stroke-linejoin", "round")
|
|
.attr("stroke-linecap", "round")
|
|
.attr("stroke-width", 1.5)
|
|
.attr("d", line);
|
|
}
|
|
|
|
render() {
|
|
let containerStyle = {
|
|
marginTop: 5,
|
|
height: 500
|
|
};
|
|
|
|
if (!this.props.historicalData) {
|
|
return null;
|
|
} else {
|
|
return (
|
|
<div style={containerStyle} ref="historyGraph"></div>
|
|
);
|
|
}
|
|
}
|
|
}
|