Class: Layout

CIQ.UI. Layout


new Layout(context [, params])

UI Helper for Layout changes, for instance tapping items on the display menu.

Designed to be used as a helper method for the included WebComponents. A full tutorial on how to work with and customize the Web Components can be found here: Web Component Interface

This Helper is also responsible for initializing menu items in the "display" menu based on the chart layout

It can be extended to manage other layout events. For example, assuming the following HTML:

<cq-heading>Defaults</cq-heading>
<cq-item stxtap="Layout.doStuff('thing1')">Do this thing</cq-item>
<cq-item stxtap="Layout.doStuff('thing2')">Do this other thing</cq-item>
<cq-separator></cq-separator>

You would need the following corresponding function:

CIQ.UI.Layout.prototype.doStuff=function(node,whatToDo){
    var stx=this.context.stx;
    alert(whatToDo);
};

where the first parameter is always the node that was clicked, and can be manipulated to change as needed to add or remove styling, for example.

Parameters:
Name Type Argument Description
context CIQ.UI.Context

The context

params Object <optional>

Parameters

Properties
Name Type Argument Default Description
activeClassName string <optional>
"ciq-active"

The class name to be added to a node when a layout item is enabled

Since:
  • 4.1.0 Layout no longer takes a node as its first parameter

Methods


clearStudies(node)

Removes all studies from the top most node.

Designed to be used as a helper method for the included WebComponents. A full tutorial on how to work with and customize the Web Components can be found here: Web Component Interface

Parameters:
Name Type Description
node HTMLElement

getLanguage()

Displays the current language in language widget.

Designed to be used as a helper method for the included WebComponents. A full tutorial on how to work with and customize the Web Components can be found here: Web Component Interface

Since:
  • 6.1.0 defaults to English

setAggregationType(node, aggregationType)

Convenience function to set aggregation type from the 'Display' drop down.

Designed to be used as a helper method for the included WebComponents. A full tutorial on how to work with and customize the Web Components can be found here: Web Component Interface

Leverages CIQ.ChartEngine#setAggregationType

Parameters:
Name Type Description
node HTMLElement
aggregationType string

setChartScale(node, chartType)

Convenience function to set the chart scale from the 'Display' drop down.

Designed to be used as a helper method for the included WebComponents. A full tutorial on how to work with and customize the Web Components can be found here: Web Component Interface

Leverages CIQ.ChartEngine#setChartScale

Parameters:
Name Type Description
node HTMLElement
chartType string

setChartType(node, chartType)

Convenience function to set the chart type or the aggregation type from the 'Display' drop down.

Designed to be used as a helper method for the included WebComponents. A full tutorial on how to work with and customize the Web Components can be found here: Web Component Interface

Leverages CIQ.ChartEngine#setChartType and CIQ.ChartEngine#setAggregationType

Parameters:
Name Type Description
node HTMLElement
chartType string

setDataField(field)

Helper function that exposes CIQ.TermStructure#setDataField to the layout for access in the web components.

Parameters:
Name Type Description
arguments[0].node HTMLElement

The HTML element where the click originated.

arguments[0].params object

Additional information about where the click originated, including the parent element.

field string

Defines the type of values plotted on the x-axis of the term structure graph; for example, instrument yield, bid or ask price, or the mid point of the bid and ask.

Since:
  • 7.3.0
Example
<div class="ciq-dropdowns">
	<cq-menu class="ciq-menu">
		<cq-clickable stxbind="Layout.dataField" class="ciq-datafield-span">
			Yield
		</cq-clickable>
		<cq-menu-dropdown class="ciq-value-dropdown">
			<cq-item stxtap="Layout.setDataField('yield')">Yield</cq-item>
			<cq-item stxtap="Layout.setDataField('bid')">Bid</cq-item>
			<cq-item stxtap="Layout.setDataField('mid')">Mid</cq-item>
			<cq-item stxtap="Layout.setDataField('ask')">Ask</cq-item>
		</cq-menu-dropdown>
	</cq-menu>
</div>

setExtendedHours(node)

Convenience function to set extended hours mode from the 'Display' drop down.

Designed to be used as a helper method for the included WebComponents. A full tutorial on how to work with and customize the Web Components can be found here: Web Component Interface

See CIQ.Market and CIQ.ExtendedHours

Parameters:
Name Type Description
node HTMLElement

setFlippedChart(node)

Convenience function to set the Inverted Y-axis mode from the 'Display' drop down.

Designed to be used as a helper method for the included WebComponents. A full tutorial on how to work with and customize the Web Components can be found here: Web Component Interface

Leverages CIQ.ChartEngine#flipChart

Parameters:
Name Type Description
node HTMLElement
Since:
  • 6.3.0

setL2Heatmap(node)

Parameters:
Name Type Description
node HTMLElement

setLanguage()

Populates and displays the language widget.

Designed to be used as a helper method for the included WebComponents. A full tutorial on how to work with and customize the Web Components can be found here: Web Component Interface


setMarketDepth(node)

Parameters:
Name Type Description
node HTMLElement

setPeriodicity(node, periodicity, interval, timeUnit)

Convenience function to set periodicity from the menu drop down.

Designed to be used as a helper method for the included WebComponents. A full tutorial on how to work with and customize the Web Components can be found here: Web Component Interface

Leverages CIQ.ChartEngine#setPeriodicity

Parameters:
Name Type Description
node HTMLElement
periodicity number

Same as period from CIQ.ChartEngine#setPeriodicity

interval number

Same as interval from CIQ.ChartEngine#setPeriodicity

timeUnit number

Same as timeUnit from CIQ.ChartEngine#setPeriodicity


setRangeSlider(node)

Convenience function to toggle the range slider mode from the 'Display' drop down.

Designed to be used as a helper method for the included WebComponents. A full tutorial on how to work with and customize the Web Components can be found here: Web Component Interface

See CIQ.CIQ.RangeSlider

Parameters:
Name Type Description
node HTMLElement