Grids (tables) is one type of content available in the web Front end s tabs.

Transcription

1 Grids Overview Grids (tables) is one type of content available in the web Front end s tabs. Grids provide the following functionality: Data output and automatically updating the data Providing features in the grid's cells, like buttons, icons, pop-up menus, edit boxes, links, etc. Data sorting Adjusting the view of the table (managing the set of shown columns, the order of columns, column width adjusting) Dynamical data formatting Data (numbers, dates) formatting: decimal places, alignment All the features described below as done by the click are meant to be done with the left mouse button. Right mouse button is not used with grids. Columns Grids of the Front end enables functionality of sorting, resizing, moving the columns; for different tables, the set of columns that allow these functionality may vary. Functionality Behaviour Data output Sorting Resizing The columns of the grids support numerical s, percentage s (both of them either with decimal places or without any; positive s might either have '+' in the front or not), dates, text. Left single click on a column header sorts the table content by this column (ascending and descending). A special sign at the column header will appear indicating the direction of sorting. The sorting sign shows only in the column that has been sorted. The columns can be resized by width with the use of the left mouse button. The icon of the cursor is changed when pointing on the border of a column in order to indicate this possibility. The default width of the column is defined by its content. The content of the header must not be displayed completely. So, the width might be adjusted according to the respective size of the rest of the column. Moving A grid's column can be moved using drag&drop. Dropping the column locates it at the place in the grid pointed be the mouse. 1

2 To hide/unhide the columns, users should refer to applicable Settings functionality features (the Settings functionality is out of this scope). The alignment of the column content depends on the type of cell content: Numerical s: right-aligned (s are not aligned according to the comma) Text, dates: left-aligned Buttons: centred Formatting of the column headers can be also different. Some of the grids by default contain the Instrument column (for example, this is true for the Trade, Order and Watchlist types of tabs): this column will be shown at any of the existing or newly created tabs even though the user has not selected this column to be shown (user can define the rest set of columns in the Settings window). Rows The rows of the grids can be shown in three modes. 1-line view 1-line view small The lines are less high, just one line is shown per row, some of the buttons change their view to be more compact: 2

3 This mode is the most compact one. Though the user can see all the necessary information on instruments on hovering the instruments column. 2-line view With this type of view, some initial column s are combined to be shown by pair in one certain column (the column headers are combined as well): Selected row of the grid is marked. Only one row can be selected. 3

4 The rows of a grid can be removed if the grid contains a column with Delete buttons. Features The following features are supported by the grid's cells. Buttons Buttons in the cells allow opening windows or running operations. Example Sell and Buy buttons (Sell and Buy column respectively) display data (Sell and Buy prices) in real time. Number of decimal places depends on the data. Values change their colours depending on the real time change of the data: green stands for growth, red for decline, and default colour means no change. The buttons change their view on mouse over. There are two possible types of behaviour depending on if the trading mode is activated (the modes themselves are out of this scope): Trading mode is inactive Clicking these buttons invocates the Order window. 4

5 Trading mode is activated Clicking these buttons places an order. Values Example Change in % (see pictures above). This column shows figures percentage s delivered by the back end. Values have two decimal places. The s change their colours real time depending on the data: green colour for positive, red colour for negative, and default colour for zero. Icons Icons in the cells can be used for different actions, such as opening a window or removing the row. Examples Delete Clicking this icon (in the Delete column of the Watchlist grid) removes the row from the grid. The icon is highlighted on hover. Chart Clicking this icon (in the +/- column of the Watchlist grid) opens the Chart window for respective instrument (see Charts). The way the icon shows (its size) depends on the grid's view. 5

6 Links/Text Links change the view on hover (standard behaviour of a link). A link in the cell supposes that some additional functionality is possible. Example IDs in the ID column of the Revenue grid. Clicking a link opens the Deal Details window for the instrument in the row. In the same column, some of the cells might contain links while others just contain text; in this examples, not all of the IDs are links (this depends on the s in the text column showing a category). Pop-ups Pop-ups appear on hover the cell and can contain edit boxes, combo boxes, buttons, etc. The features described below are used in case the Trading view is activated. In the examples below, the cells contain a and the Edit icon which is shown below: 6

7 Examples Upon hovering a cell an edit box appears (see the picture above). After the user clicks into the box, the buttons also pop up. The cross in the left of the edit box appears as soon as there is some in the edit box (s can be amended). Confirmation is necessary to save a new. The new must be confirmed by clicking the OK button, Cancel button allows leaving the dialog without any change. OK button is only available if the entered is correct. Incorrect s also result in a red border around the edit box. Quantity The Quantity column by default displays a default with the possibility to adjust it. The s are allowed inside a certain range (the data comes from the back end), the minimum of this range serves as the default. The arrows don t allow making the lower than the minimum of the range or higher than the maximum one. Values should be positive integers, decimal places are not available. The step is 1. Take profit On hovering over the Take profit s or the arrow signs the edit box pops up providing capability to define the using up and down arrows. If the edit box contains no it shows the text "Distance" inside the box. The needs to be numeric and positive, negative s are not available. The user must input a or delete the take profit using the cross on the left. First click on the upward arrow results in the equal to zero plus the step. The step varies for different instruments. 7

