update radial chart

public/js/cuerpos_charts.js

@@ -704,7 +704,7 @@ am4core.ready(function() {
     series1.dataFields.valueY = "value1";
     series1.dataFields.dateX = "date";
     series1.strokeWidth = 1.5;
-    series1.tooltipText = "{valueY}";
+    series1.tooltipText = "{valueY.formatNumber('#,###.#')} Ha";
     series1.name = "Series 1";
     //series1.bullets.create(am4charts.CircleBullet);
     series1.dataItems.template.locations.dateX = 0.5;
@@ -749,46 +749,46 @@ am4core.ready(function() {
     var range_estiaje = categoryAxis.axisRanges.create();
     range_estiaje.date = new Date(2020, 2, 1);
     range_estiaje.endDate = new Date(2020, 4, 1);
-    range_estiaje.axisFill.fill = am4core.color("#C39473");
-    range_estiaje.axisFill.fillOpacity = 0.3;
+    range_estiaje.axisFill.fill = am4core.color("#DFA34D");
+    range_estiaje.axisFill.fillOpacity = 0.5;
     range_estiaje.grid.strokeOpacity = 0;
 
     var range_lluvTropical = categoryAxis.axisRanges.create();
     range_lluvTropical.date = new Date(2020, 4, 1);
     range_lluvTropical.endDate = new Date(2020, 8, 1);
-    range_lluvTropical.axisFill.fill = am4core.color("#D5B49F");
-    range_lluvTropical.axisFill.fillOpacity = 0.3;
+    range_lluvTropical.axisFill.fill = am4core.color("#D8736D");
+    range_lluvTropical.axisFill.fillOpacity = 0.5;
     range_lluvTropical.grid.strokeOpacity = 0;
 
     var range_lluvTropicalInv = categoryAxis.axisRanges.create();
     range_lluvTropicalInv.date = new Date(2020, 8, 1);
     range_lluvTropicalInv.endDate = new Date(2020, 11, 1);
-    range_lluvTropicalInv.axisFill.fill = am4core.color("#B5B5B5");
-    range_lluvTropicalInv.axisFill.fillOpacity = 0.3;
+    range_lluvTropicalInv.axisFill.fill = am4core.color("#AF8BBA");
+    range_lluvTropicalInv.axisFill.fillOpacity = 0.5;
     range_lluvTropicalInv.grid.strokeOpacity = 0;
 
     var range_lluvInv = categoryAxis.axisRanges.create();
     range_lluvInv.date = new Date(2020, 11, 1);
     range_lluvInv.endDate = new Date(2020, 12, 1);
-    range_lluvInv.axisFill.fill = am4core.color("#E3E4DE");
-    range_lluvInv.axisFill.fillOpacity = 0.3;
+    range_lluvInv.axisFill.fill = am4core.color("#76B66A");
+    range_lluvInv.axisFill.fillOpacity = 0.5;
     range_lluvInv.grid.strokeOpacity = 0;
 
     var range_lluvInv1 = categoryAxis.axisRanges.create();
     range_lluvInv1.date = new Date(2020, 0, 1);
     range_lluvInv1.endDate = new Date(2020, 2, 1);
-    range_lluvInv1.axisFill.fill = am4core.color("#E3E4DE");
-    range_lluvInv1.axisFill.fillOpacity = 0.3;
+    range_lluvInv1.axisFill.fill = am4core.color("#76B66A");
+    range_lluvInv1.axisFill.fillOpacity = 0.5;
     range_lluvInv1.grid.strokeOpacity = 0;
 
     chart.legend = new am4charts.Legend();
     chart.legend.fontSize = 9;
 
     // let legend2 = []
-    var legenddata2 = [{ name: "Estiaje", fill: am4core.color("#C39473") },
-        { name: "Lluvia Tropical", fill: am4core.color("#D5B49F") },
-        { name: "Lluvia Tropical-Invernal", fill: am4core.color("#B5B5B5") },
-        { name: "Lluvia Invernal", fill: am4core.color("#E3E4DE") }
+    var legenddata2 = [{ name: "Estiaje", fill: am4core.color("#DFA34D") },
+        { name: "Lluvia Tropical", fill: am4core.color("#D8736D") },
+        { name: "Lluvia Tropical-Invernal", fill: am4core.color("#AF8BBA") },
+        { name: "Lluvia Invernal", fill: am4core.color("#76B66A") }
 
     ];
 
@@ -844,7 +844,8 @@ am4core.ready(function() {
         series.strokeWidth = 2;
         series.yAxis = valueAxis;
         series.name = name;
-        series.tooltipText = "{name}: [bold]{valueY.formatNumber('#,###.0')} Ha[/]";
+        //series.tooltipText = "{name}: [bold]{valueY.formatNumber('#,###.0')} Ha[/]";
+        series.tooltipText = "{valueY.formatNumber('#,###.0')} Ha[/]";
         series.tensionX = 0.8;
         series.showOnInit = true;
 

public/js/cuerpos_functions.js

@@ -369,7 +369,8 @@ const populateMap = async(mapData) => {
 
     // async queries for each date that has been loaded
     const queries = userFiles.map(async(mes, i) => {
-        let query = `${baseUrl}/query/${mes}?columns=sum(areacpo)/10000 value1,sum(perimcpo) value2, sum(dimfrcpo) value3`;
+        //let query = `${baseUrl}/query/${mes}?columns=sum(areacpo)/10000 value1,sum(perimcpo) value2, sum(dimfrcpo) value3`;
+        let query = `${baseUrl}/query/${mes}?columns=sum(areacpo)/10000 value1`;
         const queryData = await d3.json(query);
         let date = new Date(dateArray[i]);
         date.setFullYear(2020)
@@ -379,7 +380,10 @@ const populateMap = async(mapData) => {
     // wait for all queries to complete
     const dataQueries = await Promise.all(queries);
     // and then set chart data
-    radialChart.data = data;
+    let data_1 = data;
+    data_1.sort((a, b) => (a.date > b.date) ? 1 : -1)
+    radialChart.data = data_1;
+    console.log(data_1);
 
     //++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ LINE CHART
     let data_ls = [];