From a9e442c3dad613c3652bf4adc4878910ce6aee0d Mon Sep 17 00:00:00 2001 From: Simon Lecoq <22963968+lowlighter@users.noreply.github.com> Date: Wed, 15 Mar 2023 19:16:22 -0400 Subject: [PATCH] feat(plugins/stargazers): add `plugin_stargazers_days` and migrate to d3 --- source/plugins/stargazers/examples.yml | 6 +-- source/plugins/stargazers/index.mjs | 44 +++++-------------- source/plugins/stargazers/metadata.yml | 19 ++++++-- source/templates/classic/partials/habits.ejs | 6 +-- .../templates/classic/partials/stargazers.ejs | 4 +- source/templates/classic/style.css | 9 ---- .../repository/partials/stargazers.ejs | 6 +-- tests/cases/stargazers.plugin.yml | 4 +- 8 files changed, 39 insertions(+), 59 deletions(-) diff --git a/source/plugins/stargazers/examples.yml b/source/plugins/stargazers/examples.yml index 030a3c51..18cc2056 100644 --- a/source/plugins/stargazers/examples.yml +++ b/source/plugins/stargazers/examples.yml @@ -6,14 +6,14 @@ base: "" plugin_stargazers: yes -- name: Using chartist charts +- name: Using graph charts uses: lowlighter/metrics@latest with: - filename: metrics.plugin.stargazers.chartist.svg + filename: metrics.plugin.stargazers.graph.svg token: ${{ secrets.METRICS_TOKEN }} base: "" plugin_stargazers: yes - plugin_stargazers_charts_type: chartist + plugin_stargazers_charts_type: graph - name: With worldmap uses: lowlighter/metrics@latest diff --git a/source/plugins/stargazers/index.mjs b/source/plugins/stargazers/index.mjs index 2316e4fd..bfe03f83 100644 --- a/source/plugins/stargazers/index.mjs +++ b/source/plugins/stargazers/index.mjs @@ -7,7 +7,11 @@ export default async function({login, graphql, data, imports, q, queries, accoun return null //Load inputs - let {charts: _charts, "charts.type": _charts_type, worldmap: _worldmap, "worldmap.sample": _worldmap_sample} = imports.metadata.plugins.stargazers.inputs({data, account, q}) + let {days, charts: _charts, "charts.type": _charts_type, worldmap: _worldmap, "worldmap.sample": _worldmap_sample} = imports.metadata.plugins.stargazers.inputs({data, account, q}) + if (!days) { + days = Math.abs(parseInt((new Date() - new Date(data.user.createdAt))/1000/60/60/24)) + console.debug(`metrics/compute/${login}/plugins > stargazers > set days to ${days}`) + } //Retrieve stargazers from graphql api console.debug(`metrics/compute/${login}/plugins > stargazers > querying api`) @@ -34,7 +38,6 @@ export default async function({login, graphql, data, imports, q, queries, accoun console.debug(`metrics/compute/${login}/plugins > stargazers > loaded ${dates.length} stargazers in total`) //Compute stargazers increments - const days = 14 * (1 + data.large / 2) const increments = {dates: Object.fromEntries([...new Array(days).fill(null).map((_, i) => [new Date(Date.now() - i * 24 * 60 * 60 * 1000).toISOString().slice(0, 10), 0]).reverse()]), max: NaN, min: NaN} dates .map(date => date.toISOString().slice(0, 10)) @@ -62,40 +65,13 @@ export default async function({login, graphql, data, imports, q, queries, accoun //Generating charts let charts = _charts ? true : null - if ((_charts_type === "chartist") && (imports.metadata.plugins.stargazers.extras("charts.type", {extras}))) { + if ((["graph", "chartist"].includes(_charts_type)) && (imports.metadata.plugins.stargazers.extras("charts.type", {extras}))) { 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)], + charts = await Promise.all([{data: total, low: total.min, high: total.max}, {data: increments, low: 0, high: increments.max, sign: true}].map(({data: {dates: set}, low, high, sign = false}) => + imports.Graph.timeline(Object.entries(set).map(([x, y]) => ({x:new Date(x), y, text:imports.format(y, {sign})})), {low, high, + match:(data, ticks) => data.filter(([x]) => ticks.map(t => t.toISOString().slice(0, 10)).includes(x.toISOString().slice(0, 10))), }) )) - 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()})`) } //Generating worldmap @@ -106,7 +82,7 @@ export default async function({login, graphql, data, imports, q, queries, accoun } //Results - return {total, increments, months, charts, worldmap} + return {total, increments, months, charts, worldmap, days} } //Handle errors catch (error) { diff --git a/source/plugins/stargazers/metadata.yml b/source/plugins/stargazers/metadata.yml index 670705c0..b49166fc 100644 --- a/source/plugins/stargazers/metadata.yml +++ b/source/plugins/stargazers/metadata.yml @@ -4,7 +4,7 @@ description: | This plugin displays stargazers evolution across affiliated repositories. examples: +classic charts: 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 + graph charts: https://github.com/lowlighter/metrics/blob/examples/metrics.plugin.stargazers.graph.svg +worldmap: https://github.com/lowlighter/metrics/blob/examples/metrics.plugin.stargazers.worldmap.svg index: 2 supports: @@ -21,6 +21,16 @@ inputs: type: boolean default: no + plugin_stargazers_days: + description: | + Time range + + If set to `0` the account registration date will be used. + type: number + min: 0 + zero: see description + default: 14 + plugin_stargazers_charts: description: | Charts @@ -34,14 +44,17 @@ inputs: Charts display type - `classic`: `
` based charts, simple and lightweight - - `chartist`: `` based charts, smooth + - `graph`: `` based charts, smooth + + > ⚠️ `chartist` option has been deprecated and is now equivalent to `graph` type: string default: classic values: - classic + - graph - chartist extras: - - metrics.npm.optional.chartist + - metrics.npm.optional.d3 plugin_stargazers_worldmap: description: | diff --git a/source/templates/classic/partials/habits.ejs b/source/templates/classic/partials/habits.ejs index 1ae66d8a..41c5c3bb 100644 --- a/source/templates/classic/partials/habits.ejs +++ b/source/templates/classic/partials/habits.ejs @@ -42,7 +42,7 @@

Commit activity per hour of day

<% if (Array.isArray(plugins.habits.charts)) { %> -
+
<%- plugins.habits.charts[0] %>
<% } else { %> @@ -72,7 +72,7 @@

Commit activity per day of week

<% if (Array.isArray(plugins.habits.charts)) { %> -
+
<%- plugins.habits.charts[1] %>
<% } else { %> @@ -92,7 +92,7 @@

Language activity

<% if (Array.isArray(plugins.habits.charts)) { %> -
+
<%- plugins.habits.charts[2] %>
<% } else { %> diff --git a/source/templates/classic/partials/stargazers.ejs b/source/templates/classic/partials/stargazers.ejs index 61faa095..baba4535 100644 --- a/source/templates/classic/partials/stargazers.ejs +++ b/source/templates/classic/partials/stargazers.ejs @@ -12,7 +12,7 @@ <% } else { %> <% if (plugins.stargazers.charts) { %>
-
+

Total stargazers

<% if (Array.isArray(plugins.stargazers.charts)) { %> <%- plugins.stargazers.charts[0] %> @@ -31,7 +31,7 @@
<% } %>
-
+

New stargazers per day

<% if (Array.isArray(plugins.stargazers.charts)) { %> <%- plugins.stargazers.charts[1] %> diff --git a/source/templates/classic/style.css b/source/templates/classic/style.css index 2215d1ed..441efa65 100644 --- a/source/templates/classic/style.css +++ b/source/templates/classic/style.css @@ -356,15 +356,6 @@ padding-left: 37px; } -/* Chartist */ -/* purgecss ignore */ - .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; diff --git a/source/templates/repository/partials/stargazers.ejs b/source/templates/repository/partials/stargazers.ejs index 7917bfde..e355284b 100644 --- a/source/templates/repository/partials/stargazers.ejs +++ b/source/templates/repository/partials/stargazers.ejs @@ -2,7 +2,7 @@

- Stargazers over the last two weeks + Stargazers

<% if (plugins.stargazers.error) { %>
@@ -11,7 +11,7 @@
<% } else { %>
-
+

Total stargazers

<% if (plugins.stargazers.charts) { %> <%- plugins.stargazers.charts[0] %> @@ -30,7 +30,7 @@
<% } %>
-
+

New stargazers per day

<% if (plugins.stargazers.charts) { %> <%- plugins.stargazers.charts[1] %> diff --git a/tests/cases/stargazers.plugin.yml b/tests/cases/stargazers.plugin.yml index f0e669f4..8d24aaca 100644 --- a/tests/cases/stargazers.plugin.yml +++ b/tests/cases/stargazers.plugin.yml @@ -5,12 +5,12 @@ plugin_stargazers: 'yes' use_mocked_data: 'yes' verify: 'yes' -- name: ✨ Stargazers - Using chartist charts +- name: ✨ Stargazers - Using graph charts uses: lowlighter/metrics@latest with: token: MOCKED_TOKEN plugin_stargazers: 'yes' - plugin_stargazers_charts_type: chartist + plugin_stargazers_charts_type: graph use_mocked_data: 'yes' verify: 'yes' - name: ✨ Stargazers - With worldmap