@reportforge/playwright-pdf 0.15.1 → 0.16.0

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 Format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
+## [0.16.0] - 2026-07-07
+
+### Added
+
+- **Every suite now gets its own bar in the Suite Results chart.** Runs with more than 10 suites switch from the compact side-by-side canvas to full-width charts (about 45 suites per page-sized canvas, "continued" across pages, declaration order preserved) — a run-wide per-suite coverage map instead of a silently truncated top-10. The Pass Rate doughnut takes the freed slot at 230px. A 150-suite safety ceiling (failures kept first, remainder summarised in a "+ N more suites" note under the chart) guards pathological runs only. Applies to every template that renders the charts section.
+- **Per-suite totals on the bar chart**: each bar ends with its muted test count, so counts read directly instead of via gridlines.
+
+### Changed
+
+- **Chart polish**: the pass-rate doughnut renders as a gauge (thicker ring, rounded and gapped segments), legends use colour dots, bars have rounded caps, and suite labels went from 9px to 10px with taller rows.
+
+### Fixed
+
+- **Chart axis labels no longer clip their first character.** Chart.js measured tick labels before the report's embedded Inter font finished loading and painted them after, so wide-glyph labels overflowed their measured gutter. Charts now initialise after `document.fonts.ready`, making measurement match paint exactly.
+- **X-axis no longer draws one tick per test** on suites with large test counts (`stepSize: 1` replaced with auto steps capped at 12, integers only).
+- `timedOut` counts are now carried through the suite-chart data type and the demo fixture's suite entries.
+
+---
+
 ## [0.15.1] - 2026-07-07
 
 ### Changed

package/README.md

@@ -47,7 +47,7 @@ Three templates, one reporter. Every PDF is fully offline: fonts, charts, and sc
 
 - **3 templates**: `minimal` (developer), `detailed` (QA team), `executive` (stakeholders)
 - **Detailed reports**: KPI dashboard, suite breakdown with inline failure detail (error, screenshot, root-cause chip) under each failed test, CI/CD environment
-- **Embedded Chart.js**: pass-rate doughnut + per-suite bar chart, bundled inline (no CDN)
+- **Embedded Chart.js**: pass-rate doughnut + per-suite bar chart, bundled inline (no CDN); every suite gets its own bar — large runs switch to full-width suite charts that continue across pages, so per-suite coverage and failures stay visible run-wide
 - **Self-contained PDFs**: screenshots, fonts, logos all embedded; share or archive with confidence
 - **Custom branding**: logo, primary/accent colours, watermark, PDF password encryption
 - **Dynamic filenames**: `{date}`, `{branch}`, `{status}` tokens in the output path

package/dist/cli/index.js

