feat: chart examples

Author: marsz

app/helpers/admin_helper.rb

@@ -1,6 +1,10 @@
 module AdminHelper
-  def admin_widget_box(title, &block)
-    render partial: 'admin/base/widget_box', locals: { body: capture(&block), title: title }
+  def admin_widget_box(title, sizes: [], &block)
+    sizes ||= []
+    sizes[0] ||= 12
+    sizes[1] ||= 12
+    sizes[2] ||= 12
+    render partial: 'admin/base/widget_box', locals: { body: capture(&block), title: title, sizes: sizes }
   end
 
   def append_page_button(body, link, options = {})

app/helpers/charts_helper.rb

@@ -0,0 +1,7 @@
+module ChartsHelper
+  ChartsPresenter::CHART_TYPES.each do |chart_type|
+    define_method "render_#{chart_type}_chart" do |data, options = {}|
+      ChartsPresenter.new(chart_type, data, options).to_html
+    end
+  end
+end

app/presenters/charts_presenter.rb

@@ -0,0 +1,96 @@
+class ChartsPresenter
+
+  CHART_TYPES = %w[ bar bubble doughnut horizontal_bar line pie polar_area radar scatter ]
+
+  class << self
+    private
+
+    def element_id
+      @element_id ||= -1
+      @element_id += 1
+    end
+  end
+
+  # http://www.chartjs.org/docs/latest/general/
+  def initialize(type, data, options)
+    @type = type
+    @data = data
+    @options = options
+    @element_id = @options.delete(:id)     || "chart-#{self.class.send(:element_id)}"
+    @css_class  = @options.delete(:class)  || 'chart'
+    @width      = @options.delete(:width)  || '400'
+    @height     = @options.delete(:height) || '400'
+  end
+
+  def to_html
+    "#{canvas}<script>#{to_js}</script>".html_safe
+  end
+
+  private
+
+  def to_js
+    <<-END.squish.html_safe
+    (function() {
+          var initChart = function() {
+            var ctx = document.getElementById(#{@element_id.to_json});
+            var chart = new Chart(ctx, {
+              type:    "#{camel_case(@type)}",
+              data:    #{to_javascript_string @data},
+              options: #{to_javascript_string @options}
+            });
+          };
+          if (typeof Chart !== "undefined" && Chart !== null) {
+            initChart();
+          }
+          else {
+            /* W3C standard */
+            if (window.addEventListener) {
+              window.addEventListener("load", initChart, false);
+            }
+            /* IE */
+            else if (window.attachEvent) {
+              window.attachEvent("onload", initChart);
+            }
+          }
+        })();
+    END
+  end
+
+  def canvas
+    "<canvas id=\"#{@element_id}\" class=\"#{@css_class}\" width=\"#{@width}\" height=\"#{@height}\" style=\"width: #{@width}; height: #{@height}\"></canvas>"
+  end
+
+  def camel_case(str)
+    str = str.to_s.camelize
+    str[0] = str[0].downcase
+    str
+  end
+
+  def to_javascript_string(element)
+    case element
+    when Hash
+      hash_elements = []
+      element.each do |key, value|
+        hash_elements << camel_case(key).to_json + ':' + to_javascript_string(value)
+      end
+      '{' + hash_elements.join(',') + '}'
+    when Array
+      array_elements = []
+      element.each do |value|
+        array_elements << to_javascript_string(value)
+      end
+      '[' + array_elements.join(',') + ']'
+    when String
+      if element.match(/^\s*function.*}\s*$/m)
+        # Raw-copy function definitions to the output without surrounding quotes.
+        element
+      else
+        element.to_json
+      end
+    when BigDecimal
+      element.to_s
+    else
+      element.to_json
+    end
+  end
+end

app/views/admin/base/_widget_box.html.slim

@@ -1,26 +1,25 @@
-.row
-  .col-md-12.col-sm-12.col-xs-12
-    .x_panel
-      .x_title
-        h2= title
-        ul.nav.navbar-right.panel_toolbox
-          li
-            a.collapse-link
-              i.fa.fa-chevron-up
-          / li.dropdown
-            a.dropdown-toggle[href="#" data-toggle="dropdown" role="button" aria-expanded="false"]
-              i.fa.fa-wrench
-            ul.dropdown-menu[role="menu"]
-              li
-                a[href="#"]
-                  | Settings 1
-              li
-                a[href="#"]
-                  | Settings 2
-          / li
-            a.close-link
-              i.fa.fa-close
-        .clearfix
-      .x_content
-        br
-        = body
+div class="col-md-#{sizes[0]} col-sm-#{sizes[1]} col-xs-#{sizes[2]}"
+  .x_panel
+    .x_title
+      h2= title
+      ul.nav.navbar-right.panel_toolbox
+        li
+          a.collapse-link
+            i.fa.fa-chevron-up
+        / li.dropdown
+          a.dropdown-toggle[href="#" data-toggle="dropdown" role="button" aria-expanded="false"]
+            i.fa.fa-wrench
+          ul.dropdown-menu[role="menu"]
+            li
+              a[href="#"]
+                | Settings 1
+            li
+              a[href="#"]
+                | Settings 2
+        / li
+          a.close-link
+            i.fa.fa-close
+      .clearfix
+    .x_content
+      br
+      = body

