use UTC milliseconds for internal representation of dates

We still interpret JS date objects according to the date and hour
they have in the local timezone, and for backward compatibility
we shift milliseconds (in ranges etc) by the local/UTC offset.

Author: alexcjohnson

src/lib/dates.js

@@ -87,7 +87,9 @@ var MIN_MS, MAX_MS;
 exports.dateTime2ms = function(s) {
     // first check if s is a date object
     if(exports.isJSDate(s)) {
-        s = Number(s);
+        // Convert to the UTC milliseconds that give the same
+        // hours as this date has in the local timezone
+        s = Number(s) - s.getTimezoneOffset() * ONEMIN;
         if(s >= MIN_MS && s <= MAX_MS) return s;
         return BADNUM;
     }
@@ -109,14 +111,10 @@ exports.dateTime2ms = function(s) {
 
     // javascript takes new Date(0..99,m,d) to mean 1900-1999, so
     // to support years 0-99 we need to use setFullYear explicitly
-    var date = new Date(2000, m - 1, d, H, M);
-    date.setFullYear(y);
+    var date = new Date(Date.UTC(2000, m - 1, d, H, M));
+    date.setUTCFullYear(y);
 
-    if(date.getDate() !== d) return BADNUM;
-
-    // does that hour exist in this day? (Daylight time!)
-    // (TODO: remove this check when we move to UTC)
-    if(date.getHours() !== H) return BADNUM;
+    if(date.getUTCDate() !== d) return BADNUM;
 
     return date.getTime() + S * ONESEC;
 };
@@ -150,16 +148,41 @@ exports.ms2DateTime = function(ms, r) {
 
     if(!r) r = 0;
 
-    var d = new Date(Math.floor(ms)),
-        dateStr = d3.time.format('%Y-%m-%d')(d),
+    var msecTenths = Math.round(((ms % 1) + 1) * 10) % 10,
+        d = new Date(Math.round(ms - msecTenths / 10)),
+        dateStr = d3.time.format.utc('%Y-%m-%d')(d),
         // <90 days: add hours and minutes - never *only* add hours
-        h = (r < NINETYDAYS) ? d.getHours() : 0,
-        m = (r < NINETYDAYS) ? d.getMinutes() : 0,
+        h = (r < NINETYDAYS) ? d.getUTCHours() : 0,
+        m = (r < NINETYDAYS) ? d.getUTCMinutes() : 0,
         // <3 hours: add seconds
-        s = (r < THREEHOURS) ? d.getSeconds() : 0,
+        s = (r < THREEHOURS) ? d.getUTCSeconds() : 0,
         // <5 minutes: add ms (plus one extra digit, this is msec*10)
-        msec10 = (r < FIVEMIN) ? Math.round((d.getMilliseconds() + (((ms % 1) + 1) % 1)) * 10) : 0;
+        msec10 = (r < FIVEMIN) ? d.getUTCMilliseconds() * 10 + msecTenths : 0;
+
+    return includeTime(dateStr, h, m, s, msec10);
+};
+
+// For converting old-style milliseconds to date strings,
+// we use the local timezone rather than UTC like we use
+// everywhere else, both for backward compatibility and
+// because that's how people mostly use javasript date objects.
+// Clip one extra day off our date range though so we can't get
+// thrown beyond the range by the timezone shift.
+exports.ms2DateTimeLocal = function(ms) {
+    if(!(ms >= MIN_MS + ONEDAY && ms <= MAX_MS - ONEDAY)) return BADNUM;
+
+    var msecTenths = Math.round(((ms % 1) + 1) * 10) % 10,
+        d = new Date(Math.round(ms - msecTenths / 10)),
+        dateStr = d3.time.format('%Y-%m-%d')(d),
+        h = d.getHours(),
+        m = d.getMinutes(),
+        s = d.getSeconds(),
+        msec10 = d.getUTCMilliseconds() * 10 + msecTenths;
+
+    return includeTime(dateStr, h, m, s, msec10);
+};
 
+function includeTime(dateStr, h, m, s, msec10) {
     // include each part that has nonzero data in or after it
     if(h || m || s || msec10) {
         dateStr += ' ' + lpad(h, 2) + ':' + lpad(m, 2);
@@ -176,7 +199,7 @@ exports.ms2DateTime = function(ms, r) {
         }
     }
     return dateStr;
-};
+}
 
 // normalize date format to date string, in case it starts as
 // a Date object or milliseconds
