8.1.0 to 8.2.0

Version 8.2.0 includes the following updates:

Crosshairs and heads-up display
Term structure heads-up display
Keyboard shortcuts legend
Toasts
Chart configuration

Crosshairs and heads-up display

The crosshairs and heads-up display (HUD) are now implementations of the cq-info-toggle-dropdown web component. In version 8.1.0, the crosshairs were a cq-toggle component; the HUD was a cq-info-toggle component with internal markup added dynamically at runtime.

Here's the v8.1.0 template markup (including drawing palette and table view toggles):

<cq-side-nav cq-on="sidenavOn">
    <div class="icon-toggles ciq-toggles">
        <cq-toggle class="ciq-draw" cq-member="drawing"><span></span><cq-tooltip>Draw</cq-tooltip></cq-toggle>
        <cq-toggle class="ciq-CH" cq-member="crosshair"><span></span><cq-tooltip>Crosshair (Alt + \)</cq-tooltip></cq-toggle>
        <cq-info-toggle></cq-info-toggle> <!-- HUD -->
        <cq-toggle class="ciq-DT" cq-member="tableView"><span></span><cq-tooltip>Table View</cq-tooltip></cq-toggle>
    </div>
</cq-side-nav>

In v8.1.0, the following HUD markup was inserted dynamically into the cq-info-toggle element:

<cq-toggle
    class="ciq-HU"
    cq-member="headsUp"
    cq-toggles="dynamic,static,null">
    <span></span>
    <cq-tooltip>Info</cq-tooltip>
</cq-toggle>

In version 8.2.0, the crosshairs and HUD are implemented using a cq-info-toggle-dropdown web component that contains a cq-toggle component and cq-menu component. The cq-toggle component creates the user interface toggle control. The cq-menu component creates a drop-down menu that provides component options. 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 HUD.

Here's the v8.2.0 crosshairs and HUD markup from the technical-analysis-chart.html template (including drawing palette and table view toggles):

<cq-side-nav cq-on="sidenavOn">
    <div class="icon-toggles ciq-toggles">

        <!-- Drawing palette toggle -->
        <cq-toggle
            class="ciq-draw"
            cq-member="drawing">
            <span></span>
            <cq-tooltip>Draw</cq-tooltip>
        </cq-toggle>

        <!-- Crosshairs toggle -->
        <cq-info-toggle-dropdown>
            <cq-toggle
                class="ciq-CH"
                cq-member="crosshair">
                <span></span>
                <cq-tooltip>Crosshair (Alt + \)</cq-tooltip>
            </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>

        <!-- HUD toggle -->
        <cq-info-toggle-dropdown>
            <cq-toggle
                class="ciq-HU"
                cq-member="headsUp">
                <span></span>
                <cq-tooltip>Info</cq-tooltip>
            </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>

        <!-- Table view toggle -->
        <cq-toggle
            class="ciq-DT tableview-ui"
            cq-member="tableView">
            <span></span>
            <cq-tooltip>Table View</cq-tooltip>
        </cq-toggle>

    </div>
</cq-side-nav>

In your v8.1.0 templates, replace the crosshairs markup:

<cq-toggle class="ciq-CH" cq-member="crosshair"><span></span><cq-tooltip>Crosshair (Alt + \)</cq-tooltip></cq-toggle>

with:

<cq-info-toggle-dropdown>
    <cq-toggle
        class="ciq-CH"
        cq-member="crosshair">
        <span></span>
        <cq-tooltip>Crosshair (Alt + \)</cq-tooltip>
    </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>

Replace the HUD placeholder markup:

<cq-info-toggle></cq-info-toggle>

with:

<cq-info-toggle-dropdown>
    <cq-toggle
        class="ciq-HU"
        cq-member="headsUp">
        <span></span>
        <cq-tooltip>Info</cq-tooltip>
    </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>

Note: No HUD markup is added dynamically in v8.2.0 (as it was in v8.1.0).

Term Structure heads-up display

In version 8.1.0, the Term Structure chart had crosshairs, but it didn't have a heads-up display (HUD) associated with the crosshairs.

Here's the v8.1.0 markup that created the crosshairs:

<div class="icon-toggles ciq-toggles">
    <cq-toggle class="ciq-CH" cq-member="crosshair"><span></span><cq-tooltip>Crosshair</cq-tooltip></cq-toggle>
</div>

For version 8.2.0, you need to replace the old crosshairs cq-toggle component with a new cq-info-toggle-dropdown web component that contains a cq-toggle component and cq-menu component. The cq-toggle component creates the crosshairs toggle control. The cq-menu component creates a drop-down menu that provides options for displaying a static (stationary) HUD.

In your v8.1.0 template, delete the the following markup to remove the old crosshairs toggle:

<div class="icon-toggles ciq-toggles">
    <cq-toggle class="ciq-CH" cq-member="crosshair"><span></span><cq-tooltip>Crosshair</cq-tooltip></cq-toggle>
</div>

Add the following cq-info-toggle-dropdown to create the new crosshairs toggle and drop-down menu:

<cq-info-toggle-dropdown>
    <cq-toggle
        class="ciq-CH"
        cq-member="crosshair">
        <span></span>
        <cq-tooltip>Crosshair (Alt + \)</cq-tooltip>
    </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-termstructure">Show Heads-Up Display<span class="ciq-radio"><span></span></span>
            </cq-item>
        </cq-menu-dropdown>
    </cq-menu>
</cq-info-toggle-dropdown>

Add the cq-info-toggle-dropdown as the last element within the <div class="termstructure-ui"> element, for example:

<div class="termstructure-ui">
    .
    .
    .
    <cq-info-toggle-dropdown>
        <cq-toggle
            class="ciq-CH"
            cq-member="crosshair">
            <span></span>
            <cq-tooltip>Crosshair (Alt + \)</cq-tooltip>
        </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-termstructure">Show Heads-Up Display<span class="ciq-radio"><span></span></span>
                </cq-item>
            </cq-menu-dropdown>
        </cq-menu>
    </cq-info-toggle-dropdown>
</div>

Note: Term Structure has the static HUD only; it does not have the dynamic callout or floating tooltip (see Crosshairs and heads-up display above).

Keyboard shortcuts legend

The keyboard shorcuts legend is a movable, resizable window that contains a list of all chart keyboard shortcuts.

In the v8.2.0 templates, the legend is accessed from the Preferences (cog wheel) menu and from the keyboard icon in the chart footer.

Menu option

To create a menu option for the keyboard shortcuts legend, add the following menu section to your v8.1.0 template:

<cq-menu-dropdown-section class="shortcuts-ui">
    <cq-separator></cq-separator>
    <cq-heading>Shortcuts</cq-heading>
    <cq-item stxtap="Layout.showShortcuts(true)">Shortcuts / Hotkeys</cq-item>
</cq-menu-dropdown-section>

You can add the menu section to any </cq-menu-dropdown> element within a cq-menu element in your v8.1.0 template, for example:

<cq-menu class="ciq-menu ciq-preferences collapse">
    <span></span>
    <cq-menu-dropdown>
        <cq-menu-dropdown-section class="chart-preferences">
            <cq-heading>Chart Preferences</cq-heading>
            <cq-menu-container cq-name="menuChartPreferences"></cq-menu-container>
            <cq-separator></cq-separator>
        </cq-menu-dropdown-section>
        .
        .
        .
        <cq-menu-dropdown-section class="shortcuts-ui">
            <cq-separator></cq-separator>
            <cq-heading>Shortcuts</cq-heading>
            <cq-item stxtap="Layout.showShortcuts(true)">Shortcuts / Hotkeys</cq-item>
        </cq-menu-dropdown-section>
    </cq-menu-dropdown>
</cq-menu>

Footer icon

To create a footer icon that opens the shortcuts legend, add the following:

