1. 优化合并逻辑，最后盘口变化可以展示

2. 优化展示颜色，不会出现与底色一样的颜色。

example/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-stock-heatmap-example",
   "homepage": ".",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "private": true,
   "main": "main.js",
   "scripts": {

src/index.js

@@ -631,7 +631,7 @@ export default class StockHeatmap extends React.Component {
             let colorIndex = Math.min(parseInt(rate / 0.25), panel.orderbookColors.length - 1);
             let color = d3.color(panel.orderbookColors[colorIndex]).rgb()
 
-            color.opacity = (rate % 0.25) / 0.25;
+            color.opacity = 0.5 + 0.5 * (rate % 0.25) / 0.25;
             this.drawingContext.fillStyle = color.toString();
             this.drawingContext.fillRect(
               this.xScale(ts),
@@ -648,7 +648,7 @@ export default class StockHeatmap extends React.Component {
             let colorIndex = Math.min(parseInt(rate / 0.25), panel.orderbookColors.length - 1);
             let color = d3.color(panel.orderbookColors[colorIndex]).rgb()
 
-            color.opacity = (rate % 0.25) / 0.25;
+            color.opacity = 0.5 + 0.5 * (rate % 0.25) / 0.25;
             this.drawingContext.fillStyle = color.toString();
             this.drawingContext.fillRect(
               this.xScale(ts),
@@ -819,18 +819,19 @@ export default class StockHeatmap extends React.Component {
       marketDepth: {
         avgPrice: 0,
         buyOrderVolume: 0,
-        sellOrderVolume: 0
+        sellOrderVolume: 0,
+        lastTradedPrice: 0,
+        lastTradedQty: 0,
+        lastTradedTS: 0,
+        open: 0,
+        high: 0,
+        low: 0,
+        close: 0,
+        priceChangeAmt: 0,
+        priceChangePct: "0",
+        buys: [],
+        sells: []
       },
-      buys: [],
-      sells: [],
-      lastTradeQty: 0,
-      lastTradePrice: 0,
-      close: 0,
-      high: 0,
-      low: 0,
-      open: 0,
-      priceChangeAmt: 0,
-      priceChangePct: "0",
       pendingOrders: [],
       time: "",
       tradingsymbol: "",
@@ -841,7 +842,6 @@ export default class StockHeatmap extends React.Component {
     let totalAvgPrice = 0;
     let totalBuyOrderVolume = 0;
     let totalSellOrderVolume = 0;
-    let totalLastTradePrice = 0;
     let totalSnapshots = snapshots.length;
 
     // 初始化买卖数组
@@ -865,7 +865,7 @@ export default class StockHeatmap extends React.Component {
       totalSellOrderVolume += snapshot.marketDepth.sellOrderVolume;
 
       // 合并买单和卖单
-      snapshot.buys.forEach((buy, index) => {
+      snapshot.marketDepth.buys.forEach((buy, index) => {
         buySums[index] = {
           rate: buy.rate,
           orders: buySums[index].orders + buy.orders,
@@ -873,7 +873,7 @@ export default class StockHeatmap extends React.Component {
         };
       });
 
-      snapshot.sells.forEach((sell, index) => {
+      snapshot.marketDepth.sells.forEach((sell, index) => {
         sellSums[index] = {
           rate: sell.rate,
           orders: sellSums[index].orders + sell.orders,
@@ -882,20 +882,20 @@ export default class StockHeatmap extends React.Component {
       });
 
       // 合并最后交易的数量和价格
-      if (snapshot.side === 'buy') {
-        totalLastTradeQtyBuy += snapshot.lastTradedQty;
-      } else if (snapshot.side === 'sell') {
-        totalLastTradeQtySell += snapshot.lastTradedQty;
+      if (snapshot.marketDepth.side === 'buy') {
+        totalLastTradeQtyBuy += snapshot.marketDepth.lastTradedQty;
+      } else if (snapshot.marketDepth.side === 'sell') {
+        totalLastTradeQtySell += snapshot.marketDepth.lastTradedQty;
       }
-      totalLastTradePrice += snapshot.lastTradedPrice;
 
       // 合并其他字段
-      merged.close = snapshot.close;
-      merged.high = snapshot.high;
-      merged.low = snapshot.low;
-      merged.open = snapshot.open;
-      merged.priceChangeAmt = snapshot.priceChangeAmt;
-      merged.priceChangePct = snapshot.priceChangePct;
+      merged.marketDepth.close = snapshot.marketDepth.close;
+      merged.marketDepth.high = snapshot.marketDepth.high;
+      merged.marketDepth.low = snapshot.marketDepth.low;
+      merged.marketDepth.open = snapshot.marketDepth.open;
+      merged.marketDepth.priceChangeAmt = snapshot.marketDepth.priceChangeAmt;
+      merged.marketDepth.priceChangePct = snapshot.marketDepth.priceChangePct;
+      merged.marketDepth.lastTradedTS = snapshot.marketDepth.lastTradedTS;
     });
 
     // 计算平均市场深度数据
@@ -904,12 +904,12 @@ export default class StockHeatmap extends React.Component {
     merged.marketDepth.sellOrderVolume = totalSellOrderVolume / totalSnapshots;
 
     // 计算平均买单和卖单
-    merged.buys = buySums.map(buy => ({
+    merged.marketDepth.buys = buySums.map(buy => ({
       rate: buy.rate,
       orders: buy.orders / totalSnapshots,
       qty: buy.qty / totalSnapshots
     }));
-    merged.sells = sellSums.map(sell => ({
+    merged.marketDepth.sells = sellSums.map(sell => ({
       rate: sell.rate,
       orders: sell.orders / totalSnapshots,
       qty: sell.qty / totalSnapshots
@@ -917,9 +917,9 @@ export default class StockHeatmap extends React.Component {
 
     // 计算最终的最后交易的数量和价格
     let lastTradeQtyDiff = totalLastTradeQtyBuy - totalLastTradeQtySell;
-    merged.lastTradeQty = Math.abs(lastTradeQtyDiff);
-    merged.side = lastTradeQtyDiff > 0 ? 'buy' : 'sell';
-    merged.lastTradePrice = totalLastTradePrice / totalSnapshots;
+    merged.marketDepth.lastTradedQty = Math.abs(lastTradeQtyDiff);
+    merged.marketDepth.side = lastTradeQtyDiff > 0 ? 'buy' : 'sell';
+    merged.marketDepth.lastTradedPrice = lastTradeQtyDiff > 0 ? merged.marketDepth.sells[0].rate : merged.marketDepth.buys[0].rate;
 
     return merged;
   }
@@ -931,19 +931,25 @@ export default class StockHeatmap extends React.Component {
     let panel = this
 
     let prevData = undefined;
-    let pendingDataList = [];
-    windowedData.map((d) => {
-      if (!prevData) {
+    let snapshots = [];
+    windowedData.map((d, i) => {
+      // 最后一个元素要展示，不然会丢失盘口细节
+      if (i === windowedData.length - 1) {
         mergedWindowedData.push(d)
         prevData = d
+      // 如果是第一个数据，则进行初始化
+      } else if (!prevData) {
+        prevData = d
+      // 如果是中间的数据，则进行逻辑判断，是否需要合并
       } else if (!panel.isDepthEquals(prevData.marketDepth, d.marketDepth)) {
-        mergedWindowedData.push(d)
+        let mergedData = panel.mergeSnapshots(snapshots)
+        mergedWindowedData.push(mergedData)
         prevData = d
 
-        pendingDataList = [];
+        snapshots = [];
       }
 
-      pendingDataList.push(d)
+      snapshots.push(d)
     });
 
     return mergedWindowedData;