Implemented filtering using dropdowns integrated with chart filtering

src/web/static/data/shelters-sample.csv

 id,nameofshelter,zone,country,associateddisasterimmediatecause,gpslatitude,gpslongitude,climatezone,yearofconstructionfirstcompletedshelters,constructioncostperunitusd,topography
 BI024,Adobe block house,Africa,Burundi,conflict related,,30.0083055556,moist tropical,2011,1000,slope
 BI025,Plastic sheeting refugee shelter,Africa,Burundi,conflict related,3.3563611111,30.2743333333,moist tropical,2009,200,flat
-BD021,Self Built Hut,Asia,Bangladesh,storm/cyclone,22.6861111111,89.8679166667,moist tropical,2009,4500,
+BD021,Self Built Hut,Asia Pacific,Bangladesh,storm/cyclone,22.6861111111,89.8679166667,moist tropical,2009,4500,
 HT020,"CHF, Steel Frame Shelter",Americas & Caribbean,Haiti,earthquake,18.427825-72.8627139,-72.5347444,moist tropical,2010,3000,
-NP022,Luxembourg RC Shelter 2,Asia,Nepal,flood,28.8878888889,80.3958888889,moist tropical,2009,3000,,
+NP022,Luxembourg RC Shelter 2,Asia Pacific,Nepal,flood,28.8878888889,80.3958888889,moist tropical,2009,3000,,
\ No newline at end of file

src/web/static/js/dashboard.js

