Merge pull request #1025 from davidpoore/master

Add title config option to c3 charts core

Gruntfile.coffee

@@ -40,6 +40,7 @@ module.exports = (grunt) ->
               'src/grid.js',
               'src/tooltip.js',
               'src/legend.js',
+              'src/title.js',
               'src/axis.js',
               'src/clip.js',
               'src/arc.js',

c3.js

@@ -263,6 +263,7 @@
         if ($$.initSubchart) { $$.initSubchart(); }
         if ($$.initTooltip) { $$.initTooltip(); }
         if ($$.initLegend) { $$.initLegend(); }
+        if ($$.initTitle) { $$.initTitle(); }
 
         /*-- Main Region --*/
 
@@ -608,6 +609,9 @@
             $$.updateText(durationForExit);
         }
 
+        // title
+        if ($$.redrawTitle) { $$.redrawTitle(); }
+
         // arc
         if ($$.redrawArc) { $$.redrawArc(duration, durationForExit, withTransform); }
 
@@ -1206,7 +1210,11 @@
             },
             tooltip_init_show: false,
             tooltip_init_x: 0,
-            tooltip_init_position: {top: '0px', left: '50px'}
+            tooltip_init_position: {top: '0px', left: '50px'},
+            // title
+            title_text: undefined,
+            title_x: 0,
+            title_y: 0
         };
 
         Object.keys(this.additionalConfig).forEach(function (key) {
@@ -2577,8 +2585,13 @@
         return h > 0 ? h : 320 / ($$.hasType('gauge') ? 2 : 1);
     };
     c3_chart_internal_fn.getCurrentPaddingTop = function () {
-        var config = this.config;
-        return isValue(config.padding_top) ? config.padding_top : 0;
+        var $$ = this,
+            config = $$.config,
+            padding = isValue(config.padding_top) ? config.padding_top : 0;
+        if ($$.title && $$.title.node()) {
+            padding += $$.getTitlePadding();
+        }
+        return padding;
     };
     c3_chart_internal_fn.getCurrentPaddingBottom = function () {
         var config = this.config;
@@ -2672,6 +2685,11 @@
         return Math.max(0, this.xAxis.tickInterval());
     };
 
+    c3_chart_internal_fn.getTitlePadding = function() {
+        var $$ = this;
+        return $$.config.title_y + $$.title.node().getBBox().height;
+    };
+
     c3_chart_internal_fn.getShapeIndices = function (typeFilter) {
         var $$ = this, config = $$.config,
             indices = {}, i = 0, j, k;
@@ -4146,6 +4164,21 @@
         $$.legendHasRendered = true;
     };
 
+    c3_chart_internal_fn.initTitle = function () {
+        var $$ = this;
+        $$.title = $$.svg.append("text")
+              .text($$.config.title_text)
+              .attr("class", "c3-chart-title")
+              .attr("x", $$.config.title_x)
+              .attr("y", $$.config.title_y);
+    };
+
+    c3_chart_internal_fn.redrawTitle = function () {
+        var $$ = this;
+        $$.title
+              .attr("x", $$.config.title_x)
+              .attr("y", $$.config.title_y || $$.title.node().getBBox().height);
+    };
     function Axis(owner) {
         API.call(this, owner);
     }

spec/title-spec.js

@@ -0,0 +1,67 @@
+describe('c3 chart title', function () {
+    'use strict';
+    var chart, config;
+    describe('when given a title config option', function () {
+        describe('with no x or y value', function () {           
+            beforeEach(function(done) {
+                config = {
+                    data: {
+                        columns: [
+                            ['data1', 30, 200, 100, 400, 150, 250]
+                        ]
+                    },
+                    title: {
+                        text: 'new title'
+                    }
+                };
+                chart = window.initChart(chart, config, done);
+            });
+
+            it('renders the title at the default config position', function () {
+                var titleEl = d3.select(".c3-chart-title");
+                expect(titleEl.attr("x")).toEqual('0');
+                expect(titleEl.attr("y")).toEqual(titleEl.node().getBBox().height.toString());
+            });
+
+            it('renders the title text', function () {
+                var titleEl = d3.select(".c3-chart-title");
+                expect(titleEl.node().textContent).toEqual('new title');
+            });
+        });
+
+        describe('with x and y values', function () {           
+            beforeEach(function(done) {
+                config = {
+                    data: {
+                        columns: [
+                            ['data1', 30, 200, 100, 400, 150, 250]
+                        ]
+                    },
+                    title: {
+                        text: 'positioned title',
+                        x: 50,
+                        y: 10
+                    }
+                };
+                chart = window.initChart(chart, config, done);
+            });
+
+            it('renders the title at the default config position', function () {
+                var titleEl = d3.select(".c3-chart-title");
+                expect(titleEl.attr("x")).toEqual('50');
+                expect(titleEl.attr("y")).toEqual('10');
+            });
+
+            it('renders the title text', function () {
+                var titleEl = d3.select(".c3-chart-title");
+                expect(titleEl.node().textContent).toEqual('positioned title');
+            });
+
+            it('adds the correct amount of padding to fit the title', function() {
+                expect(chart.internal.getCurrentPaddingTop()).toEqual(
+                    config.title.y + d3.select('.c3-chart-title').node().getBBox().height
+                );
+            });
+        });
+    });
+});

src/config.js

@@ -191,7 +191,11 @@ c3_chart_internal_fn.getDefaultConfig = function () {
         },
         tooltip_init_show: false,
         tooltip_init_x: 0,
-        tooltip_init_position: {top: '0px', left: '50px'}
+        tooltip_init_position: {top: '0px', left: '50px'},
+        // title
+        title_text: undefined,
+        title_x: 0,
+        title_y: 0
     };
 
     Object.keys(this.additionalConfig).forEach(function (key) {

src/core.js

@@ -258,6 +258,7 @@ c3_chart_internal_fn.initWithData = function (data) {
     if ($$.initSubchart) { $$.initSubchart(); }
     if ($$.initTooltip) { $$.initTooltip(); }
     if ($$.initLegend) { $$.initLegend(); }
+    if ($$.initTitle) { $$.initTitle(); }
 
     /*-- Main Region --*/
 
@@ -603,6 +604,9 @@ c3_chart_internal_fn.redraw = function (options, transitions) {
         $$.updateText(durationForExit);
     }
 
+    // title
+    if ($$.redrawTitle) { $$.redrawTitle(); }
+
     // arc
     if ($$.redrawArc) { $$.redrawArc(duration, durationForExit, withTransform); }
 

src/size.js

@@ -8,8 +8,13 @@ c3_chart_internal_fn.getCurrentHeight = function () {
     return h > 0 ? h : 320 / ($$.hasType('gauge') ? 2 : 1);
 };
 c3_chart_internal_fn.getCurrentPaddingTop = function () {
-    var config = this.config;
-    return isValue(config.padding_top) ? config.padding_top : 0;
+    var $$ = this,
+        config = $$.config,
+        padding = isValue(config.padding_top) ? config.padding_top : 0;
+    if ($$.title && $$.title.node()) {
+        padding += $$.getTitlePadding();
+    }
+    return padding;
 };
 c3_chart_internal_fn.getCurrentPaddingBottom = function () {
     var config = this.config;
@@ -102,3 +107,8 @@ c3_chart_internal_fn.getHorizontalAxisHeight = function (axisId) {
 c3_chart_internal_fn.getEventRectWidth = function () {
     return Math.max(0, this.xAxis.tickInterval());
 };
+
+c3_chart_internal_fn.getTitlePadding = function() {
+    var $$ = this;
+    return $$.config.title_y + $$.title.node().getBBox().height;
+};

src/title.js

@@ -0,0 +1,15 @@
+c3_chart_internal_fn.initTitle = function () {
+    var $$ = this;
+    $$.title = $$.svg.append("text")
+          .text($$.config.title_text)
+          .attr("class", "c3-chart-title")
+          .attr("x", $$.config.title_x)
+          .attr("y", $$.config.title_y);
+};
+
+c3_chart_internal_fn.redrawTitle = function () {
+    var $$ = this;
+    $$.title
+          .attr("x", $$.config.title_x)
+          .attr("y", $$.config.title_y || $$.title.node().getBBox().height);
+};