汉化

example/src/App.js

@@ -133,9 +133,9 @@ export default () => {
       {loading &&
         <div className="loadingIndicator">
           <div className="loadingSpinner">
-            <div className="loader">Loading...</div>
+            <div className="loader">等待数据推送...</div>
           </div>
-          <div ref={progressRef}> Downloading 0% ...</div>
+          <div ref={progressRef}> 等待数据推送 0% ...</div>
         </div>
       }
 
@@ -144,32 +144,32 @@ export default () => {
       <div className="btnContainer">
         <button onClick={() => {
           if (heatmapRef.current !== null) heatmapRef.current.setZoomLevel(60)
-        }}>zoom 1 minute
+        }}>1分钟视域
         </button>
         <button onClick={() => {
           if (heatmapRef.current !== null) heatmapRef.current.setZoomLevel(60 * 5)
-        }}>zoom 5 minutes
+        }}>5分钟视域
         </button>
         <button onClick={() => {
           if (heatmapRef.current !== null) heatmapRef.current.setZoomLevel(60 * 10)
-        }}>zoom 10 minutes
+        }}>10分钟视域
         </button>
         <button onClick={() => {
           if (heatmapRef.current !== null) heatmapRef.current.setZoomLevel(60 * 15)
-        }}>zoom 15 minutes
+        }}>15分钟视域
         </button>
         <button onClick={() => {
           if (heatmapRef.current !== null) heatmapRef.current.setZoomLevel(60 * 30)
-        }}>zoom 30 minutes
+        }}>30分钟视域
         </button>
         <button onClick={() => {
           if (heatmapRef.current !== null) heatmapRef.current.setZoomLevel(60 * 60)
-        }}>zoom 60 minutes
+        }}>60分钟视域
         </button>
         {!autoScroll &&
           <div className="playBtn" onClick={() => {
             setAutoScroll(true)
-          }}> Play
+          }}> 继续
           </div>
         }
         {/* <button onClick={() => { */}

src/index.js

