1. 球的大小太小

4. 删除set position
5. 删除ZOOM 2 3 4 min 添加15 30 60min
6. 滚轮缩放
8. y轴坐标，绘制移位
9. 增量数据，可能会叠加计算
10. y轴高度太高了，可以填充深度数据来解决

修复上述问题

example/package.json

@@ -4,8 +4,8 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "start": "node ../node_modules/react-scripts/bin/react-scripts.js start",
-    "build": "node ../node_modules/react-scripts/bin/react-scripts.js build",
+    "start-web": "node ../node_modules/react-scripts/bin/react-scripts.js start",
+    "build-web": "node ../node_modules/react-scripts/bin/react-scripts.js build",
     "test": "node ../node_modules/react-scripts/bin/react-scripts.js test",
     "eject": "node ../node_modules/react-scripts/bin/react-scripts.js eject"
   },

example/src/App.js

@@ -88,6 +88,8 @@ export default () => {
     ws.onmessage = function(event) {
       const message = JSON.parse(event.data);
 
+      console.log(message)
+
       let stock = parseStockData(message)
 
       ref.addData(stock)
@@ -127,18 +129,36 @@ export default () => {
       <StockHeatmap ref={heatmapRef} width={windowDim[0]} height={windowDim[1]} />
 
       <div className="btnContainer">
-        <button onClick={() => { if (heatmapRef.current !== null) heatmapRef.current.setZoomLevel(60) }}>zoom 1 minute</button>
-        <button onClick={() => { if (heatmapRef.current !== null) heatmapRef.current.setZoomLevel(60 * 2) }}>zoom 2 minutes</button>
-        <button onClick={() => { if (heatmapRef.current !== null) heatmapRef.current.setZoomLevel(60 * 3) }}>zoom 3 minutes</button>
-        <button onClick={() => { if (heatmapRef.current !== null) heatmapRef.current.setZoomLevel(60 * 4) }}>zoom 4 minutes</button>
-        <button onClick={() => { if (heatmapRef.current !== null) heatmapRef.current.setZoomLevel(60 * 5) }}>zoom 5 minutes</button>
-        <button onClick={() => { if (heatmapRef.current !== null) heatmapRef.current.setZoomLevel(60 * 10) }}>zoom 10 minutes</button>
         <button onClick={() => {
-          const HHmmss = window.prompt('Enter HH:mm:ss', '00:00:00');
-          let split = HHmmss.split(':');
-          let position = (+split[0]-9)*3600 + (+split[1]*60) + (+split[2]);
-          if (heatmapRef.current !== null) heatmapRef.current.moveDataWindow(position);
-         }}>Set Position</button>
+          if (heatmapRef.current !== null) heatmapRef.current.setZoomLevel(60)
+        }}>zoom 1 minute
+        </button>
+        <button onClick={() => {
+          if (heatmapRef.current !== null) heatmapRef.current.setZoomLevel(60 * 5)
+        }}>zoom 5 minutes
+        </button>
+        <button onClick={() => {
+          if (heatmapRef.current !== null) heatmapRef.current.setZoomLevel(60 * 10)
+        }}>zoom 10 minutes
+        </button>
+        <button onClick={() => {
+          if (heatmapRef.current !== null) heatmapRef.current.setZoomLevel(60 * 15)
+        }}>zoom 15 minutes
+        </button>
+        <button onClick={() => {
+          if (heatmapRef.current !== null) heatmapRef.current.setZoomLevel(60 * 30)
+        }}>zoom 30 minutes
+        </button>
+        <button onClick={() => {
+          if (heatmapRef.current !== null) heatmapRef.current.setZoomLevel(60 * 60)
+        }}>zoom 60 minutes
+        </button>
+        {/* <button onClick={() => { */}
+        {/*   const HHmmss = window.prompt('Enter HH:mm:ss', '00:00:00'); */}
+        {/*   let split = HHmmss.split(':'); */}
+        {/*   let position = (+split[0]-9)*3600 + (+split[1]*60) + (+split[2]); */}
+        {/*   if (heatmapRef.current !== null) heatmapRef.current.moveDataWindow(position); */}
+        {/*  }}>Set Position</button> */}
       </div>
     </React.Fragment>
   )

package.json

