2024年8月20日火曜日

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

Chartist.jsを、Oracle APEXのアプリケーションに組み込んでみます。使用するChartist.jsのバージョンは、ESモジュールとして書き直されたv1系列を使用します。

Oracle JETやその他のチャート描画ライブラリの組み込み作業で表示したチャートと、同じチャートを表示してみます。カスタム要素は作成せず、スクリプトはテンプレートに直接埋め込みます。また、importmapは定義せず、ESモジュールのURLはスクリプト内に記述します。


直接Chartist.jsで描画


  
チャートに描画するデータを保持するページ・アイテムとしてP1_GROUPS、P1_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

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

<div id="myChart"></div>
<script type="module">
import { BarChart } from 'https://cdn.jsdelivr.net/npm/chartist@1.3.0/+esm';
const div = document.createElement("div");
div.classList.add("ct-chart");
div.classList.add("ct-major-tenth");
document.getElementById("myChart").appendChild(div);
const groups = apex.item("P1_GROUPS").getValue();
const value = apex.item("P1_VALUE").getValue();
let data = {
labels: JSON.parse(groups),
series: [
JSON.parse(value)
]
};
let config = {
horizontalBars: true,
axisY: {
offset: 70
}
};
new BarChart(div, data, config);
</script>
view raw chartist-js-embed.js hosted with ❤ by GitHub

Chartist.jsでは、チャートの見かけはCSSで定義します。

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

https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.css

インラインに以下を記述し、バー（storke）の色と太さ（stroke-width）を指定します。 
.ct-series-a .ct-bar {
  /* Colour of your bars */
  stroke: #309fdb;
  /* The width of your bars */
  stroke-width: 20px;
}

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



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



対話モード・レポートのソースの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を選択します。識別のタイプはプレーン・テキストです。

列の書式のHTML式として以下を記述します。

<div id="#APEX$DOM_ID#" class="w400"></div>
<script type="module">
import { BarChart } from 'https://cdn.jsdelivr.net/npm/chartist@1.3.0/+esm';
const div = document.createElement("div");
div.classList.add("ct-chart");
div.classList.add("ct-major-tenth");
document.getElementById('#APEX$DOM_ID#').appendChild(div);
const groups = '#GROUPS!RAW#';
const value = '#VALUE!RAW#';
let data = {
labels: JSON.parse(groups),
series: [
JSON.parse(value)
]
};
let config = {
horizontalBars: true,
axisY: {
offset: 70
}
};
new BarChart(div, data, config);
</script>
view raw chartist-js-ir-embed.html hosted with ❤ by GitHub


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




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




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

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

<div id="#APEX$DOM_ID#" class="#CSS_CLASSES#"></div>
<script type="module">
import { BarChart } from 'https://cdn.jsdelivr.net/npm/chartist@1.3.0/+esm';
const div = document.createElement("div");
const chartCss = '#CHART_CSS#';
if ( chartCss ) {
const cssArr = chartCss.split(/\s+/);
cssArr.forEach( (cls) => {
if (cls) {
div.classList.add(cls.trim());
}
})
};
document.getElementById('#APEX$DOM_ID#').appendChild(div);
const groups = '#GROUPS#';
const value = '#VALUE#';
let data = {
labels: JSON.parse(groups),
series: [
JSON.parse(value)
]
};
let config = {
horizontalBars: true,
axisY: {
offset: 70
}
};
if ('#ORIENTATION#' === 'false') {
config.horizontalBars = false;
};
new BarChart(div, data, config);
</script>
view raw part-tc-chartist-js.html hosted with ❤ by GitHub

カスタム属性としてCSS Classes、Groups、Value、Orientation、Chart Cssを作成しています。GroupsとValueのタイプはセッション・ステート値、Chart Cssはテキストです。


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


ロードするファイルURLのカスケード・スタイルシートに以下を記述します。

https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.css


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

対話モード・レポートにChartist.jsのテンプレート・コンポーネントを実装します。

列CHARTを選択し、識別のタイプをChartist.js Bar Chartとします。

CSS Classesにチャートの幅となるw400を設定します。GroupsとしてGROUPS、ValueとしてVALUE、Orientationとしてhorizontalを設定します。Chart CSSにはct-chart ct-major-tenthを設定します。


チャートの見かけを調整するため、ページ・プロパティのCSSのインラインに以下を記述します。
.ct-series-a .ct-bar {
  /* Colour of your bars */
  stroke: #309fdb;
  /* The width of your bars */
  stroke-width: 15px;
}

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


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

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

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

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