newOptionChainWidget

newOptionChainWidget is a constructor function for creating the Option Chain widget.

Call newOptionChainWidget to create a widget instance inside a browser DOM element.

import { newOptionChainWidget } from '@dx-display/widgets-option-chain'

const domNode = document.getElementById('widget-container')
const dataProviders = {
    ipfPath: '/your-path/ipf',
    ipfAuthHeader: 'your-header',
    feedPath: 'wss://your-path/feed',
    feedAuthHeader: 'your-header',
    schedulePath: '/api/schedule'
}
const widget = newOptionChainWidget({
  element: domNode,
  providers: dataProviders,
})

Signature

newOptionChainWidget(props: WidgetConstructorProps): WidgetAPI

Returns

An WidgetAPI object.

WidgetConstructorProps

Name	Type	Description
element	HTMLElement	A DOM element where the widget should be attached.
providers	Providers	An object with configuration for data providers. Refer to the Data Providers section for details
config optional	Config	Initial configuration of the widget
state optional	State	Initial state of the widget
theme optional	ThemeName \| Theme	Initial theme of the widget. Refer to the Styling section for details

Gets the current widget config.

getConfig(): Config

Config

Sets widget config.

setConfig(config: Config): void

Name	Type	Description
config	Config	Configuration object. Omitted or undefined properties will be set to default

Gets the current widget state.

getState(): State

State

Updates widget state.

updateState(state: Partial<State>): void

Name	Type	Description
state	Partial<State>	State object. Merges with the previous state object.

Sets up a function that will be called whenever the state or specified field is changed.

addStateListener(stateChangeCallback: (state: State) => void): void
addStateListener(field: keyof State, fieldChangeCallback: (field: State[keyof State]) => void): void

Name	Type	Description
stateChangeCallback	`(state: State) => void`	Function that will be called whenever the state is changed.

Name	Type	Description
field	`keyof State`	The state field to listen for.
fieldChangeCallback	`(value: State[keyof State]) => void`	Function that will be called whenever the specified field is changed.

Removes an state listener previously registered with addStateListener

removeStateListener(stateChangeCallback: (state: State) => void): void
removeStateListener(field: keyof State, fieldChangeCallback: (field: State[keyof State]) => void): void

Name	Type	Description
stateChangeCallback	`(state: State) => void`	Listener that will be removed.

Name	Type	Description
field	`keyof State`	The state field for which to remove a listener.
fieldChangeCallback	`(value: State[keyof State]) => void`	Listener that will be removed.

Inserts custom markup into widget UI. Refer to the Extend widget UI section for details.

setSlot(slot: Slot, element: HTMLElement): void

Name	Type	Description
slot	Slot	The place where a provided element is inserted.
element	HTMLElement	An element that is inserted.

Sets widget theme.

setTheme(theme: Theme | ThemeName): void

Destroys the widget.

unmount(): void

Data Providers

The Data Providers object supplies an information about the endpoints required by the widget, such as the path to the endpoint and the authorization key.

interface OptionChainWidgetDataProviders {
  ipfPath: string
  ipfAuthHeader: string
  feedPath: string
  feedAuthHeader: string
  schedulePath: string
}

Properties

Name	Type	Description
ipfPath	`string`	A string containing the path to the endpoint.
ipfAuthHeader	`string`	A string containing the authentication header for the endpoint.
feedPath	`string`	A string containing the path to the endpoint.
feedAuthHeader	`string`	A string containing the authentication header for the endpoint.
schedulePath	`string`	A string containing the path to the endpoint.

Configuration

Configuration is an object that defines the basic behavior of a widget and allows enabling or disabling widget features that cannot be configured within the widget's user interface.

Type

interface OptionChainWidgetConfig {
  symbolSearchTypes?: OptionChainWidgetSymbolSearchType[],
  symbolSearchViewMode?: SymbolSearchViewMode,
  showChart?: boolean,
  seriesSelectorViewMode?: ToolbarSelectorViewMode,
  strikesSelectorViewMode?: ToolbarSelectorViewMode,
  extendedCheckboxEnabled?: boolean,
  resizable?: boolean,
  columnSelectMenuEnabled?: boolean,
  delayNotificationEnabled?: boolean,
  symbolScheduleStatusEnabled?: boolean,
  timezone?: string,
  locale?: LocaleSettings,
}

Properties

Name	Type	Default	Description
symbolSearchTypes ^Optional	OptionChainWidgetSymbolSearchType[]	[ 'STOCK', 'FUTURE', 'ETF', 'INDEX' ]	A list of instrument types uses for symbols search.
symbolSearchViewMode ^Optional	SymbolSearchViewMode	'available'	View mode of the symbol search in the toolbar.
showChart ^Optional	boolean	true	A flag that controls the chart visibility in the information panel under the toolbar.
seriesSelectorViewMode ^Optional	ToolbarSelectorViewMode	'available'	View mode of the series menu in the toolbar.
strikesSelectorViewMode ^Optional	ToolbarSelectorViewMode	'available'	View mode of the strikes select in the toolbar.
extendedCheckboxEnabled ^Optional	boolean	true	A flag that controls the extended checkbox visibility in the toolbar.
resizable ^Optional	boolean	true	A flag that controls the column resizing feature.
columnSelectMenuEnabled ^Optional	boolean	true	A flag that controls the column select menu feature visibility. Disabling this feature will lead to inability to change columns.
delayNotificationEnabled ^Optional	boolean	false	A flag that controls a visibility of an data delay notification.
symbolScheduleStatusEnabled ^Optional	boolean	false	A flag that controls a visibility of symbol schedule status in widget toolbar
timezone ^Optional	string	client environment timezone	String corresponds to IANA Time Zone name used to display dates in spicified time zone
locale ^Optional	LocaleSettings	{ language: 'en', dateLocale: 'en-GB', numberLocale: 'en-GB' }	An object that defines the language and regional settings of the widget.

