feat: formatNumber in Stats widget

Author: pixelastic

components/Stats.js

@@ -5,6 +5,7 @@ var Template = require('./Template');
 class Stats extends React.Component {
   render() {
     var template = this.props.template;
+    var templateHelpers = this.props.templateHelpers;
     var data = {
       nbHits: this.props.nbHits,
       hasNoResults: this.props.nbHits === 0,
@@ -17,6 +18,7 @@ class Stats extends React.Component {
       <Template
         data={data}
         template={template}
+        templateHelpers={templateHelpers}
       />
     );
   }
@@ -28,7 +30,8 @@ Stats.propTypes = {
   template: React.PropTypes.oneOfType([
     React.PropTypes.func,
     React.PropTypes.string
-  ]).isRequired
+  ]).isRequired,
+  templateHelpers: React.PropTypes.object
 };
 
 module.exports = Stats;

components/Template.js

@@ -4,7 +4,11 @@ var renderTemplate = require('../lib/utils').renderTemplate;
 
 class Template {
   render() {
-    var content = renderTemplate(this.props.template, this.props.data);
+    var content = renderTemplate({
+      template: this.props.template,
+      templateHelpers: this.props.templateHelpers,
+      data: this.props.data
+    });
 
     return <div dangerouslySetInnerHTML={{__html: content}} />;
   }
@@ -15,6 +19,7 @@ Template.propTypes = {
     React.PropTypes.string,
     React.PropTypes.func
   ]).isRequired,
+  templateHelpers: React.PropTypes.object,
   data: React.PropTypes.object
 };
 

example/app.js

@@ -3,7 +3,8 @@ var instantsearch = require('../');
 var search = instantsearch({
   appId: 'latency',
   apiKey: '6be0576ff61c053d5f9a3225e2a90f76',
-  indexName: 'instant_search'
+  indexName: 'instant_search',
+  numberLocale: 'fr-FR'
 });
 
 search.addWidget(

lib/InstantSearch.js

@@ -10,6 +10,7 @@ class InstantSearch {
     appId = null,
     apiKey = null,
     indexName = null,
+    numberLocale = 'en-EN',
     searchParameters = {}
   }) {
     if (appId === null || apiKey === null || indexName === null) {
@@ -22,14 +23,18 @@ Usage: instantsearch({
       throw new Error(usage);
     }
 
-
     var client = algoliasearch(appId, apiKey);
 
     this.client = client;
     this.helper = null;
     this.indexName = indexName;
     this.searchParameters = searchParameters || {};
     this.widgets = [];
+    this.templateHelpers = {
+      formatNumber(number) {
+        return Number(number).toLocaleString(numberLocale);
+      }
+    };
   }
 
   addWidget(widgetDefinition) {
@@ -67,10 +72,16 @@ Usage: instantsearch({
 
   _render(helper, results, state) {
     forEach(this.widgets, function(widget) {
-      if (widget.render) {
-        widget.render(results, state, helper);
+      if (!widget.render) {
+        return;
       }
-    });
+      widget.render({
+        templateHelpers: this.templateHelpers,
+        results,
+        state,
+        helper
+      });
+    }, this);
   }
 
   _init(state, helper) {

lib/utils.js

@@ -14,18 +14,35 @@ function isDomElement(o) {
   return o instanceof HTMLElement || o && o.nodeType > 0;
 }
 
-function renderTemplate(template, data) {
+function renderTemplate({template, templateHelpers, data}) {
   var hogan = require('hogan.js');
+  var forEach = require('lodash/collection/forEach');
   var content;
 
-  if (typeof template === 'string') {
-    content = hogan.compile(template).render(data);
-  } else if (typeof template === 'function') {
-    content = template(data);
-  } else {
+  if (typeof template !== 'string' && typeof template !== 'function') {
     throw new Error('Template must be `string` or `function`');
   }
 
+  if (typeof template === 'function') {
+    content = template(data);
+  }
+
+  if (typeof template === 'string') {
+    // We add all our template helper methods to the template as lambdas. Note
+    // that lambdas in Mustache are supposed to accept a second argument of
+    // `render` to get the rendered value, not the literal `{{value}}`. But
+    // this is currently broken (see
+    // https://github.com/twitter/hogan.js/issues/222).
+    forEach(templateHelpers, function(method, name) {
+      data['_' + name] = function() {
+        return function(value) {
+          return method(hogan.compile(value).render(data));
+        };
+      };
+    });
+    content = hogan.compile(this.props.template).render(data);
+  }
+
   return content;
 }
 

widgets/hits.js

@@ -9,7 +9,7 @@ function hits({container = null, templates = {}, hitsPerPage = 20}) {
 
   return {
     getConfiguration: () => ({hitsPerPage}),
-    render: function(results, state, helper) {
+    render: function({results, helper}) {
       React.render(
         <Hits
           hits={results.hits}

widgets/index-selector.js

@@ -32,7 +32,7 @@ function indexSelector({
       }
     },
 
-    render: function(results, state, helper) {
+    render: function({helper}) {
       var containerId = containerNode.id;
       React.render(
         <IndexSelector

widgets/menu.js

@@ -47,7 +47,7 @@ function menu({
         attributes: [facetName]
       }]
     }),
-    render: function(results, state, helper) {
+    render: function({results, helper}) {
       React.render(
         <RefinementList
           rootClass={cx(rootClass)}

widgets/pagination.js

@@ -8,7 +8,7 @@ function pagination({container, cssClass, labels, maxPages} = {}) {
   var containerNode = utils.getContainerNode(container);
 
   return {
-    render: function(results, state, helper) {
+    render: function({results, helper}) {
       var nbPages = results.nbPages;
       if (maxPages !== undefined) {
         nbPages = Math.min(maxPages, results.nbPages);

widgets/refinement-list.js

@@ -55,7 +55,7 @@ function refinementList({
     getConfiguration: () => ({
       [operator === 'and' ? 'facets' : 'disjunctiveFacets']: [facetName]
     }),
-    render: function(results, state, helper) {
+    render: function({results, helper}) {
       React.render(
         <RefinementList
           rootClass={cx(rootClass)}

widgets/stats/index.js

@@ -12,12 +12,13 @@ function stats({container = null, template = defaultTemplate}) {
   }
 
   return {
-    render: function(results) {
+    render: function({results, templateHelpers}) {
       React.render(
         <Stats
           nbHits={results.nbHits}
           processingTimeMS={results.processingTimeMS}
           template={template}
+          templateHelpers={templateHelpers}
         />,
         containerNode
       );

widgets/stats/template.html

@@ -1,6 +1,6 @@
 <div>
   {{#hasNoResults}}No results{{/hasNoResults}}
   {{#hasOneResult}}1 result{{/hasOneResult}}
-  {{#hasManyResults}}{{nbHits}} results{{/hasManyResults}}
+  {{#hasManyResults}}{{#_formatNumber}}{{nbHits}}{{/_formatNumber}} results{{/hasManyResults}}
   <small>found in {{processingTimeMS}}ms</small>
 </div>

widgets/toggle.js

@@ -32,7 +32,7 @@ function toggle({
     getConfiguration: () => ({
       facets: [facetName]
     }),
-    render: function(results, state, helper) {
+    render: function({helper}) {
       var isRefined = helper.hasRefinements(facetName);
 
       function toggleFilter() {