複数のデータを可視化するためのローカルデータインスタンス

複数のデータ可視化のデータを同時にフェッチするために、特別なデータ可視化 API データリソースを使用できます。このデータリソースにより、API 呼び出しの数が減るため、データフェッチを高速化できます。

使用するタイミング

次のシナリオでは、「複数のデータを可視化するためのデータ可視化 API」データリソースを使用できます。

• 同じタイプの複数のデータ可視化には同じデータソースがあります。たとえば、5 つの可視化があるとします。ここで、可視化タイプが単一スコアで、データソースはフィルター が active=true のインシデント [incident] テーブルです。同じタイプとデータソースを持つインジケーターのグループが複数ある場合は、グループごとに同じ複数可視化データリソースのインスタンスを作成できます。
• データの可視化には、同じデータソースを参照する複数のデータリソースがあります。たとえば、「オープンインシデントの数」インジケーターのデータリソースと、「オープンインシデントの平均経過時間」インジケーターの別のデータリソースを含む線グラフの可視化があるとします。これらのインジケーターはどちらも Incident.Open データソースを使用します。効率を上げるために、この可視化を 1 つのデータリソースのみを使用するように変換できます。

使用しない場合

• UI ビルダーページには 1 つのデータ可視化しかありません。
• ページのデータ可視化では、データのロードに時間がかかる可能性があります。その場合は、データのロードを別々のデータリソースに分割しておくことをお勧めします。

複数の可視化データリソースの設定

ユースケースが複数の可視化データリソースの基準を満たしている場合は、この手順に従うことができます。

始める前に

複数のデータを可視化するためのローカルデータインスタンス での複数の可視化について、単一のデータリソースのユースケースを確認します。

必要なロール：ui_builder_admin、admin

このタスクについて

重要:

このデータリソースは、複数のコールを単一のコールに結合します。単一の呼び出しは、単一のスレッド上の単一のトランザクションとして実行されます。したがって、このデータリソースは、特に大量のデータを処理する場合は、トランザクションタイムアウトが発生する可能性があるため、特に注意して使用してください。データの量、ページのセットアップ、ターゲットとするユーザーエクスペリエンスによっては、個別のデータリソースを使用した方が良い結果が得られる場合があります。

手順

1. データの可視化が表示されているテクニカルダッシュボードまたは UIB ページに移動します。
2. ページのデータの可視化が 「使用するタイミング」の基準を満たしていることを確認します。
   たとえば、インシデントテーブルのデータソースに複数の Dial ビジュアル化があり、フェッチされるデータの量がそれほど多くありません。
3. [データとスクリプト] ドロワーの [データリソース] で、 [ + データリソースを追加] を選択します。
   
   
   
4. [データリソースを選択 (Select a data resource)] ウィンドウで、 [ データの可視化 (Data visualization)] を検索します。
   使用できるデータリソースを選択できます。
   
   
5. 「複数のデータを可視化するためのデータ可視化 API」を選択します。
6. [タイプ] を [データ構成] に設定します。
7. 要求フィールドに JSON を入力します。
   この手順の最後にある例を参照してください。
8. このデータリソースを使用する各データ可視化で、次のアクションを実行します。
   1. [データの可視化] を選択します。
   2. 構成パネルを開きます。
   3. [ データを手動で定義] をオンにします。
   4. データバインディングを使用して、スクリプトを [データ] フィールドにバインドします。

同じデータソースを使用した 3 つの単一スコア可視化のデータリソース

この例では、3 つのデータ可視化コンポーネントを含む UIB ページから開始します。これらのコンポーネントはすべて単一スコアの可視化タイプであり、すべて同じデータソースを使用します。

手順 6 の一般的な手順に従います。これで、[ダッシュボード] ページに複数のデータを可視化するためのデータ可視化 API ができました。

次に、次のように要求の JSON を記述します。

