Improve line chart creation

public/js/cuerpos_functions.js

@@ -5,7 +5,7 @@
  * January 2021
  */
 
-/* globals omnivore, Promise, makeBaseMap, am4core, makeRadialChart */
+/* globals omnivore, Promise, makeBaseMap, am4core, makeRadialChart, makeLineChart */
 /* exported. userFiles, userDates, timeParse, layerControl, yearList */
 
 let timeParse,
@@ -288,6 +288,10 @@ let barChartData = [],
 const populateMap = async(mapData) => {
 
     let baseUrl = new URL(`/data`, window.location.href).href;
+    // create sets of unique months and years
+    yearList = [... new Set(userDates.map( date => new Date(date).getFullYear() ))];
+    //let formatter = new Intl.DateTimeFormat('es', { month: 'long' });
+
     // RADIAL CHART
     // get am chart - may need this to update chart on date change
     //let radialChart = am4core.registry.baseSprites.find(c => c.htmlContainer.id === "radial_chart");
@@ -297,20 +301,15 @@ const populateMap = async(mapData) => {
         //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 area`;
         const queryData = await d3.json(query);
-        queryData[0].date = new Date(userDates[i])
+        queryData[0].date = new Date(userDates[i]);
         return new Promise(resolve => {
             resolve(queryData[0]);
         });
     });
     // wait for all queries to complete and then set chart data
     Promise.all(queries).then( data => {
-
-        // create sets of unique months and years
-        yearList = [... new Set(userDates.map( date => new Date(date).getFullYear() ))];
-        //let formatter = new Intl.DateTimeFormat('es', { month: 'long' });
-
         // TODO: maybe make this a function so it can be used to update chart when changing dates
-        let chartaData = [];
+        let chartData = [];
         monthArray.forEach( (month, index) => {
             let element = {};
             yearList.forEach( year => {
@@ -319,51 +318,49 @@ const populateMap = async(mapData) => {
                 let yearData = data.filter(d => new Date(d.date).getMonth() == index && new Date(d.date).getFullYear() == year);
                 element[year] = yearData.length > 0 ? yearData[0].area : null;
             });
-            chartaData.push(element);
+            chartData.push(element);
         });
-        makeRadialChart(chartaData, monthArray, yearList);
+        makeRadialChart(chartData, monthArray, yearList);
     });
 
-    //++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ LINE CHART
-    let data_ls = [];
-    let linesChart = am4core.registry.baseSprites.find(c => c.htmlContainer.id === "linesChart");
+    //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");
 
     // async queries for each date that has been loaded
     const queries_ls = userFiles.map(async(mes, i) => {
         let query = `${baseUrl}/query/${mes}?columns=sum(areacpo)/10000 area, descrip&group=descrip`;
         const queryData = await d3.json(query);
-        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_ls.push(queryData);
+        return new Promise(resolve => {
+            resolve(queryData);
+        });
 
     });
-    // wait for all queries to complete
-    const dataQueries_ls = await Promise.all(queries_ls);
-    // and then set chart data
-    //lineStackedChart.data = data_ls;
-    var merged = [].concat.apply([], data_ls);
-    //console.log(merged);
-
-    let aguaPermanente = merged.filter(function(d) { return d.descrip == "Agua permanente" });
-    let aguaTemporal = merged.filter(function(d) { return d.descrip == "Áreas temporalmente inundadas" });
-    let aguaVegetacion = merged.filter(function(d) { return d.descrip == "Suelos húmedos-vegetación acuática" });
-
-    let i;
-    for (i = 0; i < aguaPermanente.length; i++) {
-        aguaPermanente[i].permanente = aguaPermanente[i].area;
-        aguaPermanente[i].temporal = aguaTemporal[i].area;
-        aguaPermanente[i].vegetacion = aguaVegetacion[i].area;
-
-        delete aguaPermanente[i].descrip;
-        delete aguaPermanente[i].area;
-    }
+    // wait for all queries to complete and then set chart data
+    Promise.all(queries_ls).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 = aguaPermanente;
-    grijalva_bodies.sort((a, b) => (a.date > b.date) ? 1 : -1);
-    linesChart.data = grijalva_bodies;
+        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");