Dygraph.dateString_: shows milliseconds if any. (#774)

* [utils] dateString_ display Milliseconds if any * [utils] fix dateAxisLabelFormatter milliseconds * [util] dateString_: compute ms in frac * [utils] clean hmsString_ format * [utils] add milliseconds padding in hmsString_ * [develop] add note on npm install * [tests] add labelsDateMilliseconds test * [utils] add millis in dateAxisLabelFormatter * [tests] fix requested changes in labelsDateMillis * [auto_tests] add date_formats testMillisecondsDate
danvk · Sep 15, 2016 · 2d0fdf6 · 2d0fdf6
1 parent 8cc4108
commit 2d0fdf6
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 5 deletions.
diff --git a/DEVELOP.md b/DEVELOP.md
@@ -6,6 +6,10 @@ This is a step-by-step guide explaining how to do it.
 
 ### How-to
 
+To install dependencies, run
+
+    npm install
+
 To build dygraphs, run
 
     npm run build

diff --git a/auto_tests/tests/date_formats.js b/auto_tests/tests/date_formats.js
@@ -36,4 +36,12 @@ it('testHyphenatedDate', function() {
   assert.equal(Date.UTC(2000, 1, 2), utils.dateParser(str));
 });
 
+it('testMillisecondsDate', function() {
+  // Format: YYYY-MM-DD HH:MM:SS.MS
+
+  // Midnight February 2, 2000 14:25:42.123 UTC
+  var ts = Date.UTC(2000, 1, 2, 14, 25, 42, 123);
+  assert.equal("2000/02/02 14:25:42.123", utils.dateString_(ts, true));
+});
+
 });
diff --git a/src/dygraph-utils.js b/src/dygraph-utils.js
@@ -362,10 +362,14 @@ export var DateAccessorsUTC = {
  * @return {string} A time of the form "HH:MM" or "HH:MM:SS"
  * @private
  */
-export function hmsString_(hh, mm, ss) {
+export function hmsString_(hh, mm, ss, ms) {
   var ret = zeropad(hh) + ":" + zeropad(mm);
   if (ss) {
     ret += ":" + zeropad(ss);
+    if (ms) {
+      var str = "" + ms;
+      ret += "." + ('000'+str).substring(str.length);
+    }
   }
   return ret;
 };
@@ -387,16 +391,17 @@ export function dateString_(time, utc) {
   var hh = accessors.getHours(date);
   var mm = accessors.getMinutes(date);
   var ss = accessors.getSeconds(date);
+  var ms = accessors.getMilliseconds(date);
   // Get a year string:
   var year = "" + y;
   // Get a 0 padded month string
   var month = zeropad(m + 1);  //months are 0-offset, sigh
   // Get a 0 padded day string
   var day = zeropad(d);
-  var frac = hh * 3600 + mm * 60 + ss;
+  var frac = hh * 3600 + mm * 60 + ss + 1e-3 * ms;
   var ret = year + "/" + month + "/" + day;
   if (frac) {
-    ret += " " + hmsString_(hh, mm, ss);
+    ret += " " + hmsString_(hh, mm, ss, ms);
   }
   return ret;
 };
@@ -1213,7 +1218,7 @@ export function dateAxisLabelFormatter(date, granularity, opts) {
       hours = accessors.getHours(date),
       mins = accessors.getMinutes(date),
       secs = accessors.getSeconds(date),
-      millis = accessors.getSeconds(date);
+      millis = accessors.getMilliseconds(date);
 
   if (granularity >= DygraphTickers.Granularity.DECADAL) {
     return '' + year;
@@ -1225,7 +1230,7 @@ export function dateAxisLabelFormatter(date, granularity, opts) {
       // e.g. '21 Jan' (%d%b)
       return zeropad(day) + '&#160;' + SHORT_MONTH_NAMES_[month];
     } else {
-      return hmsString_(hours, mins, secs);
+      return hmsString_(hours, mins, secs, millis);
     }
   }
 };

diff --git a/tests/labelsDateMilliseconds.html b/tests/labelsDateMilliseconds.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Milliseconds date labels</title>
+    <!--
+    For production (minified) code, use:
+    <script type="text/javascript" src="dygraph-combined.js"></script>
+    -->
+    <script type="text/javascript" src="../dist/dygraph.js"></script>
+  </head>
+  <body>
+
+    <h2>Milliseconds display in date and time labels</h2>
+
+    <p>This shows how milliseconds are displayed when present.</p>
+
+    <div id="div_ms" style="width:600px; height:200px;"></div>
+    <div id="div_std" style="width:600px; height:200px;"></div>
+
+    <p>You can check it by hovering over corresponding points and comparing
+    the value labels.</p>
+
+    <script type="text/javascript">
+      var values = (function () {
+        var rand10 = function () { return Math.round(10 * Math.random()); };
+        var a = [];
+        for (var n=0; n < 72; n++) {
+          a.push(rand10());
+        }
+        return a;
+      })();
+      function data(y,m,d,hh,mm,ss,ms) {
+        var a = [];
+        for (var n=0; n < 72; n++) {
+          a.push([new Date(Date.UTC(y, m, d, hh + n, mm, ss, ms)), values[n]]);
+        }
+        return a;
+      }
+      gms = new Dygraph(
+                   document.getElementById("div_ms"),
+                   data(2009, 6, 25, 14, 34, 56, 654),
+                   {
+                     labels: ['time with ms', 'random']
+                   }
+                 );
+      gstd = new Dygraph(
+                   document.getElementById("div_std"),
+                   data(2009, 6, 25, 14, 0, 0, 0),
+                   {
+                     labels: ['time', 'random']
+                   }
+                 );
+    </script>
+
+  </body>
+</html>