@@ -356,7 +356,7 @@ export default class StockHeatmap extends React.Component {
       // 绘制方块内数据
       drawPending.map((d, index) => {
         let depth = d.marketDepth;
-        let text = `${depth.side} ${depth.lastTradedQty} at ${depth.lastTradedPrice} `;
+        let text = `${depth.side === 'sell' ? '卖出' : '买入'} ${depth.lastTradedQty} 在 ${depth.lastTradedPrice} `;
         context.fillStyle = d3.color(depth.side == 'sell' ? '#222' : '#222').rgb();
         context.fillText(`${d.ts}`, x + 10, y + 7 + 15 + index * 45);
         context.fillText(text, x + 10, y + 7 + 30 + index * 45);
@@ -395,8 +395,8 @@ export default class StockHeatmap extends React.Component {
       this.drawingContext.save();
       this.drawingContext.textAlign = 'center';
       this.drawingContext.textBaseline = 'middle';
-      this.drawingContext.font = `bold ${textHeight}px sans-serif`;
-      this.drawingContext.fillText((d.marketDepth.buyOrderVolume / d.marketDepth.sellOrderVolume).toFixed(2), x + w * 1/2, y + textHeight / 2);
+      // this.drawingContext.font = `bold ${textHeight}px sans-serif`;
+      // this.drawingContext.fillText(, x + w * 1/2, y + textHeight / 2);
       // // Runing average ratio
       // if(this.windowedData.length >= this.defaults.runningRatioSeconds) {
       //   let sellT20RunningSum = 0;
@@ -410,7 +410,7 @@ export default class StockHeatmap extends React.Component {
       // }
       this.drawingContext.font = `bold ${13}px sans-serif`;
       this.drawingContext.textBaseline = 'bottom';
-      this.drawingContext.fillText('Buy/Sell', x + w / 2, y + textHeight * 2 + 5);
+      this.drawingContext.fillText(`买卖比: ${(d.marketDepth.buyOrderVolume / d.marketDepth.sellOrderVolume).toFixed(2)}`, x + w / 2, y + textHeight * 2 + 5);
       this.drawingContext.restore();
     }
   }
@@ -449,20 +449,28 @@ export default class StockHeatmap extends React.Component {
     });
     this.drawingContext.textAlign = 'left';
     this.drawingContext.font = '12px Arial';
-    this.drawingContext.fillText(`Zoom Level:  ${zoomTimeFormat(this.windowLength)}`, 20, this.defaults.axisTickSize + this.defaults.xAxisTextPadding + 20);
-    let w = this.drawingContext.measureText(`Zoom Level:  ${zoomTimeFormat(this.windowLength)}`).width;
+
+    let zoomLevelText = `当前视域:  ${zoomTimeFormat(this.windowLength)}`
+    this.drawingContext.fillText(zoomLevelText, 20, this.defaults.axisTickSize + this.defaults.xAxisTextPadding + 20);
+    let w = this.drawingContext.measureText(zoomLevelText).width;
     const maxVolumeInWindowData = extractMaxTradedVolume(this.windowedData);
-    this.drawingContext.fillText(`Max Volume in ${zoomTimeFormat(this.windowLength, 1)}:  `, 20 + w + 20, this.defaults.axisTickSize + this.defaults.xAxisTextPadding + 20);
+
+    const maxVolumeText = `最近${zoomTimeFormat(this.windowLength, 1)}内最大交易量:  `;
+    this.drawingContext.fillText(maxVolumeText, 20 + w + 20, this.defaults.axisTickSize + this.defaults.xAxisTextPadding + 20);
     this.drawingContext.fillStyle = this.defaults.textHighlightOnBackground;
-    w += this.drawingContext.measureText(`Max Volume in ${zoomTimeFormat(this.windowLength, 1)}:  `).width;
+    w += this.drawingContext.measureText(maxVolumeText).width;
     this.drawingContext.font = 'bold 12px Arial';
     this.drawingContext.fillText(`${maxVolumeInWindowData}`, 20 + w + 20, this.defaults.axisTickSize + this.defaults.xAxisTextPadding + 20);
     w += this.drawingContext.measureText(`${maxVolumeInWindowData}`).width;
+
     if (this.windowedData.length > 0) {
       this.drawingContext.fillStyle = this.defaults.textOnBackground;
-      this.drawingContext.fillText(`LTP:  ${this.windowedData[this.windowedData.length - 1].marketDepth.lastTradedPrice
-      }     LTQ:  ${this.windowedData[this.windowedData.length - 1].marketDepth.lastTradedQty
-      }`, 20 + w + 40, this.defaults.axisTickSize + this.defaults.xAxisTextPadding + 20);
+      this.drawingContext.font = '12px Arial';
+      this.drawingContext.fillText(`
+        最后交易价格:  ${this.windowedData[this.windowedData.length - 1].marketDepth.lastTradedPrice}
+        最后交易数量:  ${this.windowedData[this.windowedData.length - 1].marketDepth.lastTradedQty}
+        最后交易时间:  ${this.windowedData[this.windowedData.length - 1].ts}
+        `, 20 + w + 40, this.defaults.axisTickSize + this.defaults.xAxisTextPadding + 20);
     }
     this.drawingContext.fillStyle = this.defaults.textOnBackground;
     this.drawingContext.lineWidth = 1.2;

src/utils.js

@@ -96,12 +96,12 @@ export const zoomTimeFormat = (seconds, decimal) => {
   if(seconds > 59) {
     if(seconds > 3599) {
       let hrs = seconds/3600;
-      return `${hrs.toFixed(decimal)} hour${hrs>1?'s':''}`;
+      return `${hrs.toFixed(decimal)} 小时`;
     }
     else {
       let mins = seconds/60;
-      return `${mins.toFixed(decimal)} minute${mins>1?'s':''}`;
+      return `${mins.toFixed(decimal)} 分钟`;
     }
   }
-  else return `${seconds} second${seconds>1?'s':''}`;
+  else return `${seconds} 秒`;
 }