newDepthOfMarketWidget
newDepthOfMarketWidget is a constructor function for creating the Depth of Market widget.
Widget Constructor
Call newDepthOfMarketWidget to create a widget instance inside a browser DOM
element.
import { newDepthOfMarketWidget } from '@dx-display/widgets-depth-of-market'
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 = newDepthOfMarketWidget({
element: domNode,
providers: dataProviders,
})
Signature
newDepthOfMarketWidget(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 DepthOfMarketWidgetDataProviders {
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 DepthOfMarketWidgetConfig {
symbolSearchTypes?: DepthOfMarketWidgetSymbolSearchType,
dataExportEnabled?: boolean,
symbolSearchViewMode?: SymbolSearchViewMode,
depthSelectorViewMode?: ToolbarSelectorViewMode,
visualizationSelectorViewMode?: ToolbarSelectorViewMode,
sortBySelectorViewMode?: ToolbarSelectorViewMode,
delayNotificationEnabled?: boolean,
symbolScheduleStatusEnabled?: boolean,
symbolSummaryPanelEnabled?: boolean,
resizable?: boolean,
locale?: LocaleSettings,
}Properties
| Name | Type | Default | Description |
|---|---|---|---|
| symbolSearchTypes Optional | DepthOfMarketWidgetSymbolSearchType | [ 'STOCK', 'FUTURE', 'OPTION' ] | A list of instrument types used for symbols search. |
| dataExportEnabled Optional | boolean | false | A flag that controls a visibility of an export button. |
| symbolSearchViewMode Optional | SymbolSearchViewMode | 'available' | View mode of the symbol search in the toolbar. |
| depthSelectorViewMode Optional | ToolbarSelectorViewMode | 'available' | View mode of the depth select in the toolbar. |
| visualizationSelectorViewMode Optional | ToolbarSelectorViewMode | 'available' | View mode of the visualization select in the toolbar. |
| sortBySelectorViewMode Optional | ToolbarSelectorViewMode | 'available' | View mode of the sorting 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 |
| symbolSummaryPanelEnabled Optional | boolean | true | A flag that controls a visibility of panel with symbol data |
| resizable Optional | boolean | true | A flag that controls the column resizing feature. |
| 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 DepthOfMarketWidgetState {
depth: number,
visualization: DepthOfMarketVisualization,
sortBy: DepthOfMarketSortBy,
symbol?: string,
}Properties
| Name | Type | Default | Description |
|---|---|---|---|
| depth | number | 10 | value that represents a depth of orderbook. |
| visualization | DepthOfMarketVisualization | 'Col3' | value that represents a type of data visualization. |
| sortBy | DepthOfMarketSortBy | 'Price' | value that specifies data sorting. |
| symbol Optional | string | undefined | A string containing the symbol by which the widget will display data. |