Merge branch 'master' of https://github.com/lowlighter/metrics

action.yml

@@ -1111,7 +1111,7 @@ inputs:
 # Action metadata
 name: GitHub metrics as SVG image
 author: lowlighter
-description: An SVG generator with 20+ metrics about your GitHub account! Additional plugins are available to display even more!
+description: An infographics generator with 30+ plugins and 100+ options to display stats about your GitHub account and render them as SVG, Markdown, PDF or JSON!
 branding:
   icon: user-check
   color: gray-dark

source/app/web/instance.mjs

@@ -188,9 +188,17 @@ export default async function({mock, nosettings} = {}) {
             "activity.limit":100,
             "activity.days":0,
             notable:true,
+            followup:true,
+            "followup.sections":"repositories, user",
+            habits:true,
+            "habits.from":100,
+            "habits.days":7,
+            "habits.facts":false,
+            "habits.charts":true,
+            introduction:true
           },
         },
-        {graphql, rest, plugins:{achievements:{enabled:true}, isocalendar:{enabled:true}, languages:{enabled:true}, activity:{enabled:true, markdown:"extended"}, notable:{enabled:true}}, conf, convert:"json"},
+        {graphql, rest, plugins:{achievements:{enabled:true}, isocalendar:{enabled:true}, languages:{enabled:true}, activity:{enabled:true, markdown:"extended"}, notable:{enabled:true}, followup:{enabled:true}, habits:{enabled:true}, introduction:{enabled:true}}, conf, convert:"json"},
         {Plugins, Templates},
       )
       //Cache

source/app/web/statics/about/index.html

@@ -76,6 +76,10 @@
             </a>
           </section>
 
+          <section class="container text-center">
+            {{ introduction }}
+          </section>
+
           <div class="rankeds">
             <div v-for="{icon, title, text, rank, progress, value, leaderboard = null} in ranked" class="ranked" :class="{[rank.charAt(0).toLocaleLowerCase()]:rank !== '$', secret:rank === '$'}">
               <div class="icon">
@@ -165,6 +169,56 @@
             </div>
           </section>
 
