BenchmarkIHM.js : understand benchmarkJS result with simple IHM

benchmarkihm.js

var BenchmarkIHM = (function() {
    'use strict';

    function Test(benchmarkTest) {
        this.name = this.getName(benchmarkTest);
        this.pctMOE = this.getPctMOE(benchmarkTest);
        this.opsSec = this.getOpsSec(benchmarkTest);
        this.opsSecMin = ~~(this.opsSec * (1 - this.pctMOE / 100));
        this.opsSecMax = ~~(this.opsSec * (1 + this.pctMOE / 100));
        this.pctMin = null;
        this.pct = null;
        this.pctMax = null;
        this.pctSlowerFirstTest = null;
    }

    Test.prototype.getName = function(benchmarkTest) {
        return benchmarkTest.name;
    }

    Test.prototype.getPctMOE = function(benchmarkTest) {
        return Number.parseFloat(benchmarkTest.stats.rme.toFixed(2));
    }

    Test.prototype.getOpsSec = function(benchmarkTest) {
        return ~~(benchmarkTest.hz);
    }

    function AnalyseTests(arrBenchmarkTests) {

        this.tests = [];
        for (var i in arrBenchmarkTests) {
            var benchmarkTest = arrBenchmarkTests[i];
            if (benchmarkTest.stats == undefined) // not a test
                continue;
            var test = new Test(benchmarkTest);
            this.tests.push(test);
        }

        if (this.tests.length == 0) {
            return;
        }

        this.sortByOpsSecMax();
        this.assignPercentage();
    }

    AnalyseTests.prototype.getMinOpsSecTest = function() {
        var min = null;
        for (var i in this.tests) {
            var test = this.tests[i];
            if (min == null || test.opsSecMin < min) {
                min = test.opsSecMin;
            }
        }
        return min;
    }

    AnalyseTests.prototype.getMaxOpsSecTest = function() {
        var max = null;
        for (var i in this.tests) {
            var test = this.tests[i];
            if (max == null || test.opsSecMax > max) {
                max = test.opsSecMax;
            }
        }
        return max;
    }

    AnalyseTests.prototype.assignPercentage = function() {

        var minOpsSecTest = this.getMinOpsSecTest();
        var maxOpsSecTest = this.getMaxOpsSecTest();

        var firstTest = this.tests[0];

        for (var i in this.tests) {
            var test = this.tests[i];
            test.pct = this.getPercentage(test.opsSec, minOpsSecTest, maxOpsSecTest);
            test.pctMin = this.getPercentage(test.opsSecMin, minOpsSecTest, maxOpsSecTest);
            test.pctMax = this.getPercentage(test.opsSecMax, minOpsSecTest, maxOpsSecTest);
            test.pctSlowerFirstTest = ~~(firstTest.pctMin / test.pctMin * 100);
        }
    }

    AnalyseTests.prototype.getPercentage = function(val, valMin, valMax) {
        if (valMax == valMin) {
            return 100;
        }
        //var pct = (val - valMin)  / (valMax - valMin) * 100;
        var pct = val / valMax * 100;
        return ~~(pct * 100) / 100;
    }

    AnalyseTests.prototype.sortByOpsSecMax = function() {
        this.tests.sort(function(a, b) {
            return b.opsSecMax - a.opsSecMax;
        });
    }

    AnalyseTests.prototype.showResult = function(idDomElement) {

        var domBenchmarkTests = document.getElementById(idDomElement);
        var html = "";

        for (var i in this.tests) {
            var test = this.tests[i];

            html += "<h3>#" + (parseInt(i) + 1) + " " + test.name + "</h3>" +
                "<p>" +
                ((i > 0) ? (test.pctSlowerFirstTest + "% slower than first test (by removing the margin of error)<br/>") : ("")) +
                "Operations per second (higher is better) : <span style='warning'>" + test.opsSec + "</span><br/>" +
                "Marge of error (More the rate is low more it is reliable) : <span style='info'>" + test.pctMOE + "%</span>" +
                "</p>" +
                "<div class='progress'>" +
                "<div class='progress-bar' style='width:" + test.pctMin + "%'>" +
                "</div>" +
                "<div class='progress-bar progress-bar-info' style='width:" + (test.pctMax - test.pctMin) + "%'>" +
                "</div>" +
                "</div>"
        }


        domBenchmarkTests.innerHTML = html;
    }

    var showResult = function(domId, arrBenchmarkTests) {
        new AnalyseTests(arrBenchmarkTests).showResult(domId);
    }

    return {
        showResult: showResult
    }
})();

example.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <script src="https://cdn.jsdelivr.net/lodash/4.17.4/lodash.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/platform/1.3.4/platform.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/2.1.4/benchmark.min.js"></script>
      <script src="benchmarkihm.js"></script>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
   </head>
   <body>
      <div class="panel panel-default" style="width:1000px; margin : auto;">
         <div class="panel-body">
            <div id="benchmarkIHM"></div>
         </div>
      </div>
      <canvas id="canvas">
      </canvas>
   </body>
   <script type="text/javascript">
	   
      Benchmark.prototype.setup = function() {
      
      	var canvas = document.getElementById('canvas');
      	var context = canvas.getContext('2d');
      
      	canvas.height = 500;
      	canvas.width = 1000;
      
      	context.fillStyle = 'black';
      	context.fillRect(0, 0, canvas.width, canvas.height);
      
      };
      
      
      var suite = new Benchmark.Suite;
      
      // add tests
      suite.add('fillRect', function() {
      	context.fillStyle = 'rgb(255,255,255)';
      	context.fillRect(0, 0, canvas.width, canvas.height);
      })
      .add('clearRect', function() {
      	context.clearRect(0, 0, canvas.width, canvas.height);
      })
      .add('canvas.width', function() {
      	canvas.width = canvas.width;
      })
      // add listeners
      .on('cycle', function(event) {
      	console.log(String(event.target));
      })
      .on('complete', function() {
      
      	console.log('Fastest is ' + this.filter('fastest').map('name'));
      
      	var benchmarkTests = this.filter('successful');
      	BenchmarkIHM.showResult("benchmarkIHM", benchmarkTests);
      
      })
      // run async
      .run({ 'async': true });
      
   </script>
</html>

info.md

@Jsfiddle example