99 lines
3.2 KiB
JavaScript
99 lines
3.2 KiB
JavaScript
/**
|
||
* График.
|
||
* <code>this.props.datum</code> - данные в формате D3
|
||
*/
|
||
var NvLineChart = React.createClass({
|
||
chart: null,
|
||
d3ChartData: null,
|
||
/*--------------------*/
|
||
render: function(){return(
|
||
ce('div', {id: 'chart'}, ce('svg', {style: {'height': '500px'}}))
|
||
)},
|
||
componentDidMount: function() {
|
||
var _this = this;
|
||
nv.addGraph(function() {
|
||
_this.chart = nv.models.lineChart().useInteractiveGuideline(true);
|
||
_this.chart.xAxis.axisLabel('Time').tickFormat(function(d){ return d3.time.format('%X')(new Date(d)); });
|
||
_this.chart.yAxis.axisLabel('Players').tickFormat(d3.format('d'));
|
||
|
||
_this.d3ChartData = d3.select('#chart svg').datum(_this.props.datum);
|
||
_this.d3ChartData.transition().duration(500).call(_this.chart);
|
||
|
||
nv.utils.windowResize(_this.chart.update);
|
||
return _this.chart;
|
||
});
|
||
},
|
||
componentDidUpdate: function() {
|
||
if (this.d3ChartData === null) return;
|
||
|
||
this.d3ChartData.datum(this.props.datum);
|
||
this.d3ChartData.transition().duration(500).call(this.chart);
|
||
nv.utils.windowResize(this.chart.update);
|
||
}
|
||
});
|
||
|
||
var Tabs = React.createClass({
|
||
render: function(){
|
||
var tabsElm = [];
|
||
this.props.tabs.forEach(function(title, i){
|
||
tabsElm.push(ce('li', (i === 0 ? {className: 'active'} : null), ce('a', {href: '#'}, title)));
|
||
});
|
||
|
||
return(
|
||
ce('ul', {className: 'nav nav-tabs'}, tabsElm)
|
||
)
|
||
}
|
||
});
|
||
|
||
var ServerInfo = React.createClass({
|
||
getInitialState: function(){return {
|
||
title: null,
|
||
data: []
|
||
}},
|
||
render: function(){
|
||
if (this.state.title === null) {
|
||
return ce('div', null, 'no data');
|
||
} else {
|
||
return(
|
||
ce('div', null,
|
||
ce('h2', {style: {'margin-top': '0px'}}, this.state.title),
|
||
ce(Tabs, {tabs: ['Онлайн1', 'Консоль2']}),
|
||
ce(NvLineChart, {datum: [{
|
||
key: 'Online players',
|
||
color: '#37d668',
|
||
area: true,
|
||
values: this.state.data
|
||
}]})
|
||
)
|
||
)
|
||
}
|
||
}
|
||
});
|
||
|
||
/**
|
||
* Пункт списка серверов.
|
||
* <code>this.props.title</code> - заголовок / clientId
|
||
* <code>this.props.onClick</code> - callback события клика
|
||
* <code>this.props.active</code> - состояние активности (true/false)
|
||
*/
|
||
var ServerListItem = React.createClass({
|
||
render: function(){
|
||
return(
|
||
ce('a', {className: 'list-group-item clearfix' + (this.props.active ? ' active' : ''), href: '#',
|
||
onClick: this.props.onClick},
|
||
ce('span', {style: {'padding-top': '15px'}},
|
||
ce('span', {className: 'glyphicon glyphicon-tasks'}),
|
||
nbsp,
|
||
this.props.title
|
||
)
|
||
)
|
||
)
|
||
}
|
||
});
|
||
|
||
var ServerList = React.createClass({
|
||
render: function(){return(
|
||
ce('div', {className: 'list-group'}, this.props.children)
|
||
)}
|
||
});
|