+          <section class="container" v-if="followup">
+            <h2>
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.5 8a6.5 6.5 0 0110.65-5.003.75.75 0 00.959-1.153 8 8 0 102.592 8.33.75.75 0 10-1.444-.407A6.5 6.5 0 011.5 8zM8 12a1 1 0 100-2 1 1 0 000 2zm0-8a.75.75 0 01.75.75v3.5a.75.75 0 11-1.5 0v-3.5A.75.75 0 018 4zm4.78 4.28l3-3a.75.75 0 00-1.06-1.06l-2.47 2.47-.97-.97a.749.749 0 10-1.06 1.06l1.5 1.5a.75.75 0 001.06 0z"></path></svg>
+              Overall status of related issues and pull requests
+            </h2>
+            <div class="followup">
+              <template v-for="{type, section} in [{type:'repositories', section:followup}, {type:'user', section:followup.user||{}}]">
+                <div class="followup-section" v-if="section.issues">
+                  <h3>Issues {{ {repositories:`opened on ${account.login}'${[...account.login].pop() === "s" ? "" : "s"} repositories`, user:`opened by ${account.login}`}[type] || "" }}</h3>
+                  <div class="progress-bars">
+                    <div class="progress" :style="{width:`${100*section.issues.open/section.issues.count}%`, backgroundColor:'#28a745'}"></div>
+                    <div class="progress" :style="{width:`${100*section.issues.closed/section.issues.count}%`, backgroundColor:'#d73a49'}"></div>
+                  </div>
+                  <div class="legend">
+                    <div>
+                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill="#28a745" fill-rule="evenodd" d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm9 3a1 1 0 11-2 0 1 1 0 012 0zm-.25-6.25a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z"></path></svg>
+                      {{ section.issues.open }} open
+                    </div>
+                    <div>
+                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill="#d73a49" fill-rule="evenodd" d="M1.5 8a6.5 6.5 0 0110.65-5.003.75.75 0 00.959-1.153 8 8 0 102.592 8.33.75.75 0 10-1.444-.407A6.5 6.5 0 011.5 8zM8 12a1 1 0 100-2 1 1 0 000 2zm0-8a.75.75 0 01.75.75v3.5a.75.75 0 11-1.5 0v-3.5A.75.75 0 018 4zm4.78 4.28l3-3a.75.75 0 00-1.06-1.06l-2.47 2.47-.97-.97a.749.749 0 10-1.06 1.06l1.5 1.5a.75.75 0 001.06 0z"></path></svg>
+                      {{ section.issues.closed }} closed
+                    </div>
+                  </div>
+                </div>
+                <div class="followup-section" v-if="section.pr">
+                  <h3>Pull requests {{ {repositories:`opened on ${account.login}'${[...account.login].pop() === "s" ? "" : "s"} repositories`, user:`opened by ${account.login}`}[type] || "" }}</h3>
+                  <div class="progress-bars">
+                    <div class="progress" :style="{width:`${100*section.pr.open/section.pr.count}%`, backgroundColor:'#28a745'}"></div>
+                    <div class="progress" :style="{width:`${100*section.pr.closed/section.pr.count}%`, backgroundColor:'#d73a49'}"></div>
+                    <div class="progress" :style="{width:`${100*section.pr.merged/section.pr.merged}%`, backgroundColor:'#6f42c1'}"></div>
+                  </div>
+                  <div class="legend">
+                    <div>
+                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill="#28a745" fill-rule="evenodd" d="M7.177 3.073L9.573.677A.25.25 0 0110 .854v4.792a.25.25 0 01-.427.177L7.177 3.427a.25.25 0 010-.354zM3.75 2.5a.75.75 0 100 1.5.75.75 0 000-1.5zm-2.25.75a2.25 2.25 0 113 2.122v5.256a2.251 2.251 0 11-1.5 0V5.372A2.25 2.25 0 011.5 3.25zM11 2.5h-1V4h1a1 1 0 011 1v5.628a2.251 2.251 0 101.5 0V5A2.5 2.5 0 0011 2.5zm1 10.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0zM3.75 12a.75.75 0 100 1.5.75.75 0 000-1.5z"></path></svg>
+                      {{ section.pr.open }} open
+                    </div>
+                    <div>
+                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill="#d73a49" fill-rule="evenodd" d="M7.177 3.073L9.573.677A.25.25 0 0110 .854v4.792a.25.25 0 01-.427.177L7.177 3.427a.25.25 0 010-.354zM3.75 2.5a.75.75 0 100 1.5.75.75 0 000-1.5zm-2.25.75a2.25 2.25 0 113 2.122v5.256a2.251 2.251 0 11-1.5 0V5.372A2.25 2.25 0 011.5 3.25zM11 2.5h-1V4h1a1 1 0 011 1v5.628a2.251 2.251 0 101.5 0V5A2.5 2.5 0 0011 2.5zm1 10.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0zM3.75 12a.75.75 0 100 1.5.75.75 0 000-1.5z"></path></svg>
+                      {{ section.pr.closed }} closed
+                    </div>
+                    <div>
+                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill="#6f42c1" fill-rule="evenodd" d="M5 3.254V3.25v.005a.75.75 0 110-.005v.004zm.45 1.9a2.25 2.25 0 10-1.95.218v5.256a2.25 2.25 0 101.5 0V7.123A5.735 5.735 0 009.25 9h1.378a2.251 2.251 0 100-1.5H9.25a4.25 4.25 0 01-3.8-2.346zM12.75 9a.75.75 0 100-1.5.75.75 0 000 1.5zm-8.5 4.5a.75.75 0 100-1.5.75.75 0 000 1.5z"></path></svg>
+                      {{ section.pr.merged }} merged
+                    </div>
+                  </div>
+                </div>
+              </template>
+            </div>
+          </section>
+
           <section class="container" v-if="account.type === 'user'">
             <div class="isocalendar">
               <h2>
