Symbol comparison component <cq-comparison>
.
Add attribute cq-marker
to have the component insert itself as a marker on the chart.
For cq-comparison-keys
:
- Add
attribute cq-panel-only
to have the component show only series in the panel - Add
attribute cq-all-series
to have the component show even non-comparison series in the legend
Note:
-
By default, the comparison web component will not connect gaps in the data to indicate data points are missing due to discrepancies between marker hours or due to thinly traded instruments. If you want it to behave differently, you will need to override these defaults. Do not make the changes directly on components.js, but rather create a separate file with a copy of the methods you are overwriting and load that file right after the components.js file is loaded, but before any web components are instantiated. This allows for easier upgrades. Look for the
addSeries
call and use thegapDisplayStyle
parameter (or any other required parameter) as outlined in CIQ.ChartEngine#addSeries. -
To adjust the comparison's automatic color selector, set
document.querySelector('cq-comparison').swatchColors
to an array of colors. To adjust colors from the color picker popup, execute:const picker = document.querySelector('cq-color-picker'); picker.params.colorMap=[[row 1 of colors],[row 2 of colors],[row 3 of colors],[etc.]] picker.initialize();
You can use
cq-swatch
rather thancq-comparison-swatch
to allow user to change the series color.
- Since:
-
7.3.0 Added the ability to set series color using
cq-swatch
.
Examples
document.querySelector("cq-comparison").swatchColors = ["rgb(142, 198, 72)"];
const picker = document.querySelector("cq-color-picker");
picker.params.colorMap = [
[
"#ffffff",
"#e1e1e1",
"#cccccc",
"#b7b7b7",
"#a0a0a5",
"#898989",
"#707070",
"#626262",
"#555555",
"#464646",
"#363636",
"#262626",
"#1d1d1d",
"#000000",
],
];
picker.initialize();
<cq-comparison cq-marker>
<cq-menu class="cq-comparison-new">
<cq-comparison-add-label>
<cq-comparison-plus></cq-comparison-plus><span>Compare</span><span>...</span>
</cq-comparison-add-label>
<cq-comparison-add>
<cq-comparison-lookup-frame>
<cq-lookup cq-keystroke-claim>
<cq-lookup-input cq-no-close>
<input type="text" cq-focus spellcheck="false" autocomplete="off" autocorrect="off"
autocapitalize="none" 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>STOCKS</cq-filter>
<cq-filter>FX</cq-filter>
<cq-filter>INDEXES</cq-filter>
<cq-filter>FUNDS</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-menu>
<cq-comparison-key>
<template cq-comparison-item>
<cq-comparison-item>
<cq-comparison-swatch></cq-comparison-swatch>
<cq-comparison-label>AAPL</cq-comparison-label>
<!-- cq-comparison-price displays the current price with color animation -->
<cq-comparison-price cq-animate></cq-comparison-price>
<!-- cq-comparison-tick-price displays the price for the active crosshair item -->
<!-- <cq-comparison-tick-price></cq-comparison-tick-price> -->
<cq-comparison-loader></cq-comparison-loader>
<div class="stx-btn-ico ciq-close"></div>
</cq-comparison-item>
</template>
</cq-comparison-key>
</cq-comparison>
Methods
-
configureUI()
-
Initializes all the children UI elements that make up
<cq-comparison>
. -
onKeyboardSelection()
-
Triggers the comparison lookup component and passes keyboard control into the internal cq-lookup element.
Called when keyboard navigation activates this element by pressing Return/Enter.
- Since:
-
8.3.0
-
pickSwatchColor()
-
Picks a color to display the new comparison as. Loops through preset colors and picks the next one on the list. If all colors are taken, then the last color will be repeated.
-
removeSeries(symbol, series)
-
Handles removing a series from the comparison.
Parameters:
Name Type Description symbol
string Name of series as a string.
series
object Object containing info on series.
-
renderLegend()
-
The legend gets re-rendered whenever we createDataSet() (wherein the series may have changed). We re-render the entire thing each time, but we use a virtual DOM to determine whether to actually change anything on the screen (so as to avoid unnecessary flickering)
-
selectItem(obj)
-
Fires whenever a new security is added as a comparison. Handles all the necessary events to update the chart with the new comparison.
Parameters:
Name Type Description obj
object Contains information about the security.
Properties
Name Type Description symbol
string The symbol that identifies the security.
- Since:
-
8.2.0 Removed the
context
parameter. The context is now accessed from the base component class.
-
setColor(color, swatch)
-
Changes the color of a series; triggered if using cq-swatch to show the series color.
Parameters:
Name Type Description color
string New color.
swatch
object Swatch from which the color setting is made.
- Since:
-
7.3.0
-
startPriceTracker(updatePrices)
-
Adds an injection to the ChartEngine that tracks the price of Comparisons.
Parameters:
Name Type Description updatePrices
number -
updatePrices()
-
Loops thru
stxx.chart.series
to update the current price of all comparisons.