continuation of this questions:
ExtJs – how to add a tooltip in this situation and add the renderer in a loop
ExtJs – adding a template on a lower layer than the table
I have an order book that displays price levels and buy and sell at these levels. I put the json I receive below. The current solution only displayed items from the orderbook, and now there is trades. There is trade there, i.e. how the sell and buy orders will be matched. This will only display for 3 seconds and disappear. The trade is displayed in the same tile, on the opposite side of the price level. This means that if there was currently a buy order at a price of 4.0, and then someone added a sell order for the same amount, the tile will be displayed on the other side, buy at the level of this price level. just like the gray rectangle in the image below
messageReceived(message) {
const data = {
"orderBook": {
"1": {
"priceVec": [
{
"price": 460000000,
"ordersVec": [
{
"tradeId": 2,
"quantity": "5",
"instrumentId": 1,
"buyOrderId": "59447521953238",
"sellOrderId": "5944752195323",
"buyConnectionId": 528,
"sellConnectionId": 528,
"buyOrderQuantity": "0",
"sellOrderQuantity": "0",
"timestamp": "1722515493772663354",
"visibility": 1,
"tradeType": 1
}
]
}
]
},
"2": {
"priceVec": [
{
"price": 460000000,
"ordersVec": [
{
"tradeId": 2,
"quantity": "5",
"instrumentId": 1,
"buyOrderId": "5944752195323",
"sellOrderId": "594475219532",
"buyConnectionId": 528,
"sellConnectionId": 528,
"buyOrderQuantity": "0",
"sellOrderQuantity": "0",
"timestamp": "1722515493772663354",
"visibility": 1,
"tradeType": 1
}
]
}
]
}
},
"trades": [
{
"tradeId": 2,
"price": 460000000,
"quantity": "5",
"instrumentId": 1,
"buyOrderId": "59447521953",
"sellOrderId": "5944752195",
"buyConnectionId": 528,
"sellConnectionId": 528,
"buyOrderQuantity": "0",
"sellOrderQuantity": "0",
"timestamp": "1722515493772663354",
"visibility": 1,
"tradeType": 1
},
{
"tradeId": 3,
"price": 460000000,
"quantity": "10",
"instrumentId": 1,
"buyOrderId": "5944752195323",
"sellOrderId": "594475219532",
"buyConnectionId": 529,
"sellConnectionId": 529,
"buyOrderQuantity": "0",
"sellOrderQuantity": "0",
"timestamp": "1722515493772663355",
"visibility": 1,
"tradeType": 1
}
]
}
const parsedData = this.parseOrderBook(data.orderBook, data);
const grid = this.down('#orderBookGrid')
grid.getStore().setData(parsedData)
},
parseOrderBook(orderBook, data) {
console.log(orderBook)
const result = []
const buyLevels = orderBook['1']?.priceVec.length
const sellLevels = orderBook['2']?.priceVec.length
for (let i = 0; i < buyLevels; i++) {
const buyOrders = orderBook['1']?.priceVec[i] || {}
result.push({
buy: buyOrders.ordersVec || [],
price: buyOrders.price || 0,
sell: [],
})
}
for (let i = sellLevels - 1; i >= 0; i--) {
const sellOrders = orderBook['2']?.priceVec[i] || {}
result.push({
buy: [],
price: sellOrders.price || 0,
sell: sellOrders.ordersVec || [],
})
}
return result
}
getGridConfig: function () {
const maxColumnsCount = 24
const OrderType = {
SELL: 'sell',
BUY: 'buy',
}
const Iceberg = {
ID: 4,
}
const resolveParticipantCode = this.resolveParticipantCode.bind(this)
const orderTooltipText = this.orderTooltipText.bind(this)
const columns = [
...Array.from({ length: maxColumnsCount }, (_, index) => ({
renderer: function (value, gridcell, record) {
value = record.get(OrderType.SELL)[maxColumnsCount - 1 - index]
if (value) {
gridcell.tdCls = OrderType.SELL
gridcell.tdAttr = `data-qtip="${orderTooltipText(value)}"`
let icon =
value.orderType === Iceberg.ID
? '<img class="order-book__iceberg" />'
: ''
return (
icon +
(resolveParticipantCode(value) || '') +
'<br />' +
value.quantity
)
} else {
gridcell.tdCls = ''
}
},
})),
{
dataIndex: 'price',
renderer: function (value, gridcell, record) {
let quantity = 0
let hasIceberg = false
let leavesQty = 0
record.get(OrderType.SELL).forEach((order) => {
quantity += Number(order.quantity)
leavesQty += Number(order.leavesQty)
if (order.orderType === Iceberg.ID) {
hasIceberg = true
}
})
record.get(OrderType.BUY).forEach((order) => {
quantity += Number(order.quantity)
if (order.orderType === Iceberg.ID) {
hasIceberg = true
}
})
gridcell.tdCls = 'amount'
return `${Common.Formatter.to4PrecisionPrice(value)}<br />${quantity}${hasIceberg ? '/' + leavesQty : ''}`
},
},
...Array.from({ length: maxColumnsCount }, (_, index) => ({
renderer: function (value, gridcell, record) {
value = record.get(OrderType.BUY)[index]
if (value) {
gridcell.tdCls = OrderType.BUY
gridcell.tdAttr = `data-qtip="${orderTooltipText(value)}"`
let icon =
value.orderType === Iceberg.ID
? '<img class="order-book__iceberg" />'
: ''
return (
icon +
(resolveParticipantCode(value) || '') +
'<br />' +
value.quantity
)
} else {
gridcell.tdCls = ''
}
},
})),
]