Browse Source

Fix click on negative bar on rotated axis - #561

pull/599/head
Masayuki Tanaka 10 years ago
parent
commit
b7b5e391d5
  1. 9
      c3.js
  2. 6
      c3.min.js
  3. 48
      spec/axis-spec.js
  4. 12
      spec/c3-helper.js
  5. 100
      spec/shape.bar-spec.js
  6. 9
      src/shape.bar.js

9
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(),
seg0 = _this.pathSegList.getItem(0), seg1 = _this.pathSegList.getItem(1),
x = seg0.x, y = Math.min(seg0.y, seg1.y), w = box.width, h = box.height, offset = 2,
mouse = d3.mouse(that), box = that.getBoundingClientRect(),
seg0 = that.pathSegList.getItem(0), seg1 = that.pathSegList.getItem(1),
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;
};

6
c3.min.js vendored

File diff suppressed because one or more lines are too long

48
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);

12
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';

100
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();
});
});
});
});

9
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(),
seg0 = _this.pathSegList.getItem(0), seg1 = _this.pathSegList.getItem(1),
x = seg0.x, y = Math.min(seg0.y, seg1.y), w = box.width, h = box.height, offset = 2,
mouse = d3.mouse(that), box = that.getBoundingClientRect(),
seg0 = that.pathSegList.getItem(0), seg1 = that.pathSegList.getItem(1),
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;
};

Loading…
Cancel
Save