Skip to content

Commit ce5101a

Browse files
lowlighterlowlighter
authored
feat(plugins/stargazers): add plugin_stargazers_charts_type (#816) [skip ci]
1 parent f461117 commit ce5101a

File tree

5 files changed

+118
-33
lines changed

5 files changed

+118
-33
lines changed

‎source/plugins/stargazers/examples.yml

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,16 @@
1-
- name: Last weeks stargazers
1+
- name: Using classic charts
22
uses: lowlighter/metrics@latest
33
with:
44
filename: metrics.plugin.stargazers.svg
55
token: ${{ secrets.METRICS_TOKEN }}
66
base: ""
77
plugin_stargazers: yes
8+
9+
- name: Using chartist charts
10+
uses: lowlighter/metrics@latest
11+
with:
12+
filename: metrics.plugin.stargazers.chartist.svg
13+
token: ${{ secrets.METRICS_TOKEN }}
14+
base: ""
15+
plugin_stargazers: yes
16+
plugin_stargazers_charts_type: chartist

‎source/plugins/stargazers/index.mjs

Lines changed: 38 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export default async function({login, graphql, data, imports, q, queries, accoun
77
return null
88

99
//Load inputs
10-
imports.metadata.plugins.stargazers.inputs({data, account, q})
10+
let {"charts.type":_charts} = imports.metadata.plugins.stargazers.inputs({data, account, q})
1111

1212
//Retrieve stargazers from graphql api
1313
console.debug(`metrics/compute/${login}/plugins > stargazers > querying api`)
@@ -57,8 +57,44 @@ export default async function({login, graphql, data, imports, q, queries, accoun
5757
//Months name
5858
const months = ["", "Jan.", "Feb.", "Mar.", "Apr.", "May", "June", "July", "Aug.", "Sep.", "Oct.", "Nov.", "Dec."]
5959

60+
//Generating charts
61+
let charts = null
62+
if (_charts === "chartist") {
63+
console.debug(`metrics/compute/${login}/plugins > stargazers > generating charts`)
64+
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", {
65+
width:480 * (1 + data.large),
66+
height:160,
67+
showPoint:true,
68+
axisX:{showGrid:false},
69+
axisY:{showLabel:false, offset: 20, labelInterpolationFnc:value => imports.format(value, {sign}), high, low, referenceValue: ref},
70+
showArea:true,
71+
fullWidth: true,
72+
}, {
73+
labels:Object.keys(set).map((date, i, a) => {
74+
const day = date.substring(date.length-2)
75+
if ((i === 0)||((a[i+1])&&(date.substring(0, 7) !== a[i+1].substring(0, 7))))
76+
return `${day} ${months[Number(date.substring(5, 7))]}`
77+
return day
78+
}),
79+
series:[Object.values(set)],
80+
})))
81+
data.postscripts.push(`(${function (format) {
82+
document.querySelectorAll(".stargazers .chartist").forEach((chart, sign) => {
83+
chart.querySelectorAll(".stargazers .chartist .ct-point").forEach(node => {
84+
const [x, y, value] = ["x1", "y1", "ct:value"].map(attribute => node.getAttribute(attribute))
85+
const text = document.createElementNS("http://www.w3.org/2000/svg", "text")
86+
text.setAttributeNS(null, "x", x)
87+
text.setAttributeNS(null, "y", y-5)
88+
text.setAttributeNS(null, "class", "ct-post")
89+
text.appendChild(document.createTextNode(format(value, {sign})))
90+
node.parentNode.append(text)
91+
})
92+
})
93+
}})(${imports.format.toString()})`)
94+
}
95+
6096
//Results
61-
return {total, increments, months}
97+
return {total, increments, months, charts}
6298
}
6399
//Handle errors
64100
catch (error) {

‎source/plugins/stargazers/metadata.yml

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@ name: "✨ Stargazers over last weeks"
22
category: github
33
description: This plugin displays your stargazers evolution across all of your repositories over the last two weeks.
44
examples:
5-
default: https://github.com/lowlighter/metrics/blob/examples/metrics.plugin.stargazers.svg
5+
+chartist charts: https://github.com/lowlighter/metrics/blob/examples/metrics.plugin.stargazers.chartist.svg
6+
classic charts: https://github.com/lowlighter/metrics/blob/examples/metrics.plugin.stargazers.svg
67
index: 10
78
supports:
89
- user
@@ -16,3 +17,14 @@ inputs:
1617
description: Enable stargazers plugin
1718
type: boolean
1819
default: no
20+
21+
plugin_stargazers_charts_type:
22+
description: |
23+
Charts display type
24+
- `classic`: `<div>` based charts, simple and lightweight
25+
- `chartist`: `<svg>` based charts, smooth
26+
type: string
27+
default:
28+
values:
29+
- classic
30+
- chartist

‎source/templates/classic/partials/stargazers.ejs

Lines changed: 35 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<% if (plugins.stargazers) { %>
2-
<section>
2+
<section class="stargazers">
33
<h2 class="field">
44
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z"></path></svg>
55
Stargazers over the last two weeks
@@ -11,35 +11,43 @@
1111
</div>
1212
<% } else { %>
1313
<div class="row margin-bottom">
14-
<section class="column chart">
14+
<section class="column chart chartist">
1515
<h3>Total stargazers</h3>
16-
<div class="chart-bars">
17-
<% { 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) %>
18-
<div class="entry">
19-
<span class="value"><%= (value-(previous ?? 0)) ? f(value) : "" %></span>
20-
<div class="bar" style="height: <%= p*50 %>px; background-color: var(--color-calendar-graph-day-L<%= Math.ceil(p/0.25) %>-bg)"></div>
21-
<%= d %>
22-
<% if ((previous === null)||(d === 1)) { %>
23-
<div class="bottom"><%= plugins.stargazers.months[m] %></div>
24-
<% } %>
25-
</div>
26-
<% previous = value } } %>
27-
</div>
16+
<% if (plugins.stargazers.charts) { %>
17+
<%- plugins.stargazers.charts[0] %>
18+
<% } else { %>
19+
<div class="chart-bars">
20+
<% { 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) %>
21+
<div class="entry">
22+
<span class="value"><%= (value-(previous ?? 0)) ? f(value) : "" %></span>
23+
<div class="bar" style="height: <%= p*50 %>px; background-color: var(--color-calendar-graph-day-L<%= Math.ceil(p/0.25) %>-bg)"></div>
24+
<%= d %>
25+
<% if ((previous === null)||(d === 1)) { %>
26+
<div class="bottom"><%= plugins.stargazers.months[m] %></div>
27+
<% } %>
28+
</div>
29+
<% previous = value } } %>
30+
</div>
31+
<% } %>
2832
</section>
29-
<section class="column chart">
33+
<section class="column chart chartist">
3034
<h3>New stargazers per day</h3>
31-
<div class="chart-bars">
32-
<% { 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) %>
33-
<div class="entry">
34-
<span class="value"><%= value != 0 ? f(value, {sign:true}) : "" %></span>
35-
<div class="bar" style="height: <%= p*50 %>px; background-color: var(--color-calendar-graph-day-L<%= Math.ceil(p/0.25) %>-bg)"></div>
36-
<%= d %>
37-
<% if ((previous === null)||(d === 1)) { %>
38-
<div class="bottom"><%= plugins.stargazers.months[m] %></div>
39-
<% } %>
40-
</div>
41-
<% previous = value } } %>
42-
</div>
35+
<% if (plugins.stargazers.charts) { %>
36+
<%- plugins.stargazers.charts[1] %>
37+
<% } else { %>
38+
<div class="chart-bars">
39+
<% { 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) %>
40+
<div class="entry">
41+
<span class="value"><%= value != 0 ? f(value, {sign:true}) : "" %></span>
42+
<div class="bar" style="height: <%= p*50 %>px; background-color: var(--color-calendar-graph-day-L<%= Math.ceil(p/0.25) %>-bg)"></div>
43+
<%= d %>
44+
<% if ((previous === null)||(d === 1)) { %>
45+
<div class="bottom"><%= plugins.stargazers.months[m] %></div>
46+
<% } %>
47+
</div>
48+
<% previous = value } } %>
49+
</div>
50+
<% } %>
4351
</section>
4452
</div>
4553
<% } %>

