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-22 15:01:21 +01:00
parent a3a0336f6b
commit 3f54c23b4d
7 changed files with 591 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
src-trader-dashboard/components/FxQuoteMatrix.jsx Normal file
View File

@@ -0,0 +1,94 @@
import React, {Component} from "react";
import {connect} from "react-redux";
import {AgGridReact} from "ag-grid-react";
import ExchangeService from "../services/ExchangeService.jsx";
class FxQuoteMatrix extends Component {
constructor(props) {
super(props);
this.exchangeService = new ExchangeService();
this.state = {
columnDefs: this.exchangeService.getFxMatrixHeaderNames(),
// rowData: this.exchangeService.getFxMatrixSnapshot()
};
// grid events
this.onGridReady = this.onGridReady.bind(this);
}
onGridReady(params) {
this.gridApi = params.api;
this.columnApi = params.columnApi;
}
// componentWillUnmount() {
// this.exchangeService.removeSubscribers();
// }
componentWillReceiveProps(nextProps) {
console.log(props);
// if (nextProps.selectedExchange.supportedStocks !== this.props.selectedExchange.supportedStocks) {
// if (!this.gridApi) {
// return;
// }
//
// const currentSymbols = this.props.selectedExchange.supportedStocks;
// const nextSymbols = nextProps.selectedExchange.supportedStocks;
//
// // Unsubscribe to current ones that will be removed
// const symbolsRemoved = difference(currentSymbols, nextSymbols);
// forEach(symbolsRemoved, symbol => {
// this.exchangeService.removeSubscriber(this.updateQuote, symbol);
// });
//
// // Subscribe to new ones that need to be added
// const symbolsAdded = difference(nextSymbols, currentSymbols);
// forEach(symbolsAdded, symbol => {
// this.exchangeService.addSubscriber(this.updateQuote, symbol);
// });
//
// // Remove ag-grid nodes as necessary
// const nodesToRemove = [];
// this.gridApi.forEachNode(node => {
// const {data} = node;
// if (includes(symbolsRemoved, data.symbol)) {
// nodesToRemove.push(node);
// }
// });
// this.gridApi.removeItems(nodesToRemove);
//
// // Insert new ag-grid nodes as necessary
// this.gridApi.addItems(map(symbolsAdded, symbol => this.exchangeService.getTicker(symbol)));
// }
}
render() {
return (
<div style={{height: 500, width: "100%"}}
className="ag-fresh">
<AgGridReact
// properties
columnDefs={this.state.columnDefs}
rowData={this.state.rowData}
enableSorting="false"
enableFilter="false"
// events
onGridReady={this.onGridReady}>
</AgGridReact>
</div>
);
}
}
export default connect(
(state) => {
return {
rowData: state.fxRowData
}
}
)(FxQuoteMatrix);

19
src-trader-dashboard/components/LiveUpdatesGrid.jsx → src-trader-dashboard/components/PriceChangesGrid.jsx
View File

@@ -1,4 +1,8 @@
import React, {Component} from "react";
// take this line out if you do not want to use ag-Grid-Enterprise
import "ag-grid-enterprise";
import {AgGridReact} from "ag-grid-react";
import map from "lodash/map";
@@ -40,6 +44,15 @@ export default class extends Component {
cellFormatter: this.numberFormatter,
cellRenderer: 'animateShowChange',
cellStyle: {'text-align': 'right'}
},
{
headerName: 'Recommendation',
field: 'recommendation',
cellEditor: 'richSelect',
cellEditorParams: {
values: ['Buy', 'Hold', 'Sell']
},
editable: true
}
]
};
@@ -66,7 +79,9 @@ export default class extends Component {
this.gridApi = params.api;
this.columnApi = params.columnApi;
this.gridApi.addItems(map(this.props.selectedExchange.supportedStocks, symbol => this.exchangeService.getTicker(symbol)));
// make realistic - call in a batch
let rowData = map(this.props.selectedExchange.supportedStocks, symbol => this.exchangeService.getTicker(symbol));
this.gridApi.addItems(rowData);
this.gridApi.sizeColumnsToFit();
}
@@ -148,7 +163,7 @@ export default class extends Component {
render() {
return (
<div style={{height: 400, width: 800}}
<div style={{height: 500, width: 800}}
className="ag-fresh">
<AgGridReact
// properties

24
src-trader-dashboard/components/StockPanel.jsx
View File

@@ -1,7 +1,8 @@
import React, {Component} from "react";
import LiveUpdatesGrid from "./LiveUpdatesGrid.jsx";
import PriceChangesGrid from "./PriceChangesGrid.jsx";
import StockDetailPanel from "./StockDetailPanel.jsx";
import FxQuoteMatrix from "./FxQuoteMatrix.jsx";
export default class extends Component {
constructor(props) {
@@ -35,14 +36,19 @@ export default class extends Component {
render() {
return (
<div>
<div style={{float: "left", marginRight: 25}}>
<LiveUpdatesGrid selectedExchange={this.props.selectedExchange}
onRowClicked={this.onRowClicked}/>
</div>
<div style={{float: "left"}}>
<StockDetailPanel selectedSymbol={this.state.selectedSymbol}
exchangeName={this.props.selectedExchange.name}/>
<div style={{width: 1250}}>
{/*<div>*/}
{/*<div style={{float: "left", marginRight: 25}}>*/}
{/*<PriceChangesGrid selectedExchange={this.props.selectedExchange}*/}
{/*onRowClicked={this.onRowClicked}/>*/}
{/*</div>*/}
{/*<div style={{float: "left"}}>*/}
{/*<StockDetailPanel selectedSymbol={this.state.selectedSymbol}*/}
{/*exchangeName={this.props.selectedExchange.name}/>*/}
{/*</div>*/}
{/*</div>*/}
<div style={{width: "100%", clear: "both", paddingTop: 25}}>
<FxQuoteMatrix/>
</div>
</div>
);