newNewsWidget
newNewsWidget is a constructor function for creating the News widget.
Widget Constructor
Call newNewsWidget to create a widget instance inside a browser DOM
element.
import { newNewsWidget } from '@dx-display/widgets-market-overview'
const domNode = document.getElementById('widget-container')
const dataProviders = {
ipfPath: '/your-path/ipf',
ipfAuthHeader: 'your-header',
newsPath: '/api/news',
newsAuthHeader: 'your-header',
schedulePath: '/api/schedule'
}
const widget = newNewsWidget({
element: domNode,
providers: dataProviders,
})
Signature
newNewsWidget(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 NewsWidgetDataProviders {
ipfPath: string
ipfAuthHeader: string
newsPath: string
newsAuthHeader: 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. |
| newsPath | string | A string containing the path to the endpoint. |
| newsAuthHeader | 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 NewsWidgetConfig {
symbolSearchTypes?: NewsWidgetSymbolSearchType[],
symbolSearchViewMode?: SymbolSearchViewMode,
autoRefeshRate?: number,
refreshButtonEnabled?: boolean,
symbolScheduleStatusEnabled?: boolean,
timezone?: string,
locale?: LocaleSettings,
}Properties
| Name | Type | Default | Description |
|---|---|---|---|
| symbolSearchTypes Optional | NewsWidgetSymbolSearchType[] | ['STOCK', 'INDEX'] | A list of instrument types uses for symbols search. |
| symbolSearchViewMode Optional | SymbolSearchViewMode | available | View mode of the symbol search in the toolbar. |
| autoRefeshRate Optional | number | 60 | A number that specifies the frequency of data updates in the widget in seconds. |
| refreshButtonEnabled Optional | boolean | true | A flag that controls the refresh button visibility in the toolbar. |
| 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 NewsWidgetState {
symbols: string[],
}Properties
| Name | Type | Default | Description |
|---|---|---|---|
| symbols | string[] | [] | A list of strings containing symbols for which news will be displayed. |