app/views/admin/base/examples.html.slim

@@ -18,8 +18,13 @@ h3= 'admin_form_for'
   = f.submit_cancel 'Go', cancel: root_path
 
 h3= 'admin_widget_box'
-= admin_widget_box 'Hi' do
-  = 'Aloha'
+.row
+  = admin_widget_box 'Hi', sizes: [4, 6, 12] do
+    = 'Aloha'
+  = admin_widget_box 'Hi 2', sizes: [4, 6, 12] do
+    = 'Aloha2'
+  = admin_widget_box 'Hi 3', sizes: [4, 6, 12] do
+    = 'Aloha3'
 
 h3= 'render_admin_data_table'
 = render_admin_data_table(data: [User.new, Category.new]) do |data|
@@ -32,3 +37,23 @@ h3= 'render_admin_data_table'
       tr
         td= obj.class
         td
+
+h3= 'render_line_chart'
+- options = { width: '100%', height: '100px', responsive: true }
+- labels = (4.days.ago.to_date..(Time.now.to_date)).map(&:to_s)
+- datasets = 3.times.map { |i| { label: "data-#{i+1}", data: 5.times.map { (1..100).to_a.sample }, background_color: 'rgba(0,0,0,0)', border_color: "rgba(#{100*i},#{100*i},#{100*i}, 1)" } }
+= admin_widget_box 'Line', sizes: [6] do
+  = render_line_chart({ labels: labels, datasets: datasets }, options)
+= admin_widget_box 'Radar', sizes: [6] do
+  = render_radar_chart({ labels: labels, datasets: datasets }, options)
+= admin_widget_box 'Bar', sizes: [6] do
+  - datasets = datasets.map { |d| d.merge(background_color: "##{d[:data][0]}#{d[:data][0]}#{d[:data][0]}") }
+  = render_bar_chart({ labels: labels, datasets: datasets }, options)
+= admin_widget_box 'Pie', sizes: [6] do
+  - datasets = [{ data: 5.times.map { |i| (1..100).to_a.sample }, background_color: 5.times.map { |i| "##{i*24}#{i*24}#{i*24}" } }]
+  - labels = 5.times.map { |i| "pie-#{i+1}" }
+  = render_pie_chart({ labels: labels, datasets: datasets }, options)
+= admin_widget_box 'Doughnut', sizes: [6] do
+  = render_doughnut_chart({ labels: labels, datasets: datasets }, options)
+= admin_widget_box 'Polar Area', sizes: [6] do
+  = render_polar_area_chart({ labels: labels, datasets: datasets }, options)

app/views/admin/categories/edit.html.slim

@@ -1,5 +1,6 @@
 = render partial: 'btns', object: @category, as: :category
 
-= admin_widget_box 'Edit Category' do
-  = admin_form_for @category, as: :category do |f|
-    = render partial: 'form', object: f, as: :f
+.row
+  = admin_widget_box 'Edit Category' do
+    = admin_form_for @category, as: :category do |f|
+      = render partial: 'form', object: f, as: :f

app/views/admin/categories/index.html.slim

@@ -1,32 +1,34 @@
 - append_page_button 'New Category', new_admin_category_path, class: 'btn-primary'
 
-= admin_widget_box 'Filtering' do
-  = render partial: 'filtering', as: :q, object: @q
+.row
+  = admin_widget_box 'Filtering' do
+    = render partial: 'filtering', as: :q, object: @q
 
-= admin_widget_box 'Categories' do
-  = render_admin_data_table(data: @categories) do
-    thead
-      tr
-        th= '#'
-        th= 'Name'
-        th= 'Sort'
-        th= 'Sorting'
-        th= 'actions'
-    tbody
-      - @categories.each do |category|
+.row
+  = admin_widget_box 'Categories' do
+    = render_admin_data_table(data: @categories) do
+      thead
         tr
