changes on barPercent labels

public/js/centropais_periurbano_charts.js

@@ -10,13 +10,14 @@
 let mainTextColor = getComputedStyle(document.body).getPropertyValue("--main-text-color");
 //let cellbgColor = getComputedStyle(document.body).getPropertyValue("--main-bg-color");
 
-const makeStackedBarSeries = (chart, name, category, value, color) => {
+const makeStackedBarSeries = (chart, name, category, value, color, units="Ha") => {
     let series = chart.series.push(new am4charts.ColumnSeries());
     series.columns.template.width = am4core.percent(80);
     series.name = name;
+    series.units = units;
     series.dataFields.categoryX = category;
     series.dataFields.valueY = value;
-    series.columns.template.tooltipText ="{name}: {valueY.formatNumber('#,###.00')} Ha";
+    series.columns.template.tooltipText ="{name}: {valueY.formatNumber('#,###.00')} {units}";
     series.dataItems.template.locations.categoryX = 0.5;
     series.stacked = true;
     series.tooltip.pointerOrientation = "vertical";
@@ -73,7 +74,7 @@ am4core.ready(function() {
   d3.json(query).then(d => chart.data = d);
 */
     let stackedBarTitle = stackedBarChart.titles.create();
-    stackedBarTitle.text = "Grado de urbanización en la RU-CMCP (número de pixeles)";
+    stackedBarTitle.text = "Grado de urbanización en la RU-CMCP (millares de pixeles)";
     stackedBarTitle.fontSize = 15;
     stackedBarTitle.marginBottom = 10;
     stackedBarTitle.fill = am4core.color(mainTextColor);
@@ -81,39 +82,39 @@ am4core.ready(function() {
     stackedBarChart.data = [
         {
             category: "2015",
-            value1: 21750.100923,
-            value2: 3124.799027,
-            value3: 1575.434647
+            value1: 954,
+            value2: 145,
+            value3: 76
         },
         {
             category: "2016",
-            value1: 24659.53423,
-            value2: 3621.838793,
-            value3: 1939.124265
+            value1: 1084,
+            value2: 167,
+            value3: 94
         },
         {
             category: "2017",
-            value1: 27560.13116,
-            value2: 4177.560407,
-            value3: 2393.056475
+            value1: 1195,
+            value2: 191,
+            value3: 115
         },
         {
             category: "2018",
-            value1: 30374.679993,
-            value2: 4719.515675,
-            value3: 2854.437993
+            value1: 1304,
+            value2: 216,
+            value3: 140
         },
         {
             category: "2019",
-            value1: 32656.93783,
-            value2: 5188.035213,
-            value3: 3357.159708
+            value1: 1373,
+            value2: 230,
+            value3: 156
         },
         {
             category: "2020",
-            value1: 34305.410194,
-            value2: 5602.741586,
-            value3: 3789.051441
+            value1: 1418,
+            value2: 242,
+            value3: 170
         }
     ];
     stackedBarChart.legend = new am4charts.Legend();
@@ -135,9 +136,9 @@ am4core.ready(function() {
     stackedBarValueAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
     stackedBarValueAxis.renderer.labels.template.fontSize = 15;
 
-    makeStackedBarSeries(stackedBarChart, "Bajo", "category", "value1", "#61ac65");
-    makeStackedBarSeries(stackedBarChart, "Medio", "category", "value2", "#fcfccc");
-    makeStackedBarSeries(stackedBarChart, "Alto", "category", "value3", "#b33d6e");
+    makeStackedBarSeries(stackedBarChart, "Bajo", "category", "value1", "#61ac65", "Millares de pixeles");
+    makeStackedBarSeries(stackedBarChart, "Medio", "category", "value2", "#fcfccc", "Millares de pixeles");
+    makeStackedBarSeries(stackedBarChart, "Alto", "category", "value3", "#b33d6e", "Millares de pixeles");
 
     //++++++++++++++++++++++++++++++++++++++++++++ BARRAS CAFES Y LINEAS MORADAS APILADAS ++++++++++++++++++
     // FALTA CONSTRUIR QUERY
@@ -263,57 +264,57 @@ am4core.ready(function() {
     lineChart.data = [
         {
             category: "2015",
-            Tramo7: 3565.151797,
-            Tramo8: 4402.997137,
-            Tramo9: 2982.665968,
-            Tramo10: 1571.134834,
-            Tramo11: 3909.316004,
-            Tramo12: 657.480063
+            Tramo7: 35.65151797,
+            Tramo8: 44.02997137,
+            Tramo9: 29.82665968,
+            Tramo10: 15.71134834,
+            Tramo11: 39.09316004,
+            Tramo12: 6.57480063
         },
         {
             category: "2016",
-            Tramo7: 3929.417937,
-            Tramo8: 4779.702192,
-            Tramo9: 3477.272593,
-            Tramo10: 1880.688948,
-            Tramo11: 4687.034719,
-            Tramo12: 808.189062
+            Tramo7: 39.29417937,
+            Tramo8: 47.79702192,
+            Tramo9: 34.77272593,
+            Tramo10: 18.80688948,
+            Tramo11: 46.87034719,
+            Tramo12: 8.08189062
         },
         {
             category: "2017",
-            Tramo7: 4344.194901,
-            Tramo8: 5290.03468,
-            Tramo9: 4184.257241,
-            Tramo10:2168.042568,
-            Tramo11:5354.295853,
-            Tramo12:946.076199
+            Tramo7: 43.44194901,
+            Tramo8: 52.9003468,
+            Tramo9: 41.84257241,
+            Tramo10:21.68042568,
+            Tramo11:53.54295853,
+            Tramo12:9.46076199
         },
         {
             category: "2018",
-            Tramo7: 4712.061739,
-            Tramo8: 5798.574005,
-            Tramo9: 4904.355871,
-            Tramo10: 2463.225593,
-            Tramo11: 6065.936419,
-            Tramo12: 1077.998678
+            Tramo7: 47.12061739,
+            Tramo8: 57.98574005,
+            Tramo9: 49.04355871,
+            Tramo10: 24.63225593,
+            Tramo11: 60.65936419,
+            Tramo12: 10.77998678
         },
         {
             category: "2019",
-            Tramo7: 5004.426599,
-            Tramo8: 6112.824022,
-            Tramo9: 5397.632509,
-            Tramo10: 2775.836758,
-            Tramo11: 6783.400364,
-            Tramo12: 1238.459944
+            Tramo7:  50.04426599,
+            Tramo8:  61.12824022,
+            Tramo9:  53.97632509,
+            Tramo10: 27.75836758,
+            Tramo11: 67.83400364,
+            Tramo12: 12.38459944
         },
         {
             category: "2020",
-            Tramo7: 5364.43353,
-            Tramo8: 6427.625949,
-            Tramo9: 5722.221469,
-            Tramo10: 2972.499167,
-            Tramo11: 7299.502497,
-            Tramo12: 1338.796796
+            Tramo7:  53.6443353,
+            Tramo8:  64.27625949,
+            Tramo9:  57.22221469,
+            Tramo10: 29.72499167,
+            Tramo11: 72.99502497,
+            Tramo12: 13.38796796
         }
 
     ];
@@ -362,16 +363,22 @@ am4core.ready(function() {
     barPercentChartTitle.fill = am4core.color(mainTextColor);
 
     let table = "periurbanoBajio";
-    let query = `${baseUrl}/query/${table}?columns=region,total20/1000 as has,(total20-total15)*100/total15 as inc&filter=id>6&id<13&sort=inc desc`;
+    let query = `${baseUrl}/query/${table}?columns=substring(region,7) as region,total20/1000 as has,(total20-total15)*100/total15 as inc&filter=id>6&id<13&sort=inc desc`;
     d3.json(query).then(d => barPercentChart.data = d);
 
     /* Create axes */
     let barPercentCategoryAxis = barPercentChart.xAxes.push(new am4charts.CategoryAxis());
     barPercentCategoryAxis.dataFields.category = "region";
     // FIXME: axis labels are too big
+    let label = barPercentCategoryAxis.renderer.labels.template;
+    label.wrap = true;
+    label.maxWidth = 80;
+    barPercentCategoryAxis.renderer.labels.template.horizontalCenter = "right";
+    barPercentCategoryAxis.renderer.labels.template.verticalCenter = "middle";
+    barPercentCategoryAxis.renderer.labels.template.rotation = 270;
     barPercentCategoryAxis.renderer.minGridDistance = 30;
     barPercentCategoryAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
-    barPercentCategoryAxis.renderer.labels.template.fontSize = 15;
+    barPercentCategoryAxis.renderer.labels.template.fontSize = 11.5;//15;
 
     /* Create primary value axis */
     let barPercentValueAxis = barPercentChart.yAxes.push(new am4charts.ValueAxis());