diff --git a/mcserver-manager/src/main/resources/module.js b/mcserver-manager/src/main/resources/module.js index 03059e3..4af164a 100644 --- a/mcserver-manager/src/main/resources/module.js +++ b/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 + ) + ) + } }); \ No newline at end of file