Reuters tutorial: step 9

jpmckinney edited this page Apr 11, 2013 · 20 revisions

Table of Contents

Adding a calendar widget will introduce the Solr date faceting parameters.

First, update the Solr parameters for faceting in reuters.js:

var params = {
  ...
  'facet.date': 'date',
  'facet.date.start': '1987-01-01T00:00:00.000Z/DAY',
  'facet.date.end': '1987-12-31T00:00:00.000Z/DAY+1DAY',
  'facet.date.gap': '+1DAY',
  ...
};

Create a new widget, CalendarWidget.js, inheriting from AbstractFacetWidget:

(function ($) {
AjaxSolr.CalendarWidget = AjaxSolr.AbstractFacetWidget.extend({
});
})(jQuery);

Add the JavaScript and CSS files. We will be using jQuery UI’s Datepicker for the calendar:

<script src="widgets/CalendarWidget.js"></script>

And add an instance of the widget to the Manager in reuters.js:

Manager.addWidget(new AjaxSolr.CalendarWidget({
  id: 'calendar',
  target: '#calendar',
  field: 'date'
}));

Now, we’re ready to implement afterRequest:

afterRequest: function () {
  var self = this;
  $(this.target).datepicker('destroy').datepicker({
    dateFormat: 'yy-mm-dd',
    defaultDate: new Date(1987, 2, 1),
    maxDate: $.datepicker.parseDate('yy-mm-dd', this.manager.store.get('facet.date.end').val().substr(0, 10)),
    minDate: $.datepicker.parseDate('yy-mm-dd', this.manager.store.get('facet.date.start').val().substr(0, 10)),
    nextText: '&gt;',
    prevText: '&lt;',
    beforeShowDay: function (date) {
      var value = $.datepicker.formatDate('yy-mm-dd', date) + 'T00:00:00Z';
      var count = self.manager.response.facet_counts.facet_dates[self.field][value];
      return [ parseInt(count) > 0, '', count + ' documents found!' ];
    },
    onSelect: function (dateText, inst) {
      if (self.add('[' + dateText + 'T00:00:00Z TO ' + dateText + 'T23:59:59Z]')) {
        self.doRequest();
      }
    }
  });
}

There is nothing new or exciting here; we are merely implementing some of the event handlers that the jQuery UI Datepicker exposes, in order to call the add and doRequest API methods we have seen before. The only peculiar bit of code is Solr’s DateMathParser format.

[What we have so far]

If you click on a date in the calendar, the corresponding facet field-facet value pair will appear under “Current Selection.” The facet values will probably be long and verbose. To shorten them, we must replace one line in CurrentSearchWidget.js:

links.push($('<a href="#"></a>').text('(x) ' + fq[i]).click(self.removeFacet(fq[i])));

With:

if (fq[i].match(/[\[\{]\S+ TO \S+[\]\}]/)) {
  var field = fq[i].match(/^\w+:/)[0];
  var value = fq[i].substr(field.length + 1, 10);
  links.push($('<a href="#"></a>').text('(x) ' + field + value).click(self.removeFacet(fq[i])));
}
else {
  links.push($('<a href="#"></a>').text('(x) ' + fq[i]).click(self.removeFacet(fq[i])));
}

Now, the facet values will be short and concise.

[What we have so far]

That’s it for building the AJAX Solr demo site. Congrats!

Let’s wrap up with suggestions for future work.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.