feat(TableComponent)!: replace table annotations API with thresholds,…

… remove stencilJS wrapper * deprecate table package, consolidate in react-components * update table documentation * update typescript rules to be stricter BREAKING CHANGES: * remove annotations API to be replaced with thresholds for a more concise API
awslabs · Mar 14, 2023 · 74880c4 · 74880c4
1 parent f8ed10f
commit 74880c4
Show file tree

Hide file tree

Showing 56 changed files with 857 additions and 2,276 deletions.
diff --git a/README.md b/README.md
@@ -6,7 +6,7 @@
 [![Downloads](https://img.shields.io/npm/dw/@iot-app-kit/core)](https://npmjs.org/package/@iot-app-kit/core)
 
 ---
-**NEW in 4.0**: IoT Application Kit has been fully migrated to React 18! THere are a number of key breaking changes in React 18 that you should be aware of before upgrading to this version, which you can find details about here:
+**NEW in 4.0**: IoT Application Kit has been fully migrated to React 18! There are a number of key breaking changes in React 18 that you should be aware of before upgrading to this version, which you can find details about here:
 
 - https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html
 

diff --git a/configuration/ts-config/base.json b/configuration/ts-config/base.json
@@ -2,6 +2,8 @@
   "$schema": "https://json.schemastore.org/tsconfig",
   "display": "Default",
   "compilerOptions": {
+    "allowUnreachableCode": false,
+    "allowUnusedLabels": false,
     "composite": false,
     "declaration": true,
     "declarationMap": true,

diff --git a/docs/Table.md b/docs/Table.md
@@ -302,9 +302,9 @@ A viewport contains the following fields:
   Type: String
 
 
-### (optional)`annotations`
+### (optional)`thresholds`
 
-Defines thresholds for the table. To view and interact with an annotation example, see [Annotation](https://synchrocharts.com/#/Features/Annotation) in the Synchro Charts documentation. For more information about the `annotations` API, see [Properties](https://synchrocharts.com/#/API/Properties) in the Synchro Charts documentation.
+Defines thresholds for the table. To view and interact with a threshold, see [Annotation](https://synchrocharts.com/#/Features/Annotation) in the Synchro Charts documentation. For more information about the `threshold` API, see [Properties](https://synchrocharts.com/#/API/Properties) in the Synchro Charts documentation.
 
 Type: Object
 ### `queries`
@@ -313,193 +313,3 @@ Selects what data to visualize. Learn more about queries, see [Core](https://git
 
 Type: Array
 
-
-### (optional)`widgetId`  
-
-The ID of the widget. A widget is a visualization that you use the table component to create.
-
-Type: String
-
-### (optional)`messageOverrides`
-
-An object overrides messages for localization.
-
-- `tableCellMessages`
-
-  (Optional) override table cell labels.
-
-  - Default:
-  ``` typescript
-  {
-    loading: "Loading"
-  }
-  ``` 
-
-- `propertyFilteringMessages`
-
-  (Optional) override property filtering labels.
-
-  - Default:
-  ```typescript
-  {
-    filteringAriaLabel: 'your choice',
-    dismissAriaLabel: 'Dismiss',
-    filteringPlaceholder: 'Search',
-    groupValuesText: 'Values',
-    groupPropertiesText: 'Properties',
-    operatorsText: 'Operators',
-    operationAndText: 'and',
-    operationOrText: 'or',
-    operatorLessText: 'Less than',
-    operatorLessOrEqualText: 'Less than or equal',
-    operatorGreaterText: 'Greater than',
-    operatorGreaterOrEqualText: 'Greater than or equal',
-    operatorContainsText: 'Contains',
-    operatorDoesNotContainText: 'Does not contain',
-    operatorEqualsText: 'Equals',
-    operatorDoesNotEqualText: 'Does not equal',
-    editTokenHeader: 'Edit filter',
-    propertyText: 'Property',
-    operatorText: 'Operator',
-    valueText: 'Value',
-    cancelActionText: 'Cancel',
-    applyActionText: 'Apply',
-    allPropertiesLabel: 'All properties',
-    tokenLimitShowMore: 'Show more',
-    tokenLimitShowFewer: 'Show fewer',
-    clearFiltersText: 'Clear filters',
-    removeTokenButtonAriaLabel: () => 'Remove token',
-    enteredTextLabel: (text) => `Use: "${text}"`,
-  };
-  ```
-
-Type: Object
-
-
-
------
-## Migrate from previous API
-
-Property `tableColumns` has been replaced by two new APIs, `items` and `columnDefinitions`, where `items` defines objects of each row, 
-and `columnDefinitions` defines how table maps `items` to columns. For more details, check [Properties](#properties).
-
-```typescript jsx
-// previous
-import { initialize, toId } from '@iot-app-kit/source-iotsitewise';
-import { Table } from '@iot-app-kit/react-components';
-const { IoTSiteWiseClient } = require('@aws-sdk/client-iotsitewise');
-const iotSiteWiseClient = new IoTSiteWiseClient({ region: "REGION" });
-
-const { query } = initialize({ iotSiteWiseClient });
-<Table
-  viewport={{ duration: '5m' }}
-  tableColumns={[
-    {
-      header: 'Tempature',
-      rows: [
-        toId({ assetId: 'engine-1', propertyId: 'tempature' }),
-        toId({ assetId: 'engine-2', propertyId: 'tempature' }),
-      ]
-    },
-    {
-      header: 'RPM',
-      rows: [
-        toId({ assetId: 'engine-1', propertyId: 'rpm' }),
-        toId({ assetId: 'engine-2', propertyId: 'rpm' }),
-      ]
-    }
-  ]}
-  queries={[
-    query.timeSeriesData({
-      assets: [
-        { 
-          assetId: 'engine-1', 
-          properties: [
-            { propertyId: 'tempature' },
-            { propertyId: 'rpm' }
-          ],
-        }, { 
-          assetId: 'engine-2', 
-          properties: [
-            { propertyId: 'tempature' },
-            { propertyId: 'rpm' }
-          ],
-        }
-    ])
-  ]}}
-/>
-```
-```typescript jsx
-// now
-import { initialize, toId } from '@iot-app-kit/source-iotsitewise';
-import { Table } from '@iot-app-kit/react-components';
-const { IoTSiteWiseClient } = require('@aws-sdk/client-iotsitewise');
-const iotSiteWiseClient = new IoTSiteWiseClient({ region: "REGION" });
-
-const { query } = initialize({ iotSiteWiseClient });
-<Table
-  viewport={{ duration: '5m' }}
-  items={[
-    {
-      temp: {
-        $cellRef: {
-          id: toId({ assetId: 'engine-1', propertyId: 'temperature' }),
-          resolution: 0
-        }
-      },
-      rpm: {
-        $cellRef: {
-          id: toId({ assetId: 'engine-1', propertyId: 'rpm' }),
-          resolution: 0
-        }
-      }
-    },
-    {
-      temp: {
-        $cellRef: {
-          id: toId({ assetId: 'engine-2', propertyId: 'temperature' }),
-          resolution: 0
-        }
-      },
-      rpm: {
-        $cellRef: {
-          id: toId({ assetId: 'engine-2', propertyId: 'rpm' }),
-          resolution: 0
-        }
-      }
-    },
-  ]}
-  columnDefintions={[
-    {
-      header: 'Temperature',
-      key: 'temp'
-    },
-    {
-      header: 'RPM',
-      key: 'rpm'
-    }
-  ]}
-  queries={[
-    query.timeSeriesData({
-      assets: [
-        {
-          assetId: 'engine-1',
-          properties: [
-            { propertyId: 'temperature' },
-            { propertyId: 'rpm' }
-          ],
-        }, {
-          assetId: 'engine-2',
-          properties: [
-            { propertyId: 'temperature' },
-            { propertyId: 'rpm' }
-          ],
-        }
-    ]})
-  ]}
-/>
-```
-
-
-***Note: Due to the difference between Stencil and React, providing JSX object from Web Component to React is not supported. Try to use string or number instead of ReactNode.***
-