Permalink
Browse files

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
  • Loading branch information...
1 parent 8cc4108 commit 2d0fdf6eb18eafde50830b8109f42e20b82247b1 @pierriko pierriko committed with Sep 15, 2016
Showing with 78 additions and 5 deletions.
  1. +4 −0 DEVELOP.md
  2. +8 −0 auto_tests/tests/date_formats.js
  3. +10 −5 src/dygraph-utils.js
  4. +56 −0 tests/labelsDateMilliseconds.html
View
@@ -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
@@ -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));
+});
+
});
View
@@ -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) + ' ' + SHORT_MONTH_NAMES_[month];
} else {
- return hmsString_(hours, mins, secs);
+ return hmsString_(hours, mins, secs, millis);
}
}
};
@@ -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>

0 comments on commit 2d0fdf6

Please sign in to comment.