style changes

public/centropais/index.html

@@ -72,7 +72,7 @@
                 <div class="col-6" id="story">
                     <div class="loader"></div>
                     <div class="row h-50 border-bottom">
-                        <div class="col">
+                        <div class="col" id="topChart">
                             <div class="row h-100">
                                 <div id="odChart"></div>
                                 <div id="barChart"></div>
@@ -81,14 +81,14 @@
                     </div>
 
                     <div class="row h-50">
-                        <div class="col-6 border-right" id="chordChart2">
+                        <div class="col-6 border-right" id="bottomLeftChart">
                             <div class="row h-100">
                                 <div id="chordChart"></div>
                                 <div id="pieChart"></div>
                             </div>
                         </div>
                         <div class="col-6 align-self-center" id="odTableRow">
-                            <div class="row h-100 justify-content-center" id="radarChart2">
+                            <div class="row h-100 justify-content-center" id="bottomRightChart">
                                 <div id="radarChart"></div>
                                 <div class="card text-center" id="odCard">
                                     <div class="card-body">

public/js/centropais_basemap.js

@@ -1030,10 +1030,10 @@ 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 === "odChart");
+                let odChart = am4core.registry.baseSprites.find(c => c.htmlContainer.id === "topChart");
                 odChart.data = newData;
 
-                let chordChart = am4core.registry.baseSprites.find(c => c.htmlContainer.id === "chordChart2");
+                let chordChart = am4core.registry.baseSprites.find(c => c.htmlContainer.id === "bottomLeftChart");
                 chordChart.data = newData;
                 chordChart.data = chordChart.data.filter(function(e) { return e.flowCount > 0 });
             }

public/js/centropais_charts.js

@@ -19,7 +19,7 @@ am4core.ready(function() {
     am4core.options.autoSetClassName = true;
     // Themes end
 
-    var chart = am4core.create("odChart", am4charts.XYChart);
+    var chart = am4core.create("topChart", am4charts.XYChart);
     chart.maskBullets = false;
 
     var title = chart.titles.create();
@@ -250,7 +250,7 @@ am4core.ready(function() {
     am4core.useTheme(am4themes_animated);
     // Themes end
 
-    var cd_chart = am4core.create("chordChart2", am4charts.ChordDiagram);
+    var cd_chart = am4core.create("bottomLeftChart", am4charts.ChordDiagram);
 
     var cd_title = cd_chart.titles.create();
     //cd_title.text = "Viajes de ocupados desde centros de mercado";

public/js/centropais_functions.js

@@ -826,10 +826,10 @@ $("#indicatorSelect").on("change", function() {
     });
 
     // on select, update chart data
-    let odChart = am4core.registry.baseSprites.find(c => c.htmlContainer.id === "odChart")
+    let odChart = am4core.registry.baseSprites.find(c => c.htmlContainer.id === "topChart")
     odChart.data = odData[option];
 
-    let chordChart = am4core.registry.baseSprites.find(c => c.htmlContainer.id === "chordChart")
+    let chordChart = am4core.registry.baseSprites.find(c => c.htmlContainer.id === "bottomLeftChart")
     chordChart.data = odData[option];
     chordChart.data = chordChart.data.filter(function(e) { return e.flowCount > 0 });
     //console.log(amchart2.data.filter(function(e) { return e.flowCount > 0 }))

public/js/evolucion_urbana_charts.js

@@ -20,7 +20,7 @@ am4core.ready(function() {
 
     // bar and line chart
 
-    var chart = am4core.create("barChart", am4charts.XYChart);
+    var chart = am4core.create("topChart", am4charts.XYChart);
 
     let ctitle = chart.titles.create();
     ctitle.text = "Área urbanizada mensual";
@@ -140,7 +140,7 @@ am4core.ready(function() {
 
     // pie chart
 
-    let pchart = am4core.create("chordChart2", am4charts.PieChart);
+    let pchart = am4core.create("bottomLeftChart", am4charts.PieChart);
 
     let query2 = `${baseUrl}/query/${table}?columns=sum(area)/10000 as area,DATE_PART('year',date) as yy&group=yy&sort=yy`; // &sort=yeartrimes`;
     d3.json(query2).then(d => pchart.data = d);
@@ -190,7 +190,7 @@ am4core.ready(function() {
     am4core.useTheme(am4themes_animated);
     // Themes end
 
-    var rchart = am4core.create("radarChart2", am4charts.RadarChart);
+    var rchart = am4core.create("bottomRightChart", am4charts.RadarChart);
     // chart.hiddenState.properties.opacity = 0; // this creates initial fade-in
 
     //const baseUrl = new URL(`/data`, window.location.href).href;