Update charts on drawing items and changing dates

public/js/grijalva_charts.js

@@ -6,7 +6,7 @@
  */
 
 /* globals map, userFiles, userDates, indicators, indicatorVars, indicatorsNames */
-/* exported makeIndicatorGraph, getData */
+/* exported makeIndicatorGraph, getData, getDataInSelection */
 
 let minDate, maxDate, xLine, yLine;
 
@@ -38,18 +38,142 @@ const getData = async (indicator) => {
             "date": monthYear.date,
             "value": +monthYear.value[indicator]
         });
-    })
+    });
     data.forEach(d => d.values.sort(sortByDateAscending));
     return data;
 }
 
-Object.defineProperty(Array.prototype, 'flat', {
-    value: function(depth = 1) {
-      return this.reduce(function (flat, toFlatten) {
-        return flat.concat((Array.isArray(toFlatten) && (depth>1)) ? toFlatten.flat(depth-1) : toFlatten);
-      }, []);
-    }
-});
+// FIXME: Improve this function. Too many requests: indicators x months x drawn items...
+// Find  way to make one request and get all indicators per month and drawn item. 
+// Something like the commented function below.
+const getDataInSelection = async (indicator) => {
+    let timeParse = d3.timeParse("%B_%Y");
+
+    let geojson = drawnItems.toGeoJSON(),
+        data = [];
+
+    drawnItemsPromises = geojson.features.map( async (item, i) => {
+        // set SRID for drawn features
+        item.geometry.crs = {"type":"name","properties":{"name":"EPSG:4326"}};
+        data.push({name: indicator + (i + 1), values: []});
+
+        let columns = indicator == "costa" || indicator == "df" ?
+            `avg(${indicator})%20as%20${indicator}` :`sum(${indicator})%20as%20${indicator}`;
+        let filter = `ST_Intersects(geom, (SELECT ST_Multi(ST_GeomFromGeoJSON('${JSON.stringify(item.geometry)}') ) ) )`
+        const filePpromises = userFiles.map(async monthYear => {
+            let queryData = `http://localhost:8090/data/query/${monthYear}?columns=${columns}&filter=${filter}&group=1%3D1`;
+            const selectionQuery = await d3.json(queryData);
+            return {date: timeParse(monthYear), value: selectionQuery[0]};
+        });
+        const selectionData = await Promise.all(filePpromises);
+        selectionData.map( itemData => {
+            let itemDataValue = itemData.value != undefined ? itemData.value[indicator] : 0;
+            data[i].values.push({date: itemData.date, value: itemDataValue });
+        });
+        return data;
+    });
+    const drawnItemsData = await Promise.all(drawnItemsPromises);
+    let data2 = [];
+    data.map( a => data2.push(a.values)); // flatten array of data[i].values
+    data2 = [].concat.apply([], data2);
+
+    // insert sum of each date to first element of data array with name "column0"
+    data.unshift({
+        "name": `${indicator}0`,
+        "values": d3.nest()
+            .key( d => d.date)
+            // return d3.sum or d3.average depending on indicator
+            .rollup( v => { return indicator == "costa" || indicator == "df" ? d3.mean(v, v => v.value) : d3.sum(v, v => v.value) })
+            .entries(data2)
+            // map "key" and "value" from d3.nest().rollup() to date and value
+            .map( group => { 
+                return {
+                    date: new Date(group.key),
+                    value: group.value
+                }
+            })
+    });
+    // order data[i].values.date
+    data.forEach(d => d.values.sort(sortByDateAscending));
+    return data;
+}
+
+/*const getDataInSelection = async () => {
+    let geojson = drawnItems.toGeoJSON();
+    let queryColumns = ["sum(area) as area", "sum(perimeter) as perimeter", "avg(costa) as costa", "avg(df) as df"];
+    let timeParse = d3.timeParse("%B_%Y"),
+        data = {};
+
+    indicators.map( indicator => {
+        data[indicator] = [];
+    });
+    //let promises;
+    // End up with data = {area: Array(0), perimeter: Array(0), length: Array(0), DI: Array(0)}
+
+    // Convert drawn items to GeoJSON and check what's inside each one of them
+    drawnItems.toGeoJSON().features.map( async (item, i) => {
+        // set SRID fro drawn features
+        geojson.features[i].geometry.crs = {"type":"name","properties":{"name":"EPSG:4326"}};
+        indicators.map( async indicator => {
+            data[indicator].push({name: indicator + (i + 1), values: []});
+        });
+        // End up with data = {area: [{name: "area1", values: []}], perimeter: [{name: "perimeter1", values: []}]...}
+        //console.log(data)
+
+        let filter = `ST_Intersects(geom, (SELECT ST_Multi(ST_GeomFromGeoJSON('${JSON.stringify(geojson.features[i].geometry)}') ) ) )`
+        const promises = userFiles.map(async monthYear => {
+            let queryData = `http://localhost:8090/data/query/${monthYear}?columns=${queryColumns.join(",")}&filter=${filter}&group=1%3D1`;
+            const selectionQuery = await d3.json(queryData);
+            return {date: timeParse(monthYear), value: selectionQuery[0]};
+        });
+        const selectionData = await Promise.all(promises);
+    //    let data = [{name: `${indicator}0`, values: []}];
+        selectionData.map( itemData => {
+            //console.log(itemData, i)
+            indicators.map( indicator => {
+                data[indicator][i].values.push({date: itemData.date, value: itemData.value[indicator] });
+            });
+        });
+    });
+    return data;
+}*/
+
+const summarizeData = async (allData, indicator) => {
+    /*let dataFull = await allData;
+    let data = dataFull[indicator];
+    let data2 = [];
+    console.log(allData, data[0]);
+    data.map( a => { console.log(a); data2.push(a.values)}); // flatten array of data[i].values
+    data2 = [].concat.apply([], data2);
+    console.log(data2);*/
+    allData.then( val => {
+        let data = val['area'];
+          let data2 = [];
+          console.log(val, data);
+          data.forEach( a => { data2.push(a.values)}); // flatten array of data[i].values
+          data2 = [].concat.apply([], data2);
+          console.log(data2);
+      })
+    /*// insert sum of each date to first element of data array with name "column0"
+    data.unshift({
+        "name": `${indicator}0`,
+        "values": d3.nest()
+            .key( d => d.date)
+            // return d3.sum or d3.average depending on indicator
+            .rollup( v => { return indicator == "costa" || indicator == "df" ? d3.mean(v, v => v.value) : d3.sum(v, v => v.value) })
+            .entries(data2)
+            // map "key" and "value" from d3.nest().rollup() to date and value
+            .map( group => { return {
+                date: new Date(group.key),
+                value: group.value
+            }
+            })
+    });
+    // order data[i].values.date
+    data.forEach(d => d.values.sort(sortByDateAscending));
+    //console.log(data)*/
+    return data;
+}
 
 function makeIndicatorGraph() {
 

public/js/grijalva_functions.js

@@ -5,7 +5,7 @@
  * August 2019
  */
 
-/* globals omnivore, Promise, chroma, makeBaseMap, makeIndicatorGraph, getData */
+/* globals omnivore, Promise, chroma, makeBaseMap, makeIndicatorGraph, getData, getDataInSelection */
 /* exported indicators. userFiles, userDates, timeParse, layerControl, updateCharts */
 
 let timeParse,
@@ -468,7 +468,7 @@ const updateMap = (mapData) => {
 
     // update timeDimension times
     timeLayer._timeDimension.setAvailableTimes(userDates, "replace");
-    //timeLayer._timeDimension.setCurrentTime(mapData.min);
+    timeLayer._timeDimension.setCurrentTime(mapData.min);
 
     // clear minmax indicators objects
     maxIndicators = {},
@@ -500,28 +500,21 @@ const updateMap = (mapData) => {
     updateCharts();
 }
 
-const updateCharts = async () => {
+const updateCharts = () => {
 
-    // TODO: get data inside drawn polygons
+    // TODO: add mask while fetching async data
     // if user has drawn polygons, update chart with data inside selection
-    //if (drawnItems.getBounds().isValid()) {
-    /*if (drawnItems.toGeoJSON().features.length != 0) {
-        //console.time("selection");
-        let selectionData = await getDataInSelection();
-        //console.timeEnd("selection");
-        indicators.forEach( indicator => {
-            indicatorVars[indicator].chart.data(await summarizeData(selectionData, indicator));
+    if (drawnItems.toGeoJSON().features.length != 0) {
+        indicators.map( async indicator => {
+            //indicatorVars[indicator].chart.data( await summarizeData(await getDataInSelection(), indicator) );
+            indicatorVars[indicator].chart.data( await getDataInSelection(indicator) );
         });
     } else {
         // otherwise use all data
-        indicators.forEach( indicator => {
+        indicators.map( async indicator => {
             indicatorVars[indicator].chart.data( await getData(indicator));
         });
-    }*/
-
-    indicators.map( async (indicator) => {
-        indicatorVars[indicator].chart.data( await getData(indicator));
-    });
+    }
 }
 
 // define MVT layer for given month table and all indicators