Merge branch 'master' of https://github.com/Timopheym/c3 into Timopheym-master

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 --*/

c3.js

@@ -1188,6 +1188,7 @@
             axis_y_tick_format: undefined,
             axis_y_tick_outer: true,
             axis_y_tick_values: null,        
+            axis_y_tick_rotate: 0,
             axis_y_tick_count: undefined,
             axis_y_tick_time_value: undefined,
             axis_y_tick_time_interval: undefined,
@@ -2752,12 +2753,18 @@
         var $$ = this, config = $$.config, h = 30;
         if (axisId === 'x' && !config.axis_x_show) { return 8; }
         if (axisId === 'x' && config.axis_x_height) { return config.axis_x_height; }
-        if (axisId === 'y' && !config.axis_y_show) { return config.legend_show && !$$.isLegendRight && !$$.isLegendInset ? 10 : 1; }
+        if (axisId === 'y' && !config.axis_y_show) { 
+            return config.legend_show && !$$.isLegendRight && !$$.isLegendInset ? 10 : 1; 
+        }
         if (axisId === 'y2' && !config.axis_y2_show) { return $$.rotated_padding_top; }
         // Calculate x axis height when tick rotated
         if (axisId === 'x' && !config.axis_rotated && config.axis_x_tick_rotate) {
             h = 30 + $$.axis.getMaxTickWidth(axisId) * Math.cos(Math.PI * (90 - config.axis_x_tick_rotate) / 180);
         }
+        // Calculate y axis height when tick rotated
+        if (axisId === 'y' && config.axis_rotated && config.axis_y_tick_rotate) {
+            h = 30 + $$.axis.getMaxTickWidth(axisId) * Math.cos(Math.PI * (90 - config.axis_y_tick_rotate) / 180);
+        }
         return h + ($$.axis.getLabelPositionById(axisId).isInner ? 0 : 10) + (axisId === 'y2' ? -10 : 0);
     };
 
@@ -4401,12 +4408,13 @@
         }
         return tickValues;
     };
