MCSM: обновление онлайна на сервере

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

@@ -1,61 +1,58 @@
 var NvLineChart = React.createClass({
-    sinAndCos: function(){
-        var sin = [],sin2 = [],cos = [];
-
-        //Data is represented as an array of {x,y} pairs.
-        for (var i = 0; i < 100; i++) {
-            sin.push({x: i, y: Math.sin(i/10)});
-            sin2.push({x: i, y: Math.sin(i/10) *0.25 + 0.5});
-            cos.push({x: i, y: .5 * Math.cos(i/10)});
-        }
-
-        //Line chart data should be sent as an array of series objects.
-        return [
-            {
-                values: sin,      //values - represents the array of {x,y} data points
-                key: 'Sine Wave', //key  - the name of the series.
-                color: '#ff7f0e'  //color - optional: choose your own line color.
-            },
-            {
-                values: cos,
-                key: 'Cosine Wave',
-                color: '#2ca02c'
-            },
-            {
-                values: sin2,
-                key: 'Another sine wave',
-                color: '#7777ff',
-                area: true      //area - set to true if you want this line to turn into a filled area chart.
-            }
-        ];
-    },
+    chart: null,
+    d3ChartData: null,
     render: function(){return(
         ce('div', {id: 'chart'}, ce('svg', {style: {'height': '500px'}}))
     )},
-    componentDidMount: function(){
+    componentDidMount: function() {
+        console.debug('nvd3: componentDidMount');
         var _this = this;
 
         nv.addGraph(function() {
-            var chart = nv.models.lineChart().useInteractiveGuideline(true);
+            _this.chart = nv.models.lineChart().useInteractiveGuideline(true);
+            _this.chart.xAxis.axisLabel('Time (ms)').tickFormat(d3.format(',r'));
+            _this.chart.yAxis.axisLabel('Players (p)').tickFormat(d3.format('.02f'));
 
-            chart.xAxis.axisLabel('Time (ms)').tickFormat(d3.format(',r'));
+            _this.d3ChartData = d3.select('#chart svg').datum([{
+                key: 'Online players',
+                color: '#37d668',
+                area: true,
+                values: _this.props.chartData
+            }]);
+            _this.d3ChartData.transition().duration(500).call(_this.chart);
 
-            chart.yAxis.axisLabel('Voltage (v)').tickFormat(d3.format('.02f'));
-
-            d3.select('#chart svg')
-                .datum(_this.sinAndCos())
-                .transition().duration(500)
-                .call(chart);
-
-            nv.utils.windowResize(chart.update);
-            return chart;
+            nv.utils.windowResize(_this.chart.update);
+            return _this.chart;
         });
+    },
+    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.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
+        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: []
     }},
     render: function(){return(
         ce('div', null,
@@ -68,7 +65,7 @@ var ServerInfo = React.createClass({
                 )
             ),
             ce('h2', {style: {'margin-top': '0px'}}, this.state.title),
-            this.props.children
+            ce(NvLineChart, {chartData: this.state.chartData})
         )
     )}
 });

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

@@ -27,13 +27,23 @@ var ContentModule = React.createClass({
                 console.error(err);
             });
     },
+    convertToChart: function(pingList) {
+        var resultArray = [];
+        pingList.forEach(function(pingData){
+            resultArray.push({x: pingData.time, y: pingData.online})
+        });
+        return resultArray;
+    },
     clickServerListItem: function(title) {
         var _this = this;
         fetch('/mcsmanager/servers.json?clientid='+title)
             .then(function(response){
                 response.json().then(function(data){
                     console.debug(data);
-                    _this.refs.serverInfo.setState({ title: data.name });
+                    _this.refs.serverInfo.setState({
+                        title: data.name,
+                        chartData: _this.convertToChart(data.pingList)
+                    });
                 });
             })
             .catch(function(err){
@@ -77,7 +87,7 @@ var ContentModule = React.createClass({
 
             element = ce('div', {className: 'row'},
                           ce('div', {className: 'col-md-4'}, ce(ServerList, null, serverListItems)),
-                          ce('div', {className: 'col-md-8'}, ce(ServerInfo, {title: 'Server 2 [skywars-1]', ref: "serverInfo"}, ce(NvLineChart)))
+                          ce('div', {className: 'col-md-8'}, ce(ServerInfo, {title: 'Server 2 [skywars-1]', ref: "serverInfo"}))
                       );
         } else if (this.state.nvScriptReady < 0) {
             element = ce('span', null, 'error');