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

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

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

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

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

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

カスタム視覚化コンポーネントを作成するには:

Studioヘッダーで、「構成オプション」アイコンをクリックし、「コントロール・パネル」 > 「カスタム視覚化」を選択します。
「+コンポーネント」をクリックします。
コンポーネントの名前を指定します。
これは、Discoverページのコンポーネント・メニューに表示されるコンポーネントの表示名です。
オプションで、「参照」をクリックしてコンポーネントのアイコン・イメージを検索し、「アップロード」およびOkをクリックします。
これは、Discoverページのコンポーネント・メニューに表示されるコンポーネントのアイコン・イメージです。
「JavaScriptファイル」で、「参照」をクリックして、カスタム視覚化コンポーネントを実装するJavaScriptファイルを探し、「開く」をクリックします。

「レンダラ・クラス」で、コンポーネントをレンダリングする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");
...

次のいずれかのソート・タイプを選択します:
- 「なし」 - ビジネス・ユーザーがコンポーネントで構成に使用できるソート・オプションがないことを指定します。
- 「定義済」 - コンポーネントのソート・オプションがEQL文のトークン置換で定義されるように指定します。次にビジネス・ユーザーは、トークンの値で昇順または降順にソートします。
- 「ディメンションごと」 - ディメンションとして定義されたトークンでソート・オプションを使用できることを指定します。
オプションで、詳細オプションを展開し、次を指定します:
- CSS -ビジュアライゼーション固有のCSSを指定します。 CSSは、ビジュアライゼーションDOMコンテナにスコープ指定されることにも注意してください。
- 「外部CSS」 - 外部CSSファイルへのURLのリストを指定します。各URLは改行で区切る必要があります。
- 「外部JavaScript」 - 外部JavaScriptファイルのURLのリストを指定します。各URLは改行で区切る必要があります。これらの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
```
「次へ」をクリックします。
「EQL問合せ名」で、JavaScript API関数getQueryConfigで使用するEQL問合せの名前を指定します。
たとえば、Javascriptファイルに次の内容が含まれているとします:
```
var queryConfig = this.getQueryConfig("eql");

...
```
指定するEQL問合せ名はeqlです。
テキスト・ボックスに、コンポーネントに対するEQL問合せを指定します。
次に例を示します。:

EQL文の記述の詳細は、「EQLリファレンス」を参照してください。
必要に応じて、+をクリックし、テキスト・ボックスで新規の名前とEQL問合せを指定して、コンポーネントにEQL問合せを追加できます。
追加した各問合せにより、使用するコンポーネントに対して追加の結果セットが生成されます。
「トークンの検出」をクリックします。

StudioではEQL問合せのトークンが調査され、トークンの使用方法の構文に基づいて、トークンが「属性」、「ビュー」、「データ」および「ソート」のカテゴリに追加されます。たとえば、FROM句のトークンは「ビュー」内にあります。 WHERE句内のトークンは、「データ」内に表示されます。
トークンのいずれかが正しく分類されていない場合は、トークンをクリックして、適切な「属性」、「ビュー」、「データ」または「ソート」カテゴリにドラッグ・アンド・ドロップします。
各トークン名をクリックし、コンポーネントでのトークンの使用方法の詳細を指定します。
このステップでは、ビジネス・ユーザーがDiscoverページのトークン値をどのように操作するかを構成します。トークンがメトリックかディメンションか、表示名、データ・ビュー、データ型および集計タイプかを指定します。
たとえば、ここで示す設定ではmetric_1トークンが構成されます:
「保存」をクリックします。

新しいコンポーネントは、Discoverページの「コンポーネントの追加」メニューの下部にあります。たとえば、次の手順で使用するDonut円グラフの例を参照してください:

ドーナツ円グラフのビジュアライゼーションの新規追加を含むコンポーネントの追加メニューを表示しています。

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

コンポーネントの動作の変更が必要な場合は、公開前に、コンポーネントをビジネス・ユーザーとして使用し、JavaScriptやその他の構成を調整してコンポーネントをテストする必要があります。コンポーネントが正常に機能したら、他のStudioユーザーが使用できるように公開します。