105 lines
3.0 KiB
JavaScript
105 lines
3.0 KiB
JavaScript
import React, {Component} from "react";
|
|
import {connect} from "react-redux";
|
|
|
|
import {AgGridReact} from "ag-grid-react";
|
|
|
|
class TopMoversGrid extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.state = {
|
|
columnDefs: [
|
|
{
|
|
field: 'symbol',
|
|
headerName: 'Symbol'
|
|
},
|
|
{
|
|
field: 'last',
|
|
headerName: 'Last',
|
|
headerClass: 'align-right',
|
|
cellRenderer: 'animateShowChange',
|
|
cellClass: 'align-right'
|
|
},
|
|
{
|
|
field: 'net',
|
|
headerName: 'Net',
|
|
headerClass: 'align-right',
|
|
cellRenderer: 'animateShowChange',
|
|
cellClass: 'align-right'
|
|
},
|
|
{
|
|
field: 'pct_net_change',
|
|
headerName: '% NC',
|
|
headerClass: 'align-right',
|
|
cellRenderer: 'animateShowChange',
|
|
cellClass: 'align-right'
|
|
},
|
|
]
|
|
};
|
|
|
|
// grid events
|
|
this.onGridReady = this.onGridReady.bind(this);
|
|
}
|
|
|
|
onGridReady(params) {
|
|
this.gridApi = params.api;
|
|
this.columnApi = params.columnApi;
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.gridApi.setRowData(this.props.rowData);
|
|
this.gridApi.sizeColumnsToFit();
|
|
}
|
|
|
|
componentWillReceiveProps(nextProps) {
|
|
let newRowData = nextProps.rowData;
|
|
let model = this.gridApi.getModel();
|
|
|
|
// remove nodes not in new data set
|
|
let nodesToRemove = [];
|
|
for (let rowIndex = 0; rowIndex < model.getRowCount(); rowIndex++) {
|
|
let rowNode = model.getRow(rowIndex);
|
|
if (rowNode.data.symbol !== newRowData[rowIndex].symbol) {
|
|
nodesToRemove.push(rowNode);
|
|
}
|
|
}
|
|
this.gridApi.removeItems(nodesToRemove);
|
|
|
|
// add new items in set
|
|
for (let rowIndex = 0; rowIndex < newRowData.length; rowIndex++) {
|
|
let model = this.gridApi.getModel();
|
|
let rowNode = model.getRow(rowIndex);
|
|
|
|
if (!rowNode ||
|
|
rowNode.data.symbol !== newRowData[rowIndex].symbol) {
|
|
this.gridApi.insertItemsAtIndex(rowIndex, [newRowData[rowIndex]])
|
|
}
|
|
}
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div style={{height: 410, width: 400}}
|
|
className="ag-fresh">
|
|
<AgGridReact
|
|
// properties
|
|
columnDefs={this.state.columnDefs}
|
|
enableSorting="false"
|
|
enableFilter="false"
|
|
animateRows="true"
|
|
|
|
// events
|
|
onGridReady={this.onGridReady}>
|
|
</AgGridReact>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default connect(
|
|
(state) => {
|
|
return {
|
|
rowData: state.fxTopMovers
|
|
}
|
|
}
|
|
)(TopMoversGrid); |