1031 add optional header config to charts

Gruntfile.coffee

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

c3.css

@@ -1,7 +1,7 @@
 /*-- Chart --*/
 .c3 svg {
   font: 10px sans-serif;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
+  -webkit-tap-highlight-color: transparent; }
 
 .c3 path, .c3 line {
   fill: none;
@@ -12,7 +12,11 @@
   -moz-user-select: none;
   user-select: none; }
 
-.c3-legend-item-tile, .c3-xgrid-focus, .c3-ygrid, .c3-event-rect, .c3-bars path {
+.c3-legend-item-tile,
+.c3-xgrid-focus,
+.c3-ygrid,
+.c3-event-rect,
+.c3-bars path {
   shape-rendering: crispEdges; }
 
 .c3-chart-arc path {
@@ -71,11 +75,11 @@
 /*-- Region --*/
 .c3-region {
   fill: steelblue;
-  fill-opacity: 0.1; }
+  fill-opacity: .1; }
 
 /*-- Brush --*/
 .c3-brush .extent {
-  fill-opacity: 0.1; }
+  fill-opacity: .1; }
 
 /*-- Select - Drag --*/
 /*-- Legend --*/
@@ -161,3 +165,7 @@
 .c3-chart-arc .c3-gauge-value {
   fill: #000;
   /*  font-size: 28px !important;*/ }
+
+/*-- Header --*/
+.c3-chart-header-border {
+  shape-rendering: crispEdges; }

c3.js

@@ -274,6 +274,7 @@
         main = $$.main = $$.svg.append("g").attr("transform", $$.getTranslate('main'));
 
         if ($$.initSubchart) { $$.initSubchart(); }
+        if ($$.initHeader) { $$.initHeader(); }
         if ($$.initTooltip) { $$.initTooltip(); }
         if ($$.initLegend) { $$.initLegend(); }
         if ($$.initTitle) { $$.initTitle(); }
@@ -537,6 +538,9 @@
             $$.y2Axis.tickValues($$.axis.generateTickValues($$.y2.domain(), config.axis_y2_tick_count));
         }
 
+        // header background
+        if ($$.redrawHeader) { $$.redrawHeader(); }
+
         // axes
         $$.axis.redraw(transitions, hideAxis);
 
@@ -1284,6 +1288,13 @@
                 left: 0
             },
             title_position: 'top-center',
