testilo 33.1.0 → 33.2.1

package/package.json

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

package/procs/track/ttp40/index.html

@@ -22,47 +22,80 @@
       <p>It tracks accessibility scores over time. A perfect score is 0. The tracking was performed by Testilo procedure <code>__tp__</code>.</p>
       <p>The results are presented first as a graph, and then as a table.</p>
       <h2>Results as a graph</h2>
+      <h3>Legend</h3>
+      <ul id="legendItems">
+        __legendItems__
+      </ul>
+      <h3>Line graph</h3>
       <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">
+      <script type="module" defer>
         const summaryReportJSON = '__summaryReportJSON__';
         const summaryReport = JSON.parse(summaryReportJSON);
         const graphData = [];
+        const targetIDs = {};
+        Array.from(document.getElementById('legendItems').children).forEach(li => {
+          const targetData = li.textContent.split(': ');
+          targetIDs[targetData[1]] = targetData[0];
+        });
         summaryReport.summaries.forEach(result => {
+          const {what} = result.sources.target;
           graphData.push({
-            target: result.sources.target.what,
+            targetID: targetIDs[what],
+            targetWhat: what,
             time: new Date(`20${result.endTime}Z`),
             score: result.score
           });
         });
         const svg = Plot.plot({
           style: 'overflow: visible;',
+          height: 600,
           y: {grid: true},
           marks: [
             Plot.ruleY([0]),
             Plot.lineY(graphData, {
               x: 'time',
               y: 'score',
-              stroke: 'target',
-              marker: 'circle-stroke'
+              stroke: 'targetID'
+            }),
+            Plot.dot(graphData, {
+              x: 'time',
+              y: 'score',
+              z: 'targetID',
+              r: 9
             }),
             Plot.text(graphData, {
               x: 'time',
               y: 'score',
-              z: 'target',
-              text: 'target',
+              z: 'targetID',
+              text: 'targetID',
+              textAnchor: 'middle'
+            }),
+            Plot.text(graphData, Plot.selectFirst({
+              x: 'time',
+              y: 'score',
+              z: 'targetID',
+              text: 'targetWhat',
+              textAnchor: 'start',
+              dx: 15
+            })),
+            Plot.text(graphData, Plot.selectLast({
+              x: 'time',
+              y: 'score',
+              z: 'targetID',
+              text: 'targetWhat',
               textAnchor: 'start',
-              dx: 3
-            })
+              dx: 15
+            }))
           ]
         });
         document.getElementById('graph').insertAdjacentElement('beforeend', svg);
       </script>
       <h2>Results as a table</h2>
-      <table class="allBorder secondCellRight thirdCellRight">
+      <table class="allBorder secondCellRight">
         <caption>Accessibility scores</caption>
         <thead>
           <tr>

package/procs/track/ttp40/index.js

@@ -28,24 +28,35 @@ const populateQuery = async (id, what, summaryReport, query) => {
   query.tp = trackerID;
   query.dateISO = getNowDate();
   query.dateSlash = getNowDateSlash();
-  // JSON of pruned summary report.
+  // JSON of summary report.
   const {summaries} = summaryReport;
-  summaries.forEach(result => {
-    delete result.sources.target.id;
-  });
   query.summaryReportJSON = JSON.stringify(summaryReport);
-  // For each score:
+  // Legend.
+
+  // Get an array of target descriptions and assign to each an ID.
   const rows = [];
-  const targetWhats = Array.from(new Set(summaries.map(result => result.sources.target.what))).sort();
+  const targets = Array
+  .from(new Set(summaries.map(result => result.sources.target.what)))
+  .sort()
+  .map((targetWhat, index) => [alphaNumOf(index), targetWhat]);
+  const targetIDs = {};
+  targets.forEach(target => {
+    targetIDs[target[1]] = target[0];
+  });
+  // Add legend items to the query.
+  const legendItems = targets.map(target => `<li>${target[0]}: ${target[1]}</li>`);
+  query.legendItems = legendItems.join('\n        ');
+  // For each result:
   summaries.forEach(result => {
-    // Create an HTML table row for it.
+    // Create a date-time cell.
     const timeCell = `<td>${result.endTime}</td>`;
+    // Create a score cell.
     const digestLinkDestination = digestURL.replace('__id__', result.id);
     const scoreCell = `<td><a href=${digestLinkDestination}>${result.score}</a></td>`;
+    // Create a target cell.
     const {target} = result.sources;
-    const targetID = alphaNumOf(targetWhats.indexOf(target.what));
     const targetLink = `<a href="${target.which}">${target.what}</a>`;
-    const targetCell = `<td>${targetID}: ${targetLink}</td>`;
+    const targetCell = `<td>${targetIDs[target.what]}: ${targetLink}</td>`;
     const row = `<tr>${[timeCell, scoreCell, targetCell].join('')}</tr>`;
     // Add the row to the array of rows.
     rows.push(row);

package/track.js

@@ -18,5 +18,6 @@ exports.track = async (tracker, what, summaryReport) => {
   // Use the tracker to create a tracking report.
   const id = getFileID(2);
   const trackingReport = await tracker(id, what, summaryReport);
+  // Return an ID usable for the report and the report.
   return [id, trackingReport];
 };