Update bar chart on date change

public/js/cuerpos_charts.js

@@ -323,7 +323,8 @@ const makeAreaChart = (data) => {
         // only update chart when dates in cursor change month
         if (filterDate.valueOf() != previousDate.valueOf()) {
             previousDate = filterDate;
-            updateBarChartOnHover(filterDate, barChartData); // FIXME: when calling this update, bar chart may not exist yet
+            let barData = [].concat.apply([], barChartData);
+            updateBarChartOnHover(filterDate, barData); // FIXME: when calling this update, bar chart may not exist yet
         }
     });
 }

public/js/cuerpos_functions.js

@@ -574,7 +574,8 @@ legend.onAdd = () => {
 let radarData = [],
     lineAreaData = [],
     barChartData = [],
-    yearList;
+    yearList,
+    previouslyQueriedMonths = [];
 
 const makeCharts = () => {
 
@@ -591,6 +592,7 @@ const makeCharts = () => {
         const queryData = await d3.json(query);
         queryData[0].date = new Date(userDates[i]);
         radarData.push(queryData[0]);
+        previouslyQueriedMonths.push(userDates[i]);
         return new Promise(resolve => {
             resolve(queryData[0]);
         });
@@ -667,6 +669,7 @@ const makeCharts = () => {
             if (Math.log(queryData[k].areacpo) <= 1) { queryData[k].grupo = 1 } else if (Math.log(queryData[k].areacpo) <= 2) { queryData[k].grupo = 2 } else if (Math.log(queryData[k].areacpo) <= 3) { queryData[k].grupo = 3 } else if (Math.log(queryData[k].areacpo) <= 4) { queryData[k].grupo = 4 } else if (Math.log(queryData[k].areacpo) <= 5) { queryData[k].grupo = 5 } else if (Math.log(queryData[k].areacpo) <= 6) { queryData[k].grupo = 6 } else if (Math.log(queryData[k].areacpo) <= 7) { queryData[k].grupo = 7 } else if (Math.log(queryData[k].areacpo) <= 8) { queryData[k].grupo = 8 } else if (Math.log(queryData[k].areacpo) <= 9) { queryData[k].grupo = 9 } else if (Math.log(queryData[k].areacpo) <= 10) { queryData[k].grupo = 10 } else if (Math.log(queryData[k].areacpo) <= 11) { queryData[k].grupo = 11 } else if (Math.log(queryData[k].areacpo) <= 12) { queryData[k].grupo = 12 } else if (Math.log(queryData[k].areacpo) <= 13) { queryData[k].grupo = 13 } else if (Math.log(queryData[k].areacpo) <= 14) { queryData[k].grupo = 14 } else if (Math.log(queryData[k].areacpo) <= 15) { queryData[k].grupo = 15 } else if (Math.log(queryData[k].areacpo) <= 16) { queryData[k].grupo = 16 } else if (Math.log(queryData[k].areacpo) <= 17) { queryData[k].grupo = 17 } else if (Math.log(queryData[k].areacpo) <= 18) { queryData[k].grupo = 18 } else if (Math.log(queryData[k].areacpo) <= 19) { queryData[k].grupo = 19 } else if (Math.log(queryData[k].areacpo) <= 20) { queryData[k].grupo = 20 } else { queryData[k].grupo = 20.0301186564 }
             //if (k <= 20 && Math.log(queryData[k].areacpo) <= k + 1) { queryData[k].grupo = k + 1 } else { queryData[k].grupo = 20.0301186564 }
         }
+        barChartData.push(queryData);
         return new Promise(resolve => {
             resolve(queryData);
         });
@@ -674,11 +677,11 @@ const makeCharts = () => {
 
     // wait for all queries to complete and set barChartData to its response
     Promise.all(queries_pb).then((d) => {
-        barChartData = [].concat.apply([], d);
+        let barData = [].concat.apply([], d);
         // set initial date to first date
         let filterDate = new Date(userDates[0]);
-        makeBarChart(barChartData);
-        updateBarChartOnHover(filterDate, barChartData);
+        makeBarChart(barData);
+        updateBarChartOnHover(filterDate, barData);
     });
 
     // end bars
@@ -721,6 +724,7 @@ const updateCharts = () => {
             const queryData = await d3.json(query);
             queryData[0].date = new Date(date);
             radarData.push(queryData[0]);
+            //previouslyQueriedMonths.push(date);
             return new Promise(resolve => {
                 resolve(queryData[0]);
             });
@@ -755,9 +759,9 @@ const updateCharts = () => {
     let linesChart = am4core.registry.baseSprites.find(c => c.htmlContainer.id === "linesChart"),
         stackedAreaChart = am4core.registry.baseSprites.find(c => c.htmlContainer.id === "stackedAreaChart");
 
+    // extract months as values for which there is data already queried
+    let chartMonths = lineAreaData.map( d => parseInt(Object.keys(d)[0]) );
     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`;
@@ -822,6 +826,44 @@ const updateCharts = () => {
         stackedAreaChart.invalidateRawData();
     });
 
-    //TODO: fix available chart bar chart data
+    // update bar chart
+
+    let barChart = am4core.registry.baseSprites.find(c => c.htmlContainer.id === "dimfrcpo-graph");
+    previouslyQueriedMonths.sort((a, b) => (a > b) ? 1 : -1);
+    // TODO: how to use this previouslyQueriedMonths varr for all charts?
+    // If it is set in one chart, it may affect all others.
+    // maybe use an object with keys for each chart, e.g., [{radar: [months], lineArea: [months], bars: [months]}]
+    // abnd update previouslyQueriedMonths.radar.push() or previouslyQueriedMonths.lineArea.push() etc.
+
+    // async queries for each date that has been loaded
+    const queries_pb = userDates.map(async (date, i) => {
+        if (!previouslyQueriedMonths.some(d => d == date)) {
+            let query_pb = `${baseUrl}/query/${userFiles[i]}?columns=descrip, areacpo`;
+            const queryData = await d3.json(query_pb);
+            let dateValue = new Date(userDates[i]);
+            for (let k = 0; k < queryData.length; k++) {
+                queryData[k].date = dateValue; // assign date to each element
+                // assign bar groups to each element
+                // TODO: better way to write these conditions?
+                if (Math.log(queryData[k].areacpo) <= 1) { queryData[k].grupo = 1 } else if (Math.log(queryData[k].areacpo) <= 2) { queryData[k].grupo = 2 } else if (Math.log(queryData[k].areacpo) <= 3) { queryData[k].grupo = 3 } else if (Math.log(queryData[k].areacpo) <= 4) { queryData[k].grupo = 4 } else if (Math.log(queryData[k].areacpo) <= 5) { queryData[k].grupo = 5 } else if (Math.log(queryData[k].areacpo) <= 6) { queryData[k].grupo = 6 } else if (Math.log(queryData[k].areacpo) <= 7) { queryData[k].grupo = 7 } else if (Math.log(queryData[k].areacpo) <= 8) { queryData[k].grupo = 8 } else if (Math.log(queryData[k].areacpo) <= 9) { queryData[k].grupo = 9 } else if (Math.log(queryData[k].areacpo) <= 10) { queryData[k].grupo = 10 } else if (Math.log(queryData[k].areacpo) <= 11) { queryData[k].grupo = 11 } else if (Math.log(queryData[k].areacpo) <= 12) { queryData[k].grupo = 12 } else if (Math.log(queryData[k].areacpo) <= 13) { queryData[k].grupo = 13 } else if (Math.log(queryData[k].areacpo) <= 14) { queryData[k].grupo = 14 } else if (Math.log(queryData[k].areacpo) <= 15) { queryData[k].grupo = 15 } else if (Math.log(queryData[k].areacpo) <= 16) { queryData[k].grupo = 16 } else if (Math.log(queryData[k].areacpo) <= 17) { queryData[k].grupo = 17 } else if (Math.log(queryData[k].areacpo) <= 18) { queryData[k].grupo = 18 } else if (Math.log(queryData[k].areacpo) <= 19) { queryData[k].grupo = 19 } else if (Math.log(queryData[k].areacpo) <= 20) { queryData[k].grupo = 20 } else { queryData[k].grupo = 20.0301186564 }
+                //if (k <= 20 && Math.log(queryData[k].areacpo) <= k + 1) { queryData[k].grupo = k + 1 } else { queryData[k].grupo = 20.0301186564 }
+            }
+            previouslyQueriedMonths.push(date);
+            barChartData.push(queryData);
+            return new Promise(resolve => {
+                resolve(queryData);
+            });
+        }
+    });
+
+    // wait for all queries to complete and use barChartData to update chart
+    Promise.all(queries_pb).then(() => {
+        let barData = [].concat.apply([], barChartData);
+        // set initial date to first date
+        let filterDate = new Date(userDates[0]);
+        barChart.data = barData;
+        barChart.invalidateRawData();
+        updateBarChartOnHover(filterDate, barData);
+    });
 
 }
\ No newline at end of file