【kintone奮闘記 グラフソート編】グラフの並び順を４月から順番に表示させる（年度単位で集計ができる！）


#目次
1 - やりたいこと！
2 - ミッション！
3 - 設定手順

#やりたいこと！
kintoneのグラフ機能を使って、月別、尚且年度別に受付件数を見える化し生産性アップに繋げたい！ と思いグラフを設定してみたが、並び順が1月からになってしまう。。
年度別に集計しているので、なんだか不自然なのでどうにか年度初めの４月から順番に表示したい。

#ミッション！
受付管理アプリにて、受付件数の集計結果を受付月、年度別にグラフで表示する。
▼条件！　
年度別のになる為、グラフの並び順は４月が先頭に来るようにする。


#####◯受付日から月を普通に抽出すると１月からになってしまう通常パターン
（試行錯誤したが実現できず。。）
![１月から 2021-05-18 7.18.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1256101/0cd338e9-cb98-6cda-ca93-70359755f14d.png)



#####◯今回の完成形！！
![スクリーンショット 2021-05-18 7.25.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1256101/cea5d1af-2561-8e0a-fa66-5ce55dc2ab5f.png)

#設定手順
受付日の他に４つフィールドを設置して、コードをペタッ！終わり！

①日付フィールド「受付日」を設定する
②「受付日」から年を抽出する → 計算フィールド「年」を設定する
③「受付日」から月を抽出する → 計算フィールド「月」を設定する
④「年」と「月」から年度を抽出する → 計算フィールド「受付年度」を設定する
⑤グラフの並び替え用のドロップダウン「月【ドロップダウン】」を設定する
⑥「受付日」から、月を算出しドロップダウンに反映（少々カスタマイズ）
⑦グラフを設定する


では、実際に設定していきましょう！↓



##①日付フィールド「受付日」を設定する
受付を行った日付を入力す為の日付フィールド設定する。
![スクリーンショット 2021-05-18 7.49.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1256101/471ef260-6bb8-f3a6-8842-6336a15ce699.png)

##②「受付日」から年を抽出する → 計算フィールド「年」を設定
計算フィールドに以下の式を設定することにより、受付日を入力した際に自動で年が入るようにする。

````
DATE_FORMAT(受付日, "YYYY", "Asia/Tokyo")
````
![スクリーンショット 2021-05-18 7.51.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1256101/4fe97f36-bc9f-5dd4-765c-c501f8929d99.png)

##③「受付日」から月を抽出する → 計算フィールド「月」を設定
計算フィールドに以下の式を設定することにより、受付日を入力した際に自動で月が入るようにする。

````
DATE_FORMAT(受付日, "MM", "Asia/Tokyo")
````
![スクリーンショット 2021-05-18 8.06.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1256101/e4a17f8c-dbbd-d921-1ae9-5ddffbc2b52e.png)

##④「年」と「月」から年度を抽出する → 計算フィールド「受付年度」を設定
②と③で作成したフィールド「年」「月」の出番が来ました！
受付をした月が4月よりも前の場合は、年にマイナス１をして正しい年度になるように調整！

````
IF( 受付日 = "" , "" ,IF ( 月 <= 3 ,  年 - 1 , 年))
````
![スクリーンショット 2021-05-18 8.09.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1256101/3f620515-3b3f-93f1-2b38-6ca3aa387e9c.png)

##⑤グラフの並び替え用のドロップダウン「月【ドロップダウン】」を設定する
ここがポイントです！
こちらのドロップダウンフィールドはグラフの並び順を４月から順番にする為のフィールドです。
したがって、必ず一番上に４月がくるように設定をします！
![スクリーンショット 2021-05-18 8.13.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1256101/1552f35f-1af2-bf33-1686-cc419f9004d5.png)

##⑥「受付日」から、月を算出しドロップダウンに反映（少々カスタマイズ）
以下のカスタマイズで指定している変数は２つ！それぞれフィールドコードを代入しています。
使われるフィールドコードに合わせて、変数の値のみ変更をしてください！
１つ目：「targetFields」
　月を算出する為のキーになる日付フィールドのフィールドコード。
２つ目：「dropdownFeild」
　算出された月を登録する為のドロップダウンフィールドのフィールドコード。
　（グラフ並び替え用フィールド）


[JSEdit for kintone](https://developer.cybozu.io/hc/ja/articles/205452613)プラグインをアプリに適用し、以下のコードを貼り付けます。

````javascript:qiita.js
// 対応イベント
// ・レコード追加画面にて保存成功後
// ・レコード編集画面にて保存成功後
// ・レコード一覧画面のインライン編集にて保存成功後
(function() {
    'use strict';
    // キーになる日付フィールドのフィールドコード
    const targetField = '受付日';
    // グラフ並び替え用のドロップダウンフィールドのフィールドコード
    const dropdownFeild = '受付月_ドロップダウン';
    // イベントをarrの配列に格納
    let arr = [
      'app.record.create.submit',
      'app.record.edit.submit',
      'app.record.index.edit.submit'
    ];
    kintone.events.on(arr, function(event) {
      // moment.jsを使用し受付日の月(month)を抽出する
      let month = moment(event.record[targetField]['value']).format('M月');
      // グラフ並び替え用のドロップダウンフィールドに値を登録
      event.record[dropdownFeild]['value'] = month;
      return event;
    });
  })();


````

##⑦グラフ設定
一覧画面からアプリ設定を開く（歯車マーク押下） → グラフタブ押下 → グラフ追加画面を開く（プラスボタン押下）
上記の手順でグラフ追加画面を表示し、以下の画像のように設定をしていきます。
ソートで指定しているフィールドは、ソート用に設定した”月【ドロップダウン】”フィールドになるので、”昇順”に設定します。

![４月から.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1256101/6ea8a655-cb02-b4ba-6e34-72bb95701a64.png)


以上が設定手順になります！
一覧画面に戻り、⑦で作成したグラフを表示してみると。。
![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f313235363130312f63656135643161662d323536312d386530612d666136362d3563653535646332616235662e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1256101/4da326b9-205b-ef90-862b-7163d707f56a.png)

見事！4月から表示させることに成功！
これで年度単位の集計ができる〜

もし、グラフの並び順に困っている方がいましたら、ぜひ使ってみ見て下さい！

以上、マッスルIT企業[ノベルワークス](https://www.novelworks.jp/)のヨシキーでした！