maintain ordinal axis sort on redraw

css/webcharts.css

@@ -1,27 +1,3 @@
-/*------------------------------------------------------------------------------------------------\
-  Small Multiple Layout
-\------------------------------------------------------------------------------------------------*/
-
-		div.wc-layout.wc-small-multiples::after {
-			content: "";
-			clear: both;
-			display: block;
-		}
-
-		.wc-layout.wc-small-multiples > .wc-chart {
-			float: left;
-			padding: 0 2em 2em 0;
-		}
-
-		.wc-layout.wc-small-multiples > .wc-chart > .wc-chart-title {
-			display: block;
-			font-weight: bold;
-			text-align: center;
-		}
-		.wc-small-multiples .wc-chart > .legend {
-		  display: none;
-		}
-
 /*------------------------------------------------------------------------------------------------\
   Charts
 \------------------------------------------------------------------------------------------------*/
@@ -70,42 +46,118 @@
         fill: #555;
     }
 
-    *[class*="wc-"] .legend {
-				width: 100%;
-        font-size: .9em;
-        padding: 0;
-        margin: 0;
-        display: inline-block;
+    .wc-chart .ordinal.axis .tick line,
+    .wc-chart .ordinal.axis path {
+        display: none;
     }
 
-    *[class*="wc-"] .legend .legend-title {
-        font-weight: bold;
-        margin-right: 1em;
+    .wc-chart.gridlines .ordinal.axis .tick line {
+        display: block;
     }
 
-    *[class*="wc-"] .legend .legend-item {
-        display: inline-block;
-        margin-right: 1em;
-    }
+    /**-------------------------------------------------------------------------------------------\
+      Legend
+    \-------------------------------------------------------------------------------------------**/
 
-    *[class*="wc-"] .legend .legend-item .legend-color-block {
-        position: relative;
-        top: .2em;
-        right: .25em;
-        display: inline-block;
-    }
-    *[class*="wc-"] .legend .legend-item .legend-mark-text {
-        font-weight: bold;
-        margin-right: .5em;
+        *[class*="wc-"] .legend {
+            width: 100%;
+            font-size: .9em;
+            padding: 0;
+            margin: 0;
+            display: inline-block;
+        }
+
+        *[class*="wc-"] .legend--left,
+        *[class*="wc-"] .legend--right {
+            display: block;
+        }
+
+        *[class*="wc-"] .legend--left {
+            float: left;
+        }
+
+        *[class*="wc-"] .legend--left > * {
+            float: left;
+            clear: left;
+        }
+
+        *[class*="wc-"] .legend--right {
+            float: right;
+        }
+
+        *[class*="wc-"] .legend--right > * {
+            float: right;
+            clear: right;
+        }
+
+        *[class*="wc-"] .legend--empty {
+            display: none;
+        }
+
+        *[class*="wc-"] .legend .legend-title {
+            display: inline;
+            font-weight: bold;
+            margin-right: 1em;
+            vertical-align: top;
+        }
+
+        *[class*="wc-"] .legend .legend-title:empty {
+            display: none;
+        }
+
+        *[class*="wc-"] .legend .legend-item {
+            display: inline-block;
+            list-style-type: none;
+            margin-right: 1em;
+        }
+
+        *[class*="wc-"] .legend .legend-item .legend-color-block {
+            position: relative;
+            top: .2em;
+            right: .25em;
+            display: inline-block;
+        }
+
+        *[class*="wc-"] .legend--right .legend-item .legend-color-block {
+            float: right;
+            left: .25em;
+        }
+
+        *[class*="wc-"] .legend .legend-item .legend-mark-text {
+            font-weight: bold;
+            margin-right: .5em;
+        }
+
+        *[class*="wc-"] .legend .legend-item .legend-label {
+            margin-left: 0.25em;
+        }
+
+        *[class*="wc-"] .legend--right .legend-item .legend-label {
+            margin-right: 0.25em;
+        }
+
+/*------------------------------------------------------------------------------------------------\
+  Small multiples
+\------------------------------------------------------------------------------------------------*/
+
+    div.wc-layout.wc-small-multiples::after {
+        content: "";
+        clear: both;
+        display: block;
     }
 
-    .wc-chart .ordinal.axis .tick line,
-    .wc-chart .ordinal.axis path {
-        display: none;
+    .wc-layout.wc-small-multiples > .wc-chart {
+        float: left;
+        padding: 0 2em 2em 0;
     }
 
-    .wc-chart.gridlines .ordinal.axis .tick line {
+    .wc-layout.wc-small-multiples > .wc-chart > .wc-chart-title {
         display: block;
+        font-weight: bold;
+        text-align: center;
+    }
+    .wc-small-multiples .wc-chart > .legend {
+        display: none;
     }
 
 /*------------------------------------------------------------------------------------------------\

package.json

@@ -28,7 +28,7 @@
     "test-controls": "mocha --timeout 5000 --require @babel/register --recursive ./test/controls/*.js",
     "test-miscellaneous": "mocha --timeout 5000 --require @babel/register --recursive ./test/miscellaneous/*.js",
     "test-multiply": "mocha --timeout 5000 --require @babel/register --recursive ./test/multiply/*.js",
-    "test-new": "mocha --require @babel/register ./test/testNewUnitTests.js",
+    "test-new": "mocha --require @babel/register ./test/testNew.js",
     "test-page": "start chrome ./test-page/createChart/index.html && start chrome ./test-page/createTable/index.html && start chrome ./test-page/multiply/index.html",
     "test-table": "mocha --timeout 5000 --require @babel/register --recursive ./test/table/*.js",
     "watch": "rollup -c -w"

src/chart/draw/consolidateData.js

@@ -14,7 +14,7 @@ export default function consolidateData(raw) {
                     ? d
                     : filter.val instanceof Array
                     ? filter.val.indexOf(d[filter.col]) > -1
-                    : d[filter.col] === filter.val;
+                    : d[filter.col] + '' === filter.val + '';
             });
         });
     }

src/chart/draw/consolidateData/setDefaults.js

@@ -1,32 +1,48 @@
 export default function setDefaults() {
+    // x
     this.config.x = this.config.x || {};
-    this.config.y = this.config.y || {};
-
     this.config.x.label =
         this.config.x.label !== undefined ? this.config.x.label : this.config.x.column;
+    this.config.x.sort = this.config.x.sort || 'alphabetical-ascending';
+    this.config.x.type = this.config.x.type || 'linear';
+    this.config.x.range_band = this.config.x.range_band || this.config.range_band;
+
+    // y
+    this.config.y = this.config.y || {};
     this.config.y.label =
         this.config.y.label !== undefined ? this.config.y.label : this.config.y.column;
-
-    this.config.x.sort = this.config.x.sort || 'alphabetical-ascending';
     this.config.y.sort = this.config.y.sort || 'alphabetical-descending';
-
-    this.config.x.type = this.config.x.type || 'linear';
     this.config.y.type = this.config.y.type || 'linear';
-
-    this.config.x.range_band = this.config.x.range_band || this.config.range_band;
     this.config.y.range_band = this.config.y.range_band || this.config.range_band;
 
-    this.config.margin = this.config.margin || {};
+    // marks
+    this.config.marks = this.config.marks && this.config.marks.length ? this.config.marks : [{}];
+    this.config.marks.forEach(function(m, i) {
+        m.id = m.id ? m.id : 'mark' + (i + 1);
+        m.checkColumns = m.checkColumns !== false ? true : false;
+    });
+
+    //legend
     this.config.legend = this.config.legend || {};
     this.config.legend.label =
         this.config.legend.label !== undefined ? this.config.legend.label : this.config.color_by;
     this.config.legend.location =
         this.config.legend.location !== undefined ? this.config.legend.location : 'bottom';
-    this.config.marks = this.config.marks && this.config.marks.length ? this.config.marks : [{}];
-    this.config.marks.forEach(function(m, i) {
-        m.id = m.id ? m.id : 'mark' + (i + 1);
-    });
+    this.config.legend.mark =
+        this.config.legend.mark !== undefined &&
+        typeof this.config.legend.mark === 'string' &&
+        ['bar', 'square', 'circle', 'line'].includes(this.config.legend.mark.toLowerCase())
+            ? this.config.legend.mark.toLowerCase().replace('bar', 'square')
+            : this.config.marks[0].type !== undefined &&
+              typeof this.config.marks[0].type === 'string' &&
+              ['bar', 'circle', 'line'].includes(this.config.marks[0].type.toLowerCase())
+            ? this.config.marks[0].type.toLowerCase().replace('bar', 'square')
+            : 'square';
+
+    // dimensions
+    this.config.margin = this.config.margin || {};
 
+    // miscellaneous
     this.config.date_format = this.config.date_format || '%x';
 
     this.config.padding = this.config.padding !== undefined ? this.config.padding : 0.3;