API Reference
Namespaces
Classes
Events
Global
Externals

Namespace: cq-comparison

WebComponents. cq-comparison

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 the gapDisplayStyle 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 than cq-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.