Added scale sensitive formatting to UTCTimeFormat

This commit is contained in:
Henry 2016-07-21 20:03:40 -07:00
parent e6d8944547
commit c2c8e16453
4 changed files with 95 additions and 3 deletions

View File

@ -58,6 +58,10 @@ define([
* @method format
* @memberof Format#
* @param {number} value the numeric value to format
* @param {number} [threshold] Optionally provides context to the
* format request, allowing for scale-appropriate formatting. This value
* should be the minimum unit to be represented by this format, in ms. For
* example, to display seconds, a threshold of 1 * 1000 should be provided.
* @returns {string} the text representation of the value
*/

View File

@ -34,6 +34,12 @@ define([
"YYYY-MM-DD"
];
var MS = 1,
SECONDS = 1000 * MS,
MINUTES = 60 * SECONDS,
HOURS = 60 * MINUTES,
DAYS = 24 * HOURS,
MONTHS = (365 / 12) * DAYS;
/**
* Formatter for UTC timestamps. Interprets numeric values as
@ -46,7 +52,51 @@ define([
function UTCTimeFormat() {
}
UTCTimeFormat.prototype.format = function (value) {
/**
* Returns an appropriate time format based on the provided value and
* the threshold required.
* @private
*/
function getScaledFormat (d, threshold) {
//Adapted from D3 formatting rules
if (!(d instanceof Date)){
d = new Date(moment.utc(d));
}
return [
[".SSS", function(d) { return d.getMilliseconds() >= threshold; }],
[":ss", function(d) { return d.getSeconds() * SECONDS >= threshold; }],
["HH:mm", function(d) { return d.getMinutes() * MINUTES >= threshold; }],
["HH", function(d) { return d.getHours() * HOURS >= threshold; }],
["ddd DD", function(d) {
return d.getDay() * DAYS >= threshold &&
d.getDate() != 1;
}],
["MMM DD", function(d) { return d.getDate() != 1; }],
["MMMM", function(d) {
return d.getMonth() * MONTHS >= threshold;
}],
["YYYY", function() { return true; }]
].filter(function (row){
return row[1](d);
})[0][0];
};
/**
*
* @param value
* @param {number} [threshold] Optionally provides context to the
* format request, allowing for scale-appropriate formatting. This value
* should be the minimum unit to be represented by this format, in ms. For
* example, to display seconds, a threshold of 1 * 1000 should be provided.
* @returns {string} the formatted date
*/
UTCTimeFormat.prototype.format = function (value, threshold) {
if (threshold !== undefined){
var scaledFormat = getScaledFormat(value, threshold);
if (scaledFormat) {
return moment.utc(value).format(scaledFormat);
}
}
return moment.utc(value).format(DATE_FORMAT) + "Z";
};

View File

@ -64,7 +64,8 @@ define([
"key": "mctConductorAxis",
"implementation": MCTConductorAxis,
"depends": [
"timeConductor"
"timeConductor",
"formatService"
]
}
],

View File

@ -32,7 +32,7 @@ define(
* labelled 'ticks'. It requires 'start' and 'end' integer values to
* be specified as attributes.
*/
function MCTConductorAxis(conductor) {
function MCTConductorAxis(conductor, formatService) {
function link(scope, element, attrs, ngModelController) {
var target = element[0].firstChild,
@ -57,10 +57,43 @@ define(
axisElement.call(xAxis);
}
// Calculates the precision of date for formatting. Relies on
// D3's behavior to tick on round units
function threshold(date){
var ms = date.getTime();
return [
365 * 24 * 60 * 60 * 1000, // years
(365 / 12) * 24 * 60 * 60 * 1000, // months
7 * 24 * 60 * 60 * 1000, // weeks
24 * 60 * 60 * 1000, // days
60 * 60 * 1000, // hours
60 * 1000, // minutes
1000, // seconds
1 // ms
].filter(function (boundary) {
return ms % boundary === 0;
})[0];
}
function changeTimeSystem(timeSystem) {
var key = timeSystem.formats()[0];
if (key !== undefined) {
var format = formatService.getFormat(key);
//Define a custom format function
xAxis.tickFormat(function (date) {
return format.format(date, threshold(date));
});
axisElement.call(xAxis);
}
}
scope.resize = function () {
setScale(conductor.bounds().start, conductor.bounds().end);
};
conductor.on('timeSystem', changeTimeSystem);
//On conductor bounds changes, redraw ticks
conductor.on('bounds', function (bounds) {
setScale(bounds.start, bounds.end);
@ -68,6 +101,10 @@ define(
//Set initial scale.
setScale(conductor.bounds().start, conductor.bounds().end);
if (conductor.timeSystem() !== undefined) {
changeTimeSystem(conductor.timeSystem());
}
}
return {