Skip to content

Commit 359fc3e

Browse files
masayuki0812masayuki0812
committed
Fix regions api - c3js#1255 
1 parent 9876949 commit 359fc3e

File tree

4 files changed

+270
-6
lines changed

4 files changed

+270
-6
lines changed

‎c3.js

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5219,16 +5219,23 @@
52195219
$$.mainRegion = $$.main.select('.' + CLASS.regions).selectAll('.' + CLASS.region)
52205220
.data(config.regions);
52215221
$$.mainRegion.enter().append('g')
5222-
.attr('class', $$.classRegion.bind($$))
52235222
.append('rect')
52245223
.style("fill-opacity", 0);
5224+
$$.mainRegion
5225+
.attr('class', $$.classRegion.bind($$));
52255226
$$.mainRegion.exit().transition().duration(duration)
52265227
.style("opacity", 0)
52275228
.remove();
52285229
};
52295230
c3_chart_internal_fn.redrawRegion = function (withTransition) {
52305231
var $$ = this,
5231-
regions = $$.mainRegion.selectAll('rect'),
5232+
regions = $$.mainRegion.selectAll('rect').each(function () {
5233+
// data is binded to g and it's not transferred to rect (child node) automatically,
5234+
// then data of each rect has to be updated manually.
5235+
// TODO: there should be more efficient way to solve this?
5236+
var parentData = $$.d3.select(this.parentNode).datum();
5237+
$$.d3.select(this).datum(parentData);
5238+
}),
52325239
x = $$.regionX.bind($$),
52335240
y = $$.regionY.bind($$),
52345241
w = $$.regionWidth.bind($$),

‎c3.min.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎spec/api.region-spec.js

Lines changed: 250 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,250 @@
1+
describe('c3 api region', function () {
2+
'use strict';
3+
4+
var chart, args;
5+
6+
beforeEach(function (done) {
7+
chart = window.initChart(chart, args, done);
8+
});
9+
10+
describe('api.region', function () {
11+
12+
it('should update args', function () {
13+
args = {
14+
data: {
15+
columns: [
16+
['data1', 30, 200, 100, 400, 150, 250],
17+
]
18+
},
19+
regions: [
20+
{
21+
axis: 'y',
22+
start: 300,
23+
end: 400,
24+
class: 'green',
25+
},
26+
{
27+
axis: 'y',
28+
start: 0,
29+
end: 100,
30+
class: 'green',
31+
}
32+
]
33+
};
34+
expect(true).toBeTruthy();
35+
});
36+
37+
it('should update regions', function (done) {
38+
var main = chart.internal.main,
39+
expectedRegions = [
40+
{
41+
axis: 'y',
42+
start: 250,
43+
end: 350,
44+
class: 'red'
45+
},
46+
{
47+
axis: 'y',
48+
start: 25,
49+
end: 75,
50+
class: 'red'
51+
}
52+
],
53+
regions;
54+
55+
// Call regions API
56+
chart.regions(expectedRegions);
57+
setTimeout(function () {
58+
regions = main.selectAll('.c3-region');
59+
expect(regions.size()).toBe(expectedRegions.length);
60+
61+
regions.each(function (d, i) {
62+
var region = d3.select(this),
63+
rect = region.select('rect'),
64+
y = +rect.attr('y'),
65+
height = +rect.attr('height'),
66+
expectedClass = 'red',
67+
unexpectedClass = 'green',
68+
expectedStart = Math.round(chart.internal.y(expectedRegions[i].start)),
69+
expectedEnd = Math.round(chart.internal.y(expectedRegions[i].end)),
70+
expectedY = expectedEnd,
71+
expectedHeight = expectedStart - expectedEnd;
72+
expect(y).toBeCloseTo(expectedY, -1);
73+
expect(height).toBeCloseTo(expectedHeight, -1);
74+
expect(region.classed(expectedClass)).toBeTruthy();
75+
expect(region.classed(unexpectedClass)).toBeFalsy();
76+
});
77+
}, 500);
78+
79+
setTimeout(function () {
80+
done();
81+
}, 1000);
82+
});
83+
});
84+
85+
describe('api.region.add', function () {
86+
87+
it('should update args', function () {
88+
args = {
89+
data: {
90+
columns: [
91+
['data1', 30, 200, 100, 400, 150, 250],
92+
]
93+
},
94+
regions: [
95+
{
96+
axis: 'y',
97+
start: 300,
98+
end: 400,
99+
class: 'green',
100+
},
101+
{
102+
axis: 'y',
103+
start: 0,
104+
end: 100,
105+
class: 'green',
106+
}
107+
]
108+
};
109+
expect(true).toBeTruthy();
110+
});
111+
112+
it('should add regions', function (done) {
113+
var main = chart.internal.main,
114+
expectedRegions = [
115+
{
116+
axis: 'y',
117+
start: 300,
118+
end: 400,
119+
class: 'green',
120+
},
121+
{
122+
axis: 'y',
123+
start: 0,
124+
end: 100,
125+
class: 'green',
126+
},
127+
{
128+
axis: 'y',
129+
start: 250,
130+
end: 350,
131+
class: 'red'
132+
},
133+
{
134+
axis: 'y',
135+
start: 25,
136+
end: 75,
137+
class: 'red'
138+
}
139+
],
140+
expectedClasses = [
141+
'green',
142+
'green',
143+
'red',
144+
'red',
145+
],
146+
regions;
147+
148+
// Call regions API
149+
chart.regions(expectedRegions);
150+
setTimeout(function () {
151+
regions = main.selectAll('.c3-region');
152+
expect(regions.size()).toBe(expectedRegions.length);
153+
154+
regions.each(function (d, i) {
155+
var region = d3.select(this),
156+
rect = region.select('rect'),
157+
y = +rect.attr('y'),
158+
height = +rect.attr('height'),
159+
expectedClass = expectedClasses[i],
160+
expectedStart = Math.round(chart.internal.y(expectedRegions[i].start)),
161+
expectedEnd = Math.round(chart.internal.y(expectedRegions[i].end)),
162+
expectedY = expectedEnd,
163+
expectedHeight = expectedStart - expectedEnd;
164+
expect(y).toBeCloseTo(expectedY, -1);
165+
expect(height).toBeCloseTo(expectedHeight, -1);
166+
expect(region.classed(expectedClass)).toBeTruthy();
167+
});
168+
}, 500);
169+
170+
setTimeout(function () {
171+
done();
172+
}, 1000);
173+
});
174+
});
175+
176+
describe('api.region.remove', function () {
177+
178+
it('should update args', function () {
179+
args = {
180+
data: {
181+
columns: [
182+
['data1', 30, 200, 100, 400, 150, 250],
183+
]
184+
},
185+
regions: [
186+
{
187+
axis: 'y',
188+
start: 300,
189+
end: 400,
190+
class: 'green',
191+
},
192+
{
193+
axis: 'y',
194+
start: 0,
195+
end: 100,
196+
class: 'green',
197+
},
198+
{
199+
axis: 'y',
200+
start: 250,
201+
end: 350,
202+
class: 'red'
203+
},
204+
]
205+
};
206+
expect(true).toBeTruthy();
207+
});
208+
209+
it('should remove regions', function (done) {
210+
var main = chart.internal.main,
211+
expectedRegions = [
212+
{
213+
axis: 'y',
214+
start: 250,
215+
end: 350,
216+
class: 'red'
217+
},
218+
],
219+
expectedClasses = ['red'],
220+
regions;
221+
222+
// Call regions API
223+
chart.regions(expectedRegions);
224+
setTimeout(function () {
225+
regions = main.selectAll('.c3-region');
226+
expect(regions.size()).toBe(expectedRegions.length);
227+
228+
regions.each(function (d, i) {
229+
var region = d3.select(this),
230+
rect = region.select('rect'),
231+
y = +rect.attr('y'),
232+
height = +rect.attr('height'),
233+
expectedClass = expectedClasses[i],
234+
expectedStart = Math.round(chart.internal.y(expectedRegions[i].start)),
235+
expectedEnd = Math.round(chart.internal.y(expectedRegions[i].end)),
236+
expectedY = expectedEnd,
237+
expectedHeight = expectedStart - expectedEnd;
238+
expect(y).toBeCloseTo(expectedY, -1);
239+
expect(height).toBeCloseTo(expectedHeight, -1);
240+
expect(region.classed(expectedClass)).toBeTruthy();
241+
});
242+
}, 500);
243+
244+
setTimeout(function () {
245+
done();
246+
}, 1000);
247+
});
248+
});
249+
250+
});

‎src/region.js

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,16 +13,23 @@ c3_chart_internal_fn.updateRegion = function (duration) {
1313
$$.mainRegion = $$.main.select('.' + CLASS.regions).selectAll('.' + CLASS.region)
1414
.data(config.regions);
1515
$$.mainRegion.enter().append('g')
16-
.attr('class', $$.classRegion.bind($$))
1716
.append('rect')
1817
.style("fill-opacity", 0);
18+
$$.mainRegion
19+
.attr('class', $$.classRegion.bind($$));
1920
$$.mainRegion.exit().transition().duration(duration)
2021
.style("opacity", 0)
2122
.remove();
2223
};
2324
c3_chart_internal_fn.redrawRegion = function (withTransition) {
2425
var $$ = this,
25-
regions = $$.mainRegion.selectAll('rect'),
26+
regions = $$.mainRegion.selectAll('rect').each(function () {
27+
// data is binded to g and it's not transferred to rect (child node) automatically,
28+
// then data of each rect has to be updated manually.
29+
// TODO: there should be more efficient way to solve this?
30+
var parentData = $$.d3.select(this.parentNode).datum();
31+
$$.d3.select(this).datum(parentData);
32+
}),
2633
x = $$.regionX.bind($$),
2734
y = $$.regionY.bind($$),
2835
w = $$.regionWidth.bind($$),

0 commit comments

Comments
 (0)