diff --git a/source/plugins/stargazers/examples.yml b/source/plugins/stargazers/examples.yml index a71a39bb..6c83014f 100644 --- a/source/plugins/stargazers/examples.yml +++ b/source/plugins/stargazers/examples.yml @@ -1,7 +1,16 @@ -- name: Last weeks stargazers +- name: Using classic charts uses: lowlighter/metrics@latest with: filename: metrics.plugin.stargazers.svg token: ${{ secrets.METRICS_TOKEN }} base: "" plugin_stargazers: yes + +- name: Using chartist charts + uses: lowlighter/metrics@latest + with: + filename: metrics.plugin.stargazers.chartist.svg + token: ${{ secrets.METRICS_TOKEN }} + base: "" + plugin_stargazers: yes + plugin_stargazers_charts_type: chartist \ No newline at end of file diff --git a/source/plugins/stargazers/index.mjs b/source/plugins/stargazers/index.mjs index 96e6e379..8cee307e 100644 --- a/source/plugins/stargazers/index.mjs +++ b/source/plugins/stargazers/index.mjs @@ -7,7 +7,7 @@ export default async function({login, graphql, data, imports, q, queries, accoun return null //Load inputs - imports.metadata.plugins.stargazers.inputs({data, account, q}) + let {"charts.type":_charts} = imports.metadata.plugins.stargazers.inputs({data, account, q}) //Retrieve stargazers from graphql api console.debug(`metrics/compute/${login}/plugins > stargazers > querying api`) @@ -57,8 +57,44 @@ export default async function({login, graphql, data, imports, q, queries, accoun //Months name const months = ["", "Jan.", "Feb.", "Mar.", "Apr.", "May", "June", "July", "Aug.", "Sep.", "Oct.", "Nov.", "Dec."] + //Generating charts + let charts = null + if (_charts === "chartist") { + console.debug(`metrics/compute/${login}/plugins > stargazers > generating charts`) + charts = await Promise.all([{data:total, low:total.min, high:total.max}, {data:increments, ref:0, low:increments.min, high:increments.max, sign:true}].map(({data:{dates:set}, high, low, ref, sign = false}) => imports.chartist("line", { + width:480 * (1 + data.large), + height:160, + showPoint:true, + axisX:{showGrid:false}, + axisY:{showLabel:false, offset: 20, labelInterpolationFnc:value => imports.format(value, {sign}), high, low, referenceValue: ref}, + showArea:true, + fullWidth: true, + }, { + labels:Object.keys(set).map((date, i, a) => { + const day = date.substring(date.length-2) + if ((i === 0)||((a[i+1])&&(date.substring(0, 7) !== a[i+1].substring(0, 7)))) + return `${day} ${months[Number(date.substring(5, 7))]}` + return day + }), + series:[Object.values(set)], + }))) + data.postscripts.push(`(${function (format) { + document.querySelectorAll(".stargazers .chartist").forEach((chart, sign) => { + chart.querySelectorAll(".stargazers .chartist .ct-point").forEach(node => { + const [x, y, value] = ["x1", "y1", "ct:value"].map(attribute => node.getAttribute(attribute)) + const text = document.createElementNS("http://www.w3.org/2000/svg", "text") + text.setAttributeNS(null, "x", x) + text.setAttributeNS(null, "y", y-5) + text.setAttributeNS(null, "class", "ct-post") + text.appendChild(document.createTextNode(format(value, {sign}))) + node.parentNode.append(text) + }) + }) + }})(${imports.format.toString()})`) + } + //Results - return {total, increments, months} + return {total, increments, months, charts} } //Handle errors catch (error) { diff --git a/source/plugins/stargazers/metadata.yml b/source/plugins/stargazers/metadata.yml index 99e3e2a4..e7ec57b2 100644 --- a/source/plugins/stargazers/metadata.yml +++ b/source/plugins/stargazers/metadata.yml @@ -2,7 +2,8 @@ name: "✨ Stargazers over last weeks" category: github description: This plugin displays your stargazers evolution across all of your repositories over the last two weeks. examples: - default: https://github.com/lowlighter/metrics/blob/examples/metrics.plugin.stargazers.svg + +chartist charts: https://github.com/lowlighter/metrics/blob/examples/metrics.plugin.stargazers.chartist.svg + classic charts: https://github.com/lowlighter/metrics/blob/examples/metrics.plugin.stargazers.svg index: 10 supports: - user @@ -16,3 +17,14 @@ inputs: description: Enable stargazers plugin type: boolean default: no + + plugin_stargazers_charts_type: + description: | + Charts display type + - `classic`: `
` based charts, simple and lightweight + - `chartist`: `` based charts, smooth + type: string + default: + values: + - classic + - chartist \ No newline at end of file diff --git a/source/templates/classic/partials/stargazers.ejs b/source/templates/classic/partials/stargazers.ejs index bec2b278..7917bfde 100644 --- a/source/templates/classic/partials/stargazers.ejs +++ b/source/templates/classic/partials/stargazers.ejs @@ -1,5 +1,5 @@ <% if (plugins.stargazers) { %> -
+

Stargazers over the last two weeks @@ -11,35 +11,43 @@

<% } else { %>
-
+

Total stargazers

-
- <% { let previous = null; for (const [date, value] of Object.entries(plugins.stargazers.total.dates)) { const p = 0.05+0.95*(value-plugins.stargazers.total.min)/(plugins.stargazers.total.max-plugins.stargazers.total.min || 1); const [y, m, d] = date.split("-").map(Number) %> -
- <%= (value-(previous ?? 0)) ? f(value) : "" %> -
- <%= d %> - <% if ((previous === null)||(d === 1)) { %> -
<%= plugins.stargazers.months[m] %>
- <% } %> -
- <% previous = value } } %> -
+ <% if (plugins.stargazers.charts) { %> + <%- plugins.stargazers.charts[0] %> + <% } else { %> +
+ <% { let previous = null; for (const [date, value] of Object.entries(plugins.stargazers.total.dates)) { const p = 0.05+0.95*(value-plugins.stargazers.total.min)/(plugins.stargazers.total.max-plugins.stargazers.total.min || 1); const [y, m, d] = date.split("-").map(Number) %> +
+ <%= (value-(previous ?? 0)) ? f(value) : "" %> +
+ <%= d %> + <% if ((previous === null)||(d === 1)) { %> +
<%= plugins.stargazers.months[m] %>
+ <% } %> +
+ <% previous = value } } %> +
+ <% } %>
-
+

New stargazers per day

-
- <% { let previous = null; for (const [date, value] of Object.entries(plugins.stargazers.increments.dates)) { const p = value/(plugins.stargazers.increments.max || 1); const [y, m, d] = date.split("-").map(Number) %> -
- <%= value != 0 ? f(value, {sign:true}) : "" %> -
- <%= d %> - <% if ((previous === null)||(d === 1)) { %> -
<%= plugins.stargazers.months[m] %>
- <% } %> -
- <% previous = value } } %> -
+ <% if (plugins.stargazers.charts) { %> + <%- plugins.stargazers.charts[1] %> + <% } else { %> +
+ <% { let previous = null; for (const [date, value] of Object.entries(plugins.stargazers.increments.dates)) { const p = value/(plugins.stargazers.increments.max || 1); const [y, m, d] = date.split("-").map(Number) %> +
+ <%= value != 0 ? f(value, {sign:true}) : "" %> +
+ <%= d %> + <% if ((previous === null)||(d === 1)) { %> +
<%= plugins.stargazers.months[m] %>
+ <% } %> +
+ <% previous = value } } %> +
+ <% } %>
<% } %> diff --git a/source/templates/classic/style.css b/source/templates/classic/style.css index 630b7328..f03ee8a8 100644 --- a/source/templates/classic/style.css +++ b/source/templates/classic/style.css @@ -335,6 +335,15 @@ padding-left: 37px; } +/* Stargazers */ +/* purgecss ignore */ + .stargazers .chartist .ct-post { + fill: rgba(127, 127, 127, 0.8) !important; + color: rgba(127, 127, 127, 0.8) !important; + font-size: 9px; + text-anchor: middle; + } + /* Footer */ footer { margin-top: 8px; @@ -628,7 +637,7 @@ } .chart-bars .entry { - flex: 1 1 0; + flex-grow: 1; display: flex; flex-direction: column; align-items: center; @@ -637,7 +646,7 @@ } .chart-bars .entry .value { - font-size: 7px; + font-size: 6px; } .chart-bars .entry .empty { @@ -1332,10 +1341,18 @@ } /* Charts */ + .ct-chart { + display: flex; + margin-left: -12px; + } .ct-line { stroke-width: 2px !important; stroke: #58A6FF !important; } + .ct-point { + stroke: #106cbc !important; + stroke-width: 2px !important; + } .ct-area { fill: #58A6FF !important; } @@ -1343,6 +1360,9 @@ fill: rgba(127, 127, 127, 0.8) !important; color: rgba(127, 127, 127, 0.8) !important; } + .ct-label.ct-horizontal { + text-anchor: middle !important; + } .ct-grid { stroke: rgba(127, 127, 127, 0.4) !important; }