Fix inset legend height without legend.inset.step - #326

c3.js

@@ -3538,12 +3538,10 @@
         return $$.config.legend_show ? $$.isLegendRight || $$.isLegendInset ? $$.legendItemWidth * ($$.legendStep + 1) : $$.currentWidth : 0;
     };
     c3_chart_internal_fn.getLegendHeight = function () {
-        var $$ = this, config = $$.config, h = 0;
-        if (config.legend_show) {
+        var $$ = this, h = 0;
+        if ($$.config.legend_show) {
             if ($$.isLegendRight) {
                 h = $$.currentHeight;
-            } else if ($$.isLegendInset) {
-                h = config.legend_inset_step ? Math.max(20, $$.legendItemHeight) * (config.legend_inset_step + 1) : $$.height;
             } else {
                 h = Math.max(20, $$.legendItemHeight) * ($$.legendStep + 1);
             }
@@ -3674,6 +3672,11 @@
             }
         }
 
+        if ($$.isLegendInset) {
+            step = config.legend_inset_step ? config.legend_inset_step : targetIds.length;
+            $$.updateLegendStep(step);
+        }
+
         if ($$.isLegendRight) {
             xForLegend = function (id) { return maxWidth * steps[id]; };
             yForLegend = function (id) { return margins[steps[id]] + offsets[id]; };
@@ -3751,7 +3754,7 @@
             $$.legend.insert('g', '.' + CLASS.legendItem)
                 .attr("class", CLASS.legendBackground)
                 .append('rect')
-                .attr('height', $$.getLegendHeight() - 10)
+                .attr('height', $$.getLegendHeight() - 12)
                 .attr('width', maxWidth * (step + 1) + 10);
         }
 

spec/legend-spec.js

@@ -8,25 +8,80 @@ describe('c3 chart legend', function () {
 
     var chart, d3;
 
-    beforeEach(function () {
-        window.initDom();
-
-        chart = window.c3.generate({
+    var args = {
         data: {
             columns: [
                 ['data1', 30, 200, 100, 400, 150, 250],
-                    ['data2', 50, 20, 10, 40, 15, 25],
-                    ['data3', 150, 120, 110, 140, 115, 125]
+                ['data2', 50, 20, 10, 40, 15, 25]
             ]
         }
-        });
+    };
 
+    beforeEach(function (done) {
+        if (typeof chart === 'undefined') {
+            initDom();
+        }
+        chart = window.c3.generate(args);
         d3 = chart.internal.d3;
+        chart.internal.d3.select('.jasmine_html-reporter').style('display', 'none');
+
+        window.setTimeout(function () {
+            done();
+        }, 10);
     });
 
+    describe('legend position', function () {
+
         it('should be located on the center of chart', function () {
             var box = chart.internal.legend.node().getBoundingClientRect();
             expect(box.left + box.right).toBe(640);
         });
 
+    });
+
+    describe('legend as inset', function () {
+
+        it('should change the legend to "inset" successfully', function () {
+            args.legend = {
+                position: 'inset',
+                inset: {
+                    step: null
+                }
+            };
+            expect(true).toBeTruthy();
+        });
+
+        it('should be positioned properly', function () {
+            var box = d3.select('.c3-legend-background').node().getBoundingClientRect();
+            expect(box.top).toBe(5.5);
+            expect(box.left).toBe(60.5);
+        });
+
+        it('should have automatically calculated height', function () {
+            var box = d3.select('.c3-legend-background').node().getBoundingClientRect();
+            expect(box.height).toBe(48);
+        });
+
+        it('should change the legend step to 1 successfully', function () {
+            args.legend.inset.step = 1;
+            expect(true).toBeTruthy();
+        });
+
+        it('should have automatically calculated height', function () {
+            var box = d3.select('.c3-legend-background').node().getBoundingClientRect();
+            expect(box.height).toBe(28);
+        });
+
+        it('should change the legend step to 2 successfully', function () {
+            args.legend.inset.step = 2;
+            expect(true).toBeTruthy();
+        });
+
+        it('should have automatically calculated height', function () {
+            var box = d3.select('.c3-legend-background').node().getBoundingClientRect();
+            expect(box.height).toBe(48);
+        });
+
+    });
+
 });

src/legend.js

@@ -40,12 +40,10 @@ c3_chart_internal_fn.getLegendWidth = function () {
     return $$.config.legend_show ? $$.isLegendRight || $$.isLegendInset ? $$.legendItemWidth * ($$.legendStep + 1) : $$.currentWidth : 0;
 };
 c3_chart_internal_fn.getLegendHeight = function () {
-    var $$ = this, config = $$.config, h = 0;
-    if (config.legend_show) {
+    var $$ = this, h = 0;
+    if ($$.config.legend_show) {
         if ($$.isLegendRight) {
             h = $$.currentHeight;
-        } else if ($$.isLegendInset) {
-            h = config.legend_inset_step ? Math.max(20, $$.legendItemHeight) * (config.legend_inset_step + 1) : $$.height;
         } else {
             h = Math.max(20, $$.legendItemHeight) * ($$.legendStep + 1);
         }
@@ -176,6 +174,11 @@ c3_chart_internal_fn.updateLegend = function (targetIds, options, transitions) {
         }
     }
 
+    if ($$.isLegendInset) {
+        step = config.legend_inset_step ? config.legend_inset_step : targetIds.length;
+        $$.updateLegendStep(step);
+    }
+
     if ($$.isLegendRight) {
         xForLegend = function (id) { return maxWidth * steps[id]; };
         yForLegend = function (id) { return margins[steps[id]] + offsets[id]; };
@@ -253,7 +256,7 @@ c3_chart_internal_fn.updateLegend = function (targetIds, options, transitions) {
         $$.legend.insert('g', '.' + CLASS.legendItem)
             .attr("class", CLASS.legendBackground)
             .append('rect')
-            .attr('height', $$.getLegendHeight() - 10)
+            .attr('height', $$.getLegendHeight() - 12)
             .attr('width', maxWidth * (step + 1) + 10);
     }