<commit_before>$(main);

function main() {
    var type = 'ping';
    var category = 'latency';
    var range = 3;
    var data;

    $.getJSON('./data.json', function(d) {
        var $e = $('.latencies');

        data = d;

        createControls($e);
        updateChart($e);
        createLegend($e, data.latency);
    });

    function createControls($p) {
        var $e = $('<div>', {'class': 'controls'}).appendTo($p);

        createTypes($e);
        createRanges($e);
        createCategories($e);
    }

    function createTypes($p, data) {
        $controls($p, 'types', 'type', {
            'ping': function() {
                type = 'ping';

                updateChart($p);
            },
            'http': function() {
                type = 'http';

                updateChart($p);
            },
            'https': function() {
                type = 'https';

                updateChart($p);
            }
        });
    }

    function createRanges($p, data) {
        $controls($p, 'ranges', 'range', {
            '3 days': function() {
                range = 3;

                updateChart($p);
            },
            '7 days': function() {
                range = 7;

                updateChart($p);
            }/*,
            '30 days': function() {
                console.log('change to 30 days view');
            }*/
        });
    }

    function createCategories($p, data) {
        $controls($p, 'categories', 'category', {
            'latency': function() {
                category = 'latency';

                updateChart($p);
            },
            'uptime': function() {
                category = 'uptime';

                updateChart($p);
            }
        });
    }

    function $controls($p, containerClass, itemClass, controls) {
        var $e = $('<div>', {'class': 'controlsContainer ' + containerClass}).appendTo($p);

        for(var control in controls) $control($e, itemClass, control, controls[control]);

        $('.control', $e).first().addClass('selected');
    }

    function $control($p, type, name, handler) {
        var $e = $('<a>', {'class': 'panel control ' + type, href: '#'}).text(name).on('click', function(e) {
            e.preventDefault();

            $e.siblings().removeClass('selected');
            $e.addClass('selected');

            handler(e);
        }).appendTo($p);
    }

    function updateChart($p) {
        var $c = $('canvas.chart:first');

        if(!$c.length) $c = $('<canvas>', {'class': 'chart'}).attr({width: 1000, height: 400}).appendTo($p);

        var ctx = $c[0].getContext('2d');
        new Chart(ctx).Line(getData(), {
            datasetFill: false,
            animation: false
        });
    }

    function createLegend($p, data) {
        var providerNames = getProviderNames(data).sort();<commit_msg>Update chart width based on window width<commit_after>$(main);

function main() {
    var type = 'ping';
    var category = 'latency';
    var range = 3;
    var data;

    $.getJSON('./data.json', function(d) {
        var $e = $('.latencies');
        var update = updateChart.bind(undefined, $e);

        data = d;

        $(window).on('resize', update);

        createControls($e);
        createLegend($e, data.latency);
        update();
    });

    function createControls($p) {
        var $e = $('<div>', {'class': 'controls'}).appendTo($p);

        createTypes($e);
        createRanges($e);
        createCategories($e);
    }

    function createTypes($p, data) {
        $controls($p, 'types', 'type', {
            'ping': function() {
                type = 'ping';

                updateChart($p);
            },
            'http': function() {
                type = 'http';

                updateChart($p);
            },
            'https': function() {
                type = 'https';

                updateChart($p);
            }
        });
    }

    function createRanges($p, data) {
        $controls($p, 'ranges', 'range', {
            '3 days': function() {
                range = 3;

                updateChart($p);
            },
            '7 days': function() {
                range = 7;

                updateChart($p);
            }/*,
            '30 days': function() {
                console.log('change to 30 days view');
            }*/
        });
    }

    function createCategories($p, data) {
        $controls($p, 'categories', 'category', {
            'latency': function() {
                category = 'latency';

                updateChart($p);
            },
            'uptime': function() {
                category = 'uptime';

                updateChart($p);
            }
        });
    }

    function $controls($p, containerClass, itemClass, controls) {
        var $e = $('<div>', {'class': 'controlsContainer ' + containerClass}).appendTo($p);

        for(var control in controls) $control($e, itemClass, control, controls[control]);

        $('.control', $e).first().addClass('selected');
    }

    function $control($p, type, name, handler) {
        var $e = $('<a>', {'class': 'panel control ' + type, href: '#'}).text(name).on('click', function(e) {
            e.preventDefault();

            $e.siblings().removeClass('selected');
            $e.addClass('selected');

            handler(e);
        }).appendTo($p);
    }

    function updateChart($p) {
        var $c = $('canvas.chart:first');
        var width = $p.width();
        var height = 400;

        if(!$c.length) $c = $('<canvas>', {'class': 'chart'}).appendTo($p);

        $c.attr({width: width, height: height});

        var ctx = $c[0].getContext('2d');
        new Chart(ctx).Line(getData(), {
            datasetFill: false,
            animation: false
        });
    }

    function createLegend($p, data) {
        var providerNames = getProviderNames(data).sort();
{'fraction_non_alphanumeric': 0.175910173528411, 'fraction_numerical': 0.005444028581150051, 'mean_word_length': 1.6339605734767024, 'pattern_counts': {'":': 0, '<': 11, '<?xml version=': 0, '>': 11, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '719530', 'n_tokens_mistral': 1718, 'n_tokens_neox': 1619, 'n_words': 352}