playground
/
c3
mirror of https://github.com/masayuki0812/c3.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

Fix tooltip position with left padding - #701

pull/713/merge
Masayuki Tanaka 10 years ago
parent
45e879b3c3
commit
fc69b67049
7 changed files with 97 additions and 37 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 11
      c3.js
  2. 6
      c3.min.js
  3. 11
      spec/c3-helper.js
  4. 26
      spec/shape.bar-spec.js
  5. 69
      spec/tooltip-spec.js
  6. 5
      src/axis.js
  7. 6
      src/size.js

11
c3.js
Unescape View File

@ -2505,11 +2505,7 @@
c3_chart_internal_fn.getAxisWidthByAxisId = function (id, withoutRecompute) {
var $$ = this, position = $$.getAxisLabelPositionById(id);
if (withoutRecompute) {
var box = $$.d3.select('.c3-axis-y').node().getBoundingClientRect();
return Math.floor(box.left + box.width);
}
return $$.getMaxTickWidth(id) + (position.isInner ? 20 : 40);
return $$.getMaxTickWidth(id, withoutRecompute) + (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') {

6
c3.min.js vendored
View File

File diff suppressed because one or more lines are too long

11
spec/c3-helper.js
Unescape View File

@ -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");
evt.initMouseEvent("click", true, true, window,
event = document.createEvent("MouseEvents");
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';

26
spec/shape.bar-spec.js
Unescape View File

@ -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') {
initDom();
}
chart = window.c3.generate(args);
chart = window.initChart(chart, args, done);
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();
});

69
spec/tooltip-spec.js
Unescape View File

@ -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);
});
});
});
});

5
src/axis.js
Unescape View File

@ -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') {

6
src/size.js
Unescape View File

@ -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) {
var box = $$.d3.select('.c3-axis-y').node().getBoundingClientRect();
return Math.floor(box.left + box.width);
}
return $$.getMaxTickWidth(id) + (position.isInner ? 20 : 40);
return $$.getMaxTickWidth(id, withoutRecompute) + (position.isInner ? 20 : 40);
};
c3_chart_internal_fn.getHorizontalAxisHeight = function (axisId) {
var $$ = this, config = $$.config, h = 30;

Write Preview
Loading…
Cancel
Save