diff --git a/c3.js b/c3.js index 71d2e74..d341c74 100644 --- a/c3.js +++ b/c3.js @@ -113,8 +113,8 @@ $$.defocusedTargetIds = []; $$.xOrient = config.axis_rotated ? "left" : "bottom"; - $$.yOrient = config.axis_rotated ? (config.axis_y_inner ? "top" : "bottom") : (config.axis_y_inner ? "right" : "left"); - $$.y2Orient = config.axis_rotated ? (config.axis_y2_inner ? "bottom" : "top") : (config.axis_y2_inner ? "left" : "right"); + $$.yOrient = config.axis_rotated ? (config.axis_y_inner ? "top" : "bottom") : (config.axis_y_position === "left" ? (config.axis_y_inner ? "right" : "left") : (config.axis_y_inner ? "left" : "right") ); + $$.y2Orient = config.axis_rotated ? (config.axis_y2_inner ? "bottom" : "top") : (config.axis_y2_position === "right" ? (config.axis_y2_inner ? "left" : "right") : (config.axis_y2_inner ? "right" : "left")); $$.subXOrient = config.axis_rotated ? "left" : "bottom"; $$.isLegendRight = config.legend_position === 'right'; @@ -704,7 +704,7 @@ x = 0; y = config.axis_rotated ? 0 : $$.height; } else if (target === 'y') { - x = 0; + x = config.axis_position === 'left' ? 0 : $$.width; y = config.axis_rotated ? $$.height : 0; } else if (target === 'y2') { x = config.axis_rotated ? 0 : $$.width; @@ -1044,6 +1044,7 @@ axis_y_tick_time_interval: undefined, axis_y_padding: {}, axis_y_default: undefined, + axis_y_position: 'left', axis_y2_show: false, axis_y2_max: undefined, axis_y2_min: undefined, @@ -1056,6 +1057,7 @@ axis_y2_tick_count: undefined, axis_y2_padding: {}, axis_y2_default: undefined, + axis_y2_position: 'right', // grid grid_x_show: false, grid_x_type: 'tick', @@ -2509,6 +2511,8 @@ return config.padding_left; } else if (config.axis_rotated) { return !config.axis_x_show ? 1 : Math.max(ceil10($$.getAxisWidthByAxisId('x', withoutRecompute)), 40); + } else if (!config.axis_y_show || (config.axis_y_position === "right" && !config.axis_y_inner)) { + return ceil10($$.getAxisWidthByAxisId('y')) - 30; } else if (!config.axis_y_show || config.axis_y_inner) { // && !config.axis_rotated return $$.getYAxisLabelPosition().isOuter ? 30 : 1; } else { @@ -2522,10 +2526,12 @@ return config.padding_right + 1; // 1 is needed not to hide tick line } else if (config.axis_rotated) { return defaultPadding + legendWidthOnRight; + } else if (!config.axis_y_show || (config.axis_y_position === "right" && !config.axis_y_inner)) { + return ceil10($$.getAxisWidthByAxisId('y')) + legendWidthOnRight; } else if (!config.axis_y2_show || config.axis_y2_inner) { // && !config.axis_rotated return 2 + legendWidthOnRight + ($$.getY2AxisLabelPosition().isOuter ? 20 : 0); } else { - return ceil10($$.getAxisWidthByAxisId('y2')) + legendWidthOnRight; + return ceil10($$.getAxisWidthByAxisId('y')) + legendWidthOnRight; } }; @@ -4461,7 +4467,7 @@ }; c3_chart_internal_fn.getYAxisClipX = function () { var $$ = this; - return $$.config.axis_y_inner ? -1 : $$.getAxisClipX($$.config.axis_rotated); + return $$.config.axis_y_inner || $$.config.axis_y_position === "right" ? -1 : $$.getAxisClipX($$.config.axis_rotated); }; c3_chart_internal_fn.getYAxisClipY = function () { var $$ = this; diff --git a/spec/axis-spec.js b/spec/axis-spec.js index df5d03f..e10ae33 100644 --- a/spec/axis-spec.js +++ b/spec/axis-spec.js @@ -763,4 +763,39 @@ describe('c3 chart axis', function () { }); + + describe('axis.y.position', function () { + + beforeEach(function () { + args.axis.y = { + position: 'right' + }; + + chart = window.c3.generate(args); + }); + + it('should position the y axis on the right', function () { + var transformX = d3.select('.c3-axis-y').attr('transform').match(/translate\((.+?),0\)/i)[1]; // There has to be a better way of testing this + expect(parseInt(transformX)).toBeCloseTo(630); + }); + + }); + + + describe('axis.y2.position', function () { + + beforeEach(function () { + args.axis.y2 = { + position: 'left' + }; + + chart = window.c3.generate(args); + }); + + it('should position the y2 axis on the left', function () { + var transformX = d3.select('.c3-axis-y').attr('transform').match(/translate\((.+?),0\)/i)[1]; // There has to be a better way of testing this + expect(parseInt(transformX)).toBeCloseTo(0); + }); + }); + }); diff --git a/src/clip.js b/src/clip.js index 322dbb5..36797d3 100644 --- a/src/clip.js +++ b/src/clip.js @@ -23,7 +23,7 @@ c3_chart_internal_fn.getXAxisClipY = function () { }; c3_chart_internal_fn.getYAxisClipX = function () { var $$ = this; - return $$.config.axis_y_inner ? -1 : $$.getAxisClipX($$.config.axis_rotated); + return $$.config.axis_y_inner || $$.config.axis_y_position === "right" ? -1 : $$.getAxisClipX($$.config.axis_rotated); }; c3_chart_internal_fn.getYAxisClipY = function () { var $$ = this; diff --git a/src/config.js b/src/config.js index a53f879..b63f42a 100644 --- a/src/config.js +++ b/src/config.js @@ -116,6 +116,7 @@ c3_chart_internal_fn.getDefaultConfig = function () { axis_y_tick_time_interval: undefined, axis_y_padding: {}, axis_y_default: undefined, + axis_y_position: 'left', axis_y2_show: false, axis_y2_max: undefined, axis_y2_min: undefined, @@ -128,6 +129,7 @@ c3_chart_internal_fn.getDefaultConfig = function () { axis_y2_tick_count: undefined, axis_y2_padding: {}, axis_y2_default: undefined, + axis_y2_position: 'right', // grid grid_x_show: false, grid_x_type: 'tick', diff --git a/src/core.js b/src/core.js index df07f8a..aa80e81 100644 --- a/src/core.js +++ b/src/core.js @@ -108,8 +108,8 @@ c3_chart_internal_fn.initParams = function () { $$.defocusedTargetIds = []; $$.xOrient = config.axis_rotated ? "left" : "bottom"; - $$.yOrient = config.axis_rotated ? (config.axis_y_inner ? "top" : "bottom") : (config.axis_y_inner ? "right" : "left"); - $$.y2Orient = config.axis_rotated ? (config.axis_y2_inner ? "bottom" : "top") : (config.axis_y2_inner ? "left" : "right"); + $$.yOrient = config.axis_rotated ? (config.axis_y_inner ? "top" : "bottom") : (config.axis_y_position === "left" ? (config.axis_y_inner ? "right" : "left") : (config.axis_y_inner ? "left" : "right") ); + $$.y2Orient = config.axis_rotated ? (config.axis_y2_inner ? "bottom" : "top") : (config.axis_y2_position === "right" ? (config.axis_y2_inner ? "left" : "right") : (config.axis_y2_inner ? "right" : "left")); $$.subXOrient = config.axis_rotated ? "left" : "bottom"; $$.isLegendRight = config.legend_position === 'right'; @@ -699,7 +699,7 @@ c3_chart_internal_fn.getTranslate = function (target) { x = 0; y = config.axis_rotated ? 0 : $$.height; } else if (target === 'y') { - x = 0; + x = config.axis_position === 'left' ? 0 : $$.width; y = config.axis_rotated ? $$.height : 0; } else if (target === 'y2') { x = config.axis_rotated ? 0 : $$.width; diff --git a/src/size.js b/src/size.js index 3fef765..9726090 100644 --- a/src/size.js +++ b/src/size.js @@ -21,6 +21,8 @@ c3_chart_internal_fn.getCurrentPaddingLeft = function (withoutRecompute) { return config.padding_left; } else if (config.axis_rotated) { return !config.axis_x_show ? 1 : Math.max(ceil10($$.getAxisWidthByAxisId('x', withoutRecompute)), 40); + } else if (!config.axis_y_show || (config.axis_y_position === "right" && !config.axis_y_inner)) { + return ceil10($$.getAxisWidthByAxisId('y')) - 30; } else if (!config.axis_y_show || config.axis_y_inner) { // && !config.axis_rotated return $$.getYAxisLabelPosition().isOuter ? 30 : 1; } else { @@ -34,10 +36,12 @@ c3_chart_internal_fn.getCurrentPaddingRight = function () { return config.padding_right + 1; // 1 is needed not to hide tick line } else if (config.axis_rotated) { return defaultPadding + legendWidthOnRight; + } else if (!config.axis_y_show || (config.axis_y_position === "right" && !config.axis_y_inner)) { + return ceil10($$.getAxisWidthByAxisId('y')) + legendWidthOnRight; } else if (!config.axis_y2_show || config.axis_y2_inner) { // && !config.axis_rotated return 2 + legendWidthOnRight + ($$.getY2AxisLabelPosition().isOuter ? 20 : 0); } else { - return ceil10($$.getAxisWidthByAxisId('y2')) + legendWidthOnRight; + return ceil10($$.getAxisWidthByAxisId('y')) + legendWidthOnRight; } };