templates/analytic/home.html.twig line 1

Open in your IDE?
  1. {% extends 'Layouts/layout.html.twig' %}
  3. {% block title %} Retabit Platform {% endblock %}
  5. {% block content %}
  7. <div class="container pt-3">
  8.     {# insights top #}
  9.     <div class="row align-items-center justify-content-center">
  10.         <div class="col-12 d-none">
  11.             <h1>{{ municipioname.adminunitname|capitalize }}</h1>
  12.         </div>
  13.         <div class="col-12 pt-3 pb-2">
  14.             <div class="d-flex align-items-center">
  15.                 <h4 class="flex-grow-1">{% trans %}Los datos sociales, económicos y medioambientales que RETABIT tiene de {% endtrans %} <strong>{{ municipioname.adminunitname|capitalize }}</strong> {% trans %}para el análisis del parque residencial, son los siguientes{% endtrans %}: </h4>
  16.             </div>
  17.         </div>
  18.     </div>
  19. </div>
  21. <div class="container-fluid box_blue_middle">
  23.     <div class="container">
  25.         <div class="row align-items-center justify-content-center">
  27.             {{include ('components/infobar.html.twig')}}
  28.             
  29.         </div>
  31.     </div>
  32. </div>
  35. <div class="container mt-5 pt-3 pb-3">
  36.     <div class="col-12 pt-3 pb-3">
  37.             <div class="d-flex align-items-center">
  38.                 <h4 class="flex-grow-1">{% trans %}Estos son los análisis propuestos para{% endtrans %} <strong>{{ municipioname.adminunitname|capitalize }}</strong> {% trans %}a partir de la valoración de los datos disponibles. En cada análisis se muestran el resumen de los datos de los edificios y sus habitantes, sus características en las gráficas de barras y los indicadores relacionados.{% endtrans %}  </h4>
  39.             </div>
  40.         </div>
  42.     {# analytic groups #}
  43.     <div class="row align-items-top justify-content-start ">
  45.         {# on group #}
  46.         {# {{dump(analytic_data)}} #}
  47.         {% for item in analytic_data %}
  48.            
  49.         <div class="col-12 p-1 {% if loop.last %} mb-5 {% else %} mb-4 {% endif %}" id="analytic_box_{{loop.index}}">
  50.             {% set title = '' %}
  51.             {% set description = '' %}
  52.             {% for analyticvalue in analytic %}               
  53.                 {% if analyticvalue.id == item.analytic %}
  54.                     {% if app.request.locale == "ca" %}
  55.                         {% set title = analyticvalue.name_ca %}
  56.                         {% set description = analyticvalue.descripcion_ca %}
  57.                     {% elseif app.request.locale == "en" %}
  58.                         {% set title = analyticvalue.name_en %}
  59.                         {% set description = analyticvalue.descripcion_en %}
  60.                     {% else %}
  61.                         {% set title = analyticvalue.name %}
  62.                         {% set description = analyticvalue.descripcion %}
  63.                     {% endif %}
  64.                     
  65.                 {% endif %}
  66.             {% endfor %}
  67.             <div class="analytic_box box_blue_soft p-5">
  68.                 <div class="col-12 mb-3">
  69.                     <h2>{{title}} <a tabindex="0" role="button" title="Header" data-bs-toggle="popover_{{loop.index}}" data-bs-trigger="hover focus" data-bs-title="{{title}}" data-bs-content="{{description}}"><span class="material-symbols-outlined">info</span></a></h2>
  70.                 </div>
  71.                 <div class="d-flex">
  72.                     <div class="col-4 info_box pe-3">
  73.                         
  74.                         <p class="mb-3"><span class="material-symbols-outlined">domain</span> {{item.blg_per}}% <span class="material-symbols-outlined ms-3">groups</span> {{item.hab_per}}%</p>
  75.                         <p class="flex-fill mb-5">{{item.textai|replace({'(': '(<span class="fw-bold">', ')': '</span>)'}) |raw }}</p> <!-- .boxed_text -->
  77.                         <script>
  78.                             $('[data-bs-toggle="popover_{{loop.index}}"]').mouseover(function(){
  79.                                 $('[data-bs-toggle="popover_{{loop.index}}"]').popover();
  80.                             })
  81.                         </script>
  83.                         <div class="mb-3">
  84.                             <a href="{{ path('explore_analytic', {'mun': mun, 'slug': item.slug }) }}" class="btn btn-primary" >{% trans %}Ver más{% endtrans %}</a>
  85.                         </div>
  86.                         
  87.                     </div>
  88.                     <div class="col-4 graphic_box ps-2 pe-3">
  89.                         <h4 class="mb-3">{% trans %}Características de los edificios{% endtrans %}</h4>
  90.                         
  91.                         <div id="carouselExampleIndicators_{{loop.index}}" class="carousel slide">
  92.                             <div class="carousel-indicators">
  93.                                 <button type="button" data-bs-target="#carouselExampleIndicators_{{loop.index}}" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
  94.                                 <button type="button" data-bs-target="#carouselExampleIndicators_{{loop.index}}" data-bs-slide-to="1" aria-label="Slide 2"></button>
  95.                                 <button type="button" data-bs-target="#carouselExampleIndicators_{{loop.index}}" data-bs-slide-to="2" aria-label="Slide 3"></button>
  96.                                 <button type="button" data-bs-target="#carouselExampleIndicators_{{loop.index}}" data-bs-slide-to="3" aria-label="Slide 4"></button>
  97.                             </div>
  98.                             <div class="carousel-inner" id="analytic_box_stat_{{loop.index}}">
  99.                                 <div class="carousel-item active">
  100.                                     <h5>{% trans %}Uso del edificio{% endtrans %} <a tabindex="0" role="button" title="Header" data-bs-toggle="popover_use" data-bs-trigger="hover focus" data-bs-title="" data-bs-content=""><span class="material-symbols-outlined" style="font-size: 18px !important;">info</span></a></h5>
  102.                                     <div class="mb-3" id="statUseBox_{{loop.index}}" style="position: relative;"></div>
  103.                                 </div>
  104.                                 <div class="carousel-item">
  105.                                     <h5>{% trans %}Año de construcción{% endtrans %}<a tabindex="0" role="button" title="Header" data-bs-toggle="popover_cons" data-bs-trigger="hover focus" data-bs-title="" data-bs-content=""><span class="material-symbols-outlined" style="font-size: 18px !important;">info</span></a></h5>
  106.                                     <div class="mb-3" id="statYearBox_{{loop.index}}" style="position: relative;"></div>
  107.                                 </div>
  108.                                 <div class="carousel-item">
  109.                                     <h5>{% trans %}Área{% endtrans %}<a tabindex="0" role="button" title="Header" data-bs-toggle="popover_area" data-bs-trigger="hover focus" data-bs-title="" data-bs-content=""><span class="material-symbols-outlined" style="font-size: 18px !important;">info</span></a></h5>
  110.                                     <div class="mb-3" id="statAreaBox_{{loop.index}}" style="position: relative;"></div>
  111.                                 </div>
  112.                                 <div class="carousel-item">
  113.                                     <h5>{% trans %}Porcentaje de ocupación{% endtrans %}<a tabindex="0" role="button" title="Header" data-bs-toggle="popover_por" data-bs-trigger="hover focus" data-bs-title="" data-bs-content=""><span class="material-symbols-outlined" style="font-size: 18px !important;">info</span></a></h5>
  114.                                     <div class="mb-3" id="statOccupationBox_{{loop.index}}" style="position: relative;"></div>
  115.                                 </div>
  116.                                 
  117.                             </div>
  118.                             <script type="text/javascript">
  120.                                 async function init(){
  121.                                     var statDataAll = {{statData[loop.index - 1]|json_encode()|raw}};
  123.                                     // use stats data and print graphic
  124.                                     let useStat = statDataAll.useStatData;
  125.                                     let useStatData = await analyticOrganizeData(useStat);
  126.                                     let useStatTotalData = await analyticOrganizeTotalData(useStat);
  127.                                     barplotDoubleDouble100('statUseBox_{{loop.index}}',useStatData[0],useStatTotalData[1],useStatData[2], 'analytic_box_stat_{{loop.index}}',useStatTotalData[0]);
  129.                                     // year stats data and print graphic
  130.                                     var yearStat = statDataAll.yearStatData;
  131.                                     var yearStatData = await analyticOrganizeData(yearStat);
  132.                                     var yearStatTotalData = await analyticOrganizeTotalData(yearStat);
  133.                                     barplotDoubleDouble100('statYearBox_{{loop.index}}',yearStatData[0],yearStatTotalData[1],yearStatData[2], 'analytic_box_stat_{{loop.index}}',yearStatTotalData[0]);
  135.                                     // area stats data and print graphic
  136.                                     var areaStat = statDataAll.areaStatData;
  137.                                     var areaStatData = await analyticOrganizeData(areaStat);
  138.                                     var areaStatTotalData = await analyticOrganizeTotalData(areaStat);
  139.                                     barplotDoubleDouble100('statAreaBox_{{loop.index}}',areaStatData[0],areaStatTotalData[1],areaStatData[2], 'analytic_box_stat_{{loop.index}}',areaStatTotalData[0]);
  141.                                     // occupation stats data and print graphic
  142.                                     var occupationStat = statDataAll.occupationStatData;
  143.                                     var occupationStatData = await analyticOrganizeData(occupationStat);
  144.                                     var occupationStatTotalData = await analyticOrganizeTotalData(occupationStat);
  145.                                     barplotDoubleDouble100('statOccupationBox_{{loop.index}}',occupationStatData[0],occupationStatTotalData[1],occupationStatData[2], 'analytic_box_stat_{{loop.index}}',occupationStatTotalData[0]);
  146.                                     
  147.                                 }
  149.                                 init();
  151.                                 
  152.                             </script>
  154.                             <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators_{{loop.index}}" data-bs-slide="prev">
  155.                                 <span class="material-symbols-outlined">chevron_left</span>
  156.                                 <span class="visually-hidden">Previous</span>
  157.                             </button>
  158.                             <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators_{{loop.index}}" data-bs-slide="next">
  159.                                 <span class="material-symbols-outlined">chevron_right</span>
  160.                                 <span class="visually-hidden">Next</span>
  161.                             </button>
  162.                         </div>
  163.                         
  164.                     </div>
  165.                     <div class="col-4 rel_box ps-3 pe-2">
  166.                         <h4 class="mb-3">{% trans %}Indicadores relacionados{% endtrans %}</h4>
  167.                         <div>
  168.                         {#% dump(item.relation) %#}
  169.                         {% set break = false %}
  170.                         {% for rel in item.relation %}
  171.                             
  172.                             {% if break == false %}
  173.                                 {% if loop.index > 3 %}
  174.                                     {% set break = true %}
  175.                                 {% endif %}
  177.                                 {% if app.request.locale == "ca" %}
  178.                                     {% set title = rel.name_ca %}
  179.                                     {% set description = rel.info_ca %}
  180.                                 {% elseif app.request.locale == "en" %}
  181.                                     {% set title = rel.name_en %}
  182.                                     {% set description = rel.info_en %}
  183.                                 {% else %}
  184.                                     {% set title = rel.name %}
  185.                                     {% set description = rel.info %}
  186.                                 {% endif %}
  188.                                 <p class="mb-2">{{ title }} <a tabindex="0" role="button" title="Indicador relacionado" data-bs-toggle="ind_rel_{{loop.index}}" data-bs-trigger="hover focus" data-bs-title="{{title|capitalize}}" data-bs-content="{{description}}"><span class="material-symbols-outlined" style="font-size: 18px !important;">info</span></a></p>
  190.                                 <script>
  191.                                     $('[data-bs-toggle="ind_rel_{{loop.index}}"]').mouseover(function(){
  192.                                         $('[data-bs-toggle="ind_rel_{{loop.index}}"]').popover();
  193.                                     })
  194.                                 </script>
  195.                                 
  196.                                 <div class="statsline mb-4 d-inline-block w-100">
  198.                                     {% set color = [] %}
  199.                                     {% for rank in kpi_rank %}
  200.                                         
  201.                                         {% if rank.kpi_id == rel.kpi %}
  202.                                             {% set color = color|merge([rank.bgcolor]) %}
  203.                                         {% endif %}
  204.                                     {% endfor %}
  205.                                     {% set counter = color|length %}
  206.                                     {% set partsize = 100/counter %}
  207.                                     {% set stylestring = '' %}
  209.                                     <div class="bk_line">
  211.                                     {% for colorpart in color %}
  212.                                         {% if loop.last %}
  213.                                         {% set dato = 99.9-(partsize*(counter - 1)) %}
  214.                                             <div class="analytic_color_bar" style="width:{{dato}}%; background-color: {{colorpart}};"></div>
  215.                                         {% else %}
  216.                                             <div class="analytic_color_bar" style="width:{{partsize|number_format(2, '.')}}%; background-color: {{colorpart}};"></div>        
  217.                                         {% endif %}
  218.         
  219.                                     {% endfor %}
  220.                                     
  221.                                     </div>
  222.                                     
  223.                                     <span class="statsline_item statsline_1" style="left: {{rel.theme_per}}%;margin-left: -6px;"><i class="fa-solid triangle" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="custom-tooltip" data-bs-title="{{rel.theme_per}}%"></i></span>
  224.                                     
  225.                                     
  226.                                 </div>
  227.                                 <div class="statsline_range d-flex justify-content-between d-none">
  228.                                     <span>{{rel.min_value}}</span>
  229.                                     <span>{{rel.max_value}}</span>
  230.                                 </div>
  231.                             {% endif %}
  232.                             
  233.                         {% endfor %}
  234.                         
  235.                         </div>
  237.                     </div>
  238.                 </div>
  239.                 
  240.                 
  241.             </div>
  242.         </div>
  244.         {% endfor %}
  245.         
  246.     </div>
  247. </div>
  250. <script src="{{ asset('bundles/fosjsrouting/js/router.min.js') }}"></script>
  251. <script src="{{ path('fos_js_routing_js', { callback: 'fos.Router.setData' }) }}"></script>
  252. <script type="text/javascript">
  254.     const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
  255.     const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
  257.     const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
  258.     const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
  260.     var Routes = Routing; // loaded from router.min.js
  261.     // because ES5 doesn't support require syntax,
  262.     // we use jquery getJSON function in order to set
  263.     // routing data to our Routing object
  264.     $.getJSON("{{ asset('build/js/fos_js_routes.json') }}", function (routes) {
  265.         Routes.setRoutingData(routes);
  266.     });
  268.     var rPlatform = map;
  269.     let explore_baseUrl = '{{ base_url }}';
  270.     let explore_mun = '{{ mun }}';
  271.     let allgeodataUrl = explore_baseUrl + "/get-allgeodata?mun=" + explore_mun ;
  273.     $(function() {
  274.         rPlatform.setMun(explore_mun);
  275.         rPlatform.setBaseUrl(explore_baseUrl);
  276.     });
  278.     function loadUrl(a){
  279.         let url = explore_baseUrl + "/explora/" + explore_mun + "/" + a;
  280.         window.location.href = url;
  281.     }
  283.     function loadUrlBack(){
  284.         let url = explore_baseUrl + "/explora";
  285.         window.location.href = url;
  286.     }
  288.     function analytic_collapse(a){
  289.         $('#analytic_box_' + a + ' .graphic_box').toggleClass('d-none');
  290.         $('#analytic_box_' + a + ' .rel_box').toggleClass('d-none');
  291.         var dato = $('#analytic_box_' + a).hasClass('col-12');
  292.         if(dato == true){
  293.             $('#analytic_box_' + a).removeClass('col-12');
  294.             $('#analytic_box_' + a).addClass('col-4');
  295.             $('#analytic_collapse_btn_' + a + ' span.material-symbols-outlined').text('arrow_forward');
  296.             $('#analytic_box_' + a + ' .boxed_text').removeClass('normal');
  297.         }else{
  298.             $('#analytic_box_' + a).removeClass('col-4');
  299.             $('#analytic_box_' + a).addClass('col-12');
  300.             $('#analytic_collapse_btn_' + a + ' span.material-symbols-outlined').text('arrow_back');
  301.             $('#analytic_box_' + a + ' .boxed_text').addClass('normal');
  302.         }
  303.     }
  305.     $('[data-bs-toggle="popover_use"]').mouseover(function(){
  306.         $('[data-bs-toggle="popover_use"]').popover();
  307.     });
  308.     $('[data-bs-toggle="popover_cons"]').mouseover(function(){
  309.         $('[data-bs-toggle="popover_cons"]').popover();
  310.     });
  311.     $('[data-bs-toggle="popover_area"]').mouseover(function(){
  312.         $('[data-bs-toggle="popover_use"]').popover();
  313.     });
  314.     $('[data-bs-toggle="popover_por"]').mouseover(function(){
  315.         $('[data-bs-toggle="popover_use"]').popover();
  316.     });
  318. </script>
  320. {% endblock %}