Soracom

Users

ドキュメント
Home ドキュメント SORACOM Lagoon 3 Panel の共通機能

Variables (変数) を利用して Panel に表示する対象データを切り替える

標準的な設定では、1 つの Panel では、1 つのデバイスから送信されたデータのみを可視化できます。多くのデバイスのデータを可視化するためにデバイスごとに Panel を用意すると、画面のスペースが足りなかったり、多くの同じような Panel を作成する手間がかかったりします。

この問題を解決するために、Variables を利用します。Variables の主な使いかたは以下のとおりです。

  • Panel に表示するデバイスや系列を切り替える

    Dashboard の上部で任意の値を選択すると、Panel に表示するデバイスや系列を切り替えられます。

  • 同じフォーマットの Panel を繰り返し表示する

    Dashboard の上部で「All」を選択すると、同じフォーマットの Panel を繰り返し表示できます。

    任意のデバイスを選択できます

    Variables の [Selection options][Multi-value] にチェックを入れると、Dashboard の上部で Variables の値を選択するときに、同時に複数の値を選択できます。たとえば、以下のように Dashboard の上部で「Device-1」、「Device-3」だけを選択すると、選択したデバイスの Panel のみを表示できます。

  • 同じフォーマットの Row を繰り返し表示する

    Dashboard の上部で「All」を選択すると、同じフォーマットの Row を繰り返し表示できます。

    任意のデバイスを選択できます

    Variables の [Selection options][Multi-value] にチェックを入れると、Dashboard の上部で Variables の値を選択するときに、同時に複数の値を選択できます。たとえば、以下のように Dashboard の上部で「Device-1」、「Device-3」だけを選択すると、選択したデバイスの Panel のみを表示できます。

Variables を設定した Dashboard は第三者に公開できません

第三者に公開する Dashboard では、Variables を利用しないでください。

詳しくは Grafana 9 のドキュメントを参照してください

このページでは、 Lagoon でよく利用される機能を説明しています。そのほかの機能について詳しくは、Grafana documentation の Variables (英語) を参照してください。

サンプルデータソース (Demo) の Device を利用するための Variables を定義する

Variables は、さまざまな方法で定義できます。ここでは、サンプルデータソース (Demo) を利用するための Variables を定義する例を説明します。

  1. Dashboard のヘッダーの [ (Dashboard settings)] をクリックします。

    Dashboard の Settings 画面が表示されます。

  2. [Variables][Add variable] の順にクリックします。

  3. 各項目を以下のように設定します。

    項目説明
    [Select variable type]「Custom」を選択します。
    [Name]「Device」と入力します。
    [Label]「Select device」と入力します。
    [Description]任意の説明文を入力します。
    [Show on dashboard]「Label and value」を選択します。

    [Custom options]

    項目説明
    [Values separated by comma]「Device-1,Device-2,Device-3,Device-4,Device-5」と入力します。

    [Selection options]

    項目説明
    [Multi-value]Panel に表示する対象データを切り替えるだけの場合は、オフのままにします。同じフォーマットの Panel / Row を繰り返し表示する場合は、オンにします。
    [Include All option]Panel に表示する対象データを切り替えるだけの場合は、オフのままにします。同じフォーマットの Panel / Row を繰り返し表示する場合は、オンにします。
    [Custom all value]空欄のままにします。
  4. [Preview of values] に「All」、「Device-1」、「Device-2」、「Device-3」、「Device-4」、「Device-5」が表示されていることを確認して、[Apply] をクリックします。

Panel に表示するデバイスや系列を切り替える

サンプルデータソース (Demo) を使用した Dashboard を作成する で作成した Dashboard で、Panel に表示するデバイスや系列を切り替えることができます。

ここでは、Panel の設定を変更して、Dashboard 名の下に表示されたドロップダウンで選択した Variable が、Panel に反映されるようにします。

  1. [湿度と温度][Edit] の順にクリックします。

  2. Query A の「Device-1」と、Query B の「Device-1」を、それぞれ「$Device」に変更します。

  3. [Apply] をクリックします。

    Panel の設定が変更され、Dashboard に戻ります。

    Device-2 のデータを表示してみましょう。

  4. Dashboard 名の下に表示されたドロップダウンで、「Device-2」を選択します。

    Device-2 の湿度と温度が表示されます。同様に「Device-3」を選択すれば、Device-3 の情報が表示されます。

同じ設定の Panel を複数表示することもできます

Panel の [Repeat option] を設定すると、同じ設定の Panel を複数表示できます。詳しくは、同じフォーマットの Panel を繰り返し表示する を参照してください。

