templates/statistiques/resources.html.twig line 1

  1. {% extends 'base.html.twig' %}
  3. {% block title %}WFO Stat{% endblock %}
  6. {% block body %}
  8.     
  9.     <div class="row" id="divStats" style="display:none">
  10.         <div class="row margin-bottom-3">
  11.             <div class="col-md-2">
  12.                 <div class="container-resa float-left">
  13.                     <div class="div-bordred">
  14.                         <div class="d-flex title-box">
  15.                             <img src="{{ asset('assets/img/paper.svg') }}" class="img-fluid">
  16.                             <h4>{{ 'Booking'|trans }}</h4>
  17.                         </div>
  18.                         <span id="nbrReservation">
  19.                             <div class="loader"></div>
  20.                         </span>
  21.                     </div>
  22.                 </div>
  23.             </div>
  24.         </div>
  25.         <div class="row margin-bottom-3">
  26.             <div class="col-md-6">
  27.                 <div class="box-shart">
  28.                     <div class="pieChart display-center" id="statusChart">
  29.                         <div class="loader"></div>
  30.                     </div>
  31.                 </div>
  32.             </div>
  33.             <div class="col-md-6">
  34.                 <div class="box-shart">
  35.                     <div class="pieChart display-center" id="immediateChart">
  36.                         <div class="loader"></div>
  37.                     </div>
  38.                 </div>
  39.             </div>
  40.             <div class="col-md-6">
  41.                 <div class="box-shart">
  42.                     <div class="pieChart display-center" id="originChart">
  43.                         <div class="loader"></div>
  44.                     </div>
  45.                 </div>    
  46.             </div>
  47.             <div class="col-md-6">
  48.                 <div class="box-shart">
  49.                     <div class="pieChart display-center" id="resourceByTypeChart">
  50.                         <div class="loader"></div>
  51.                     </div>
  52.                 </div>    
  53.             </div>
  54.         </div>
  55.         <div class="row margin-bottom-3">
  56.             <div class="title-block row align-items-center">
  57.                 <div class="col-md-3"><h5>{{"by Site"|trans}}</h5></div>
  58.                 <div class="col-md-9"><hr></div>
  59.             </div>
  60.             <div class="col-md-12">
  61.                 <div class="box-shart">
  62.                     <div class="pieChart display-center" id="resourceBySite">
  63.                         <div class="loader"></div>
  64.                     </div>
  65.                 </div>
  66.             </div>
  67.         </div>
  68.         <div class="row margin-bottom-3">
  69.             <div class="title-block row align-items-center">
  70.                 <div class="col-md-3"><h5>{{"by Stage"|trans}}</h5></div>
  71.                 <div class="col-md-9"><hr></div>
  72.             </div>
  73.             <div class="col-md-12">
  74.                 <div class="box-shart">
  75.                     <div class="pieChart display-center" id="resourceByStage">
  76.                         <div class="loader"></div>
  77.                     </div>
  78.                 </div>
  79.             </div>
  80.         </div>
  81.         <div class="row margin-bottom-3">
  82.             <div class="title-block row align-items-center">
  83.                 <div class="col-md-3"><h5>{{"by Zone"|trans}}</h5></div>
  84.                 <div class="col-md-9"><hr></div>
  85.             </div>
  86.             <div class="col-md-12">
  87.                 <div class="box-shart">
  88.                     <div class="pieChart display-center" id="resourceByZone">
  89.                         <div class="loader"></div>
  90.                     </div>
  91.                 </div>
  92.             </div>
  93.         </div>
  94.         <div class="row margin-bottom-3">
  95.             <div class="title-block row align-items-center">
  96.                 <div class="col-md-3"><h5>{{"by Resource Type"|trans}}</h5></div>
  97.                 <div class="col-md-9"><hr></div>
  98.             </div>
  99.             <div class="col-md-12">
  100.                 <div class="box-shart">
  101.                     <div class="pieChart display-center" id="resourceByStackingDiagram">
  102.                         <div class="loader"></div>
  103.                     </div>
  104.                 </div>
  105.             </div>
  106.         </div>
  107.         <div class="row margin-bottom-3 align-items-center">
  108.             <div class="title-block row align-items-center">
  109.                 <div class="col-md-2"><h5>{{ 'Occupancy rate'|trans }}</h5></div>
  110.                 <div class="col-md-10"><hr></div>
  111.             </div>
  112.             <div class="col-md-8">
  113.                 <div class="box-shart">
  114.                     <div class="pieChart display-center" id="tauxOccupation">
  115.                         <div class="loader"></div>
  116.                     </div>
  117.                 </div>
  118.             </div>
  119.             <div class="col-md-3">
  120.                 <div class="box-shart-2">
  121.                     <span id="tauxOccupationTotal">
  122.                         <div class="loader"></div>
  123.                     </span>
  124.                     <h4>{{ 'Occupancy rate'|trans }}</h4>
  125.                 </div>
  126.             </div>
  127.         </div>
  128.         <div class="row margin-bottom-3 align-items-center">
  129.             <div class="title-block row align-items-center">
  130.                 <div class="col-md-4"><h5>{{ 'Occupancy rate'|trans }} 9h-12h 14h-17h</h5></div>
  131.                 <div class="col-md-8"><hr></div>
  132.             </div>
  133.             <div class="col-md-8">
  134.                 <div class="box-shart">
  135.                     <div class="pieChart display-center" id="tauxOccupationReal">
  136.                         <div class="loader"></div>
  137.                     </div>
  138.                 </div>
  139.             </div>
  140.             <div class="col-md-3">
  141.                 <div class="box-shart-2">
  142.                     <span id="tauxOccupationRealTotal">
  143.                         <div class="loader"></div>
  144.                     </span>
  145.                     <h4>{{ 'Occupancy rate'|trans }}</h4>
  146.                 </div>
  147.             </div>
  148.         </div>
  149.         <div class="row margin-bottom-3 align-items-center">
  150.             <div class="title-block row align-items-center">
  151.                 <div class="col-md-4"><h5>{{ 'Daily occupancy rate'|trans }}</h5></div>
  152.                 <div class="col-md-8"><hr></div>
  153.             </div>
  154.             <div class="col-md-8">
  155.                 <div class="box-shart">
  156.                     <div class="pieChart display-center" id="tauxOccupationByWeekDay">
  157.                         <div class="loader"></div>
  158.                     </div>
  159.                 </div>
  160.             </div>
  161.             <div class="col-md-3">
  162.                 <div class="box-shart-2">
  163.                     <span id="tauxOccupationByWeekDayTotal">
  164.                         <div class="loader"></div>
  165.                     </span>
  166.                     <h4>{{ 'Occupancy rate'|trans }} </h4>
  167.                 </div>
  168.             </div>
  169.         </div>
  170.         <div class="row margin-bottom-3 align-items-center">
  171.             <div class="title-block row align-items-center">
  172.                 <div class="col-md-4"><h5>{{ 'Peak_occupancy_rate_per_day'|trans }} </h5></div>
  173.                 <div class="col-md-8"><hr></div>
  174.             </div>
  175.             <div class="col-md-8">
  176.                 <div class="box-shart">
  177.                     <div class="pieChart display-center" id="tauxOccupationDesPickByDate">
  178.                         <div class="loader"></div>
  179.                     </div>
  180.                 </div>
  181.             </div>
  182.             <div class="col-md-3">
  183.                 <div class="box-shart-2">
  184.                     <span id="tauxOccupationDesPickByDateTotal">
  185.                         <div class="loader"></div>
  186.                     </span>
  187.                     <h4>{{ 'Occupancy rate'|trans }} </h4>
  188.                 </div>
  189.             </div>
  190.         </div>
  191.         <div class="row margin-bottom-3">
  192.             <div class="title-block row align-items-center">
  193.                 <div class="col-md-3"><h5>{{"per time slot"|trans}}</h5></div>
  194.                 <div class="col-md-9"><hr></div>
  195.             </div>
  196.             <div class="col-md-12">
  197.                 <div class="box-shart">
  198.                     <div class="pieChart display-center" id="chartCreneau">
  199.                         <div class="loader"></div>
  200.                     </div>
  201.                 </div>    
  202.             </div>
  203.         </div>
  204.         <div class="row margin-bottom-3">
  205.             <div class="title-block row align-items-center">
  206.                 <div class="col-md-3"><h5>{{'Reservation per day'|trans}}</h5></div>
  207.                 <div class="col-md-9"><hr></div>
  208.             </div>
  209.             <div class="col-md-12">
  210.                 <div class="box-shart">
  211.                     <div class="pieChart display-center" id="reservationByDay">
  212.                         <div class="loader"></div>
  213.                     </div>
  214.                 </div>    
  215.             </div>
  216.         </div>
  217.         <div class="row margin-bottom-3">
  218.             <div class="title-block row align-items-center">
  219.                 <div class="col-md-3"><h5>{{'Top 5 resources'|trans}}</h5></div>
  220.                 <div class="col-md-9"><hr></div>
  221.             </div>
  222.             <div class="col-md-12">
  223.                 <div class="box-shart">
  224.                     <div class="pieChart display-center" id="topRessources">
  225.                         <div class="loader"></div>
  226.                     </div>
  227.                 </div>    
  228.             </div>
  229.         </div>
  230.         <div class="row margin-bottom-3">
  231.             <div class="title-block row align-items-center">
  232.                 <div class="col-md-3"><h5>{{'Top 10 users'|trans}}</h5></div>
  233.                 <div class="col-md-9"><hr></div>
  234.             </div>
  235.             <div class="col-md-12">
  236.                 <div class="box-shart">
  237.                     <div class="pieChart display-center" id="topUsers">
  238.                         <div class="loader"></div>
  239.                     </div>
  240.                 </div>    
  241.             </div>
  242.         </div>
  243.     </div>
  244. {% endblock %}
  245. {% block scripts %}
  247. <script>
  248.         var topResources = [];
  249.         var reservationByDay = [];
  250.         var tauxOccupation = [];
  251.         var tauxOccupationReal = [];
  252.         var resourceTypeSelected = [
  253.             {% for item in typeResources %}
  254.                 {{ item.id }}
  255.                 {% if loop.last == false %},{% endif %}
  256.             {% endfor %}
  257.         ]
  258.         var localisationSelected = [
  259.             {% for item in localisations %}
  260.                 {{ item.id }}
  261.                 {% if loop.last == false %},{% endif %}
  262.             {% endfor %}
  263.         ]
  265.         $(document).ready(function() {
  266.             const treeResourcesTree = new Treeselect({
  267.                 parentHtmlContainer: document.querySelector('#typeResourcesTree'),
  268.                 value: resourceTypeSelected,
  269.                 options: JSON.parse(`{{ typeResourcesTree|json_encode|raw }}`),
  270.             });
  271.             treeResourcesTree.srcElement.addEventListener('input', (e) => {
  272.                 resourceTypeSelected = e.detail;
  273.             })
  274.             const treeLocalisation = new Treeselect({
  275.                 parentHtmlContainer: document.querySelector('#localisationsTree'),
  276.                 value: localisationSelected,
  277.                 options: JSON.parse(`{{ localisationsTree|json_encode|raw }}`),
  278.             })
  279.             treeLocalisation.srcElement.addEventListener('input', (e) => {
  280.                 localisationSelected = e.detail;
  281.             })
  282.         })
  283.         function getReservation() {
  285.             if (!!!$('#startDate').val() || !!!$('#endDate').val()) {
  286.                 toastr.error("{{'Please select the start and end dates.'|trans}}");
  287.                 return; 
  288.             }
  289.             
  291.             const status = $('[data-type="status"]').map(function () {
  292.                 if ($(this).is(':checked'))
  293.                     return $(this).val();
  294.             }).get();
  296.             if (status.length == 0 ) {
  297.                 toastr.error("{{'Please select at least one status.'|trans}}");
  298.                 return; 
  299.             }
  300.             if (localisationSelected.length == 0 ) {
  301.                 toastr.error("{{'Please select at least one location.'|trans}}");
  302.                 return; 
  303.             }
  304.             
  305.             if (resourceTypeSelected.length == 0 ) {
  306.                 toastr.error("{{'Please select at least one type of resource.'|trans}}");
  307.                 return; 
  308.             }
  309.             const resource = $('#txtResource').val() != '' ? $('#txtResource').val() : null;
  311.             initCharts()
  312.             getTotalReservation(localisationSelected,resourceTypeSelected,status,resource);
  313.         }
  314.         function getTotalReservation(localisation,resourceType,status,resource) {
  315.             $.ajax({
  316.                 type: "POST",
  317.                 url: "{{ path('getReservation') }}",
  318.                 data: {
  319.                     localisation: localisation.join(),
  320.                     resourceType: resourceType.join(),
  321.                     status: status.join(),
  322.                     resource: resource,
  323.                     user: $('#txtUser').val() ?? null,
  324.                     startDate: $('#startDate').val(),
  325.                     endDate: $('#endDate').val(),
  326.                 },
  327.                 success: function(response) {
  328.                     document.getElementById('nbrReservation').innerHTML = response['totalReservations'];
  329.                     getStatus(localisationSelected,resourceTypeSelected,status,resource);
  330.                     
  331.                     if (response['totalReservations']) {
  332.                         $('#divStats').css('display', '');
  333.                     }
  334.                 }
  335.             });
  336.         }
  337.         function getStatus(localisation,resourceType,status,resource) {
  338.             $.ajax({
  339.                 type: "POST",
  340.                 url: "{{ path('getStatus') }}",
  341.                 data: {
  342.                     localisation: localisation.join(),
  343.                     resourceType: resourceType.join(),
  344.                     status: status.join(),
  345.                     resource: resource,
  346.                     user: $('#txtUser').val() ?? null,
  347.                     startDate: $('#startDate').val(),
  348.                     endDate: $('#endDate').val(),
  349.                 },
  350.                 success: function(response) {
  351.                     getOrigin(localisationSelected,resourceTypeSelected,status,resource);
  352.                     am5.ready(
  353.                         getDataByHistograme(am5,'statusChart',response['reservationStatus']),
  354.                     )
  355.                 }
  356.             });
  357.         }
  358.         function getOrigin(localisation,resourceType,status,resource) {
  359.             $.ajax({
  360.                 type: "POST",
  361.                 url: "{{ path('getOrigin') }}",
  362.                 data: {
  363.                     localisation: localisation.join(),
  364.                     resourceType: resourceType.join(),
  365.                     status: status.join(),
  366.                     resource: resource,
  367.                     user: $('#txtUser').val() ?? null,
  368.                     startDate: $('#startDate').val(),
  369.                     endDate: $('#endDate').val(),
  370.                 },
  371.                 success: function(response) {
  372.                     getImmediate(localisationSelected,resourceTypeSelected,status,resource);
  373.                     am5.ready(
  374.                         getDataByHistograme(am5,'originChart',response['reservationOrigin']),
  375.                     )
  376.                 }
  377.             });
  378.         }
  379.         function getImmediate(localisation,resourceType,status,resource) {
  380.             $.ajax({
  381.                 type: "POST",
  382.                 url: "{{ path('getImmediate') }}",
  383.                 data: {
  384.                     localisation: localisation.join(),
  385.                     resourceType: resourceType.join(),
  386.                     status: status.join(),
  387.                     resource: resource,
  388.                     user: $('#txtUser').val() ?? null,
  389.                     startDate: $('#startDate').val(),
  390.                     endDate: $('#endDate').val(),
  391.                 },
  392.                 success: function(response) {
  393.                     getTypeSite(localisationSelected,resourceTypeSelected,status,resource);
  394.                     am5.ready(
  395.                         getDataByHistograme(am5,'immediateChart',response['immediateReservation']),
  396.                     )
  397.                 }
  398.             });
  399.         }
  400.         function getTypeSite(localisation,resourceType,status,resource) {
  401.             $.ajax({
  402.                 type: "POST",
  403.                 url: "{{ path('getTypeSite') }}",
  404.                 data: {
  405.                     localisation: localisation.join(),
  406.                     resourceType: resourceType.join(),
  407.                     status: status.join(),
  408.                     resource: resource,
  409.                     user: $('#txtUser').val() ?? null,
  410.                     startDate: $('#startDate').val(),
  411.                     endDate: $('#endDate').val(),
  412.                 },
  413.                 success: function(response) {
  414.                     $('#divStats').css('display', '');
  415.                     getByStage(localisationSelected,resourceTypeSelected,status,resource);
  416.                     am5.ready(
  417.                         getDataByHistograme(am5,'resourceBySite',response['resourceBySite']),
  418.                     )
  419.                 }
  420.             });
  421.         }
  422.         function getByStage(localisation,resourceType,status,resource) {
  423.             $.ajax({
  424.                 type: "POST",
  425.                 url: "{{ path('getByStage') }}",
  426.                 data: {
  427.                     localisation: localisation.join(),
  428.                     resourceType: resourceType.join(),
  429.                     status: status.join(),
  430.                     resource: resource,
  431.                     user: $('#txtUser').val() ?? null,
  432.                     startDate: $('#startDate').val(),
  433.                     endDate: $('#endDate').val(),
  434.                 },
  435.                 success: function(response) {
  436.                     $('#divStats').css('display', '');
  437.                     getWithoutSite(localisationSelected,resourceTypeSelected,status,resource);
  438.                     const seriesLabel = {'{{ "Confirmed"|trans }}':0,'{{ "Refused"|trans }}':0,'{{ "Pending"|trans }}':0,'{{ "Cancelled"|trans }}':0};
  439.                     am5.ready(
  440.                         getStacksDiagram(am5,"resourceByStage",response['resourceByStage'],seriesLabel, false),
  441.                     )
  442.                 }
  443.             });
  444.         }
  445.         function getWithoutSite(localisation,resourceType,status,resource) {
  446.             $.ajax({
  447.                 type: "POST",
  448.                 url: "{{ path('getWithoutSite') }}",
  449.                 data: {
  450.                     localisation: localisation.join(),
  451.                     resourceType: resourceType.join(),
  452.                     status: status.join(),
  453.                     resource: resource,
  454.                     user: $('#txtUser').val() ?? null,
  455.                     startDate: $('#startDate').val(),
  456.                     endDate: $('#endDate').val(),
  457.                 },
  458.                 success: function(response) {
  459.                     $('#divStats').css('display', '');
  460.                     getByZone(localisationSelected,resourceTypeSelected,status,resource);
  461.                     am5.ready(
  462.                         getStacksDiagram(am5,"resourceByStackingDiagram",response['resourceByStackingDiagram'],response['resourceWithoutSite'],false)
  463.                     )
  464.                 }
  465.             });
  466.         }
  467.         function getByZone(localisation,resourceType,status,resource) {
  468.             $.ajax({
  469.                 type: "POST",
  470.                 url: "{{ path('getByZone') }}",
  471.                 data: {
  472.                     localisation: localisation.join(),
  473.                     resourceType: resourceType.join(),
  474.                     status: status.join(),
  475.                     resource: resource,
  476.                     user: $('#txtUser').val() ?? null,
  477.                     startDate: $('#startDate').val(),
  478.                     endDate: $('#endDate').val(),
  479.                 },
  480.                 success: function(response) {
  481.                     $('#divStats').css('display', '');
  482.                     getStatsCreneau(localisationSelected,resourceTypeSelected,status,resource);
  483.                     am5.ready(
  484.                         getDataByHistograme(am5,'resourceByZone',response['resourceByZone'],true),
  485.                     )
  486.                 }
  487.             });
  488.         }
  489.         function getByZone(localisation,resourceType,status,resource) {
  490.             $.ajax({
  491.                 type: "POST",
  492.                 url: "{{ path('getByZone') }}",
  493.                 data: {
  494.                     localisation: localisation.join(),
  495.                     resourceType: resourceType.join(),
  496.                     status: status.join(),
  497.                     resource: resource,
  498.                     user: $('#txtUser').val() ?? null,
  499.                     startDate: $('#startDate').val(),
  500.                     endDate: $('#endDate').val(),
  501.                 },
  502.                 success: function(response) {
  503.                     $('#divStats').css('display', '');
  504.                     getByType(localisationSelected,resourceTypeSelected,status,resource);
  505.                     am5.ready(
  506.                         getDataByHistograme(am5,'resourceByZone',response['resourceByZone'],true),
  507.                     )
  508.                 }
  509.             });
  510.         }
  511.         function getByType(localisation,resourceType,status,resource) {
  512.             $.ajax({
  513.                 type: "POST",
  514.                 url: "{{ path('getByType') }}",
  515.                 data: {
  516.                     localisation: localisation.join(),
  517.                     resourceType: resourceType.join(),
  518.                     status: status.join(),
  519.                     resource: resource,
  520.                     user: $('#txtUser').val() ?? null,
  521.                     startDate: $('#startDate').val(),
  522.                     endDate: $('#endDate').val(),
  523.                 },
  524.                 success: function(response) {
  525.                     $('#divStats').css('display', '');
  526.                     getStatsCreneau(localisationSelected,resourceTypeSelected,status,resource);
  527.                     am5.ready(
  528.                         getDataByHistograme(am5,'resourceByTypeChart',response['resourceByType']),
  529.                     )
  530.                 }
  531.             });
  532.         }
  533.         function getStatsCreneau(localisation,resourceType,status,resource) {
  534.             $.ajax({
  535.                 type: "POST",
  536.                 url: "{{ path('getCreneau') }}",
  537.                 data: {
  538.                     localisation: localisation.join(),
  539.                     resourceType: resourceType.join(),
  540.                     status: status.join(),
  541.                     resource: resource,
  542.                     user: $('#txtUser').val() ?? null,
  543.                     startDate: $('#startDate').val(),
  544.                     endDate: $('#endDate').val(),
  545.                 },
  546.                 success: function(response) {
  547.                     reservationByDay = response['reservationByDay'];
  548.                     topResources = response['topResources'];
  549.                     tauxOccupation = response['tauxOccupation'];
  550.                     tauxOccupationReal = response['tauxOccupationReal'];
  552.                     document.getElementById('tauxOccupationTotal').innerHTML = response['tauxOccupationTotal'] + '%';
  553.                     document.getElementById('tauxOccupationByWeekDayTotal').innerHTML = response['tauxOccupationTotal'] + '%';
  554.                     document.getElementById('tauxOccupationDesPickByDateTotal').innerHTML = response['tauxOccupationDesPickByDateTotal'] + '%';
  555.                     document.getElementById('tauxOccupationRealTotal').innerHTML = response['tauxOccupationRealTotal'] + '%';
  556.                     
  557.                     getTopUsers(localisation,resourceType,status,resource);
  558.                     const seriesLabel = {'{{ "Confirmed"|trans }}':0,'{{ "Refused"|trans }}':0,'{{ "Pending"|trans }}':0,'{{ "Cancelled"|trans }}':0};
  559.                     am5.ready(
  560.                         getStacksDiagram(am5,"topRessources",response['topResources'],seriesLabel, true),
  561.                         getChartCreneau(am5),
  562.                         getTauxOccupation(am5,"tauxOccupation",tauxOccupation,"hour"),
  563.                         getTauxOccupation(am5,"tauxOccupationReal",tauxOccupationReal,"hour"),
  564.                         getTauxOccupation(am5,"tauxOccupationByWeekDay",response['tauxOccupationByWeekDay'],"day"),
  565.                         getTauxOccupation(am5,"tauxOccupationDesPickByDate",response['tauxOccupationDesPickByDate'],"date"),
  566.                         getReservationByDay(am5),
  567.                     )
  568.                 }
  569.             });
  570.         }
  571.         
  572.         function getTopUsers(localisation,resourceType,status,resource) {
  573.             
  574.             $.ajax({
  575.                 type: "POST",
  576.                 url: "{{ path('top_users') }}",
  577.                 data: {
  578.                     localisation: localisation.join(),
  579.                     resourceType: resourceType.join(),
  580.                     status: status.join(),
  581.                     resource: resource,
  582.                     user: $('#txtUser').val() ?? null,
  583.                     startDate: $('#startDate').val(),
  584.                     endDate: $('#endDate').val(),
  585.                 },
  586.                 success: function(response) {
  587.                     getDataByHistograme(am5,'topUsers',response['topUsers']);
  588.                 }
  589.             });
  590.         }
  591.         function initCharts() {
  592.             document.getElementById("nbrReservation").outerHTML = '<span id="nbrReservation">~</span>'
  593.             document.getElementById("topRessources").outerHTML = '<div class="pieChart display-center" id="topRessources"><div class="loader"></div></div>'
  594.             document.getElementById("reservationByDay").outerHTML = '<div class="pieChart display-center" id="reservationByDay"><div class="loader"></div></div>'
  595.             document.getElementById("chartCreneau").outerHTML = '<div class="pieChart display-center" id="chartCreneau"><div class="loader"></div></div>'
  596.             document.getElementById("tauxOccupationTotal").outerHTML = '<span class="display-center" id="tauxOccupationTotal"><div class="loader"></div></span>'
  597.             document.getElementById("tauxOccupation").outerHTML = '<div class="pieChart display-center" id="tauxOccupation"><div class="loader"></div></div>'
  598.             document.getElementById("tauxOccupationReal").outerHTML = '<div class="pieChart display-center" id="tauxOccupationReal"><div class="loader"></div></div>'
  599.             
  600.             document.getElementById("tauxOccupationByWeekDay").outerHTML = '<div class="pieChart display-center" id="tauxOccupationByWeekDay"><div class="loader"></div></div>'
  601.             document.getElementById("tauxOccupationByWeekDayTotal").outerHTML = '<span class="display-center" id="tauxOccupationByWeekDayTotal"><div class="loader"></div></span>'
  602.             
  603.             document.getElementById("tauxOccupationDesPickByDate").outerHTML = '<div class="pieChart display-center" id="tauxOccupationDesPickByDate"><div class="loader"></div></div>'
  604.             document.getElementById("tauxOccupationDesPickByDateTotal").outerHTML = '<span class="display-center" id="tauxOccupationDesPickByDateTotal"><div class="loader"></div></span>'
  605.             
  606.             document.getElementById("resourceBySite").outerHTML = '<div class="pieChart display-center" id="resourceBySite"><div class="loader"></div></div> '
  607.             document.getElementById("resourceByStage").outerHTML = '<div class="pieChart display-center" id="resourceByStage"><div class="loader"></div></div> '
  608.             document.getElementById("resourceByZone").outerHTML = '<div class="pieChart display-center" id="resourceByZone"><div class="loader"></div></div> '
  609.             document.getElementById("resourceByTypeChart").outerHTML = '<div class="pieChart display-center" id="resourceByTypeChart"><div class="loader"></div></div>'
  610.             document.getElementById("originChart").outerHTML = '<div class="pieChart display-center" id="originChart"><div class="loader"></div></div>'
  611.             document.getElementById("immediateChart").outerHTML = '<div class="pieChart display-center" id="immediateChart"><div class="loader"></div></div>'
  612.             document.getElementById("statusChart").outerHTML = '<div class="pieChart display-center" id="statusChart"><div class="loader"></div></div>'
  613.             document.getElementById("resourceByStackingDiagram").outerHTML = '<div class="pieChart display-center" id="resourceByStackingDiagram"><div class="loader"></div></div>'
  614.         }
  615.         function camembertChart(am5,component,data) {
  616.             document.getElementById(component).outerHTML = '<div class="pieChart" id="' + component + '"></div>';
  617.             if(data && data.length===0) {
  618.                 const no_result = '{{'no_results'|trans}}';
  619.                 document.getElementById(component).outerHTML= '<div class="pieChart" id="' + component + '"><div style="text-align: center;top: 50%;position: relative;">'+no_result+'</div></div>';
  620.             }
  621.             var myChart = am5.Root.new(component);
  622.             myChart._logo.dispose();
  623.             myChart.setThemes([
  624.                 am5themes_Animated.new(myChart)
  625.             ]);
  626.             var chart = myChart.container.children.push(am5percent.PieChart.new(myChart, {
  627.                 layout: myChart.verticalLayout,
  628.                 innerRadius: am5.percent(70)
  629.             }));
  630.             var series = chart.series.push(am5percent.PieSeries.new(myChart, {
  631.                 valueField: "value",
  632.                 categoryField: "item",
  633.                 tooltip: am5.Tooltip.new(myChart, {pointerOrientation: "left",
  634.                     labelText: "{category}: {valuePercentTotal.formatNumber('0.00')}%[/] [bold]({value})"}),
  635.                 legendValueText: "[bold]{value}",
  636.             }));
  637.             series.labels.template.set("text", "{category}: [bold]{value}");
  638.             series.labels.template.setAll({
  639.                 textType: "circular",
  640.                 centerX: 0,
  641.                 centerY: 0,
  642.                 fontSize: 14
  643.             });
  644.             series.data.setAll(data);
  645.            
  646.             var legend = chart.children.push(am5.Legend.new(myChart, {
  647.                 centerX: am5.percent(50),
  648.                 x: am5.percent(50),
  649.                 marginTop: 15,
  650.                 marginBottom: 15
  651.             }));
  652.             legend.data.setAll(series.dataItems);
  653.             legend.labels.template.setAll({
  654.                 fontSize: 14
  655.             });
  656.             legend.valueLabels.template.setAll({
  657.                 fontSize: 14
  658.             });
  659.            // legend.itemContainers.template.togglable = false;
  660.             series.appear(100, 1000);
  661.         }
  663.         function getDataByHistograme(am5,component,data,withScroll=false) {
  664.             document.getElementById(component).outerHTML = '<div class="pieChart box-shart" id="' + component + '"></div>';
  665.             if(data && data.length===0) {
  666.                 const no_result = '{{'no_results'|trans}}';
  667.                 document.getElementById(component).outerHTML = '<div class="pieChart box-shart" id="' + component + '"><div style="text-align: center;top: 50%;position: relative;">'+no_result+'</div></div>';
  668.             }
  669.             $( "#"+ component ).parent().attr("class", "col-md-12")
  670.             // originChart
  671.             var root = am5.Root.new(component);
  672.             root._logo.dispose();
  673.             // Set themes
  674.             root.setThemes([
  675.                 am5themes_Animated.new(root)
  676.             ]);
  678.             // Create chart
  679.             var chart = root.container.children.push(am5xy.XYChart.new(root, {
  680.                 panX: false,
  681.                 panY: false,
  682.                 layout: root.verticalLayout
  683.             }));
  684.             // We don't want zoom-out button to appear while animating, so we hide it
  685.             chart.zoomOutButton.set("forceHidden", true);
  686.             if(withScroll){
  687.                 const scrollableContainer = chart.chartContainer.children.unshift(am5.Container.new(root, {
  688.                     width: am5.p100, height: am5.p100, verticalScrollbar: am5.Scrollbar.new(root, {
  689.                         orientation: "vertical",
  690.                         dx: 20
  691.                     })
  692.                 }));
  693.                 {# chart.yAxesAndPlotContainer.set("height", 500);
  694.                 chart.yAxesAndPlotContainer.set("paddingBottom", 3) #}
  695.                 scrollableContainer.children.push(chart.yAxesAndPlotContainer);
  696.             }
  697.             // Create axes
  698.             var yRenderer = am5xy.AxisRendererY.new(root, {
  699.                 minGridDistance: 10
  700.             });
  702.             yRenderer.grid.template.set("location", 1);
  704.             var yAxis = chart.yAxes.push(am5xy.CategoryAxis.new(root, {
  705.                 maxDeviation: 0,
  706.                 categoryField: "item",
  707.                 renderer: yRenderer,
  708.                 tooltip: am5.Tooltip.new(root, { themeTags: ["axis"] })
  709.             }));
  711.             var xAxis = chart.xAxes.push(am5xy.ValueAxis.new(root, {
  712.                 maxDeviation: 0,
  713.                 min: 0,
  714.                 extraMax: 1,
  715.                 renderer: am5xy.AxisRendererX.new(root, {
  716.                     strokeOpacity: 0.1
  717.                 })
  718.             }));
  720.             // Add series
  721.             // https://www.amcharts.com/docs/v5/charts/xy-chart/series/
  722.             var series = chart.series.push(am5xy.ColumnSeries.new(root, {
  723.                 name: "Series 1",
  724.                 xAxis: xAxis,
  725.                 yAxis: yAxis,
  726.                 valueXField: "value",
  727.                 categoryYField: "item",
  728.                 tooltip: am5.Tooltip.new(root, {
  729.                     pointerOrientation: "left",
  730.                     labelText: "{valueX}"
  731.                 })
  732.             }));
  734.             // Rounded corners for columns
  735.             series.columns.template.setAll({
  736.                 cornerRadiusTR: 1,
  737.                 cornerRadiusBR: 1,
  738.                 strokeOpacity: 0
  739.             });
  741.             // Make each column to be of a different color
  742.             series.columns.template.adapters.add("fill", function(fill, target) {
  743.                 return chart.get("colors").getIndex(series.columns.indexOf(target));
  744.             });
  746.             series.columns.template.adapters.add("stroke", function(stroke, target) {
  747.                 return chart.get("colors").getIndex(series.columns.indexOf(target));
  748.             });
  751.             yAxis.data.setAll(data);
  752.             series.data.setAll(data);
  753.             sortCategoryAxiss();
  755.             // Get series item by category
  756.             function getSeriesItem(category) {
  757.                 for (var i = 0; i < series.dataItems.length; i++) {
  758.                     let dataItem = series.dataItems[i];
  759.                     if (dataItem.get("categoryY") == category) {
  760.                         return dataItem;
  761.                     }
  762.                 }
  763.             }
  765.             chart.set("cursor", am5xy.XYCursor.new(root, {
  766.                 behavior: "none",
  767.                 xAxis: xAxis,
  768.                 yAxis: yAxis
  769.             }));
  771.             // Axis sorting
  772.             function sortCategoryAxiss() {
  774.                 // Sort by value
  775.                 series.dataItems.sort(function(x, y) {
  776.                     return x.get("valueX") - y.get("valueX"); // descending
  777.                     //return y.get("valueY") - x.get("valueX"); // ascending
  778.                 })
  780.                 // Go through each axis item
  781.                 am5.array.each(yAxis.dataItems, function(dataItem) {
  782.                     // get corresponding series item
  783.                     let seriesDataItem = getSeriesItem(dataItem.get("category"));
  785.                     if (seriesDataItem) {
  786.                     // get index of series data item
  787.                     let index = series.dataItems.indexOf(seriesDataItem);
  788.                     // calculate delta position
  789.                     let deltaPosition = (index - dataItem.get("index", 0)) / series.dataItems.length;
  790.                     // set index to be the same as series data item index
  791.                     dataItem.set("index", index);
  792.                     // set deltaPosition instanlty
  793.                     dataItem.set("deltaPosition", -deltaPosition);
  794.                     // animate delta position to 0
  795.                     dataItem.animate({
  796.                         key: "deltaPosition",
  797.                         to: 0,
  798.                         duration: 1000,
  799.                         easing: am5.ease.out(am5.ease.cubic)
  800.                     })
  801.                     }
  802.                 });
  804.                 // Sort axis items by index.
  805.                 // This changes the order instantly, but as deltaPosition is set,
  806.                 // they keep in the same places and then animate to true positions.
  807.                 yAxis.dataItems.sort(function(x, y) {
  808.                     return x.get("index") - y.get("index");
  809.                 });
  810.             }
  813.         }
  814.         
  815.         function getStacksDiagram(am5,elementId,data,seriesLabel,horizontal){
  816.             document.getElementById(elementId).outerHTML = '<div class="pieChart box-shart" id="'+elementId+'"></div>';
  817.             // Create root element
  818.             var root = am5.Root.new(elementId);
  820.             root.setThemes([
  821.                 am5themes_Animated.new(root)
  822.             ]);
  824.             var chart = root.container.children.push(am5xy.XYChart.new(root, {
  825.                 panX: false,
  826.                 panY: false,
  827.                 layout: root.verticalLayout
  828.             }));
  829.             if (horizontal) {
  830.                 var theRenderer = am5xy.AxisRendererY.new(root, {});
  831.                 var firstAxis = chart.yAxes.push(am5xy.CategoryAxis.new(root, {
  832.                     categoryField: "item",
  833.                     renderer: theRenderer,
  834.                     tooltip: am5.Tooltip.new(root, {})
  835.                 }));
  836.                 var secondeAxis = chart.xAxes.push(am5xy.ValueAxis.new(root, {
  837.                     min: 0,
  838.                     renderer: am5xy.AxisRendererX.new(root, {
  839.                         strokeOpacity: 0.1
  840.                     })
  841.                 }));
  843.             }else {
  844.                 var theRenderer = am5xy.AxisRendererX.new(root, {});
  845.                 var firstAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
  846.                     categoryField: "item",
  847.                     renderer: theRenderer,
  848.                     tooltip: am5.Tooltip.new(root, {})
  849.                 }));
  850.                 var secondeAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
  851.                     min: 0,
  852.                     renderer: am5xy.AxisRendererY.new(root, {
  853.                         strokeOpacity: 0.1
  854.                     })
  855.                 }));
  857.             }
  859.             theRenderer.grid.template.setAll({
  860.                 location: 100
  861.             })
  863.             firstAxis.data.setAll(data);
  866.            
  867.             var legend = chart.children.push(am5.Legend.new(root, {
  868.                 centerX: am5.p50,
  869.                 x: am5.p50
  870.             }));
  872.             function makeSeries(name) {
  873.                 if (horizontal) {
  874.                     var series = chart.series.push(am5xy.ColumnSeries.new(root, {
  875.                         name: name,
  876.                         stacked: true,
  877.                         xAxis: secondeAxis,
  878.                         yAxis: firstAxis,
  879.                         baseAxis: firstAxis,
  880.                         valueXField: name,
  881.                         categoryYField: "item"
  882.                     }));
  884.                 }else {
  885.                     var series = chart.series.push(am5xy.ColumnSeries.new(root, {
  886.                         name: name,
  887.                         stacked: true,
  888.                         xAxis: firstAxis,
  889.                         yAxis: secondeAxis,
  890.                         baseAxis: firstAxis,
  891.                         valueYField: name,
  892.                         categoryXField: "item"
  893.                     }));
  895.                 }
  896.                 series.columns.template.setAll({
  897.                     tooltipText: (horizontal ? "{valueX} " : "{valueY} ") + "{{ 'Booking'|trans }} {name}",
  898.                     tooltipY: am5.percent(90)
  899.                 });
  900.                 series.data.setAll(data);
  902.                 // Make stuff animate on load
  903.                 // https://www.amcharts.com/docs/v5/concepts/animations/
  904.                 series.appear();
  906.                 series.bullets.push(function() {
  907.                     return am5.Bullet.new(root, {
  908.                     sprite: am5.Label.new(root, {
  909.                         text: "",
  910.                         fill: root.interfaceColors.get("alternativeText"),
  911.                         centerY: am5.p0,
  912.                         centerX: am5.p50,
  913.                         populateText: true
  914.                     })
  915.                     });
  916.                 });
  918.                 legend.data.push(series);
  919.             }
  920.             Object.keys(seriesLabel).forEach(key => {
  921.                 makeSeries(key)
  922.             });
  924.             chart.appear(1000, 100);
  926.         }
  927.         function getTopRessources(am5) {
  928.             document.getElementById('topRessources').outerHTML = '<div class="pieChart" id="topRessources"></div>';
  929.             if(topResources && topResources.length===0) {
  930.                 const no_result = '{{'no_results'|trans}}';
  931.                 document.getElementById('topRessources').outerHTML = '<div class="pieChart" id="topRessources"><div style="text-align: center;top: 50%;position: relative;">'+no_result+'</div></div>';
  932.             }
  933.             var topRessources = am5.Root.new("topRessources");
  934.             topRessources._logo.dispose();
  935.             // Set themes
  936.             // https://www.amcharts.com/docs/v5/concepts/themes/
  937.             topRessources.setThemes([
  938.                 am5themes_Animated.new(topRessources)
  939.             ]);
  941.             // Create chart
  942.             // https://www.amcharts.com/docs/v5/charts/xy-chart/
  943.             var chart = topRessources.container.children.push(am5xy.XYChart.new(topRessources, {
  944.                 panX: false,
  945.                 panY: false,
  946.                 wheelX: "none",
  947.                 wheelY: "none"
  948.             }));
  950.             // We don't want zoom-out button to appear while animating, so we hide it
  951.             chart.zoomOutButton.set("forceHidden", true);
  953.             // Create axes
  954.             // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
  955.             var yRenderer = am5xy.AxisRendererY.new(topRessources, {
  956.                 minGridDistance: 30
  957.             });
  959.             yRenderer.grid.template.set("location", 1);
  961.             var yAxis = chart.yAxes.push(am5xy.CategoryAxis.new(topRessources, {
  962.                 maxDeviation: 0,
  963.                 categoryField: "item",
  964.                 renderer: yRenderer,
  965.                 tooltip: am5.Tooltip.new(topRessources, { themeTags: ["axis"] })
  966.             }));
  968.             var xAxis = chart.xAxes.push(am5xy.ValueAxis.new(topRessources, {
  969.                 maxDeviation: 0,
  970.                 min: 0,
  971.                 extraMax: 1,
  972.                 renderer: am5xy.AxisRendererX.new(topRessources, {
  973.                     strokeOpacity: 0.1
  974.                 })
  975.             }));
  977.             // Add series
  978.             // https://www.amcharts.com/docs/v5/charts/xy-chart/series/
  979.             var series = chart.series.push(am5xy.ColumnSeries.new(topRessources, {
  980.                 name: "Series 1",
  981.                 xAxis: xAxis,
  982.                 yAxis: yAxis,
  983.                 valueXField: "value",
  984.                 categoryYField: "item",
  985.                 tooltip: am5.Tooltip.new(topRessources, {
  986.                     pointerOrientation: "left",
  987.                     labelText: "{valueX} {{ 'Booking'|trans }}"
  988.                 })
  989.             }));
  991.             // Rounded corners for columns
  992.             series.columns.template.setAll({
  993.                 cornerRadiusTR: 1,
  994.                 cornerRadiusBR: 1,
  995.                 strokeOpacity: 0
  996.             });
  998.             // Make each column to be of a different color
  999.             series.columns.template.adapters.add("fill", function(fill, target) {
  1000.                 return chart.get("colors").getIndex(series.columns.indexOf(target));
  1001.             });
  1003.             series.columns.template.adapters.add("stroke", function(stroke, target) {
  1004.                 return chart.get("colors").getIndex(series.columns.indexOf(target));
  1005.             });
  1008.             yAxis.data.setAll(topResources);
  1009.             series.data.setAll(topResources);
  1010.             sortCategoryAxiss();
  1012.             // Get series item by category
  1013.             function getSeriesItem(category) {
  1014.                 for (var i = 0; i < series.dataItems.length; i++) {
  1015.                     let dataItem = series.dataItems[i];
  1016.                     if (dataItem.get("categoryY") == category) {
  1017.                         return dataItem;
  1018.                     }
  1019.                 }
  1020.             }
  1022.             chart.set("cursor", am5xy.XYCursor.new(topRessources, {
  1023.                 behavior: "none",
  1024.                 xAxis: xAxis,
  1025.                 yAxis: yAxis
  1026.             }));
  1028.             // Axis sorting
  1029.             function sortCategoryAxiss() {
  1031.                 // Sort by value
  1032.                 series.dataItems.sort(function(x, y) {
  1033.                     return x.get("valueX") - y.get("valueX"); // descending
  1034.                     //return y.get("valueY") - x.get("valueX"); // ascending
  1035.                 })
  1037.                 // Go through each axis item
  1038.                 am5.array.each(yAxis.dataItems, function(dataItem) {
  1039.                     // get corresponding series item
  1040.                     let seriesDataItem = getSeriesItem(dataItem.get("category"));
  1042.                     if (seriesDataItem) {
  1043.                     // get index of series data item
  1044.                     let index = series.dataItems.indexOf(seriesDataItem);
  1045.                     // calculate delta position
  1046.                     let deltaPosition = (index - dataItem.get("index", 0)) / series.dataItems.length;
  1047.                     // set index to be the same as series data item index
  1048.                     dataItem.set("index", index);
  1049.                     // set deltaPosition instanlty
  1050.                     dataItem.set("deltaPosition", -deltaPosition);
  1051.                     // animate delta position to 0
  1052.                     dataItem.animate({
  1053.                         key: "deltaPosition",
  1054.                         to: 0,
  1055.                         duration: 1000,
  1056.                         easing: am5.ease.out(am5.ease.cubic)
  1057.                     })
  1058.                     }
  1059.                 });
  1061.                 // Sort axis items by index.
  1062.                 // This changes the order instantly, but as deltaPosition is set,
  1063.                 // they keep in the same places and then animate to true positions.
  1064.                 yAxis.dataItems.sort(function(x, y) {
  1065.                     return x.get("index") - y.get("index");
  1066.                 });
  1067.             }
  1068.         }
  1069.         function getChartCreneau(am5) {
  1070.             document.getElementById('chartCreneau').outerHTML = '<div class="pieChart" id="chartCreneau"></div>';
  1071.             if(tauxOccupation && tauxOccupation.length===0) {
  1072.                 const no_result = '{{'no_results'|trans}}';
  1073.                 document.getElementById('chartCreneau').outerHTML = '<div class="pieChart" id="chartCreneau"><div style="text-align: center;top: 50%;position: relative;">'+no_result+'</div></div>';
  1074.             }
  1075.             var root = am5.Root.new("chartCreneau");
  1076.             root._logo.dispose();
  1077.             // Set themes
  1078.             // https://www.amcharts.com/docs/v5/concepts/themes/
  1079.             root.setThemes([
  1080.                 am5themes_Animated.new(root)
  1081.             ]);
  1084.             // Create chart
  1085.             // https://www.amcharts.com/docs/v5/charts/xy-chart/
  1086.             var chart = root.container.children.push(am5xy.XYChart.new(root, {
  1087.                 panX: false,
  1088.                 panY: false,
  1089.                 wheelX: "panX",
  1090.                 wheelY: "zoomX",
  1091.                 layout: root.verticalLayout
  1092.             }));
  1094.             var legend = chart.children.push(
  1095.             am5.Legend.new(root, {
  1096.                 centerX: am5.p50,
  1097.                 x: am5.p50
  1098.             })
  1099.             );
  1101.             // Create axes
  1102.             // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
  1103.             var xRenderer = am5xy.AxisRendererX.new(root, {
  1104.                 cellStartLocation: 0.1,
  1105.                 cellEndLocation: 0.9
  1106.             })
  1108.             var xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
  1109.                 categoryField: "hour",
  1110.                 renderer: xRenderer,
  1111.                 tooltip: am5.Tooltip.new(root, {})
  1112.             }));
  1114.             xRenderer.grid.template.setAll({
  1115.                 location: 1
  1116.             })
  1118.             var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
  1119.                 renderer: am5xy.AxisRendererY.new(root, {
  1120.                     strokeOpacity: 0.1
  1121.                 })
  1122.             }));
  1124.             xAxis.data.setAll(tauxOccupation);
  1125.             var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
  1126.                 renderer: am5xy.AxisRendererY.new(root, {
  1127.                     strokeOpacity: 0.1
  1128.                 })
  1129.             }));
  1131.             function makeSeries(name, fieldName) {
  1132.                 var series = chart.series.push(am5xy.ColumnSeries.new(root, {
  1133.                     name: name,
  1134.                     xAxis: xAxis,
  1135.                     yAxis: yAxis,
  1136.                     valueYField: fieldName,
  1137.                     categoryXField: "hour"
  1138.                 }));
  1140.                 series.columns.template.setAll({
  1141.                     tooltipText: "{name}, {categoryX} - {valueY} {{ 'Booking'|trans }}",
  1142.                     width: am5.percent(90),
  1143.                     tooltipY: 0,
  1144.                     strokeOpacity: 0
  1145.                 });
  1147.                 series.data.setAll(tauxOccupation);
  1149.                 // Make stuff animate on load
  1150.                 // https://www.amcharts.com/docs/v5/concepts/animations/
  1151.                 series.appear();
  1153.                 series.bullets.push(function() {
  1154.                     return am5.Bullet.new(root, {
  1155.                     locationY: 0,
  1156.                     sprite: am5.Label.new(root, {
  1157.                         text: "{valueY}",
  1158.                         fill: root.interfaceColors.get("alternativeText"),
  1159.                         centerY: 0,
  1160.                         centerX: am5.p50,
  1161.                         populateText: true
  1162.                     })
  1163.                     });
  1164.                 });
  1166.                 legend.data.push(series);
  1167.             }
  1168.             makeSeries('{{"Reserved occupancy"|trans}}', "reservation");
  1169.             makeSeries('{{"Real occupation"|trans}}', "reservation_reel");
  1170.             chart.appear(1000, 100);
  1171.         }
  1172.         function getTauxOccupation(am5,element, data,categoryXField) {
  1173.             document.getElementById(element).outerHTML = '<div class="pieChart" id="'+ element +'"></div>';
  1174.             if(data && data.length===0) {
  1175.                 const no_result = '{{'no_results'|trans}}';
  1176.                 document.getElementById(element).outerHTML = '<div class="pieChart" id="'+ element +'"><div style="text-align: center;top: 50%;position: relative;">'+no_result+'</div></div>';
  1177.             }
  1178.             var root = am5.Root.new(element);
  1179.             root._logo.dispose();
  1180.             // Set themes
  1181.             // https://www.amcharts.com/docs/v5/concepts/themes/
  1182.             root.setThemes([
  1183.                 am5themes_Animated.new(root)
  1184.             ]);
  1187.             // Create chart
  1188.             // https://www.amcharts.com/docs/v5/charts/xy-chart/
  1189.             var chart = root.container.children.push(am5xy.XYChart.new(root, {
  1190.                 panX: false,
  1191.                 panY: false,
  1192.                 wheelX: "panX",
  1193.                 wheelY: "zoomX",
  1194.                 layout: root.verticalLayout
  1195.             }));
  1197.             var legend = chart.children.push(
  1198.             am5.Legend.new(root, {
  1199.                 centerX: am5.p50,
  1200.                 x: am5.p50
  1201.             })
  1202.             );
  1204.             // Create axes
  1205.             // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
  1206.             var xRenderer = am5xy.AxisRendererX.new(root, {
  1207.                 cellStartLocation: 0.1,
  1208.                 cellEndLocation: 0.9
  1209.             })
  1211.             var xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
  1212.                 categoryField: categoryXField,
  1213.                 renderer: xRenderer,
  1214.                 tooltip: am5.Tooltip.new(root, {})
  1215.             }));
  1217.             xRenderer.grid.template.setAll({
  1218.                 location: 1
  1219.             })
  1221.             var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
  1222.                 renderer: am5xy.AxisRendererY.new(root, {
  1223.                     strokeOpacity: 0.1
  1224.                 })
  1225.             }));
  1227.             xAxis.data.setAll(data);
  1228.             var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
  1229.                 renderer: am5xy.AxisRendererY.new(root, {
  1230.                     strokeOpacity: 0.1
  1231.                 })
  1232.             }));
  1234.             function makeSeries(name, fieldName) {
  1235.                 var series = chart.series.push(am5xy.ColumnSeries.new(root, {
  1236.                     name: name,
  1237.                     xAxis: xAxis,
  1238.                     yAxis: yAxis,
  1239.                     valueYField: fieldName,
  1240.                     categoryXField: categoryXField
  1241.                 }));
  1243.                 series.columns.template.setAll({
  1244.                     tooltipText: "{name}, {categoryX} - {valueY}%",
  1245.                     width: am5.percent(90),
  1246.                     tooltipY: 0,
  1247.                     strokeOpacity: 0
  1248.                 });
  1250.                 series.data.setAll(data);
  1252.                 // Make stuff animate on load
  1253.                 // https://www.amcharts.com/docs/v5/concepts/animations/
  1254.                 series.appear();
  1256.                 series.bullets.push(function() {
  1257.                     return am5.Bullet.new(root, {
  1258.                     locationY: 0,
  1259.                     sprite: am5.Label.new(root, {
  1260.                         text: "{valueY}",
  1261.                         fill: root.interfaceColors.get("alternativeText"),
  1262.                         centerY: 0,
  1263.                         centerX: am5.p50,
  1264.                         populateText: true
  1265.                     })
  1266.                     });
  1267.                 });
  1269.                 legend.data.push(series);
  1270.             }
  1271.             makeSeries('{{"Reserved occupancy"|trans}}', "tauxOccupation");
  1272.             makeSeries('{{"Real occupation"|trans}}', "tauxOccupationReal");
  1273.             chart.appear(1000, 100);
  1275.         }
  1276.         function getReservationByDay(am5) {
  1277.             document.getElementById('reservationByDay').outerHTML = '<div class="pieChart" id="reservationByDay"></div>';
  1278.             if(reservationByDay.length===0) {
  1279.                 const no_result = '{{'no_results'|trans}}';
  1280.                 document.getElementById('reservationByDay').outerHTML = '<div class="pieChart" id="reservationByDay"><div style="text-align: center;top: 50%;position: relative;">'+no_result+'</div></div>';
  1281.             }
  1282.             var root = am5.Root.new("reservationByDay");
  1283.             root._logo.dispose();
  1284.             // Set themes
  1285.             // https://www.amcharts.com/docs/v5/concepts/themes/
  1286.             root.setThemes([
  1287.                 am5themes_Animated.new(root)
  1288.             ]);
  1291.             // Create chart
  1292.             // https://www.amcharts.com/docs/v5/charts/xy-chart/
  1293.             var chart = root.container.children.push(am5xy.XYChart.new(root, {
  1294.                 panX: false,
  1295.                 panY: false,
  1296.                 wheelX: "panX",
  1297.                 wheelY: "zoomX",
  1298.                 layout: root.verticalLayout
  1299.             }));
  1301.             var legend = chart.children.push(
  1302.             am5.Legend.new(root, {
  1303.                 centerX: am5.p50,
  1304.                 x: am5.p50
  1305.             })
  1306.             );
  1308.             // Create axes
  1309.             // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
  1310.             var xRenderer = am5xy.AxisRendererX.new(root, {
  1311.                 cellStartLocation: 0.1,
  1312.                 cellEndLocation: 0.9
  1313.             })
  1315.             var xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
  1316.                 categoryField: "date",
  1317.                 renderer: xRenderer,
  1318.                 tooltip: am5.Tooltip.new(root, {})
  1319.             }));
  1321.             xRenderer.grid.template.setAll({
  1322.                 location: 1
  1323.             })
  1325.             var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
  1326.                 renderer: am5xy.AxisRendererY.new(root, {
  1327.                     strokeOpacity: 0.1
  1328.                 })
  1329.             }));
  1331.             xAxis.data.setAll(reservationByDay);
  1332.             var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
  1333.                 renderer: am5xy.AxisRendererY.new(root, {
  1334.                     strokeOpacity: 0.1
  1335.                 })
  1336.             }));
  1338.             function makeSeries(name, fieldName) {
  1339.                 var series = chart.series.push(am5xy.ColumnSeries.new(root, {
  1340.                     name: name,
  1341.                     xAxis: xAxis,
  1342.                     yAxis: yAxis,
  1343.                     valueYField: fieldName,
  1344.                     categoryXField: "date"
  1345.                 }));
  1347.                 series.columns.template.setAll({
  1348.                     tooltipText: "{categoryX} - {valueY} {{ 'Booking'|trans }}",
  1349.                     width: am5.percent(90),
  1350.                     tooltipY: 0,
  1351.                     strokeOpacity: 0
  1352.                 });
  1354.                 series.data.setAll(reservationByDay);
  1356.                 // Make stuff animate on load
  1357.                 // https://www.amcharts.com/docs/v5/concepts/animations/
  1358.                 series.appear();
  1360.                 series.bullets.push(function() {
  1361.                     return am5.Bullet.new(root, {
  1362.                     locationY: 0,
  1363.                     sprite: am5.Label.new(root, {
  1364.                         text: "{valueY}",
  1365.                         fill: root.interfaceColors.get("alternativeText"),
  1366.                         centerY: 0,
  1367.                         centerX: am5.p50,
  1368.                         populateText: true
  1369.                     })
  1370.                     });
  1371.                 });
  1373.                 legend.data.push(series);
  1374.             }
  1375.             makeSeries('{{"Number of reservations"|trans}}', "value");
  1376.             chart.appear(1000, 100);
  1377.         }
  1378.     </script>
  1379.     
  1380. {% endblock %}