feat(react-components): add a sitewise connected chart story

awslabs · Aug 4, 2023 · b66de3b · b66de3b
1 parent 52d6033
commit b66de3b
Show file tree

Hide file tree

Showing 4 changed files with 144 additions and 1 deletion.
diff --git a/packages/react-components/.env.example b/packages/react-components/.env.example
@@ -0,0 +1,9 @@
+AWS_ACCESS_KEY_ID=xxxxxxxxxx
+AWS_SECRET_ACCESS_KEY=xxxxxxxxxx
+AWS_SESSION_TOKEN=xxxxxxxxxx
+AWS_REGION=xxxxxxxxxx
+
+ASSET_ID_1=xxxxxxxxxx
+PROPERTY_ID_1=xxxxxxxxxx
+PROPERTY_ID_2=xxxxxxxxxx
+PROPERTY_ID_3=xxxxxxxxxx
diff --git a/packages/react-components/stories/chart/chart.stories.tsx b/packages/react-components/stories/chart/chart.stories.tsx
@@ -4,6 +4,7 @@ import { MOCK_TIME_SERIES_DATA_QUERY, MOCK_TIME_SERIES_DATA_AGGREGATED_QUERY, VI
 // Should be part of the public API, i.e. exported from src
 import { LineChart, ScatterChart, BarChart, StatusTimeline, WebglContext, TimeSync, useViewport } from '../../src';
 import Chart from '../../src/components/chart';
+import { getTimeSeriesDataQuery, queryConfigured } from '../utils/query';
 
 const ViewportConsumer = () => {
   const { viewport, setViewport } = useViewport();
@@ -96,3 +97,35 @@ export const BaseChartExample: ComponentStory<typeof Chart> = () => {
     </div>
   );
 };
+
+export const SiteWiseConnectedBaseChartExample: ComponentStory<typeof Chart> = () => {
+  if (!queryConfigured()) {
+    return (
+      <div>
+        <h1>All required Env variables not set</h1>
+        <p>Required:</p>
+        <ul>
+          <li>AWS_ACCESS_KEY_ID</li>
+          <li>AWS_SECRET_ACCESS_KEY</li>
+          <li>AWS_SESSION_TOKEN</li>
+          <li>AWS_REGION</li>
+          <li>ASSET_ID_1</li>
+          <li>PROPERTY_ID_1</li>
+          <li>PROPERTY_ID_2</li>
+          <li>PROPERTY_ID_3</li>
+        </ul>
+      </div>
+    );
+  }
+
+  return (
+    <div id='story-container' style={{ width: '100vw', height: '100vh' }}>
+      <Chart
+        viewport={{ duration: '5m' }}
+        queries={[getTimeSeriesDataQuery()]}
+        size={{ width: 800, height: 500 }}
+        theme='light'
+      />
+    </div>
+  );
+};
diff --git a/packages/react-components/stories/utils/query.ts b/packages/react-components/stories/utils/query.ts
@@ -0,0 +1,101 @@
+import { getIotEventsClient, getSiteWiseClient } from '@iot-app-kit/core-util';
+import { SiteWiseDataStreamQuery, initialize } from '@iot-app-kit/source-iotsitewise';
+
+const getEnvCredentials = () => {
+  if (
+    process.env.AWS_ACCESS_KEY_ID == null ||
+    process.env.AWS_SECRET_ACCESS_KEY == null ||
+    process.env.AWS_SESSION_TOKEN == null
+  ) {
+    throw new Error(
+      'Missing credentials: must provide the following env variables: AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY and AWS_SESSION_TOKEN within .env'
+    );
+  }
+  return {
+    // Provided by `.env` environment variable file
+    accessKeyId: process.env.AWS_ACCESS_KEY_ID,
+    secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY,
+    sessionToken: process.env.AWS_SESSION_TOKEN,
+  };
+};
+
+const getRegion = () => {
+  if (process.env.AWS_REGION == null) {
+    throw new Error('Missing credentials: Must provide the following env variables: AWS_REGION');
+  }
+  return process.env.AWS_REGION;
+};
+
+const getAssetQuery = () => {
+  if (
+    process.env.ASSET_ID_1 == null ||
+    process.env.PROPERTY_ID_1 == null ||
+    process.env.PROPERTY_ID_2 == null ||
+    process.env.PROPERTY_ID_3 == null
+  ) {
+    throw new Error(
+      'Missing configuration: Must provide the following env variables: ASSET_ID_1. PROPERTY_ID_1. PROPERTY_ID_2 and PROPERTY_ID_3'
+    );
+  }
+  return {
+    assetId: process.env.ASSET_ID_1,
+    propertyId1: process.env.PROPERTY_ID_1,
+    propertyId2: process.env.PROPERTY_ID_2,
+    propertyId3: process.env.PROPERTY_ID_3,
+  };
+};
+
+export const getIotSiteWiseQuery = () => {
+  const clientConfiguration = {
+    awsCredentials: getEnvCredentials(),
+    awsRegion: getRegion(),
+  };
+  return initialize({
+    iotSiteWiseClient: getSiteWiseClient(clientConfiguration),
+    iotEventsClient: getIotEventsClient(clientConfiguration),
+  }).query;
+};
+
+export const getTimeSeriesDataQuery = (dataStreamQuery?: SiteWiseDataStreamQuery) => {
+  if (dataStreamQuery) {
+    return getIotSiteWiseQuery().timeSeriesData(dataStreamQuery);
+  }
+
+  const { assetId, propertyId1, propertyId2, propertyId3 } = getAssetQuery();
+
+  return getIotSiteWiseQuery().timeSeriesData({
+    assets: [
+      {
+        assetId,
+        properties: [
+          {
+            propertyId: propertyId1,
+            aggregationType: 'AVERAGE',
+            resolution: '1m',
+          },
+          {
+            propertyId: propertyId2,
+            aggregationType: 'AVERAGE',
+            resolution: '1m',
+          },
+          {
+            propertyId: propertyId3,
+            aggregationType: 'AVERAGE',
+            resolution: '1m',
+          },
+        ],
+      },
+    ],
+  });
+};
+
+export const queryConfigured = () => {
+  try {
+    getEnvCredentials();
+    getRegion();
+    getAssetQuery();
+  } catch (e) {
+    return false;
+  }
+  return true;
+};
diff --git a/turbo.json b/turbo.json
@@ -29,7 +29,7 @@
     },
     "start": {
       "dependsOn": [],
-      "env": ["AWS_ACCESS_KEY_ID", "AWS_SECRET_ACCESS_KEY", "AWS_SESSION_TOKEN", "REGION"]
+      "env": ["AWS_ACCESS_KEY_ID", "AWS_SECRET_ACCESS_KEY", "AWS_SESSION_TOKEN", "REGION", "AWS_REGION", "ASSET_ID_1", "PROPERTY_ID_1", "PROPERTY_ID_2", "PROPERTY_ID_3"]
     },
     "version": {
       "dependsOn": [],