web/js/dashboard.js


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
pre { line-height: 125%; }
td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
span.linenos { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
.highlight .hll { background-color: #ffffcc }
.highlight .c { color: #888888 } /* Comment */
.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
.highlight .k { color: #008800; font-weight: bold } /* Keyword */
.highlight .ch { color: #888888 } /* Comment.Hashbang */
.highlight .cm { color: #888888 } /* Comment.Multiline */
.highlight .cp { color: #cc0000; font-weight: bold } /* Comment.Preproc */
.highlight .cpf { color: #888888 } /* Comment.PreprocFile */
.highlight .c1 { color: #888888 } /* Comment.Single */
.highlight .cs { color: #cc0000; font-weight: bold; background-color: #fff0f0 } /* Comment.Special */
.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
.highlight .ge { font-style: italic } /* Generic.Emph */
.highlight .ges { font-weight: bold; font-style: italic } /* Generic.EmphStrong */
.highlight .gr { color: #aa0000 } /* Generic.Error */
.highlight .gh { color: #333333 } /* Generic.Heading */
.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
.highlight .go { color: #888888 } /* Generic.Output */
.highlight .gp { color: #555555 } /* Generic.Prompt */
.highlight .gs { font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #666666 } /* Generic.Subheading */
.highlight .gt { color: #aa0000 } /* Generic.Traceback */
.highlight .kc { color: #008800; font-weight: bold } /* Keyword.Constant */
.highlight .kd { color: #008800; font-weight: bold } /* Keyword.Declaration */
.highlight .kn { color: #008800; font-weight: bold } /* Keyword.Namespace */
.highlight .kp { color: #008800 } /* Keyword.Pseudo */
.highlight .kr { color: #008800; font-weight: bold } /* Keyword.Reserved */
.highlight .kt { color: #888888; font-weight: bold } /* Keyword.Type */
.highlight .m { color: #0000DD; font-weight: bold } /* Literal.Number */
.highlight .s { color: #dd2200; background-color: #fff0f0 } /* Literal.String */
.highlight .na { color: #336699 } /* Name.Attribute */
.highlight .nb { color: #003388 } /* Name.Builtin */
.highlight .nc { color: #bb0066; font-weight: bold } /* Name.Class */
.highlight .no { color: #003366; font-weight: bold } /* Name.Constant */
.highlight .nd { color: #555555 } /* Name.Decorator */
.highlight .ne { color: #bb0066; font-weight: bold } /* Name.Exception */
.highlight .nf { color: #0066bb; font-weight: bold } /* Name.Function */
.highlight .nl { color: #336699; font-style: italic } /* Name.Label */
.highlight .nn { color: #bb0066; font-weight: bold } /* Name.Namespace */
.highlight .py { color: #336699; font-weight: bold } /* Name.Property */
.highlight .nt { color: #bb0066; font-weight: bold } /* Name.Tag */
.highlight .nv { color: #336699 } /* Name.Variable */
.highlight .ow { color: #008800 } /* Operator.Word */
.highlight .w { color: #bbbbbb } /* Text.Whitespace */
.highlight .mb { color: #0000DD; font-weight: bold } /* Literal.Number.Bin */
.highlight .mf { color: #0000DD; font-weight: bold } /* Literal.Number.Float */
.highlight .mh { color: #0000DD; font-weight: bold } /* Literal.Number.Hex */
.highlight .mi { color: #0000DD; font-weight: bold } /* Literal.Number.Integer */
.highlight .mo { color: #0000DD; font-weight: bold } /* Literal.Number.Oct */
.highlight .sa { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Affix */
.highlight .sb { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Backtick */
.highlight .sc { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Char */
.highlight .dl { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Delimiter */
.highlight .sd { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Doc */
.highlight .s2 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Double */
.highlight .se { color: #0044dd; background-color: #fff0f0 } /* Literal.String.Escape */
.highlight .sh { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Heredoc */
.highlight .si { color: #3333bb; background-color: #fff0f0 } /* Literal.String.Interpol */
.highlight .sx { color: #22bb22; background-color: #f0fff0 } /* Literal.String.Other */
.highlight .sr { color: #008800; background-color: #fff0ff } /* Literal.String.Regex */
.highlight .s1 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Single */
.highlight .ss { color: #aa6600; background-color: #fff0f0 } /* Literal.String.Symbol */
.highlight .bp { color: #003388 } /* Name.Builtin.Pseudo */
.highlight .fm { color: #0066bb; font-weight: bold } /* Name.Function.Magic */
.highlight .vc { color: #336699 } /* Name.Variable.Class */
.highlight .vg { color: #dd7700 } /* Name.Variable.Global */
.highlight .vi { color: #3333bb } /* Name.Variable.Instance */
.highlight .vm { color: #336699 } /* Name.Variable.Magic */
.highlight .il { color: #0000DD; font-weight: bold } /* Literal.Number.Integer.Long */P

"Jag får ingen DHCP!" -- http://files.jocke.no/b/ingen-dhcp.jpg

This directory is a copy of our install, please do not use these directly!
It is provided to show you what the scripts are generating for you…
$(function(){
    if ($('html').is('.ie9')) {
        return;
    }

    Chart.defaults.global.defaultFontSize = 16;
    // Chart.defaults.global.defaultFontFamily = $('body').css('font-family');

    var colours = [
        '#FF4343', // red
        '#F4A140', // orange
        '#FFD000', // yellow
        '#62B356', // green
        '#4D96E5', // blue
        '#B446CA', // purple
        '#7B8B98', // gunmetal
        '#BCB590', // taupe
        '#9C0101', // dark red
        '#CA6D00', // dark orange
        '#C2A526', // dark yellow
        '#1D7710', // dark green
        '#1D64B1', // dark blue
        '#7A108F', // dark purple
        '#3B576E', // dark gunmetal
        '#655F3A'  // dark taupe
    ];

    var setUpLabelsForChart = function(chart){
        var $parent = $(chart.chart.canvas).parent();

        var lasty = 0;
        $.each(chart.config.data.datasets, function(datasetIndex, dataset){
            if (dataset.data.length == 0) {
                return;
            }
            var $label = $('.label[data-datasetIndex="' + datasetIndex + '"]', $parent);
            var latestPoint = chart.getDatasetMeta(datasetIndex).data[ dataset.data.length - 1 ];
            var y = latestPoint._model.y;
            if (y < lasty) {
                y = lasty;
            }
            $label.css({
                top: y
            });
            lasty = y + $label.height() + 8;
        });
    };

    // Returns an array `numberOfPoints` long, where the final item
    // is `radius`, and all the other items are 0.
    var pointRadiusFinalDot = function(numberOfPoints, radius){
        var pointRadius = [];
        for (var i=1; i < numberOfPoints; i++) {
            pointRadius.push(0);
        }
        pointRadius.push(radius);
        return pointRadius;
    };

    // Wraps a row label onto two equal equal lines,
    // if it is longer than 4 words.
    var linewrapLabel = function(text) {
        if ( text.split(' ').length < 5 ) {
            return text;
        }

        var middle = Math.floor(text.length / 2);
        var before = text.lastIndexOf(' ', middle);
        var after = text.indexOf(' ', middle + 1);

        if (before < after) {
            middle = after;
        } else {
            middle = before;
        }

        return [ text.substr(0, middle), text.substr(middle + 1) ];
    };

    var makeSparkline = function makeSparkline($el, valuesStr, color, title){
        var values = [];
        var labels = [];
        $.each(valuesStr.split(' '), function(key, value){
            values.push(Number(value));
            labels.push('');
        });
        var spread = Math.max.apply(null, values) - Math.min.apply(null, values);

        return new Chart($el, {
            type: 'line',
            data: {
                labels: labels,
                datasets: [{
                    data: values,
                    pointRadius: pointRadiusFinalDot(values.length, 4),
                    pointBackgroundColor: color,
                    borderColor: color,
                    lineTension: 0
                }]
            },
            options: {
                layout: {
                    padding: {
                        top: 0,
                        right: 5,
                        bottom: 0,
                        left: 2
                    }
                },
                scales: {
                    xAxes: [{
                        type: "category",
                        display: false
                    }],
                    yAxes: [{
                        type: "linear",
                        display: false,
                        ticks: {
                            min: Math.min.apply(null, values) - (spread * 0.3),
                            max: Math.max.apply(null, values) + (spread * 0.3)
                        }
                    }]
                }
            }
        });
    };

    $('.labelled-sparkline canvas').each(function(){
        makeSparkline(
            $(this),
            $(this).data('values'),
            $(this).data('color')
        );
    });

    $('#chart-all-reports').each(function(){
        var $allReports = $(this),
            labels = $allReports.data('labels'),
            data0 = $allReports.data('values-reports'),
            data1 = $allReports.data('values-fixed');

        var data = [{
              data: data0,
              pointRadius: pointRadiusFinalDot(data0.length, 4),
              pointBackgroundColor: colours[1],
              borderColor: colours[1]
        }];
        if ( data1 ) {
            data.push({
                    data: data1,
                    pointRadius: pointRadiusFinalDot(data1.length, 4),
                    pointBackgroundColor: colours[3],
                    borderColor: colours[3]
            });
        }

        window.chartAllReports = new Chart($allReports, {
            type: 'line',
            data: {
                labels: labels,
                datasets: data
            },
            options: {
                animation: {
                    onComplete: function(){
                        setUpLabelsForChart(this);
                    }
                },
                elements: {
                    line: {
                        cubicInterpolationMode: 'monotone'
                    }
                },
                layout: {
                    padding: {
                        top: 4
                    }
                },
                scales: {
                    xAxes: [{
                        type: 'category',
                        gridLines: {
                            display: false
                        }
                    }],
                    yAxes: [{
                        type: "linear",
                        ticks: {
                            display: false
                        }
                    }]
                },
                onResize: function(chart, size){
                    setUpLabelsForChart(chart);
                }
            }
        });
    });

    $('.js-make-bar-chart').each(function(){
        var $table = $(this);
        var $trs = $table.find('tr');
        var $wrapper = $('<div>').addClass('responsive-bar-chart').insertBefore($table);
        var canvasWidth = $table.attr('data-canvas-width') || 600;
        var rowHeight = $table.attr('data-row-height') || 30;
        var $canvas = $('<canvas>').attr({
            'width': canvasWidth,
            'height': rowHeight * $trs.length
        }).appendTo($wrapper);
        var rowLabels = [];
        var rowValues = [];

        $trs.each(function(){
            rowLabels.push( linewrapLabel($(this).find('th').text()) );
            rowValues.push( parseInt($(this).find('td').text(), 10) );
        });

        for (var l=colours.length, i=l; i<rowLabels.length; i++) {
            colours[i] = colours[i % l];
        }

        var barChart = new Chart($canvas, {
            type: 'horizontalBar',
            data: {
                labels: rowLabels,
                datasets: [{
                    label: "",
                    data: rowValues,
                    backgroundColor: colours
                }]
            },
            options: {
                animation: {
                    onComplete: function(){
                        // Label each bar with the numerical value.
                        var chartInstance = this.chart,
                            ctx = chartInstance.ctx;

                        ctx.font = Chart.helpers.fontString( Chart.defaults.global.defaultFontSize * 0.8, 'bold', Chart.defaults.global.defaultFontFamily);
                        ctx.textBaseline = 'middle';

                        this.data.datasets.forEach(function (dataset, i) {
                            var meta = chartInstance.controller.getDatasetMeta(i);
                            meta.data.forEach(function (bar, index) {
                                var dataValue = dataset.data[index];
                                var width_text = ctx.measureText(dataValue).width;
                                var width_bar = bar._model.x - bar._model.base;
                                var gutter = (bar._model.height - (Chart.defaults.global.defaultFontSize * 0.8)) / 2;
                                var textX;
                                if (width_text + 2 * gutter > width_bar) {
                                    textX = bar._model.x + gutter;
                                    ctx.textAlign = 'left';
                                    ctx.fillStyle = bar._model.backgroundColor;
                                } else {
                                    textX = bar._model.x - gutter;
                                    ctx.textAlign = 'right';
                                    ctx.fillStyle = '#fff';
                                }
                                ctx.fillText( dataValue, textX, bar._model.y );
                            });
                        });
                    }
                },
                scales: {
                    xAxes: [{
                        gridLines: {
                            drawBorder: false,
                            drawTicks: false
                        },
                        ticks: {
                            beginAtZero: true,
                            maxTicksLimit: 11,
                            display: false
                        }
                    }],
                    yAxes: [{
                        gridLines: {
                            display: false
                        }
                    }]
                }
            }
        });

        $table.hide();
    });
});