@@ -28,7 +28,7 @@
   },
   "types": "./types/index.d.ts",
   "scripts": {
-    "build": "microbundle-crl --no-compress --format modern,cjs",
+    "build-heatmap": "microbundle-crl --no-compress --format modern,cjs",
     "start": "microbundle-crl watch --no-compress --format modern,cjs",
     "prepare": "run-s build",
     "test": "run-s test:unit test:lint test:build",

src/index.js

@@ -200,10 +200,10 @@ export default class StockHeatmap extends React.Component {
     let l = 0, l2 = 0;
     switch (direction) {
       case 'zoom-in':
-        l = Math.max(this.windowLength - 8, 3);
+        l = Math.max(this.windowLength - 16, 3);
         break;
       case 'zoom-out':
-        l = Math.min(this.windowLength + 8, this.data.length - 8);
+        l = Math.min(this.windowLength + 16, this.data.length - 16);
         break;
     }
     l2 = this.windowLength - l;
@@ -394,6 +394,7 @@ export default class StockHeatmap extends React.Component {
    */
   drawYAxisAndBidAskGraph = () => {
     if (this.yDomainValues !== null) {
+      const yh2 = this.yScale.bandwidth() * 0.5;
       // clear canvas before axis draw
       this.clearCanvas(
         this.defaults.borderPadding[3] + this.defaults.hmWidth(), this.defaults.borderPadding[0],
@@ -409,10 +410,10 @@ export default class StockHeatmap extends React.Component {
       this.drawingContext.textBaseline = 'top';
       let maxTextWidth = 0;
       this.yDomainValues.map(d => {
-        let y = this.yScale(d);
+        let y = this.yScale(d) + yh2;
         this.drawingContext.moveTo(0, y);
         this.drawingContext.lineTo(this.defaults.axisTickSize, y);
-        this.drawingContext.fillText(d.toFixed(2), this.defaults.axisTickSize + this.defaults.yAxisTextPadding, y + 2, this.defaults.axisYWidth - this.defaults.axisTickSize + this.defaults.yAxisTextPadding);
+        this.drawingContext.fillText(d.toFixed(2), this.defaults.axisTickSize + this.defaults.yAxisTextPadding, y, this.defaults.axisYWidth - this.defaults.axisTickSize + this.defaults.yAxisTextPadding);
         let tw = this.drawingContext.measureText(d.toFixed(2)).width;
         maxTextWidth = maxTextWidth >= tw ? maxTextWidth : tw;
       });
@@ -463,15 +464,16 @@ export default class StockHeatmap extends React.Component {
             this.bidAskBarAnimConfig[v.rate] = d3.interpolateNumber(this.bidAskBarAnimConfig[v.rate] || 0, l)(t);
             this.drawingContext.fillRect(0, this.yScale(v.rate), this.bidAskBarAnimConfig[v.rate], h);
             let tw = this.drawingContext.measureText(v.qty).width;
-            if (this.defaults.bidAskWidth - this.bidAskBarAnimConfig[v.rate] - 2 >= tw) {
+
+            if (this.defaults.bidAskWidth - this.bidAskBarAnimConfig[v.rate] - tw >= tw) {
               // text outside bar
               this.drawingContext.textAlign = 'start';
               this.drawingContext.fillStyle = this.defaults.textOnBackground;
-              this.drawingContext.fillText(v.qty, this.bidAskBarAnimConfig[v.rate] + 2, this.yScale(v.rate) + h / 2 + 1);
+              this.drawingContext.fillText(v.qty, this.bidAskBarAnimConfig[v.rate] + 1, this.yScale(v.rate) + h / 2 + 1);
             } else {
               this.drawingContext.textAlign = 'end';
               this.drawingContext.fillStyle = textColor;
-              this.drawingContext.fillText(v.qty, this.bidAskBarAnimConfig[v.rate] - 2, this.yScale(v.rate) + h / 2 + 1);
+              this.drawingContext.fillText(v.qty, this.bidAskBarAnimConfig[v.rate] - tw, this.yScale(v.rate) + h / 2 + 1);
             }
           });
         }
@@ -534,7 +536,7 @@ export default class StockHeatmap extends React.Component {
         // draw trade size
         let trade_color = marketDepth.lastTradedPrice <= bid1.rate ? this.defaults.sellColor : this.defaults.buyColor;
         this.drawingContext.fillStyle = trade_color.toString();
-        const r = /*xh2*/ this.defaults.volumeCircleMaxRadius * (+marketDepth.lastTradedQty / maxTradedVolume);
+        const r = /*xh2*/ this.defaults.volumeCircleMaxRadius * (+marketDepth.lastTradedQty / maxTradedVolume) + 3;
         this.drawingContext.beginPath();
         this.drawingContext.arc(
           this.xScale(ts) + xh2,
@@ -543,6 +545,11 @@ export default class StockHeatmap extends React.Component {
         );
         this.drawingContext.strokeStyle = trade_color;
         this.drawingContext.fill();
+
+        // 为球添加白色边框
+        this.drawingContext.lineWidth = 1; // 设置线宽，可以根据需要调整
+        this.drawingContext.strokeStyle = 'white'; // 设置描边颜色为白色
+        this.drawingContext.stroke(); // 执行描边操作
       });
 
       // draw buy line path
@@ -670,6 +677,8 @@ export default class StockHeatmap extends React.Component {
           width: '100%',
           height: '100%',
           cursor: 'crosshair',
+          paddingRight: '3%',
+          boxSizing: "border-box"
         }}></canvas>
     );
   }