fix(numerical widgets): s/facetName/attributeName

Fix #431 BREAKING CHANGE: the priceRanges and rangeSlider widgets are now using `attributeName` instead of `facetName`.
algolia · Nov 3, 2015 · f209f5d · f209f5d
1 parent df373c3
commit f209f5d
Show file tree

Hide file tree

Showing 8 changed files with 36 additions and 36 deletions.
diff --git a/dev/app.js b/dev/app.js
@@ -151,7 +151,7 @@ search.addWidget(
 search.addWidget(
   instantsearch.widgets.rangeSlider({
     container: '#price',
-    facetName: 'price',
+    attributeName: 'price',
     cssClasses: {
       header: 'facet-title'
     },
@@ -189,7 +189,7 @@ search.once('render', function() {
 search.addWidget(
   instantsearch.widgets.priceRanges({
     container: '#price-ranges',
-    facetName: 'price',
+    attributeName: 'price',
     templates: {
       header: 'Price ranges'
     },

diff --git a/docs/_includes/widget-jsdoc/priceRanges.md b/docs/_includes/widget-jsdoc/priceRanges.md
@@ -1,7 +1,7 @@
 | Param | Description |
 | --- | --- |
 |  <span class='attr-required'>`options.container`</span> | Valid CSS Selector as a string or DOMElement |
-|  <span class='attr-required'>`options.facetName`</span> | Name of the attribute for faceting |
+|  <span class='attr-required'>`options.attributeName`</span> | Name of the attribute for faceting |
 |  <span class='attr-optional'>`options.cssClasses`</span> | CSS classes to add |
 |  <span class='attr-optional'>`options.cssClasses.root`</span> | CSS class to add to the root element |
 |  <span class='attr-optional'>`options.cssClasses.header`</span> | CSS class to add to the header element |

diff --git a/docs/_includes/widget-jsdoc/rangeSlider.md b/docs/_includes/widget-jsdoc/rangeSlider.md
@@ -1,7 +1,7 @@
 | Param | Description |
 | --- | --- |
 |  <span class='attr-required'>`options.container`</span> | CSS Selector or DOMElement to insert the widget |
-|  <span class='attr-required'>`options.facetName`</span> | Name of the attribute for faceting |
+|  <span class='attr-required'>`options.attributeName`</span> | Name of the attribute for faceting |
 |  <span class='attr-optional'>`options.tooltips`</span> | Should we show tooltips or not. The default tooltip will show the formatted corresponding value without any other token. You can also provide tooltips: {format: function(formattedValue, rawValue) {return '$' + formattedValue}} So that you can format the tooltip display value as you want |
 |  <span class='attr-optional'>`options.templates`</span> | Templates to use for the widget |
 |  <span class='attr-optional'>`options.templates.header`</span> | Header template |

diff --git a/docs/documentation.md b/docs/documentation.md
@@ -583,7 +583,7 @@ This filtering widget lets the user choose either or not to filter values to `tr
 search.addWidget(
   instantsearch.widgets.rangeSlider({
     container: '#price',
-    facetName: 'price',
+    attributeName: 'price',
     templates: {
       header: 'Price'
     },
@@ -618,7 +618,7 @@ The range slider filters values of a single numeric attribute using 2 cursors: t
 search.addWidget(
   instantsearch.widgets.priceRanges({
     container: '#priceranges.widget-container',
-    facetName: 'price',
+    attributeName: 'price',
     labels: {
       currency: '$',
       separator: 'to',

diff --git a/widgets/price-ranges/__tests__/price-ranges-test.js b/widgets/price-ranges/__tests__/price-ranges-test.js
@@ -33,7 +33,7 @@ describe('priceRanges()', () => {
     priceRanges.__Rewire__('headerFooter', headerFooter);
 
     container = document.createElement('div');
-    widget = priceRanges({container, facetName: 'aFacetname'});
+    widget = priceRanges({container, attributeName: 'aNumAttr'});
     results = {
       hits: [1],
       nbHits: 1,
@@ -47,7 +47,7 @@ describe('priceRanges()', () => {
   });
 
   it('adds the attribute as a facet', () => {
-    expect(widget.getConfiguration()).toEqual({facets: ['aFacetname']});
+    expect(widget.getConfiguration()).toEqual({facets: ['aNumAttr']});
   });
 
   context('without refinements', function() {

diff --git a/widgets/price-ranges/price-ranges.js b/widgets/price-ranges/price-ranges.js
@@ -15,7 +15,7 @@ let cx = require('classnames');
 /**
  * Instantiate a price ranges on a numerical facet
  * @param  {string|DOMElement} options.container Valid CSS Selector as a string or DOMElement
- * @param  {string} options.facetName Name of the attribute for faceting
+ * @param  {string} options.attributeName Name of the attribute for faceting
  * @param  {Object} [options.cssClasses] CSS classes to add
  * @param  {string} [options.cssClasses.root] CSS class to add to the root element
  * @param  {string} [options.cssClasses.header] CSS class to add to the header element
@@ -42,7 +42,7 @@ let cx = require('classnames');
  */
 function priceRanges({
     container,
-    facetName,
+    attributeName,
     cssClasses: userCssClasses = {},
     templates = defaultTemplates,
     labels = {
@@ -53,29 +53,29 @@ function priceRanges({
     hideContainerWhenNoResults = true
   }) {
   let containerNode = utils.getContainerNode(container);
-  let usage = 'Usage: priceRanges({container, facetName, [cssClasses.{root,header,body,list,item,active,link,form,label,input,currency,separator,button,footer}, templates.{header,item,footer}, labels.{currency,separator,button}, hideContainerWhenNoResults]})';
+  let usage = 'Usage: priceRanges({container, attributeName, [cssClasses.{root,header,body,list,item,active,link,form,label,input,currency,separator,button,footer}, templates.{header,item,footer}, labels.{currency,separator,button}, hideContainerWhenNoResults]})';
 
   let PriceRanges = headerFooter(require('../../components/PriceRanges/PriceRanges'));
   if (hideContainerWhenNoResults === true) {
     PriceRanges = autoHideContainer(PriceRanges);
   }
 
-  if (!container || !facetName) {
+  if (!container || !attributeName) {
     throw new Error(usage);
   }
 
   return {
     getConfiguration: () => ({
-      facets: [facetName]
+      facets: [attributeName]
     }),
 
     _generateRanges: function(results) {
-      let stats = results.getFacetStats(facetName);
+      let stats = results.getFacetStats(attributeName);
       return generateRanges(stats);
     },
 
     _extractRefinedRange: function(helper) {
-      let refinements = helper.getRefinements(facetName);
+      let refinements = helper.getRefinements(attributeName);
       let from;
       let to;
 
@@ -96,13 +96,13 @@ function priceRanges({
     _refine: function(helper, from, to) {
       let facetValues = this._extractRefinedRange(helper);
 
-      helper.clearRefinements(facetName);
+      helper.clearRefinements(attributeName);
       if (facetValues.length === 0 || facetValues[0].from !== from || facetValues[0].to !== to) {
         if (typeof from !== 'undefined') {
-          helper.addNumericRefinement(facetName, '>', from - 1);
+          helper.addNumericRefinement(attributeName, '>', from - 1);
         }
         if (typeof to !== 'undefined') {
-          helper.addNumericRefinement(facetName, '<', to + 1);
+          helper.addNumericRefinement(attributeName, '<', to + 1);
         }
       }
 
@@ -149,13 +149,13 @@ function priceRanges({
       ReactDOM.render(
         <PriceRanges
           createURL={(from, to, isRefined) => {
-            let newState = state.clearRefinements(facetName);
+            let newState = state.clearRefinements(attributeName);
             if (!isRefined) {
               if (typeof from !== 'undefined') {
-                newState = newState.addNumericRefinement(facetName, '>', from - 1);
+                newState = newState.addNumericRefinement(attributeName, '>', from - 1);
               }
               if (typeof to !== 'undefined') {
-                newState = newState.addNumericRefinement(facetName, '<', to + 1);
+                newState = newState.addNumericRefinement(attributeName, '<', to + 1);
               }
             }
             return createURL(newState);

diff --git a/widgets/range-slider/__tests__/range-slider-test.js b/widgets/range-slider/__tests__/range-slider-test.js
@@ -33,7 +33,7 @@ describe('rangeSlider()', () => {
     rangeSlider.__Rewire__('headerFooter', headerFooter);
 
     container = document.createElement('div');
-    widget = rangeSlider({container, facetName: 'aFacetName'});
+    widget = rangeSlider({container, attributeName: 'aNumAttr'});
     results = {
       getFacetStats: sinon.stub().returns({
         min: 1.99,
@@ -53,7 +53,7 @@ describe('rangeSlider()', () => {
   });
 
   it('configures the disjunctiveFacets', () => {
-    expect(widget.getConfiguration()).toEqual({disjunctiveFacets: ['aFacetName']});
+    expect(widget.getConfiguration()).toEqual({disjunctiveFacets: ['aNumAttr']});
   });
 
   it('calls twice ReactDOM.render(<Slider props />, container)', () => {
@@ -97,7 +97,7 @@ describe('rangeSlider()', () => {
     widget._refine(helper, stats, [stats.min + 1, stats.max]);
     expect(helper.clearRefinements.calledOnce).toBe(true, 'clearRefinements called once');
     expect(helper.addNumericRefinement.calledOnce).toBe(true, 'clearRefinements called once');
-    expect(helper.addNumericRefinement.getCall(0).args).toEqual(['aFacetName', '>=', stats.min + 1]);
+    expect(helper.addNumericRefinement.getCall(0).args).toEqual(['aNumAttr', '>=', stats.min + 1]);
     expect(helper.search.calledOnce).toBe(true, 'search called once');
   });
 
@@ -106,7 +106,7 @@ describe('rangeSlider()', () => {
     widget._refine(helper, stats, [stats.min, stats.max - 1]);
     expect(helper.clearRefinements.calledOnce).toBe(true, 'clearRefinements called once');
     expect(helper.addNumericRefinement.calledOnce).toBe(true, 'addNumericRefinement called once');
-    expect(helper.addNumericRefinement.getCall(0).args).toEqual(['aFacetName', '<=', stats.max - 1]);
+    expect(helper.addNumericRefinement.getCall(0).args).toEqual(['aNumAttr', '<=', stats.max - 1]);
     expect(helper.search.calledOnce).toBe(true, 'search called once');
   });
 
@@ -115,8 +115,8 @@ describe('rangeSlider()', () => {
     widget._refine(helper, stats, [stats.min + 1, stats.max - 1]);
     expect(helper.clearRefinements.calledOnce).toBe(true, 'clearRefinements called once');
     expect(helper.addNumericRefinement.calledTwice).toBe(true, 'addNumericRefinement called twice');
-    expect(helper.addNumericRefinement.getCall(0).args).toEqual(['aFacetName', '>=', stats.min + 1]);
-    expect(helper.addNumericRefinement.getCall(1).args).toEqual(['aFacetName', '<=', stats.max - 1]);
+    expect(helper.addNumericRefinement.getCall(0).args).toEqual(['aNumAttr', '>=', stats.min + 1]);
+    expect(helper.addNumericRefinement.getCall(1).args).toEqual(['aNumAttr', '<=', stats.max - 1]);
     expect(helper.search.calledOnce).toBe(true, 'search called once');
   });
 

diff --git a/widgets/range-slider/range-slider.js b/widgets/range-slider/range-slider.js
@@ -13,7 +13,7 @@ let defaultTemplates = {
 /**
  * Instantiate a slider based on a numeric attribute
  * @param  {string|DOMElement} options.container CSS Selector or DOMElement to insert the widget
- * @param  {string} options.facetName Name of the attribute for faceting
+ * @param  {string} options.attributeName Name of the attribute for faceting
  * @param  {boolean|Object} [options.tooltips=true] Should we show tooltips or not.
  * The default tooltip will show the formatted corresponding value without any other token.
  * You can also provide
@@ -30,7 +30,7 @@ let defaultTemplates = {
  */
 function rangeSlider({
     container = null,
-    facetName = null,
+    attributeName = null,
     tooltips = true,
     templates = defaultTemplates,
     cssClasses = {
@@ -48,11 +48,11 @@ function rangeSlider({
 
   return {
     getConfiguration: () => ({
-      disjunctiveFacets: [facetName]
+      disjunctiveFacets: [attributeName]
     }),
     _getCurrentRefinement(helper) {
-      let min = helper.state.getNumericRefinement(facetName, '>=');
-      let max = helper.state.getNumericRefinement(facetName, '<=');
+      let min = helper.state.getNumericRefinement(attributeName, '>=');
+      let max = helper.state.getNumericRefinement(attributeName, '<=');
 
       if (min && min.length) {
         min = min[0];
@@ -72,17 +72,17 @@ function rangeSlider({
       };
     },
     _refine(helper, stats, newValues) {
-      helper.clearRefinements(facetName);
+      helper.clearRefinements(attributeName);
       if (newValues[0] > stats.min) {
-        helper.addNumericRefinement(facetName, '>=', newValues[0]);
+        helper.addNumericRefinement(attributeName, '>=', newValues[0]);
       }
       if (newValues[1] < stats.max) {
-        helper.addNumericRefinement(facetName, '<=', newValues[1]);
+        helper.addNumericRefinement(attributeName, '<=', newValues[1]);
       }
       helper.search();
     },
     render({results, helper, templatesConfig}) {
-      let stats = results.getFacetStats(facetName);
+      let stats = results.getFacetStats(attributeName);
 
       let currentRefinement = this._getCurrentRefinement(helper);