Update line+area charts on date change

public/js/cuerpos_charts.js

@@ -6,7 +6,7 @@
  */
 
 /* globals updateBarChartOnHover, barChartData, am4charts, am4core, am4themes_animated, yearList */
-/* export makeRadarChart, makeLineChart, makeAreaChart, makeBarChart */
+/* export makeRadarChart, makeLineChart, makeAreaChart, makeBarChart, */
 
 //+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 function grijalva_theme(target) {

public/js/cuerpos_functions.js

@@ -5,7 +5,7 @@
  * January 2021
  */
 
-/* globals omnivore, Promise, makeBaseMap, am4core, makeRadarChart, makeLineChart, makeAreaChart, makeBarChart */
+/* globals omnivore, Promise, makeBaseMap, am4core, makeRadarChart, makeLineChart, makeAreaChart, makeBarChart, makeDateRange */
 /* exported. userFiles, userDates, timeParse, layerControl, yearList */
 
 let timeParse,
@@ -572,6 +572,7 @@ legend.onAdd = () => {
 };
 
 let radarData = [],
+    lineAreaData = [],
     barChartData = [],
     yearList;
 
@@ -583,9 +584,6 @@ const makeCharts = () => {
     //let formatter = new Intl.DateTimeFormat('es', { month: 'long' });
 
     // RADAR CHART
-    // get am chart - may need this to update chart on date change
-    //let radarChart = am4core.registry.baseSprites.find(c => c.htmlContainer.id === "radial_chart");
-
     // 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`;
@@ -615,10 +613,6 @@ const makeCharts = () => {
     });
 
     // LINE + STACKED AREA CHARTS
-    // get am chart - may need this to update chart on date change
-    //let linesChart = am4core.registry.baseSprites.find(c => c.htmlContainer.id === "linesChart");
-    //let stackedAreaChart = am4core.registry.baseSprites.find(c => c.htmlContainer.id === "stackedAreaChart");
-
     // 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`;