同じフォーマットの Panel を繰り返し表示する

Dashboard の上部で「All」を選択したときに、同じフォーマットの Panel を繰り返し表示するように設定できます。

  1. 以下のような 2 つの Panel を含む Dashboard を作成します。

    Panel説明
    湿度と温度サンプルデータソース (Demo) の Device-1 の humidity と temperature を参照する Time series です。
    位置情報サンプルデータソース (Demo) の Device-1 の -All- を参照する Soracom Map Panel です。
  2. サンプルデータソース (Demo) の Device を利用するための Variables を定義します

  3. 1 つ目の Panel のタイトル → [Edit] の順にクリックします。

  4. Query A の「Device-1」と、Query B の「Device-1」を、それぞれ「$Device」に変更します。

  5. [All][Panel options] の順にクリックします。

  6. 以下の項目を設定します。

    項目説明
    [Panel options][Title]「湿度と温度 ($Device)」に変更します。
    [Panel options][Repeat options][Repeat by variable]「Device」を選択します。
    [Panel options][Repeat options][Repeat direction]「Vertical」を選択します。

    横方向 (Horizaontal) に繰り返すこともできます

    Panel を繰り返す場合は、[Repeat direction] で「Horizontal」を選択すると、横方向 (Horizontal) に繰り返すことができます。

  7. [Apply] をクリックします。

    Panel の設定が変更され、Dashboard に戻ります。

  8. もう一方の Panel も同様に設定して、[Apply] をクリックします。

    Panel の設定が変更され、Dashboard に戻ります。

  9. Dashboard の上部で「All」を選択します。

    Panel が繰り返し表示されます。

    任意のデバイスを選択して表示できます

    Dashboard の上部で「All」を選択する代わりに、「Device-3」と「Device-4」にチェックを入れると、Device-3 と Device-4 の Panel だけが表示されます。

同じフォーマットの Row を繰り返し表示する

Dashboard の上部で「All」を選択したときに、同じフォーマットの Row を繰り返し表示するように設定できます。Panel だけで繰り返す場合と比べて、複数の Panel を複雑に組み合わせた状態で繰り返すことができて便利です。

  1. 以下のような 4 つの Panel を含む Row を作成します。

    Panel説明
    Temperature and humidityサンプルデータソース (Demo) の Device-1 の humidity と temperature を参照する Time series です。
    Mapサンプルデータソース (Demo) の Device-1 の -All- を参照する Soracom Map Panel です。
    Batteryサンプルデータソース (Demo) の Device-1 の battery を参照する Stat です。
    Elevationサンプルデータソース (Demo) の Device-1 の elevation を参照する Time series です。なお、Expression を利用して、5 分ごとに平均 (Mean) した値を棒グラフで表示しています。
  2. サンプルデータソース (Demo) の Device を利用するための Variables を定義します

  3. 1 つ目の Panel のタイトル → [Edit] の順にクリックします。

  4. Query A の「Device-1」と、Query B の「Device-1」を、それぞれ「$Device」に変更します。

    ここでは Panel の [Repeat options] は設定しません

    Panel の [Repeat options] を設定すると、1 つの Row の中でさらに Panel を繰り返すことができます。ここでは、[Repeat options] を設定しません。

  5. 同様にすべての Panel の Query の「Device-1」を、「$Device」に変更します。

  6. Row にマウスポインターをあわせて、[] をクリックします。

  7. 以下の項目を設定します。

    項目説明
    [Title]「$Device」に変更します。
    [Repeat for]「Devices」を選択します。

  8. [Update] をクリックします。

    Row の設定が変更され、Row が繰り返し表示されます。

    任意のデバイスを選択して表示できます

    Dashboard の上部で「All」を選択する代わりに、「Device-3」と「Device-4」にチェックを入れると、Device-3 と Device-4 の Panel だけが表示されます。

Variables の設定について

[Select variable type] で選択した項目によって、設定項目が切り替わります。ここでは、以下の 3 つの項目を説明します。

Query

[Select variable type] で「Query」を選択すると、Harvest Data にデータを保存したデバイスの種類 (IoT SIM、Inventory デバイスなど) やデバイスの名前を利用して Variables を作成できます。たとえば、オペレーターが所有する IoT SIM の名前をすべて含む Variables を作成できます。

Harvest Data に保存されているデータの値を Variables として利用することはできません。

[General]

項目説明
[Name]Variables の名前を入力します。英数字のみ入力できます。
[Label]

