new HUD( [node], context)
Creates a heads-up display (HUD) of cross section data for the data point selected by the chart crosshairs.
Parameters:
Name | Type | Argument | Default | Description |
---|---|---|---|---|
node |
HTMLElement |
<optional> |
context.topNode | The HUD is automatically attached to the DOM node that contains the chart; and so, this parameter is not used. See getContainer. |
context |
CIQ.UI.Context | The chart context. |
- Since:
-
- 8.2.0
- 8.3.0 Renamed from
CIQ.TermStructure.HUD
. Changed constructor signature fromconstructor({ stx })
.
Methods
-
getContainer(container)
-
Gets the DOM element within
container
that represents the heads-up display. If an element does not exist, creates one withincontainer
.Parameters:
Name Type Description container
HTMLElement The DOM element that contains the chart. The heads-up display is a sub-element of this element.
- Since:
-
8.2.0
Returns:
The heads-up display DOM element.
- Type
- HTMLElement
-
getContent(stx)
-
Extracts content from the chart engine for the heads-up display.
Parameters:
Name Type Description stx
CIQ.ChartEngine A reference to the chart engine.
- Since:
-
8.2.0
Returns:
Contains the data for the heads-up display.
- Type
- object
-
getRelativeDateLabel(timeUnit, multiplier)
-
Returns a label for a date that is relative to the date of the main curve.
Override this method in a subclass of CIQ.CrossSection.HUD or in the
postInstall
function of thecrossSection
property of the chart configuration object (see the example below).Parameters:
Name Type Description timeUnit
string Unit of time by which a relative date is offset from the date of the main curve. See CIQ.CrossSection.calculateRelativeDate for valid values.
multiplier
number Number of time units a relative date is offset from the date of the main curve. A negative number offsets the date into the past; a positive number, the future. Zero locks the date of the historical curve to the date of the main curve.
- Since:
-
8.2.0
Returns:
A string composed of the multiplier and time unit; for example, "-1 MONTH".
- Type
- string
Example
crossSection: { postInstall ({ uiContext, extension }) { // Change the relative label display for all time units; for example, from "-1 MONTH" to "1 Month Ago". extension.hud.getRelativeDateLabel = (multiplier, timeUnit) => Math.abs(multiplier) + " " + CIQ.capitalize(timeUnit) + (Math.abs(multiplier) > 1 ? "s" : "") + " Ago"; } }
-
hide()
-
Hides the heads-up display.
- Since:
-
8.2.0
-
render(content, el)
-
Renders the heads-up display as HTML.
Parameters:
Name Type Argument Description content
object The data that constitutes the heads-up display. See getContent.
Properties
Name Type Argument Default Description dataField
string The data element, such as yield, on which the cross section is based.
symbol
string The market symbol of the entity for which the cross section is constructed; for example, "US-T BENCHMARK" for the U.S. Treasury yield curve.
color
string The color of the swatch in the HUD for the main curve. Can be any of the forms supported by the CSS color data type.
instrument
string The instrument of the cross section (such as 6 MO or 1 YR for the yield curve) for which information is displayed in the HUD.
date
Date The date for which the main curve of the cross section is graphed.
live
boolean Indicates whether the cross section applies to the current date. When true, the chart can be reloaded at a later date and the cross section will be reconstructed for that date (the current date) regardless of when the cross section was created.
mainData
object Data for the main curve for the instrument specified by
content.instrument
(see above); for example, yield, bid, ask, and mid for a yield curve term structure.secondary
Array.<object> Data for the cross section secondary curves (comparison and historical curves) for the instrument specified by
content.instrument
(see above). Each object in the array represents a secondary curve and has the properties below.Properties
Name Type Description color
string The color of the swatch in the HUD for the secondary curve. Can be any of the forms supported by the CSS color data type.
date
string If the curve is an entity (or comparison) curve, the date of the curve. If the curve is an historical curve, the reference date for the relative date of the curve. Equal to the date of the main curve.
relativeDate
object A time unit and multiplier that specifies a date relative to the date of the main curve (see CIQ.CrossSection.calculateRelativeDate).
Properties
Name Type Argument Description timeUnit
string <optional>
Unit of time by which a relative date is offset from the date of the main curve.
multiplier
number <optional>
Number of time units a relative date is offset from the date of the main curve.
symbol
string The symbol of the entity for which the cross section represented by the secondary curve is constructed.
value
string The value for the secondary curve for the instrument specified by
content.instrument
(see above).fieldsToFormatAsPercent
Array.<string> <optional>
[] The data fields (see
content.mainData
) formatted as percentages in the heads-up display.params.decimalPlaces
function <optional>
Function to determine number of decimal places for a numeric value.
el
HTMLElement The DOM element that contains the rendered content of the heads-up display.
- Since:
-
8.2.0
-
show()
-
Shows the heads-up display.
- Since:
-
8.2.0