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

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

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

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

#####◯受付日から月を普通に抽出すると１月からになってしまう通常パターン
（試行錯誤したが実現できず。。）

#####◯今回の完成形！！

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

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

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

##①日付フィールド「受付日」を設定する
受付を行った日付を入力す為の日付フィールド設定する。

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

DATE_FORMAT(受付日, "YYYY", "Asia/Tokyo")

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

DATE_FORMAT(受付日, "MM", "Asia/Tokyo")

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

IF( 受付日 = "" , "" ,IF ( 月 <= 3 ,  年 - 1 , 年))

##⑤グラフの並び替え用のドロップダウン「月【ドロップダウン】」を設定する
ここがポイントです！
こちらのドロップダウンフィールドはグラフの並び順を４月から順番にする為のフィールドです。
したがって、必ず一番上に４月がくるように設定をします！

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

JSEdit for kintoneプラグインをアプリに適用し、以下のコードを貼り付けます。

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;
    });
  })();

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

以上が設定手順になります！
一覧画面に戻り、⑦で作成したグラフを表示してみると。。

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

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

以上、マッスルIT企業ノベルワークスのヨシキーでした！