jquery-progressbarify/table-progressbarify.js at master · robfarr/jquery-progressbarify · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
(function($){

    $.fn.progressbarify = function(args) {

        $(this).each(function(e){

            var table = $(this);
            var tbody = (table.find('tbody').length > 0) ? table.find('tbody') : table;

            args = parseArgs(table, args);

            var values           = getColumnValues(tbody, args.targetColumn);
            var maxValue         = getMaximumColumnValue(values, args.maximum);
            var percentageValues = getPercentageValues(values, maxValue);
            var gradients        = getPercentageBackgroundGradientValues(percentageValues, args.primaryColour, args.secondaryColour);

            applyGradientBackgrounds(tbody, args.targetColumn, gradients);

        });

        function parseArgs(table, args) {

            if(typeof args == "undefined") args = [];

            if(typeof args.primaryColour == "undefined") {
                args.primaryColour = '#31b0d5';
            }

            if(typeof args.secondaryColour == "undefined") {
                args.secondaryColour = 'transparent';
            }

            if(typeof args.maximum == "undefined") {
                args.maximum = false;
            }

            if(typeof args.targetColumn !== "undefined" && args.targetColumn >= 0) {
                args.targetColumn = parseInt(args.targetColumn);
            }else if(typeof table.attr('data-progressbarify') !== "undefined" && table.attr('data-progressbarify') >= 0) {
                args.targetColumn = table.attr('data-progressbarify');
            }else{
                args.targetColumn = 0;
            }

            return args;

        }

        function getColumnValues(table, targetColumn) {
            var values = [];
            $(table).find('tr').each(function() {
                var value = parseFloat($(this).children().eq(targetColumn).text());
                values.push(value);
            });
            return values;
        }

        function getMaximumColumnValue(values, maximum) {
            if(args.maximum) return args.maximum;
            var max = 0;
            for(var i=0; i<values.length; i++) {
                if(values[i] > max) max = values[i];
            }
            return max;
        }

        function getPercentageValues(values, maxValue) {
            return values.map(function(value) {
                return (value / maxValue) * 100;
            });
        }

        function getPercentageBackgroundGradientValues(percentageValues, primaryColour, secondaryColour) {
            return percentageValues.map(function(percentage) {
                percentage = Math.round(percentage);
                if(percentage >= 100) percentage = 100;
                return 'linear-gradient(90deg, ' + primaryColour + ' ' + percentage + '%, ' + primaryColour + ' ' + percentage + '%, ' + secondaryColour + ' ' + percentage + '%)';
            });
        }

        function applyGradientBackgrounds(table, targetColumn, gradients) {
            table.find('tr').each(function(i) {
                $(this).children().eq(targetColumn).css('background-image', gradients[i]);
            });
        }

        return this;

    }

})(jQuery);