Fix periurbano chart divs

public/centropais/index.html

@@ -82,16 +82,15 @@
                 <div class="col-6" id="story">
                     <div class="loader"></div>
                     <div class="row h-50 border-bottom">
-                        <div class="col" id="topChart">
+                        <div class="col" id="topLeftChart">
                             <div class="row h-100">
                                 <div id="odChart"></div>
                                 <div id="barChart"></div>
                             </div>
                         </div>
 
-                        <div class="col" id="topLeftChart">
+                        <div class="col  border-left" id="topRightChart">
                             <div class="row h-100">
-        
                             </div>
                         </div>
                     </div>
@@ -214,10 +213,10 @@
         $("#showPeriurban").on("click", () => {
             ["../js/centropais_periurbano.js", "../js/centropais_periurbano_charts.js"].forEach( src =>{
                 let script = document.createElement('script');
-            //let script = document.createElement('script');
-            script.src = src;//"../js/centropais_periurbano.js";
-            script.async = false;
-            document.body.appendChild(script);
+                //let script = document.createElement('script');
+                script.src = src;//"../js/centropais_periurbano.js";
+                script.async = false;
+                document.body.appendChild(script);
             });
         });
     </script>

public/js/centropais_basemap.js

@@ -664,7 +664,7 @@ const createFlowLayer = (geojson, type, addOnCreate) => {
             // if layer is to be added on creation, add click funcionality and populate chart
             if (addOnCreate) {
                 flowMapLayer.addTo(map).on("click", odClick);
-                let odChart = am4core.registry.baseSprites.find(c => c.htmlContainer.id === "topChart");
+                let odChart = am4core.registry.baseSprites.find(c => c.htmlContainer.id === "topLeftChart");
                 odChart.data = newData;
 
                 let chordChart = am4core.registry.baseSprites.find(c => c.htmlContainer.id === "bottomLeftChart");

public/js/centropais_charts.js

@@ -19,7 +19,7 @@ am4core.ready(function() {
     am4core.options.autoSetClassName = true;
     // Themes end
 
-    let chart = am4core.create("topChart", am4charts.XYChart);
+    let chart = am4core.create("topLeftChart", am4charts.XYChart);
     chart.maskBullets = false;
 
     let title = chart.titles.create();

public/js/centropais_functions.js

@@ -97,6 +97,7 @@ d3.json("https://unpkg.com/d3-time-format@2.1.1/locale/es-MX.json").then(locale
     // TODO: remove unused functions
     $("#startHeader").remove();
     $("#initial-backdrop").remove();
+    $("#topRightChart")[0].style.setProperty("display", "none");
     $("#regionSelect").remove();
     $("#mainContainer")[0].style.setProperty("display", "flex", "important");
     $("#mexmap").show();
@@ -291,7 +292,7 @@ $("#indicatorSelect").on("change", function() {
     });
 
     // on select, update chart data
-    let odChart = am4core.registry.baseSprites.find(c => c.htmlContainer.id === "topChart");
+    let odChart = am4core.registry.baseSprites.find(c => c.htmlContainer.id === "topLeftChart");
     odChart.data = odData[option];
 
     let chordChart = am4core.registry.baseSprites.find(c => c.htmlContainer.id === "bottomLeftChart");

public/js/evolucion_urbana.js

@@ -352,6 +352,7 @@ L.timeDimension.layer.Tile = (layer, options) => {
 $("#startHeader").remove();
 $(".picker").remove();
 $("#initial-backdrop").remove();
+$("#topRightChart")[0].style.setProperty("display", "none");
 $("#mainContainer")[0].style.setProperty("display", "flex", "important");
 $("#mexmap").show();
 

public/js/evolucion_urbana_charts.js

@@ -13,7 +13,7 @@ am4core.ready(function() {
     let mainTextColor = getComputedStyle(document.body).getPropertyValue("--main-text-color");
 
     // bar and line chart
-    let chart = am4core.create("topChart", am4charts.XYChart);
+    let chart = am4core.create("topLeftChart", am4charts.XYChart);
 
     let ctitle = chart.titles.create();
     ctitle.text = "Área urbanizada trimestralmente";