!7

html {
  ret hhtml(hhead(
    htitle("Mandelbrot Frames Graph")
    + [[<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>]])
    + hbody([[<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: ['1:00'],
				datasets: [{
					label: 'Frames calculated',
					backgroundColor: window.chartColors.red,
					borderColor: window.chartColors.red,
					data: [
						0
					],
					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: 'Value'
						}
					}]
				}
			}
		};

		window.onload = function() {
			var ctx = document.getElementById('canvas').getContext('2d');
			window.myLine = new Chart(ctx, config);
			var start = +new Date();
		
  		setInterval(function() {
  		  var diff = Math.round((new Date()-start)/1000);
  		  var ds = config.data.datasets[0].data;
  			while (ds.length < diff) {
  				config.data.labels.push(ds.length+1);
  				ds.push(Math.random()*5);
  				window.myLine.update();
  			}
  		}, 1000);
		};
	]])));
}