OD table placeholder, update layout, clean up code

public/centropais/index.html

@@ -29,15 +29,8 @@
             <p class="lead">Consulta el crecimiento de los aglomerados urbanos del Corredor Metropolitano Centro Pa&iacute;s resultado del an&aacute;lisis de im&aacute;genes &oacute;pticas de Sentinel-2 y conoce los indicadores que caracterizan su evoluci&oacute;n econ&oacute;mica
                 en las &uacute;ltimas d&eacute;cadas.</p>
             <hr class="my-4">
-            <!--<p>Escoge las fechas para las que quieres explorar el crecimiento urbano y algunos indicadores.</p>-->
             <div class="container">
                 <div class="row justify-content-center">
-                    <!--<div class="col-4 text-center">
-                        <input type="text" name="date-initial" id="date-initial" readonly="readonly" size="12" placeholder="Fecha inicial" data-calendar="false" />
-                    </div>
-                    <div class="col-4 text-center">
-                        <input type="text" name="date-final" id="date-final" readonly="readonly" size="12" placeholder="Fecha final" data-calendar="true" />
-                    </div>-->
                     <div class="col-4 text-center">
                         <button type="button" class="btn btn-primary btn-lg" id="showFlows">Ver flujos</button>
                     </div>
@@ -50,10 +43,8 @@
     </div>
 
     <div class="d-flex flex-column" id="mainContainer">
-        <!--<header class="page-header py-2">-->
         <header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
             <a class="navbar-brand mr-0 mr-md-2" href="." aria-label="Regresar"><i class="fas fa-arrow-left"></i></a>
-            <!--<div class="container text-center">-->
             <div class="navbar-nav mx-auto">
                 <div class="row align-items-center text-center" id="title">
                     <h2>Crecimiento urbano en la regi&oacute;n metropolitana centro pa&iacute;s</h2>
@@ -65,8 +56,6 @@
         <div class="container-fluid d-flex flex-fill">
             <div class="row d-flex flex-fill">
                 <div class="col-md-6" id="mexmap">
-                    <!-- <div class="col-md-10" id="mexmap"> -->
-                    <div id="datePickers"></div>
                     <div class="picker">
                         <select id="indicatorSelect"></select>
                     </div>
@@ -83,17 +72,26 @@
                 <div class="col-md-6" id="story">
                     <div class="loader"></div>
                     <div class="row h-50 border-bottom">
-                        <!--<div class="col-6 border-right">-->
                         <div class="col">
-                            <div id="amchartdiv"></div>
+                            <div class="row h-100">
+                                <div id="odChart"></div>
+                            </div>
                         </div>
-                        <!--<div class="col-6">
-                            <div id="df-graph"></div>
-                        </div>-->
                     </div>
+
                     <div class="row h-50">
-                        <div class="col-6 border-right" id="prueba">
-                            <div id="tablediv">
+                        <div class="col-6 border-right">
+                            <div class="row h-100">
+                                <div id="chordChart"></div>
+                            </div>
+                        </div>
+                        <div class="col-6 align-self-center" id="odTableRow">
+                            <div class="row h-100 justify-content-center">
+                                <div class="card text-center" id="odCard">
+                                    <div class="card-body">
+                                        <p class="card-text">Haz clic en un nodo del mapa para mostrar sus datos</p>
+                                    </div>
+                                </div>
                                 <table class="table table-dark table-striped table-fixed" id="tblViajes">
                                     <thead class="thead-dark">
                                         <tr>
@@ -106,11 +104,6 @@
                                 </table>
                             </div>
                         </div>
-                        <div class="col-6">
-                            <div class="row h-100" id="prueba2">
-                                <div id="perimeter-graph"></div>
-                            </div>
-                        </div>
                     </div>
                 </div>
             </div>

public/css/style.css

@@ -243,10 +243,11 @@ span.frac > span {
 }
 
 #tblViajes {
+    display: none;
     font: 12px sans-serif;
 }
 
-.table-fixed thead {
+/*.table-fixed thead {
     width: 100%;
 }
 
@@ -268,15 +269,12 @@ span.frac > span {
 
 /* Graphs */
 
-#amchartdiv {
-    width: 100%;
-    height: 100%;
-}
-
 .amcharttooltip {
     font: 12px sans-serif;
 }
 
+
+
 .active {
     text-decoration: underline;
     font-weight: 600;

public/js/centropais_basemap.js

@@ -1030,12 +1030,12 @@ 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 amchart = am4core.registry.baseSprites.find(c => c.htmlContainer.id === "amchartdiv");
-                amchart.data = newData;
+                let odChart = am4core.registry.baseSprites.find(c => c.htmlContainer.id === "odChart");
+                odChart.data = newData;
 
-                let amchart2 = am4core.registry.baseSprites.find(c => c.htmlContainer.id === "prueba2");
-                amchart2.data = newData;
-                amchart2.data = amchart2.data.filter(function(e) { return e.flowCount > 0 });
+                let chordChart = am4core.registry.baseSprites.find(c => c.htmlContainer.id === "chordChart");
+                chordChart.data = newData;
+                chordChart.data = chordChart.data.filter(function(e) { return e.flowCount > 0 });
             }
             flowMapsArray.push(flowMapLayer);
             resolve(flowMapsArray);
