JETチャートを各種レポートに組み込む

Oracle APEXに含まれていないOracle JETのチャートを、クラシック・レポート、対話モード・レポート、対話グリッドおよびカードに組み込んでみます。

JET Picto Chartをサンプルに使用します。APEXアプリケーションは、こちらの記事で作成したJET without Knockoutのアプリケーションに、それぞれのレポートのページを追加します。

最初にクラシック・レポートのページを作成します。

JET Picto Chartを組み込むページには、ページ・プロパティに以下を設定します。

JavaScriptのファイルURLとして以下を設定します。

[require jet]

JavaScriptのページ・ロード時に実行に以下を設定します。

require(["ojs/ojpictochart"], function() {});

CSSのファイルURLに以下を設定します。

#JET_CSS_DIRECTORY#redwood/oj-redwood-notag-min.css

CSSのインラインに以下を設定します。

.oj-dvt-datatip-value {

    display: none;

}

クラシック・レポートのソースのSQL問合せとして、以下のSELECT文を記述します。列TEMPERATURESにJET Picto Chartのitemsに与えるJSON形式のデータが返されます。

	select
	c.city_name
	,t.month
	,hmt_util.generate_temperatures_by_month(c.id, t.month) temperatures
	from hmt_cities c join
	(
	select city_id, to_char(date_rec,'YYYY-MM') month
	from hmt_city_temperatures
	group by city_id, to_char(date_rec,'YYYY-MM')
	) t
	on c.id = t.city_id

view raw report-source-with-jet.sql hosted with ❤ by GitHub

列TEMPERATURESのタイプはプレーン・テキスト、列の書式のHTML式として以下を記述します。

	<oj-picto-chart
	items="#TEMPERATURES#"
	layout="horizontal"
	row-height="20"
	column-count="7">
	<template slot="itemTemplate" data-oj-as="item">
	<oj-picto-chart-item
	color="[[item.data.color]]"
	name="[[item.data.name]]"
	shape="[[item.data.shape]]">
	</oj-picto-chart-item>
	</template>
	</oj-picto-chart>

view raw html-expression-for-picto-chart.html hosted with ❤ by GitHub

クラシック・レポートの属性を開き、ページ区切りの部分ページ・リフレッシュをオフにします。クラシック・レポートにJETチャートを表示する場合、この設定は必須です。

以上で、クラシック・レポートにJETチャートを表示することができます。

続いて対話モード・レポートのページを作成します。

ソースのSQL問合せはクラシック・レポートと同じです。

列TEMPERATURESのタイプと列の書式のHTML式も、クラシック・レポートと同じです。

対話モード・レポートでは、属性のパフォーマンスの遅延ロードをオフにします。JETチャートの描画は非同期に行われるため、遅延ロードがオンだとJETチャートが表示されません。

しかし、対話モード・レポートで遅延ロードをオフにすることで抑止される処理はレポートの初回表示時のみです。ページ送りによるレポートの描画は必ず遅延ロードが適用されます。結果として、ページ送りをしたときはJETチャートが表示されません。

対話モード・レポートのリフレッシュ後に、ページのリロードを実行することが、ワークアラウンドのひとつです。

対話モード・レポートに動的アクションを作成します。

タイミングのイベントにリフレッシュ後を選択します。

TRUEアクションとしてJavaScriptコードの実行を選択し、設定のコードに以下を記述します。

location.reload(false);

以上で、対話モード・レポートでJETチャートが表示されるようになります。

JETチャートが非同期で表示される点については、そのJETチャートをラップするWebコンポーネントを作成することにより対応可能です。Oracle CorporationにてAPEXを開発しているRonny Weißさんがドイツで開かれたカンファレンスAPEXConnect 2023にて、その実装を紹介されています。この実装については、また別の機会にまとめたいと思います。

対話グリッドではクラシック・レポートや対話モード・レポートとは異なり、遅延ロードの設定に関わらずJETチャートは表示されます。

対話グリッドのソースのSQL問合せは以下になります。

チャートのデータとなる列とチャートを表示する列を別にする必要があるため、これまでのレポートのソースSQLに列CHARTを追加しています。

	select
	c.city_name
	,t.month
	,hmt_util.generate_temperatures_by_month(c.id, t.month) temperatures
	,null as chart
	from hmt_cities c join
	(
	select city_id, to_char(date_rec,'YYYY-MM') month
	from hmt_city_temperatures
	group by city_id, to_char(date_rec,'YYYY-MM')
	) t
	on c.id = t.city_id

view raw grid-source-with-jet.sql hosted with ❤ by GitHub

列TEMPERATURESの属性のタイプは非表示に変更します。

列CHARTの識別のタイプをHTML式に変更し、ヘッダーは（非表示にした列TEMPERATURESの代わりに）Temperatures、設定のHTML式として以下を記述します。

	<oj-picto-chart
	items="&TEMPERATURES."
	layout="horizontal"
	row-height="20"
	column-count="7">
	<template slot="itemTemplate" data-oj-as="item">
	<oj-picto-chart-item
	color="[[item.data.color]]"
	name="[[item.data.name]]"
	shape="[[item.data.shape]]">
	</oj-picto-chart-item>
	</template>
	</oj-picto-chart>

view raw html-expression-for-picto-chart-gird.html hosted with ❤ by GitHub

置換文字列として#TEMPERATURES#の代わりに&TEMPERATURES.を使います。

以上で、対話グリッドでJETチャートが表示されるようになります。

最後に、カード・リージョンでJETチャートを表示します。

カード・リージョンのソースのSQL問合せは、クラシック・レポートおよび対話モード・レポートと同じです。

カードの属性を開きます。

タイトルの列としてCITY_NAME、サブタイトルの列としてMONTHを選択します。本体の拡張フォーマットをオンに変更し、HTML式に対話グリッドで使用した式を記述します。

カード・リージョンも対話グリッドと同様に、遅延ロードの設定に関わらずJETチャートは表示されます。

各種レポートやカード・リージョンへのJETチャートの組み込みについての説明は以上です。

今回作成したレポートやカードのページは、APEXアプリケーションJET with Knockoutに追加しています。
https://github.com/ujnak/apexapps/blob/master/exports/jet-without-knockout.zip

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

完