8 Stop loss Stop loss can be created similar to Take profit, with the additional possibility to choose between SL and TS options using the radio buttons of the pop-up. The pop-up appears on hovering the cell. If the edit box contains no it shows the text "Distance" inside the box. The should be positive. First click on the upward arrow results in the equal to zero plus the step. The step varies for different instruments. The option selected in the pop-up (SL/TS) will show as a mark behind the. 8

9 Functional Specifications Please find the details on the required features in the table below. Item/Function Category Details Sorting Type Сolumn functionality Sorting Label Sorting Sorting Sorting some columns allow ascending and descending sorting of the table content by the selected column Mouse Over if a column is sortable column title becomes bold Sorting Value Entry Sorting Validation Sorting Sorting Calculation Sorting First left single click - descending sorting, second left single click - ascending sorting; A sign on the right of the header will indicate the direction of sorting. The sign is displayed only in the column that was activated for sorting. Depends on a tab type Moving Type Сolumn functionality Moving Label Moving grids allow moving columns to another place in the grid Moving Moving Mouse Over Moving Value Entry Moving Validation Moving Drag&drop of the column is possible with the left mouse button; by the drop the column is located at the place in the window pointed with the cursor. Moving Calculation Moving 9

10 Item/Function Category Details Resizing Type Сolumn functionality Resizing Label Resizing grids allow resizing for some certain columns Resizing Resizing Mouse Over The icon of the cursor is changed when pointing on the edge of a column in order to highlight this functionality (similarly to MS Word table). dragging the edge of a column with the left mouse button enables resizing the width of the column; double click adjusts the column width according to the content (if the column was sqeezed before) Resizing Value Entry Resizing Validation Resizing Resizing Calculation Resizing Column header Type Сolumn functionality Column header Label The default width of the column is defined by its content. The content of the header must not be displayed completely. So, the width might be adjusted according to the respective size of the rest of the column. available for all columns except "Instrument" and "+/-" (columns containing buttons) Column header column headers allow different formatting Column header Column header Mouse Over Column header Value Entry Column header Validation Column header formatting may change by mouse over (e.g. when the column is sortable its title becomes bold on mouse over) formatting may change by mouse click Column header Calculation Column header 1-line view Type Row view some default formatting may exist 10

11 Item/Function Category Details 1-line view Label 1-line view row data is showen in one line 1-line view 1-line view Mouse Over highlighting the row 1-line view Value Entry 1-line view Validation 1-line view selecting the row, a mark in the left of the row appears; only one row can be selected 1-line view Calculation 1-line view 1-line view small Type 1-line view small Label 1-line view small Row view 1-line view small Mouse Over highlighting the row 1-line view small 1-line view small Value Entry 1-line view small Validation 1-line view small 1-line view small Calculation 1-line view small row data is showed in one line, height of the line is smaller than in 1-line view, some icons and buttons may be smaller as well (e.g. +/- icon, Sell/Buy buttons) selecting the row, a mark in the left of the row appears; only one row can be selected 2-line view Type Row view 2-line view Label 2-line view row data is showed in two lines: some initial column s are combined to be shown by pair in one certain column (the column headers are combined as well) 2-line view Mouse Over highlighting the row 11

12 Item/Function Category Details 2-line view 2-line view Value Entry 2-line view Validation 2-line view selecting the row, a mark in the left of the row appears; only one row can be selected 2-line view Calculation 2-line view Text Type Cell data Text Label Text data output supports text Text Text Mouse Over Text Value Entry Text Validation Text Text Calculation Text Date Type Cell data Date Label left-aligned by default; text may be formatted (e.g. in B/S field Sell is red, Buy is green) Date data output supports dates/dates + time s Date Date Mouse Over Date Value Entry Date Validation Date Date Calculation 12

13 Item/Function Category Details Date left-aligned by default Numerical Type Cell data Numerical Label Numerical data output supports numerical s Numerical Numerical Mouse Over Numerical Value Entry Numerical Validation Numerical Numerical Calculation s might be calculated or outputted Numerical Percent Type Cell data Percent Label Percent Percent Percent Mouse Over Percent Value Entry Percent Validation Percent right-aligned by default; numbers are not aligned according to the comma; number of decimal places depends; positive s may have '+' in the front; negative s always have '-' in the front; dynamical data formatting - s may be colored due to their changing (increasing, decreasing, remaining the same) or due to their (positive, negative, zero); '--' for emtry data output supports numerical s in percentage format '--' Percent Calculation s might be calculated or outputted 13

