Improve area chart creation

public/js/cuerpos_functions.js

@@ -5,7 +5,7 @@
  * January 2021
  */
 
-/* globals omnivore, Promise, makeBaseMap, am4core, makeRadialChart, makeLineChart */
+/* globals omnivore, Promise, makeBaseMap, am4core, makeRadialChart, makeLineChart, makeAreaChart */
 /* exported. userFiles, userDates, timeParse, layerControl, yearList */
 
 let timeParse,
@@ -323,7 +323,7 @@ const populateMap = async(mapData) => {
         makeRadialChart(chartData, monthArray, yearList);
     });
 
-    //LINE CHART
+    // LINE CHART
     // get am chart - may need this to update chart on date change
     //let linesChart = am4core.registry.baseSprites.find(c => c.htmlContainer.id === "linesChart");
 
@@ -337,7 +337,6 @@ const populateMap = async(mapData) => {
         return new Promise(resolve => {
             resolve(queryData);
         });
-
     });
     // wait for all queries to complete and then set chart data
     Promise.all(queries_ls).then( data => {
@@ -361,45 +360,45 @@ const populateMap = async(mapData) => {
         chartData.sort((a, b) => (a.date > b.date) ? 1 : -1);
         makeLineChart(chartData);
     });
-    //++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ STACKED AREAS CHART
-    let data_sa = [];
-    let stackedAreaChart = am4core.registry.baseSprites.find(c => c.htmlContainer.id === "stackedAreaChart");
+    // STACKED AREA CHART
+    // get am chart - may need this to update chart on date change
+    //let stackedAreaChart = am4core.registry.baseSprites.find(c => c.htmlContainer.id === "stackedAreaChart");
 
     // async queries for each date that has been loaded
+    // TODO: this is the exact same call as in LINE CHART => merge into one
     const queries_sa = userFiles.map(async(mes, i) => {
         let query_sa = `${baseUrl}/query/${mes}?columns=sum(areacpo)/10000 area, descrip&group=descrip`;
         const queryData = await d3.json(query_sa);
-        let date = new Date(dateArray[i]);
-        //date.setFullYear(2016)
         for (const wbody in queryData) {
-            queryData[wbody].date = date;
+            queryData[wbody].date = new Date(userDates[i]);
         }
-        data_sa.push(queryData);
-
-    });
-    // wait for all queries to complete
-    const dataQueries_sa = await Promise.all(queries_sa);
-    // and then set chart data
-    //lineStackedChart.data = data_ls;
-    var merged_1 = [].concat.apply([], data_sa);
-    //console.log(data_sa);
-
-    let aguaPermanente_1 = merged_1.filter(function(d) { return d.descrip == "Agua permanente" });
-    let aguaTemporal_1 = merged_1.filter(function(d) { return d.descrip == "Áreas temporalmente inundadas" });
-    let aguaVegetacion_1 = merged_1.filter(function(d) { return d.descrip == "Suelos húmedos-vegetación acuática" });
-
-    let j;
-    for (j = 0; j < aguaPermanente_1.length; j++) {
-        aguaPermanente_1[j].permanente = aguaPermanente_1[j].area;
-        aguaPermanente_1[j].temporal = aguaTemporal_1[j].area;
-        aguaPermanente_1[j].vegetacion = aguaVegetacion_1[j].area;
-        delete aguaPermanente_1[j].descrip;
-        delete aguaPermanente_1[j].area;
+        //data_sa.push(queryData);
+        return new Promise(resolve => {
+            resolve(queryData);
+        });
+    });
+    // wait for all queries to complete and then set chart data
+    Promise.all(queries_sa).then( data => {
+        // TODO: maybe make this a function so it can be used to update chart when changing dates
+        let merged = [].concat.apply([], data);
+        let aguaPermanente = merged.filter(d => d.descrip == "Agua permanente" );
+        let aguaTemporal = merged.filter(d => d.descrip == "Áreas temporalmente inundadas" );
+        let aguaVegetacion = merged.filter(d => d.descrip == "Suelos húmedos-vegetación acuática" );
+
+        let chartData = [];
+        aguaPermanente.forEach( (wb, i) => {
+            let element = {
+                permanente: aguaPermanente[i].area,
+                temporal: aguaTemporal[i].area,
+                vegetacion: aguaVegetacion[i].area,
+                date: aguaPermanente[i].date
             }
+            chartData.push(element);
+        });
 
-    let grijalva_bodies_1 = aguaPermanente_1;
-    grijalva_bodies_1.sort((a, b) => (a.date > b.date) ? 1 : -1)
-    stackedAreaChart.data = grijalva_bodies_1;
+        chartData.sort((a, b) => (a.date > b.date) ? 1 : -1);
+        makeAreaChart(chartData);
+    });
 
     // populate bars