{% extends "IngresoBundle:Default:customJS.html.twig" %} {% block columns %} {data:'id'}, {data:'contratista'}, {data:'tipo_doc'}, {data:'documento'}, {data:'fecha_carga'}, {data:'estado'}, {% endblock %} {% block editIcon %} Registrar fecha{% endblock %} {% block editTitle %}{% endblock %} {% block extendVars %} var totales = { ok: 0, vencido: 0, vencer: 0 }, chartOk, chartProximo, chartVencidos, nombre = [], total = []; {% endblock %} {% block tableOrder %} columnDefs: [ { targets: [0,1], visible: false } ], order: [[1, 'asc'],[5, 'desc']], {% endblock %} {% block extraButtons %} { text: ' Ver historial', titleAttr: 'Historial de documentos', className: 'btn-hideable', action: function() { var path = '{{paths.track}}', id = table.row( { selected: true } ).id(); path = path.slice(0,-1) + id; var $modal = $('#{{idModalTrack}}'), $body = $modal.find('.modal-body-content').empty(), $load = $modal.find('.load'); $modal.modal(); $load.fadeIn(); $.get(path, function(html) { $load.hide(); $body.append(html) $body.find('form').submit(function(event) { event.preventDefault(); $(this).find('button[type="submit"]').html(''); $.post(path, $(this).serialize(), function(data, textStatus, xhr) { $body.empty(); table.ajax.reload(); $modal.modal('hide'); }); }); }); }} {% endblock %} {% block extendConfig %} createdRow: function ( row, data, index ) { if (data.estado.match(/ok/i)) { totales['ok']++; $('td', row).eq(3).addClass('cell-success'); } else if (data.estado.match(/vencido/i)) { totales['vencido']++; $('td', row).eq(3).addClass('cell-danger'); } else if (data.estado.match(/vencer/i)) { totales['vencer']++; $('td', row).eq(3).addClass('cell-warning'); } }, drawCallback: function ( settings ) { var api = this.api(); var rows = api.rows( {page:'current'} ).nodes(); var last = null; api.column(1, {page:'current'} ).data().each( function ( group, i ) { if ( last !== group ) { $(rows).eq( i ).before( ''+group+'' ); last = group; } }); }, {% endblock %} {% block initComplete %} chartOk = Highcharts.chart('container-ok', getChartObject({ total: table.data().count(), value: totales.ok, tipo: 'Ok' })); chartProximo = Highcharts.chart('container-proximos', getChartObject({ total: table.data().count(), value: totales.vencer, tipo: 'Próximos a vencer' })); chartVencidos = Highcharts.chart('container-vencidos', getChartObject({ total: table.data().count(), value: totales.vencido, tipo: 'Vencidos' })); {% endblock %} {% block functions %} function getChartObject(conf) { var r = { chart: { type: 'solidgauge' }, title: null, pane: { center: ['50%', '85%'], size: '130%', startAngle: -90, endAngle: 90, background: { backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#FFF', innerRadius: '50%', outerRadius: '100%', shape: 'arc' } }, tooltip: { enabled: false }, yAxis: { stops: [ [0.1, '#DDDF0D'], // yellow [0.1, '#55BF3B'], // green [0.1, '#DF5353'] // red ], lineWidth: 0, minorTickInterval: null, title: { y: -70 }, labels: { y: 16 }, min: 0, max: conf.total }, plotOptions: { solidgauge: { dataLabels: { y: 5, borderWidth: 0, useHTML: true } } }, credits: { enabled: false }, series: [{ name: 'Speed', data: [conf.value], dataLabels: { format: '
{y}
' + ''+conf.tipo+'
' }, tooltip: { valueSuffix: conf.tipo } }] }; if (conf.tipo == 'Ok') { r.yAxis.stops = [ [0.1, '#DDDF0D'], [0.1, '#DF5353'], [0.1, '#55BF3B'] ] } return r; } function updateCharts(charts, totales, count) { totales = [totales.ok,totales.vencido,totales.vencer]; for (var i = 0; i < charts.length; i++) { charts[i].yAxis[0].update({max:count,min:0}, false); charts[i].series[0].points[0].update(totales[i], false); charts[i].redraw(); } } {% endblock %} {% block extendEvents %} table.on('search.dt', function (e, settings) { var tot = { ok: 0, vencido: 0, vencer: 0 }, rows = table.rows({search:'applied'}); rows.every( function ( rowIdx, tableLoop, rowLoop ) { var data = this.data(); if (data.estado.match(/ok/i)) { tot['ok']++; } else if (data.estado.match(/vencido/i)) { tot['vencido']++; } else if (data.estado.match(/vencer/i)) { tot['vencer']++; } }); if (typeof chartOk !== 'undefined') { updateCharts([chartOk,chartVencidos,chartProximo], tot, rows.count()); } }); $table.find('tbody').on('click', 'tr.group', function () { var currentOrder = table.order()[0]; if ( currentOrder[0] === 1 && currentOrder[1] === 'asc' ) { table.order( [ 1, 'desc' ] ).draw(); } else { table.order( [ 1, 'asc' ] ).draw(); } } ); {% endblock %} {% block totalVenc %} {{parent()}} Highcharts.chart('container-totalVenc', { chart: { type: 'bar' }, title: { text: 'DOCUMENTOS VENCIDOS POR ASP' }, xAxis: { categories: nombre }, yAxis: { min: 0, title: { text: 'Total Documentos Vencidos Por ASP' } }, legend: { reversed: true }, plotOptions: { bar: { dataLabels: { enabled: true } } }, credits: { enabled: false }, series: [{ name: 'Total Documentos', data: total }] }); console.log(nombre); console.log(total); {% endblock %}