Skip to main content

%ZEN.SVGComponent.timeRangeControl

Class %ZEN.SVGComponent.timeRangeControl Extends svgComponent [ Deprecated, System = 3 ]

SVG time range control. This lets a user select a range of dates along a simple time line. This is typically used to control another component, such as a chart or time line.
The selected date range is specified by the startRange and endRange properties. These are modified as the user interacts with the control.
The onchange event will be fired whenever the user modifies the time range.
The height of this component should be set to 40.

Properties​

timeScale​

Property timeScale As %ZEN.Datatype.string(VALUELIST = ",years,months,days,hours") [ InitialExpression = "years" ];

Time scale to display.

startTime​

Property startTime As %ZEN.Datatype.string [ InitialExpression = {+$ZDT($H,3)-10} ];

Earliest time displayed on the time line (as YYYY-MM-DD HH:MM:SS). Rounded to current time scale.

endTime​

Property endTime As %ZEN.Datatype.string [ InitialExpression = {+$ZDT($H,3)+5} ];

Latest time displayed on the time line (as YYYY-MM-DD HH:MM:SS). Rounded to current time scale.

startRange​

Property startRange As %ZEN.Datatype.string;

Start of current time range (as YYYY-MM-DD HH:MM:SS). This is modified as the user interacts with the control.

endRange​

Property endRange As %ZEN.Datatype.string;

End of current time range (as YYYY-MM-DD HH:MM:SS). This is modified as the user interacts with the control.

dateFormat​

Property dateFormat As %ZEN.Datatype.string(MAXLEN = 3, VALUELIST = ",MDY,DMY,YMD") [ InitialExpression = "YMD" ];

Optional. Specifies the display format used for this component. (Note that the internal value of this control is always YYYY-MM-DD). Possible values are:

  • "YMD" - Year,Month,Day
  • "MDY" - Month,Day,Year
  • "DMY" - Day,Month,Year

timeNotation​

Property timeNotation As %ZEN.Datatype.string(MAXLEN = 3, VALUELIST = ",12h,24h") [ InitialExpression = "12h" ];

Time notation used for time values.

onchange​

Property onchange As %ZEN.Datatype.eventHandler;

onchange event handler: This event handler is called as the user changes the value of this control. The final parameter is passed to this event indicating if the value is the final value (at the end of the current action). The which parameter is passed to this event indicating how the value as been changed: 'translate' (move to new start time), or 'scale' (change in time scale).

onconfig​

Property onconfig As %ZEN.Datatype.eventHandler;

This event handler is fired when the user clicks on the config icon (which is only displayed if this event is defined).

thumbStyle​

Property thumbStyle As %ZEN.Datatype.style [ InitialExpression = "fill:url(#glow-silver);" ];

SVG style applied to "thumb" of scroll bar.

XDatas​

SVGStyle​

XData SVGStyle

Methods​

reset​

ClientMethod reset() [ Language = javascript ]

Reset the timeline to its initial state.

renderContents​

ClientMethod renderContents() [ Language = javascript ]

Render the inner SVG contents of this component.

updateScrollbar​

ClientMethod updateScrollbar() [ Language = javascript ]

Resize all elements related to current range.

getTimeForPos​

ClientMethod getTimeForPos(x) [ Language = javascript ]

Return the time value (as yyyy-mm-dd [hh]) for the given x position on the time line.

onchangeHandler​

ClientMethod onchangeHandler(final, which) [ Language = javascript ]

Raise onchange event.

onconfigHandler​

ClientMethod onconfigHandler() [ Language = javascript ]

Raise onconfig event.

setProperty​

ClientMethod setProperty(property, value, value2) [ Language = javascript ]

Set the value of a named property.

scrollBtnClick​

ClientMethod scrollBtnClick(evt, which) [ Language = javascript ]

Click on scroll button.

scrollBtnOver​

ClientMethod scrollBtnOver(evt, which) [ Language = javascript ]

Mouse over scroll button.

scrollBtnOut​

ClientMethod scrollBtnOut(evt, which) [ Language = javascript ]

Mouse out of scroll button.

unitRectOver​

ClientMethod unitRectOver(evt, which) [ Language = javascript ]

Mouse over cell rect.

unitRectOut​

ClientMethod unitRectOut(evt, which) [ Language = javascript ]

Mouse out of cell rect.

unitRectClick​

ClientMethod unitRectClick(evt, which) [ Language = javascript ]

Mouse click on cell rect.

dragThumb​

ClientMethod dragThumb(evt) [ Language = javascript ]

Drag handler for thumb.

dragGrabber​

ClientMethod dragGrabber(evt, which) [ Language = javascript ]

Drag handler for grabber.

setTimeRange​

ClientMethod setTimeRange(startRange, endRange) [ Language = javascript ]

Set the start and end time range dates and update. If endRange is not provided, update it to preserve the current time range using startRange as a new starting time.
Time values are in 'yyyy-mm-dd' format.