@reportforge/playwright-pdf 0.14.0 → 0.14.2

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 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.14.2] - 2026-07-06
+
+### Fixed
+
+- **Pass-rate doughnut and suite-results bar charts no longer render flush-left inside their card.** `canvas` computes to `display: block` in Chromium, so `.chart-card`'s `text-align: center` (which only centers inline-level boxes) never centered it — most visible on the executive template's wide secondary chart row. `.chart-card canvas` now centers with explicit `margin: 0 auto`.
+
+---
+
+## [0.14.1] - 2026-07-06
+
+### Fixed
+
+- **Executive report's pass-rate doughnut centre text no longer overlaps the ring.** The `executive` template renders the doughnut at 150px (vs 186px on `detailed`/`minimal`), but the centre-text plugin drew a fixed 28px/9px label sized for the larger canvas. Text now scales off the doughnut's actual inner radius, so it fits cleanly at any canvas size.
+
+---
+
 ## [0.14.0] - 2026-07-06
 
 ### Added

package/README.md

@@ -37,7 +37,7 @@ Three templates, one reporter. Every PDF is fully offline: fonts, charts, and sc
   <tr>
     <td align="center"><sub>KPI dashboard · suite breakdown · failure stack traces · embedded screenshots</sub></td>
     <td align="center"><sub>Everything in minimal <strong>+ charts · requirements matrix · defect log · full environment</strong></sub></td>
-    <td align="center"><sub>Cover page · KPI dashboard · charts · failure summary <em>(no stack traces)</em></sub></td>
+    <td align="center"><sub>Cover page · plain-language brief · hero pass-rate stat · trend chart · failure summary <em>(no stack traces)</em></sub></td>
   </tr>
 </table>
 

package/dist/index.d.mts

@@ -41,7 +41,7 @@ interface ReporterOptions {
      *
      * - minimal:   clean white layout, developer-focused, fast
      * - detailed:  full QA report with defect log and requirements traceability
-     * - executive: cover page, KPI dashboard, charts for stakeholders
+     * - executive: cover page, plain-language brief, hero pass-rate stat, charts for stakeholders
      * @default 'minimal'
      */
     template?: TemplateId | TemplateId[];

package/dist/index.d.ts

@@ -41,7 +41,7 @@ interface ReporterOptions {
      *
      * - minimal:   clean white layout, developer-focused, fast
      * - detailed:  full QA report with defect log and requirements traceability
-     * - executive: cover page, KPI dashboard, charts for stakeholders
+     * - executive: cover page, plain-language brief, hero pass-rate stat, charts for stakeholders
      * @default 'minimal'
      */
     template?: TemplateId | TemplateId[];

package/dist/index.js

@@ -14056,7 +14056,7 @@ var PdfReporter = class {
     this.liveConsole = false;
     this.options = parseOptions(rawOptions);
     this.dataCollector = new DataCollector(this.options.capture);
-    const version = true ? "0.14.0" : "0.x";
+    const version = true ? "0.14.2" : "0.x";
     logger.info(`@reportforge/playwright-pdf v${version} initialised`);
     this.licenseClient = new LicenseClient({
       licenseKey: this.options.licenseKey,

package/dist/index.mjs

@@ -14057,7 +14057,7 @@ var PdfReporter = class {
     this.liveConsole = false;
     this.options = parseOptions(rawOptions);
     this.dataCollector = new DataCollector(this.options.capture);
-    const version = true ? "0.14.0" : "0.x";
+    const version = true ? "0.14.2" : "0.x";
     logger.info(`@reportforge/playwright-pdf v${version} initialised`);
     this.licenseClient = new LicenseClient({
       licenseKey: this.options.licenseKey,

package/dist/templates/partials/charts.hbs

@@ -65,17 +65,25 @@
       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 28px "Source Serif Pro", Georgia, serif';
+      ctx.font      = '700 ' + mainSize + 'px "Source Serif Pro", Georgia, serif';
       ctx.fillStyle = '#1F1F1C';
-      ctx.fillText(passRate + '%', cx, cy - 7);
+      ctx.fillText(passRate + '%', cx, cy - mainSize * 0.24);
       /* label below */
-      ctx.font      = '600 9px Inter, sans-serif';
+      ctx.font      = '600 ' + subSize + 'px Inter, sans-serif';
       ctx.fillStyle = '#8C8B82';
-      ctx.fillText('PASS RATE', cx, cy + 13);
+      ctx.fillText('PASS RATE', cx, cy + mainSize * 0.46);
       ctx.restore();
     }
   };

package/dist/templates/styles/base.css

@@ -667,6 +667,9 @@ code {
   border: 1px solid var(--border-2);
   border-radius: 6px; padding: 16px 14px; text-align: center;
 }
+/* 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; }
 .chart-card h3 {
   margin: 0 0 12px;
   font-family: 'Inter', system-ui, sans-serif; font-size: 9px;

package/dist/templates/styles/executive.css

@@ -28,53 +28,6 @@
   font-weight: 500; letter-spacing: 0.4px;
 }
 
-/* ── KPI dashboard ─────────────────────────────────────────────────────── */
-.kpi-strip {
-  display: grid; grid-template-columns: repeat(6, 1fr);
-  gap: 10px; margin-bottom: 22px;
-}
-.kpi-card {
-  background: var(--surface);
-  border: 1px solid var(--border-2);
-  border-radius: 6px; padding: 18px 12px; text-align: center;
-  position: relative; overflow: hidden;
-}
-.kpi-card::before {
-  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
-  -webkit-print-color-adjust: exact;
-  print-color-adjust: exact;
-}
-.kpi-card--total::before { background: var(--accent); }
-.kpi-card--pass::before  { background: var(--pass); }
-.kpi-card--fail::before  { background: var(--fail); }
-.kpi-card--timedout::before { background: var(--timeout); }
-.kpi-card--skip::before  { background: var(--skip); }
-.kpi-card--flaky::before { background: var(--flaky); }
-
-.kpi-card__value {
-  font-family: 'Source Serif Pro', Georgia, serif;
-  font-size: 32px; font-weight: 700; line-height: 1;
-  margin-top: 6px;
-  letter-spacing: -0.5px;
-  color: var(--text-1);
-}
-.kpi-card--total .kpi-card__value { color: var(--info); }
-.kpi-card--pass  .kpi-card__value { color: var(--pass); }
-.kpi-card--fail  .kpi-card__value { color: var(--fail); }
-.kpi-card--timedout .kpi-card__value { color: var(--timeout); }
-.kpi-card--skip  .kpi-card__value { color: var(--skip); }
-.kpi-card--flaky .kpi-card__value { color: var(--flaky); }
-.kpi-card__label {
-  font-family: 'Inter', system-ui, sans-serif; font-size: 8px;
-  font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase;
-  color: var(--text-3); margin-top: 8px;
-}
-.kpi-card__rate {
-  font-size: 12px; font-weight: 600; color: var(--pass);
-  margin-top: 5px;
-  font-family: 'Inter', system-ui, sans-serif;
-}
-
 /* ── Verdict badge ───────────────────────────────────────────────────────── */
 .verdict {
   display: inline-flex; align-items: center; gap: 8px;

package/package.json

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