Author Topic: Reworking the wallet trading interface  (Read 22553 times)

0 Members and 1 Guest are viewing this topic.

Offline svk

- Ideally I'd prefer to use standard tables instead of ui-grid but they do offer speed compared to standard angular.
Another reason to use ui-grid is fixed table headers.

I found ui-grid doesn't offer flexibility that you need to render big tables effectively... maybe it has changed but last year i tried to use it however when your scope variable changes it will tear down the dom and rebuild the whole table... causing lags and delays between refreshes... if you dont have live updates its ok i guess... so with my appraoch i simply dont replace my scope variable i have to go into each cell and check if its changed, if it has then update it.. and that seemed to be 50x faster and now i can have 2k-3k table cells without noticing anything on the standard pc.

I believe it is because you have to pass in the variable that holds your table data (scope var) and it will rely on angular to check against it (which simply checks that the memory address has changed) and doesn't do the dirty checking like I do above. The memory address changes when you overwrite your scope variable if it is an object.
Yea I'm not a fan either, I've replaced most of them with standard tables in the new layout. I also found a great directive for fixed headers so that's no longer an issue.
Worker: dev.bitsharesblocks

Offline jsidhu

  • Hero Member
  • *****
  • Posts: 1335
    • View Profile
- Ideally I'd prefer to use standard tables instead of ui-grid but they do offer speed compared to standard angular.
Another reason to use ui-grid is fixed table headers.
Another one is sorting and filtering...

However, I found ui-grid doesn't offer flexibility that you need to render big tables effectively... maybe it has changed but last year i tried to use it however when your scope variable changes it will tear down the dom and rebuild the whole table... causing lags and delays between refreshes... if you dont have live updates its ok i guess... so with my appraoch i simply dont replace my scope variable i have to go into each cell and check if its changed, if it has then update it.. and that seemed to be 50x faster and now i can have 2k-3k table cells without noticing anything on the standard pc.

I believe it is because you have to pass in the variable that holds your table data (scope var) and it will rely on angular to check against it (which simply checks that the memory address has changed) and doesn't do the dirty checking like I do above. The memory address changes when you overwrite your scope variable if it is an object.
« Last Edit: March 20, 2015, 08:28:23 pm by jsidhu »
Hired by blockchain | Developer
delegate: dev.sidhujag

Offline Shentist

  • Board Moderator
  • Hero Member
  • *****
  • Posts: 1601
    • View Profile
    • metaexchange
  • BitShares: shentist
good work !

why did you choose to put the Trading History on the left? I would prefer to have it on the right side, because it is not so important then sell and buy orders.

Xeldal

  • Guest
Great work svk.  Its looking great!  +5%

Offline svk

Thanks for all the feedback everyone! I've kept working on this yesterday and today, and now have a workable version combining what I had with some of your ideas. I hope you'll recognize it Arhag ;)



All orders are now grouped together, shorts with sells and buys with covers (covers not yet implemented). Shorts are color-coded blue, buys green, sells red.

Clicking on "Account orders history" replaces the blockchain orders with your personal orders.

Volume, high, low and change are for the current day.

Clicking on the "Margin calls" or "Shorts" button makes the respective tables visible one level below the current tables. Inverting the market switches the buttons correctly.

Clicking on the "Cover" tab replaces the orders history table with the open margin orders table, I had to put it there due to space issues.

For the courageous you can check it out by pulling the branch from github as always.
Worker: dev.bitsharesblocks

Offline cass

  • Hero Member
  • *****
  • Posts: 4311
  • /(┬.┬)\
    • View Profile
I have an alternative view which is nicer for larger screens:
Code: [Select]
|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|^|
| BitUSD : BTS [flip]      Total BitUSD Supply: 433,000.00 BitUSD   Total BTS Supply: 2,503,706,843     Show Quantity in:  (*) BitUSD  ( ) BTS                                                |||
|                                                                                                                                                                                             |||
| ------- -------- --------- --------- -----------                  ||  24h Volume   High         Low          Change    Latest Price   Highest Bid   Lowest Ask   Spread   Call Price        |||
| | Buy | | Sell | | Short | | Cover | | History |                  ||  7,000.00     111.0000     90.0000      -12.05%   105.0000       111.1111      112.0000     0.797%   100.0000          |||
| |     | |      | | ----- | |       | |         |                  ||  BitUSD       BTS/BitUSD   BTS/BitUSD             BTS/BitUSD     BTS/BitUSD    BTS/BitUSD            BTS/BitUSD        |||
|-------------------------------------------------------------------|| ------------------------------------------------------- | ------------------------------------------------------------ |||
| ----------------------------------------------|                   || |                                                     | | |                                                          | |||
| | Balance       0.00 BTS (account-name)       |                   || |                                                     | | |                                                          | |||
| |                                             |                   || |                                                     | | |                                                          | |||
| | Collateral    |            0.0 | BTS        |                   || |                                                     | | |                                                          | |||
| |                                             |                   || |                                                     | | |                                                          | |||
| | Interest Rate |            0.0 | APR        |                   || |                                                     | | |                                                          | |||
| |                                             |                   || |                                                     | | |                                                          | ||| 
| | Price Limit   | (optional) 0.0 | BTS/BitUSD |                   || |                                                     | | |                                                          | |||
| |               Call Price 100 BTS/BitUSD     |                   || |                Price History Chart                  | | |                    Market Depth Chart                    | |||
| |                                             |                   || |                                                     | | |                                                          | |||
| | Quantity      |            0.0 | BitUSD     |                   || |                                                     | | |                                                          | |||
| |                                             |                   || |                                                     | | |                                                          | |||
| |               [Short BitUSD]                |                   || |                                                     | | |                                                          | |||
| |                                             |                   || |                                                     | | |                                                          | |||
| -----------------------------------------------                   || |                                                     | | |                                                          | |||
|                                                                   || |                                                     | | |                                                          | |||
| Open Short Sell Orders                                            || |                                                     | | |                                                          | |||
| ---------------------------------------------------------------   || |                                                     | | |                                                          | |||
| | Price Limit  ^1 | Interest Rate -- | Quantity -- | Action   |   || ------------------------------------------------------- | ------------------------------------------------------------ |||
| | (BTS/BitUSD)    | (APR)            | (BitUSD)    |          |   ||                                                         |                                                              |||
| ----------------------------------------------------------------- || Order History ([longer detailed history])               | Bids ([margin call details])   Asks ([short sell details])   |||
| |        112.0000 |             1.00 |    1,100.00 | [Cancel] |^| || ------------------------------------------------------- | -----------------------------  ----------------------------- |||
| |                 |                  |             |          ||| || | Timestamp | Match Type    | Price        | Quantity | | | Quantity   | Price        |  | Price        | Quantity   | |||
| |                 |                  |             |          |v| || |           |               | (BTS/BitUSD) | (BitUSD) | | | (BitUSD)   | (BTS/BitUSD) |  | (BTS/BitUSD) | (BitUSD)   | | |
| ----------------------------------------------------------------- || ------------------------------------------------------| | -----------------------------  ----------------------------- | |
|                                                                   || | 22:16:30  | Call  - Short |     110.0000 | 3,000.00 | | |  12,000.00 |     111.1111 |  |     112.0000 |   1,215.00 | | |
|                                                                   || | 22:00:00  | Sell  - Buy   |     101.0000 |    40.00 | | |     600.00 |     101.2500 |  |     120.0000 |     750.00 | | |
|                                                                   || | 21:30:00  | Short - Buy   |     101.0000 |    50.00 | | |   1,601.32 |     100.0000 |  |     120.0000 |   5,000.00 | | |
|                                                                   || | 21:00:00  | Cover - Sell  |      98.0000 |   100.00 | | |     512.34 |      99.9091 |  ----------------------------- | |
|                                                                   || | 20:30:00  | Buy   - Short |      97.0000 |   500.00 | | |     200.00 |      99.0000 |                                | |
|                                                                   || | 20:00:00  | Buy   - Sell  |      96.0000 |   100.00 | | |     100.00 |      98.0000 |                                |v|
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

