newOptionChartsWidget
newOptionChartsWidget is a constructor function for creating the Option Charts widget.
Widget Constructor
Call newOptionChartsWidget to create a widget instance inside a browser DOM
element.
import { newOptionChartsWidget } from '@dxfeed-widgets/option-charts'
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 = newOptionChartsWidget({
element: domNode,
providers: dataProviders,
})
Signature
newOptionChartsWidget(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 |
Widget API
getConfig
Gets the current widget config.
Signature
getConfig(): Config
Returns
setConfig
Sets widget config.
Signature
setConfig(config: Config): void
Parameters
| Name | Type | Description |
|---|---|---|
| config | Config | Configuration object. Omitted or undefined properties will be set to default |
getState
Gets the current widget state.
Signature
getState(): State
Returns
updateState
Updates widget state.
Signature
updateState(state: Partial<State>): void
Parameters
| Name | Type | Description |
|---|---|---|
| state | Partial<State> | State object. Merges with the previous state object. |
addStateListener
Sets up a function that will be called whenever the state or specified field is changed.
Signature
addStateListener(stateChangeCallback: (state: State) => void): void
addStateListener(field: keyof State, fieldChangeCallback: (field: State[keyof State]) => void): void
Parameters
| Name | Type | Description |
|---|---|---|
| stateChangeCallback | (state: State) => void | Function that will be called whenever the state is changed. |
Or
| 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. |
removeStateListener
Removes an state listener previously registered with addStateListener
Signature
removeStateListener(stateChangeCallback: (state: State) => void): void
removeStateListener(field: keyof State, fieldChangeCallback: (field: State[keyof State]) => void): void
Parameters
| Name | Type | Description |
|---|---|---|
| stateChangeCallback | (state: State) => void | Listener that will be removed. |
Or
| 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. |
setSlot
Inserts custom markup into widget UI. Refer to the Extend widget UI section for details.
Signature
setSlot(slot: Slot, element: HTMLElement): void
Parameters
| Name | Type | Description |
|---|---|---|
| slot | Slot | The place where a provided element is inserted. |
| element | HTMLElement | An element that is inserted. |
setTheme
Sets widget theme.
Signature
setTheme(theme: Theme | ThemeName): void
unmount
Destroys the widget.
Signature
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 OptionChartsWidgetDataProviders {
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 OptionChartsWidgetConfig {
symbolSearchTypes?: OptionChartsWidgetSymbolSearchType[],
symbolSearchViewMode?: SymbolSearchViewMode,
seriesTogglePanelEnabled?: boolean,
optionTypeSelectorViewMode?: ToolbarSelectorViewMode,
chainPropertySelectorViewMode?: ToolbarSelectorViewMode,
maturityDimensionSelectorViewMode?: ToolbarSelectorViewMode,
underlyingDimensionSelectorViewMode?: ToolbarSelectorViewMode,
delayNotificationEnabled?: boolean,
symbolScheduleStatusEnabled?: boolean,
locale?: LocaleSettings,
}Properties
| Name | Type | Default | Description |
|---|---|---|---|
| symbolSearchTypes Optional | OptionChartsWidgetSymbolSearchType[] | [ '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. |
| seriesTogglePanelEnabled Optional | boolean | true | A flag that controls the series panel visibility in the information panel under the toolbar. |
| optionTypeSelectorViewMode Optional | ToolbarSelectorViewMode | 'available' | View mode of the option type slector in the toolbar. |
| chainPropertySelectorViewMode Optional | ToolbarSelectorViewMode | 'available' | View mode of the chain property select in the toolbar. |
| maturityDimensionSelectorViewMode Optional | ToolbarSelectorViewMode | 'available' | View mode of the maturity dimension select in the toolbar. |
| underlyingDimensionSelectorViewMode Optional | ToolbarSelectorViewMode | 'available' | View mode of the underlying dimension select in the toolbar. |
| 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 |
| locale Optional | LocaleSettings | {
language: 'en',
dateLocale: '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 OptionChartsWidgetState {
symbol?: string,
chainProperty: OptionChartsChainProperty,
maturityDimension: MaturityDimension,
underlyingDimension: UnderlyingDimension,
optionType: OptionSideType,
enabledSeries?: string[],
}Properties
| Name | Type | Default | Description |
|---|---|---|---|
| symbol Optional | string | undefined | A string containing the symbol by which the widget will display data. |
| chainProperty | OptionChartsChainProperty | 'volatility' | A property of the selected option contract. |
| maturityDimension | MaturityDimension | 'expiration' | A maturity dimension of the selected option contract. |
| underlyingDimension | UnderlyingDimension | 'strike' | A undelying dimension in relation to the selected chain property. |
| optionType | OptionSideType | 'call' | Type of the option |
| enabledSeries Optional | string[] | [] | A list of shown option series. |
Type Reference
OptionChartsChainProperty
Type
'volatility' | 'delta' | 'gamma' | 'vega' | 'theta' | 'rho' | 'theoPrice'