templates/analytic/explore.html.twig line 1

Open in your IDE?
  1. {% extends 'Layouts/layout.html.twig' %}
  3. {% block title %} Retabit Platform {% endblock %}
  5. {% block content %}
  7.     {% for message in app.flashes('notice') %}
  8.         <div class="flash-notice" id="flash_div">
  9.             <div class="text-end"><span class="material-symbols-outlined hover" onclick="removeDiv('flash_div')">close</span></div>
  10.             <div class="container">
  11.                 <p>{{ message | raw | trans}}</p>
  12.             </div>
  13.         </div>
  14.     {% endfor %}
  16.     <div class="modal fade" id="popUpIndicadores" tabindex="-1" >
  17.         <div class="modal-dialog modal-lg">
  18.             <div class="modal-content">
  19.                 <div class="modal-header">
  20.                     <h1 class="modal-title fs-5" id="exampleModalLabel">{% trans %}Selecciona los indicadores para descargar en un fichero Excel{% endtrans %}</h1>
  21.                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  22.                 </div>
  23.                 <div class="modal-body">
  24.                     <div class="row">
  25.                         <a id="selectAllBtn" class="px-5 mb-2" style="cursor: pointer; font-weight: 400; text-decoration:none;">{% trans %}Seleccionar Todos{% endtrans %}</a>
  26.                         <div class="col-12 px-5" id="project_actions_content">
  27.                             
  28.                         </div>
  29.                         <div class="text-center" id="popUpIndicadores_button">
  30.                             <button class="btn btn-primary" onclick="getExcel()">{% trans %}Descargar{% endtrans %} selección</button>
  31.                         </div>
  32.                     </div>
  33.                 </div>
  34.             </div>
  35.         </div>
  36.     </div>
  38.     <div class="container-fluid project_explore_container" id="container_in_content">
  40.         <div class="row justify-content-center">
  42.             <div id="infoview_content" class="col-12">
  43.                 {# {{dump(analytic_data)}} #}
  44.                 {% for item in analytic_data %}
  45.                 {% if item.slug == slug %}
  46.                     {#% dump(item) %#}
  47.                 <div class="row justify-content-center">
  48.                     <!-- Textai box -->
  49.                     <div class="col-12 p-3" id="header_content_info_top">
  50.                         
  51.                         <div class="d-flex justify-content-between align-items-center">
  52.                             <h2 class="d-inline-block" data-bs-toggle="collapse" href="#textai_box" role="button" aria-expanded="false" aria-controls="textai_box" onclick="expandIcon('analytics_title_arrow')" >
  53.                                 {% if app.request.locale == "ca" %}
  54.                                     {{item.name_ca}}
  55.                                 {% elseif app.request.locale == "en" %}
  56.                                     {{item.name_en}}
  57.                                 {% else %}
  58.                                     {{item.name}}
  59.                                 {% endif %}
  60.                                  
  61.                                 <span class="material-symbols-outlined hover" id="analytics_title_arrow">expand_more</span>
  62.                             </h2>
  63.                             <div class="d-flex">
  64.                                 <div class="d-flex align-items-center">                                    
  65.                                     <button class="btn btn-primary btn-sm" onclick="loadSelectorIndicators()">{% trans %}Descargar datos{% endtrans %}</button>
  66.                                 </div>
  67.                                 
  68.                             </div>
  70.                         </div>
  71.                         <div class="collapse" id="textai_box" style="max-width: 940px;">
  72.                             <p class="flex-fill mb-3" style="font-size: 14px;">{{item.textai}}</p>
  73.                         </div>
  74.                         
  75.                     </div>
  76.                     
  77.                     <div class="col-12 all_steps" id="analytic_step">
  78.                         <div class="row justify-content-center align-items-top">
  79.                             <div id="infoview" class="infoview_div col-12">
  80.                                 <div class="row align-items-center justify-content-center">
  81.                                     
  82.                                     <div class="col-12 collapse show" id="filter_div">
  83.                                         <div class="row align-items-center justify-content-center">
  84.                                             
  85.                                         </div>
  86.                                     </div>
  87.                                 </div>
  88.                                 <div class="row viewfindergroup" id="map_view" >
  89.                                     <div class="col-12">
  90.                                         
  91.                                         <div class="map__container" style="position:relative;">
  93.                                             <div id="map" class="map"></div>
  95.                                             <div class="legend"></div>
  97.                                             <div id="popup" class="popup d-none">
  98.                                                 <a href="#" id="popup-closer" class="popup__closer"></a>
  99.                                                 <div id="popup-content" class="popup__content"></div>
  100.                                             </div>
  102.                                             <button id="centerbutton" class="btn btn-light btn-sm pb-0" onclick="centerViewMap()">
  103.                                             <span class="material-symbols-outlined">fit_screen</span>
  104.                                             <span class="material-symbols-outlined d-none">collapse_content</span></button>
  106.                                             <button id="expand" class="btn btn-light btn-sm pb-0" onclick="infoviewToggle()">
  107.                                             <span class="material-symbols-outlined">expand_content</span></button>
  109.                                         </div>
  110.                                     </div>
  111.                                 </div>
  113.                                 <div class="row viewfindergroup" id="data_view">
  114.                                     <div class="col-12 pb-2" style="overflow-y: scroll; height: 80vh;">
  115.                                         <div id="wrapper"></div>
  116.                                     </div>
  117.                                 </div>
  119.                                 <div class="row viewfindergroup" id="card_view" >
  120.                                     <div class="col-12 pb-2" style="overflow-y: scroll; height: 80vh;">
  121.                                         <form class="row row-cols-lg-auto g-2 align-items-center mb-2 d-none">
  122.                                             <div class="col-12">
  123.                                                 <label class="visually-hidden" for="via">{% trans %}Tipo via{% endtrans %}</label>
  124.                                                 <select class="form-select" id="via">
  125.                                                     <option value="1">{% trans %}Calle{% endtrans %}</option>
  126.                                                     <option value="2">{% trans %}Avenida{% endtrans %}</option>
  127.                                                     <option value="3">{% trans %}Rambla{% endtrans %}</option>
  128.                                                 </select>
  129.                                             </div>
  131.                                             <div class="col-12">
  132.                                                 <label class="visually-hidden" for="street_name">{% trans %}Nombre calle{% endtrans %}</label>
  133.                                                 <div class="input-group">
  134.                                                     <input type="text" class="form-control" id="street" placeholder="Nombre de calle">
  135.                                                 </div>
  136.                                             </div>
  138.                                             <div class="col-12">
  139.                                                 <label class="visually-hidden" for="flat">{% trans %}Piso{% endtrans %}</label>
  140.                                                 <div class="input-group">
  141.                                                     <input type="text" class="form-control" id="flat" placeholder="Piso">
  142.                                                 </div>
  143.                                             </div>
  145.                                             <div class="col-12">
  146.                                                 <label class="visually-hidden" for="floor">{% trans %}Planta{% endtrans %}</label>
  147.                                                 <div class="input-group">
  148.                                                     <input type="text" class="form-control" id="floor" placeholder="Pta.">
  149.                                                 </div>
  150.                                             </div>
  152.                                             <div class="col-12">
  153.                                                 <button type="submit" class="btn btn-primary pb-0"><span class="material-symbols-outlined">search</span></button>
  154.                                             </div>
  155.                                         </form>
  156.                                         <div class="row" style=" padding: 20px; margin-bottom: 40px;    box-sizing: border-box;">
  157.                                             <div class="col-6 col-sm-3 overflow-hidden" id="img_fachada" style="background: #fbfbfb;  padding: 20px;"></div>
  158.                                             
  159.                                             <div class="col-6 col-sm-3 overflow-hidden me-4" id="img_catastro" style="background: #fbfbfb;  padding: 20px;"></div>
  160.                                             <div class="col-12 col-sm-5" id="txt_build"></div>
  161.                                             
  162.                                         </div>
  163.                                         
  164.                                         <div class="row g-3" id="build_indicators">
  165.                                         </div>
  166.                                     </div>
  167.                                 </div>
  168.                             </div>
  170.                             <div id="infoview2" class="infoview2_div collapse collapse-horizontal show">
  171.                                     
  172.                                 
  173.                                 <!-- Selected box -->
  174.                                 <div class="col-12 selected_box p-3 mb-3 sticky-top d-none">
  175.                                     <h4>{% trans %}Indicador seleccionado{% endtrans %}</h4>
  176.                                     <div id="selected_box_content" class="selected_box_item" title="Header" data-bs-toggle="popover_live_top" data-bs-trigger="hover focus" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?"></div>
  177.                                 </div>
  179.                                 <!-- Indicadores box -->
  180.                                 <div class="col-12 analytic_box box_blue_soft p-3 graphic_box stats_box mb-3">
  181.                                     <div class="d-flex justify-content-between">
  182.                                         <p class="fw-bold fs-5">{% trans %}Indicadores relacionados{% endtrans %}</p>
  183.                                         
  184.                                     </div>
  185.                                     <div class="" id="analytics_indicators">
  186.                                         {% set break = false %}
  187.                                         {% set array_used = [] %}
  188.                                         {% set category = '' %}
  190.                                         {#% dump("Item") %#}
  191.                                         {#% dump(item) %#}
  193.                                         {% for rel in item.relation %}
  194.                                             {% if break == false %}
  196.                                             {#% dump(rel) %#}
  198.                                             {% if app.request.locale == "ca" %}
  199.                                                 {% set title = rel.name_ca %}
  200.                                                 {% set description = rel.info_ca %}
  201.                                             {% elseif app.request.locale == "en" %}
  202.                                                 {% set title = rel.name_en %}
  203.                                                 {% set description = rel.info_en %}
  204.                                             {% else %}
  205.                                                 {% set title = rel.name %}
  206.                                                 {% set description = rel.info %}
  207.                                             {% endif %}
  209.                                             {% set array_used = array_used|merge([rel.kpi]) %}
  210.                                             
  211.                                             <div id="statline_id_{{rel.kpi}}" onclick="updateMapFromDiv({{rel.kpi}})" class="grayscale analytics_statsline_item" data-kpi="{{rel.kpi}}" data-slug="{{rel.slug}}" data-bs-toggle="popover_live_{{loop.index}}" data-bs-trigger="hover focus" data-bs-title="{{title|capitalize}}" data-bs-content="{{description}}" data-p="{{ rel.province }}" data-m="{{ rel.city }}" data-r="{{ rel.region }}" data-max="{{ rel.max_value }}" data-min="{{ rel.min_value }}">
  213.                                             
  214.                                                 <p class="mb-1 title" style="font-size: 14px; font-weight: 600;">{{title|capitalize}}</p>
  215.                                                 <div class="statsline mb-3" >
  217.                                                     {% set color = [] %}
  218.                                                     {% for rank in kpi_rank %}
  219.                                                         
  220.                                                         {% if rank.kpi_id == rel.kpi %}
  221.                                                             {% set color = color|merge([rank.bgcolor]) %}
  222.                                                         {% endif %}
  224.                                                     {% endfor %}
  225.                                                     {% set counter = color|length %}
  226.                                                     {% set partsize = 100/counter %}
  227.                                                     {% set stylestring = '' %}
  229.                                                     <div class="bk_line">
  231.                                                     {% for colorpart in color %}
  232.                                                         {% if loop.last %}
  233.                                                         {% set dato = 99.9-(partsize*(counter - 1)) %}
  234.                                                             <div class="analytic_color_bar" style="width:{{dato}}%; background-color: {{colorpart}};"></div>
  235.                                                         {% else %}
  236.                                                             <div class="analytic_color_bar" style="width:{{partsize|number_format(2, '.')}}%; background-color: {{colorpart}};"></div>        
  237.                                                         {% endif %}
  238.                                                         
  239.                                                     {% endfor %}
  240.                                                     
  241.                                                     </div>
  242.                                                     
  243.                                                     <span class="statsline_item statsline_{{loop.index}} item_tooltip" style="left: {{rel.theme_per}}%;margin-left: -6px;" data-text="{{rel.theme}}" data-kpi="{{rel.kpi}}" data-bs-custom-class="custom-tooltip" data-bs-placement="top"><i class="fa-solid triangle"></i></span>
  244.                                                     
  245.                                                 </div>
  246.                                                 <div class="statsline_range d-flex justify-content-between d-none">
  247.                                                     <span>{{rel.min_value}}</span>
  248.                                                     <span>{{rel.max_value}}</span>
  249.                                                 </div>
  251.                                                 {% if loop.index == 4 %}
  252.                                                 {% set break = true %}
  253.                                                 {% endif %}
  254.                                            
  255.                                             
  256.                                             </div>
  257.                                             <script>
  258.                                             $('[data-bs-toggle="popover_live_{{loop.index}}"]').mouseover(function(){
  259.                                                 $('[data-bs-toggle="popover_live_{{loop.index}}"]').popover();
  260.                                             })
  261.                                         </script>
  262.                                          {% endif %}
  263.                                         {% endfor %}
  264.                                         
  265.                                         </div>
  266.                                     </div>
  268.                                 <!-- Otros Indicadores box -->
  269.                                 <div class="col-12 analytic_box box_blue_soft p-3 graphic_box stats_box mb-3">
  270.                                     <div class="d-flex justify-content-between">
  271.                                         <p class="fw-bold fs-5" data-bs-toggle="collapse" data-bs-target="#analytics_indicators" aria-expanded="true" aria-controls="analytics_statsline" onclick="expandIcon('analytics_indicators_arrow')" role="button">{% trans %}Otros indicadores{% endtrans %}</p>
  272.                                         
  273.                                     </div>
  274.                                     <div class="" id="analytics_indicators_others">
  275.                                         {% set category = '' %}
  276.                                         
  277.                                         {#% dump("Analytic") %#}
  278.                                         
  280.                                         {% for rel in analytic_data_relation %}
  281.                                             {#% dump(rel) %#}
  282.                                             {% if rel.kpi not in array_used %}
  284.                                             {% if category != rel.category %}
  285.                                                 <p class="mt-2 fw-bold" style="font-size: 12px; font-weight: 700;"> 
  286.                                                      
  287.                                                     {% if app.request.locale == "ca" %}
  288.                                                         {{rel.category_ca}} 
  289.                                                     {% elseif app.request.locale == "en" %}
  290.                                                         {{rel.category_en}} 
  291.                                                     {% else %}
  292.                                                         {{rel.category}} 
  293.                                                     {% endif %}
  294.                                                 </p>
  295.                                                 {% set category = rel.category %}
  296.                                             {% endif %}
  298.                                             {% if app.request.locale == "ca" %}
  299.                                                 {% set title = rel.name_ca %}
  300.                                                 {% set description = rel.info_ca %}
  301.                                             {% elseif app.request.locale == "en" %}
  302.                                                 {% set title = rel.name_en %}
  303.                                                 {% set description = rel.info_en %}
  304.                                             {% else %}
  305.                                                 {% set title = rel.name %}
  306.                                                 {% set description = rel.info %}
  307.                                             {% endif %}
  308.                                             
  309.                                             <div id="statline_id_{{rel.kpi}}" onclick="updateMapFromDiv({{rel.kpi}})" class="grayscale analytics_statsline_item" data-kpi="{{rel.kpi}}" data-slug="{{rel.slug}}" data-bs-toggle="popover_live_{{loop.index}}" data-bs-trigger="hover focus" data-bs-title="{{title|capitalize}}" data-bs-content="{{description}}" data-p="{{ rel.province }}" data-m="{{ rel.city }}" data-r="{{ rel.region }}" data-max="{{ rel.max_value }}" data-min="{{ rel.min_value }}">
  311.                                             <script>
  312.                                             $('[data-bs-toggle="popover_live_{{loop.index}}"]').mouseover(function(){
  313.                                                 $('[data-bs-toggle="popover_live_{{loop.index}}"]').popover();
  314.                                             })
  315.                                             </script>
  316.                                             
  317.                                                 <p class="mb-1 title" style="font-size: 14px; font-weight: 600;">{{title|capitalize}}</p>
  318.                                                 <div class="statsline mb-3" >
  320.                                                     {% set color = [] %}
  321.                                                     {% for rank in kpi_rank %}
  322.                                                         
  323.                                                         {% if rank.kpi_id == rel.kpi %}
  324.                                                             {% set color = color|merge([rank.bgcolor]) %}
  325.                                                         {% endif %}
  327.                                                     {% endfor %}
  328.                                                     {% set counter = color|length %}
  329.                                                     {% set partsize = 100/counter %}
  330.                                                     {% set stylestring = '' %}
  332.                                                     <div class="bk_line">
  334.                                                     {% for colorpart in color %}
  335.                                                         {% if loop.last %}
  336.                                                         {% set dato = 99.9-(partsize*(counter - 1)) %}
  337.                                                             <div class="analytic_color_bar" style="width:{{dato}}%; background-color: {{colorpart}};"></div>
  338.                                                         {% else %}
  339.                                                             <div class="analytic_color_bar" style="width:{{partsize|number_format(2, '.')}}%; background-color: {{colorpart}};"></div>        
  340.                                                         {% endif %}
  341.                                                         
  342.                                                     {% endfor %}
  343.                                                     
  344.                                                     </div>
  345.                                                     
  346.                                                     <span class="statsline_item statsline_{{loop.index}} item_tooltip" style="left: {{rel.theme_per}}%; margin-left: -6px;" data-text="{{rel.theme}}" data-kpi="{{rel.kpi}}" data-bs-custom-class="custom-tooltip" data-bs-placement="top"><i class="fa-solid triangle"></i></span>
  347.                                                     
  348.                                                 </div>
  349.                                                 <div class="statsline_range d-flex justify-content-between d-none">
  350.                                                     <span>{{rel.min_value}}</span>
  351.                                                     <span>{{rel.max_value}}</span>
  352.                                                 </div>
  354.                                             
  355.                                             </div>
  356.                                             
  357.                                             {% endif %}
  358.                                         {% endfor %} 
  360.                                         </div>
  361.                                     </div>
  362.                                     
  363.                                 </div>
  365.                                         {# <div class="" id="analytics_barplot_container">
  366.                                             <div id="analytics_barplot">
  367.                                                 
  368.                                                 <div class="hover_window">
  369.                                                     <h5>Uso del edificio</h5>
  370.                                                     <div class="mb-3" id="statUseBox" style="position: relative;" onclick="updateMapFromStat(105)"></div>
  371.                                                 </div>
  372.                                                 
  373.                                                 <div class="hover_window">
  374.                                                     <h5>Año de construcción</h5>
  375.                                                     <div class="mb-3" id="statYearBox" style="position: relative;" onclick="updateMapFromStat(100)"></div>
  376.                                                 </div>
  377.                                                 
  378.                                                 <div class="hover_window">
  379.                                                     <h5>Área</h5>
  380.                                                     <div class="mb-3" id="statAreaBox" style="position: relative;" onclick="updateMapFromStat(101)"></div>
  381.                                                 </div>
  382.                                                 
  383.                                                 <div class="hover_window">
  384.                                                     <h5>Porcentaje de ocupación</h5>
  385.                                                     <div class="mb-3" id="statOccupationBox" style="position: relative;" onclick="updateMapFromStat(104)"></div>
  386.                                                 </div>
  387.                                                 
  388.                                             </div>
  389.                                         </div> #}
  390.                                 
  391.                                 
  392.                             </div>
  393.                         </div>
  394.                     </div>
  396.                 {% endif %}
  397.                 {% endfor %}
  399.                 </div>
  400.                 
  401.             </div>
  402.             
  403.             
  405.         </div>
  406.     </div>
  408. <style>
  409. td.gridjs-td{
  410.     //padding: 2px 24px !important;
  411. }
  412. </style>
  414. {% endblock %}
  417. {% block javascripts %}
  418. <script src="{{ asset('build/js/calls.js') }}"></script>
  420. <script src="{{ asset('bundles/fosjsrouting/js/router.min.js') }}"></script>
  421. <script src="{{ path('fos_js_routing_js', { callback: 'fos.Router.setData' }) }}"></script>
  423. <script src="https://cdnjs.cloudflare.com/ajax/libs/gridjs/6.0.6/gridjs.production.min.js" integrity="sha512-wpiJjuL800CTEBA0QFs+RFw0tFtpXnQGea1p9S16WcYNXC1F3U0l1L7FQrDC3ihkYRtOj4Td7lKR3mYKxrwMMA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  425. <link rel="stylesheet" type="text/css" href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css" />
  427. <script type="text/javascript">
  429.     const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
  430.     const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
  432.     var Routes = Routing; // loaded from router.min.js
  433.     // because ES5 doesn't support require syntax,
  434.     // we use jquery getJSON function in order to set
  435.     // routing data to our Routing object
  436.     $.getJSON("{{ asset('build/js/fos_js_routes.json') }}", function (routes) {
  437.         Routes.setRoutingData(routes);
  438.     });
  439.     {# console.log(Routes); #}
  440. </script>
  442. <script type="text/javascript">
  443.     //let explore_baseUrl = '{{ base_url }}';
  445.     $(document).ready(function(){
  446.         $('.viewfindergroup').hide();
  447.         $('#map_view').show();        
  448.         $('.build_bar').css('width','100%');
  449.         $('.people_bar').css('width','100%');
  451.         /*setTimeout(()=>{
  452.             $('#info_div').collapse('hide');
  453.         },10000);*/
  455.         let arrayData = document.querySelectorAll('.analytics_statsline_item');
  456.         let arraySlugs = [];
  457.         for(let i=0; arrayData.length > i; i++){
  458.             arraySlugs.push(arrayData[i].getAttribute('data-slug'));
  459.         }
  460.         // console.log(arraySlugs);
  462.         buttonsToHeaderBar();
  463.         $('#left_bar_button_map').addClass('active');
  464.     });
  466.     document.getElementById("selectAllBtn").addEventListener("click", function() {
  467.         let checkboxes = document.querySelectorAll(".form-check-input");
  468.         let allChecked = Array.from(checkboxes).every(checkbox => checkbox.checked);
  470.         checkboxes.forEach(checkbox => {
  471.             checkbox.checked = !allChecked; // Alterna selección
  472.         });
  474.         this.textContent = allChecked ? "Seleccionar Todos" : "Deseleccionar Todos"; 
  475.     });
  477.     function buttonsToHeaderBar(){
  479.         // <span class="material-symbols-outlined">bar_chart_4_bars</span>
  481.         document.getElementById('new_header_map').innerHTML = '<div id="left_bar_button_map" class="left_bar_button text-center d-inline-block" onclick="viewFinder(\'map\')"><span class="material-symbols-outlined">map</span><br>{{"Mapa" |trans}}</div>';
  482.         document.getElementById('new_header_table').innerHTML = '<div id="left_bar_button_data" class="left_bar_button text-center d-inline-block" onclick="viewFinder(\'data\')"><span class="material-symbols-outlined">table</span><br>{{"Tabla" |trans}}</div>';
  483.         document.getElementById('new_header_card').innerHTML = '<div id="left_bar_button_card" class="left_bar_button text-center d-inline-block" onclick="viewFinder(\'card\')"><span class="material-symbols-outlined">grid_view</span><br>{{"Ficha" |trans}}</div>';
  484.         
  485.     }
  488.     $('.item_tooltip').on('mouseover',function (){
  489.         
  490.         let name = this.getAttribute('data-text');
  491.         let kpi = this.getAttribute('data-kpi');
  492.         // console.log(name,kpi);
  493.         $('.item_tooltip[data-kpi='+kpi+']').tooltip({title: name, delay: {show: 100, hide: 100}}); 
  494.     })
  496.     const { Grid, html } = gridjs;
  498.     var rPlatform = map;
  499.     var caller = call;
  500.     let layers = {{ layers |raw}};
  502.     let configLayers = {{ configLayers|raw }};
  503.     let explore_baseUrl = '{{ base_url }}';
  504.     caller.vars.explore_baseUrl = '{{ base_url }}';
  505.     
  506.     let explore_mun = '{{ mun }}';
  507.     let explore_kpi = 3;
  508.     let explore_slug = '';
  509.     let explore_colors = {{ kpi_colors|raw }};
  510.     let explore_insight = [];
  511.     let explore_extrakpi = [];
  512.     let explore_layer_data = [];
  513.     let explore_url = window.location.href;
  514.     let explore_filter_url = '';
  516.     let filtered_data_array = {{ filtered_data|raw }};
  518.     let kpi_list = {{ kpi_list|raw }};
  519.     let kpi_list_complete = document.querySelectorAll('#kpi_list_data li');
  520.     for(i=0; kpi_list_complete.length > i; i++){
  521.         let name = kpi_list_complete[i].innerText;
  522.         let kpi = kpi_list_complete[i].getAttribute('data-kpi');
  523.         let slug = kpi_list_complete[i].getAttribute('data-slug');
  524.         kpi_list.push({'name':name,'kpi':kpi,'slug':slug});
  525.     }
  527.     // use stats data and print graphic
  528.     let useStat = {{ useStatData|raw }};
  529.     let useStatData = analyticOrganizeData(useStat);
  530.     var useStatTotalData = analyticOrganizeTotalData(useStat);
  531.     {# barplotDoubleDouble100('statUseBox',useStatData[0],useStatTotalData[1],useStatData[2], 'analytics_barplot_container',useStatTotalData[0]); #}
  532.     
  533.     // year stats data and print graphic
  534.     let yearStat = {{ yearStatData|raw }};
  535.     let yearStatData = analyticOrganizeData(yearStat);
  536.     var yearStatTotalData = analyticOrganizeTotalData(yearStat);
  537.     {# barplotDoubleDouble100('statYearBox',yearStatData[0],yearStatTotalData[1],yearStatData[2], 'analytics_barplot_container',yearStatTotalData[0]); #}
  539.     // area stats data and print graphic
  540.     let areaStat = {{ areaStatData|raw }};
  541.     let areaStatData = analyticOrganizeData(areaStat);
  542.     var areaStatTotalData = analyticOrganizeTotalData(areaStat);
  543.     {# barplotDoubleDouble100('statAreaBox',areaStatData[0],areaStatTotalData[1],areaStatData[2], 'analytics_barplot_container',areaStatTotalData[0]); #}
  545.     // occupation stats data and print graphic
  546.     let occupationStat = {{ occupationStatData|raw }};
  547.     let occupationStatData = analyticOrganizeData(occupationStat);
  548.     var occupationStatTotalData = analyticOrganizeTotalData(occupationStat);
  549.     {# barplotDoubleDouble100('statOccupationBox',occupationStatData[0],occupationStatTotalData[1],occupationStatData[2], 'analytics_barplot_container',occupationStatTotalData[0]); #}
  552.     let explore_mun_name = '{{ municipioname.adminunitname|capitalize }}';
  553.     let allgeodataUrl = explore_baseUrl + "/get-allgeodata?mun=" + explore_mun ;
  555.     let munPolygon = '{{ municipioname.geom }}';
  556.     let initGeo = '{{ municipioname.envelope }}';
  557.     
  558.     let queryString = window.location.search;
  559.     let urlParams = new URLSearchParams(queryString);
  560.     let filterStart = urlParams.get('fs');
  561.     let filterEnd = urlParams.get('fe');
  562.     window.appLocale = '{{ app.request.locale|e('js') }}';
  564.     if(filterStart == null){
  565.         filterStart = 0;
  566.     }
  567.     if(filterEnd == null){
  568.         filterEnd = 0;
  569.     }
  571.     rPlatform.setInpireidList(filtered_data_array);
  572.     rPlatform.setMun(explore_mun);
  573.     rPlatform.setBaseUrl(explore_baseUrl);
  574.     rPlatform.setLayers(layers);
  575.     rPlatform.setColorsStyle(explore_colors);
  576.     rPlatform.setLayerData(explore_layer_data);
  577.    
  579.     // ----------------------- Map ------------------------ //
  580.     async function init() { // Cargar mapa de inicio
  582.         let queryString = window.location.search;
  583.         let urlParams = new URLSearchParams(queryString);
  585.         // Crear indArr con el primer kpi del listado
  586.         let alldivi = document.getElementsByClassName('grayscale');
  587.         let kpi_init = alldivi[0].getAttribute('data-kpi');
  588.         let slug_init = alldivi[0].getAttribute('data-slug');
  590.         explore_kpi = kpi_init;
  591.         explore_slug = slug_init;
  593.         alldivi[0].classList.add('kpi_selected');
  594.         alldivi[0].classList.add('disabled');
  596.         // Colocar primer alldivi como seleccionado
  597.         selectedIndicator(alldivi[0]);
  599.         // Recibir parametros ind desde url
  600.         let indArr = [parseInt(kpi_init)];
  601.         let frArr = [filterStart, filterEnd];
  603.         await rPlatform.setiActive(indArr);
  604.         await rPlatform.initMapExplore(layers, explore_baseUrl, initGeo, explore_mun, frArr, indArr);
  606.         await rPlatform.getSimpleStyleDistrict();
  607.         await rPlatform.getSimpleStyleSection();
  609.         rPlatform.updateMap();
  611.     }
  613.     init();
  614.     
  615.     
  616.     // ----------------------- Table Map ------------------------ //
  618.     function tableData(){        
  619.         let wrapper = document.getElementById("wrapper");
  620.         wrapper.innerHTML = '';
  622.         let tabla = null; // Variable global para almacenar la instancia de la tabla
  624.         function renderizarTabla(data) {
  625.             // Eliminar la tabla anterior si existe
  626.             if (tabla !== null) {
  627.                 tabla.destroy();
  628.             }
  630.             // Crear una nueva instancia de Grid.js con los nuevos datos y renderizarla
  631.             tabla = new gridjs.Grid({
  632.                 columns: [{
  633.                     id: 'year',
  634.                     name: "{{'Año' |trans }}"
  635.                 },
  636.                 {
  637.                     id: 'currentuse',
  638.                     name: "{{'Uso' |trans }}",
  639.                     formatter: (cell, row) => {
  640.                         if (cell == '1_residential' ){
  641.                             return gridjs.html(`<span style="color: blue; cursor:pointer;" onclick=" viewFinder(\'card\'); viewCard(\'${row.cells[22].data}\')">Residential</span>`)  
  642.                         }else if(cell == '2_agriculture'){
  643.                             return gridjs.html(`<span style="color: green; cursor:pointer;" onclick="viewFinder(\'card\');  viewCard(\'${row.cells[22].data}\')">Agriculture</span>`)
  644.                         }else if(cell == '3_industrial'){
  645.                             return gridjs.html(`<span style="color: gray; cursor:pointer;" onclick="viewFinder(\'card\');  viewCard(\'${row.cells[22].data}\')">Industrial</span>`)
  646.                         }else if(cell == '4_3_publicServices'){
  647.                             return gridjs.html(`<span style="color: orange; cursor:pointer;" onclick="viewFinder(\'card\');  viewCard(\'${row.cells[22].data}\')">Public services</span>`)
  648.                         }else{
  649.                             return gridjs.html(`<span style="color: black">${cell}</span>`)
  650.                         }
  651.                     }
  652.                 },
  653.                 {
  654.                     id: 'grossfloorarea',
  655.                     name: "{{'Grossfloorarea' |trans }}",
  656.                     formatter: (cell) => html(`${cell} m<sup>2</sup>`)
  657.                 },
  658.                 {
  659.                     id: 'habitantes',
  660.                     name: "{{'Habitantes' |trans }}",
  661.                     formatter: (cell) => {
  662.                         return gridjs.html(`<div class="mt-2"><i class="fa-solid fa-users"></i> ${cell}</div>`)
  663.                     }
  664.                 },
  665.                 {
  666.                     id: 'numberofdwellings',
  667.                     name: "{{'Viviendas' |trans }}",
  668.                     formatter: (cell) => html(`${cell}`)
  669.                 },
  670.                 {
  671.                     id: 'kpi_1_energy_renovated_residential_buildings',
  672.                     name: "{{'Energy renovated residential buildings' |trans }}",
  673.                     formatter: (cell) => html(`${cell}`)
  674.                 },
  675.                 {
  676.                     id: 'kpi_2_final_energy_consumption',
  677.                     name: "{{'Final energy consumption' |trans }}",
  678.                     formatter: (cell) => html(`${cell}`)
  679.                 },
  680.                 {
  681.                     id: 'kpi_3_renewable_energy_consumption',
  682.                     name: "{{'Renewable energy consumption' |trans }}",
  683.                     formatter: (cell) => html(`${cell}`)
  684.                 },
  685.                 {
  686.                     id: 'kpi_4_pv_potential_generation',
  687.                     name: "{{'Pv potential generation' |trans }}",
  688.                     formatter: (cell) => html(`${cell}`)
  689.                 },
  690.                 {
  691.                     id: 'kpi_7_heating_energy_consumption',
  692.                     name: "{{'Heating energy consumption' |trans }}",
  693.                     formatter: (cell) => html(`${cell}`)
  694.                 },
  695.                 {
  696.                     id: 'kpi_8_ghg_emissions',
  697.                     name: "{{'GhG emissions' |trans }}",
  698.                     formatter: (cell) => html(`${cell}`)
  699.                 },
  700.                 {
  701.                     id: 'kpi_19_population_income_below_60_average',
  702.                     name: "{{'Population income below 60 average' |trans }}",
  703.                     formatter: (cell) => html(`${cell}`)
  704.                 },
  705.                 {
  706.                     id: 'kpi_20_median_household_income',
  707.                     name: "{{'Median household income' |trans }}",
  708.                     formatter: (cell) => html(`${cell}`)
  709.                 },
  710.                 {
  711.                     id: 'kpi_21_average_price_renting_compared_family_income',
  712.                     name: "{{'Average price renting compared family income' |trans }}",
  713.                     formatter: (cell) => html(`${cell}`)
  714.                 },
  715.                 {
  716.                     id: 'kpi_22_house_price',
  717.                     name: "{{'House price' |trans }}",
  718.                     formatter: (cell) => html(`${cell}`)
  719.                 },
  720.                 {
  721.                     id: 'kpi_27_urban_equipment_at_15_min',
  722.                     name: "{{'Urban equipment at 15 min' |trans }}",
  723.                     formatter: (cell) => html(`${cell}`)
  724.                 },
  725.                 {
  726.                     id: 'kpi_28_accessibility_to_bike_lane',
  727.                     name: "{{'Accessibility to bike lane' |trans }}",
  728.                     formatter: (cell) => html(`${cell}`)
  729.                 },{
  730.                     id: 'kpi_30_green_area_surfaces',
  731.                     name: "{{'Green area surfaces' |trans }}",
  732.                     formatter: (cell) => html(`${cell}`)
  733.                 },
  734.                 {
  735.                     id: 'kpi_31_vulnerability_heatwaves_temperature_rise',
  736.                     name: "{{'Vulnerability heatwaves temperature rise' |trans }}",
  737.                     formatter: (cell) => html(`${cell}`)
  738.                 },
  739.                 {
  740.                     id: 'kpi_36_charging_outlets',
  741.                     name: "{{'Charging outlets' |trans }}",
  742.                     formatter: (cell) => html(`${cell}`)
  743.                 },
  744.                 {
  745.                     id: 'kpi_6_1_energy_efficient_and_energy_recovering_homes',
  746.                     name: "{{'Energy efficient and energy recovering_homes' |trans }}",
  747.                     formatter: (cell) => html(`${cell}`)
  748.                 },
  749.                 {
  750.                     id: 'kpi_6_2_energy_efficient_and_energy_recovering_homes',
  751.                     name: "{{'Energy efficient and energy recovering homes' |trans }}",
  752.                     formatter: (cell) => html(`${cell}`)
  753.                 },
  754.                 {
  755.                     id: 'inspireid',
  756.                     name: "{{'inspireid' |trans }}",
  757.                     formatter: (cell) => html(`${cell}`)
  758.                 }],
  759.                 data: data,
  760.                 pagination: {
  761.                     limit: 50,
  762.                     summary: true,
  763.                 },
  764.                 resizable: true,
  765.                 search: false,
  766.                 sort: true,
  767.                 fixedHeader: true,
  768.                 height: $("#infoview").height(),
  769.             }).render(wrapper);
  770.         }
  772.         // Llamar a la función obtenerDatos() para obtener los datos inicialmente y renderizar la tabla
  773.         caller.obtenerDatos(explore_kpi, explore_mun, explore_slug)
  774.             .then((data) => {
  775.                 console.log(data);
  776.                 renderizarTabla(data);
  777.             })
  778.             .then(()=>{
  779.                 setTimeout(()=>{
  780.                     updateTable(explore_slug);
  781.                 },2000)
  782.                 
  783.             });
  784.     }
  786.     //------------------------ Descargar Datos ------------------- //
  787.     function loadSelectorIndicators()
  788.     {
  789.         $("#project_actions_content").html('');
  790.         {% for item in analytic_data %}
  791.             {% if item.slug == slug %}
  792.                 {% set break = false %}
  793.                 {% set array_used = [] %}
  795.                 {% for rel in item.relation %}
  796.                     {% if break == false %}
  797.                         {% set array_used = array_used|merge([rel.kpi]) %}
  798.                         var check = "<div class='form-check'> <input class='form-check-input' type='checkbox' value='{{rel.slug}}' id='flexCheckDefault' data-name='{{rel.name}}'> <label class='form-check-label' for='flexCheckDefault'> {{rel.name}} </label></div>";
  799.                         $("#project_actions_content").append(check);
  800.                         
  801.                         console.log('{{rel.name}}');
  802.                     {% endif %}
  803.                 {% endfor %}
  805.                 {% for rel in analytic_data_relation %}
  806.                     {% if rel.kpi not in array_used %}
  807.                         var check = "<div class='form-check'> <input class='form-check-input' type='checkbox' value='{{rel.slug}}' id='flexCheckDefault' data-name='{{rel.name}}'> <label class='form-check-label' for='flexCheckDefault'> {{rel.name}} </label></div>";
  808.                         $("#project_actions_content").append(check);
  809.                         console.log('{{rel.name}}');
  810.                     {% endif %} 
  811.                 {% endfor %} 
  812.             {% endif %} 
  813.         {% endfor %} 
  815.         $("#popUpIndicadores").modal('show');
  816.     }
  818.     function getExcel() {
  820.         const selectedNames = {};
  821.         const checkboxes = document.querySelectorAll('.form-check-input:checked');
  822.         const selectedValues = Array.from(checkboxes).map(checkbox => checkbox.value);
  823.         /*const selectedNames = Array.from(checkboxes).map(checkbox => ({
  824.             [checkbox.value]: checkbox.dataset.name
  825.         }));*/
  827.         checkboxes.forEach((checkbox) => selectedNames[checkbox.value] = checkbox.dataset.name);
  829.         console.log(selectedValues);
  830.         console.log(selectedNames);        
  832.         caller.getExcel(explore_kpi, explore_mun, explore_slug, selectedValues, selectedNames)
  833.             .then((data) => {
  834.                 console.log(data); 
  835.                 var bURL = "{{app.request.getBasePath() }}";
  836.                 var href = bURL + "/documents/" + data;            
  838.                 location = href;                             
  839.             }).then(
  840.                 //si hay que eliminar el archivo generado ---> here
  841.             );
  842.             
  843.     }
  844.     
  845.     // --------------------- Card ------------------------------- //
  847.     async function viewCard(id){
  848.         $("#infoview2").hide();
  849.         $('.viewfindergroup').hide();
  850.         $('#card_view').show();
  852.         let fachada = document.getElementById('img_fachada');
  853.         let catastro = document.getElementById('img_catastro');
  854.         let txt_build = document.getElementById('txt_build');
  855.         let build_indicators = document.getElementById('build_indicators');
  857.         let size = fachada.offsetWidth;
  859.         fachada.style.height = size + 'px';
  860.         catastro.style.height = size + 'px';
  862.         var imagenAlternativa = explore_baseUrl + '/img/img_bk_building.jpg';
  864.         let img_fachada = '<img class="img-fluid" src="https://ovc.catastro.meh.es/OVCServWeb/OVCWcfLibres/OVCFotoFachada.svc/RecuperarFotoFachadaGet?ReferenciaCatastral=' + id + '" width="auto" height="'+size+'px" onerror="this.onerror=null; this.src=\''+ imagenAlternativa + '\';" />';
  866.         let img_catastro = '<img class="img-fluid" src="https://www1.sedecatastro.gob.es/Cartografia/GeneraGraficoParcela.aspx?del=8&mun=279&refcat=' + id + '&AnchoPixels=500&AltoPixels=500" width="auto" height="'+size+'px" onerror="this.onerror=null; this.src=\''+ imagenAlternativa + '\';" />';
  868.         document.getElementById('img_fachada').innerHTML = img_fachada;
  869.         document.getElementById('img_catastro').innerHTML = img_catastro;
  871.         let buildData = await caller.getBuildData(id);
  873.         // console.log(buildData);
  875.         let UseValue = '';
  876.         let valuesContent = '';
  878.         if (buildData.use_numeric == 0) {
  879.             UseValue = 'SFH';
  880.         } else {
  881.             UseValue = 'MFH';
  882.         }
  883.                 
  885.         valuesContent += '<p style="font-size: 14px; "><b>{{"Referencia catastral" |trans}}:</b> <span style="color:#222222; padding-left: 15px;">' + buildData.inspireid + '</span></p>';
  886.         valuesContent += '<p style="font-size: 14px; "><b>{{"Año de construcción" |trans}}:</b> <span style="color:#222222; padding-left: 15px;">' + buildData.year + '</span></p>';
  887.         valuesContent += '<p style="font-size: 14px; "><b>{{"Uso" |trans}}:</b> <span style="color:#222222; padding-left: 15px;">' + UseValue + '</span></p>';
  888.         valuesContent += '<p style="font-size: 14px; "><b>{{"Plantas" |trans}}:</b> <span style="color:#222222; padding-left: 15px;">' + buildData.num_floors + '</span></p>';
  889.         valuesContent += '<p style="font-size: 14px; "><b>{{"Superficie" |trans}}:</b> <span style="color:#222222; padding-left: 15px;">' + buildData.grossfloorarea + '</span></p>';
  891.         document.getElementById('txt_build').innerHTML = valuesContent;
  893.         // console.log(kpi_list);      
  895.         build_indicators.innerHTML = '';
  896.         for(let i=0; kpi_list.length > i; i++){
  897.             // console.log(kpi_list[i].slug);
  898.             let buildDataFiltered = Object.keys(buildData).filter((key) => key === kpi_list[i].slug).map((key) => buildData[key]);
  900.             //console.log(kpi_list[i]);
  901.             if(kpi_list[i].name != 'Todos'){
  902.                 var styleBox = "";
  903.                 var grafica = "";
  905.                 if (kpi_list[i].name == "año de construcción" || kpi_list[i].name == "área" || kpi_list[i].name == "uso") 
  906.                     styleBox = "bk_box--color";
  907.                 
  908.                
  909.                 if ( $("#statline_id_"+kpi_list[i].id) ){
  910.                      
  911.                     let contenido = $("#statline_id_"+kpi_list[i].id).html();  // Obtiene el HTML
  912.                     let tempDiv = $("<div>").html(contenido);   // Lo convierte en un objeto jQuery
  913.                     tempDiv.find("p").hide();
  914.                     tempDiv.find(".statsline_range").removeClass("d-none");
  915.                     tempDiv.find(".statsline_range").css({
  916.                         "position": "relative",
  917.                         "font-size": "12px",
  918.                         "color": "#7a7a7a",
  919.                         //"top": "-10px"
  920.                     });
  922.                     let maxValue = $("#statline_id_"+kpi_list[i].id).data("max");
  923.                     let minValue = $("#statline_id_"+kpi_list[i].id).data("min");
  924.                     let per = Math.ceil(((buildDataFiltered[0]) - minValue)/(maxValue - minValue) * 100);
  925.                     
  926.                     tempDiv.find(".statsline_item").css("left", per+"%");                    
  927.                     grafica = tempDiv.html();
  928.                 }  else grafica = "";
  930.                 let dataNumber = "";
  931.                 if (buildDataFiltered[0] == null){
  932.                     if (window.appLocale == 'ca')   dataNumber = "No hi han dades";
  933.                     else if (window.appLocale == 'en')  dataNumber = "No data";
  934.                     else dataNumber = "No hay datos"; 
  935.                 }   
  936.                 else if (kpi_list[i].name != "año de construcción"){
  937.                     numero = Number.parseFloat(buildDataFiltered[0]);
  938.                     dataNumber = numero.toLocaleString("es-ES");
  939.                 }else  dataNumber =  buildDataFiltered[0];                           
  941.                 if (kpi_list[i].name == "uso" && buildDataFiltered[0] == 0){
  942.                     if (window.appLocale == 'ca')   dataNumber = "Unifamiliar";
  943.                     else if (window.appLocale == 'en')  dataNumber = "Unifamiliar";
  944.                     else dataNumber = "Unifamiliar";
  945.                     
  946.                 }         
  947.                 else if (kpi_list[i].name == "uso" && buildDataFiltered[0] == 1){
  948.                     if (window.appLocale == 'ca')   dataNumber = "Plurifamiliar";
  949.                     else if (window.appLocale == 'en')  dataNumber = "Plurifamiliar";
  950.                     else dataNumber = "Plurifamiliar";
  951.                 }     
  953.                 if (window.appLocale == 'ca')
  954.                 {
  955.                     var kpiName = kpi_list[i].name_ca;
  956.                     var KpiInfo = kpi_list[i].info_ca;
  957.                 }else if (window.appLocale == 'en') {
  958.                     var kpiName = kpi_list[i].name_en;
  959.                     var KpiInfo = kpi_list[i].info_en;
  960.                 }else{ 
  961.                     var kpiName = kpi_list[i].name;
  962.                     var KpiInfo = kpi_list[i].info; 
  963.                 }
  965.                 build_indicators.innerHTML += '<div class="col-6 col-sm-3 d-flex"><div class="bk_box '+styleBox+' p-3 w-100 d-flex flex-column"><div class="mb-2 d-flex justify-content-between align-items-baseline" style="height: 58px;"><p class="fw-bold mb-2" style="font-size: 14px; line-height: 18px; max-width: 70%;">'+ capitalizeFirstLetter(kpiName) +'</p><p style="font-weight:600; "><span style="font-size:16px; color:#6E93F6;"> '+ dataNumber +'</span></p></div><div class="d-flex justify-content-between mb-2"><div style="width: 100%;">'+grafica+'</div></div><p class=" mb-2 boxed_limited" onclick="activeClass(this)" >'+ KpiInfo +'</p></div></div>';
  966.                 
  967.             }
  968.             
  970.         }
  972.     }
  974.     function formatearNumero(numero) {
  975.         //return numero;
  976.         
  977.         if(typeof numero === 'number'){
  978.             numero = numero.toString();
  979.             numero = Number.parseFloat(numero);
  980.             return numero.toLocaleString("es-ES");
  981.             // return numero.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
  982.         }else if(numero === null){
  983.             return numero;
  984.         }else{
  985.             // console.log(numero);
  986.             numero = Number.parseFloat(numero);
  987.             return numero.toLocaleString("es-ES");
  988.             
  989.         }
  990.     }
  992.     function hideCardOnData(){
  993.         document.getElementById('info_window').innerHTML = '';
  994.     }
  996.     // --------------------- Fn OK ------------------------------- //
  998.     function updateMapFromDiv(a){
  1000.         let indArr = [{'kpi': parseInt(a)}];
  1001.         let divi = document.getElementById('statline_id_' + a);
  1002.         let alldivi = document.getElementsByClassName('grayscale');
  1004.         for(let i=0; alldivi.length > i; i++){
  1005.             alldivi[i].classList.remove('kpi_selected');
  1006.             alldivi[i].classList.remove('disabled');
  1007.         }
  1009.         divi.classList.add('kpi_selected');
  1010.         divi.classList.add('disabled');
  1012.         explore_kpi = divi.getAttribute('data-kpi');
  1013.         explore_slug = divi.getAttribute('data-slug');
  1014.         
  1015.         rPlatform.setiSelected(indArr);
  1016.         rPlatform.setiActive();
  1017.         rPlatform.updateMap();
  1019.         // console.log(indArr);
  1021.         this.selectedIndicator(divi);
  1022.         this.updateTable(explore_slug);
  1024.         //this.selectedDiv();
  1026.     }
  1028.     function updateMapFromStat(a){
  1030.         let indArr = [{'kpi': parseInt(a)}];
  1032.         let slug = '';
  1033.         let name = '';
  1034.         if(a == 100){
  1035.             slug = 'statYearBox';
  1036.             name = 'Año de construcción';
  1037.         }else if(a == 101){
  1038.             slug = 'statAreaBox';
  1039.             name = 'Área';
  1040.         }else if(a == 104){
  1041.             slug = 'statOccupationBox';
  1042.             name = 'Porcentaje de ocupación';
  1043.         }else if(a == 105){
  1044.             slug = 'statUseBox';
  1045.             name = 'Uso del edificio';
  1046.         }
  1048.         let divi = document.getElementById(slug);
  1049.         
  1050.         var selectedBox = document.getElementById('selected_box_content');
  1051.         // selectedBox.innerHTML = divi.outerHTML;
  1053.         let html = '<h6>'+name+'</h6>';
  1054.         // selectedBox.insertAdjacentHTML("afterbegin", html);
  1056.         rPlatform.setiSelected(indArr);
  1057.         rPlatform.setiActive();
  1058.         rPlatform.updateMap();
  1060.     }
  1062.     function updateTable(slug){
  1064.         let kpiArray = ['kpi_1_energy_renovated_residential_buildings', 'kpi_2_final_energy_consumption', 'kpi_3_renewable_energy_consumption', 'kpi_4_pv_potential_generation', 'kpi_7_heating_energy_consumption', 'kpi_8_ghg_emissions', 'kpi_19_population_income_below_60_average', 'kpi_20_median_household_income', 'kpi_21_average_price_renting_compared_family_income', 'kpi_22_house_price', 'kpi_27_urban_equipment_at_15_min', 'kpi_28_accessibility_to_bike_lane', 'kpi_30_green_area_surfaces', 'kpi_31_vulnerability_heatwaves_temperature_rise', 'kpi_36_charging_outlets', 'kpi_6_2_energy_efficient_and_energy_recovering_homes', 'kpi_6_1_energy_efficient_and_energy_recovering_homes', 'inspireid']
  1065.         // Seleccionar todas las columnas con slug
  1066.         for(let i=0; kpiArray.length > i;i++){
  1067.             let celda = document.querySelectorAll('#wrapper .gridjs-table [data-column-id='+kpiArray[i]+']');
  1068.             for(let j=0; celda.length > j;j++){
  1069.                 celda[j].classList.add('d-none');
  1070.             }
  1071.         }
  1072.         
  1073.         // Seleccionar las celdas de nuestro slug
  1074.         let celdaSlug = document.querySelectorAll('#wrapper .gridjs-table [data-column-id='+slug+']');
  1075.         for(let j=0; celdaSlug.length > j;j++){
  1076.             celdaSlug[j].classList.remove('d-none');
  1077.             celdaSlug[j].classList.add('selected');
  1078.         }
  1079.         
  1080.         // console.log('updateTable',slug);
  1082.     }
  1084.     function selectedIndicator(a){
  1085.         var dataDiv = '';
  1086.         var selectedBox = document.getElementById('selected_box_content');
  1087.         var linestat = a.getElementsByClassName('statsline');
  1088.         var titlestat = a.getElementsByClassName('title');
  1089.         
  1090.         var p = parseFloat(a.getAttribute('data-p')).toFixed(2);
  1091.         var m = parseFloat(a.getAttribute('data-m')).toFixed(2);
  1092.         var r = parseFloat(a.getAttribute('data-r')).toFixed(2);
  1093.         var max = parseFloat(a.getAttribute('data-max'));
  1095.         // Si hay datos completos pintamos los pins en el indicador seleccionado
  1096.         if (p !== null && m !== null && r !== null){
  1097.             var dato_p = detres(p,max);
  1098.             var dato_m = detres(m,max);
  1099.             var dato_r = detres(r,max);
  1100.             var pinDiv = '<span class="statsline_item_extra" style="left: '+dato_p+'%;"><i class="fa-solid vert_bar" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="custom-tooltip" data-bs-title="Provincia '+p+'"></i><span class="pindata">P</span></span> <span class="statsline_item_extra" style="left: '+dato_m+'%;"><i class="fa-solid vert_bar" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="custom-tooltip" data-bs-title="Municipio '+m+'"></i><span class="pindata">M</span></span> <span class="statsline_item_extra" style="left: '+dato_r+'%;"><i class="fa-solid vert_bar" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="custom-tooltip" data-bs-title="Región '+r+'"></i><span class="pindata">R</span></span> ';
  1102.             var elemento = linestat[0];
  1103.             // elemento.insertAdjacentHTML('beforeend', pinDiv);
  1105.             dataDiv = titlestat[0].outerHTML + elemento.outerHTML;
  1106.             // selectedBox.innerHTML = dataDiv;   
  1107.         }else{
  1108.             dataDiv = titlestat[0].outerHTML + linestat[0].outerHTML;
  1109.             // selectedBox.innerHTML = dataDiv;
  1110.         }
  1111.         
  1112.         let titleAttribute = a.getAttribute('data-bs-title');
  1113.         let descAttribute = a.getAttribute('data-bs-content');
  1115.         // selectedBox.setAttribute("data-bs-title", titleAttribute);
  1116.         // selectedBox.setAttribute("data-bs-content", descAttribute);
  1118.         $('[data-bs-toggle="popover_live_top"]').mouseover(function(){
  1119.             $('[data-bs-toggle="popover_live_top"]').popover();
  1120.         });
  1122.         const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover_live_top"]')
  1123.         const popovertipList = [...popoverTriggerList].map(item => new bootstrap.Popover(item));
  1125.         const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
  1126.         const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
  1127.     }
  1129.     function detres(value,max){
  1130.         let dato = (value*100)/max;
  1131.         return dato.toFixed(2);
  1132.     }
  1133.     
  1134.     function updateMap(){
  1136.         var selectElement = document.querySelector('#kpi_selector');
  1137.         var kpi_id = selectElement.value;
  1138.         let indArr = [{'kpi': parseInt(kpi_id)}];
  1140.         rPlatform.setiSelected(indArr);
  1141.         rPlatform.setiActive();
  1142.         rPlatform.updateMap();
  1144.         var iActive = rPlatform.getiActive();
  1145.         updateSelector(iActive)
  1147.     }
  1149.     // --------------------- Simple Fn OK ------------------------------- //
  1151.     function updateSelector(kpi){
  1152.         var selector = document.getElementById('kpi_selector');
  1153.         selector.value = kpi;
  1154.     }
  1156.     function loadUrlBack(){
  1157.         let url = explore_baseUrl + "/" + explore_mun ;
  1158.         window.location.href = url;
  1159.     }
  1160.     
  1161.     function gotoproject(){
  1162.         let url = '';
  1163.         url = explore_baseUrl + "/" + explore_mun + "/plan";
  1164.         window.location.href = url;
  1165.     }
  1167.     function capitalizeFirstLetter(string) {
  1168.         return string.charAt(0).toUpperCase() + string.slice(1);
  1169.     }
  1171.     function viewFinder(a){
  1172.         $('.viewfindergroup').hide();
  1173.         $('#'+ a +'_view').show();
  1174.         
  1175.         if(a == 'map' || a == 'data')
  1176.         {
  1177.             $("#infoview2").show();
  1178.         }else{
  1179.             $("#infoview2").hide();
  1180.         }
  1182.         if(a == 'data'){
  1183.             tableData();
  1184.         }
  1186.         console.log(a);
  1188.         [...document.querySelectorAll('.left_bar_button')].map(x => x.classList.remove('active'));       
  1189.         document.getElementById('left_bar_button_'+a).classList.add('active');
  1191.     }
  1192.     
  1193.     function centerViewMap(){
  1194.         var zoom = rPlatform.getZoom();
  1195.         rPlatform.setCenterView(initGeo);
  1196.     }
  1198.     function expandIcon(e){
  1200.         var elemento = document.getElementById(e);
  1201.         var textoExtraido = elemento.innerText;
  1203.         if (textoExtraido == 'expand_more'){
  1204.             elemento.innerText = 'expand_less';
  1205.         }else{
  1206.             elemento.innerText = 'expand_more';
  1207.         }
  1208.     }
  1210.     function infoviewToggle(){
  1212.         if($('#infoview2').hasClass('show')){
  1213.             $('#infoview2').collapse('hide');
  1214.             $('#infoview').addClass('w-100');
  1215.             $('#expand .material-symbols-outlined').text('collapse_content');
  1216.         }else{
  1217.             $('#infoview2').collapse('show');
  1218.             $('#infoview').removeClass('w-100');
  1219.             $('#expand .material-symbols-outlined').text('expand_content');
  1220.         }
  1221.     }
  1223.     function activeClass(elem){
  1224.         var elemento = $(elem);
  1225.         elemento.toggleClass('active');
  1226.     }
  1227.     
  1228. </script>
  1229. <script>
  1230.     $(document).ready(function(){
  1232.         document.getElementById('big_container').classList.add('full');
  1233.         
  1234.         var headerInTop = document.getElementById('header_in_top').offsetHeight;
  1235.         var containerInContent = document.getElementById('container_in_content').offsetHeight;
  1236.         var headerContentInfoTop = document.getElementById('header_content_info_top').offsetHeight;
  1237.         var bigContainer = document.getElementById('big_container').offsetHeight;
  1238.         var containerInContentTotal = bigContainer - headerInTop;
  1239.         var containerSteps = bigContainer - headerInTop - headerContentInfoTop;
  1240.         
  1241.         document.getElementById('container_in_content').style.height = containerInContentTotal + 'px';
  1242.         document.getElementById('infoview_content').style.height = containerInContentTotal + 'px';
  1243.         document.getElementById('analytic_step').style.height = containerInContentTotal + 'px';
  1244.         
  1245.         var divs = document.querySelectorAll('.infoview_div');
  1246.         for(let i=0; divs.length > i; i++){
  1247.             divs[i].style.height = containerSteps + 'px';
  1248.         }
  1250.         var divs2 = document.querySelectorAll('.infoview2_div');
  1251.         for(let i=0; divs2.length > i; i++){
  1252.             divs2[i].style.height = containerSteps + 'px';
  1253.         }
  1255.         var divsIn = document.querySelectorAll('.viewfindergroup');
  1256.         for(let i=0; divsIn.length > i; i++){
  1257.             divsIn[i].style.height = containerSteps + 'px';
  1258.         }
  1260.         let flashDiv = document.querySelector('.flash-notice');
  1261.         if(flashDiv){
  1262.             setTimeout(()=>{
  1263.                 flashDiv.remove();
  1264.             },10000);
  1265.         }
  1267.     });
  1269.     function removeDiv(id){
  1270.         let divi = document.getElementById(id);
  1271.         divi.remove();
  1272.     }
  1273. </script>
  1275. {% endblock %}