Add stack chart

Gemfile

@@ -29,6 +29,7 @@ gem 'yabeda-rails'
 
 # Application requirements
 gem 'addressable'
+gem 'chartkick'
 gem 'chronic_duration', '>= 0.10.6'
 gem 'hashie', '>= 5.0.0'
 gem 'shellwords', '>= 0.2.0'

Gemfile.lock

@@ -90,6 +90,7 @@ GEM
       racc
     builder (3.3.0)
     byebug (11.1.3)
+    chartkick (5.1.2)
     childprocess (5.1.0)
       logger (~> 1.5)
     chronic_duration (0.10.6)
@@ -439,6 +440,7 @@ DEPENDENCIES
   awesome_print
   bootsnap
   brakeman
+  chartkick
   chronic_duration (>= 0.10.6)
   factory_bot_rails
   faker

app/javascript/application.js

@@ -1,3 +1,6 @@
 // Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
 import "@hotwired/turbo-rails"
 import "controllers"
+
+import "chartkick"
+import "Chart.bundle"

app/javascript/controllers/log_controller.js

@@ -25,6 +25,11 @@ export default class extends Controller {
       this.currentUuidValue = uuid;
       Turbo.visit(`/dashboard?uuid=${uuid}`, { frame: logFrame.id });
     }
+    const statisticsFrame = document.getElementById("statistics-frame");
+    if (statisticsFrame) {
+      this.currentUuidValue = uuid;
+      Turbo.visit(`/dashboard?uuid=${uuid}`, { frame: statisticsFrame.id });
+    }
   }
 }
 

app/views/dashboard/index.html.erb

@@ -153,6 +153,7 @@
       </turbo-frame>
     </div>
     <div class="col col-lg-4">
+      <turbo-frame id="statistics-frame" data-turbo-permanent>
       <% uuid = params[:uuid] || @stacks&.first&.uuid %>
       <% if uuid %>
         <% stack = Stack.find_by(uuid: uuid) %>
@@ -166,10 +167,20 @@
         </div>
         <div class="card-body">
           <% if stack %>
-            <canvas id="stack-chart"></canvas>
+            <% log = stack.log(entries: 10) %>
+            <% actions = log.group_by { it['action'] }.map { |k, v| [k, v.count] } %>
+            <%=
+              pie_chart actions,
+                legend: 'left',
+                donut: true,
+                dataset: { borderWidth: 0, cutout: '75%' },
+                library: { plugins: { legend: { labels: { usePointStyle: true } } } }
+            %>
           <% end %>
         </div>
       </div>
+      </turbo-frame>
+    </div>
   </div>
   <input type="hidden" id="selected-uuid"
          data-log-target="selectedUuid"

config/importmap.rb

@@ -5,3 +5,6 @@
 pin '@hotwired/stimulus', to: 'stimulus.min.js'
 pin '@hotwired/stimulus-loading', to: 'stimulus-loading.js'
 pin_all_from 'app/javascript/controllers', under: 'controllers'
+
+pin 'chartkick', to: 'chartkick.js'
+pin 'Chart.bundle', to: 'Chart.bundle.js'