Fix click on negative bar on rotated axis - #561

c3.js

@@ -2966,11 +2966,12 @@
             ];
         };
     };
-    c3_chart_internal_fn.isWithinBar = function (_this) {
+    c3_chart_internal_fn.isWithinBar = function (that) {
         var d3 = this.d3,
-            mouse = d3.mouse(_this), box = _this.getBoundingClientRect(),
+            mouse = d3.mouse(that), box = that.getBoundingClientRect(),
-            seg0 = _this.pathSegList.getItem(0), seg1 = _this.pathSegList.getItem(1),
+            seg0 = that.pathSegList.getItem(0), seg1 = that.pathSegList.getItem(1),
-            x = seg0.x, y = Math.min(seg0.y, seg1.y), w = box.width, h = box.height, offset = 2,
+            x = Math.min(seg0.x, seg1.x), y = Math.min(seg0.y, seg1.y),
+            w = box.width, h = box.height, offset = 2,
             sx = x - offset, ex = x + w + offset, sy = y + h + offset, ey = y - offset;
         return sx < mouse[0] && mouse[0] < ex && ey < mouse[1] && mouse[1] < sy;
     };

spec/axis-spec.js

@@ -3,35 +3,35 @@ var describe = window.describe,
     it = window.it,
     beforeEach = window.beforeEach;
 
-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]
-        ]
-    },
-    axis: {
-        y: {
-            tick: {
-                values: null,
-                count: undefined
-            }
-        },
-        y2: {
-            tick: {
-                values: null,
-                count: undefined
-            }
-        }
-    }
-};
-
 describe('c3 chart axis', 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]
+            ]
+        },
+        axis: {
+            y: {
+                tick: {
+                    values: null,
+                    count: undefined
+                }
+            },
+            y2: {
+                tick: {
+                    values: null,
+                    count: undefined
+                }
+            }
+        }
+    };
+
     beforeEach(function () {
         window.initDom();
         chart = window.c3.generate(args);

spec/c3-helper.js

@@ -9,3 +9,15 @@ function initDom() {
     document.body.style.margin = '0px';
 }
 typeof initDom !== 'undefined';
+
+function setEvent(chart, x, y) {
+    'use strict';
+
+    var paddingLeft = chart.internal.main.node().transform.baseVal.getItem(0).matrix.e,
+        evt = document.createEvent("MouseEvents");
+    evt.initMouseEvent("click", true, true, window,
+                       0, 0, 0, x + paddingLeft, y + 5,
+                       false, false, false, false, 0, null);
+    chart.internal.d3.event = evt;
+}
+typeof setEvent !== 'undefined';

spec/shape.bar-spec.js

@@ -0,0 +1,100 @@
+var describe = window.describe,
+    expect = window.expect,
+    it = window.it,
+    beforeEach = window.beforeEach;
+
+var initDom = window.initDom,
+    setEvent = window.setEvent;
+
+describe('c3 chart shape bar', 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]
+            ],
+            type: 'bar'
+        },
+        axis: {
+            rotated: false
+        }
+    };
+
+    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('internal.isWithinBar', function () {
+
+        describe('with normal axis', function () {
+
+            it('should not be within bar', function () {
+                var bar = d3.select('.c3-target-data1 .c3-bar-0').node();
+                setEvent(chart, 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);
+                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);
+                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);
+                expect(chart.internal.isWithinBar(bar)).toBeTruthy();
+            });
+
+        });
+
+        describe('with rotated axis', function () {
+
+            it('should change the chart as axis rotated', function () {
+                args.axis.rotated = true;
+                expect(true).toBeTruthy();
+            });
+
+            it('should not be within bar', function () {
+                var bar = d3.select('.c3-target-data1 .c3-bar-0').node();
+                setEvent(chart, 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);
+                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);
+                expect(chart.internal.isWithinBar(bar)).toBeTruthy();
+            });
+
+        });
+
+    });
+
+});

src/shape.bar.js

@@ -111,11 +111,12 @@ c3_chart_internal_fn.generateGetBarPoints = function (barIndices, isSub) {
         ];
     };
 };
-c3_chart_internal_fn.isWithinBar = function (_this) {
+c3_chart_internal_fn.isWithinBar = function (that) {
     var d3 = this.d3,
-        mouse = d3.mouse(_this), box = _this.getBoundingClientRect(),
+        mouse = d3.mouse(that), box = that.getBoundingClientRect(),
-        seg0 = _this.pathSegList.getItem(0), seg1 = _this.pathSegList.getItem(1),
+        seg0 = that.pathSegList.getItem(0), seg1 = that.pathSegList.getItem(1),
-        x = seg0.x, y = Math.min(seg0.y, seg1.y), w = box.width, h = box.height, offset = 2,
+        x = Math.min(seg0.x, seg1.x), y = Math.min(seg0.y, seg1.y),
+        w = box.width, h = box.height, offset = 2,
         sx = x - offset, ex = x + w + offset, sy = y + h + offset, ey = y - offset;
     return sx < mouse[0] && mouse[0] < ex && ey < mouse[1] && mouse[1] < sy;
 };