Add keyboard arrow key nav.

example/src/App.js

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

src/index.js

@@ -192,14 +192,14 @@ export default class StockHeatmap extends React.Component {
    */
   eventKeyDown = (e) => {
     e.preventDefault();
-    console.log('key event', e.isComposing, e.key);
-    switch(e.key) {
+    console.log('key event', e.isComposing, e.key, e.ctrlKey);
+    switch (e.key) {
       case 'ArrowLeft':
-        this.moveDataWindow(this.windowPosition - 1);
-      break;
+        this.moveDataWindow(this.windowPosition - (e.ctrlKey ? 10 : 1));
+        break;
       case 'ArrowRight':
-        this.moveDataWindow(this.windowPosition + 1);
-      break;
+        this.moveDataWindow(this.windowPosition + (e.ctrlKey ? 10 : 1));
+        break;
     }
   }
 

types/index.d.ts

@@ -36,4 +36,10 @@ export default class StockHeatmap extends React.Component<{
      * @param {number} zoom The seconds to zoom into
      */
     setZoomLevel: (zoom: number) => void;
+
+    /**
+   * Move the position of data window within the main data.
+   * @param {number} position The target position of the window to be moved to.
+   */
+    moveDataWindow: (position: number) => void
 }