Fix getPixelShift for reversed axes, add reversed axis to mock

Author: my-tien

src/components/shapes/helpers.js

@@ -287,15 +287,8 @@ function convertPath(options, x2p, y2p) {
 function getPixelShift(axis, shift) {
     shift = shift || 0;
     var shiftPixels = 0;
-    if(axis && shift) {
-        var isVertical = axis._id.charAt(0) === 'y';
-        if(axis.type === 'category' || axis.type === 'multicategory') {
-            if(isVertical) {
-                shiftPixels = ((axis.r2p(1) - axis.r2p(0)) * shift);
-            } else {
-                shiftPixels = axis.r2p(0.5) * shift;
-            }
-        }
+    if(shift && axis && (axis.type === 'category' || axis.type === 'multicategory')) {
+        shiftPixels = (axis.r2p(1) - axis.r2p(0)) * shift;
     }
     return shiftPixels;
 }

test/image/mocks/zzz_shape_shift_vertical.json

@@ -21,12 +21,15 @@
     ],
     "layout": {
         "width": 600,
+        "xaxis": {
+            "autorange": "reversed"
+        },
         "shapes": [
             {
                 "layer": "above",
                 "type": "line",
                 "label": {
-                    "text": "right from A",
+                    "text": "after A",
                     "textposition": "end",
                     "textangle": 0
                 },
@@ -46,7 +49,7 @@
                 "layer": "above",
                 "type": "line",
                 "label": {
-                    "text": "slightly left from D",
+                    "text": "slightly before D",
                     "textposition": "end",
                     "textangle": 0
                 },