chore: public doc site for anomaly widget

packages/doc-site/stories/components/anomalyChart/Data.mdx

@@ -0,0 +1,123 @@
+import { Canvas, Meta, Story } from '@storybook/blocks';
+
+# Data for Anomaly chart
+
+[Learn more about the Anomaly Chart](/docs/components-anomalychart-docs--docs).
+
+The Anomaly chart will visualize raw data as long as it is in the following format:
+
+### Data
+
+Fixed length array containing an object specifiying the state and value of the data
+
+Type: Array with a single object (fixed length of 1)
+
+---
+
+- **`state`**
+
+  String representing the data's state
+
+  Type: 'loading' | 'success' | 'failed' | 'error'
+
+---
+
+- **`value`**
+
+  Object containing the raw data and style overrides
+
+  Type: Object
+
+  - **`data`**
+
+    Array of objects, where each object represents a single Diagnostic event with a timestamp and Diagnostic object
+
+    Type: Array
+
+      - **`timestamp`**
+
+        The time of the diagnostic point, in milliseconds
+
+        Type: number
+
+      - **`diagnostic`**
+
+        Object representing a single data point value and its name
+
+        Type: Object
+
+        - **`name`**
+
+          String name of the diagnostic point
+
+          Type: string
+
+        - **`value`**
+
+          Value of the diagnostic point, should be number between 0 and 1
+
+          Type: number
+
+  - **`styles`** (Optional)
+
+    Object which overrides global style settings
+
+    - **`decimalPlaces`** (Optional)
+
+      type: number
+
+    - **`color` (Optional)
+
+      Array which represents the color pallette used to render the diagnostics
+
+      type: Array
+
+
+### Example 
+```
+{
+  state: 'success',
+  value: {
+    styles: {
+      // defines the color pallette for the diagnostics
+      color: ['pink', 'blue', 'green', 'red'],
+    },
+    data: [
+      {
+        timestamp: 1711078622000,
+        diagnostics: [
+          {
+            name: 'Diagnostic Name 1',
+            value: 0.25,
+          },
+          {
+            name: 'Diagnostic Name 2',
+            value: 0.25,
+          },
+          {
+            name: 'Diagnostic Name 3',
+            value: 0.5,
+          },
+        ],
+      },
+      {
+        timestamp: 1711165022000,
+        diagnostics: [
+          {
+            name: 'Diagnostic Name 1',
+            value: 0.25,
+          },
+          {
+            name: 'Diagnostic Name 2',
+            value: 0.25,
+          },
+          {
+            name: 'Diagnostic Name 3',
+            value: 0.5,
+          },
+        ],
+      },
+    ],
+  },
+};
+```

packages/doc-site/stories/components/anomalyChart/Docs.mdx