@@ -186,7 +209,7 @@ exports.cleanDate = function(v, dflt) {
         // NOTE: if someone puts in a year as a number rather than a string,
         // this will mistakenly convert it thinking it's milliseconds from 1970
         // that is: '2012' -> Jan. 1, 2012, but 2012 -> 2012 epoch milliseconds
-        v = exports.ms2DateTime(+v);
+        v = exports.ms2DateTimeLocal(+v);
         if(!v && dflt !== undefined) return dflt;
     }
     else if(!exports.isDateTime(v)) {

src/plots/cartesian/axes.js

@@ -917,7 +917,7 @@ axes.tickIncrement = function(x, dtick, axrev) {
         var y = new Date(x);
         // is this browser consistent? setMonth edits a date but
         // returns that date's milliseconds
-        return y.setMonth(y.getMonth() + dtSigned);
+        return y.setMonth(y.getUTCMonth() + dtSigned);
     }
 
     // Log scales: Linear, Digits
@@ -968,9 +968,9 @@ axes.tickFirst = function(ax) {
     if(tType === 'M') {
         t0 = new Date(tick0);
         r0 = new Date(r0);
-        mdif = (r0.getFullYear() - t0.getFullYear()) * 12 +
-            r0.getMonth() - t0.getMonth();
-        t1 = t0.setMonth(t0.getMonth() +
+        mdif = (r0.getUTCFullYear() - t0.getUTCFullYear()) * 12 +
+            r0.getUTCMonth() - t0.getUTCMonth();
+        t1 = t0.setMonth(t0.getUTCMonth() +
             (Math.round(mdif / dtNum) + (axrev ? 1 : -1)) * dtNum);
 
         while(axrev ? t1 > r0 : t1 < r0) {
@@ -994,12 +994,13 @@ axes.tickFirst = function(ax) {
     else throw 'unrecognized dtick ' + String(dtick);
 };
 
-var yearFormat = d3.time.format('%Y'),
-    monthFormat = d3.time.format('%b %Y'),
-    dayFormat = d3.time.format('%b %-d'),
-    yearMonthDayFormat = d3.time.format('%b %-d, %Y'),
-    minuteFormat = d3.time.format('%H:%M'),
-    secondFormat = d3.time.format(':%S');
+var utcFormat = d3.time.format.utc,
+    yearFormat = utcFormat('%Y'),
+    monthFormat = utcFormat('%b %Y'),
+    dayFormat = utcFormat('%b %-d'),
+    yearMonthDayFormat = utcFormat('%b %-d, %Y'),
+    minuteFormat = utcFormat('%H:%M'),
+    secondFormat = utcFormat(':%S');
 
 // add one item to d3's vocabulary:
 // %{n}f where n is the max number of digits
@@ -1012,10 +1013,10 @@ function modDateFormat(fmt, x) {
         var digits = Math.min(+fm[1] || 6, 6),
             fracSecs = String((x / 1000 % 1) + 2.0000005)
                 .substr(2, digits).replace(/0+$/, '') || '0';
-        return d3.time.format(fmt.replace(fracMatch, fracSecs))(d);
+        return utcFormat(fmt.replace(fracMatch, fracSecs))(d);
     }
     else {
-        return d3.time.format(fmt)(d);
+        return utcFormat(fmt)(d);
     }
 }
 

src/plots/cartesian/dragbox.js

@@ -298,16 +298,18 @@ module.exports = function dragBox(gd, plotinfo, x, y, w, h, ns, ew) {
     function zoomAxRanges(axList, r0Fraction, r1Fraction) {
         var i,
             axi,
-            axRangeLinear;
+            axRangeLinear0,
+            axRangeLinearSpan;
 
         for(i = 0; i < axList.length; i++) {
             axi = axList[i];
             if(axi.fixedrange) continue;
 
-            axRangeLinear = axi.range.map(axi.r2l);
+            axRangeLinear0 = axi._rl[0];
+            axRangeLinearSpan = axi._rl[1] - axRangeLinear0;
             axi.range = [
-                axi.l2r(axRangeLinear[0] + (axRangeLinear[1] - axRangeLinear[0]) * r0Fraction),
-                axi.l2r(axRangeLinear[0] + (axRangeLinear[1] - axRangeLinear[0]) * r1Fraction)
+                axi.l2r(axRangeLinear0 + axRangeLinearSpan * r0Fraction),
+                axi.l2r(axRangeLinear0 + axRangeLinearSpan * r1Fraction)
             ];
         }
     }

src/plots/plots.js

@@ -1390,7 +1390,7 @@ plots.graphJson = function(gd, dataonly, mode, output, useDefaults) {
 
         // convert native dates to date strings...
         // mostly for external users exporting to plotly
-        if(Lib.isJSDate(d)) return Lib.ms2DateTime(+d);
+        if(Lib.isJSDate(d)) return Lib.ms2DateTimeLocal(+d);
 
         return d;
     }

test/jasmine/tests/lib_date_test.js

@@ -18,6 +18,7 @@ describe('dates', function() {
 
     describe('dateTime2ms', function() {
         it('should accept valid date strings', function() {
+            var tzOffset;
 
             [
                 ['2016', new Date(2016, 0, 1)],
@@ -34,10 +35,11 @@ describe('dates', function() {
                 // first century, also allow month, day, and hour to be 1-digit, and not all
                 // three digits of milliseconds
                 ['0013-1-1 1:00:00.6', d1c],
-                // we support more than 4 digits too, though Date objects don't. More than that
+                // we support tenths of msec too, though Date objects don't. Smaller than that
                 // and we hit the precision limit of js numbers unless we're close to the epoch.
                 // It won't break though.
                 ['0013-1-1 1:00:00.6001', +d1c + 0.1],
+                ['0013-1-1 1:00:00.60011111111', +d1c + 0.11111111],
 
                 // 2-digit years get mapped to now-70 -> now+29
                 [thisYear_2 + '-05', new Date(thisYear, 4, 1)],
@@ -50,11 +52,16 @@ describe('dates', function() {
                 ['2014-03-04 08:15:34+1200', new Date(2014, 2, 4, 8, 15, 34)],
                 ['2014-03-04 08:15:34.567-05:45', new Date(2014, 2, 4, 8, 15, 34, 567)],
             ].forEach(function(v) {
-                expect(Lib.dateTime2ms(v[0])).toBe(+v[1], v[0]);
+                // just for sub-millisecond precision tests, use timezoneoffset
+                // from the previous date object
+                if(v[1].getTimezoneOffset) tzOffset = v[1].getTimezoneOffset();
+
+                var expected = +v[1] - (tzOffset * 60000);
+                expect(Lib.dateTime2ms(v[0])).toBe(expected, v[0]);
 
                 // ISO-8601: all the same stuff with t or T as the separator
-                expect(Lib.dateTime2ms(v[0].trim().replace(' ', 't'))).toBe(+v[1], v[0].trim().replace(' ', 't'));
-                expect(Lib.dateTime2ms('\r\n\t ' + v[0].trim().replace(' ', 'T') + '\r\n\t ')).toBe(+v[1], v[0].trim().replace(' ', 'T'));
+                expect(Lib.dateTime2ms(v[0].trim().replace(' ', 't'))).toBe(expected, v[0].trim().replace(' ', 't'));
+                expect(Lib.dateTime2ms('\r\n\t ' + v[0].trim().replace(' ', 'T') + '\r\n\t ')).toBe(expected, v[0].trim().replace(' ', 'T'));
             });
         });
 
@@ -69,7 +76,7 @@ describe('dates', function() {
             [
                 1000, 9999, -1000, -9999
             ].forEach(function(v) {
-                expect(Lib.dateTime2ms(v)).toBe(+(new Date(v, 0, 1)), v);
+                expect(Lib.dateTime2ms(v)).toBe(Date.UTC(v, 0, 1), v);
             });
 
             [
@@ -78,7 +85,7 @@ describe('dates', function() {
                 [nowMinus70_2, nowMinus70],
                 [99, 1999]
             ].forEach(function(v) {
-                expect(Lib.dateTime2ms(v[0])).toBe(+(new Date(v[1], 0, 1)), v[0]);
+                expect(Lib.dateTime2ms(v[0])).toBe(Date.UTC(v[1], 0, 1), v[0]);
             });
         });
 
@@ -93,7 +100,7 @@ describe('dates', function() {
                 d1c,
                 new Date(2015, 8, 7, 23, 34, 45, 567)
             ].forEach(function(v) {
-                expect(Lib.dateTime2ms(v)).toBe(+v);
+                expect(Lib.dateTime2ms(v)).toBe(+v - v.getTimezoneOffset() * 60000);
             });
         });
 
@@ -124,6 +131,30 @@ describe('dates', function() {
                 expect(Lib.dateTime2ms(v)).toBeUndefined(v);
             });
         });
+
+        var JULY1MS = 181 * 24 * 3600 * 1000;
+
+        it('should use UTC with no timezone offset or daylight saving time', function() {
+            expect(Lib.dateTime2ms('1970-01-01')).toBe(0);
+
+            // 181 days (and no DST hours) between jan 1 and july 1 in a non-leap-year
+            // 31 + 28 + 31 + 30 + 31 + 30
+            expect(Lib.dateTime2ms('1970-07-01')).toBe(JULY1MS);
+        });
+
+        it('should interpret JS dates by local time, not by its getTime()', function() {
+            // not really part of the test, just to make sure the test is meaningful
+            // the test should NOT be run in a UTC environment
+            expect([
+                Number(new Date(1970, 0, 1)),
+                Number(new Date(1970, 6, 1))
+            ]).not.toEqual([0, JULY1MS]);
+
+            // now repeat the previous test and show that we throw away
+            // timezone info from js dates
+            expect(Lib.dateTime2ms(new Date(1970, 0, 1))).toBe(0);
+            expect(Lib.dateTime2ms(new Date(1970, 6, 1))).toBe(JULY1MS);
+        });
     });
 
     describe('ms2DateTime', function() {
@@ -159,8 +190,8 @@ describe('dates', function() {
 
         it('should not accept Date objects beyond our limits or other objects', function() {
             [
-                +(new Date(10000, 0, 1)),
-                +(new Date(-10000, 11, 31, 23, 59, 59, 999)),
+                Date.UTC(10000, 0, 1),
+                Date.UTC(-10000, 11, 31, 23, 59, 59, 999),
                 '',
                 '2016-01-01',
                 '0',
@@ -191,19 +222,20 @@ describe('dates', function() {
     });
 
     describe('cleanDate', function() {
-        it('should convert any number or js Date within range to a date string', function() {
+        it('should convert numbers or js Dates to strings based on local TZ', function() {
             [
                 new Date(0),
                 new Date(2000),
                 new Date(2000, 0, 1),
                 new Date(),
-                new Date(-9999, 0, 1),
-                new Date(9999, 11, 31, 23, 59, 59, 999)
+                new Date(-9999, 0, 3), // we lose one day of range +/- tzoffset this way
+                new Date(9999, 11, 29, 23, 59, 59, 999)
             ].forEach(function(v) {
-                expect(typeof Lib.ms2DateTime(+v)).toBe('string');
-                expect(Lib.cleanDate(v)).toBe(Lib.ms2DateTime(+v));
-                expect(Lib.cleanDate(+v)).toBe(Lib.ms2DateTime(+v));
-                expect(Lib.cleanDate(v, '2000-01-01')).toBe(Lib.ms2DateTime(+v));
+                var expected = Lib.ms2DateTime(Lib.dateTime2ms(v));
+                expect(typeof expected).toBe('string');
+                expect(Lib.cleanDate(v)).toBe(expected);
+                expect(Lib.cleanDate(+v)).toBe(expected);
+                expect(Lib.cleanDate(v, '2000-01-01')).toBe(expected);
             });
         });