feat(plugins/habits): add plugin_habits_charts_type (#938)

source/plugins/habits/index.mjs

@@ -10,7 +10,7 @@ export default async function({login, data, rest, imports, q, account}, {enabled
       return null
 
     //Load inputs
-    let {from, days, facts, charts, trim} = imports.metadata.plugins.habits.inputs({data, account, q}, defaults)
+    let {from, days, facts, charts, "charts.type":_charts, trim} = imports.metadata.plugins.habits.inputs({data, account, q}, defaults)
 
     //Initialization
     const habits = {facts, charts, trim, lines:{average:{chars:0}}, commits:{fetched:0, hour:NaN, hours:{}, day:NaN, days:{}}, indents:{style:"", spaces:0, tabs:0}, linguist:{available:false, ordered:[], languages:{}}}
@@ -109,7 +109,53 @@ export default async function({login, data, rest, imports, q, account}, {enabled
       }
       else
         console.debug(`metrics/compute/${login}/plugins > habits > linguist not available`)
+    }
 
+    //Generating charts with chartist
+    if (_charts === "chartist") {
+      console.debug(`metrics/compute/${login}/plugins > habits > generating charts`)
+      habits.charts = await Promise.all([
+        {type:"line", data:{...empty(24), ...Object.fromEntries(Object.entries(habits.commits.hours).filter(([k]) => !Number.isNaN(+k)))}, low:0, high:habits.commits.hours.max},
+        {type:"line", data:{...empty(7), ...Object.fromEntries(Object.entries(habits.commits.days).filter(([k]) => !Number.isNaN(+k)))}, low:0, high:habits.commits.days.max, labels:["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], half:true},
+        {type:"pie", data:habits.linguist.languages, half:true},
+      ].map(({type, data, high, low, ref, labels = {}, half = false}) => {
+        const options = {
+          width:480 * (half ? 0.45 : 1),
+          height:160,
+          fullWidth:true,
+        }
+        const values = {
+          labels:Object.keys(data).map(key => labels[key] ?? key),
+          series:Object.values(data)
+        }
+        if (type === "line") {
+          Object.assign(options, {
+            showPoint:true,
+            axisX:{showGrid:false},
+            axisY:{showLabel:false, offset:20, labelInterpolationFnc:value => imports.format(value), high, low, referenceValue:ref},
+            showArea:true,
+          })
+          Object.assign(values, {
+            series:[Object.values(data)]
+          })
+        }
+        return imports.chartist(type, options, values)
+      }))
+      data.postscripts.push(`(${function(format) {
+        document.querySelectorAll(".habits .chartist").forEach(chart => {
+          chart.querySelectorAll(".habits .chartist .ct-point").forEach(node => {
+            const [x, y, value] = ["x1", "y1", "ct:value"].map(attribute => node.getAttribute(attribute))
+            if (Number(value)) {
+              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)))
+              node.parentNode.append(text)
+            }
+          })
+        })
+      }})(${imports.format.toString()})`)
     }
 
     //Results
@@ -122,3 +168,8 @@ export default async function({login, data, rest, imports, q, account}, {enabled
     throw {error:{message:"An error occured", instance:error}}
   }
 }
+
+/**Initialize an empty object with values from 0 to n */
+function empty(n) {
+  return Object.fromEntries(new Array(n).fill(0).map((_, i) => [i, 0]))
+}

source/plugins/habits/metadata.yml

@@ -52,6 +52,17 @@ inputs:
     type: boolean
     default: no
 
+  plugin_habits_charts_type:
+    description: |
+      Charts display type
+      - `classic`: `<div>` based charts, simple and lightweight
+      - `chartist`: `<svg>` based charts, smooth
+    type: string
+    default: classic
+    values:
+      - classic
+      - chartist
+
   plugin_habits_trim:
     description: Trim unused hours on charts
     type: boolean