/*
 * Copyright 2021 - All rights reserved.
 * Rodrigo Tapia-McClung
 *
 * March 2021
 */

/* globals am4core, am4charts, am4themes_animated, baseUrl */

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, 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;
    // format tooltip depending on units
    units == "Ha" ? series.columns.template.tooltipText = "{name}: {valueY.formatNumber('#,###.00')} {units}" :
        series.columns.template.tooltipText = "{name}: {valueY.formatNumber('#,###')} {units}";
    series.dataItems.template.locations.categoryX = 0.5;
    series.stacked = true;
    series.tooltip.pointerOrientation = "vertical";
    series.fill = am4core.color(color);
    series.stroke = am4core.color(color);
}

const makeLineSeries = (chart, name, value, percent, category, yAxis, color) => {
    let series = chart.series.push(new am4charts.LineSeries());
    series.name = name;//"San Juan del río - Querétaro";
    series.dataFields.valueY = value;
    series.dataFields.categoryX = category;
    if (percent) {
        series.dataFields.valueYShow = "totalPercent";
        series.stacked = true;
        series.calculatePercent = true;
    }
    // FIXME: using totalPercent changes values when turning series on or off
    series.yAxis = yAxis;
    series.stroke = am4core.color(color);
    series.strokeWidth = 3;
    series.propertyFields.strokeDasharray = "lineDash";
    series.tooltip.label.textAlign = "middle";

    let bullet = series.bullets.push(new am4charts.Bullet());
    bullet.fill = am4core.color(color); // tooltips grab fill from parent by default
    if (percent) {
        bullet.tooltipText = "[#fff font-size: 15px]{name} en {categoryX}:\n[/][#fff font-size: 15px]{valueY.totalPercent.formatNumber('#.00')} %[/] [#fff][/]";
    } else {
        bullet.tooltipText = "[#fff font-size: 15px]{name} en {categoryX}:\n[/][#fff font-size: 15px]{valueY.formatNumber('#.00')} millares de Ha[/] [#fff][/]";
    }

    //bullet.tooltipText = "[#fff font-size: 15px]{name} en {categoryX}:\n[/][#fff font-size: 15px]{valueY.totalPercent.formatNumber('#.00')} %[/] [#fff][/]";
    // FIXME: using totalPercent changes values when turning series on or off`

    let circle = bullet.createChild(am4core.Circle);
    circle.radius = 4;
    circle.fill = am4core.color("#fff");
    circle.strokeWidth = 3;
}

