feat: add in styles overrides and refId in query (#38)

awslabs · Jan 24, 2022 · 76a9d63 · 76a9d63
1 parent 57772c1
commit 76a9d63
Show file tree

Hide file tree

Showing 32 changed files with 312 additions and 62 deletions.
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 { AnyDataStreamQuery, AssetSummaryQuery, AssetTreeSubscription, DataModule, SiteWiseAssetTreeQuery, TimeSeriesDataRequest, TimeSeriesDataRequestSettings } from "@iot-app-kit/core";
-import { DataStream, MinimalViewPortConfig } from "@synchro-charts/core";
+import { AnyDataStreamQuery, AssetSummaryQuery, AssetTreeSubscription, DataModule, DataStream, SiteWiseAssetTreeQuery, StyleSettingsMap, TimeSeriesDataRequest, TimeSeriesDataRequestSettings } 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";
@@ -24,6 +24,7 @@ export namespace Components {
         "isEditing": boolean | undefined;
         "queries": AnyDataStreamQuery[];
         "settings": TimeSeriesDataRequestSettings | undefined;
+        "styleSettings": StyleSettingsMap | undefined;
         "viewport": MinimalViewPortConfig;
         "widgetId": string;
     }
@@ -32,12 +33,14 @@ export namespace Components {
         "queries": AnyDataStreamQuery[];
         "renderFunc": ({ dataStreams }: { dataStreams: DataStream[] }) => unknown;
         "request": TimeSeriesDataRequest;
+        "styleSettings": StyleSettingsMap | undefined;
     }
     interface IotKpi {
         "appKit": DataModule;
         "isEditing": boolean | undefined;
         "queries": AnyDataStreamQuery[];
         "settings": TimeSeriesDataRequestSettings | undefined;
+        "styleSettings": StyleSettingsMap | undefined;
         "viewport": MinimalViewPortConfig;
         "widgetId": string;
     }
@@ -46,6 +49,8 @@ export namespace Components {
         "isEditing": boolean | undefined;
         "queries": AnyDataStreamQuery[];
         "settings": TimeSeriesDataRequestSettings | undefined;
+        "styleSettings": StyleSettingsMap | undefined;
+        "styles": StyleSettingsMap | undefined;
         "viewport": MinimalViewPortConfig;
         "widgetId": string;
     }
@@ -70,6 +75,7 @@ export namespace Components {
         "isEditing": boolean | undefined;
         "queries": AnyDataStreamQuery[];
         "settings": TimeSeriesDataRequestSettings | undefined;
+        "styleSettings": StyleSettingsMap | undefined;
         "viewport": MinimalViewPortConfig;
         "widgetId": string;
     }
@@ -78,6 +84,7 @@ export namespace Components {
         "isEditing": boolean | undefined;
         "queries": AnyDataStreamQuery[];
         "settings": TimeSeriesDataRequestSettings | undefined;
+        "styleSettings": StyleSettingsMap | undefined;
         "viewport": MinimalViewPortConfig;
         "widgetId": string;
     }
@@ -86,13 +93,15 @@ export namespace Components {
         "isEditing": boolean | undefined;
         "queries": AnyDataStreamQuery[];
         "settings": TimeSeriesDataRequestSettings | undefined;
+        "styleSettings": StyleSettingsMap | undefined;
         "viewport": MinimalViewPortConfig;
         "widgetId": string;
     }
     interface IotTable {
         "appKit": DataModule;
         "queries": AnyDataStreamQuery[];
         "settings": TimeSeriesDataRequestSettings | undefined;
+        "styleSettings": StyleSettingsMap | undefined;
         "viewport": MinimalViewPortConfig;
         "widgetId": string;
     }
@@ -270,6 +279,7 @@ declare namespace LocalJSX {
         "isEditing"?: boolean | undefined;
         "queries"?: AnyDataStreamQuery[];
         "settings"?: TimeSeriesDataRequestSettings | undefined;
+        "styleSettings"?: StyleSettingsMap | undefined;
         "viewport"?: MinimalViewPortConfig;
         "widgetId"?: string;
     }
@@ -278,12 +288,14 @@ declare namespace LocalJSX {
         "queries"?: AnyDataStreamQuery[];
         "renderFunc"?: ({ dataStreams }: { dataStreams: DataStream[] }) => unknown;
         "request"?: TimeSeriesDataRequest;
+        "styleSettings"?: StyleSettingsMap | undefined;
     }
     interface IotKpi {
         "appKit"?: DataModule;
         "isEditing"?: boolean | undefined;
         "queries"?: AnyDataStreamQuery[];
         "settings"?: TimeSeriesDataRequestSettings | undefined;
+        "styleSettings"?: StyleSettingsMap | undefined;
         "viewport"?: MinimalViewPortConfig;
         "widgetId"?: string;
     }
@@ -292,6 +304,8 @@ declare namespace LocalJSX {
         "isEditing"?: boolean | undefined;
         "queries"?: AnyDataStreamQuery[];
         "settings"?: TimeSeriesDataRequestSettings | undefined;
+        "styleSettings"?: StyleSettingsMap | undefined;
+        "styles"?: StyleSettingsMap | undefined;
         "viewport"?: MinimalViewPortConfig;
         "widgetId"?: string;
     }
@@ -316,6 +330,7 @@ declare namespace LocalJSX {
         "isEditing"?: boolean | undefined;
         "queries"?: AnyDataStreamQuery[];
         "settings"?: TimeSeriesDataRequestSettings | undefined;
+        "styleSettings"?: StyleSettingsMap | undefined;
         "viewport"?: MinimalViewPortConfig;
         "widgetId"?: string;
     }
@@ -324,6 +339,7 @@ declare namespace LocalJSX {
         "isEditing"?: boolean | undefined;
         "queries"?: AnyDataStreamQuery[];
         "settings"?: TimeSeriesDataRequestSettings | undefined;
+        "styleSettings"?: StyleSettingsMap | undefined;
         "viewport"?: MinimalViewPortConfig;
         "widgetId"?: string;
     }
@@ -332,13 +348,15 @@ declare namespace LocalJSX {
         "isEditing"?: boolean | undefined;
         "queries"?: AnyDataStreamQuery[];
         "settings"?: TimeSeriesDataRequestSettings | undefined;
+        "styleSettings"?: StyleSettingsMap | undefined;
         "viewport"?: MinimalViewPortConfig;
         "widgetId"?: string;
     }
     interface IotTable {
         "appKit"?: DataModule;
         "queries"?: AnyDataStreamQuery[];
         "settings"?: TimeSeriesDataRequestSettings | undefined;
+        "styleSettings"?: StyleSettingsMap | undefined;
         "viewport"?: MinimalViewPortConfig;
         "widgetId"?: string;
     }

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,7 +1,6 @@
 import { Component, Prop, h } from '@stencil/core';
 import { MinimalViewPortConfig } from '@synchro-charts/core';
-import { AnyDataStreamQuery, DataModule, TimeSeriesDataRequestSettings } from '@iot-app-kit/core';
-import { StyleSettingsMap } from '../types';
+import { AnyDataStreamQuery, DataModule, TimeSeriesDataRequestSettings, StyleSettingsMap } from '@iot-app-kit/core';
 
 const DEFAULT_VIEWPORT = { duration: 10 * 1000 * 60 };
 
@@ -22,7 +21,7 @@ export class IotBarChart {
 
   @Prop() settings: TimeSeriesDataRequestSettings | undefined;
 
-  @Prop() styles: StyleSettingsMap | undefined;
+  @Prop() styleSettings: StyleSettingsMap | undefined;
 
   getSettings(): TimeSeriesDataRequestSettings {
     return {
@@ -37,6 +36,7 @@ export class IotBarChart {
       <iot-connector
         appKit={this.appKit}
         queries={this.queries}
+        styleSettings={this.styleSettings}
         request={{
           settings,
           viewport: this.viewport,

diff --git a/packages/components/src/components/iot-connector/bindStylesToDataStreams.spec.ts b/packages/components/src/components/iot-connector/bindStylesToDataStreams.spec.ts
@@ -0,0 +1,53 @@
+import { bindStylesToDataStreams } from './bindStylesToDataStreams';
+import { DATA_STREAM, DATA_STREAM_2 } from '../../testing/mockWidgetProperties';
+
+it('returns empty array when provided no data streams', () => {
+  expect(
+    bindStylesToDataStreams({
+      dataStreams: [],
+      styleSettings: { someStyle: { color: 'red' } },
+    })
+  ).toEqual([]);
+});
+
+it('returns data streams when no matching styles', () => {
+  expect(
+    bindStylesToDataStreams({
+      dataStreams: [DATA_STREAM],
+      styleSettings: { someStyle: { color: 'red' } },
+    })
+  ).toEqual([DATA_STREAM]);
+});
+
+it('associates styles to corresponding data stream', () => {
+  expect(
+    bindStylesToDataStreams({
+      dataStreams: [{ ...DATA_STREAM, refId: 'someStyle' }],
+      styleSettings: { someStyle: { color: 'red' } },
+    })
+  ).toEqual([{ ...DATA_STREAM, refId: 'someStyle', color: 'red' }]);
+});
+
+it('associates styles to corresponding data stream for multiple data streams', () => {
+  expect(
+    bindStylesToDataStreams({
+      dataStreams: [
+        { ...DATA_STREAM, refId: 'someStyle' },
+        { ...DATA_STREAM_2, refId: 'someStyle2' },
+      ],
+      styleSettings: { someStyle: { color: 'red' }, someStyle2: { color: 'blue' } },
+    })
+  ).toEqual([
+    { ...DATA_STREAM, refId: 'someStyle', color: 'red' },
+    { ...DATA_STREAM_2, refId: 'someStyle2', color: 'blue' },
+  ]);
+});
+
+it('returns data stream when no matching refId', () => {
+  expect(
+    bindStylesToDataStreams({
+      dataStreams: [{ ...DATA_STREAM, refId: 'someStyle100' }],
+      styleSettings: { someStyle: { color: 'red' } },
+    })
+  ).toEqual([{ ...DATA_STREAM, refId: 'someStyle100' }]);
+});
diff --git a/packages/components/src/components/iot-connector/bindStylesToDataStreams.ts b/packages/components/src/components/iot-connector/bindStylesToDataStreams.ts
@@ -0,0 +1,18 @@
+import { StyleSettingsMap, DataStream } from '@iot-app-kit/core';
+
+// If the data stream has a reference id with associated styles, append those styles to the data stream.
+export const bindStylesToDataStreams = ({
+  dataStreams,
+  styleSettings,
+}: {
+  dataStreams: DataStream[];
+  styleSettings?: StyleSettingsMap;
+}): DataStream[] =>
+  dataStreams.map((dataStream) =>
+    styleSettings == null || dataStream.refId == null
+      ? dataStream
+      : {
+          ...dataStream,
+          ...styleSettings[dataStream.refId],
+        }
+  );
diff --git a/packages/components/src/components/iot-connector/iot-connector.spec.ts b/packages/components/src/components/iot-connector/iot-connector.spec.ts
@@ -126,3 +126,36 @@ it('updates with new queries', async () => {
     ],
   });
 });
+
+it('binds styles to data streams', async () => {
+  const renderFunc = jest.fn();
+  const { assetId, propertyId } = toSiteWiseAssetProperty(DATA_STREAM.id);
+  const REF_ID = 'some-ref-id';
+
+  await connectorSpecPage({
+    renderFunc,
+    styleSettings: {
+      [REF_ID]: {
+        color: 'red',
+        name: 'my-name',
+      },
+    },
+    queries: [
+      {
+        source: 'test-mock',
+        assets: [{ assetId, properties: [{ propertyId, refId: REF_ID }] }],
+      } as SiteWiseDataStreamQuery,
+    ],
+  });
+
+  expect(renderFunc).lastCalledWith({
+    dataStreams: [
+      expect.objectContaining({
+        id: DATA_STREAM.id,
+        refId: REF_ID,
+        color: 'red',
+        name: 'my-name',
+      }),
+    ],
+  });
+});
diff --git a/packages/components/src/components/iot-connector/iot-connector.tsx b/packages/components/src/components/iot-connector/iot-connector.tsx
@@ -1,13 +1,15 @@
 import { Component, Listen, Prop, State, Watch } from '@stencil/core';
-import { DataStream } from '@synchro-charts/core';
 import isEqual from 'lodash.isequal';
 import {
   AnyDataStreamQuery,
   SubscriptionUpdate,
   subscribeToDataStreams,
   DataModule,
+  DataStream,
   TimeSeriesDataRequest,
+  StyleSettingsMap,
 } from '@iot-app-kit/core';
+import { bindStylesToDataStreams } from './bindStylesToDataStreams';
 
 @Component({
   tag: 'iot-connector',
@@ -22,6 +24,8 @@ export class IotConnector {
 
   @Prop() renderFunc: ({ dataStreams }: { dataStreams: DataStream[] }) => unknown;
 
+  @Prop() styleSettings: StyleSettingsMap | undefined;
+
   @State() dataStreams: DataStream[] = [];
 
   private update: (subscriptionUpdate: SubscriptionUpdate<AnyDataStreamQuery>) => void;
@@ -37,7 +41,7 @@ export class IotConnector {
         request: this.request,
       },
       (dataStreams: DataStream[]) => {
-        this.dataStreams = dataStreams;
+        this.dataStreams = bindStylesToDataStreams({ dataStreams, styleSettings: this.styleSettings });
       }
     );
 

diff --git a/packages/components/src/components/iot-kpi/iot-kpi.tsx b/packages/components/src/components/iot-kpi/iot-kpi.tsx
@@ -1,7 +1,6 @@
 import { Component, Prop, h } from '@stencil/core';
 import { MinimalViewPortConfig } from '@synchro-charts/core';
-import { AnyDataStreamQuery, DataModule, TimeSeriesDataRequestSettings } from '@iot-app-kit/core';
-import { StyleSettingsMap } from '../types';
+import { AnyDataStreamQuery, DataModule, TimeSeriesDataRequestSettings, StyleSettingsMap } from '@iot-app-kit/core';
 
 const DEFAULT_VIEWPORT = { duration: 10 * 1000 };
 
@@ -22,7 +21,7 @@ export class IotKpi {
 
   @Prop() settings: TimeSeriesDataRequestSettings | undefined;
 
-  @Prop() styles: StyleSettingsMap | undefined;
+  @Prop() styleSettings: StyleSettingsMap | undefined;
 
   getSettings(): TimeSeriesDataRequestSettings {
     return {
@@ -37,6 +36,7 @@ export class IotKpi {
       <iot-connector
         appKit={this.appKit}
         queries={this.queries}
+        styleSettings={this.styleSettings}
         request={{
           settings,
           viewport: this.viewport,

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,7 +1,6 @@
 import { Component, Prop, h } from '@stencil/core';
 import { MinimalViewPortConfig } from '@synchro-charts/core';
-import { AnyDataStreamQuery, DataModule, TimeSeriesDataRequestSettings } from '@iot-app-kit/core';
-import { StyleSettingsMap } from '../types';
+import { AnyDataStreamQuery, DataModule, TimeSeriesDataRequestSettings, StyleSettingsMap } from '@iot-app-kit/core';
 
 const DEFAULT_VIEWPORT = { duration: 10 * 1000 * 60 };
 
@@ -24,6 +23,8 @@ export class IotLineChart {
 
   @Prop() styles: StyleSettingsMap | undefined;
 
+  @Prop() styleSettings: StyleSettingsMap | undefined;
+
   getSettings(): TimeSeriesDataRequestSettings {
     return {
       ...this.settings,
@@ -39,6 +40,7 @@ export class IotLineChart {
       <iot-connector
         appKit={this.appKit}
         queries={this.queries}
+        styleSettings={this.styleSettings}
         request={{
           settings,
           viewport: this.viewport,

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,7 +1,6 @@
 import { Component, Prop, h } from '@stencil/core';
 import { MinimalViewPortConfig } from '@synchro-charts/core';
-import { AnyDataStreamQuery, DataModule, TimeSeriesDataRequestSettings } from '@iot-app-kit/core';
-import { StyleSettingsMap } from '../types';
+import { AnyDataStreamQuery, DataModule, TimeSeriesDataRequestSettings, StyleSettingsMap } from '@iot-app-kit/core';
 
 const DEFAULT_VIEWPORT = { duration: 10 * 1000 * 60 };
 
@@ -22,7 +21,7 @@ export class IotScatterChart {
 
   @Prop() settings: TimeSeriesDataRequestSettings | undefined;
 
-  @Prop() styles: StyleSettingsMap | undefined;
+  @Prop() styleSettings: StyleSettingsMap | undefined;
 
   getSettings(): TimeSeriesDataRequestSettings {
     return {
@@ -37,6 +36,7 @@ export class IotScatterChart {
       <iot-connector
         appKit={this.appKit}
         queries={this.queries}
+        styleSettings={this.styleSettings}
         request={{
           settings,
           viewport: this.viewport,