feat(connectRange): round the range based on precision (#2498)

* fix(connectRange): round range only with precision of 0 * refactor(RangeSlider): set default precision to 0 * fix(stories): remove tooltips and add specific story for it * fix(RangeInput): update documentation precision default value * feat(stories): add RangeSlider with precision * feat(connectRange): handle range with precision always with the same behaviour * style: lint with prettier * fix(lint): disable eslint for specific line with console statement * fix(lint): avoid inconsistent return * fix(lint): sass
algolia · Oct 18, 2017 · d4df45d · d4df45d
1 parent 7916d16
commit d4df45d
Show file tree

Hide file tree

Showing 12 changed files with 145 additions and 109 deletions.
diff --git a/dev/app/init-builtin-widgets.js b/dev/app/init-builtin-widgets.js
@@ -25,7 +25,7 @@ export default () => {
           })
         );
 
-        //Custom Widget to toggle refinement
+        // Custom Widget to toggle refinement
         window.search.addWidget({
           init({ helper }) {
             helper.toggleRefinement(
@@ -56,7 +56,7 @@ export default () => {
           })
         );
 
-        //Custom Widget to toggle refinement
+        // Custom Widget to toggle refinement
         window.search.addWidget({
           init({ helper }) {
             helper.toggleRefinement(
@@ -800,11 +800,6 @@ export default () => {
             templates: {
               header: 'Price',
             },
-            tooltips: {
-              format(rawValue) {
-                return `$${Math.round(rawValue).toLocaleString()}`;
-              },
-            },
           })
         );
       })
@@ -821,11 +816,6 @@ export default () => {
             },
             min: 100,
             max: 50,
-            tooltips: {
-              format(rawValue) {
-                return `$${Math.round(rawValue).toLocaleString()}`;
-              },
-            },
           })
         );
       })
@@ -838,15 +828,38 @@ export default () => {
             container,
             attributeName: 'price',
             step: 500,
+          })
+        );
+      })
+    )
+    .add(
+      'with tooltips',
+      wrapWithHits(container => {
+        window.search.addWidget(
+          instantsearch.widgets.rangeSlider({
+            container,
+            attributeName: 'price',
             tooltips: {
               format(rawValue) {
-                return `$${Math.round(rawValue).toLocaleString()}`;
+                return `$${rawValue}`;
               },
             },
           })
         );
       })
     )
+    .add(
+      'with precision',
+      wrapWithHits(container => {
+        window.search.addWidget(
+          instantsearch.widgets.rangeSlider({
+            container,
+            attributeName: 'price',
+            precision: 2,
+          })
+        );
+      })
+    )
     .add(
       'without pips',
       wrapWithHits(container => {
@@ -855,11 +868,6 @@ export default () => {
             container,
             attributeName: 'price',
             pips: false,
-            tooltips: {
-              format(rawValue) {
-                return `$${Math.round(rawValue).toLocaleString()}`;
-              },
-            },
           })
         );
       })
@@ -875,11 +883,6 @@ export default () => {
               header: 'Price',
             },
             min: 0,
-            tooltips: {
-              format(rawValue) {
-                return `$${Math.round(rawValue).toLocaleString()}`;
-              },
-            },
           })
         );
       })
@@ -895,11 +898,6 @@ export default () => {
               header: 'Price',
             },
             min: 36,
-            tooltips: {
-              format(rawValue) {
-                return `$${Math.round(rawValue).toLocaleString()}`;
-              },
-            },
           })
         );
       })
@@ -915,11 +913,6 @@ export default () => {
               header: 'Price',
             },
             max: 36,
-            tooltips: {
-              format(rawValue) {
-                return `$${Math.round(rawValue).toLocaleString()}`;
-              },
-            },
           })
         );
       })
@@ -936,11 +929,6 @@ export default () => {
             },
             min: 10,
             max: 500,
-            tooltips: {
-              format(rawValue) {
-                return `$${Math.round(rawValue).toLocaleString()}`;
-              },
-            },
           })
         );
       })

