tests and docs for #794

also brought contribution in line with jscs styles

Thanks @hhravn!

AUTHORS

@@ -49,3 +49,4 @@ Jasmine Hegman <jasmine@jhegman.com>
 Davis Ford <davisford@zenoconsulting.biz>
 gal12 <gal123@gmail.com>
 Sri Kadimisetty
+hhravn <hhravn@gmail.com>

Changelog.md

@@ -1,6 +1,13 @@
 ## add-logo tag
  * Added logo to main page and favicon (#618)
 
+## 2.0.0 beta 2
+ * Re-implement renderlets as regular event `.on('renderlet')`. old function `.renderlet()`
+   is deprecated, by Matt Traynham (#776 / #833, replaces #779)
+ * Geochoropleth tests sped up, by Jasmine Hegman (#825 / #817)
+ * Number display test cleaned up, by Jasmine Hegman (#826/ #783)
+ * Provide a way to override the heatmap labels, by hhravn (#794)
+
 ## 2.0.0 beta 1
  * Merged #800: unselectable ids starting with numbers #789. Thanks Jasmine Hegman!
  * Interface and features frozen - from this point all fixes will be merged to

dc.js

@@ -7838,6 +7838,47 @@ dc.heatMap = function (parent, chartGroup) {
     _chart._mandatoryAttributes(['group']);
     _chart.title(_chart.colorAccessor());
 
+    var _colsLabel = function (d) {
+        return d;
+    };
+    var _rowsLabel = function (d) {
+        return d;
+    };
+
+   /**
+    #### .colsLabel([labelFunction])
+    Set or get the column label function. The chart class uses this function to render
+    column labels on the X axis. It is passed the column name.
+    ```js
+    // the default label function just returns the name
+    chart.colsLabel(function(d) { return d; });
+    ```
+    **/
+    _chart.colsLabel = function (_) {
+        if (!arguments.length) {
+            return _colsLabel;
+        }
+        _colsLabel = _;
+        return _chart;
+    };
+
+   /**
+    #### .rowsLabel([labelFunction])
+    Set or get the row label function. The chart class uses this function to render
+    row labels on the Y axis. It is passed the row name.
+    ```js
+    // the default label function just returns the name
+    chart.rowsLabel(function(d) { return d; });
+    ```
+    **/
+    _chart.rowsLabel = function (_) {
+        if (!arguments.length) {
+            return _rowsLabel;
+        }
+        _rowsLabel = _;
+        return _chart;
+    };
+
     var _xAxisOnClick = function (d) { filterAxis(0, d); };
     var _yAxisOnClick = function (d) { filterAxis(1, d); };
     var _boxOnClick = function (d) {
@@ -7980,9 +8021,9 @@ dc.heatMap = function (parent, chartGroup) {
               .attr('y', _chart.effectiveHeight())
               .attr('dy', 12)
               .on('click', _chart.xAxisOnClick())
-              .text(function (d) { return d; });
+              .text(_chart.colsLabel());
         dc.transition(gColsText, _chart.transitionDuration())
-               .text(function (d) { return d; })
+               .text(_chart.colsLabel())
                .attr('x', function (d) { return cols(d) + boxWidth / 2; });
         gColsText.exit().remove();
         var gRows = _chartBody.selectAll('g.rows');
@@ -7996,9 +8037,9 @@ dc.heatMap = function (parent, chartGroup) {
               .attr('x', 0)
               .attr('dx', -2)
               .on('click', _chart.yAxisOnClick())
-              .text(function (d) { return d; });
+              .text(_chart.rowsLabel());
         dc.transition(gRowsText, _chart.transitionDuration())
-              .text(function (d) { return d; })
+              .text(_chart.rowsLabel())
               .attr('y', function (d) { return rows(d) + boxHeight / 2; });
         gRowsText.exit().remove();
 

spec/heatmap-spec.js

@@ -102,6 +102,24 @@ describe("dc.heatmap", function() {
             expect(xaxisTexts[0][1].textContent).toEqual('2');
         });
 
+        describe('with custom labels', function() {
+            beforeEach(function() {
+                chart.colsLabel(function(x) { return 'col ' + x;})
+                    .rowsLabel(function(x) { return 'row ' + x;})
+                    .redraw();
+            });
+            it('should display the custom labels on the x axis', function() {
+                var xaxisTexts = chart.selectAll(".cols.axis text");
+                expect(xaxisTexts[0][0].textContent).toEqual('col 1');
+                expect(xaxisTexts[0][1].textContent).toEqual('col 2');
+            });
+            it('should display the custom labels on the y axis', function() {
+                var yaxisTexts = chart.selectAll(".rows.axis text");
+                expect(yaxisTexts[0][0].textContent).toEqual('row 1');
+                expect(yaxisTexts[0][1].textContent).toEqual('row 2');
+            });
+        });
+
         describe('box radius', function() {
             it('should default the x', function () {
                 chart.select('rect.heat-box').each(function () {
@@ -133,6 +151,7 @@ describe("dc.heatmap", function() {
                 });
             });
         });
+
     });
 
     describe('change crossfilter', function () {

src/heatmap.js

@@ -42,28 +42,46 @@ dc.heatMap = function (parent, chartGroup) {
     _chart._mandatoryAttributes(['group']);
     _chart.title(_chart.colorAccessor());
 
-    var _colsLabel = function(d){
+    var _colsLabel = function (d) {
         return d;
     };
-    var _rowsLabel = function(d){
+    var _rowsLabel = function (d) {
         return d;
-    }
+    };
 
+   /**
+    #### .colsLabel([labelFunction])
+    Set or get the column label function. The chart class uses this function to render
+    column labels on the X axis. It is passed the column name.
+    ```js
+    // the default label function just returns the name
+    chart.colsLabel(function(d) { return d; });
+    ```
+    **/
     _chart.colsLabel = function (_) {
         if (!arguments.length) {
             return _colsLabel;
         }
         _colsLabel = _;
         return _chart;
-    }
+    };
 
-    _chart.rowsLabel = function(_) {
-                if (!arguments.length) {
+   /**
+    #### .rowsLabel([labelFunction])
+    Set or get the row label function. The chart class uses this function to render
+    row labels on the Y axis. It is passed the row name.
+    ```js
+    // the default label function just returns the name
+    chart.rowsLabel(function(d) { return d; });
+    ```
+    **/
+    _chart.rowsLabel = function (_) {
+        if (!arguments.length) {
             return _rowsLabel;
         }
         _rowsLabel = _;
         return _chart;
-    }
+    };
 
     var _xAxisOnClick = function (d) { filterAxis(0, d); };
     var _yAxisOnClick = function (d) { filterAxis(1, d); };

web/docs/api-latest.md

@@ -1933,6 +1933,22 @@ var heatMap1 = dc.heatMap('#chart-container1');
 var heatMap2 = dc.heatMap('#chart-container2', 'chartGroupA');
 ```
 
+#### .colsLabel([labelFunction])
+Set or get the column label function. The chart class uses this function to render
+column labels on the X axis. It is passed the column name.
+```js
+// the default label function just returns the name
+chart.colsLabel(function(d) { return d; });
+```
+
+#### .rowsLabel([labelFunction])
+Set or get the row label function. The chart class uses this function to render
+row labels on the Y axis. It is passed the row name.
+```js
+// the default label function just returns the name
+chart.rowsLabel(function(d) { return d; });
+```
+
 #### .rows([values])
 Gets or sets the values used to create the rows of the heatmap, as an array. By default, all
 the values will be fetched from the data using the value accessor, and they will be sorted in

web/docs/index.html

@@ -1610,6 +1610,16 @@ <h4 id="dc-heatmap-parent-chartgroup-">dc.heatMap(parent[, chartGroup])</h4>
 var heatMap1 = dc.heatMap(<span class="string">'#chart-container1'</span>);</span>
 // <span class="operator"><span class="keyword">create</span> a heat map under #chart-container2 element <span class="keyword">using</span> chart <span class="keyword">group</span> A
 var heatMap2 = dc.heatMap(<span class="string">'#chart-container2'</span>, <span class="string">'chartGroupA'</span>);</span></code></pre>
+<h4 id="-colslabel-labelfunction-">.colsLabel([labelFunction])</h4>
+<p>Set or get the column label function. The chart class uses this function to render
+column labels on the X axis. It is passed the column name.</p>
+<pre><code class="lang-js">// the default label <span class="function"><span class="keyword">function</span> <span class="title">just</span> <span class="title">returns</span> <span class="title">the</span> <span class="title">name</span>
+<span class="title">chart.colsLabel</span><span class="params">(function(d)</span></span> { <span class="keyword">return</span> d; });</code></pre>
+<h4 id="-rowslabel-labelfunction-">.rowsLabel([labelFunction])</h4>
+<p>Set or get the row label function. The chart class uses this function to render
+row labels on the Y axis. It is passed the row name.</p>
+<pre><code class="lang-js">// the default label <span class="function"><span class="keyword">function</span> <span class="title">just</span> <span class="title">returns</span> <span class="title">the</span> <span class="title">name</span>
+<span class="title">chart.rowsLabel</span><span class="params">(function(d)</span></span> { <span class="keyword">return</span> d; });</code></pre>
 <h4 id="-rows-values-">.rows([values])</h4>
 <p>Gets or sets the values used to create the rows of the heatmap, as an array. By default, all
 the values will be fetched from the data using the value accessor, and they will be sorted in

web/js/dc.js

@@ -7838,6 +7838,47 @@ dc.heatMap = function (parent, chartGroup) {
     _chart._mandatoryAttributes(['group']);
     _chart.title(_chart.colorAccessor());
 
+    var _colsLabel = function (d) {
+        return d;
+    };
+    var _rowsLabel = function (d) {
+        return d;
+    };
+
+   /**
+    #### .colsLabel([labelFunction])
+    Set or get the column label function. The chart class uses this function to render
+    column labels on the X axis. It is passed the column name.
+    ```js
+    // the default label function just returns the name
+    chart.colsLabel(function(d) { return d; });
+    ```
+    **/
+    _chart.colsLabel = function (_) {
+        if (!arguments.length) {
+            return _colsLabel;
+        }
+        _colsLabel = _;
+        return _chart;
+    };
+
+   /**
+    #### .rowsLabel([labelFunction])
+    Set or get the row label function. The chart class uses this function to render
+    row labels on the Y axis. It is passed the row name.
+    ```js
+    // the default label function just returns the name
+    chart.rowsLabel(function(d) { return d; });
+    ```
+    **/
+    _chart.rowsLabel = function (_) {
+        if (!arguments.length) {
+            return _rowsLabel;
+        }
+        _rowsLabel = _;
+        return _chart;
+    };
+
     var _xAxisOnClick = function (d) { filterAxis(0, d); };
     var _yAxisOnClick = function (d) { filterAxis(1, d); };
     var _boxOnClick = function (d) {
@@ -7980,9 +8021,9 @@ dc.heatMap = function (parent, chartGroup) {
               .attr('y', _chart.effectiveHeight())
               .attr('dy', 12)
               .on('click', _chart.xAxisOnClick())
-              .text(function (d) { return d; });
+              .text(_chart.colsLabel());
         dc.transition(gColsText, _chart.transitionDuration())
-               .text(function (d) { return d; })
+               .text(_chart.colsLabel())
                .attr('x', function (d) { return cols(d) + boxWidth / 2; });
         gColsText.exit().remove();
         var gRows = _chartBody.selectAll('g.rows');
@@ -7996,9 +8037,9 @@ dc.heatMap = function (parent, chartGroup) {
               .attr('x', 0)
               .attr('dx', -2)
               .on('click', _chart.yAxisOnClick())
-              .text(function (d) { return d; });
+              .text(_chart.rowsLabel());
         dc.transition(gRowsText, _chart.transitionDuration())
-              .text(function (d) { return d; })
+              .text(_chart.rowsLabel())
               .attr('y', function (d) { return rows(d) + boxHeight / 2; });
         gRowsText.exit().remove();