Skip to content

Commit

Permalink
major revision to add support for date histogram facets which give ri…
Browse files Browse the repository at this point in the history 
…se to date range filters
  • Loading branch information
@richard-jones
richard-jones committed Mar 10, 2015
1 parent 4562f80 commit 74bea47
Show file tree
Hide file tree
Showing 4 changed files with 475 additions and 49 deletions.
187 changes: 181 additions & 6 deletions bootstrap2.facetview.theme.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -189,6 +189,8 @@ function facetList(options) {
thefilters += options.render_range_facet(facet, options)
} else if (type === "geo_distance") {
thefilters += options.render_geo_facet(facet, options)
} else if (type == "date_histogram") {
thefilters += options.render_date_histogram_facet(facet, options)
}
// FIXME: statistical facet and terms_stats facet?
};
Expand All @@ -210,19 +212,27 @@ function renderTermsFacet(facet, options) {
* id: facetview_or_<safe filtername> - id of anchor for changing AND/OR operator
*
* each anchor must also have href="<filtername>"
*
* should (not must) respect the following config
*
* facet.controls - whether the size/sort/bool controls should be shown
*/

// full template for the facet - we'll then go on and do some find and replace
var filterTmpl = '<table id="facetview_filter_{{FILTER_NAME}}" class="facetview_filters table table-bordered table-condensed table-striped" data-href="{{FILTER_EXACT}}"> \
<tr><td><a class="facetview_filtershow" title="filter by {{FILTER_DISPLAY}}" \
style="color:#333; font-weight:bold;" href="{{FILTER_EXACT}}"><i class="icon-plus"></i> {{FILTER_DISPLAY}} \
</a> \
<div class="btn-group facetview_filteroptions" style="display:none; margin-top:5px;"> \
</a>';

if (facet.controls) {
filterTmpl += '<div class="btn-group facetview_filteroptions" style="display:none; margin-top:5px;"> \
<a class="btn btn-small facetview_morefacetvals" id="facetview_facetvals_{{FILTER_NAME}}" title="filter list size" href="{{FILTER_EXACT}}">0</a> \
<a class="btn btn-small facetview_sort" id="facetview_sort_{{FILTER_NAME}}" title="filter value order" href="{{FILTER_EXACT}}"></a> \
<a class="btn btn-small facetview_or" id="facetview_or_{{FILTER_NAME}}" href="{{FILTER_EXACT}}">OR</a> \
</div> \
</td></tr> \
</div>';
}

filterTmpl += '</td></tr> \
</table>';

// put the name of the field into FILTER_NAME and FILTER_EXACT
Expand Down Expand Up @@ -297,6 +307,36 @@ function renderGeoFacet(facet, options) {
return filterTmpl
}

function renderDateHistogramFacet(facet, options) {
/*****************************************
* overrides must provide the following classes and ids
*
* id: facetview_filter_<safe filtername> - table for the specific filter
*
* each anchor must also have href="<filtername>"
*/

// full template for the facet - we'll then go on and do some find and replace
var filterTmpl = '<table id="facetview_filter_{{FILTER_NAME}}" class="facetview_filters table table-bordered table-condensed table-striped" data-href="{{FILTER_EXACT}}"> \
<tr><td><a class="facetview_filtershow" title="filter by {{FILTER_DISPLAY}}" \
style="color:#333; font-weight:bold;" href="{{FILTER_EXACT}}"><i class="icon-plus"></i> {{FILTER_DISPLAY}} \
</a> \
</td></tr> \
</table>';

// put the name of the field into FILTER_NAME and FILTER_EXACT
filterTmpl = filterTmpl.replace(/{{FILTER_NAME}}/g, safeId(facet['field'])).replace(/{{FILTER_EXACT}}/g, facet['field']);

// set the display name of the facet in FILTER_DISPLAY
if ('display' in facet) {
filterTmpl = filterTmpl.replace(/{{FILTER_DISPLAY}}/g, facet['display']);
} else {
filterTmpl = filterTmpl.replace(/{{FILTER_DISPLAY}}/g, facet['field']);
};

return filterTmpl
}

function renderTermsFacetValues(options, facet) {
/*****************************************
* overrides must provide the following classes and ids
Expand Down Expand Up @@ -403,7 +443,7 @@ function renderRangeFacetValues(options, facet) {
// render the active filter if there is one
if (options.selected_filters_in_facet && selected_range) {
var range = getRangeForValue(selected_range, facet)
already_selected = true
var already_selected = true

var data_to = range.to ? " data-to='" + range.to + "' " : ""
var data_from = range.from ? " data-from='" + range.from + "' " : ""
Expand Down Expand Up @@ -487,7 +527,7 @@ function renderGeoFacetValues(options, facet) {
// render the active filter if there is one
if (options.selected_filters_in_facet && selected_geo) {
var range = getRangeForValue(selected_geo, facet)
already_selected = true
var already_selected = true

var data_to = range.to ? " data-to='" + range.to + "' " : ""
var data_from = range.from ? " data-from='" + range.from + "' " : ""
Expand Down Expand Up @@ -518,6 +558,76 @@ function renderGeoFacetValues(options, facet) {
return frag
}

function renderDateHistogramValues(options, facet) {
/*****************************************
* overrides must provide the following classes and ids
*
* class: facetview_filtervalue - wrapper element for any value included in the list
* class: facetview_filterselected - for any anchors around selected filters
* class: facetview_clear - for any link which should remove a filter (must also provide data-field and data-value)
* class: facetview_filterchoice - tags the anchor wrapped around the name of the (unselected) field
*
* should (not must) respect the following config
*
* options.selected_filters_in_facet - whether to show selected filters in the facet pull-down (if that's your idiom)
* options.render_facet_result - function which renders the individual facets
*/

var selected_range = options.active_filters[facet.field];
var frag = "";

// render the active filter if there is one
if (options.selected_filters_in_facet && selected_range) {
var from = selected_range.from;
var data_from = " data-from='" + from + "' ";
var display = from;
if (facet.value_function) {
display = facet.value_function(display);
}

var sf = '<tr class="facetview_filtervalue" style="display:none;"><td>';
sf += "<strong>" + display + "</strong> ";
sf += '<a class="facetview_filterselected facetview_clear" data-field="' + facet.field + '" '+ data_from + ' href="#"><i class="icon-black icon-remove" style="margin-top:1px;"></i></a>';
sf += "</td></tr>";
frag += sf;

// if a range is already selected, we don't render any more
return frag
}

// then render the remaining selectable facets if necessary

// get the facet values in the right order for display
var values = facet["values"];
if (facet.sort === "desc") {
values.reverse()
}

for (var i = 0; i < values.length; i++) {
var f = values[i];
if (f) {
if (f.count === 0 && facet.hide_empty_date_bin) {
continue
}
var next = false;
if (facet.sort === "asc") {
if (i + 1 < values.length) {
next = values[i + 1]
}
} else if (facet.sort === "desc") {
if (i - 1 >= 0) {
next = values[i - 1];
}
}

var append = options.render_date_histogram_result(options, facet, f, next);
frag += append
}
}

return frag
}

function renderTermsFacetResult(options, facet, result, selected_filters) {
/*****************************************
* overrides must provide the following classes and ids
Expand Down Expand Up @@ -573,6 +683,28 @@ function renderGeoFacetResult(options, facet, result, range) {
return append
}

function renderDateHistogramResult(options, facet, result, next) {
/*****************************************
* overrides must provide the following classes and ids
*
* class: facetview_filtervalue - tags the top level element as being a facet result
* class: facetview_filterchoice - tags the anchor wrapped around the name of the field
*/

var data_from = result.time ? " data-from='" + result.time + "' " : "";
var data_to = next ? " data-to='" + next.time + "' " : "";

var display = result.time;
if (facet.value_function) {
display = facet.value_function(display)
}

var append = '<tr class="facetview_filtervalue" style="display:none;"><td><a class="facetview_filterchoice' +
'" data-field="' + facet['field'] + '" ' + data_to + data_from + ' href="#"><span class="facetview_filterchoice_text">' + display + '</span>' +
'<span class="facetview_filterchoice_count"> (' + result.count + ')</span></a></td></tr>';
return append
}

function searchingNotification(options) {
return "SEARCHING..."
}
Expand Down Expand Up @@ -907,6 +1039,47 @@ function renderActiveGeoFilter(options, facet, field, value) {
return frag
}

function renderActiveDateHistogramFilter(options, facet, field, value) {
/*****************************************
* overrides must provide the following classes and ids
*
* class: facetview_filterselected - anchor tag for any clickable filter selection
* class: facetview_clear - anchor tag for any link which will remove the filter (should also provide data-value and data-field)
* class: facetview_inactive_link - any link combined with facetview_filterselected which should not execute when clicked
*
* should (not must) respect the config
*
* options.show_filter_field - whether to include the name of the field the filter is active on
*/

var clean = safeId(field);
var display = facet.display ? facet.display : facet.field;

var frag = "<div id='facetview_filter_group_" + clean + "' class='btn-group'>";

if (options.show_filter_field) {
frag += '<a class="btn btn-info facetview_inactive_link facetview_filterselected" href="' + field + '">';
frag += '<span class="facetview_filterselected_text"><strong>' + display + '</strong></span>';
frag += "</a>"
}

var data_from = value.from ? " data-from='" + value.from + "' " : "";

var valdisp = value.from;
if (facet.value_function) {
valdisp = facet.value_function(valdisp);
}

frag += '<a class="facetview_filterselected facetview_clear btn btn-info" data-field="' + field + '" ' + data_from +
' alt="remove" title="remove" href="#">'
frag += '<span class="facetview_filterselected_text">' + valdisp + '</span> <i class="icon-white icon-remove" style="margin-top:1px;"></i>'
frag += "</a>"

frag += "</div>"

return frag
}

///// behaviour functions //////////////////////////

// called when searching begins. Use it to show the loading bar, or something
Expand Down Expand Up @@ -1042,6 +1215,8 @@ function setUISelectedFilters(options, context) {
frag += options.render_active_range_filter(options, facet, field, filter_list)
} else if (facet.type === "geo_distance") {
frag += options.render_active_geo_filter(options, facet, field, filter_list)
} else if (facet.type === "date_histogram") {
frag += options.render_active_date_histogram_filter(options, facet, field, filter_list)
}
// FIXME: statistical facet?
}
Expand Down
Loading

0 comments on commit 74bea47

Please sign in to comment.