This is a two column layout even though it looks like a three column layout. To simplify the description I will refer to it as if it is a three column layout. The left column sticks to the window (meaning it doesn't scroll with the page). The middle+right columns are separated in the vertical orientation by the bottom of the headers of the "Order History", "Bids", and "Asks" tables (which are all flushed). The top half of middle+right column sticks to the page (meaning the two charts and the headers of the tables are always visible no matter how much the user scrolls). The bottom half of the middle+right columns (which consist of the entries of the tables) scroll with the page. The middle+right column is as long as is necessary to fit all of the items that go in the "Bids" and "Asks" tables. The order history can have max(5, max(number of items in Bids table, number of items in Asks table)) number of items (so that bottom of the "Order History" table is flushed with either the "Bids" table or the "Asks" table). To see more of the order history, the user must click on the [longer detailed history] link which will load up a more detailed version of the table in a new page.

The "Bids" and "Asks" tables in the right column are condensed forms of the "Bids" and "Asks" tables I discussed in my previous post. The Type column has been removed and is instead encoded through the color of the Price text. The color of the Price text only applies to the part of the text that includes the digits to the left of the decimal place; the color of digits to the right of the decimal place, and the decimal character as well, are always the same grey color. There are 5 distinct colors for the Price labeled as follows: BID_COLOR, ASK_COLOR, EXPIRED_COLOR (for table items with the "Expired Cover" type), CALL_COLOR (for table items with the "Margin Call" type), and SHORT_COLOR (for table items with the "Short Sell" type). For any items in the "Bids" table that are not one of ("Expired Cover", "Margin Call", "Short Sell"), the Price field of that item will be colored BID_COLOR (which I suggest be a green color).  For any items in the "Asks" table that are not one of ("Expired Cover", "Margin Call", "Short Sell"), the Price field of that item will be colored ASK_COLOR (which I suggest be a red color). And again any items in the table that contain the user's open orders should be highlighted in some way. In addition, the "Bids" label will be colored BID_COLOR and the "Asks" label will be colored ASK_COLOR. Also, the Quantity field should also be colored grey for part to the right of the decimal (including the decimal) and NEUTRAL_COLOR (which is probably best to use white if the background is dark or black if the background is light) for the part to the left of the decimal. This applies to all quantity-like fields in other tables as well (as well as "Price Limit" and "Interest Rate" in "Short Sell Orders" and "Open Short Sell Orders" and "Call Price", "Interest Rate", and "Owed" in "Margin Call Orders" and "Open Margin Call Orders").

The "Order History" table shown above in the middle column is a simplified version of the normal "Order History" table found in BitShares. The timestamp only shows the time in the day but not the date. The price column refers to the price of the matched driving order (the submitted order that caused the match to occur as soon as it was included in the blockchain) not driven order (the latent order sitting in the order book waiting to get matched). The quantity column also refers to the quantity of the matched driving order. The "Match Type" column is of the form "<Driving Type> - <Driven Type>" where <Driving Type> is the type of the driving order and <Driven Order> is the type of the driven order (both types can be one of "Call", "Cover", "Short", "Sell", or "Buy"). The Quantity field should be colored as described in the previous paragraph. Also, the Price field should be colored in a similar way where the choice of color comes from the <Driving Type>: "Call" -> CALL_COLOR, "Cover" -> EXPIRED_COLOR, "Short" -> SHORT_COLOR, "Buy" -> BID_COLOR, "Sell" -> ASK_COLOR.

The "History" tab in the left column shows the "Account Orders History" table. Each of the tables under the tabs in the left column are of limited height, however, unlike the "Order History" table, they are scrollable (if necessary).

Clicking on the [margin call details] link or the [short sell details] link will create a hovering overlay centered horizontally and vertically over the region of space encompassing the Price History Chart (with some margin on all sides). This overlay will contain a scrollable table of either "Margin Call Orders" if [margin call details] was clicked or "Short Sell Orders" if [short sell details] was clicked. The overlay can be closed by clicking on an X on the corner of the overlay window. Note that the two links may be swapped (meaning [margin call details] would be next to "Bids" and [short sell details] would be next to "Asks") if the market was flipped to be "BTS : BitAsset". The [margin call details] link will be colored CALL_COLOR and the [short sell details] link will be colored SHORT_COLOR. Also, within the "Margin Call Orders" table, the "Margin Called" condition will be colored CALL_COLOR, "Expired" condition will be colored EXPIRED_COLOR, and "Active" condition will be colored NEUTRAL_COLOR.

Thanks, kudos on the text layout! :)