‎source/templates/classic/style.css

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -335,6 +335,15 @@
335335
padding-left: 37px;
336336
}
337337

338+
/* Stargazers */
339+
/* purgecss ignore */
340+
.stargazers .chartist .ct-post {
341+
fill: rgba(127, 127, 127, 0.8) !important;
342+
color: rgba(127, 127, 127, 0.8) !important;
343+
font-size: 9px;
344+
text-anchor: middle;
345+
}
346+
338347
/* Footer */
339348
footer {
340349
margin-top: 8px;
@@ -628,7 +637,7 @@
628637
}
629638

630639
.chart-bars .entry {
631-
flex: 1 1 0;
640+
flex-grow: 1;
632641
display: flex;
633642
flex-direction: column;
634643
align-items: center;
@@ -637,7 +646,7 @@
637646
}
638647

639648
.chart-bars .entry .value {
640-
font-size: 7px;
649+
font-size: 6px;
641650
}
642651

643652
.chart-bars .entry .empty {
@@ -1332,17 +1341,28 @@
13321341
}
13331342

13341343
/* Charts */
1344+
.ct-chart {
1345+
display: flex;
1346+
margin-left: -12px;
1347+
}
13351348
.ct-line {
13361349
stroke-width: 2px !important;
13371350
stroke: #58A6FF !important;
13381351
}
1352+
.ct-point {
1353+
stroke: #106cbc !important;
1354+
stroke-width: 2px !important;
1355+
}
13391356
.ct-area {
13401357
fill: #58A6FF !important;
13411358
}
13421359
.ct-label {
13431360
fill: rgba(127, 127, 127, 0.8) !important;
13441361
color: rgba(127, 127, 127, 0.8) !important;
13451362
}
1363+
.ct-label.ct-horizontal {
1364+
text-anchor: middle !important;
1365+
}
13461366
.ct-grid {
13471367
stroke: rgba(127, 127, 127, 0.4) !important;
13481368
}

0 commit comments

Comments
 (0)