前回作成してみたワクチン接種状況ダッシュボードですが、同じものを作るだけであれば、あまり意味がありません。せっかく手元にデータを持ってきたのですから、少々活用してみました。
ワクチン接種数の７日間移動平均をグラフに追加する
接種数日次推移のグラフに７日間の接種数の移動平均を表示させてみます。
リージョンの接種数日次推移を選択し、Attributesのチャートのタイプを棒から組合せに変更します。移動平均は棒ではなく、折れ線で表示させます。
select
count_date,
avg(count) over (order by count_date asc
range between interval '6' day preceding and current row
) count
from (
select
count_date,
sum(count) count
from covid19_vaccination_results
where status = 2
and gender in (select column_value from apex_string.split(:P1_GENDER, ':'))
and age in (select column_value from apex_string.split(:P1_AGE, ':'))
and prefecture in (select column_value from apex_string.split(:P1_PREFECTURE, ':'))
group by count_date
)
元々の接種数の検索結果にSQLのWINDOW関数を適用することで、移動平均を算出しています。
SQLのWINDOW関数の結果をすぐにチャートに表示できるのは便利、と感じるか、SQLで書かなければいけないのか？と感じるかで、Oracle APEXが使えるツールと感じるかどうかの分かれ目になると思います。SQL自体はOracle APEXを使うかどうか、さらにはOracle Databaseを使うかどうかにも関係なく役立てることができる知識なので、難しくても学ぶ価値があります。
送信するページ・アイテムとしてP1_GENDER、P1_AGE、P1_PREFECTUREを指定します。
列のマッピングとして、ラベルにCOUNT_DATE、値にCOUNTを指定します。外観の積上げカテゴリに移動平均2を入力します。移動平均は積み上げ対象から外したいので、単独となる積上げカテゴリにしています。
select
count_date,
avg(count) over (order by count_date asc
range between interval '6' day preceding and current row
) count
from (
select
count_date,
sum(count) count
from covid19_vaccination_results
where status = 1
and gender in (select column_value from apex_string.split(:P1_GENDER, ':'))
and age in (select column_value from apex_string.split(:P1_AGE, ':'))
and prefecture in (select column_value from apex_string.split(:P1_PREFECTURE, ':'))
group by count_date
)
積上げカテゴリは移動平均1に変更します。
元々あったシリーズ1回目と2回目を選択し、積上げカテゴリを接種数とします。日次の接種数は積み上げの対象になります。
ページの保存と実行を行うと、接種数日次推移のチャートに、7日間の移動平均を表す折れ線グラフが追加されていることが確認できます。
カラムの値に依存してセルの背景色を変更する
元のダッシュボードは接種率に応じて連続的に背景色を変更しています。Oracle APEXで、それを簡単に実装する方法は見つけることはできませんでした。
その代わりに、段階的に背景色を変更してみます。それぞれの背景色を設定するCSSクラスを定義します。これはページのプロパティのCSS、インラインに記載します。CSSクラスは全部で11あります。
.bgdolor-level-100 {
background-color: rgb(0,255,255);
}
.bgcolor-level-90 {
background-color: rgb(25,255,255);
}
.bgcolor-level-80 {
background-color: rgb(50,255,255);
}
.bgcolor-level-70 {
background-color: rgb(75,255,255);
}
.bgcolor-level-60 {
background-color: rgb(100,255,255);
}
.bgcolor-level-50 {
background-color: rgb(125, 185, 185);
}
.bgcolor-level-40 {
background-color: rgb(150,255,255);
}
.bgcolor-level-30 {
background-color: rgb(175,255,255);
}
.bgcolor-level-20 {
background-color: rgb(200,255,255);
}
.bgcolor-level-10 {
background-color: rgb(225,255,255);
}
.bgcolor-level-00 {
background-color: rgb(255,255,255);
}
with v_first as (
select
prefecture,
sum(count) count
from covid19_vaccination_results
where status = 1
and gender in (select column_value from apex_string.split(:P1_GENDER, ':'))
and age in (select column_value from apex_string.split(:P1_AGE, ':'))
and prefecture in (select column_value from apex_string.split(:P1_PREFECTURE, ':'))
group by prefecture
),
v_second as (
select
prefecture,
sum(count) count
from covid19_vaccination_results
where status = 2
and gender in (select column_value from apex_string.split(:P1_GENDER, ':'))
and age in (select column_value from apex_string.split(:P1_AGE, ':'))
and prefecture in (select column_value from apex_string.split(:P1_PREFECTURE, ':'))
group by prefecture
),
v_total as (
select
prefecture,
prefecture_name,
sum(count) total
from covid19_vaccination_targets
where 1=1
and gender in (select column_value from apex_string.split(:P1_GENDER, ':'))
and age in (select column_value from apex_string.split(:P1_AGE, ':'))
and prefecture in (select column_value from apex_string.split(:P1_PREFECTURE, ':'))
group by prefecture, prefecture_name
)
select
f.prefecture prefecture,
t.prefecture_name prefecture_name,
t.total population,
(f.count + s.count) count_total,
f.count count_first,
(f.count / t.total) * 100 rate_first,
s.count count_second,
(s.count / t.total) * 100 rate_second,
case
when (f.count / t.total) * 100 >= 100 then
'bgcolor-level-100'
when (f.count / t.total) * 100 >= 90 then
'bgcolor-level-90'
when (f.count / t.total) * 100 >= 80 then
'bgcolor-level-80'
when (f.count / t.total) * 100 >= 70 then
'bgcolor-level-70'
when (f.count / t.total) * 100 >= 60 then
'bgcolor-level-60'
when (f.count / t.total) * 100 >= 50 then
'bgcolor-level-50'
when (f.count / t.total) * 100 >= 40 then
'bgcolor-level-40'
when (f.count / t.total) * 100 >= 30 then
'bgcolor-level-30'
when (f.count / t.total) * 100 >= 20 then
'bgcolor-level-20'
when (f.count / t.total) * 100 >= 10 then
'bgcolor-level-10'
else
'bgcolor-level-00'
end color
from v_first f
join v_second s on f.prefecture = s.prefecture
join v_total t on f.prefecture = t.prefecture
列COLORが対話グリッドに認識されるので、この列のタイプを非表示に変更します。
列COLORとして返される値を、列RATE_FIRSTにCSSクラスとして適用します。
列RATE_FIRSTを選択し、詳細のJavaScript初期化コードとして以下を記述します。
列RATE_FIRSTを選択し、詳細のJavaScript初期化コードとして以下を記述します。
function(options){
options.defaultGridColumnOptions = {
cellCssClassesColumn: 'COLOR'
};
return options;
}
対話グリッドの列のプロパティcellCssClassesColumnとしてCOLORを設定しています。これで列COLORの値が、CSSクラスとして列RATE_FIRSTに適用されます。
ページの保存と実行を行うと、1回目接種率のセルの色が異なって表示される都道府県があることが確認できます。
都道府県の概要を表示する
都道府県の選択時に全国の概要ではなく、都道府県の概要を代わりに表示させます。
リージョン全国 - 概要を重複させ、名前を都道府県概要に変更します。ソースのSQL問合せ、送信するページ・アイテムはリージョン都道府県別接種数 - 接種率よりコピーします。
ページ・アイテムP1_GENDER、P1_AGE、P1_PREFECTUREそれぞれに、アクションがリフレッシュのTrueアクションを作成します。影響を受ける要素の選択タイプとしてリージョン、リージョンとして都道府県概要を指定します。
全国が表示対象のときは全国 - 概要のリージョンだけを表示し、都道府県が選択されているときは都道府県概要のリージョンだけを表示するように設定します。
全国ボタンをクリックしたときに実行される動的アクション都道府県を全選択にTrueアクションを３つ追加します。
アクションは表示、リージョンは全国 - 概要、初期化時に実行はON。
アクションは表示、リージョンは都道府県別接種数 - 接種率、初期化時に実行はON。
アクションは非表示、リージョンは都道府県概要、初期化時に実行はON。
次に対話グリッドで都道府県の選択を行ったときに実行される動的アクションを追加します。
最初に、動的アクション都道府県選択のクライアント側の条件のタイプをJavaScript式として、以下のJavaScript式を設定します。
this.data.selectedRecords.length > 0
TrueアクションのJavaScriptコードの実行から、クライアント側の条件を外します。動的アクション自体にクライアント側の条件がついているので、Trueアクションには不要になりました。
全国のボタンをクリックしたときとは反対に、都道府県概要のリージョンだけが表示されるよう、Trueアクションを3つ作成します。
アクションは表示、リージョンは都道府県概要、初期化時に実行はOFF。
アクションは非表示、リージョンは全国 - 概要、初期化時に実行はOFF。
アクションは非表示、リージョンは都道府県別接種数 - 接種率、初期化時に実行はOFF。
この状態でページを実行してみます。全国の表示は以下のようになります。
レイアウトが崩れない様に、リージョンを追加し、全国 - 概要と都道府県概要のリージョンを作成したリージョンのサブ・リージョンにします。
リージョンの作成を行い、Content Bodyの先頭に配置します。識別のタイトルを概要レイアウトとし、タイプに静的コンテンツを選択します。外観のテンプレートとしてBlank with Attributesを選択します。
リージョン全国 - 概要および都道府県概要のレイアウトの親リージョンを概要レイアウトに変更します。
以上で全国と都道府県で選択を切り替えても、ページのレイアウトが保持されます。
都道府県概要のタイトル表示を都道府県名にする
都道府県を選択したときのレポートのタイトルが都道府県概要となっており、どの都道府県かわかりません。ここに都道府県名を表示させます。
都道府県概要のリージョンに静的IDを設定します。静的IDはpref_specificとします。
都道府県選択を行なったときに実行されるTrueアクションである、JavaScriptコードの実行のコードを以下に変更します。末尾に1行追記しリージョンのタイトルに都道府県名を設定しています。
let model = this.data.model;
let record = this.data.selectedRecords[0];
let prefcode = model.getValue(record, "PREFCODE");
$s("P1_PREFECTURE", prefcode);
document.getElementById("pref_specific_heading").textContent
= model.getValue(record, "PREFECTURE_NAME");
idがpref_sepecific_headingであるHTML要素のテキスト部分に、都道府県名を代入しています。
今回の作業は以上になります。今まので作業は、公開済みのアプリケーションのエクスポートに含まれています。
作成したアプリケーションは以下よりアクセスできます。
Oracle APEXのアプリケーションの作成の参考になれば幸いです。
完
