如何通过Importmaps为ActiveAdmin v4添加自定义JavaScript？

ActiveAdmin v4已原生支持Import Maps，以下是通过该方式引入自定义JS（以Chartkick图表库为例）的完整步骤：

1. 配置Import Maps引入依赖 #

在项目根目录的config/importmap.rb中添加Chartkick及其依赖的映射：

pin "chartkick", to: "chartkick.js"
pin "Chart.bundle", to: "Chart.bundle.js" # Chartkick依赖的图表渲染库

执行Import Maps安装命令拉取依赖：

./bin/importmap install chartkick Chart.bundle

2. 创建ActiveAdmin自定义JS文件 #

在app/javascript/active_admin目录下创建自定义脚本文件（比如custom_charts.js），导入Chartkick并初始化：

import "chartkick"
import "Chart.bundle"

// 可选：添加自定义Chartkick配置或全局方法
document.addEventListener("DOMContentLoaded", function() {
  // 示例：给特定元素绑定图表
  const chartElement = document.getElementById("admin-dashboard-chart")
  if (chartElement) {
    new Chartkick.LineChart(chartElement, chartElement.dataset.chartData)
  }
})

3. 在ActiveAdmin中加载自定义JS #

修改config/initializers/active_admin.rb，添加自定义JS的加载配置：

ActiveAdmin.setup do |config|
  # 其他配置...
  
  config.register_javascript "active_admin/custom_charts.js"
end

4. 在ActiveAdmin页面中使用Chartkick #

在ActiveAdmin的页面（比如Dashboard或资源页面）中添加图表容器，并传入数据：

ActiveAdmin.register 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
      # 图表容器，通过data属性传递数据
      div id: "admin-dashboard-chart", data: {
        chart_data: {
          "2024-01": 100,
          "2024-02": 150,
          "2024-03": 200
        }
      }
    end
  end
end

内容的提问来源于stack exchange，提问作者thisismydesign