方向识别问题

example/src/App.js

@@ -26,7 +26,7 @@ function formatTimestamp(timestamp) {
 
 function parseStockData(data) {
   // Extracting values from the input data
-  const { asks, bids, last_price, last_qty, total_qty, time } = data;
+  const { asks, bids, last_price, last_qty, total_qty, time, side } = data;
 
   // Convert asks and bids to the required format
   const processOrders = (orders) => orders.map(([rate, qty]) => ({
@@ -62,7 +62,8 @@ function parseStockData(data) {
       buyOrderVolume: bids.reduce((sum, [, qty]) => sum + qty, 0),
       buys: processOrders(bids),
       sellOrderVolume: asks.reduce((sum, [, qty]) => sum + qty, 0),
-      sells: processOrders(asks)
+      sells: processOrders(asks),
+      side: side
     },
     ts: formatTimestamp(time),
     tradingsymbol: "XYZ123",

src/index.js

@@ -534,7 +534,7 @@ export default class StockHeatmap extends React.Component {
         }
 
         // draw trade size
-        let trade_color = marketDepth.lastTradedPrice <= bid1.rate ? this.defaults.sellColor : this.defaults.buyColor;
+        let trade_color = marketDepth.side == 'sell' ? this.defaults.sellColor : this.defaults.buyColor;
         this.drawingContext.fillStyle = trade_color.toString();
         const r = /*xh2*/ this.defaults.volumeCircleMaxRadius * (+marketDepth.lastTradedQty / maxTradedVolume) + 3;
         this.drawingContext.beginPath();

types/index.d.ts

@@ -74,7 +74,8 @@ export interface StockData {
     buyOrderVolume: number,
     buys: { rate: number, orders: number, qty: number }[],
     sellOrderVolume: number,
-    sells: { rate: number, orders: number, qty: number }[]
+    sells: { rate: number, orders: number, qty: number }[],
+    side: string
   },
   /** Timestamp for this data point HH:mm:ss */
   ts: string,