awslabs · diehbria · Feb 28, 2022 · Feb 25, 2022
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -35,7 +35,7 @@
     "@iot-app-kit/related-table": "1.0.0",
     "@iot-app-kit/source-iotsitewise": "0.0.1",
     "@stencil/core": "^2.7.0",
-    "@synchro-charts/core": "^1.1.1",
+    "@synchro-charts/core": "^2.0.0",
     "styled-components": "^5.3.0"
   },
   "devDependencies": {

diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts
@@ -5,8 +5,8 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
-import { Annotations, MinimalViewPortConfig, TableColumn } from "@synchro-charts/core";
-import { Provider, StyleSettingsMap, TimeQuery, TimeSeriesData, TimeSeriesDataRequest, TimeSeriesDataRequestSettings, TreeQuery } from "@iot-app-kit/core";
+import { Annotations, TableColumn } from "@synchro-charts/core";
+import { Provider, StyleSettingsMap, TimeQuery, TimeSeriesData, TimeSeriesDataRequest, TimeSeriesDataRequestSettings, TreeQuery, Viewport } from "@iot-app-kit/core";
 import { BranchReference, SiteWiseAssetTreeNode } from "@iot-app-kit/source-iotsitewise";
 import { ColumnDefinition, FilterTexts } from "./components/iot-resource-explorer/types";
 import { TableProps } from "@awsui/components-react/table";
@@ -19,7 +19,7 @@ export namespace Components {
         "queries": TimeQuery<TimeSeriesData[], TimeSeriesDataRequest>[];
         "settings": TimeSeriesDataRequestSettings;
         "styleSettings": StyleSettingsMap | undefined;
-        "viewport": MinimalViewPortConfig;
+        "viewport": Viewport;
         "widgetId": string;
     }
     interface IotKpi {
@@ -28,7 +28,7 @@ export namespace Components {
         "queries": TimeQuery<TimeSeriesData[], TimeSeriesDataRequest>[];
         "settings": TimeSeriesDataRequestSettings;
         "styleSettings": StyleSettingsMap | undefined;
-        "viewport": MinimalViewPortConfig;
+        "viewport": Viewport;
         "widgetId": string;
     }
     interface IotLineChart {
@@ -37,7 +37,7 @@ export namespace Components {
         "queries": TimeQuery<TimeSeriesData[], TimeSeriesDataRequest>[];
         "settings": TimeSeriesDataRequestSettings;
         "styleSettings": StyleSettingsMap | undefined;
-        "viewport": MinimalViewPortConfig;
+        "viewport": Viewport;
         "widgetId": string;
     }
     interface IotResourceExplorer {
@@ -62,7 +62,7 @@ export namespace Components {
         "queries": TimeQuery<TimeSeriesData[], TimeSeriesDataRequest>[];
         "settings": TimeSeriesDataRequestSettings;
         "styleSettings": StyleSettingsMap | undefined;
-        "viewport": MinimalViewPortConfig;
+        "viewport": Viewport;
         "widgetId": string;
     }
     interface IotStatusGrid {
@@ -71,7 +71,7 @@ export namespace Components {
         "queries": TimeQuery<TimeSeriesData[], TimeSeriesDataRequest>[];
         "settings": TimeSeriesDataRequestSettings;
         "styleSettings": StyleSettingsMap | undefined;
-        "viewport": MinimalViewPortConfig;
+        "viewport": Viewport;
         "widgetId": string;
     }
     interface IotStatusTimeline {
@@ -80,7 +80,7 @@ export namespace Components {
         "queries": TimeQuery<TimeSeriesData[], TimeSeriesDataRequest>[];
         "settings": TimeSeriesDataRequestSettings;
         "styleSettings": StyleSettingsMap | undefined;
-        "viewport": MinimalViewPortConfig;
+        "viewport": Viewport;
         "widgetId": string;
     }
     interface IotTable {
@@ -89,13 +89,13 @@ export namespace Components {
         "settings": TimeSeriesDataRequestSettings;
         "styleSettings": StyleSettingsMap | undefined;
         "tableColumns": TableColumn[];
-        "viewport": MinimalViewPortConfig;
+        "viewport": Viewport;
         "widgetId": string;
     }
     interface IotTestRoutes {
     }
     interface IotTimeSeriesConnector {
-        "initialViewport": MinimalViewPortConfig;
+        "initialViewport": Viewport;
         "provider": Provider<TimeSeriesData[]>;
         "renderFunc": (data: TimeSeriesData) => void;
         "styleSettings": StyleSettingsMap | undefined;
@@ -241,7 +241,7 @@ declare namespace LocalJSX {
         "queries": TimeQuery<TimeSeriesData[], TimeSeriesDataRequest>[];
         "settings"?: TimeSeriesDataRequestSettings;
         "styleSettings"?: StyleSettingsMap | undefined;
-        "viewport": MinimalViewPortConfig;
+        "viewport": Viewport;
         "widgetId"?: string;
     }
     interface IotKpi {
@@ -250,7 +250,7 @@ declare namespace LocalJSX {
         "queries": TimeQuery<TimeSeriesData[], TimeSeriesDataRequest>[];
         "settings"?: TimeSeriesDataRequestSettings;
         "styleSettings"?: StyleSettingsMap | undefined;
-        "viewport": MinimalViewPortConfig;
+        "viewport": Viewport;
         "widgetId"?: string;
     }
     interface IotLineChart {
@@ -259,7 +259,7 @@ declare namespace LocalJSX {
         "queries": TimeQuery<TimeSeriesData[], TimeSeriesDataRequest>[];
         "settings"?: TimeSeriesDataRequestSettings;
         "styleSettings"?: StyleSettingsMap | undefined;
-        "viewport": MinimalViewPortConfig;
+        "viewport": Viewport;
         "widgetId"?: string;
     }
     interface IotResourceExplorer {
@@ -284,7 +284,7 @@ declare namespace LocalJSX {
         "queries": TimeQuery<TimeSeriesData[], TimeSeriesDataRequest>[];
         "settings"?: TimeSeriesDataRequestSettings;
         "styleSettings"?: StyleSettingsMap | undefined;
-        "viewport": MinimalViewPortConfig;
+        "viewport": Viewport;
         "widgetId"?: string;
     }
     interface IotStatusGrid {
@@ -293,7 +293,7 @@ declare namespace LocalJSX {
         "queries": TimeQuery<TimeSeriesData[], TimeSeriesDataRequest>[];
         "settings"?: TimeSeriesDataRequestSettings;
         "styleSettings"?: StyleSettingsMap | undefined;
-        "viewport": MinimalViewPortConfig;
+        "viewport": Viewport;
         "widgetId"?: string;
     }
     interface IotStatusTimeline {
@@ -302,7 +302,7 @@ declare namespace LocalJSX {
         "queries": TimeQuery<TimeSeriesData[], TimeSeriesDataRequest>[];
         "settings"?: TimeSeriesDataRequestSettings;
         "styleSettings"?: StyleSettingsMap | undefined;
-        "viewport": MinimalViewPortConfig;
+        "viewport": Viewport;
         "widgetId"?: string;
     }
     interface IotTable {
@@ -311,13 +311,13 @@ declare namespace LocalJSX {
         "settings"?: TimeSeriesDataRequestSettings;
         "styleSettings"?: StyleSettingsMap | undefined;
         "tableColumns"?: TableColumn[];
-        "viewport": MinimalViewPortConfig;
+        "viewport": Viewport;
         "widgetId"?: string;
     }
     interface IotTestRoutes {
     }
     interface IotTimeSeriesConnector {
-        "initialViewport"?: MinimalViewPortConfig;
+        "initialViewport"?: Viewport;
         "provider"?: Provider<TimeSeriesData[]>;
         "renderFunc"?: (data: TimeSeriesData) => void;
         "styleSettings"?: StyleSettingsMap | undefined;

diff --git a/packages/components/src/components/iot-bar-chart/iot-bar-chart.tsx b/packages/components/src/components/iot-bar-chart/iot-bar-chart.tsx
@@ -1,11 +1,12 @@
 import { Component, Prop, h, Listen, State, Watch } from '@stencil/core';
 import uuid from 'uuid';
-import { Annotations, DataStream as SynchroChartsDataStream, MinimalViewPortConfig } from '@synchro-charts/core';
+import { Annotations, DataStream as SynchroChartsDataStream } from '@synchro-charts/core';
 import {
   TimeSeriesDataRequestSettings,
   StyleSettingsMap,
   TimeQuery,
   combineProviders,
+  Viewport,
   ProviderWithViewport,
   TimeSeriesData,
   TimeSeriesDataRequest,
@@ -20,7 +21,7 @@ export class IotBarChart {
 
   @Prop() queries!: TimeQuery<TimeSeriesData[], TimeSeriesDataRequest>[];
 
-  @Prop() viewport!: MinimalViewPortConfig;
+  @Prop() viewport!: Viewport;
 
   @Prop() settings: TimeSeriesDataRequestSettings = {};
 

diff --git a/packages/components/src/components/iot-kpi/iot-kpi.tsx b/packages/components/src/components/iot-kpi/iot-kpi.tsx
@@ -1,11 +1,12 @@
 import { Component, Prop, h, State, Listen, Watch } from '@stencil/core';
-import { Annotations, DataStream as SynchroChartsDataStream, MinimalViewPortConfig } from '@synchro-charts/core';
+import { Annotations, DataStream as SynchroChartsDataStream } from '@synchro-charts/core';
 import {
   StyleSettingsMap,
   TimeSeriesDataRequestSettings,
   combineProviders,
   TimeQuery,
   TimeSeriesData,
+  Viewport,
   TimeSeriesDataRequest,
   ProviderWithViewport,
 } from '@iot-app-kit/core';
@@ -20,7 +21,7 @@ export class IotKpi {
 
   @Prop() annotations: Annotations;
 
-  @Prop() viewport!: MinimalViewPortConfig;
+  @Prop() viewport!: Viewport;
 
   @Prop() settings: TimeSeriesDataRequestSettings = {};
 
@@ -33,6 +34,7 @@ export class IotKpi {
   @State() provider: ProviderWithViewport<TimeSeriesData[]>;
 
   private defaultSettings: TimeSeriesDataRequestSettings = {
+    resolution: '0',
     fetchMostRecentBeforeEnd: true,
   };
 

diff --git a/packages/components/src/components/iot-line-chart/iot-line-chart.tsx b/packages/components/src/components/iot-line-chart/iot-line-chart.tsx
@@ -1,12 +1,13 @@
 import { Component, Prop, h, Listen, State, Watch } from '@stencil/core';
-import { Annotations, DataStream as SynchroChartsDataStream, MinimalViewPortConfig } from '@synchro-charts/core';
+import { Annotations, DataStream as SynchroChartsDataStream } from '@synchro-charts/core';
 import {
   StyleSettingsMap,
   TimeSeriesDataRequestSettings,
   combineProviders,
   TimeQuery,
   TimeSeriesData,
   TimeSeriesDataRequest,
+  Viewport,
   ProviderWithViewport,
 } from '@iot-app-kit/core';
 import uuid from 'uuid';
@@ -20,7 +21,7 @@ export class IotLineChart {
 
   @Prop() queries!: TimeQuery<TimeSeriesData[], TimeSeriesDataRequest>[];
 
-  @Prop() viewport!: MinimalViewPortConfig;
+  @Prop() viewport!: Viewport;
 
   @Prop() settings: TimeSeriesDataRequestSettings = {};
 
@@ -64,6 +65,7 @@ export class IotLineChart {
 
   @Listen('dateRangeChange')
   private handleDateRangeChange({ detail: [start, end, lastUpdatedBy] }: { detail: [Date, Date, string | undefined] }) {
+    console.log('dateRangeChange event emitted', [start, end, lastUpdatedBy]);
     this.provider.updateViewport({ start, end, lastUpdatedBy });
   }
 

diff --git a/packages/components/src/components/iot-resource-explorer/iot-resource-explorer.tsx b/packages/components/src/components/iot-resource-explorer/iot-resource-explorer.tsx
@@ -89,7 +89,6 @@ export class IotResourceExplorer {
 
   componentWillUnmount() {
     this.provider.unsubscribe();
-    console.log('unsubscribed');
   }
 
   expandNode = (node: ITreeNode<SiteWiseAssetResource>) => {

diff --git a/packages/components/src/components/iot-scatter-chart/iot-scatter-chart.tsx b/packages/components/src/components/iot-scatter-chart/iot-scatter-chart.tsx
@@ -1,9 +1,10 @@
 import { Component, Prop, h, Listen, State, Watch } from '@stencil/core';
-import { Annotations, DataStream as SynchroChartsDataStream, MinimalViewPortConfig } from '@synchro-charts/core';
+import { Annotations, DataStream as SynchroChartsDataStream } from '@synchro-charts/core';
 import {
   StyleSettingsMap,
   TimeSeriesDataRequestSettings,
   TimeQuery,
+  Viewport,
   TimeSeriesData,
   TimeSeriesDataRequest,
   ProviderWithViewport,
@@ -20,7 +21,7 @@ export class IotScatterChart {
 
   @Prop() queries!: TimeQuery<TimeSeriesData[], TimeSeriesDataRequest>[];
 
-  @Prop() viewport!: MinimalViewPortConfig;
+  @Prop() viewport!: Viewport;
 
   @Prop() settings: TimeSeriesDataRequestSettings = {};
 
@@ -71,15 +72,17 @@ export class IotScatterChart {
       <iot-time-series-connector
         provider={this.provider}
         styleSettings={this.styleSettings}
-        renderFunc={({ dataStreams }) => (
-          <sc-scatter-chart
-            dataStreams={dataStreams as SynchroChartsDataStream[]}
-            annotations={this.annotations}
-            viewport={this.viewport}
-            isEditing={this.isEditing}
-            widgetId={this.widgetId}
-          />
-        )}
+        renderFunc={({ dataStreams }) => {
+          return (
+            <sc-scatter-chart
+              dataStreams={dataStreams as SynchroChartsDataStream[]}
+              annotations={this.annotations}
+              viewport={this.viewport}
+              isEditing={this.isEditing}
+              widgetId={this.widgetId}
+            />
+          );
+        }}
       />
     );
   }

diff --git a/packages/components/src/components/iot-status-grid/iot-status-grid.tsx b/packages/components/src/components/iot-status-grid/iot-status-grid.tsx
@@ -1,11 +1,12 @@
 import { Component, Prop, h, State, Listen, Watch } from '@stencil/core';
-import { Annotations, DataStream as SynchroChartsDataStream, MinimalViewPortConfig } from '@synchro-charts/core';
+import { Annotations, DataStream as SynchroChartsDataStream } from '@synchro-charts/core';
 import {
   StyleSettingsMap,
   TimeSeriesDataRequestSettings,
   TimeQuery,
   TimeSeriesData,
   TimeSeriesDataRequest,
+  Viewport,
   ProviderWithViewport,
   combineProviders,
 } from '@iot-app-kit/core';
@@ -20,7 +21,7 @@ export class IotStatusGrid {
 
   @Prop() queries!: TimeQuery<TimeSeriesData[], TimeSeriesDataRequest>[];
 
-  @Prop() viewport!: MinimalViewPortConfig;
+  @Prop() viewport!: Viewport;
 
   @Prop() settings: TimeSeriesDataRequestSettings = {};
 
@@ -33,6 +34,7 @@ export class IotStatusGrid {
   @State() provider: ProviderWithViewport<TimeSeriesData[]>;
 
   private defaultSettings: TimeSeriesDataRequestSettings = {
+    resolution: '0',
     fetchMostRecentBeforeEnd: true,
   };
 

diff --git a/packages/components/src/components/iot-status-timeline/iot-status-timeline.tsx b/packages/components/src/components/iot-status-timeline/iot-status-timeline.tsx
@@ -1,10 +1,11 @@
 import { Component, Prop, h, Listen, State, Watch } from '@stencil/core';
-import { Annotations, DataStream as SynchroChartsDataStream, MinimalViewPortConfig } from '@synchro-charts/core';
+import { Annotations, DataStream as SynchroChartsDataStream } from '@synchro-charts/core';
 import {
   StyleSettingsMap,
   TimeSeriesDataRequestSettings,
   TimeQuery,
   TimeSeriesData,
+  Viewport,
   TimeSeriesDataRequest,
   ProviderWithViewport,
   combineProviders,
@@ -20,7 +21,7 @@ export class IotStatusTimeline {
 
   @Prop() queries!: TimeQuery<TimeSeriesData[], TimeSeriesDataRequest>[];
 
-  @Prop() viewport!: MinimalViewPortConfig;
+  @Prop() viewport!: Viewport;
 
   @Prop() settings: TimeSeriesDataRequestSettings = {};
 
@@ -33,6 +34,7 @@ export class IotStatusTimeline {
   @State() provider: ProviderWithViewport<TimeSeriesData[]>;
 
   private defaultSettings: TimeSeriesDataRequestSettings = {
+    resolution: '0',
     fetchMostRecentBeforeStart: true,
     fetchFromStartToEnd: true,
   };

diff --git a/packages/components/src/components/iot-table/iot-table.tsx b/packages/components/src/components/iot-table/iot-table.tsx
@@ -1,16 +1,12 @@
 import { Component, Prop, h, State, Listen, Watch } from '@stencil/core';
-import {
-  Annotations,
-  DataStream as SynchroChartsDataStream,
-  MinimalViewPortConfig,
-  TableColumn,
-} from '@synchro-charts/core';
+import { Annotations, DataStream as SynchroChartsDataStream, TableColumn } from '@synchro-charts/core';
 import {
   StyleSettingsMap,
   TimeSeriesDataRequestSettings,
   combineProviders,
   TimeQuery,
   TimeSeriesData,
+  Viewport,
   TimeSeriesDataRequest,
   ProviderWithViewport,
 } from '@iot-app-kit/core';
@@ -27,7 +23,7 @@ export class IotTable {
 
   @Prop() queries!: TimeQuery<TimeSeriesData[], TimeSeriesDataRequest>[];
 
-  @Prop() viewport!: MinimalViewPortConfig;
+  @Prop() viewport!: Viewport;
 
   @Prop() settings: TimeSeriesDataRequestSettings = {};
 
@@ -38,6 +34,7 @@ export class IotTable {
   @State() provider: ProviderWithViewport<TimeSeriesData[]>;
 
   private defaultSettings: TimeSeriesDataRequestSettings = {
+    resolution: '0',
     fetchMostRecentBeforeEnd: true,
   };