[bars] fix sort numeric bar on x axis (#2812)

superset/assets/javascripts/explore/components/ChartContainer.jsx

@@ -167,6 +167,7 @@ class ChartContainer extends React.PureComponent {
   }
 
   renderAlert() {
+    /* eslint-disable react/no-danger */
     const msg = (
       <div>
         <i

superset/assets/javascripts/modules/utils.js

@@ -203,3 +203,16 @@ export function initJQueryAjax() {
     });
   }
 }
+
+export function tryNumify(s) {
+  // Attempts casting to float, returns string when failing
+  try {
+    const parsed = parseFloat(s);
+    if (parsed) {
+      return parsed;
+    }
+  } catch (e) {
+    // pass
+  }
+  return s;
+}

superset/assets/spec/javascripts/modules/utils_spec.jsx

@@ -0,0 +1,38 @@
+import { it, describe } from 'mocha';
+import { expect } from 'chai';
+import {
+  tryNumify, slugify, formatSelectOptionsForRange, d3format,
+} from '../../../javascripts/modules/utils';
+
+describe('utils', () => {
+  it('tryNumify works as expected', () => {
+    expect(tryNumify(5)).to.equal(5);
+    expect(tryNumify('5')).to.equal(5);
+    expect(tryNumify('5.1')).to.equal(5.1);
+    expect(tryNumify('a string')).to.equal('a string');
+  });
+  it('slugify slugifies', () => {
+    expect(slugify('My Neat Label! ')).to.equal('my-neat-label');
+    expect(slugify('Some Letters AnD a 5')).to.equal('some-letters-and-a-5');
+    expect(slugify(' 439278 ')).to.equal('439278');
+    expect(slugify('5')).to.equal('5');
+  });
+  it('formatSelectOptionsForRange', () => {
+    expect(formatSelectOptionsForRange(0, 4)).to.deep.equal([
+      [0, '0'],
+      [1, '1'],
+      [2, '2'],
+      [3, '3'],
+      [4, '4'],
+    ]);
+    expect(formatSelectOptionsForRange(1, 2)).to.deep.equal([
+      [1, '1'],
+      [2, '2'],
+    ]);
+  });
+  it('d3format', () => {
+    expect(d3format('.3s', 1234)).to.equal('1.23k');
+    expect(d3format('.3s', 1237)).to.equal('1.24k');
+    expect(d3format('', 1237)).to.equal('1.24k');
+  });
+});

superset/assets/visualizations/nvd3_vis.js

@@ -5,7 +5,7 @@ import d3 from 'd3';
 
 import { category21 } from '../javascripts/modules/colors';
 import { timeFormatFactory, formatDate } from '../javascripts/modules/dates';
-import { customizeToolTip } from '../javascripts/modules/utils';
+import { customizeToolTip, tryNumify } from '../javascripts/modules/utils';
 
 import { TIME_STAMP_OPTIONS } from '../javascripts/explore/stores/controls';
 
@@ -188,13 +188,7 @@ function nvd3Vis(slice, payload) {
         chart.stacked(stacked);
         if (fd.order_bars) {
           payload.data.forEach((d) => {
-            d.values.sort(
-              function compare(a, b) {
-                if (a.x < b.x) return -1;
-                if (a.x > b.x) return 1;
-                return 0;
-              },
-            );
+            d.values.sort((a, b) => tryNumify(a.x) < tryNumify(b.x) ? -1 : 1);
           });
         }
         if (fd.show_bar_value) {