State

State is an object that represents the state of the widget.

Type

interface OptionChainWidgetState {
  columns: OptionChainComlumn[],
  symbol?: string,
  columnSizes: OptionChainColumnSizes,
  isExtended: boolean,
  focusedSeriesName?: string,
  expandedSeriesNames: string[],
  strikeAmount: StrikeAmount,
}

Properties

Name	Type	Default	Description
columns	OptionChainComlumn[]	[]	A list of column identifiers that are added to the table.
symbol ^Optional	string	undefined	A string containing a selected symbol.
columnSizes	OptionChainColumnSizes	{}	An object that specifies column sizes where key is a column identificator and value is a column width in pixels. If the object does not contain a column width, then default width is used.
isExtended	boolean	false	A flag that controls the visibility of additional information in the panel below the widget's toolbar.
focusedSeriesName ^Optional	string	undefined	A string containing a series name. It is set when user selects a series from the "series" dropdown menu in the toolbar.
expandedSeriesNames	string[]	[]	A list of the series names that is expanded in the table.
strikeAmount	StrikeAmount	4	call\put pairs in option series.

Type Reference

Slot

Type

'header'

StrikeAmount

Type

2 | 4 | 6 | 8 | 'all'

OptionChainComlumn

List of supported columns:

symbol: Symbol
opol: OPOL
symbolDescription: Description
currency: Trading Currency
expDate: Expiration Date
strike: Strike
bidPrice: Bid Price
bidSize: Bid Size
bidTime: Bid Time
askPrice: Ask Price
askSize: Ask Size
askTime: Ask Time
spread: Spread
spreadPercent: Spread, %
midPrice: Mid Price
lastPrice: Last Price
dayVwap: Volume-Weighted Average Price
dayVolume: Volume
lastUpdateTime: Last Update Time
dayBidVolume: Volume Bid
dayAskVolume: Volume Ask
openInterest: Open Interest
prevDayClosePrice: Previous day closing price
changePrevDayClosePrice: Change Previous Day
changePrevDayClosePricePercent: Change Previous Day, %
dayOpenPrice: Open
changeCurDayOpenPrice: Change from Open
changeCurDayOpenPricePercent: Change from Open, %
gapDay: Gap
gapDayPercent: Gap, %
dayHighPrice: High
dayLowPrice: Low
rangeDay: Day range
positionInRangeDayPercentage: Position in Day Range, %
markPrice: Mark Price
markChange: Mark Change
optTheoPriceTime: Option Analytics Calculation Time
optTheoPrice: Option Theoretical Price
optUnderlyingPrice: Option Underlying Price
optExpDivRate: Option Implied Exponential Dividend Rate
optImpVol: Option Implied Volatility
optDelta: Option Delta
optGamma: Option Gamma
optTheta: Option Theta
optRho: Option Rho
optVega: Option Vega
optGreeksTime: Option Greeks Calculation Time
tradingStatus: Trading status
priceType: Price Type
sessionEndTime: Current trading session end time

Type

string

OptionChainWidgetSymbolSearchType

Type

'STOCK' | 'FUTURE' | 'ETF' | 'INDEX'

SymbolSearchViewMode

Type

'available' | 'hidden' | 'value-only'

ToolbarSelectorViewMode

Type

'available' | 'hidden'

OptionChainColumnSizes

Type

Partial<Record<string, number>>

LocaleSettings

An object that defines the language and regional settings of the widget.

Type

{
  language: Language,
  dateLocale: string,
  numberLocale: string,
}

Language

Type

'en' | 'de' | 'ar'

Widget Constructor​

Signature​

Returns​

WidgetConstructorProps​

Widget API​

getConfig​

Signature​

Returns​

setConfig​

Signature​

Parameters​

getState​

Signature​

Returns​

updateState​

Signature​

Parameters​

addStateListener​

Signature​

Parameters​

removeStateListener​

Signature​

Parameters​

setSlot​

Signature​

Parameters​

setTheme​

Signature​

unmount​

Signature​

Data Providers​

Properties​

Configuration​

Type​

Properties​

State​

Type​

Properties​

Type Reference​

Slot​

Type​

StrikeAmount​

Type​

OptionChainComlumn​

Type​

OptionChainWidgetSymbolSearchType​

Type​

SymbolSearchViewMode​

Type​

ToolbarSelectorViewMode​

Type​

OptionChainColumnSizes​

Type​

LocaleSettings​

Type​

Language​

Type​

Widget Constructor

Signature

Returns

WidgetConstructorProps

Widget API

getConfig

Signature

Returns

setConfig

Signature

Parameters

getState

Signature

Returns

updateState

Signature

Parameters

addStateListener

Signature

Parameters

removeStateListener

Signature

Parameters

setSlot

Signature

Parameters

setTheme

Signature

unmount

Signature

Data Providers

Properties

Configuration

Type

Properties

State

Type

Properties

Type Reference

Slot

Type

StrikeAmount

Type

OptionChainComlumn

Type

OptionChainWidgetSymbolSearchType

Type

SymbolSearchViewMode

Type

ToolbarSelectorViewMode

Type

OptionChainColumnSizes

Type

LocaleSettings

Type

Language

Type