render: function()

in jspwiki-war/src/main/scripts/behaviors/GraphBar.js [216:269]

• 35 lines of code
• 18 McCabe index (conditional complexity)

    render: function(el, val, percent){

        var options = this.options,
            size = options.size,
            offset = options.offset,
            color1 = options.color1,
            color2 = options.color2,
            inside = options.textInside,
            isGauge = options.isGauge,
            isProgress = options.isProgress,
            //isHorizontal = options.isHorizontal,
            dom, css;


        //color invertor
        if( isGauge && !color2 && color1 ){ color2 = color1.invert();}


        //color mixer
        var c =color1;
        if( !isProgress && color2 ){ color1 = color1.mix(color2, 100 * (isGauge ? val : percent)); }

        //console.log(c,color1, val, percent, c, c  && c.mix(color2,0),isGauge );

        val = val * 100;


        //first calculate the bar sizes: group-bar, bar1, (optional) bar2
        css = isProgress ?
            [offset + size, val + "%", (100 - val) + "%"] :
                [offset + val / 100 * (/*offset + */ size), "100%" ];


        //then convert sizes to bar css styles
        css = css.map( function(barsize){
            return options.isHorizontal ? {width: barsize} : {height: barsize, width: 20, "vertical-align":"text-bottom"};
        });

        //finally, add colors to the bar1 and bar2 css styles
        if( color1 ){ css[1].backgroundColor = color1.hex; }
        if( isProgress && color2 ){ css[2].backgroundColor = color2.hex; }


        //build dom template
        dom = [options.gbGroup, { styles: css[0] }, [ options.gbBar, {
                styles: css[1],
                text: inside ? el.innerHTML : ""
            } ] ];
        if( inside ){ el.innerHTML = ""; }
        if( isProgress && color2){ dom[2].push( options.gbBar, {styles: css[2]} ); }

        dom.slick().inject(el, el.match("td") ? "top" : "before");

    }