Fix Grijalva charts

public/grijalva/index.html

@@ -115,28 +115,28 @@
                     <div class="row h-50 border-bottom">
                         <div class="col-6 border-right">
                             <div class="row h-100">
-                                <div id="area-graph" class="w-100"></div>
-                                <div id="radarChart" class="w-100"></div>
+                                <div id="area-graph"></div>
+                                <div id="radarChart"></div>
                             </div>
                         </div>
                         <div class="col-6">
                             <div class="row h-100">
-                                <div id="perimeter-graph" class="w-100"></div>
-                                <div id="lineChart" class="w-100"></div>
+                                <div id="perimeter-graph"></div>
+                                <div id="lineChart"></div>
                             </div>
                         </div>
                     </div>
                     <div class="row h-50">
                         <div class="col-6 border-right">
                             <div class="row h-100">
-                                <div id="costa-graph" class="w-100"></div>
-                                <div id="areaChart" class="w-100"></div>
+                                <div id="costa-graph"></div>
+                                <div id="areaChart"></div>
                             </div>
                         </div>
                         <div class="col-6">
                             <div class="row h-100">
-                                <div id="df-graph" class="w-100"></div>
-                                <div id="barChart" class="w-100"></div>
+                                <div id="df-graph"></div>
+                                <div id="barChart"></div>
                             </div>
                         </div>
                     </div>

public/js/grijalva_functions.js

@@ -379,6 +379,8 @@ const populateMap = async (mapData) => {
         // Highlight plot title according to selected option
         let option = $("#indicatorSelect").val(); // option selected from dropdrown
         d3.select(indicatorVars[option].container).select("svg text.title").classed("active", true);
+
+        $(`${indicatorVars[indicator].container}`).css("width", indicatorVars[indicator].chart.width());
     });
 
 
@@ -455,7 +457,7 @@ const populateMap = async (mapData) => {
         makeBaseMap(); // basemap.js
 
         // fix for leaflet-mapbox-gl v. 0.0.11 that adds map's to tile pane:
-        // get children of map tile pane, create array from it and iterate 
+        // get children of map tile pane, create array from it and iterate
         // setting their z-index
         let glmapChildren = map.getPanes().tilePane.children,
             children = Array.from(glmapChildren);
@@ -526,12 +528,14 @@ const updateCharts = async () => {
         let allData = await getDataInSelection();
         indicators.map( async indicator => {
             indicatorVars[indicator].chart.data( summarizeData(allData, indicator) );
+            $(`${indicatorVars[indicator].container}`).css("width", indicatorVars[indicator].chart.width());
         });
     } else {
         // otherwise use all data
         let allData = await getData();
         indicators.map( async indicator => {
             indicatorVars[indicator].chart.data( allData[indicator]);
+            $(`${indicatorVars[indicator].container}`).css("width", indicatorVars[indicator].chart.width());
         });
     }
     $(".loader").hide("fade", 750);