Futures Table Widget

Tabular display of futures chains with the ability to connect to the futures charting widgets.

Installation

script

Example

                              window.dtn.futures.createFuturesTableWidget({
 


                                
});

Types

FuturesSymbol

type FuturesSymbol = string;

This type describe futures symbol data that may be used to supply the symbol property.

VisibleFields

type VisibleFields =
  | "LAST"
  | "OPEN"
  | "CLOSE"
  | "ASK"
  | "BID"
  | "CHANGE"
  | "HIGH"
  | "LOW"
  | "CONTRACT_HIGH"
  | "CONTRACT_LOW"
  | "LAST_UPDATE"
  | "SETTLE_DATE"
  | "SETTLE_PRICE"

This type describes all the available fields for customizing what data is shown in the table.

PriceFormat

type PriceFormat = "DECIMAL" | "TICK";

This type describes the format of the prices that may be used to supply the priceFormat property.

Configuration

apiKey

apiKey: string;

The widget access api key associated with your DTN account.

container

container: HTMLElement | string;

The container to mount the widget on. This can be a reference to an HTML element, or a valid selector string. If a string is encountered, document.querySelector will be used to search document for the container.

symbol

symbol: FuturesSymbol;

The futures symbol to render the table with.

visibleFields

visibleFields?: VisibleFields[] = ["LAST", "CHANGE", "HIGH", "LOW"];

This options allows you to customize what fields are displayed in the futures table. This is also responsible for defining the order of the columns in the table.

groupBy

groupBy?: boolean = true;

This options allows you to group futures based on their commodity type.

priceFormat

priceFormat: PriceFormat = "TICK"

Determines the format of the prices when returned. Decimal will provide regular decimal values, Tick will provide fractional values as associated with the commodity root. Default set to "TICK".

timezone

timezone: string;

This option allows you to change the timezone of the column/s with the type of date and time. Here are the only timezones that can be used for now ["CST", "EST", "PST", "GMT or UTC"]. If not set, or the value is unknown, the default will be "CST".

Methods

setSymbol

setSymbol: (
  symbol: FuturesSymbol
) => void;

Set a new symbol to populate the table with.

Callbacks

onFutureSelect

onFutureSelect: (tickerSymbol: string) => void;

This callback will be called whenever the chart button is clicked.

onOptionSelect

onOptionSelect: (tickerSymbol: string) => void;

This callback will be called whenever the option button is clicked.

Weather Widgets:

Markets Widgets:

Cash Bids Display Widgets:

News Widgets:

Premium Widgets: