compute the exact number of days for mothly periods

Author: archmoj

src/plots/cartesian/align_period.js

@@ -9,29 +9,61 @@
 'use strict';
 
 var isNumeric = require('fast-isnumeric');
-var ONEAVGMONTH = require('../../constants/numerical').ONEAVGMONTH;
+var ms2DateTime = require('../../lib').ms2DateTime;
+var ONEDAY = require('../../constants/numerical').ONEDAY;
 
 var M = {};
 for(var n = 1; n <= 12; n++) {
-    M['M' + n] = n * ONEAVGMONTH;
+    M['M' + n] = n;
 }
 
-module.exports = function alignPeriod(trace, axLetter, vals) {
+module.exports = function alignPeriod(trace, ax, axLetter, vals) {
     var alignment = trace[axLetter + 'periodalignment'];
     if(!alignment || alignment === 'start') return vals;
 
+    var dynamic = false;
     var period = trace[axLetter + 'period'];
     if(isNumeric(period)) {
-        period = +period;
+        period = +period; // milliseconds
     } else if(typeof period === 'string') {
-        period = M[period];
+        period = M[period]; // months
+        dynamic = true;
     }
 
     if(period > 0) {
-        var delta = (alignment === 'end' ? 1 : 0.5) * period;
+        var ratio = (alignment === 'end') ? 1 : 0.5;
+
         var len = vals.length;
         for(var i = 0; i < len; i++) {
-            vals[i] += delta;
+            var delta;
+
+            if(dynamic) {
+                var dateStr = ms2DateTime(vals[i], 0, ax.calendar);
+                var d = new Date(dateStr);
+                var year = d.getFullYear();
+                var month = d.getMonth();
+
+                var totalDaysInMonths = 0;
+                for(var k = 0; k < period; k++) {
+                    month += 1;
+                    if(month > 12) {
+                        month = 1;
+                        year++;
+                    }
+
+                    var monthDays = (
+                        new Date(year, month, 0)
+                    ).getDate();
+
+                    totalDaysInMonths += monthDays;
+                }
+
+                delta = ONEDAY * totalDaysInMonths; // convert to ms
+            } else {
+                delta = period;
+            }
+
+            vals[i] += ratio * delta;
         }
     }
     return vals;

src/plots/cartesian/set_convert.js

@@ -849,7 +849,7 @@ module.exports = function setConvert(ax, fullLayout) {
         }
 
         if(axType === 'date') {
-            arrayOut = alignPeriod(trace, axLetter, arrayOut);
+            arrayOut = alignPeriod(trace, ax, axLetter, arrayOut);
         }
 
         return arrayOut;

src/traces/scatter/attributes.js

@@ -23,7 +23,7 @@ var extendFlat = require('../../lib/extend').extendFlat;
 function axisPeriod(axis) {
     return {
         valType: 'any',
-        dflt: ONEAVGYEAR,
+        dflt: ONEAVGYEAR, // maybe better to use 12M which is more accurate here?
         role: 'info',
         editType: 'calc',
         description: [

test/image/baselines/period_positioning3.png

@@ -0,0 +1,175 @@
+{
+    "data": [
+        {
+            "xaxis": "x",
+            "yaxis": "y",
+            "xperiod": "M1",
+            "name": "bar (M1)",
+            "type": "bar",
+            "y": [1, 2, 3, 4],
+            "x": ["2001-01-01", "2001-02-01", "2001-03-01", "2001-04-01"],
+            "xperiodalignment": "middle"
+        },
+        {
+            "xaxis": "x2",
+            "yaxis": "y2",
+            "xperiod": "M2",
+            "name": "bar (M2)",
+            "type": "bar",
+            "y": [1, 2, 3, 4],
+            "x": ["2001-01-01", "2001-03-01", "2001-05-01", "2001-07-01"],
+            "xperiodalignment": "middle"
+        },
+
+        {
+            "xaxis": "x3",
+            "yaxis": "y3",
+            "xperiod": "M3",
+            "name": "bar (M3)",
+            "type": "bar",
+            "y": [1, 2, 3, 4],
+            "x": ["2001-01-01", "2001-04-01", "2001-07-01", "2001-10-01"],
+            "xperiodalignment": "middle"
+        },
+        {
+            "xaxis": "x4",
+            "yaxis": "y4",
+            "xperiod": "M6",
+            "name": "bar (M6)",
+            "type": "bar",
+            "y": [1, 2, 3, 4],
+            "x": ["2001-01-01", "2001-07-01", "2002-01-01", "2002-07-01"],
+            "xperiodalignment": "middle"
+        },
+        {
+            "xaxis": "x5",
+            "yaxis": "y5",
+            "xperiod": "M12",
+            "name": "bar (M12)",
+            "type": "bar",
+            "y": [1, 2, 3, 4],
+            "x": ["2001-01-01", "2002-01-01", "2003-01-01", "2004-01-01"],
+            "xperiodalignment": "middle"
+        },
+        {
+            "xaxis": "x6",
+            "yaxis": "y6",
+            "xperiod": 31557600000,
+            "name": "bar (AVG-YEAR)",
+            "type": "bar",
+            "y": [1, 2, 3, 4],
+            "x": ["2001-01-01", "2002-01-01", "2003-01-01", "2004-01-01"],
+            "xperiodalignment": "middle"
+        }
+    ],
+    "layout": {
+        "width": 1000,
+        "height": 500,
+        "showlegend": true,
+        "hovermode": "closest",
+
+        "xaxis": {
+            "ticklabelmode": "period",
+            "tickcolor": "black",
+            "domain": [
+                0,
+                0.3
+            ]
+        },
+        "xaxis2": {
+            "dtick": "M2",
+            "tickcolor": "black",
+            "anchor": "y2",
+            "domain": [
+                0,
+                0.3
+            ]
+        },
+        "xaxis3": {
+            "dtick": "M3",
+            "ticklabelmode": "period",
+            "tickcolor": "black",
+            "anchor": "y3",
+            "domain": [
+                0.35,
+                0.65
+            ]
+        },
+        "xaxis4": {
+            "dtick": "M6",
+            "ticklabelmode": "period",
+            "tickcolor": "black",
+            "anchor": "y4",
+            "domain": [
+                0.35,
+                0.65
+            ]
+        },
+        "xaxis5": {
+            "ticklabelmode": "period",
+            "tickcolor": "black",
+            "anchor": "y5",
+            "domain": [
+                0.7,
+                1
+            ]
+        },
+        "xaxis6": {
+            "ticklabelmode": "period",
+            "tickcolor": "black",
+            "anchor": "y6",
+            "domain": [
+                0.7,
+                1
+            ]
+        },
+
+        "yaxis": {
+            "tickcolor": "black",
+            "domain": [
+                0,
+                0.45
+            ]
+        },
+        "yaxis2": {
+            "tickcolor": "black",
+            "anchor": "x2",
+            "domain": [
+                0.55,
+                1
+            ]
+        },
+        "yaxis3": {
+            "tickcolor": "black",
+            "anchor": "x3",
+            "domain": [
+                0,
+                0.45
+            ]
+        },
+        "yaxis4": {
+            "tickcolor": "black",
+            "anchor": "x4",
+            "domain": [
+                0.55,
+                1
+            ]
+        },
+        "yaxis5": {
+            "tickcolor": "black",
+            "anchor": "x5",
+            "domain": [
+                0,
+                0.45
+            ]
+        },
+        "yaxis6": {
+            "tickcolor": "black",
+            "anchor": "x6",
+            "domain": [
+                0.55,
+                1
+            ]
+        }
+    }
+}