Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Format time labels #9

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Format time labels #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1df0734
Merge remote-tracking branch 'metsci/master'
skaughtx0r Jun 21, 2017
dda7af9
Add ability to modify the formats of absolute time display
skaughtx0r Jun 21, 2017
0bf0ae3
Expose timeAxisFormat option to TimelinePane
skaughtx0r Jun 21, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 46 additions & 21 deletions src/webglimpse/timeline/time_axis_painter.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,18 +32,34 @@ module Webglimpse {

// XXX: Much of this is duplicated from edge_axis_painter

export class FormatOptions {
tickFormat : string;
prefixFormat : string;
constructor(tick: string, prefix: string) {
this.tickFormat = tick;
this.prefixFormat = prefix;
}
}

export interface TimeAxisFormatOptions {
hour? : FormatOptions;
day? : FormatOptions;
month? : FormatOptions;
year? : FormatOptions;
}

export interface TimeAxisPainterOptions {
tickSpacing? : number;
font? : string;
textColor? : Color;
tickColor? : Color;
tickSize? : number;
labelAlign? : number;
referenceDate? : string;
tickSpacing? : number;
font? : string;
textColor? : Color;
tickColor? : Color;
tickSize? : number;
labelAlign? : number;
referenceDate? : string;
timeAxisFormat? : TimeAxisFormatOptions;
// if true, relative date labels in the future are positive (Day 1)
// if false, relative date labels in the future are negative (Day -1)
isFuturePositive? : boolean;
isFuturePositive? : boolean;
}


Expand All @@ -56,6 +72,7 @@ module Webglimpse {
var labelAlign = ( hasval( options ) && hasval( options.labelAlign ) ? options.labelAlign : 0.5 );
var referenceDate_PMILLIS = ( hasval( options ) && hasval( options.referenceDate ) ? parseTime_PMILLIS( options.referenceDate ) : undefined );
var isFuturePositive = ( hasval( options ) && hasval( options.isFuturePositive ) ? options.isFuturePositive : true );
var timeAxisFormat = ( hasval( options ) && hasval(options.timeAxisFormat) ? options.timeAxisFormat : undefined );

var marksProgram = new Program( edgeMarks_VERTSHADER( labelSide ), solid_FRAGSHADER );
var marksProgram_u_VMin = new Uniform1f( marksProgram, 'u_VMin' );
Expand Down Expand Up @@ -118,7 +135,7 @@ module Webglimpse {
// Tick labels
//

var ticks : TickDisplayData = getTickDisplayData( tickInterval_MILLIS, referenceDate_PMILLIS, displayTimeZone, isFuturePositive );
var ticks : TickDisplayData = getTickDisplayData( tickInterval_MILLIS, referenceDate_PMILLIS, displayTimeZone, isFuturePositive, timeAxisFormat );

textTextures.resetTouches( );
textureRenderer.begin( gl, viewport );
Expand Down Expand Up @@ -212,12 +229,12 @@ module Webglimpse {
}
}

function getTickDisplayData( tickInterval_MILLIS : number, referenceDate_PMILLIS : number, displayTimeZone : string, isFuturePositive : boolean ) : TickDisplayData {
function getTickDisplayData( tickInterval_MILLIS : number, referenceDate_PMILLIS : number, displayTimeZone : string, isFuturePositive : boolean, timeAxisFormat : TimeAxisFormatOptions ) : TickDisplayData {
if ( hasval( referenceDate_PMILLIS ) ) {
return getTickDisplayDataRelative( tickInterval_MILLIS, referenceDate_PMILLIS, isFuturePositive );
}
else {
return getTickDisplayDataAbsolute( tickInterval_MILLIS, displayTimeZone );
return getTickDisplayDataAbsolute( tickInterval_MILLIS, displayTimeZone, timeAxisFormat );
}
}

Expand Down Expand Up @@ -325,29 +342,37 @@ module Webglimpse {
return { prefixFormat: prefixFormat, tickFormat: tickFormat, timeStructFactory:timeStructFactory };
}

function getTickDisplayDataAbsolute( tickInterval_MILLIS : number, displayTimeZone : string ) : TickDisplayData {
function getTickDisplayDataAbsolute( tickInterval_MILLIS : number, displayTimeZone : string, timeAxisFormat : TimeAxisFormatOptions ) : TickDisplayData {

var defaultTickFormat = function( format : string ) : TickFormat { return function( tickTime_PMILLIS : number ) : string { return moment( tickTime_PMILLIS ).zone( displayTimeZone ).format( format ) } };
var defaultPrefixFormat = function( format : string ) : PrefixFormat { return function( timeStruct : TimeStruct ) : string { return moment( timeStruct.textCenter_PMILLIS ).zone( displayTimeZone ).format( format ) } };
var defaultPrefixFormat = function( format : string ) : PrefixFormat { return function( timeStruct : TimeStruct ) : string { return moment( timeStruct.textCenter_PMILLIS ).zone( displayTimeZone ).format( format ) } };

if ( tickInterval_MILLIS <= minutesToMillis( 1 ) ) {
var tickFormat = defaultTickFormat( 'mm:ss' );
var prefixFormat = defaultPrefixFormat( 'D MMM HH:00' );
var formatOptions = new FormatOptions('mm:ss', 'D MMM HH:00');
var hour = ( hasval( timeAxisFormat ) && hasval(timeAxisFormat.hour) ? timeAxisFormat.hour : formatOptions );
var tickFormat = defaultTickFormat( ( hasval(hour.tickFormat) && hour.tickFormat !== '' ? hour.tickFormat : formatOptions.tickFormat ) );
var prefixFormat = defaultPrefixFormat( ( hasval(hour.prefixFormat) && hour.prefixFormat !== '' ? hour.prefixFormat : formatOptions.prefixFormat ) );
var timeStructFactory = function( ) : TimeStruct { return new HourStruct( ) };
}
else if ( tickInterval_MILLIS <= hoursToMillis( 12 ) ) {
var tickFormat = defaultTickFormat( 'HH:mm' );
var prefixFormat = defaultPrefixFormat( 'D MMM YYYY' );
var formatOptions = new FormatOptions('HH:mm', 'D MMM YYYY');
var day = ( hasval( timeAxisFormat ) && hasval(timeAxisFormat.day) ? timeAxisFormat.day : formatOptions );
var tickFormat = defaultTickFormat( ( hasval(day.tickFormat) && day.tickFormat !== '' ? day.tickFormat : formatOptions.tickFormat ) );
var prefixFormat = defaultPrefixFormat( ( hasval(day.prefixFormat) && day.prefixFormat !== '' ? day.prefixFormat : formatOptions.prefixFormat ) );
var timeStructFactory = function( ) : TimeStruct { return new DayStruct( ) };
}
else if ( tickInterval_MILLIS <= daysToMillis( 10 ) ) {
var tickFormat = defaultTickFormat( 'D' );
var prefixFormat = defaultPrefixFormat( 'MMM YYYY' );
var formatOptions = new FormatOptions('D', 'MMM YYYY');
var month = ( hasval( timeAxisFormat ) && hasval(timeAxisFormat.month) ? timeAxisFormat.month : formatOptions );
var tickFormat = defaultTickFormat( ( hasval(month.tickFormat) && month.tickFormat !== '' ? month.tickFormat : formatOptions.tickFormat ) );
var prefixFormat = defaultPrefixFormat( ( hasval(month.prefixFormat) && month.prefixFormat !== '' ? month.prefixFormat : formatOptions.prefixFormat ) );
var timeStructFactory = function( ) : TimeStruct { return new MonthStruct( ) };
}
else if ( tickInterval_MILLIS <= daysToMillis( 60 ) ) {
var tickFormat = defaultTickFormat( 'MMM' );
var prefixFormat = defaultPrefixFormat( 'YYYY' );
var formatOptions = new FormatOptions('MMM', 'YYYY');
var year = ( hasval( timeAxisFormat ) && hasval(timeAxisFormat.year) ? timeAxisFormat.year : formatOptions );
var tickFormat = defaultTickFormat( ( hasval(year.tickFormat) && year.tickFormat !== '' ? year.tickFormat : formatOptions.tickFormat ) );
var prefixFormat = defaultPrefixFormat( ( hasval(year.prefixFormat) && year.prefixFormat !== '' ? year.prefixFormat : formatOptions.prefixFormat ) );
var timeStructFactory = function( ) : TimeStruct { return new YearStruct( ) };
}
else {
Expand Down
3 changes: 2 additions & 1 deletion src/webglimpse/timeline/timeline_pane.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,7 @@ module Webglimpse {
tickSpacing? : number;
axisLabelAlign? : number;
isFuturePositive? : boolean;
timeAxisFormat? : TimeAxisFormatOptions;

// date in time_ISO8601 format (see util.ts:parseTime_PMILLIS)
// that time labels on the timeline should be referenced from
Expand Down Expand Up @@ -276,7 +277,7 @@ module Webglimpse {
var axisInsets = newInsets( 0, scrollbarWidth, 0, rowLabelPaneWidth );

// top time axis pane
var axisOpts = { tickSpacing: tickSpacing, font: font, textColor: axisLabelColor, tickColor: axisLabelColor, labelAlign: axisLabelAlign, referenceDate: options.referenceDate, isFuturePositive : options.isFuturePositive };
var axisOpts = { tickSpacing: tickSpacing, font: font, textColor: axisLabelColor, tickColor: axisLabelColor, labelAlign: axisLabelAlign, referenceDate: options.referenceDate, isFuturePositive : options.isFuturePositive, timeAxisFormat: options.timeAxisFormat };
if ( showTopAxis ) {
var topAxisPane = newTimeAxisPane( contentPaneArgs, null );
ui.addPane( 'top-axis-pane', topAxisPane );
Expand Down