MCSM: отображение некого графика

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

@@ -1,5 +1,107 @@
-var ContentModule = React.createClass({
+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.
+            }
+        ];
+    },
     render: function(){return(
-        ce(Panel, null, ce('h3', null, 'MS Server Manager is comming...'))
-    )}
+        ce('div', {id: 'chart'}, ce('svg', {style: {'height': '500px'}}))
+    )},
+    componentDidMount: function(){
+        var _this = this;
+
+        nv.addGraph(function() {
+            var chart = nv.models.lineChart().useInteractiveGuideline(true);
+
+            chart.xAxis.axisLabel('Time (ms)').tickFormat(d3.format(',r'));
+
+            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;
+        });
+    }
+});
+
+var ContentModule = React.createClass({
+    loadScript: function(url, fnLoad, fnError) {
+        const script = document.createElement("script");
+        script.src = url;
+        script.onload = fnLoad;
+        script.onerror = fnError;
+        document.body.appendChild(script);
+    },
+    loadStyle: function(url, fnLoad, fnError) {
+        const style = document.createElement("link");
+        style.rel = "stylesheet";
+        style.href = url;
+        style.onload = fnLoad;
+        style.onerror = fnError;
+        document.body.appendChild(style);
+    },
+    getInitialState: function(){return{
+        nvScriptReady: 0,
+    }},
+    componentWillMount: function(){
+        var _this = this;
+
+        this.loadScript(
+            "https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js",
+            function(){
+                _this.loadStyle("https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.5/nv.d3.min.css");
+                _this.loadScript(
+                    "https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.5/nv.d3.js",
+                    function(){ _this.setState({nvScriptReady: 1}); console.info('nv ok'); },
+                    function(){ _this.setState({nvScriptReady: 2}); console.error('nv error load'); }
+                );
+            },
+            function(){ _this.setState({nvScriptReady: 2}); console.error('d3 error load'); }
+        );
+    },
+    render: function(){
+        var element;
+        if (this.state.nvScriptReady == 1) {
+            element = ce(NvLineChart);
+        } else if (this.state.nvScriptReady == 2) {
+            element = ce('span', null, 'error');
+        } else {
+            element = ce('span', null, 'loading...');
+        }
+
+        return(
+            ce(Panel, {title: 'MC Server Manager'},
+                element
+            )
+        )
+    }
 });