Add Region Labels

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

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',
@@ -41,13 +42,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;
@@ -61,18 +64,22 @@ describe('c3 api region', function () {
                 regions.each(function (d, i) {
                     var region = d3.select(this),
                         rect = region.select('rect'),
+                        label = region.select('text'),
                         y = +rect.attr('y'),
                         height = +rect.attr('height'),
                         expectedClass = 'red',
                         unexpectedClass = 'green',
+                        expectedLabel = expectedRegions[i].label,
                         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/class.js

@@ -123,6 +123,22 @@ c3_chart_internal_fn.classAreas = function (d) {
 c3_chart_internal_fn.classRegion = function (d, i) {
     return this.generateClass(CLASS.region, i) + ' ' + ('class' in d ? d['class'] : '');
 };
+c3_chart_internal_fn.labelRegion = function (d) {
+    return 'label' in d ? d.label : '';
+};
+c3_chart_internal_fn.labelTransform = function (d) {
+    return ('vertical' in d && d.vertical) ? "rotate(90)" : "";
+};
+c3_chart_internal_fn.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);
+};
+c3_chart_internal_fn.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;
+};
 c3_chart_internal_fn.classEvent = function (d) {
     return this.generateClass(CLASS.eventRect, d.index);
 };

src/region.js

@@ -12,11 +12,13 @@ c3_chart_internal_fn.updateRegion = function (duration) {
 
     $$.mainRegion = $$.main.select('.' + CLASS.regions).selectAll('.' + CLASS.region)
         .data(config.regions);
-    $$.mainRegion.enter().append('g')
-      .append('rect')
-        .style("fill-opacity", 0);
+    var g = $$.mainRegion.enter().append('g');
     $$.mainRegion
         .attr('class', $$.classRegion.bind($$));
+    g.append('rect')
+        .style("fill-opacity", 0);
+    g.append('text')
+        .text($$.labelRegion.bind($$));
     $$.mainRegion.exit().transition().duration(duration)
         .style("opacity", 0)
         .remove();
@@ -30,17 +32,26 @@ c3_chart_internal_fn.redrawRegion = function (withTransition) {
             var parentData = $$.d3.select(this.parentNode).datum();
             $$.d3.select(this).datum(parentData);
         }),
+        regionLabels = $$.mainRegion.selectAll('text'),
         x = $$.regionX.bind($$),
         y = $$.regionY.bind($$),
         w = $$.regionWidth.bind($$),
-        h = $$.regionHeight.bind($$);
+        h = $$.regionHeight.bind($$),
+        labelX = $$.labelOffsetX.bind($$),
+        labelY = $$.labelOffsetY.bind($$),
+        labelTransform = $$.labelTransform.bind($$);
     return [
         (withTransition ? regions.transition() : regions)
             .attr("x", x)
             .attr("y", y)
             .attr("width", w)
             .attr("height", h)
-            .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() : regionLabels)
+            .attr("x", labelX)
+            .attr("y", labelY)
+            .attr("transform", labelTransform)
+            .attr("style", "text-anchor: left;")
     ];
 };
 c3_chart_internal_fn.regionX = function (d) {

src/scss/region.scss

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