Rebasing region label work from PR 1853

docs/reference.html.haml

@@ -1079,6 +1079,8 @@
         %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.
         %br
         %p Currently this option supports only line chart and dashed style. If this option specified, the line will be dashed only in the regions.
+        %br
+        %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.
         %h5 Default:
         <code>{}</code>
         %h5 Format:
@@ -1087,7 +1089,10 @@
             %code.html.javascript
               data: {
               &nbsp;&nbsp;regions: {
-              &nbsp;&nbsp;&nbsp;&nbsp;data1: [{'start':1, 'end':2, 'style':'dashed'},{'start':3}],
+              &nbsp;&nbsp;&nbsp;&nbsp;data1: [
+              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{'start':1, 'end':2, 'style':'dashed'},
+              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{'start':3, label:"Region 2", paddingX:2, paddingY:2, vertical=true}
+              &nbsp;&nbsp;&nbsp;&nbsp;],
               &nbsp;&nbsp;&nbsp;&nbsp;...
               &nbsp;&nbsp;}
               }

htdocs/samples/regions.html

@@ -21,12 +21,12 @@
           }
         },
         regions: [
-          {end:1,class:'region1'},
-          {start:2,end:4,class:'region1'},
-          {start:5,class:'region1'},
-          {end:50,axis:'y'},
-          {start:100,end:200,axis:'y'},
-          {start:300,axis:'y'},
+          {end: 1, class: 'region1', label: 'Region 1', paddingY: 15},
+          {start: 2, end: 4, class: 'region1', label: 'Region 2', paddingY: 20, paddingX: 10, vertical: true},
+          {start: 5, class: 'region1', label: 'Region 3', paddingY: 15},
+          {end: 50, axis: 'y'},
+          {start: 100, end: 200, axis: 'y'},
+          {start: 300, axis: 'y'},
         ],
         zoom: {
 //          enabled: true
@@ -64,7 +64,7 @@
       setTimeout(function () {
         chart.regions.add([
           {start:3,end:3.5,class:"region3 hoge"},
-          {start:4,end:4.5,class:"region4 hoge"},
+          {start:4,end:4.5,class:"region4 hoge",label:"Region 4"},
           {start:0,end:0.5,class:"region5 hogehoge"},
         ]);
       }, 7000);

spec/api.region-spec.js

@@ -22,6 +22,7 @@ describe('c3 api region', function () {
                         start: 300,
                         end: 400,
                         class: 'green',
+                        label: 'Region 1',
                     },
                     {
                         axis: 'y',
@@ -40,13 +41,15 @@ describe('c3 api region', function () {
                         axis: 'y',
                         start: 250,
                         end: 350,
-                        class: 'red'
+                        class: 'red',
+                        label: 'Region 1'
                     },
                     {
                         axis: 'y',
                         start: 25,
                         end: 75,
-                        class: 'red'
+                        class: 'red',
+                        label: ''
                     }
                 ],
                 regions;
@@ -59,18 +62,22 @@ describe('c3 api region', function () {
 
                 regions.each(function (d, i) {
                     var region = d3.select(this),
+                        label = region.select('text'),
                         y = +region.attr('y'),
                         height = +region.attr('height'),
                         expectedClass = 'red',
+                        expectedLabel = expectedRegions[i].label,
                         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();
+                    expect(label.text()).toBe(expectedLabel);
                 });
             }, 500);
 

src/region.js

@@ -16,26 +16,37 @@ ChartInternal.prototype.updateRegion = function (duration) {
 
     var mainRegion = $$.main.select('.' + CLASS.regions).selectAll('.' + CLASS.region)
         .data(config.regions);
-    var mainRegionEnter = mainRegion.enter().append('rect')
+    var g = mainRegion.enter().append('g');
+    g.append('rect')
         .attr("x", $$.regionX.bind($$))
         .attr("y", $$.regionY.bind($$))
         .attr("width", $$.regionWidth.bind($$))
         .attr("height", $$.regionHeight.bind($$))
-        .style("fill-opacity", 0);
-    $$.mainRegion = mainRegionEnter.merge(mainRegion)
+        .style("fill-opacity", function (d) { return isValue(d.opacity) ? d.opacity : 0.1; });
+    g.append('text')
+        .text($$.labelRegion.bind($$));
+    $$.mainRegion = g.merge(mainRegion)
         .attr('class', $$.classRegion.bind($$));
     mainRegion.exit().transition().duration(duration)
         .style("opacity", 0)
         .remove();
 };
 ChartInternal.prototype.redrawRegion = function (withTransition, transition) {
-    var $$ = this, regions = $$.mainRegion;
-    return [(withTransition ? regions.transition(transition) : regions)
+    var $$ = this,
+        regions = $$.mainRegion,
+        regionLabels = $$.mainRegion.selectAll('text');
+    return [
+        (withTransition ? regions.transition(transition) : regions)
             .attr("x", $$.regionX.bind($$))
             .attr("y", $$.regionY.bind($$))
             .attr("width", $$.regionWidth.bind($$))
             .attr("height", $$.regionHeight.bind($$))
-            .style("fill-opacity", function (d) { return isValue(d.opacity) ? d.opacity : 0.1; })
+            .style("fill-opacity", function (d) { return isValue(d.opacity) ? d.opacity : 0.1; }),
+        (withTransition ? regionLabels.transition(transition) : regionLabels)
+            .attr("x", $$.labelOffsetX.bind($$))
+            .attr("y", $$.labelOffsetY.bind($$))
+            .attr("transform", $$.labelTransform.bind($$))
+            .attr("style", 'text-anchor: left;')
     ];
 };
 ChartInternal.prototype.regionX = function (d) {
@@ -81,3 +92,19 @@ ChartInternal.prototype.regionHeight = function (d) {
 ChartInternal.prototype.isRegionOnX = function (d) {
     return !d.axis || d.axis === 'x';
 };
+ChartInternal.prototype.labelRegion = function (d) {
+    return 'label' in d ? d.label : '';
+};
+ChartInternal.prototype.labelTransform = function (d) {
+    return ('vertical' in d && d.vertical) ? "rotate(90)" : "";
+};
+ChartInternal.prototype.labelOffsetX = function (d) {
+    var paddingX = 'paddingX' in d ? d.paddingX : 3;
+    var paddingY = 'paddingY' in d ? d.paddingY : 3;
+    return ('vertical' in d && d.vertical) ? this.regionY(d) + paddingY : (this.regionX(d) + paddingX);
+};
+ChartInternal.prototype.labelOffsetY = function (d) {
+    var paddingX = 'paddingX' in d ? d.paddingX : 3;
+    var paddingY = 'paddingY' in d ? d.paddingY : 3;
+    return ('vertical' in d && d.vertical) ? -(this.regionX(d) + paddingX) : this.regionY(d) + 10 + paddingY;
+};

src/scss/region.scss

@@ -1,4 +1,8 @@
 .c3-region {
   fill: steelblue;
   fill-opacity: .1;
+
+  text {
+    fill-opacity: 1;
+  }
 }