Skip to content

Commit c458501

Browse files
committed
extracted ui updates into own methods
1 parent ba451d8 commit c458501

File tree

1 file changed

+65
-51
lines changed

1 file changed

+65
-51
lines changed

src/minicharts/querybuilder.js

Lines changed: 65 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -78,34 +78,10 @@ module.exports = {
7878
},
7979

8080
/**
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
8783
*/
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) {
10985
var uiElements = this.queryAll('.selectable');
11086
_.each(uiElements, function(el) {
11187
var elData = data.source === 'unique' ? el.innerText : d3.select(el).data()[0].value;
@@ -124,27 +100,10 @@ module.exports = {
124100
},
125101

126102
/**
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
136105
*/
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() {
148107
var firstSelected = this.selectedValues[0];
149108
// remove `.selected` class from all elements
150109
var uiElements = this.queryAll('.selectable');
@@ -168,8 +127,10 @@ module.exports = {
168127
// use getOrderedValue to determine what elements should be selected
169128
var lower = getOrderedValue(first);
170129
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;
173134
}
174135

175136
/**
@@ -179,16 +140,68 @@ module.exports = {
179140
* inclusive ($lte).
180141
* This is indicated by the d.dx variable, which is only > 0 for binned ranges.
181142
*/
182-
var upperInclusive = last.dx === 0;
183143
_.each(uiElements, function(el) {
184144
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)) {
186146
el.classList.add('selected');
187147
el.classList.remove('unselected');
188148
}
189149
});
190150
}
191151
},
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+
},
192205
/**
193206
* Handler for query builder events created with a click-drag mouse action. The visual updates
194207
* 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 = {
256269
this['handleEvent_' + queryType](data);
257270
}
258271
this['buildQuery_' + queryType]();
272+
this['updateUI_' + queryType](data);
259273
}
260274
};

0 commit comments

Comments
 (0)