diff --git a/src/components/Breadcrumb/Breadcrumb.js b/src/components/Breadcrumb/Breadcrumb.js
@@ -26,20 +26,22 @@ class Breadcrumb extends PureComponent {
 
     const breadcrumb = items.map((item, idx) => {
       const isLast = idx === items.length - 1;
-      const label = isLast
-        ? <a className={`${cssClasses.disabledLabel} ${cssClasses.label}`}>
-            {item.name}
-          </a>
-        : <a
-            className={cssClasses.label}
-            href={createURL(item.value)}
-            onClick={e => {
-              e.preventDefault();
-              refine(item.value);
-            }}
-          >
-            {item.name}
-          </a>;
+      const label = isLast ? (
+        <a className={`${cssClasses.disabledLabel} ${cssClasses.label}`}>
+          {item.name}
+        </a>
+      ) : (
+        <a
+          className={cssClasses.label}
+          href={createURL(item.value)}
+          onClick={e => {
+            e.preventDefault();
+            refine(item.value);
+          }}
+        >
+          {item.name}
+        </a>
+      );
 
       return [
         <Template

diff --git a/src/components/Template.js b/src/components/Template.js
@@ -42,7 +42,7 @@ export class PureTemplate extends React.Component {
 
     if (isReactElement(content)) {
       throw new Error(
-        'Support for templates as React elements has been removed, please use react-instantsearch',
+        'Support for templates as React elements has been removed, please use react-instantsearch'
       );
     }
 
@@ -60,7 +60,7 @@ PureTemplate.propTypes = {
   rootProps: PropTypes.object,
   templateKey: PropTypes.string,
   templates: PropTypes.objectOf(
-    PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+    PropTypes.oneOfType([PropTypes.string, PropTypes.func])
   ),
   templatesConfig: PropTypes.shape({
     helpers: PropTypes.objectOf(PropTypes.func),
@@ -71,7 +71,7 @@ PureTemplate.propTypes = {
         PropTypes.shape({
           o: PropTypes.string,
           c: PropTypes.string,
-        }),
+        })
       ),
       delimiters: PropTypes.string,
       disableLambda: PropTypes.bool,
@@ -113,15 +113,15 @@ function transformData(fn, templateKey, originalData) {
     }
   } else {
     throw new Error(
-      `transformData must be a function or an object, was ${typeFn} (key : ${templateKey})`,
+      `transformData must be a function or an object, was ${typeFn} (key : ${templateKey})`
     );
   }
 
   const dataType = typeof data;
   const expectedType = typeof originalData;
   if (dataType !== expectedType) {
     throw new Error(
-      `\`transformData\` must return a \`${expectedType}\`, got \`${dataType}\`.`,
+      `\`transformData\` must return a \`${expectedType}\`, got \`${dataType}\`.`
     );
   }
   return data;
@@ -141,15 +141,15 @@ function renderTemplate({
 
   if (!isTemplateString && !isTemplateFunction) {
     throw new Error(
-      `Template must be 'string' or 'function', was '${templateType}' (key: ${templateKey})`,
+      `Template must be 'string' or 'function', was '${templateType}' (key: ${templateKey})`
     );
   } else if (isTemplateFunction) {
     return template(data);
   } else {
     const transformedHelpers = transformHelpersToHogan(
       helpers,
       compileOptions,
-      data,
+      data
     );
     const preparedData = { ...data, helpers: transformedHelpers };
     return hogan.compile(template, compileOptions).render(preparedData);
@@ -166,7 +166,7 @@ function transformHelpersToHogan(helpers, compileOptions, data) {
     curry(function(text) {
       const render = value => hogan.compile(value, compileOptions).render(this);
       return method.call(data, text, render);
-    }),
+    })
   );
 }
 

diff --git a/src/connectors/breadcrumb/connectBreadcrumb.js b/src/connectors/breadcrumb/connectBreadcrumb.js
@@ -5,7 +5,7 @@ import { checkRendering } from '../../lib/utils.js';
 const usage = `Usage:
 var customBreadcrumb = connectBreadcrumb(function renderFn(params, isFirstRendering) {
   // params = {
-  //   createURL,  
+  //   createURL,
   //   items,
   //   refine,
   //   instantSearchInstance,
@@ -74,6 +74,7 @@ export default function connectBreadcrumb(renderFn) {
               !isEqual(isFacetSet.attributes, attributes) ||
               isFacetSet.separator !== separator
             ) {
+              // eslint-disable-next-line no-console
               console.warn(
                 'Using Breadcrumb & HierarchicalMenu on the same facet with different options. Adding that one will override the configuration of the HierarchicalMenu. Check your options.'
               );

diff --git a/src/connectors/hierarchical-menu/connectHierarchicalMenu.js b/src/connectors/hierarchical-menu/connectHierarchicalMenu.js
@@ -94,7 +94,7 @@ export default function connectHierarchicalMenu(renderFn) {
     return {
       getConfiguration: currentConfiguration => {
         if (currentConfiguration.hierarchicalFacets) {
-          let isFacetSet = find(
+          const isFacetSet = find(
             currentConfiguration.hierarchicalFacets,
             ({ name }) => name === hierarchicalFacetName
           );
@@ -105,11 +105,12 @@ export default function connectHierarchicalMenu(renderFn) {
               isFacetSet.separator === separator
             )
           ) {
+            // eslint-disable-next-line no-console
             console.warn(
               'using Breadcrumb & HierarchicalMenu on the same facet with different options'
             );
           }
-          return;
+          return {};
         }
 
         return {

diff --git a/src/connectors/range/__tests__/connectRange-test.js b/src/connectors/range/__tests__/connectRange-test.js
@@ -466,17 +466,57 @@ describe('connectRange', () => {
       expect(actual).toEqual(expectation);
     });
 
-    it('expect to return rounded range values', () => {
+    it('expect to return rounded range values when precision is 0', () => {
       const stats = { min: 1.79, max: 499.99 };
       const widget = connectRange(rendering)({
         attributeName,
+        precision: 0,
       });
 
       const expectation = { min: 1, max: 500 };
       const actual = widget._getCurrentRange(stats);
 
       expect(actual).toEqual(expectation);
     });
+
+    it('expect to return rounded range values when precision is 1', () => {
+      const stats = { min: 1.12345, max: 499.56789 };
+      const widget = connectRange(rendering)({
+        attributeName,
+        precision: 1,
+      });
+
+      const expectation = { min: 1.1, max: 499.6 };
+      const actual = widget._getCurrentRange(stats);
+
+      expect(actual).toEqual(expectation);
+    });
+
+    it('expect to return rounded range values when precision is 2', () => {
+      const stats = { min: 1.12345, max: 499.56789 };
+      const widget = connectRange(rendering)({
+        attributeName,
+        precision: 2,
+      });
+
+      const expectation = { min: 1.12, max: 499.57 };
+      const actual = widget._getCurrentRange(stats);
+
+      expect(actual).toEqual(expectation);
+    });
+
+    it('expect to return rounded range values when precision is 3', () => {
+      const stats = { min: 1.12345, max: 499.56789 };
+      const widget = connectRange(rendering)({
+        attributeName,
+        precision: 3,
+      });
+
+      const expectation = { min: 1.123, max: 499.568 };
+      const actual = widget._getCurrentRange(stats);
+
+      expect(actual).toEqual(expectation);
+    });
   });
 
   describe('_getCurrentRefinement', () => {

diff --git a/src/connectors/range/connectRange.js b/src/connectors/range/connectRange.js
@@ -81,6 +81,8 @@ export default function connectRange(renderFn) {
 
     return {
       _getCurrentRange(stats) {
+        const pow = Math.pow(10, precision);
+
         let min;
         if (hasMinBound) {
           min = minBound;
@@ -100,8 +102,8 @@ export default function connectRange(renderFn) {
         }
 
         return {
-          min: Math.floor(min),
-          max: Math.ceil(max),
+          min: Math.floor(min * pow) / pow,
+          max: Math.ceil(max * pow) / pow,
         };
       },
 

diff --git a/src/css/default/_breadcrumb.scss b/src/css/default/_breadcrumb.scss
@@ -1,16 +1,15 @@
 .ais-breadcrumb--label,
 .ais-breadcrumb--separator,
-.ais-breadcrumb--home,
-{
-    display: inline;
-    color: #3369e7;
+.ais-breadcrumb--home {
+  display: inline;
+  color: #3369E7;
 }
 
 .ais-breadcrumb--item {
-    display: inline;
+  display: inline;
 }
 
 .ais-breadcrumb--disabledLabel {
-    color: rgb(68, 68, 68);
-    display: inline;
-}
+  color: rgb(68, 68, 68);
+  display: inline;
+}