[AWS IoT SiteWise] IoT Application KitのChartコンポーネントを試してみました

SIN

2024.02.19

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

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",
    },
  }}
/>