new TFC(config)
Trade From Chart object (TFC). TFC should be constructed once and associated with an STXChart (stx) object. It should also be passed a valid STX.Account which can be used for querying and placing orders. The TFC object creates and manages a number of DOM elements which are located in stx-tfc.html.
See STX.Account for account data format and loading guidance.
See Trade From Chart introduction for implementatin details.
Parameters:
Name | Type | Description | ||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
config |
object | Configuration object Properties
|
Members
-
dom :Object
-
Holds references to the top level DOM elements that are used with TFC. These elements are appended to the chart container in STX.TFC.prototype.construct.
Type:
- Object
Properties:
Name Type Description dragLineAbove
HTMLElement The draggable line that is above the price (stop or limit)
dragLineCenter
HTMLElement The draggable line at the center of a limit/stop order
dragLineBelow
HTMLElement The draggable line that is below the price (stop or limit)
marketOrder
HTMLElement The market order widget
limitOrder
HTMLElement The limit/stop order widget
otoAbove
HTMLElement The OTO widget above the dragLineAbove
otoBelow
HTMLElement The OTO widget below the dragLineBelow
ocoOrder
HTMLElement The OCO order widget (located below the ocoBelow)
ocoAbove
HTMLElement The OCO widget that is the above line
ocoBelow
HTMLElement The OCO widget that is the below line
shadeAbove
HTMLElement Shading above an OCO
shadeBelow
HTMLElement Shading below an OCO
-
elements :Object
-
Contains references to all of the individual HTML elements that may need to be referenced. Each of these elements would be a sub element of one of the top level elements contained in STX.TFC.prototype.dom.
Type:
- Object
-
ephemeralNodes :Object
-
When a template is instantiated, a reference is saved in ephemeralNodes so that it can be deleted at a future time
Type:
- Object
Properties:
Name Type Description openOrders
array Array of instantiated openOrders templates
-
Contains references to each type of action. For each action a menu item is specified as "node". The dom array should contain each of the TFC components that are to be enabled for that type of order
Type:
- Object
-
templates :Object
-
Contains references to templates (HTML objects) that are reusable
Type:
- Object
Properties:
Name Type Description openOrderMarker
HTMLElement The template used to create open order markers
Methods
-
addOTOLimit( [initialPrice])
-
Adds a limit widget to an active buy or short trade. The limit widget will be either on the bottom or top depending on whether it is a buy or short trade and the user can position it. When a limit (or stop) is added to such a trade, it will be placed as an OTO (one trigger other) trade.
Parameters:
Name Type Argument Description initialPrice
number <optional>
The initial price to place the trade. If not set then the price will be computed visually, so that the limit widget does not overlap the buy/short widget.
-
addOTOStop( [initialPrice])
-
Adds a stop widget to an active buy or short trade. The stop widget will be either on the bottom or top depending on whether it is a buy or short trade and the user can position it. When a stop (or limit) is added to such a trade, it will be placed as an OTO (one trigger other) trade.
Parameters:
Name Type Argument Description initialPrice
number <optional>
The initial price to place the trade. If not set then the price will be computed visually, so that the stop widget does not overlap the buy/short widget.
-
adjustMarker()
-
Adjusts the size of the "holder" whenever the chart panel is resized
- To Do:
-
- Abstract along with Marker holders
-
cancelOpenOrder()
-
Places a cancel request for the current open order. Cancel requests are deferred through the brokerage Account object.
-
changePositionsView(viewType)
-
This changes the view of the positions section. The following views are supported: summary view: symbol, quantity, basis price, gl, gl% (positions only) lots view: symbol date, quantity, basis price, price, gl% (trades only) performance view: symbol, basis value, mv, gl% (positions only) maintenance view: symbol, price, gl%, close (positions) quantity, sl, tp, gl%, close (trades)
This will set the view type of the TFC object
Parameters:
Name Type Description viewType
string View type, see above for supported views
-
changeSymbol()
-
This method should be called whenever the symbol is changed. Any existing, unfinished orders will be closed out. New open orders will be fetched and displayed.
-
clearActive()
-
Clears out the "active" class from menu items, so that they no longer have active styling. Also clears the share and currency input boxes. Any existing trading UI elements will be closed except for the market order widget which will remain open.
-
clearEphemeral(which)
-
Removes all of the ephemeral nodes (open order tags). This occurs typically when the symbol is changed. Or TFC is disabled.
Parameters:
Name Type Description which
string Which ephemeral nodes to clear out (i.e. "openOrders")
-
closeTFC()
-
Closes Trade From Chart. Any active trading elements are hidden. The chart itself is scrolled back to its initial margins. Open orders remain displayed.
-
configureMenu()
-
The TFC menu is dynamic based on whether the account contains a current position for the enables security, and whether that position is long or short. This method configures the menu as such by looking at the account's current position for the enabled security.
-
confirmCloseAllPositions()
-
Creates a confirmation dialog for closing all trades/positions. Once the confirmation is made the call to close all is made to the account.
-
confirmClosePosition()
-
Creates a confirmation dialog for closing one position.
-
confirmCloseTrade()
-
Creates a confirmation dialog for closing one trade.
-
confirmOCO()
-
Creates a confirmation dialog for an OCO (one cancels the other) order. This will be used for straddles, strangles and brackets. This method will return without enabling the dialog if the quantity has not been specified.
-
confirmOrder(order)
-
Creates a confirmation dialog for an order. This method will return without enabling the dialog if no quantity has been specified.
Parameters:
Name Type Description order
Object The order to place
-
confirmOrPlaceOrder(type, action)
-
Either confirms or places the order depending on whether this.config.skipConfirms is set to true or not
Parameters:
Name Type Description type
string Either "order","oco" or "replace" depending on the type of order
action
string The order action ("limit_buy","limit_sell","limit_short","limit_cover")
-
confirmReplace()
-
Creates the confirmation dialog for a replace order. This does nothing if no change is detected between the original and new orders. The class "no-change" is appended to an html element in the dialog if no change in that parameter occurred, for instance quantity may not change but price may. This class can be used to style the dialog to indicate which values are changing.
-
confirmVspTrade()
-
Creates a confirmation dialog for reducing one trade (vsp).
-
construct(config)
-
This constructs the Trade From the Chart object. It is called from the actual object constructor. Within, we instantiate all of the components that can be used in TFC and we set up all of the event handlers. TFC makes use of the "STX.safe" event handlers to seamlessly handle both touch and mouse events through one interface.
Parameters:
Name Type Description config
object Configuration object
Properties
Name Type Argument Description stx
object The chart object to enable TFC.
account
object Valid STX.Account object for querying brokerage and placing trades
chart
object <optional>
The specific chart (panel) for trading componentry. Defaults to the default chart.
skipConfirms
boolean <optional>
If set to true then there will be no confirm messages. Pressing buy or sell buttons will place a trade!
-
createDescription(order)
-
Creates a text printable description of an order. This is used when generating various types of order tickets.
Parameters:
Name Type Description order
object An order object
Returns:
A text description of the order
- Type
- string
-
createOCOFromGUI()
-
Creates an OCO order from the position and input values in the GUI. The OCO is an array consisting of two orders. This format can be received by the order interface in STX.Account.
Returns:
A tuple containing the two orders
- Type
- array
-
createOpenOrderMarker(openOrder [, baseOrderMarker])
-
Creates the open order markers and attaches safe mouse/touch events to them. An open order can be modified by clicking on it. Also, crosshairs are turned off as a user hovers over an open order marker. This method is called recursively for OTO orders. OTO orders are given the "pending" class attachment to render them differently. Clicking on an OTO pulls up the modification of the base order (including OTO legs).
Parameters:
Name Type Argument Description openOrder
object An open order in the expected format
baseOrderMarker
object <optional>
The linked order if it is an OTO order.
-
createOrderFromGUI(action)
-
Creates an order from the positioning and input values of the GUI elements. The order will be in a format that can be placed through the STX.Account interface. This will include OTO orders, but not OCO orders which are created in STX.TFC.prototype.createOCOFromGUI.
Parameters:
Name Type Description action
string The order type ("limit_buy","limit_sell","limit_short","limit_cover")
Returns:
The order
- Type
- object
-
createReplaceFromGUI()
-
Creates a replace order from the positioning and input values of the GUI elements. The order will be in a format that can be placed through the STX.Account interface. This will include OTO orders. The format for replace orders is to create a an object for each order parameter that includes a "old" and "new" value.
Returns:
The order
- Type
- object
-
crosshairsOff()
-
Turns the crosshairs off while the mouse is passing over an object such as an open order marker
-
crosshairsOn()
-
Turns the crosshairs on when the mouse passes out of an object such as an open order marker
-
deriveOpenOrderMarkers()
-
Creates open order markers from the openOrders in the Account object
-
dragAboveLine(e)
-
Called from an STX.safeDrag operation when the above line has been grabbed. Recalculates the above price and repositions the above elements.
Parameters:
Name Type Description e
Event A JS event from a STX.safeDrag operation (displacementY is expected)
-
dragBelowLine(e)
-
Called from an STX.safeDrag operation when the below line has been grabbed. Recalculates the below price and repositions the below elements.
Parameters:
Name Type Description e
Event A JS event from a STX.safeDrag operation (displacementY is expected)
-
dragCenterLine(e)
-
Called from an STX.safeDrag operation when the center line has been grabbed. Recalculates the center price and repositions the center elements.
Parameters:
Name Type Description e
Event A JS event from a STX.safeDrag operation (displacementY is expected)
-
dragMarketOrder(e)
-
Callback method for when marker order widget is dragged. This does nothing but reposition the widget for the convenience of the user.
Parameters:
Name Type Description e
Event The mouse or touch event
-
dragOrdersHeader(e)
-
Called from an STX.safeDrag operation when the open orders header has been grabbed.
Parameters:
Name Type Description e
Event A JS event from a STX.safeDrag operation (displacementY is expected)
-
enableAccount(account)
-
Enables an account. Without an enabled account TFC will not operate.
Parameters:
Name Type Description account
STX.TFC.Account The account to enable
-
enableBracket( [params])
-
Enables a bracket order. A bracket order is, specifically, an OCO (one cancels the other) with stop and limit legs, to close an open position. The bracket order will calculate the risk/reward for the open position. Note that the system does not support modification of an OCO specifically but rather modification of one or the other legs. If the brokerage supports/requires modification of a complete OCO, then the translation layer should make that adjustment.
Parameters:
Name Type Argument Description params
object <optional>
Initial parameters, only used when bracketing a specific trade or position to obtain the current quantity.
-
enableBuy( [params])
-
Enables a buy order.
Note the concept of "limit" and "stop" lose some of their meaning in the context of trading from the chart. What we are actually doing is setting a price that, if the security hits that price, creates a market order. This is the true and original meaning of a limit or stop order. The distinction regarding which way the stock is traveling is not significant in the context of trading from the chart. As such, a "limit" order in this context could be a stop or a limit when initiating a trade.
However, when closing a position, the meaning of stop and limit take on more significance. When closing a position, we want to "stop our loss" or "limit our gains" and thus when we place a bracket (or one leg of a bracket) around an initial positions, we do use the "stop" and "loss" terminology.
The "buy" order is used only for initiating a long position. @see STX.TFC.prototype.enableCover for covering a short position.
Parameters:
Name Type Argument Description params
object <optional>
Initial parameters for the order, only used if we are modifying an open order and need to derive the initial price from that order.
-
enableCover( [params])
-
Enables a buy to cover order (closing a short position)
Parameters:
Name Type Argument Description params
object <optional>
Initial parameters, only used when modifying an open order to obtain the current limit/stop price.
-
enableMarket()
-
Enables the market order widget
-
enableSell( [params])
-
Enables a sell order.
Parameters:
Name Type Argument Description params
object <optional>
Initial parameters for the order, only used when modifying an open order to obtain the current limit/stop price.
-
enableShort( [params])
-
Enable a short order (selling to open a position)
Parameters:
Name Type Argument Description params
object <optional>
Initial parameters, only used when modifying an open order to obtain the current limit/stop price.
-
enableStraddle()
-
Enable a straddle order. A straddle is, specifically, an OCO (one cancels the other) to open a position. The goal of the straddle is to capture a breakout from a presumed trading range. The resulting position may be either long or short.
-
enableStrangle()
-
Enable a strangle order. A strangle is, specifically, an OCO (one cancels the other) to open a position. The goal of the straddle is to profit when a security bounces within a presumed trading range. The resulting position may be either long or short.
-
endDrag(e, node)
-
End method for a drag operation. Callback from STX.safeDrag
Parameters:
Name Type Description e
Event The mouse or touch event
node
HTMLElement The element that was dragged
-
establishMenu()
-
Adds touch/click events to menu items
-
formatPrice(price)
-
Formats a price according to the conventions used on the y-axis. This should ensure that trade prices are always the same number of decimal places as the security currently trades. It will further ensure that decimal places do not exceed this.tradability.maxDecimalPlaces
Parameters:
Name Type Description price
number The price to format
Returns:
The price formatted as text, fixed to the appropriate number of decimal places
- Type
- string
-
getCurrentPriceForOrder()
-
Gets the current price for placing an order. Will return bid or ask if available, otherwise close. It will adjust to ensure it is within the stx.chart.yAxis.minimumPriceTick range param {string} activeTrade Type of order being placed
- Since:
-
- 15-07-01
Returns:
Bid or Ask or Close, depending on the order side
- Type
- number
-
hideAllDOM()
-
Hides all of the top level widgets contained in STX.TFC.prototype.dom. This is called when closing the TFC.
-
initializeOrderPrice(params)
-
Sets the initial order price. This is either the current quote for the security or, if modifying an order the current limit or stop price for the order.
Parameters:
Name Type Description params
object Optional parameters
-
instantiateTemplate(template, which)
-
Instantiates a new element from a template. The new element is ephemeral, and stored in STX.TFC.prototype.ephemeralNodes.
Parameters:
Name Type Description template
HTMLElement The template to utilize
which
string Which type of ephemeral node this is (i.e. "openOrders")
Returns:
The newly instantiated node
- Type
- HTMLElement
-
locationFromPrice(p)
-
Returns the y-position for a node given the price
Parameters:
Name Type Description p
number The requested price
Returns:
The y-position (within the chart panel)
- Type
- number
-
modalBegin()
-
Puts the chart into a modal mode when the user is mousing over a TFC element. This prevents the chart from scrolling with mouse movements or intercepting key strokes.
-
modalEnd()
-
Takes the chart out of modal mode when the user mouses out of a TFC element.
-
modifyOpenOrder(openOrderMarker)
-
Enables/creates the widgets necessary to modify an open order. The same widgets that are used to create a new order are used, so the main job of this function is to figure out the type of order and instantiate those widgets at the price levels of the current open order.
Parameters:
Name Type Description openOrderMarker
HTMLElement The open order marker to modify. It is assumed that the marker contains a reference to the actual open order.
-
newTrade(componentName [, params])
-
Creates a new trade of the requested type. Crosshairs are automatically turned off, but the prior crosshair state is remembered for when TFC is closed. The chart is scrolled left in order to make room for the TFC widgets.
Parameters:
Name Type Argument Description componentName
string The component to enable (i.e. "enableMarket")
params
object <optional>
If the result of the user clicking on an open order marker to modify, then the open order will be passed in the params.
-
openTFC()
-
Opens Trade From Chart. The menu is configured for the current security and open orders are retrieved and displayed.
-
overlap(a, b)
-
Determines whether a and b overlap vertically on the screen. This method is specific to TFC, assuming that elements are positioned using style.top.
Parameters:
Name Type Description a
HTMLElement The first element
b
HTMLElement The second element
Returns:
True if they overlap, otherwise false.
- Type
- boolean
-
placeOrder(order)
-
Places an order or modification. Defers to the current brokerage Account object. When the order is placed the widgets are cleared out unless the user is trading with market orders in which case the widget remains in place.
Parameters:
Name Type Description order
object The order to place
-
populateMarket()
-
Populates the market order widget with the position's shares
-
positionAboveLine(price)
-
Positions the "above line" which is the top line in an OCO or OTO order. For OTO orders, it is made sure that the above element does not overlap the order element, but does allow the above line to slide underneath.
Parameters:
Name Type Description price
number The price to set the above line
-
positionAtPrice(price, nodes [, where] [, noOverlap] [, keepOnChart])
-
Positions nodes at the given price.
Parameters:
Name Type Argument Description price
number The price (relative to the y-axis)
nodes
array An array of nodes to move to the desired location
where
string <optional>
If either "top" or "bottom", then the node will not be allowed to overlap the noOverlap nodes
noOverlap
array <optional>
An array of nodes which cannot be overlapped
keepOnChart
boolean <optional>
If true then the nodes will not be allowed to move off the chart
-
positionBelowLine(price)
-
Positions the "below line" which is the bottom line in an OCO or OTO order. For OTO orders, it is made sure that the below element does not overlap the order element, but does allow the below line to slide underneath.
Parameters:
Name Type Description price
number The price to set the below line
-
positionCenterLine(price [, keepOnChart])
-
Positions the center line at the requested price. The center line is the line that runs through the middle of a buy,sell,short,cover widget and represents the limit or stop price for the trade.
Parameters:
Name Type Argument Default Description price
number The price to set the center line
keepOnChart
boolean <optional>
true Optional prevent the node from being displayed off the chart
-
priceFromLocation(y)
-
Returns the price given the location (top) of a node. Adjusts for panel position in the chart. It will adjust to ensure it is within the stx.chart.yAxis.minimumPriceTick range
Parameters:
Name Type Description y
number The location of the node (assumed to be included in a holder that is aligned with the chart panel)
Returns:
The price represented by that y position
- Type
- number
-
printableOTO(oto)
-
Creates a printable description of the oto legs for an order. This description is used to create the confirmation dialogs.
Parameters:
Name Type Description oto
array An array of orders in the oto
Returns:
The printable description
- Type
- string
-
printablePrice(order)
-
Convenience function for creating a printable text label for the price of an order. This will be "MKT" or "xxx" or "xxx STP" or "xxx MIT".
Parameters:
Name Type Description order
object The order
Returns:
The printable text.
- Type
- string
-
quantityFromValue(value)
-
Returns a quantity given a string value which may contain commas.
Parameters:
Name Type Description value
string Value from an input box
Returns:
A valid quantity, float
- Type
- number
-
refreshScrollWindows()
-
Refreshes the iscroll mechanism for the positions and open orders widgets in the expanded panel.
-
removeOTOAbove()
-
Removes the OTO order (stop or limit) that is above the buy/short order.
-
removeOTOBelow()
-
Removes the OTO order that is below the buy/short order.
-
render()
-
Places the currently enabled elements along their y axis depending on the prices that have been set. This gets called whenever the screen is panned, zoomed or resized because the placement is relative to the size of the chart itself. It also ensures that the shaded areas do not extend past the top and bottom of the chart panel.
-
renderOpenOrders()
-
Positions the open orders on the screen at the appropriate location. If they are off the y-axis then they will pile up at the top or bottom of the screen. If a marker overlaps another then it's width is extended so that it can be visible.
-
renderTrades()
-
Positions the trade lines on the chart. These demarcate the holdings and their bases. These will begin at the acquisition date and extend to the right.
-
setActiveInput(activeInput)
-
Sets the active input to either "shares" or "currency". This will determine which calculations are made as the user moves the tfc widgets up and down the y-axis. For instance, if the user last set the currency value, then the shares will change as the tfc widgets are moved.
Parameters:
Name Type Description activeInput
string Either "shares" or "currency".
-
setResizeCallback(resizeCallback)
-
Sets a callback to be called when the screen needs to be resized. Used when the size of the TFC window is modified.
Parameters:
Name Type Description resizeCallback
function The resize callback (i.e. resizeScreen())
-
snapPrice()
-
Adjust price to ensure it is within the stx.chart.yAxis.minimumPriceTick range param {number} price The price to snap to the closest minimumPriceTick.
- Since:
-
- 16-04-01
Returns:
adjusted price conforming to minimumPriceTick
- Type
- number
-
startDrag(e, node)
-
Start method for a drag operation. Callback from STX.safeDrag
Parameters:
Name Type Description e
Event The mouse or touch event
node
HTMLElement The element that is being dragged
-
tifHasChanged()
-
Checks if TIF has changed to/from MKT so it can set member var and redraw the form
-
updateData(immediate)
-
Creates the balances, open orders and positions tables for the current security, first by fetching the data, then by creating markers for them, and finally by rendering the markers
Parameters:
Name Type Description immediate
boolean If true then new data is not fetched but the existing data is simply re-rendered, for instance when switching symbols
-
updateValues()
-
Updates all of the numerical values on the screen including: shares, currency, risk/reward, profit & loss. This method is called whenever the user enables or manipulates a tfc element.
-
userAction(action)
-
Called when a user submits an order or replace. This will pull up the appropriate confirmation dialog, assuming all order parameters have been filled in.
Parameters:
Name Type Description action
string The type of action