ActiveAdminのDashBoardにchartkickを表示させる方法。

きっかけ

個人で、楽器のデータベースを作ろうとしており、その際、ActiveAdminのdashbordにグラフを表示させたく、chartkickを利用して表示できないか実験してみました。

前提

・すでに、activeadminを起動できていること。
・Railsのバージョンは7以上であること。

###　手順１：gemをインストールする。
以下をGemfileに書き込んだ後、bundle install

# Gemfile
gem 'chartkick'

###　手順２:active_admin.jsにchartkickをインポートできるようにする。

// ファイル名: app/assets/javascripts/active_admin.js
//= require active_admin/base <-- これは元々書き込んである。

//↓ 以下を追加。
//= require chartkick
//= require Chart.bundle

手順３:dashboardに表示させる。

# app/admin/dashboard.rb
ActiveAdmin.register_page 'Dashboard' do
  menu priority: 1, label: proc { I18n.t('active_admin.dashboard') }

  content title: proc { I18n.t('active_admin.dashboard') } do
    div class: 'blank_slate_container', id: 'dashboard_default_message' do
      span class: 'blank_slate' do
        span I18n.t('active_admin.dashboard_welcome.welcome')
        small I18n.t('active_admin.dashboard_welcome.call_to_action')
      end
    end
    
    """
    以下参考
    """
    columns do
      column do
        panel 'グラフ' do
          para pie_chart({test: 1, test2: 2})
        end
      end
    end
  end
end

結果

できた！