feat(plugins/stargazers): add plugin_stargazers_charts_type (#816) [skip ci]

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

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) {

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`: `<div>` based charts, simple and lightweight
+      - `chartist`: `<svg>` based charts, smooth
+    type: string
+    default:
+    values:
+      - classic
+      - chartist

source/templates/classic/partials/stargazers.ejs

@@ -1,5 +1,5 @@
 <% if (plugins.stargazers) { %>
-  <section>
+  <section class="stargazers">
     <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="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>
       Stargazers over the last two weeks
@@ -11,35 +11,43 @@
       </div>
     <% } else { %>
       <div class="row margin-bottom">
-        <section class="column chart">
+        <section class="column chart chartist">
           <h3>Total stargazers</h3>
-          <div class="chart-bars">
-            <% { 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) %>
-              <div class="entry">
-                <span class="value"><%= (value-(previous ?? 0)) ? f(value) : "" %></span>
-                <div class="bar" style="height: <%= p*50 %>px; background-color: var(--color-calendar-graph-day-L<%= Math.ceil(p/0.25) %>-bg)"></div>
-                <%= d %>
-                <% if ((previous === null)||(d === 1)) { %>
-                  <div class="bottom"><%= plugins.stargazers.months[m] %></div>
-                <% } %>
-              </div>
-            <% previous = value } } %>
-          </div>
+          <% if (plugins.stargazers.charts) { %>
+            <%- plugins.stargazers.charts[0] %>
+          <% } else { %>
+            <div class="chart-bars">
+              <% { 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) %>
+                <div class="entry">
+                  <span class="value"><%= (value-(previous ?? 0)) ? f(value) : "" %></span>
+                  <div class="bar" style="height: <%= p*50 %>px; background-color: var(--color-calendar-graph-day-L<%= Math.ceil(p/0.25) %>-bg)"></div>
+                  <%= d %>
+                  <% if ((previous === null)||(d === 1)) { %>
+                    <div class="bottom"><%= plugins.stargazers.months[m] %></div>
+                  <% } %>
+                </div>
+              <% previous = value } } %>
+            </div>
+          <% } %>
         </section>
-        <section class="column chart">
+        <section class="column chart chartist">
           <h3>New stargazers per day</h3>
-          <div class="chart-bars">
-            <% { 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) %>
-              <div class="entry">
-                <span class="value"><%= value != 0 ? f(value, {sign:true}) : "" %></span>
-                <div class="bar" style="height: <%= p*50 %>px; background-color: var(--color-calendar-graph-day-L<%= Math.ceil(p/0.25) %>-bg)"></div>
-                <%= d %>
-                <% if ((previous === null)||(d === 1)) { %>
-                <div class="bottom"><%= plugins.stargazers.months[m] %></div>
-                <% } %>
-              </div>
-            <% previous = value } } %>
-          </div>
+          <% if (plugins.stargazers.charts) { %>
+            <%- plugins.stargazers.charts[1] %>
+          <% } else { %>
+            <div class="chart-bars">
+              <% { 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) %>
+                <div class="entry">
+                  <span class="value"><%= value != 0 ? f(value, {sign:true}) : "" %></span>
+                  <div class="bar" style="height: <%= p*50 %>px; background-color: var(--color-calendar-graph-day-L<%= Math.ceil(p/0.25) %>-bg)"></div>
+                  <%= d %>
+                  <% if ((previous === null)||(d === 1)) { %>
+                  <div class="bottom"><%= plugins.stargazers.months[m] %></div>
+                  <% } %>
+                </div>
+              <% previous = value } } %>
+            </div>
+          <% } %>
         </section>
       </div>
     <% } %>

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;
   }