@@ -626,14 +620,19 @@ const makeCharts = () => {
         for (const wbody in queryData) {
             queryData[wbody].date = new Date(userDates[i]);
         }
+        // create an object {dateValue: queriedData} where each date value has an array of data
+        let dataObject = {[userDates[i]]: queryData};
+        lineAreaData.push(dataObject);
         return new Promise(resolve => {
-            resolve(queryData);
+            resolve(dataObject);
         });
     });
     // wait for all queries to complete and then set chart data
     Promise.all(queries_ls).then( data => {
+        // unnest andd flatten data object for further processing
+        let rawData = data.map( d => Object.values(d)[0] ).flat();
         // TODO: maybe make this a function so it can be used to update chart when changing dates
-        let merged = [].concat.apply([], data);
+        let merged = [].concat.apply([], rawData);
         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" );
@@ -716,12 +715,11 @@ const updateCharts = () => {
     let radarChart = am4core.registry.baseSprites.find(c => c.htmlContainer.id === "radial_chart");
 
     const queries = userDates.map( async (date, i) => {
-        let checkDate = new Date(date);
         // check what month has not been queried before and query it
-        if (!radarData.some(d => d.date.valueOf() === checkDate.valueOf())) {
+        if (!radarData.some(d => d.date.valueOf() === date)) {
             let query = `${baseUrl}/query/${userFiles[i]}?columns=sum(areacpo)/10000 area`;
             const queryData = await d3.json(query);
-            queryData[0].date = new Date(userDates[i]);
+            queryData[0].date = new Date(date);
             radarData.push(queryData[0]);
             return new Promise(resolve => {
                 resolve(queryData[0]);
@@ -729,17 +727,17 @@ const updateCharts = () => {
         }
     });
 
-    // wait for all queries to complete and then set chart data
+    // wait for all queries to complete and then update chart data
     Promise.all(queries).then( () => {
-        // TODO: maybe make this a function so it can be used to update chart when changing dates
         let radarChartData = [];
         // check what months should have data
-        radarData.sort((a, b) => (a.date > b.date) ? 1 : -1);
-        let booleanCheck = radarData.map( (d,i) => d.date.valueOf() == userDates[i]);
+        //radarData.sort((a, b) => (a.date > b.date) ? 1 : -1);
+        /*let monthCheck = radarData.map( (d,i) => d.date.valueOf() == userDates[i]);
         let newRadarData = radarData.map( (d,i) => {
-            if (booleanCheck[i]) return d;
+            if (monthCheck[i]) return d;
         });
-        let filtredRadarData = newRadarData.filter( d => d != undefined );
+        let filtredRadarData = newRadarData.filter( d => d != undefined );*/
+        let filtredRadarData = radarData.filter( d => userDates.includes(d.date.valueOf()));
         monthArray.forEach( (month, index) => {
             let element = {};
             yearList.forEach( year => {
@@ -753,5 +751,77 @@ const updateCharts = () => {
         radarChart.invalidateRawData();
     });
 
-    // update line chart
+    // update line + area chart
+    let linesChart = am4core.registry.baseSprites.find(c => c.htmlContainer.id === "linesChart"),
+        stackedAreaChart = am4core.registry.baseSprites.find(c => c.htmlContainer.id === "stackedAreaChart");
+
+    const queries_ls = userDates.map( async (date, i) => {
+        // extract months as values for which there is data already queried
+        let chartMonths = lineAreaData.map( d => parseInt(Object.keys(d)[0]) )
+        // check what month has not been queried before and query it
+        if (!chartMonths.some( d => d === date)) {
+            let query = `${baseUrl}/query/${userFiles[i]}?columns=sum(areacpo)/10000 area, descrip&group=descrip`;
+            const queryData = await d3.json(query);
+            for (const wbody in queryData) {
+                queryData[wbody].date = new Date(userDates[i]);
+            }
+            // create an object {dateValue: queriedData} where each date value has an array of data
+            let dataObject = {[userDates[i]]: queryData};
+            lineAreaData.push(dataObject);
+            return new Promise(resolve => {
+                resolve(queryData);
+            });
+        }
+    });
+
+    // wait for all queries to complete and then update chart data
+    Promise.all(queries_ls).then( () => {
+
+        // unnest and flatten data object and filter those for the appropriate dates
+        let rawData = lineAreaData.map( d => Object.values(d)[0] ).flat()
+            .filter( d => userDates.includes(d.date.valueOf()));
+
+        let merged = [].concat.apply([], rawData);
+        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);
+        });
+
+        // update charts ranges
+        let lineDateAxis = linesChart.xAxes.values[0];
+        lineDateAxis.axisRanges.clear();
+        makeDateRange(lineDateAxis, 0, 2, "#E1DBC8");
+        makeDateRange(lineDateAxis, 2, 2, "#595952");
+        makeDateRange(lineDateAxis, 4, 4, "#838278");
+        makeDateRange(lineDateAxis, 8, 3, "#B1AE9F");
+        makeDateRange(lineDateAxis, 11, 1, "#E1DBC8");
+
+        let areaDateAxis = stackedAreaChart.xAxes.values[0];
+        areaDateAxis.axisRanges.clear();
+        makeDateRange(areaDateAxis, 0, 2, "#E1DBC8");
+        makeDateRange(areaDateAxis, 2, 2, "#595952");
+        makeDateRange(areaDateAxis, 4, 4, "#838278");
+        makeDateRange(areaDateAxis, 8, 3, "#B1AE9F");
+        makeDateRange(areaDateAxis, 11, 1, "#E1DBC8");
+
+        // updte chart data
+        chartData.sort((a, b) => (a.date > b.date) ? 1 : -1);
+        linesChart.data = chartData;
+        linesChart.invalidateRawData();
+        stackedAreaChart.data = chartData;
+        stackedAreaChart.invalidateRawData();
+    });
+
+    //TODO: fix available chart bar chart data
+
 }
\ No newline at end of file