Dashboard の上部に Variables を表示するときのラベルを入力します。例: NorthernPart

[Description]Dashboard の上部に表示されたラベルにマウスポインターをあわせたときに表示される説明文を入力します。
[Show on dashboard]

Dashboard の上部に、この Variables を表示するかどうかを設定します。

  • Label and value: ラベルと値を表示します。
  • Value: 値のみを表示します。
  • Nothing: Variables を表示しません。ただし非表示にしても、Dashboard の URL のクエリパラメータに、var-{variable}={value} を追加すると、Variable を変更できます。

[Query options]

項目説明
[Data source]

「Harvest」を選択します。

[Data source] は「Harvest」を選択してください

Lagoon では、そのほかの [Data source] は利用できません。

[Query]

Variables の値として扱うリソースの種類を指定します。以下のいずれかの文字列を入力します。

  • subscribers: IoT SIM
  • devices: Inventory デバイス
  • demo: サンプルデータソース (Demo)
  • ?: リソースの種類 (subscribersdevicesdemo など)
[Regex]

正規表現を利用して、デバイス名の一部を Variables の値として扱ったり、テキストとして扱ったりできます。

たとえば、デバイス名が Device-1、Device-2、… の場合は、/(?<value>Device-(?<text>[0-9]))/ と入力すると、「1」がテキスト (text) として、「Device-1」が値 (value) として扱われます。

テキストが利用されるときと値が利用されるとき:

Variables が Dashboard の上部に表示される場合は、テキストが利用されます。

また、Variables は、Panel の [Title][Description] に挿入できます。たとえば、Variables の名前が「QueryTest」の場合、「$QueryTest」と入力してください。

このとき、Variables の値が挿入されるか、テキストが挿入されるかは、項目によって異なります。

上図のように、[Title] に「$QueryTest」を入力した場合は、テキストが挿入されます。また、[Description] に「$QueryTest」を入力した場合は、値が挿入されます。

項目によらず、テキストを挿入する場合は、「${QueryTest:text}」を入力します。また、値を挿入する場合は「${QueryTest:value}」を入力します。

[Sort]

値を並べ替えるかどうかを設定します。

  • Disabled: 並べ替えません。
  • Alphabetical (asc): アルファベット順 (大文字小文字を区別する。昇順)
  • Alphabetical (desc): アルファベット順 (大文字小文字を区別する。降順)
  • Numerical (asc): 数値順 (昇順)
  • Numerical (desc): 数値順 (降順)
  • Alphabetical (case-insensitive, asc): アルファベット順 (大文字小文字を区別しない。昇順)
  • Alphabetical (case-insensitive, desc): アルファベット順 (大文字小文字を区別しない。降順)
[Refresh]

Variables を更新するタイミングを選択します。

  • On dashboard load: Dashboard を表示したときに更新します。
  • On time range change: 時間範囲を変更したときに更新します。

[Selection options]

項目説明
[Multi-value]チェックを入れると、Dashboard の上部で Variables の値を選択するときに、同時に複数の値を選択できます。同じフォーマットの Panel を繰り返し表示する で、任意のデバイスの Panel だけを表示する機能を利用する場合はチェックを入れます。
[Include All option]チェックを入れると、Variables の値に「All」が追加されます。同じフォーマットの Panel を繰り返し表示する 場合はチェックを入れます。
[Custom all value]

「All」を選択したときの、Variable の値を入力します。

空欄にすると、「[Values separated by comma] に指定したすべての Variable を , で連結した文字列」が Variable の値として扱われます。

[Preview of values]

Variables の値が一覧表示されます。[Query][Regex] を意図したとおりに設定できていることを確認できます。

ボタン

項目説明
[Delete]Variables を削除します。
[Run query]デバイス名などをあらためて Harvest Data から取得します。
[Apply]Variables の設定を登録して、Variables の一覧に戻ります。

Custom

[Select variable type] で「Custom」を選択すると、任意の値を含む Variables を作成できます。

[General]、[Selection options]、[Preview of values]、ボタンは Query と同様です

Query の説明を参照してください。

[Custom options]

項目説明
[Value separated by comma]

Variables の値にする文字列をカンマ (,) 区切りで入力します。

例: Device-1,Device-2,Device-3,Device-4,Device-5

Text box

[Select variable type] で「Text box」を選択すると、Dashboard の上部で Variables の値を入力できます。

[General]、ボタンは Query と同様です

Query の説明を参照してください。

[Text options]

項目説明
[Default value]デフォルトの値を入力します。