improve arranged bar handling

build/webcharts.js

@@ -3402,7 +3402,7 @@
                 );
             })
         ) {
-            this.data.filtered = this.data.raw;
+            this.data.filtered = this.data.raw.slice();
             this.filters
                 .filter(function(filter) {
                     return (
@@ -3418,7 +3418,7 @@
                             : filter.val === d[filter.col];
                     });
                 });
-        } else this.data.filtered = this.data.raw;
+        } else this.data.filtered = this.data.raw.slice();
     }
 
     function updateDataObject() {
@@ -3922,7 +3922,8 @@
                         key: col
                     })
                     .classed('wc-button sort-box', true)
-                    .text(header)
+                    .text(header),
+                type: this.config.types[col]
             };
             sortItem.wrap
                 .append('span')
@@ -3968,27 +3969,50 @@
         this.draw();
     }
 
+    function _typeof(obj) {
+        if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
+            _typeof = function(obj) {
+                return typeof obj;
+            };
+        } else {
+            _typeof = function(obj) {
+                return obj &&
+                    typeof Symbol === 'function' &&
+                    obj.constructor === Symbol &&
+                    obj !== Symbol.prototype
+                    ? 'symbol'
+                    : typeof obj;
+            };
+        }
+
+        return _typeof(obj);
+    }
+
     function sortData(data) {
         var _this = this;
 
         data = data.sort(function(a, b) {
             var order = 0;
 
             _this.sortable.order.forEach(function(item) {
-                var aCell = a[item.col],
-                    bCell = b[item.col];
+                var aCell = a[item.col];
+                var bCell = b[item.col];
 
-                if (order === 0) {
-                    if (
-                        (item.direction === 'ascending' && aCell < bCell) ||
-                        (item.direction === 'descending' && aCell > bCell)
-                    )
-                        order = -1;
-                    else if (
-                        (item.direction === 'ascending' && aCell > bCell) ||
-                        (item.direction === 'descending' && aCell < bCell)
-                    )
-                        order = 1;
+                if (item.type === 'number') {
+                    order = item.direction === 'ascending' ? +aCell - +bCell : +bCell - +aCell;
+                } else {
+                    if (order === 0) {
+                        if (
+                            (item.direction === 'ascending' && aCell < bCell) ||
+                            (item.direction === 'descending' && aCell > bCell)
+                        )
+                            order = -1;
+                        else if (
+                            (item.direction === 'ascending' && aCell > bCell) ||
+                            (item.direction === 'descending' && aCell < bCell)
+                        )
+                            order = 1;
+                    }
                 }
             });
 
@@ -4347,30 +4371,39 @@
     }
 
     function setDefaults$1(firstItem) {
-        //Set data-driven defaults.
-        if (this.config.cols instanceof Array && this.config.headers instanceof Array) {
-            if (this.config.cols.length === 0) delete this.config.cols;
-            if (
-                this.config.headers.length === 0 ||
-                this.config.headers.length !== this.config.cols.length
-            )
-                delete this.config.headers;
-        }
+        var _this = this;
 
-        this.config.cols = this.config.cols || d3.keys(firstItem);
-        this.config.headers = this.config.headers || this.config.cols;
-        this.config.layout = 'horizontal'; // placeholder setting to align table components vertically or horizontally
-        //Set all other defaults.
+        // cols
+        if (
+            !Array.isArray(this.config.cols) ||
+            (Array.isArray(this.config.cols) && this.config.cols.length === 0)
+        )
+            this.config.cols = d3.keys(firstItem); // headers
+
+        if (
+            !Array.isArray(this.config.headers) ||
+            (Array.isArray(this.config.headers) && this.config.headers.length === 0) ||
+            (Array.isArray(this.config.headers) &&
+                this.config.headers.length !== this.config.cols.length)
+        )
+            this.config.headers = this.config.cols.slice(); // types
+
+        if (_typeof(this.config.types) !== 'object') this.config.types = {};
+        this.config.cols.forEach(function(col) {
+            if (!['string', 'number'].includes(_this.config.types[col]))
+                _this.config.types[col] = 'string';
+        }); // Set all other defaults.
 
         setDefault.call(this, 'searchable');
-        setDefault.call(this, 'exportable');
-        setDefault.call(this, 'exports', ['csv']);
         setDefault.call(this, 'sortable');
         setDefault.call(this, 'pagination');
+        setDefault.call(this, 'exportable');
+        setDefault.call(this, 'exports', ['csv']);
         setDefault.call(this, 'nRowsPerPage', 10);
         setDefault.call(this, 'nPageLinksDisplayed', 5);
         setDefault.call(this, 'applyCSS');
         setDefault.call(this, 'dynamicPositioning');
+        setDefault.call(this, 'layout', 'horizontal');
     }
 
     function transformData$1(processed_data) {
@@ -4508,6 +4541,7 @@
         }
     });
 
+    var tableCount = 0;
     function createTable() {
         var element = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'body';
         var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -4540,8 +4574,10 @@
             if (callback) {
                 thisTable.events['on' + event.charAt(0).toUpperCase() + event.slice(1)] = callback;
             }
-        };
+        }; //increment thisChart count to get unique thisChart id
 