-          td= category.id
-          td= category.name
-          td= category.sort
-          td
-            - unless category.deleted?
-              = render_admin_sorting_buttons(category)
-          td
-            - if category.deleted?
-              = link_to 'Restore', restore_admin_category_path(category), method: :post, 'data-confirm' => 'Restore?'
-            - else
-              = link_to 'Show', admin_category_path(category)
-              |   |  
-              = link_to 'Edit', edit_admin_category_path(category)
-              |   |  
-              = link_to 'Delete', admin_category_path(category), method: :delete, 'data-confirm' => 'Delete?'
+          th= '#'
+          th= 'Name'
+          th= 'Sort'
+          th= 'Sorting'
+          th= 'actions'
+      tbody
+        - @categories.each do |category|
+          tr
+            td= category.id
+            td= category.name
+            td= category.sort
+            td
+              - unless category.deleted?
+                = render_admin_sorting_buttons(category)
+            td
+              - if category.deleted?
+                = link_to 'Restore', restore_admin_category_path(category), method: :post, 'data-confirm' => 'Restore?'
+              - else
+                = link_to 'Show', admin_category_path(category)
+                |   |  
+                = link_to 'Edit', edit_admin_category_path(category)
+                |   |  
+                = link_to 'Delete', admin_category_path(category), method: :delete, 'data-confirm' => 'Delete?'

app/views/admin/categories/new.html.slim

@@ -1,3 +1,4 @@
-= admin_widget_box 'New Category' do
-  = admin_form_for @category, as: :category do |f|
-    = render partial: 'form', object: f, as: :f
+.row
+  = admin_widget_box 'New Category' do
+    = admin_form_for @category, as: :category do |f|
+      = render partial: 'form', object: f, as: :f

app/views/admin/categories/revisions.html.slim

@@ -1,19 +1,20 @@
 = render partial: 'btns', object: @category, as: :category
 
-= admin_widget_box "Revisions (Total versions: #{@versions.size} )" do
-  = render_admin_data_table(data: @versions) do
-    thead
-      tr
-        th= 'Event'
-        th= 'When'
-        th= 'Who'
-        th= 'What'
-    tbody
-      - @versions.reverse.each do |version|
+.row
+  = admin_widget_box "Revisions (Total versions: #{@versions.size} )" do
+    = render_admin_data_table(data: @versions) do
+      thead
         tr
-          td= version.event
-          td= version.created_at
-          td= User&.find_by(id: version.whodunnit)&.name
-          td
-            - convert_changes_string(version.object_changes).each do |column, diffs|
-              .diff= "#{column}: #{diffs[0].nil? ? "NULL" : diffs[0]} -> #{diffs[1].nil? ? "NULL" : diffs[1]}"
+          th= 'Event'
+          th= 'When'
+          th= 'Who'
+          th= 'What'
+      tbody
+        - @versions.reverse.each do |version|
+          tr
+            td= version.event
+            td= version.created_at
+            td= User&.find_by(id: version.whodunnit)&.name
+            td
+              - convert_changes_string(version.object_changes).each do |column, diffs|
+                .diff= "#{column}: #{diffs[0].nil? ? "NULL" : diffs[0]} -> #{diffs[1].nil? ? "NULL" : diffs[1]}"

app/views/admin/categories/show.html.slim

@@ -1,27 +1,28 @@
 = render partial: 'btns', object: @category, as: :category
-= admin_widget_box "Category ##{@category.id}" do
-  = render_admin_data_table(bordered: false) do
-    tr
-      th ID
-      td= @category.id
-    tr
-      th Name
-      td= @category.name
-    tr
-      th Tags
-      td
-        - @category.tag_list.each do |tag_name|
-          - class_name = cycle('default', 'primary', 'success', 'info', 'warning', 'danger')
-          = link_to admin_categories_path(q: { tagged: [tag_name] }) do
-            span.label class="label-#{class_name}"
-              = tag_name
-          |  
-    tr
-      th Sort
-      td= @category.sort
-    tr
-      th Created at
-      td= @category.created_at
-    tr
-      th Updated at
-      td= @category.updated_at
+.row
+  = admin_widget_box "Category ##{@category.id}" do
+    = render_admin_data_table(bordered: false) do
+      tr
+        th ID
+        td= @category.id
+      tr
+        th Name
+        td= @category.name
+      tr
+        th Tags
+        td
+          - @category.tag_list.each do |tag_name|
+            - class_name = cycle('default', 'primary', 'success', 'info', 'warning', 'danger')
+            = link_to admin_categories_path(q: { tagged: [tag_name] }) do
+              span.label class="label-#{class_name}"
+                = tag_name
+            |  
+      tr
+        th Sort
+        td= @category.sort
+      tr
+        th Created at
+        td= @category.created_at
+      tr
+        th Updated at
+        td= @category.updated_at

app/views/admin/users/edit.html.slim

@@ -1,5 +1,6 @@
 = render partial: 'btns', object: @user, as: :user
 
-= admin_widget_box "Edit User" do
-  = admin_form_for @user, as: :user, wrapper: :admin do |f|
-    = render partial: "form", object: f, as: :f
+.row
+  = admin_widget_box "Edit User" do
+    = admin_form_for @user, as: :user, wrapper: :admin do |f|
+      = render partial: "form", object: f, as: :f