!7

html {
  ret hhtml(hhead(
    loadJQuery()
    + htitle("Mandelbrot Frames Graph")
    + [[<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>]])
    + hbody(
      hSilentComputator()
    + [[<div style="width:75%;"><canvas id="canvas"></canvas>]]
    + hjavascript([[

window.chartColors = {
	red: 'rgb(255, 99, 132)',
	orange: 'rgb(255, 159, 64)',
	yellow: 'rgb(255, 205, 86)',
	green: 'rgb(75, 192, 192)',
	blue: 'rgb(54, 162, 235)',
	purple: 'rgb(153, 102, 255)',
	grey: 'rgb(201, 203, 207)'
};

	// INITIALIZATION
	
	function randomScalingFactor() { return 5; }

		var config = {
			type: 'line',
			data: {
				labels: [],
				datasets: [{
					label: 'Frames calculated',
					backgroundColor: window.chartColors.red,
					borderColor: window.chartColors.red,
					data: [],
					fill: false,
				}, {
					label: 'Connected machines',
					backgroundColor: window.chartColors.yellow,
					borderColor: window.chartColors.yellow,
					data: [],
					fill: false,
				}]
			},
			options: {
				responsive: true,
				title: {
					display: true,
					text: 'Distributed Mandelbrot'
				},
				tooltips: {
					mode: 'index',
					intersect: false,
				},
				hover: {
					mode: 'nearest',
					intersect: true
				},
				scales: {
					xAxes: [{
						display: true,
						scaleLabel: {
							display: true,
							labelString: 'Time'
						}
					}],
					yAxes: [{
						display: true,
						scaleLabel: {
							display: true,
							labelString: ''
						}
					}]
				}
			}
		};

		window.onload = function() {
			var ctx = document.getElementById('canvas').getContext('2d');
			window.myLine = new Chart(ctx, config);
			var start = +new Date(), n = -2;
			var lastValue = null;
		
		  var f;
  		function f() {
  		  $.get('http://butter.botcompany.de:8080/1013835/raw/n2', function(jsn) {
  		    jsn = JSON.parse(jsn);
    		  var value = jsn[1];
    		  var value2 = jsn[0];
    		  var diff = Math.round((new Date()-start)/$INTERVAL);
    		  var ds = config.data.datasets[0].data;
    		  var ds2 = config.data.datasets[1].data;
    		  var change = false;
    			while (n < diff) {
    			  ++n;
    				config.data.labels.push('');
    				if (lastValue == null) lastValue = value;
    				ds.push(value-lastValue);
    				lastValue = value;
    				ds2.push(value2);
    				change = true;
    			}
    			while (ds.length > 20) {
    			  config.data.labels.shift();
    			  ds.shift();
    				ds2.shift();
    			}
    			if (change) window.myLine.update();
    		});
  		}
  		setInterval(f, $INTERVAL);
  		f();
		};
	]].replace("$INTERVAL", str(5000)))));
}