API Reference
Namespaces
Classes
Events
Global
Externals

Class: HUD

CIQ.CrossSection. HUD


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 from constructor({ stx }).

Methods


getContainer(container)

Gets the DOM element within container that represents the heads-up display. If an element does not exist, creates one within container.

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 the crossSection 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

Customize the cross section postInstall function of the chart configuration object. See the Chart Configuration tutorial.

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