fix #100

build/queryOverview.js

@@ -309,7 +309,7 @@
                           })
                       ])
                       .map(function(item) {
-                          var itemObject = {};
+                          var itemObject = item instanceof Object ? Object.assign({}, item) : {};
 
                           itemObject.value_col = item instanceof Object ? item.value_col : item;
                           itemObject.label =
@@ -1211,38 +1211,42 @@
     function addSelectAll() {
         var context = this;
 
-        this.controls.filters.labels.each(function(d) {
-            var label = d3
-                .select(this)
-                .html(d.label + ' <input class = "qo-select-all" type = "checkbox"></input>');
-            var checkbox = label
-                .select('input')
-                .datum(d)
-                .attr('title', 'Deselect All ' + d.label + ' Options')
-                .property('checked', true)
-                .on('click', function(di) {
-                    var checkbox = d3.select(this);
-                    var checked = this.checked;
-
-                    //Update checkbox tooltip.
-                    checkbox.attr(
-                        'title',
-                        checked
-                            ? 'Deselect All ' + di.label + ' Options'
-                            : 'Select All ' + di.label + ' Options'
-                    );
-
-                    //Update filter object.
-                    var filter = context.filters.find(function(filter) {
-                        return filter.col === di.value_col;
+        this.controls.filters.labels
+            .filter(function(d) {
+                return d.multiple;
+            })
+            .each(function(d) {
+                var label = d3
+                    .select(this)
+                    .html(d.label + ' <input class = "qo-select-all" type = "checkbox"></input>');
+                var checkbox = label
+                    .select('input')
+                    .datum(d)
+                    .attr('title', 'Deselect All ' + d.label + ' Options')
+                    .property('checked', true)
+                    .on('click', function(di) {
+                        var checkbox = d3.select(this);
+                        var checked = this.checked;
+
+                        //Update checkbox tooltip.
+                        checkbox.attr(
+                            'title',
+                            checked
+                                ? 'Deselect All ' + di.label + ' Options'
+                                : 'Select All ' + di.label + ' Options'
+                        );
+
+                        //Update filter object.
+                        var filter = context.filters.find(function(filter) {
+                            return filter.col === di.value_col;
+                        });
+                        if (checked) filter.val = filter.choices;
+                        else filter.val = [];
+
+                        //Redraw.
+                        context.draw();
                     });
-                    if (checked) filter.val = filter.choices;
-                    else filter.val = [];
-
-                    //Redraw.
-                    context.draw();
-                });
-        });
+            });
         this.controls.filters.checkboxes = this.controls.filters.labels.selectAll('.qo-select-all');
     }
 
@@ -1251,21 +1255,23 @@
         var filter = this.filters.find(function(filter) {
             return filter.col === d.value_col;
         });
-        filter.val = selectedOptions;
-        var checked = filter.val.length === filter.choices.length;
+        filter.val = d.multiple ? selectedOptions : selectedOptions.pop();
 
         //Update checkbox.
-        var checkbox = this.controls.filters.checkboxes
-            .filter(function(di) {
-                return di.value_col === d.value_col;
-            })
-            .attr(
-                'title',
-                checked
-                    ? 'Deselect All ' + d.label + ' Options'
-                    : 'Select All ' + d.label + ' Options'
-            )
-            .property('checked', checked);
+        if (d.multiple) {
+            var checked = filter.val.length === filter.choices.length;
+            var checkbox = this.controls.filters.checkboxes
+                .filter(function(di) {
+                    return di.value_col === d.value_col;
+                })
+                .attr(
+                    'title',
+                    checked
+                        ? 'Deselect All ' + d.label + ' Options'
+                        : 'Select All ' + d.label + ' Options'
+                )
+                .property('checked', checked);
+        }
     }
 
     function updateFilterEventListeners() {
@@ -1502,6 +1508,10 @@
         );
     }
 
+    function setXDomain() {
+        if (this.filtered_data.length === 0) this.x_dom = [0, 0];
+    }
+
     function setYDomain() {
         var _this = this;
 
@@ -1549,9 +1559,10 @@
 
     function setChartHeight() {
         //Match chart height to number of bars currently displayed.
-        this.raw_height =
-            (+this.config.range_band + this.config.range_band * this.config.padding) *
-            this.y_dom.length;
+        this.raw_height = this.filtered_data.length
+            ? (+this.config.range_band + this.config.range_band * this.config.padding) *
+              this.y_dom.length
+            : 100;
     }
 
     function updateXAxisLabel() {
@@ -1572,6 +1583,7 @@
 
     function onDraw() {
         setLeftMargin.call(this);
+        setXDomain.call(this);
         setYDomain.call(this);
         setChartHeight.call(this);
         updateXAxisLabel.call(this);
@@ -1735,7 +1747,7 @@
                         color: 'red'
                     })
                     .transition()
-                    .delay(5000)
+                    .delay(3000)
                     .style({
                         'font-weight': 'normal',
                         'text-decoration': 'none',
@@ -1762,7 +1774,7 @@
                         color: 'red'
                     })
                     .transition()
-                    .delay(5000)
+                    .delay(3000)
                     .style({
                         'font-weight': 'normal',
                         'text-decoration': 'none',
@@ -1803,7 +1815,7 @@
                         fill: 'red'
                     })
                     .transition()
-                    .delay(5000)
+                    .delay(3000)
                     .style({
                         'font-weight': 'normal',
                         'text-decoration': 'none',
@@ -2043,6 +2055,21 @@
         });
     }
 
+    function addNoDataIndicator() {
+        this.svg.select('.qo-no-data').remove();
+        console.log(this.filtered_data);
+        if (this.filtered_data.length === 0)
+            this.svg
+                .append('text')
+                .classed('qo-no-data', true)
+                .attr({
+                    x: this.plot_width / 2,
+                    y: this.plot_height / 2,
+                    'text-anchor': 'middle'
+                })
+                .text('No queries selected.  Verify that no filter selections are in conflict.');
+    }
+
     function onResize() {
         //Add filter functionality to legend.
         legendFilter.call(this);
@@ -2067,6 +2094,9 @@
 
         //Add bar deselection.
         addBarDeselection.call(this);
+
+        //Add informational text to the chart canvas when filters are in conflict.
+        addNoDataIndicator.call(this);
     }
 
     function onDestroy() {}
@@ -2267,17 +2297,20 @@
     function truncateCellText() {
         var _this = this;
 
-        this.tbody
-            .selectAll('td')
-            .attr('title', function(d) {
-                return d.text;
-            })
-            .filter(function(d) {
-                return d.text.length > _this.chart.initialSettings.truncation_cutoff;
-            })
-            .text(function(d) {
-                return d.text.substring(0, _this.chart.initialSettings.truncation_cutoff) + '...';
-            });
+        if (this.data.raw.length)
+            this.tbody
+                .selectAll('td')
+                .attr('title', function(d) {
+                    return d.text;
+                })
+                .filter(function(d) {
+                    return d.text.length > _this.chart.initialSettings.truncation_cutoff;
+                })
+                .text(function(d) {
+                    return (
+                        d.text.substring(0, _this.chart.initialSettings.truncation_cutoff) + '...'
+                    );
+                });
     }
 
     function moveScrollBarLeft() {

src/chart/onDraw.js

@@ -1,10 +1,12 @@
 import setLeftMargin from './onDraw/setLeftMargin';
+import setXDomain from './onDraw/setXDomain';
 import setYDomain from './onDraw/setYDomain';
 import setChartHeight from './onDraw/setChartHeight';
 import updateXAxisLabel from './onDraw/updateXAxisLabel';
 
 export default function onDraw() {
     setLeftMargin.call(this);
+    setXDomain.call(this);
     setYDomain.call(this);
     setChartHeight.call(this);
     updateXAxisLabel.call(this);

src/chart/onDraw/setChartHeight.js

@@ -1,6 +1,7 @@
 export default function setChartHeight() {
     //Match chart height to number of bars currently displayed.
-    this.raw_height =
-        (+this.config.range_band + this.config.range_band * this.config.padding) *
-        this.y_dom.length;
+    this.raw_height = this.filtered_data.length
+        ? (+this.config.range_band + this.config.range_band * this.config.padding) *
+          this.y_dom.length
+        : 100;
 }

src/chart/onDraw/setXDomain.js

@@ -0,0 +1,3 @@
+export default function setXDomain() {
+    if (this.filtered_data.length === 0) this.x_dom = [0, 0];
+}

src/chart/onLayout/addSelectAll.js

@@ -1,7 +1,7 @@
 export default function addSelectAll() {
     const context = this;
 
-    this.controls.filters.labels.each(function(d) {
+    this.controls.filters.labels.filter(d => d.multiple).each(function(d) {
         const label = d3
             .select(this)
             .html(`${d.label} <input class = "qo-select-all" type = "checkbox"></input>`);

src/chart/onLayout/updateFilterEventListeners/updateSelectAll.js

@@ -1,15 +1,17 @@
 export default function updateSelectAll(d, selectedOptions) {
     //Update filter object.
     const filter = this.filters.find(filter => filter.col === d.value_col);
-    filter.val = selectedOptions;
-    const checked = filter.val.length === filter.choices.length;
+    filter.val = d.multiple ? selectedOptions : selectedOptions.pop();
 
     //Update checkbox.
-    const checkbox = this.controls.filters.checkboxes
-        .filter(di => di.value_col === d.value_col)
-        .attr(
-            'title',
-            checked ? `Deselect All ${d.label} Options` : `Select All ${d.label} Options`
-        )
-        .property('checked', checked);
+    if (d.multiple) {
+        const checked = filter.val.length === filter.choices.length;
+        const checkbox = this.controls.filters.checkboxes
+            .filter(di => di.value_col === d.value_col)
+            .attr(
+                'title',
+                checked ? `Deselect All ${d.label} Options` : `Select All ${d.label} Options`
+            )
+            .property('checked', checked);
+    }
 }

src/chart/onResize.js

@@ -6,6 +6,7 @@ import hideBars from './onResize/hideBars';
 import annotateNumberOfQueries from './onResize/annotateNumberOfQueries';
 import addBarClick from './onResize/addBarClick';
 import addBarDeselection from './onResize/addBarDeselection';
+import addNoDataIndicator from './onResize/addNoDataIndicator';
 
 export default function onResize() {
     //Add filter functionality to legend.
@@ -31,4 +32,7 @@ export default function onResize() {
 
     //Add bar deselection.
     addBarDeselection.call(this);
+
+    //Add informational text to the chart canvas when filters are in conflict.
+    addNoDataIndicator.call(this);
 }

src/chart/onResize/addNoDataIndicator.js

@@ -0,0 +1,14 @@
+export default function addNoDataIndicator() {
+    this.svg.select('.qo-no-data').remove();
+    console.log(this.filtered_data);
+    if (this.filtered_data.length === 0)
+        this.svg
+            .append('text')
+            .classed('qo-no-data', true)
+            .attr({
+                x: this.plot_width / 2,
+                y: this.plot_height / 2,
+                'text-anchor': 'middle'
+            })
+            .text('No queries selected.  Verify that no filter selections are in conflict.');
+}

src/chart/onResize/addYAxisTickClick.js

@@ -19,7 +19,7 @@ export default function addYAxisTickClick() {
                     color: 'red'
                 })
                 .transition()
-                .delay(5000)
+                .delay(3000)
                 .style({
                     'font-weight': 'normal',
                     'text-decoration': 'none',
@@ -44,7 +44,7 @@ export default function addYAxisTickClick() {
                     color: 'red'
                 })
                 .transition()
-                .delay(5000)
+                .delay(3000)
                 .style({
                     'font-weight': 'normal',
                     'text-decoration': 'none',
@@ -79,7 +79,7 @@ export default function addYAxisTickClick() {
                     fill: 'red'
                 })
                 .transition()
-                .delay(5000)
+                .delay(3000)
                 .style({
                     'font-weight': 'normal',
                     'text-decoration': 'none',

src/configuration/syncSettings/arrayOfVariablesCheck.js

@@ -16,7 +16,7 @@ export default function arrayOfVariablesCheck(defaultVariables, userDefinedVaria
                       )
                   ])
                   .map(item => {
-                      const itemObject = {};
+                      const itemObject = item instanceof Object ? Object.assign({}, item) : {};
 
                       itemObject.value_col = item instanceof Object ? item.value_col : item;
                       itemObject.label =

src/listing/onDraw/truncateCellText.js

@@ -1,7 +1,8 @@
 export default function truncateCellText() {
-    this.tbody
-        .selectAll('td')
-        .attr('title', d => d.text)
-        .filter(d => d.text.length > this.chart.initialSettings.truncation_cutoff)
-        .text(d => `${d.text.substring(0, this.chart.initialSettings.truncation_cutoff)}...`);
+    if (this.data.raw.length)
+        this.tbody
+            .selectAll('td')
+            .attr('title', d => d.text)
+            .filter(d => d.text.length > this.chart.initialSettings.truncation_cutoff)
+            .text(d => `${d.text.substring(0, this.chart.initialSettings.truncation_cutoff)}...`);
 }

test-page/index.js

@@ -6,7 +6,7 @@ d3.csv(
             console.log(error);
 
         var settings = {
-            truncation_cutoff: 10,
+            filters: [{value_col: 'fieldname', multiple: true}],
         };
         var instance = queryOverview(
             '#container',