Set custom zoom setting interface.

example/src/App.js

@@ -80,6 +80,15 @@ export default () => {
         </div>}
 
       <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>
+      </div>
     </React.Fragment>
   )
 }

example/src/index.css

@@ -97,4 +97,16 @@ code {
 
 .loadingSpinner {
   margin-right: 10px;
+}
+
+.btnContainer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  text-align: center;
+}
+
+.btnContainer button {
+  margin: 5px;
 }

src/index.js

@@ -9,7 +9,7 @@ import * as d3Shape from 'd3-shape';
 import * as d3Zoom from 'd3-zoom';
 import * as d3Timer from 'd3-timer';
 import * as d3Ease from 'd3-ease';
-import { extractBidPrices, extractBidVolumes, extractMaxTradedVolume, extractMaxVolume } from './utils';
+import { extractBidPrices, extractBidVolumes, extractMaxTradedVolume, extractMaxVolume, zoomTimeFormat } from './utils';
 
 export const d3 = Object.assign(
   Object.assign(
@@ -304,6 +304,8 @@ export default class StockHeatmap extends React.Component {
       if (i % bandInterval === 0)
         this.drawingContext.fillText(d.ts, x, this.defaults.axisTickSize + this.defaults.xAxisTextPadding);
     });
+    this.drawingContext.textAlign = 'left';
+    this.drawingContext.fillText(`Zoom Level:  ${zoomTimeFormat(this.windowLength)}`, 20, this.defaults.axisTickSize + this.defaults.xAxisTextPadding + 20);
     this.drawingContext.lineWidth = 1.2;
     this.drawingContext.strokeStyle = this.defaults.axisColor;
     this.drawingContext.stroke();
@@ -521,26 +523,12 @@ export default class StockHeatmap extends React.Component {
     }
   }
 
-  // i = 0;
   /**
    * This updates the data in array to be viewed in graph
    */
   updateWindowedData = () => {
     // console.log('window data updated');
     this.moveDataWindow(this.data.length - this.windowLength - 1);
-    // if (this.autoScroll || (this.windowedData.length === 0)) {
-    //   this.windowedData = this.data.slice(-this.windowLength);
-    //   this.windowPosition = this.data.length - 1 - this.windowLength;
-    // }
-    // this.updateHeatmap();
-    // -------------------- TEST --------------------
-    // setInterval(() => {
-    //   this.i++;
-    //   this.windowedData = this.data.slice(this.i, this.windowLength + this.i);
-    //   console.log('changed', this.windowedData);
-    //   this.updateHeatmap();
-    // }, 1000);
-    // -------------------- TEST --------------------
   }
 
   /**
@@ -562,6 +550,17 @@ export default class StockHeatmap extends React.Component {
     }
   }
 
+  /**
+   * This sets the Heatmap Zoom level aka. window.
+   * @param {number} zoom The seconds to zoom into
+   */
+  setZoomLevel = (zoom) => {
+    let l = Math.min(Math.max(zoom, 3), this.data.length - 1);
+    let l2 = this.windowLength - l;
+    this.windowLength = l;
+    this.moveDataWindow(this.windowPosition + l2);
+  }
+
   /**
    * Render Function
    */

src/utils.js

@@ -54,4 +54,22 @@ export const extractMaxTradedVolume = (data) => {
   }).sort((a, b) => a - b);
   if (vols.length > 0) return vols[vols.length - 1];
   else return 1;
+}
+
+/**
+ * Format zoom scale time
+ * @param {number} seconds 
+ */
+export const zoomTimeFormat = (seconds) => {
+  if(seconds > 59) {
+    if(seconds > 3599) {
+      let hrs = seconds/3600;
+      return `${hrs.toFixed(2)} hour${hrs>1?'s':''}`;
+    } 
+    else {
+      let mins = seconds/60;
+      return `${mins.toFixed(2)} minute${mins>1?'s':''}`;
+    }
+  }
+  else return `${seconds} second${seconds>1?'s':''}`;
 }