introduce period positioning for cartesian traces

Author: archmoj

src/plots/cartesian/align_period.js

@@ -0,0 +1,20 @@
+/**
+* Copyright 2012-2020, Plotly, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+'use strict';
+
+module.exports = function alignPeriod(trace, axLetter, vals) {
+    var periodAlignment = trace[axLetter + 'periodalignment'];
+    if(!periodAlignment || periodAlignment === 'start') return vals;
+
+    var delta = (periodAlignment === 'end' ? 1 : 0.5) * trace[axLetter + 'period'];
+    for(var i = 0; i < vals.length; i++) {
+        vals[i] += delta;
+    }
+    return vals;
+};

src/plots/cartesian/axes.js

@@ -1266,6 +1266,10 @@ function formatDate(ax, out, hover, extraPrecision) {
     var tr = ax._tickround;
     var fmt = (hover && ax.hoverformat) || axes.getTickFormat(ax);
 
+    if(ax.ticklabelmode === 'period') {
+        extraPrecision = false;
+    }
+
     if(extraPrecision) {
         // second or sub-second precision: extra always shows max digits.
         // for other fields, extra precision just adds one field.

src/plots/cartesian/set_convert.js

@@ -30,6 +30,7 @@ var ONEMIN = numConstants.ONEMIN;
 var ONESEC = numConstants.ONESEC;
 
 var axisIds = require('./axis_ids');
+var alignPeriod = require('./align_period');
 
 var constants = require('./constants');
 var HOUR_PATTERN = constants.HOUR_PATTERN;
@@ -847,6 +848,10 @@ module.exports = function setConvert(ax, fullLayout) {
             }
         }
 
+        if(axType === 'date') {
+            arrayOut = alignPeriod(trace, axLetter, arrayOut);
+        }
+
         return arrayOut;
     };
 

src/traces/bar/attributes.js

@@ -59,6 +59,11 @@ module.exports = {
     y0: scatterAttrs.y0,
     dy: scatterAttrs.dy,
 
+    xperiod: scatterAttrs.xperiod,
+    yperiod: scatterAttrs.yperiod,
+    xperiodalignment: scatterAttrs.xperiodalignment,
+    yperiodalignment: scatterAttrs.yperiodalignment,
+
     text: scatterAttrs.text,
     texttemplate: texttemplateAttrs({editType: 'plot'}, {
         keys: constants.eventDataKeys

src/traces/bar/defaults.js

@@ -13,6 +13,7 @@ var Color = require('../../components/color');
 var Registry = require('../../registry');
 
 var handleXYDefaults = require('../scatter/xy_defaults');
+var handlePeriodDefaults = require('../scatter/period_defaults');
 var handleStyleDefaults = require('./style_defaults');
 var getAxisGroup = require('../../plots/cartesian/axis_ids').getAxisGroup;
 var attributes = require('./attributes');
@@ -30,6 +31,8 @@ function supplyDefaults(traceIn, traceOut, defaultColor, layout) {
         return;
     }
 
+    handlePeriodDefaults(traceIn, traceOut, layout, coerce);
+
     coerce('orientation', (traceOut.x && !traceOut.y) ? 'h' : 'v');
     coerce('base');
     coerce('offset');

src/traces/box/attributes.js

@@ -76,6 +76,11 @@ module.exports = {
         ].join(' ')
     },
 
+    xperiod: scatterAttrs.xperiod,
+    yperiod: scatterAttrs.yperiod,
+    xperiodalignment: scatterAttrs.xperiodalignment,
+    yperiodalignment: scatterAttrs.yperiodalignment,
+
     name: {
         valType: 'string',
         role: 'info',

src/traces/box/defaults.js

@@ -11,6 +11,7 @@
 var Lib = require('../../lib');
 var Registry = require('../../registry');
 var Color = require('../../components/color');
+var handlePeriodDefaults = require('../scatter/period_defaults');
 var handleGroupingDefaults = require('../bar/defaults').handleGroupingDefaults;
 var autoType = require('../../plots/cartesian/axis_autotype');
 var attributes = require('./attributes');
@@ -23,6 +24,8 @@ function supplyDefaults(traceIn, traceOut, defaultColor, layout) {
     handleSampleDefaults(traceIn, traceOut, coerce, layout);
     if(traceOut.visible === false) return;
 
+    handlePeriodDefaults(traceIn, traceOut, layout, coerce);
+
     var hasPreCompStats = traceOut._hasPreCompStats;
 
     if(hasPreCompStats) {

src/traces/candlestick/attributes.js

@@ -27,6 +27,9 @@ function directionAttrs(lineColorDefault) {
 }
 
 module.exports = {
+    xperiod: OHLCattrs.xperiod,
+    xperiodalignment: OHLCattrs.xperiodalignment,
+
     x: OHLCattrs.x,
     open: OHLCattrs.open,
     high: OHLCattrs.high,

src/traces/candlestick/defaults.js

@@ -12,6 +12,7 @@
 var Lib = require('../../lib');
 var Color = require('../../components/color');
 var handleOHLC = require('../ohlc/ohlc_defaults');
+var handlePeriodDefaults = require('../scatter/period_defaults');
 var attributes = require('./attributes');
 
 module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout) {
@@ -25,6 +26,8 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
         return;
     }
 
+    handlePeriodDefaults(traceIn, traceOut, layout, coerce, {x: true});
+
     coerce('line.width');
 
     handleDirection(traceIn, traceOut, coerce, 'increasing');

src/traces/contour/attributes.js

@@ -31,6 +31,12 @@ module.exports = extendFlat({
     y: heatmapAttrs.y,
     y0: heatmapAttrs.y0,
     dy: heatmapAttrs.dy,
+
+    xperiod: heatmapAttrs.xperiod,
+    yperiod: heatmapAttrs.yperiod,
+    xperiodalignment: heatmapAttrs.xperiodalignment,
+    yperiodalignment: heatmapAttrs.yperiodalignment,
+
     text: heatmapAttrs.text,
     hovertext: heatmapAttrs.hovertext,
     transpose: heatmapAttrs.transpose,