From 92e4e029602b34bdcf53517db295d9f928b18f37 Mon Sep 17 00:00:00 2001 From: timopheym Date: Thu, 5 Mar 2015 20:41:37 +0300 Subject: [PATCH 1/2] Resolved #305; Now you may pass axis.y.tick.rotate --- c3.js | 18 ++++++++++++++---- spec/axis-spec.js | 43 +++++++++++++++++++++++++++++++++++++++++++ src/axis.js | 15 ++++++++++++--- src/config.js | 3 ++- 4 files changed, 71 insertions(+), 8 deletions(-) diff --git a/c3.js b/c3.js index 605ec2e..5d63cbc 100644 --- a/c3.js +++ b/c3.js @@ -1098,7 +1098,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, @@ -4339,9 +4340,14 @@ c3_chart_internal_fn.yForRotatedTickText = function (r) { return 11.5 - 2.5 * (r / 15) * (r > 0 ? 1 : -1); }; - c3_chart_internal_fn.rotateTickText = function (axis, transition, rotate) { - axis.selectAll('.tick text') - .style("text-anchor", rotate > 0 ? "start" : "end"); + c3_chart_internal_fn.rotateTickText = function (axis, transition, rotate) { + if (axis.classed(c3_chart_internal_fn.CLASS.axisY) && !this.config.axis_rotated) { + axis.selectAll('.tick text') + .style("text-anchor", rotate > 0 ? "end" : "start"); + } else { + axis.selectAll('.tick text') + .style("text-anchor", rotate > 0 ? "start" : "end"); + } transition.selectAll('.tick text') .attr("y", this.yForRotatedTickText(rotate)) .attr("transform", "rotate(" + rotate + ")") @@ -4473,6 +4479,10 @@ $$.rotateTickText($$.axes.x, transitions.axisX, config.axis_x_tick_rotate); $$.rotateTickText($$.axes.subx, transitions.axisSubX, config.axis_x_tick_rotate); } + // we may want to rotate y axis when chart in horizontal + if (config.axis_y_tick_rotate) { + $$.rotateTickText($$.axes.y, transitions.axisY, config.axis_y_tick_rotate); + } }; c3_chart_internal_fn.getClipPath = function (id) { diff --git a/spec/axis-spec.js b/spec/axis-spec.js index 86e7639..a54bddf 100644 --- a/spec/axis-spec.js +++ b/spec/axis-spec.js @@ -569,6 +569,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/axis.js b/src/axis.js index 7cc4773..5574bff 100644 --- a/src/axis.js +++ b/src/axis.js @@ -260,9 +260,14 @@ c3_chart_internal_fn.xForRotatedTickText = function (r) { c3_chart_internal_fn.yForRotatedTickText = function (r) { return 11.5 - 2.5 * (r / 15) * (r > 0 ? 1 : -1); }; -c3_chart_internal_fn.rotateTickText = function (axis, transition, rotate) { - axis.selectAll('.tick text') - .style("text-anchor", rotate > 0 ? "start" : "end"); +c3_chart_internal_fn.rotateTickText = function (axis, transition, rotate) { + if (axis.classed(c3_chart_internal_fn.CLASS.axisY) && !this.config.axis_rotated) { + axis.selectAll('.tick text') + .style("text-anchor", rotate > 0 ? "end" : "start"); + } else { + axis.selectAll('.tick text') + .style("text-anchor", rotate > 0 ? "start" : "end"); + } transition.selectAll('.tick text') .attr("y", this.yForRotatedTickText(rotate)) .attr("transform", "rotate(" + rotate + ")") @@ -394,4 +399,8 @@ c3_chart_internal_fn.redrawAxis = function (transitions, isHidden) { $$.rotateTickText($$.axes.x, transitions.axisX, config.axis_x_tick_rotate); $$.rotateTickText($$.axes.subx, transitions.axisSubX, config.axis_x_tick_rotate); } + // we may want to rotate y axis when chart in horizontal + if (config.axis_y_tick_rotate) { + $$.rotateTickText($$.axes.y, transitions.axisY, config.axis_y_tick_rotate); + } }; diff --git a/src/config.js b/src/config.js index 737ce1b..6eaa57d 100644 --- a/src/config.js +++ b/src/config.js @@ -111,7 +111,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, From 10d33afb87703da0fbaffee5d4cba97f64c7011a Mon Sep 17 00:00:00 2001 From: Timopheym Date: Sun, 17 Jan 2016 12:33:12 +0300 Subject: [PATCH 2/2] rotate y ticks feature; tests wrong --- c3.js | 23 +++++++++++++++++------ src/axis.js | 11 ++++++----- src/size.js | 8 +++++++- 3 files changed, 30 insertions(+), 12 deletions(-) diff --git a/c3.js b/c3.js index 71f1176..dd18365 100644 --- a/c3.js +++ b/c3.js @@ -2746,12 +2746,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); }; @@ -4395,12 +4401,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); @@ -4595,10 +4602,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); @@ -6218,6 +6225,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/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/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); };