update GitHub commit graph with more stats

lib/github_commit_graph/_common.html.erb

@@ -0,0 +1,64 @@
+<style>
+  #github_commit_graph {
+    width: 755px;
+    height: 182px;
+    overflow: hidden;
+
+    column-count: auto;
+    column-fill: auto;
+    column-width: 14px;
+    column-gap: 0px;
+  }
+
+  #github_commit_graph .day {
+    width: 11px;
+    height: 23px;
+    float: left;
+    border-radius: 4px;
+    margin: 0px 0px 3px 0px;
+
+    break-inside: avoid-column;
+  }
+
+  .view--quadrant #github_commit_graph {
+    width: 318px;
+    height: 70px;
+    column-width: 6px;
+    margin-top: 0;
+    padding-left: 0;
+    margin-left: 0px;
+  }
+
+  .view--quadrant #github_commit_graph .day {
+    width: 5px;
+    height: 9px;
+    border-radius: 2px;
+    margin: 0 0 1px 0;
+  }
+
+  .view--half_vertical #github_commit_graph {
+    width: 318px;
+    height: 252px;
+    column-width: 6px;
+    margin-top: 0;
+    padding-left: 0;
+    margin-left: 0px;
+  }
+
+  .view--half_vertical #github_commit_graph .day {
+    width: 5px;
+    height: 34px;
+    margin: 0 0 2px 0px;
+  }
+
+  .view--half_horizontal #github_commit_graph {
+    width: 589px;
+    height: 175px;
+    column-width: 11px;
+  }
+
+  .view--half_horizontal #github_commit_graph .day {
+    width: 9px;
+    height: 22px;
+  }
+</style>

lib/github_commit_graph/github_commit_graph.rb

@@ -1,7 +1,7 @@
 module Plugins
   class GithubCommitGraph < Base
     def locals
-      { username:, contributions: }
+      { username:, contributions:, stats: }
     end
 
     private
@@ -9,35 +9,80 @@ module Plugins
     def username = settings['username']
 
     def contributions
