Merge pull request #5326 from plotly/date-head-label-on-sides

Position the head of dates for ticklabels in respect to axis side and ticklabelposition on x-axis

Author: archmoj

src/plots/cartesian/axes.js

@@ -1445,9 +1445,23 @@ function formatDate(ax, out, hover, extraPrecision) {
             // except for year headPart: turn this into "Jan 1, 2000" etc.
             if(tr === 'd') dateStr += ', ' + headStr;
             else dateStr = headStr + (dateStr ? ', ' + dateStr : '');
-        } else if(!ax._inCalcTicks || (headStr !== ax._prevDateHead)) {
-            dateStr += '<br>' + headStr;
-            ax._prevDateHead = headStr;
+        } else {
+            if(
+                !ax._inCalcTicks ||
+                ax._prevDateHead !== headStr
+            ) {
+                ax._prevDateHead = headStr;
+                dateStr += '<br>' + headStr;
+            } else {
+                var isInside = (ax.ticklabelposition || '').indexOf('inside') !== -1;
+                var side = ax._realSide || ax.side; // polar mocks the side of the radial axis
+                if(
+                    (!isInside && side === 'top') ||
+                    (isInside && side === 'bottom')
+                ) {
+                    dateStr += '<br> ';
+                }
+            }
         }
     }
 

src/plots/polar/polar.js

@@ -255,6 +255,8 @@ proto.updateLayout = function(fullLayout, polarLayout) {
             counterclockwise: 'top',
             clockwise: 'bottom'
         }[radialLayout.side],
+        // keep track of real side
+        _realSide: radialLayout.side,
         // spans length 1 radius
         domain: [innerRadius / gs.w, radius / gs.w]
     });

test/image/baselines/date_axes_side_top.png

@@ -0,0 +1,91 @@
+{
+  "data": [
+    {
+      "x": [
+        "1900-01-01",
+        "2000-01-01",
+        "2100-01-01"
+      ],
+      "y": [1, 3, 2]
+    },
+    {
+      "x": [
+        "2013-05-01",
+        "2013-09-01",
+        "2014-01-01"
+      ],
+      "y": [1, 3, 2],
+      "xaxis": "x2",
+      "yaxis": "y2"
+    },
+    {
+      "x": [
+        "2013-11-17",
+        "2013-12-15",
+        "2014-01-12"
+      ],
+      "y": [1, 3, 2],
+      "xaxis": "x3",
+      "yaxis": "y3"
+    },
+    {
+      "x": [
+        "2013-01-01",
+        "2013-01-02",
+        "2013-01-03"
+      ],
+      "y": [1, 3, 2],
+      "xaxis": "x4",
+      "yaxis": "y4"
+    },
+    {
+      "x": [
+        "2013-07-01 18:00",
+        "2013-07-02 00:00",
+        "2013-07-02 06:00"
+      ],
+      "y": [1, 3, 2],
+      "xaxis": "x5",
+      "yaxis": "y5"
+    },
+    {
+      "x": [
+        "2013-01-01 23:59",
+        "2013-01-02 00:00",
+        "2013-01-02 00:01"
+      ],
+      "y": [1, 3, 2],
+      "xaxis": "x6",
+      "yaxis": "y6"
+    },
+    {
+      "x": [
+        "2013-07-01 23:59:59",
+        "2013-07-02 00:00:00",
+        "2013-07-02 00:00:01"
+      ],
+      "y": [1, 3, 2],
+      "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": {"side": "top"},
+    "xaxis2": {"side": "top", "anchor": "y2"},
+    "xaxis3": {"side": "top", "anchor": "y3"},
+    "xaxis4": {"side": "top", "anchor": "y4"},
+    "xaxis5": {"side": "top", "anchor": "y5"},
+    "xaxis6": {"side": "top", "anchor": "y6"},
+    "xaxis7": {"side": "top", "anchor": "y7"}
+  }
+}

test/image/baselines/ticklabelposition-1.png

@@ -261,6 +261,7 @@ var list = [
     'custom_colorscale',
     'custom_size_subplot',
     'date_axes',
+    'date_axes_side_top',
     'date_axes_period',
     'date_axes_period2',
     'date_axes_period_breaks_automargin',
@@ -1348,6 +1349,7 @@ figs['contour-heatmap-coloring-set-contours'] = require('@mocks/contour-heatmap-
 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_side_top'] = require('@mocks/date_axes_side_top');
 figs['date_axes_period'] = require('@mocks/date_axes_period');
 figs['date_axes_period2'] = require('@mocks/date_axes_period2');
 figs['date_axes_period_breaks_automargin'] = require('@mocks/date_axes_period_breaks_automargin');