Timeline Class
Visualization of a time line of snow profiles.
Constructor
Item Index
Methods
- clip
- config
- coordx
- coordy
- datelabel
- desynchronize
- drag
- dragend
- draggable
- dragstart
- draw
- draw_indicator
- drawPNG
- getpaper
- griddates
- gridx
- gridy
- gtlegend
- header
- highlight
- hs
- indices
- labelsx
- legend
- mode
- mousemove
- mouseon
- mouseout
- mouseout
- next
- pastePNG
- previous
- range
- reconfigure
- remove static
- reset
- resetbutton
- setDate
- setProperties
- setup
- synchronize
- unhighlight
Properties
- parameters static
- parameters
Methods
clip
-
start -
end
Show a part (or all) of the data within a start and an end date.
Parameters:
-
startMomentStart date
-
endMomentEnd date
config
()
protected
Configure basic properties of the Rangegraph such as font, margins, height and width
coordx
-
date
Get the rounded x-coordinate for a given date.
Parameters:
-
dateMoment
Returns:
x-coordinate
coordy
-
height
Get the rounded y-coordinate for a given (snow) height.
Parameters:
-
heightNumber
Returns:
y-coordinate
datelabel
-
date
Draw a date label below the abscissa for any given date
Parameters:
-
dateMomentDate to be highlighted on the abscissa
desynchronize
-
graph
Desynchronize this graph with another rangegraph derivate by registering for all the relevant events.
Parameters:
-
graphRangegraph
drag
-
Date
Method to be called during dragging on top of cover.
Parameters:
-
DateMomentat current drag position
dragend
-
current -
ms
Method to be called at the end of dragging on top of cover.
Parameters:
-
currentMomentDate at current drag position
-
msNumberDuration of drag in ms
draggable
-
element
Drag functions used for zooming when mouse goes down over this.cover, start drawing selection box.
Parameters:
-
elementElementSnapSVG element to set up with drag functionality
dragstart
-
current
Method to be called at the start of dragging on top of cover.
Parameters:
-
currentMomentDate at current drag position
draw
()
Draw the Timeline and set up the mouse events.
draw_indicator
-
current
Draw the indicator line in case the user desires to lock onto a certain profile.
Parameters:
-
currentNumberIndex of profile in this.data.profiles
drawPNG
()
private
Draw the PNG image for the currently selected parameter. The method creates a canvas element to use as drawing board. Once the graph is drawn onto the canvas, the pastePNG method is called which tranforms the image into a base64 encoded dataURI and embeds it into an SVG image tag.
getpaper
()
private
Check if this instance has a valid SnapSVG paper object, in case the size of the canvas element has changed or no paper object is present resize or create the paper object.
griddates
-
start -
end
Given a start and an end date return an array of dates that divide up the range between the start and end date into approximately even intervals
Parameters:
-
startMomentStart date of time series
-
endMomentEnd date of time series
Returns:
Array of dates
gridx
()
protected
Draw the coordinate system with dotted lines and a frame around it
gridy
()
private
chainable
Draw the ordinate legend and grid for the snow height
gtlegend
()
private
Draw the grain shape legend and hook it up with the mousemove event. Hovering on a grain shape color will display a popup with a description of the grain shape.
header
()
private
chainable
Draw a header at the left top of the graph. The header information is clickable and links to a map revealing the exact location.
highlight
-
current -
noemit
Highlight the current cursor position by drawing the date label and displaying the current snow height.
hs
-
snowheight
Display the snow height at the current cursor position.
Parameters:
-
snowheightNumberThe height of snow in cm
indices
-
startdate -
enddate
Given a start and end index (for this.data.profiles) draw the current parameter. In case the start index is not 0 and the end index is not the last index show the resetbutton.
Parameters:
-
startdateMomentStart date of range
-
enddateMomentEnd date of range
labelsx
-
dates
Given an array of dates, create the respective labels to be shown
Parameters:
-
datesArrayAn array of dates as moment objects
Returns:
Array of strings representing the passed dates
legend
()
private
chainable
Draw the legend on the left side of the graph. The legend consists of a bar filled with the color gradient for the current parameter and a few labels to denote important values on the bar.
mode
-
start -
end
Check the size of the date range given.
Parameters:
-
startMomentStart date of time series
-
endMomentEnd date of time series
Returns:
Categorization of date range as 'years', 'months', 'monthweeks' or 'days'
mousemove
-
e -
offset
Method to be called when mousemove event is detected. It calls the method Timeline:highlight in turn, which displays the date label.
mouseon
-
on
This method enables/disables the mousemove event on the area spanning the graph. Children may implement the methods mouseout, mousemove and mouseoff to tap into this event.
Parameters:
-
onBooleanWhether to turn the mousemove event on or off
mouseout
()
protected
Method to be called when mouseout event is detected. Delete the currently displayed date label (unhighlight) and display the date label for the current indicator position, if the indicator is set.
mouseout
()
protected
Method to be called when mouse events are turned off.
next
()
In case an indicator is present, move one profile to the right.
pastePNG
()
private
Converts the image on the canvas into a base64 encoded dataURI and embeds it in a SVG image tag.
previous
()
In case an indicator is present, move one profile to the left.
range
-
start -
end
Set the new date range for the abscissa
Parameters:
-
startMomentStart date of time series
-
endMomentEnd date of time series
reconfigure
()
private
chainable
Reconfigure gridy, i.e. snow height axis, according to zoom area and draw it
remove
-
name
Remove a parameter from the timeline Config Timeline.defaults. This method is invoked by the settings modal when a user removes a parameter from the pro parser parameters section.
Parameters:
-
nameStringParamter name (e. g. ramm, density)
reset
()
private
Show all the data from start to end and remove the 'Show all' button.
setDate
()
Set the date to display explicitly (may be used externally)
setProperties
-
properties
Overwrite current properties with the ones passed as parameter. If a new parameter is set to display: emit the 'parameter' event and retrieve the gradient and color settings for the parameter.
Parameters:
-
propertiesObject
setup
()
private
chainable
Setup the dimensions of the underlying Rangegraph and draw header, horizontal grid and legend.
synchronize
-
graph
Synchronize this graph with another rangegraph derivate by registering for all the relevant events.
Parameters:
-
graphRangegraph
unhighlight
()
private
Remove all highlights (date and snow height labels).
Properties
parameters
ArrayA list of parameters that are available for display.
parameters
Array
Get all selectable parameters.