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

Fix regions api - #1255

pull/1581/merge
Masayuki Tanaka 9 years ago
parent
98769492d0
commit
359fc3ec53
4 changed files with 270 additions and 6 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. 11
      c3.js
  2. 4
      c3.min.js
  3. 250
      spec/api.region-spec.js
  4. 11
      src/region.js

11
c3.js
Unescape View File

@ -5219,16 +5219,23 @@
$$.mainRegion = $$.main.select('.' + CLASS.regions).selectAll('.' + CLASS.region) $$.mainRegion = $$.main.select('.' + CLASS.regions).selectAll('.' + CLASS.region)
.data(config.regions); .data(config.regions);
$$.mainRegion.enter().append('g') $$.mainRegion.enter().append('g')
.attr('class', $$.classRegion.bind($$))
.append('rect') .append('rect')
.style("fill-opacity", 0); .style("fill-opacity", 0);
$$.mainRegion
.attr('class', $$.classRegion.bind($$));
$$.mainRegion.exit().transition().duration(duration) $$.mainRegion.exit().transition().duration(duration)
.style("opacity", 0) .style("opacity", 0)
.remove(); .remove();
}; };
c3_chart_internal_fn.redrawRegion = function (withTransition) { c3_chart_internal_fn.redrawRegion = function (withTransition) {
var $$ = this, var $$ = this,
regions = $$.mainRegion.selectAll('rect'), regions = $$.mainRegion.selectAll('rect').each(function () {
// data is binded to g and it's not transferred to rect (child node) automatically,
// then data of each rect has to be updated manually.
// TODO: there should be more efficient way to solve this?
var parentData = $$.d3.select(this.parentNode).datum();
$$.d3.select(this).datum(parentData);
}),
x = $$.regionX.bind($$), x = $$.regionX.bind($$),
y = $$.regionY.bind($$), y = $$.regionY.bind($$),
w = $$.regionWidth.bind($$), w = $$.regionWidth.bind($$),

4
c3.min.js vendored
View File

File diff suppressed because one or more lines are too long

250
spec/api.region-spec.js
Unescape View File

@ -0,0 +1,250 @@
describe('c3 api region', function () {
'use strict';
var chart, args;
beforeEach(function (done) {
chart = window.initChart(chart, args, done);
});
describe('api.region', function () {
it('should update args', function () {
args = {
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
]
},
regions: [
{
axis: 'y',
start: 300,
end: 400,
class: 'green',
},
{
axis: 'y',
start: 0,
end: 100,
class: 'green',
}
]
};
expect(true).toBeTruthy();
});
it('should update regions', function (done) {
var main = chart.internal.main,
expectedRegions = [
{
axis: 'y',
start: 250,
end: 350,
class: 'red'
},
{
axis: 'y',
start: 25,
end: 75,
class: 'red'
}
],
regions;
// Call regions API
chart.regions(expectedRegions);
setTimeout(function () {
regions = main.selectAll('.c3-region');
expect(regions.size()).toBe(expectedRegions.length);
regions.each(function (d, i) {
var region = d3.select(this),
rect = region.select('rect'),
y = +rect.attr('y'),
height = +rect.attr('height'),
expectedClass = 'red',
unexpectedClass = 'green',
expectedStart = Math.round(chart.internal.y(expectedRegions[i].start)),
expectedEnd = Math.round(chart.internal.y(expectedRegions[i].end)),
expectedY = expectedEnd,
expectedHeight = expectedStart - expectedEnd;
expect(y).toBeCloseTo(expectedY, -1);
expect(height).toBeCloseTo(expectedHeight, -1);
expect(region.classed(expectedClass)).toBeTruthy();
expect(region.classed(unexpectedClass)).toBeFalsy();
});
}, 500);
setTimeout(function () {
done();
}, 1000);
});
});
describe('api.region.add', function () {
it('should update args', function () {
args = {
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
]
},
regions: [
{
axis: 'y',
start: 300,
end: 400,
class: 'green',
},
{
axis: 'y',
start: 0,
end: 100,
class: 'green',
}
]
};
expect(true).toBeTruthy();
});
it('should add regions', function (done) {
var main = chart.internal.main,
expectedRegions = [
{
axis: 'y',
start: 300,
end: 400,
class: 'green',
},
{
axis: 'y',
start: 0,
end: 100,
class: 'green',
},
{
axis: 'y',
start: 250,
end: 350,
class: 'red'
},
{
axis: 'y',
start: 25,
end: 75,
class: 'red'
}
],
expectedClasses = [
'green',
'green',
'red',
'red',
],
regions;
// Call regions API
chart.regions(expectedRegions);
setTimeout(function () {
regions = main.selectAll('.c3-region');
expect(regions.size()).toBe(expectedRegions.length);
regions.each(function (d, i) {
var region = d3.select(this),
rect = region.select('rect'),
y = +rect.attr('y'),
height = +rect.attr('height'),
expectedClass = expectedClasses[i],
expectedStart = Math.round(chart.internal.y(expectedRegions[i].start)),
expectedEnd = Math.round(chart.internal.y(expectedRegions[i].end)),
expectedY = expectedEnd,
expectedHeight = expectedStart - expectedEnd;
expect(y).toBeCloseTo(expectedY, -1);
expect(height).toBeCloseTo(expectedHeight, -1);
expect(region.classed(expectedClass)).toBeTruthy();
});
}, 500);
setTimeout(function () {
done();
}, 1000);
});
});
describe('api.region.remove', function () {
it('should update args', function () {
args = {
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
]
},
regions: [
{
axis: 'y',
start: 300,
end: 400,
class: 'green',
},
{
axis: 'y',
start: 0,
end: 100,
class: 'green',
},
{
axis: 'y',
start: 250,
end: 350,
class: 'red'
},
]
};
expect(true).toBeTruthy();
});
it('should remove regions', function (done) {
var main = chart.internal.main,
expectedRegions = [
{
axis: 'y',
start: 250,
end: 350,
class: 'red'
},
],
expectedClasses = ['red'],
regions;
// Call regions API
chart.regions(expectedRegions);
setTimeout(function () {
regions = main.selectAll('.c3-region');
expect(regions.size()).toBe(expectedRegions.length);
regions.each(function (d, i) {
var region = d3.select(this),
rect = region.select('rect'),
y = +rect.attr('y'),
height = +rect.attr('height'),
expectedClass = expectedClasses[i],
expectedStart = Math.round(chart.internal.y(expectedRegions[i].start)),
expectedEnd = Math.round(chart.internal.y(expectedRegions[i].end)),
expectedY = expectedEnd,
expectedHeight = expectedStart - expectedEnd;
expect(y).toBeCloseTo(expectedY, -1);
expect(height).toBeCloseTo(expectedHeight, -1);
expect(region.classed(expectedClass)).toBeTruthy();
});
}, 500);
setTimeout(function () {
done();
}, 1000);
});
});
});

