The curve comparison web component, <cq-curve-comparison>
, enables the addition of
secondary curves to cross section 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(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