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 11:28:58 +01:00
parent 8677118a27
commit a438cb6169
9 changed files with 293 additions and 3049 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
src-trader-dashboard/components/StockSummaryPanel.jsx
View File

@@ -13,9 +13,9 @@ export default class extends Component {
let tableStyle = {
display: "inline-block",
verticalAlign: "top",
borderCollapse:"collapse"
borderCollapse: "collapse"
};
};
let keyStyle = {
color: "#666"
@@ -25,70 +25,54 @@ export default class extends Component {
textAlign: "right"
};
return (
<div style={containerStyle}>
<table style={tableStyle}>
<tbody>
<tr>
<td style={keyStyle}>Range
</td>
<td style={valueStyle}>154.72 - 156.06
</td>
</tr>
<tr>
<td style={keyStyle}>52 week
</td>
<td style={valueStyle}>91.50 - 156.65
</td>
</tr>
<tr>
<td style={keyStyle}>Open
</td>
<td style={valueStyle}>155.94
</td>
</tr>
<tr>
<td style={keyStyle}>
Vol / Avg.
</td>
<td style={valueStyle}>15,931.00/24.94M
</td>
</tr>
</tbody>
</table>
<table style={tableStyle}>
<tbody>
<tr>
<td style={keyStyle}>
Div/yield
</td>
<td style={valueStyle}>0.63/1.62
</td>
</tr>
<tr>
<td style={keyStyle}>
EPS
</td>
<td style={valueStyle}>8.55
</td>
</tr>
<tr>
<td style={keyStyle}>
Shares
</td>
<td style={valueStyle}>5,213.84M
</td>
</tr>
<tr>
<td style={keyStyle}>
Mkt cap
</td>
<td style={valueStyle}>808,518.60M
</td>
</tr>
</tbody>
</table>
</div>
);
if (!this.props.tickerSummary) {
return null;
} else {
return (
<div style={containerStyle}>
<table style={tableStyle}>
<tbody>
<tr>
<td style={keyStyle}>Range</td>
<td style={valueStyle}>{this.props.tickerSummary.range}</td>
</tr>
<tr>
<td style={keyStyle}>52 week</td>
<td style={valueStyle}>{this.props.tickerSummary.fiftyTwoWeek}</td>
</tr>
<tr>
<td style={keyStyle}>Open</td>
<td style={valueStyle}>{this.props.tickerSummary.open}</td>
</tr>
<tr>
<td style={keyStyle}>Vol / Avg.</td>
<td style={valueStyle}>{this.props.tickerSummary.vol}/{this.props.tickerSummary.avg}
</td>
</tr>
</tbody>
</table>
<table style={tableStyle}>
<tbody>
<tr>
<td style={keyStyle}>Div/yield</td>
<td style={valueStyle}>{this.props.tickerSummary.dividend}/{this.props.tickerSummary.yld}</td>
</tr>
<tr>
<td style={keyStyle}>EPS</td>
<td style={valueStyle}>{this.props.tickerSummary.eps}</td>
</tr>
<tr>
<td style={keyStyle}>Shares</td>
<td style={valueStyle}>{this.props.tickerSummary.shares}</td>
</tr>
<tr>
<td style={keyStyle}>Market Cap</td>
<td style={valueStyle}>{this.props.tickerSummary.marketCap}</td>
</tr>
</tbody>
</table>
</div>
);
}
}
}