From fee056d3f593baaf45b9b0c367b5f877062ddc97 Mon Sep 17 00:00:00 2001 From: Damien SOREL Date: Tue, 27 Sep 2016 10:46:41 +0200 Subject: [PATCH] Add Region Labels --- htdocs/samples/regions.html | 12 ++++++------ spec/api.region-spec.js | 11 +++++++++-- src/class.js | 16 ++++++++++++++++ src/region.js | 21 ++++++++++++++++----- src/scss/region.scss | 4 ++++ 5 files changed, 51 insertions(+), 13 deletions(-) diff --git a/htdocs/samples/regions.html b/htdocs/samples/regions.html index 0546383..d77cfba 100644 --- a/htdocs/samples/regions.html +++ b/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 diff --git a/spec/api.region-spec.js b/spec/api.region-spec.js index ebd3b43..52662df 100644 --- a/spec/api.region-spec.js +++ b/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); diff --git a/src/class.js b/src/class.js index 66171a7..8a692e6 100644 --- a/src/class.js +++ b/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); }; diff --git a/src/region.js b/src/region.js index 0439a80..a0a72b4 100644 --- a/src/region.js +++ b/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) { diff --git a/src/scss/region.scss b/src/scss/region.scss index d77f7c3..aff12e8 100644 --- a/src/scss/region.scss +++ b/src/scss/region.scss @@ -1,4 +1,8 @@ .c3-region { fill: steelblue; fill-opacity: .1; + + text { + fill-opacity: 1; + } }