Fix id names on urbanization and chart formatting

public/centropais/index.html

@@ -75,6 +75,7 @@
                         <div class="col">
                             <div class="row h-100">
                                 <div id="odChart"></div>
+                                <div id="barChart"></div>
                             </div>
                         </div>
                     </div>
@@ -83,10 +84,12 @@
                         <div class="col-6 border-right">
                             <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">
+                                <div id="radarChart"></div>
                                 <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>

public/js/evolucion_urbana.js

@@ -368,9 +368,12 @@ L.timeDimension.layer.Tile = (layer, options) => {
 $("#startHeader").remove();
 $(".picker").remove();
 $("#initial-backdrop").remove();
-$("#mainContainer")[0].style.setProperty("display", "flex", "important")
+$("#mainContainer")[0].style.setProperty("display", "flex", "important");
 $("#mexmap").show();
 
+$("#odTableRow").removeClass("align-self-center");
+$("#odCard").hide();
+
 setupTimeDimensionControl();
 getMinMax("urbanization_year") // get minmax year.Q values to popoulate timeDimension
     .then(dates => setupMap(dates))

public/js/evolucion_urbana_charts.js

@@ -18,7 +18,9 @@ am4core.ready(function() {
 
     let mainTextColor = getComputedStyle(document.body).getPropertyValue('--main-text-color');
 
-    var chart = am4core.create("amchartdiv", am4charts.XYChart);
+    // bar and line chart
+
+    var chart = am4core.create("barChart", am4charts.XYChart);
 
     let ctitle = chart.titles.create();
     ctitle.text = "Área urbanizada mensual";
@@ -34,13 +36,11 @@ am4core.ready(function() {
     //d3.json(query).then(d => pchart.data = d);
     // d3.json(query).then(d => console.log(d));
 
-
     // Create axes
     let xAxis = chart.xAxes.push(new am4charts.DateAxis()); //chart.xAxes.push(new am4charts.DateAxis());
     xAxis.baseInterval = { timeUnit: "month", count: 1 };
     xAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
-    xAxis.numberFormatter.numberFormat = "#,###.#";
-
+    xAxis.renderer.labels.template.fontSize = 15;
 
     let valueAxis1 = chart.yAxes.push(new am4charts.ValueAxis());
     valueAxis1.title.text = "Área urbanizada (Ha)";
@@ -49,6 +49,11 @@ am4core.ready(function() {
     valueAxis1.max = valueAxis1.maxZoomed;
     valueAxis1.title.fill = am4core.color(mainTextColor);
     valueAxis1.renderer.labels.template.fill = am4core.color(mainTextColor);
+    valueAxis1.fontSize = 15;
+    valueAxis1.renderer.labels.template.fontSize = 15;
+
+    valueAxis1.numberFormatter = new am4core.NumberFormatter();
+    valueAxis1.numberFormatter.numberFormat = "#,###";
 
 
     /* let valueAxis2 = chart.yAxes.push(new am4charts.ValueAxis());
@@ -61,26 +66,27 @@ am4core.ready(function() {
      valueAxis2.title.fill = am4core.color(mainTextColor);
      valueAxis2.renderer.labels.template.fill = am4core.color(mainTextColor);*/
 
-
     let valueAxis3 = chart.yAxes.push(new am4charts.ValueAxis());
-    valueAxis3.title.text = "Cambio Porcentual"; //"Market Days";
+    valueAxis3.title.text = "Cambio Porcentual (%)"; //"Market Days";
     valueAxis3.renderer.opposite = true;
     valueAxis3.numberFormatter.numberFormat = "#.#";
     valueAxis3.renderer.labels.template.fill = am4core.color("#b9ce37");
     valueAxis3.title.fill = am4core.color("#b9ce37");
     valueAxis3.min = -300;
     valueAxis3.syncWithAxis = valueAxis1;
-    //valueAxis3.syncWithAxis = valueAxis1;
+    valueAxis3.fontSize = 15;
+    valueAxis3.renderer.labels.template.fontSize = 15;
 
+    valueAxis3.numberFormatter = new am4core.NumberFormatter();
+    valueAxis3.numberFormatter.numberFormat = "#,###";
 
+    //valueAxis3.syncWithAxis = valueAxis1;
 
     // Create series
-
     let series1 = chart.series.push(new am4charts.ColumnSeries());
     series1.dataFields.dateX = "date";
     series1.dataFields.valueY = "area";
     series1.name = "Área urbanizada";
-    //
     series1.yAxes = valueAxis1;
     //series1.tooltipText = "{name}\n{dateX}:\n[bold font-size: 20] {valueY}"; //"{name}\n[bold font-size: 20]{valueY}"; //M[/]";
     // series1.tooltipText = "[bold font-size: 20]{name}\n[bold font-size: 20] {valueY.formatNumber('#,###.#')} Ha";
@@ -98,7 +104,6 @@ am4core.ready(function() {
     series2.columns.template.width = am4core.percent(40);
     series2.clustered = false;*/
 
-
     let series3 = chart.series.push(new am4charts.LineSeries());
     series3.dataFields.valueY = "area";
     series3.dataFields.valueYShow = "previousChangePercent";
@@ -110,7 +115,8 @@ am4core.ready(function() {
     series3.stroke = am4core.color("#b9ce37");
     series3.strokeDasharray = "3,3";
     series3.yAxis = valueAxis3;
-    series3.tooltipText = "[bold font-size: 10]{dateX}:\n[font-size: 10]Área urbanizada: {valueY} Ha[/]\n[font-size: 10]Cambio: {valueY.previousChange} Ha[/]\n[font-size: 10]{name}: {valueY.previousChangePercent}\%[/]\n";
+    series3.tooltip.label.fontSize = 15;
+    series3.tooltipText = "[bold]Q{dateX.formatDate('q yyyy')}:[/]\nÁrea urbanizada: {valueY.formatNumber('#,###.##')} Ha\nCambio: {valueY.previousChange.formatNumber('#,###.##')} Ha\n{name}: {valueY.previousChangePercent.formatNumber('#,###.##')}\%";
     series3.tooltip.getFillFromObject = false;
     series3.tooltip.background.fill = am4core.color(mainTextColor);
 
@@ -120,6 +126,8 @@ am4core.ready(function() {
     //Add legend
     chart.legend = new am4charts.Legend();
     chart.legend.position = "top";
+    chart.legend.fontSize = 15;
+    chart.legend.labels.template.fill = am4core.color(mainTextColor);
 
     //Add scrollbar
     // chart.legend.labels.template.fill = am4core.color(mainTextColor);
@@ -130,15 +138,16 @@ am4core.ready(function() {
     //chart.scrollbarX.series.push(series3);
     chart.scrollbarX.parent = chart.bottomAxesContainer;
 
-    //==================================================================================================================================== PIE CHART
-    let pchart = am4core.create("prueba", am4charts.PieChart);
+    // pie chart
+
+    let pchart = am4core.create("pieChart", am4charts.PieChart);
 
     let query2 = `${baseUrl}/query/${table}?columns=sum(area) as area,DATE_PART('year',date) as yy&group=yy&sort=yy`; // &sort=yeartrimes`;
     d3.json(query2).then(d => pchart.data = d);
 
     let ptitle = pchart.titles.create();
     ptitle.text = "Área urbanizada anualmente";
-    ptitle.fontSize = 20;
+    ptitle.fontSize = 15;
     ptitle.marginTop = 30;
     ptitle.fill = am4core.color(mainTextColor);
 
@@ -148,7 +157,7 @@ am4core.ready(function() {
     pchart.legend.position = "right";
     pchart.legend.labels.template.fill = am4core.color(mainTextColor);
     pchart.legend.valueLabels.template.fill = am4core.color(mainTextColor);
-
+    pchart.legend.fontSize = 15;
 
     // Add and configure Series
     let pieSeries = pchart.series.push(new am4charts.PieSeries());
@@ -169,19 +178,19 @@ am4core.ready(function() {
     pieSeries.slices.template.stroke = am4core.color("#ffffff");
     pieSeries.slices.template.strokeWidth = 3;
     pieSeries.slices.template.strokeOpacity = .20;
+    pieSeries.slices.template.tooltipText = "[bold]{category}:[/] {value.percent.formatNumber('#.#')}% ({value.value.formatNumber('#,###.##')} Ha)";
     pieSeries.numberFormatter.numberFormat = "####.#";
     pieSeries.labels.template.fill = am4core.color(mainTextColor);
+    pieSeries.labels.template.fontSize = 15;
     pieSeries.labels.template.text = "{category}";
 
-
-
-    //==================================================================================================================================== RADAR CHART
+    // radar chart
 
     // Themes begin
     am4core.useTheme(am4themes_animated);
     // Themes end
 
-    var rchart = am4core.create("prueba2", am4charts.RadarChart);
+    var rchart = am4core.create("radarChart", am4charts.RadarChart);
     // chart.hiddenState.properties.opacity = 0; // this creates initial fade-in
 
     //const baseUrl = new URL(`/data`, window.location.href).href;
@@ -200,7 +209,7 @@ am4core.ready(function() {
     rchart.innerRadius = am4core.percent(15);
     rchart.radius = am4core.percent(90);
     //chart.data = weeklyData;
-    rchart.fontSize = "11px";
+    rchart.fontSize = 12;
     rchart.startAngle = 180;
     rchart.endAngle = rchart.startAngle + 180;
 
@@ -214,14 +223,13 @@ am4core.ready(function() {
     dateAxis.renderer.labels.template.relativeRotation = 0;
     dateAxis.renderer.labels.template.location = 0.5;
     dateAxis.renderer.labels.template.radius = am4core.percent(-57);
-    dateAxis.renderer.labels.template.fontSize = "8px";
+    dateAxis.renderer.labels.template.fontSize = 12;
     dateAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
     // dateAxis.dateFormats.setKey("month", "MMM");
     // dateAxis.periodChangeDateFormats.setKey("month", "MMM");
     dateAxis.cursorTooltipEnabled = false;
     //  dateAxis.calculateTotals = true;
 
-
     var valueAxis = rchart.yAxes.push(new am4charts.ValueAxis());
     valueAxis.renderer.inversed = true;
     valueAxis.renderer.radius = am4core.percent(40);
@@ -244,10 +252,10 @@ am4core.ready(function() {
     columnSeries.columns.template.width = am4core.percent(95);
     columnSeries.fill = am4core.color("#80acba");
     columnSeries.fillOpacity = 0.6;
-    columnSeries.tooltip.fontSize = 10;
+    columnSeries.tooltip.fontSize = 15;
     columnSeries.tooltip.pointerOrientation = "down";
     columnSeries.tooltip.background.fillOpacity = 0.5;
-    columnSeries.columns.template.tooltipText = "[bold]{qq}\n[font-size:13px]Total {valueY.formatNumber('#,###.0')} Ha";
+    columnSeries.columns.template.tooltipText = "[bold]{qq}[/]\nTotal {valueY.formatNumber('#,###.##')} Ha";
     columnSeries.cursorTooltipEnabled = false;
     //columnSeries.yAxis = dateAxis;
 
@@ -282,6 +290,9 @@ am4core.ready(function() {
     yearsAxis.cursorTooltipEnabled = false;
     yearsAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
 
+    yearsAxis.numberFormatter = new am4core.NumberFormatter();
+    yearsAxis.numberFormatter.numberFormat = "####";
+
     // bubble series
     //var bubbleSeries = chart.series.push(new am4charts.RadarSeries());
     bubbleSeries.dataFields.categoryX = "qq";
@@ -292,7 +303,7 @@ am4core.ready(function() {
     bubbleSeries.strokeOpacity = 0;
     bubbleSeries.maskBullets = false;
     bubbleSeries.cursorTooltipEnabled = false;
-    bubbleSeries.tooltip.fontSize = 10;
+    bubbleSeries.tooltip.fontSize = 15;
     bubbleSeries.tooltip.pointerOrientation = "down";
     bubbleSeries.tooltip.background.fillOpacity = 0.5;
     bubbleSeries.dataItems.template.locations.categoryX = 0.5;
@@ -301,7 +312,7 @@ am4core.ready(function() {
     bubbleBullet.locationX = 0.5;
     bubbleBullet.stroke = am4core.color("#b9ce37");
     bubbleBullet.fill = am4core.color("#b9ce37");
-    bubbleBullet.tooltipText = "[bold]{date.formatDate('yyyy-MMM')}: \n{value.formatNumber('#,###.0')} Ha";
+    bubbleBullet.tooltipText = "[bold]Q{date.formatDate('q yyyy')}:[/] \n{value.formatNumber('#,###.0')} Ha";
     bubbleBullet.adapter.add("tooltipY", function(tooltipY, target) {
         return -target.circle.radius;
     })
@@ -309,25 +320,22 @@ am4core.ready(function() {
     bubbleSeries.heatRules.push({ target: bubbleBullet.circle, min: 2, max: 12, dataField: "value", property: "radius" });
     bubbleSeries.dataItems.template.locations.categoryY = 0.5;
 
-
-
     // TITULOS MISCELANEOS
     rchart.cursor = new am4charts.RadarCursor();
     rchart.cursor.innerRadius = am4core.percent(40);
     rchart.cursor.lineY.disabled = true;
 
-
     var label = rchart.radarContainer.createChild(am4core.Label);
     label.horizontalCenter = "middle";
     label.verticalCenter = "middle";
     label.fill = am4core.color(mainTextColor);
-    label.fontSize = 12;
+    label.fontSize = 13;
     //label.fontWeight = "bold";
     label.text = "TOTAL\nTRIMESTRAL";
 
     var title = rchart.createChild(am4core.Label);
     title.fill = am4core.color("#b9ce37");
-    title.fontSize = 20;
+    title.fontSize = 15;
     title.isMeasured = false;
     title.valign = "top";
     title.align = "left";
@@ -335,6 +343,4 @@ am4core.ready(function() {
     title.width = 200;
     title.text = "[bold]Área urbanizada entre 2014 y 2019.\n[font-size:11; #ffffff] Cada círculo representa el tamaño del área urbanizada.";
 
-
-
 }); // end am4core.ready()
\ No newline at end of file