Skip to main content

newOptionsTimeAndSalesWidget

newOptionsTimeAndSalesWidget is a constructor function for creating the Options Time and Sales widget.

Widget Constructor​

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

import { newOptionsTimeAndSalesWidget } from '@dx-display/widgets-options-time-and-sales'

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 = newOptionsTimeAndSalesWidget({
  element: domNode,
  providers: dataProviders,
})

Signature​

newOptionsTimeAndSalesWidget(props: WidgetConstructorProps): WidgetAPI

Returns​

An WidgetAPI object.

WidgetConstructorProps​

NameTypeDescription
elementHTMLElementA DOM element where the widget should be attached.
providersProvidersAn object with configuration for data providers. Refer to the Data Providers section for details
config optionalConfigInitial configuration of the widget
state optionalStateInitial state of the widget
theme optionalThemeName | ThemeInitial theme of the widget. Refer to the Styling section for details

Widget API​

getConfig​

Gets the current widget config.

Signature​

getConfig(): Config

Returns​

Config

setConfig​

Sets widget config.

Signature​

setConfig(config: Config): void

Parameters​

NameTypeDescription
configConfigConfiguration object. Omitted or undefined properties will be set to default

getState​

Gets the current widget state.

Signature​

getState(): State

Returns​

State

updateState​

Updates widget state.

Signature​

updateState(state: Partial<State>): void

Parameters​

NameTypeDescription
statePartial<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​

NameTypeDescription
stateChangeCallback(state: State) => voidFunction that will be called whenever the state is changed.

Or

NameTypeDescription
fieldkeyof StateThe state field to listen for.
fieldChangeCallback(value: State[keyof State]) => voidFunction 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​

NameTypeDescription
stateChangeCallback(state: State) => voidListener that will be removed.

Or

NameTypeDescription
fieldkeyof StateThe state field for which to remove a listener.
fieldChangeCallback(value: State[keyof State]) => voidListener 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​

NameTypeDescription
slotSlotThe place where a provided element is inserted.
elementHTMLElementAn 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 OptionsTimeAndSalesWidgetDataProviders {
  ipfPath: string
  ipfAuthHeader: string
  feedPath: string
  feedAuthHeader: string
  schedulePath: string
}

Properties​

NameTypeDescription
ipfPathstringA string containing the path to the endpoint.
ipfAuthHeaderstringA string containing the authentication header for the endpoint.
feedPathstringA string containing the path to the endpoint.
feedAuthHeaderstringA string containing the authentication header for the endpoint.
schedulePathstringA 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 OptionsTimeAndSalesWidgetConfig {
  symbolSearchTypes?: OptionTimeAndSalesWidgetSymbolSearchType[],
  symbolSearchViewMode?: SymbolSearchViewMode,
  timeFormatSelectorViewMode?: ToolbarSelectorViewMode,
  tradeTypeSelectorViewMode?: ToolbarSelectorViewMode,
  sortable?: boolean,
  filterable?: boolean,
  reorderable?: boolean,
  resizable?: boolean,
  columnSelectMenuEnabled?: boolean,
  delayNotificationEnabled?: boolean,
  symbolScheduleStatusEnabled?: boolean,
  timezone?: string,
  locale?: LocaleSettings,
}

Properties​

NameTypeDefaultDescription
symbolSearchTypes
Optional
OptionTimeAndSalesWidgetSymbolSearchType[]
[
 '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.
timeFormatSelectorViewMode
Optional
ToolbarSelectorViewMode
'available'
View mode of the time format in the toolbar.
tradeTypeSelectorViewMode
Optional
ToolbarSelectorViewMode
'available'
View mode of the valid trade type in the toolbar.
sortable
Optional
boolean
true
 A flag that controls the table sorting feature.
filterable
Optional
boolean
true
 A flag that controls the filtering function of table columns.
reorderable
Optional
boolean
true
A flag that controls the column reorder feature.
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 OptionsTimeAndSalesWidgetState {
  columns: OptionsTimeAndSalesColumnId[],
  symbol?: string,
  columnSizes: OptionsTimeAndSalesColumnSizes,
  filters: OptionsTimeAndSalesFilters,
  sort?: Sort<OptionsTimeAndSalesColumnId>,
  timeFormat: OptionsTimeAndSalesTimeFormat,
  tradeType: OptionsTimeAndSalesTradeType,
}

Properties​

NameTypeDefaultDescription
columnsOptionsTimeAndSalesColumnId[]
[
 'time',
 'symbol',
 'price',
 'size',
 'side',
 'exchange',
 'bid',
 'ask',
 'conditionsDescr',
 'volatility',
 'underlyingPrice'
]
A list of column identifiers that are added to the table. The columns are displayed in the order specified by the array.
symbol
Optional
string
undefined
A string containing the symbol by which the widget will display data.
columnSizesOptionsTimeAndSalesColumnSizes
{}
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.
filtersOptionsTimeAndSalesFilters
{}
An object that defines enabled filters and their parameters.
sort
Optional
Sort<OptionsTimeAndSalesColumnId>
undefined
An object that defines table sort.
timeFormatOptionsTimeAndSalesTimeFormat
'time-with-seconds'
Value that specifies time format in the time column.
tradeTypeOptionsTimeAndSalesTradeType
'only-valid'
value that specifies a kind of trades to show.

Type Reference​

Slot​

Type​

'header'

OptionsTimeAndSalesColumnId​

List of supported columns:

  • symbol: Symbol
  • time: Time
  • price: Price
  • size: Size
  • exchange: Exchange
  • side: Side
  • bid: Bid
  • ask: Ask
  • conditionsDescr: Conditions Description
  • underlyingPrice: Underlying Price
  • underlyingBidPrice: Underlying Bid Price
  • underlyingAskPrice: Underlying Ask Price
  • volatility: Implied Volatility
  • delta: Delta
  • gamma: Gamma
  • theta: Theta
  • rho: Rho
  • vega: Vega

Type​

string

OptionsTimeAndSalesTimeFormat​

Type​

'time-with-seconds' | 'time-with-milliseconds'

OptionsTimeAndSalesTradeType​

Type​

'all' | 'only-valid'

OptionsTimeAndSalesFilters​

Type​

Partial<Record<OptionsTimeAndSalesColumnId, Filter>>

OptionTimeAndSalesWidgetSymbolSearchType​

Type​

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

OptionsTimeAndSalesColumnSizes​

Type​

Partial<Record<OptionsTimeAndSalesColumnId, number>>

SymbolSearchViewMode​

Type​

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

ToolbarSelectorViewMode​

Type​

'available' | 'hidden'

Sort​

An object that defines table sort.

Type​

{
  property: OptionsTimeAndSalesColumnId,
  direction: SortDirection,
}

SortDirection​

Direction of the sort.

Type​

'ascending' | 'descending'

Filter​

Type​

{
  name: string,
  argument: A,
}

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'