fix(react-components): export anomaly chart

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

@@ -0,0 +1,102 @@
+import { Canvas, Meta, Story } from '@storybook/blocks';
+
+import * as AnomalyChartStories from './AnomalyChart.stories';
+
+<Meta of={AnomalyChartStories} />
+
+# Anomaly Chart
+
+The Anomaly chart is a visualization tool that provides a timeline view of anomaly predictions. It helps you identify and analyze anomalies in your data over time. The chart can be customized using various properties to fit your specific requirements.
+
+## Demo
+
+<Canvas  story={{ height: '350px' }}  sourceState="none" of={AnomalyChartStories.Standard} />
+
+**📈👆 Interact with the chart!**
+
+**_Pan_**: hold shift, click and drag within the data-visualization area of the chart.
+
+**_Zoom in_**: you can zoom in by scrolling up on the chart OR clicking on the zoom icon on the top tight corner of the chart and select the desired window.
+
+**_Zoom out:_** you can zoom out by scrolling down on the chart.
+
+**_Restrict time span_:** click on the zoom icon in the top right corner of the chart and drag through the interval of time you wish to restrict the viewport to.
+
+**_Reset time span_:** click on the zoom reset icon in the top right corner of the chart.
+
+---
+
+### Anomaly Chart Properties
+
+
+**query and data**:
+These properties are used to specify the data that the chart will display, at least one of these must be defined. You can use either query or data, but not both. Only one anomaly can be visualized at a time.
+
+- **query (object)**: This property specifies the query that will retrieve the anomaly data to be visualized.
+
+  [Learn more about the anomaly widget's queries](/docs/components-anomalychart--query).
+
+- **data (array)**: This property allows you to provide raw data that the component will visualize.
+
+  [Learn more about the anomaly widget's data](/docs/components-anomalychart--data)
+
+**viewport (optional, object)**: Specifies the time interval that the chart will visualize. If not provided, the chart will utilize the viewport specified by its ViewportManager. If there is no ViewportManager and no viewport defined, the default viewport will be calculated based on the minimum and maximum dates in the data.
+
+[Learn more about the viewport](/docs/core-viewport--docs).
+
+**mode (optional, string)**: Sets the chart's light or dark mode theme. Can be one of the following strings:
+* 'light'
+* 'dark'
+
+**decimalPlaces (optional, number)**: Specifies the number of significant digits to be shown for the data.
+
+**showTimestamp (optional, boolean)**: Determines whether the timestamp bar is shown below the X-axis. Defaults to `true`
+
+**tooltipSort (optional, string)**: Specifies how the tooltip data should be sorted. It can be one of the following strings:
+* 'value' (sorts by descending percentages)
+* 'alphabetical' (sorts in alphabetical order)
+
+**axis (optional, object)**: Specifies the axis settings for the chart.
+includes the following options:
+* **showX (optional, boolean)**: Setting to determine whether we show the x-axis and the horizontal grid lines. Defaults to true.
+* **showY (optional, boolean)**: Setting to determine whether we show the y-axis and the horizontal grid lines. Defaults to true.
+
+### Example
+
+```
+import { AnomalyChart, TimeSync } from '@iot-app-kit/react-components';
+import { initialize } from '@iot-app-kit/source-iotsitewise';
+
+// Chart component within a TimeSync
+const App = () => {
+  const query = initialize({
+    iotSiteWiseClient, // create an instance of the sitewise client
+    iotEventsClient, // create an instance of the events client
+  }).query;
+
+  const anomalyQuery = query.anomalyData({
+    assetId: 'asset-1',
+    predictionDefinitionId: 'prediction-definition-1'
+  });
+
+  return (
+    <TimeSync>
+      <AnomalyChart
+        query={anomalyQuery}
+        viewport={viewport}
+        mode="dark"
+        decimalPlaces={2}
+        showTimestamp={false}
+        tooltipSort="value"
+        axis={{
+          showX: true,
+          showY: false,
+        }}
+      />
+    </TimeSync>
+  )
+};
+```
+
+In this example, the Anomaly Chart is configured with an anomalyQuery, a viewport, mode, decimalPlaces, showTimestamp, tooltipSort, and axis settings. The chart will display the anomaly data specified by anomalyQuery, with a dark mode theme, showing two decimal places for the data values, hiding the timestamp bar, sorting the tooltip data by value, and displaying the x-axis but not the y-axis.
+By adjusting these properties, you can customize the appearance and behavior of the Anomaly chart to suit your specific needs. Remember to refer to the documentation for more detailed information and examples.

packages/doc-site/stories/components/anomalyChart/AnomalyChart.stories.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { AnomalyChart } from '@iot-app-kit/react-components';
+import { Meta, StoryObj } from '@storybook/react';
+import { MOCK_DATA, MOCK_DATA_ERROR, MOCK_DATA_LOADING } from './data';
+
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
+const meta: Meta<typeof AnomalyChart> = {
+  title: 'Components/AnomalyChart',
+  component: AnomalyChart,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof AnomalyChart>;
+
+export const Standard: Story = {
+  render: (props) => (
+    <div style={{ height: '400px', width: '450px' }}>
+      <AnomalyChart {...{ ...props, legend: {}, size: { height: 500, width: 900 } }} />
+    </div>
+  ),
+  args: {
+    data: [MOCK_DATA],
+    viewport: { duration: '30s' },
+  },
+};
+
+export const Error: Story = {
+  ...Standard,
+  args: {
+    data: [MOCK_DATA_ERROR],
+  },
+};
+
+export const Empty: Story = {
+  ...Standard,
+  args: {
+    data: [],
+  },
+};
+
+export const Loading: Story = {
+  ...Standard,
+  args: {
+    data: [MOCK_DATA_LOADING],
+  },
+};

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

@@ -1,79 +1,50 @@
 import { Canvas, Meta, Story } from '@storybook/blocks';
+import * as AnomalyChartStories from './AnomalyChart.stories';
 
-# Data for Anomaly chart
+<Meta of={AnomalyChartStories} />
 
-[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:
+# Anomaly Chart Data Structure
 
-### Data
+[Learn more about the Anomaly Chart](/docs/components-anomalychart-docs--docs).
 
-Fixed length array containing an object specifiying the state and value of the data
+The Anomaly provides a timeline view of anomaly predictions, visualizing the raw data in a specific format.
 
-Type: Array with a single object (fixed length of 1)
+The data structure for the Anomaly chart is an array with a single object, which contains the following properties:
 
 ---
 
-- **`state`**
+**state (string)** : Represents the state of the data, which can be one of the following values:
 
-  String representing the data's state
-
-  Type: 'loading' | 'success' | 'failed' | 'error'
+  * 'loading': Indicates that the data is currently being loaded.
+  * 'success': Indicates that the data was loaded successfully.
+  * 'failed': Indicates that the data loading failed.
+  * 'error': Indicates an error occurred during data loading.
 
 ---
 
-- **`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
+**value (object)** : An object containing the raw data and optional style overrides. It has the following properties:
 
-        Type: number
+  - **data (array)**: An array of objects, where each object represents a single Diagnostic event with a timestamp and Diagnostic object.
 
-      - **`diagnostic`**
+      - **timestamp (number)**: The time of the diagnostic point, in milliseconds.
 
-        Object representing a single data point value and its name
-
-        Type: Object
+      - **diagnostics (array)**: An array of objects representing individual data points, where each object has the following properties:
 
-        - **`name`**
-
-          String name of the diagnostic point
-
-          Type: string
-
-        - **`value`**
-
-          Value of the diagnostic point, should be number between 0 and 1
-
-          Type: number
+        - **name (string)**: The name of the diagnostic point.
 
-  - **`styles`** (Optional)
+        - **value (number)**: The value of the diagnostic point, which should be a number between 0 and 1.
 
-    Object which overrides global style settings
+  - **styles (optional, object)**: An object that overrides global style settings. It can have the following properties:
 
-    - **`decimalPlaces`** (Optional)
+    - **decimalPlaces (optional, number)**: Defines the number of decimal places to display for the diagnostic values.
 
-      type: number
+    - **color (optional, array)**: An array representing the color palette used to render the diagnostics.
 
-    - **`color` (Optional)
 
-      Array which represents the color pallette used to render the diagnostics
-
-      type: Array
+### Example 
 
+Here's an example of the Anomaly chart data structure:
 
-### Example 
 ```
 {
   state: 'success',
@@ -120,4 +91,6 @@ Type: Array with a single object (fixed length of 1)
     ],
   },
 };
-```
+```
+
+In this example, the state is 'success', indicating that the data was loaded successfully. The value object contains two diagnostic events, each with a timestamp and an array of diagnostic objects. Each diagnostic object has a name and a value between 0 and 1. The styles object overrides the global color palette for rendering the diagnostics, specifying an array of colors (['pink', 'blue', 'green', 'red']).