testilo 27.0.0 → 28.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "testilo",
-  "version": "27.0.0",
+  "version": "28.0.0",
   "description": "Prepares and processes Testaro reports",
   "main": "call.js",
   "scripts": {

package/procs/track/ttp40/index.html

@@ -16,10 +16,51 @@
     <main>
       <header>
         <h1>Accessibility tracking report</h1>
-        <h2>Introduction</h2>
-        <p>This is tracking report <code>__id__</code>.</p>
-        <p>It tracks accessibility scores over time. A perfect score is 0. The tracking was performed by procedure __tp__.</p>
       </header>
+      <h2>Introduction</h2>
+      <p>This is tracking report <code>__id__</code>.</p>
+      <p>It tracks accessibility scores over time. A perfect score is 0. The tracking was performed by Testilo procedure __tp__.</p>
+      <p>The results are presented first as a graph, and then as a table.</p>
+      <h2>Results as a graph</h2>
+      <figure id="graph">
+        <figcaption>Accessibility scores</figcaption>
+      </figure>
+      <script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
+      <script src="https://cdn.jsdelivr.net/npm/@observablehq/plot@0.6"></script>
+      <script type="module">
+        const summaryJSON = '__summaryJSON__';
+        const summary = JSON.parse(summaryJSON);
+        const graphData = [];
+        summary.data.forEach(result => {
+          graphData.push({
+            target: result.target.what,
+            time: new Date(`20${result.endTime}Z`),
+            score: result.score
+          });
+        });
+        const svg = Plot.plot({
+          style: 'overflow: visible;',
+          y: {grid: true},
+          marks: [
+            Plot.ruleY([0]),
+            Plot.lineY(graphData, {
+              x: 'time',
+              y: 'score',
+              stroke: 'target'
+            }),
+            Plot.text(graphData, Plot.selectLast({
+              x: 'time',
+              y: 'score',
+              z: 'target',
+              text: 'target',
+              textAnchor: 'start',
+              dx: 3
+            }))
+          ]
+        });
+        document.getElementById('graph').insertAdjacentElement('beforeend', svg);
+      </script>
+      <h2>Results as a table</h2>
       <table class="allBorder secondCellRight thirdCellRight">
         <caption>Accessibility scores</caption>
         <thead>

package/procs/track/ttp40/index.js

@@ -21,12 +21,19 @@ const digestURL = process.env.DIGEST_URL;
 // FUNCTIONS
 
 // Adds parameters to a query for a tracking report.
-const populateQuery = (id, summary, query) => {
+const populateQuery = async (id, summary, query) => {
   // General parameters.
   query.id = id;
   query.tp = trackerID;
   query.dateISO = getNowDate();
   query.dateSlash = getNowDateSlash();
+  // JSON of pruned summary.
+  summary.data.forEach(result => {
+    delete result.id;
+    delete result.target.id;
+    delete result.target.which;
+  });
+  query.summaryJSON = JSON.stringify(summary);
   // For each score:
   const rows = [];
   const results = summary.data;
@@ -51,7 +58,7 @@ const populateQuery = (id, summary, query) => {
 exports.tracker = async (id, summary) => {
   // Create a query to replace placeholders.
   const query = {};
-  populateQuery(id, summary, query);
+  await populateQuery(id, summary, query);
   // Get the template.
   let template = await fs.readFile(`${__dirname}/index.html`, 'utf8');
   // Replace its placeholders.