Fix tooltip position with left padding - #701

c3.js

@@ -2505,11 +2505,7 @@
 
     c3_chart_internal_fn.getAxisWidthByAxisId = function (id, withoutRecompute) {
         var $$ = this, position = $$.getAxisLabelPositionById(id);
-        if (withoutRecompute) {
+        return $$.getMaxTickWidth(id, withoutRecompute) + (position.isInner ? 20 : 40);
-            var box = $$.d3.select('.c3-axis-y').node().getBoundingClientRect();
-            return Math.floor(box.left + box.width);
-        }
-        return $$.getMaxTickWidth(id) + (position.isInner ? 20 : 40);
     };
     c3_chart_internal_fn.getHorizontalAxisHeight = function (axisId) {
         var $$ = this, config = $$.config, h = 30;
@@ -4179,9 +4175,12 @@
             .attr('dx', this.xForRotatedTickText(rotate));
     };
 
-    c3_chart_internal_fn.getMaxTickWidth = function (id) {
+    c3_chart_internal_fn.getMaxTickWidth = function (id, withoutRecompute) {
         var $$ = this, config = $$.config,
             maxWidth = 0, targetsToShow, scale, axis;
+        if (withoutRecompute && $$.currentMaxTickWidths[id]) {
+            return $$.currentMaxTickWidths[id];
+        }
         if ($$.svg) {
             targetsToShow = $$.filterTargetsToShow($$.data.targets);
             if (id === 'y') {

spec/c3-helper.js

@@ -10,17 +10,18 @@ function initDom() {
 }
 typeof initDom !== 'undefined';
 
-function setEvent(chart, x, y) {
+function setMouseEvent(chart, name, x, y, element) {
     'use strict';
 
     var paddingLeft = chart.internal.main.node().transform.baseVal.getItem(0).matrix.e,
-        evt = document.createEvent("MouseEvents");
+        event = document.createEvent("MouseEvents");
-    evt.initMouseEvent("click", true, true, window,
+    event.initMouseEvent(name, true, true, window,
                        0, 0, 0, x + paddingLeft, y + 5,
                        false, false, false, false, 0, null);
-    chart.internal.d3.event = evt;
+    chart.internal.d3.event = event;
+    if (element) { element.dispatchEvent(event); }
 }
-typeof setEvent !== 'undefined';
+typeof setMouseEvent !== 'undefined';
 
 function initChart(chart, args, done) {
     'use strict';

spec/shape.bar-spec.js

@@ -4,7 +4,7 @@ var describe = window.describe,
     beforeEach = window.beforeEach;
 
 var initDom = window.initDom,
-    setEvent = window.setEvent;
+    setMouseEvent = window.setMouseEvent;
 
 describe('c3 chart shape bar', function () {
     'use strict';
@@ -26,16 +26,8 @@ describe('c3 chart shape bar', function () {
     };
 
     beforeEach(function (done) {
-        if (typeof chart === 'undefined') {
+        chart = window.initChart(chart, args, done);
-            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('internal.isWithinBar', function () {
@@ -44,25 +36,25 @@ describe('c3 chart shape bar', function () {
 
             it('should not be within bar', function () {
                 var bar = d3.select('.c3-target-data1 .c3-bar-0').node();
-                setEvent(chart, 0, 0);
+                setMouseEvent(chart, 'click', 0, 0);
                 expect(chart.internal.isWithinBar(bar)).toBeFalsy();
             });
 
             it('should be within bar', function () {
                 var bar = d3.select('.c3-target-data1 .c3-bar-0').node();
-                setEvent(chart, 31, 280);
+                setMouseEvent(chart, 'click', 31, 280);
                 expect(chart.internal.isWithinBar(bar)).toBeTruthy();
             });
 
             it('should not be within bar of negative value', function () {
                 var bar = d3.select('.c3-target-data3 .c3-bar-0').node();
-                setEvent(chart, 68, 280);
+                setMouseEvent(chart, 'click', 68, 280);
                 expect(chart.internal.isWithinBar(bar)).toBeFalsy();
             });
 
             it('should be within bar of negative value', function () {
                 var bar = d3.select('.c3-target-data3 .c3-bar-0').node();
-                setEvent(chart, 68, 350);
+                setMouseEvent(chart, 'click', 68, 350);
                 expect(chart.internal.isWithinBar(bar)).toBeTruthy();
             });
 
@@ -77,19 +69,19 @@ describe('c3 chart shape bar', function () {
 
             it('should not be within bar', function () {
                 var bar = d3.select('.c3-target-data1 .c3-bar-0').node();
-                setEvent(chart, 0, 0);
+                setMouseEvent(chart, 'click', 0, 0);
                 expect(chart.internal.isWithinBar(bar)).toBeFalsy();
             });
 
             it('should be within bar', function () {
                 var bar = d3.select('.c3-target-data1 .c3-bar-0').node();
-                setEvent(chart, 190, 20);
+                setMouseEvent(chart, 'click', 190, 20);
                 expect(chart.internal.isWithinBar(bar)).toBeTruthy();
             });
 
             it('should be within bar of negative value', function () {
                 var bar = d3.select('.c3-target-data3 .c3-bar-0').node();
-                setEvent(chart, 68, 50);
+                setMouseEvent(chart, 'click', 68, 50);
                 expect(chart.internal.isWithinBar(bar)).toBeTruthy();
             });
 

spec/tooltip-spec.js

@@ -0,0 +1,69 @@
+var describe = window.describe,
+    expect = window.expect,
+    it = window.it,
+    beforeEach = window.beforeEach;
+
+describe('c3 chart tooltip', function () {
+    'use strict';
+
+    var chart, d3;
+
+    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]
+            ]
+        }
+    };
+
+    beforeEach(function (done) {
+        chart = window.initChart(chart, args, done);
+        d3 = chart.internal.d3;
+    });
+
+    describe('tooltip position', function () {
+
+        describe('without left margin', function () {
+
+            it('should show tooltip on proper position', function () {
+                var eventRect = d3.select('.c3-event-rect-2').node();
+                window.setMouseEvent(chart, 'mousemove', 100, 100, eventRect);
+
+                var tooltipContainer = d3.select('.c3-tooltip-container'),
+                    top = Math.floor(+tooltipContainer.style('top').replace(/px/, '')),
+                    left = Math.floor(+tooltipContainer.style('left').replace(/px/, '')),
+                    topExpected = 115,
+                    leftExpected = 304;
+                expect(top).toBe(topExpected);
+                expect(left).toBe(leftExpected);
+            });
+
+        });
+
+        describe('with left margin', function () {
+
+            it('should set left margin', function () {
+                d3.select('#chart').style('margin-left', '300px');
+                expect(true).toBeTruthy();
+            });
+
+            it('should show tooltip on proper position', function () {
+                var eventRect = d3.select('.c3-event-rect-2').node();
+                window.setMouseEvent(chart, 'mousemove', 100, 100, eventRect);
+
+                var tooltipContainer = d3.select('.c3-tooltip-container'),
+                    top = Math.floor(+tooltipContainer.style('top').replace(/px/, '')),
+                    left = Math.floor(+tooltipContainer.style('left').replace(/px/, '')),
+                    topExpected = 115,
+                    leftExpected = 304;
+                expect(top).toBe(topExpected);
+                expect(left).toBe(leftExpected);
+            });
+
+        });
+
+    });
+
+});

src/axis.js

@@ -258,9 +258,12 @@ c3_chart_internal_fn.rotateTickText = function (axis, transition, rotate) {
         .attr('dx', this.xForRotatedTickText(rotate));
 };
 
-c3_chart_internal_fn.getMaxTickWidth = function (id) {
+c3_chart_internal_fn.getMaxTickWidth = function (id, withoutRecompute) {
     var $$ = this, config = $$.config,
         maxWidth = 0, targetsToShow, scale, axis;
+    if (withoutRecompute && $$.currentMaxTickWidths[id]) {
+        return $$.currentMaxTickWidths[id];
+    }
     if ($$.svg) {
         targetsToShow = $$.filterTargetsToShow($$.data.targets);
         if (id === 'y') {

src/size.js

@@ -71,11 +71,7 @@ c3_chart_internal_fn.getSvgLeft = function (withoutRecompute) {
 
 c3_chart_internal_fn.getAxisWidthByAxisId = function (id, withoutRecompute) {
     var $$ = this, position = $$.getAxisLabelPositionById(id);
-    if (withoutRecompute) {
+    return $$.getMaxTickWidth(id, withoutRecompute) + (position.isInner ? 20 : 40);
-        var box = $$.d3.select('.c3-axis-y').node().getBoundingClientRect();
-        return Math.floor(box.left + box.width);
-    }
-    return $$.getMaxTickWidth(id) + (position.isInner ? 20 : 40);
 };
 c3_chart_internal_fn.getHorizontalAxisHeight = function (axisId) {
     var $$ = this, config = $$.config, h = 30;