-    Axis.prototype.getYAxis = function getYAxis(scale, orient, tickFormat, tickValues, withOuterTick, withoutTransition) {
+    Axis.prototype.getYAxis = function getYAxis(scale, orient, tickFormat, tickValues, withOuterTick, withoutTransition, withoutRotateTickText) {
-        var axisParams = {
+        var $$ = this.owner, config = $$.config,
+            axisParams = {
             withOuterTick: withOuterTick,
             withoutTransition: withoutTransition,
+            tickTextRotate: withoutRotateTickText ? 0 : config.axis_y_tick_rotate
         },
-            $$ = this.owner,
             d3 = $$.d3,
             config = $$.config,
             axis = c3_axis(d3, axisParams).scale(scale).orient(orient).tickFormat(tickFormat);
@@ -4601,10 +4609,10 @@
             targetsToShow = $$.filterTargetsToShow($$.data.targets);
             if (id === 'y') {
                 scale = $$.y.copy().domain($$.getYDomain(targetsToShow, 'y'));
-                axis = this.getYAxis(scale, $$.yOrient, config.axis_y_tick_format, $$.yAxisTickValues, false, true);
+                axis = this.getYAxis(scale, $$.yOrient, config.axis_y_tick_format, $$.yAxisTickValues, false, true, true);
             } else if (id === 'y2') {
                 scale = $$.y2.copy().domain($$.getYDomain(targetsToShow, 'y2'));
-                axis = this.getYAxis(scale, $$.y2Orient, config.axis_y2_tick_format, $$.y2AxisTickValues, false, true);
+                axis = this.getYAxis(scale, $$.y2Orient, config.axis_y2_tick_format, $$.y2AxisTickValues, false, true, true);
             } else {
                 scale = $$.x.copy().domain($$.getXDomain(targetsToShow));
                 axis = this.getXAxis(scale, $$.xOrient, $$.xAxisTickFormat, $$.xAxisTickValues, false, true, true);
@@ -6224,6 +6232,10 @@
         if (args.xs) {
             $$.addXs(args.xs);
         }
+        // update names if exists
+        if ('names' in args) {
+            c3_chart_fn.data.names.bind(this)(args.names);
+        }
         // update classes if exists
         if ('classes' in args) {
             Object.keys(args.classes).forEach(function (id) {

spec/axis-spec.js

@@ -599,6 +599,49 @@ describe('c3 chart axis', function () {
         });
     });
 
+
+    describe('axis.y.tick.rotate', function () {
+
+        describe('not rotated', function () {
+
+            it('should update args successfully', function () {
+                args = {
+                    data: {
+                        columns: [
+                            ['data1', 30, 200, 100, 400, 150, 250, 100, 600],
+                            ['data2', 50, 20, 10, 40, 15, 25],
+                        ]
+                    },
+                    axis: {
+                        y: {
+                            tick: {
+                                rotate: 45
+                            }
+                        }
+                    }
+                };
+                expect(true).toBeTruthy();
+            });
+
+            it('should rotate tick texts', function () {
+                chart.internal.main.selectAll('.c3-axis-y g.tick').each(function () {
+                    var tick = d3.select(this),
+                        text = tick.select('text'),
+                        tspan = text.select('tspan');
+                    expect(text.attr('transform')).toBe('rotate(45)');
+                    expect(text.attr('y')).toBe('4');
+                    expect(tspan.attr('dx')).toBe('5.65685424949238');
+                });
+            });
+
+            it('should have automatically calculated y axis width', function () {
+                var box = chart.internal.main.select('.c3-axis-y').node().getBoundingClientRect();
+                expect(box.width).toBeLessThan(25);
+            });
+
+        });
+    });
+
     describe('axis.x.tick.fit', function () {
 
         describe('axis.x.tick.fit = true', function () {

src/api.load.js

@@ -4,6 +4,10 @@ c3_chart_fn.load = function (args) {
     if (args.xs) {
         $$.addXs(args.xs);
     }
+    // update names if exists
+    if ('names' in args) {
+        c3_chart_fn.data.names.bind(this)(args.names);
+    }
     // update classes if exists
     if ('classes' in args) {
         Object.keys(args.classes).forEach(function (id) {

src/axis.js

@@ -76,12 +76,13 @@ Axis.prototype.updateXAxisTickValues = function updateXAxisTickValues(targets, a
     }
     return tickValues;
 };
-Axis.prototype.getYAxis = function getYAxis(scale, orient, tickFormat, tickValues, withOuterTick, withoutTransition) {
+Axis.prototype.getYAxis = function getYAxis(scale, orient, tickFormat, tickValues, withOuterTick, withoutTransition, withoutRotateTickText) {
-    var axisParams = {
+    var $$ = this.owner, config = $$.config,
+        axisParams = {
         withOuterTick: withOuterTick,
         withoutTransition: withoutTransition,
+        tickTextRotate: withoutRotateTickText ? 0 : config.axis_y_tick_rotate
     },
-        $$ = this.owner,
         d3 = $$.d3,
         config = $$.config,
         axis = c3_axis(d3, axisParams).scale(scale).orient(orient).tickFormat(tickFormat);
@@ -276,10 +277,10 @@ Axis.prototype.getMaxTickWidth = function getMaxTickWidth(id, withoutRecompute)
         targetsToShow = $$.filterTargetsToShow($$.data.targets);
         if (id === 'y') {
             scale = $$.y.copy().domain($$.getYDomain(targetsToShow, 'y'));
-            axis = this.getYAxis(scale, $$.yOrient, config.axis_y_tick_format, $$.yAxisTickValues, false, true);
+            axis = this.getYAxis(scale, $$.yOrient, config.axis_y_tick_format, $$.yAxisTickValues, false, true, true);
         } else if (id === 'y2') {
             scale = $$.y2.copy().domain($$.getYDomain(targetsToShow, 'y2'));
-            axis = this.getYAxis(scale, $$.y2Orient, config.axis_y2_tick_format, $$.y2AxisTickValues, false, true);
+            axis = this.getYAxis(scale, $$.y2Orient, config.axis_y2_tick_format, $$.y2AxisTickValues, false, true, true);
         } else {
             scale = $$.x.copy().domain($$.getXDomain(targetsToShow));
             axis = this.getXAxis(scale, $$.xOrient, $$.xAxisTickFormat, $$.xAxisTickValues, false, true, true);

src/config.js

@@ -121,6 +121,7 @@ c3_chart_internal_fn.getDefaultConfig = function () {
         axis_y_tick_format: undefined,
         axis_y_tick_outer: true,
         axis_y_tick_values: null,        
+        axis_y_tick_rotate: 0,
         axis_y_tick_count: undefined,
         axis_y_tick_time_value: undefined,
         axis_y_tick_time_interval: undefined,

src/size.js

@@ -95,12 +95,18 @@ c3_chart_internal_fn.getHorizontalAxisHeight = function (axisId) {
     var $$ = this, config = $$.config, h = 30;
     if (axisId === 'x' && !config.axis_x_show) { return 8; }
     if (axisId === 'x' && config.axis_x_height) { return config.axis_x_height; }
-    if (axisId === 'y' && !config.axis_y_show) { return config.legend_show && !$$.isLegendRight && !$$.isLegendInset ? 10 : 1; }
+    if (axisId === 'y' && !config.axis_y_show) { 
+        return config.legend_show && !$$.isLegendRight && !$$.isLegendInset ? 10 : 1; 
+    }
     if (axisId === 'y2' && !config.axis_y2_show) { return $$.rotated_padding_top; }
     // Calculate x axis height when tick rotated
     if (axisId === 'x' && !config.axis_rotated && config.axis_x_tick_rotate) {
         h = 30 + $$.axis.getMaxTickWidth(axisId) * Math.cos(Math.PI * (90 - config.axis_x_tick_rotate) / 180);
     }
+    // Calculate y axis height when tick rotated
+    if (axisId === 'y' && config.axis_rotated && config.axis_y_tick_rotate) {
+        h = 30 + $$.axis.getMaxTickWidth(axisId) * Math.cos(Math.PI * (90 - config.axis_y_tick_rotate) / 180);
+    }
     return h + ($$.axis.getLabelPositionById(axisId).isInner ? 0 : 10) + (axisId === 'y2' ? -10 : 0);
 };