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

Fix event rect for edge case - #592

pull/631/head
Masayuki Tanaka 10 years ago
parent
2fb3d5f29e
commit
868cb26a58
4 changed files with 169 additions and 23 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 23
      c3.js
  2. 2
      c3.min.js
  3. 140
      spec/interaction-spec.js
  4. 23
      src/interaction.js

23
c3.js
Unescape View File

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

2
c3.min.js vendored
View File

File diff suppressed because one or more lines are too long

140
spec/interaction-spec.js
Unescape View File

@ -0,0 +1,140 @@
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);
});
});
});
});
});

23
src/interaction.js
Unescape View File

@ -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) {
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();

Write Preview
Loading…
Cancel
Save