+        tableCount++;
+        thisTable.id = tableCount;
         return thisTable;
     }
 

src/createTable.js

@@ -1,6 +1,8 @@
 import table from './table/index';
 import { select } from 'd3';
 
+export var tableCount = 0;
+
 export default function createTable(element = 'body', config = {}, controls = null) {
     let thisTable = Object.create(table);
 
@@ -36,5 +38,10 @@ export default function createTable(element = 'body', config = {}, controls = nu
         }
     };
 
+    //increment thisChart count to get unique thisChart id
+    tableCount++;
+
+    thisTable.id = tableCount;
+
     return thisTable;
 }

src/table/draw/applyFilters.js

@@ -9,7 +9,7 @@ export default function applyFilters() {
                 (Array.isArray(filter.val) && filter.val.length < filter.choices.length)
         )
     ) {
-        this.data.filtered = this.data.raw;
+        this.data.filtered = this.data.raw.slice();
         this.filters
             .filter(
                 filter =>
@@ -24,5 +24,5 @@ export default function applyFilters() {
                         : filter.val === d[filter.col]
                 );
             });
-    } else this.data.filtered = this.data.raw;
+    } else this.data.filtered = this.data.raw.slice();
 }

src/table/setDefaults.js

@@ -2,28 +2,39 @@ import { keys } from 'd3';
 import setDefault from '../util/setDefault';
 
 export default function setDefaults(firstItem) {
-    //Set data-driven defaults.
-    if (this.config.cols instanceof Array && this.config.headers instanceof Array) {
-        if (this.config.cols.length === 0) delete this.config.cols;
-        if (
-            this.config.headers.length === 0 ||
-            this.config.headers.length !== this.config.cols.length
-        )
-            delete this.config.headers;
-    }
+    // cols
+    if (
+        !Array.isArray(this.config.cols) ||
+        (Array.isArray(this.config.cols) && this.config.cols.length === 0)
+    )
+        this.config.cols = keys(firstItem);
 
-    this.config.cols = this.config.cols || keys(firstItem);
-    this.config.headers = this.config.headers || this.config.cols;
-    this.config.layout = 'horizontal'; // placeholder setting to align table components vertically or horizontally
+    // headers
+    if (
+        !Array.isArray(this.config.headers) ||
+        (Array.isArray(this.config.headers) && this.config.headers.length === 0) ||
+        (Array.isArray(this.config.headers) &&
+            this.config.headers.length !== this.config.cols.length)
+    )
+        this.config.headers = this.config.cols.slice();
 
-    //Set all other defaults.
+    // types
+    if (typeof this.config.types !== 'object') this.config.types = {};
+
+    this.config.cols.forEach(col => {
+        if (!['string', 'number'].includes(this.config.types[col]))
+            this.config.types[col] = 'string';
+    });
+
+    // Set all other defaults.
     setDefault.call(this, 'searchable');
-    setDefault.call(this, 'exportable');
-    setDefault.call(this, 'exports', ['csv']);
     setDefault.call(this, 'sortable');
     setDefault.call(this, 'pagination');
+    setDefault.call(this, 'exportable');
+    setDefault.call(this, 'exports', ['csv']);
     setDefault.call(this, 'nRowsPerPage', 10);
     setDefault.call(this, 'nPageLinksDisplayed', 5);
     setDefault.call(this, 'applyCSS');
     setDefault.call(this, 'dynamicPositioning');
+    setDefault.call(this, 'layout', 'horizontal');
 }

src/table/sortable/onClick.js

@@ -17,7 +17,8 @@ export default function onClick(th, header) {
                 .append('div')
                 .datum({ key: col })
                 .classed('wc-button sort-box', true)
-                .text(header)
+                .text(header),
+            type: this.config.types[col]
         };
         sortItem.wrap
             .append('span')

src/table/sortable/sortData.js

@@ -5,20 +5,24 @@ export default function sortData(data) {
         let order = 0;
 
         this.sortable.order.forEach(item => {
-            const aCell = a[item.col],
-                bCell = b[item.col];
+            const aCell = a[item.col];
+            const bCell = b[item.col];
 
-            if (order === 0) {
-                if (
-                    (item.direction === 'ascending' && aCell < bCell) ||
-                    (item.direction === 'descending' && aCell > bCell)
-                )
-                    order = -1;
-                else if (
-                    (item.direction === 'ascending' && aCell > bCell) ||
-                    (item.direction === 'descending' && aCell < bCell)
-                )
-                    order = 1;
+            if (item.type === 'number') {
+                order = item.direction === 'ascending' ? +aCell - +bCell : +bCell - +aCell;
+            } else {
+                if (order === 0) {
+                    if (
+                        (item.direction === 'ascending' && aCell < bCell) ||
+                        (item.direction === 'descending' && aCell > bCell)
+                    )
+                        order = -1;
+                    else if (
+                        (item.direction === 'ascending' && aCell > bCell) ||
+                        (item.direction === 'descending' && aCell < bCell)
+                    )
+                        order = 1;
+                }
             }
         });
 

test-page/createTable/index.js

@@ -1,18 +1,18 @@
 function createTable(element, settings) {
-    var controls = webCharts.createControls(
+    const controls = webCharts.createControls(
         element,
         {
             inputs: [
                 {type: 'subsetter', value_col: 'Period', label: 'Filter by Period'},
-                {type: 'subsetter', value_col: 'Group', label: 'Filter by Group'}
+                {type: 'subsetter', value_col: 'Group', label: 'Filter by Group'},
             ]
         }
     );
 
     return webCharts.createTable(element, settings, controls);
 }
 
-var table = createTable(
+const table = createTable(
     '.table',
     {
         'sortable': true,
@@ -27,17 +27,36 @@ var table = createTable(
 );
 
 d3.csv(
-    'https://cdn.jsdelivr.net/gh/RhoInc/data-library/data/miscellaneous/elements.csv',
+    'https://raw.githubusercontent.com/RhoInc/data-library/master/data/miscellaneous/elements.csv',
     function(d) {
         return d;
     },
     function(data) {
+        table.config.types = Object.keys(data[0])
+            .map(col => {
+                let type = 'string';
+
+                const vector = data
+                    .map(d => d[col]).filter(d => d !== '');
+
+                if (vector.length > 0 && vector.every(d => !isNaN(parseFloat(d))))
+                    type = 'number';
+
+                return [col, type];
+            })
+            .reduce(
+                (acc,cur) => {
+                    acc[cur[0]] = cur[1];
+                    return acc;
+                },
+                {}
+            );
         table.init(data);
 
         //Update settings.
         d3.selectAll('.controls input')
             .on('change',function(){
-                var settings = {
+                const settings = {
                     sortable: d3.select('input.sortable').property('checked'),
                     searchable: d3.select('input.searchable').property('checked'),
                     nRowsPerPage: +d3.select('input.items').node().value,
@@ -50,7 +69,7 @@ d3.csv(
                 console.log(settings);
 
                 d3.select('.table').selectAll('*').remove()
-                var table = createTable(
+                const table = createTable(
                     '.table',
                     settings
                 );
@@ -62,7 +81,7 @@ d3.csv(
 //Randomize columns.
 d3.select('button.randomize-columns')
     .on('click', function() {
-        var table = d3.select('.wc-table').datum();
+        const table = d3.select('.wc-table').datum();
         table.config.cols = Object.keys(table.data.raw[0])
             .reverse()
             .filter(function(d) {
@@ -76,7 +95,7 @@ d3.select('button.randomize-columns')
 //Randomize headers.
 d3.select('button.randomize-headers')
     .on('click', function() {
-        var table = d3.select('.wc-table').datum();
+        const table = d3.select('.wc-table').datum();
         table.config.headers = table.config.cols
             .map(function(key) {
                 const strArr = [];