Merge branch 'master' of https://github.com/rodekruis/shelter-database

documentation/api_v0.1.rst

@@ -4,16 +4,18 @@ Web Services
 Usage of the development API v0.1
 ---------------------------------
 request parameters:
-	'<attribute>' - pass one or more attribute names, such as '<attribute=Name,Vegetation>'
+	**attribute**: pass one or more attribute names, such as `<attribute=Name,Vegetation>`
 	NOTE: Currently the attribute names may contain capital letters and spaces.
-	Spaces should be substituted as '<%20>' int the URL, for example
-	'<Climate%20Zone>'. An alternative "coding-friendly" attribute naming will be implemented shortly,
+	Spaces should be substituted as `<%20>` int the URL, for example
+	`<Climate%20Zone>`. An alternative "coding-friendly" attribute naming will be implemented shortly,
 	as unique strings for each attribute whithout spaces and upper case letters.
-	'<format>' - use '<format=prettytext>' to get the nicely formatted attribute names in the JSON,
+	
+	**format**: use `<format=prettytext>` to get the nicely formatted attribute names in the JSON,
 	instead of the "coding-friendly" attribute names.
 	
 
 Examples:
+
 .. code-block:: shell
     
     http://0.0.0.0:5000/api/v0.1

src/web/static/css/style2.css

@@ -817,3 +817,14 @@ section.map {
 .stats .table {
    font-size: smaller;
 }
+
+.stats h5 {
+  margin-top:20px;
+}
+.leaflet-container a {
+  margin-left:0px !important;
+}
+
+.dc-chart text {
+      fill: black !important;
+    }
\ No newline at end of file

src/web/static/css/style_new.css

@@ -811,4 +811,27 @@ section.map {
   display: initial; }
 
 #tabs.tab2 .tabcontent2 {
-  display: initial; }
+  display: initial ; }
+
+.stats {
+  display: inline-block;
+}
+
+.stats .table {
+   font-size: smaller !important;
+}
+
+.stats .table tr td {
+  font-weight: normal !important; ;
+}
+
+.stats h5 {
+  margin-top:20px;
+}
+.leaflet-container a {
+  margin-left:0px !important;
+}
+
+.dc-chart text {
+      fill: black !important;
+    }

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

-ID,Name of shelter,Zone,Country,Associated disaster / Immediate cause,GPS Latitude,GPS Longitude,Climate zone,Year of construction (first completed shelters)
-BI024,Adobe block house,Africa,Burundi,conflict related,,30.0083055556,moist tropical,2011
-BI025,Plastic sheeting refugee shelter,Africa,Burundi,conflict related,3.3563611111,30.2743333333,moist tropical,2009
-BD021,Self Built Hut,Asia,Bangladesh,storm/cyclone,22.6861111111,89.8679166667,moist tropical,2009
-HT020,"CHF, Steel Frame Shelter",Americas & Caribbean,Haiti,earthquake,18.427825-72.8627139,-72.5347444,moist tropical,2010
-NP022,Luxembourg RC Shelter 2,Asia,Nepal,flood,28.8878888889,80.3958888889,moist tropical,
+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 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 Pacific,Nepal,flood,28.8878888889,80.3958888889,moist tropical,2009,3000,,
\ No newline at end of file

src/web/static/js/dashboard.js

@@ -2,7 +2,7 @@
  * Created by nlrc on 22-7-16.
  */
 
