select menu: size option and example

dc-js · Aug 18, 2015 · 19d3351 · 19d3351
1 parent 2e5baa5
commit 19d3351
Show file tree

Hide file tree

Showing 3 changed files with 143 additions and 6 deletions.
diff --git a/spec/select-menu-spec.js b/spec/select-menu-spec.js
@@ -44,9 +44,16 @@ describe('dc.selectMenu', function() {
             chart.multiple(true).redraw();
             expect(chart.selectAll("select").attr("multiple")).toBeTruthy();
         });
+        it('select tag does not have size by default', function() {
+            expect(chart.selectAll("select").attr("size")).toBeNull();
+        });
+        it('can have size set', function() {
+            chart.size(10).redraw();
+            expect(chart.selectAll("select").attr("size")).toEqual('10');
+        });
         it('creates prompt option with empty value', function() {
             var option = chart.selectAll("option")[0][0];
-            expect(option).toBeTruthy();
+            expect(option).not.toBeNull();
             expect(option.value).toEqual("");
         });
         it('creates prompt option with default prompt text', function() {
@@ -189,4 +196,4 @@ describe('dc.selectMenu', function() {
     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
@@ -41,6 +41,7 @@ dc.selectMenu = function (parent, chartGroup) {
     var _select;
     var _promptText = 'Select all';
     var _multiple = false;
+    var _size = null;
     var _order = function (a, b) {
         return _chart.keyAccessor()(a) > _chart.keyAccessor()(b) ?
              1 : _chart.keyAccessor()(b) > _chart.keyAccessor()(a) ?
@@ -60,15 +61,15 @@ dc.selectMenu = function (parent, chartGroup) {
         _select = _chart.root().append('select')
                         .classed(SELECT_CSS_CLASS, true);
 
-        switchMultipleSelectOption();
+        setAttributes();
 
         _select.append('option').text(_promptText).attr('value', '');
         renderOptions();
         return _chart;
     };
 
     _chart._doRedraw = function () {
-        switchMultipleSelectOption();
+        setAttributes();
         renderOptions();
         // select the option(s) corresponding to current filter(s)
         if (_chart.hasFilter() && _multiple) {
@@ -129,12 +130,17 @@ dc.selectMenu = function (parent, chartGroup) {
         });
     };
 
-    function switchMultipleSelectOption () {
+    function setAttributes () {
         if (_multiple) {
             _select.attr('multiple', true);
         } else {
             _select.attr('multiple', null);
         }
+        if (_size !== null) {
+            _select.attr('size', _size);
+        } else {
+            _select.attr('size', null);
+        }
     }
 
     /**
@@ -209,5 +215,18 @@ dc.selectMenu = function (parent, chartGroup) {
         return _chart;
     };
 
+    /**
+     #### .size([number])
+     Controls the height, in lines, of the select menu, when `.multiple()` is true. Default: undefined (not set).
+     **/
+    _chart.size = function (_) {
+        if (!arguments.length) {
+            return _size;
+        }
+        _size = _;
+
+        return _chart;
+    };
+
     return _chart.anchor(parent, chartGroup);
-};
+};
diff --git a/web/examples/select.html b/web/examples/select.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>dc.js - Select Menu Example</title>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" type="text/css" href="../css/dc.css"/>
+</head>
+<body>
+
+  <div id="select1">
+    <div>
+      <a class='reset'
+         href='javascript:select1.filterAll();dc.redrawAll();'
+         style='visibility: hidden;'>reset</a>
+    </div>
+  </div>
+  <div id="select2">
+    <div>
+      <a class='reset'
+         href='javascript:select2.filterAll();dc.redrawAll();'
+         style='visibility: hidden;'>reset</a>
+    </div>
+  </div>
+  <div id="select3">
+    <div>
+      <a class='reset'
+         href='javascript:select3.filterAll();dc.redrawAll();'
+         style='visibility: hidden;'>reset</a>
+    </div>
+  </div>
+<div style="clear: both"></div>
+<div id="datatable"></div>
+
+
+<script type="text/javascript" src="../js/d3.js"></script>
+<script type="text/javascript" src="../js/crossfilter.js"></script>
+<script type="text/javascript" src="../js/dc.js"></script>
+
+<style type="text/css">
+  .dc-chart th {
+    text-align: left
+  }
+  .dc-chart th,.dc-chart td {
+      padding-left: 10px;
+  }
+  .dc-chart tr.dc-table-group td {
+      padding-top: 4px;
+      border-bottom: 1px solid black;
+  }
+  .dc-chart select {
+      width: 150px;
+  }
+</style>
+
+<script type="text/javascript">
+
+  var select1 = dc.selectMenu('#select1'),
+      select2 = dc.selectMenu('#select2'),
+      select3 = dc.selectMenu('#select3'),
+      datatable = dc.dataTable('#datatable');
+
+  // create a bunch of crosslinked categorical data
+
+  var letters = [];
+  for(var i = 0; i < 26; ++i)
+      letters.push(String.fromCharCode(i+65));
+
+  var colors = ["AliceBlue","AntiqueWhite","Aqua","Aquamarine","Azure","Beige","Bisque","Black","BlanchedAlmond","Blue","BlueViolet","Brown","BurlyWood","CadetBlue","Chartreuse","Chocolate","Coral","CornflowerBlue","Cornsilk","Crimson","Cyan","DarkBlue","DarkCyan","DarkGoldenRod","DarkGray","DarkGrey","DarkGreen","DarkKhaki","DarkMagenta","DarkOliveGreen","Darkorange","DarkOrchid","DarkRed","DarkSalmon","DarkSeaGreen","DarkSlateBlue","DarkSlateGray","DarkSlateGrey","DarkTurquoise","DarkViolet","DeepPink","DeepSkyBlue","DimGray","DimGrey","DodgerBlue","FireBrick","FloralWhite","ForestGreen","Fuchsia","Gainsboro","GhostWhite","Gold","GoldenRod","Gray","Grey","Green","GreenYellow","HoneyDew","HotPink","IndianRed","Indigo","Ivory","Khaki","Lavender","LavenderBlush","LawnGreen","LemonChiffon","LightBlue","LightCoral","LightCyan","LightGoldenRodYellow","LightGray","LightGrey","LightGreen","LightPink","LightSalmon","LightSeaGreen","LightSkyBlue","LightSlateGray","LightSlateGrey","LightSteelBlue","LightYellow","Lime","LimeGreen","Linen","Magenta","Maroon","MediumAquaMarine","MediumBlue","MediumOrchid","MediumPurple","MediumSeaGreen","MediumSlateBlue","MediumSpringGreen","MediumTurquoise","MediumVioletRed","MidnightBlue","MintCream","MistyRose","Moccasin","NavajoWhite","Navy","OldLace","Olive","OliveDrab","Orange","OrangeRed","Orchid","PaleGoldenRod","PaleGreen","PaleTurquoise","PaleVioletRed","PapayaWhip","PeachPuff","Peru","Pink","Plum","PowderBlue","Purple","Red","RosyBrown","RoyalBlue","SaddleBrown","Salmon","SandyBrown","SeaGreen","SeaShell","Sienna","Silver","SkyBlue","SlateBlue","SlateGray","SlateGrey","Snow","SpringGreen","SteelBlue","Tan","Teal","Thistle","Tomato","Turquoise","Violet","Wheat","White","WhiteSmoke","Yellow","YellowGreen"];
+
+  var states = new Array("AK","AL","AR","AZ","CA","CO","CT","DC","DE","FL","GA","GU","HI","IA","ID", "IL","IN","KS","KY","LA","MA","MD","ME","MH","MI","MN","MO","MS","MT","NC","ND","NE","NH","NJ","NM","NV","NY", "OH","OK","OR","PA","PR","PW","RI","SC","SD","TN","TX","UT","VA","VI","VT","WA","WI","WV","WY");
+
+  var data = [], SIZE = 500;
+
+  function rnd(a) {
+      return a[Math.floor(Math.random()*a.length)];
+  }
+
+  for(i = 0; i < SIZE; ++i)
+      data.push({letter: rnd(letters), color: rnd(colors), state: rnd(states)});
+
+  var ndx = crossfilter(data),
+      letterDimension = ndx.dimension(function(d) { return d.letter; }),
+      colorDimension = ndx.dimension(function(d) { return d.color; }),
+      stateDimension = ndx.dimension(function(d) { return d.state; }),
+      letterDimension2 = ndx.dimension(function(d) { return d.letter; });
+
+
+  select1
+    .dimension(letterDimension)
+    .group(letterDimension.group());
+  select2
+    .dimension(colorDimension)
+    .group(colorDimension.group())
+    .multiple(true)
+    .size(10);
+  select3.dimension(stateDimension)
+    .group(stateDimension.group())
+    .multiple(true)
+    .size(10);
+
+  datatable
+    .dimension(letterDimension2)
+    .group(function(d) { return d.letter; })
+    .columns(['letter', 'color', 'state'])
+    .size(data.length);
+
+  dc.renderAll();
+
+</script>
+</body>
+</html>