@@ -0,0 +1,110 @@
+import { Canvas, Meta, Story } from '@storybook/blocks';
+
+# Anomaly chart
+
+The Anomaly chart provides a timeline view of a given anomaly prediction.
+
+## Properties
+
+The Anomaly chart contains the following properties that you can customize.
+
+### `queriesquery` and `data`
+
+Used to specify the data displayed by chart. You can use either query or data. Only 1 anomaly can be visualized at a time. One of query or data properties must be defined.
+
+- `query`
+
+  The query which specify the anomaly data to visualize
+
+  [Learn more about the anomaly widget's queries](/docs/components-anomalychart-queries--docs).
+
+  Type: AnomalyDataQuery
+
+- `data`
+
+  Raw data which component will visualize.
+
+  [Learn more about data](/docs/components-anomalychart-data--docs)
+
+  Type: Object
+
+---
+
+### `viewport (Optional)`
+
+Specifies the interval of time the chart visualizes. If not provided, will utilize the `viewport` specified by its [ViewportManager](/docs/components-viewportmanager--docs).
+If there is no ViewportManager, and no `viewport` defined, the default viewport will be calculated from the data's minimum and maximum dates.
+
+[Learn about the viewport](/docs/core-viewport--docs).
+
+Type: Object
+
+---
+
+### `title (Optional)`
+
+Specifies a title for the chart
+
+Default value: `undefined`
+
+Type: String
+
+---
+
+### `mode (Optional)`
+
+Sets the chart's light or dark mode theme
+
+Please note that the chart's tooltip will utilize the browser's light or dark mode setting
+
+Type: 'light' | 'dark'
+
+---
+
+### `decimalPlaces (Optional)`
+
+Specifies the number of significant digits to be shown of the data
+
+Type: Number
+
+---
+
+### `showTimestamp (Optional)`
+
+Specifies if timestamp bar is shown below the X-Axis
+
+Default value: true
+
+Type: Boolean
+
+---
+
+### `tooltipSort (Optional)`
+
+Specifies the sorting of tooltip data, either alphabetical or descending percentages
+
+Type: 'value' | 'alphabetical'
+
+---
+
+### `axis (Optional)`
+
+Specifies the axis settings for the chart
+
+Type: Object
+
+The axis settings contains the following:
+
+- **`showX (Optional)`**
+
+  Setting to determine whether we show the x-axis and the horizontal grid lines. Defaults to true.
+
+  Type: Boolean
+
+
+- **`showY`**
+
+  (Optional) Setting to determine whether we show the y-axis and the horizontal grid lines. Defaults to true.
+
+  Type: Boolean
+

packages/doc-site/stories/components/anomalyChart/Query.mdx

@@ -0,0 +1,61 @@
+import { Canvas, Meta, Story } from '@storybook/blocks';
+
+# Queries for Anomaly chart
+
+[Learn more about the Anomaly Chart](/docs/components-anomalychart-docs--docs).
+
+If provided, the queries will request the provided predictions and visualize them on the Anomaly chart
+
+The queries should be in the following format:
+
+### `Query`
+
+The query which specify the anomaly data to visualize.
+
+[Learn more about anomaly data queries](/docs/data-sources-aws-iot-sitewise--docs).
+
+Type: AnomalyDataQuery
+
+...
+
+
+### Example usage
+
+```
+import { IoTEventsClient } from '@aws-sdk/client-iot-events';
+import { IoTSiteWiseClient } from '@aws-sdk/client-iotsitewise';
+import { AnomalyChart } from '@iot-app-kit/react-components';
+
+const MyExampleComponent = ({ assetId, predictionDefinitionId }: {
+  assetId: string;
+  predictionDefinitionId: string;
+}) => {
+
+  const iotEventsClient = new IoTEventsClient({
+    credentials: awsCredentials,
+    region: awsRegion,
+  });
+
+  const iotSiteWiseClient = new IoTSiteWiseClient({
+    credentials: awsCredentials,
+    region: awsRegion,
+  });
+  
+  const iotSiteWiseQuery = initialize({
+    iotSiteWiseClient: iotSiteWiseClient,
+    iotEventsClient: iotEventsClient,
+    settings: {
+      batchDuration: 100,
+      edgeMode,
+    },
+  }).query;
+  
+  const query = iotSiteWiseQuery.anomalyData({
+    assetId,
+    predictionDefinitionId,
+  });
+
+  return <AnomalyChart query={query} />;
+};
+
+```

packages/doc-site/stories/data-sources/AWSIoTSiteWiseSource.mdx

@@ -322,6 +322,53 @@ Type: Boolean
 
 ---
 
+### `anomalyData`
+
+A method that is used to construct the query to process AWS IoT SiteWise anomaly data.
+
+The first parameter is the query.
+
+Type: Function
+
+### Query parameter
+
+Controls what data to request from AWS IoT SiteWise.
+
+- `assetId`
+
+  The ID of the asset in which the specified prediction model was created.
+
+  Type: String
+
+- `predictionDefinitionId`
+
+  The ID of the prediction definition.
+
+  Type: String
+
+```
+const { IoTSiteWiseClient } = require('@aws-sdk/client-iotsitewise');
+import { initialize } from '@iot-app-kit/source-iotsitewise';
+import { AnomalyChart } from '@iot-app-kit/react-components';
+
+const iotSiteWiseClient = new IoTSiteWiseClient({ region: "REGION" });
+
+// initialize source-iotsitewise
+const { query } = initialize({ iotSiteWiseClient });
+
+// jsx
+<AnomalyChart
+  query={
+    query.anomalyData({
+      assetId: 'engine-turbine',
+      predictionDefinitionId: 'engine-turbine-prediction-model',
+    })
+  }
+/>
+```
+
+---
+
 ## SiteWiseDataSourceSettings
 
 (Optional) Settings that can be provided when initializing the AWS IoT SiteWise source.