1 はじめに
CX事業本部製造ビジネステクノロジー部の平内(SIN)です。
IoT Application Kit は、IoTデータ表示のための、フロントエンド コンポーネントとユーティリティで構成されるオープンソース ライブラリです。
前回は、IoT Application Kitで、Rect用に用意されているLineChartコンポーネントで、オプションを設定することでの表現力を確認してみました。
今回は、Chartコンポーネントで、そのオプションを色々試してみたいと思います。
最初に、Chartコンポーネントを使用した例です。「折れ線グラフ」と「棒グラフ」が混在していたり、バックグラウンドの色が指定できたりと、ちょっとイメージが違うことが分かります。
なお、SiteWiseのモデル及びアセットは、下記で設定したものをそのまま利用しています。
[AWS IoT SiteWise] IoT Application Kitで折れ線グラフを表示してみました
また、データ送信の要領は、こちらです。
[AWS IoT SiteWise] IoT Application Kitで折れ線グラフを表示してみました
2 操作
グラフは、ピンチ操作で、ズームイン・ズームアウトが可能です。
Shiftを押しながらドラッグすることで左右への移動も可能です。
グラフの右上には、ZoomとUndoZoomのボタンが有るのですが、Zoomの方は、ちょっと動作が不明でした。
3 BackgroundColor
backgroundColorでグラフの背景色を指定できます。
<Chart
viewport={{ duration: "30s" }}
queries={[queries]}
defaultVisualizationType={"line"}
backgroundColor="#DDFFAA"
size={{
width: 1000,
height: 400,
}}
/>
4 VisualizationType
defaultVisualizationTypeで以下のタイプを指定できます。
- line
- bar
- scatter
- step-start
- step-middle
- step-end
<Chart
viewport={{ duration: "30s" }}
queries={[queries]}
defaultVisualizationType={"line"}
size={{
width: 1000,
height: 400,
}}
/>
- line
- bar
- scatter
- step-start
- step-middle
- step-end
defaultVisualizationTypeでは、グラフ全体の指定になりますが、styleSettingsで、各データのスタイルを指定すると、個々のデータ毎にタイプがvisualizationTypeで指定できます。
<Chart
viewport={{ duration: "30s" }}
queries={[queries]}
styleSettings={{
sample_value_1: {
visualizationType: "scatter",
},
sample_value_2: {
visualizationType: "bar",
},
}}
/>
5 axis
axisでグラフのメモリの表示・非表示やラベルを指定できます。また、yMin、yMaxでY軸の上限下限を固定できます。
<Chart
viewport={{ duration: "30s" }}
queries={[queries]}
defaultVisualizationType={"line"}
axis={{
showY: true,
showX: true,
yLabel: "度",
yMin: -5,
yMax: 2,
}}
/>
6 legend
legendで、visibleをtrueに設定すると判例を表示できます。 表示位置は、 positionで、left | bottom | right から選択します。
<Chart
viewport={{ duration: "30s" }}
queries={[queries]}
defaultVisualizationType={"line"}
legend={{
visible: true,
position: "left",
visibleContent: {
unit: true,
visibility: true,
},
}}
/>
判例から、各データの表示・非表示をクリックだけで切り替えることができます。
7 thresholds
thresholdsでグラフに敷居値を表示できます。
<Chart
viewport={{ duration: "30s" }}
queries={[queries]}
defaultVisualizationType={"line"}
thresholds={[
{
severity: 1,
visible: true,
fill: "#FF0000",
color: "#FF0000",
comparisonOperator: COMPARISON_OPERATOR.GREATER_THAN_EQUAL,
value: 0.5,
},
]}
/>
9 styleSettings
styleSettingsは、各データごとの表示要領が、詳細に指定できます。
各種の指定がありますが、グラフのタイプによっては無効なものもあります。
- color: 色
- symbol: シンボルの種類 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
- symbolColor: シンボルの色
- symbolSize: シンボルの大きさ
- lineThickness: 線の太さ
<Chart
viewport={{ duration: "30s" }}
queries={[queries]}
defaultVisualizationType={"line"}
styleSettings={{
sample_value_1: {
color: "#053558",
symbol: "triangle",
symbolColor: "#000000",
symbolSize: 12,
lineStyle: "dotted",
lineThickness: 3,
significantDigits: 1,
visualizationType: "line",
},
sample_value_2: {
color: "#9C1A0C",
symbol: "circle",
symbolColor: "#FF0000",
symbolSize: 7,
lineStyle: "dashed",
visualizationType: "line",
},
}}
/>
<Chart
viewport={{ duration: "30s" }}
queries={[queries]}
defaultVisualizationType={"line"}
styleSettings={{
sample_value_1: {
symbol: "arrow",
symbolColor: "#0000DD",
symbolSize: 15,
visualizationType: "scatter",
},
sample_value_2: {
visualizationType: "bar",
},
}}
/>
10 最後に
今回は、IoT Application KitのChartコンポーネントを試してみました。こちらは、前回試したLineChartコンポーネントより、ややローレベルな扱いになるようです。 必要な表現によっては、こちらの利用も検討範囲に入るのではないでしょうか。