That actually looks very close to how I imagine having it in a perfect world where all that would fit. I definitely want to make it look more like this, we'll see what's actually possible though.

@svk: i could assist you on css design if you'll need help on!
█║▌║║█  - - -  The quieter you become, the more you are able to hear  - - -  █║▌║║█

Offline svk

I have an alternative view which is nicer for larger screens:
Code: [Select]
|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|^|
| BitUSD : BTS [flip]      Total BitUSD Supply: 433,000.00 BitUSD   Total BTS Supply: 2,503,706,843     Show Quantity in:  (*) BitUSD  ( ) BTS                                                |||
|                                                                                                                                                                                             |||
| ------- -------- --------- --------- -----------                  ||  24h Volume   High         Low          Change    Latest Price   Highest Bid   Lowest Ask   Spread   Call Price        |||
| | Buy | | Sell | | Short | | Cover | | History |                  ||  7,000.00     111.0000     90.0000      -12.05%   105.0000       111.1111      112.0000     0.797%   100.0000          |||
| |     | |      | | ----- | |       | |         |                  ||  BitUSD       BTS/BitUSD   BTS/BitUSD             BTS/BitUSD     BTS/BitUSD    BTS/BitUSD            BTS/BitUSD        |||
|-------------------------------------------------------------------|| ------------------------------------------------------- | ------------------------------------------------------------ |||
| ----------------------------------------------|                   || |                                                     | | |                                                          | |||
| | Balance       0.00 BTS (account-name)       |                   || |                                                     | | |                                                          | |||
| |                                             |                   || |                                                     | | |                                                          | |||
| | Collateral    |            0.0 | BTS        |                   || |                                                     | | |                                                          | |||
| |                                             |                   || |                                                     | | |                                                          | |||
| | Interest Rate |            0.0 | APR        |                   || |                                                     | | |                                                          | |||
| |                                             |                   || |                                                     | | |                                                          | ||| 
| | Price Limit   | (optional) 0.0 | BTS/BitUSD |                   || |                                                     | | |                                                          | |||
| |               Call Price 100 BTS/BitUSD     |                   || |                Price History Chart                  | | |                    Market Depth Chart                    | |||
| |                                             |                   || |                                                     | | |                                                          | |||
| | Quantity      |            0.0 | BitUSD     |                   || |                                                     | | |                                                          | |||
| |                                             |                   || |                                                     | | |                                                          | |||
| |               [Short BitUSD]                |                   || |                                                     | | |                                                          | |||
| |                                             |                   || |                                                     | | |                                                          | |||
| -----------------------------------------------                   || |                                                     | | |                                                          | |||
|                                                                   || |                                                     | | |                                                          | |||
| Open Short Sell Orders                                            || |                                                     | | |                                                          | |||
| ---------------------------------------------------------------   || |                                                     | | |                                                          | |||
| | Price Limit  ^1 | Interest Rate -- | Quantity -- | Action   |   || ------------------------------------------------------- | ------------------------------------------------------------ |||
| | (BTS/BitUSD)    | (APR)            | (BitUSD)    |          |   ||                                                         |                                                              |||
| ----------------------------------------------------------------- || Order History ([longer detailed history])               | Bids ([margin call details])   Asks ([short sell details])   |||
| |        112.0000 |             1.00 |    1,100.00 | [Cancel] |^| || ------------------------------------------------------- | -----------------------------  ----------------------------- |||
| |                 |                  |             |          ||| || | Timestamp | Match Type    | Price        | Quantity | | | Quantity   | Price        |  | Price        | Quantity   | |||
| |                 |                  |             |          |v| || |           |               | (BTS/BitUSD) | (BitUSD) | | | (BitUSD)   | (BTS/BitUSD) |  | (BTS/BitUSD) | (BitUSD)   | | |
| ----------------------------------------------------------------- || ------------------------------------------------------| | -----------------------------  ----------------------------- | |
|                                                                   || | 22:16:30  | Call  - Short |     110.0000 | 3,000.00 | | |  12,000.00 |     111.1111 |  |     112.0000 |   1,215.00 | | |
|                                                                   || | 22:00:00  | Sell  - Buy   |     101.0000 |    40.00 | | |     600.00 |     101.2500 |  |     120.0000 |     750.00 | | |
|                                                                   || | 21:30:00  | Short - Buy   |     101.0000 |    50.00 | | |   1,601.32 |     100.0000 |  |     120.0000 |   5,000.00 | | |
|                                                                   || | 21:00:00  | Cover - Sell  |      98.0000 |   100.00 | | |     512.34 |      99.9091 |  ----------------------------- | |
|                                                                   || | 20:30:00  | Buy   - Short |      97.0000 |   500.00 | | |     200.00 |      99.0000 |                                | |
|                                                                   || | 20:00:00  | Buy   - Sell  |      96.0000 |   100.00 | | |     100.00 |      98.0000 |                                |v|
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

