refactor makeLegend.js

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;
     }
 
 /*------------------------------------------------------------------------------------------------\

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;

src/chart/draw/consolidateData/transformData.js

@@ -80,7 +80,7 @@ export default function transformData(raw, mark) {
                     ? d
                     : e.val instanceof Array
                     ? e.val.indexOf(d[e.col]) > -1
-                    : d[e.col] === e.val;
+                    : d[e.col] + '' === e.val.toString() + '';
             });
         });
         //get domain for all non-All values of first filter

src/chart/draw/consolidateData/transformData/makeNest.js

@@ -32,18 +32,24 @@ export default function makeNest(mark, entries, sublevel) {
     if (sublevel) {
         this_nest.key(d => d[sublevel]);
         this_nest.sortKeys((a, b) => {
-            return this.config.x.type === 'time'
-                ? ascending(new Date(a), new Date(b))
-                : this.config.x.order
-                ? ascending(this.config.x.order.indexOf(a), this.config.x.order.indexOf(b))
-                : sublevel === this.config.color_by && this.config.legend.order
-                ? ascending(
-                      this.config.legend.order.indexOf(a),
-                      this.config.legend.order.indexOf(b)
-                  )
-                : this.config.x.type === 'ordinal' || this.config.y.type === 'ordinal'
-                ? naturalSorter(a, b)
-                : ascending(+a, +b);
+            let sort;
+
+            if (this.config.x.type === 'time') {
+                sort = ascending(new Date(a), new Date(b));
+            } else if (this.config.x.order) {
+                sort = ascending(this.config.x.order.indexOf(a), this.config.x.order.indexOf(b));
+            } else if (sublevel === this.config.color_by && this.config.legend.order) {
+                sort = ascending(
+                    this.config.legend.order.indexOf(a),
+                    this.config.legend.order.indexOf(b)
+                );
+            } else if (this.config.x.type === 'ordinal' || this.config.y.type === 'ordinal') {
+                sort = naturalSorter(a, b);
+            } else {
+                sort = ascending(+a, +b);
+            }
+
+            return sort;
         });
     }
     this_nest.rollup(r => {

src/chart/draw/setColorScale.js

@@ -9,7 +9,7 @@ export default function setColorScale() {
             ? config.color_dom.slice()
             : set(data.map(m => m[config.color_by]))
                   .values()
-                  .filter(f => f && f !== 'undefined');
+                  .filter(f => f !== 'undefined');
 
     if (config.legend.order)
         colordom.sort((a, b) =>

src/chart/init.js

@@ -26,7 +26,7 @@ export default function init(data, test = false) {
     this.initial_data = data;
 
     let startup = data => {
-        //connect this chart and its controls, if any
+        // connect this chart and its controls, if any
         if (this.controls) {
             this.controls.targets.push(this);
             if (!this.controls.ready) {
@@ -36,7 +36,7 @@ export default function init(data, test = false) {
             }
         }
 
-        //make sure container is visible (has height and width) before trying to initialize
+        // make sure container is visible (has height and width) before trying to initialize
         var visible = select(this.div).property('offsetWidth') > 0 || test;
         if (!visible) {
             console.warn(

src/chart/init/checkRequired.js

@@ -28,7 +28,7 @@ export default function checkRequired(data) {
                 requiredVars.push('this.config.marks[' + i + '].split');
                 requiredCols.push(e.split);
             }
-            if (e.values) {
+            if (e.values && e.checkColumns) {
                 for (const value in e.values) {
                     requiredVars.push('this.config.marks[' + i + "].values['" + value + "']");
                     requiredCols.push(value);

src/chart/layout/addLegend.js

@@ -1,11 +1,10 @@
 export default function addLegend() {
     //The legend is contained in the parent object of multiples so each multiple does not need its own legend.
-    if (!this.parent)
-        this.wrap
+    if (!this.parent) {
+        const legend = this.wrap
             .append('ul')
             .datum(() => null) // prevent data inheritance
-            .attr('class', 'legend')
-            .style('vertical-align', 'top')
-            .append('span')
-            .attr('class', 'legend-title');
+            .classed('legend', true);
+        const legend_title = legend.append('span').classed('legend-title', true);
+    }
 }