@@ -175,6 +229,20 @@
             </div>
           </section>
 
+          <section class="container" v-if="(account.type === 'user')&&(habits)">
+            <h2>
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M6 2a.75.75 0 01.696.471L10 10.731l1.304-3.26A.75.75 0 0112 7h3.25a.75.75 0 010 1.5h-2.742l-1.812 4.528a.75.75 0 01-1.392 0L6 4.77 4.696 8.03A.75.75 0 014 8.5H.75a.75.75 0 010-1.5h2.742l1.812-4.529A.75.75 0 016 2z"></path></svg>
+              Average commits per day over the last week
+            </h2>
+            <div class="chart-bars">
+              <div class="entry" v-for="h in 24">
+                <span class="value">{{ habits[h] }}</span>
+                <div class="bar" :style="{height:(habits[h]/habits.max)*150, backgroundColor:`var(--color-calendar-graph-day-L${Math.ceil((habits[h]/habits.max)/0.25)}-bg)`}"></div>
+                <span class="label">{{ `${h}`.padStart(2, 0) }}</span>
+              </div>
+            </div>
+          </section>
+
           <section class="container">
             <div class="activity">
               <h2>

source/app/web/statics/about/script.js

@@ -98,6 +98,15 @@
       achievements() {
         return this.metrics?.rendered.plugins.achievements.list?.filter(({ leaderboard }) => !leaderboard).filter(({ title }) => !/(?:automater|octonaut|infographile)/i.test(title)) ?? []
       },
+      introduction() {
+        return this.metrics?.rendered.plugins.introduction?.text ?? ""
+      },
+      followup() {
+        return this.metrics?.rendered.plugins.followup ?? null
+      },
+      habits() {
+        return this.metrics?.rendered.plugins.habits.commits.hours ?? null
+      },
       isocalendar() {
         return (this.metrics?.rendered.plugins.isocalendar.svg ?? "")
           .replace(/#ebedf0/gi, "var(--color-calendar-graph-day-bg)")

source/app/web/statics/about/style.css

@@ -11,6 +11,9 @@
     align-items: center;
     margin-top: 1rem;
   }
+  .text-center {
+    text-align: center;
+  }
 
 /* Search */
   .search {
@@ -82,6 +85,33 @@
     box-shadow: 0 0 0 1px var(--color-avatar-border);
   }
 
+/** Progress bars */
+  .progress-bars {
+    display: flex;
+    margin: .5rem 0;
+  }
+  .progress {
+    height: 8px;
+    border-radius: 6px;
+    outline: 1px solid transparent;
+  }
+  .progress:not(:last-child) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .progress:not(:first-child) {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .legend {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .legend > * {
+    margin: 0 1rem;
+  }
+
 /* Languages */
   .languages .list {
     display: flex;
@@ -99,10 +129,16 @@
     font-size: .8rem;
     color: var(--color-text-secondary);
   }
-  .progress {
+
-    height: 8px;
+/* Followup */
-    border-radius: 6px;
+  .followup {
-    outline: 1px solid transparent;
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+  }
+  .followup .followup-section {
+    width: 100%;
+    margin-bottom: .5rem;
   }
 
 /* Isocalendar */
@@ -240,6 +276,32 @@
     width: 100%;
   }
 
+/* Charts */
+  .chart-bars {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    width: 100%;
+    height: 12rem;
+    overflow: auto;
+  }
+  .chart-bars .entry {
+    flex: 1 1 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  .chart-bars .entry .value {
+    color: var(--color-text-secondary);
+    font-size: .8rem;
+  }
+  .chart-bars .entry .label {
+    margin: 0 .25rem;
+  }
+  .chart-bars .bar {
+    width: 100%;
+  }
+
 /* Icon gauges */
   .gauge {
     stroke-linecap: round;
@@ -387,6 +449,10 @@
     .languages .language {
       width: 25%;
     }
+    .followup .followup-section {
+      width: calc(50% - 1rem);
+      margin-right: 1rem;
+    }
     .search {
       width: 520px;
     }