templates/dashboard/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% if form is defined %}
  3.     {% form_theme form 'bootstrap_4_layout.html.twig' %}
  4. {% endif %}
  5. {% block stylesheets %}
  6.     <link href="https://unpkg.com/gijgo@1.9.14/css/gijgo.min.css" rel="stylesheet" type="text/css" />
  7.     <link rel="stylesheet" href="{{ asset('plugins/toastr/toastr.min.css') }}">
  8.     <style>
  9.         label {
  10.             margin: 0 5px;
  11.         }
  12.         .form-group {
  13.             margin-right: 10px;
  14.         }
  15.         .barra-contenedor {
  16.             display: flex;
  17.             align-items: flex-end; /* Para que la barra crezca desde abajo */
  18.             height: 300px; /* Misma altura que el pie chart */
  19.             border: 1px solid #4d4d4d;
  20.             width: 70px; /* Ancho de la barra */
  21.             margin: 10px auto;
  22.         }
  24.         .barra-progreso {
  25.             width: 100%;
  26.             background-color: red; /* Color rojo */
  27.             transition: height 0.5s; /* Efecto suave */
  28.         }
  30.         .titulo-vertical {
  31.             /* Estilos para girar el texto a la izquierda */
  32.             transform: rotate(-90deg);
  33.             transform-origin: left top;
  34.             position: absolute;
  35.             margin-top: 150px; /* Ajuste manual para centrar */
  36.             left: 110px;
  37.             width: 300px;
  38.             text-align: center;
  39.         }
  40.     </style>
  41. {% endblock %}
  43. {% block body %}
  44. <div class="content-wrapper">
  45.     <!-- Content Header (Page header) -->
  46.     <section class="content-header">
  47.         <div class="card">
  48.             <div class="card-header">
  49.                 <h1 class="card-title">Indicadores</h1>
  51.                 <div class="card-tools">
  52.                     <ol class="breadcrumb float-sm-right">
  53.                         <li class="breadcrumb-item">Inicio</li>
  54.                         <li class="breadcrumb-item active">Indicadores</li>
  55.                     </ol>
  56.                 </div>
  57.             </div>
  58.         </div>
  59.     </section>
  61.     <!-- Main content -->
  62.     <section class="content">
  63.         <!-- Default box -->
  64.         <div class="card">
  65.             <div class="card-header">
  66.                 <div class="row">
  67.                     {% if form is defined %}
  68.                         {{ form_start(form, {'attr': {'class': 'form-inline col-md-auto', 'id': 'form_dashboard_filtro'}}) }}
  69.                         {{ form_row(form.date_inicio) }}
  70.                         {{ form_row(form.date_fin) }}
  71.                         {% if form.unidad is defined %}
  72.                             <div class="ml-3">{{ form_row(form.unidad) }}</div>
  73.                         {% endif %}
  74.                         {{ form_end(form) }}
  75.                     {% endif %}
  76.                     <div class="col text-right">
  77.                         <button id="consultar" type="button" class="btn btn-outline-success mr-2" onclick="consultar()">
  78.                             <i class="fas fa-search mr-2"></i> Consultar
  79.                         </button>
  80.                     </div>
  81.                 </div>
  82.             </div>
  83.         </div>
  84.         <!-- /.card -->
  86.         <div class="row">
  87.             <div class="col">
  88.                 <!-- Default box -->
  89.                 <div class="card">
  90.                     <div class="card-header">
  91.                         <h3 class="card-title"><b>Índice de Equipo de Cómputo Actualizado (ECA).</b></h3>
  92.                     </div>
  93.                     <div class="card-body table-responsive p-0">
  94.                         <div id="equipo"></div>
  95.                     </div>
  96.                     <!-- /.card-body -->
  97.                     <div class="card-footer pb-0 pt-0">
  98.                         <div class="row">
  99.                             <div class="col-sm-9">
  100.                                 <span style="font-size: 0.8rem">
  101.                                     <b>ECA</b>: Índice de Equipo de Cómputo Actualizado<br>
  102.                                     <b>TE</b>: Total de equipos en el inventario (no considera equipo en estatus de baja).<br>
  103.                                     <b>EMHV</b>: Total de equipos en el inventario que cumplen con el Estándar Mínimo de Hardware Vigente.<br>
  104.                                     <b>Fórmula ECA</b>: <em> EMHV / TE *100.</em>
  105.                                 </span>
  106.                             </div>
  107.                             <div class="col-sm-3" style="font-size: 0.8rem">
  108.                                 <p>Fecha inicial: <span class="date-inicial"></span></p>
  109.                                 <p>Fecha final: <span class="date-final"></span></p>
  110.                                 <p>Fecha consulta: <span class="date-actual"></span></p>
  111.                             </div>
  112.                         </div>
  114.                     </div>
  115.                     <!-- /.card-footer-->
  116.                 </div>
  117.                 <!-- /.card -->
  118.             </div>
  119.             <div class="col">
  120.                 <!-- Default box -->
  121.                 <div class="card">
  122.                     <div class="card-header">
  123.                         <h3 class="card-title"><b>Eficacia del Mantenimiento Preventivo (EMP).</b></h3>
  124.                     </div>
  125.                     <div class="card-body table-responsive p-0">
  126.                         <div class="row">
  127.                             <div class="col-sm-3 col-md-2" style="padding-top: 15px;">
  128.                                 <div id="barra-pamp-col" class="barra-contenedor" style="display: none;">
  129.                                     <div id = 'titu' class="titulo-vertical"></div>
  130.                                     <div id="barraPAMP" class="barra-progreso"></div>
  131.                                 </div>
  132.                             </div>
  133.                             <div class="col-sm-9 col-md-10">
  134.                                 <div id="solicitud"></div>
  135.                             </div>
  136.                         </div>
  137.                     </div>
  138.                     <!-- /.card-body -->
  139.                     <div class="card-footer pb-0 pt-0">
  140.                         <div class="row">
  141.                             <div class="col-sm-9">
  142.                                 <span style="font-size: 0.8rem;">
  143.                                     <b>EMP</b>: Eficacia de Mantenimiento Preventivo.<br>
  144.                                     <b>ST-Ev</b>: Total de Soportes Técnicos evaluados.<br>
  145.                                     <b>MP-Ev</b>: Total de mantenimientos preventivos evaluados.<br>
  146.                                     <b>MC-Ev</b>: Total de mantenimientos correctivos evaluados.<br>
  147.                                     <b>Fórmula EMP</b>: <em> MP-Ev / (MP-Ev + MC-Ev) *100</em>
  148.                                 </span>
  149.                             </div>
  150.                             <div class="col-sm-3" style="font-size: 0.8rem">
  151.                                 <p>Fecha inicial: <span class="date-inicial"></span></p>
  152.                                 <p>Fecha final: <span class="date-final"></span></p>
  153.                                 <p>Fecha consulta: <span class="date-actual"></span></p>
  154.                             </div>
  155.                         </div>
  156.                     </div>
  157.                     <!-- /.card-footer-->
  158.                 </div>
  159.                 <!-- /.card -->
  160.             </div>
  161.         </div>
  162.         <div class="row">
  163.             <div class="col">
  164.                 <!-- Default box -->
  165.                 <div class="card">
  166.                     <div class="card-header">
  167.                         <h3 class="card-title"><b>Resultados de la encuesta de evaluación de los mantenimientos</b></h3>
  168.                     </div>
  169.                     <div class="card-body table-responsive p-0">
  170.                         <div id="evaluacion"></div>
  171.                     </div>
  172.                     <!-- /.card-body -->
  173.                     <div class="card-footer p-0">
  174.                         <ol style="font-size: 0.8rem">
  175.                             <li><b>Sol-Ev</b>: Total de solicitudes de mantenimiento evaluadas.</li>
  176.                             <li><b>Reincidencias</b>: Total de respuestas que manifiestan una reincidencia en la falla.</li>
  177.                             <li><b>Reincidencia en fallas</b>: Porcentaje en la residencia de fallas.<b> Fórmula:</b> <em>Reincidencias / Sol-Ev * 100</em></li>
  178.                             <li><b>TR</b>: Sumatoria de valoración del tiempo de respuesta en las solicitudes evaluadas (1->Deficiente … 5->Muy bueno).</li>
  179.                             <li><b>S. tiempos de respuesta</b>: Porcentaje de satisfacción en los tiempos de respuesta. <b> Fórmula:</b> <em>TR / Sol-Ev * 100 (1->Deficiente … 5->Muy bueno).</em></li>
  180.                             <li><b>Satisfacción</b>: Nivel de satisfacción en la solución en las solicitudes evaluadas (1->Deficiente … 5->Muy bueno).</li>
  181.                             <li><b>S. solución proporcionada</b>: Porcentaje de satisfacción en la solución proporcionada.<b> Fórmula :</b> <em>Satisfacción / Sol-Ev * 100 (1->Deficiente … 5->Muy bueno).</em></li>
  182.                             <li><b>SG</b>: Percepción de la satisfacción general en la atención de las solicitudes evaluadas (1->Deficiente … 5->Muy bueno).</li>
  183.                             <li><b>S. general</b>: Porcentaje de satisfacción general de los servicios. <b> Fórmula:</b> <em>SG / Sol-Ev * 100 (1->Deficiente … 5->Muy bueno).</em></li>
  185.                             <!--<li><b>Reincidencia en fallas presentadas</b>: <em>Sumatoria de reincidencias * 100 / Total de servicios evaluados.</em></li>
  186.                             <li><b>Porcentaje de satisfacción en los tiempos de respuesta</b>: <em>(Sumatoria de satisfacción en los tiempos de respuesta * 100) / (Total de servicios evaluados * Calificación máxima <<5>>).</em></li>
  187.                             <li><b>Porcentaje de satisfacción en la solución proporcionada</b>: <em>(Sumatoria de satisfacción en la solución proporcionada  * 100) / (Total de servicios evaluados * Calificación máxima <<5>>).</em></li>
  188.                             <li><b>Porcentaje de satisfacción general de los servicios</b>: <em>(Sumatoria de satisfacción general de los servicios * 100) / (Total de servicios evaluados * Calificación máxima <<5>>).</em></li>-->
  189.                         </ol>
  190.                     </div>
  191.                     <!-- /.card-footer-->
  192.                 </div>
  193.                 <!-- /.card -->
  194.             </div>
  195.         </div>
  197.     </section>
  198.     <!-- /.content -->
  199. </div>
  200. {% endblock %}
  202. {% block javascripts %}
  203.     <script src="https://code.highcharts.com/highcharts.js"></script>
  204.     <script src="https://code.highcharts.com/highcharts-more.js"></script>
  205.     <script src="https://code.highcharts.com/modules/exporting.js"></script>
  206.     <script src="https://code.highcharts.com/modules/export-data.js"></script>
  207.     <script src="https://code.highcharts.com/modules/accessibility.js"></script>
  208.     <script src="https://unpkg.com/gijgo@1.9.14/js/gijgo.min.js" type="text/javascript"></script>
  209.     <script src="https://unpkg.com/gijgo@1.9.14/js/messages/messages.es-es.js" type="text/javascript"></script>
  210.     <script src="{{ asset('plugins/toastr/toastr.min.js') }}"></script>
  211.     <script>
  212.         // Menu lateral
  213.         $("#reporte").addClass("menu-open");
  214.         $("#reporte").find('.nav-link:first').addClass("active");
  215.         $("#indicador").addClass("active");
  217.         /*$(function() {
  218.             let firstDayYear = new Date().getFullYear() + '-01-01';
  219.             let today = new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate();
  220.             $('#dashboard_filtro_date_inicio').datepicker({
  221.                 showOtherMonths: true,
  222.                 uiLibrary: 'bootstrap4',
  223.                 modal: true,
  224.                 header: true,
  225.                 footer: true,
  226.                 iconsLibrary: 'fontawesome',
  227.                 locale: 'es-es',
  228.                 format: 'dd-mm-yyyy',
  229.                 value: firstDayYear,
  230.                 maxDate: function () {
  231.                     return $('#dashboard_filtro_date_fin').val();
  232.                 }
  233.             });
  235.             $('#dashboard_filtro_date_fin').datepicker({
  236.                 showOtherMonths: true,
  237.                 uiLibrary: 'bootstrap4',
  238.                 modal: true,
  239.                 header: true,
  240.                 footer: true,
  241.                 iconsLibrary: 'fontawesome',
  242.                 locale: 'es-es',
  243.                 value: today,
  244.                 format: 'dd-mm-yyyy',
  245.                 minDate: function () {
  246.                     return $('#dashboard_filtro_date_inicio').val();
  247.                 }
  248.             });
  249.         });*/
  250.         function consultar(mpIndice) {
  251.             //$("#table-pamp").find($("tbody")).html("<tr><td colspan='18' class='text-center'><i class='fas fa-spinner fa-pulse'></i></td></tr>");
  252.             let btn = $("#consultar");
  253.             let formData = new FormData(document.getElementById("form_dashboard_filtro"));
  254.             const fecha = new Date();
  255.             // Formatear la fecha al formato "d/m/Y H:i:s"
  256.             const fechaFormateada = fecha.toLocaleString('es-MX', {
  257.                 day: '2-digit',
  258.                 month: '2-digit',
  259.                 year: 'numeric',
  260.                 hour: '2-digit',
  261.                 minute: '2-digit',
  262.                 second: '2-digit',
  263.                 hour12: false
  264.             }).replace(',', ''); // Eliminar la coma que agrega toLocaleString()
  265.             $.ajax({
  266.                 type: 'POST',
  267.                 url: '{{ path('app_dashboard') }}',
  268.                 data: formData, // Adjuntar los campos del formulario enviado.
  269.                 dataType: "json",
  270.                 cache: false,
  271.                 contentType: false,
  272.                 processData: false,
  273.                 beforeSend: function () {
  274.                     btn.html('<i class="fas fa-spinner fa-pulse mr-2"></i> Consultar').prop('disabled', true);
  275.                 },
  276.                 success: function (data) {
  277.                     let sumatoria = [
  278.                         { inicial: '{{ form.date_inicio.vars.value|date("d/m/Y") }}', final: '{{ form.date_fin.vars.value|date("d/m/Y") }}', actual: fechaFormateada},
  279.                         { tequipo: 0, temhv: 0, teca: 0},
  280.                         { tmc: 0, tmp: 0, temp: 0}
  281.                     ];
  283.                     let equipo = data.data.equipo;
  284.                     let solicitud = data.data.solicitud;
  285.                     let evaluacion = data.data.evaluacion;
  286.                     let equipoHTML =
  287.                         `<figure class='highcharts-figure'>
  288.                             <div id='equipoGrafico'></div>
  289.                         </figure>
  290.                         <br>
  291.                         <table class='table table-sm table-hover text-nowrap'>
  292.                         <thead>
  293.                         <tr class='text-lightblue'>
  294.                             <th>Unidad administrativa</th>
  295.                             <th>TE</th>
  296.                             <th>EMHV</th>
  297.                             <th>ECA</th>
  298.                             </tr>
  299.                         </thead>
  300.                         <tbody>`;
  301.                     $.each(equipo, function (key, eq) {
  302.                         equipoHTML +=
  303.                             `<tr>
  304.                                 <td>${eq.nombre}</td>
  305.                                 <td>${eq.total}</td>
  306.                                 <td>${eq.emhv}</td>
  307.                                 <td>${eq.indice}</td>
  308.                             </tr>`;
  309.                         sumatoria[1].tequipo += parseInt(eq.total);
  310.                         sumatoria[1].temhv += parseInt(eq.emhv);
  311.                     });
  312.                     sumatoria[1].teca = (sumatoria[1].temhv / sumatoria[1].tequipo) * 100;
  313.                     // Agrega una fila al final con las sumas
  314.                     equipoHTML +=
  315.                         `<tr>
  316.                             <td class="text-right"><strong>Totales estatales:&nbsp&nbsp&nbsp&nbsp</strong></td>
  317.                             <td><strong>${sumatoria[1].tequipo}</strong></td>
  318.                             <td><strong>${sumatoria[1].temhv}</strong></td>
  319.                             <td><strong>${sumatoria[1].teca.toFixed(2)}%</strong></td>
  320.                         </tr>
  321.                         </tbody>
  322.                         </table>`;
  324.                     let solicitudHTML =
  325.                         `<figure class='highcharts-figure'>
  326.                             <div id='solicitudGrafico'></div>
  327.                         </figure>
  328.                         <br>
  329.                         <table class='table table-sm table-hover text-nowrap'>
  330.                         <thead>
  331.                         <tr class='text-lightblue'>
  332.                             <th>Unidad administrativa</th>
  333.                             <th>PAMP</th>
  334.                             <th>ST-Ev</th>
  335.                             <th>MC-Ev</th>
  336.                             <th>MP-Ev</th>
  337.                             <th>EMP</th>
  338.                         </tr>
  339.                         </thead>
  340.                         <tbody>`;
  341.                         let totalMpIndice = 0;
  342.                     $.each(solicitud, function (key, sol) {
  343.                         let st = sol.total - sol.mp - sol.mc;
  344.                         totalMpIndice = (sol.equipoCont / sol.total) * 100;
  345.                         solicitudHTML +=
  346.                             `<tr>
  347.                                 <td>${sol.nombre}</td>
  348.                                 <td>${totalMpIndice.toFixed(2)}%</td>
  349.                                 <td>${st}</td>
  350.                                 <td>${sol.mc}</td>
  351.                                 <td>${sol.mp}</td>
  352.                                 <td>${sol.indice}%</td>
  353.                             </tr>`;
  354.                         sumatoria[2].tmc += parseInt(sol.mc);
  355.                         sumatoria[2].tmp += parseInt(sol.mp);
  356.                     });
  357.                     sumatoria[2].temp = parseInt(sumatoria[2].tmp) / (parseInt(sumatoria[2].tmp) + parseInt(sumatoria[2].tmc)) * 100;
  358.                     solicitudHTML +=
  359.                         `<tr>
  360.                             <td colspan="3" class="text-right"><strong>Totales estatales:&nbsp&nbsp&nbsp&nbsp</strong></td>
  361.                             <td><strong>${sumatoria[2].tmc}</strong></td>
  362.                             <td><strong>${sumatoria[2].tmp}</strong></td>
  363.                             <td><strong>${sumatoria[2].temp.toFixed(2)}%</strong></td>
  364.                         </tr>
  365.                         </tbody>
  366.                         </table>`;
  368.                     let evaluacionHTML =
  369.                         "<figure class='highcharts-figure'>" +
  370.                             "<div id='evaluacionGrafico'></div>" +
  371.                         "</figure>" +
  372.                         "<br>" +
  373.                         "<table class='table table-sm table-hover text-nowrap'>" +
  374.                         "<thead>" +
  375.                         "<tr class='text-lightblue'>" +
  376.                             "<th>Unidad administrativa</th>" +
  377.                             "<th class='text-center'>Sol-Ev</th>" +
  378.                             "<th class='text-center'>Reincidencia en fallas</th>" +
  379.                             "<th class='text-center'>S. tiempos de respuesta</th>" +
  380.                             "<th class='text-center'>S. solución proporcionada</th>" +
  381.                             "<th class='text-center'>S. general</th>" +
  382.                         "</tr>" +
  383.                         "</thead>" +
  384.                         "<tbody>";
  385.                     $.each(evaluacion, function (key, ev) {
  386.                         evaluacionHTML +=
  387.                             "<tr>" +
  388.                                 "<td>" + ev.nombre + "</td>" +
  389.                                 "<td class='text-center'>" + ev.total + "</td>" +
  390.                                 "<td class='text-center'>" + parseFloat(ev.reincidencia).toFixed(2) + "%</td>" +
  391.                                 "<td class='text-center'>" + parseFloat(ev.tiempo).toFixed(2) + "%</td>" +
  392.                                 "<td class='text-center'>" + parseFloat(ev.solucion).toFixed(2) + "%</td>" +
  393.                                 "<td class='text-center'>" + parseFloat(ev.general).toFixed(2) + "%</td>" +
  394.                                 /*"<td class='text-center'>" + ev.reincidencia + "%</td>" +
  395.                                 "<td class='text-center'>" + ev.tiempo + "%</td>" +
  396.                                 "<td class='text-center'>" + ev.solucion + "%</td>" +
  397.                                 "<td class='text-center'>" + ev.general + "%</td>" +*/
  398.                             "</tr>";
  399.                     });
  400.                     evaluacionHTML +=
  401.                         "</tbody>" +
  402.                         "</table>";
  404.                     $("#equipo").html(equipoHTML);
  405.                     $("#solicitud").html(solicitudHTML);
  406.                     $("#evaluacion").html(evaluacionHTML);
  407.                     $(".date-inicial").text(sumatoria[0].inicial);
  408.                     $(".date-final").text(sumatoria[0].final);
  409.                     $(".date-actual").text(sumatoria[0].actual);
  411.                     if (equipo.length === 1) {
  412.                         equipoGraficoPie(equipo[0].indice);
  413.                     }
  414.                     if (solicitud.length === 1) {
  415.                         let mp = parseInt(solicitud[0].mp);
  416.                         let mc = parseInt(solicitud[0].mc);
  417.                         let total = parseInt(solicitud[0].total);
  418.                         let totalMp = parseInt(solicitud[0].equipoCont);
  419.                         let totalMpIndice = (totalMp / total) * 100;
  420.                         let mpIndice = (mp / total) * 100;
  421.                         let mcIndice = (mc / total) * 100;
  422.                         let stIndice = ((total - (mp + mc)) / total) * 100;
  423.                         solicitudGraficoPie(mpIndice, mcIndice, stIndice);
  424.                         actualizarBarraPAMP(totalMpIndice);
  425.                     }
  426.                     if (evaluacion.length === 1) {
  427.                         evaluacionGraficoSpider(evaluacion[0].reincidencia, evaluacion[0].tiempo, evaluacion[0].solucion, evaluacion[0].general);
  428.                     }
  429.                 },
  430.                 error: function (data, text, error) {
  431.                     let datos = jQuery.parseJSON(data.responseText);
  432.                     console.log(datos);
  433.                 },
  434.                 complete: function () {
  435.                     btn.html('<i class="fas fa-search mr-2"></i> Consultar').prop('disabled', false);
  436.                 }
  437.             });
  438.         }
  440.         function actualizarBarraPAMP(porcentajePAMP) {
  441.             var barra = document.getElementById('barraPAMP');
  442.             var titulo = document.getElementById('titu');
  443.             var porcentajeFormateado = parseFloat(porcentajePAMP).toFixed(2);
  444.             // Establece la altura de la barra en porcentaje (e.g., '70%')
  445.             barra.style.height = porcentajePAMP + '%';
  446.             barra.title = '% de Atención del PAMP: ' + porcentajeFormateado + '%';
  447.             titulo.innerHTML = '<b>Atención del PAMP: ' + porcentajeFormateado + '%</b>';
  448.             $('#barra-pamp-col').show();
  449.         }
  451.         function equipoGraficoPie(indice) {
  452.             // Data retrieved from https://netmarketshare.com
  453.             Highcharts.chart('equipoGrafico', {
  454.                 chart: {
  455.                     plotBackgroundColor: null,
  456.                     plotBorderWidth: null,
  457.                     plotShadow: false,
  458.                     type: 'pie'
  459.                 },
  460.                 title: {
  461.                     text: 'Equipo actualizado'
  462.                 },
  463.                 tooltip: {
  464.                     pointFormat: '{series.name}: <b>{point.percentage:.2f}%</b>'
  465.                 },
  466.                 accessibility: {
  467.                     point: {
  468.                         valueSuffix: '%'
  469.                     }
  470.                 },
  471.                 plotOptions: {
  472.                     pie: {
  473.                         allowPointSelect: true,
  474.                         cursor: 'pointer',
  475.                         dataLabels: {
  476.                             enabled: true,
  477.                             format: '<b>{point.name}</b>: {point.percentage:.2f} %'
  478.                         }
  479.                     }
  480.                 },
  481.                 series: [{
  482.                     name: 'Equipos',
  483.                     colorByPoint: true,
  484.                     data: [{
  485.                         name: 'Con EMHV',
  486.                         y: parseFloat(indice),
  487.                         sliced: true,
  488.                         selected: true,
  489.                         color: '#00ff00'
  490.                     }, {
  491.                         name: 'Sin EMHV',
  492.                         y: parseFloat(100 - indice),
  493.                         color: '#226f04'
  494.                     }]
  495.                 }],
  496.                 credits: {
  497.                     enabled: false
  498.                 }
  499.             });
  500.         }
  502.         function solicitudGraficoPie(mp, mc, st) {
  503.             Highcharts.chart('solicitudGrafico', {
  504.                 chart: {
  505.                     plotBackgroundColor: null,
  506.                     plotBorderWidth: null,
  507.                     plotShadow: false,
  508.                     type: 'pie'
  509.                 },
  510.                 title: {
  511.                     text: 'Eficacia del mantenimiento'
  512.                 },
  513.                 tooltip: {
  514.                     pointFormat: '{series.name}: <b>{point.percentage:.2f}%</b>'
  515.                 },
  516.                 accessibility: {
  517.                     point: {
  518.                         valueSuffix: '%'
  519.                     }
  520.                 },
  521.                 plotOptions: {
  522.                     pie: {
  523.                         allowPointSelect: true,
  524.                         cursor: 'pointer',
  525.                         dataLabels: {
  526.                             enabled: true,
  527.                             format: '<b>{point.name}</b>: {point.percentage:.2f} %'
  528.                         }
  529.                     }
  530.                 },
  531.                 series: [{
  532.                     name: 'Solicitudes',
  533.                     colorByPoint: true,
  534.                     data: [{
  535.                         name: 'MP-Ev',
  536.                         y: parseFloat(mp),
  537.                         sliced: true,
  538.                         selected: true,
  539.                         color: '#00ff00',
  540.                         slicedOffset: 5
  541.                     }, {
  542.                         name: 'MC-Ev',
  543.                         y: parseFloat(mc),
  544.                         color: '#226f04'
  545.                     }/*, {
  546.                         name: 'ST-Ev',
  547.                         y: parseFloat(st),
  548.                         color: '#00fabf'
  549.                     }*/]
  550.                 }],
  551.                 credits: {
  552.                     enabled: false
  553.                 }
  554.             });
  555.         }
  557.         function evaluacionGraficoSpider(reincidencia, tiempo, solucion, general) {
  558.             Highcharts.chart('evaluacionGrafico', {
  560.                 chart: {
  561.                     polar: true,
  562.                     type: 'line'
  563.                 },
  565.                 title: null,
  567.                 pane: {
  568.                     size: '75%'
  569.                 },
  571.                 xAxis: {
  572.                     categories: ['Reincidencia en fallas presentadas', 'Satisfacción en los tiempos de respuesta', 'Satisfacción en la solución proporcionada', 'Satisfacción general de los servicios'],
  573.                     tickmarkPlacement: 'on',
  574.                     lineWidth: 0
  575.                 },
  577.                 yAxis: {
  578.                     gridLineInterpolation: 'polygon',
  579.                     lineWidth: 0,
  580.                     min: 0
  581.                 },
  583.                 tooltip: {
  584.                     enabled: false
  585.                     // shared: true,
  586.                      //pointFormat: '<span style="color:{series.color}">{series.name}: <b>{point.y:,.0f}%</b><br/>'
  587.                 },
  589.                 legend: {
  590.                     enabled: false
  591.                 },
  593.                 series: [{
  594.                     name: 'Porcentaje',
  595.                     data: [parseFloat(reincidencia), parseFloat(tiempo), parseFloat(solucion), parseFloat(general)],
  596.                     dataLabels: {
  597.                         enabled: true,
  598.                         format: '<span>{y:.2f} %</span>',
  599.                     },
  600.                     pointPlacement: 'on'
  601.                 }],
  603.                 credits: {
  604.                     enabled: false
  605.                 }
  606.             });
  607.         }
  608.     </script>
  609. {% endblock %}