Plugins

Plugins

Helpers you can use to generate plugins in your pages.

To render result of helper in page, all helpers method should be imbriced in Active Admin Arbre compenent ( para or div or text_node) or active admin DSL method.

Nb: text_node don't take a block

Chart Js

Generate chart JS graphs is our pages.

line chart

# labels is a collections of graph label.
# options is a hash and contains graph #id, #width, #height
# datasets is a collection of dataset
# dataset is a objet you can use OpenStruct and attributes must be:
# - label: Label of dataset
# - data:  Collection of value. ex: [12, 124, 13, ...]

div do
  labels = %w(Janvier February March April May June July)
  options = {id: 'investChart', widht: 400}
  datasets = (0..2).map do |i|
    OpenStruct.new(label: "My #{i} dataset", data: labels.map { |e| rand(20..100)})
  end
  chart_js_line_chart(labels: labels, datasets: datasets, options: options)
end

Timeline

Integrate timeline

timeline label

timeline_label(text: I18n.l(Time.now, format: :short) , css_class: "bg-yellow")

Time

timeline_time(time: I18n.l(activity.created_at, format: :short))

Header

# href is optional. Header contain a link. Href is a location
# other_class is optional. It is a other css class to add in header

timeline_header(text: activity.description.html_safe, href: '#', other_class: 'no-border')

Body

# href is optional. Header contain a link. Href is a location
# other_class is optional. It is a other css class to add in header
# You can put in block everyone you want.

timeline_body do 
  h4 'Hello !'
  span "I'm timeline body. :-)"
end

Timeline global struture

ul class: "timeline" do
  text_node timeline_label(text: '27-Oct 15' , css_class: "bg-green")
  Activity.recent(20).map do |activity|
    li do
      i class: "fa fa-lock bg-gray"
      div class: "timeline-item" do
        text_node timeline_time(time: I18n.l(activity.created_at, format: :short))
        text_node timeline_header(text: activity.description.html_safe, href: '#')
        text_node(timeline_body { activity.description.html_safe})
      end
      # footer is optional
      div class: "timeline-footer" do
        a 'footer link', class: "btn btn-primary btn-xs"
      end
    end
  end
end