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>

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/centropais_periurbano_charts.js

 /*
- * Copyright 2020 - All rights reserved.
+ * Copyright 2021 - All rights reserved.
  * Rodrigo Tapia-McClung
  *
- * June 2020
+ * March 2021
  */
 
-/* globals am4core, am4charts, am4themes_animated, intervals */
+/* globals am4core, am4charts, am4themes_animated, baseUrl */
 
-let minValue, maxValue;
 let mainTextColor = getComputedStyle(document.body).getPropertyValue("--main-text-color");
-let cellbgColor = getComputedStyle(document.body).getPropertyValue("--main-bg-color");
+//let cellbgColor = getComputedStyle(document.body).getPropertyValue("--main-bg-color");
 
 am4core.ready(function() {
 
     let mainTextColor = getComputedStyle(document.body).getPropertyValue("--main-text-color");
 
     // Themes begin
-    //am4core.useTheme(am4themes_animated);
+    am4core.useTheme(am4themes_animated);
     // Themes end
 
     // Create chart instance
@@ -90,7 +89,7 @@ am4core.ready(function() {
     circle.fill = am4core.color("#fff");
     circle.strokeWidth = 3;
 
-        }); // end am4core.ready()
+}); // end am4core.ready()
 
 //++++++++++++++++++++++++++++++++++++++++++++++++++++++BARRAS SEMAFORO++
 /*
@@ -100,7 +99,7 @@ am4core.ready(function() {
 
 am4core.ready(function() {
 
-  var chart = am4core.create("odChart", am4charts.XYChart);
+    var chart = am4core.create("topLeftChart", am4charts.XYChart);
     chart.hiddenState.properties.opacity = 0; // this creates initial fade-in
 
     /*
@@ -231,7 +230,7 @@ am4core.ready(function() {
   bullet3.label.fontSize = 9;*/
 
 
-  }); // end am4core.ready()
+}); // end am4core.ready()
 
 //++++++++++++++++++++++++++++++++++++++++++++ BARRAS CAFES Y LINEAS MORADAS APILADAS ++++++++++++++++++
 // FALTA CONSTRUIR QUERY
@@ -241,7 +240,7 @@ am4core.ready(function() {
     am4core.useTheme(am4themes_animated);
     // Themes end
 
-  var chart = am4core.create("topLeftChart", am4charts.XYChart);
+    var chart = am4core.create("topRightChart", am4charts.XYChart);
     chart.hiddenState.properties.opacity = 0; // this creates initial fade-in
 
     /*
@@ -454,7 +453,7 @@ am4core.ready(function() {
 
     //chart.scrollbarX = new am4core.Scrollbar();
 
-  }); // end am4core.ready()
+}); // end am4core.ready()
 
 //++++++++++++++++++++++++++++++++++++++++++++ HISTORICO POR TRAMOS ++++++++++++++++++
 am4core.ready(function() {
@@ -504,8 +503,8 @@ am4core.ready(function() {
             Tramo10:2168.042568,
             Tramo11:5354.295853,
             Tramo12:946.076199
-},  
-{
+        },
+        {
             category: "2018",
             Tramo7: 4712.061739,
             Tramo8: 5798.574005,
@@ -513,8 +512,8 @@ am4core.ready(function() {
             Tramo10: 2463.225593,
             Tramo11: 6065.936419,
             Tramo12: 1077.998678
-},
-{
+        },
+        {
             category: "2019",
             Tramo7: 5004.426599,
             Tramo8: 6112.824022,
@@ -522,8 +521,8 @@ am4core.ready(function() {
             Tramo10: 2775.836758,
             Tramo11: 6783.400364,
             Tramo12: 1238.459944
-},
-{
+        },
+        {
             category: "2020",
             Tramo7: 5364.43353,
             Tramo8: 6427.625949,
@@ -531,7 +530,7 @@ am4core.ready(function() {
             Tramo10: 2972.499167,
             Tramo11: 7299.502497,
             Tramo12: 1338.796796
-}
+        }
 
     ];
 
@@ -665,5 +664,5 @@ am4core.ready(function() {
 
     //chart.scrollbarX = new am4core.Scrollbar();
 
-  }); // end am4core.ready()
+}); // end am4core.ready()
 

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";