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