This is a two column layout even though it looks like a three column layout. To simplify the description I will refer to it as if it is a three column layout. The left column sticks to the window (meaning it doesn't scroll with the page). The middle+right columns are separated in the vertical orientation by the bottom of the headers of the "Order History", "Bids", and "Asks" tables (which are all flushed). The top half of middle+right column sticks to the page (meaning the two charts and the headers of the tables are always visible no matter how much the user scrolls). The bottom half of the middle+right columns (which consist of the entries of the tables) scroll with the page. The middle+right column is as long as is necessary to fit all of the items that go in the "Bids" and "Asks" tables. The order history can have max(5, max(number of items in Bids table, number of items in Asks table)) number of items (so that bottom of the "Order History" table is flushed with either the "Bids" table or the "Asks" table). To see more of the order history, the user must click on the [longer detailed history] link which will load up a more detailed version of the table in a new page.

The "Bids" and "Asks" tables in the right column are condensed forms of the "Bids" and "Asks" tables I discussed in my previous post. The Type column has been removed and is instead encoded through the color of the Price text. The color of the Price text only applies to the part of the text that includes the digits to the left of the decimal place; the color of digits to the right of the decimal place, and the decimal character as well, are always the same grey color. There are 5 distinct colors for the Price labeled as follows: BID_COLOR, ASK_COLOR, EXPIRED_COLOR (for table items with the "Expired Cover" type), CALL_COLOR (for table items with the "Margin Call" type), and SHORT_COLOR (for table items with the "Short Sell" type). For any items in the "Bids" table that are not one of ("Expired Cover", "Margin Call", "Short Sell"), the Price field of that item will be colored BID_COLOR (which I suggest be a green color).  For any items in the "Asks" table that are not one of ("Expired Cover", "Margin Call", "Short Sell"), the Price field of that item will be colored ASK_COLOR (which I suggest be a red color). And again any items in the table that contain the user's open orders should be highlighted in some way. In addition, the "Bids" label will be colored BID_COLOR and the "Asks" label will be colored ASK_COLOR. Also, the Quantity field should also be colored grey for part to the right of the decimal (including the decimal) and NEUTRAL_COLOR (which is probably best to use white if the background is dark or black if the background is light) for the part to the left of the decimal. This applies to all quantity-like fields in other tables as well (as well as "Price Limit" and "Interest Rate" in "Short Sell Orders" and "Open Short Sell Orders" and "Call Price", "Interest Rate", and "Owed" in "Margin Call Orders" and "Open Margin Call Orders").

The "Order History" table shown above in the middle column is a simplified version of the normal "Order History" table found in BitShares. The timestamp only shows the time in the day but not the date. The price column refers to the price of the matched driving order (the submitted order that caused the match to occur as soon as it was included in the blockchain) not driven order (the latent order sitting in the order book waiting to get matched). The quantity column also refers to the quantity of the matched driving order. The "Match Type" column is of the form "<Driving Type> - <Driven Type>" where <Driving Type> is the type of the driving order and <Driven Order> is the type of the driven order (both types can be one of "Call", "Cover", "Short", "Sell", or "Buy"). The Quantity field should be colored as described in the previous paragraph. Also, the Price field should be colored in a similar way where the choice of color comes from the <Driving Type>: "Call" -> CALL_COLOR, "Cover" -> EXPIRED_COLOR, "Short" -> SHORT_COLOR, "Buy" -> BID_COLOR, "Sell" -> ASK_COLOR.

The "History" tab in the left column shows the "Account Orders History" table. Each of the tables under the tabs in the left column are of limited height, however, unlike the "Order History" table, they are scrollable (if necessary).

Clicking on the [margin call details] link or the [short sell details] link will create a hovering overlay centered horizontally and vertically over the region of space encompassing the Price History Chart (with some margin on all sides). This overlay will contain a scrollable table of either "Margin Call Orders" if [margin call details] was clicked or "Short Sell Orders" if [short sell details] was clicked. The overlay can be closed by clicking on an X on the corner of the overlay window. Note that the two links may be swapped (meaning [margin call details] would be next to "Bids" and [short sell details] would be next to "Asks") if the market was flipped to be "BTS : BitAsset". The [margin call details] link will be colored CALL_COLOR and the [short sell details] link will be colored SHORT_COLOR. Also, within the "Margin Call Orders" table, the "Margin Called" condition will be colored CALL_COLOR, "Expired" condition will be colored EXPIRED_COLOR, and "Active" condition will be colored NEUTRAL_COLOR.

Thanks, kudos on the text layout! :)

That actually looks very close to how I imagine having it in a perfect world where all that would fit. I definitely want to make it look more like this, we'll see what's actually possible though.

Worker: dev.bitsharesblocks

Offline arhag

  • Hero Member
  • *****
  • Posts: 1214
    • View Profile
    • My posts on Steem
  • BitShares: arhag
  • GitHub: arhag
