Improve radar chart ceation

public/js/cuerpos_functions.js

@@ -5,8 +5,8 @@
  * January 2021
  */
 
-/* globals omnivore, Promise, makeBaseMap, am4core */
-/* exported. userFiles, userDates, timeParse, layerControl */
+/* globals omnivore, Promise, makeBaseMap, am4core, makeRadialChart */
+/* exported. userFiles, userDates, timeParse, layerControl, yearList */
 
 let timeParse,
     timeFormat,
@@ -282,72 +282,47 @@ const setupMap = (dates) => {
     });
 }
 
-let barChartData = [];
+let barChartData = [],
+    yearList;
 
 const populateMap = async(mapData) => {
 
     let baseUrl = new URL(`/data`, window.location.href).href;
-    //++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ RADIAL CHART
-    let data = []; // empty array to hold chart data
-    // get am chart
-    let radialChart = am4core.registry.baseSprites.find(c => c.htmlContainer.id === "radial_chart");
+    // 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");
 
     // 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`;
-        let query = `${baseUrl}/query/${mes}?columns=sum(areacpo)/10000 value1`;
+        let query = `${baseUrl}/query/${mes}?columns=sum(areacpo)/10000 area`;
         const queryData = await d3.json(query);
-        let date = new Date(dateArray[i]);
-        queryData[0].date = date;
-        data.push(queryData[0]);
+        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 = [];
+        monthArray.forEach( (month, index) => {
+            let element = {};
+            yearList.forEach( year => {
+                //element.month = formatter.format(new Date(year, month, 1, 0, 0, 0));
+                element.month = month.toLowerCase();
+                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);
+        });
+        makeRadialChart(chartaData, monthArray, yearList);
     });
-    // wait for all queries to complete
-    const dataQueries = await Promise.all(queries);
-    // and then set chart data
-    let data_1 = data;
-    data_1.sort((a, b) => (a.date > b.date) ? 1 : -1)
-
-    var month = new Array();
-    month[0] = "January";
-    month[1] = "February";
-    month[2] = "March";
-    month[3] = "April";
-    month[4] = "May";
-    month[5] = "June";
-    month[6] = "July";
-    month[7] = "August";
-    month[8] = "September";
-    month[9] = "October";
-    month[10] = "November";
-    month[11] = "December";
-
-    var year = new Array();
-    year[116] = "2016";
-    year[117] = "2017";
-    year[118] = "2018";
-
-    let cc;
-    for (cc = 0; cc < data_1.length; cc++) {
-        data_1[cc].mm = month[(data_1[cc].date).getMonth()];
-        data_1[cc].yy = year[(data_1[cc].date).getYear()];
-    }
-
-    // TODO: check this for loop to use selected months and years
-
-    var element = {},
-        cart = [],
-        cntr;
-    for (cntr = 0; cntr < 12; cntr++) {
-        //console.log(month[cntr]);
-        element = {};
-        element.month = (month[cntr]).toString();
-        element.value1 = (data_1.filter(function(d) { return d.mm == month[cntr] && d.yy == 2016 }))[0].value1;
-        element.value2 = (data_1.filter(function(d) { return d.mm == month[cntr] && d.yy == 2017 }))[0].value1;
-        element.value3 = (data_1.filter(function(d) { return d.mm == month[cntr] && d.yy == 2018 }))[0].value1;
-        cart.push(element);
-    }
-
-    radialChart.data = cart;
 
     //++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ LINE CHART
     let data_ls = [];