feat: update synchro charts to 3.1.0, update docs

docs/AWSIoTSiteWiseSource.md

@@ -55,48 +55,51 @@ When you ingest data into AWS IoT SiteWise from your industrial equipment, your
 
 Each asset contains the following fields:
 
-`assetId` string
+  - `assetId`
 
-The ID of the asset in which the specified property was created. 
+    The ID of the asset in which the specified property was created. 
 
-Type: String
+    Type: String
 
-`properties`
+  - `properties`
 
-One or more asset properties. 
-Asset properties are the structures within each asset that contain industrial data. Each property has a data type and can have a unit. To learn more about asset properties, see [Defining data properties](https://docs.aws.amazon.com/iot-sitewise/latest/userguide/asset-properties.html) in the *AWS IoT SiteWise User Guide*. 
+    One or more asset properties. 
+    Asset properties are the structures within each asset that contain industrial data. Each property has a data type and can have a unit. To learn more about asset properties, see [Defining data properties](https://docs.aws.amazon.com/iot-sitewise/latest/userguide/asset-properties.html) in the *AWS IoT SiteWise User Guide*. 
 
-Type: Array
+    Type: Array
 
-Each property contains the following fields:
+    Each property contains the following fields:
 
-`propertyId`
+    - `propertyId`
 
-The ID of the SiteWise asset property.
+       The ID of the SiteWise asset property.
 
-Type: String
+       Type: String
 
-`resolution`
-(Optional) The time interval over which to aggregate data (for example, average, minimum, and maximum). For example, if the resolution is `1d`, IoT Application Kit aggregates your data once every 24 hours (1 day). For more information about the supported units and format, see [parse-duration](https://github.com/jkroso/parse-duration) on GitHub.
+    - `resolution`
 
-The valid resolutions for AWS IoT SiteWise are the following:
+      (Optional) The time interval over which to aggregate data (for example, average, minimum, and maximum). For example, if the resolution is `1d`, IoT Application Kit aggregates your data once every 24 hours (1 day). For more information about the supported units and format, see [parse-duration](https://github.com/jkroso/parse-duration) on GitHub.
 
-            * `0` - Raw data (unaggregated data). IoT Application Kit uses the [GetAssetPropertyValueHistory](https://docs.aws.amazon.com/iot-sitewise/latest/APIReference/API_GetAssetPropertyValueHistory.html) operation to fetch your data.
-            * `1m` - Minute aggregated data. IoT Application Kit uses the [GetAssetPropertyAggregates](https://docs.aws.amazon.com/iot-sitewise/latest/APIReference/API_GetAssetPropertyAggregates.html) operation to aggregate your data. 
-            * `1h` - Hourly aggregated data. IoT Application Kit uses the [GetAssetPropertyAggregates](https://docs.aws.amazon.com/iot-sitewise/latest/APIReference/API_GetAssetPropertyAggregates.html) operation to aggregate your data. 
-            * `1d` - Daily aggregated data. IoT Application Kit uses the [GetAssetPropertyAggregates](https://docs.aws.amazon.com/iot-sitewise/latest/APIReference/API_GetAssetPropertyAggregates.html) operation to aggregate your data.
+      The valid resolutions for AWS IoT SiteWise are the following:
 
-Type: String
+      * `0` - Raw data (unaggregated data). IoT Application Kit uses the [GetAssetPropertyValueHistory](https://docs.aws.amazon.com/iot-sitewise/latest/APIReference/API_GetAssetPropertyValueHistory.html) operation to fetch your data.
+      * `1m` - Minute aggregated data. IoT Application Kit uses the [GetAssetPropertyAggregates](https://docs.aws.amazon.com/iot-sitewise/latest/APIReference/API_GetAssetPropertyAggregates.html) operation to aggregate your data. 
+      * `1h` - Hourly aggregated data. IoT Application Kit uses the [GetAssetPropertyAggregates](https://docs.aws.amazon.com/iot-sitewise/latest/APIReference/API_GetAssetPropertyAggregates.html) operation to aggregate your data. 
+      * `1d` - Daily aggregated data. IoT Application Kit uses the [GetAssetPropertyAggregates](https://docs.aws.amazon.com/iot-sitewise/latest/APIReference/API_GetAssetPropertyAggregates.html) operation to aggregate your data.
 
-`cacheSettings` 
-(Optional) The cache settings that you can customize for the given asset property. 
+      Type: String
 
-Type: Object
+    - `cacheSettings`
+
+      (Optional) The cache settings that you can customize for the given asset property. 
+
+      Type: Object
 
-`refId`
-(Optional) The reference ID if the style settings. IoT App Kit applies the style settings to the asset property associated with the reference ID. Every component has different style settings. 
+    - `refId`
 
-Type: String
+      (Optional) The reference ID if the style settings. IoT App Kit applies the style settings to the asset property associated with the reference ID. Every component has different style settings. 
+
+      Type: String
 
 ### TimeSeriesDataSettings parameter
 
@@ -141,7 +144,9 @@ The asset tree object provides a collection of methods that query a tree of AWS
 
 Type: Object
 
-`fromRoot`
+The asset tree contains the following functions:
+
+#### `fromRoot`
 
 A query that returns a list of root assets in your AWS Account. Type: Function
 
@@ -155,7 +160,7 @@ query.assetTree.fromRoot({
 ```
 
 
-`fromAsset`
+#### `fromAsset`
 A query that returns a list of child assets that is associated with the specified root asset. 
 
 Type: Function
@@ -170,23 +175,31 @@ query.assetTree.fromAsset({
 })
 ```
 
+The `fromAsset` function takes the following parameters:
+
 `asset`
-The asset to query. 
+
+The AWS IoT SiteWise asset to query. 
 
 Type: Object
 
-`assetId`
-The ID of the AWS IoT SiteWise asset to query.
+The asset contains the field:
+
+  - `assetId`
+
+    The ID of the AWS IoT SiteWise asset to query.
 
-Type: String
+    Type: String
 
 `withModels`
+
 (Optional) Whether or not to fetch asset models that is associated with the specified asset. The default value is `false`.
 
 Type: Boolean
 
 `withPropertyValues`
-(Optional) Whether or not to fetch the current value of the specified asset properties that were created in the specified asset. Property values won’t be automatically updated. You can use the `timeSeriesData` query to update property values. The default value is `false`. 
+
+(Optional) Whether to fetch the current value of the specified asset properties that were created in the specified asset. Property values won’t be automatically updated. You can use the `timeSeriesData` query to update property values. The default value is `false`. 
 
 Type: Boolean
 

docs/BarChart.md

@@ -5,6 +5,7 @@ A bar chart is another way to visualize time series data. You might use a bar ch
 You can view and interact with a bar chart example, visit [BarChart](https://synchrocharts.com/#/Components/BarChart) in the Synchro Charts documentation.  
 
 **Important**
+
 The line chart utilizes WebGL. You need to create an instance of the WebGL context before you can use the BarChart component. To learn more about how to create an instance of the WebGL context for this component, see [WebGL context](https://synchrocharts.com/#/WebGL%20context) in the Synchro Charts documentation.  
 
 ## Examples
@@ -65,34 +66,47 @@ The bar chart component contains the following properties that you can customize
 Specifies the window over which to visualize data. For example, a scatter chart with the following `viewport` displays data from 2000 to 2001. In addition, their `y` value must be greater than or equal to 0, and less than or equal to 100. 
 
 Type: Object 
+
 `start` 
+
 (Optional) The start of the range from which to visualize data. If no `duration` , you must specify a `start` date.
+
 Type: Date
 
 `end`
+
 (Optional) The end of the range from which to visualize data. If no `duration`, you must specify an `end` date. 
+
 Type: Date
 
 `duration`
+
 (Optional) The time interval over which to visualize data. If no `start` or `end`, you must specify a `duration`. You can use `m`, `h`, `d`, and `w` when you specify a duration. For example,  `2m` represents 2 minutes, `2h` represents 2 hours, `2d` represents 2 days, and `2w` represents 2 weeks. For more information about the supported units and format, see [parse-duration](https://github.com/jkroso/parse-duration) on GitHub.
+
 Type: String
 
 `yMin`
+
 The minimum `y` value. The bar chart won’t display data points whose `y` values are less than `yMin` . Defaults to a value small enough to ensure all data within the viewport falls at or above the  `yMin` . 
+
 Type: Number
 
 `yMax`
+
 (Optional) The maximum `y` value. The bar chart won’t display data points whose `y` values are greater than `yMax` . Defaults to a value large enough to ensure all data within the viewport falls at or below the  `yMax` . 
+
 Type: Number
 
 ### `annotations` 
 
 (Optional) Defines thresholds for the bar chart. 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. 
+
 Type: Object
 
 ### `queries`
 
 Selects what data to visualize. Learn more about queries, see [Core](https://github.com/awslabs/iot-app-kit/tree/main/docs/Core.md). 
+
 Type: Array 
 
 ### `styleSettings`
@@ -101,17 +115,31 @@ Type: Array
 
 The bar chart provides the following style settings that you can customize. 
 
-* `name` string
+* `name` 
+
     (Optional) Specify a name to replace the name of the data set given by its source.  
-* `unit` string
+
+    Type: String
+
+* `unit`
+
     (Optional) The unit given to the data (for example, `"m/s"` and `"count"`).
-* `color` string
+
+    Type: String
+* `color`
+
     (Optional) The color of the data stream. The line chart displays the data stream in this color. 
-* `detailedName` string
+
+    Type: String
+
+* `detailedName`
+
     (Optional) A detailed name that is presented in the tooltip. 
+
+    Type: String
 
 
-*Example code for `styleSettings`*
+Example code for `styleSettings`
 
 ```
 
@@ -131,6 +159,8 @@ The bar chart provides the following style settings that you can customize.
 
 ```
 
-### `widgetId`  string
+### `widgetId`
 
 (Optional) The ID of the widget. A widget is a visualization that you use the bar chart component to create.  
+
+Type: String

docs/Components.md

@@ -7,6 +7,7 @@ IoT App Kit provides the following components that you can use to interact with
 * [Bar chart](https://github.com/awslabs/iot-app-kit/tree/main/docs/BarChart.md)
 * [Status grid](https://github.com/awslabs/iot-app-kit/tree/main/docs/StatusGrid.md)
 * [KPI](https://github.com/awslabs/iot-app-kit/tree/main/docs/KPI.md)
+* [Table](https://github.com/awslabs/iot-app-kit/tree/main/docs/Table.md)
 * [Status timeline](https://github.com/awslabs/iot-app-kit/tree/main/docs/StatusTimeline.md)
 * [Resource explorer](https://github.com/awslabs/iot-app-kit/tree/main/docs/ResourceExplorer.md)
 

docs/Core.md

@@ -113,16 +113,27 @@ Type: String
 Type: Array
 
 When you configure an associated data stream, you can specify the following information: 
-`id`: string
-The ID of the associated data stream. 
 
-`streamType`: string
-The data stream type for the associated data stream. The `streamType` can be one of the following value:
-`ALARM` - Alarm data stream type.
-`ANOMALY` - Anomaly data stream type.
-`ALARM_THRESHOLD` - Alarm threshold stream type.
+ - `id` 
+
+    The ID of the associated data stream. 
+
+    Type: String
+
+ - `streamType` 
+
+    The data stream type for the associated data stream. 
+
+    Type: String
+
+    The `streamType` can be one of the following values:
+
+    - `ALARM` - Alarm data stream type.
+    - `ANOMALY` - Anomaly data stream type.
+    - `ALARM_THRESHOLD` - Alarm threshold stream type.
 
 `viewport`
+
 Specifies the window over which to visualize data. For example, a scatter chart with the following `viewport` display data from 2000 to 2001. In addition, their `y` value must be greater than or equal to 0, and less than or equal to 100.
 
 Type: Object
@@ -136,34 +147,37 @@ Type: Object
 }
 ```
 
-To configure the `viewport`, you can specify the following information. 
+To configure the `viewport`, you can specify the following fields: 
 
-`start`
+ - `start`
 
-(Optional) The start date of the `viewport` from which to visualize data. You don’t need to specify a `start` if a `duration` is defined.
+   (Optional) The start date of the `viewport` from which to visualize data. You don’t need to specify a `start` if a `duration` is defined.
 
-Type: Date
+   Type: Date
 
-`end`
+ - `end`
 
-(Optional) The end date from the `viewport` from which to visualize data. You don’t need to specify an `end` if a `duration` is defined.
+   (Optional) The end date from the `viewport` from which to visualize data. You don’t need to specify an `end` if a `duration` is defined.
 
-Type: Date
+   Type: Date
 
-`yMin`:
-(Optional) The minimum `y` value. The visualization won’t display data points whose `y` values are less than `yMin`. Defaults to a value small enough to ensure all data within the viewport falls at or above the  `yMin`. Some components ignore this value.
+ - `yMin`
 
-Type: Number
+   (Optional) The minimum `y` value. The visualization won’t display data points whose `y` values are less than `yMin`. Defaults to a value small enough to ensure all data within the viewport falls at or above the  `yMin`. Some components ignore this value.
 
-`yMax`
-(Optional) The maximum `y` value. The visualization won’t display data points whose `y` values are greater than `yMax`. Defaults to a value large enough to ensure all data within the viewport falls at or below the  `yMax`. Some components ignore this value.
+    Type: Number
 
-Type: Number
+ - `yMax`
 
-`duration`
-(Optional) The duration of the viewport over which to display data, in milliseconds. You use `duration` to specify a live time frame. Don’t specify a `duration` if you want to view only historical data. 
+   (Optional) The maximum `y` value. The visualization won’t display data points whose `y` values are greater than `yMax`. Defaults to a value large enough to ensure all data within the viewport falls at or below the  `yMax`. Some components ignore this value.
 
-Type: Number
+   Type: Number
+
+ - `duration`
+
+   (Optional) The duration of the viewport over which to display data, in milliseconds. You use `duration` to specify a live time frame. Don’t specify a `duration` if you want to view only historical data. 
+
+   Type: Number
 
 ### TimeSeriesDataSettings
 
@@ -172,26 +186,29 @@ Specifies how IoT Application Kit requests time series data.
 Type: Object
 
 `requestBuffer`
+
 Number of additional days over which to request data beyond the specified `viewport.start` and `viewport.end`. For example, if the `requestBuffer` is 0, no additional data will be requested. If the `requestBuffer` is 1, IoT Application Kit will request data from `viewport.start-1` to `viewport.end+1` . The `requestBuffer` is linear. If the buffer doubles, the duration of which to request data roughly doubles. 
 
 The request buffer won’t cause a precise amount of additional data to be requested. For example, if the `requestBuffer` is 1, it won’t necessarily cause exactly one day of data to be requested before and after the viewport. This behavior prevents panning and other gestures that occur at near 60fps from triggering data requests on every frame. 
 
 Type: Number
 
 `refreshRate`
+
 (Optional) Specifies how often to request data again, in milliseconds. This applies to data whose time to live (TTL) has expired or to live streaming data when `viewport.duration` is specified. The default value is five seconds.
 
 Type: Number
 
 `resolution`
+
 (Optional) The time interval over which to aggregate data (for example, average, minimum, and maximum). For example, if the resolution is `1d`, IoT Application Kit aggregates your data once every 24 hours (1 day). For more information about the supported units and format, see [parse-duration](https://github.com/jkroso/parse-duration) on GitHub.
 
 The valid resolutions for AWS IoT SiteWise are the following:
 
-            * `0` - Raw data (unaggregated data). IoT Application Kit uses the [GetAssetPropertyValueHistory](https://docs.aws.amazon.com/iot-sitewise/latest/APIReference/API_GetAssetPropertyValueHistory.html) operation to fetch your data.
-            * `1m` - Minute aggregated data. IoT Application Kit uses the [GetAssetPropertyAggregates](https://docs.aws.amazon.com/iot-sitewise/latest/APIReference/API_GetAssetPropertyAggregates.html) operation to aggregate your data. 
-            * `1h` - Hourly aggregated data. IoT Application Kit uses the [GetAssetPropertyAggregates](https://docs.aws.amazon.com/iot-sitewise/latest/APIReference/API_GetAssetPropertyAggregates.html) operation to aggregate your data. 
-            * `1d` - Daily aggregated data. IoT Application Kit uses the [GetAssetPropertyAggregates](https://docs.aws.amazon.com/iot-sitewise/latest/APIReference/API_GetAssetPropertyAggregates.html) operation to aggregate your data.
+  * `0` - Raw data (unaggregated data). IoT Application Kit uses the [GetAssetPropertyValueHistory](https://docs.aws.amazon.com/iot-sitewise/latest/APIReference/API_GetAssetPropertyValueHistory.html) operation to fetch your data.
+  * `1m` - Minute aggregated data. IoT Application Kit uses the [GetAssetPropertyAggregates](https://docs.aws.amazon.com/iot-sitewise/latest/APIReference/API_GetAssetPropertyAggregates.html) operation to aggregate your data. 
+  * `1h` - Hourly aggregated data. IoT Application Kit uses the [GetAssetPropertyAggregates](https://docs.aws.amazon.com/iot-sitewise/latest/APIReference/API_GetAssetPropertyAggregates.html) operation to aggregate your data. 
+  * `1d` - Daily aggregated data. IoT Application Kit uses the [GetAssetPropertyAggregates](https://docs.aws.amazon.com/iot-sitewise/latest/APIReference/API_GetAssetPropertyAggregates.html) operation to aggregate your data.
 
 
 When the resolution is an object, it contains a key that represents a viewport duration. The corresponding value of the key value pair has its resolution applied to.
@@ -217,21 +234,23 @@ Type: String
 `resolution (value)`
 
 The aggregation level to be applied when the duration of the viewport matches the specified viewport duration by the rules specified in the viewport duration key. For more information about the supported units and format, see [parse-duration](https://github.com/jkroso/parse-duration) on GitHub.
-Type: String
 
 Type: String or Object
 
 `fetchFromStartToEnd`
+
 (Optional) If `true`, all data that falls within the viewport is required and will be requested. Additional data outside of the viewport will also be requested based on the `requestBuffer`. The default value is dependent on which IoT App Component is being used.
 
 Type: Boolean
 
 `fetchMostRecentBeforeStart` 
+
 (Optional) If `true`, the data point that is at or before `viewport.start` will be requested. For example, if you have a viewport that contains a time interval from May 1, 2021 to May 2, 2021, and there is no data between May 1, 2021 and May 2, 2021 but there is a single data point on April 1, 2021, the query returns the data point on April 1, 2021. The default value is dependent on which IoT App component is being used.
 
 Type: Boolean
 
 `fetchMostRecentBeforeEnd` 
+
 (Optional) If `true`, the data point that is at or before `viewport.end` will be requested. For example, if you have a viewport that contains a time interval from May 1, 2021 to May 2, 2021, and there is no data between May 1, 2021 and May 2, 2021, but there is a single data point on April 1, 2021, the query returns the data point on April 1st. The default value is dependent on which IoT App component is being used.
 
 Type: Boolean