diff --git a/c3.css b/c3.css index 5de1edf..fda4242 100644 --- a/c3.css +++ b/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 --*/ diff --git a/c3.js b/c3.js index f2a15b1..b007695 100644 --- a/c3.js +++ b/c3.js @@ -1187,7 +1187,8 @@ axis_y_label: {}, axis_y_tick_format: undefined, axis_y_tick_outer: true, - axis_y_tick_values: null, + 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) { - var axisParams = { + Axis.prototype.getYAxis = function getYAxis(scale, orient, tickFormat, tickValues, withOuterTick, withoutTransition, withoutRotateTickText) { + 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) { diff --git a/spec/axis-spec.js b/spec/axis-spec.js index ef1e937..934870b 100644 --- a/spec/axis-spec.js +++ b/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 () { diff --git a/src/api.load.js b/src/api.load.js index 6bb4c9a..b2f0272 100644 --- a/src/api.load.js +++ b/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) { diff --git a/src/axis.js b/src/axis.js index ee83bb3..5268138 100644 --- a/src/axis.js +++ b/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) { - var axisParams = { +Axis.prototype.getYAxis = function getYAxis(scale, orient, tickFormat, tickValues, withOuterTick, withoutTransition, withoutRotateTickText) { + 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); diff --git a/src/config.js b/src/config.js index e15939b..9418f4f 100644 --- a/src/config.js +++ b/src/config.js @@ -120,7 +120,8 @@ c3_chart_internal_fn.getDefaultConfig = function () { axis_y_label: {}, axis_y_tick_format: undefined, axis_y_tick_outer: true, - axis_y_tick_values: null, + 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, diff --git a/src/size.js b/src/size.js index fb05a79..abc8265 100644 --- a/src/size.js +++ b/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); };