<div class="shortcuts-ui ciq-shortcut-button" stxtap="Layout.showShortcuts()" title="Toggle shortcut legend"></div>

to the footer div of your v8.1.0 template, for example (including the Share button and Range Selector control):

<div class="ciq-footer full-screen-hide">
    <cq-share-button></cq-share-button>
    <div class="shortcuts-ui ciq-shortcut-button" stxtap="Layout.showShortcuts()" title="Toggle shortcut legend"></div>
    <cq-show-range></cq-show-range>
</div>

To restyle the icon, see the .ciq-shortcut-button CSS class selector in the css/chartiq.css file of your library.

Toasts

Toasts are notifications that pop up over the chart and disappear after a short time. Users can also dismiss toasts by clicking or tapping them.

Note: Toasts can be added to any chart, including Term Structure charts.

You can display four types of toasts:

info
error
warning
confirmation

To make toasts available in your application, add the following markup to your v8.1.0 template:

<cq-message-toaster defaultDisplayTime="10" defaultTransition="slide" defaultPosition="top"></cq-message-toaster>

You can place the component anywhere in your template, but within the chart area is a good location (see technical-analysis-chart.html or examples/templates/sample-template-term-structure.html).

For example:

<div class="ciq-chart-area">
    <div class="ciq-chart">
        <cq-message-toaster defaultDisplayTime="10" defaultTransition="slide" defaultPosition="top"></cq-message-toaster>
    .
    .
    .

You can customize the attribute values (see cq-message-toaster) or omit the attributes altogether.

To make a toast, dispatch a "notification" event with a data object that contains the message and type of toast:

stxx.dispatch("notification", { message: "A toast!", type: "info" });

where stxx is a reference to the chart engine.

Here are the four types of toasts:

stxx.dispatch("notification", { message: "A toast!", type: "info" });
stxx.dispatch("notification", { message: "Uh oh", type: "error" });
stxx.dispatch("notification", { message: "Danger", type: "warning" });
stxx.dispatch("notification", { message: "Well done", type: "confirmation" });

See the notificationEventListener for additional data object properties, for example:

stxx.dispatch("notification", { message: "A toast!", type: "info", position: "bottom", transition: "fade", displayTime: 5 });

Chart configuration

New properties have been added to the default chart configuration. Values of some of the properties have changed.

See the Chart Configuration tutorial for more information.

config

The config object has added the following properties:

systemMessages — Contains pre-configured toast notification objects which can be included by name in event dispatches, for example:
```
stxx.dispatch("notification", "copytoclipboard");
stxx.dispatch("notification", "logdeactivated");
```
nameValueStore — The name of the custom class or constructor function that implements the name/value store interface to save and retrieve data about the chart, such as preferences, layout settings, drawings, and themes

config.enabledAddOns

New add-ons are enabled:

shortcuts — Specifies parameters of CIQ.Shortcuts
tooltip — Specifies parameters of CIQ.Tooltip

config.hotkeyConfig.hotkeys

The following hotkeys have been added:

Tab — Tab to next
Shift+Tab — Tab to previous
Enter — Select at tab

All objects in the hotkeys array have added the following property:

label — The name of the shortcut as it appears in the keyboard shortcuts legend

config.themes

A new property has been added:

nameValueStore — The name of the class or constructor function that interacts with a name/value store to save and retrieve the chart theme and any custom-defined themes

config.menuChartPreferences

The value of the class attribute of the Market Depth and L2 Heat Map <cq-item> DOM elements has changed from cryptoiq-ui to marketdepth-ui. Update your CSS accordingly.

config.menuStudiesConfig

The excludedStudies object has added the "stochastics" property. The original stochastics study — now called Stochastics (Simple) — has been replaced by a new stochastics implementation that contains more parameters.

config.addOns

A new add-on has been added:

shortcuts — Specifies parameters of CIQ.Shortcuts

config.channels

The keyboardNavigation property has been added.