@reportforge/playwright-pdf 0.23.0 → 0.25.0

package/dist/templates/partials/charts.hbs

@@ -1,433 +1,433 @@
-{{#if options.showCharts}}
-{{#if options.heroTrend}}
-{{> chart-summary-grid options=options}}
-{{> chart-trend-card options=options}}
-{{else}}
-{{> chart-summary-grid options=options}}
-{{> chart-trend-card options=options}}
-{{/if}}
-
-{{#if options.showTrend}}
-{{#if charts.flakinessTable}}
-<div class="flakiness-card">
-  <div class="flakiness-card__header">
-    <span class="flakiness-card__title">Top flaky tests &mdash; last {{charts.flakinessTable.[0].totalRuns}} runs</span>
-  </div>
-  <table class="flakiness-table">
-    <thead>
-      <tr>
-        <th class="flakiness-table__test">Test</th>
-        <th class="flakiness-table__rate">Flake rate</th>
-        <th class="flakiness-table__count">Runs flaky</th>
-        <th class="flakiness-table__spark">History</th>
-      </tr>
-    </thead>
-    <tbody>
-      {{#each charts.flakinessTable}}
-      <tr>
-        <td class="flakiness-table__test" title="{{this.title}}">{{this.title}}</td>
-        <td class="flakiness-table__rate">{{this.flakeRate}}%</td>
-        <td class="flakiness-table__count">{{this.flakeCount}} / {{this.totalRuns}}</td>
-        <td class="flakiness-table__spark">
-          <span class="flaky-spark">
-            {{#each this.sparkline}}
-            <span class="flaky-dot{{#if this}} flaky-dot--hit{{/if}}"></span>
-            {{/each}}
-          </span>
-        </td>
-      </tr>
-      {{/each}}
-    </tbody>
-  </table>
-</div>
-{{/if}}
-{{/if}}
-
-<script>
-(function() {
-  // Chart.js measures axis labels with whatever font is available at chart
-  // construction. The embedded Inter loads asynchronously (even from a data:
-  // URI), so charts built immediately measure ticks with narrower fallback
-  // metrics and then PAINT with Inter — wide-glyph labels overflowed their
-  // measured gutter by a character. Build every chart only after the document
-  // fonts settle; the timeout fallback guards a hung fonts.ready so
-  // __chartsReady can never be starved.
-  var inited = false;
-  function initCharts() {
-  if (inited) return;
-  inited = true;
-  var remaining = 0;
-  function chartDone() { if (--remaining === 0) window.__chartsReady = true; }
-
-  var passed   = {{charts.passRate.passed}};
-  var failed   = {{charts.passRate.failed}};
-  var timedOut = {{charts.passRate.timedOut}};
-  var skipped  = {{charts.passRate.skipped}};
-  var flaky    = {{charts.passRate.flaky}};
-  // Pass rate is the canonical server-side stat (flaky counts as pass, denominator
-  // is every test) so the doughnut centre can never disagree with the KPI strip.
-  var passRate = {{stats.passRate}};
-
-  /* ── Centre-text plugin for the doughnut ─────────────────────────────── */
-  var centerTextPlugin = {
-    id: 'centerText',
-    afterDatasetsDraw: function(chart) {
-      if (chart.canvas.id !== 'passRateChart') return;
-      var ctx = chart.ctx;
-      var cx  = (chart.chartArea.left + chart.chartArea.right)  / 2;
-      var cy  = (chart.chartArea.top  + chart.chartArea.bottom) / 2;
-      /* Size the centre text off the doughnut's actual hole, not a fixed px
-         value — the executive template's 150px canvas has a smaller inner
-         radius than the 186px canvas used elsewhere, and fixed 28px/9px text
-         overran the hole into the ring on the smaller size. */
-      var arc = chart.getDatasetMeta(0).data[0];
-      var innerRadius = (arc && arc.innerRadius) ? arc.innerRadius : 50;
-      var mainSize = Math.max(15, Math.round(innerRadius * 0.56));
-      var subSize  = Math.max(7,  Math.round(innerRadius * 0.175));
-      ctx.save();
-      ctx.textAlign    = 'center';
-      ctx.textBaseline = 'middle';
-      /* large percentage */
-      ctx.font      = '700 ' + mainSize + 'px "Source Serif Pro", Georgia, serif';
-      ctx.fillStyle = '#1F1F1C';
-      ctx.fillText(passRate + '%', cx, cy - mainSize * 0.24);
-      /* label below */
-      ctx.font      = '600 ' + subSize + 'px Inter, sans-serif';
-      ctx.fillStyle = '#8C8B82';
-      ctx.fillText('PASS RATE', cx, cy + mainSize * 0.46);
-      ctx.restore();
-    }
-  };
-  Chart.register(centerTextPlugin);
-
-  /* ── Pass rate doughnut ──────────────────────────────────────────────── */
-  // Rounded, slightly separated segments + a thicker ring read as a designed
-  // gauge rather than a default pie; the centre % (drawn by centerTextPlugin)
-  // scales off the inner radius automatically.
-  remaining += 1;
-  new Chart(document.getElementById('passRateChart'), {
-    type: 'doughnut',
-    data: {
-      labels: ['Passed', 'Failed', 'Timed Out', 'Skipped', 'Flaky'],
-      datasets: [{
-        data: [passed, failed, timedOut, skipped, flaky],
-        backgroundColor: ['#3F7D58', '#C3553C', '#B5803A', '#7A786E', '#CA8A04'],
-        borderColor:     ['#FAF9F5', '#FAF9F5', '#FAF9F5', '#FAF9F5', '#FAF9F5'],
-        borderWidth: 1,
-        borderRadius: 5,
-        spacing: 2,
-        hoverOffset: 4
-      }]
-    },
-    options: {
-      responsive: false,
-      cutout: '64%',
-      plugins: {
-        legend: {
-          position: 'bottom',
-          labels: {
-            font: { size: 9, family: 'Inter, sans-serif' },
-            color: '#5A5A52', padding: 10,
-            usePointStyle: true, pointStyle: 'circle', boxWidth: 7, boxHeight: 7
-          }
-        }
-      },
-      animation: { onComplete: chartDone }
-    }
-  });
-
-  /* ── Horizontal suite results bar(s) ─────────────────────────────────── */
-  // Muted per-suite total at each bar's end — the count is scannable without
-  // tracing gridlines. Guarded by canvas id prefix so it fires on every suite
-  // chunk canvas and nothing else.
-  var suiteTotalsPlugin = {
-    id: 'suiteBarTotals',
-    afterDatasetsDraw: function(chart) {
-      if (chart.canvas.id.indexOf('suitesBarChart') !== 0) return;
-      var ctx = chart.ctx;
-      for (var i = 0; i < chart.data.labels.length; i++) {
-        var total = 0;
-        chart.data.datasets.forEach(function(ds) { total += ds.data[i] || 0; });
-        if (!total) continue;
-        var y = chart.scales.y.getPixelForValue(i);
-        var x = chart.scales.x.getPixelForValue(total);
-        ctx.save();
-        ctx.font = '600 8.5px Inter, sans-serif';
-        ctx.fillStyle = '#8C8B82';
-        ctx.textAlign = 'left';
-        ctx.textBaseline = 'middle';
-        ctx.fillText(String(total), x + 5, y);
-        ctx.restore();
-      }
-    }
-  };
-  Chart.register(suiteTotalsPlugin);
-
-  // Shared config so the compact small-run card and the chunked large-run
-  // canvases render identically bar-for-bar.
-  function suiteChartConfig(labels, passed, failed, timedOut, skipped) {
-    return {
-      type: 'bar',
-      data: {
-        labels: labels,
-        datasets: [
-          { label: 'Passed',    data: passed,   backgroundColor: '#3F7D58', borderRadius: 4 },
-          { label: 'Failed',    data: failed,   backgroundColor: '#C3553C', borderRadius: 4 },
-          { label: 'Timed Out', data: timedOut, backgroundColor: '#B5803A', borderRadius: 4 },
-          { label: 'Skipped',   data: skipped,  backgroundColor: '#7A786E', borderRadius: 4 }
-        ]
-      },
-      options: {
-        indexAxis: 'y',
-        responsive: false,
-        // Left: small gutter margin for the y labels (enlarging scale.width in
-        // afterFit is not honoured by the layout pass); exact fit comes from
-        // building charts after fonts.ready so tick measurement uses Inter.
-        // Right: room for the per-suite total drawn past the bar end.
-        layout: { padding: { left: 16, right: 22 } },
-        scales: {
-          x: {
-            stacked: true,
-            // maxTicksLimit instead of stepSize:1 — a suite with 40+ tests would
-            // otherwise spray 40+ ticks across the axis. precision:0 keeps the
-            // auto-chosen steps integral.
-            ticks: {
-              font: { size: 9, family: 'Inter, sans-serif' }, color: '#5A5A52',
-              maxTicksLimit: 12, precision: 0
-            },
-            grid:   { color: 'rgba(31,31,28,0.06)' },
-            border: { color: '#D6D4C8' }
-          },
-          y: {
-            stacked: true,
-            ticks: {
-              font: { size: 10, family: 'Inter, sans-serif' }, color: '#1F1F1C', autoSkip: false,
-              // Truncate only very long suite / describe labels; measurement runs
-              // post-fonts.ready so the gutter fits exactly what gets painted.
-              callback: function(value) {
-                var l = this.getLabelForValue(value);
-                return l.length > 24 ? l.slice(0, 23) + '…' : l;
-              }
-            },
-            grid:   { display: false },
-            border: { color: '#D6D4C8' }
-          }
-        },
-        plugins: {
-          legend: {
-            position: 'bottom',
-            labels: {
-              font: { size: 9, family: 'Inter, sans-serif' }, color: '#5A5A52',
-              padding: 12,
-              usePointStyle: true, pointStyle: 'circle', boxWidth: 7, boxHeight: 7
-            }
-          }
-        },
-        animation: { onComplete: chartDone }
-      }
-    };
-  }
-
-  {{#if suiteChartLarge}}
-  // Large run: one canvas per page-sized chunk — every suite keeps its own bar.
-  var suiteChunks = [
-    {{#each suiteChartChunks}}
-    {
-      id: '{{this.canvasId}}',
-      labels:   [{{{jsonArray this.rows 'label'}}}],
-      passed:   [{{{jsonArray this.rows 'passed'}}}],
-      failed:   [{{{jsonArray this.rows 'failed'}}}],
-      timedOut: [{{{jsonArray this.rows 'timedOut'}}}],
-      skipped:  [{{{jsonArray this.rows 'skipped'}}}]
-    }{{#unless @last}},{{/unless}}
-    {{/each}}
-  ];
-  remaining += suiteChunks.length;
-  suiteChunks.forEach(function(c) {
-    new Chart(document.getElementById(c.id), suiteChartConfig(c.labels, c.passed, c.failed, c.timedOut, c.skipped));
-  });
-  {{else}}
-  remaining += 1;
-  new Chart(document.getElementById('suitesBarChart'), suiteChartConfig(
-    [{{{jsonArray charts.suiteResults 'label'}}}],
-    [{{{jsonArray charts.suiteResults 'passed'}}}],
-    [{{{jsonArray charts.suiteResults 'failed'}}}],
-    [{{{jsonArray charts.suiteResults 'timedOut'}}}],
-    [{{{jsonArray charts.suiteResults 'skipped'}}}]
-  ));
-  {{/if}}
-
-  {{#if options.showTrend}}{{#if charts.trend}}
-  // entries are newest-first in storage; reverse for oldest-left (chronological) display
-  var trendRaw    = {{{safeJsonData charts.trend.entries}}};
-  var trendData   = trendRaw.slice().reverse();
-  var trendMonths = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
-
-  var trendLabels = trendData.map(function(e) {
-    var d = new Date(e.timestamp);
-    return trendMonths[d.getMonth()] + ' ' + d.getDate() + ' ' +
-      String(d.getHours()).padStart(2, '0') + ':' + String(d.getMinutes()).padStart(2, '0');
-  });
-  var trendRates = trendData.map(function(e) { return e.passRate; });
-
-  // Points colored by verdict for instant visual distinction across runs
-  var trendPointColors = trendData.map(function(e) {
-    return e.verdict === 'passed'  ? '#3F7D58' :
-           e.verdict === 'failed'  ? '#C3553C' :
-           e.verdict === 'partial' ? '#CA8A04' : '#7A786E';
-  });
-
-  // Smart y-axis: pad above/below the actual data range so variation is readable
-  // rather than a flat line at the top of a 0–100 axis when all runs pass at 96%.
-  // Pick the step FIRST, then snap the bounds to multiples of that step, so every
-  // tick (min, min+step, … max) is a round value — never 45% / 70% from a min that
-  // isn't itself a multiple of the step. Clamps to 0/100 keep the bounds round too.
-  var minRate = Math.min.apply(null, trendRates);
-  var maxRate = Math.max.apply(null, trendRates);
-  var yPad    = Math.max(8, Math.round((maxRate - minRate) * 0.4));
-  var rawMin  = Math.max(0,   minRate - yPad);
-  var rawMax  = Math.min(100, maxRate + yPad);
-  var yStep   = (rawMax - rawMin) <= 20 ? 5 : (rawMax - rawMin) <= 50 ? 10 : 25;
-  var yMin    = Math.max(0,   Math.floor(rawMin / yStep) * yStep);
-  var yMax    = Math.min(100, Math.ceil(rawMax / yStep) * yStep);
-
-  // Data-label plugin: renders pass-rate % above each point.
-  // Canvas ID guard prevents firing on the doughnut and bar charts.
-  var trendLabelPlugin = {
-    id: 'trendLabels',
-    afterDatasetsDraw: function(chart) {
-      if (chart.canvas.id !== 'trendChart') return;
-      var ctx2d = chart.ctx;
-      var meta  = chart.getDatasetMeta(0);
-      var ds    = chart.data.datasets[0];
-      meta.data.forEach(function(pt, i) {
-        ctx2d.save();
-        ctx2d.font         = '700 8.5px Inter, sans-serif';
-        ctx2d.fillStyle    = trendPointColors[i];
-        ctx2d.textAlign    = 'center';
-        ctx2d.textBaseline = 'bottom';
-        ctx2d.fillText(ds.data[i] + '%', pt.x, pt.y - 7);
-        ctx2d.restore();
-      });
-    }
-  };
-  Chart.register(trendLabelPlugin);
-
-  var trendCanvas = document.getElementById('trendChart');
-  var trendCtx2d  = trendCanvas.getContext('2d');
-  var trendGrad   = trendCtx2d.createLinearGradient(0, 0, 0, 160);
-  trendGrad.addColorStop(0, 'rgba(204,120,92,0.22)');
-  trendGrad.addColorStop(1, 'rgba(204,120,92,0.02)');
-
-  remaining += 1;
-  new Chart(trendCanvas, {
-    type: 'line',
-    data: {
-      labels: trendLabels,
-      datasets: [{
-        data:                 trendRates,
-        borderColor:          '#CC785C',
-        backgroundColor:      trendGrad,
-        fill:                 true,
-        tension:              0.35,
-        pointRadius:          5,
-        pointBackgroundColor: trendPointColors,
-        pointBorderColor:     '#FFFFFF',
-        pointBorderWidth:     2,
-        borderWidth:          2,
-      }]
-    },
-    options: {
-      animation: { onComplete: chartDone },
-      responsive: false,
-      layout: { padding: { top: 22, right: 10, bottom: 4, left: 4 } },
-      scales: {
-        y: {
-          min: yMin,
-          max: yMax,
-          ticks: {
-            callback: function(v) { return v + '%'; },
-            font:  { size: 8.5, family: 'Inter, sans-serif' },
-            color: '#8C8B82',
-            stepSize: yStep,
-          },
-          grid:   { color: 'rgba(31,31,28,0.07)' },
-          border: { color: 'transparent' },
-        },
-        x: {
-          ticks: {
-            font:        { size: 8, family: 'Inter, sans-serif' },
-            color:       '#8C8B82',
-            maxRotation: 0,
-          },
-          grid:   { display: false },
-          border: { color: '#E5E3D8' },
-        }
-      },
-      plugins: { legend: { display: false } },
-    }
-  });
-
-  // Run history table — oldest-first (top→bottom matches chart left→right).
-  // Built via DOM methods (not innerHTML) so no HTML-injection risk.
-  var histEl = document.getElementById('run-history-table');
-  if (histEl) {
-    trendData.forEach(function(e) {
-      var d       = new Date(e.timestamp);
-      var dateStr = trendMonths[d.getMonth()] + ' ' + d.getDate() + ', ' + d.getFullYear() +
-                    ' · ' +
-                    String(d.getHours()).padStart(2, '0') + ':' + String(d.getMinutes()).padStart(2, '0');
-      var durStr  = e.duration >= 60000
-        ? Math.floor(e.duration / 60000) + 'm ' + Math.round((e.duration % 60000) / 1000) + 's'
-        : (e.duration / 1000).toFixed(1) + 's';
-      var dotCls  = e.verdict === 'passed'  ? 'verdict-passed'  :
-                    e.verdict === 'failed'  ? 'verdict-failed'  :
-                    e.verdict === 'partial' ? 'verdict-partial' : 'verdict-unknown';
-      var rateCls = e.verdict === 'passed'  ? 'rh-rate--pass'    :
-                    e.verdict === 'failed'  ? 'rh-rate--fail'    :
-                    e.verdict === 'partial' ? 'rh-rate--partial' : '';
-
-      var row = document.createElement('div');
-      row.className = 'rh-item rh-item--' + e.verdict;
-
-      var dot = document.createElement('span');
-      dot.className = 'rh-dot verdict-dot ' + dotCls;
-      row.appendChild(dot);
-
-      var dateEl = document.createElement('span');
-      dateEl.className = 'rh-date';
-      dateEl.textContent = dateStr;
-      row.appendChild(dateEl);
-
-      var rateEl = document.createElement('span');
-      rateEl.className = 'rh-rate' + (rateCls ? ' ' + rateCls : '');
-      rateEl.textContent = e.passRate + '%';
-      row.appendChild(rateEl);
-
-      var testsEl = document.createElement('span');
-      testsEl.className = 'rh-tests';
-      testsEl.textContent = e.total + ' tests';
-      row.appendChild(testsEl);
-
-      var durEl = document.createElement('span');
-      durEl.className = 'rh-dur';
-      durEl.textContent = durStr;
-      row.appendChild(durEl);
-
-      histEl.appendChild(row);
-    });
-  }
-  {{/if}}{{/if}}
-  }
-
-  if (document.fonts && document.fonts.ready && typeof document.fonts.ready.then === 'function') {
-    document.fonts.ready.then(initCharts, initCharts);
-    setTimeout(initCharts, 3000);
-  } else {
-    initCharts();
-  }
-})();
-</script>
-{{else}}
-<script>window.__chartsReady = true;</script>
-{{/if}}
+{{#if options.showCharts}}
+{{#if options.heroTrend}}
+{{> chart-summary-grid options=options}}
+{{> chart-trend-card options=options}}
+{{else}}
+{{> chart-summary-grid options=options}}
+{{> chart-trend-card options=options}}
+{{/if}}
+
+{{#if options.showTrend}}
+{{#if charts.flakinessTable}}
+<div class="flakiness-card">
+  <div class="flakiness-card__header">
+    <span class="flakiness-card__title">Top flaky tests &mdash; last {{charts.flakinessTable.[0].totalRuns}} runs</span>
+  </div>
+  <table class="flakiness-table">
+    <thead>
+      <tr>
+        <th class="flakiness-table__test">Test</th>
+        <th class="flakiness-table__rate">Flake rate</th>
+        <th class="flakiness-table__count">Runs flaky</th>
+        <th class="flakiness-table__spark">History</th>
+      </tr>
+    </thead>
+    <tbody>
+      {{#each charts.flakinessTable}}
+      <tr>
+        <td class="flakiness-table__test" title="{{this.title}}">{{this.title}}</td>
+        <td class="flakiness-table__rate">{{this.flakeRate}}%</td>
+        <td class="flakiness-table__count">{{this.flakeCount}} / {{this.totalRuns}}</td>
+        <td class="flakiness-table__spark">
+          <span class="flaky-spark">
+            {{#each this.sparkline}}
+            <span class="flaky-dot{{#if this}} flaky-dot--hit{{/if}}"></span>
+            {{/each}}
+          </span>
+        </td>
+      </tr>
+      {{/each}}
+    </tbody>
+  </table>
+</div>
+{{/if}}
+{{/if}}
+
+<script>
+(function() {
+  // Chart.js measures axis labels with whatever font is available at chart
+  // construction. The embedded Inter loads asynchronously (even from a data:
+  // URI), so charts built immediately measure ticks with narrower fallback
+  // metrics and then PAINT with Inter — wide-glyph labels overflowed their
+  // measured gutter by a character. Build every chart only after the document
+  // fonts settle; the timeout fallback guards a hung fonts.ready so
+  // __chartsReady can never be starved.
+  var inited = false;
+  function initCharts() {
+  if (inited) return;
+  inited = true;
+  var remaining = 0;
+  function chartDone() { if (--remaining === 0) window.__chartsReady = true; }
+
+  var passed   = {{charts.passRate.passed}};
+  var failed   = {{charts.passRate.failed}};
+  var timedOut = {{charts.passRate.timedOut}};
+  var skipped  = {{charts.passRate.skipped}};
+  var flaky    = {{charts.passRate.flaky}};
+  // Pass rate is the canonical server-side stat (flaky counts as pass, denominator
+  // is every test) so the doughnut centre can never disagree with the KPI strip.
+  var passRate = {{stats.passRate}};
+
+  /* ── Centre-text plugin for the doughnut ─────────────────────────────── */
+  var centerTextPlugin = {
+    id: 'centerText',
+    afterDatasetsDraw: function(chart) {
+      if (chart.canvas.id !== 'passRateChart') return;
+      var ctx = chart.ctx;
+      var cx  = (chart.chartArea.left + chart.chartArea.right)  / 2;
+      var cy  = (chart.chartArea.top  + chart.chartArea.bottom) / 2;
+      /* Size the centre text off the doughnut's actual hole, not a fixed px
+         value — the executive template's 150px canvas has a smaller inner
+         radius than the 186px canvas used elsewhere, and fixed 28px/9px text
+         overran the hole into the ring on the smaller size. */
+      var arc = chart.getDatasetMeta(0).data[0];
+      var innerRadius = (arc && arc.innerRadius) ? arc.innerRadius : 50;
+      var mainSize = Math.max(15, Math.round(innerRadius * 0.56));
+      var subSize  = Math.max(7,  Math.round(innerRadius * 0.175));
+      ctx.save();
+      ctx.textAlign    = 'center';
+      ctx.textBaseline = 'middle';
+      /* large percentage */
+      ctx.font      = '700 ' + mainSize + 'px "Source Serif Pro", Georgia, serif';
+      ctx.fillStyle = '#1F1F1C';
+      ctx.fillText(passRate + '%', cx, cy - mainSize * 0.24);
+      /* label below */
+      ctx.font      = '600 ' + subSize + 'px Inter, sans-serif';
+      ctx.fillStyle = '#8C8B82';
+      ctx.fillText('PASS RATE', cx, cy + mainSize * 0.46);
+      ctx.restore();
+    }
+  };
+  Chart.register(centerTextPlugin);
+
+  /* ── Pass rate doughnut ──────────────────────────────────────────────── */
+  // Rounded, slightly separated segments + a thicker ring read as a designed
+  // gauge rather than a default pie; the centre % (drawn by centerTextPlugin)
+  // scales off the inner radius automatically.
+  remaining += 1;
+  new Chart(document.getElementById('passRateChart'), {
+    type: 'doughnut',
+    data: {
+      labels: ['Passed', 'Failed', 'Timed Out', 'Skipped', 'Flaky'],
+      datasets: [{
+        data: [passed, failed, timedOut, skipped, flaky],
+        backgroundColor: ['#3F7D58', '#C3553C', '#B5803A', '#7A786E', '#CA8A04'],
+        borderColor:     ['#FAF9F5', '#FAF9F5', '#FAF9F5', '#FAF9F5', '#FAF9F5'],
+        borderWidth: 1,
+        borderRadius: 5,
+        spacing: 2,
+        hoverOffset: 4
+      }]
+    },
+    options: {
+      responsive: false,
+      cutout: '64%',
+      plugins: {
+        legend: {
+          position: 'bottom',
+          labels: {
+            font: { size: 9, family: 'Inter, sans-serif' },
+            color: '#5A5A52', padding: 10,
+            usePointStyle: true, pointStyle: 'circle', boxWidth: 7, boxHeight: 7
+          }
+        }
+      },
+      animation: { onComplete: chartDone }
+    }
+  });
+
+  /* ── Horizontal suite results bar(s) ─────────────────────────────────── */
+  // Muted per-suite total at each bar's end — the count is scannable without
+  // tracing gridlines. Guarded by canvas id prefix so it fires on every suite
+  // chunk canvas and nothing else.
+  var suiteTotalsPlugin = {
+    id: 'suiteBarTotals',
+    afterDatasetsDraw: function(chart) {
+      if (chart.canvas.id.indexOf('suitesBarChart') !== 0) return;
+      var ctx = chart.ctx;
+      for (var i = 0; i < chart.data.labels.length; i++) {
+        var total = 0;
+        chart.data.datasets.forEach(function(ds) { total += ds.data[i] || 0; });
+        if (!total) continue;
+        var y = chart.scales.y.getPixelForValue(i);
+        var x = chart.scales.x.getPixelForValue(total);
+        ctx.save();
+        ctx.font = '600 8.5px Inter, sans-serif';
+        ctx.fillStyle = '#8C8B82';
+        ctx.textAlign = 'left';
+        ctx.textBaseline = 'middle';
+        ctx.fillText(String(total), x + 5, y);
+        ctx.restore();
+      }
+    }
+  };
+  Chart.register(suiteTotalsPlugin);
+
+  // Shared config so the compact small-run card and the chunked large-run
+  // canvases render identically bar-for-bar.
+  function suiteChartConfig(labels, passed, failed, timedOut, skipped) {
+    return {
+      type: 'bar',
+      data: {
+        labels: labels,
+        datasets: [
+          { label: 'Passed',    data: passed,   backgroundColor: '#3F7D58', borderRadius: 4 },
+          { label: 'Failed',    data: failed,   backgroundColor: '#C3553C', borderRadius: 4 },
+          { label: 'Timed Out', data: timedOut, backgroundColor: '#B5803A', borderRadius: 4 },
+          { label: 'Skipped',   data: skipped,  backgroundColor: '#7A786E', borderRadius: 4 }
+        ]
+      },
+      options: {
+        indexAxis: 'y',
+        responsive: false,
+        // Left: small gutter margin for the y labels (enlarging scale.width in
+        // afterFit is not honoured by the layout pass); exact fit comes from
+        // building charts after fonts.ready so tick measurement uses Inter.
+        // Right: room for the per-suite total drawn past the bar end.
+        layout: { padding: { left: 16, right: 22 } },
+        scales: {
+          x: {
+            stacked: true,
+            // maxTicksLimit instead of stepSize:1 — a suite with 40+ tests would
+            // otherwise spray 40+ ticks across the axis. precision:0 keeps the
+            // auto-chosen steps integral.
+            ticks: {
+              font: { size: 9, family: 'Inter, sans-serif' }, color: '#5A5A52',
+              maxTicksLimit: 12, precision: 0
+            },
+            grid:   { color: 'rgba(31,31,28,0.06)' },
+            border: { color: '#D6D4C8' }
+          },
+          y: {
+            stacked: true,
+            ticks: {
+              font: { size: 10, family: 'Inter, sans-serif' }, color: '#1F1F1C', autoSkip: false,
+              // Truncate only very long suite / describe labels; measurement runs
+              // post-fonts.ready so the gutter fits exactly what gets painted.
+              callback: function(value) {
+                var l = this.getLabelForValue(value);
+                return l.length > 24 ? l.slice(0, 23) + '…' : l;
+              }
+            },
+            grid:   { display: false },
+            border: { color: '#D6D4C8' }
+          }
+        },
+        plugins: {
+          legend: {
+            position: 'bottom',
+            labels: {
+              font: { size: 9, family: 'Inter, sans-serif' }, color: '#5A5A52',
+              padding: 12,
+              usePointStyle: true, pointStyle: 'circle', boxWidth: 7, boxHeight: 7
+            }
+          }
+        },
+        animation: { onComplete: chartDone }
+      }
+    };
+  }
+
+  {{#if suiteChartLarge}}
+  // Large run: one canvas per page-sized chunk — every suite keeps its own bar.
+  var suiteChunks = [
+    {{#each suiteChartChunks}}
+    {
+      id: '{{this.canvasId}}',
+      labels:   [{{{jsonArray this.rows 'label'}}}],
+      passed:   [{{{jsonArray this.rows 'passed'}}}],
+      failed:   [{{{jsonArray this.rows 'failed'}}}],
+      timedOut: [{{{jsonArray this.rows 'timedOut'}}}],
+      skipped:  [{{{jsonArray this.rows 'skipped'}}}]
+    }{{#unless @last}},{{/unless}}
+    {{/each}}
+  ];
+  remaining += suiteChunks.length;
+  suiteChunks.forEach(function(c) {
+    new Chart(document.getElementById(c.id), suiteChartConfig(c.labels, c.passed, c.failed, c.timedOut, c.skipped));
+  });
+  {{else}}
+  remaining += 1;
+  new Chart(document.getElementById('suitesBarChart'), suiteChartConfig(
+    [{{{jsonArray charts.suiteResults 'label'}}}],
+    [{{{jsonArray charts.suiteResults 'passed'}}}],
+    [{{{jsonArray charts.suiteResults 'failed'}}}],
+    [{{{jsonArray charts.suiteResults 'timedOut'}}}],
+    [{{{jsonArray charts.suiteResults 'skipped'}}}]
+  ));
+  {{/if}}
+
+  {{#if options.showTrend}}{{#if charts.trend}}
+  // entries are newest-first in storage; reverse for oldest-left (chronological) display
+  var trendRaw    = {{{safeJsonData charts.trend.entries}}};
+  var trendData   = trendRaw.slice().reverse();
+  var trendMonths = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
+
+  var trendLabels = trendData.map(function(e) {
+    var d = new Date(e.timestamp);
+    return trendMonths[d.getMonth()] + ' ' + d.getDate() + ' ' +
+      String(d.getHours()).padStart(2, '0') + ':' + String(d.getMinutes()).padStart(2, '0');
+  });
+  var trendRates = trendData.map(function(e) { return e.passRate; });
+
+  // Points colored by verdict for instant visual distinction across runs
+  var trendPointColors = trendData.map(function(e) {
+    return e.verdict === 'passed'  ? '#3F7D58' :
+           e.verdict === 'failed'  ? '#C3553C' :
+           e.verdict === 'partial' ? '#CA8A04' : '#7A786E';
+  });
+
+  // Smart y-axis: pad above/below the actual data range so variation is readable
+  // rather than a flat line at the top of a 0–100 axis when all runs pass at 96%.
+  // Pick the step FIRST, then snap the bounds to multiples of that step, so every
+  // tick (min, min+step, … max) is a round value — never 45% / 70% from a min that
+  // isn't itself a multiple of the step. Clamps to 0/100 keep the bounds round too.
+  var minRate = Math.min.apply(null, trendRates);
+  var maxRate = Math.max.apply(null, trendRates);
+  var yPad    = Math.max(8, Math.round((maxRate - minRate) * 0.4));
+  var rawMin  = Math.max(0,   minRate - yPad);
+  var rawMax  = Math.min(100, maxRate + yPad);
+  var yStep   = (rawMax - rawMin) <= 20 ? 5 : (rawMax - rawMin) <= 50 ? 10 : 25;
+  var yMin    = Math.max(0,   Math.floor(rawMin / yStep) * yStep);
+  var yMax    = Math.min(100, Math.ceil(rawMax / yStep) * yStep);
+
+  // Data-label plugin: renders pass-rate % above each point.
+  // Canvas ID guard prevents firing on the doughnut and bar charts.
+  var trendLabelPlugin = {
+    id: 'trendLabels',
+    afterDatasetsDraw: function(chart) {
+      if (chart.canvas.id !== 'trendChart') return;
+      var ctx2d = chart.ctx;
+      var meta  = chart.getDatasetMeta(0);
+      var ds    = chart.data.datasets[0];
+      meta.data.forEach(function(pt, i) {
+        ctx2d.save();
+        ctx2d.font         = '700 8.5px Inter, sans-serif';
+        ctx2d.fillStyle    = trendPointColors[i];
+        ctx2d.textAlign    = 'center';
+        ctx2d.textBaseline = 'bottom';
+        ctx2d.fillText(ds.data[i] + '%', pt.x, pt.y - 7);
+        ctx2d.restore();
+      });
+    }
+  };
+  Chart.register(trendLabelPlugin);
+
+  var trendCanvas = document.getElementById('trendChart');
+  var trendCtx2d  = trendCanvas.getContext('2d');
+  var trendGrad   = trendCtx2d.createLinearGradient(0, 0, 0, 160);
+  trendGrad.addColorStop(0, 'rgba(204,120,92,0.22)');
+  trendGrad.addColorStop(1, 'rgba(204,120,92,0.02)');
+
+  remaining += 1;
+  new Chart(trendCanvas, {
+    type: 'line',
+    data: {
+      labels: trendLabels,
+      datasets: [{
+        data:                 trendRates,
+        borderColor:          '#CC785C',
+        backgroundColor:      trendGrad,
+        fill:                 true,
+        tension:              0.35,
+        pointRadius:          5,
+        pointBackgroundColor: trendPointColors,
+        pointBorderColor:     '#FFFFFF',
+        pointBorderWidth:     2,
+        borderWidth:          2,
+      }]
+    },
+    options: {
+      animation: { onComplete: chartDone },
+      responsive: false,
+      layout: { padding: { top: 22, right: 10, bottom: 4, left: 4 } },
+      scales: {
+        y: {
+          min: yMin,
+          max: yMax,
+          ticks: {
+            callback: function(v) { return v + '%'; },
+            font:  { size: 8.5, family: 'Inter, sans-serif' },
+            color: '#8C8B82',
+            stepSize: yStep,
+          },
+          grid:   { color: 'rgba(31,31,28,0.07)' },
+          border: { color: 'transparent' },
+        },
+        x: {
+          ticks: {
+            font:        { size: 8, family: 'Inter, sans-serif' },
+            color:       '#8C8B82',
+            maxRotation: 0,
+          },
+          grid:   { display: false },
+          border: { color: '#E5E3D8' },
+        }
+      },
+      plugins: { legend: { display: false } },
+    }
+  });
+
+  // Run history table — oldest-first (top→bottom matches chart left→right).
+  // Built via DOM methods (not innerHTML) so no HTML-injection risk.
+  var histEl = document.getElementById('run-history-table');
+  if (histEl) {
+    trendData.forEach(function(e) {
+      var d       = new Date(e.timestamp);
+      var dateStr = trendMonths[d.getMonth()] + ' ' + d.getDate() + ', ' + d.getFullYear() +
+                    ' · ' +
+                    String(d.getHours()).padStart(2, '0') + ':' + String(d.getMinutes()).padStart(2, '0');
+      var durStr  = e.duration >= 60000
+        ? Math.floor(e.duration / 60000) + 'm ' + Math.round((e.duration % 60000) / 1000) + 's'
+        : (e.duration / 1000).toFixed(1) + 's';
+      var dotCls  = e.verdict === 'passed'  ? 'verdict-passed'  :
+                    e.verdict === 'failed'  ? 'verdict-failed'  :
+                    e.verdict === 'partial' ? 'verdict-partial' : 'verdict-unknown';
+      var rateCls = e.verdict === 'passed'  ? 'rh-rate--pass'    :
+                    e.verdict === 'failed'  ? 'rh-rate--fail'    :
+                    e.verdict === 'partial' ? 'rh-rate--partial' : '';
+
+      var row = document.createElement('div');
+      row.className = 'rh-item rh-item--' + e.verdict;
+
+      var dot = document.createElement('span');
+      dot.className = 'rh-dot verdict-dot ' + dotCls;
+      row.appendChild(dot);
+
+      var dateEl = document.createElement('span');
+      dateEl.className = 'rh-date';
+      dateEl.textContent = dateStr;
+      row.appendChild(dateEl);
+
+      var rateEl = document.createElement('span');
+      rateEl.className = 'rh-rate' + (rateCls ? ' ' + rateCls : '');
+      rateEl.textContent = e.passRate + '%';
+      row.appendChild(rateEl);
+
+      var testsEl = document.createElement('span');
+      testsEl.className = 'rh-tests';
+      testsEl.textContent = e.total + ' tests';
+      row.appendChild(testsEl);
+
+      var durEl = document.createElement('span');
+      durEl.className = 'rh-dur';
+      durEl.textContent = durStr;
+      row.appendChild(durEl);
+
+      histEl.appendChild(row);
+    });
+  }
+  {{/if}}{{/if}}
+  }
+
+  if (document.fonts && document.fonts.ready && typeof document.fonts.ready.then === 'function') {
+    document.fonts.ready.then(initCharts, initCharts);
+    setTimeout(initCharts, 3000);
+  } else {
+    initCharts();
+  }
+})();
+</script>
+{{else}}
+<script>window.__chartsReady = true;</script>
+{{/if}}