YLShipBuildLandMap/YLShipBuildLandMap.Web/wwwroot/app/main/js/barChart.jquery.js

(function ($) {

    var settings = {};

    $.fn.barChart = function (options) {

        var defaults = {
            vertical: false,
            bars: [],
            hiddenBars: [],
            milestones: [],
            colors: [
                "#f44336", "#e91e63", "#9c27b0", "#673ab7", "#3f51b5",
                "#2196f3", "#03a9f4", "#00bcd4", "#009688", "#4caf50",
                "#8bc34a", "#cddc39", "#ffeb3b", "#ffc107", "#ff9800",
                "#ff5722", "#795548", "#9e9e9e", "#607d8b", "#263238"
            ],
            barColors: {},
            dateFormat: 'DD.MM.YYYY HH:mm',
            barGap: 5,
            totalSumHeight: 25,
            defaultWidth: 40,
            defaultColumnWidth: 65
        };


        settings = $.extend(settings, defaults, options);


        $(this)
            .css('height', settings.height && !settings.vertical ? settings.height : 'auto')
            .addClass('bar-chart')
            .addClass(settings.vertical ? 'bar-chart-vertical' : '')
            .wrap('<div class="bar-chart-wrapper"></div>');

        $.proxy(init, this)();


        this.handler = this;

        return this;
    };


    // init
    function init() {


        settings.maxHeight = settings.vertical ? $(this).width() : ($(this).height() - settings.totalSumHeight);

        settings.maxWidth = settings.vertical ? settings.defaultWidth : $(this).width();

        settings.barGapPercent = settings.barGap / (settings.maxWidth / 100);


        var bars = colorizeBars(settings.bars, settings.colors);

        var columns = groupByKey(bars, settings.hiddenBars);


        $.proxy(drawY, this)(columns);

        console.time('draw X');

        $.proxy(drawX, this)(columns);

        console.timeEnd('draw X');

        $.proxy(drawTooltip, this)();

        $.proxy(drawLegend, this)(bars, settings.hiddenBars);

        $.proxy(subscribe_tooltip, this)();

        $.proxy(subscribe_legend, this)();

        return this;
    };

    // up to date
    function update() {

        var bars = colorizeBars(settings.bars, settings.colors);

        var columns = groupByKey(bars, settings.hiddenBars);


        $(this).html('');


        $.proxy(drawY, this)(columns);

        $.proxy(drawX, this)(columns);

        return this;
    };


    // group bar values by keys
    function groupByKey(bars, hiddenBars) {

        var hiddenBarsArray = hiddenBars || [];

        var columns = {};

        bars.forEach(function (bar) {

            if (hiddenBarsArray.indexOf(bar.name) !== -1) {
                return true;
            }

            bar.values.forEach(function (value) {
                columns[value[0]] = columns[value[0]] || [];
                columns[value[0]].push({value: parseFloat(value[1]), name: bar.name, color: bar.color});
            });

        });

        return columns;
    };

    // set bars colors
    function colorizeBars(bars, colors) {

        colorIndex = 0;

        bars.forEach(function (bar) {

            if (typeof bar.color === 'undefined') {
                bar.color = colors[colorIndex];
            }

            colorIndex++;

            if (colorIndex >= colors.length) {
                colorIndex = 0;
            }

        });

        return bars;
    };

    // find max value through all bars
    function findMax(columns) {

        var result = 0;

        for (var i in columns) {

            if (columns.hasOwnProperty(i)) {

                var max = 0;

                columns[i].forEach(function (value) {
                    max += value.value;
                });

                if (max > result) {
                    result = max;
                }

            }

        }

        return result;
    };

    // find total sum of all values through all bars
    function totalSum(columns) {

        var result = 0;

        for (var i in columns) {

            if (columns.hasOwnProperty(i)) {

                columns[i].forEach(function (value) {
                    result += value.value;
                });

            }

        }

        return result;
    };

    // draw y-milestones
    function drawY(columns) {

        var $container = $('<div />').addClass(settings.vertical ? 'bar-x' : 'bar-y');

        var max = findMax(columns);

        var milestonesCount = Math.round(max).toString().length;
        var multiplier = Math.pow(10, milestonesCount - 1);

        max = settings.vertical ? Math.ceil(max) : Math.ceil(max / multiplier) * multiplier;

        var step = (max / 5);

        if (step < 1) {
            step = 1;
        }

        var top = 0;
        var value = 0;

        while (top < settings.maxHeight) {

            top = (value * settings.maxHeight) / max;

            var gridValue = value;

            if (gridValue < 1000) {
                gridValue = gridValue.toFixed(2);
            }

            if (gridValue >= 1000 && gridValue <= 1000000) {
                gridValue = (gridValue / 1000).toFixed(2) + ' K';
            }

            if (gridValue >= 1000000 && gridValue <= 1000000000) {
                gridValue = (gridValue / 1000000).toFixed(2) + ' M';
            }

            var $gridValue = $('<div />')
                .addClass(settings.vertical ? 'bar-x-value' : 'bar-y-value')
                .css(settings.vertical ? {left: top} : {bottom: top})
                .html('<div>' + gridValue + '</div>');

            $container.append($gridValue);

            value += step;

        }

        $(this).append($container);

        return this;
    };

    // draw x-values
    function drawX(columns) {

        var keys = Object.keys(columns);

        var columnsCount = keys.length;

        var columnWidth = Math.round((settings.maxWidth - settings.barGap * (columnsCount + 1)) / columnsCount);

        if (settings.vertical) {
            columnWidth = settings.defaultWidth;
        }

        var max = findMax(columns);

        var total = totalSum(columns);

        if (!settings.vertical) {

            if (columnWidth < settings.defaultColumnWidth) { //settings.defaultColumnWidth = 65

                $(this).addClass('bar-titles-vertical');

            }

            columnWidth = (columnWidth / (settings.maxWidth / 100));

        }


        keys.sort(function (a, b) {
            return parseInt(a) - parseInt(b);
        });


        for (var k in keys) {

            if (keys.hasOwnProperty(k)) {

                var key = keys[k];

                var column = columns[key];

                var localMax = 0;
                var localSum = 0;
                var localMaxHeight = 0;

                //sort values desc
                column.sort(function (a, b) {
                    return b.value - a.value;
                });

                column.forEach(function (bar) {
                    localMax = bar.value > localMax ? bar.value : localMax;
                    localSum += bar.value;
                });

                localMaxHeight = (localMax * settings.maxHeight / max);

                var text = key.toString()

                //it's timestamp, so let's format it
                if (text.length === 10 && text == parseInt(text)) {
                    text = formatDate(new Date(text * 1000));
                }

                var $barTitle = $('<div />').addClass('bar-title').html(text);

                var $barValue = $('<div />')
                    .addClass('bar-value')
                    .css(
                        settings.vertical ?
                            {width: localMaxHeight} :
                            {height: localMaxHeight}
                    );

                var $bar = $('<div />')
                    .addClass('bar')
                    .css(
                        settings.vertical ?
                            {height: columnWidth} :
                            {width: columnWidth + '%', marginLeft: settings.barGapPercent + '%'}
                    )
                    .attr({'data-id': key})
                    .append($barValue)
                    .append($barTitle);

                $(this).append($bar);

                var bottom = 0;
                var previousBottom = 0;
                var previousHeight = 0;

                console.time('bar lines');

                var appendixArray = [];

                column.forEach(function (bar) {

                    var height = localMaxHeight / localMax * bar.value;
                    var percentage = (bar.value / (total / 100)).toFixed(2);

                    bottom = previousHeight + previousBottom;

                    $appendix = $('<div />')
                        .addClass('bar-line')
                        .attr({
                            'data-percentage': (percentage + '%'),
                            'data-name': bar.name,
                            'data-value': bar.value
                        })
                        .css(
                            settings.vertical ?
                                {background: bar.color, width: height, left: bottom} :
                                {background: bar.color, height: height, bottom: bottom}
                        );

                    $barValue.append($appendix);

                    previousBottom = bottom;
                    previousHeight = height;

                });

                console.timeEnd('bar lines');

                var tmpSum = localSum.toString().split('.');

                if (tmpSum[0].length >= 5) {
                    tmpSum[0] = tmpSum[0].replace(/(\d)(?=(\d{3})+$)/g, '$1 ');
                }

                localSum = tmpSum.join('.');

                $barValueSum = $('<div />')
                    .addClass('bar-value-sum')
                    .css(
                        settings.vertical ?
                            {left: previousBottom + previousHeight} :
                            {bottom: previousBottom + previousHeight}
                    )
                    .html(localSum); // + <i> currency </i>

                $bar.append($barValueSum);

            }

        }

        return this;
    };

    // adds tooltip markup to dom
    function drawTooltip() {

        if ($(this).find('.tooltip').length === 0) {

            $(this).append(
                '<div class="tooltip tooltip-mobile hidden" style="top: 0; left: 0;">' +
                '<div class="tooltip-title">{title}</div> ' +
                '<div class="tooltip-change">{value}</div> ' +
                '</div>'
            );

        }

        return this;
    };

    // legend
    function drawLegend(bars, hiddenBars) {

        var $legend = $('<div />').addClass('bar-legend legend');

        $(this).parent().append($legend);

        bars.forEach(function (bar) {

            var $checkbox = $('<div />')
                .addClass('checkbox')
                .addClass(hiddenBars.indexOf(bar.name) === -1 ? 'checked' : '')
                .css({'background-color': bar.color});

            var $legendItem = $('<div />')
                .addClass('legend-item')
                .css({color: bar.color})
                .html(bar.name)

            var $legendItemWrapper = $('<div />')
                .addClass('legend-item-wrapper')
                .append($checkbox)
                .append($legendItem);

            $legend.append($legendItemWrapper);

        });

        return this;
    };

    // mousemove and mouseleave pon bar
    function subscribe_tooltip() {

        var $barLines = $(this).find('.bar-line');
        var $tooltip = $(this).find('.tooltip');

        $barLines.on('mousemove', function (e) {

            $(this).parents('.bar').addClass('bar-active');

            $tooltip.css({
                top: e.pageY - 65,		// + $(this).offset().top
                left: e.pageX - 65		// + $(this).offset().left
            });

            $tooltip.find('.tooltip-title').html($(this).data('name'));
            $tooltip.find('.tooltip-change').html($(this).data('value') + '<small>' + $(this).data('percentage') + '</small>');

            $tooltip.removeClass('hidden');

        });

        $barLines.on('mouseleave', function (e) {

            $tooltip.addClass('hidden');

            $(this).parents('.bar').removeClass('bar-active');

        });

        return this;
    };

    // checkbox click and double click
    function subscribe_legend() {

        /**
         * emulate single and double clicks pon same element
         */
        var clicks = 0;
        var timer = null;
        var delay = 200;

        var $self = $(this);

        var $legendItemWrapper = $(this).parent().find('.legend-item-wrapper');


        $legendItemWrapper.on('mouseleave', function () {

            var barName = $(this).find('.legend-item').html();

            var $bar = $('.bar-line[data-name="' + barName + '"]');

            $bar.removeClass('active');

        });


        $legendItemWrapper.on('mouseenter', function () {

            var barName = $(this).find('.legend-item').html();

            var $bar = $('.bar-line[data-name="' + barName + '"]');

            $bar.addClass('active');

        });


        $legendItemWrapper.on('click', function (e) {

            e.preventDefault();

            var $this = $(this);

            clicks++;

            if (clicks === 1) {

                timer = setTimeout(function () {

                    clearTimeout(timer);

                    var name = $this.find('.legend-item').html();

                    var isChecked = $this.find('.checkbox').hasClass('checked');

                    $('.bar-line[data-name="' + name + '"]').toggleClass('hidden');

                    $this.find('.checkbox').toggleClass('checked');


                    if (isChecked) {

                        settings.hiddenBars.push(name);

                    } else {

                        var index = settings.hiddenBars.indexOf(name);

                        if (index >= 0) {
                            settings.hiddenBars.splice(index, 1);
                        }

                    }

                    $.proxy(update, $self)();

                    clicks = 0;

                }, delay);

            } else {

                clearTimeout(timer);

                var $checkbox = $(this).find('.checkbox');

                var $checkboxes = $(this).parent().find('.checkbox.checked');

                var checkedCount = $checkboxes.length;

                if (checkedCount === 1 && $checkbox.hasClass('checked')) {

                    $(this).parent().find('.checkbox').addClass('checked');

                } else {

                    $(this).parent().find('.checkbox').removeClass('checked');

                    $checkbox.addClass('checked');

                }

                var checkboxes = [];

                $(this).parent().find('.checkbox:not(.checked)').each(function () {

                    checkboxes.push($(this).next('.legend-item').html());

                });

                settings.hiddenBars = checkboxes;

                //self.update();
                $.proxy(update, $self)();

                clicks = 0;

            }

        });


        $legendItemWrapper.on('dblclick', function (e) {

            e.preventDefault();

        });

        return this;
    };

    // dateformat to dd/mm/yyyy
    function formatDate(dt) {
        var dd = dt.getDate();
        var mm = dt.getMonth() + 1;
        var yyyy = dt.getFullYear().toString().substring(2);
        return [dd, mm, yyyy].join('.');
    };

}(jQuery));