-     $(document).ready(function () {
+$(document).ready(function () {
 
 
     var zoneChart = dc.pieChart('#chart-ring-zone')
@@ -12,10 +12,16 @@
     var countryChart = dc.rowChart('#chart-bar-country')
     var mapChart = dc_leaflet.markerChart("#chart-map")
     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) {
+    // d3.json("api/v0.1/shelters", function(dataObject) {
     //
     //      var data = []
     //      for (var key in dataObject) {
@@ -31,14 +37,19 @@
         var all = ndx.groupAll();
         var dataCount = dc.dataCount('#data-count')
         var zoneDimension = ndx.dimension(function (d) {
-                    return d.Zone;
+            if (d.zone) {
+                return d.zone;
+            } else {
+                return "No data"
+            }
         });
+
         var zoneCount = zoneDimension.group().reduceCount()
 
 
         var crisisDimension = ndx.dimension(function (d) {
-                    if (d['Associated disaster / Immediate cause']) {
-                        return d['Associated disaster / Immediate cause'];
+            if (d['associateddisasterimmediatecause']) {
+                return d['associateddisasterimmediatecause'];
             } else {
                 return 'No data'
             }
@@ -46,8 +57,8 @@
         });
         var crisisCount = crisisDimension.group().reduceCount()
         var climateDimension = ndx.dimension(function (d) {
-                    if (d['Climate zone']) {
-                        return d['Climate zone'];
+            if (d['climatezone']) {
+                return d['climatezone'];
             } else {
                 return 'No data'
             }
@@ -57,8 +68,8 @@
 
 
         var timeDimension = ndx.dimension(function (d) {
-                    if (d['Year of construction (first completed shelters)']) {
-                        return d3.time.year(dateFormat.parse(d['Year of construction (first completed shelters)']));
+            if (d['yearofconstructionfirstcompletedshelters']) {
+                return d3.time.year(dateFormat.parse(d['yearofconstructionfirstcompletedshelters']));
             }
             else {
                 return undefined;
@@ -67,8 +78,8 @@
         });
         var timeCount = timeDimension.group().reduceCount(
             function (d) {
-                            if (d['Year of construction (first completed shelters)']) {
-                                return d['Year of construction (first completed shelters)'];
+                if (d['yearofconstructionfirstcompletedshelters']) {
+                    return d['yearofconstructionfirstcompletedshelters'];
                 } else {
                     return undefined;
                 }
@@ -77,9 +88,8 @@
         );
 
         var shelters = ndx.dimension(function (d) {
-                    if (d['GPS Latitude'] && d['GPS Longitude'])
-                    {
-                        return [d['GPS Latitude'], d['GPS Longitude']];
+            if (d['gpslatitude'] && d['gpslongitude']) {
+                return [d['gpslatitude'], d['gpslongitude']];
             } else {
                 return undefined;
             }
@@ -87,8 +97,8 @@
         });
 
         var countryDimension = ndx.dimension(function (d) {
-                    if (d.Country) {
-                        return d.Country;
+            if (d.country) {
+                return d.country;
             } else {
                 return 'No data'
             }
@@ -96,6 +106,16 @@
         })
         var countryCount = countryDimension.group().reduceCount()
 
+        var topographyDimension = ndx.dimension(function (d) {
+            if (d.topography) {
+                return d.topography;
+            } else {
+                return 'No data'
+            }
+
+        })
+        var topographyCount = topographyDimension.group().reduceCount()
+
 
         var sheltersGroup = shelters.group().reduceCount();
 
@@ -105,9 +125,11 @@
             .zoom(2)
             .filterByArea(true)
             .cluster(true)
-                        .on("filtered", getFiltersValues);
+            .on("filtered", onFiltered);
 
         addLayersToChart(mapChart)
+        mapChart.map().scrollWheelZoom.disable()
+
 
         zoneChart
             .width(110)
@@ -115,8 +137,7 @@
             .dimension(zoneDimension)
             .group(zoneCount)
             .innerRadius(20)
-                        .on("filtered", getFiltersValues);
-
+            .on("filtered", onFiltered);
 
         crisisChart
             .width(110)
@@ -124,7 +145,7 @@
             .dimension(crisisDimension)
             .group(crisisCount)
             .innerRadius(20)
-                        .on("filtered", getFiltersValues);
+            .on("filtered", onFiltered);
 
 
         climateChart
@@ -133,7 +154,7 @@
             .dimension(climateDimension)
             .group(climateCount)
             .innerRadius(20)
-                        .on("filtered", getFiltersValues);
+            .on("filtered", onFiltered);
         ;
 
         timeChart
@@ -142,23 +163,40 @@
             .dimension(timeDimension)
             .group(timeCount)
             .barPadding(5)
-                        .x(d3.time.scale().domain([new Date(2008, 01, 01), new Date()]))
+            .x(d3.time.scale().domain([new Date(2003, 01, 01), new Date()]))
             .xUnits(d3.time.year)
-                        .on("filtered", getFiltersValues)
+            .on("filtered", onFiltered)
             .yAxis().tickFormat(
-                        function (v) { return d3.format('f')(v) ; });
+            function (v) {
+                return d3.format('f')(v);
+            });
 
 
         countryChart
-                        .width(150)
-                        .height(250)
-                        .margins({left:0, right:10, top:10, bottom:20})
+            .width(200)
+            .height(200)
+            .margins({left: 0, right: 10, top: 10, bottom: 20})
             .dimension(countryDimension)
             .group(countryCount)
-                        .on("filtered", getFiltersValues)
+            .on("filtered", onFiltered)
             .xAxis().tickFormat(
-                        function (v) { return d3.format('f')(v) ; });
+            function (v) {
+                return d3.format('f')(v);
+            });
 
+        countryChart.xAxis().ticks(10)
+
+        topographyChart
+            .width(200)
+            .height(200)
+            .margins({left: 0, right: 10, top: 10, bottom: 20})
+            .dimension(topographyDimension)
+            .group(topographyCount)
+            .on("filtered", onFiltered)
+            .xAxis().tickFormat(
+            function (v) {
+                return d3.format('f')(v);
+            });
 
 
         tableChart
@@ -168,22 +206,22 @@
             })
             .columns([
                 function (d) {
-                                return d.ID;
+                    return d.id;
                 },
                 function (d) {
-                                return d['Name of shelter'];
+                    return d['nameofshelter'];
                 },
                 function (d) {
-                                return d.Zone;
+                    return d.zone;
                 },
                 function (d) {
-                                return d.Country;
+                    return d.country;
                 },
                 function (d) {
-                                return d['Associated disaster / Immediate cause'];
+                    return d[''];
                 },
                 function (d) {
-                                return d['Climate zone'];
+                    return d['climatezone'];
                 }
             ])
             .on('renderlet', function (table) {
@@ -199,7 +237,8 @@
         // Init chart filters
 
         function initFilters() {
-                    var parseHash = /^#zone=([A-Za-z0-9,_\-\/\s]*)&crisis=([A-Za-z0-9,_\-\/\s]*)&climate=([A-Za-z0-9,_\-\/\s]*)&time=([A-Za-z0-9,_\-\/\s\(\):+]*)&country=([A-Za-z0-9,_\-\/\s]*)&map=(.*)$/;
+
+            var parseHash = /^#zone=([A-Za-z0-9,_\-\/\s]*)&crisis=([A-Za-z0-9,_\-\/\s]*)&climate=([A-Za-z0-9,_\-\/\s]*)&time=([A-Za-z0-9,_\-\/\s\(\):+]*)&country=([A-Za-z0-9,_\-\/\s]*)&topography=([A-Za-z0-9,_\-\/\s]*)$/;
             var parsed = parseHash.exec(decodeURIComponent(location.hash.replace(/\+/g, ' ')));
             // console.log("parsed:", parsed)
             function filter(chart, rank) {
@@ -209,61 +248,91 @@
                 }
                 else {
                     var filterValues = parsed[rank].split(",");
+                    // console.log(filterValues)
 
-                            if (rank ==4 && filterValues.length==2) {   //filtering timeChart
+                    switch (rank) {
+                        case 4: //timeChart
+                            chart.filter(null);
+                            if (filterValues.length == 2) {
                                 filterValues[i] = new Date(filterValues[i])
                                 var start = new Date(filterValues[0])
                                 var end = new Date(filterValues[1])
-                                chart.filter(dc.filters.RangedFilter(start,end))
+                                chart.filter(dc.filters.RangedFilter(start, end))
                             }
-                            else {
-                                if (rank ==6) {
+                            break;
+                        case 7: //mapChart
                             // console.log('parsed:', filterValues)
                             // filterValues = JSON.parse(filterValues)
                             // console.log(filterValues)
-
-                                } else {
+                            break;
+                        default:
                             for (var i = 0; i < filterValues.length; i++) {
                                 chart.filter(filterValues[i]);
                             }
                     }
                 }
-
-                        }
             }
-
             if (parsed) {
                 filter(zoneChart, 1);
                 filter(crisisChart, 2);
                 filter(climateChart, 3);
                 filter(timeChart, 4);
-                        filter(countryChart, 5)
-                        filter(mapChart, 6);
+                filter(countryChart, 5);
+                filter(topographyChart, 6);
+                // filter(mapChart, 7);
             }
 
+
             dc.renderAll();
 
         }
 
 
         d3.select('#download')
-                .on('click', function() {
+            .on('click', function () {
                 var data = allDimensions.top(Infinity);
                 var blob = new Blob([d3.csv.format(data)], {type: "text/csv;charset=utf-8"});
                 saveAs(blob, 'data.csv');
             });
 
+
+
+        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("");
+
     });
 
 
     // Serializing filters values in URL
+
+
     function getFiltersValues() {
         var filters = [
             {name: 'zone', value: zoneChart.filters()},
@@ -271,7 +340,8 @@
             {name: 'climate', value: climateChart.filters()},
             {name: 'time', value: timeChart.filters()},
             {name: 'country', value: countryChart.filters()},
-                    { name: 'map', value: JSON.stringify(mapChart.filters())}
+            {name: 'topography', value: topographyChart.filters()},
+            // {name: 'map', value: JSON.stringify(mapChart.filters())}
         ];
 
         // console.log("map:")
@@ -287,25 +357,86 @@
     d3.selectAll('#zone').on('click', function () {
         zoneChart.filterAll();
         dc.redrawAll();
+        $("#zoneFilter").val("");
+
     });
     d3.selectAll('#crisis').on('click', function () {
         crisisChart.filterAll();
         dc.redrawAll();
+        $("#disasterFilter").val(<