The drop-down toggle web component <cq-info-toggle-dropdown>
.
Provides toggle management for the crosshairs and heads-up display.
Typically wraps a cq-toggle component and cq-menu component (see the examples below). The cq-toggle web component creates the user interface toggle control, which is similar to a button. The cq-menu web component creates a drop-down menu that provides component options. For example, for the heads-up display, the options menu enables activation of either a dynamic callout or floating tooltip; for the crosshairs, activation of a static information display (also referred to as the static heads-up display, or static HUD).
The drop-down toggle component appends a
<cq-hu-dynamic>
,
<cq-hu-floating>
, or
<cq-hu-static>
element to the top node of the chart context
if one is required and not already present. The elements represent the heads-up dynamic callout,
heads-up floating tooltip, and crosshairs static HUD, respectively.
The drop-down toggle is mobile aware. On mobile devices, the drop-down menu of the component is hidden, and the following mobile-friendly behavior is set automatically:
- The crosshairs drop-down toggle turns the crosshairs and static HUD on and off in unison
- The heads-up display drop-down toggle is not available
The HUD menu can be managed programmatically by sending a 'channel' message to enable or disable the different HUD modes.
Here is the code you will need:
function changeHUD(type, stx) {
const hudChannel = stx.uiContext.config.channels.headsUp;
const { channelWrite } = CIQ.UI.BaseComponent.prototype;
channelWrite(hudChannel, type, stx);
}
Then you can do things such as:
changeHUD(false, stxx); // turn off HUD
changeHUD({dynamic: true, floating: false}, stxx); // turn on the dynamic HUD
changeHUD({dynamic: false, floating: true}, stxx); // turn on the floating HUD
- Since:
-
8.2.0
Examples
<cq-info-toggle-dropdown>
<cq-toggle
class="ciq-HU"
cq-member="headsUp">
<span></span>
<cq-tooltip></cq-tooltip> <!-- Tooltip text is added programmatically. -->
</cq-toggle>
<cq-menu class="ciq-menu toggle-options collapse tooltip-ui">
<span></span>
<cq-menu-dropdown>
<cq-item cq-member="headsUp-dynamic">Show Dynamic Callout<span class="ciq-radio"><span></span></span></cq-item>
<cq-item cq-member="headsUp-floating">Show Tooltip<span class="ciq-radio"><span></span></span></cq-item>
</cq-menu-dropdown>
</cq-menu>
<cq-info-toggle-dropdown>
<cq-toggle
class="ciq-CH"
cq-member="crosshair">
<span></span>
<cq-tooltip>Crosshair (Alt + \)</cq-tooltip> <!-- Tooltip text is hard coded. -->
</cq-toggle>
<cq-menu class="ciq-menu toggle-options collapse">
<span></span>
<cq-menu-dropdown>
<cq-item cq-member="crosshair">Hide Heads-Up Display<span class="ciq-radio"><span></span></span></cq-item>
<cq-item cq-member="headsUp-static">Show Heads-Up Display<span class="ciq-radio"><span></span></span></cq-item>
</cq-menu-dropdown>
</cq-menu>
</cq-info-toggle-dropdown>
Methods
-
connectedCharts()
-
Gets all connected charts.
- Since:
-
8.4.0
-
positionCrosshair()
-
Places crosshair at last data segment in the chart that contains the Close value
- Since:
-
8.4.0
-
set(value)
-
Sets the status of the drop-down toggle; that is, whether the drop-down toggle is active or inactive.
Parameters:
Name Type Description value
boolean The status of the drop-down toggle. If true, the drop-down toggle is active; if false, inactive.
- Since:
-
8.2.0
-
setSelected(selected)
-
Sets the currently selected option for the drop-down toggle component. The options are presented as a list of radio buttons in a drop-down menu associated with the component.
Selects (or checks) the radio button of the selected option and clears (or unchecks) the radio buttons of other options.
Parameters:
Name Type Description selected
HTMLElement The menu option to set as the selected option.
- Since:
-
8.2.0