am4core.ready(function() {

    // Themes begin
    am4core.useTheme(am4themes_animated);
    // Themes end

    //++++++++++++++++++++++++++++++++++++++++++++++++++++++BARRAS SEMAFORO++
    /*
    FALTA VER DE QUÉ TABLA VIENEN ESTOS DATOS Y ELEGIR LA VERSION EN PIXELES
    Y CONSTRUIR EL QUERY
    */

    let stackedBarChart = am4core.create("topLeftChart", am4charts.XYChart);
    stackedBarChart.hiddenState.properties.opacity = 0; // this creates initial fade-in

    /*
  let table = "periurbanoBajio";
  let query = `${baseUrl}/query/${table}?columns=region,total15/1000 as T15,total16/1000 as T16,total17/1000 as T17,total18/1000 as T18,total19/1000 as T19,total20/1000 as T20,&filter=id=6`;
  d3.json(query).then(d => chart.data = d);
*/
    let stackedBarTitle = stackedBarChart.titles.create();
    stackedBarTitle.text = "Grado de urbanización en la RU-CMCP (pixeles)";
    stackedBarTitle.fontSize = 15;
    stackedBarTitle.marginBottom = 10;
    stackedBarTitle.fill = am4core.color(mainTextColor);

    stackedBarChart.data = [
        {
            category: "2015",
            bajo: 958343,
            medio: 145076,
            alto: 76317
        },
        {
            category: "2016",
            bajo: 1090132,
            medio: 167451,
            alto: 94094
        },
        {
            category: "2017",
            bajo: 1202563,
            medio: 191489,
            alto: 114686
        },
        {
            category: "2018",
            bajo: 1309015,
            medio: 214078,
            alto: 135958
        },
        {
            category: "2019",
            bajo: 1382721,
            medio: 230523,
            alto: 156668
        },
        {
            category: "2020",
            bajo: 1433701,
            medio: 245636,
            alto: 174002
        }
    ];
    stackedBarChart.legend = new am4charts.Legend();
    stackedBarChart.legend.fontSize = 15;
    stackedBarChart.legend.labels.template.fill = am4core.color(mainTextColor);

    let stackedBarCategoryAxis = stackedBarChart.xAxes.push(new am4charts.CategoryAxis());
    stackedBarCategoryAxis.dataFields.category = "category";
    stackedBarCategoryAxis.renderer.grid.template.location = 0;
    stackedBarCategoryAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
    stackedBarCategoryAxis.renderer.labels.template.fontSize = 15;

    let stackedBarValueAxis = stackedBarChart.yAxes.push(new am4charts.ValueAxis());
    stackedBarValueAxis.min = 0;
    //valueAxis.max = 100;
    stackedBarValueAxis.strictMinMax = true;
    stackedBarValueAxis.calculateTotals = true;
    stackedBarValueAxis.renderer.minWidth = 50;
    stackedBarValueAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
    stackedBarValueAxis.renderer.labels.template.fontSize = 15;

    makeStackedBarSeries(stackedBarChart, "Bajo", "category", "bajo", "#61ac65", "pixeles");
    makeStackedBarSeries(stackedBarChart, "Medio", "category", "medio", "#fcfccc", "pixeles");
    makeStackedBarSeries(stackedBarChart, "Alto", "category", "alto", "#b33d6e", "pixeles");

    //++++++++++++++++++++++++++++++++++++++++++++ BARRAS CAFES Y LINEAS MORADAS APILADAS ++++++++++++++++++
    // FALTA CONSTRUIR QUERY

    let stackedBarLineChart = am4core.create("topRightChart", am4charts.XYChart);
    stackedBarLineChart.hiddenState.properties.opacity = 0; // this creates initial fade-in

    /*
  let table = "periurbanoBajio";
  let query = `${baseUrl}/query/${table}?columns=region,grbajo15/1000 as b15,grmedio15/1000 as b16,gralto15/1000 as a15 .... &filter=id=6`;
  d3.json(query).then(d => chart.data = d);
*/
    let stackedBarLineTitle = stackedBarLineChart.titles.create();
    stackedBarLineTitle.text = "Evolución del grado de urbanización en el periurbano del \n Corredor del Bajío en extensión y proporción";
    stackedBarLineTitle.fontSize = 15;
    stackedBarLineTitle.marginBottom = 10;
    stackedBarLineTitle.fill = am4core.color(mainTextColor);

    stackedBarLineChart.data = [
        {
            category: "2015",
            bajo: 21750.100923,
            medio: 3124.799027,
            alto: 1575.434647
        },
        {
            category: "2016",
            bajo: 24659.53423,
            medio: 3621.838793,
            alto: 1939.124265
        },
        {
            category: "2017",
            bajo: 27560.13116,
            medio: 4177.560407,
            alto: 2393.056475
        },
        {
            category: "2018",
            bajo: 30374.679993,
            medio: 4719.515675,
            alto: 2854.437993
        },
        {
            category: "2019",
            bajo: 32656.93783,
            medio: 5188.035213,
            alto: 3357.159708
        },
        {
            category: "2020",
            bajo: 34305.410194,
            medio: 5602.741586,
            alto: 3789.051441
        }
    ];

    stackedBarLineChart.legend = new am4charts.Legend();
    stackedBarLineChart.legend.fontSize = 15;
    stackedBarLineChart.legend.labels.template.fill = am4core.color(mainTextColor);

    let stackedBarLineCategoryAxis = stackedBarLineChart.xAxes.push(new am4charts.CategoryAxis());
    stackedBarLineCategoryAxis.dataFields.category = "category";
    stackedBarLineCategoryAxis.renderer.grid.template.location = 0;
    stackedBarLineCategoryAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
    stackedBarLineCategoryAxis.renderer.labels.template.fontSize = 15;

    let stackedBarLineValueAxis = stackedBarLineChart.yAxes.push(new am4charts.ValueAxis());
    stackedBarLineValueAxis.min = 0;
    //stackedBarLineValueAxis.max = 100;
    stackedBarLineValueAxis.strictMinMax = true;
    stackedBarLineValueAxis.calculateTotals = true;
    stackedBarLineValueAxis.renderer.minWidth = 50;
    stackedBarLineValueAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
    stackedBarLineValueAxis.renderer.labels.template.fontSize = 15;

    /* Create secondary value axis */
    let stackedBarLinePercentAxis = stackedBarLineChart.yAxes.push(new am4charts.ValueAxis());
    stackedBarLinePercentAxis.renderer.opposite = true;
    stackedBarLinePercentAxis.calculateTotals = true;
    stackedBarLinePercentAxis.min = 50;
    stackedBarLinePercentAxis.max = 110;
    stackedBarLinePercentAxis.strictMinMax = true;
    stackedBarLinePercentAxis.renderer.grid.template.disabled = true;
    stackedBarLinePercentAxis.numberFormatter = new am4core.NumberFormatter();
    stackedBarLinePercentAxis.numberFormatter.numberFormat = "#'%'";
    stackedBarLinePercentAxis.cursorTooltipEnabled = false;
    stackedBarLinePercentAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
    stackedBarLinePercentAxis.renderer.labels.template.fontSize = 15;

    makeStackedBarSeries(stackedBarLineChart, "Bajo", "category", "bajo", "#f8caa0");
    makeStackedBarSeries(stackedBarLineChart, "Medio", "category", "medio", "#cf8a4f");
    makeStackedBarSeries(stackedBarLineChart, "Alto", "category", "alto", "#93592a");

    makeLineSeries(stackedBarLineChart, "% Bajo", "bajo", true, "category", stackedBarLinePercentAxis, "#D197FA");
    makeLineSeries(stackedBarLineChart, "% Medio", "medio", true, "category", stackedBarLinePercentAxis, "#844DDF");
    makeLineSeries(stackedBarLineChart, "% Alto", "alto", true, "category", stackedBarLinePercentAxis, "#351591");

    // Use this to avoid turning on or off legend items.
    // Remove if use of percentTotal is fixed in series
    stackedBarLineChart.legend.itemContainers.template.clickable = false;
    stackedBarLineChart.legend.itemContainers.template.focusable = false;
    stackedBarLineChart.legend.itemContainers.template.cursorOverStyle = am4core.MouseCursorStyle.default;
    stackedBarLineChart.legend.maxColumns = 3;

    //++++++++++++++++++++++++++++++++++++++++++++ HISTORICO POR TRAMOS ++++++++++++++++++

    let lineChart = am4core.create("bottomLeftChart", am4charts.XYChart);
    lineChart.hiddenState.properties.opacity = 0; // this creates initial fade-in

    /*
  let table = "periurbanoBajio";
  let query = `${baseUrl}/query/${table}?columns=region,total15/1000 as T15,total16/1000 as T16,total17/1000 as T17,total18/1000 as T18,total19/1000 as T19,total20/1000 as T20,&filter=id>6&id<13&sort=inc desc`;
  d3.json(query).then(d => chart.data = d);
*/

    let lineTitle = lineChart.titles.create();
    lineTitle.text = "Crecimiento del medio construido en 6 tramos del Corredor del Bajío";
    lineTitle.fontSize = 14;
    lineTitle.marginBottom = 15;
    lineTitle.fill = am4core.color(mainTextColor);

    lineChart.data = [
        {
            category: "2015",
            Tramo7:  3.565151797,
            Tramo8:  4.402997137,
            Tramo9:  2.982665968,
            Tramo10: 1.571134834,
            Tramo11: 3.909316004,
            Tramo12: 0.657480063
        },
        {
            category: "2016",
            Tramo7:  3.929417937,
            Tramo8:  4.779702192,
            Tramo9:  3.477272593,
            Tramo10: 1.880688948,
            Tramo11: 4.687034719,
            Tramo12: 0.808189062
        },
        {
            category: "2017",
            Tramo7:  4.344194901,
            Tramo8:  5.29003468,
            Tramo9:  4.184257241,
            Tramo10: 2.168042568,
            Tramo11: 5.354295853,
            Tramo12: 0.946076199
        },
        {
            category: "2018",
            Tramo7:  4.712061739,
            Tramo8:  5.798574005,
            Tramo9:  4.904355871,
            Tramo10: 2.463225593,
            Tramo11: 6.065936419,
            Tramo12: 1.077998678
        },
        {
            category: "2019",
            Tramo7:  5.004426599,
            Tramo8:  6.112824022,
            Tramo9:  5.397632509,
            Tramo10: 2.775836758,
            Tramo11: 6.783400364,
            Tramo12: 1.238459944
        },
        {
            category: "2020",
            Tramo7:  5.36443353,
            Tramo8:  6.427625949,
            Tramo9:  5.722221469,
            Tramo10: 2.972499167,
            Tramo11: 7.299502497,
            Tramo12: 1.338796796
        }

    ];

    lineChart.legend = new am4charts.Legend();
    lineChart.legend.fontSize = 15;
    lineChart.legend.labels.template.fill = am4core.color(mainTextColor);

    let lineChartCategoryAxis = lineChart.xAxes.push(new am4charts.CategoryAxis());
    lineChartCategoryAxis.dataFields.category = "category";
    lineChartCategoryAxis.renderer.grid.template.location = 0;
    lineChartCategoryAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
    lineChartCategoryAxis.renderer.labels.template.fontSize = 15;

    let lineChartValueAxis = lineChart.yAxes.push(new am4charts.ValueAxis());
    lineChartValueAxis.min = 0;
    //lineChartValueAxis.max = 100;
    //lineChartValueAxis.strictMinMax = true;
    lineChartValueAxis.calculateTotals = true;
    lineChartValueAxis.renderer.minWidth = 50;
    lineChartValueAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
    lineChartValueAxis.renderer.labels.template.fontSize = 15;

    makeLineSeries(lineChart, "T7", "Tramo7",  false, "category", lineChartValueAxis, "#fddfb9");
    makeLineSeries(lineChart, "T8", "Tramo8",  false, "category", lineChartValueAxis, "#fb9a99");
    makeLineSeries(lineChart, "T9", "Tramo9",  false, "category", lineChartValueAxis, "#33a09b");
    makeLineSeries(lineChart, "T10", "Tramo10",false, "category", lineChartValueAxis, "#de6eb4");
    makeLineSeries(lineChart, "T11", "Tramo11",false, "category", lineChartValueAxis, "#4db0ec");
    makeLineSeries(lineChart, "T12", "Tramo12",false, "category", lineChartValueAxis, "#2be829");

    // Use this to avoid turning on or off legend items.
    // Remove if use of percentTotal is fixed in series
    lineChart.legend.itemContainers.template.clickable = false;
    lineChart.legend.itemContainers.template.focusable = false;
    lineChart.legend.itemContainers.template.cursorOverStyle = am4core.MouseCursorStyle.default;
    lineChart.legend.maxColumns = 3;


    // Create bar + percentage chart
    let barPercentChart = am4core.create("bottomRightChart", am4charts.XYChart);

    let barPercentChartTitle = barPercentChart.titles.create();
    barPercentChartTitle.text = "Cobertura del medio construido en los tramos del Corredor del Bajío";
    barPercentChartTitle.fontSize = 14;
    barPercentChartTitle.marginBottom = 15;
    barPercentChartTitle.fill = am4core.color(mainTextColor);

    let table = "periurbanoBajio";
    // query substr of region labels so they do not include "Tramo"
    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";
    // set wrap labels and set max length
    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 = 11.5;//15;

    /* Create primary value axis */
    let barPercentValueAxis = barPercentChart.yAxes.push(new am4charts.ValueAxis());
    barPercentValueAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
    barPercentValueAxis.renderer.labels.template.fontSize = 15;

    /* Create secondary value axis */
    let barPercentAxis = barPercentChart.yAxes.push(new am4charts.ValueAxis());
    barPercentAxis.renderer.opposite = true;
    barPercentAxis.min = 0;
    barPercentAxis.max = 110;
    barPercentAxis.strictMinMax = true;
    barPercentAxis.renderer.grid.template.disabled = true;
    barPercentAxis.numberFormatter = new am4core.NumberFormatter();
    barPercentAxis.numberFormatter.numberFormat = "#'%'";
    barPercentAxis.cursorTooltipEnabled = false;
    barPercentAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
    barPercentAxis.renderer.labels.template.fontSize = 15;

    /* Create series */
    let barPercentColumnSeries = barPercentChart.series.push(new am4charts.ColumnSeries());
    barPercentColumnSeries.name = "Medio construido en 2020";
    barPercentColumnSeries.dataFields.valueY = "has";
    barPercentColumnSeries.dataFields.categoryX = "region";

    barPercentColumnSeries.columns.template.tooltipText = "[#fff font-size: 15px]{name} \n en {categoryX}:\n[/][#fff font-size: 15px]{valueY.formatNumber('#.00')} millares de Ha[/] [#fff]{additional}[/]";
    barPercentColumnSeries.columns.template.propertyFields.fillOpacity = "fillOpacity";
    barPercentColumnSeries.columns.template.propertyFields.stroke = "stroke";
    barPercentColumnSeries.columns.template.propertyFields.strokeWidth = "strokeWidth";
    barPercentColumnSeries.columns.template.propertyFields.strokeDasharray = "columnDash";
    barPercentColumnSeries.tooltip.label.textAlign = "middle";
    barPercentColumnSeries.fill = am4core.color("#fca311");
    barPercentColumnSeries.stroke = am4core.color("#fca311");

    let barPercentLineSeries = barPercentChart.series.push(new am4charts.LineSeries());
    barPercentLineSeries.name = "% de crecimiento del medio construido 2015-2020";
    barPercentLineSeries.dataFields.valueY = "inc";
    barPercentLineSeries.dataFields.categoryX = "region";
    barPercentLineSeries.yAxis = barPercentAxis;

    barPercentLineSeries.stroke = am4core.color("#c41e3a");
    barPercentLineSeries.strokeWidth = 3;
    barPercentLineSeries.propertyFields.strokeDasharray = "lineDash";
    barPercentLineSeries.tooltip.label.textAlign = "middle";

    let barPercentBullet = barPercentLineSeries.bullets.push(new am4charts.Bullet());
    barPercentBullet.fill = am4core.color("#c41e3a"); // tooltips grab fill from parent by default
    barPercentBullet.tooltipText = "[#fff font-size: 15px]{name}\n en {categoryX}:\n[/][#fff font-size: 20px]{valueY.formatNumber('#.00')} %[/] [#fff]{additional}[/]";

    let barPercentCircle = barPercentBullet.createChild(am4core.Circle);
    barPercentCircle.radius = 4;
    barPercentCircle.fill = am4core.color("#fff");
    barPercentCircle.strokeWidth = 3;

}); // end am4core.ready()

