correct logic for reversed ranges and add tests for some period scena…

…rios
plotly · Jul 24, 2020 · 83f5cdd · 83f5cdd
1 parent 66a98be
commit 83f5cdd
Show file tree

Hide file tree

Showing 4 changed files with 197 additions and 5 deletions.
diff --git a/src/plots/cartesian/axes.js b/src/plots/cartesian/axes.js
@@ -623,10 +623,10 @@ axes.calcTicks = function calcTicks(ax, opts) {
     var isPeriod = ax.ticklabelmode === 'period';
     if(isPeriod) {
         // add one label to show pre tick0 period
-        tickVals = [{
+        tickVals.unshift({
             minor: false,
             value: axes.tickIncrement(tickVals[0].value, ax.dtick, !axrev, ax.caldendar)
-        }].concat(tickVals);
+        });
     }
 
     if(ax.rangebreaks) {
@@ -745,12 +745,13 @@ axes.calcTicks = function calcTicks(ax, opts) {
             var B = tickVals[b].value;
 
             var delta = definedDelta || Math.abs(B - A);
+            var half = axrev ? -0.5 : 0.5;
             if(delta >= ONEDAY * 365) { // Years could have days less than ONEAVGYEAR period
-                v += ONEAVGYEAR / 2;
+                v += half * ONEAVGYEAR;
             } else if(delta >= ONEDAY * 28) { // Months could have days less than ONEAVGMONTH period
-                v += ONEAVGMONTH / 2;
+                v += half * ONEAVGMONTH;
             } else if(delta >= ONEDAY) {
-                v += ONEDAY / 2;
+                v += half * ONEDAY;
             }
 
             ticksOut[i].periodX = v;

diff --git a/test/image/baselines/date_axes_period2.png b/test/image/baselines/date_axes_period2.png
diff --git a/test/image/mocks/date_axes_period2.json b/test/image/mocks/date_axes_period2.json
@@ -0,0 +1,189 @@
+{
+    "data": [
+        {
+            "x": [
+                "2017-01-01",
+                "2023-01-01"
+            ],
+            "y": [
+                0,
+                1
+            ]
+        },
+        {
+            "x": [
+                "2017-01-01",
+                "2023-01-01"
+            ],
+            "y": [
+                0,
+                1
+            ],
+            "xaxis": "x2",
+            "yaxis": "y2"
+        },
+        {
+            "x": [
+                "2017-01-01",
+                "2023-01-01"
+            ],
+            "y": [
+                0,
+                1
+            ],
+            "xaxis": "x3",
+            "yaxis": "y3"
+        },
+        {
+            "x": [
+                "2017-01-01",
+                "2023-01-01"
+            ],
+            "y": [
+                0,
+                1
+            ],
+            "xaxis": "x4",
+            "yaxis": "y4"
+        },
+        {
+            "x": [
+                "2017-01-01",
+                "2023-01-01"
+            ],
+            "y": [
+                0,
+                1
+            ],
+            "xaxis": "x5",
+            "yaxis": "y5"
+        },
+        {
+            "x": [
+                "2017-01-01",
+                "2023-01-01"
+            ],
+            "y": [
+                0,
+                1
+            ],
+            "xaxis": "x6",
+            "yaxis": "y6"
+        },
+        {
+            "x": [
+                "2017-01-01",
+                "2023-01-01"
+            ],
+            "y": [
+                0,
+                1
+            ],
+            "xaxis": "x7",
+            "yaxis": "y7"
+        }
+    ],
+    "layout": {
+        "showlegend": false,
+        "width": 600,
+        "height": 500,
+        "yaxis": {
+            "domain": [
+                0,
+                0.04
+            ]
+        },
+        "yaxis2": {
+            "domain": [
+                0.16,
+                0.2
+            ]
+        },
+        "yaxis3": {
+            "domain": [
+                0.32,
+                0.36
+            ]
+        },
+        "yaxis4": {
+            "domain": [
+                0.48,
+                0.52
+            ]
+        },
+        "yaxis5": {
+            "domain": [
+                0.64,
+                0.68
+            ]
+        },
+        "yaxis6": {
+            "domain": [
+                0.80,
+                0.84
+            ]
+        },
+        "yaxis7": {
+            "domain": [
+                0.96,
+                1
+            ]
+        },
+        "xaxis": {
+            "range": [
+                "2019-12-24",
+                "2020-01-06"
+            ],
+            "ticklabelmode": "period",
+            "tickformat": "%b %d, %Y"
+        },
+        "xaxis2": {
+            "range": [
+                "2019-12-29",
+                "2020-01-04"
+            ],
+            "ticklabelmode": "period",
+            "anchor": "y2"
+        },
+        "xaxis3": {
+            "range": [
+                "2020-01-03",
+                "2019-12-28"
+            ],
+            "ticklabelmode": "period",
+            "anchor": "y3"
+        },
+        "xaxis4": {
+            "range": [
+                "2020-03-01",
+                "2020-11-01"
+            ],
+            "ticklabelmode": "period",
+            "anchor": "y4"
+        },
+        "xaxis5": {
+            "range": [
+                "2016-09-01",
+                "2017-06-01"
+            ],
+            "ticklabelmode": "period",
+            "anchor": "y5"
+        },
+        "xaxis6": {
+            "range": [
+                "2016-05-01",
+                "2019-09-01"
+            ],
+            "ticklabelmode": "period",
+            "anchor": "y6"
+        },
+        "xaxis7": {
+            "range": [
+                "2016-05-01",
+                "2021-09-01"
+            ],
+            "ticklabelmode": "period",
+            "anchor": "y7"
+        }
+    }
+}
diff --git a/test/jasmine/tests/mock_test.js b/test/jasmine/tests/mock_test.js
@@ -254,6 +254,7 @@ var list = [
     'custom_size_subplot',
     'date_axes',
     'date_axes_period',
+    'date_axes_period2',
     'date_histogram',
     'dendrogram',
     'display-text_zero-number',
@@ -1298,6 +1299,7 @@ figs['custom_colorscale'] = require('@mocks/custom_colorscale');
 figs['custom_size_subplot'] = require('@mocks/custom_size_subplot');
 figs['date_axes'] = require('@mocks/date_axes');
 figs['date_axes_period'] = require('@mocks/date_axes_period');
+figs['date_axes_period2'] = require('@mocks/date_axes_period2');
 figs['date_histogram'] = require('@mocks/date_histogram');
 // figs['dendrogram'] = require('@mocks/dendrogram');
 figs['display-text_zero-number'] = require('@mocks/display-text_zero-number');