Merge remote-tracking branch 'origin/auto-size'

Conflicts:
	dc.min.js
	dc.min.js.map

dc.js

@@ -691,7 +691,15 @@ dc.baseChart = function (_chart) {
     var _root;
     var _svg;
 
-    var _width = 200, _height = 200;
+    var _default_width = function (element) {
+        return element && element.getBoundingClientRect && element.getBoundingClientRect().width || 200;
+    };
+    var _width = _default_width;
+
+    var _default_height = function (element) {
+        return element && element.getBoundingClientRect && element.getBoundingClientRect().height || 200;
+    };
+    var _height = _default_height;
 
     var _keyAccessor = function (d) {
         return d.key;
@@ -757,27 +765,38 @@ dc.baseChart = function (_chart) {
 
     /**
     #### .width([value])
-    Set or get width attribute of a chart. If the value is given, then it will be used as the new width.
-
-    If no value specified then value of the current width attribute will be returned.
+    Set or get width attribute of a chart. See `.height` below for further description of the behavior.
 
     **/
     _chart.width = function (w) {
-        if (!arguments.length) return _width;
-        _width = w;
+        if (!arguments.length) return _width(_root.node());
+        _width = d3.functor(w || _default_width);
         return _chart;
     };
 
     /**
     #### .height([value])
-    Set or get height attribute of a chart. If the value is given, then it will be used as the new height.
+    Set or get height attribute of a chart. The height is applied to the SVG element
+    generated by the chart when rendered (or rerendered). If a value is given, then it
+    will be used to calculate the new height and the chart returned for method chaining.
+    The value can either be a numeric, a function, or falsy. If no value specified then
+    value of the current height attribute will be returned.
 
-    If no value specified then value of the current height attribute will be returned.
+    By default, without an explicit height being given, the chart will select the width
+    of its anchor element. If that isn't possible it defaults to 200;
+
+    Examples:
+
+    ```js
+    chart.height(250); // Set the chart's height to 250px;
+    chart.height(function(anchor) { return doSomethingWith(anchor); }); // set the chart's height with a function
+    chart.height(null); // reset the height to the default auto calculation
+    ```
 
     **/
     _chart.height = function (h) {
-        if (!arguments.length) return _height;
-        _height = h;
+        if (!arguments.length) return _height(_root.node());
+        _height = d3.functor(h || _default_height);
         return _chart;
     };
 

src/base-chart.js

@@ -14,7 +14,15 @@ dc.baseChart = function (_chart) {
     var _root;
     var _svg;
 
-    var _width = 200, _height = 200;
+    var _default_width = function (element) {
+        return element && element.getBoundingClientRect && element.getBoundingClientRect().width || 200;
+    };
+    var _width = _default_width;
+
+    var _default_height = function (element) {
+        return element && element.getBoundingClientRect && element.getBoundingClientRect().height || 200;
+    };
+    var _height = _default_height;
 
     var _keyAccessor = function (d) {
         return d.key;
@@ -80,27 +88,38 @@ dc.baseChart = function (_chart) {
 
     /**
     #### .width([value])
-    Set or get width attribute of a chart. If the value is given, then it will be used as the new width.
-
-    If no value specified then value of the current width attribute will be returned.
+    Set or get width attribute of a chart. See `.height` below for further description of the behavior.
 
     **/
     _chart.width = function (w) {
-        if (!arguments.length) return _width;
-        _width = w;
+        if (!arguments.length) return _width(_root.node());
+        _width = d3.functor(w || _default_width);
         return _chart;
     };
 
     /**
     #### .height([value])
-    Set or get height attribute of a chart. If the value is given, then it will be used as the new height.
+    Set or get height attribute of a chart. The height is applied to the SVG element
+    generated by the chart when rendered (or rerendered). If a value is given, then it
+    will be used to calculate the new height and the chart returned for method chaining.
+    The value can either be a numeric, a function, or falsy. If no value specified then
+    value of the current height attribute will be returned.
 
-    If no value specified then value of the current height attribute will be returned.
+    By default, without an explicit height being given, the chart will select the width
+    of its anchor element. If that isn't possible it defaults to 200;
+
+    Examples:
+
+    ```js
+    chart.height(250); // Set the chart's height to 250px;
+    chart.height(function(anchor) { return doSomethingWith(anchor); }); // set the chart's height with a function
+    chart.height(null); // reset the height to the default auto calculation
+    ```
 
     **/
     _chart.height = function (h) {
-        if (!arguments.length) return _height;
-        _height = h;
+        if (!arguments.length) return _height(_root.node());
+        _height = d3.functor(h || _default_height);
         return _chart;
     };
 

test/base-chart-test.js

@@ -20,6 +20,7 @@ suite.addBatch({
     teardown: function (topic) {
         resetAllFilters();
         resetBody();
+        dc.chartRegistry.clear();
     }
 });
 
@@ -48,6 +49,7 @@ suite.addBatch({
     teardown: function (topic) {
         resetAllFilters();
         resetBody();
+        dc.chartRegistry.clear();
     }
 });
 
@@ -77,6 +79,7 @@ suite.addBatch({
     teardown: function (topic) {
         resetAllFilters();
         resetBody();
+        dc.chartRegistry.clear();
     }
 });
 
@@ -106,6 +109,7 @@ suite.addBatch({
     teardown: function (topic) {
         resetAllFilters();
         resetBody();
+        dc.chartRegistry.clear();
     }
 });
 
@@ -129,6 +133,7 @@ suite.addBatch({
     teardown: function (topic) {
         resetAllFilters();
         resetBody();
+        dc.chartRegistry.clear();
     }
 });
 
@@ -152,6 +157,7 @@ suite.addBatch({
     teardown: function (topic) {
         resetAllFilters();
         resetBody();
+        dc.chartRegistry.clear();
     }
 });
 
@@ -179,5 +185,44 @@ suite.addBatch({
     }
 });
 
-suite.export(module);
+suite.addBatch({
+    'calculation of dimensions': {
+        topic: function () {
+            d3.select("body").append("div").attr("id", "ele");
+            return dc.baseChart({}).anchor('#ele').dimension(valueDimension).group(valueGroup);
+        },
+
+        'set automatically': function (chart) {
+            chart.height(null);
+            chart.width(null);
+            chart.render();
+            assert.equal(chart.height(), 200);
+            assert.equal(chart.width(), 200);
+        },
+
+        'set to a specific number': function (chart) {
+            chart.height(300);
+            chart.width(500);
+            chart.render();
+            assert.equal(chart.height(), 300);
+            assert.equal(chart.width(), 500);
+        },
+
+        'set to a callback': function (chart) {
+            var calculation = sinon.stub().returns(800);
+            chart.width(calculation);
+            chart.render();
+            assert.isFalse(calculation.called)
+            assert.equal(chart.width(), 800);
+            assert.isTrue(calculation.called)
+        }
+    },
+
+    teardown: function (topic) {
+        resetAllFilters();
+        resetBody();
+        dc.chartRegistry.clear();
+    }
+});
 
+suite.export(module);

web/docs/api-1.7.0-dev.md

@@ -82,14 +82,25 @@ Base chart is an abstract functional object representing a basic dc chart object
 Every function on base chart are also inherited available on all concrete chart implementation in dc library.
 
 #### .width([value])
-Set or get width attribute of a chart. If the value is given, then it will be used as the new width.
-
-If no value specified then value of the current width attribute will be returned.
+Set or get width attribute of a chart. See `.height` below for further description of the behavior.
 
 #### .height([value])
-Set or get height attribute of a chart. If the value is given, then it will be used as the new height.
+Set or get height attribute of a chart. The height is applied to the SVG element
+generated by the chart when rendered (or rerendered). If a value is given, then it
+will be used to calculate the new height and the chart returned for method chaining.
+The value can either be a numeric, a function, or falsy. If no value specified then
+value of the current height attribute will be returned.
+
+By default, without an explicit height being given, the chart will select the width
+of its anchor element. If that isn't possible it defaults to 200;
+
+Examples:
 
-If no value specified then value of the current height attribute will be returned.
+```js
+chart.height(250); // Set the chart's height to 250px;
+chart.height(function(anchor) { return doSomethingWith(anchor); }); // set the chart's height with a function
+chart.height(null); // reset the height to the default auto calculation
+```
 
 #### .dimension([value]) - **mandatory**
 Set or get dimension attribute of a chart. In dc a dimension can be any valid
@@ -531,8 +542,8 @@ chart.colorDomain(function() {
 Stackable chart is an abstract chart introduced to provide cross-chart support of stackability. Concrete implementation of
 charts can then selectively mix-in this capability.
 
-#### .stack(group[, name, retriever])
-Stack a new crossfilter group into this chart with optionally a custom value retriever. All stacks in the same chart will
+#### .stack(group[, name, accessor])
+Stack a new crossfilter group into this chart with optionally a custom value accessor. All stacks in the same chart will
 share the same key accessor therefore share the same set of keys. In more concrete words, imagine in a stacked bar chart
 all bars will be positioned using the same set of keys on the x axis while stacked vertically. If name is specified then
 it will be used to generate legend label.
@@ -543,6 +554,14 @@ chart.stack(valueSumGroup)
 .stack(avgByDayGroup, function(d){return d.value.avgByDay;});
 ```
 
+#### .hideStack(name)
+Hide all stacks on the chart with the given name.
+The chart must be re-rendered for this change to appear.
+
+#### .showStack(name)
+Show all stacks on the chart with the given name.
+The chart must be re-rendered for this change to appear.
+
 ## <a name="abstract-bubble-chart" href="#abstract-bubble-chart">#</a> Abstract Bubble Chart [Abstract] < [Color Chart](#color-chart)
 An abstraction provides reusable functionalities for any chart that needs to visualize data using bubbles.
 

web/docs/index.html

@@ -180,11 +180,19 @@ <h2><a name="base-chart" href="#base-chart">#</a> Base Chart [Abstract]</h2>
 <p>Base chart is an abstract functional object representing a basic dc chart object for all chart and widget implementation.
 Every function on base chart are also inherited available on all concrete chart implementation in dc library.</p>
 <h4>.width([value])</h4>
-<p>Set or get width attribute of a chart. If the value is given, then it will be used as the new width.</p>
-<p>If no value specified then value of the current width attribute will be returned.</p>
+<p>Set or get width attribute of a chart. See <code>.height</code> below for further description of the behavior.</p>
 <h4>.height([value])</h4>
-<p>Set or get height attribute of a chart. If the value is given, then it will be used as the new height.</p>
-<p>If no value specified then value of the current height attribute will be returned.</p>
+<p>Set or get height attribute of a chart. The height is applied to the SVG element
+generated by the chart when rendered (or rerendered). If a value is given, then it
+will be used to calculate the new height and the chart returned for method chaining.
+The value can either be a numeric, a function, or falsy. If no value specified then
+value of the current height attribute will be returned.</p>
+<p>By default, without an explicit height being given, the chart will select the width
+of its anchor element. If that isn&#39;t possible it defaults to 200;</p>
+<p>Examples:</p>
+<pre><code class="lang-js">chart.height(<span class="number">250</span>); // Set <span class="keyword">the</span> chart's height <span class="keyword">to</span> <span class="number">250</span>px;
+chart.height(function(anchor) { <span class="constant">return</span> doSomethingWith(anchor); }); // <span class="keyword">set</span> <span class="keyword">the</span> chart's height <span class="keyword">with</span> a function
+chart.height(null); // reset <span class="keyword">the</span> height <span class="keyword">to</span> <span class="keyword">the</span> default auto calculation</code></pre>
 <h4>.dimension([value]) - <strong>mandatory</strong></h4>
 <p>Set or get dimension attribute of a chart. In dc a dimension can be any valid
 <a href="https://github.com/square/crossfilter/wiki/API-Reference#wiki-dimension">crossfilter dimension</a>. If the value is given,
@@ -516,15 +524,21 @@ <h4>.colorDomain([domain])</h4>
 <h2><a name="stackable-chart" href="#stackable-chart">#</a> Stackable Chart [Abstract]</h2>
 <p>Stackable chart is an abstract chart introduced to provide cross-chart support of stackability. Concrete implementation of
 charts can then selectively mix-in this capability.</p>
-<h4>.stack(group[, name, retriever])</h4>
-<p>Stack a new crossfilter group into this chart with optionally a custom value retriever. All stacks in the same chart will
+<h4>.stack(group[, name, accessor])</h4>
+<p>Stack a new crossfilter group into this chart with optionally a custom value accessor. All stacks in the same chart will
 share the same key accessor therefore share the same set of keys. In more concrete words, imagine in a stacked bar chart
 all bars will be positioned using the same set of keys on the x axis while stacked vertically. If name is specified then
 it will be used to generate legend label.</p>
 <pre><code class="lang-js"><span class="comment">// stack group using default accessor</span>
 chart<span class="variable">.stack</span>(valueSumGroup)
 <span class="comment">// stack group using custom accessor</span>
 <span class="variable">.stack</span>(avgByDayGroup, function(d){<span class="keyword">return</span> d<span class="variable">.value</span><span class="variable">.avgByDay</span>;});</code></pre>
+<h4>.hideStack(name)</h4>
+<p>Hide all stacks on the chart with the given name.
+The chart must be re-rendered for this change to appear.</p>
+<h4>.showStack(name)</h4>
+<p>Show all stacks on the chart with the given name.
+The chart must be re-rendered for this change to appear.</p>
 <h2><a name="abstract-bubble-chart" href="#abstract-bubble-chart">#</a> Abstract Bubble Chart [Abstract] &lt; <a href="#color-chart">Color Chart</a></h2>
 <p>An abstraction provides reusable functionalities for any chart that needs to visualize data using bubbles.</p>
 <h4>.r([bubbleRadiusScale])</h4>

web/js/dc.js

@@ -691,7 +691,15 @@ dc.baseChart = function (_chart) {
     var _root;
     var _svg;
 
-    var _width = 200, _height = 200;
+    var _default_width = function (element) {
+        return element && element.getBoundingClientRect && element.getBoundingClientRect().width || 200;
+    };
+    var _width = _default_width;
+
+    var _default_height = function (element) {
+        return element && element.getBoundingClientRect && element.getBoundingClientRect().height || 200;
+    };
+    var _height = _default_height;
 
     var _keyAccessor = function (d) {
         return d.key;
@@ -757,27 +765,38 @@ dc.baseChart = function (_chart) {
 
     /**
     #### .width([value])
-    Set or get width attribute of a chart. If the value is given, then it will be used as the new width.
-
-    If no value specified then value of the current width attribute will be returned.
+    Set or get width attribute of a chart. See `.height` below for further description of the behavior.
 
     **/
     _chart.width = function (w) {
-        if (!arguments.length) return _width;
-        _width = w;
+        if (!arguments.length) return _width(_root.node());
+        _width = d3.functor(w || _default_width);
         return _chart;
     };
 
     /**
     #### .height([value])
-    Set or get height attribute of a chart. If the value is given, then it will be used as the new height.
+    Set or get height attribute of a chart. The height is applied to the SVG element
+    generated by the chart when rendered (or rerendered). If a value is given, then it
+    will be used to calculate the new height and the chart returned for method chaining.
+    The value can either be a numeric, a function, or falsy. If no value specified then
+    value of the current height attribute will be returned.
 
-    If no value specified then value of the current height attribute will be returned.
+    By default, without an explicit height being given, the chart will select the width
+    of its anchor element. If that isn't possible it defaults to 200;
+
+    Examples:
+
+    ```js
+    chart.height(250); // Set the chart's height to 250px;
+    chart.height(function(anchor) { return doSomethingWith(anchor); }); // set the chart's height with a function
+    chart.height(null); // reset the height to the default auto calculation
+    ```
 
     **/
     _chart.height = function (h) {
-        if (!arguments.length) return _height;
-        _height = h;
+        if (!arguments.length) return _height(_root.node());
+        _height = d3.functor(h || _default_height);
         return _chart;
     };