//________________________________________________________________________________
/*
am4core.ready(function() {

  // Themes begin
  am4core.useTheme(am4themes_animated);
  // Themes end

  var chart = am4core.create("topLeftChart", am4charts.XYChart);
  chart.hiddenState.properties.opacity = 0; // this creates initial fade-in

  chart.maskBullets = false;

  var xAxis = chart.xAxes.push(new am4charts.CategoryAxis());
  var yAxis = chart.yAxes.push(new am4charts.CategoryAxis());

  xAxis.dataFields.category = "x";
  yAxis.dataFields.category = "y";

  xAxis.renderer.grid.template.disabled = true;
  xAxis.renderer.minGridDistance = 40;
  xAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
  xAxis.renderer.labels.template.fontSize = 10;

  yAxis.renderer.grid.template.disabled = true;
  yAxis.renderer.inversed = true;
  yAxis.renderer.minGridDistance = 30;
  yAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
  yAxis.renderer.labels.template.fontSize = 10;


  var series = chart.series.push(new am4charts.ColumnSeries());
  series.dataFields.categoryX = "x";
  series.dataFields.categoryY = "y";
  series.dataFields.value = "value";
  series.sequencedInterpolation = true;
  series.defaultState.transitionDuration = 3000;
  series.fill = am4core.color("#000");
  series.fillOpacity =0;

  // Set up column appearance
  var column = series.columns.template;
  column.strokeWidth = 2;
  column.strokeOpacity = 1;
  column.stroke = am4core.color("#ffffff");
  column.strokeWidth = 0.1;
  //column.tooltipText = "{x}, {y}: {value.workingValue.formatNumber('#.')}";
  column.width = am4core.percent(100);
  column.height = am4core.percent(100);
  column.column.cornerRadius(6, 6, 6, 6);
  column.propertyFields.fill = am4core.color("#000000")//"color";

  // Set up bullet appearance
  var bullet1 = series.bullets.push(new am4charts.CircleBullet());
  bullet1.tooltipText = "{region}: {value.workingValue.formatNumber('#.')} Ha";
  //bullet1.circle.propertyFields.radius = "value";
  //bullet1.circle.fill = am4core.color("#000");
  bullet1.propertyFields.fill = "color";
  bullet1.propertyFields.stroke = "color";
  bullet1.circle.strokeWidth = 0.1;
  bullet1.circle.stroke = "color";
  bullet1.circle.fillOpacity = 1;
  //bullet1.interactionsEnabled = false;
  bullet1.interactionsEnabled = true;

  /*
  var bullet2 = series.bullets.push(new am4charts.LabelBullet());
  bullet2.label.text = "{value.formatNumber('#.')}";
  bullet2.label.fill = am4core.color("#fff");
  bullet2.zIndex = 1;
  bullet2.fontSize = 9;
  bullet2.interactionsEnabled = false;*/

