feat(plugins/stargazers): add plugin_stargazers_days and migrate to d3

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

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}) =>
+      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.chartist("line", {
+        imports.Graph.timeline(Object.entries(set).map(([x, y]) => ({x:new Date(x), y, text:imports.format(y, {sign})})), {low, high,
-          width: 480 * (1 + data.large),
+          match:(data, ticks) => data.filter(([x]) => ticks.map(t => t.toISOString().slice(0, 10)).includes(x.toISOString().slice(0, 10))),
-          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()})`)
     }
 
     //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) {

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`: `<div>` based charts, simple and lightweight
-      - `chartist`: `<svg>` based charts, smooth
+      - `graph`: `<svg>` 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: |

source/templates/classic/partials/habits.ejs

@@ -42,7 +42,7 @@
         <div class="column chart largeable">
           <h3>Commit activity per hour of day</h3>
           <% if (Array.isArray(plugins.habits.charts)) { %>
-            <div class="row margin-bottom chartist">
+            <div class="row margin-bottom">
               <%- plugins.habits.charts[0] %>
             </div>
           <% } else { %>
@@ -72,7 +72,7 @@
           <section class="column chart">
             <h3>Commit activity per day of week</h3>
             <% if (Array.isArray(plugins.habits.charts)) { %>
-              <div class="margin-bottom chartist">
+              <div class="margin-bottom">
                 <%- plugins.habits.charts[1] %>
               </div>
             <% } else { %>
@@ -92,7 +92,7 @@
           <section class="column chart">
             <h3>Language activity</h3>
             <% if (Array.isArray(plugins.habits.charts)) { %>
-              <div class="margin-bottom chartist">
+              <div class="margin-bottom">
                 <%- plugins.habits.charts[2] %>
               </div>
             <% } else { %>

source/templates/classic/partials/stargazers.ejs

@@ -12,7 +12,7 @@
     <% } else { %>
       <% if (plugins.stargazers.charts) { %>
         <div class="row margin-bottom">
-          <section class="column chart chartist">
+          <section class="column chart">
             <h3>Total stargazers</h3>
             <% if (Array.isArray(plugins.stargazers.charts)) { %>
               <%- plugins.stargazers.charts[0] %>
@@ -31,7 +31,7 @@
               </div>
             <% } %>
           </section>
-          <section class="column chart chartist">
+          <section class="column chart">
             <h3>New stargazers per day</h3>
             <% if (Array.isArray(plugins.stargazers.charts)) { %>
               <%- plugins.stargazers.charts[1] %>

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;

source/templates/repository/partials/stargazers.ejs

@@ -2,7 +2,7 @@
   <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
+      Stargazers
     </h2>
     <% if (plugins.stargazers.error) { %>
       <div class="field error">
@@ -11,7 +11,7 @@
       </div>
     <% } else { %>
       <div class="row margin-bottom">
-        <section class="column chart chartist">
+        <section class="column chart">
           <h3>Total stargazers</h3>
           <% if (plugins.stargazers.charts) { %>
             <%- plugins.stargazers.charts[0] %>
@@ -30,7 +30,7 @@
             </div>
           <% } %>
         </section>
-        <section class="column chart chartist">
+        <section class="column chart">
           <h3>New stargazers per day</h3>
           <% if (plugins.stargazers.charts) { %>
             <%- plugins.stargazers.charts[1] %>

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