diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts index 8e12de4a5..a38c55cd9 100644 --- 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 } from "@synchro-charts/core"; import { Provider, StyleSettingsMap, TimeQuery, TimeSeriesData, TimeSeriesDataRequest, TimeSeriesDataRequestSettings, TreeQuery, Viewport } from "@iot-app-kit/core"; +import { AlarmsConfig, Annotations, Axis, LabelsConfig, LayoutConfig, LegendConfig, MessageOverrides, MinimalSizeConfig, MovementConfig, ScaleConfig, TableColumn, Trend } from "@synchro-charts/core"; import { Item, TableItem, TableProps } from "@iot-app-kit/table"; import { BranchReference, SiteWiseAssetTreeNode } from "@iot-app-kit/source-iotsitewise"; import { ColumnDefinition, FilterTexts } from "./components/iot-resource-explorer/types"; @@ -15,17 +15,28 @@ import { EmptyStateProps, ITreeNode, UseTreeCollection } from "@iot-app-kit/rela import { NonCancelableCustomEvent } from "@awsui/components-react"; export namespace Components { interface IotBarChart { + "alarms"?: AlarmsConfig; "annotations": Annotations; + "axis"?: Axis.Options; + "gestures"?: boolean; "isEditing": boolean | undefined; + "layout"?: LayoutConfig; + "legend"?: LegendConfig; + "messageOverrides"?: MessageOverrides; + "movement"?: MovementConfig; "queries": TimeQuery[]; + "scale"?: ScaleConfig; "settings": TimeSeriesDataRequestSettings; + "size"?: MinimalSizeConfig; "styleSettings": StyleSettingsMap | undefined; + "trends": Trend[]; "viewport": Viewport; "widgetId": string; } interface IotKpi { "annotations": Annotations; "isEditing": boolean | undefined; + "messageOverrides"?: MessageOverrides; "queries": TimeQuery[]; "settings": TimeSeriesDataRequestSettings; "styleSettings": StyleSettingsMap | undefined; @@ -34,10 +45,19 @@ export namespace Components { } interface IotLineChart { "annotations": Annotations; + "axis": Axis.Options; + "gestures"?: boolean; "isEditing": boolean | undefined; + "layout"?: LayoutConfig; + "legend"?: LegendConfig; + "messageOverrides": MessageOverrides; + "movement"?: MovementConfig; "queries": TimeQuery[]; + "scale"?: ScaleConfig; "settings": TimeSeriesDataRequestSettings; + "size"?: MinimalSizeConfig; "styleSettings": StyleSettingsMap | undefined; + "trends": Trend[]; "viewport": Viewport; "widgetId": string; } @@ -65,17 +85,28 @@ export namespace Components { interface IotResourceExplorerDemo { } interface IotScatterChart { + "alarms"?: AlarmsConfig; "annotations": Annotations; + "axis"?: Axis.Options; + "gestures"?: boolean; "isEditing": boolean | undefined; + "layout"?: LayoutConfig; + "legend"?: LegendConfig; + "messageOverrides"?: MessageOverrides; + "movement"?: MovementConfig; "queries": TimeQuery[]; + "scale"?: ScaleConfig; "settings": TimeSeriesDataRequestSettings; + "size"?: MinimalSizeConfig; "styleSettings": StyleSettingsMap | undefined; + "trends": Trend[]; "viewport": Viewport; "widgetId": string; } interface IotStatusGrid { "annotations": Annotations; "isEditing": boolean | undefined; + "labelsConfig": LabelsConfig; "queries": TimeQuery[]; "settings": TimeSeriesDataRequestSettings; "styleSettings": StyleSettingsMap | undefined; @@ -83,10 +114,18 @@ export namespace Components { "widgetId": string; } interface IotStatusTimeline { - "annotations": Annotations; + "alarms"?: AlarmsConfig; + "annotations"?: Annotations; + "axis"?: Axis.Options; + "gestures"?: boolean; "isEditing": boolean | undefined; + "layout"?: LayoutConfig; + "messageOverrides"?: MessageOverrides; + "movement"?: MovementConfig; "queries": TimeQuery[]; + "scale"?: ScaleConfig; "settings": TimeSeriesDataRequestSettings; + "size"?: MinimalSizeConfig; "styleSettings": StyleSettingsMap | undefined; "viewport": Viewport; "widgetId": string; @@ -95,11 +134,14 @@ export namespace Components { "annotations": Annotations; "columnDefinitions": TableProps['columnDefinitions']; "items": Item[]; + "messageOverrides"?: MessageOverrides; "propertyFiltering": TableProps['propertyFiltering']; "queries": TimeQuery[]; "settings": TimeSeriesDataRequestSettings; "sorting": TableProps['sorting']; "styleSettings": StyleSettingsMap | undefined; + "tableColumns": TableColumn[]; + "trends": Trend[]; "viewport": Viewport; "widgetId": string; } @@ -256,17 +298,28 @@ declare global { } declare namespace LocalJSX { interface IotBarChart { + "alarms"?: AlarmsConfig; "annotations"?: Annotations; + "axis"?: Axis.Options; + "gestures"?: boolean; "isEditing"?: boolean | undefined; + "layout"?: LayoutConfig; + "legend"?: LegendConfig; + "messageOverrides"?: MessageOverrides; + "movement"?: MovementConfig; "queries": TimeQuery[]; + "scale"?: ScaleConfig; "settings"?: TimeSeriesDataRequestSettings; + "size"?: MinimalSizeConfig; "styleSettings"?: StyleSettingsMap | undefined; + "trends"?: Trend[]; "viewport": Viewport; "widgetId"?: string; } interface IotKpi { "annotations"?: Annotations; "isEditing"?: boolean | undefined; + "messageOverrides"?: MessageOverrides; "queries": TimeQuery[]; "settings"?: TimeSeriesDataRequestSettings; "styleSettings"?: StyleSettingsMap | undefined; @@ -275,10 +328,19 @@ declare namespace LocalJSX { } interface IotLineChart { "annotations"?: Annotations; + "axis"?: Axis.Options; + "gestures"?: boolean; "isEditing"?: boolean | undefined; + "layout"?: LayoutConfig; + "legend"?: LegendConfig; + "messageOverrides"?: MessageOverrides; + "movement"?: MovementConfig; "queries": TimeQuery[]; + "scale"?: ScaleConfig; "settings"?: TimeSeriesDataRequestSettings; + "size"?: MinimalSizeConfig; "styleSettings"?: StyleSettingsMap | undefined; + "trends"?: Trend[]; "viewport": Viewport; "widgetId"?: string; } @@ -306,17 +368,28 @@ declare namespace LocalJSX { interface IotResourceExplorerDemo { } interface IotScatterChart { + "alarms"?: AlarmsConfig; "annotations"?: Annotations; + "axis"?: Axis.Options; + "gestures"?: boolean; "isEditing"?: boolean | undefined; + "layout"?: LayoutConfig; + "legend"?: LegendConfig; + "messageOverrides"?: MessageOverrides; + "movement"?: MovementConfig; "queries": TimeQuery[]; + "scale"?: ScaleConfig; "settings"?: TimeSeriesDataRequestSettings; + "size"?: MinimalSizeConfig; "styleSettings"?: StyleSettingsMap | undefined; + "trends"?: Trend[]; "viewport": Viewport; "widgetId"?: string; } interface IotStatusGrid { "annotations"?: Annotations; "isEditing"?: boolean | undefined; + "labelsConfig"?: LabelsConfig; "queries": TimeQuery[]; "settings"?: TimeSeriesDataRequestSettings; "styleSettings"?: StyleSettingsMap | undefined; @@ -324,10 +397,18 @@ declare namespace LocalJSX { "widgetId"?: string; } interface IotStatusTimeline { + "alarms"?: AlarmsConfig; "annotations"?: Annotations; + "axis"?: Axis.Options; + "gestures"?: boolean; "isEditing"?: boolean | undefined; + "layout"?: LayoutConfig; + "messageOverrides"?: MessageOverrides; + "movement"?: MovementConfig; "queries": TimeQuery[]; + "scale"?: ScaleConfig; "settings"?: TimeSeriesDataRequestSettings; + "size"?: MinimalSizeConfig; "styleSettings"?: StyleSettingsMap | undefined; "viewport": Viewport; "widgetId"?: string; @@ -336,11 +417,14 @@ declare namespace LocalJSX { "annotations"?: Annotations; "columnDefinitions": TableProps['columnDefinitions']; "items": Item[]; + "messageOverrides"?: MessageOverrides; "propertyFiltering"?: TableProps['propertyFiltering']; "queries": TimeQuery[]; "settings"?: TimeSeriesDataRequestSettings; "sorting"?: TableProps['sorting']; "styleSettings"?: StyleSettingsMap | undefined; + "tableColumns"?: TableColumn[]; + "trends"?: Trend[]; "viewport": Viewport; "widgetId"?: string; } diff --git a/packages/components/src/components/iot-table/iot-react-table.tsx b/packages/components/src/components/iot-table/iot-react-table.tsx index 4a5719c4d..dda87de23 100644 --- a/packages/components/src/components/iot-table/iot-react-table.tsx +++ b/packages/components/src/components/iot-table/iot-react-table.tsx @@ -1,7 +1,7 @@ -import { Component, Element, Host, Prop, State, h } from '@stencil/core'; +import { Component, Element, Host, Prop, h } from '@stencil/core'; import React, { FunctionComponent } from 'react'; -import { createRoot, Root } from 'react-dom/client'; import { Table, TableItem, TableProps } from '@iot-app-kit/table'; +import ReactDOM from 'react-dom'; @Component({ tag: 'iot-react-table', @@ -17,11 +17,7 @@ export class IotReactTable { @Element() host: HTMLElement; - @State() root: Root; - - componentWillLoad() { - this.root = createRoot(this.host); - } + componentWillLoad() {} componentDidLoad() { this.componentDidUpdate(); @@ -34,7 +30,7 @@ export class IotReactTable { sorting: this.sorting, propertyFiltering: this.propertyFiltering, }; - this.root.render(React.createElement(Table as FunctionComponent, props)); + ReactDOM.render(React.createElement(Table as FunctionComponent, props), this.host); } render() { diff --git a/packages/components/src/components/iot-table/iot-table.tsx b/packages/components/src/components/iot-table/iot-table.tsx index f7d861b81..732df9f3c 100644 --- a/packages/components/src/components/iot-table/iot-table.tsx +++ b/packages/components/src/components/iot-table/iot-table.tsx @@ -1,14 +1,14 @@ -import { Component, Listen, Prop, State, Watch, h } from '@stencil/core'; -import { Annotations, getThresholds } from '@synchro-charts/core'; +import { Component, Prop, h, State, Listen, Watch } from '@stencil/core'; +import { Annotations, MessageOverrides, TableColumn, Trend, getThresholds } from '@synchro-charts/core'; import { - combineProviders, - ProviderWithViewport, StyleSettingsMap, + TimeSeriesDataRequestSettings, + combineProviders, TimeQuery, TimeSeriesData, - TimeSeriesDataRequest, - TimeSeriesDataRequestSettings, Viewport, + TimeSeriesDataRequest, + ProviderWithViewport, } from '@iot-app-kit/core'; import { v4 as uuidv4 } from 'uuid'; import { createTableItems, Item, TableProps } from '@iot-app-kit/table'; @@ -20,6 +20,12 @@ import { createTableItems, Item, TableProps } from '@iot-app-kit/table'; export class IotTable { @Prop() annotations: Annotations; + @Prop() messageOverrides?: MessageOverrides; + + @Prop() trends: Trend[]; + + @Prop() tableColumns: TableColumn[]; + @Prop() queries!: TimeQuery[]; @Prop() viewport!: Viewport; diff --git a/packages/components/src/testing/testing-ground/siteWiseQueries.ts b/packages/components/src/testing/testing-ground/siteWiseQueries.ts index 810b23777..240611e6e 100644 --- a/packages/components/src/testing/testing-ground/siteWiseQueries.ts +++ b/packages/components/src/testing/testing-ground/siteWiseQueries.ts @@ -1,21 +1,31 @@ -const STRING_ASSET_ID = 'f2f74fa8-625a-435f-b89c-d27b2d84f45b'; +const STRING_ASSET_ID = 'fa94ab3e-d02f-4c50-88e1-f017c9069c4d'; -export const DEMO_TURBINE_ASSET_1 = '863d5ed3-fdea-4720-97d1-54fe14d8a599'; -export const DEMO_TURBINE_ASSET_1_PROPERTY_1 = 'feecfa93-80f0-40bd-b295-ce9f00cf01fe'; //rpm -export const DEMO_TURBINE_ASSET_1_PROPERTY_2 = '2cbeebde-2747-48e1-8717-acb5f3d9c730'; //avg wind speed -export const DEMO_TURBINE_ASSET_1_PROPERTY_3 = 'd953474c-6f74-4daa-90dc-888e9190a130'; //torque (kN/M) -export const DEMO_TURBINE_ASSET_1_PROPERTY_4 = 'd8937b65-5f03-4e40-93ac-c5513420ade7'; -export const UNFOUNDED_PROPERTY = 'd8937b65-5f03-4e40-93ac-c5513420ade3'; -export const DEMO_TURBINE_ASSET_2 = 'f8ce6619-af20-4c26-93db-e9ee17820d09'; -export const DEMO_TURBINE_ASSET_3 = '5b054c8e-ad23-4228-8620-826859ddf675'; +export const DEMO_TURBINE_ASSET_1 = 'fa94ab3e-d02f-4c50-88e1-f017c9069c4d'; +export const DEMO_TURBINE_ASSET_1_PROPERTY_1 = 'f63861af-251e-4d0b-a32e-4d2089d35b1c'; +export const DEMO_TURBINE_ASSET_1_PROPERTY_2 = 'ea55054e-55d0-4eda-8359-2cbc19d52a3d'; +export const DEMO_TURBINE_ASSET_1_PROPERTY_3 = '18faca18-a8e5-4e48-9153-462c54980869'; +export const DEMO_TURBINE_ASSET_1_PROPERTY_4 = '95648016-38d0-45e7-8f53-872404b9b471'; + +export const DEMO_TURBINE_ASSET_2 = 'e6fb533c-4919-4981-a71f-7764ccc10867'; +export const DEMO_TURBINE_ASSET_2_PROPERTY_1 = 'f63861af-251e-4d0b-a32e-4d2089d35b1c'; +export const DEMO_TURBINE_ASSET_2_PROPERTY_2 = 'ea55054e-55d0-4eda-8359-2cbc19d52a3d'; +export const DEMO_TURBINE_ASSET_2_PROPERTY_3 = '18faca18-a8e5-4e48-9153-462c54980869'; +export const DEMO_TURBINE_ASSET_2_PROPERTY_4 = '95648016-38d0-45e7-8f53-872404b9b471'; + +export const DEMO_TURBINE_ASSET_3 = 'bc86bf78-c506-460c-8602-0c534356892a'; +export const DEMO_TURBINE_ASSET_3_PROPERTY_1 = 'f63861af-251e-4d0b-a32e-4d2089d35b1c'; +export const DEMO_TURBINE_ASSET_3_PROPERTY_2 = 'ea55054e-55d0-4eda-8359-2cbc19d52a3d'; +export const DEMO_TURBINE_ASSET_3_PROPERTY_3 = '18faca18-a8e5-4e48-9153-462c54980869'; +export const DEMO_TURBINE_ASSET_3_PROPERTY_4 = '95648016-38d0-45e7-8f53-872404b9b471'; +export const UNFOUNDED_PROPERTY = 'unfounded_property'; export const ASSET_DETAILS_QUERY = { assetId: STRING_ASSET_ID, }; const AGGREGATED_DATA_ASSET = STRING_ASSET_ID; -const AGGREGATED_DATA_PROPERTY = 'd0dc79be-0dc2-418c-ac23-26f33cdb4b8b'; -const AGGREGATED_DATA_PROPERTY_2 = '69607dc2-5fbe-416d-aac2-0382018626e4'; +const AGGREGATED_DATA_PROPERTY = 'b1616ab4-7526-4c0a-85e2-a137cf57d668'; +const AGGREGATED_DATA_PROPERTY_2 = '729479fb-8720-4a70-bd55-2a9f9eaaa32e4'; export const AGGREGATED_DATA_QUERY = { assets: [ diff --git a/packages/components/src/testing/testing-ground/testing-ground.tsx b/packages/components/src/testing/testing-ground/testing-ground.tsx index 841991944..c05548d0c 100755 --- a/packages/components/src/testing/testing-ground/testing-ground.tsx +++ b/packages/components/src/testing/testing-ground/testing-ground.tsx @@ -6,8 +6,17 @@ import { DEMO_TURBINE_ASSET_1_PROPERTY_1, DEMO_TURBINE_ASSET_1_PROPERTY_2, DEMO_TURBINE_ASSET_1_PROPERTY_3, + DEMO_TURBINE_ASSET_1_PROPERTY_4, DEMO_TURBINE_ASSET_2, + DEMO_TURBINE_ASSET_2_PROPERTY_1, + DEMO_TURBINE_ASSET_2_PROPERTY_2, + DEMO_TURBINE_ASSET_2_PROPERTY_3, + DEMO_TURBINE_ASSET_2_PROPERTY_4, DEMO_TURBINE_ASSET_3, + DEMO_TURBINE_ASSET_3_PROPERTY_1, + DEMO_TURBINE_ASSET_3_PROPERTY_2, + DEMO_TURBINE_ASSET_3_PROPERTY_3, + DEMO_TURBINE_ASSET_3_PROPERTY_4, UNFOUNDED_PROPERTY, } from './siteWiseQueries'; import { getEnvCredentials } from './getEnvCredentials'; @@ -175,28 +184,14 @@ export class TestingGround { private query: SiteWiseQuery; componentWillLoad() { - const { query } = initialize({ awsCredentials: getEnvCredentials(), awsRegion: 'us-west-2' }); + const { query } = initialize({ + awsCredentials: getEnvCredentials(), + awsRegion: 'us-west-2', + settings: { batchDuration: undefined, legacyAPI: false }, + }); this.query = query; } - private changeResolution = (ev: Event) => { - const resolution = (ev.target as HTMLSelectElement)?.value; - - if (resolution === 'auto') { - this.resolution = DEFAULT_RESOLUTION_MAPPING; - } else if (resolution === '0') { - this.resolution = {}; - } else { - this.resolution = resolution; - } - }; - - private changeDuration = (ev: Event) => { - const duration = `${(ev.target as HTMLSelectElement)?.value}m`; - - this.viewport = { duration }; - }; - render() { return (
@@ -242,32 +237,111 @@ export class TestingGround {

- - + =17.0.2", - "react-dom": ">=17.0.2" + "react": "^17.0.2", + "react-dom": "^17.0.2" } } diff --git a/packages/table/src/utils/spinner.spec.tsx b/packages/table/src/utils/spinner.spec.tsx index a3f0f1f4b..85a517259 100644 --- a/packages/table/src/utils/spinner.spec.tsx +++ b/packages/table/src/utils/spinner.spec.tsx @@ -1,29 +1,27 @@ import React from 'react'; -import { createRoot, Root } from 'react-dom/client'; +import * as ReactDOM from 'react-dom'; import { act } from 'react-dom/test-utils'; import { LoadingSpinner } from './spinner'; globalThis.IS_REACT_ACT_ENVIRONMENT = true; describe('size', () => { let container: HTMLDivElement; - let root: Root; beforeEach(() => { container = document.createElement('div'); document.body.appendChild(container); - root = createRoot(container); }); afterEach(() => { act(() => { - root.unmount(); + ReactDOM.unmountComponentAtNode(container); container.remove(); }); }); it('does not specify height and width when no size provided', async () => { act(() => { - root.render(); + ReactDOM.render(, container); }); const svgElement = container.getElementsByTagName('svg').item(0)!; @@ -35,7 +33,7 @@ describe('size', () => { it('does specify height and width when size provided', async () => { const SIZE = 34; act(() => { - root.render(); + ReactDOM.render(, container); }); const svgElement = container.getElementsByTagName('svg').item(0)!; expect(svgElement.style.height).toBe(`${SIZE}px`); @@ -45,24 +43,22 @@ describe('size', () => { describe('dark mode', () => { let container: HTMLDivElement; - let root: Root; beforeEach(() => { container = document.createElement('div'); document.body.appendChild(container); - root = createRoot(container); }); afterEach(() => { act(() => { - root.unmount(); + ReactDOM.unmountComponentAtNode(container); container.remove(); }); }); it('does not have the dark class present when dark is false', async () => { act(() => { - root.render(); + ReactDOM.render(, container); }); const svgElement = container.getElementsByTagName('svg').item(0)!; expect(svgElement.classList).not.toContain('dark'); @@ -70,7 +66,7 @@ describe('dark mode', () => { it('does not have the dark class present when dark is false', async () => { act(() => { - root.render(); + ReactDOM.render(, container); }); const svgElement = container.getElementsByTagName('svg').item(0)!; expect(svgElement.classList).toContain('dark'); diff --git a/packages/table/src/utils/tableHelpers.spec.ts b/packages/table/src/utils/tableHelpers.spec.ts index e53315051..32227f8c5 100644 --- a/packages/table/src/utils/tableHelpers.spec.ts +++ b/packages/table/src/utils/tableHelpers.spec.ts @@ -1,6 +1,6 @@ import { ReactElement } from 'react'; import { act } from 'react-dom/test-utils'; -import { createRoot, Root } from 'react-dom/client'; +import * as ReactDOM from 'react-dom'; import { getDefaultColumnDefinitions } from './tableHelpers'; import { ColumnDefinition, TableItem } from './types'; @@ -23,17 +23,15 @@ describe('getDefaultColumnDefinitions', () => { }); describe('default cell function', () => { - let root: Root; const container = document.createElement('div'); - document.body.appendChild(container); beforeEach(() => { - root = createRoot(container); + document.body.appendChild(container); }); afterEach(() => { act(() => { - root.unmount(); + ReactDOM.unmountComponentAtNode(container); }); }); @@ -60,7 +58,7 @@ describe('default cell function', () => { }; const cell = firstColumnDef.cell(item) as ReactElement; act(() => { - root.render(cell); + ReactDOM.render(cell, container); }); expect(container.textContent).toContain('10'); @@ -77,7 +75,7 @@ describe('default cell function', () => { }; const cell = secondColumnDef.cell(item) as ReactElement; act(() => { - root.render(cell); + ReactDOM.render(cell, container); }); expect(container.textContent).toEqual('-'); @@ -96,7 +94,7 @@ describe('default cell function', () => { }; const cell = firstColumnDef.cell(item) as ReactElement; act(() => { - root.render(cell); + ReactDOM.render(cell, container); }); expect(container.textContent).toContain('Some Error'); @@ -114,7 +112,7 @@ describe('default cell function', () => { const cell = firstColumnDef.cell(item) as ReactElement; act(() => { - root.render(cell); + ReactDOM.render(cell, container); }); const svgElement = container.getElementsByTagName('svg');