/*
  // define colors
  var colors = {
      //"critical": "#ca0101",
      "ags": "#e17a2d",
      "slp": "#e1d92d",
      "rvd": "#5dbe24"
      //"verygood": "#0b7d03"
  };

  chart.data = [

    {
      "x": "Bajo",
      "y": "2015",
      "region": "Aguascalientes",
      "color": colors.ags,
      "value": 2173.95
  },
  {
      "x": "Medio",
      "y": "2015",
      "region": "Aguascalientes",
      "color": colors.ags,
      "value": 603.18
  }, {
      "x": "Alto",
      "y": "2015",
      "region": "Aguascalientes",
      "color": colors.ags,
      "value": 494.67
  },
  {
    "x": "Bajo",
    "y": "2015",
    "region": "San Luis Potosí",
    "color": colors.slp,
    "value": 2117.60
}, {
    "x": "Medio",
    "y": "2015",
    "region": "San Luis Potosí",
    "color": colors.slp,
    "value": 307.51
}, {
    "x": "Alto",
    "y": "2015",
    "region": "San Luis Potosí",
    "color": colors.slp,
    "value": 173.51
},
{
  "x": "Bajo",
  "y": "2015",
  "region": "Río Verde",
  "color": colors.rvd,
  "value": 116.94
}, {
  "x": "Medio",
  "y": "2015",
  "region": "Río Verde",
  "color": colors.rvd,
  "value": 11.07
}, {
  "x": "Alto",
  "y": "2015",
  "region": "Río Verde",
  "color": colors.rvd,
  "value": 2.81
},
{
  "x": "Bajo",
  "y": "2016",
  "region": "San Luis Potosí",
  "color": colors.slp,
  "value": 2587.61
},
{
  "x": "Bajo",
  "y": "2016",
  "region": "Aguascalientes",
  "color": colors.ags,
  "value": 2443.30
},
{
  "x": "Medio",
  "y": "2016",
  "region": "Aguascalientes",
  "color": colors.ags,
  "value": 701.91
}, {
  "x": "Alto",
  "y": "2016",
  "region": "Aguascalientes",
  "color": colors.ags,
  "value": 626.42
},
 {
  "x": "Medio",
  "y": "2016",
  "region": "San Luis Potosí",
  "color": colors.slp,
  "value": 380.08
}, {
  "x": "Alto",
  "y": "2016",
  "region": "San Luis Potosí",
  "color": colors.slp,
  "value": 233.55
},
{
  "x": "Bajo",
  "y": "2016",
  "region": "Río Verde",
  "color": colors.rvd,
  "value": 157.86
}, {
  "x": "Medio",
  "y": "2016",
  "region": "Río Verde",
  "color": colors.rvd,
  "value": 13.73
}, {
  "x": "Alto",
  "y": "2016",
  "region": "Río Verde",
  "color": colors.rvd,
  "value": 3.60
},
{
  "x": "Bajo",
  "y": "2017",
  "region": "San Luis Potosí",
  "color": colors.slp,
  "value": 2986.12
},
{
  "x": "Bajo",
  "y": "2017",
  "region": "Aguascalientes",
  "color": colors.ags,
  "value": 2694.58
},
{
  "x": "Medio",
  "y": "2017",
  "region": "Aguascalientes",
  "color": colors.ags,
  "value": 794.37
}, {
  "x": "Alto",
  "y": "2017",
  "region": "Aguascalientes",
  "color": colors.ags,
  "value": 748.70
},
{
  "x": "Medio",
  "y": "2017",
  "region": "San Luis Potosí",
  "color": colors.slp,
  "value": 496.52
}, {
  "x": "Alto",
  "y": "2017",
  "region": "San Luis Potosí",
  "color": colors.slp,
  "value": 326.59
},
{
  "x": "Bajo",
  "y": "2017",
  "region": "Río Verde",
  "color": colors.rvd,
  "value": 199.56
}, {
  "x": "Medio",
  "y": "2017",
  "region": "Río Verde",
  "color": colors.rvd,
  "value": 19.58
}, {
  "x": "Alto",
  "y": "2017",
  "region": "Río Verde",
  "color": colors.rvd,
  "value": 4.47
},
{
  "x": "Bajo",
  "y": "2018",
  "region": "San Luis Potosí",
  "color": colors.slp,
  "value": 3313.87
},
{
  "x": "Bajo",
  "y": "2018",
  "region": "Aguascalientes",
  "color": colors.ags,
  "value": 2997.31
},
{
  "x": "Medio",
  "y": "2018",
  "region": "Aguascalientes",
  "color": colors.ags,
  "value": 860.59
}, {
  "x": "Alto",
  "y": "2018",
  "region": "Aguascalientes",
  "color": colors.ags,
  "value": 888.27
},
 {
  "x": "Medio",
  "y": "2018",
  "region": "San Luis Potosí",
  "color": colors.slp,
  "value": 619.27
}, {
  "x": "Alto",
  "y": "2018",
  "region": "San Luis Potosí",
  "color": colors.slp,
  "value": 427.07
},
{
  "x": "Bajo",
  "y": "2018",
  "region": "Río Verde",
  "color": colors.rvd,
  "value": 233.20
}, {
  "x": "Medio",
  "y": "2018",
  "region": "Río Verde",
  "color": colors.rvd,
  "value": 22.59
}, {
  "x": "Alto",
  "y": "2018",
  "region": "Río Verde",
  "color": colors.rvd,
  "value": 5.28
},
{
  "x": "Bajo",
  "y": "2019",
  "region": "San Luis Potosí",
  "color": colors.slp,
  "value": 3484.82
},
{
  "x": "Bajo",
  "y": "2019",
  "region": "Aguascalientes",
  "color": colors.ags,
  "value": 3179.72
},
{
  "x": "Medio",
  "y": "2019",
  "region": "Aguascalientes",
  "color": colors.ags,
  "value": 933.00
}, {
  "x": "Alto",
  "y": "2019",
  "region": "Aguascalientes",
  "color": colors.ags,
  "value": 1035.34
},
 {
  "x": "Medio",
  "y": "2019",
  "region": "San Luis Potosí",
  "color": colors.slp,
  "value": 699.00
}, {
  "x": "Alto",
  "y": "2019",
  "region": "San Luis Potosí",
  "color": colors.slp,
  "value": 504.66
},
{
  "x": "Bajo",
  "y": "2019",
  "region": "Río Verde",
  "color": colors.rvd,
  "value": 256.65
}, {
  "x": "Medio",
  "y": "2019",
  "region": "Río Verde",
  "color": colors.rvd,
  "value": 25.10
}, {
  "x": "Alto",
  "y": "2019",
  "region": "Río Verde",
  "color": colors.rvd,
  "value": 6.12
},
{
  "x": "Bajo",
  "y": "2020",
  "region": "San Luis Potosí",
  "color": colors.slp,
  "value": 3607.41
},
{
  "x": "Bajo",
  "y": "2020",
  "region": "Aguascalientes",
  "color": colors.ags,
  "value": 3441.99
},
{
  "x": "Medio",
  "y": "2020",
  "region": "Aguascalientes",
  "color": colors.ags,
  "value": 996.78
}, {
  "x": "Alto",
  "y": "2020",
  "region": "Aguascalientes",
  "color": colors.ags,
  "value": 1143.06
},
 {
  "x": "Medio",
  "y": "2020",
  "region": "San Luis Potosí",
  "color": colors.slp,
  "value": 730.09
}, {
  "x": "Alto",
  "y": "2020",
  "region": "San Luis Potosí",
  "color": colors.slp,
  "value": 574.99
},
{
  "x": "Bajo",
  "y": "2020",
  "region": "Río Verde",
  "color": colors.rvd,
  "value": 279.36
}, {
  "x": "Medio",
  "y": "2020",
  "region": "Río Verde",
  "color": colors.rvd,
  "value": 27.87
}, {
  "x": "Alto",
  "y": "2020",
  "region": "Río Verde",
  "color": colors.rvd,
  "value": 6.8
}

  ];

  var baseWidth = Math.min(chart.plotContainer.maxWidth, chart.plotContainer.maxHeight);
  var maxRadius = baseWidth / Math.sqrt(chart.data.length)/1 - 0; // 2 is jast a margin
  series.heatRules.push({ min: 2, max: maxRadius, property: "radius", target: bullet1.circle });


  chart.plotContainer.events.on("maxsizechanged", function() {
      var side = Math.min(chart.plotContainer.maxWidth, chart.plotContainer.maxHeight);
      bullet1.circle.clones.each(function(clone) {
          clone.scale = side / baseWidth;
      })
  })

  let legend = new am4charts.Legend();
  legend.parent = chart.chartContainer;
  legend.labels.template.fill = am4core.color(mainTextColor);
  legend.labels.template.fontSize = 9;
  legend.maxColumns =3;

  legend.data = [{
    "name": "AGS",
    "fill":"#E17A2D"
  }, {
    "name": "SLP",
    "fill": "#E1D92D",
  }, {
    "name": "Río Verde",
    "fill": "#5DBE24"
  }];

  let ChartTitle = chart.titles.create();
  ChartTitle.text = "Evolución del grado de urbanización en el periurbano\nde Aguascalientes, San Luis Potosí y Río Verde";
  ChartTitle.fontSize = 12;
  ChartTitle.marginBottom = 15;
  ChartTitle.fill = am4core.color(mainTextColor);
  }); // end am4core.ready()
*/