Improve radar chart ceation

public/js/cuerpos_charts.js

@@ -6,6 +6,7 @@
  */
 
 /* globals updateBarChart, barChartData, am4charts, am4core, am4themes_animated */
+/* export makeRadialChart */
 
 //+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 function grijalva_theme(target) {
@@ -35,15 +36,10 @@ function customizeGrip(grip) {
     img.valign = "middle";
 }
 //++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ RADAR- LINES
-am4core.ready(function() {
 
-    // Themes begin
-    am4core.useTheme(am4themes_animated);
-    am4core.useTheme(grijalva_theme);
-    let mainTextColor = getComputedStyle(document.body).getPropertyValue('--main-text-color');
-    // Themes end
+let mainTextColor = getComputedStyle(document.body).getPropertyValue('--main-text-color');
 
-    // radial chart
+const makeRadialChart = (data, months, years) => {
     var radialChart = am4core.create("radial_chart", am4charts.RadarChart);
 
     let radialTitle = radialChart.titles.create();
@@ -52,13 +48,11 @@ am4core.ready(function() {
     radialTitle.marginBottom = 10;
     radialTitle.fill = am4core.color(mainTextColor);
 
-    var radialData = [];
-    radialChart.data = radialData;
-    //console.log(data);
+    radialChart.data = data;
 
     /* Create axes */
-    //var categoryAxis = chart.xAxes.push(new am4charts.DateAxis());
-    var radialCategoryAxis = radialChart.xAxes.push(new am4charts.CategoryAxis());
+
+    let radialCategoryAxis = radialChart.xAxes.push(new am4charts.CategoryAxis());
     radialCategoryAxis.dataFields.category = "month";
     radialCategoryAxis.fontSize = 9;
     radialCategoryAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
@@ -75,48 +69,23 @@ am4core.ready(function() {
     //radialValueAxis.renderer.labels.template.fontSize = 15;
 
     /* Create and configure series */
-    //TODO: make these series in a more efficient way
-    var radialSeries1 = radialChart.series.push(new am4charts.RadarSeries());
-    radialSeries1.dataFields.valueY = "value1";
-    radialSeries1.dataFields.categoryX = "month" //"date";
-    radialSeries1.strokeWidth = 1.5;
-    radialSeries1.tooltipText = "{valueY}";
-    radialSeries1.name = "2016"
-    radialSeries1.stroke = am4core.color("#F98293"); // red
-    radialSeries1.tooltip.getFillFromObject = false;
-    radialSeries1.tooltipText = "[bold] {name}: [/]{valueY.formatNumber('#,###.0')} Ha[/]";
-    radialSeries1.tooltip.background.fill = am4core.color("#F98293");
-
-    //radialSeries1.bullets.create(am4charts.CircleBullet);
-    //radialSeries1.dataItems.template.locations.dateX = 0.5;
-
-    var radialSeries2 = radialChart.series.push(new am4charts.RadarSeries());
-    radialSeries2.dataFields.valueY = "value2";
-    radialSeries2.dataFields.categoryX = "month"; //"date";
-    radialSeries2.strokeWidth = 1.5;
-    radialSeries2.tooltipText = "{valueY}";
-    radialSeries2.name = "2017";
-    radialSeries2.stroke = am4core.color("#2AC2BB"); // red
-    radialSeries2.tooltip.getFillFromObject = false;
-    //radialSeries2.tooltip.background.fill = am4core.color("#");
-    radialSeries2.tooltipText = "[bold] {name}: [/]{valueY.formatNumber('#,###.0')} Ha[/]";
-    radialSeries2.tooltip.background.fill = am4core.color("#2AC2BB"); // red
-    //radialSeries2.tooltip.background.fill = am4core.
-    //radialSeries2.bullets.create(am4charts.CircleBullet);
-    //radialSeries2.dataItems.template.locations.dateX = 0.5;
-
-    var radialSeries3 = radialChart.series.push(new am4charts.RadarSeries());
-    radialSeries3.dataFields.valueY = "value3";
-    radialSeries3.dataFields.categoryX = "month"; //"date";
-    radialSeries3.strokeWidth = 1.5;
-    radialSeries3.tooltipText = "{valueY}";
-    radialSeries3.name = "2018";
-    radialSeries3.stroke = am4core.color("#FDA259"); // red
-    radialSeries3.tooltipText = "[bold] {name}: [/]{valueY.formatNumber('#,###.0')} Ha[/]";
-    radialSeries3.tooltip.getFillFromObject = false;
-    radialSeries3.tooltip.background.fill = am4core.color("#FDA259");
-    //radialSeries2.bullets.create(am4charts.CircleBullet);
-    //radialSeries3.dataItems.template.locations.X = 0.5;
+    const createRadialSeries = (chart, value, category, name, color) => {
+        let radialSeries = chart.series.push(new am4charts.RadarSeries());
+        radialSeries.dataFields.valueY = value;
+        radialSeries.dataFields.categoryX = category;
+        radialSeries.strokeWidth = 1.5;
+        radialSeries.tooltipText = "{valueY}";
+        radialSeries.name = name
+        radialSeries.stroke = am4core.color(color); // red
+        radialSeries.tooltip.getFillFromObject = false;
+        radialSeries.tooltipText = "[bold] {name}: [/]{valueY.formatNumber('#,###.0')} Ha[/]";
+        radialSeries.tooltip.background.fill = am4core.color(color);
+    }
+
+    let seriesColor = ["#F98293", "#2AC2BB", "#FDA259"];
+    years.forEach( (year, i) => {
+        createRadialSeries(radialChart, year, "month", year, seriesColor[i]);
+    });
 
     radialChart.scrollbarX = new am4core.Scrollbar();
     radialChart.scrollbarX.minHeight = 1;
@@ -128,94 +97,22 @@ am4core.ready(function() {
     customizeGrip(radialChart.scrollbarY.startGrip);
     customizeGrip(radialChart.scrollbarY.endGrip);
 
-    //TODO: make these ranges in a more efficient way
-    var range_estiaje = radialCategoryAxis.axisRanges.create();
-    range_estiaje.category = "March";
-    range_estiaje.endcategory = "April";
-    range_estiaje.axisFill.fill = am4core.color("#595952");
-    //range_estiaje.axisFill.fill = am4core.color("#DFA34D");
-    range_estiaje.axisFill.fillOpacity = 0.4;
-    range_estiaje.grid.strokeOpacity = 0;
-
-    var range_estiaje_1 = radialCategoryAxis.axisRanges.create();
-    range_estiaje_1.category = "April";
-    range_estiaje_1.endcategory = "May";
-    range_estiaje_1.axisFill.fill = am4core.color("#595952");
-    //range_estiaje_1.axisFill.fill = am4core.color("#DFA34D");
-    range_estiaje_1.axisFill.fillOpacity = 0.4;
-    range_estiaje_1.grid.strokeOpacity = 0;
-
-    var range_lluvTropical = radialCategoryAxis.axisRanges.create();
-    range_lluvTropical.category = "May";
-    range_lluvTropical.endcategory = "June";
-    //range_lluvTropical.date = new Date(2020, 4, 1);
-    //range_lluvTropical.endDate = new Date(2020, 8, 1);
-    range_lluvTropical.axisFill.fill = am4core.color("#838278");
-    range_lluvTropical.axisFill.fillOpacity = 0.4;
-    range_lluvTropical.grid.strokeOpacity = 0;
-
-    var range_lluvTropical_1 = radialCategoryAxis.axisRanges.create();
-    range_lluvTropical_1.category = "June";
-    range_lluvTropical_1.endcategory = "July";
-    range_lluvTropical_1.axisFill.fill = am4core.color("#838278");
-    range_lluvTropical_1.axisFill.fillOpacity = 0.4;
-    range_lluvTropical_1.grid.strokeOpacity = 0;
-
-    var range_lluvTropical_2 = radialCategoryAxis.axisRanges.create();
-    range_lluvTropical_2.category = "July";
-    range_lluvTropical_2.endcategory = "August";
-    range_lluvTropical_2.axisFill.fill = am4core.color("#838278");
-    range_lluvTropical_2.axisFill.fillOpacity = 0.4;
-    range_lluvTropical_2.grid.strokeOpacity = 0;
-
-    var range_lluvTropical_3 = radialCategoryAxis.axisRanges.create();
-    range_lluvTropical_3.category = "August";
-    range_lluvTropical_3.endcategory = "September";
-    range_lluvTropical_3.axisFill.fill = am4core.color("#838278");
-    range_lluvTropical_3.axisFill.fillOpacity = 0.4;
-    range_lluvTropical_3.grid.strokeOpacity = 0;
-
-    var range_lluvTropicalInv = radialCategoryAxis.axisRanges.create();
-    range_lluvTropicalInv.category = "September";
-    range_lluvTropicalInv.endcategory = "October";
-    range_lluvTropicalInv.axisFill.fill = am4core.color("#B1AE9F");
-    range_lluvTropicalInv.axisFill.fillOpacity = 0.4;
-    range_lluvTropicalInv.grid.strokeOpacity = 0;
-
-    var range_lluvTropicalInv_1 = radialCategoryAxis.axisRanges.create();
-    range_lluvTropicalInv_1.category = "October";
-    range_lluvTropicalInv_1.endcategory = "November";
-    range_lluvTropicalInv_1.axisFill.fill = am4core.color("#B1AE9F");
-    range_lluvTropicalInv_1.axisFill.fillOpacity = 0.4;
-    range_lluvTropicalInv_1.grid.strokeOpacity = 0;
-
-    var range_lluvTropicalInv_2 = radialCategoryAxis.axisRanges.create();
-    range_lluvTropicalInv_2.category = "November";
-    range_lluvTropicalInv_2.endcategory = "December";
-    range_lluvTropicalInv_2.axisFill.fill = am4core.color("#B1AE9F");
-    range_lluvTropicalInv_2.axisFill.fillOpacity = 0.4;
-    range_lluvTropicalInv_2.grid.strokeOpacity = 0;
-
-    var range_lluvInv = radialCategoryAxis.axisRanges.create();
-    range_lluvInv.category = "December";
-    range_lluvInv.endcategory = "January";
-    range_lluvInv.axisFill.fill = am4core.color("#E1DBC8");
-    range_lluvInv.axisFill.fillOpacity = 0.4;
-    range_lluvInv.grid.strokeOpacity = 0;
-
-    var range_lluvInv_1 = radialCategoryAxis.axisRanges.create();
-    range_lluvInv_1.category = "January";
-    range_lluvInv_1.endcategory = "February";
-    range_lluvInv_1.axisFill.fill = am4core.color("#E1DBC8");
-    range_lluvInv_1.axisFill.fillOpacity = 0.4;
-    range_lluvInv_1.grid.strokeOpacity = 0;
-
-    var range_lluvInv_2 = radialCategoryAxis.axisRanges.create();
-    range_lluvInv_2.category = "February";
-    range_lluvInv_2.endcategory = "March";
-    range_lluvInv_2.axisFill.fill = am4core.color("#E1DBC8");
-    range_lluvInv_2.axisFill.fillOpacity = 0.4;
-    range_lluvInv_2.grid.strokeOpacity = 0;
+    const makeRadialRange = (start, end, color, span) => {
+        let radialRange = radialCategoryAxis.axisRanges.create();
+        radialRange.category = start;
+        radialRange.endcategory = end;
+        radialRange.axisFill.fill = am4core.color(color);
+        radialRange.axisFill.fillOpacity = 0.4;
+        radialRange.grid.strokeOpacity = 0;
+        radialRange.locations.endCategory = span ? span : "";
+    }
+
+    let radialRangeColors = ["#E1DBC8", "#595952", "#838278", "#B1AE9F"];
+    makeRadialRange("enero", "marzo", radialRangeColors[0], 2);
+    makeRadialRange("marzo", "mayo", radialRangeColors[1], 2);
+    makeRadialRange("mayo", "septiembre", radialRangeColors[2], 4);
+    makeRadialRange("septiembre", "diciembre", radialRangeColors[3], 3);
+    makeRadialRange("diciembre", "diciembre", radialRangeColors[0], 1);
 
     radialChart.cursor = new am4charts.RadarCursor();
 
@@ -228,7 +125,6 @@ am4core.ready(function() {
         { name: "Tropical", fill: am4core.color("#838278") },
         { name: "Tropical-Invernal", fill: am4core.color("#B1AE9F") },
         { name: "Invernal", fill: am4core.color("#E1DBC8") }
-
     ];
 
     radialChart.legend.data = legenddata;
@@ -237,6 +133,14 @@ am4core.ready(function() {
     var markerTemplate = radialChart.legend.markers.template;
     markerTemplate.width = 20;
     markerTemplate.height = 20;
+}
+am4core.ready(function() {
+
+    // Themes begin
+    am4core.useTheme(am4themes_animated);
+    am4core.useTheme(grijalva_theme);
+    //let mainTextColor = getComputedStyle(document.body).getPropertyValue('--main-text-color');
+    // Themes end
 
     // linea chart
     let lineChart = am4core.create("linesChart", am4charts.XYChart);

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
-    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()];
-    }
+    });
+    // wait for all queries to complete and then set chart data
+    Promise.all(queries).then( data => {
 
-    // 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);
-    }
+        // 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' });
 
-    radialChart.data = cart;
+        // 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);
+    });
 
     //++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ LINE CHART
     let data_ls = [];