11
src/region.js
Unescape View File

@ -13,16 +13,23 @@ c3_chart_internal_fn.updateRegion = function (duration) {
$$.mainRegion = $$.main.select('.' + CLASS.regions).selectAll('.' + CLASS.region) $$.mainRegion = $$.main.select('.' + CLASS.regions).selectAll('.' + CLASS.region)
.data(config.regions); .data(config.regions);
$$.mainRegion.enter().append('g') $$.mainRegion.enter().append('g')
.attr('class', $$.classRegion.bind($$))
.append('rect') .append('rect')
.style("fill-opacity", 0); .style("fill-opacity", 0);
$$.mainRegion
.attr('class', $$.classRegion.bind($$));
$$.mainRegion.exit().transition().duration(duration) $$.mainRegion.exit().transition().duration(duration)
.style("opacity", 0) .style("opacity", 0)
.remove(); .remove();
}; };
c3_chart_internal_fn.redrawRegion = function (withTransition) { c3_chart_internal_fn.redrawRegion = function (withTransition) {
var $$ = this, var $$ = this,
regions = $$.mainRegion.selectAll('rect'), regions = $$.mainRegion.selectAll('rect').each(function () {
// data is binded to g and it's not transferred to rect (child node) automatically,
// then data of each rect has to be updated manually.
// TODO: there should be more efficient way to solve this?
var parentData = $$.d3.select(this.parentNode).datum();
$$.d3.select(this).datum(parentData);
}),
x = $$.regionX.bind($$), x = $$.regionX.bind($$),
y = $$.regionY.bind($$), y = $$.regionY.bind($$),
w = $$.regionWidth.bind($$), w = $$.regionWidth.bind($$),

Write Preview
Loading…
Cancel
Save