Add option plugin_languages_details (#87)

This commit is contained in:
Simon Lecoq
2021-01-31 12:29:50 +01:00
committed by GitHub
parent 5e57107278
commit bf1453c776
8 changed files with 91 additions and 18 deletions

View File

@@ -36,6 +36,15 @@
return `${(n/v).toFixed(2).substr(0, 4).replace(/[.]0*$/, "")} ${u}B`
return `${n} byte${n > 1 ? "s" : ""}`
}
format.bytes = bytes
/** Percentage formatter */
export function percentage(n, {rescale = true} = {}) {
return `${(n*(rescale ? 100 : 1)).toFixed(2)
.replace(/(?<=[.])([1-9]*)(0+)$/, (m, a, b) => a)
.replace(/[.]$/, "")}%`
}
format.percentage = percentage
/** Array shuffler */
export function shuffle(array) {

View File

@@ -14,9 +14,9 @@
return (postprocess.skip({login, data}), {})
//Base parts (legacy handling for web instance)
const defaulted = ("base" in q) ? !!q.base : true
const defaulted = ("base" in q) ? legacy.converter(q.base) ?? true : true
for (const part of conf.settings.plugins.base.parts)
data.base[part] = `base.${part}` in q ? !!q[ `base.${part}`] : defaulted
data.base[part] = `base.${part}` in q ? legacy.converter(q[ `base.${part}`]) : defaulted
//Iterate through account types
for (const account of ["user", "organization"]) {
@@ -109,3 +109,15 @@
})
}
}
//Legacy functions
const legacy = {
converter(value) {
if (/^(?:[Tt]rue|[Oo]n|[Yy]es|1)$/.test(value))
return true
if (/^(?:[Ff]alse|[Oo]ff|[Nn]o|0)$/.test(value))
return false
if (Number.isFinite(Number(value)))
return !!(Number(value))
}
}

View File

