Skip to content

F
fordecyt_2019
Commit 743e090f authored by Rodrigo Tapia-McClung's avatar Rodrigo Tapia-McClung
Browse files
Options

OD table placeholder, update layout, clean up code

parent adc64ce7
Hide whitespace changes
Inline Side-by-side
Showing with 48 additions and 63 deletions
public/centropais/index.html
View file @ 743e090f
......@@ -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
View file @ 743e090f
......@@ -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
View file @ 743e090f
......@@ -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
View file @ 743e090f
......@@ -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
View file @ 743e090f
......@@ -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?
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment