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
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( [context], 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 Argument Description context
CIQ.UI.Context <optional>
The chart context. Unused.
obj
Object A data access object containing information about the selected entity.
- Since:
-
7.5.0
-
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