@@ -14,14 +14,19 @@ $(document).ready(function () {
     var tableChart = dc.dataTable("#shelters-table")
     var topographyChart = dc.rowChart('#chart-topography');
 
+     var filterChartMap = {
+        'climateFilter': climateChart, 'zoneFilter': zoneChart, 'commercialFilter': undefined,
+        'disasterFilter': crisisChart,
+        'soilFilter': undefined, 'shelterTypeFilter': undefined, 'countryFilter': countryChart
+    }
 
     d3.csv('/static/data/shelters-sample.csv', function (data) {
     // d3.json("api/v0.1/shelters", function(dataObject) {
-
-         // var data = []
-         // for (var key in dataObject) {
-         //    data.push(dataObject[key])
-         // }
+    //
+    //      var data = []
+    //      for (var key in dataObject) {
+    //         data.push(dataObject[key])
+    //      }
         var dateFormat = d3.time.format('%Y');
 
         var ndx = crossfilter(data);
@@ -292,18 +297,36 @@ $(document).ready(function () {
 
 
 
-        function onFiltered() {
+        function onFiltered(chart) {
+
+
             getFiltersValues();
             generateShelterList(allDimensions.top(Infinity));
+
+            var value = ''
+            if (chart.filters().length>0) {
+                value = chart.filters()[chart.filters().length-1]
+            }
+            
+            for (var filter in filterChartMap) {
+                var chartx = filterChartMap[filter]
+                if (chartx && chartx.filters() == chart.filters()) {
+                    $('#' + filter).val(value);
+                }
+            }
         }
 
          generateShelterList(data);
          initFilters()
+
+
     })
 
     d3.selectAll('#all').on('click', function () {
         dc.filterAll();
         dc.renderAll();
+        $("select").val("");
+
     });
 
 
@@ -334,34 +357,82 @@ $(document).ready(function () {
     d3.selectAll('#zone').on('click', function () {
         zoneChart.filterAll();
         dc.redrawAll();
+        $("#zoneFilter").val("");
+
     });
     d3.selectAll('#crisis').on('click', function () {
         crisisChart.filterAll();
         dc.redrawAll();
+        $("#disasterFilter").val("");
+
     });
     d3.selectAll('#climate').on('click', function () {
         climateChart.filterAll();
         dc.redrawAll();
+        $("#climateFilter").val("");
+
     });
     d3.selectAll('#country').on('click', function () {
         countryChart.filterAll();
         dc.redrawAll();
+        $("#countryFilter").val("");
+
     });
 
 
     d3.selectAll('#cost').on('click', function () {
         costChart.filterAll();
-
         dc.redrawAll();
     });
 
-    d3.selectAll('#topography').on('click', function () {
+     d3.selectAll('#topography').on('click', function () {
         topographyChart.filterAll();
         dc.redrawAll();
     });
 
-    loadFilterValues()
 
+
+    loadFilterDomainValues()
+
+
+     $('select').on('change', function() {
+        if (this.id in filterChartMap && filterChartMap[this.id]) {
+            var value = this.value
+            filterChartMap[this.id].filterAll();
+            if (value) {
+                filterChartMap[this.id].filter(value);
+            }
+
+            dc.redrawAll();
+        }
+     });
+
+    function loadFilterDomainValues() {
+    var filters = {
+        'climateFilter': 'climatezone', 'zoneFilter': 'zone', 'commercialFilter': 'typeofimplementingagency',
+        'disasterFilter': 'associateddisasterimmediatecause',
+        'soilFilter': 'soiltype', 'shelterTypeFilter': 'typeofshelter', 'countryFilter': 'country'
+        // 'topographyFilter': 'topography'
+    }
+
+    for (var filterId in filters) {
+        var dropdown = document.getElementById(filterId)
+        if (dropdown) {
+            (function(attrName, htmlElement) {
+                d3.json("api/v0.1/attributes/" + encodeURI(attrName), function (valuesObject) {
+                    // console.log(attrName + JSON.stringify(valuesObject));
+                    if (valuesObject && valuesObject[attrName]) {
+
+                        var values = valuesObject[attrName].split(';')
+                        for (var i = 0; i < values.length; ++i) {
+                            addOption(htmlElement, values[i], values[i]);
+                        }
+                    }
+                })
+            })(filters[filterId], dropdown);
+        }
+    }
+}
 })
 
 
@@ -438,33 +509,6 @@ addOption = function (selectbox, text, value) {
     selectbox.options.add(optn);
 }
 
-function loadFilterValues() {
-    var filters = {
-        'climateFilter': 'climatezone', 'zoneFilter': 'zone', 'commercialFilter': 'typeofimplementingagency',
-        'disasterFilter': 'associateddisasterimmediatecause',
-        'soilFilter': 'soiltype', 'shelterTypeFilter': 'typeofshelter',
-        // 'topographyFilter': 'topography'
-    }
-
-    for (var filterId in filters) {
-        var dropdown = document.getElementById(filterId)
-        if (dropdown) {
-            (function(attrName, htmlElement) {
-                d3.json("api/v0.1/attributes/" + encodeURI(attrName), function (valuesObject) {
-                    // console.log(attrName + JSON.stringify(valuesObject));
-                    if (valuesObject && valuesObject[attrName]) {
-
-                        var values = valuesObject[attrName].split(';')
-                        for (var i = 0; i < values.length; ++i) {
-                            addOption(htmlElement, values[i], values[i]);
-                        }
-                    }
-                })
-            })(filters[filterId], dropdown);
-        }
-    }
-}
-
 
 
 

src/web/templates/dashboard.html

@@ -46,12 +46,6 @@
                     <select id="climateFilter">
                         <option value="" selected="selected">Climate</option>
                         <option value="" disabled>---</option>
-                        <option value="dry moderate">dry moderate</option>
-                        <option value="dry polar">dry polar</option>
-                        <option value="dry tropical">dry tropical</option>
-                        <option value="moist moderate">moist moderate</option>
-                        <option value="moist polar">moist polar</option>
-                        <option value="moist tropical">moist tropical</option>
                     </select>
                 </label>
                 <label for="zoneFilter" class="button button-drop">
@@ -103,6 +97,14 @@
                                 <option value="" disabled>---</option>
                             </select>
                         </label>
+
+                        <label for="countryFilter" class="button button-small button-drop">
+                            <select id="countryFilter">
+                                <option value="" selected="selected">Country</option>
+                                <option value="" disabled>---</option>
+                            </select>
+                        </label>
+
                         <!--label for="topographyFilter" class="button button-small button-drop">
                             <select id="topographyFilter">
                                 <option value="" selected="selected">Topography</option>