Fixing up animation and label positioning on right aligned row charts…

… and adding in tests
dc-js · Jun 5, 2015 · 217e294 · 217e294
1 parent ba8bbc0
commit 217e294
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 7 deletions.
diff --git a/spec/row-chart-spec.js b/spec/row-chart-spec.js
@@ -79,6 +79,65 @@ describe('dc.rowChart', function() {
         });
     });
 
+    describe('_useRightYAxis', function () {
+        beforeEach(function () {
+            chart.group(positiveGroupHolder.group);
+        });
+
+        describe('is false', function () {
+            beforeEach(function () {
+                chart.useRightYAxis(false);
+                chart.render();
+            });
+
+            describe('rows', function () {
+                it('should not translate', function () {
+                    expect(chart.selectAll('.row').attr('transform')).toBe('translate(0,10)');
+                });
+            });
+
+            describe('bars', function () {
+                it('should not translate', function () {
+                    expect(chart.selectAll('.row rect').attr('transform')).toBe('translate(0,0)');
+                });
+            });
+
+            describe('labels', function () {
+                it('should position the label by the end', function () {
+                    expect(chart.selectAll('.row text').attr('text-anchor')).toBe('start');
+                });
+            });
+        });
+
+        describe('is true', function () {
+            beforeEach(function () {
+                chart.useRightYAxis(true);
+                chart.render();
+            });
+
+            describe('rows', function () {
+                it('should translate to the width of the chart', function () {
+                    expect(chart.selectAll('.row').attr('transform')).toBe('translate(' + chart.effectiveWidth() + ',10)');
+                });
+            });
+
+            describe('bars', function () {
+                it('should translate to its own width', function () {
+                    var rect = chart.selectAll('.row rect');
+
+                    expect(rect.attr('transform')).toBe('translate(-' + rect[0][0].getBBox().width + ',0)');
+                });
+            });
+
+            describe('labels', function () {
+                it('should position the label by the end', function () {
+                    expect(chart.selectAll('.row text').attr('text-anchor')).toBe('end');
+                });
+            });
+        });
+
+    });
+
     function itShouldBehaveLikeARowChartWithGroup(groupHolder, N) {
         describe('for ' + groupHolder.groupType + ' data', function () {
             var group;

diff --git a/src/row-chart.js b/src/row-chart.js
@@ -187,7 +187,9 @@ dc.rowChart = function (parent, chartGroup) {
         }
 
         var rect = rows.attr('transform', function (d, i) {
-                return 'translate(0,' + ((i + 1) * _gap + i * height) + ')';
+                var h = ((i + 1) * _gap + i * height),
+                    w = _useRightYAxis ? _chart.effectiveWidth() : 0;
+                return 'translate(' + w + ',' + h + ')';
             }).select('rect')
             .attr('height', height)
             .attr('fill', _chart.getColor)
@@ -231,9 +233,10 @@ dc.rowChart = function (parent, chartGroup) {
     function updateLabels(rows) {
         if (_chart.renderLabel()) {
             var lab = rows.select('text')
-                .attr('x', _labelOffsetX)
+                .attr('x', _useRightYAxis ? -_labelOffsetX : _labelOffsetX)
                 .attr('y', _labelOffsetY)
                 .attr('dy', _dyOffset)
+                .attr('text-anchor', _useRightYAxis ? 'end' : 'start')
                 .on('click', onClick)
                 .attr('class', function (d, i) {
                     return _rowCssClass + ' _' + i;
@@ -242,13 +245,21 @@ dc.rowChart = function (parent, chartGroup) {
                     return _chart.label()(d);
                 });
             dc.transition(lab, _chart.transitionDuration())
-                .attr('transform', translateX);
+                .attr('transform', function(d) {
+                    if (_useRightYAxis) {
+                        return 'translate(0,0)';
+                    }
+                    return translateX(d);
+                });
         }
         if (_chart.renderTitleLabel()) {
             var titlelab = rows.select('.' + _titleRowCssClass)
-                    .attr('x', _chart.effectiveWidth() - _titleLabelOffsetX)
+                    .attr('x', _useRightYAxis ?
+                    	_titleLabelOffsetX - _chart.effectiveWidth() :
+                    	_chart.effectiveWidth() - _titleLabelOffsetX
+                    )
                     .attr('y', _labelOffsetY)
-                    .attr('text-anchor', 'end')
+                    .attr('text-anchor', _useRightYAxis ? 'start' : 'end')
                     .on('click', onClick)
                     .attr('class', function (d, i) {
                         return _titleRowCssClass + ' _' + i ;
@@ -257,7 +268,12 @@ dc.rowChart = function (parent, chartGroup) {
                         return _chart.title()(d);
                     });
             dc.transition(titlelab, _chart.transitionDuration())
-                .attr('transform', translateX);
+                .attr('transform', function(d) {
+                    if (_useRightYAxis) {
+                        return 'translate(0,0)';
+                    }
+                    return translateX(d);
+                });
         }
     }
 
@@ -282,6 +298,11 @@ dc.rowChart = function (parent, chartGroup) {
         var x = _x(_chart.cappedValueAccessor(d)),
             x0 = rootValue(),
             s = x > x0 ? x0 : x;
+
+        if (_useRightYAxis) {
+            s -= _chart.effectiveWidth();
+        }
+
         return 'translate(' + s + ',0)';
     }
 

diff --git a/web/examples/index.html b/web/examples/index.html
@@ -40,4 +40,4 @@ <h2>Examples of using dc.js</h2>
     <td><a href="stacked-bar.html">stacked bar</a></td>
 <tr>
 </table>
-</div></body></html>
+</div></body></html>