Coloring file list too

riseshia · Mar 14, 2024 · e9e9e4f · e9e9e4f
1 parent 451cc1b
commit e9e9e4f
Show file tree

Hide file tree

Showing 9 changed files with 88 additions and 48 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,7 @@
 # Akainaa (赤いなぁ)
 
+![page view](./img/webui.png)
+
 Akainaa is a gem that employs the Coverage library to record
 the number of executed count of code in a rack application
 and provides a Web UI that shows the recorded status.
@@ -34,9 +36,8 @@ use Akainaa::Middleware
 run App
 ```
 
-Boot up application, access `/akainaa` will return coverage result like this:
-
-![page view](./img/screenshot.png)
+Boot up application, do something, and access `/akainaa`.
+It will show Web UI what and how many executed.
 
 ## Development
 

diff --git a/img/screenshot.png b/img/screenshot.png
diff --git a/img/webui.png b/img/webui.png
diff --git a/lib/akainaa.rb b/lib/akainaa.rb
@@ -74,20 +74,30 @@ def call(env)
       HTML
     end
 
-    private def render_filelist(files, current_path:)
+    private def render_filelist(coverage_result, current_path:)
+      files = coverage_result.keys
+      max_count_on_proj = coverage_result
+        .values
+        .map { |cv| cv[:lines].reject(&:nil?).sum }
+        .max + 1
+      max_count_witdh = max_count_on_proj.to_s.size
+
       li_elements = files.sort.map do |file|
+        total_count_on_file = coverage_result[file][:lines].reject(&:nil?).sum
+        count_top = (total_count_on_file * 10 / max_count_on_proj).to_i * 10
+
         class_suffix = file == current_path ? ' current' : ''
         <<~HTML
           <li class="pure-menu-item">
-            <a href="/akainaa?path=#{file}" class="pure-menu-link filepath#{class_suffix}">#{file}</a>
+          <a href="/akainaa?path=#{file}" class="pure-menu-link filepath#{class_suffix} count-p#{count_top}"">(#{total_count_on_file.to_s.rjust(max_count_witdh)}) #{file}</a>
           </li>
         HTML
       end.join
 
       <<~HTML
         <div>
           <div class="pure-menu">
-            <span class="pure-menu-heading">Akainaa</span>
+            <span class="pure-menu-heading">赤いなぁ</span>
             <ul class="pure-menu-list">
               <li class="pure-menu-item">
                 <a href="/akainaa/reset" class="pure-button pure-button-primary">Reset</a>
@@ -102,6 +112,7 @@ def call(env)
 
     private def render_page(path)
       result = Akainaa.peek_result
+
       path_result = result[path]
 
       if path_result.nil?
@@ -112,20 +123,20 @@ def call(env)
         return "<" + "p>#{path} not found.<" + "/p>"
       end
 
-      filelist = render_filelist(result.keys, current_path: path)
-
       coverage_on_line = path_result[:lines]
-      max_count = coverage_on_line.max_by(&:to_i).to_i + 1
+      max_count_on_file = coverage_on_line.reject(&:nil?).max + 1
 
       lines = []
       File.read(path).each_line.with_index do |line, index|
         count = coverage_on_line[index].to_i
-        count_top = (count * 10 / max_count).to_i * 10
+        count_top = (count * 10 / max_count_on_file).to_i * 10
         line = render_line(index + 1, line, coverage_on_line[index], count_top)
 
         lines << line
       end
 
+      filelist = render_filelist(result, current_path: path)
+
       <<~HTML
         <!DOCTYPE html>
         <html>
@@ -140,6 +151,10 @@ def call(env)
                 background-color: #eee;
               }
 
+              .pure-menu-heading {
+                font-weight: bold;
+              }
+
               .line {
                 line-height: 20px;
               }
@@ -161,6 +176,7 @@ def call(env)
               a.filepath {
                 text-wrap: balance;
                 word-break: break-all;
+                color: #000;
               }
               a.filepath.current {
                 font-weight: bold;
@@ -199,11 +215,38 @@ def call(env)
               div.count-p20 {
                 background-color: #fedcda;
               }
-              div.count-p10 {
+              div.count-p10, div.count-p0 {
                 background-color: #ffffff;
               }
-              div.count-p00 {
-                background-color: #a3cfbb;
+              .pure-menu-item > a.count-p90 {
+                background-color: #ff392e;
+              }
+              .pure-menu-item > a.count-p80 {
+                background-color: #ff5047;
+              }
+              .pure-menu-item > a.count-p70 {
+                background-color: #ff675f;
+              }
+              .pure-menu-item > a.count-p60 {
+                background-color: #ff7f78;
+              }
+              .pure-menu-item > a.count-p50 {
+                background-color: #ff9690;
+              }
+              .pure-menu-item > a.count-p40 {
+                background-color: #ffada9;
+              }
+              .pure-menu-item > a.count-p30 {
+                background-color: #ffffff;
+              }
+              .pure-menu-item > a.count-p20 {
+                background-color: #ffffff;
+              }
+              .pure-menu-item > a.count-p10 {
+                background-color: #ffffff;
+              }
+              .pure-menu-item > a.count-p0 {
+                background-color: #ffffff;
               }
             </style>
           </head>

diff --git a/sample/app.rb b/sample/app.rb
@@ -5,48 +5,26 @@
 require 'securerandom'
 
 require_relative './user'
+require_relative './notification'
+require_relative './util'
 
 class App < Sinatra::Base
   enable :logging
 
-  helpers do
-    def fetch_tsukurepos(recipe_id)
-      3.times.map do |i|
-        {
-          id: i,
-          recipe_id: recipe_id,
-          text: "Tsukurepo ##{i}",
-          author: fetch_user,
-        }
-      end
-    end
-
-    def fetch_recipes
-      5.times.map do |i|
-        {
-          id: i,
-          name: "Recipe ##{i}",
-          author: fetch_user,
-          tsukurepos: fetch_tsukurepos(i),
-        }
-      end
-    end
-
-    def fetch_user
-      id = SecureRandom.uuid
-
-      User.find(id)
-    end
-
-    def fetch_theme(_id)
-      "light"
-    end
-  end
-
   get '/api/me' do
+    1.times { Util.do_something }
+    2.times { Util.do_something }
+    3.times { Util.do_something }
+    4.times { Util.do_something }
+    5.times { Util.do_something }
+    6.times { Util.do_something }
+    7.times { Util.do_something }
+    8.times { Util.do_something }
+    9.times { Util.do_something }
+    10.times { Util.do_something }
+
     json(
       name: "riseshia",
-      recipes: fetch_recipes,
     )
   end
 end
diff --git a/sample/notification.rb b/sample/notification.rb
@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+module Notification
+  50.times { nil }
+
+  module_function
+
+  def where(id:) = []
+end
diff --git a/sample/theme.rb b/sample/theme.rb
@@ -1,6 +1,7 @@
 # frozen_string_literal: true
 
 module Theme
+  40.times { nil }
   module_function
 
   def find_by(user_id:)

diff --git a/sample/user.rb b/sample/user.rb
@@ -3,6 +3,7 @@
 require_relative './theme'
 
 module User
+  30.times { nil }
   module_function
 
   def find(id)

diff --git a/sample/util.rb b/sample/util.rb
@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+module Util
+  module_function
+
+  def do_something = []
+end