+            // header
+            header_show: false,
+            header_height: 15,
+            header_color: '#FFF',
+            header_border_show: false,
+            header_border_color: '#000',
+            header_border_width: 1
         };
 
         Object.keys(this.additionalConfig).forEach(function (key) {
@@ -4316,6 +4327,43 @@
         return $$.yForTitle() + $$.config.title_padding.bottom;
     };
 
+    c3_chart_internal_fn.initHeader = function() {
+      var $$ = this;
+      if ($$.config.header_show) {
+          $$.header = $$.svg.append("rect")
+                .attr("class", "c3-chart-header")
+                .attr("style", "fill: " + $$.config.header_color)
+                .attr("x", 0)
+                .attr("y", 0)
+                .attr("width", $$.getCurrentWidth())
+                .attr("height", $$.config.header_height);
+
+          if ($$.config.header_border_show) {
+              $$.headerBorder = $$.svg.append("line")
+                    .attr("class", "c3-chart-header-border")
+                    .attr("style", "stroke-width: " + $$.config.header_border_width +
+                          "; stroke: " + $$.config.header_border_color)
+                    .attr("x1", 0)
+                    .attr("x2", $$.getCurrentWidth())
+                    .attr("y1", $$.config.header_height)
+                    .attr("y2", $$.config.header_height);
+          }
+      }
+    };
+    c3_chart_internal_fn.redrawHeader = function () {
+        var $$ = this;
+        if ($$.header) {
+            $$.header
+                .attr("width", $$.getCurrentWidth())
+                .attr("height", $$.config.header_height);
+        }
+
+        if ($$.headerBorder) {
+            $$.headerBorder
+                .attr("x2", $$.getCurrentWidth());
+        }
+    };
+
     function Axis(owner) {
         API.call(this, owner);
     }

c3.min.css

@@ -1 +0,0 @@
-.c3 svg{font:10px sans-serif;-webkit-tap-highlight-color:transparent}.c3 line,.c3 path{fill:none;stroke:#000}.c3 text{-webkit-user-select:none;-moz-user-select:none;user-select:none}.c3-bars path,.c3-event-rect,.c3-legend-item-tile,.c3-xgrid-focus,.c3-ygrid{shape-rendering:crispEdges}.c3-chart-arc path{stroke:#fff}.c3-chart-arc text{fill:#fff;font-size:13px}.c3-grid line{stroke:#aaa}.c3-grid text{fill:#aaa}.c3-xgrid,.c3-ygrid{stroke-dasharray:3 3}.c3-text.c3-empty{fill:gray;font-size:2em}.c3-line{stroke-width:1px}.c3-circle._expanded_{stroke-width:1px;stroke:#fff}.c3-selected-circle{fill:#fff;stroke-width:2px}.c3-bar{stroke-width:0}.c3-bar._expanded_{fill-opacity:.75}.c3-target.c3-focused{opacity:1}.c3-target.c3-focused path.c3-line,.c3-target.c3-focused path.c3-step{stroke-width:2px}.c3-target.c3-defocused{opacity:.3!important}.c3-region{fill:#4682b4;fill-opacity:.1}.c3-brush .extent{fill-opacity:.1}.c3-legend-item{font-size:12px}.c3-legend-item-hidden{opacity:.15}.c3-legend-background{opacity:.75;fill:#fff;stroke:#d3d3d3;stroke-width:1}.c3-title{font:14px sans-serif}.c3-tooltip-container{z-index:10}.c3-tooltip{border-collapse:collapse;border-spacing:0;background-color:#fff;empty-cells:show;-webkit-box-shadow:7px 7px 12px -9px #777;-moz-box-shadow:7px 7px 12px -9px #777;box-shadow:7px 7px 12px -9px #777;opacity:.9}.c3-tooltip tr{border:1px solid #CCC}.c3-tooltip th{background-color:#aaa;font-size:14px;padding:2px 5px;text-align:left;color:#FFF}.c3-tooltip td{font-size:13px;padding:3px 6px;background-color:#fff;border-left:1px dotted #999}.c3-tooltip td>span{display:inline-block;width:10px;height:10px;margin-right:6px}.c3-tooltip td.value{text-align:right}.c3-area{stroke-width:0;opacity:.2}.c3-chart-arcs-title{dominant-baseline:middle;font-size:1.3em}.c3-chart-arcs .c3-chart-arcs-background{fill:#e0e0e0;stroke:none}.c3-chart-arcs .c3-chart-arcs-gauge-unit{fill:#000;font-size:16px}.c3-chart-arcs .c3-chart-arcs-gauge-max,.c3-chart-arcs .c3-chart-arcs-gauge-min{fill:#777}.c3-chart-arc .c3-gauge-value{fill:#000}

spec/header-spec.js

@@ -0,0 +1,84 @@
+describe('c3 chart header', function () {
+    'use strict';
+    var chart, config;
+
+    describe('when given a header config with only show', function() {
+        beforeEach(function(done) {
+            config = {
+                data: {
+                    columns: [
+                        ['data1', 30, 200, 100, 400, 150, 250]
+                    ]
+                },
+                header: {
+                    show: true
+                }
+            };
+            chart = window.initChart(chart, config, done);
+        });
+
+        it('renders the header with default values', function () {
+            var headerEl = d3.select(".c3-chart-header");
+            expect(headerEl.attr("height")).toEqual('15');
+            expect(headerEl.attr("style")).toEqual('fill: #FFF');
+        });
+    });
+
+    describe('when given a border config with only show', function() {
+        beforeEach(function(done) {
+            config = {
+                data: {
+                    columns: [
+                        ['data1', 30, 200, 100, 400, 150, 250]
+                    ]
+                },
+                header: {
+                    show: true,
+                    border: {
+                      show: true
+                    }
+                }
+            };
+            chart = window.initChart(chart, config, done);
+        });
+
+        it('renders the border with default values', function () {
+            var borderEl = d3.select(".c3-chart-header-border");
+            expect(borderEl.attr("style")).toEqual('stroke-width: 1; stroke: #000');
+        });
+    });
+
+    describe('when given a header config option with options', function () {
+        beforeEach(function(done) {
+            config = {
+                data: {
+                    columns: [
+                        ['data1', 30, 200, 100, 400, 150, 250]
+                    ]
+                },
+                header: {
+                    show: true,
+                    color: '#444',
+                    height: 20,
+                    border: {
+                        show: true,
+                        color: '#333',
+                        width: 2
+                    }
+                }
+            };
+            chart = window.initChart(chart, config, done);
+        });
+
+        it('renders the header element with the correct color and height', function () {
+            var headerEl = d3.select(".c3-chart-header");
+            expect(headerEl.attr("style")).toEqual('fill: #444');
+            expect(headerEl.attr("height")).toEqual('20');
+        });
+
+        it('renders the border element with the correct color', function () {
+            var borderEl = d3.select(".c3-chart-header-border");
+            expect(borderEl.attr("style")).toEqual('stroke-width: 2; stroke: #333');
+        });
+    });
+});

src/config.js

@@ -217,6 +217,13 @@ c3_chart_internal_fn.getDefaultConfig = function () {
             left: 0
         },
         title_position: 'top-center',
+        // header
+        header_show: false,
+        header_height: 15,
+        header_color: '#FFF',
+        header_border_show: false,
+        header_border_color: '#000',
+        header_border_width: 1
     };
 
     Object.keys(this.additionalConfig).forEach(function (key) {

src/core.js

@@ -269,6 +269,7 @@ c3_chart_internal_fn.initWithData = function (data) {
     main = $$.main = $$.svg.append("g").attr("transform", $$.getTranslate('main'));
 
     if ($$.initSubchart) { $$.initSubchart(); }
+    if ($$.initHeader) { $$.initHeader(); }
     if ($$.initTooltip) { $$.initTooltip(); }
     if ($$.initLegend) { $$.initLegend(); }
     if ($$.initTitle) { $$.initTitle(); }
@@ -532,6 +533,9 @@ c3_chart_internal_fn.redraw = function (options, transitions) {
         $$.y2Axis.tickValues($$.axis.generateTickValues($$.y2.domain(), config.axis_y2_tick_count));
     }
 
+    // header background
+    if ($$.redrawHeader) { $$.redrawHeader(); }
+
     // axes
     $$.axis.redraw(transitions, hideAxis);
 

src/header.js

@@ -0,0 +1,36 @@
+c3_chart_internal_fn.initHeader = function() {
+  var $$ = this;
+  if ($$.config.header_show) {
+      $$.header = $$.svg.append("rect")
+            .attr("class", "c3-chart-header")
+            .attr("style", "fill: " + $$.config.header_color)
+            .attr("x", 0)
+            .attr("y", 0)
+            .attr("width", $$.getCurrentWidth())
+            .attr("height", $$.config.header_height);
+
+      if ($$.config.header_border_show) {
+          $$.headerBorder = $$.svg.append("line")
+                .attr("class", "c3-chart-header-border")
+                .attr("style", "stroke-width: " + $$.config.header_border_width +
+                      "; stroke: " + $$.config.header_border_color)
+                .attr("x1", 0)
+                .attr("x2", $$.getCurrentWidth())
+                .attr("y1", $$.config.header_height)
+                .attr("y2", $$.config.header_height);
+      }
+  }
+};
+c3_chart_internal_fn.redrawHeader = function () {
+    var $$ = this;
+    if ($$.header) {
+        $$.header
+            .attr("width", $$.getCurrentWidth())
+            .attr("height", $$.config.header_height);
+    }
+
+    if ($$.headerBorder) {
+        $$.headerBorder
+            .attr("x2", $$.getCurrentWidth());
+    }
+};

src/scss/header.scss

@@ -0,0 +1,3 @@
+.c3-chart-header-border {
+	shape-rendering: crispEdges;
+}

src/scss/main.scss

@@ -61,3 +61,7 @@
 /*-- Arc --*/
 
 @import 'arc';
+
+/*-- Header --*/
+
+@import 'header';