@@ -78,34 +78,10 @@ module.exports = {
78
78
} ,
79
79
80
80
/**
81
- * Handler for query builder events that result in distinct selection, e.g. string and unique
82
- * type. Single click selects individual element, shift-click adds to selection.
83
- *
84
- * For distinct-type minicharts, this.selectedValues contains an entry for each selected value.
85
- *
86
- * @param {Object } data contains information about the event, @see handleQueryBuilderEvent
81
+ * update the UI after a distinct query and mark appropriate elements with .select class.
82
+ * @param {Object } data data object of the event
87
83
*/
88
- handleEvent_distinct : function ( data ) {
89
- // update selectedValues
90
- if ( ! data . evt [ MODIFIERKEY ] ) {
91
- if ( this . selectedValues . length === 1 && this . selectedValues [ 0 ] . value === data . d . value ) {
92
- // case where 1 element is selected and it is clicked again (need to unselect)
93
- this . selectedValues = [ ] ;
94
- } else {
95
- // case where multiple or no elements are selected (need to select that one item)
96
- this . selectedValues = [ data . d ] ;
97
- }
98
- } else if ( _ . contains ( _ . pluck ( this . selectedValues , 'value' ) , data . d . value ) ) {
99
- // case where selected element is shift-clicked (need to remove from selection)
100
- _ . remove ( this . selectedValues , function ( d ) {
101
- return d . value === data . d . value ;
102
- } ) ;
103
- } else {
104
- // case where unselected element is shift-clicked (need to add to selection)
105
- this . selectedValues . push ( data . d ) ;
106
- }
107
-
108
- // visual updates
84
+ updateUI_distinct : function ( data ) {
109
85
var uiElements = this . queryAll ( '.selectable' ) ;
110
86
_ . each ( uiElements , function ( el ) {
111
87
var elData = data . source === 'unique' ? el . innerText : d3 . select ( el ) . data ( ) [ 0 ] . value ;
@@ -124,27 +100,10 @@ module.exports = {
124
100
} ,
125
101
126
102
/**
127
- * Handler for query builder events that result in range selection, e.g. number type.
128
- * single click selects individual element, shift-click extends to range (the single click is
129
- * interpreted as one end of the range, shift-click as the other).
130
- *
131
- * For range-type minicharts, this.selectedValues contains two values, the lower and upper bound.
132
- * The 0th value is the one selected via regular click, the 1st value is the shift-clicked one.
133
- * If only a single value is selected ($eq), is stored at the 0th index.
134
- *
135
- * @param {Object } data the contains information about the event, @see handleQueryBuilderEvent
103
+ * update the UI after a range query and mark appropriate elements with .select class.
104
+ * @param {Object } data data object of the event
136
105
*/
137
- handleEvent_range : function ( data ) {
138
- if ( data . evt [ MODIFIERKEY ] ) {
139
- // shift-click modifies the value at index 1
140
- this . selectedValues [ 1 ] = data . d ;
141
- } else if ( this . selectedValues [ 0 ] && this . selectedValues [ 0 ] . value === data . d . value ) {
142
- // case where single selected item is clicked again (need to unselect)
143
- this . selectedValues = [ ] ;
144
- } else {
145
- // case where multiple or no elements are selected (need to just select one item)
146
- this . selectedValues = [ data . d ] ;
147
- }
106
+ updateUI_range : function ( ) {
148
107
var firstSelected = this . selectedValues [ 0 ] ;
149
108
// remove `.selected` class from all elements
150
109
var uiElements = this . queryAll ( '.selectable' ) ;
@@ -168,8 +127,10 @@ module.exports = {
168
127
// use getOrderedValue to determine what elements should be selected
169
128
var lower = getOrderedValue ( first ) ;
170
129
var upper = getOrderedValue ( last ) ;
171
- if ( this . model . getType ( ) === 'Number' ) {
172
- upper += last . dx ;
130
+ var dx = d3 . select ( _ . last ( uiElements ) ) . data ( ) [ 0 ] . dx ;
131
+ var isBinned = this . model . getType ( ) === 'Number' && dx ;
132
+ if ( isBinned ) {
133
+ upper += dx ;
173
134
}
174
135
175
136
/**
@@ -179,16 +140,68 @@ module.exports = {
179
140
* inclusive ($lte).
180
141
* This is indicated by the d.dx variable, which is only > 0 for binned ranges.
181
142
*/
182
- var upperInclusive = last . dx === 0 ;
183
143
_ . each ( uiElements , function ( el ) {
184
144
var elData = getOrderedValue ( d3 . select ( el ) . data ( ) [ 0 ] ) ;
185
- if ( elData >= lower && ( upperInclusive ? elData <= upper : elData < upper ) ) {
145
+ if ( elData >= lower && ( isBinned ? elData < upper : elData <= upper ) ) {
186
146
el . classList . add ( 'selected' ) ;
187
147
el . classList . remove ( 'unselected' ) ;
188
148
}
189
149
} ) ;
190
150
}
191
151
} ,
152
+
153
+ /**
154
+ * Handler for query builder events that result in distinct selection, e.g. string and unique
155
+ * type. Single click selects individual element, shift-click adds to selection.
156
+ *
157
+ * For distinct-type minicharts, this.selectedValues contains an entry for each selected value.
158
+ *
159
+ * @param {Object } data contains information about the event, @see handleQueryBuilderEvent
160
+ */
161
+ handleEvent_distinct : function ( data ) {
162
+ // update selectedValues
163
+ if ( ! data . evt [ MODIFIERKEY ] ) {
164
+ if ( this . selectedValues . length === 1 && this . selectedValues [ 0 ] . value === data . d . value ) {
165
+ // case where 1 element is selected and it is clicked again (need to unselect)
166
+ this . selectedValues = [ ] ;
167
+ } else {
168
+ // case where multiple or no elements are selected (need to select that one item)
169
+ this . selectedValues = [ data . d ] ;
170
+ }
171
+ } else if ( _ . contains ( _ . pluck ( this . selectedValues , 'value' ) , data . d . value ) ) {
172
+ // case where selected element is shift-clicked (need to remove from selection)
173
+ _ . remove ( this . selectedValues , function ( d ) {
174
+ return d . value === data . d . value ;
175
+ } ) ;
176
+ } else {
177
+ // case where unselected element is shift-clicked (need to add to selection)
178
+ this . selectedValues . push ( data . d ) ;
179
+ }
180
+ } ,
181
+
182
+ /**
183
+ * Handler for query builder events that result in range selection, e.g. number type.
184
+ * single click selects individual element, shift-click extends to range (the single click is
185
+ * interpreted as one end of the range, shift-click as the other).
186
+ *
187
+ * For range-type minicharts, this.selectedValues contains two values, the lower and upper bound.
188
+ * The 0th value is the one selected via regular click, the 1st value is the shift-clicked one.
189
+ * If only a single value is selected ($eq), is stored at the 0th index.
190
+ *
191
+ * @param {Object } data the contains information about the event, @see handleQueryBuilderEvent
192
+ */
193
+ handleEvent_range : function ( data ) {
194
+ if ( data . evt [ MODIFIERKEY ] ) {
195
+ // shift-click modifies the value at index 1
196
+ this . selectedValues [ 1 ] = data . d ;
197
+ } else if ( this . selectedValues [ 0 ] && this . selectedValues [ 0 ] . value === data . d . value ) {
198
+ // case where single selected item is clicked again (need to unselect)
199
+ this . selectedValues = [ ] ;
200
+ } else {
201
+ // case where multiple or no elements are selected (need to just select one item)
202
+ this . selectedValues = [ data . d ] ;
203
+ }
204
+ } ,
192
205
/**
193
206
* Handler for query builder events created with a click-drag mouse action. The visual updates
194
207
* are handled by d3 directly, so all we have to do is update the selected values based on the
@@ -256,5 +269,6 @@ module.exports = {
256
269
this [ 'handleEvent_' + queryType ] ( data ) ;
257
270
}
258
271
this [ 'buildQuery_' + queryType ] ( ) ;
272
+ this [ 'updateUI_' + queryType ] ( data ) ;
259
273
}
260
274
} ;
0 commit comments