@@ -26,4 +26,5 @@ It is also possible to use a predefined set of colors from [colorsets.json](colo
plugin_languages_ignored: html, css # List of languages to ignore
plugin_languages_skipped: my-test-repo # List of repositories to skip
plugin_languages_colors: "0:orange, javascript:#ff0000, ..." # Make most used languages orange and JavaScript red
plugin_languages_details: bytes-size, percentage # Additionally display total bytes size and percentage
```

View File

@@ -7,7 +7,7 @@
return null
//Load inputs
let {ignored, skipped, colors} = imports.metadata.plugins.languages.inputs({data, account, q})
let {ignored, skipped, colors, details} = imports.metadata.plugins.languages.inputs({data, account, q})
//Custom colors
const colorsets = JSON.parse(`${await imports.fs.readFile(`${imports.__module(import.meta.url)}/colorsets.json`)}`)
@@ -18,7 +18,7 @@
//Iterate through user's repositories and retrieve languages data
console.debug(`metrics/compute/${login}/plugins > languages > processing ${data.user.repositories.nodes.length} repositories`)
const languages = {colors:{}, total:0, stats:{}}
const languages = {details, colors:{}, total:0, stats:{}}
for (const repository of data.user.repositories.nodes) {
//Skip repository if asked
if (skipped.includes(repository.name.toLocaleLowerCase())) {
@@ -41,9 +41,10 @@
//Compute languages stats
console.debug(`metrics/compute/${login}/plugins > languages > computing stats`)
Object.keys(languages.stats).map(name => languages.stats[name] /= languages.total)
languages.favorites = Object.entries(languages.stats).sort(([an, a], [bn, b]) => b - a).slice(0, 8).map(([name, value]) => ({name, value, color:languages.colors[name], x:0}))
languages.favorites = Object.entries(languages.stats).sort(([an, a], [bn, b]) => b - a).slice(0, 8).map(([name, value]) => ({name, value, size:value, color:languages.colors[name], x:0}))
const visible = {total:Object.values(languages.favorites).map(({size}) => size).reduce((a, b) => a + b, 0)}
for (let i = 0; i < languages.favorites.length; i++) {
languages.favorites[i].value /= visible.total
languages.favorites[i].x = (languages.favorites[i-1]?.x ?? 0) + (languages.favorites[i-1]?.value ?? 0)
if ((colors[i])&&(!colors[languages.favorites[i].name.toLocaleLowerCase()]))
languages.favorites[i].color = colors[i]

View File

@@ -26,7 +26,7 @@ inputs:
format: comma-separated
default: ""
# Overrides
# Overrides default languages colors
# Use `${n}:${color}` to change the color of the n-th most used language (e.g. "0:red" to make your most used language red)
# Use `${language}:${color}` to change the color of named language (e.g. "javascript:red" to make JavaScript language red, language case is ignored)
# Use a value from `colorsets.json` to use a predefined set of colors
@@ -38,3 +38,13 @@ inputs:
- comma-separated
- /((?<index>[0-9])|(?<language>[-+a-z0-9#])):(?<color>#?[-a-z0-9]+)/
default: github
# Languages additional details
plugin_languages_details:
description:
type: array
format: comma-separated
values:
- bytes-size # Languages total size written in bytes
- percentage # Languages proportions in %
default: ""

View File

@@ -1,6 +1,9 @@
<% if (plugins.languages) { %>
<section class="column">
<h3>Most used languages</h3>
<h2 class="field">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.5 2.75a.25.25 0 01.25-.25h12.5a.25.25 0 01.25.25v8.5a.25.25 0 01-.25.25h-6.5a.75.75 0 00-.53.22L4.5 14.44v-2.19a.75.75 0 00-.75-.75h-2a.25.25 0 01-.25-.25v-8.5zM1.75 1A1.75 1.75 0 000 2.75v8.5C0 12.216.784 13 1.75 13H3v1.543a1.457 1.457 0 002.487 1.03L8.061 13h6.189A1.75 1.75 0 0016 11.25v-8.5A1.75 1.75 0 0014.25 1H1.75zm5.03 3.47a.75.75 0 010 1.06L5.31 7l1.47 1.47a.75.75 0 01-1.06 1.06l-2-2a.75.75 0 010-1.06l2-2a.75.75 0 011.06 0zm2.44 0a.75.75 0 000 1.06L10.69 7 9.22 8.47a.75.75 0 001.06 1.06l2-2a.75.75 0 000-1.06l-2-2a.75.75 0 00-1.06 0z"></path></svg>
Most used languages
</h2>
<% if (plugins.languages.error) { %>
<section>
<div class="field error">
@@ -18,6 +21,26 @@
<rect mask="url(#languages-bar)" x="<%= x*460 %>" y="0" width="<%= value*460 %>" height="8" fill="<%= color %>"/>
<% } %>
</svg>
<% if (plugins.languages.details?.length) { %>
<div class="row fill-width">
<% for (const row of [0, 1]) { %>
<section>
<% for (const {name, value, color, size} of plugins.languages.favorites.filter((_, i) => i%2 === row)) { %>
<div class="field language details">
<div class="field">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill="<%= color %>" fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8z"></path></svg>
<%= name %>
</div>
<small>
<% if (plugins.languages.details.includes("bytes-size")) { %> <div><%= f.bytes(size) %></div><% } %>
<% if (plugins.languages.details.includes("percentage")) { %> <div><%= f.percentage(value) %></div><% } %>
</small>
</div>
<% } %>
</section>
<% } %>
</div>
<% } else { %>
<div class="field center horizontal-wrap fill-width">
<% for (const {name, value, color} of plugins.languages.favorites) { %>
<div class="field center no-wrap language">
@@ -27,5 +50,6 @@
<% } %>
</div>
<% } %>
<% } %>
</section>
<% } %>

View File

@@ -114,9 +114,20 @@
flex-grow: 0;
}
.field.language small {
margin-left: 4px;
.field.language.details {
display: flex;
justify-content: space-between;
}
.field.language.details small {
display: flex;
justify-content: space-between;
color: #666666;
text-align: right;
}
.field.language.details > *, .field.language.details small > * {
flex: 1 1 0;
}
/* Labels */

View File

@@ -105,11 +105,16 @@
plugin_languages:true,
plugin_languages_colors:"complementary",
}],
["Language plugin (with details)", {
plugin_languages:true,
plugin_languages_details:"percentage",
}],
["Language plugin (complete)", {
plugin_languages:true,
plugin_languages_ignored:"html, css, dockerfile",
plugin_languages_skipped:"metrics",
plugin_languages_colors:"rainbow",
plugin_languages_details:"bytes-size, percentage",
}],
["Follow-up plugin (default)", {
plugin_followup:true,