From 7bf461d0972e9df0862e5a8916a21023b67ed7a2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Arne=20Schl=C3=BCter?= Date: Sun, 8 Feb 2015 11:28:30 +0100 Subject: [PATCH] Implement filter by year --- static/js/filter.js | 11 +++++++++- static/js/main.js | 1 + static/js/visualization.js | 44 ++++++++++++++++++++++++++++++++++++-- views/index.tpl | 8 +------ 4 files changed, 54 insertions(+), 10 deletions(-) diff --git a/static/js/filter.js b/static/js/filter.js index fc0fb6c..e5a8e40 100644 --- a/static/js/filter.js +++ b/static/js/filter.js @@ -6,7 +6,7 @@ export default { * @param {Array[String]} categories * @return {Array[Obect]} */ - categories: function (data, categories) { + byCategories: function (data, categories) { return data.filter(function (incident) { for (var i = 0, l = incident.categories.length; i < l; i++) if (categories.indexOf(incident.categories[i]) !== -1) @@ -14,6 +14,15 @@ export default { return false }); + }, + + /** + * Return only the incidents that happened in a given year + */ + byYear: function (data, year) { + return data.filter(function (incident) { + return incident.date.indexOf(year) === 0 + }) } }; diff --git a/static/js/main.js b/static/js/main.js index a3ec3ee..7c94d35 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -23,4 +23,5 @@ $.getJSON('/articles/') visualization.displayMarkers() visualization.setupCategoryFilter('.category-filter') + visualization.setupYearFilter('.year-filter') }); diff --git a/static/js/visualization.js b/static/js/visualization.js index c908e24..7a61fde 100644 --- a/static/js/visualization.js +++ b/static/js/visualization.js @@ -18,7 +18,6 @@ class Visualization { this.colors = colors this._markers = [] - this._$categoryList = null } /** @@ -66,7 +65,7 @@ class Visualization { $(e.target).parent().toggleClass('active') var categories = this.getActiveCategories() - var incidents = filter.categories(this.data, categories) + var incidents = filter.byCategories(this.data, categories) this.displayMarkers(incidents) e.preventDefault() @@ -75,6 +74,47 @@ class Visualization { }) } + /** + * Creates the year list which optionally already holds a button for "all" + * @param {jQuery.Selector} selector The container holding + */ + setupYearFilter (selector) { + var fragment = document.createDocumentFragment() + var $a = $(document.createElement('a')).attr('href', '#') + var $li = $(document.createElement('li')).append($a) + + this._$yearList = $(selector) + + var years = new Set() + this.data.forEach(incident => { years.add(incident.date.substr(0, 4)) }) + + Array.from(years).sort().forEach(function (year) { + $li.clone() + .find('a') + .text(year) + .data({ showYear: year }) + .end() + .appendTo(fragment) + }) + + this._$yearList + .prepend(fragment) + .on('click', 'a', e => { + var $target = $(e.target) + $target.parent().siblings().removeClass('active') + $target.parent().addClass('active') + + var year = $target.data().showYear + var incidents = (year) ? filter.byYear(this.data, year) : this.data + + this.displayMarkers(incidents) + + e.preventDefault() + e.stopPropagation() + return false + }) + } + /** * Creates the correct marker for a single incident and adds it to the map * @param {Object} data A single incident diff --git a/views/index.tpl b/views/index.tpl index 6a2be2b..057ae2d 100644 --- a/views/index.tpl +++ b/views/index.tpl @@ -9,13 +9,6 @@