14 Item/Function Category Details Percent right-aligned by default; numbers are not aligned according to the comma; number of decimal places depends; positive s may have '+' in the front; negative s always have '-' in the front; dynamical data formatting - s may be colored due to their changing (increasing, decreasing, remaining the same) or due to their (positive, negative, zero); '--' for empry Button Type Button Button Label Button grid cells may contain buttons which do certain operations; buttons may display some s (e.g. prices) or icons (pictures indicating the meaning of operation) Button Button Mouse Over highlighting; cell (button) may become bold Button Value Entry Button Validation Button examples: a) opening an order window (e.g. Sell and Buy buttons in Orders, Trades; Watchlist - list view); b) placing an order with parameters' s from this grid (e.g. Sell and Buy buttons in Watchlist - trading view) Button Calculation Button Icon Type Icon Icon Label dynamical data formatting - button's may change its color due to change of the ; centered; size may depend on a grid's view Icon grid cells may contain icons which do certain operations Icon Mouse Over highlighting 14

15 Item/Function Category Details Icon examples: a) opening a chart (e.g. '+/-' icon in Watchlist) b) cancelling an order ('x' icon in Orders) c) closing a position ('x' icon in Trades) Icon Value Entry Icon Validation Icon Icon Calculation Icon Link Type Link Link Label Link Link Link Link Value Entry Link Validation Link Enabled/disabled; size may depend on a grid's view grid cells may contain links (e.g. Execution price, Order ID, Trade ID, Deal ID) Mouse Over underlining the as a hyper link opening a window (depending on the link/module) Link Calculation Link Edit box Type Numerical input Edit box Label displaying and link if available, '--' otherwise; left-aligned by default Edit box Input field of the pop-ups (e.g. Take profit and Stop loss in Watchlist - trading view, Orders, Trades; Quantity in Watchlist - trading view; Limit/Stop in Orders, Trades) Edit box Mouse Over Values behave like links on hover, the icon is highlighted 15

16 Item/Function Category Details Edit box Edit box Edit box Edit box Value Entry Validation a) Clicking any elements of the pop-up field invocates confirmation and cancellation buttons (see below) b) clicking outside of the field cancels the entry and recovers the previous c) clicking the cross ("x") will delete the field d) clicking on the arrow up / arrow down increases / decreases the in the field e) first click on the empty edit box (showing the default hint if there is one) offers the minimum/maximum possible (depending on the tab type/module) Only numerical s; Entry step by arrows depends; Entry is valid after confirmation only or after cancellation of entry (done by relevant actions described below); Dash (--) goes for empty a) Input restriction: Only positive s (arrow down doesn't allow entering s below zero); b) other validations depending on the certain field (e.g. minimum/maximum quantity, price; decimals allowed or not); Feedback: Wrong triggers a red border and confirmation button will be disabled; The arrows don t allow making the lower than the minimum of the possible range or higher than the maximum of the range. '--' or some system default (e.g. minimum size of an order for Quantity in Watchlist - trading view) or some user's inputted (e.g. size of an order for Quantity in Watchlist - trading view) Edit box Calculation Edit box Type Label Always available when pop-up is open, also see Feedback item above Radio buttons provides options - Stop loss or in the Stop Loss pop-up 16

17 Item/Function Category Details Mouse Over Selecting the option Value Entry Validation Calculation Stop loss always enabled in the Stop Loss pop-up OK Type Button OK Label OK Confirmation button Appears after a mouse click into the pop-up's input field (edit box) OK OK Mouse Over highlighting OK Value Entry OK Validation OK the entered in the input field is saved as a user's default for Watchlist trading view OK Calculation OK Cancel Order Type Button Cancel Order Label disabled if entered in the in the pop-up's input field is wrong; enabled if it is correct (valid) 17

18 Item/Function Category Details Cancel Order Cancellation button for Take profit and Stop loss in Orders and Trades modules. It appears after a mouse click in the pop-up's input field. This button is for cancellation of earlier done action cancellation of an order in Orders and Trades) Cancel Order Cancel Order Mouse Over highlighted Cancel Order Value Entry Cancel Order Validation Cancel Order an order is cancelled. If this is a basic order (Limit/Stop) and it has related orders, related orders are cancelled automatically Cancel Order Calculation Cancel Order Cancel Type Button Cancel Label is enabled if the previous of an input field wasn't empty (meaning that some order has been placed earlier); disabled otherwise Cancel Cancellation button Appears after a mouse click into the pop-up's input field (edit box) Cancel Cancel Mouse Over highlighted Cancel Value Entry Cancel Validation Cancel cancelling a entry, becomes equal to the previously saved one Cancel Calculation Cancel always enabled (when the pop-up is shown) 18