@@ -120,8 +120,9 @@ function makeProject(name, suites) {
 function suiteEntry(label, tests) {
   const passed = tests.filter((t) => t.status === "passed" || t.status === "flaky").length;
   const failed = tests.filter((t) => t.status === "failed").length;
+  const timedOut = tests.filter((t) => t.status === "timedOut").length;
   const skipped = tests.filter((t) => t.status === "skipped").length;
-  return { label, passed, failed, skipped };
+  return { label, passed, failed, timedOut, skipped };
 }
 function buildDemoFailures() {
   return [
@@ -6587,6 +6588,18 @@ function jsonForInlineScript(value) {
 function isUnknownValue(v) {
   return !v || v === "unknown";
 }
+function buildSuiteChartChunks(rows) {
+  const chunks = [];
+  for (let i = 0; i < rows.length; i += SUITE_CHART_ROWS_PER_CANVAS) {
+    const slice = rows.slice(i, i + SUITE_CHART_ROWS_PER_CANVAS);
+    chunks.push({
+      canvasId: `suitesBarChart${chunks.length}`,
+      heightPx: slice.length * SUITE_CHART_ROW_PX + SUITE_CHART_PAD_PX,
+      rows: slice
+    });
+  }
+  return chunks;
+}
 function deriveOptions(s) {
   return {
     showCharts: s.charts,
@@ -6598,7 +6611,7 @@ function deriveOptions(s) {
     showFullFailures: s.fullFailures
   };
 }
-var import_handlebars, import_fs, import_path, A4_HEIGHT_MM, PAGE_MARGIN_Y_MM, PX_PER_MM, PAGE_CONTENT_HEIGHT_PX, SLOW_MEDIAN_FACTOR, TemplateEngine;
+var import_handlebars, import_fs, import_path, A4_HEIGHT_MM, PAGE_MARGIN_Y_MM, PX_PER_MM, SUITE_CHART_SMALL_MAX, SUITE_CHART_ROWS_PER_CANVAS, SUITE_CHART_ROW_PX, SUITE_CHART_PAD_PX, PAGE_CONTENT_HEIGHT_PX, SLOW_MEDIAN_FACTOR, TemplateEngine;
 var init_engine = __esm({
   "src/templates/engine.ts"() {
     "use strict";
@@ -6613,6 +6626,10 @@ var init_engine = __esm({
     A4_HEIGHT_MM = 297;
     PAGE_MARGIN_Y_MM = 16;
     PX_PER_MM = 96 / 25.4;
+    SUITE_CHART_SMALL_MAX = 10;
+    SUITE_CHART_ROWS_PER_CANVAS = 45;
+    SUITE_CHART_ROW_PX = 18;
+    SUITE_CHART_PAD_PX = 56;
     PAGE_CONTENT_HEIGHT_PX = (A4_HEIGHT_MM - 2 * PAGE_MARGIN_Y_MM) * PX_PER_MM;
     SLOW_MEDIAN_FACTOR = 2;
     TemplateEngine = class {
@@ -6675,7 +6692,9 @@ var init_engine = __esm({
           templateCSS: "",
           chartjsScript: this.buildChartjsScript(),
           watermarkPageHeightPx: PAGE_CONTENT_HEIGHT_PX,
-          releaseGateTally: buildFailureTally(data.analysis)
+          releaseGateTally: buildFailureTally(data.analysis),
+          suiteChartLarge: data.charts.suiteResults.length > SUITE_CHART_SMALL_MAX,
+          suiteChartChunks: data.charts.suiteResults.length > SUITE_CHART_SMALL_MAX ? buildSuiteChartChunks(data.charts.suiteResults) : []
         };
       }
       buildContext(data, template, userSections, slowTestThreshold) {
@@ -6700,7 +6719,9 @@ var init_engine = __esm({
           templateCSS,
           chartjsScript: this.buildChartjsScript(),
           watermarkPageHeightPx: PAGE_CONTENT_HEIGHT_PX,
-          releaseGateTally: buildFailureTally(data.analysis)
+          releaseGateTally: buildFailureTally(data.analysis),
+          suiteChartLarge: data.charts.suiteResults.length > SUITE_CHART_SMALL_MAX,
+          suiteChartChunks: data.charts.suiteResults.length > SUITE_CHART_SMALL_MAX ? buildSuiteChartChunks(data.charts.suiteResults) : []
         };
       }
       buildChartjsScript() {

package/dist/index.js

@@ -11656,7 +11656,7 @@ init_cjs_shims();
 
 // src/collector/stats-utils.ts
 init_cjs_shims();
-var TOP_SUITES_FOR_CHART = 10;
+var SUITE_CHART_MAX_ROWS = 150;
 function resolveTestStatus(test, result) {
   if (!result) return "skipped";
   const expected = test.expectedStatus ?? "passed";
@@ -11700,15 +11700,40 @@ function toRow(s) {
     skipped: s.stats.skipped
   };
 }
+function capRows(rows, limit) {
+  if (rows.length <= limit) return { rows };
+  const size = (r) => r.passed + r.failed + r.timedOut + r.skipped;
+  const scored = [...rows].sort(
+    (a, b) => b.failed + b.timedOut - (a.failed + a.timedOut) || size(b) - size(a)
+  );
+  const rest = scored.slice(limit);
+  const sums = rest.reduce(
+    (acc, r) => ({
+      passed: acc.passed + r.passed,
+      failed: acc.failed + r.failed,
+      timedOut: acc.timedOut + r.timedOut,
+      skipped: acc.skipped + r.skipped
+    }),
+    { passed: 0, failed: 0, timedOut: 0, skipped: 0 }
+  );
+  const parts = [
+    sums.failed > 0 ? `${sums.failed} failed` : "",
+    sums.timedOut > 0 ? `${sums.timedOut} timed out` : "",
+    sums.passed > 0 ? `${sums.passed} passed` : "",
+    sums.skipped > 0 ? `${sums.skipped} skipped` : ""
+  ].filter(Boolean);
+  const overflowNote = `+ ${rest.length} more suites` + (parts.length > 0 ? `: ${parts.join(" \xB7 ")}` : "");
+  return { rows: scored.slice(0, limit), overflowNote };
+}
 function buildSuiteResults(projects, limit) {
   const top = projects.flatMap((p) => p.suites);
   if (top.length <= 1 && top[0] && top[0].suites.length > 0) {
     const file = top[0];
     const fs14 = statsFromTests(file.tests);
     const rootRow = file.tests.length > 0 ? [{ label: file.title, passed: fs14.passed, failed: fs14.failed, timedOut: fs14.timedOut, skipped: fs14.skipped }] : [];
-    return [...rootRow, ...file.suites.map(toRow)].slice(0, limit);
+    return capRows([...rootRow, ...file.suites.map(toRow)], limit);
   }
-  return top.map(toRow).slice(0, limit);
+  return capRows(top.map(toRow), limit);
 }
 
 // src/collector/SuiteWalker.ts
@@ -12053,7 +12078,7 @@ var DataCollector = class {
     };
   }
   buildChartData(stats, projects) {
-    const suiteResults = buildSuiteResults(projects, TOP_SUITES_FOR_CHART);
+    const { rows: suiteResults, overflowNote: suiteResultsOverflowNote } = buildSuiteResults(projects, SUITE_CHART_MAX_ROWS);
     return {
       passRate: {
         passed: stats.passed,
@@ -12062,7 +12087,8 @@ var DataCollector = class {
         skipped: stats.skipped,
         flaky: stats.flaky
       },
-      suiteResults
+      suiteResults,
+      suiteResultsOverflowNote
     };
   }
 };
@@ -12332,7 +12358,7 @@ var ShardMerger = class {
     };
   }
   buildCharts(stats, projects) {
-    const suiteResults = buildSuiteResults(projects, TOP_SUITES_FOR_CHART);
+    const { rows: suiteResults, overflowNote: suiteResultsOverflowNote } = buildSuiteResults(projects, SUITE_CHART_MAX_ROWS);
     return {
       passRate: {
         passed: stats.passed,
@@ -12342,7 +12368,8 @@ var ShardMerger = class {
         skipped: stats.skipped,
         flaky: stats.flaky
       },
-      suiteResults
+      suiteResults,
+      suiteResultsOverflowNote
     };
   }
 };
@@ -12376,11 +12403,27 @@ function jsonForInlineScript(value) {
 var A4_HEIGHT_MM = 297;
 var PAGE_MARGIN_Y_MM = 16;
 var PX_PER_MM = 96 / 25.4;
+var SUITE_CHART_SMALL_MAX = 10;
+var SUITE_CHART_ROWS_PER_CANVAS = 45;
+var SUITE_CHART_ROW_PX = 18;
+var SUITE_CHART_PAD_PX = 56;
 var PAGE_CONTENT_HEIGHT_PX = (A4_HEIGHT_MM - 2 * PAGE_MARGIN_Y_MM) * PX_PER_MM;
 function isUnknownValue(v) {
   return !v || v === "unknown";
 }
 var SLOW_MEDIAN_FACTOR = 2;
+function buildSuiteChartChunks(rows) {
+  const chunks = [];
+  for (let i = 0; i < rows.length; i += SUITE_CHART_ROWS_PER_CANVAS) {
+    const slice = rows.slice(i, i + SUITE_CHART_ROWS_PER_CANVAS);
+    chunks.push({
+      canvasId: `suitesBarChart${chunks.length}`,
+      heightPx: slice.length * SUITE_CHART_ROW_PX + SUITE_CHART_PAD_PX,
+      rows: slice
+    });
+  }
+  return chunks;
+}
 function deriveOptions(s) {
   return {
     showCharts: s.charts,
@@ -12452,7 +12495,9 @@ var TemplateEngine = class {
       templateCSS: "",
       chartjsScript: this.buildChartjsScript(),
       watermarkPageHeightPx: PAGE_CONTENT_HEIGHT_PX,
-      releaseGateTally: buildFailureTally(data.analysis)
+      releaseGateTally: buildFailureTally(data.analysis),
+      suiteChartLarge: data.charts.suiteResults.length > SUITE_CHART_SMALL_MAX,
+      suiteChartChunks: data.charts.suiteResults.length > SUITE_CHART_SMALL_MAX ? buildSuiteChartChunks(data.charts.suiteResults) : []
     };
   }
   buildContext(data, template, userSections, slowTestThreshold) {
@@ -12477,7 +12522,9 @@ var TemplateEngine = class {
       templateCSS,
       chartjsScript: this.buildChartjsScript(),
       watermarkPageHeightPx: PAGE_CONTENT_HEIGHT_PX,
-      releaseGateTally: buildFailureTally(data.analysis)
+      releaseGateTally: buildFailureTally(data.analysis),
+      suiteChartLarge: data.charts.suiteResults.length > SUITE_CHART_SMALL_MAX,
+      suiteChartChunks: data.charts.suiteResults.length > SUITE_CHART_SMALL_MAX ? buildSuiteChartChunks(data.charts.suiteResults) : []
     };
   }
   buildChartjsScript() {
@@ -14072,7 +14119,7 @@ var PdfReporter = class {
     this.liveConsole = false;
     this.options = parseOptions(rawOptions);
     this.dataCollector = new DataCollector(this.options.capture);
-    const version = true ? "0.15.1" : "0.x";
+    const version = true ? "0.16.0" : "0.x";
     logger.info(`@reportforge/playwright-pdf v${version} initialised`);
     this.licenseClient = new LicenseClient({
       licenseKey: this.options.licenseKey,

package/dist/index.mjs

@@ -11657,7 +11657,7 @@ init_esm_shims();
 
 // src/collector/stats-utils.ts
 init_esm_shims();
-var TOP_SUITES_FOR_CHART = 10;
+var SUITE_CHART_MAX_ROWS = 150;
 function resolveTestStatus(test, result) {
   if (!result) return "skipped";
   const expected = test.expectedStatus ?? "passed";
@@ -11701,15 +11701,40 @@ function toRow(s) {
     skipped: s.stats.skipped
   };
 }
+function capRows(rows, limit) {
+  if (rows.length <= limit) return { rows };
+  const size = (r) => r.passed + r.failed + r.timedOut + r.skipped;
+  const scored = [...rows].sort(
+    (a, b) => b.failed + b.timedOut - (a.failed + a.timedOut) || size(b) - size(a)
+  );
+  const rest = scored.slice(limit);
+  const sums = rest.reduce(
+    (acc, r) => ({
+      passed: acc.passed + r.passed,
+      failed: acc.failed + r.failed,
+      timedOut: acc.timedOut + r.timedOut,
+      skipped: acc.skipped + r.skipped
+    }),
+    { passed: 0, failed: 0, timedOut: 0, skipped: 0 }
+  );
+  const parts = [
+    sums.failed > 0 ? `${sums.failed} failed` : "",
+    sums.timedOut > 0 ? `${sums.timedOut} timed out` : "",
+    sums.passed > 0 ? `${sums.passed} passed` : "",
+    sums.skipped > 0 ? `${sums.skipped} skipped` : ""
+  ].filter(Boolean);
+  const overflowNote = `+ ${rest.length} more suites` + (parts.length > 0 ? `: ${parts.join(" \xB7 ")}` : "");
+  return { rows: scored.slice(0, limit), overflowNote };
+}
 function buildSuiteResults(projects, limit) {
   const top = projects.flatMap((p) => p.suites);
   if (top.length <= 1 && top[0] && top[0].suites.length > 0) {
     const file = top[0];
     const fs14 = statsFromTests(file.tests);
     const rootRow = file.tests.length > 0 ? [{ label: file.title, passed: fs14.passed, failed: fs14.failed, timedOut: fs14.timedOut, skipped: fs14.skipped }] : [];
-    return [...rootRow, ...file.suites.map(toRow)].slice(0, limit);
+    return capRows([...rootRow, ...file.suites.map(toRow)], limit);
   }
-  return top.map(toRow).slice(0, limit);
+  return capRows(top.map(toRow), limit);
 }
 
 // src/collector/SuiteWalker.ts
@@ -12054,7 +12079,7 @@ var DataCollector = class {
     };
   }
   buildChartData(stats, projects) {
-    const suiteResults = buildSuiteResults(projects, TOP_SUITES_FOR_CHART);
+    const { rows: suiteResults, overflowNote: suiteResultsOverflowNote } = buildSuiteResults(projects, SUITE_CHART_MAX_ROWS);
     return {
       passRate: {
         passed: stats.passed,
@@ -12063,7 +12088,8 @@ var DataCollector = class {
         skipped: stats.skipped,
         flaky: stats.flaky
       },
-      suiteResults
+      suiteResults,
+      suiteResultsOverflowNote
     };
   }
 };
@@ -12333,7 +12359,7 @@ var ShardMerger = class {
     };
   }
   buildCharts(stats, projects) {
-    const suiteResults = buildSuiteResults(projects, TOP_SUITES_FOR_CHART);
+    const { rows: suiteResults, overflowNote: suiteResultsOverflowNote } = buildSuiteResults(projects, SUITE_CHART_MAX_ROWS);
     return {
       passRate: {
         passed: stats.passed,
@@ -12343,7 +12369,8 @@ var ShardMerger = class {
         skipped: stats.skipped,
         flaky: stats.flaky
       },
-      suiteResults
+      suiteResults,
+      suiteResultsOverflowNote
     };
   }
 };
@@ -12377,11 +12404,27 @@ function jsonForInlineScript(value) {
 var A4_HEIGHT_MM = 297;
 var PAGE_MARGIN_Y_MM = 16;
 var PX_PER_MM = 96 / 25.4;
+var SUITE_CHART_SMALL_MAX = 10;
+var SUITE_CHART_ROWS_PER_CANVAS = 45;
+var SUITE_CHART_ROW_PX = 18;
+var SUITE_CHART_PAD_PX = 56;
 var PAGE_CONTENT_HEIGHT_PX = (A4_HEIGHT_MM - 2 * PAGE_MARGIN_Y_MM) * PX_PER_MM;
 function isUnknownValue(v) {
   return !v || v === "unknown";
 }
 var SLOW_MEDIAN_FACTOR = 2;
+function buildSuiteChartChunks(rows) {
+  const chunks = [];
+  for (let i = 0; i < rows.length; i += SUITE_CHART_ROWS_PER_CANVAS) {
+    const slice = rows.slice(i, i + SUITE_CHART_ROWS_PER_CANVAS);
+    chunks.push({
+      canvasId: `suitesBarChart${chunks.length}`,
+      heightPx: slice.length * SUITE_CHART_ROW_PX + SUITE_CHART_PAD_PX,
+      rows: slice
+    });
+  }
+  return chunks;
+}
 function deriveOptions(s) {
   return {
     showCharts: s.charts,
@@ -12453,7 +12496,9 @@ var TemplateEngine = class {
       templateCSS: "",
       chartjsScript: this.buildChartjsScript(),
       watermarkPageHeightPx: PAGE_CONTENT_HEIGHT_PX,
-      releaseGateTally: buildFailureTally(data.analysis)
+      releaseGateTally: buildFailureTally(data.analysis),
+      suiteChartLarge: data.charts.suiteResults.length > SUITE_CHART_SMALL_MAX,
+      suiteChartChunks: data.charts.suiteResults.length > SUITE_CHART_SMALL_MAX ? buildSuiteChartChunks(data.charts.suiteResults) : []
     };
   }
   buildContext(data, template, userSections, slowTestThreshold) {
@@ -12478,7 +12523,9 @@ var TemplateEngine = class {
       templateCSS,
       chartjsScript: this.buildChartjsScript(),
       watermarkPageHeightPx: PAGE_CONTENT_HEIGHT_PX,
-      releaseGateTally: buildFailureTally(data.analysis)
+      releaseGateTally: buildFailureTally(data.analysis),
+      suiteChartLarge: data.charts.suiteResults.length > SUITE_CHART_SMALL_MAX,
+      suiteChartChunks: data.charts.suiteResults.length > SUITE_CHART_SMALL_MAX ? buildSuiteChartChunks(data.charts.suiteResults) : []
     };
   }
   buildChartjsScript() {
@@ -14073,7 +14120,7 @@ var PdfReporter = class {
     this.liveConsole = false;
     this.options = parseOptions(rawOptions);
     this.dataCollector = new DataCollector(this.options.capture);
-    const version = true ? "0.15.1" : "0.x";
+    const version = true ? "0.16.0" : "0.x";
     logger.info(`@reportforge/playwright-pdf v${version} initialised`);
     this.licenseClient = new LicenseClient({
       licenseKey: this.options.licenseKey,

package/dist/templates/partials/chart-summary-grid.hbs

@@ -1,12 +1,18 @@
-<div class="section charts-grid{{#if options.heroTrend}} charts-grid--secondary{{/if}}">
+<div class="section charts-grid{{#if options.heroTrend}} charts-grid--secondary{{/if}}{{#if suiteChartLarge}} charts-grid--solo{{/if}}">
   <div class="chart-card">
     <h3>Pass Rate</h3>
+    {{#if suiteChartLarge}}
+    {{! Solo card (suite chart moved below) — use the freed space: bigger doughnut. }}
+    <canvas id="passRateChart" width="230" height="230"></canvas>
+    {{else}}
     {{#if options.heroTrend}}
     <canvas id="passRateChart" width="150" height="150"></canvas>
     {{else}}
     <canvas id="passRateChart" width="186" height="186"></canvas>
     {{/if}}
+    {{/if}}
   </div>
+  {{#unless suiteChartLarge}}
   <div class="chart-card">
     <h3>Suite Results</h3>
     {{#if options.heroTrend}}
@@ -15,4 +21,20 @@
     <canvas id="suitesBarChart" width="390" height="186"></canvas>
     {{/if}}
   </div>
+  {{/unless}}
+</div>
+
+{{#if suiteChartLarge}}
+{{! Large runs: every suite keeps its own bar. The chart leaves the side-by-side
+    grid, goes full width, and splits into page-sized canvases that flow across
+    pages — a continuous per-suite coverage map instead of a squashed canvas. }}
+{{#each suiteChartChunks}}
+<div class="section chart-card chart-card--wide">
+  <h3>Suite Results{{#unless @first}} &middot; continued{{/unless}}</h3>
+  <canvas id="{{this.canvasId}}" width="640" height="{{this.heightPx}}"></canvas>
+  {{#if @last}}{{#if ../charts.suiteResultsOverflowNote}}
+  <div class="chart-note">{{../charts.suiteResultsOverflowNote}}</div>
+  {{/if}}{{/if}}
 </div>
+{{/each}}
+{{/if}}

package/dist/templates/partials/charts.hbs

@@ -45,6 +45,17 @@
 
 <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; }
 
@@ -90,6 +101,9 @@
   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',
@@ -99,19 +113,22 @@
         data: [passed, failed, timedOut, skipped, flaky],
         backgroundColor: ['#3F7D58', '#C3553C', '#B5803A', '#7A786E', '#CA8A04'],
         borderColor:     ['#FAF9F5', '#FAF9F5', '#FAF9F5', '#FAF9F5', '#FAF9F5'],
-        borderWidth: 2,
+        borderWidth: 1,
+        borderRadius: 5,
+        spacing: 2,
         hoverOffset: 4
       }]
     },
     options: {
       responsive: false,
-      cutout: '68%',
+      cutout: '64%',
       plugins: {
         legend: {
           position: 'bottom',
           labels: {
             font: { size: 9, family: 'Inter, sans-serif' },
-            color: '#5A5A52', padding: 10, boxWidth: 10, boxHeight: 10
+            color: '#5A5A52', padding: 10,
+            usePointStyle: true, pointStyle: 'circle', boxWidth: 7, boxHeight: 7
           }
         }
       },
@@ -119,64 +136,126 @@
     }
   });
 
-  /* ── Horizontal suite results bar ────────────────────────────────────── */
-  var suiteLabels  = [{{{jsonArray charts.suiteResults 'label'}}}];
-  var suitePassed  = [{{{jsonArray charts.suiteResults 'passed'}}}];
-  var suiteFailed   = [{{{jsonArray charts.suiteResults 'failed'}}}];
-  var suiteTimedOut = [{{{jsonArray charts.suiteResults 'timedOut'}}}];
-  var suiteSkipped  = [{{{jsonArray charts.suiteResults 'skipped'}}}];
+  /* ── 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);
 
-  remaining += 1;
-  new Chart(document.getElementById('suitesBarChart'), {
-    type: 'bar',
-    data: {
-      labels: suiteLabels,
-      datasets: [
-        { label: 'Passed',    data: suitePassed,   backgroundColor: '#3F7D58', borderRadius: 3 },
-        { label: 'Failed',    data: suiteFailed,   backgroundColor: '#C3553C', borderRadius: 3 },
-        { label: 'Timed Out', data: suiteTimedOut, backgroundColor: '#B5803A', borderRadius: 3 },
-        { label: 'Skipped',   data: suiteSkipped,  backgroundColor: '#7A786E', borderRadius: 3 }
-      ]
-    },
-    options: {
-      indexAxis: 'y',
-      responsive: false,
-      scales: {
-        x: {
-          stacked: true,
-          ticks: { font: { size: 9, family: 'Inter, sans-serif' }, color: '#5A5A52', stepSize: 1 },
-          grid:   { color: 'rgba(31,31,28,0.06)' },
-          border: { color: '#D6D4C8' }
+  // 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' }
+          }
         },
-        y: {
-          stacked: true,
-          // Widen the label gutter so the longest label isn't clipped at the canvas edge.
-          afterFit: function(scale) { if (!scale.$rfPadded) { scale.$rfPadded = true; scale.width += 30; } },
-          ticks: {
-            font: { size: 9, family: 'Inter, sans-serif' }, color: '#1F1F1C', autoSkip: false,
-            // Truncate only very long suite / describe labels; the wider gutter above
-            // lets most labels show in full instead of clipping at the canvas edge.
-            callback: function(value) {
-              var l = this.getLabelForValue(value);
-              return l.length > 24 ? l.slice(0, 23) + '…' : l;
+        plugins: {
+          legend: {
+            position: 'bottom',
+            labels: {
+              font: { size: 9, family: 'Inter, sans-serif' }, color: '#5A5A52',
+              padding: 12,
+              usePointStyle: true, pointStyle: 'circle', boxWidth: 7, boxHeight: 7
             }
-          },
-          grid:   { display: false },
-          border: { color: '#D6D4C8' }
-        }
-      },
-      plugins: {
-        legend: {
-          position: 'bottom',
-          labels: {
-            font: { size: 9, family: 'Inter, sans-serif' }, color: '#5A5A52',
-            padding: 12, boxWidth: 10, boxHeight: 10
           }
-        }
-      },
-      animation: { onComplete: chartDone }
-    }
+        },
+        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
@@ -339,6 +418,14 @@
     });
   }
   {{/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}}

package/dist/templates/styles/base.css

@@ -688,9 +688,26 @@ code {
   border: 1px solid var(--border-2);
   border-radius: 6px; padding: 16px 14px; text-align: center;
 }
+/* Large runs: the doughnut sits alone in the grid (the suite chart moved to
+   full-width chunk cards below) — wider card + bigger canvas so it owns the
+   space instead of floating in it. Extra specificity so a template
+   stylesheet's --secondary column override can't re-widen it. */
+.charts-grid.charts-grid--solo { grid-template-columns: 320px; justify-content: center; }
+/* Full-width Suite Results cards, one per ~45 suites — each page-break-atomic
+   so the chart continues cleanly across pages. */
+.chart-card--wide {
+  width: 100%; margin-bottom: 16px;
+  page-break-inside: avoid; break-inside: avoid;
+}
 /* canvas computes to display:block in Chromium, so text-align:center above
    never centers it (that only affects inline-level boxes) — margin:auto does. */
 .chart-card canvas { display: block; margin: 0 auto; }
+/* Overflow note under the Suite Results chart ("+ N more suites: …") — rendered
+   when the run has more suites than the chart's bar cap. */
+.chart-note {
+  margin-top: 6px; text-align: center;
+  font-size: 9px; color: var(--text-3); letter-spacing: 0.2px;
+}
 .chart-card h3 {
   margin: 0 0 12px;
   font-family: 'Inter', system-ui, sans-serif; font-size: 9px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reportforge/playwright-pdf",
-  "version": "0.15.1",
+  "version": "0.16.0",
   "description": "Playwright Test reporter that generates designed PDF reports: minimal, detailed, and executive templates with CI/CD integrations",
   "license": "MIT",
   "author": "ReportForge",