небольшие корректировки в javascript

mcserver-manager/src/main/resources/components.js

@@ -1,24 +1,22 @@
+/**
+ * График.
+ * <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() {
-        console.debug('nvd3: componentDidMount');
         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([{
-                key: 'Online players',
-                color: '#37d668',
-                area: true,
-                values: _this.props.chartData
-            }]);
+            _this.d3ChartData = d3.select('#chart svg').datum(_this.props.datum);
             _this.d3ChartData.transition().duration(500).call(_this.chart);
 
             nv.utils.windowResize(_this.chart.update);
@@ -26,50 +24,44 @@ var NvLineChart = React.createClass({
         });
     },
     componentDidUpdate: function() {
-        console.debug('nvd3: componentDidUpdate');
         if (this.d3ChartData === null) return;
 
-        this.d3ChartData.datum([{
-            key: 'Online players',
-            color: '#37d668',
-            area: true,
-            values: this.props.chartData
-        }]);
+        this.d3ChartData.datum(this.props.datum);
         this.d3ChartData.transition().duration(500).call(this.chart);
         nv.utils.windowResize(this.chart.update);
     }
 });
 
 var ServerInfo = React.createClass({
-    sin2: function(){
-        var sin2 = [];
-        for (var i = 0; i < 100; i++) {
-            sin2.push({x: i, y: Math.sin(i/10) *0.25 + 0.5});
-        }
-        return sin2;
-    },
     getInitialState: function(){return {
-        title: this.props.title,
-        //Data is represented as an array of {x,y} pairs.
-        //example: chartData.push({x: i, y: Math.sin(i/10) *0.25 + 0.5})
-        chartData: []
+        title: null,
+        data: []
     }},
-    render: function(){return(
-        ce('div', null,
-            ce('div', {className: 'pull-right'},
-                ce('div', {className: 'btn-group'},
-                    ce(Button, {btnSize: 'xs'},
-                        ce('span', {className: 'glyphicon glyphicon-play'}), nbsp+'запуск'),
-                    ce(Button, {btnSize: 'xs'},
-                        ce('span', {className: 'glyphicon glyphicon-stop'}), nbsp+'остановка')
+    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(NvLineChart, {datum: [{
+                        key: 'Online players',
+                        color: '#37d668',
+                        area: true,
+                        values: this.state.data
+                    }]})
                 )
-            ),
-            ce('h2', {style: {'margin-top': '0px'}}, this.state.title),
-            ce(NvLineChart, {chartData: this.state.chartData})
-        )
-    )}
+            )
+        }
+    }
 });
 
+/**
+ * Пункт списка серверов.
+ * <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(