[AWS IoT SiteWise] IoT Application Kitで折れ線グラフを表示してみました

SIN

2024.01.29

1 はじめに

CX事業本部製造ビジネステクノロジー部の平内（SIN）です。

IoT Application Kit は、IoTデータ表示のための、フロントエンドコンポーネントとユーティリティで構成されるオープンソースライブラリです。

デフォルトで、AWS IoT SiteWise及び、AWS IoT TwinMaker からデータを取得できます。

https://github.com/awslabs/iot-app-kit

下記は、今回実装したWebアプリ（赤枠内）です。背景に表示されているのは、モニタリングポータルのダッシュボードです。同じ内容の折れ線グラフが表示されていることを確認できます。

本稿では、サンプルとして、最低限の実装をイメージしたため、認証や、グラフの高度な表示には触れていない事をご了承ください。

2 データ送信

表示するためのデータをSiteWiseに送信している手順です。

(1) モデル作成

モデルは、測定値として、SampleValue1と、SampleValue2だけを定義しました。

(2) アセット作成

上記モデルをもとに作成したアセットです。ここで、生成されたアセットIDとプロパティIDをメモしておきます。

(3) データ送信

batch_put_asset_property_valueを使用して、0から100のランダムな数値を送信しているコードです。

アセットIDとプロパティIDを指定して送信しているので、アセット側でのエリアスの関連付けは、必要はありません。

import boto3
from uuid import uuid4
import random
import time
from datetime import datetime

counter = 60  # 送信回数
wait_sec = 1  # 送信間隔

asset_id = "2c78fb61-8b47-48f6-9af3-06011ae87509"
property_id_list = [
    "5b6c92f0-70ca-43eb-9052-ee3297df7b68",
    "8ced2253-97d0-44f9-b732-5b66a43c0e2c",
]


def put_asset_property(client, asset_id, property_id, value):
    client.batch_put_asset_property_value(
        entries=[
            {
                "entryId": str(uuid4()),
                "assetId": asset_id,
                "propertyId": property_id,
                "propertyValues": [
                    {
                        "value": {"doubleValue": value},
                        "timestamp": {
                            "timeInSeconds": int(datetime.now().timestamp()),
                            "offsetInNanos": 0,
                        },
                        "quality": "GOOD",
                    }
                ],
            }
        ]
    )


def main():
    client = boto3.client("iotsitewise")

    for i in range(counter):
        for property_id in property_id_list:
            value = random.uniform(0, 100)
            put_asset_property(client, asset_id, property_id, value)
            print("[{}] {}".format(i, value))
        time.sleep(wait_sec)


if __name__ == "__main__":
    main()

3 グラフ表示

IoT Application KitをReactから利用する手順です。

(1) React初期化

myappと言う名前でプロジェクトを生成しました。

% npx create-react-app --template typescript myapp
% cd myapp

(2) ライブラリのインストール

ReactでSiteWiseのデータから折れ線グラフを表示するための最低限必要なライブラリは、以下になります。

% npm install @iot-app-kit/react-components
% npm install @iot-app-kit/source-iotsitewise

なお、上記だけだと、エラーとなったため

Module Error (from ./node_modules/sass-loader/dist/cjs.js):
Cannot find module 'sass'

sassもインストールしました。

% npm install sass

(3) Reactコンポーネントの作成

IoT Application Kitでデータ取得のための、queryは、@aws-sdk/client-iotsitewise のインスタンスで初期化します。

折れ線グラフを表示するには、LineChartコンポーネントが用意されています。 query.timeSeriesDataで、表示するアセットの属性を指定し、viewportでは、表示期間が指定されています。

App.tsx

import "@iot-app-kit/components/styles.css";

import { initialize } from "@iot-app-kit/source-iotsitewise";
import { LineChart, WebglContext } from "@iot-app-kit/react-components";

const region = "ap-northeast-1";
const accessKeyId = "xxxxxxxxxxxxx";
const secretAccessKey = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";

const { query } = initialize({
  awsCredentials: {
  　　　　accessKeyId: accessKeyId,
  　　　　secretAccessKey: secretAccessKey,
　　　　},
  awsRegion: region,
});

const assetId = "2c78fb61-8b47-48f6-9af3-06011ae87509";
const propertyIdList = [
  "5b6c92f0-70ca-43eb-9052-ee3297df7b68",
  "8ced2253-97d0-44f9-b732-5b66a43c0e2c",
];

function App() {
  return (
    <div style={{ height: "400px" }}>
      <LineChart
        queries={[
          query.timeSeriesData({
            assets: [
              {
                assetId: assetId,
                properties: [
                  {
                    propertyId: propertyIdList[0],
                  },
                  {
                    propertyId: propertyIdList[1],
                  },
                ],
              },
            ],
          }),
        ]}
        viewport={{
          duration: "60s",
        }}
      />
      <WebglContext />
    </div>
  );
}

export default App;