[AWS IoT SiteWise] IoT Application Kitで表示する折れ線グラフのオプションを色々試してみました

1 はじめに

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

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

前回、最低限の実装で、折れ線グラフを表示してみました。

今回は、LineChartに設定可能な、各種オプションで、その表現力を確認してました。

なお、先のブログと同じように、AWS IoT SiteWiseからデータを取得するようにし、「モデル」及び「アセット」は、そのまま利用しています。

2 送信データ

今回は、グラフが見やすいように、sin及び、cosカーブをデータとして送信してみました。

import boto3
from uuid import uuid4

import time
from datetime import datetime
import numpy as np

counter = 100  # 送信回数
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")
    arr = np.arange(0, 2 * np.pi, 0.2)
    sin = np.sin(arr).tolist()
    cos = np.cos(arr).tolist()

    for c in range(counter):
        i = c % len(arr)
        put_asset_property(client, asset_id, property_id_list[0], sin[i])
        put_asset_property(client, asset_id, property_id_list[1], cos[i])

        print("[{}] {}".format(c, i))

        time.sleep(wait_sec)


if __name__ == "__main__":
    main()

3 デフォルト設定

特に設定することなくデフォルト値で最新30秒のグラフを表示すると以下のようになっています。

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

import { initialize } from "@iot-app-kit/source-iotsitewise";
import { IoTSiteWiseClient } from "@aws-sdk/client-iotsitewise";
import { IoTEventsClient } from "@aws-sdk/client-iot-events";
import { LineChart, WebglContext } from "@iot-app-kit/react-components";

const region = "ap-northeast-1";
const accessKeyId = "AKIAWMOBC4JXIQ3ADWM5";
const secretAccessKey = "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";
const credentials = {
  accessKeyId: accessKeyId,
  secretAccessKey: secretAccessKey,
};

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

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

const queries = query.timeSeriesData({
  assets: [
    {
      assetId: assetId,
      properties: [
        { propertyId: propertyIdList[0], refId: "sample_value_1" },
        { propertyId: propertyIdList[1], refId: "sample_value_2" },
      ],
    },
  ],
});

function App() {
  return (
    <div style={{ height: "400px" }}>
      <LineChart
        queries={[queries]}
        viewport={{
          duration: "30s",
        }}
      />
      <WebglContext />
    </div>
  );
}

export default App;

4 Gestures

IoT Applocation Kitで表示したグラフは、以下のようなジェスチャーに対応しています。

1. Shift + drag 左右移動

1. Double Click ズームイン

1. Shift + Double Click ズームアウト

1. Click + Drag 範囲を指定してズームイン

そして、gestures={false} を指定すると、ジェスチャーによる操作は無効化されます。

<LineChart
    queries={[queries]}
    gestures={false}
    viewport={{
        duration: "60s",
    }}
/>

5 Viewport

vidwportでは、リアルタイムと期間固定が指定できます。

(1) リアルタイム

最新の60秒とかであれば、先の例のように duration: "60s" のように指定します。（s:秒、m:分、h:時、d:日、w:週が利用可能です）

<LineChart
    queries={[queries]}
    viewport={{
        duration: "60s",
    }}
/>

(2) 期間固定

リアルタイムに更新されるものではなく、期間を指定して表示するには、strat及び、endを指定します。

下記は、14:50 〜 15:00 の間のデータを期間固定で表示しています。

<LineChart
    queries={[queries]}
    viewport={{
        start: new Date("2024-02-05T14:50:00+0900"),
        end: new Date("2024-02-05T15:00:00+0900"),
    }}
/>

なお、指定できる期間には、データ数に応じて制限があるようです。

6 Y軸のレンジ指定

yMin と yMaxで、グラフのY軸のレンジが指定可能です。

下記は、最大:5,最小:-5を指定みました。

<LineChart
    queries={[queries]}
    viewport={{
        duration: "60s",
    }}
    yMin={-5}
    yMax={5}
/>

7 styleSettings

query時に、refIdを指定しておくことで、そのスタイル設定が可能になります。

const queries = query.timeSeriesData({
  assets: [
    {
      assetId: assetId,
      properties: [
        { propertyId: propertyIdList[0], refId: "sample_value_1" },
        { propertyId: propertyIdList[1], refId: "sample_value_2" },
      ],
    },
  ],
});

スタイルに指定できるものとして、下記のものがあります。

• name: String データセットの名前を置き換えるます
• unit: Stirng 単位
• color: String 先の色
• detailedName: String ツールチップに表示される詳細な名前（どの部分に影響するのか、ちょっと分かりませんでした）

<LineChart
    queries={[queries]}
    viewport={{ duration: "60s" }}
    styles={{
      sample_value_1: {
        color: "#ff00ff",
        name: "sin",
        unit: "度",
        detailedName: "AAAA",
      },
      sample_value_2: {
        color: "red",
        name: "cos",
        unit: "度",
        detailedName: "BBBB",
      },
    }}
/>

8 axis

X軸とY軸のメモリの表示・非表示及び、ラベルの指定が可能です。

<LineChart
    queries={[queries]}
    viewport={{ duration: "60s" }}
    axis={{
        showX: true,
        showY: false,
        yAxisLabel: "度",
    }}
/>

9 thresholds

thresholdsでグラフに注釈となるラインを表示できます。

<LineChart
    queries={[queries]}
    viewport={{ duration: "60s" }}
    thresholds={[
      {
        id: "1",
        color: "#ff0000",
        comparisonOperator: "EQ",
        value: 0.5,
        showValue: true,
        label: {
          text: "LABEL",
          show: true,
        },
        isEditable: true,
      }
/>

comparisonOperatorに指定できるのは、以下の定数です。

export type ComparisonOperator =
  | 'LT'
  | 'GT'
  | 'LTE'
  | 'GTE'
  | 'EQ'
  | 'CONTAINS';

例えば、GTと設定した場合、敷居値を超えた場合に、指定色で表示されます。

isEditableをtrueに設定すると、ラインをドラッグで移動できるようになります。

10 significantDigits

significantDigitsで有効表示桁数を指定できます。

significantDigits={1} の場合

significantDigits={3} の場合

11 最後に

今回は、AWS IoT SiteWiseのLineChartで設定可能なオプションを色々試してみました。

インターネット上で公開されているドキュメントは、バージョンによる差異なのか、若干、戸惑う部分もありました。

カスタマイズしたい部分は、まだまだ色々あると思いますが、リアルタイムなグラフを簡単に表示できるのは、かなり魅力的だと思います。