Skip to content

C
c3-closed
You need to sign in or sign up before continuing.
Commit 868cb26a authored by Masayuki Tanaka's avatar Masayuki Tanaka
Browse files
Options

Fix event rect for edge case - #592

parent 2fb3d5f2
Hide whitespace changes
Inline Side-by-side
Showing with 168 additions and 22 deletions
c3.js
View file @ 868cb26a
...@@ -2012,7 +2012,7 @@ ...@@ -2012,7 +2012,7 @@
var $$ = this; var $$ = this;
$$.main.select('.' + CLASS.chart).append("g") $$.main.select('.' + CLASS.chart).append("g")
.attr("class", CLASS.eventRects) .attr("class", CLASS.eventRects)
.style('fill-opacity', 0); .style('fill-opacity', 0.1);
}; };
c3_chart_internal_fn.redrawEventRect = function () { c3_chart_internal_fn.redrawEventRect = function () {
var $$ = this, config = $$.config, var $$ = this, config = $$.config,
...@@ -2070,27 +2070,30 @@ ...@@ -2070,27 +2070,30 @@
else { else {
if (($$.isCustomX() || $$.isTimeSeries()) && !$$.isCategorized()) { if (($$.isCustomX() || $$.isTimeSeries()) && !$$.isCategorized()) {
rectW = function (d) { rectW = function (d) {
var prevX = $$.getPrevX(d.index), nextX = $$.getNextX(d.index), dx = $$.data.xs[d.id][d.index], var prevX = $$.getPrevX(d.index), nextX = $$.getNextX(d.index);
w = ($$.x(nextX ? nextX : dx) - $$.x(prevX ? prevX : dx)) / 2;
// if there this is a single data point make the eventRect full width (or height) // if there this is a single data point make the eventRect full width (or height)
if (prevX === null && nextX === null) { if (prevX === null && nextX === null) {
return config.axis_rotated ? $$.height : $$.width; return config.axis_rotated ? $$.height : $$.width;
} }
else {
return w < 0 ? 0 : w; if (prevX === null) { prevX = $$.x.domain()[0]; }
} if (nextX === null) { nextX = $$.x.domain()[1]; }
return Math.max(0, ($$.x(nextX) - $$.x(prevX)) / 2);
}; };
rectX = function (d) { rectX = function (d) {
var prevX = $$.getPrevX(d.index), nextX = $$.getNextX(d.index), dx = $$.data.xs[d.id][d.index]; var prevX = $$.getPrevX(d.index), nextX = $$.getNextX(d.index),
thisX = $$.data.xs[d.id][d.index];
// if there this is a single data point position the eventRect at 0 // if there this is a single data point position the eventRect at 0
if (prevX === null && nextX === null) { if (prevX === null && nextX === null) {
return 0; return 0;
} }
else {
return ($$.x(dx) + $$.x(prevX ? prevX : dx)) / 2; if (prevX === null) { prevX = $$.x.domain()[0]; }
}
return ($$.x(thisX) + $$.x(prevX)) / 2;
}; };
} else { } else {
rectW = $$.getEventRectWidth(); rectW = $$.getEventRectWidth();
......
c3.min.js
View file @ 868cb26a
This source diff could not be displayed because it is too large. You can view the blob instead.
spec/interaction-spec.js 0 → 100644
View file @ 868cb26a
var describe = window.describe,
expect = window.expect,
it = window.it,
beforeEach = window.beforeEach;
describe('c3 chart interaction', 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) {
if (typeof chart === 'undefined') {
window.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('generate event rects', function () {
describe('custom x', function () {
it('should generate bar chart', function () {
args = {
data: {
x: 'x',
columns: [
['x', 0, 1000, 3000, 10000],
['data', 10, 10, 10, 10]
],
type: 'bar'
}
};
expect(true).toBeTruthy();
});
it('should have 4 event rects properly', function () {
var lefts = [77.5, 137, 203.5, 402.5],
widths = [59.5, 66.5, 199, 191.5];
d3.selectAll('.c3-event-rect').each(function (d, i) {
var box = d3.select(this).node().getBoundingClientRect();
expect(box.left).toBe(lefts[i]);
expect(box.width).toBe(widths[i]);
});
});
it('should generate bar chart with only one data', function () {
args = {
data: {
x: 'x',
columns: [
['x', 0],
['data', 10]
],
type: 'bar'
}
};
expect(true).toBeTruthy();
});
it('should have 1 event rects properly', function () {
var eventRects = d3.selectAll('.c3-event-rect');
expect(eventRects.size()).toBe(1);
eventRects.each(function () {
var box = d3.select(this).node().getBoundingClientRect();
expect(box.left).toBe(40.5);
expect(box.width).toBe(590);
});
});
});
describe('timeseries', function () {
it('should generate line chart with timeseries', function () {
args = {
data: {
x: 'x',
columns: [
['x', '20140101', '20140201', '20140210', '20140301'],
['data', 10, 10, 10, 10]
]
}
};
expect(true).toBeTruthy();
});
it('should have 4 event rects properly', function () {
var lefts = [43.5, 191, 349, 494],
widths = [147.5, 158, 145, 134];
d3.selectAll('.c3-event-rect').each(function (d, i) {
var box = d3.select(this).node().getBoundingClientRect();
expect(box.left).toBe(lefts[i]);
expect(box.width).toBe(widths[i]);
});
});
it('should generate line chart with only 1 data timeseries', function () {
args = {
data: {
x: 'x',
columns: [
['x', '20140101'],
['data', 10]
]
}
};
expect(true).toBeTruthy();
});
it('should have 1 event rects properly', function () {
var eventRects = d3.selectAll('.c3-event-rect');
expect(eventRects.size()).toBe(1);
eventRects.each(function () {
var box = d3.select(this).node().getBoundingClientRect();
expect(box.left).toBe(40.5);
expect(box.width).toBe(590);
});
});
});
});
});
src/interaction.js
View file @ 868cb26a
...@@ -2,7 +2,7 @@ c3_chart_internal_fn.initEventRect = function () { ...@@ -2,7 +2,7 @@ c3_chart_internal_fn.initEventRect = function () {
var $$ = this; var $$ = this;
$$.main.select('.' + CLASS.chart).append("g") $$.main.select('.' + CLASS.chart).append("g")
.attr("class", CLASS.eventRects) .attr("class", CLASS.eventRects)
.style('fill-opacity', 0); .style('fill-opacity', 0.1);
}; };
c3_chart_internal_fn.redrawEventRect = function () { c3_chart_internal_fn.redrawEventRect = function () {
var $$ = this, config = $$.config, var $$ = this, config = $$.config,
...@@ -60,27 +60,30 @@ c3_chart_internal_fn.updateEventRect = function (eventRectUpdate) { ...@@ -60,27 +60,30 @@ c3_chart_internal_fn.updateEventRect = function (eventRectUpdate) {
else { else {
if (($$.isCustomX() || $$.isTimeSeries()) && !$$.isCategorized()) { if (($$.isCustomX() || $$.isTimeSeries()) && !$$.isCategorized()) {
rectW = function (d) { rectW = function (d) {
var prevX = $$.getPrevX(d.index), nextX = $$.getNextX(d.index), dx = $$.data.xs[d.id][d.index], var prevX = $$.getPrevX(d.index), nextX = $$.getNextX(d.index);
w = ($$.x(nextX ? nextX : dx) - $$.x(prevX ? prevX : dx)) / 2;
// if there this is a single data point make the eventRect full width (or height) // if there this is a single data point make the eventRect full width (or height)
if (prevX === null && nextX === null) { if (prevX === null && nextX === null) {
return config.axis_rotated ? $$.height : $$.width; return config.axis_rotated ? $$.height : $$.width;
} }
else {
return w < 0 ? 0 : w; if (prevX === null) { prevX = $$.x.domain()[0]; }
} if (nextX === null) { nextX = $$.x.domain()[1]; }
return Math.max(0, ($$.x(nextX) - $$.x(prevX)) / 2);
}; };
rectX = function (d) { rectX = function (d) {
var prevX = $$.getPrevX(d.index), nextX = $$.getNextX(d.index), dx = $$.data.xs[d.id][d.index]; var prevX = $$.getPrevX(d.index), nextX = $$.getNextX(d.index),
thisX = $$.data.xs[d.id][d.index];
// if there this is a single data point position the eventRect at 0 // if there this is a single data point position the eventRect at 0
if (prevX === null && nextX === null) { if (prevX === null && nextX === null) {
return 0; return 0;
} }
else {
return ($$.x(dx) + $$.x(prevX ? prevX : dx)) / 2; if (prevX === null) { prevX = $$.x.domain()[0]; }
}
return ($$.x(thisX) + $$.x(prevX)) / 2;
}; };
} else { } else {
rectW = $$.getEventRectWidth(); rectW = $$.getEventRectWidth();
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment