ローコード開発プラットフォーム(Oracle APEX)を使って家計簿?アプリを作る(その3)

本記事は「ローコード開発プラットフォーム(Oracle APEX)を使って家計簿?アプリを作る(その1)及び(その2)」(以降「その1」「その2」と表記します)の続きです。
(想定所要時間:30分)

https://qiita.com/icywhite/items/730db15fc200b8af9483

https://qiita.com/icywhite/items/3ebbbc7fac40681f6309


# 1. 「チャート」ページのカスタマイズ
「その1」で作成した「チャート」ページは 下のようなものでした。
![チャート0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409337/b114ba19-2100-ca63-eeeb-129af8ba156a.png)
それを以下のようにします。
・チャート3 および チャート4 を削除します
・「月別支出合計」を、月別に項目別の積み上げグラフにします
・「項目別支出割合」を、前月までの月平均の円グラフにし、円グラフの左上に前月までの支出月額平均を表示するようにします
![チャート.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409337/dd1877a5-db29-4ae1-caba-85ab296d86f0.png)
さらに、グラフをクリックすると「支出ファセット検索」画面に遷移するようカスタマイズしますが、それについては「その5」でご説明します。
## 1-1. 不要なチャートの削除
「ページ2: チャート」編集画面で、「チャート3」および「チャート4」を右クリックし、「削除」で削除してください。
![チャートの削除.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409337/f6411520-b5c6-4dad-2bd9-5dfc41d474d1.png)
併せてグラフのレイアウトを変更し、2つのグラフが上下に表示されるようにします。
「レイアウト」ペインの「項目別支出割合」を「月別支出合計」の右隣から下にドラッグ&ドロップで移動させます。
![チャート_レイアウト.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409337/82a1a47a-90f1-c331-5de7-c9165925fb23.png)
(お好みですが)ブレッドクラムを削除します。「ブレッドクラム」は画面の上部に「チャート」と表示されている部分です。
「ブレッドクラム」を右クリックして「削除」を選択してください。
![ブレッドクラムの削除.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409337/11ca682a-0478-86a3-92d4-947ef1eb5348.png)
## 1-2. 「月別支出合計」のカスタマイズ
「ページ2: チャート」編集画面で、
1. リージョン「月別支出合計」をクリック
2. 外観 ー> テンプレート・オプション クリック、"Body Height" を "Auto-Default" に(お好みで)

![外観_テンプレート・オプション1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409337/d0681223-78bd-7ea1-a0e8-e534b99004d1.png)
![外観_テンプレート・オプション2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409337/46dabcd5-9cb1-a399-fda0-7d0ac1644445.png)
3. 右上の"Attributes"をクリック
4. 外観 ー> 積上げ、積上げラベル を ON に
5. レイアウト ー> 高さ を 400ピクセルに(お好みで)
6. 凡例 ー> 表示 を ON に

![月別支出合計_Attributes.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409337/1631f29d-a3cc-a617-29f1-48c65e079f86.png)
7. シリーズ「シリーズ1」をクリック
8. 識別 ー> 名前 を「月別支出合計」に(お好みで)
9. ソース ー> SQL問合せ の編集

![シリーズ1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409337/5d3d7c23-6ce0-462e-897a-8b3d084ae957.png)
![月別支出合計_SQL問合せ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409337/64879e44-8800-223d-1986-2dbac0d46812.png)
````
select
    sum(金額) 合計金額,
    項目,
    to_char(年月日,'YYMM') 年月
from 支出
group by 項目, to_char(年月日,'YYMM')
````
10 列のマッピング ー> シリーズ名: 項目、ラベル: 年月、値: 合計金額
11 パフォーマンス ー> 処理する最大行数: 値を削除(値が入っている場合)
![列のマッピング.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409337/d3f90e06-62ea-7349-a3ac-05e04844ff78.png)
12. 軸 y をクリック
13. 値 ー> 書式 を 「通貨」に
![y軸.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409337/47a30d04-b47e-b851-af20-79a2446d5386.png)
保存し実行すると、以下のような積み上げ棒グラフが表示されるようになると思うのですが、いかがでしょうか。
![積み上げ棒グラフ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409337/0476e18b-2f9e-33ab-f317-8dff23ac261b.png)
## 1-3. 「項目別支出割合」のカスタマイズ
こちらはAPEXでのアプリ作成方法の説明というより、家計簿としてどのようなデータを表示するのが役に立つだろうか と私なりに考えた上で書いたSQLのサンプル という感じです。
ここまでアプリケーションを作成・カスタマイズされて来て お気づきかと思いますが、APEXは アプリケーションの見た目の部分についてはコードを書かず ほぼ設定で事足ります。しかし、どのような条件やフォーマットでデータを取り出すか という部分についてはSQLを書かなければならない場面も出てくると思います(クエリー・ビルダーである程度まで自動生成させることができるので1から書く必要はありません。が、複雑な条件などの場合はそれをさらにカスタマイズするなど 手を加える必要があると思います)。
### 1-3-1. 項目別支出割合を月平均の円グラフにする
今のままで項目別の支出割合を表示できておりますが、グラフ上にマウスを動かすと その支出項目の累計金額がされるので、それを月平均金額が表示されるようにしたいと思います。
1. 項目別支出割合 ー> シリーズ1 をクリック
2. 識別 ー> 名前 を 「項目別支出割合」に(お好みで)
3. ソース ー> SQL問合せ で SQLを編集
(当月は入れず、前月までの月平均のSQLにしています)

![項目別支出割合.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409337/e5ab7be1-dc60-be0a-6600-303cfb8bad60.png)
![項目別支出割合_SQL問合せ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409337/fc783bae-22dd-6eaa-9f91-123ffc6425de.png)
````
select "項目", sum("金額")/(select months_between(trunc(sysdate, 'MONTH'),trunc(min(年月日), 'MONTH')) from "支出") value
from "支出"
where "金額" is not null and to_char("年月日",'YYMM') < to_char(sysdate,'YYMM')
group by "項目"
order by 2 desc
````
保存し実行すると、以下のような円グラフが表示されると思うのですが、いかがでしょうか。見た目あまり変わらないですが、マウスポインタをグラフの上に動かすと、各項目の前月までの月平均金額が出ると思います。
![円グラフ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409337/7dc00afe-4872-054b-2fc7-83c36ad32f8c.png)
1つ手順が抜けてました。上のグラフのように右に凡例を出す場合は、積み上げ棒グラフと同様、グラフの"Attributes"の中にある「凡例」を ON にしてください。
### 1-3-2. 支出月額平均の表示
「項目別支出割合」のグラフの上に 支出月額平均を表示させようと思います。
「項目別支出割合」を右クリック ー> アイテムの作成 を選択
![アイテムの作成1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409337/d019e642-49e8-e507-fe95-1259707dd812.png)
1. 作成された "P1_NEW" をクリック
2. 右の「アイテム」ペイン 名前 を "P2_AVE" に(お好みで)
3. タイプ を「表示のみ」に
4. ラベル を「支出月額平均」に
5. テンプレート を "Optional"に(お好みで)
6. ソース ー> タイプ を「SQL問合せ(単一の値を返す)」に
7. SQL問合せ でSQL記述

![アイテムの作成2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409337/c83c7013-51d1-618f-4b50-cec8328d8eb0.png)
![P2_AVE_SQL問合せ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409337/9efe02b8-912d-4d1d-dd6c-ba2ccf142b2b.png)
````
select to_char(sum("金額") / months_between(trunc(sysdate,'MONTH'), trunc(min("年月日"))),'FML999G999G999G999G990') value from "支出"
where "金額" is not NULL and "年月日" < trunc(sysdate,'MONTH')
````
保存し実行すると、下のように円グラフの上に「支出月額平均」が表示されると思います
(金額が間違っているように見えますが、これを書いているのは2022年4月なので、その時点での支出金額合計を2021年7月から前月の2022年3月までの9ヶ月で割った値が表示されています)
![支出月額平均.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409337/9d2e1414-3ad8-dd72-3174-ac6af692a1a8.png)

「その3」は以上です。次回は「ファセット検索」ページのカスタマイズです。