フロントエンド開発Blog

オレには鈍器がある

CSS Modules , ES2015 , JavaScript , Vue.js , Vuex , babel , webpack

前回に続いてYearlyコンポーネントについて解説します。

Yearly.vue以下のコンポーネント群


Yearly.vue
 KkbYearlyChart
  KkbYearlyChartCategory
  KkbYearlyChartFuufu
 KkbDataCalc
 KkbDataChart
  KkbDataChartFuufu
  KkbDataChartCategory
 KkbDataTable
 Notification
 Loading

Monthly.vueの上に年間棒グラフがくっついたような構成。Monthly.vueと同じコンポーネントは説明を割愛します。

KkbYearlyChartに関して、KkbDataChartとほぼ同じで子コンポーネントにpropsとしてStore.state.yearlyデータを渡しています。Monthlyとの違いは「グラフをクリックしたら、該当する月のデータを取得して表示する」という点だけです。これはVue.jsというよりChart.jsの使い方ですが、ハマったので解説・・例としてKkbYearlyChartCategory.vueを見てみます。

KkbYearlyChartCategory.vue

fillData関数以外はほかのグラフ系コンポーネントと同じなので割愛。

fillData関数の冒頭で、AJAXで取得したyearlyデータをグラフ表示用に整形しています。カテゴリー毎に月毎の支出金額を計算しています。本当ならCakePHP側で良い感じに整形したほうが楽になるんですがそこは気にせずにお願いします。

そして今回のミソ、クリックイベントです。


this.renderChart({
        labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        datasets: datasets
      }, {responsive: true, maintainAspectRatio: false, onClick: function(e){
        // グラフ内のポイントをクリックした場合の挙動
        if(this.chart.getElementsAtEvent(e).length){
          let clickedIdx = this.chart.getElementsAtEvent(e)[0]._index;
          let month = "" + (parseInt(clickedIdx, 10) + 1);
          let year  = "" + _this.$route.params.year;
          let yearmonth = year + month;

          // クリックした月のデータを取得
          _this.getMonthlyData(yearmonth);
        }
      }});

onClickというオプション項目内でthis.chart.getElementsAtEvent(e)とすると「どの月のポインタをクリックしたか」という情報が取得できます。lengthが0の時はポインタ以外をクリックしたことになります。そのthis.chart.getElementsAtEvent(e)の中に_indexというキーがあり、それが月配列のindex番号と紐づきます。その情報をもとに年月を割り出し、actionsのgetMonthlyDataをたたきます。

こうして年グラフにクリックイベントを追加することができました。知らないとはまるポイントなので、メモ。

一通りのコードは解説し終えましたのでこれにて一連のVue.js版家計簿に関する解説記事は終了となります。コード量は少なくはありませんが、個々のメソッド単位では難しいこともなく、Vuexのactions→mutations→stateの流れさえ掴めれば大きくハマることもなく開発が進められるんじゃないかと思います。

また、CSSModulesなどの便利技術との組み合わせとも親和性が高いのでVue.js、文句なしにオススメできます。

ページトップへ

関連ページ

ページトップへ