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で表示したグラフは、以下のようなジェスチャーに対応しています。
- Shift + drag 左右移動
- Double Click ズームイン
- Shift + Double Click ズームアウト
- 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で設定可能なオプションを色々試してみました。
インターネット上で公開されているドキュメントは、バージョンによる差異なのか、若干、戸惑う部分もありました。
カスタマイズしたい部分は、まだまだ色々あると思いますが、リアルタイムなグラフを簡単に表示できるのは、かなり魅力的だと思います。
0
