Fix chart divs, names, and containers + radar chart legend

public/grijalva/index2.html

@@ -72,19 +72,27 @@
                 <div class="col-md-6" id="story">
                     <div class="loader"></div>
                     <div class="row h-50 border-bottom">
-                        <div class="col-6 border-right" id="radial_chart">
-                            <div id="radial_chart2"></div>
+                        <div class="col-6 border-right">
+                            <div class="row h-100">
+                                <div id="radarChart"></div>
+                            </div>
+                        </div>
+                        <div class="col-6">
+                            <div class="row h-100">
+                                <div id="lineChart"></div>
                             </div>
-                        <div class="col-6" id="linesChart">
-                            <div id="linesChart2"></div>
                         </div>
                     </div>
                     <div class="row h-50">
-                        <div class="col-6 border-right" id="stackedAreaChart">
-                            <div id="dlccpo-graph2"></div>
+                        <div class="col-6 border-right">
+                            <div class="row h-100">
+                                <div id="areaChart"></div>
+                            </div>
+                        </div>
+                        <div class="col-6">
+                            <div class="row h-100">
+                                <div id="barChart"></div>
                             </div>
-                        <div class="col-6" id="dimfrcpo-graph">
-                            <div id="dimfrcpo-graph2"></div>
                         </div>
                     </div>
                 </div>

public/js/cuerpos_charts.js

@@ -146,7 +146,7 @@ const makeBarSeries = (chart, field, name) => {
 }
 
 const makeRadarChart = (data, months, years) => {
-    let radarChart = am4core.create("radial_chart", am4charts.RadarChart);
+    let radarChart = am4core.create("radarChart", am4charts.RadarChart);
 
     let radarTitle = radarChart.titles.create();
     radarTitle.text = "Superficie total por año";
@@ -196,13 +196,15 @@ const makeRadarChart = (data, months, years) => {
     makeRadarRange(radarCategoryAxis,     "septiembre", "diciembre", radarRangeColors[3], 3);
     makeRadarRange(radarCategoryAxis, "diciembre", "diciembre", radarRangeColors[0], 1);
 
-    radarChart.cursor = new am4charts.RadarCursor();
+    radarChart.cursor = new am4charts.RadarCursor(); //FIXME: cursors are offset
 
     // add line legend
     radarChart.legend = new am4charts.Legend();
     //radarChart.legend.fontSize = 10;
     radarChart.legend.fontSize = 9;
     radarChart.legend.labels.template.fill = am4core.color(mainTextColor);
+    radarChart.legend.itemContainers.template.paddingTop = 0;
+    radarChart.legend.itemContainers.template.paddingBottom = 0;
 
     let legenddata = [{ name: "Estiaje", fill: am4core.color("#595952") },
         { name: "Tropical", fill: am4core.color("#838278") },
@@ -218,11 +220,15 @@ const makeRadarChart = (data, months, years) => {
     let markerTemplate = radarChart.legend.markers.template;
     markerTemplate.width = 20;
     markerTemplate.height = 20;
+    radarChart.legend.itemContainers.template.paddingTop = 0;
+    radarChart.legend.itemContainers.template.paddingRight = -10;
+    radarChart.legend.itemContainers.template.paddingLeft = -10;
+
 }
 
 const makeLineChart = (data) => {
 
-    let lineChart = am4core.create("linesChart", am4charts.XYChart);
+    let lineChart = am4core.create("lineChart", am4charts.XYChart);
     let lineTitle = lineChart.titles.create();
     lineTitle.text = "Superficie por tipo de cuerpo";
     lineTitle.fontSize = 10;
@@ -259,7 +265,7 @@ const makeLineChart = (data) => {
 }
 
 const makeAreaChart = (data) => {
-    let areaChart = am4core.create("stackedAreaChart", am4charts.XYChart);
+    let areaChart = am4core.create("areaChart", am4charts.XYChart);
 
     let areaTitle = areaChart.titles.create();
     areaTitle.text = "Superficie acumulada";
@@ -330,7 +336,7 @@ const makeAreaChart = (data) => {
 }
 
 const makeBarChart = (data) => {
-    let barChart = am4core.create("dimfrcpo-graph", am4charts.XYChart);
+    let barChart = am4core.create("barChart", am4charts.XYChart);
 
     let barTitle = barChart.titles.create();
     barTitle.text = "Conteo por tipo de cuerpo";

public/js/cuerpos_functions.js

@@ -684,7 +684,7 @@ const makeCharts = () => {
     // end bars
 }
 const updateBarChartOnHover = (filterDate, data) => {
-    let popBarsChart = am4core.registry.baseSprites.find(c => c.htmlContainer.id === "dimfrcpo-graph");
+    let popBarsChart = am4core.registry.baseSprites.find(c => c.htmlContainer.id === "barChart");
     let areclass = data.filter(d => d.date.valueOf() == filterDate.valueOf());
     let elementpb = {},
         cart_pb = [];
@@ -717,7 +717,7 @@ const updateCharts = () => {
     yearList = [... new Set(userDates.map( date => new Date(date).getFullYear() ))];
 
     // update radar chart
-    let radarChart = am4core.registry.baseSprites.find(c => c.htmlContainer.id === "radial_chart");
+    let radarChart = am4core.registry.baseSprites.find(c => c.htmlContainer.id === "radarChart");
 
     const queries = userDates.map( async (date, i) => {
         // check what month has not been queried before and query it
@@ -758,8 +758,8 @@ const updateCharts = () => {
     });
 
     // 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");
+    let lineChart = am4core.registry.baseSprites.find(c => c.htmlContainer.id === "lineChart"),
+        areaChart = am4core.registry.baseSprites.find(c => c.htmlContainer.id === "areaChart");
 
     // extract months as values for which there is data already queried
     let chartMonths = lineAreaData.map( d => parseInt(Object.keys(d)[0]) );
@@ -804,7 +804,7 @@ const updateCharts = () => {
         });
 
         // update charts ranges
-        let lineDateAxis = linesChart.xAxes.values[0];
+        let lineDateAxis = lineChart.xAxes.values[0];
         lineDateAxis.axisRanges.clear();
         makeDateRange(lineDateAxis, 0, 2, "#E1DBC8");
         makeDateRange(lineDateAxis, 2, 2, "#595952");
@@ -812,7 +812,7 @@ const updateCharts = () => {
         makeDateRange(lineDateAxis, 8, 3, "#B1AE9F");
         makeDateRange(lineDateAxis, 11, 1, "#E1DBC8");
 
-        let areaDateAxis = stackedAreaChart.xAxes.values[0];
+        let areaDateAxis = areaChart.xAxes.values[0];
         areaDateAxis.axisRanges.clear();
         makeDateRange(areaDateAxis, 0, 2, "#E1DBC8");
         makeDateRange(areaDateAxis, 2, 2, "#595952");
@@ -822,15 +822,15 @@ const updateCharts = () => {
 
         // updte chart data
         chartData.sort((a, b) => (a.date > b.date) ? 1 : -1);
-        linesChart.data = chartData;
-        linesChart.invalidateRawData();
-        stackedAreaChart.data = chartData;
-        stackedAreaChart.invalidateRawData();
+        lineChart.data = chartData;
+        lineChart.invalidateRawData();
+        areaChart.data = chartData;
+        areaChart.invalidateRawData();
     });
 
     // update bar chart
 
-    let barChart = am4core.registry.baseSprites.find(c => c.htmlContainer.id === "dimfrcpo-graph");
+    let barChart = am4core.registry.baseSprites.find(c => c.htmlContainer.id === "barChart");
     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.