Skip to content

Commit 57fb54e

Browse files
panthonypanthony
authored
Merge pull request #2703 from dunderpate/region-labels
Rebasing region label work from PR 1853
2 parents 93dcd65 + a75f22c commit 57fb54e

File tree

5 files changed

+59
-16
lines changed

5 files changed

+59
-16
lines changed

‎docs/reference.html.haml‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1079,6 +1079,8 @@
10791079
%p The values must be an array for each data and it should include an object that has <span class="code">start</span>, <span class="code">end</span>, <span class="code">style</span>. If <span class="code">start</span> is not set, the start will be the first data point. If <span class="code">end</span> is not set, the end will be the last data point.
10801080
%br
10811081
%p Currently this option supports only line chart and dashed style. If this option specified, the line will be dashed only in the regions.
1082+
%br
1083+
%p An optional <span class="code">label</span> property can be provided to display a label for the region. If a label option is not specified, no label will be displayed for the region. For each region, you may also specify the <span class="code">paddingY</span> and <span class="code">paddingX</span> options to control the position of label text. Finally, a <span class="code">vertical</span> option can be used to identify whether or not the label text should be rotated 90 degrees.
10821084
%h5 Default:
10831085
<code>{}</code>
10841086
%h5 Format:
@@ -1087,7 +1089,10 @@
10871089
%code.html.javascript
10881090
data: {
10891091
&nbsp;&nbsp;regions: {
1090-
&nbsp;&nbsp;&nbsp;&nbsp;data1: [{'start':1, 'end':2, 'style':'dashed'},{'start':3}],
1092+
&nbsp;&nbsp;&nbsp;&nbsp;data1: [
1093+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{'start':1, 'end':2, 'style':'dashed'},
1094+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{'start':3, label:"Region 2", paddingX:2, paddingY:2, vertical=true}
1095+
&nbsp;&nbsp;&nbsp;&nbsp;],
10911096
&nbsp;&nbsp;&nbsp;&nbsp;...
10921097
&nbsp;&nbsp;}
10931098
}

