From 82905422697c0cea08b823591a3a8f03f12ba57d Mon Sep 17 00:00:00 2001
From: Pixelastic <tim@pixelastic.com>
Date: Thu, 3 Sep 2015 17:25:57 +0200
Subject: [PATCH] feat: Add stats widget

---
 components/Stats/index.js   | 31 +++++++++++++++++++++++++++++++
 example/app.js              |  6 ++++++
 example/index.html          |  1 +
 index.js                    |  5 +++--
 widgets/stats/index.js      | 28 ++++++++++++++++++++++++++++
 widgets/stats/template.html |  4 ++++
 6 files changed, 73 insertions(+), 2 deletions(-)
 create mode 100644 components/Stats/index.js
 create mode 100644 widgets/stats/index.js
 create mode 100644 widgets/stats/template.html

diff --git a/components/Stats/index.js b/components/Stats/index.js
new file mode 100644
index 0000000000..2c5a7b85a0
--- /dev/null
+++ b/components/Stats/index.js
@@ -0,0 +1,31 @@
+var React = require('react');
+
+var Template = require('../Template/');
+
+class Stats extends React.Component {
+  render() {
+    var template = this.props.template;
+    var data = {
+      nbHits: this.props.nbHits,
+      processingTimeMS: this.props.processingTimeMS
+    };
+
+    return (
+      <Template
+        data={data}
+        template={template}
+      />
+    );
+  }
+}
+
+Stats.propTypes = {
+  nbHits: React.PropTypes.number,
+  processingTimeMS: React.PropTypes.number,
+  template: React.PropTypes.oneOfType([
+    React.PropTypes.func,
+    React.PropTypes.string
+  ]).isRequired
+};
+
+module.exports = Stats;
diff --git a/example/app.js b/example/app.js
index 7bf1351a3e..2e8020305b 100644
--- a/example/app.js
+++ b/example/app.js
@@ -16,6 +16,12 @@ search.addWidget(
   })
 );
 
+search.addWidget(
+  instantsearch.widgets.stats({
+    container: '#stats'
+  })
+);
+
 search.addWidget(
   instantsearch.widgets.hits({
     container: '#hits',
diff --git a/example/index.html b/example/index.html
index 24b3ed0ad0..4a2510f314 100644
--- a/example/index.html
+++ b/example/index.html
@@ -20,6 +20,7 @@ <h2>Brands</h1>
         <div id="brands"></div>
       </div>
       <div class="col-md-9">
+        <div id="stats"></div>
         <div id="hits"></div>
         <div id="pagination" class="text-center"></div>
       </div>
diff --git a/index.js b/index.js
index cc114e0ab0..fff89d594f 100644
--- a/index.js
+++ b/index.js
@@ -1,9 +1,10 @@
 module.exports = {
   InstantSearch: require('./lib/InstantSearch'),
   widgets: {
-    searchBox: require('./widgets/search-box/'),
     hits: require('./widgets/hits/'),
+    multipleChoiceList: require('./widgets/multiple-choice-list/'),
     pagination: require('./widgets/pagination/'),
-    multipleChoiceList: require('./widgets/multiple-choice-list/')
+    searchBox: require('./widgets/search-box/'),
+    stats: require('./widgets/stats/')
   }
 };
diff --git a/widgets/stats/index.js b/widgets/stats/index.js
new file mode 100644
index 0000000000..577ed03063
--- /dev/null
+++ b/widgets/stats/index.js
@@ -0,0 +1,28 @@
+var React = require('react');
+
+var utils = require('../../lib/widgetUtils.js');
+var defaultTemplate = require('./template.html');
+
+function stats({container = null, template = defaultTemplate}) {
+  var Stats = require('../../components/Stats');
+  var containerNode = utils.getContainerNode(container);
+
+  if (container === null) {
+    throw new Error('Usage: stats({container})');
+  }
+
+  return {
+    render: function(results) {
+      React.render(
+        <Stats
+          nbHits={results.nbHits}
+          processingTimeMS={results.processingTimeMS}
+          template={template}
+        />,
+        containerNode
+      );
+    }
+  };
+}
+
+module.exports = stats;
diff --git a/widgets/stats/template.html b/widgets/stats/template.html
new file mode 100644
index 0000000000..8d182ebaf7
--- /dev/null
+++ b/widgets/stats/template.html
@@ -0,0 +1,4 @@
+<div>
+  {{nbHits}} results
+  <small>found in {{processingTimeMS}}ms</small>
+</div>