<script>
    var chartDesglose1;
    var chartDesglose2;
    var chartPorcentaje;
    var chartCausa;
    var chartEstado;
    var chartEstadisticasCategorias;
    var chartPosicion;
    var chartEstadisticasAgentes1;
    var chartEstadisticasAgentes2;


    $("#tabla1").hide();
    $("#tabla2").hide();
    $("#tabla3").hide();
    $("#tabla4").hide();
    $("#tabla5").hide();
    $("#tabla6").hide();
    $("#tabla7").hide();

    function dIni(date) {
        return date.slice(0, 10);
    }

    function dEnd(date) {

        var fechon = "";

        if (date.slice(13, 23) == "") {

            fechon = date.slice(0, 10);

        } else {

            fechon = date.slice(13, 23);

        }


        return fechon;

    }

    var today = new Date();
    var dd = today.getDate();
    var mm = today.getMonth() + 1; //January is 0!
    var yyyy = today.getFullYear();
    if (dd < 10) {
        dd = '0' + dd;
    }
    if (mm < 10) {
        mm = '0' + mm;
    }
    var today = yyyy + '-' + mm + '-' + dd;
    $('#pickDate').val(today + " - " + today);
    M.toast({
        html: i18n.gettext("Cargando datos, por favor espere") + "."
    });
    var a = document.getElementById('idioma');
    if (a.value == "es") {
        <?php if (defined("BANDERA_ES")) {?>
            document.getElementById('banderaPais').innerHTML = '<span class="flag-icon flag-icon-<?php echo BANDERA_ES; ?>"></span>&nbsp;';
        <?php } else {?>
            document.getElementById('banderaPais').innerHTML = '<span class="flag-icon flag-icon-mx"></span>&nbsp;';
        <?php }?>

    } else {

        document.getElementById('banderaPais').innerHTML = '<span class="flag-icon flag-icon-um"></span>&nbsp;';

    }

    if (localStorage.getItem('background') == "black") {
        document.getElementById('stemen').style.filter = 'invert(100%)'
    }

    function analizaVisualTablas() {
        var active = document.getElementById("selectTablas").value;

        $("#tabla1").hide();
        $("#tabla2").hide();
        $("#tabla3").hide();
        $("#tabla4").hide();
        $("#tabla5").hide();
        $("#tabla6").hide();
        $("#tabla7").hide();
        $("#tabla" + active).addClass("animated fadeInRight");
        $("#tabla" + active).show();
    }
    $(document).ready(function() {


        analizaVisualTablas();
        var je;
        var today = new Date();
        var dd = today.getDate();
        var mm = today.getMonth() + 1; //January is 0!
        var yyyy = today.getFullYear();
        if (dd < 10) {
            dd = '0' + dd;
        }
        if (mm < 10) {
            mm = '0' + mm;
        }
        var today = yyyy + '-' + mm + '-' + dd;
        $('#pickDate').val(today + " - " + today);

        function cambiarAOscuro() {

            for (let i = 0; i < je.length; i++) {
                je[i].classList.remove('white');
                je[i].classList.add('grey');
                je[i].classList.add('lighten-1');
                je[i].style.filter = 'invert(100%)';

            }
        }

        if (localStorage.getItem('background') == "black") {
            je = document.getElementsByClassName('card-panel')
            je = Array.prototype.slice.call(je)
            cambiarAOscuro();
        }


        $.ajax({
            url: 'GrupoDeEntrada/seleccionarIngroups',
            dataType: "text",
            type: 'GET',
            success: function(res) {
                var resp = JSON.parse(res);

                if (resp.Estado == 'ok') {

                    app.gruposEntrada = resp.Ingroups.map(i => ({
                        value: i.id,
                        label: i.Nombre
                    }))

                    setTimeout(() => $("#campanaAgentes").formSelect(), 1000);

                } else {
                    M.toast({
                        html: resp.Descripcion
                    });
                }
            },
            error: function(data) {
                console.log(data);
            }
        });
        var Arreglo = $('select');
        for (var i = 0; i < Arreglo.length; i++) {
            if (Arreglo[i].id != '') {
                $("#" + Arreglo[i].id).formSelect();
            }
        }
        $('.fixed-action-btn').floatingActionButton();

    });
    var puedoRecargar = true;

    function generaURL() {
        const params = {
            grupos: $("#campanaAgentes").val(),
            archived: document.getElementById("archived").checked ? "1" : "0",
        }
        $("#descargaTodo").attr("href", "<?=MODULOS;?>reporteEntrantes/getDialReport?"+$.param(params));
    }
    var app = new Vue({
        el: '#main',
        data: {
            tablaActiva: 1,
            tableResp: {},
            tabla: {},
            tabla2: {},
            ls: localStorage.getItem('background'),
            i18n: i18n,
            tablas: {
                tabla3: {
                    CUMULATIVE: {},
                    CUMANS: {},
                    INT: {},
                    INTERVAL: {},
                    nivelServicio: {},
                },
                tabla4: {
                    Registros: [],
                    Total: 0
                },
                tabla5: {
                    Registros: [],
                    Total: {
                        CALLS: 0,
                        TOTALTIME: 0,
                        AVGTIME: 0,
                        CALLSHOURS: 0
                    }
                },
                tabla6: {
                    Registros: [],
                    Total: 0
                },
                tabla7: [],
                tabla8: {
                    Registros: [],
                    Total: {
                        Agentes: 0,
                        Tiempo: 0,
                        Promedio: 0,
                        Llamadas: 0
                    }
                }

            },
            gruposEntrada: [],
        },
        methods: {
            nivelMod: function() {
                return parseFloat(this.nivel).toFixed(2);
            },
            checaVE(valor) {

                var palabron = '';

                switch (valor) {
                    case "CALLER":
                        palabron = "Colgo el cliente";
                        break;
                    case "AGENT":
                        palabron = "Colgo el agente";
                        break;
                    case "QUEUETIMEOUT":
                        palabron = "Tiempo excedido";
                        break;
                    case "ABANDON":
                        palabron = "Abandonadas";
                        break;
                    case "NONE":
                        palabron = "Desconocido";
                        break;

                    default:
                        palabron = valor;
                        break;
                }

                return palabron;
            },
            formatea2(valor) {

                var palabron = '';

                switch (valor) {
                    case "CALLER":
                        palabron = "comunicante";
                        break;
                    case "AGENT":
                        palabron = "Agente";
                        break;
                    case "QUEUETIMEOUT":
                        palabron = "T. excedido en cola";
                        break;
                    case "ABANDON":
                        palabron = "Abandonadas";
                        break;
                    case "NONE":
                        palabron = "Vacias";
                        break;

                    default:
                        palabron = valor;
                        break;
                }

                return palabron;
            },
            formatea2(valor) {

                valor = parseInt(valor);

                return valor.toFixed(2);
            },
            formatea0(valor) {
                if (valor == null) {
                    valor = 0;
                }
                valor = parseInt(valor);

                const date = new Date(0);

                date.setUTCSeconds(valor)

                return date.toISOString().split("T").pop().split(".").shift();

            },
            recarga: function() {
                if (puedoRecargar) {
                    $('.barrita').show();
                    $('#escondeme').hide();
                    puedoRecargar = false;
                    const params = {
                        grupos: $("#campanaAgentes").val(),
                        fechaInicial: dIni($("#pickDate").val()),
                        fechaFinal: dEnd($("#pickDate").val()),
                        archived: document.getElementById("archived").checked ? "1" : "0",
                    }

                    $.ajax({
                        url: "reporteEntrantes/inboundReport",
                        type: "GET",
                        dataType: "text",
                        data: params,
                        success: function(response) {
                            puedoRecargar = true;

                            try {
                                var resp = JSON.parse(response);
                            } catch (error) {

                                alert('Fallo consulta');
                                $('#stemen').hide();
                                $('.barrita').hide();
                                $('#escondeme').hide();

                            }





                            if (resp.Estado == 'ok') {

                                app._data.tableResp = resp.datos;
                                app._data.tabla = resp.tabla.tabla1;
                                app._data.tabla2 = resp.tabla.tabla2;

                                Object.keys(resp.tabla).forEach(key => {
                                    const tablaNuevoValor = Object.assign({},resp.tabla[key])
                                    if (key === 'tabla3') {

                                        const totalLlamadas = parseInt(resp.datos.llamadasTotalesEnElGrupo)

                                        const cumulative = Object.assign({}, resp.tabla.tabla3.CUMULATIVE)

                                        // Se obtienen las llamadas abandonadas
                                        // de la respues y se genera su
                                        // acumulado
                                        const drop = Object.assign({}, resp.tabla.tabla2);
                                        const dropKeys = Object.keys(drop)
                                        dropKeys.forEach((key, i) => {
                                            const numAct = +drop[key]
                                            const numPrev = +drop[dropKeys[i-1]]
                                            if (key === 'total') {
                                                drop[key] = (isNaN(numPrev) ?
                                                    0 : numPrev)
                                            } else {
                                                drop[key] =
                                                    (isNaN(numAct) ?
                                                        0 : numAct)
                                                    +
                                                    (isNaN(numPrev) ?
                                                        0 : numPrev)
                                            }
                                        })

                                        tablaNuevoValor.nivelServicio = {}
                                        Object
                                            .keys(cumulative)
                                            .filter(k => !['+90', 'Total'].includes(k))
                                            .forEach(key => {

                                                const nivelServicio = Math.floor(
                                                    100*(((+cumulative[key]) + (+drop[key]))/(totalLlamadas > 0 ? totalLlamadas : 0))
                                                )

                                                tablaNuevoValor.nivelServicio[key] =
                                                    isNaN(nivelServicio) ?
                                                        '0' : nivelServicio
                                                    + "%"
                                            })
                                    }
                                    app.tablas[key] = tablaNuevoValor
                                })

                                creaColumnas1(resp.tabla.tabla1);
                                creaCilindros1(resp.tabla.tabla2);
                                creaPie1(resp.tabla.tabla3.CUMULATIVE);
                                creaColumnas2(resp.tabla.tabla4.Registros);
                                creaColumnas3(resp.tabla.tabla5.Registros);
                                creaCilindros2(resp.tabla.tabla6.Registros);
                                creaCilindros3(resp.tabla.tabla7);
                                creaColumnas4(resp.tabla.tabla8.Registros);

                                generaCharts();
                                $('#stemen').hide();
                                $('.barrita').hide();
                                $('#escondeme').show();
                            } else {
                                M.toast({
                                    html: resp.Descripcion
                                });
                            }
                            var bla;

                            function cambiarAOscuro() {

                                for (let i = 0; i < bla.length; i++) {
                                    bla[i].classList.remove('white');
                                    bla[i].classList.add('grey');
                                    bla[i].classList.add('lighten-1');
                                    bla[i].style.filter = 'invert(100%)';

                                }
                            }

                            if (localStorage.getItem('background') == "black") {
                                bla = document.getElementsByClassName('card-panel')
                                bla = Array.prototype.slice.call(bla)
                                cambiarAOscuro();
                            }
                        },
                        fail: function(xhr, textStatus, errorThrown) {
                            alert('Fallo consulta');
                            $('#stemen').hide();
                            $('.barrita').hide();
                            $('#escondeme').hide();
                        }
                    });
                }
            }
        },
        mounted: function() {


            var bla;

            function cambiarAOscuro() {

                for (let i = 0; i < bla.length; i++) {
                    bla[i].classList.remove('white');
                    bla[i].classList.add('grey');
                    bla[i].classList.add('lighten-1');
                    bla[i].style.filter = 'invert(100%)';
                }
            }

            if (localStorage.getItem('background') == "black") {
                bla = document.getElementsByClassName('card-panel')
                bla = Array.prototype.slice.call(bla)
                cambiarAOscuro();
            }
            setTimeout(() => {
                app.recarga();
            }, 5000);
        }
    });

    function descarga() {
        const params = {
            archived: document.getElementById("archived").checked ? "1" : "0",
            grupos: $("#campanaAgentes").val(),
            fechaInicial: dIni($("#pickDate").val()),
            fechaFinal: dEnd($("#pickDate").val()),
            csv: true
        }
        var url = "reporteEntrantes/inboundReport?"+$.param(params)
        window.location.replace(url);
    }

    function generaCharts() {
        if (!(chartDesglose1 == undefined)) {
            chartDesglose1.destroy();
            chartDesglose2.destroy();
            chartPorcentaje.destroy();

            chartEstado.destroy();
            chartEstadisticasCategorias.destroy();
            chartPosicion.destroy();
            chartEstadisticasAgentes1.destroy();
            chartEstadisticasAgentes2.destroy();
        }
        var t1 = app.tablas.tabla1;
        var t2 = app.tablas.tabla2;
        var dataT1 = [];
        var dataT2 = [];
        for (var clave in t1) {
            if (t1.hasOwnProperty(clave)) {
                dataT1.push(t1[clave]);
            }
        }
        for (var clave in t2) {
            if (t2.hasOwnProperty(clave)) {
                dataT2.push(t2[clave]);
            }
        }
        dataT1.pop();
        dataT2.pop();
        var ctx11 = document.getElementById('chartDesglose1').getContext('2d');
        chartDesglose1 = new Chart(ctx11, {
            type: 'pie',
            data: {
                labels: ['0', '5', '10', '15', '20', '25', '30', '35', '40', '45', '50', '55', '60', '90', '+90'],
                datasets: [{
                    label: 'llamadas en espera',
                    data: dataT1,
                    backgroundColor: [
                        '#0be881', '#1fe68a', '#2be592', '#33e39a', '#39e2a3', '#3ee0ab', '#43deb3', '#46ddbb', '#49dbc3', '#4bd9cb', '#4cd8d3', '#4dd6da', '#4dd4e2', '#4dd2ea', '#4cd1f2', '#4bcffa'
                    ],
                    borderColor: [
                        '#FFFF'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                maintainAspectRatio: false
            }
        });
        var ctx12 = document.getElementById('chartDesglose2').getContext('2d');
        chartDesglose2 = new Chart(ctx12, {
            type: 'pie',
            data:

            {
                labels: ['0', '5', '10', '15', '20', '25', '30', '35', '40', '45', '50', '55', '60', '90', '+90'],
                datasets: [{
                    label: 'llamadas abandonadas',
                    data: dataT2,
                    backgroundColor: [
                        '#ff3f34', '#ff4f34', '#ff5c34', '#ff6834', '#ff7333', '#ff7e33', '#ff8832', '#ff9132', '#ff9a31', '#ffa231', '#ffab30', '#ffb42f', '#ffbc2e', '#ffc42d', '#ffcb2b', '#ffd32a'
                    ],
                    borderColor: [
                        '#FFFF'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                maintainAspectRatio: false
            }
        });
        var t2r = app.tablas.tabla3.CUM;

        var dt2r = [];
        for (var clave in t2r) {
            if (t2r.hasOwnProperty(clave)) {
                dt2r.push(t2r[clave]);
            }
        }
        dt2r.pop();
        dt2r.map(function(item, index) {
            dt2r[index] = parseInt(item)
        });
        var ctx2 = document.getElementById('chartPorcentaje').getContext('2d');
        chartPorcentaje = new Chart(ctx2, {
            type: 'bar',
            data: {
                labels: ['0', '5', '10', '15', '20', '25', '30', '35', '40', '45', '50', '55', '60', '90', '+90'],
                datasets: [{
                    label: 'CUM',
                    data: dt2r,
                    backgroundColor: [
                        '#0be881', '#1fe68a', '#2be592', '#33e39a', '#39e2a3', '#3ee0ab', '#43deb3', '#46ddbb', '#49dbc3', '#4bd9cb', '#4cd8d3', '#4dd6da', '#4dd4e2', '#4dd2ea', '#4cd1f2', '#4bcffa'

                    ],
                    borderColor: [
                        '#FFFF'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                maintainAspectRatio: false
            }
        });
        var t4 = app.tablas.tabla4;
        var registros = t4.Registros;
        var lt4 = [];
        var dt4 = [];
        registros.map(function(i) {
            lt4.push(i.razon);
            dt4.push(i.conteo);
        });

        var ctx3 = document.getElementById('chartCausa').getContext('2d');
        chartPorcentaje = new Chart(ctx3, {
            type: 'bar',
            data: {
                labels: lt4,
                datasets: [{
                    label: 'Causa',
                    data: dt4,
                    backgroundColor: [
                        '#0be881', '#1fe68a', '#2be592', '#33e39a', '#39e2a3', '#3ee0ab', '#43deb3', '#46ddbb', '#49dbc3', '#4bd9cb', '#4cd8d3', '#4dd6da', '#4dd4e2', '#4dd2ea', '#4cd1f2', '#4bcffa'

                    ],
                    borderColor: [
                        '#FFFF'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                maintainAspectRatio: false
            }
        });
        var t5 = app.tablas.tabla5.Registros;
        var lt5 = [];
        var d1t5 = []; //tiempo promedio
        var d2t5 = []; //llamadas por hora
        t5.map(function(item) {
            lt5.push(item.STATUS);
            d1t5.push(item.AVERAGETIME);
            d2t5.push(item.CALLSHOURS);
        })
        var ctx4 = document.getElementById('chartEstado').getContext('2d');
        chartEstado = new Chart(ctx4, {
            type: 'bar',
            data: {
                labels: lt5,
                datasets: [{
                        label: 'Tiempo promedio',
                        data: d1t5,
                        backgroundColor: [
                            '#0be881', '#1fe68a', '#2be592', '#33e39a', '#39e2a3', '#3ee0ab', '#43deb3', '#46ddbb', '#49dbc3', '#4bd9cb', '#4cd8d3', '#4dd6da', '#4dd4e2', '#4dd2ea', '#4cd1f2', '#4bcffa'

                        ],
                        borderColor: [
                            '#FFFF'
                        ],
                        borderWidth: 1
                    },
                    {
                        label: 'Llamadas por hora',
                        data: d2t5,
                        backgroundColor: [
                            '#ff3f34', '#ff4f34', '#ff5c34', '#ff6834', '#ff7333', '#ff7e33', '#ff8832', '#ff9132', '#ff9a31', '#ffa231', '#ffab30', '#ffb42f', '#ffbc2e', '#ffc42d', '#ffcb2b', '#ffd32a'

                        ],
                        borderColor: [
                            '#FFFF'
                        ],
                        borderWidth: 1
                    }
                ]
            },
            options: {
                maintainAspectRatio: false
            }
        });
        var t6 = app.tablas.tabla6.Registros;
        var lt6 = [];
        var dt6 = [];
        t6.map(function(item) {
            lt6.push(item.CATEGORY);
            dt6.push(item.CALLS);
        });
        var ctx5 = document.getElementById('chartEstadisticasCategorias').getContext('2d');
        chartEstadisticasCategorias = new Chart(ctx5, {
            type: 'bar',
            data: {
                labels: lt6,
                datasets: [{
                    label: 'llamadas',
                    data: dt6,
                    backgroundColor: [
                        '#0be881', '#1fe68a', '#2be592', '#33e39a', '#39e2a3', '#3ee0ab', '#43deb3', '#46ddbb', '#49dbc3', '#4bd9cb', '#4cd8d3', '#4dd6da', '#4dd4e2', '#4dd2ea', '#4cd1f2', '#4bcffa'

                    ],
                    borderColor: [
                        '#FFFF'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                maintainAspectRatio: false
            }
        });
        var t7 = app.tablas.tabla7;
        var dt7 = [];
        for (var clave in t7) {
            if (t7.hasOwnProperty(clave)) {
                dt7.push(t7[clave]);
            }
        }
        dt7.pop();

        var ctx6 = document.getElementById('chartPosicion').getContext('2d');
        chartPosicion = new Chart(ctx6, {
            type: 'pie',
            data:

            {
                labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '15', '20', '25', '+25'],
                datasets: [{
                    label: 'Posicion inicial',
                    data: dt7,
                    backgroundColor: [
                        '#0be881', '#1fe68a', '#2be592', '#33e39a', '#39e2a3', '#3ee0ab', '#43deb3', '#46ddbb', '#49dbc3', '#4bd9cb', '#4cd8d3', '#4dd6da', '#4dd4e2', '#4dd2ea', '#4cd1f2', '#4bcffa'
                    ],
                    borderColor: [
                        '#FFFF'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                maintainAspectRatio: false
            }
        });
        var t81 = app.tablas.tabla8.Registros;
        var lt81 = [];
        var dt81 = [];
        var dt82 = [];
        t81.map(function(item) {
            lt81.push(item.usuario);
            dt81.push(item.calls);
            dt82.push(item.promedio);
        });
        var ctx71 = document.getElementById('chartEstadisticasAgentes1').getContext('2d');
        chartEstadisticasAgentes1 = new Chart(ctx71, {
            type: 'pie',
            data:

            {
                labels: lt81,
                datasets: [{
                    label: 'llamadas',
                    data: dt81,
                    backgroundColor: [
                        '#0be881', '#1fe68a', '#2be592', '#33e39a', '#39e2a3', '#3ee0ab', '#43deb3', '#46ddbb', '#49dbc3', '#4bd9cb', '#4cd8d3', '#4dd6da', '#4dd4e2', '#4dd2ea', '#4cd1f2', '#4bcffa'
                    ],
                    borderColor: [
                        '#FFFF'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                maintainAspectRatio: false
            }
        });
        var ctx72 = document.getElementById('chartEstadisticasAgentes2').getContext('2d');
        chartEstadisticasAgentes2 = new Chart(ctx72, {
            type: 'pie',
            data:

            {
                labels: lt81,
                datasets: [{
                    label: 'promedio',
                    data: dt82,
                    backgroundColor: [
                        '#ff3f34', '#ff4f34', '#ff5c34', '#ff6834', '#ff7333', '#ff7e33', '#ff8832', '#ff9132', '#ff9a31', '#ffa231', '#ffab30', '#ffb42f', '#ffbc2e', '#ffc42d', '#ffcb2b', '#ffd32a'

                    ],
                    borderColor: [
                        '#FFFF'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                maintainAspectRatio: false
            }
        });
    }

    function creaColumnas1(data) {

        var dataE = [];
        var dataL = [];
        var dataC = [];

        var colorW = "";

        var lab = ['0', '5', '10', '15', '20', '25', '30', '35', '40', '45', '50', '55', '60', '90', '90+'];

        var ii = 0;

        var numRand = 0;

        $.each(data, function(index, value) {

            if (ii < 15) {

                dataL.push(
                    lab[ii]
                );

                colorW = generaColor();

                dataC.push(
                    colorW
                );

                numRand = (Math.floor(Math.random() * 10) + 1);

                dataE.push([
                    lab[ii],
                    parseInt(value)
                    //numRand
                ]);

                ii++;

            }

        });

        Highcharts.chart('containerColumnas1', {
            chart: {
                type: 'column',
                options3d: {
                    enabled: true,
                    alpha: 15,
                    beta: 15,
                    viewDistance: 255,
                    depth: 30,
                    dataLabels: {
                        enabled: true
                    }
                }
            },
            title: {
                text: traducirFrase('Llamadas en espera')
            },
            plotOptions: {
                column: {
                    depth: 25,
                    colorByPoint: true
                }
            },
            colors: dataC,
            xAxis: {
                categories: dataL,
                labels: {
                    skew3d: true,
                    style: {
                        fontSize: '16px'
                    }
                }
            },
            yAxis: {
                title: {
                    text: null
                }
            },
            series: [{
                name: traducirFrase('Llamadas en espera'),
                data: dataE
            }]
        });

    }

    function creaColumnas2(data) {

        var dataE = [];
        var dataL = [];
        var dataC = [];

        var colorW = "";

        var lab = ['0', '5', '10', '15', '20', '25', '30', '35', '40', '45', '50', '55', '60', '90', '90+'];

        var ii = 0;

        $.each(data, function(index, value) {

            dataL.push(
                app.checaVE(value.razon)
            );

            colorW = generaColor();

            dataC.push(
                colorW
            );

            numRand = (Math.floor(Math.random() * 10) + 1);

            dataE.push([
                app.checaVE(value.razon),
                parseInt(value.conteo)
                //numRand
            ]);

        });

        Highcharts.chart('containerColumnas2', {
            chart: {
                type: 'column',
                options3d: {
                    enabled: true,
                    alpha: 15,
                    beta: 15,
                    viewDistance: 255,
                    depth: 30,
                    dataLabels: {
                        enabled: true
                    }
                }
            },
            title: {
                text: traducirFrase('Causas de colgado')
            },
            plotOptions: {
                column: {
                    depth: 25,
                    colorByPoint: true
                }
            },
            colors: dataC,
            xAxis: {
                categories: dataL,
                labels: {
                    skew3d: true,
                    style: {
                        fontSize: '16px'
                    }
                }
            },
            yAxis: {
                title: {
                    text: null
                }
            },
            series: [{
                name: traducirFrase('Causas de colgado'),
                data: dataE
            }]
        });

    }

    function creaColumnas3(data) {

        var dataE = [];
        var dataE2 = [];
        var dataL = [];
        var dataC = [];

        var colorW = "";

        var lab = ['0', '5', '10', '15', '20', '25', '30', '35', '40', '45', '50', '55', '60', '90', '90+'];

        var ii = 0;

        $.each(data, function(index, value) {

            dataL.push(
                value.STATUS
            );

            colorW = generaColor();

            dataC.push(
                colorW
            );

            colorW = generaColor();

            dataC.push(
                colorW
            );

            numRand = (Math.floor(Math.random() * 10) + 1);

            dataE.push([
                value.STATUS,
                parseInt(value.AVERAGETIME)
                //numRand
            ]);

            numRand = (Math.floor(Math.random() * 10) + 1);

            dataE2.push([
                value.STATUS,
                //numRand
                parseInt(value.CALLSHOURS)
            ]);

        });

        Highcharts.chart('containerColumnas3', {
            chart: {
                type: 'column'
            },
            title: {
                text: traducirFrase('Estatus de calificación')
            },
            colors: dataC,
            xAxis: {
                categories: dataL,
                min: 0,
                max: 5,
                scrollbar: {
                    enabled: true
                },
                labels: {
                    skew3d: true,
                    style: {
                        fontSize: '16px'
                    }
                }
            },
            yAxis: {
                title: {
                    text: null
                }
            },
            series: [{
                    name: traducirFrase('Tiempo promedio'),
                    data: dataE
                },
                {
                    name: traducirFrase("Llam./Hr"),
                    data: dataE2
                }
            ]
        });

    }

    function creaColumnas4(data) {

        var dataE = [];
        var dataE2 = [];
        var dataL = [];
        var dataC = [];

        var colorW = "";

        var lab = ['0', '5', '10', '15', '20', '25', '30', '35', '40', '45', '50', '55', '60', '90', '90+'];

        var ii = 0;

        $.each(data, function(index, value) {

            dataL.push(
                value.usuario
            );

            colorW = generaColor();

            dataC.push(
                colorW
            );

            colorW = generaColor();

            dataC.push(
                colorW
            );

            numRand = (Math.floor(Math.random() * 10) + 1);

            dataE.push([
                value.usuario,
                //numRand
                parseInt(value.calls)
            ]);

            numRand = (Math.floor(Math.random() * 10) + 1);

            dataE2.push([
                value.usuario,
                //numRand
                parseInt(value.promedio)
            ]);

        });

        Highcharts.chart('containerColumnas4', {
            chart: {
                type: 'column'
            },
            title: {
                text: traducirFrase('Estadisticas por agente')
            },
            colors: dataC,
            xAxis: {
                categories: dataL,
                min: 0,
                max: 5,
                scrollbar: {
                    enabled: true
                },
                labels: {
                    skew3d: true,
                    style: {
                        fontSize: '16px'
                    }
                }
            },
            yAxis: {
                title: {
                    text: null
                }
            },
            series: [{
                    name: traducirFrase('Llamadas'),
                    data: dataE
                },
                {
                    name: traducirFrase('Tiempo promedio'),
                    data: dataE2
                }
            ]
        });

    }

    function creaCilindros1(data) {

        var dataE = [];
        var dataL = [];
        var dataC = [];

        var colorW = "";

        var lab = ['0', '5', '10', '15', '20', '25', '30', '35', '40', '45', '50', '55', '60', '90', '90+'];

        var ii = 0;

        $.each(data, function(index, value) {

            if (ii < 15) {

                dataL.push(
                    lab[ii]
                );

                colorW = generaColor();

                dataC.push(
                    colorW
                );

                numRand = (Math.floor(Math.random() * 10) + 1);

                dataE.push([
                    lab[ii],
                    parseInt(value)
                    //numRand
                ]);

                ii++;

            }

        });

        Highcharts.chart('containerCilindros1', {
            chart: {
                type: 'cylinder',
                options3d: {
                    enabled: true,
                    alpha: 15,
                    beta: 15,
                    viewDistance: 255,
                    depth: 30,
                    dataLabels: {
                        enabled: true
                    }
                }
            },
            title: {
                text: traducirFrase('Llamadas abandonadas')
            },
            plotOptions: {
                series: {
                    depth: 25,
                    colorByPoint: true
                }
            },
            colors: dataC,
            xAxis: {
                categories: dataL,
                labels: {
                    skew3d: true,
                    style: {
                        fontSize: '16px'
                    }
                }
            },
            yAxis: {
                title: {
                    text: null
                }
            },
            series: [{
                data: dataE,
                name: traducirFrase('Llamadas abandonadas'),
                showInLegend: true
            }]
        });

    }

    function creaCilindros2(data) {

        var dataE = [];
        var dataL = [];
        var dataC = [];

        var colorW = "";

        var lab = ['0', '5', '10', '15', '20', '25', '30', '35', '40', '45', '50', '55', '60', '90', '90+'];

        var ii = 0;

        $.each(data, function(index, value) {

            dataL.push(
                value.CATEGORY
            );

            colorW = generaColor();

            dataC.push(
                colorW
            );

            numRand = (Math.floor(Math.random() * 10) + 1);

            dataE.push([
                value.CATEGORY,
                //numRand
                parseInt(value.CALLS)
            ]);



        });

        Highcharts.chart('containerCilindros2', {
            chart: {
                type: 'cylinder',
                options3d: {
                    enabled: true,
                    alpha: 15,
                    beta: 15,
                    viewDistance: 255,
                    depth: 30,
                    dataLabels: {
                        enabled: true
                    }
                }
            },
            title: {
                text: traducirFrase('Llamadas por categoria')
            },
            plotOptions: {
                series: {
                    depth: 25,
                    colorByPoint: true
                }
            },
            colors: dataC,
            xAxis: {
                categories: dataL,
                labels: {
                    skew3d: true,
                    style: {
                        fontSize: '16px'
                    }
                }
            },
            yAxis: {
                title: {
                    text: null
                }
            },
            series: [{
                data: dataE,
                name: traducirFrase('Llamadas por categoria'),
                showInLegend: true
            }]
        });

    }

    function creaCilindros3(data) {

        var dataE = [];
        var dataL = [];
        var dataC = [];

        var colorW = "";

        var lab = ['0', '5', '10', '15', '20', '25', '30', '35', '40', '45', '50', '55', '60', '90', '90+'];

        var ii = 0;

        $.each(data, function(index, value) {

            if (ii < 15) {

                dataL.push(
                    lab[ii]
                );

                colorW = generaColor();

                dataC.push(
                    colorW
                );

                numRand = (Math.floor(Math.random() * 10) + 1);

                dataE.push([
                    lab[ii],
                    //numRand
                    parseInt(value)
                ]);

                ii++;

            }

        });

        Highcharts.chart('containerCilindros3', {
            chart: {
                type: 'cylinder',
                options3d: {
                    enabled: true,
                    alpha: 15,
                    beta: 15,
                    viewDistance: 255,
                    depth: 30,
                    dataLabels: {
                        enabled: true
                    }
                }
            },
            title: {
                text: traducirFrase('Llamadas en cola por segundos')
            },
            plotOptions: {
                series: {
                    depth: 25,
                    colorByPoint: true
                }
            },
            colors: dataC,
            xAxis: {
                categories: dataL,
                labels: {
                    skew3d: true,
                    style: {
                        fontSize: '16px'
                    }
                }
            },
            yAxis: {
                title: {
                    text: null
                }
            },
            series: [{
                data: dataE,
                name: traducirFrase('Llamadas en cola por segundos'),
                showInLegend: true
            }]
        });

    }

    function creaPie1(data) {

        var dataE = [];
        var dataL = [];
        var dataC = [];

        var lab = ['0', '5', '10', '15', '20', '25', '30', '35', '40', '45', '50', '55', '60', '90', '90+'];

        var ii = 0;

        $.each(data, function(index, value) {

            if (ii < 15) {

                dataL.push(
                    lab[ii]
                );

                colorW = generaColor();

                dataC.push(
                    colorW
                );

                numRand = (Math.floor(Math.random() * 10) + 1);

                dataE.push({
                    name: lab[ii],
                    y: ((parseInt(value) == 0) ? 0.1 : parseInt(value))
                    //y: numRand
                });

                ii++;

            }

        });

        Highcharts.chart('containerPie1', {
            chart: {
                type: 'pie',
                options3d: {
                    enabled: true,
                    alpha: 45,
                    beta: 0
                }
            },
            title: {
                text: ' '
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    depth: 35,
                    dataLabels: {
                        enabled: true,
                        format: '{point.name}'
                    }
                }
            },
            series: [{
                type: 'pie',
                name: 'Porcentaje',
                data: dataE
            }]
        });

    }

    function generaColor() {

        var hexadecimal = new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F");
        var color_aleatorio = "#";

        var posarray;

        for (i = 0; i < 6; i++) {

            posarray = aleatorio(0, hexadecimal.length);
            color_aleatorio += hexadecimal[posarray];

        }

        return color_aleatorio
    }

    function aleatorio(inferior, superior) {
        numPosibilidades = superior - inferior;
        aleat = Math.random() * numPosibilidades;
        aleat = Math.floor(aleat);

        return parseInt(inferior) + aleat;
    }
</script>