@@ -1158,6 +1158,9 @@ const makeBaseMap = () => {
                             }
                         });
                         layer._resetCanvas();
+                        $("#odTableRow").addClass("align-self-center");
+                        $("#odCard").show();
+                        $("#tblViajes").hide();
                         $("#tblViajes tbody").html("");
                     }
                 });

public/js/centropais_charts.js

@@ -19,7 +19,7 @@ am4core.ready(function() {
     am4core.options.autoSetClassName = true;
     // Themes end
 
-    var chart = am4core.create("amchartdiv", am4charts.XYChart);
+    var chart = am4core.create("odChart", am4charts.XYChart);
     chart.maskBullets = false;
 
     var title = chart.titles.create();
@@ -250,9 +250,7 @@ am4core.ready(function() {
     am4core.useTheme(am4themes_animated);
     // Themes end
 
-
-
-    var cd_chart = am4core.create("prueba2", am4charts.ChordDiagram);
+    var cd_chart = am4core.create("chordChart", am4charts.ChordDiagram);
 
     var cd_title = cd_chart.titles.create();
     //cd_title.text = "Viajes de ocupados desde centros de mercado";
@@ -262,23 +260,17 @@ am4core.ready(function() {
     cd_title.marginBottom = 20;
     cd_title.paddingLeft = 10;
 
-
     cd_chart.events.on("beforedatavalidated", function(ev) {
-        let option = $("#indicatorSelect").val();
+        //let option = $("#indicatorSelect").val();
         let optionTitle = $("#indicatorSelect option:selected").text();
 
-        cd_title.text = "[bold]Conectividad origen -destino entre \n" + optionTitle.toLowerCase();
+        cd_title.text = "[bold]Conectividad origen - destino entre \n" + optionTitle.toLowerCase();
 
         //var data = ev.target.data;
         //let data = data.filter(function(e) { return e.flowCount > 0 });
-
-
         //console.log(data);
-
     });
 
-
-
     cd_chart.dataFields.fromName = "xVar";
     cd_chart.dataFields.toName = "yVar";
     cd_chart.dataFields.value = "flowCount";
@@ -296,10 +288,8 @@ am4core.ready(function() {
     bullet.locationX = 0.5;
 
     // create animations
-
-
-    cd_chart.events.on("over", function() {
-        // nodeTemplate.events.on("ready", function() {
+    //cd_chart.events.once("over", function() {
+    nodeTemplate.events.on("ready", function() {
         for (var i = 0; i < cd_chart.links.length; i++) {
             var link = cd_chart.links.getIndex(i);
             var bullet = link.bullets.getIndex(0);
@@ -325,5 +315,4 @@ am4core.ready(function() {
 
     cd_chart.responsive.enabled = true;
 
-
 }); // end am4core.ready()
\ No newline at end of file

public/js/centropais_functions.js

@@ -431,6 +431,9 @@ const odClick = (e) => {
         // style viajes thousands with #,###
         origins += `<tr><td>${dest.properties.muni_origen}</td><td>${dest.properties.muni_destino}</td><td>${dest.properties.viajes.toLocaleString()}</td></tr>`;
     });
+    $("#odCard").hide();
+    $("#odTableRow").removeClass("align-self-center");
+    $("#tblViajes").show();
     $("#tblViajes tbody").html(origins);
 
     if (e.sharedDestinationFeatures.length) {
@@ -814,24 +817,23 @@ $("#indicatorSelect").on("change", function() {
             layer.off("click", odClick);
             map.removeLayer(layer);
         }
-    });
 
-    // on select, update chart data
-    let amchart = am4core.registry.baseSprites.find(c => c.htmlContainer.id === "amchartdiv")
-    amchart.data = odData[option];
+        $("#odTableRow").addClass("align-self-center");
+        $("#odCard").show();
+        $("#tblViajes").hide();
+        $("#tblViajes tbody").html("");
 
+    });
 
+    // on select, update chart data
+    let odChart = am4core.registry.baseSprites.find(c => c.htmlContainer.id === "odChart")
+    odChart.data = odData[option];
 
-    let amchart2 = am4core.registry.baseSprites.find(c => c.htmlContainer.id === "prueba2")
-    amchart2.data = odData[option];
-    amchart2.data = amchart2.data.filter(function(e) { return e.flowCount > 0 });
+    let chordChart = am4core.registry.baseSprites.find(c => c.htmlContainer.id === "chordChart")
+    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 }))
 
-    /* let amchart1 = am4core.registry.baseSprites.find(c => c.htmlContainer.id === "prueba")
-    amchart1.data = odData[option];
-    amchart1.data = amchart1.data.filter(function(e) { return e.flowCount > 0 });*/
-
-
     styleTiles(option, minIndicators, maxIndicators)
         .then(legend.addTo(map)); // add legend control -> it updates
     // FIXME: re-adding control updates its contents... why?