cleaning up (1)
This commit is contained in:
DadaMonad
181
bower_components/observe-js/benchmark/index.html
vendored
Normal file
181
bower_components/observe-js/benchmark/index.html
vendored
Normal file
@@ -0,0 +1,181 @@
|
||||
<html>
|
||||
<!--
|
||||
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
<head>
|
||||
<title>Observation Benchmarks</title>
|
||||
<meta charset="utf-8">
|
||||
<script src="../src/observe.js"></script>
|
||||
<script src="chartjs/Chart.js"></script>
|
||||
<script src="benchmark.js"></script>
|
||||
<script src="observation_benchmark.js"></script>
|
||||
<style>
|
||||
* {
|
||||
font-family: arial, helvetica, sans-serif;
|
||||
font-weight: 400;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: rgba(0, 0, 0, .1);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Observation Benchmarks</h1>
|
||||
|
||||
<select id="benchmarkSelect">
|
||||
<option>ObjectBenchmark</option>
|
||||
<option>SetupObjectBenchmark</option>
|
||||
<option>ArrayBenchmark</option>
|
||||
<option>SetupArrayBenchmark</option>
|
||||
<option>PathBenchmark</option>
|
||||
<option>SetupPathBenchmark</option>
|
||||
</select>
|
||||
<select id="configSelect">
|
||||
</select>
|
||||
|
||||
<button id="go">Run Benchmarks</button>
|
||||
|
||||
<span>Object Count: </span>
|
||||
<input id="objectCountInput" style="width: 200px" value="4000, 8000, 16000, 32000"><br>
|
||||
<span>Mutation Count: </span>
|
||||
<input id="mutationCountInput" style="width: 200px" value="0, 100, 200, 400, 800, 1600"><br>
|
||||
<br>
|
||||
<span id="status"></span>
|
||||
|
||||
<section style="width: 100%">
|
||||
<article>
|
||||
<div style="display:inline-block; padding-bottom: 20px">
|
||||
Times in ms
|
||||
</div>
|
||||
<div style="display:inline-block">
|
||||
<canvas id="times" width="800" height="400"></canvas>
|
||||
</div>
|
||||
<div style="display:inline-block">
|
||||
<ul id="legendList">
|
||||
</ul>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
<h3 style="margin-left: 440px">Object Set Size</h3>
|
||||
<script>
|
||||
var benchmark;
|
||||
var goButton = document.getElementById('go');
|
||||
|
||||
var objectCountInput = document.getElementById('objectCountInput');
|
||||
var mutationCountInput = document.getElementById('mutationCountInput');
|
||||
|
||||
var statusSpan = document.getElementById('status');
|
||||
|
||||
var timesCanvas = document.getElementById('times');
|
||||
var benchmarkSelect = document.getElementById('benchmarkSelect');
|
||||
var configSelect = document.getElementById('configSelect');
|
||||
|
||||
function changeBenchmark() {
|
||||
benchmark = window[benchmarkSelect.value];
|
||||
configSelect.textContent = '';
|
||||
benchmark.configs.forEach(function(config) {
|
||||
var option = document.createElement('option');
|
||||
option.textContent = config;
|
||||
configSelect.appendChild(option);
|
||||
});
|
||||
|
||||
document.title = benchmarkSelect.value;
|
||||
}
|
||||
|
||||
benchmarkSelect.addEventListener('change', changeBenchmark);
|
||||
|
||||
changeBenchmark();
|
||||
var ul = document.getElementById('legendList');
|
||||
var colors = [
|
||||
[0, 0, 255],
|
||||
[138,43,226],
|
||||
[165,42,42],
|
||||
[100,149,237],
|
||||
[220,20,60],
|
||||
[184,134,11]
|
||||
].map(function(rgb) {
|
||||
return 'rgba(' + rgb.join(',') + ',.7)';
|
||||
});
|
||||
|
||||
goButton.addEventListener('click', function() {
|
||||
goButton.disabled = true;
|
||||
goButton.textContent = 'Running...';
|
||||
ul.textContent = '';
|
||||
|
||||
var objectCounts = objectCountInput.value.split(',').map(function(val) {
|
||||
return Number(val);
|
||||
});
|
||||
var mutationCounts = mutationCountInput.value.split(',').map(function(val) {
|
||||
return Number(val);
|
||||
});
|
||||
|
||||
mutationCounts.forEach(function(count, i) {
|
||||
var li = document.createElement('li');
|
||||
li.textContent = count + ' mutations.'
|
||||
li.style.color = colors[i];
|
||||
ul.appendChild(li);
|
||||
});
|
||||
|
||||
var results = [];
|
||||
|
||||
function benchmarkComplete(times) {
|
||||
timesArray = [];
|
||||
var index = 0;
|
||||
|
||||
|
||||
mutationCounts.forEach(function(mutationCount, i) {
|
||||
timesArray.push([]);
|
||||
objectCounts.forEach(function(objectCount, j) {
|
||||
timesArray[i][j] = times[j][i];
|
||||
});
|
||||
});
|
||||
|
||||
timesCanvas.height = 400;
|
||||
timesCanvas.width = 800;
|
||||
timesCanvas.setAttribute('style', '');
|
||||
|
||||
var ctx = timesCanvas.getContext("2d");
|
||||
new Chart(ctx).Line({
|
||||
labels: objectCounts,
|
||||
datasets: timesArray.map(function(times, i) {
|
||||
return {
|
||||
fillColor: 'rgba(255, 255, 255, 0)',
|
||||
strokeColor: colors[i],
|
||||
pointColor: colors[i],
|
||||
pointStrokeColor: "#fff",
|
||||
data: times
|
||||
};
|
||||
})
|
||||
}, {
|
||||
bezierCurve: false
|
||||
});
|
||||
|
||||
goButton.disabled = false;
|
||||
goButton.textContent = 'Run Benchmarks';
|
||||
statusSpan.textContent = '';
|
||||
}
|
||||
|
||||
function updateStatus(benchmark, mutationCount, count) {
|
||||
statusSpan.textContent = 'Testing: ' +
|
||||
benchmark.objectCount + ' objects, ' +
|
||||
mutationCount + ' mutations ... ' +
|
||||
count + ' runs';
|
||||
}
|
||||
|
||||
var benchmarks = objectCounts.map(function(objectCount) {
|
||||
return new benchmark(configSelect.value, objectCount);
|
||||
});
|
||||
|
||||
Benchmark.all(benchmarks, mutationCounts, updateStatus)
|
||||
.then(benchmarkComplete);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user