feat: update sitewise component interface (#58)

awslabs · Feb 15, 2022 · afc672a · afc672a
1 parent 7b6f7da
commit afc672a
Show file tree

Hide file tree

Showing 23 changed files with 482 additions and 337 deletions.
diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts
@@ -5,12 +5,12 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
-import { AssetSummaryQuery, AssetTreeSubscription, IoTAppKit, Provider, SiteWiseAssetTreeQuery, SiteWiseTimeSeriesDataProvider, StyleSettingsMap, TimeSeriesData, TimeSeriesQuery } from "@iot-app-kit/core";
+import { AssetSummaryQuery, AssetTreeSubscription, IoTAppKit, Provider, SiteWiseAssetTreeQuery, SiteWiseTimeSeriesDataProvider, StyleSettingsMap, TimeSeriesData, TimeSeriesDataRequestSettings, TimeSeriesQuery } from "@iot-app-kit/core";
+import { MinimalViewPortConfig } from "@synchro-charts/core";
 import { ColumnDefinition, FilterTexts, ResourceExplorerQuery, SitewiseAssetResource } from "./components/iot-resource-explorer/types";
 import { TableProps } from "@awsui/components-react/table";
 import { EmptyStateProps, ITreeNode, UseTreeCollection } from "@iot-app-kit/related-table";
 import { NonCancelableCustomEvent } from "@awsui/components-react";
-import { MinimalViewPortConfig } from "@synchro-charts/core";
 export namespace Components {
     interface IotAssetDetails {
         "query": AssetSummaryQuery;
@@ -22,22 +22,28 @@ export namespace Components {
     interface IotBarChart {
         "appKit": IoTAppKit;
         "isEditing": boolean | undefined;
-        "query": TimeSeriesQuery<SiteWiseTimeSeriesDataProvider>;
+        "queries": TimeSeriesQuery<SiteWiseTimeSeriesDataProvider>[];
+        "settings": TimeSeriesDataRequestSettings;
         "styleSettings": StyleSettingsMap | undefined;
+        "viewport": MinimalViewPortConfig;
         "widgetId": string;
     }
     interface IotKpi {
         "appKit": IoTAppKit;
         "isEditing": boolean | undefined;
-        "query": TimeSeriesQuery<SiteWiseTimeSeriesDataProvider>;
+        "queries": TimeSeriesQuery<SiteWiseTimeSeriesDataProvider>[];
+        "settings": TimeSeriesDataRequestSettings;
         "styleSettings": StyleSettingsMap | undefined;
+        "viewport": MinimalViewPortConfig;
         "widgetId": string;
     }
     interface IotLineChart {
         "appKit": IoTAppKit;
         "isEditing": boolean | undefined;
-        "query": TimeSeriesQuery<SiteWiseTimeSeriesDataProvider>;
+        "queries": TimeSeriesQuery<SiteWiseTimeSeriesDataProvider>[];
+        "settings": TimeSeriesDataRequestSettings;
         "styleSettings": StyleSettingsMap | undefined;
+        "viewport": MinimalViewPortConfig;
         "widgetId": string;
     }
     interface IotResourceExplorer {
@@ -59,28 +65,36 @@ export namespace Components {
     interface IotScatterChart {
         "appKit": IoTAppKit;
         "isEditing": boolean | undefined;
-        "query": TimeSeriesQuery<SiteWiseTimeSeriesDataProvider>;
+        "queries": TimeSeriesQuery<SiteWiseTimeSeriesDataProvider>[];
+        "settings": TimeSeriesDataRequestSettings;
         "styleSettings": StyleSettingsMap | undefined;
+        "viewport": MinimalViewPortConfig;
         "widgetId": string;
     }
     interface IotStatusGrid {
         "appKit": IoTAppKit;
         "isEditing": boolean | undefined;
-        "query": TimeSeriesQuery<SiteWiseTimeSeriesDataProvider>;
+        "queries": TimeSeriesQuery<SiteWiseTimeSeriesDataProvider>[];
+        "settings": TimeSeriesDataRequestSettings;
         "styleSettings": StyleSettingsMap | undefined;
+        "viewport": MinimalViewPortConfig;
         "widgetId": string;
     }
     interface IotStatusTimeline {
         "appKit": IoTAppKit;
         "isEditing": boolean | undefined;
-        "query": TimeSeriesQuery<SiteWiseTimeSeriesDataProvider>;
+        "queries": TimeSeriesQuery<SiteWiseTimeSeriesDataProvider>[];
+        "settings": TimeSeriesDataRequestSettings;
         "styleSettings": StyleSettingsMap | undefined;
+        "viewport": MinimalViewPortConfig;
         "widgetId": string;
     }
     interface IotTable {
         "appKit": IoTAppKit;
-        "query": TimeSeriesQuery<SiteWiseTimeSeriesDataProvider>;
+        "queries": TimeSeriesQuery<SiteWiseTimeSeriesDataProvider>[];
+        "settings": TimeSeriesDataRequestSettings;
         "styleSettings": StyleSettingsMap | undefined;
+        "viewport": MinimalViewPortConfig;
         "widgetId": string;
     }
     interface IotTestRoutes {
@@ -260,24 +274,30 @@ declare namespace LocalJSX {
         "subscription"?: AssetTreeSubscription;
     }
     interface IotBarChart {
-        "appKit"?: IoTAppKit;
+        "appKit": IoTAppKit;
         "isEditing"?: boolean | undefined;
-        "query"?: TimeSeriesQuery<SiteWiseTimeSeriesDataProvider>;
+        "queries": TimeSeriesQuery<SiteWiseTimeSeriesDataProvider>[];
+        "settings"?: TimeSeriesDataRequestSettings;
         "styleSettings"?: StyleSettingsMap | undefined;
+        "viewport": MinimalViewPortConfig;
         "widgetId"?: string;
     }
     interface IotKpi {
-        "appKit"?: IoTAppKit;
+        "appKit": IoTAppKit;
         "isEditing"?: boolean | undefined;
-        "query"?: TimeSeriesQuery<SiteWiseTimeSeriesDataProvider>;
+        "queries": TimeSeriesQuery<SiteWiseTimeSeriesDataProvider>[];
+        "settings"?: TimeSeriesDataRequestSettings;
         "styleSettings"?: StyleSettingsMap | undefined;
+        "viewport": MinimalViewPortConfig;
         "widgetId"?: string;
     }
     interface IotLineChart {
-        "appKit"?: IoTAppKit;
+        "appKit": IoTAppKit;
         "isEditing"?: boolean | undefined;
-        "query"?: TimeSeriesQuery<SiteWiseTimeSeriesDataProvider>;
+        "queries": TimeSeriesQuery<SiteWiseTimeSeriesDataProvider>[];
+        "settings"?: TimeSeriesDataRequestSettings;
         "styleSettings"?: StyleSettingsMap | undefined;
+        "viewport": MinimalViewPortConfig;
         "widgetId"?: string;
     }
     interface IotResourceExplorer {
@@ -297,30 +317,38 @@ declare namespace LocalJSX {
     interface IotResourceExplorerDemo {
     }
     interface IotScatterChart {
-        "appKit"?: IoTAppKit;
+        "appKit": IoTAppKit;
         "isEditing"?: boolean | undefined;
-        "query"?: TimeSeriesQuery<SiteWiseTimeSeriesDataProvider>;
+        "queries": TimeSeriesQuery<SiteWiseTimeSeriesDataProvider>[];
+        "settings"?: TimeSeriesDataRequestSettings;
         "styleSettings"?: StyleSettingsMap | undefined;
+        "viewport": MinimalViewPortConfig;
         "widgetId"?: string;
     }
     interface IotStatusGrid {
-        "appKit"?: IoTAppKit;
+        "appKit": IoTAppKit;
         "isEditing"?: boolean | undefined;
-        "query"?: TimeSeriesQuery<SiteWiseTimeSeriesDataProvider>;
+        "queries": TimeSeriesQuery<SiteWiseTimeSeriesDataProvider>[];
+        "settings"?: TimeSeriesDataRequestSettings;
         "styleSettings"?: StyleSettingsMap | undefined;
+        "viewport": MinimalViewPortConfig;
         "widgetId"?: string;
     }
     interface IotStatusTimeline {
-        "appKit"?: IoTAppKit;
+        "appKit": IoTAppKit;
         "isEditing"?: boolean | undefined;
-        "query"?: TimeSeriesQuery<SiteWiseTimeSeriesDataProvider>;
+        "queries": TimeSeriesQuery<SiteWiseTimeSeriesDataProvider>[];
+        "settings"?: TimeSeriesDataRequestSettings;
         "styleSettings"?: StyleSettingsMap | undefined;
+        "viewport": MinimalViewPortConfig;
         "widgetId"?: string;
     }
     interface IotTable {
-        "appKit"?: IoTAppKit;
-        "query"?: TimeSeriesQuery<SiteWiseTimeSeriesDataProvider>;
+        "appKit": IoTAppKit;
+        "queries": TimeSeriesQuery<SiteWiseTimeSeriesDataProvider>[];
+        "settings"?: TimeSeriesDataRequestSettings;
         "styleSettings"?: StyleSettingsMap | undefined;
+        "viewport": MinimalViewPortConfig;
         "widgetId"?: string;
     }
     interface IotTestRoutes {

diff --git a/packages/components/src/components/iot-bar-chart/iot-bar-chart.spec.ts b/packages/components/src/components/iot-bar-chart/iot-bar-chart.spec.ts
@@ -31,17 +31,12 @@ const barChartSpecPage = async (propOverrides: Partial<Components.IotBarChart> =
     appKit,
     widgetId: 'test-bar-chart-widget',
     isEditing: false,
-    query: query.iotsitewise.timeSeriesData({
-      queries: [
-        {
-          source: 'test-mock',
-          assets: [{ assetId: 'some-asset-id', properties: [{ propertyId: 'some-property-id' }] }],
-        } as SiteWiseDataStreamQuery,
-      ],
-      request: {
-        viewport,
-      },
-    }),
+    viewport,
+    queries: [
+      query.iotsitewise.timeSeriesData([
+        { assetId: 'some-asset-id', properties: [{ propertyId: 'some-property-id' }] },
+      ]),
+    ],
     ...propOverrides,
   };
   update(barChart, props);

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,21 +1,26 @@
 import { Component, Prop, h, Listen, State, Watch } from '@stencil/core';
-import { DataStream as SynchroChartsDataStream } from '@synchro-charts/core';
+import { DataStream as SynchroChartsDataStream, MinimalViewPortConfig } from '@synchro-charts/core';
 import {
   TimeSeriesDataRequestSettings,
   StyleSettingsMap,
   SiteWiseTimeSeriesDataProvider,
   IoTAppKit,
   TimeSeriesQuery,
+  composeSiteWiseProviders,
 } from '@iot-app-kit/core';
 
 @Component({
   tag: 'iot-bar-chart',
   shadow: false,
 })
 export class IotBarChart {
-  @Prop() appKit: IoTAppKit;
+  @Prop() appKit!: IoTAppKit;
 
-  @Prop() query: TimeSeriesQuery<SiteWiseTimeSeriesDataProvider>;
+  @Prop() queries!: TimeSeriesQuery<SiteWiseTimeSeriesDataProvider>[];
+
+  @Prop() viewport!: MinimalViewPortConfig;
+
+  @Prop() settings: TimeSeriesDataRequestSettings = {};
 
   @Prop() widgetId: string;
 
@@ -29,13 +34,29 @@ export class IotBarChart {
     fetchFromStartToEnd: true,
   };
 
+  buildProvider() {
+    this.provider = composeSiteWiseProviders(
+      this.queries.map((query) =>
+        query.build(this.appKit.session(this.widgetId), {
+          viewport: this.viewport,
+          settings: {
+            ...this.defaultSettings,
+            ...this.settings,
+          },
+        })
+      )
+    );
+  }
+
   componentWillLoad() {
-    this.provider = this.query.build(this.appKit.session(this.widgetId), this.defaultSettings);
+    this.buildProvider();
   }
 
-  @Watch('query')
-  private onQueryUpdate() {
-    this.provider = this.query.build(this.appKit.session(this.widgetId), this.defaultSettings);
+  @Watch('queries')
+  @Watch('settings')
+  @Watch('viewport')
+  private onPropUpdate() {
+    this.buildProvider();
   }
 
   @Listen('dateRangeChange')

diff --git a/packages/components/src/components/iot-kpi/iot-kpi.spec.ts b/packages/components/src/components/iot-kpi/iot-kpi.spec.ts
@@ -31,17 +31,12 @@ const kpiSpecPage = async (propOverrides: Partial<Components.IotKpi> = {}) => {
     appKit,
     widgetId: 'test-kpi-widget',
     isEditing: false,
-    query: query.iotsitewise.timeSeriesData({
-      queries: [
-        {
-          source: 'test-mock',
-          assets: [{ assetId: 'some-asset-id', properties: [{ propertyId: 'some-property-id' }] }],
-        } as SiteWiseDataStreamQuery,
-      ],
-      request: {
-        viewport,
-      },
-    }),
+    viewport,
+    queries: [
+      query.iotsitewise.timeSeriesData([
+        { assetId: 'some-asset-id', properties: [{ propertyId: 'some-property-id' }] },
+      ]),
+    ],
     ...propOverrides,
   };
   update(kpi, props);

diff --git a/packages/components/src/components/iot-kpi/iot-kpi.tsx b/packages/components/src/components/iot-kpi/iot-kpi.tsx
@@ -1,21 +1,26 @@
 import { Component, Prop, h, State, Listen, Watch } from '@stencil/core';
-import { DataStream as SynchroChartsDataStream } from '@synchro-charts/core';
+import { DataStream as SynchroChartsDataStream, MinimalViewPortConfig } from '@synchro-charts/core';
 import {
   StyleSettingsMap,
   SiteWiseTimeSeriesDataProvider,
   IoTAppKit,
   TimeSeriesQuery,
   TimeSeriesDataRequestSettings,
+  composeSiteWiseProviders,
 } from '@iot-app-kit/core';
 
 @Component({
   tag: 'iot-kpi',
   shadow: false,
 })
 export class IotKpi {
-  @Prop() appKit: IoTAppKit;
+  @Prop() appKit!: IoTAppKit;
 
-  @Prop() query: TimeSeriesQuery<SiteWiseTimeSeriesDataProvider>;
+  @Prop() queries!: TimeSeriesQuery<SiteWiseTimeSeriesDataProvider>[];
+
+  @Prop() viewport!: MinimalViewPortConfig;
+
+  @Prop() settings: TimeSeriesDataRequestSettings = {};
 
   @Prop() widgetId: string;
 
@@ -29,13 +34,29 @@ export class IotKpi {
     fetchMostRecentBeforeEnd: true,
   };
 
+  buildProvider() {
+    this.provider = composeSiteWiseProviders(
+      this.queries.map((query) =>
+        query.build(this.appKit.session(this.widgetId), {
+          viewport: this.viewport,
+          settings: {
+            ...this.defaultSettings,
+            ...this.settings,
+          },
+        })
+      )
+    );
+  }
+
   componentWillLoad() {
-    this.provider = this.query.build(this.appKit.session(this.widgetId), this.defaultSettings);
+    this.buildProvider();
   }
 
-  @Watch('query')
-  private onQueryUpdate() {
-    this.provider = this.query.build(this.appKit.session(this.widgetId), this.defaultSettings);
+  @Watch('queries')
+  @Watch('settings')
+  @Watch('viewport')
+  private onPropUpdate() {
+    this.buildProvider();
   }
 
   @Listen('dateRangeChange')

diff --git a/packages/components/src/components/iot-line-chart/iot-line-chart.spec.ts b/packages/components/src/components/iot-line-chart/iot-line-chart.spec.ts
@@ -31,17 +31,12 @@ const lineChartSpecPage = async (propOverrides: Partial<Components.IotKpi> = {})
     appKit,
     widgetId: 'test-line-chart-widget',
     isEditing: false,
-    query: query.iotsitewise.timeSeriesData({
-      queries: [
-        {
-          source: 'test-mock',
-          assets: [{ assetId: 'some-asset-id', properties: [{ propertyId: 'some-property-id' }] }],
-        } as SiteWiseDataStreamQuery,
-      ],
-      request: {
-        viewport,
-      },
-    }),
+    viewport,
+    queries: [
+      query.iotsitewise.timeSeriesData([
+        { assetId: 'some-asset-id', properties: [{ propertyId: 'some-property-id' }] },
+      ]),
+    ],
     ...propOverrides,
   };
   update(lineChart, props);