From 31546d837985d3c8ea79297038f5ef60f2a36355 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=86ndrew=20Rininsland?=
 <aendrew.rininsland@the-times.co.uk>
Date: Thu, 15 Jan 2015 15:33:23 +0000
Subject: [PATCH] Adding position argument for y axis. Currently conflicts with
 Y2.

---
 c3.js             | 16 +++++++++++-----
 spec/axis-spec.js | 35 +++++++++++++++++++++++++++++++++++
 src/clip.js       |  2 +-
 src/config.js     |  2 ++
 src/core.js       |  6 +++---
 src/size.js       |  6 +++++-
 6 files changed, 57 insertions(+), 10 deletions(-)

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;
     }
 };