I have an alternative view which is nicer for larger screens:
Code: [Select]
|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|^|
| BitUSD : BTS [flip]      Total BitUSD Supply: 433,000.00 BitUSD   Total BTS Supply: 2,503,706,843     Show Quantity in:  (*) BitUSD  ( ) BTS                                                |||
|                                                                                                                                                                                             |||
| ------- -------- --------- --------- -----------                  ||  24h Volume   High         Low          Change    Latest Price   Highest Bid   Lowest Ask   Spread   Call Price        |||
| | Buy | | Sell | | Short | | Cover | | History |                  ||  7,000.00     111.0000     90.0000      -12.05%   105.0000       111.1111      112.0000     0.797%   100.0000          |||
| |     | |      | | ----- | |       | |         |                  ||  BitUSD       BTS/BitUSD   BTS/BitUSD             BTS/BitUSD     BTS/BitUSD    BTS/BitUSD            BTS/BitUSD        |||
|-------------------------------------------------------------------|| ------------------------------------------------------- | ------------------------------------------------------------ |||
| ----------------------------------------------|                   || |                                                     | | |                                                          | |||
| | Balance       0.00 BTS (account-name)       |                   || |                                                     | | |                                                          | |||
| |                                             |                   || |                                                     | | |                                                          | |||
| | Collateral    |            0.0 | BTS        |                   || |                                                     | | |                                                          | |||
| |                                             |                   || |                                                     | | |                                                          | |||
| | Interest Rate |            0.0 | APR        |                   || |                                                     | | |                                                          | |||
| |                                             |                   || |                                                     | | |                                                          | ||| 
| | Price Limit   | (optional) 0.0 | BTS/BitUSD |                   || |                                                     | | |                                                          | |||
| |               Call Price 100 BTS/BitUSD     |                   || |                Price History Chart                  | | |                    Market Depth Chart                    | |||
| |                                             |                   || |                                                     | | |                                                          | |||
| | Quantity      |            0.0 | BitUSD     |                   || |                                                     | | |                                                          | |||
| |                                             |                   || |                                                     | | |                                                          | |||
| |               [Short BitUSD]                |                   || |                                                     | | |                                                          | |||
| |                                             |                   || |                                                     | | |                                                          | |||
| -----------------------------------------------                   || |                                                     | | |                                                          | |||
|                                                                   || |                                                     | | |                                                          | |||
| Open Short Sell Orders                                            || |                                                     | | |                                                          | |||
| ---------------------------------------------------------------   || |                                                     | | |                                                          | |||
| | Price Limit  ^1 | Interest Rate -- | Quantity -- | Action   |   || ------------------------------------------------------- | ------------------------------------------------------------ |||
| | (BTS/BitUSD)    | (APR)            | (BitUSD)    |          |   ||                                                         |                                                              |||
| ----------------------------------------------------------------- || Order History ([longer detailed history])               | Bids ([margin call details])   Asks ([short sell details])   |||
| |        112.0000 |             1.00 |    1,100.00 | [Cancel] |^| || ------------------------------------------------------- | -----------------------------  ----------------------------- |||
| |                 |                  |             |          ||| || | Timestamp | Match Type    | Price        | Quantity | | | Quantity   | Price        |  | Price        | Quantity   | |||
| |                 |                  |             |          |v| || |           |               | (BTS/BitUSD) | (BitUSD) | | | (BitUSD)   | (BTS/BitUSD) |  | (BTS/BitUSD) | (BitUSD)   | | |
| ----------------------------------------------------------------- || ------------------------------------------------------| | -----------------------------  ----------------------------- | |
|                                                                   || | 22:16:30  | Call  - Short |     110.0000 | 3,000.00 | | |  12,000.00 |     111.1111 |  |     112.0000 |   1,215.00 | | |
|                                                                   || | 22:00:00  | Sell  - Buy   |     101.0000 |    40.00 | | |     600.00 |     101.2500 |  |     120.0000 |     750.00 | | |
|                                                                   || | 21:30:00  | Short - Buy   |     101.0000 |    50.00 | | |   1,601.32 |     100.0000 |  |     120.0000 |   5,000.00 | | |
|                                                                   || | 21:00:00  | Cover - Sell  |      98.0000 |   100.00 | | |     512.34 |      99.9091 |  ----------------------------- | |
|                                                                   || | 20:30:00  | Buy   - Short |      97.0000 |   500.00 | | |     200.00 |      99.0000 |                                | |
|                                                                   || | 20:00:00  | Buy   - Sell  |      96.0000 |   100.00 | | |     100.00 |      98.0000 |                                |v|
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