‎htdocs/samples/regions.html‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -21,12 +21,12 @@
2121
}
2222
},
2323
regions: [
24-
{end:1,class:'region1'},
25-
{start:2,end:4,class:'region1'},
26-
{start:5,class:'region1'},
27-
{end:50,axis:'y'},
28-
{start:100,end:200,axis:'y'},
29-
{start:300,axis:'y'},
24+
{end: 1, class: 'region1', label: 'Region 1', paddingY: 15},
25+
{start: 2, end: 4, class: 'region1', label: 'Region 2', paddingY: 20, paddingX: 10, vertical: true},
26+
{start: 5, class: 'region1', label: 'Region 3', paddingY: 15},
27+
{end: 50, axis: 'y'},
28+
{start: 100, end: 200, axis: 'y'},
29+
{start: 300, axis: 'y'},
3030
],
3131
zoom: {
3232
// enabled: true
@@ -64,7 +64,7 @@
6464
setTimeout(function () {
6565
chart.regions.add([
6666
{start:3,end:3.5,class:"region3 hoge"},
67-
{start:4,end:4.5,class:"region4 hoge"},
67+
{start:4,end:4.5,class:"region4 hoge",label:"Region 4"},
6868
{start:0,end:0.5,class:"region5 hogehoge"},
6969
]);
7070
}, 7000);

‎spec/api.region-spec.js‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ describe('c3 api region', function () {
2222
start: 300,
2323
end: 400,
2424
class: 'green',
25+
label: 'Region 1',
2526
},
2627
{
2728
axis: 'y',
@@ -40,13 +41,15 @@ describe('c3 api region', function () {
4041
axis: 'y',
4142
start: 250,
4243
end: 350,
43-
class: 'red'
44+
class: 'red',
45+
label: 'Region 1'
4446
},
4547
{
4648
axis: 'y',
4749
start: 25,
4850
end: 75,
49-
class: 'red'
51+
class: 'red',
52+
label: ''
5053
}
5154
],
5255
regions;
@@ -59,18 +62,22 @@ describe('c3 api region', function () {
5962

6063
regions.each(function (d, i) {
6164
var region = d3.select(this),
65+
label = region.select('text'),
6266
y = +region.attr('y'),
6367
height = +region.attr('height'),
6468
expectedClass = 'red',
69+
expectedLabel = expectedRegions[i].label,
6570
unexpectedClass = 'green',
6671
expectedStart = Math.round(chart.internal.y(expectedRegions[i].start)),
6772
expectedEnd = Math.round(chart.internal.y(expectedRegions[i].end)),
6873
expectedY = expectedEnd,
6974
expectedHeight = expectedStart - expectedEnd;
75+
7076
expect(y).toBeCloseTo(expectedY, -1);
7177
expect(height).toBeCloseTo(expectedHeight, -1);
7278
expect(region.classed(expectedClass)).toBeTruthy();
7379
expect(region.classed(unexpectedClass)).toBeFalsy();
80+
expect(label.text()).toBe(expectedLabel);
7481
});
7582
}, 500);
7683

‎src/region.js‎

Lines changed: 33 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,26 +16,37 @@ ChartInternal.prototype.updateRegion = function (duration) {
1616

1717
var mainRegion = $$.main.select('.' + CLASS.regions).selectAll('.' + CLASS.region)
1818
.data(config.regions);
19-
var mainRegionEnter = mainRegion.enter().append('rect')
19+
var g = mainRegion.enter().append('g');
20+
g.append('rect')
2021
.attr("x", $$.regionX.bind($$))
2122
.attr("y", $$.regionY.bind($$))
2223
.attr("width", $$.regionWidth.bind($$))
2324
.attr("height", $$.regionHeight.bind($$))
24-
.style("fill-opacity", 0);
25-
$$.mainRegion = mainRegionEnter.merge(mainRegion)
25+
.style("fill-opacity", function (d) { return isValue(d.opacity) ? d.opacity : 0.1; });
26+
g.append('text')
27+
.text($$.labelRegion.bind($$));
28+
$$.mainRegion = g.merge(mainRegion)
2629
.attr('class', $$.classRegion.bind($$));
2730
mainRegion.exit().transition().duration(duration)
2831
.style("opacity", 0)
2932
.remove();
3033
};
3134
ChartInternal.prototype.redrawRegion = function (withTransition, transition) {
32-
var $$ = this, regions = $$.mainRegion;
33-
return [(withTransition ? regions.transition(transition) : regions)
35+
var $$ = this,
36+
regions = $$.mainRegion,
37+
regionLabels = $$.mainRegion.selectAll('text');
38+
return [
39+
(withTransition ? regions.transition(transition) : regions)
3440
.attr("x", $$.regionX.bind($$))
3541
.attr("y", $$.regionY.bind($$))
3642
.attr("width", $$.regionWidth.bind($$))
3743
.attr("height", $$.regionHeight.bind($$))
38-
.style("fill-opacity", function (d) { return isValue(d.opacity) ? d.opacity : 0.1; })
44+
.style("fill-opacity", function (d) { return isValue(d.opacity) ? d.opacity : 0.1; }),
45+
(withTransition ? regionLabels.transition(transition) : regionLabels)
46+
.attr("x", $$.labelOffsetX.bind($$))
47+
.attr("y", $$.labelOffsetY.bind($$))
48+
.attr("transform", $$.labelTransform.bind($$))
49+
.attr("style", 'text-anchor: left;')
3950
];
4051
};
4152
ChartInternal.prototype.regionX = function (d) {
@@ -81,3 +92,19 @@ ChartInternal.prototype.regionHeight = function (d) {
8192
ChartInternal.prototype.isRegionOnX = function (d) {
8293
return !d.axis || d.axis === 'x';
8394
};
95+
ChartInternal.prototype.labelRegion = function (d) {
96+
return 'label' in d ? d.label : '';
97+
};
98+
ChartInternal.prototype.labelTransform = function (d) {
99+
return ('vertical' in d && d.vertical) ? "rotate(90)" : "";
100+
};
101+
ChartInternal.prototype.labelOffsetX = function (d) {
102+
var paddingX = 'paddingX' in d ? d.paddingX : 3;
103+
var paddingY = 'paddingY' in d ? d.paddingY : 3;
104+
return ('vertical' in d && d.vertical) ? this.regionY(d) + paddingY : (this.regionX(d) + paddingX);
105+
};
106+
ChartInternal.prototype.labelOffsetY = function (d) {
107+
var paddingX = 'paddingX' in d ? d.paddingX : 3;
108+
var paddingY = 'paddingY' in d ? d.paddingY : 3;
109+
return ('vertical' in d && d.vertical) ? -(this.regionX(d) + paddingX) : this.regionY(d) + 10 + paddingY;
110+
};

‎src/scss/region.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
11
.c3-region {
22
fill: steelblue;
33
fill-opacity: .1;
4+
5+
text {
6+
fill-opacity: 1;
7+
}
48
}

0 commit comments

Comments
 (0)