[
    {
        "details": {
            "visualizationId": "vis_1",
            "followFilter": true
        },
        "configurations": {
            "dataConfigurations": [
                {
                    "sourceType": "table",
                    "dataCategory": "simple",
                    "order": 0,
                    "tableOrViewName": "incident",
                    "aggregateFunction": "COUNT"
                }
            ]
        }
    },
    {
        "details": {
            "visualizationId": "vis_2",
            "followFilter": true
        },
        "configurations": {
            "dataConfigurations": [
                {
                    "sourceType": "table",
                    "dataCategory": "simple",
                    "order": 0,
                    "tableOrViewName": "incident",
                    "aggregateFunction": "AVG",
                    "aggregateField": "business_duration"
                }
            ]
        }
    },
    {
        "details": {
            "visualizationId": "vis_3",
            "followFilter": true
        },
        "configurations": {
            "dataConfigurations": [
                {
                    "sourceType": "table",
                    "dataCategory": "simple",
                    "order": 0,
                    "tableOrViewName": "incident",
                    "aggregateFunction": "AVG",
                    "aggregateField": "priority"
                }
            ]
        }
    }
]

要求は、データの可視化ごとに 1 つずつ、オブジェクトのアレイです。各可視化には、visualizationIdの任意の値と、可視化がページ上のフィルターコンポーネントに従うかどうかを設定するブールfollowFilterを持つdetailsプロパティがあります。この場合、3 つの可視化はすべてフィルターに従います。

各可視化には、dataConfigurations アレイのみを含む configurations プロパティもあります。すべての可視化は同じタイプの単一スコアであり、この可視化タイプでは単純な値のみが表示されるため、3 つの dataCategory プロパティはすべて「シンプル」です。同様に、すべての可視化で同じデータソースが使用されます。データソースはインシデント [incident] テーブルであるため、3 つの可視化はすべて「テーブル」の sourceType と「インシデント」の tableOrViewName を持ちます。可視化が変化する唯一の場所は、使用する集計です。ここでは、最初のものは COUNT アグリゲーションを使用し、2 番目のものは business_duration フィールドの平均集計を取得し、3 番目のものは優先度フィールドの平均を取得していることがわかります。

データリソースの最終的な構成は次のようになります

最後に、データの可視化ごとに、次のスクリプトをデータフィールドにバインドします。各可視化に指定した任意の visualizationId 値を、その可視化のスクリプトの vizId 値として使用します。

function evaluateProperty({api, helpers}) {
  const data = api.data.data_visualization_api_for_multiple_data_visualizations_1.output;
​
  if (!data) {
    return [];
  }
​
  const vizId = 'vis_1';
​
  const dataForViz = data.result.find(d => d.details.visualizationId === vizId);
​
    return dataForViz.dataResponses;
}

インジケーターの JSON を要求

インジケーターの可視化の要求は、前のテーブルの例とは異なります。以下は、オープンインシデント数インジケーターの経時的な傾向を示す時系列可視化の JSON で、優先度ブレークダウン別にグループ化されています。

[
    {
        "details": {
            "visualizationId": "vis1",
            "followFilter": true
        },
        "configurations": {
            "dataConfigurations": [
                {
                    "sortBy": "choice",
                    "sortOrder": "asc",
                    "sourceType": "indicator",
                    "dataCategory": "trend",
                    "order": 0,
                    "splitView": false,
                    "numberOfGroups": 2,
                    "uuid": {
                        "indicator": "fb007202d7130100b96d45a3ce6103b4",
                        "breakdowns": []
                    },
                    "trendBy": "anything",
                    "trendInterval": "date",
                    "groupBy": [
                        "0df47e02d7130100b96d45a3ce610399"
                    ],
                    "removeMissingIntervalData": false
                }
            ]
        }
    }
]

最初の明らかな違いは、 sourceType が「インジケーター」であり、 dataCategory が「トレンド」であることです。また、 tableOrViewName プロパティの代わりに、[オープンインシデント数] インジケーターの uuid と、そのインジケーターをフィルタリングするためのブレークダウンの uuid を保持できる空のアレイを持つ uuid オブジェクトがあることもわかります。この可視化はグループ別の値をサポートしているため、この場合は優先度ブレークダウンの uuid のみを含む groupBy アレイがあります。グループ別があるということはソートを意味し、ここでは sortBy が優先度ブレークダウンのデータタイプを反映する「選択肢」であり、 sortOrder が昇順であることがわかります。