カスタム可視化コンポーネントの作成

コンポーネントは、問合せを開始し、返されたデータをコンポーネントにレンダリングするカスタム可視化コンポーネントJavaScript APIを使用するJavaScriptファイルをコード化することで作成します。コンポーネント構成の一部としてファイルをアップロードします。また、コンポーネントの結果セットを提供するために1つ以上のEQL文を記述します。

このタスクを実行する前に、カスタム可視化コンポーネントJavaScript APIに適合するようにカスタム・コンポーネントのJavaScriptファイルをコーディングする必要があります。後述する手順でファイルをアップロードします。JavaScriptファイルのコーディングの詳細は、カスタム可視化コンポーネントJavaScript APIリファレンスを参照してください。

ビジネス・ユーザーが「検出」のプロジェクト・ページでカスタム・コンポーネントを作成すると、StudioはJavaScriptコードをロードしコンポーネントをレンダリングします。

JavaScriptコードには、2つの主要な要件があります。

  • Oracle.BDD.Portlets.Visualization.Renderers.BaseRendererを拡張する必要があります。
  • init()関数を実装する必要があります。これは、各「検出」ページのロード時に実行され、通常、結果セットを問い合せて、コンポーネント内の応答を指示します。

カスタム可視化コンポーネントの作成手順:

  1. Studioヘッダーで、「構成オプション」アイコンをクリックして、「コントロール・パネル」」 > 「カスタム可視化」の順にクリックします。
  2. +コンポーネントをクリックします。
  3. コンポーネントの名前を指定します。
    これは、「検出」ページの「コンポーネント」メニューに表示されるコンポーネントの表示名です。
  4. オプションで、「参照」をクリックしてコンポーネントのアイコン・イメージを探し、次に「アップロード」「OK」をクリックします。
    これは、「検出」ページの「コンポーネント」メニューに表示されるコンポーネントのアイコン・イメージです。
  5. 「JavaScriptファイル」で、「参照」をクリックして、カスタム可視化コンポーネントを実装するJavaScriptファイルを探し、「開く」をクリックします。
  6. 「レンダラ・クラス」に、コンポーネントをレンダリングするJavaScriptクラスの完全修飾名を指定します。
    たとえば、次のJavaScriptスニペットでは、レンダラ・クラスの名前はOracle.BDD.Portlets.Visualization.Renderers.DonutPieChartです。
    Oracle.BDD.Portlets.Visualization.Renderers.DonutPieChart = Oracle.BDD.Portlets.Visualization.Renderers.BaseRenderer.extend({
    
        init: function() {
                    
            /**
             * Get the queryConfig for the initial query
             */
            var queryConfig = this.getQueryConfig("eql");
    ...
  7. 次のいずれかの「ソート・タイプ」を選択します。
    • なし - ビジネス・ユーザーがコンポーネントに設定するために使用可能なソート・オプションはありません。
    • 定義済 - EQL文のトークンの置換によって、コンポーネントのソート・オプションが定義されます。ビジネス・ユーザーは、昇順または降順のいずれかで、トークン値順にソートします。
    • ディメンションごと - ディメンションとして定義された任意のトークンのために使用可能なソート・オプションがあります。
  8. 必要に応じて、「拡張オプション」を展開し、次を指定します。
    • CSS - 可視化に固有のCSSを指定します。CSSは可視化のDOMコンテナにスコープ指定されていることに注意してください。
    • 外部CSS - 外部CSSファイルへのURLのリストを指定します。各行にURLを1つずつ指定します。
    • 外部JavaScript - 外部JavaScriptファイルへのURLのリストを指定します。各行にURLを1つずつ指定します。これらのJavaScriptファイルは、JavaScriptファイルをサポートするサード・パーティ・プラグインなどの追加リソースを提供する場合があります。
    次に例を示します。
    https://cdnjs.cloudflare.com/ajax/libs/EventEmitter/4.2.11/EventEmitter.min.js
    https://cdnjs.cloudflare.com/ajax/libs/UAParser.js/0.7.9/ua-parser.min.js
  9. 「次」をクリックします。
  10. 「EQL問合せ名」に、JavaScript API関数getQueryConfigで使用されるEQL問合せの名前を指定します。
    たとえば、Javascriptファイルに次が含まれているとします。
    var queryConfig = this.getQueryConfig("eql");
    
    ...
    この場合、指定するEQL問合せの名前は、eqlです。
  11. テキスト・ボックス内のコンポーネントに対するEQL問合せを指定します。
    例:
    エディタにEQL文の例が示されています。

    EQL文の記述の詳細は、EQLリファレンスを参照してください。
  12. オプションで、「+」をクリックし、テキスト・ボックスで新規名およびEQL問合せを指定することで、EQL問合せを追加できます。
    問合せを追加するごとに、コンポーネントで使用される追加の結果セットが生成されます。
  13. 「トークンの検出」をクリックします。

    StudioがEQL問合せのトークンを調査し、トークンの使用方法の構文に基づいて、「属性」「ビュー」「データ」および「ソート」カテゴリにトークンが追加されます。たとえば、FROM句のトークンは、「ビュー」に表示されます。WHERE句のトークンは、「データ」に表示されます。

  14. トークンのいずれかが誤ってカテゴリ分けされている場合、そのトークンをクリックして、正しい「属性」「ビュー」「データ」または「ソート」カテゴリにドラッグ・アンド・ドロップします。
  15. 各トークン名をクリックし、コンポーネントでのトークンの使用方法の詳細を指定します。
    この手順では、ビジネス・ユーザーが「検出」ページのトークン値をどのように操作するかを設定します。トークンがメトリックまたはディメンションであるかどうか、その表示名、そのデータ・ビュー、そのデータ型および集計タイプを指定します。
    たとえば、次に示す設定では、metric_1トークンが構成されています。
    表示名およぼデータ型が構成されている単一のメトリックを示しています。

  16. 「保存」をクリックします。
新規コンポーネントは、「検出」ページの「コンポーネントの追加」メニューの下部で使用可能です。たとえば、次に示すのは、この手順で使用されるドーナツ型円グラフの例です。
ドーナツ型円グラフの可視化が新規追加された「コンポーネントの追加」メニューを示しています。

このコンポーネントは、公開されるまで、ビジネス・ユーザーが使用することはできません。

公開する前に、ビジネス・ユーザーが行うようにコンポーネントを操作し、必要に応じてJavaScriptまたは他の構成を調整してテストし、コンポーネントの動作を変更する必要があります。コンポーネントが正しく動作するようになったら、他のStudioユーザーが使用できるように公開します。