-      query = "query($userName:String!) {
-        user(login: $userName){
-          contributionsCollection {
-            contributionCalendar {
-              totalContributions
-              weeks {
-                contributionDays {
-                  contributionCount
-                  date
+      @contributions ||= begin
+        query = "query($userName:String!) {
+          user(login: $userName){
+            contributionsCollection {
+              contributionCalendar {
+                totalContributions
+                weeks {
+                  contributionDays {
+                    contributionCount
+                    date
+                  }
                 }
               }
             }
           }
+        }"
+        body = {
+          query: query,
+          variables: { userName: settings['username'] }
         }
-      }"
-      body = {
-        query: query,
-        variables: { userName: settings['username'] }
-      }
 
-      url = 'https://api.github.com/graphql'
-      resp = HTTParty.post(url, body: body.to_json, headers: headers)
-      data = resp.dig('data', 'user', 'contributionsCollection', 'contributionCalendar')
+        url = 'https://api.github.com/graphql'
+        resp = HTTParty.post(url, body: body.to_json, headers: headers)
+        data = resp.dig('data', 'user', 'contributionsCollection', 'contributionCalendar')
 
-      { total: data['totalContributions'], commits: data['weeks'] }
+        {
+          total: data['totalContributions'],
+          commits: data['weeks']
+        }
+      end
     end
 
     def headers
       { 'authorization' => "Bearer #{Rails.application.credentials.plugins.github_commit_graph_token}" }
     end
+
+    def stats
+      days = contributions[:commits].flat_map { |week| week['contributionDays'] }
+      sorted_days = days.sort_by { |day| Date.parse(day['date']) }
+
+      {
+        longest_streak: longest_streak(sorted_days),
+        current_streak: current_streak(sorted_days),
+        max_contributions: days.map { |day| day['contributionCount'] }.max,
+        average_contributions: average_contributions(days)
+      }
+    end
+
+    def average_contributions(days)
+      total_contributions = days.sum { |day| day['contributionCount'] }
+      (total_contributions.to_f / days.size).round(2)
+    end
+
+    def longest_streak(days)
+      longest = current = 0
+      days.each do |day|
+        if (day['contributionCount']).positive?
+          current += 1
+          longest = [longest, current].max
+        else
+          current = 0
+        end
+      end
+      longest
+    end
+
+    def current_streak(days)
+      streak = 0
+      days.reverse_each do |day|
+        break if (day['contributionCount']).zero?
+
+        streak += 1
+      end
+      streak
+    end
   end
 end

lib/github_commit_graph/markup_full.html.erb

@@ -1,23 +1,61 @@
-<div class="screen">
-  <div class="layout">
-    <div class="columns">
-      <div class="column">
-        <div class="metrics">
-          <div class="metric">
-            <span class="value days_passed"><%= contributions[:total] %></span>
-            <span class="label label--underline">Contributions in last year</span>
+<div class="view view--full">
+  <div class="layout layout--col gap--space-between">
+    <div class="grid grid--cols-2">
+      <div class="item">
+        <div class="meta"></div>
+        <div class="content">
+          <span class="value value--xxxlarge"><%= contributions[:total] %></span>
+          <span class="label">Contributions in last year</span>
+        </div>
+      </div>
+      <div class="flex flex--col gap--medium">
+        <div class="grid grid--cols-2">
+          <div class="item">
+            <div class="meta"></div>
+            <div class="content">
+              <span class="value"><%= stats[:longest_streak] %></span>
+              <span class="label">Longest streak</span>
+            </div>
+          </div>
+          <div class="item">
+            <div class="meta"></div>
+            <div class="content">
+              <span class="value "><%= stats[:current_streak] %></span>
+              <span class="label">Current streak</span>
+            </div>
           </div>
         </div>
 
-        <div id="github_commit_graph">
-          <% contributions[:commits].each do |week_of_commits| %>
-            <% week_of_commits['contributionDays'].each do |day| %>
-              <span class="day <%= git_commit_grayscale(day['contributionCount']) %>"></span>
-            <% end %>
-          <% end %>
+        <div class="w-full b-h-gray-5"></div>
+
+        <div class="grid grid--cols-2">
+          <div class="item">
+            <div class="meta"></div>
+            <div class="content">
+              <span class="value "><%= stats[:max_contributions] %></span>
+              <span class="label">Most in a day</span>
+            </div>
+          </div>
+          <div class="item">
+            <div class="meta"></div>
+            <div class="content">
+              <span class="value "><%= stats[:average_contributions] %></span>
+              <span class="label">Average per day</span>
+            </div>
+          </div>
         </div>
       </div>
     </div>
+
+    <div class="w-full b-h-gray-5"></div>
+
+    <div id="github_commit_graph">
+      <% contributions[:commits].each do |week_of_commits| %>
+        <% week_of_commits['contributionDays'].each do |day| %>
+          <span class="day <%= git_commit_grayscale(day['contributionCount']) %>"></span>
+        <% end %>
+      <% end %>
+    </div>
   </div>
 
   <div class="title_bar">
@@ -27,44 +65,4 @@
   </div>
 </div>
 
-<style>
-  #github_commit_graph {
-    width: 758px;
-    height: 148px;
-    overflow: hidden;
-
-    padding-left: 17px;
-    margin-top: 19px;
-
-    column-count: auto;
-    column-fill: auto;
-    column-width: 13px;
-    column-gap: 0px;
-  }
-
-  #github_commit_graph .day {
-    width: 11px;
-    height: 19px;
-    float: left;
-    border-radius: 4px;
-    margin: 2px 2px 0 2px;
-
-    break-inside: avoid-column;
-  }
-
-  #github_commit_graph.widget {
-    width: 318px;
-    /* height: 133px; */
-    height: 63px;
-    column-width: 6px;
-    margin-top: 0;
-    padding-left: 0;
-    margin-left: 14px;
-  }
-
-  #github_commit_graph.widget .day {
-    width: 6px;
-    height: 9px;
-    margin: 0;
-  }
-</style>
+<%= render 'common' %>