395 Control date filters via text input

docs/Gemfile.lock

@@ -1,10 +1,11 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    addressable (2.4.0)
+    addressable (2.5.1)
+      public_suffix (~> 2.0, >= 2.0.2)
     colorator (1.1.0)
-    ffi (1.9.14)
-    ffi (1.9.14-x64-mingw32)
+    ffi (1.9.18)
+    ffi (1.9.18-x64-mingw32)
     forwardable-extended (2.6.0)
     jekyll (3.3.1)
       addressable (~> 2.4)
@@ -21,20 +22,21 @@ GEM
       sass (~> 3.4)
     jekyll-watch (1.5.0)
       listen (~> 3.0, < 3.1)
-    kramdown (1.13.2)
+    kramdown (1.14.0)
     liquid (3.0.6)
     listen (3.0.8)
       rb-fsevent (~> 0.9, >= 0.9.4)
       rb-inotify (~> 0.9, >= 0.9.7)
     mercenary (0.3.6)
     pathutil (0.14.0)
       forwardable-extended (~> 2.6)
-    rb-fsevent (0.9.8)
-    rb-inotify (0.9.7)
-      ffi (>= 0.5.0)
+    public_suffix (2.0.5)
+    rb-fsevent (0.10.2)
+    rb-inotify (0.9.10)
+      ffi (>= 0.5.0, < 2)
     rouge (1.11.1)
     safe_yaml (1.0.4)
-    sass (3.4.22)
+    sass (3.4.25)
 
 PLATFORMS
   ruby

docs/tool/css/styles.css

@@ -65,6 +65,68 @@ html, body {
     font-weight: bold;
 }
 
+/* Text input boxes within sidebars */
+div.filter.content input.filter-text{
+    display: inline-block;
+    position: relative;
+    height: 2em;
+    border: 1px solid rgb(230, 230, 230);
+    box-sizing: border-box;
+}
+
+div.filter.content input.year-text {
+    width: 40px;
+}
+div.filter.content input.month-text, 
+div.filter.content input.day-text {
+    width: 20px;
+}
+
+div.filter.content .continuous-input-text{
+    width: 40px;
+}
+
+.text-input.date span{
+    margin-left: .3em;
+    margin-right: .3em;
+}
+.text-input.continuous span{
+    margin-left: 3em;
+    margin-right: 3em;
+}
+
+.text-input{
+    margin-left: 20px;
+}
+
+button.nullValuesToggleSubmit{
+    height: 1.5em;
+    width: 1.5em;
+    background: rgb(100, 100, 100);
+    display: inline-block;
+    position: relative;
+    border: none;
+    border-radius: 5px;
+    vertical-align: middle;
+    margin-left:2px;
+}
+
+/* drawn from https://codepen.io/jonneal/pen/kptBs */
+button.nullValuesToggleSubmit::before {
+    border-style: solid;
+    border-width: .25em .25em 0 0;
+    content: '';
+    display: inline-block;
+    position: relative;
+    vertical-align: top;
+    top: .3em;
+    left: -.1em;
+    transform: rotate(45deg);
+    width: .75em;
+    height: .75em;
+    border-color: white;
+}
+
 /*Color code the text for projects that match the specified filters*/
 .matching {
     color:rgba(253,126,35,0.7) !important;
@@ -214,7 +276,6 @@ html, body {
 }
 */
 
-
 .sidebar-inner-wrapper>div {
     flex-grow: 1;
 }
@@ -227,6 +288,17 @@ html, body {
     cursor: pointer;
 }
 
+.nullsToggleContainer{
+    margin-top: 5px;
+    margin-left: 25px;
+}
+
+.nullsToggleContainer input[type=checkbox]{
+    display: inline-block;
+    margin-right: 3px;
+    vertical-align: top;
+}
+
 #pie-charts {
     display: flex;
     justify-content: space-around;

docs/tool/js/util/filter.js

@@ -2,7 +2,8 @@ var filterUtil = {
 
 	init: function(){
 		setSubs([
-			['filterValues', filterUtil.publishFilteredData],
+            ['filterValues', filterUtil.publishFilteredData],
+            ['nullsShown', filterUtil.publishFilteredData]
 		]);
 
         // dataRequest is an object {name:<String>, url: <String>[,callback:<Function>]]}
@@ -14,8 +15,23 @@ var filterUtil = {
 
 	},
 
-	filteredData: [],
-
+    filteredData: [],
+    getNullsShown: function(){
+        var state = getState();
+        //Extract just the nullsShown stuff from our state
+        //state is stored as nullsShown.data_id with period as part of the object's key. 
+
+        var nullsShown = {};
+
+        for (key in state) {
+            splitKey = key.split(".");
+            if (splitKey[0]=='nullsShown') {
+                var currentState = state[key]
+                nullsShown[splitKey[1]] = currentState;
+            };
+        };
+        return nullsShown;
+    },
     getFilterValues: function(){
         var state = getState();
 
@@ -30,13 +46,26 @@ var filterUtil = {
                 filterValues[splitKey[1]] = currentState
             };
         };
-        return filterValues
+        return filterValues;
     },
 
 	filterData: function(data){ 	
 
 		var workingData = model.dataCollection['filterData'].items; 
-		var filterValues = filterUtil.getFilterValues();
+        var nullsShown = filterUtil.getNullsShown();
+        var filterValues = filterUtil.getFilterValues();
+
+        for (var key in nullsShown){
+            var component = (filterView.components.filter(function(obj){
+                return obj.source == key;
+            }))[0];
+
+            if (component.component_type == 'continuous' || component.component_type == 'date'){
+                workingData = workingData.filter(function(d){
+                    return d[key] !== null || nullsShown[key][0];
+                });
+            }
+        }
 
 		for (key in filterValues) { // iterate through registered filters
 
@@ -49,7 +78,8 @@ var filterUtil = {
 			if (component['component_type'] == 'continuous') { //filter data for a 'continuous' filter
 
                 if (filterValues[key][0].length == 0){
-                    //don't filter because the filter has been removed
+                    // don't filter because the filter has been removed.
+                    // The length would be '1' because nullsShown is always included.
                 } else {
                     //javascript rounding is weird
                     var decimalPlaces = component['data_type'] == 'integer' ? 0 : 2 //ternary operator
@@ -58,14 +88,37 @@ var filterUtil = {
 
                     //filter it
                     workingData = workingData.filter(function(d){
+                    // Refer to the third element of the most recent value of
+                    // filterValues, which is a boolean indicating whether
+                    // null values will be shown.
+                        if(d[key] === null){
+                            return nullsShown[key];
+                        }
     					return (d[key] >= min && d[key] <= max);
     				});
                 };
 			}
 
 			if (component['component_type']== 'date') {
-				//TODO determine whether dates will always be published as [start, end], or, if
-				// not, in what format
+
+                workingData = workingData.filter(function(d){
+                   // Refer to the third element of the most recent value of
+                   // filterValues, which is a boolean indicating whether
+                   // null values will be shown.
+                    if(d[key] === null){
+                        return nullsShown[key];
+                    }
+
+                    // If the filter is 'empty' and the value isn't null,
+                    // show the project.
+                    if(filterValues[key][0].length === 0){
+                        return true;
+                    }
+
+                    return d[key].valueOf() >= filterValues[key][0][0].valueOf() 
+                        && d[key].valueOf() <= filterValues[key][0][1].valueOf();
+                });
+
 			}
 
 			if (component['component_type'] == 'categorical') {