Library Documentation
API Reference
Namespaces
Classes
Events
Global
Externals

Namespace: cq-curve-comparison

WebComponents. cq-curve-comparison

The curve comparison web component, <cq-curve-comparison>, enables the addition of secondary curves to term structure charts. The secondary curves plot instrument data for entities that are comparable to the chart's primary entity (such as the U.K. sovereign bond in comparison to the U.S. Treasury benchmark).

A typical implementation of the component includes:

  • A drop-down menu that enables the addition of entity curves
  • An entity lookup dialog box which is opened from the drop-down menu

See the example below.

Since:

  • 7.5.0

See:

Example

<!-- Add the cq-marker attribute to make the component a visual element of the chart. -->
<cq-curve-comparison cq-marker class="ciq-comparison ciq-entity-comparison">
    <cq-menu class="cq-comparison-new">
        <cq-comparison-tap-capture>
            <!-- Add the component label. -->
            <cq-comparison-add-label class="ciq-no-share">
                <cq-comparison-plus></cq-comparison-plus><span>Compare</span><span>...</span>
            </cq-comparison-add-label>
            <!-- Create the drop-down menu that appears when the component is selected. -->
            <cq-menu class="ciq-comparison-curve-menu">
                <cq-menu-dropdown class="ciq-value-dropdown">
                    <cq-item stxtap="Layout.showEntityComparison()">Add Entity</cq-item>
                    <cq-item stxtap="Layout.showHistoricalComparisonDialog()">Add Historical</cq-item>
                </cq-menu-dropdown>
            </cq-menu>
            <!-- Add the entity lookup dialog box which is opened by the call to Layout.showentityComparison() from the drop-down menu. -->
            <cq-comparison-add>
                <cq-comparison-lookup-frame>
                    <cq-lookup cq-keystroke-claim cq-keystroke-default cq-uppercase cq-exchanges="futures,govt,muni,corp">
                        <cq-lookup-input cq-no-close>
                            <input type="text" spellcheck="false" autocomplete="off" autocorrect="off" autocapitalize="none"
                                   name="symbol" placeholder="">
                            <cq-lookup-icon></cq-lookup-icon>
                        </cq-lookup-input>
                        <cq-lookup-results>
                            <cq-lookup-filters cq-no-close>
                                <cq-filter class="true">ALL</cq-filter>
                                <cq-filter>BONDS</cq-filter>
                                <cq-filter>FUTURES</cq-filter>
                            </cq-lookup-filters>
                            <cq-scroll></cq-scroll>
                        </cq-lookup-results>
                    </cq-lookup>
                </cq-comparison-lookup-frame>
                <cq-swatch cq-no-close></cq-swatch>
                <span><cq-accept-btn class="stx-btn">ADD</cq-accept-btn></span>
            </cq-comparison-add>
        </cq-comparison-tap-capture>
    </cq-menu>
</cq-curve-comparison>

Methods

pickSwatchColor()

Sets the background color of a cq-swatch element contained in a cq-curve-comparison.

Since:

  • 7.5.0

removeCurve(curveId)

Removes a secondary curve from the chart. Responds to selection of the Delete control control associated with the curve in the cq-study-legend, which displays the list of secondary curves.

Parameters:
Name Type Description
curveId String

Identifies the curve to be removed.
Since:

  • 7.5.0

renderLegend()

Creates the list of secondary curves displayed in the cq-study-legend.

Since:

  • 7.5.0

selectItem(obj)

Adds a secondary curve to the chart based on the selection of a symbol from the entity lookup dialog box. Sets the curve color to that of the entity lookup's color swatch.

Parameters:
Name Type Description
obj object

Contains information about the selected entity.

Properties
Name Type Description
symbol string

The symbol of the selected entity.
Since:
  • 7.5.0
  • 8.2.0 Removed the context parameter. The context is now accessed from the base component class.

setColor(color, swatch)

Sets the color of a curve. Responds to a change in the color of the swatch associated with the curve in the cq-study-legend, which displays the list of secondary curves.

Parameters:
Name Type Description
color String

The color to apply to the curve.
swatch Object

Represents the color swatch associated with the curve in the cq-study-legend. Identifies the curve.
Since:

  • 7.5.0