var Dashboard = React.createClass({ getInitialState: function() { return {}; }, componentDidMount: function() { this.reload(); }, reload: function() { getURL("http://127.0.0.1:6464/stats.json", {}, function(resp) { var newState = {}; var decode = function(point) { return { timestamp: point[0], processed: point[1], errors: point[2], min: point[3], p25: point[4], mean: point[5], median: point[6], p75: point[7], max: point[8], } }; for (name in resp) { newState[name] = resp[name].map(decode); } this.setState(newState); setTimeout(this.reload, 3000); }.bind(this)); }, renderDaemons: function() { var daemons = []; for (name in this.state) { daemons.push(); } return daemons; }, render: function() { return (
{this.renderDaemons()}
); } }); var Daemon = React.createClass({ render: function() { var last = this.props.points[this.props.points.length - 1]; return (

{this.props.name}

); } }); var BoxPlot = React.createClass({ render: function(){ var points = this.props.points, maxHeight = 140, padding = 5; var min, max; points.map(function(point) { if (min === undefined || point.min < min) { min = point.min; } if (max === undefined || point.max > max) { max = point.max; } }); var renderBox = function(point, i) { var relativeY = function(val) { return maxHeight - Math.round((val-min)/(max-min) * maxHeight) + padding; }; var width = 10; var padding = 5; var x1 = (width + padding) * i + padding; var x2 = x1 + width; var minY = relativeY(point.min); var p25Y = relativeY(point.p25); var medianY = relativeY(point.median); var p75Y = relativeY(point.p75); var maxY = relativeY(point.max); return ( ); }; return (
{this.props.points.map(renderBox)}
); } }); ReactDOM.render(, document.getElementById("app"));