diff --git a/src/web/static/data/shelters-sample.csv b/src/web/static/data/shelters-sample.csv index 92dec9040b703f23e35b33973ca87d08c8efb71e..0ec0760051e984da698833b02bdf8fc148982ba2 100644 --- a/src/web/static/data/shelters-sample.csv +++ b/src/web/static/data/shelters-sample.csv @@ -1,6 +1,6 @@ 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,, \ No newline at end of file +NP022,Luxembourg RC Shelter 2,Asia Pacific,Nepal,flood,28.8878888889,80.3958888889,moist tropical,2009,3000,, \ No newline at end of file diff --git a/src/web/static/js/dashboard.js b/src/web/static/js/dashboard.js index b12c4edcfb75c3dc690ae82cef3643150e33cd01..470c7503ceaeee26693ce9d08dea2a68585cf920 100644 --- a/src/web/static/js/dashboard.js +++ b/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); - } - } -} - diff --git a/src/web/templates/dashboard.html b/src/web/templates/dashboard.html index 4a36703b23b8c666ceda9e63e8d3373515d12a10..106c21893c2a9c79babee2e69a7c72c8f8b6a1e1 100644 --- a/src/web/templates/dashboard.html +++ b/src/web/templates/dashboard.html @@ -46,12 +46,6 @@ + + +