Skip to content

Instantly share code, notes, and snippets.

@abrkn abrkn/depth.jsx
Created Mar 30, 2014

Embed
What would you like to do?
/** @jsx React.DOM */
var ReactWrapper = require('../../../shared/react-wrapper')
, uptodate = require('../../../../helpers/uptodate')
, Side = require('./side')
var Depth = React.createClass({
getInitialState: function() {
return {
depth: api.depth[this.props.market]
}
},
handleDepthUpdate: function(depth) {
this.setState({ depth: depth })
},
componentWillMount: function() {
api.on('depth:' + this.props.market, this.handleDepthUpdate)
this.refresh = uptodate(api.depth.bind(api, this.props.market), null, {
now: !api.depth[this.props.market]
})
},
componentWillUnmount: function() {
this.refresh.stop()
api.off('depth:' + this.props.market, this.handleDepthUpdate)
},
render: function() {
var bids = this.state.depth ? <Side market={this.props.market} levels={this.state.depth.bids} /> : 'Loading...'
var asks = this.state.depth ? <Side market={this.props.market} levels={this.state.depth.asks} /> : 'Loading...'
return <div className="row">
<div className="col-lg-12">
<table className="depth table table-bordered table-striped table-compact">
<thead>
<tr>
<th>{i18n('markets.market.depth.columns.bid volume')}</th>
<th>{i18n('markets.market.depth.columns.ask volume')}</th>
</tr>
</thead>
<tbody>
<tr>
<td>{bids}</td>
<td>{asks}</td>
</tr>
</tbody>
</table>
</div>
</div>
}
})
module.exports = function(market) {
return ReactWrapper(<Depth market={market} />)
}
/** @jsx React.DOM */
var Level = React.createClass({
render: function() {
return <tr className="level">
<td className="price">{numbers(this.props.price, { trim: false })}</td>
<td className="volume">{numbers(this.props.volume, { trim: false })}</td>
</tr>
}
})
module.exports = Level
/** @jsx React.DOM */
var Level = require('./level')
var Side = React.createClass({
render: function() {
var depth = this.props.levels.map(function(level) {
return <Level key={level[0]} price={level[0]} volume={level[1]} />
})
return <table className="depth-side table table-bordered">
<thead>
<tr>
<th>
{i18n('markets.market.depth.columns.price')}
<span className="currency">{this.props.market.substr(3)}</span>
</th>
<th>
{i18n('amount')}
<span className="currency">{this.props.market.substr(0, 3)}</span>
</th>
</tr>
</thead>
<tbody>
{depth}
</tbody>
</table>
}
})
module.exports = Side
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.