This is a two column layout even though it looks like a three column layout. To simplify the description I will refer to it as if it is a three column layout. The left column sticks to the window (meaning it doesn't scroll with the page). The middle+right columns are separated in the vertical orientation by the bottom of the headers of the "Order History", "Bids", and "Asks" tables (which are all flushed). The top half of middle+right column sticks to the page (meaning the two charts and the headers of the tables are always visible no matter how much the user scrolls). The bottom half of the middle+right columns (which consist of the entries of the tables) scroll with the page. The middle+right column is as long as is necessary to fit all of the items that go in the "Bids" and "Asks" tables. The order history can have max(5, max(number of items in Bids table, number of items in Asks table)) number of items (so that bottom of the "Order History" table is flushed with either the "Bids" table or the "Asks" table). To see more of the order history, the user must click on the [longer detailed history] link which will load up a more detailed version of the table in a new page.

The "Bids" and "Asks" tables in the right column are condensed forms of the "Bids" and "Asks" tables I discussed in my previous post. The Type column has been removed and is instead encoded through the color of the Price text. The color of the Price text only applies to the part of the text that includes the digits to the left of the decimal place; the color of digits to the right of the decimal place, and the decimal character as well, are always the same grey color. There are 5 distinct colors for the Price labeled as follows: BID_COLOR, ASK_COLOR, EXPIRED_COLOR (for table items with the "Expired Cover" type), CALL_COLOR (for table items with the "Margin Call" type), and SHORT_COLOR (for table items with the "Short Sell" type). For any items in the "Bids" table that are not one of ("Expired Cover", "Margin Call", "Short Sell"), the Price field of that item will be colored BID_COLOR (which I suggest be a green color).  For any items in the "Asks" table that are not one of ("Expired Cover", "Margin Call", "Short Sell"), the Price field of that item will be colored ASK_COLOR (which I suggest be a red color). And again any items in the table that contain the user's open orders should be highlighted in some way. In addition, the "Bids" label will be colored BID_COLOR and the "Asks" label will be colored ASK_COLOR. Also, the Quantity field should also be colored grey for part to the right of the decimal (including the decimal) and NEUTRAL_COLOR (which is probably best to use white if the background is dark or black if the background is light) for the part to the left of the decimal. This applies to all quantity-like fields in other tables as well (as well as "Price Limit" and "Interest Rate" in "Short Sell Orders" and "Open Short Sell Orders" and "Call Price", "Interest Rate", and "Owed" in "Margin Call Orders" and "Open Margin Call Orders").

The "Order History" table shown above in the middle column is a simplified version of the normal "Order History" table found in BitShares. The timestamp only shows the time in the day but not the date. The price column refers to the price of the matched driving order (the submitted order that caused the match to occur as soon as it was included in the blockchain) not driven order (the latent order sitting in the order book waiting to get matched). The quantity column also refers to the quantity of the matched driving order. The "Match Type" column is of the form "<Driving Type> - <Driven Type>" where <Driving Type> is the type of the driving order and <Driven Order> is the type of the driven order (both types can be one of "Call", "Cover", "Short", "Sell", or "Buy"). The Quantity field should be colored as described in the previous paragraph. Also, the Price field should be colored in a similar way where the choice of color comes from the <Driving Type>: "Call" -> CALL_COLOR, "Cover" -> EXPIRED_COLOR, "Short" -> SHORT_COLOR, "Buy" -> BID_COLOR, "Sell" -> ASK_COLOR.

The "History" tab in the left column shows the "Account Orders History" table. Each of the tables under the tabs in the left column are of limited height, however, unlike the "Order History" table, they are scrollable (if necessary).

Clicking on the [margin call details] link or the [short sell details] link will create a hovering overlay centered horizontally and vertically over the region of space encompassing the Price History Chart (with some margin on all sides). This overlay will contain a scrollable table of either "Margin Call Orders" if [margin call details] was clicked or "Short Sell Orders" if [short sell details] was clicked. The overlay can be closed by clicking on an X on the corner of the overlay window. Note that the two links may be swapped (meaning [margin call details] would be next to "Bids" and [short sell details] would be next to "Asks") if the market was flipped to be "BTS : BitAsset". The [margin call details] link will be colored CALL_COLOR and the [short sell details] link will be colored SHORT_COLOR. Also, within the "Margin Call Orders" table, the "Margin Called" condition will be colored CALL_COLOR, "Expired" condition will be colored EXPIRED_COLOR, and "Active" condition will be colored NEUTRAL_COLOR.

Offline CLains

  • Hero Member
  • *****
  • Posts: 2606
    • View Profile
  • BitShares: clains
Great work svk!  +5%

I played around with the screenshot in paint for a bit, maybe some ideas http://i59.tinypic.com/10okydj.png

random ideas:

collapsable open orders (they pop up when they are relevant)
collapsable sell/buy/short/margin/blockchain orders history
markets with search and tab,
have relevant user listed as a heading with balances under, and direct tab to select other users.
use pop-ups after clicking buy/sell/short
use strong colors for the button we want people to click on (buy/sell/short)
have a price chart with mutiple time-scales to chose from
have an option to select background colors (themes).

too much! I know. great job so far, everything you're doing is top notch :)

« Last Edit: March 17, 2015, 12:54:11 pm by CLains »

Offline arhag

  • Hero Member
  • *****
  • Posts: 1214
    • View Profile
    • My posts on Steem
  • BitShares: arhag
  • GitHub: arhag
My preference would be something like the following:
Code: [Select]
BitUSD : BTS [flip]      Call price       Last price       Spread   Total BitUSD Supply   Total BTS Supply
                         100 BTS/BitUSD   105 BTS/BitUSD   0.905%    433,000.00 BitUSD     2,503,706,843 BTS
------------- -----------
| Orderbook | | History |
| --------- | |         |
----------------------------------------------------------------------------------------------------------------------------------
|   |                         
|   |                                                   [Orderbook Chart]
|   |
|   | Show quantity in: (*) BitUSD  ( ) BTS
|   |
|   | Bids                                                           Asks
|   | ----------------------------------------------------------     ----------------------------------------------------------
| l | | Type          | Quantity (BitUSD) | Price (BTS/BitUSD) |     | Price (BTS/BitUSD) | Quantity (BitUSD) | Type          |
| e | ------------------------------------------------------------   ------------------------------------------------------------
| f | | Margin Call   |         12,000.00 |           111.1111 |^|   |           112.0000 |          1,215.00 | Short Sell    |^|
| t | | Buy BitAsset  |            600.00 |           101.2500 |||   |           120.0000 |            750.00 | Sell BitAsset |||
|   | | Expired Cover |          1,601.32 |           100.0000 |||   |           120.0000 |          5,000.00 | Short Sell    |||
| c | | Buy BitAsset  |            512.34 |            99.9091 | |   |                    |                   |               |||
| o | | Buy BitAsset  |            200.00 |            99.0000 |v|   |                    |                   |               |v|
| l | ------------------------------------------------------------   ------------------------------------------------------------
| u |
| m | [*] Display detailed short information
| n | ------------------------------------------------------------------------------------------------------------------
|   |
|   | Margin Call Orders                                                       
|   | ---------------------------------------------------------------------------------------------------------------
|   | | Call Price (BTS/BitUSD) ^2 | Interest Rate (APR) -- | Owed (BitUSD) -- | Expiration      ^3 | Condition  v1 | 
|   | -----------------------------------------------------------------------------------------------------------------
|   | |                   110.0000 |                   0.00 |        12,000.00 | 6 Days             | Margin Called |^|
|   | |                   130.0000 |                   2.00 |         1,501.32 | 2 Days Ago         | Expired       |||
|   | |                   135.0000 |                   0.00 |           100.00 | 1 Day Ago          | Expired       |||
|   | |                   130.0000 |                   0.00 |        10,000.00 | 10/25/2015 9:18 AM | Active        |||
|   | |                   165.0000 |                   1.10 |         3,000.00 | 30 Days            | Active        |v|       
|   | -----------------------------------------------------------------------------------------------------------------
|   |
|   | Short Sell Orders
|   | -------------------------------------------------------------------------------
|   | | Price Limit (BTS/BitUSD) ^1 | Interest Rate (APR) v2 | Quantity (BitUSD) -- |     
|   | ---------------------------------------------------------------------------------
|   | |                    112.0000 |                   1.00 |             1,100.00 |^|   
|   | |                    112.0000 |                   0.50 |               115.00 |||   
|   | |                    120.0000 |                   0.00 |             5,000.00 |||   
|   | |                             |                        |                      |||
|   | |                             |                        |                      |v|   
|   | ---------------------------------------------------------------------------------
|   |
|   | ------------------------------------------------------------------------------------------------------------------
|   |
----------------------------------------------------------------------------------------------------------------------------------
The left column under the "Orderbook" tab would be similar to what you have in the left column in your layout (the box with tabs to Buy, Sell, and Short and the respective open orders tables underneath), however there would be an addition Cover tab which would include the "Open Margin Orders" table (renamed "Open Margin Call Orders"). Later I can imagine the Cover tab supporting functionality like partial covers and adding collateral. Also the BitUSD balances and BTS balances would be shown in the left column (on top of the buy/sell/short box) and not in the right column (because they are user-specific information not market-specific).

There are two main tabs in my proposed interface: "Orderbook" and "History". The "History" would show the price history chart and the "Blockchain Orders History" table underneath it in the right column, and it would put the "Account Orders History" table into the left column. The "Orderbook" tab looks as I have laid out in ASCII above. I will explain it in more shortly. Despite this tabbed interface, if the screen is large enough, I think it makes sense to instead pull out the history tab contents and put it on the right side next to the orderbook tab contents. In this case I think the "Account Orders History" table should not be in a column by itself but rather underneath the "Blockchain Orders History" table. So the layout for large screens would be a three column layout in which the left column is the same as the left column described above, the middle column is the contents of the right column in the mockup above, and the right column is the price history chart followed by the "Blockchain Orders History" table followed by the "Account Orders History" table.

The tables have removed the two quantities (Quantity and Total) and kept only one. The asset that is used to display the quantity is the one that is selected in the "Show quantity in:" option box. The user change that selection at any time and it will update the Quantity columns of all of the tables appropriately. The market can be flipped as usual using the [flip] button. If the [flip] button is pressed in a "BitUSD : BTS" market, it will replace it with a "BTS : BitUSD" market and make appropriate changes in the rest of the interface. In general, the market is "Quote : Base". The prices will be given in Quote/Base. So if the market was flipped to "BTS : BitUSD" all the prices in BTS/BitUSD would be replaced with prices in BitUSD/BTS (also the ascending/descending sort of a price column would be flipped). By default the quantity to show is selected as the Quote asset, but of course it can be changed with the "Show quantity in:" option box.

The "Display detailed short information" checkbox toggles whether the "Margin Call Orders" table and "Short Sell Orders" table will appear underneath it. By default this checkbox can be unchecked (meaning not showing the tables).

When looking at a "Quote : Base" market in which neither Quote nor Base is BTS or alternatively one of Quote or Base is BTS and the other is not a BitAsset, the layout would look the same except there would be no "Display detailed short information" checkbox (and no "Margin Call Orders" table or "Short Sell Orders" table), and the Type columns from the "Bids" and "Asks" table would be removed.

When looking at a "Quote : Base" market in which Base is BTS and Quote is a BitAsset, the "Margin Call" type and "Expired Cover" type would be under the "Bids" table and the "Short Sell" type would be under the "Asks" table (as demonstrated in the example above). On the other hand, when looking at a "Quote : Base" market in which Quote is BTS and Base is a BitAsset, the "Margin Call" type and "Expired Cover" type would be under the "Asks" table and the "Short Sell" type would be under the "Bids" table.

The orderbook chart should always show the order types that fall into the "Asks" table on the right side and show the order types that fall into the "Bids" table on the left side. They should also be color coded to match the color of the titles of the "Asks" and "Bids" tables appropriately. The orderbook chart should allow one to zoom in/out and define the domain to be smaller than [lowest bid price, highest ask price]. Also the quantity shown in the orderbook chart should be of the asset selected from the "Show quantity in:" option box. The orderbook chart should of course visualize the feed price as a line as it currently does.

As can be seen by my mockup, the short sell orders are combined with the sell orders into one table. The "Short Sell Orders" table would include detailed information about the short sell orders that are not included in the combined table (such as interest rate offered), but would also differ from the combined order in that the price limit column would be the price limit set by the short (even if it is less, in BTS/BitAsset price, than the current price feed). The number shown for short sell orders in the price column of the combined table is instead max(price limit in BTS/BitAsset, feed price in BTS/BitAsset) if the Base asset is BTS or min(price limit in BitAsset/BTS, feed price in BitAsset/BTS) if the Quote asset is BTS. Also, short sell orders and sell orders at the same price are not coalesced together in the combined table to show that there are two different types of orders offered at the same price (my hope is that the market engine would actually match sell orders before short sell orders at the same price so that this visual distinction actually has important meaning, but until then it is just an aesthetic choice). However, multiple short sells orders at the same price are coalesced together and multiple sell orders at the same price are coalesced together. Similarly, expired cover orders, margin call orders, and buy orders are not coalesced together in a way that mixes types in the combined table (again it would be nice if the market engine guaranteed that given three orders of different types at the exact same price, the margin call order was matched before the expired cover order which was matched before the BitAsset buy order). However, orders of the same type and at the same price are coalesced together.

The collateral column is removed from the tables because it is redundant information (it can be calculated from the given columns and knowledge about the initial collateral requirements, margin call requirements, and expiration period of the BitAsset system). However, this information and any other detailed information (such as the precise time that a short position expires or the principal BitAsset owed not counting the interest) can be included in tooltips when hovering over a specific order in any of the "Margin Call Orders", "Short Sell Orders", "Blockchain Orders History", "Account Orders History", and "Open * Orders" tables. The tooltip over orders in the "Bids" and "Asks" tables could not provide the same level of information because in general orders can be coalesced together in those tables. However, the tooltip could still provide a calculation of the Quantity in units of the other asset type that is not already displayed as a column in the table.

The "Bids" and "Asks" tables should highlight orders for which one of the user's orders are coalesced into. Also, orders exactly at the price feed should also be highlighted in a different color.

The "Margin Call Orders" table adds a Condition column to show whether the short position is Active, Expired, or Margin Called. The expiration column also shows the expiration date even if the short position has already expired ("1 Day Ago" to "30 Days Ago" to a timestamp if older than 30 days). An "Expired" short position can become "Margin Called" but a "Margin Called" position can never become "Expired". The Expired and Margin Called items in this table are not removed until their BitAsset debt with interest (which is the Owed column) is fully paid off. Margin Called orders might have a Call Price larger than the current feed price, as shown in the mockup example. This can happen since the Margin Call would have been triggered when the call price was lower, but partially covering the short through the margin call could increase the call price. For example, if the short in that example originally owed 15,000 BitUSD and had a call price of 99 BTS/BitUSD, then the price feed updating to 100 BTS/BitUSD would trigger a margin call on that short which would cause it to purchase asks up to a price of 111.1111 BTS/BitUSD. Let us pretend there was only one ask order below that price: a short sell order for 3,000 BitUSD at 0% interest and a price limit at 110 BTS/BitUSD. Then the margin call would match against that order (fully matching the short sell order), pay 330,000 BTS from its collateral of 2,970,000 BTS, and reduce its debt owed from 15,000 BitUSD to 12,000 BitUSD. Thus the new collateral would be 2,640,000 BTS and the new debt owed would be 12,000 BTS, which correspond to a call price of 110 BTS/BitUSD. But just because the new call price is higher than the feed price doesn't mean the order is no longer margin called; the margin call order stays (and in fact moves with the price feed maintaining its 10% difference) until the remaining 12,000 BitUSD is fully matched.

Finally, the ^N and vN indicators on the "Margin Call Orders" and "Short Sell Orders" table indicate table sorting rules. The arrow direction indicates whether the column is sort in ascending or descending order. The number is a priority in sorting. The items in the table are sorted according to the column that has the first priority in sorting order, then any items with the same value are sorted according to the column that has the second priority in sorting order, and so on. Clicking on the sorting indicator toggles between ascending, descending, and neutral. Whenever a sorting indicator that had priority N is toggled to neutral, any existing columns with non-neutral sorting indicators that have priority greater than N in the table have their sorting priority decremented by one automatically. Whenever a sorting indicator that was neutral is toggled to a non-neutral setting, it gets a sorting priority that is one larger than the current largest sorting indicator priority of the table.
« Last Edit: March 17, 2015, 01:25:14 am by arhag »

Offline kaibakker

Great work, looks already a 100 times better.

- Have you thought about flipping the sell orders book in reversed order, like how they do it on the Coinbase exchange. This gives a good perspective on the spread.
- What I also really like about Coinbase is that they don't let you scroll through all the tables, just showing the most relevant ones that fit into you screen. I often get tangled up by all the scrolling views in the Bitshares client.
- I don't know the exact consequences of this, but have you thought about the idea to integrate shorts into the sell view. Give the shorts a different color that the sell orders, don't show the intrest rate or collateral. They aren't interesting for a buyer of the asset. And show the price as the max(minimum_price, price_feed).
Only the moment someone clicks the short tab, a user is interested in the intrest rate and collateral. So I think it would be good to only show it than.

Keep up the great work!


Xeldal

  • Guest
    +5%
    It would be great to combine open orders into a single table before putting this into production - due to fixed order form tabs this layout has more tight requirements to screen real estate. Probably each order in combined orders table would need to take two lines because not all orders types have the same set of fields and this table wouldn't have header. Different orders can be shown in different colors - the same colors used for table headers now.
    Also I would suggest you to show charts in tabs, so users would be able to select what they want to see - either price chart or order book chart.
    BTW right align numbers is already on my to do list, I think I'm going to address it this week.

    Yea agreed on the charts and the combined orders, the shorts complicate things with extra columns but at least the buys/sells should be doable.

    What do you think about removing one of the quantity columns, i.e only showing USD quantity plus price or BTS quantity plus price? (removing Total column)
    I think it's fine to get rid of total column
    Great stuff  +5% 

    some suggestions:
    • Get rid of as many of the columns as possible.  Add all the extra data information to a nice detailed pop-up tool tip.  Yunbi does this very simply but it could be more stylized and informative.  If you hover over the volume of the order it gives you the total etc. 
    • It would be nice if the entire thing was on one page, no scrolling.   how about tabbing Margin Call orders, Short Orders and Market history into one table.
    • All the tables are too big, lots of white space.
    • The Chart should be center stage.  I assume its removed until something better is made??  to conserve screen real estate perhaps tab it as well with the candlestick chart.  or make the depth chart much smaller and placed on the side between Bids and Asks.  Look at Yunbi's trade page for an example. https://yunbi.com/markets/btccny
    • If possible, the market your currently trading should always be visible, as well as the current feed price.  If the screen doesn't scroll obviously this is not an issue.  If it does perhaps adding a small frame at the top.
    [/list]
    « Last Edit: March 16, 2015, 05:17:22 pm by Xeldal »

    Offline valzav

    • Sr. Member
    • ****
    • Posts: 294
      • View Profile
    +5%
    It would be great to combine open orders into a single table before putting this into production - due to fixed order form tabs this layout has more tight requirements to screen real estate. Probably each order in combined orders table would need to take two lines because not all orders types have the same set of fields and this table wouldn't have header. Different orders can be shown in different colors - the same colors used for table headers now.
    Also I would suggest you to show charts in tabs, so users would be able to select what they want to see - either price chart or order book chart.
    BTW right align numbers is already on my to do list, I think I'm going to address it this week.

    Yea agreed on the charts and the combined orders, the shorts complicate things with extra columns but at least the buys/sells should be doable.

    What do you think about removing one of the quantity columns, i.e only showing USD quantity plus price or BTS quantity plus price? (removing Total column)
    I think it's fine to get rid of total column

    Offline svk

    +5%
    It would be great to combine open orders into a single table before putting this into production - due to fixed order form tabs this layout has more tight requirements to screen real estate. Probably each order in combined orders table would need to take two lines because not all orders types have the same set of fields and this table wouldn't have header. Different orders can be shown in different colors - the same colors used for table headers now.
    Also I would suggest you to show charts in tabs, so users would be able to select what they want to see - either price chart or order book chart.
    BTW right align numbers is already on my to do list, I think I'm going to address it this week.

    Yea agreed on the charts and the combined orders, the shorts complicate things with extra columns but at least the buys/sells should be doable.

    What do you think about removing one of the quantity columns, i.e only showing USD quantity plus price or BTS quantity plus price? (removing Total column)
    Worker: dev.bitsharesblocks

    Offline xeroc

    • Board Moderator
    • Hero Member
    • *****
    • Posts: 12922
    • ChainSquad GmbH
      • View Profile
      • ChainSquad GmbH
    • BitShares: xeroc
    • GitHub: xeroc
    Right, that's called the "navigator" in highcharts terminology. Not a fan of that myself really, adds clutter. You can get the same effect through x-axis zooming directly on the plot, like I have on the price chart that I linked above.
    Awesome! Thanks .. can you make it work with mouse wheel scrolling?