get rid of '2012-01-22 12h' tick format and smarter date suffix handling

Author: alexcjohnson

src/plots/cartesian/axes.js

@@ -658,9 +658,18 @@ axes.calcTicks = function calcTicks(ax) {
     // show the exponent only on the last one
     ax._tmax = vals[vals.length - 1];
 
+    // for showing date suffixes: ax._prevSuffix holds what we showed most
+    // recently. Start with it cleared and mark that we're in calcTicks (ie
+    // calculating a whole string of these so we should care what the previous
+    // suffix was!)
+    ax._prevSuffix = '';
+    ax._inCalcTicks = true;
+
     var ticksOut = new Array(vals.length);
     for(var i = 0; i < vals.length; i++) ticksOut[i] = axes.tickText(ax, vals[i]);
 
+    ax._inCalcTicks = false;
+
     return ticksOut;
 };
 
@@ -815,6 +824,11 @@ axes.autoTicks = function(ax, roughDTick) {
     }
 };
 
+var ONEDAY = 86400000,
+    ONEHOUR = 3600000,
+    ONEMIN = 60000,
+    ONESEC = 1000;
+
 // after dtick is already known, find tickround = precision
 // to display in tick labels
 //   for numeric ticks, integer # digits after . to round to
@@ -831,33 +845,43 @@ function autoTickRound(ax) {
     if(ax.type === 'category') {
         ax._tickround = null;
     }
+    if(ax.type === 'date') {
+        // If tick0 is unusual, give tickround a bit more information
+        // not necessarily *all* the information in tick0 though, if it's really odd
+        // minimal string length for tick0: 'd' is 10, 'M' is 16, 'S' is 19
+        // take off a leading minus (year < 0 so length is consistent)
+        var tick0str = Lib.ms2DateTime(Lib.dateTime2ms(ax.tick0)).replace(/^-/, ''),
+            tick0len = tick0str.length;
+
+        if(String(dtick).charAt(0) === 'M') {
+            // any tick0 more specific than a year: alway show the full date
+            if(tick0len > 10 || tick0str.substr(5) !== '01-01') ax._tickround = 'd';
+            // show the month unless ticks are full multiples of a year
+            else ax._tickround = (+(dtick.substr(1)) % 12 === 0) ? 'y' : 'm';
+        }
+        else if((dtick >= ONEDAY && tick0len <= 10) || (dtick >= ONEDAY * 15)) ax._tickround = 'd';
+        else if((dtick >= ONEMIN && tick0len <= 16) || (dtick >= ONEHOUR)) ax._tickround = 'M';
+        else if((dtick >= ONESEC && tick0len <= 19) || (dtick >= ONEMIN)) ax._tickround = 'S';
+        else ax._tickround = Math.max(3 - Math.round(Math.log(dtick / 2) / Math.LN10), tick0len - 20);
+    }
     else if(isNumeric(dtick) || dtick.charAt(0) === 'L') {
-        if(ax.type === 'date') {
-            if(dtick >= 86400000) ax._tickround = 'd';
-            else if(dtick >= 3600000) ax._tickround = 'H';
-            else if(dtick >= 60000) ax._tickround = 'M';
-            else if(dtick >= 1000) ax._tickround = 'S';
-            else ax._tickround = 3 - Math.round(Math.log(dtick / 2) / Math.LN10);
-        }
-        else {
-            // linear or log
-            var rng = ax.range.map(ax.r2d || Number);
-            if(!isNumeric(dtick)) dtick = Number(dtick.substr(1));
-            // 2 digits past largest digit of dtick
-            ax._tickround = 2 - Math.floor(Math.log(dtick) / Math.LN10 + 0.01);
-
-            var maxend = Math.max(Math.abs(rng[0]), Math.abs(rng[1]));
-
-            var rangeexp = Math.floor(Math.log(maxend) / Math.LN10 + 0.01);
-            if(Math.abs(rangeexp) > 3) {
-                if(ax.exponentformat === 'SI' || ax.exponentformat === 'B') {
-                    ax._tickexponent = 3 * Math.round((rangeexp - 1) / 3);
-                }
-                else ax._tickexponent = rangeexp;
+        // linear or log (except D1, D2)
+        var rng = ax.range.map(ax.r2d || Number);
+        if(!isNumeric(dtick)) dtick = Number(dtick.substr(1));
+        // 2 digits past largest digit of dtick
+        ax._tickround = 2 - Math.floor(Math.log(dtick) / Math.LN10 + 0.01);
+
+        var maxend = Math.max(Math.abs(rng[0]), Math.abs(rng[1]));
+
+        var rangeexp = Math.floor(Math.log(maxend) / Math.LN10 + 0.01);
+        if(Math.abs(rangeexp) > 3) {
+            if(ax.exponentformat === 'SI' || ax.exponentformat === 'B') {
+                ax._tickexponent = 3 * Math.round((rangeexp - 1) / 3);
             }
+            else ax._tickexponent = rangeexp;
         }
     }
-    else if(dtick.charAt(0) === 'M') ax._tickround = (dtick.length === 2) ? 'm' : 'y';
+    // D1 or D2 (log)
     else ax._tickround = null;
 }
 
@@ -961,7 +985,7 @@ axes.tickFirst = function(ax) {
 var yearFormat = d3.time.format('%Y'),
     monthFormat = d3.time.format('%b %Y'),
     dayFormat = d3.time.format('%b %-d'),
-    hourFormat = d3.time.format('%b %-d %Hh'),
+    yearMonthDayFormat = d3.time.format('%b %-d, %Y'),
     minuteFormat = d3.time.format('%H:%M'),
     secondFormat = d3.time.format(':%S');
 
@@ -1053,10 +1077,12 @@ function tickTextObj(ax, x, text) {
 function formatDate(ax, out, hover, extraPrecision) {
     var x = out.x,
         tr = ax._tickround,
+        trOriginal = tr,
         d = new Date(x),
         // suffix completes the full date info, to be included
-        // with only the first tick
-        suffix = '',
+        // with only the first tick or if any info before what's
+        // shown has changed
+        suffix,
         tt;
     if(hover && ax.hoverformat) {
         tt = modDateFormat(ax.hoverformat, x);
@@ -1069,21 +1095,18 @@ function formatDate(ax, out, hover, extraPrecision) {
     else {
         if(extraPrecision) {
             if(isNumeric(tr)) tr += 2;
-            else tr = {y: 'm', m: 'd', d: 'H', H: 'M', M: 'S', S: 2}[tr];
+            else tr = {y: 'm', m: 'd', d: 'M', M: 'S', S: 2}[tr];
         }
         if(tr === 'y') tt = yearFormat(d);
         else if(tr === 'm') tt = monthFormat(d);
         else {
-            if(x === ax._tmin && !hover) {
-                suffix = '<br>' + yearFormat(d);
-            }
+            if(tr === 'd') {
+                if(!hover) suffix = '<br>' + yearFormat(d);
 
-            if(tr === 'd') tt = dayFormat(d);
-            else if(tr === 'H') tt = hourFormat(d);
+                tt = dayFormat(d);
+            }
             else {
-                if(x === ax._tmin && !hover) {
-                    suffix = '<br>' + dayFormat(d) + ', ' + yearFormat(d);
-                }
+                if(!hover) suffix = '<br>' + yearMonthDayFormat(d);
 
                 tt = minuteFormat(d);
                 if(tr !== 'M') {
@@ -1093,10 +1116,19 @@ function formatDate(ax, out, hover, extraPrecision) {
                             .substr(1);
                     }
                 }
+                else if(trOriginal === 'd') {
+                    // for hover on axes with day ticks, minuteFormat (which
+                    // only includes %H:%M) isn't enough, you want the date too
+                    tt = dayFormat(d) + ' ' + tt;
+                }
             }
         }
     }
-    out.text = tt + suffix;
+    if(suffix && (!ax._inCalcTicks || (suffix !== ax._prevSuffix))) {
+        tt += suffix;
+        ax._prevSuffix = suffix;
+    }
+    out.text = tt;
 }
 
 function formatLog(ax, out, hover, extraPrecision, hideexp) {

test/jasmine/tests/axes_test.js

@@ -1392,4 +1392,88 @@ describe('Test axes', function() {
             expect(ax._max).toEqual([{val: 6, pad: 15}]);
         });
     });
+
+    describe('calcTicks', function() {
+        function mockCalc(ax) {
+            Axes.setConvert(ax);
+            ax.tickfont = {};
+            return Axes.calcTicks(ax).map(function(v) { return v.text; });
+        }
+
+        it('provides a new date suffix whenever the suffix changes', function() {
+            var textOut = mockCalc({
+                type: 'date',
+                tickmode: 'linear',
+                tick0: '2000-01-01',
+                dtick: 14 * 24 * 3600 * 1000, // 14 days
+                range: ['1999-12-01', '2000-02-15']
+            });
+
+            var expectedText = [
+                'Dec 4<br>1999',
+                'Dec 18',
+                'Jan 1<br>2000',
+                'Jan 15',
+                'Jan 29',
+                'Feb 12'
+            ];
+            expect(textOut).toEqual(expectedText);
+
+            textOut = mockCalc({
+                type: 'date',
+                tickmode: 'linear',
+                tick0: '2000-01-01',
+                dtick: 12 * 3600 * 1000, // 12 hours
+                range: ['2000-01-03 11:00', '2000-01-06']
+            });
+
+            expectedText = [
+                '12:00<br>Jan 3, 2000',
+                '00:00<br>Jan 4, 2000',
+                '12:00',
+                '00:00<br>Jan 5, 2000',
+                '12:00',
+                '00:00<br>Jan 6, 2000'
+            ];
+            expect(textOut).toEqual(expectedText);
+
+            textOut = mockCalc({
+                type: 'date',
+                tickmode: 'linear',
+                tick0: '2000-01-01',
+                dtick: 1000, // 1 sec
+                range: ['2000-02-03 23:59:57', '2000-02-04 00:00:02']
+            });
+
+            expectedText = [
+                '23:59:57<br>Feb 3, 2000',
+                '23:59:58',
+                '23:59:59',
+                '00:00:00<br>Feb 4, 2000',
+                '00:00:01',
+                '00:00:02'
+            ];
+            expect(textOut).toEqual(expectedText);
+        });
+
+        it('should give dates extra precision if tick0 is weird', function() {
+            var textOut = mockCalc({
+                type: 'date',
+                tickmode: 'linear',
+                tick0: '2000-01-01 00:05',
+                dtick: 14 * 24 * 3600 * 1000, // 14 days
+                range: ['1999-12-01', '2000-02-15']
+            });
+
+            var expectedText = [
+                '00:05<br>Dec 4, 1999',
+                '00:05<br>Dec 18, 1999',
+                '00:05<br>Jan 1, 2000',
+                '00:05<br>Jan 15, 2000',
+                '00:05<br>Jan 29, 2000',
+                '00:05<br>Feb 12, 2000'
+            ];
+            expect(textOut).toEqual(expectedText);
+        });
+    });
 });