2024年8月23日金曜日

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

今までにObservable Plot、Plotly.js、billboard.jsといったD3をチャート描画に使用しているライブラリを、Oracle APEXのアプリケーションに組み込んでみました。これらのライブラリを使うとチャートを簡単に表示できますが、やはりD3でなければ表示できないチャートはあります。

今回の記事では、Oracle APEXのアプリケーションでD3を使ってチャートを描画してみます。テンプレート・コンポーネントの作成はせず（D3によるチャート描画のユースケースで、テンプレート・コンポーネントが必要なケースは無いと思います）、D3のExamplesにあるチャートをいくつか、Oracle APEXのページに実装してみます。

最初にチャート描画に使うJSONデータを保存する表を作成し、その表を元に初期のAPEXアプリケーションを作成します。

SQLワークショップのクイックSQLの以下のモデルより、表EBAJ_D3_GRAPHSを作成します。データの名前となる列NAMEと、JSON形式のデータを保持する列GRAPH_DATAを含みます。
# prefix: ebaj
d3_graphs
    name vc80 /nn
    graph_data json

レビューおよび実行をクリックします。


表EBAJ_D3_GRAPHSを作成するDDLを確認します。列GRAPH_DATAのデータ型はCLOBになっています。効率の面からいうと、JSONやBLOB型が望ましいのですが、APEXのアプリケーション作成ウィザードはデータ型がCLOBのときはタイプがテキスト領域のページ・アイテムを作成し、BLOBのときはファイル選択のページ・アイテムを作成します。今回の用途ではテキスト領域を作成して欲しいので、CLOBのまま変更しません。

スクリプト名を設定し、実行をクリックします。確認画面が表示されるので、即時実行をクリックします。


表が作成されます。続けてアプリケーションの作成をクリックします。確認画面が表示されるので、再度アプリケーションの作成をクリックします。


アプリケーション作成ウィザードが開きます。名前をIntegrating D3に変更します。デフォルトで表EBAJ_D3_GRAPHSをソースとしたフォーム付き対話モード・レポートのページが作成されます。

アプリケーションの作成をクリックします。


アプリケーションが作成されます。



D3のExamplesに含まれるHierarchical edge bundling IIのチャートを、Oracle APEXのページに実装します。

画面右上にある３点アイコンよりメニューを開き、ViewのShow filesを実行します。


Filesのパネルが開き、データファイルであるflare.jsonが含まれていることが確認できます。３点アイコンのボタンをクリックし、Downloadを実行します。


ファイルをダウンロードしたら、作成したAPEXアプリケーションを実行し対話モード・レポートのページを開きます。

作成をクリックします。


Nameにファイル名であるflare.json、Graph Dataにダウンロードしたflare.jsonの内容をコピペします。

作成をクリックします。


対話モード・レポートのページに戻ると、ORA-6502が発生しています。これは、登録したJSONデータが長すぎて対話モード・レポートの１行に表示できる文字数の制限（32k）を超えたために発生しています。

今回はエラーを回避できれば良いので、アクションの列を開き、Graph Dataを表示対象の列から外します。


flare.jsonが登録されていることが確認できます。


チャートのデータを保存できたので、これからチャートを実装します。

空白のページを作成します。名前はHierarchical edge bundling IIとします。


HTMLヘッダーに以下のimportmapを記述します。
<script type="importmap">
    {
        "imports": {
            "d3": "https://cdn.jsdelivr.net/npm/d3/+esm"
        }
    }
</script>

データベースからJSONデータを取り出す際に呼び出すAjaxコールバックを作成します。

識別の名前はGET_DATA、タイプはコードの実行です。ソースのPL/SQLコードとして以下を記述します。



D3のチャートを描画するリージョンを作成します。

識別の名前はD3、タイプに静的コンテンツとします。ソースのHTMLコードに以下を記述します。ほとんどD3のExamplesそのままですが、書式を素のJavaScriptで動作するように若干の修正を加えています。



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


作成したページをコピーし、Force-directed graphを実装してみます。

ダウンロードしてデータベースに取り込むファイルはmiserable.jsonです。


静的コンテンツのリージョンのHTMLコードとして、以下を記述します。invalidationの呼び出しをコメントアウトしたくらいで、ほとんどコードは改変していません。


ページを実行すると以下のように表示されます。


同様にページをコピーしWorld tourを実装してみます。

ダウンロードしてデータベースの取り込むファイルはcountries-110m.jsonです。


World tourでtopojsonのクライアント・ライブラリを使用しています。そのため、importmapを以下に変更します。
<script type="importmap">
    {
        "imports": {
            "d3": "https://cdn.jsdelivr.net/npm/d3/+esm",
            "topojson-client": "https://cdn.jsdelivr.net/npm/topojson-client/+esm"
        }
    }
</script>
フォーカスが当たっている国の名前を表示するページ・アイテムとして、P6_NAMEを作成しています。


静的コンテンツのリージョンのHTMLコードとして、以下を記述します。countries-110m.jsonをデータベースから読み込むコードや、canvasのコードをdiv要素（myChart）の子要素となるように、コードを追加しています。



ページを実行すると以下のように表示されます。


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

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

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

完
投稿者 時刻:
ラベル: ,