mohiit1502/ag-grid-react-example
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

AG-420 Improve React implementation

Browse Source
This commit is contained in:
Sean Landsman
2017-05-19 15:58:12 +01:00
parent a438cb6169
commit a3a0336f6b
4 changed files with 115 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
src-trader-dashboard/components/StockHistoricalChartPanel.jsx
View File

@@ -6,10 +6,32 @@ export default class extends Component {
constructor(props) {
super(props);
this.state = {
tooltip: {display: false, data: {key: '', value: ''}},
width: 0
this.margin = {
top: 20,
right: 20,
bottom: 50,
left: 0
};
this.renderingWidth = this.props.graphWidth - this.margin.left - this.margin.right;
this.renderingheight = this.props.graphHeight - this.margin.top - this.margin.bottom;
this.x = d3.scaleTime()
.range([0, this.renderingWidth]);
this.y = d3.scaleLinear()
.rangeRound([this.renderingheight, 0]);
this.line = d3.line()
.x(d => this.x(d.date))
.y(d => this.y(d.price));
}
static get defaultProps() {
return {
graphHeight: 320,
graphWidth: 400
}
}
componentDidMount() {
@@ -26,55 +48,56 @@ export default class extends Component {
}
let data = this.props.historicalData;
let parseTime = d3.timeParse("%d-%m-%y");
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');
// clear out any previous graph
d3.select(this.refs.historyGraph)
.selectAll("svg")
.remove();
svg.attr('height', '250')
.attr('width', '400');
// create a new one
let svg = d3.select(this.refs.historyGraph)
.append('svg')
.attr('height', this.props.graphHeight)
.attr('width', this.props.graphWidth);
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 g = svg.append("g")
.attr("transform", "translate(" + this.margin.left + "," + this.margin.top + ")");
this.x.domain(d3.extent(data, d => d.date));
let x = d3.scaleTime()
.rangeRound([0, width]);
this.y.domain(d3.extent(data, d => d.price));
let y = d3.scaleLinear()
.rangeRound([height, 0]);
let scale = d3.scaleTime()
.domain(d3.extent(data, d => d.date))
.range([0, this.renderingWidth]);
let line = d3.line()
.x(function (d) {
return x(d.date);
})
.y(function (d) {
return y(d.price);
});
// Add the x Axis
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + (this.renderingheight + 20 ) + ")")
.call(d3.axisBottom(scale).tickFormat(d3.timeFormat("%Y-%m-%d")))
.selectAll("text")
.attr("y", 0)
.attr("x", 9)
.attr("dy", ".35em")
.attr("transform", "rotate(55)")
.style("text-anchor", "start");
x.domain(d3.extent(data, function (d) {
return d.date;
}));
y.domain(d3.extent(data, function (d) {
return d.price;
}));
// Add the y Axis
svg.append("g")
.call(d3.axisLeft(this.y));
g.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
g.append("g")
.call(d3.axisLeft(y))
.call(d3.axisLeft(this.y))
.append("text")
.attr("fill", "#000")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("y", 9)
.attr("dy", "0.71em")
.attr("text-anchor", "end")
.text("Price ($)");
@@ -86,13 +109,12 @@ export default class extends Component {
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.attr("stroke-width", 1.5)
.attr("d", line);
.attr("d", this.line);
}
render() {
let containerStyle = {
marginTop: 5,
height: 500
marginTop: 5
};
if (!this.props.historicalData) {