fix: update docs for KPI

packages/doc-site/package.json

@@ -2,6 +2,14 @@
   "name": "@iot-app-kit/doc-site",
   "version": "10.0.0",
   "private": true,
+  "scripts": {
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "start": "storybook dev -p 6006",
+    "build": "storybook build",
+    "lint": "eslint  --max-warnings=0",
+    "fix": "eslint --fix "
+  },
   "devDependencies": {
     "@iot-app-kit/testing-util": "^10.0.0",
     "@storybook/addon-essentials": "^7.6.6",
@@ -21,14 +29,6 @@
     "react-dom": "^18.2.0",
     "storybook": "^7.6.6"
   },
-  "scripts": {
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "start": "storybook dev -p 6006",
-    "build": "storybook build",
-    "lint": "eslint  --max-warnings=0",
-    "fix": "eslint --fix "
-  },
   "dependencies": {
     "@iot-app-kit/core": "^10.0.0",
     "@iot-app-kit/react-components": "^10.0.0"

packages/doc-site/stories/components/bar-chart/Docs.mdx

@@ -12,7 +12,7 @@ Bar chart supports a rich set of features including alarms, thresholds, high per
 
 ## Demo
 
-<Canvas sourceState="none" of={BarChartStories.Standard} />
+<Canvas  story={{height : '400px' }}  sourceState="none" of={BarChartStories.Standard} />
 
 **📈👆 Interact with the chart!**
 

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

@@ -14,7 +14,7 @@ This component can be used to draw both line (step-up, step-down, step-mid etc.)
 
 ## Demo
 
-<Canvas sourceState="none" of={ChartStories.Standard} />
+<Canvas sourceState="none"  story={{height : '450px' }}  of={ChartStories.Standard} />
 
 **📈👆 Interact with the chart!**
 

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

@@ -118,7 +118,6 @@ Each widget contains the following properties:
       - 'scatter-chart'
       - 'bar-chart'
       - 'kpi'
-      - 'status'
       - 'status-timeline'
       - 'table'
       - 'text'

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

@@ -6,7 +6,7 @@ import * as KpiStories from './Kpi.stories';
 
 The Key Performance Indicator (KPI) component provides a compact representation when you need an overview of your asset properties. This overview gives you the most critical insights into the overall performance of your devices, equipment, or processes. With the KPI, you can interact with IoT data from one or more data sources.
 
-<Canvas sourceState="none"  of={KpiStories.Standard} />
+<Canvas sourceState="none" story={{height : '70px' }} of={KpiStories.Standard} />
 
 ## Properties
 
@@ -23,7 +23,7 @@ Type: Object
 
 ### `thresholds`
 
-(Optional) Thresholds define rules which effect how the data is visualized based on whether the data breaches the threshold.
+(Optional) Styled Thresholds define rules which effect how the data is visualized based on whether the data breaches the threshold as well as how the threshold is styled
 
 [Learn more about thresholds](/docs/core-thresholds--docs#thresholds).
 
@@ -49,15 +49,15 @@ The settings object contains the following properties:
 
   Type: Boolean
 
-- `showName`
+- `showAggregationAndResolution`
 
-  (Optional) whether to display the name of the data being displayed. Defaults to true.
+  (Optional) whether to display the aggregation and resolution of the data being displayed. Defaults to true.
 
   Type: Boolean
 
-- `showIcon`
+- `showName`
 
-  (Optional) whether to display the icon if present. Defaults to true
+  (Optional) whether to display the name of the data being displayed. Defaults to true.
 
   Type: Boolean
 
@@ -79,12 +79,27 @@ The settings object contains the following properties:
 
   Type: Number
 
-- `color`
+---
+
+- `color` (deprecated)
 
   (Optional) color to display value. Defaults to black. Is overriden by thresholds and alarms. Must be a css string.
 
   Type: String
 
+
+- `showIcon` (deprecated)
+
+  (Optional) whether to display the icon if present. Defaults to true
+
+  Type: Boolean
+
+- `aggregationFontSize` (deprecated)
+
+  (Optional) font size in pixels for the aggregation and resolution
+
+  Type: Number
+
 ### `styles`
 
 (Optional) A map of `refId` to style settings for the component. [Learn more about reference IDs here](/docs/core-styles--docs).

packages/doc-site/stories/components/kpi/Kpi.stories.tsx

@@ -19,7 +19,16 @@ type Story = StoryObj<typeof KPI>;
 
 export const Standard: Story = {
   args: {
-    query: mockSinWaveData('1s'),
+    query: mockSinWaveData('5s'),
+    settings: {
+      showUnit: true,
+      showName: true,
+      showTimestamp: true,
+      showAggregationAndResolution: true,
+      fontSize: 30,
+      secondaryFontSize: 12,
+      backgroundColor: '#ffffff',
+    }
   },
 };
 

packages/doc-site/stories/components/status-timeline/Docs.mdx

@@ -12,7 +12,7 @@ Status timeline supports a rich set of features including alarms, thresholds, hi
 
 ## Demo
 
-<Canvas sourceState="none" of={StatusTimelineStories.Standard} />
+<Canvas  story={{height : '450px' }}  sourceState="none" of={StatusTimelineStories.Standard} />
 
 **📈👆 Interact with the chart!**
 

packages/doc-site/stories/core/Thresholds.mdx

@@ -95,3 +95,21 @@ Contains the following properties:
   (Optional) configures whether a breached threshold results in the data on a widget to be colored according to the threshold. Defaults to true.
 
   Type: Boolean
+
+
+# StyledThreshold
+An extension of the Threshold type which adds seetings for the threshold stylization
+
+Constains the following properties:
+
+- `visible`
+
+  (Optional) determines if a met threshold is visible
+
+  Type: Boolean
+
+- `fill`
+
+  (Optional) determines if a met threshold applies a filling color or just create a line representing the threshold
+
+  Type: string

packages/doc-site/stories/mockSinWaveData.ts

@@ -21,7 +21,7 @@ export const mockSinWaveData = (frequency?: string) =>
 
 export const mockSinWaveDataAggregated = () =>
   mockTimeSeriesDataQueryLiveStreamAggregated({
-    frequency: '1s',
+    frequency: '5s',
     resolution: 1000,
     dataType: DATA_TYPE.NUMBER,
     requests: [