Namespace: cq-comparison

WebComponents. cq-comparison

Symbol comparison component <cq-comparison>.

Add attribute cq-marker in order to have the component insert itself as a marker on the chart

Example

<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="off" autocomplete="off" autocorrect="off" autocapitalize="off" placeholder="Enter Symbol">
						<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>.


pickSwatchColor()

Picks a color to display the new comparison as. Loops through preset colors and picks the next one on the list. If the 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(context, 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
context object

CIQ.UI.Context The context of the chart.

obj object

The object holding info on a security.


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.