adding select menu widget to dc

madebydna · madebydna · commit adfc9c33290d · 2014-11-19T21:04:01.000-08:00
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -11,7 +11,6 @@ module.exports = function (grunt) {
 
     grunt.initConfig({
         pkg: grunt.file.readJSON('package.json'),
-
         concat: {
             js: {
                 src: jsFiles,
@@ -395,5 +394,6 @@ module.exports.jsFiles = [
     'src/heatmap.js',
     'src/d3.box.js',
     'src/box-plot.js',
+    'src/select-menu.js',
     'src/footer.js'  // NOTE: keep this last
 ];
diff --git a/spec/select-menu-spec.js b/spec/select-menu-spec.js
@@ -0,0 +1,142 @@
+describe('dc.selectMenu', function() {
+    var id, chart;
+    var data, regionDimension, regionGroup;
+    var stateDimension, stateGroup;
+
+    beforeEach(function () {
+        data = crossfilter(loadDateFixture());
+        regionDimension = data.dimension(function(d) { return d.region; });
+        stateDimension = data.dimension(function(d) { return d.state; });
+
+        regionGroup = regionDimension.group();
+        stateGroup = stateDimension.group();
+
+        id = 'seclect-menu';
+        appendChartID(id);
+
+        chart = dc.selectMenu("#" + id);
+        chart.dimension(stateDimension)
+            .group(stateGroup)
+            .transitionDuration(0);
+        chart.render();
+    });
+
+    describe('generation', function () {
+        it('we get something', function() {
+            expect(chart).not.toBeNull();
+        });
+        it('should be registered', function() {
+            expect(dc.hasChart(chart)).toBeTruthy();
+        });
+        it('sets order', function() {
+            expect(chart.order()).toBeDefined();
+        });
+        it('sets prompt text', function() {
+            expect(chart.promptText()).toBe("Select all");
+        });
+        it('creates select tag', function() {
+            expect(chart.selectAll("select").length).toEqual(1);
+        });
+        it('creates prompt option with empty value', function() {
+            var option = chart.selectAll("option")[0][0];
+            expect(option).toBeTruthy();
+            expect(option.value).toEqual("");
+        });
+        it('creates prompt option with default prompt text', function() {
+            var option = chart.selectAll("option")[0][0];
+            expect(option.text).toEqual("Select all");
+        });
+        it('creates correct number of options', function() {
+            expect(chart.selectAll("option.dc-select-option")[0].length).toEqual(stateGroup.all().length);
+        });
+    });
+
+    describe('select options', function(){
+        var first_option, last_option, last_index;
+        beforeEach(function () {
+            last_index = stateGroup.all().length - 1;
+            first_option = getOption(chart,0);
+            last_option = getOption(chart,last_index);
+        });
+        it('display title as default option text', function() {
+            expect(first_option.text).toEqual("California: 3");
+        });
+        it('text property can be changed by changing title', function() {
+            chart.title(function(d){ return d.key }).redraw();
+            first_option = getOption(chart,0);
+            expect(first_option.text).toEqual("California");
+        });
+        it('are ordered by ascending group key by default', function(){
+            expect(first_option.text).toEqual("California: 3");
+            expect(last_option.text).toEqual("Ontario: 2");
+        });
+        it('order can be changed by changing order function', function(){
+            chart.order(function(a,b) { return a.key.length - b.key.length; });
+            chart.redraw();
+            last_option = getOption(chart,last_index);
+            expect(last_option.text).toEqual("Mississippi: 2");
+        });
+    })
+
+    describe('selecting an option', function () {
+        it('filters dimension based on selected option\'s value', function(){
+            chart.onChange(stateGroup.all()[0].key);
+            expect(chart.filter()).toEqual("California");
+        });
+        it('replaces filter on second selection', function(){
+            chart.onChange(stateGroup.all()[0].key);
+            chart.onChange(stateGroup.all()[1].key);
+            expect(chart.filter()).toEqual("Colorado");
+            expect(chart.filters().length).toEqual(1);
+        });
+        it('actually filters dimension', function(){
+            chart.onChange(stateGroup.all()[0].key);
+            expect(regionGroup.all()[0].value).toEqual(0);
+            expect(regionGroup.all()[3].value).toEqual(2);
+        });
+        it('removes filter when prompt option is selected', function(){
+            chart.onChange('');
+            expect(chart.hasFilter()).not.toBeTruthy();
+            expect(regionGroup.all()[0].value).toEqual(1);
+        });
+    });
+
+    describe('redraw with existing filter', function () {
+        it('selects option corresponding to active filter', function(){
+            chart.onChange(stateGroup.all()[0].key);
+            chart.redraw();
+            expect(chart.selectAll("select")[0][0].value).toEqual("California");
+        });
+    });
+
+    describe('filterDisplayed', function () {
+        it('only displays options whose value > 0 by default', function(){
+            regionDimension.filter('South');
+            chart.redraw();
+            expect(chart.selectAll("option.dc-select-option")[0].length).toEqual(1);
+            expect(getOption(chart,0).text).toEqual("California: 2");
+        });
+        it('can be overridden', function(){
+            regionDimension.filter('South');
+            chart.filterDisplayed(function(d) { return true; }).redraw();
+            expect(chart.selectAll("option.dc-select-option")[0].length).toEqual(stateGroup.all().length);
+            expect(getOption(chart, stateGroup.all().length - 1).text).toEqual("Ontario: 0");
+        });
+        it('retains order with filtered options', function(){
+            regionDimension.filter('Central');
+            chart.redraw();
+            expect(getOption(chart,0).text).toEqual('Mississippi: 2');
+            expect(getOption(chart,1).text).toEqual('Ontario: 1');
+        });
+        afterEach(function(){
+            regionDimension.filterAll();
+        })
+    });
+
+    function getOption(chart, i){
+        return chart.selectAll("option.dc-select-option")[0][i];
+    }
+    
+
+});
+
diff --git a/src/select-menu.js b/src/select-menu.js
@@ -0,0 +1,163 @@
+/**
+ ## Select Menu
+ Includes: [Base Mixin](#base-mixin)
+
+The select menu is a simple widget that allows filtering a dimension by selecting an option from an HTML <select/> menu.
+
+ #### dc.selectMenu(parent[, chartGroup])
+ Create a select menu instance and attach it to the given parent element.
+
+ Parameters:
+* parent : string | node | selection - any valid
+ [d3 single selector](https://github.com/mbostock/d3/wiki/Selections#selecting-elements) specifying
+ a dom block element such as a div; or a dom element or d3 selection.
+
+* chartGroup : string (optional) - name of the chart group this chart instance should be placed in.
+ Interaction with a chart will only trigger events and redraws within the chart's group.
+
+ Returns:
+ A newly created select menu instance.
+
+ ```js
+   var select = dc.selectMenu('#select-container')
+                  .dimension(states)
+                  .group(stateGroup);
+
+   // the option text can be set via the title function
+   // by default the option text is '`key`: `value`'
+   select.title(function(d){
+      return 'STATE: ' + d.key;
+   })
+ ```
+
+ **/
+dc.selectMenu = function (parent, chartGroup) {
+    var SELECT_CSS_CLASS = 'dc-select-menu';
+    var OPTION_CSS_CLASS = 'dc-select-option';
+
+    var _chart = dc.baseMixin({});
+
+    var _select;
+    var _promptText = 'Select all';
+    var _order = function (a, b) {
+        return _chart.keyAccessor()(a) > _chart.keyAccessor()(b) ?
+             1 : _chart.keyAccessor()(b) > _chart.keyAccessor()(a) ?
+            -1 : 0;
+    };
+
+    var _filterDisplayed = function (d) {
+        return _chart.valueAccessor()(d) > 0;
+    };
+
+    _chart.data(function (group) {
+        return group.all().filter(_filterDisplayed);
+    });
+
+    _chart._doRender = function () {
+        _chart.select('select').remove();
+        _select = _chart.root().append('select').classed(SELECT_CSS_CLASS, true);
+        _select.append('option').text(_promptText).attr('value', '');
+        renderOptions();
+        return _chart;
+    };
+
+    _chart._doRedraw = function () {
+        renderOptions();
+        // select the option that corresponds to current filter
+        if (_chart.hasFilter()) {
+            _select.property('value', _chart.filter());
+        } else {
+            _select.property('value', '');
+        }
+        return _chart;
+    };
+
+    function renderOptions () {
+        var options = _select.selectAll('option.' + OPTION_CSS_CLASS)
+          .data(_chart.data(), function (d) { return _chart.keyAccessor()(d); });
+
+        options.enter()
+              .append('option')
+              .classed(OPTION_CSS_CLASS, true)
+              .attr('value', function (d) { return _chart.keyAccessor()(d); });
+
+        options.text(_chart.title());
+        options.exit().remove();
+        _select.selectAll('option.' + OPTION_CSS_CLASS).sort(_order);
+
+        _select.on('change', onChange);
+        return options;
+    }
+
+    function onChange () {
+        _chart.onChange(this.value);
+    }
+
+    _chart.onChange = function (val) {
+        if (val) {
+            _chart.replaceFilter(val);
+        } else {
+            _chart.filterAll();
+        }
+        dc.events.trigger(function () {
+            _chart.redrawGroup();
+        });
+    };
+
+    /**
+    #### .order([function])
+    Get or set the function that controls the ordering of option tags in the
+    select menu. By default options are ordered by the group key in ascending
+    order. To order by the group's value for example an appropriate comparator
+     function needs to be specified:
+    ```
+        chart.order(function(a,b) {
+            return a.value > b.value ? 1 : b.value > a.value ? -1 : 0;
+        });
+    ```
+    **/
+    _chart.order = function (_) {
+        if (!arguments.length) {
+            return _order;
+        }
+        _order = _;
+        return _chart;
+    };
+
+    /**
+    #### .promptText([value])
+    Gets or sets the text displayed in the options used to prompt selection.
+    The default is 'Select all'.
+    ```
+        chart.promptText('All states');
+    ```
+    **/
+    _chart.promptText = function (_) {
+        if (!arguments.length) {
+            return _promptText;
+        }
+        _promptText = _;
+        return _chart;
+    };
+
+    /**
+    #### .filterDisplayed([function])
+    Get or set the function that filters option tags prior to display.
+    By default options with a value of < 1 are not displayed.
+    To always display all options override the `filterDisplayed` function:
+    ```
+        chart.filterDisplayed(function() {
+            return true;
+        });
+    ```
+    **/
+    _chart.filterDisplayed = function (_) {
+        if (!arguments.length) {
+            return _filterDisplayed;
+        }
+        _filterDisplayed = _;
+        return _chart;
+    };
+
+    return _chart.anchor(parent, chartGroup);
+};
