RandomSec/src/main/webapp/scripts/util/histogram-widget.js

function HistogramWidget(elmt, options) {
    this._elmt = elmt;
    this._options = options;
    
    this._range = null;
    this._binMatrix = null;
    this._highlight = null;
    
    this._initializeUI();
}

HistogramWidget.prototype.highlight = function(from, to) {
    this._highlight = { from: from, to: to };
    this._update();
};

HistogramWidget.prototype.update = function(min, max, step, binMatrix, from, to) {
    if (typeof min == "undefined" || typeof binMatrix == "undefined" || binMatrix.length === 0 || binMatrix[0].length === 0) {
        this._range = null;
        this._binMatrix = null;
        this._highlight = null;
        
        this._elmt.hide();
    } else {
        this._range = { min: min, max: max, step: step };
        this._binMatrix = binMatrix;
        
        this._peak = 0;
        for (var r = 0; r < binMatrix.length; r++) {
            var row = binMatrix[r];
            for (var c = 0; c < row.length; c++) {
                this._peak = Math.max(this._peak, row[c]);
            }
        }
        
        if (typeof from != "undefined" && typeof to != "undefined") {
            this._highlight = { from: from, to: to };
        }
        
        this._update();
    }
};

HistogramWidget.prototype._update = function() {
    if (this._binMatrix !== null) {
        if (this._highlight !== null) {
            this._highlight.from = Math.max(this._highlight.from, this._range.min);
            this._highlight.to = Math.min(this._highlight.to, this._range.max);
        }
        
        this._elmt.show();
        this._resize();
        this._render();
    }
};

HistogramWidget.prototype._initializeUI = function() {
    this._elmt
        .empty()
        .hide()
        .addClass("histogram-widget")
        .html(
            '<canvas bind="canvas"></canvas>'
        );
        
    this._elmts = DOM.bind(this._elmt);
};

HistogramWidget.prototype._resize = function() {
    this._elmts.canvas.attr("height", "height" in this._options ? this._options.height : 50);
    this._elmts.canvas.attr("width", this._elmts.canvas.width());
};

HistogramWidget.prototype._render = function() {
    var self = this;
    var options = this._options;
    
    var canvas = this._elmts.canvas[0];
    var ctx = canvas.getContext('2d');
    ctx.fillStyle = "white";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    
    ctx.save();
    ctx.translate(0, canvas.height);
    ctx.scale(1, -1);
    
        var stepPixels = canvas.width / this._binMatrix[0].length;
        var stepScale = stepPixels / this._range.step;
        
        /*
         *  Draw axis
         */
        ctx.save();
        ctx.strokeStyle = "emptyBinColor" in options ? options.emptyBinColor : "#faa";
        ctx.lineWidth = 1;
        ctx.moveTo(0, 0);
        ctx.lineTo(canvas.width, 0);
        ctx.stroke();
        ctx.restore();
    
        /*
         *  Draw bins
         */
        var makeColor = function(i) {
            var n = Math.floor(15 * (self._binMatrix.length - i) / self._binMatrix.length);
            var h = n.toString(16);
            return "#" + h + h + h;
        };
        var renderRow = function(row, color) {
            ctx.save();
            ctx.lineWidth = 0;
            ctx.fillStyle = color;
            for (var c = 0; c < row.length; c++) {
                var x = self._range.min + c * self._range.step;
                var y = row[c];
                if (y > 0) {
                    var left = c * stepPixels;
                    var width = Math.ceil(stepPixels);
                    var height = Math.ceil(y * canvas.height / self._peak);
                    
                    ctx.fillRect(left, 0, width, height);
                }
            }
            ctx.restore();
        };
        for (var r = 0; r < this._binMatrix.length; r++) {
            renderRow(
                this._binMatrix[r], 
                "binColors" in options && r < options.binColors.length ? 
                    options.binColors[r] :
                    makeColor(r)
            );
        }
        
        /*
         *  Draw highlight
         */
        if (this._highlight !== null) {
            ctx.fillStyle = "rgba(192,192,192, 0.5)";
            ctx.globalCompositeOperation = "source-over";
            if (this._highlight.from > this._range.min) {
                ctx.fillRect(
                    0,
                    0,
                    (this._highlight.from - this._range.min) * stepScale,
                    canvas.height
                );
            }
            if (this._highlight.to < this._range.max) {
                ctx.fillRect(
                    (this._highlight.to - this._range.min) * stepScale,
                    0,
                    canvas.width - (this._highlight.to - this._range.min) * stepScale,
                    canvas.height
                );
            }
        }
        
    ctx.restore();
};