This commit is contained in:
lowlighter
2021-05-11 13:59:13 +02:00
5 changed files with 157 additions and 6 deletions

2
action.yml generated
View File

@@ -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

View File

@@ -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

View File

@@ -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>

View File

@@ -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)")

View File

@@ -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;
border-radius: 6px;
outline: 1px solid transparent;
/* Followup */
.followup {
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;
}