feat: Improve documentation formatting (#93)

docs/BarChart.md

@@ -67,37 +67,39 @@ Specifies the window over which to visualize data. For example, a scatter chart
 
 Type: Object 
 
-`start` 
+A viewport contains the following fields:
 
-(Optional) The start of the range from which to visualize data. If no `duration` , you must specify a `start` date.
+- `start`
 
-Type: Date
+  (Optional) The start of the range from which to visualize data. If no `duration`, you must specify a `start` date.
 
-`end`
+  Type: Date
 
-(Optional) The end of the range from which to visualize data. If no `duration`, you must specify an `end` date. 
+- `end`
 
-Type: Date
+  (Optional) The end of the range from which to visualize data. If no `duration`, you must specify an `end` date.
 
-`duration`
+  Type: Date
 
-(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.
+- `duration`
 
-Type: String
+  (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.
 
-`yMin`
+  Type: String
 
-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` . 
+- `yMin`
 
-Type: Number
+  (Optional) The minimum `y` value. The line 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`.
 
-`yMax`
+  Type: Number
 
-(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` . 
+- `yMax`
 
-Type: Number
+  (Optional) The maximum `y` value. The line 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`.
 
-### `annotations` 
+  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. 
 

docs/KPI.md

@@ -63,27 +63,29 @@ The KPI component contains the following properties that you can customize.
 
 Specifies a time range. The KPI only supports showing the latest value. If the `viewport` is configured to visualize historical data, the KPI displays the disabled state. 
 
-Type: Object 
+Type: Object
 
-`start` 
+A viewport contains the following fields:
 
-(Optional) The start of the range from which to visualize data. If no `duration`, you must specify a `start` date.
+- `start`
 
-Type: Date
+  (Optional) The start of the range from which to visualize data. If no `duration`, you must specify a `start` date.
 
-`end`
+  Type: Date
 
-(Optional) The end of the range from which to visualize data. If no `duration`, you must specify an `end` date. 
+- `end`
 
-Type: Date
+  (Optional) The end of the range from which to visualize data. If no `duration`, you must specify an `end` date.
 
-`duration`
+  Type: Date
 
-(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.
+- `duration`
 
-Type: String
+  (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
 
-### `annotations` 
+### `annotations`
 
 (Optional) Defines thresholds for the line 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. 
 
@@ -101,8 +103,12 @@ Type: Array
 
 The KPI 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.  
+
+    Type: String
+
 * `unit`
 
     (Optional) The unit given to the data (for example, `"m/s"` and `"count"`).
@@ -112,6 +118,8 @@ The KPI provides the following style settings that you can customize:
 * `detailedName`
 
     (Optional) A detailed name that is presented in the tooltip. 
+
+    Type: String
 
 
 *Example code for `styleSettings`:*

docs/LineChart.md

@@ -67,35 +67,37 @@ Specifies the window over which to visualize data. For example, a scatter chart
 
 Type: Object 
 
-`start` 
+A viewport contains the following fields:
 
-(Optional) The start of the range from which to visualize data. If no `duration`, you must specify a `start` date.
+ - `start` 
 
-Type: Date
+    (Optional) The start of the range from which to visualize data. If no `duration`, you must specify a `start` date.
 
-`end`
+    Type: Date
 
-(Optional) The end of the range from which to visualize data. If no `duration`, you must specify an `end` date. 
+ - `end`
 
-Type: Date
+    (Optional) The end of the range from which to visualize data. If no `duration`, you must specify an `end` date. 
 
-`duration`
+    Type: Date
 
-(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.
+ - `duration`
 
-Type: String
+    (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.
 
-`yMin`
+    Type: String
+
+ - `yMin`
 
-(Optional) The minimum `y` value. The line 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`.
+    (Optional) The minimum `y` value. The line 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
+    Type: Number
 
-`yMax`
+ - `yMax`
 
-(Optional) The maximum `y` value. The line 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`.
+    (Optional) The maximum `y` value. The line 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
+    Type: Number
 
 ### `annotations` 
 
@@ -133,16 +135,17 @@ The line chart provides the following style settings that you can customize.
 
     Type: String
 
-* `detailedName` string
+* `detailedName`
 
     (Optional) A detailed name that is presented in the tooltip. 
 
+    Type: String
+
 *Example code for `styleSettings`*
 
 ```
 
 <LineChart
-  ...
 
   /** Specifying a query which provides a `refId` */
   queries={[query.timeSeriesData([{ 

docs/ScatterChart.md

@@ -67,35 +67,37 @@ Specifies the window over which to visualize data. For example, a scatter chart
 
 Type: Object 
 
-`start` 
+A viewport contains the following fields:
 
-(Optional) The start of the range from which to visualize data. If no `duration`, you must specify a `start` date.
+- `start`
 
-Type: Date
+  (Optional) The start of the range from which to visualize data. If no `duration`, you must specify a `start` date.
 
-`end`
+  Type: Date
 
-(Optional) The end of the range from which to visualize data. If no `duration`, you must specify an `end` date. 
+- `end`
 
-Type: Date
+  (Optional) The end of the range from which to visualize data. If no `duration`, you must specify an `end` date.
 
-`duration`
+  Type: Date
 
-(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.
+- `duration`
 
-Type: String
+  (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.
 
-`yMin`
+  Type: String
 
-(Optional) The minimum `y` value. The scatter 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` .
+- `yMin`
 
-Type: Number
+  (Optional) The minimum `y` value. The line 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`.
 
-`yMax`
+  Type: Number
 
-(Optional) The maximum `y` value. The scatter 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` .
+- `yMax`
 
-Type: Number
+  (Optional) The maximum `y` value. The line 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` 
 
@@ -113,24 +115,30 @@ Type: Array
 
 (Optional) A map of `refId` to style settings for the scatter chart. Learn more about reference IDs, see [Core](https://github.com/awslabs/iot-app-kit/tree/main/docs/Core.md). 
 
+Type: Object
+
 The scatter chart provides the following style settings that you can customize.
 
 * `name`
 
     (Optional) Specify a name to replace the name of the data set given by its source.  
 
     Type: String
+
 * `unit`
 
     (Optional) The unit given to the data (for example, `"m/s"` and `"count"`).
 
     Type: String
+
 * `color`
 
     (Optional) The color of the data stream. The line chart displays the data stream in this color. 
 
     Type: String
-* `detailedName` string
+
+* `detailedName`
+
     (Optional) A detailed name that is presented in the tooltip. 
 
     Type: String

docs/StatusGrid.md

@@ -63,37 +63,59 @@ The status grid component contains the following properties that you can customi
 
 Specifies a time range. The status grid only supports showing the latest value. If the `viewport` is configured to visualize historical data, the status grid displays the disabled state. 
 
-Type: Object 
+Type: Object
 
-`start` 
+A viewport contains the following fields:
 
-(Optional) The start of the range from which to visualize data. If no `duration`, you must specify a `start` date.
-Type: Date
+- `start`
 
-`end`
+  (Optional) The start of the range from which to visualize data. If no `duration`, you must specify a `start` date.
 
-(Optional) The end of the range from which to visualize data. If no `duration`, you must specify an `end` date. 
-Type: Date
+  Type: Date
 
-`duration`
+- `end`
 
-(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
+  (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`
+
+  (Optional) The minimum `y` value. The line 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
 
-### `annotations` 
+- `yMax`
+
+  (Optional) The maximum `y` value. The line 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 status grid. 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`
 
 (Optional) A map of `refId` to style settings for the status grid. Learn more about reference IDs, see [Core](https://github.com/awslabs/iot-app-kit/tree/main/docs/Core.md). 
 
+Type: Object
+
 The status grid chart provides the following style settings that you can customize:
 
 `name`