2024年8月21日水曜日

Plotly.jsをOracle APEXのアプリケーションに組み込む

Plotly.jsをOracle APEXのアプリケーションに組み込んでみます。

Oracle JETやその他のチャート描画ライブラリの組み込み作業で表示したチャートと、同じチャートを表示してみます。


直接Plotly.jsで描画



Plotly.jsのGetting started in JavaScriptのページを参照して、実装を進めます。バー・チャートの表示はこちらのページにある例を元にしています。バー・チャートのリファレンスはこちらです。

ページ・プロパティJavaScriptファイルURLに以下を記述します。

https://cdn.plot.ly/plotly-2.34.0.min.js


静的コンテンツのリージョンの名前Plotly.jsとし、ソースHTMLコードに以下を記述します。

<div id="myChart" class="w600 h400"></div>


チャートに描画するデータを保持するページ・アイテムとしてP1_GROUPSP1_VALUEを作成します。タイプ非表示です。

ページ・アイテムP1_GROUPS計算を作成し、ページの描画前にデータを設定します。計算タイプとしてSQL問合せ(単一の値を返す)を選択し、SQL問合せに以下を記述します。
select
    json_arrayagg(
        ename
    order by empno asc )
from emp where deptno = 10

ページ・アイテムP1_VALUEにも計算を作成し、ページ描画前に値を設定します。SQL問合せに以下を記述します。
select
    json_arrayagg(
        sal
    order by empno asc )
from emp where deptno = 10

チャートを描画するJavaScriptのコードを、ページ・プロパティページ・ロード時に実行に記述します。



以上で実装は完了です。ページを実行すると以下のように表示されます。



テンプレート・コンポーネントの作成



Plotly.jsのバー・チャートを描画するテンプレート・コンポーネントについて、設定内容を説明します。

テンプレート・コンポーネントの名前Plotly.js Bar Chartとしました。テンプレート部分には以下を記述しています。



カスタム属性としてCSS ClassesGroupsValueColorOrientationWidthHeightを作成しています。GroupsValueタイプセッション・ステート値ColorテキストWidthHeightは両方とも整数です。


チャートの向きの指定であるOrientation静的LOVは、horizontalの戻り値としてhverticalの戻り値としてvを設定します。


ディレクトリjsファイル名script.jsとして、カスタム要素a-plotly-js-bar-chartの実装を記述します。


ロードするファイルURLJavaScriptに以下を記述します。

https://cdn.plot.ly/plotly-2.34.0.min.js
#PLUGIN_FILES#js/script#MIN#.js


以上でテンプレート・コンポーネントは完成です。

リージョンにPlotly.jsのテンプレート・コンポーネントを実装します。

ページ・アイテムP2_GROUPSP2_VALUEは、最初に作成したP1_GROUPSP1_VALUEと同じ設定で作成します。

識別名前Plotly.jsタイプPlotly.js Bar Chartとします。


リージョンの属性を開き、GroupsとしてP2_GROUPSValueとしてP2_VALUEColorとして#309fdbOrientationとしてhorizontalを設定します。


以上で実装は完了です。ページを実行すると以下のように表示されます。



対話モード・レポートへの組み込み



対話モード・レポートソースSQL問合せとして以下を記述します。
select
    dname,
    json_arrayagg(
        ename
    order by empno asc ) groups,
    json_arrayagg(
        sal
    order by empno asc ) value,
    '' chart
from emp_dept_v group by dname

対話モード・レポートの列CHARTを選択し、識別タイプPlotly.js Bar Chartに変更します。

設定CSS Classesw130GroupsGROUPSValueVALUEColor#309fdbOrientationhorizontalを設定します。Width400Height300を設定します。


以上で実装は完了です。ページを実行すると以下のように表示されます。


今回の記事は以上になります。

作成したAPEXアプリケーションのエクスポートを以下に置きました。
https://github.com/ujnak/apexapps/blob/master/exports/integrating-plotly-js.zip

Oracle APEXのアプリケーション作成の参考になれば幸いです。