vendor/uvdesk/core-framework/Resources/views/dashboard.html.twig line 1

Open in your IDE?
  1. {% extends "@UVDeskCoreFramework//Templates//layout.html.twig" %}
  3. {% block title %}Dashboard{% endblock %}
  5. {% block pageContent %}
  8.     <style>
  9.         .btn{
  10.             border: 1px solid #1a1a1a;
  11.             display: inline-block;
  12.             padding: 10px;
  13.             position: relative;
  14.             text-align: center;
  15.             transition: background 600ms ease, color 600ms ease;
  16.             margin-right: 0px !important;
  17.         }
  19.         input[type="radio"].toggle {
  20.             display: none;
  22.         }
  24.         input[type=radio]:checked + label {
  25.             background: blue;
  26.             color:white;
  27.         }
  29.         .uv-action-bar .uv-field-block.date {
  30.             display: inline-block;
  31.             margin-right: 8px;
  32.         }
  33.         .uv-action-bar label {
  34.             font-size: 16px;
  35.             vertical-align: middle;
  36.             margin-right: 10px;
  37.         }
  38.         .uv-inner-section .uv-action-bar label{
  39.             font-size: 15px;
  40.         }
  41.         @media screen and (min-width: 1100px) and (max-width: 1260px) {
  42.             .uv-inner-section .uv-action-bar .uv-action-bar-col-lt, .uv-inner-section .uv-action-bar .uv-action-bar-col-rt {
  43.                 width: 55% !important;
  44.             }
  45.         }
  46.         .graficosTortaBarra{
  47.             font-size:11px;width: 520px;border:1px solid #d3d3d3;height: 300px;padding:10px;
  48.         }
  49.         .graficosTortaBarra label{
  50.             line-height: 2;
  51.             padding: 0 8px;
  52.             display: inline-block;
  53.         }
  54.         .boch {
  55.             display:inline-block;
  56.             height: 10px;
  57.             width: 10px;
  58.             margin-right: 3px;
  59.             border-radius: 50%;
  60.         }
  62.         .box-graficos {
  63.             display: flex;
  64.             flex-wrap: wrap;
  65.             gap: 10px;
  66.         }
  67.         .uv-activity-wrapper {
  68.             margin-top: 60px;
  69.         }
  70.         .uv-activity-wrapper .uv-activity-chart-col-lt {
  71.             width: 80%;
  72.             float: left;
  73.         }
  74.         ul.uv-activity-brick-wrapper {
  75.             list-style: none;
  76.             margin: 0;
  77.             padding: 0;
  78.             width: 100%;
  79.             display: inline-block;
  80.         }
  81.         ul.uv-activity-brick-wrapper li {
  82.             width: 25%;
  83.             display: inline-block;
  84.             float: left;
  85.             padding-left: 10px;
  86.             padding-right: 10px;
  87.             color: #fff;
  88.         }
  89.         ul.uv-activity-brick-wrapper .uv-activity-brick {
  90.             border-radius: 3px;
  91.             padding: 10px;
  92.             text-align: center;
  93.         }
  94.         ul.uv-activity-brick-wrapper li a {
  95.             color: #fff;
  96.             font-size: 45px;
  97.             width: 100%;
  98.             display: inline-block;
  99.         }
  100.         ul.uv-activity-brick-wrapper li label {
  101.             font-size: 18px;
  102.             width: 100%;
  103.             display: inline-block;
  104.         }
  105.         .uv-activity-chart-bottom-row .uv-pannel-body {
  106.             height: 450px;
  107.         }
  108.         .kudos-overview {
  109.             width: 40%;
  110.             float: left;
  111.             padding-right: 10px;
  112.         }
  113.         .recent-notification {
  114.             width: 30%;
  115.             float: left;
  116.             padding-left: 10px;
  117.         }
  118.         .completion-chart {
  119.             width: 300px;
  120.             margin: 0 auto;
  121.         }
  122.         .progress-meter .background {
  123.             fill: #EFEFEF;
  124.         }
  125.         .progress-meter text {
  126.             font-size: 30px;
  127.         }
  128.         .kudos-overview .uv-pannel-body {
  129.             text-align: center;
  130.             padding-top: 50px;
  131.         }
  132.         .kudos-overview .uv-pannel-body label {
  133.             margin-top: 10px;
  134.             display: inline-block;
  135.         }
  136.         .recent-notification ul {
  137.             list-style: none;
  138.             padding: 0;
  139.             margin: 0;
  140.             overflow-y: auto;
  141.             max-height: 400px !important;
  142.         }
  143.         .recent-notification .uv-pannel-body {
  144.             padding: 0;
  145.         }
  146.         .recent-notification ul li {
  147.             color: #333333;
  148.             border-bottom: solid 1px #D3D3D3;
  149.             padding: 15px 20px;
  150.         }
  151.         .recent-notification ul li:first-child {
  152.             border-top: none;
  153.         }
  154.         .recent-notification ul li:last-child {
  155.             border-bottom: none;
  156.         }
  157.         .recent-notification ul li * {
  158.             display: inline-block !important;
  159.         }
  160.         .recent-notification ul li .timeago {
  161.             color: #9E9E9E;
  162.             margin-top: 5px;
  163.             font-size: 13px;
  164.         }
  165.         .recent-notification label {
  166.             text-align: center;
  167.             display: inline-block;
  168.             width: 100%;
  169.             padding-top: 15px;
  170.             border-top: 1px solid #d3d3d3;
  171.         }
  172.         .recent-notification span.uv-notification-message {
  173.             float: left;
  174.             width: 100%;
  175.         }
  176.         .kudos-count {
  177.             width: 30%;
  178.             float: left;
  179.             padding-right: 10px;
  180.             padding-left: 10px;
  181.         }
  182.         .kudos-count .uv-pannel-body {
  183.             padding-top: 50px;
  184.             overflow-y: auto;
  185.         }
  186.         .kudos-count ul {
  187.             list-style: none;
  188.             padding: 0;
  189.             margin: 0;
  190.         }
  191.         .kudos-count ul li {
  192.             width: 100%;
  193.             display: inline-block;
  194.             padding: 15px 0;
  195.         }
  196.         .kudos-count ul li .uv-icon-kudos  {
  197.             vertical-align: middle;
  198.             margin-right: 10px;
  199.         }
  200.         .uv-activity-wrapper .uv-activity-chart-col-rt {
  201.             width: 20%;
  202.             float: left;
  203.         }
  204.         .uv-activity-chart-col-rt ul {
  205.             padding: 0;
  206.             margin: 0;
  207.             list-style: none;
  208.         }
  209.         .uv-activity-chart-col-rt ul li {
  210.             margin-bottom: 10px
  211.         }
  212.         .uv-activity-chart-col-rt ul li span {
  213.             width: 100%;
  214.             display: inline-block;
  215.             color: #6f6f6f;
  216.         }
  217.         .uv-middle {
  218.             margin: 0 auto;
  219.             display: inline-block;
  220.             margin-top: 200px;
  221.             text-align: center;
  222.             width: 100%;
  223.         }
  224.         @media screen and (max-width: 1024px) {
  225.             .uv-activity-wrapper .uv-activity-chart-col-lt {
  226.                 width: 100%;
  227.                 padding: 0;
  228.             }
  229.             .uv-activity-wrapper .uv-activity-chart-col-rt {
  230.                 width: 100%;
  231.             }
  232.             .kudos-overview {
  233.                 width: 100%;
  234.                 padding: 0;
  235.             }
  236.             .kudos-count {
  237.                 width: 100%;
  238.                 padding: 0;
  239.             }
  240.             .recent-notification {
  241.                 width: 100%;
  242.                 padding: 0;
  243.             }
  244.             ul.uv-activity-brick-wrapper li {
  245.                 width: 50%;
  246.                 margin: 10px 0;
  247.             }
  248.         }
  249.         @media screen and (max-width: 768px) {
  250.             ul.uv-activity-brick-wrapper li {
  251.                 width: 100%;
  252.             }
  253.         }
  254.         @media screen and (max-width: 467px) {
  255.             .completion-chart {
  256.                 width: 100%;
  257.             }
  258.         }
  259.         span.uv-notification-message a:link, span.uv-notification-message a:visited, label a:link, label a:visited {
  260.             color: #2750C4;
  261.             font-size: 15px;
  262.         }
  263.         .uv-mob-aside {
  264.             display: none;
  265.         }
  266.         {# .uv-copyright {
  267.             text-align: center;
  268.         } #}
  269.     </style>
  272.     <div class="uv-area">
  274.         <div>
  278.             <div class="uv-action-bar">
  279.                 <div class="uv-action-bar-col-lt">
  280.                     <label>{{ 'From'|trans }}</label>
  281.                     <div class="uv-field-block date">
  282.                         <input type="text" class="uv-field uv-date-picker date date-from" id="from" value="">
  283.                     </div>
  284.                     <label>{{ 'To'|trans }}</label>
  285.                     <div class="uv-field-block date">
  286.                         <input type="text" class="uv-field uv-date-picker date date-to"  id="to" value="">
  287.                     </div>
  290.                     <input value="year" type="radio" class="toggle " name="options" id="year" autocomplete="off" >
  291.                     <label class="btn" for="year">Last Year</label>
  293.                     <input value="month" type="radio" class="toggle " name="options" id="month" autocomplete="off">
  294.                     <label class="btn" for="month">Last Month</label>
  296.                     <input value="week" type="radio" class="toggle " name="options" id="week" autocomplete="off" >
  297.                     <label class="btn" for="week">Last Week</label>
  299.                     <input value="day" type="radio" class="toggle " name="options" id="day" autocomplete="off" >
  300.                     <label class="btn" for="day">Last Day</label>
  303.                 </div>
  305.                 {# <input value="year" type="radio" class="toggle " name="options" id="year" autocomplete="off" >
  306.                  <label class="btn" for="year">Last Year</label>
  308.                  <input value="month" type="radio" class="toggle " name="options" id="month" autocomplete="off">
  309.                  <label class="btn" for="month">Last Month</label>
  311.                  <input value="week" type="radio" class="toggle " name="options" id="week" autocomplete="off" >
  312.                  <label class="btn" for="week">Last Week</label>
  314.                  <input value="day" type="radio" class="toggle " name="options" id="day" autocomplete="off" >
  315.                  <label class="btn" for="day">Last Day</label>#}
  319.             </div>
  322.             <div class="box-graficos">
  323.                 <div>
  325.                     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bar-chart" viewBox="0 0 16 16">
  326.                         <path d="M4 11H2v3h2v-3zm5-4H7v7h2V7zm5-5v12h-2V2h2zm-2-1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1h-2zM6 7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7zm-5 4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-3z"/>
  327.                     </svg>
  329.                     <b>{{  'Tickets by Status' |trans }}</b><br><br>
  330.                     <div class="graficosTortaBarra" >
  331.                         <span id="contenidoticketsByStatus">
  332.                             {% for tStatus in report_service.ticketsByStatus %}
  333.                                 <label>
  334.                                    <span class='boch'  style="background: {{ tStatus.Color }}"> </span>
  335.                                     ({{ tStatus.Cantidad }}) - {{  tStatus.Nombre }}
  336.                                </label>
  338.                             {% endfor %}
  339.                         </span>
  340.                         <div style="padding:25px;" >
  341.                             <canvas id="ticketsByStatus"   width="700" height="350"></canvas>
  342.                         </div>
  343.                     </div>
  344.                 </div>
  346.                 <div>
  347.                     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bar-chart" viewBox="0 0 16 16">
  348.                         <path d="M4 11H2v3h2v-3zm5-4H7v7h2V7zm5-5v12h-2V2h2zm-2-1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1h-2zM6 7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7zm-5 4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-3z"/>
  349.                     </svg>
  350.                     <b>{{ 'Tickets by Type' |trans }}</b><br><br>
  351.                     <div class="graficosTortaBarra" >
  352.                         <span id="contenidoticketsByType">
  353.                             {% for tStatus in report_service.ticketsByType %}
  354.                                 <label>
  355.                                     <span class='boch'  style="background: {{ tStatus.Color }}"> </span>
  356.                                     ({{ tStatus.Cantidad }}) - {{  tStatus.Nombre }}
  357.                                 </label>
  359.                             {% endfor %}
  360.                         </span>
  361.                         <div style="width: 220px;  margin: 0 auto;padding:25px;">
  362.                             <canvas id="ticketsByType" ></canvas>
  363.                         </div>
  364.                     </div>
  365.                 </div>
  367.                 <div>
  368.                     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bar-chart" viewBox="0 0 16 16">
  369.                         <path d="M4 11H2v3h2v-3zm5-4H7v7h2V7zm5-5v12h-2V2h2zm-2-1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1h-2zM6 7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7zm-5 4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-3z"/>
  370.                     </svg>
  371.                     <b>{{ 'Tickets by Priority' |trans }}</b><br><br>
  372.                     <div class="graficosTortaBarra" >
  373.                         <span id="contenidoticketsByPriority">
  374.                             {% for tPriority in report_service.ticketsByPriority %}
  375.                                 <label>
  376.                                     <span class='boch'  style="background: {{ tPriority.Color }}"> </span>
  378.                                     ({{ tPriority.Cantidad }}) - {{ tPriority.Nombre }}
  379.                                 </label>
  381.                             {% endfor %}
  382.                         </span>
  383.                         <div style="padding:25px;">
  384.                             <canvas id="ticketsByPriority" width="700" height="350"  ></canvas>
  385.                         </div>
  386.                     </div>
  387.                 </div>
  389.                 <div>
  390.                     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bar-chart" viewBox="0 0 16 16">
  391.                         <path d="M4 11H2v3h2v-3zm5-4H7v7h2V7zm5-5v12h-2V2h2zm-2-1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1h-2zM6 7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7zm-5 4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-3z"/>
  392.                     </svg>
  393.                     <b>{{ 'Tickets per Agent' |trans }}</b><br><br>
  394.                     <div class="graficosTortaBarra" >
  395.                         <span id="contenidoticketsPerAgent">
  396.                             {% for tAgent in report_service.ticketsPerAgent %}
  397.                                 <label>
  398.                                     <span class='boch'  style="background: {{ tAgent.Color }}"> </span>
  399.                                     ({{ tAgent.Cantidad }}) - {{  tAgent.Nombre }}
  400.                                 </label>
  401.                             {% endfor %}
  402.                         </span>
  403.                         <div style="padding:25px;width: 220px;  margin: 0 auto;">
  404.                             <canvas id="ticketsPerAgent" ></canvas>
  405.                         </div>
  406.                     </div>
  407.                 </div>
  409.                 <div>
  410.                     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bar-chart" viewBox="0 0 16 16">
  411.                         <path d="M4 11H2v3h2v-3zm5-4H7v7h2V7zm5-5v12h-2V2h2zm-2-1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1h-2zM6 7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7zm-5 4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-3z"/>
  412.                     </svg>
  413.                     <b>{{ 'Tickets per Team' |trans }}</b><br><br>
  414.                     <div class="graficosTortaBarra" >
  415.                         <span id="contenidoticketsPerTeam">
  416.                             {% for tTeam in report_service.ticketsPerTeam %}
  417.                                 <label>
  418.                                     <span class='boch'  style="background: {{ tTeam.Color }}"> </span>
  419.                                     ({{ tTeam.Cantidad }}) - {{  tTeam.Nombre }}
  420.                                 </label>
  422.                             {% endfor %}
  423.                         </span>
  424.                         <div  style="padding:25px;width: 220px;  margin: 0 auto;">
  425.                             <canvas id="ticketsPerTeam" ></canvas>
  426.                         </div>
  427.                     </div>
  428.                 </div>
  430.                 <div>
  431.                     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bar-chart" viewBox="0 0 16 16">
  432.                         <path d="M4 11H2v3h2v-3zm5-4H7v7h2V7zm5-5v12h-2V2h2zm-2-1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1h-2zM6 7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7zm-5 4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-3z"/>
  433.                     </svg>
  434.                     <b>{{ 'Kudos' |trans }}</b><br><br>
  436.                     <div class="graficosTortaBarra" >
  437.                         <span id="contenidokudos">
  438.                             {% for tKudos in report_service.Kudos %}
  439.                                 <label>
  440.                                     <span class='boch'  style="background: {{ tKudos.Color }}"> </span>
  441.                                     ({{ tKudos.Cantidad }}) - {{ tKudos.Nombre }}
  442.                                 </label>
  443.                             {% endfor %}
  444.                         </span>
  445.                         <div style="padding:25px;">
  446.                             <canvas id="kudos" width="700" height="350" ></canvas>
  447.                         </div>
  448.                     </div>
  449.                 </div>
  451.             </div>
  452.         </div>
  454.         <div class="uv-copyright">
  455.             <span class="uv-credit-text">Powered by <a href="https://www.uvdesk.com" target="_blank">UVdesk</a></span>
  456.         </div>
  457.     </div>
  461. {% endblock %}
  465. {% block footer %}
  466.     {{ parent() }}
  468.     <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
  469.     <script>
  472.         let startGlobalDate = "";
  473.         let endGlobalDate = "";
  474.         let date = new Date();
  475.         let currentMonth = date.getMonth();
  476.         let currentDate = date.getDate();
  477.         let currentYear = date.getFullYear();
  479.         //Filtros año, mes, semana, dia
  480.         $("input[type='radio']").click(function(){
  481.             currentDate = new Date();
  482.             start = new Date();
  483.             end = new Date();
  484.             $('.uv-action-bar .date').find("#to").val(currentDate.getFullYear() + "-" + (currentDate.getMonth()+1) + "-" + currentDate.getDate());
  485.             var hasta = new Date($('.uv-action-bar .date').find("#to").val());
  486.             switch ($('input[name="options"]:checked').val()) {
  487.                 case "year":
  488.                     start.setFullYear(currentDate.getFullYear() - 1);
  489.                     start.setMonth(0);
  490.                     start.setDate(1);
  491.                     start.setHours(0, 0, 0, 0);
  492.                     end.setFullYear(currentDate.getFullYear() - 1);
  493.                     end.setMonth(11);
  494.                     end.setDate(new Date(currentDate.getFullYear() - 1, 12, 0).getDate())
  495.                     end.setHours(0, 0, 0, 0);
  497.                     datestringStart = start.getFullYear() + "-" + (start.getMonth()+1) + "-" + start.getDate();
  498.                     datestringEnd = end.getFullYear() + "-" + (end.getMonth()+1) + "-" + end.getDate();
  499.                     $('.uv-action-bar .date').find("#from").val(datestringStart)
  500.                     $('.uv-action-bar .date').find("#to").val(datestringEnd).trigger('change');
  501.                     break;
  502.                 case "month":
  503.                     start.setMonth(currentDate.getMonth() - 1);
  504.                     start.setDate(1);
  505.                     start.setHours(0, 0, 0, 0);
  506.                     end.setMonth(currentDate.getMonth() - 1);
  507.                     end.setDate(new Date(end.getFullYear(), end.getMonth(), 0).getDate())
  508.                     end.setHours(0, 0, 0, 0);
  510.                     datestringStart = start.getFullYear() + "-" + (start.getMonth()+1) + "-" + start.getDate();
  511.                     datestringEnd = end.getFullYear() + "-" + (end.getMonth()+1) + "-" + end.getDate();
  512.                     $('.uv-action-bar .date').find("#from").val(datestringStart);
  513.                     $('.uv-action-bar .date').find("#to").val(datestringEnd).trigger('change');
  514.                     break;
  515.                 case "week":
  516.                     var beforeOneWeek = new Date(new Date().getTime() - 60 * 60 * 24 * 7 * 1000)
  517.                     var beforeOneWeek2 = new Date(beforeOneWeek);
  518.                     day = beforeOneWeek.getDay()
  519.                     diffToMonday = beforeOneWeek.getDate() - day + (day === 0 ? -6 : 1)
  520.                     lastMonday = new Date(beforeOneWeek.setDate(diffToMonday))
  521.                     lastSunday = new Date(beforeOneWeek2.setDate(diffToMonday + 6));
  523.                     datestringStart = lastMonday.getFullYear() + "-" + (lastMonday.getMonth()+1) + "-" + lastMonday.getDate();
  524.                     datestringEnd = lastSunday.getFullYear() + "-" + (lastSunday.getMonth()+1) + "-" + lastSunday.getDate();
  525.                     $('.uv-action-bar .date').find("#from").val(datestringStart);
  526.                     $('.uv-action-bar .date').find("#to").val(datestringEnd).trigger('change');
  527.                     break;
  528.                 case "day":
  529.                     start.setFullYear(hasta.getFullYear());
  530.                     start.setMonth(hasta.getMonth());
  531.                     start.setDate(hasta.getDate());
  532.                     start.setHours(0, 0, 0, 0);
  533.                     datestring =  start.getFullYear() + "-" + (start.getMonth()+1) + "-" + start.getDate();
  534.                     $('.uv-action-bar .date').find("#from").val(datestring);
  535.                     $('.uv-action-bar .date').find("#to").val(datestring).trigger('change');
  536.                     break;
  537.             }
  543.         })
  545.         let ticketsByStatus = {{report_service.ticketsByStatus|json_encode|raw}};
  546.         let ticketsByType = {{report_service.ticketsByType|json_encode|raw}};
  547.         let ticketsByPriority = {{report_service.ticketsByPriority|json_encode|raw}};
  548.         let ticketsPerAgent = {{report_service.ticketsPerAgent|json_encode|raw}};
  549.         let ticketsPerTeam = {{report_service.ticketsPerTeam|json_encode|raw}};
  550.         let kudos = {{report_service.kudos|json_encode|raw}};
  553.         $('.uv-action-bar .date #from').datetimepicker({
  554.             maxDate: new Date(currentYear, currentMonth, currentDate),
  555.             format: 'YYYY-MM-DD',
  556.         }).on('dp.change', function(e) {
  557.             filtroFechas();
  558.         });
  559.         $('.uv-action-bar .date #to').datetimepicker({
  560.             maxDate: new Date(currentYear, currentMonth, currentDate),
  561.             format: 'YYYY-MM-DD',
  562.         }).on('dp.change', function(e) {
  563.             filtroFechas();
  564.         });
  566.         const filtroFechas = () => {
  568.             //Filtro fechas
  570.             $.ajax({
  571.                 type: "POST",
  572.                 url: "{{ path('helpdesk_member_report_charts_xhr') }}",
  573.                 data: {
  574.                     'from': $('.uv-action-bar .date').find("#from").val(),
  575.                     'to': $('.uv-action-bar .date').find("#to").val()
  576.                 },
  577.                 dataType: "json",
  578.                 success: function(msg){
  580.                     ticketsByStatus = msg['ticketsByStatus']
  581.                     ticketsByType = msg['ticketsByType']
  582.                     ticketsByPriority = msg['ticketsByPriority']
  583.                     ticketsPerAgent = msg['ticketsPerAgent']
  584.                     ticketsPerTeam = msg['ticketsPerTeam']
  585.                     kudos = msg['kudos']
  587.                     actualizarGraficos();
  588.                     //actualizarGraficos(new Date($('.uv-action-bar .date').find("#from").val()),new Date($('.uv-action-bar .date').find("#to").val()))
  589.                 }
  590.             });
  591.         }
  593.         const capitalizeFirstLetter = (string) => {
  594.             return string.charAt(0).toUpperCase() + string.slice(1);
  595.         }
  597.         const crearGrafico = (tickets, nombre) => {
  600.             let tipo = 'pie'
  601.             let labels = Object.values(tickets).map(function (el) {return el.Nombre })
  603.             let label = ''
  604.             switch(nombre) {
  605.                 case 'kudos':
  606.                     tipo = 'horizontalBar';
  607.                     break;
  608.                 case 'ticketsByStatus':
  609.                     tipo = 'horizontalBar';
  610.                     break;
  611.                 case 'ticketsByPriority':
  612.                     tipo = 'horizontalBar';
  613.                     break;
  614.             }
  617.             return new Chart(
  618.                 document.getElementById(nombre),
  619.                 {
  620.                     type: tipo,
  621.                     data: {
  622.                         labels: labels,
  623.                         datasets: [{
  624.                             label: label,
  625.                             data: Object.values(tickets).map(function (el) { return el.Cantidad }),
  626.                             backgroundColor: Object.values(tickets).map(function (el) { return el.Color }),
  627.                             hoverOffset: 4
  628.                         }]
  629.                     },options: {
  630.                         legend: { display: false }
  631.                     }
  632.                 }
  633.             )
  634.         }
  637.         const actualizaGrafico = (grafico, tickets, nombre) => {
  639.             let labels = Object.values(tickets).map(function (el) {return el.Nombre })
  641.             const data = {
  642.                 labels: labels,
  643.                 datasets: [
  644.                     {
  645.                         label: '',
  646.                         data: Object.values(tickets).map(function (el) { return el.Cantidad }),
  647.                         backgroundColor: Object.values(tickets).map(function (el) { return el.Color }),
  648.                         hoverOffset: 4
  649.                     }
  650.                 ]
  651.             };
  653.             grafico.data.labels = data.labels;
  654.             grafico.data.datasets = data.datasets;
  655.             grafico.update();
  657.             let html = '';
  658.             $.each(tickets, function (key, value) {
  659.                 let Color = value.Color;
  660.                 let Cantidad = value.Cantidad;
  661.                 let Nombre = value.Nombre;
  663.                 html += '<label><span class="boch" style="background: '+ Color +'"></span>  '+ Cantidad +' - '+ Nombre +' </label>';
  664.             });
  665.             $('#'+nombre).html(html);
  666.         }
  668.         //Tickets by Status
  669.         let graficoTicketByStatus = crearGrafico(ticketsByStatus, 'ticketsByStatus')
  670.         //Tickets by type
  671.         let graficoTicketByType = crearGrafico(ticketsByType, 'ticketsByType')
  672.         //Tickets by priority
  673.         let graficoTicketByPriority = crearGrafico(ticketsByPriority, 'ticketsByPriority')
  674.         //Tickets per agent
  675.         let graficoPerAgent = crearGrafico(ticketsPerAgent, 'ticketsPerAgent')
  676.         //Tickets per team
  677.         let graficoPerTeam = crearGrafico(ticketsPerTeam, 'ticketsPerTeam')
  678.         //Kudos
  679.         let graficoKudos = crearGrafico(kudos, 'kudos')
  681.         const actualizarGraficos = () => {
  683.             actualizaGrafico(graficoTicketByStatus, ticketsByStatus, 'contenidoticketsByStatus');
  684.             actualizaGrafico(graficoTicketByType, ticketsByType, 'contenidoticketsByType');
  685.             actualizaGrafico(graficoTicketByPriority, ticketsByPriority, 'contenidoticketsByPriority');
  686.             actualizaGrafico(graficoPerAgent, ticketsPerAgent, 'contenidoticketsPerAgent');
  687.             actualizaGrafico(graficoPerTeam, ticketsPerTeam, 'contenidoticketsPerTeam');
  688.             actualizaGrafico(graficoKudos, kudos, 'contenidokudos');
  690.         }
  692.     </script>
  695. {% endblock %}