feat: bind gestures to components (#31)

Co-authored-by: Norbert Nader <nnader@amazon.com>

packages/components/src/components/iot-connector/iot-connector.spec.ts

@@ -101,3 +101,15 @@ it('updates with new query', async () => {
     ],
   });
 });
+
+//TODO: Backfill these tests.
+// Onboard cypress and try the component test runner https://www.cypress.io/blog/2021/04/06/introducing-the-cypress-component-test-runner/
+describe('handles gestures', () => {
+  it('panning', () => {
+    //TODO: Make sure data is requested for new viewport range when panning back in time
+  });
+
+  it('zooming', () => {
+    //TODO: Make sure correct resolution is displayed for selected viewport range based on resolution mapping
+  });
+});

packages/components/src/components/iot-connector/iot-connector.tsx

@@ -1,4 +1,4 @@
-import { Component, Prop, State, Watch } from '@stencil/core';
+import { Component, Listen, Prop, State, Watch } from '@stencil/core';
 import { DataStream } from '@synchro-charts/core';
 import isEqual from 'lodash.isequal';
 import {
@@ -64,6 +64,18 @@ export class IotConnector {
     }
   }
 
+  @Listen('dateRangeChange')
+  private handleDateRangeChange({ detail: [start, end, lastUpdatedBy] }: { detail: [Date, Date, string | undefined] }) {
+    if (this.update != null) {
+      this.update({
+        request: {
+          ...this.request,
+          viewport: {start, end, lastUpdatedBy}
+        },
+      });
+    }
+  }
+
   render() {
     const { dataStreams } = this;