liquidDataBarAddIn.js

/*
* Liquid Data Bar (AddIn)
*
* This modified dataBar addIn will calculate the widths of the bar as percentage based,
* and will inherently adapt to the container's size, fixing any issues with table while
* rendering, a common problem with dataBar, and also adapting to viewport/container resize 
* in the process.
*
* Options:
* - The same as dataBar, with width now accepting a css-like string (see Raphael docs)
*/  
Dashboards.registerAddIn("Table", "colType", new AddIn({
    name: "liquidDataBar",
    label: "Liquid Data Bar",
    defaults: {
        width: '99%',
        height: undefined,
        startColor: "#55A4D6",
        endColor: "#448FC8",
        backgroundImage: undefined,
        stroke: null,
        max: undefined,
        min: undefined,
        includeValue: false,
        absValue: true,
        valueFormat: function(v, format, st, opt) {
            return "" + sprintf(format || "%.1f",v) ;
        }
    },
    init: function(){
        $.fn.dataTableExt.oSort[this.name+'-asc'] = $.fn.dataTableExt.oSort['numeric-asc'];
        $.fn.dataTableExt.oSort[this.name+'-desc'] = $.fn.dataTableExt.oSort['numeric-desc'];
    },
    implementation: function(tgt, st, opt) {
        var tblMax = Math.max.apply(Math,st.tableData.map(function(e){
            return e[st.colIdx];
        })),
            tblMin = Math.min.apply(Math,st.tableData.map(function(e){
                return e[st.colIdx];
            }));

        var optMax = parseFloat(opt.max);
        var optMin = parseFloat(opt.min);

        var isValidNumber = function(nr){
            return _.isNumber(nr) && isFinite(nr);
        };

        var validMaxValue = isValidNumber(optMax);
        var validMinValue = isValidNumber(optMin);

        if (opt.absValue){
            var max = (validMaxValue == true) ? optMax : Math.max( Math.abs(tblMax), Math.abs(tblMin) ),
                min = (validMinValue == true) ? optMin : 0,
                val = Math.abs(parseFloat(st.value));
            min = Math.max(min,0);
        }else{
            var max = (validMaxValue == true) ? optMax : Math.max(0, tblMax),
                min = (validMinValue == true) ? optMin : Math.min(0, tblMin),
                val = parseFloat(st.value);
        }

        var $cell = $(tgt);
        $cell.empty();
        var $ph =$("<div>&nbsp;</div>").addClass('dataBarContainer').appendTo($cell);
        var wtmp = opt.width;
        var htmp = opt.height || $ph.height();

        var leftVal  = Math.min(val,0),
            rightVal = Math.max(val,0);

        // xx = x axis
        var paper = Raphael( $ph.get(0), wtmp, htmp),
            xx = pv.Scale.linear(min,max).range(0,100),
            c = paper.rect(xx(leftVal) + '%', 0 +'%', (xx(rightVal)-xx(leftVal)) + '%', '100%');

        c.attr({
            fill: opt.backgroundImage?"url('"+opt.backgroundImage+"')":"90-"+opt.startColor + "-" + opt.endColor,
            stroke: opt.stroke,
            title: "Value: "+ st.value
        });

        if(opt.includeValue) {
            var $valph = $("<span></span>").addClass('value').append(opt.valueFormat(st.value, st.colFormat, st, opt));
            $valph.appendTo($ph);
        }
    }
}));