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
|
- Since:
-
4.1.0 Layout no longer takes a node as its first parameter
Methods
-
addChart(node, position)
-
Adds a new chart in multi-chart environment.
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 The user interface element that enables users to select the chart language.
position
string Position to insert the new chart relative to the existing chart(s). Available values are
before
andafter
.- Since:
-
8.6.0
-
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 Argument Description node
HTMLElement <optional>
The HTML user interface element used to clear all studies from the chart.
-
getHeadsUp(node, headsUpType)
-
Activates the heads-up radio button on the drop-down menu.
Parameters:
Name Type Description node
HTMLElement The user interface element that allows users to select the heads-up display type.
headsUpType
String Identifies the heads-up type.
- Since:
-
8.9.0
-
getLanguage(node)
-
Displays the current language in 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
Parameters:
Name Type Description node
HTMLElement The user interface element that enables users to select the chart language.
- Since:
-
6.1.0 Defaults to English.
-
removeChart(node)
-
Removes the active chart if it is not the only one remaining.
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 The user interface element that enables users to select the chart language.
- Since:
-
8.6.0
-
setAggregationType(obj, aggregationType)
-
Convenience function to set the aggregation type from the Display drop-down 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
Leverages CIQ.ChartEngine#setAggregationType.
Parameters:
Name Type Description obj
CIQ.UI~Setter | null Either null or an object containing the user interface element, trigger event, and additional param object.
aggregationType
string The aggregation type to be set.
-
setAnimation(obj)
-
Convenience function to set animation mode from the drop-down 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
Parameters:
Name Type Description obj
CIQ.UI~Setter | null Either null or an object containing the user interface element, trigger event, and additional param object.
- Since:
-
8.4.0
-
setChartScale(obj, chartScale)
-
Convenience function to set the chart scale from the drop-down 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
Leverages CIQ.ChartEngine#setChartScale.
Parameters:
Name Type Description obj
CIQ.UI~Setter | null Either null or an object containing the user interface element, trigger event, and additional param object.
chartScale
String The type of scaling, such as "log", "linear", "percent", or "relative".
-
setChartType(obj [, chartType])
-
Convenience function to set the chart style or aggregation type from the Display drop-down 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
Leverages CIQ.ChartEngine#setChartType and CIQ.ChartEngine#setAggregationType.
Parameters:
Name Type Argument Description obj
CIQ.UI~Setter An object containing the user interface element, trigger event, and additional param object.
chartType
string <optional>
The chart style or aggregation type to be set. If not provided as a string, use the chart type defined in the node's
data-value
attribute. -
setCheckedState(node [, state])
-
Sets UI check state on a radio or checkbox/switch element.
Parameters:
Name Type Argument Description node
HTMLElement The user interface element that needs to be checked/unchecked.
state
boolean <optional>
Whether element is to be checked.
- Since:
-
8.8.0
-
setDataField(obj, field)
-
Deprecated. Use CIQ.UI.Layout#setYaxisField instead.
Helper function that exposes CIQ.CrossSection#setYaxisField to the layout for access in the web components.
Parameters:
Name Type Description obj
CIQ.UI~Setter | null Either null or an object containing the user interface element, trigger event, and additional param object.
field
string Specifies the type of values plotted on the y-axis of the cross section chart; for example, "yield", "bid", or "ask", which are the interest rate and trading prices of instruments in a term structure of interest rates.
- Since:
-
- 7.3.0
- 8.3.0 Deprecated.
- Deprecated:
-
setExtendedHours(obj)
-
Convenience function to set extended hours mode from the drop-down 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
See CIQ.Market and CIQ.ExtendedHours.
Parameters:
Name Type Description obj
CIQ.UI~Setter | null Either null or an object containing the user interface element, trigger event, and additional param object.
-
setFlippedChart(obj)
-
Convenience function to set the inverted y-axis mode from the drop-down 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
Leverages CIQ.ChartEngine#flipChart.
Parameters:
Name Type Description obj
CIQ.UI~Setter | null Either null or an object containing the user interface element, trigger event, and additional param object.
- Since:
-
6.3.0
-
setGroupField(obj, field)
-
Helper function that exposes CIQ.CrossSection#setGroupField to the layout for access by the web components.
Parameters:
Name Type Description obj
CIQ.UI~Setter | null Either null or an object containing the user interface element, trigger event, and additional param object.
field
string Specifies the field used to group items into subcurves; for example, "strike" or "expiration" for the strike price and expiration date of options.
- Since:
-
8.3.0
-
setHeadsUp( [node], headsUpType)
-
Convenience function to set the heads-up type from the drop-down menu.
Parameters:
Name Type Argument Description node
HTMLElement <optional>
The user interface element that allows users to set the heads-up type.
headsUpType
string The heads-up type to be set.
- Since:
-
8.9.0
-
setL2Heatmap(obj)
-
Parameters:
Name Type Description obj
CIQ.UI~Setter | null Either null or an object containing the user interface element, trigger event, and additional param object.
-
setLanguage(obj)
-
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
Parameters:
Name Type Description obj
CIQ.UI~Setter An object containing the user interface element, trigger event, and additional param object.
- Since:
-
8.5.0 Added
obj
parameter.
-
setMarketDepth(obj)
-
Parameters:
Name Type Description obj
CIQ.UI~Setter | null Either null or an object containing the user interface element, trigger event, and additional param object.
-
setOutliers(obj)
-
Convenience function that toggles the outliers layout property between on and off (true and false). Invoked from the drop-down menu.
Parameters:
Name Type Description obj
CIQ.UI~Setter | null Either null or an object containing the user interface element, trigger event, and additional param object.
- Since:
-
7.5.0
-
setPeriodicity(obj, periodicity, interval, timeUnit)
-
Convenience function to set periodicity from the drop-down 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
Leverages CIQ.ChartEngine#setPeriodicity.
Parameters:
Name Type Description obj
CIQ.UI~Setter | null Either null or an object containing the user interface element, trigger event, and additional param object.
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(obj)
-
Convenience function to toggle the range slider mode from the drop-down 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
See CIQ.RangeSlider.
Parameters:
Name Type Description obj
CIQ.UI~Setter | null Either null or an object containing the user interface element, trigger event, and additional param object.
-
setXaxisField(obj, field)
-
Helper function that exposes CIQ.CrossSection#setXaxisField to the layout for access by the web components.
Parameters:
Name Type Description obj
CIQ.UI~Setter | null Either null or an object containing the user interface element, trigger event, and additional param object.
field
string Specifies the type of values plotted on the x-axis of the cross section chart; for example, "strike" or "expiration" for the strike price and expiration date of options.
- Since:
-
8.3.0
-
setYaxisField(obj, field [, aggOperator])
-
Helper function that exposes CIQ.CrossSection#setYaxisField to the layout for access by the web components.
Parameters:
Name Type Argument Description obj
CIQ.UI~Setter | null Either null or an object containing the user interface element, trigger event, and additional param object.
field
string Specifies the type of values plotted on the y-axis of the cross section graph; for example, "yield", "bid", "mid", or "ask", which are the interest rate and trading prices for instruments in a term structure of interest rates.
aggOperator
string <optional>
Specifies how multiple values for the same record are aggregated. The value plotted on the y-axis is the result of the aggregation operation. See CIQ.CrossSection#setYaxisField for valid values.
- Since:
-
8.3.0
Example
<div class="ciq-dropdowns"> <cq-menu class="ciq-menu"> <cq-clickable stxbind="Layout.yaxisField" class="ciq-yaxisField-span">Yield</cq-clickable> <cq-menu-dropdown class="ciq-value-dropdown"> <cq-item stxtap="Layout.setYaxisField('yield')">Yield</cq-item> <cq-item stxtap="Layout.setYaxisField('bid')">Bid</cq-item> <cq-item stxtap="Layout.setYaxisField('mid')">Mid</cq-item> <cq-item stxtap="Layout.setYaxisField('ask')">Ask</cq-item> </cq-menu-dropdown> </cq-menu> </div>
-
showPeriodicity(stx, params)
-
Sets the display periodicity.
Usually this is called from an observer that is in CIQ.UI.Layout#periodicity
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 stx
CIQ.ChartEngine The chart object to examine for periodicity
params
Object Parameters
Properties
Name Type Description selector
HTMLElement The selector to update
-
toggleHelp(node)
-
Toggles display of cq-help components.
Parameters:
Name Type Description node
HTMLElement The user interface element that enables users to toggle the help.
- Since:
-
8.4.0