加载动画，绘制阈值

example/src/App.js

@@ -74,8 +74,8 @@ function parseStockData(data) {
 
 export default () => {
 
-  // const [loading] = React.useState(true);
-  // const progressRef = React.useRef(null);
+  const [loading, setLoading] = React.useState(true);
+  const progressRef = React.useRef(null);
   /** @type {React.MutableRefObject<StockHeatmap>} */
   const heatmapRef = React.useRef(null);
   const [windowDim, setWindowDim] = React.useState([0, 0]);
@@ -91,13 +91,20 @@ export default () => {
     let ref = heatmapRef.current
 
     console.log('ws创建完成')
-
     ws.onmessage = function(event) {
       const message = JSON.parse(event.data);
 
       let stock = parseStockData(message)
 
       ref.addData(stock)
+
+      if (progressRef.current !== null) {
+        progressRef.current.innerHTML = ` 等待数据推送 ${(100 * ref.data.length / ref.windowLength + 1).toFixed(0)}% ...`
+
+        if (ref.data.length >= ref.windowLength) {
+          setLoading(false)
+        }
+      }
     };
 
     ws.onerror = function(event) {
@@ -123,13 +130,14 @@ export default () => {
   return (
     <React.Fragment>
 
-      {/* {loading && */}
-      {/*   <div className="loadingIndicator"> */}
-      {/*     <div className="loadingSpinner"> */}
-      {/*       <div className="loader">Loading...</div> */}
-      {/*     </div> */}
-      {/*     <div ref={progressRef}> Downloading 0% ...</div> */}
-      {/*   </div>} */}
+      {loading &&
+        <div className="loadingIndicator">
+          <div className="loadingSpinner">
+            <div className="loader">Loading...</div>
+          </div>
+          <div ref={progressRef}> Downloading 0% ...</div>
+        </div>
+      }
 
       <StockHeatmap ref={heatmapRef} width={windowDim[0]} height={windowDim[1]} autoScroll={autoScroll} toggleAutoScroll={toggleAutoScroll} />
 

src/index.js

@@ -40,7 +40,7 @@ export default class StockHeatmap extends React.Component {
 
   data = [];
   windowedData = [];
-  windowLength = 40;
+  windowLength = 20;
   windowPosition = 0;
 
   mouse = {
@@ -255,7 +255,6 @@ export default class StockHeatmap extends React.Component {
    * This function changes the d3 scales based on windowed data
    */
   updateHeatmapDimensions = () => {
-    // console.log('heatmap dimension updated, update scale domains');
     const { width, height } = this.props;
     if (width > 0 && height > 0 && this.windowedData.length > 0) {
       // setup x-scale
@@ -280,7 +279,6 @@ export default class StockHeatmap extends React.Component {
    */
   updateHeatmap = () => {
     if (this.drawingContext !== null) {
-      // console.log('heatmap update req');
       // 1. update scale and dimensions
       this.updateHeatmapDimensions();
 
@@ -438,12 +436,15 @@ export default class StockHeatmap extends React.Component {
     // const maxTickInterval = this.defaults.hmWidth() / assumedTextWidth;
     const bandInterval = Math.max(1, parseInt(this.windowedData.length / (this.defaults.hmWidth() / 102)));
     // console.log('bandInterval=', bandInterval);
+    let panel = this;
     this.windowedData.map((d, i) => {
       if (i !=0 && i % bandInterval === 0) {
         let x = this.xScale(d.ts);
-        this.drawingContext.moveTo(x, 0);
-        this.drawingContext.lineTo(x, this.defaults.axisTickSize);
-        this.drawingContext.fillText(d.ts, x, this.defaults.axisTickSize + this.defaults.xAxisTextPadding);
+        if (x + d.ts.length * 5 < panel.defaults.hmWidth()) {
+          this.drawingContext.moveTo(x, 0);
+          this.drawingContext.lineTo(x, this.defaults.axisTickSize);
+          this.drawingContext.fillText(d.ts, x, this.defaults.axisTickSize + this.defaults.xAxisTextPadding);
+        }
       }
     });
     this.drawingContext.textAlign = 'left';