blaze-performance-tester 3.2.30 → 3.2.32

package/dist/cli.js

@@ -1,3 +1,4 @@
+#!/usr/bin/env ts-node
 import { createRequire as __esbuild_createRequire } from 'module'; const require = __esbuild_createRequire(import.meta.url);
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -6669,10 +6670,146 @@ function exportHtmlDashboard(history, config, verdictReason, semanticReport, res
   const waveListItems = history.map((h) => {
     return `<div class="wave-item">Wave (${h.threads} VUs): P95 ${h.p95Latency.toFixed(1)}ms, Errors ${(h.errorRate * 100).toFixed(1)}%</div>`;
   }).join("");
+  const estimatedMonthlyCost = (cards.throughput * 0.045 * 24 * 30).toFixed(2);
+  const recommendedCpuCores = Math.max(2, Math.ceil(cards.saturationKneePoint / 75));
+  const recommendedRamGb = recommendedCpuCores * 2;
+  const firstTimestamp = rawRequests[0]?.timestampMs || Date.now();
   const scatterPoints = rawRequests.slice(0, 180).map((r) => ({
-    x: Number(((r.timestampMs - (rawRequests[0]?.timestampMs || Date.now())) / 1e3).toFixed(2)),
+    x: Number(((r.timestampMs - firstTimestamp) / 1e3).toFixed(2)),
     y: Number(((r.dnsTimeMs || 0) + (r.tcpTimeMs || 0) + (r.tlsTimeMs || 0) + r.durationMs * 0.3).toFixed(1))
   }));
+  let baselineComparisonHtml = "";
+  if (baselineData) {
+    const diffApdex = cards.apdex - baselineData.apdex;
+    const diffThroughput = (cards.throughput - baselineData.throughput) / (baselineData.throughput || 1) * 100;
+    const diffTtfb = (cards.ttfb - baselineData.ttfb) / (baselineData.ttfb || 1) * 100;
+    const diffHealth = cards.healthScore - baselineData.healthScore;
+    const formatDelta = (val, isInverse = false) => {
+      const good = isInverse ? val <= 0 : val >= 0;
+      const color = good ? "#10b981" : "#ef4444";
+      const sign = val > 0 ? "+" : "";
+      return `<span style="color: ${color}; font-weight: bold;">${sign}${val.toFixed(1)}%</span>`;
+    };
+    baselineComparisonHtml = `
+    <div class="card" style="margin-top: 2rem; background: #131c2e; border: 1px solid #7c3aed;">
+      <h3 style="color: #a78bfa; display: flex; align-items: center; gap: 0.6rem; font-size: 1.2rem; border-bottom: 1px solid #1e293b; padding-bottom: 0.5rem;">
+        \u{1F4CA} Baseline Regression Comparison (Delta Engine)
+      </h3>
+      <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;">
+        <div style="background: #090d16; padding: 1rem; border-radius: 6px; border: 1px solid #1e293b;">
+          <div class="card-title">Apdex Shift</div>
+          <div style="font-size: 1.4rem; font-weight: bold; color: #ffffff;">${cards.apdex.toFixed(2)}</div>
+          <div style="font-size: 0.8rem; margin-top: 0.2rem;">Delta: <span style="color: ${diffApdex >= 0 ? "#10b981" : "#ef4444"}; font-weight: bold;">${diffApdex >= 0 ? "+" : ""}${diffApdex.toFixed(2)}</span></div>
+        </div>
+        <div style="background: #090d16; padding: 1rem; border-radius: 6px; border: 1px solid #1e293b;">
+          <div class="card-title">Throughput Delta</div>
+          <div style="font-size: 1.4rem; font-weight: bold; color: #ffffff;">${cards.throughput.toFixed(0)}/s</div>
+          <div style="font-size: 0.8rem; margin-top: 0.2rem;">Delta: ${formatDelta(diffThroughput, false)}</div>
+        </div>
+        <div style="background: #090d16; padding: 1rem; border-radius: 6px; border: 1px solid #1e293b;">
+          <div class="card-title">TTFB Latency Shift</div>
+          <div style="font-size: 1.4rem; font-weight: bold; color: #ffffff;">${cards.ttfb.toFixed(1)}ms</div>
+          <div style="font-size: 0.8rem; margin-top: 0.2rem;">Delta: ${formatDelta(diffTtfb, true)}</div>
+        </div>
+        <div style="background: #090d16; padding: 1rem; border-radius: 6px; border: 1px solid #1e293b;">
+          <div class="card-title">Health Score Diff</div>
+          <div style="font-size: 1.4rem; font-weight: bold; color: #ffffff;">${cards.healthScore}/100</div>
+          <div style="font-size: 0.8rem; margin-top: 0.2rem;">Delta: <span style="color: ${diffHealth >= 0 ? "#10b981" : "#ef4444"}; font-weight: bold;">${diffHealth >= 0 ? "+" : ""}${diffHealth} pts</span></div>
+        </div>
+      </div>
+    </div>`;
+  }
+  const crossBrowserRows = getCrossBrowserMatrixData().map((m) => `
+    <tr>
+      <td><span class="engine-badge ${m.badgeClass}">${m.engine}</span></td>
+      <td>${m.fcp}</td>
+      <td>${m.lcp}</td>
+      <td>${m.journeyDuration}</td>
+      <td><span class="${m.statusClass}">${m.status}</span></td>
+    </tr>
+  `).join("");
+  const crossBrowserMatrixSectionHtml = `
+  <div class="card" style="margin-top: 2rem; background: #131c2e; border: 1px solid #38bdf8;">
+    <h3 style="color: #38bdf8; display: flex; align-items: center; gap: 0.6rem; font-size: 1.2rem; border-bottom: 1px solid #1e293b; padding-bottom: 0.5rem;">
+      \u{1F310} Cross-Browser Rendering Performance Matrix
+    </h3>
+    <table class="matrix-table" style="width: 100%; border-collapse: collapse; text-align: start; font-size: 14px;">
+      <thead>
+        <tr style="border-bottom: 1px solid #1e293b;">
+          <th style="padding: 12px 14px; background: #090d16; color: #94a3b8; font-size: 12px; text-transform: uppercase;">Browser Engine</th>
+          <th style="padding: 12px 14px; background: #090d16; color: #94a3b8; font-size: 12px; text-transform: uppercase;">FCP</th>
+          <th style="padding: 12px 14px; background: #090d16; color: #94a3b8; font-size: 12px; text-transform: uppercase;">LCP</th>
+          <th style="padding: 12px 14px; background: #090d16; color: #94a3b8; font-size: 12px; text-transform: uppercase;">Journey Duration</th>
+          <th style="padding: 12px 14px; background: #090d16; color: #94a3b8; font-size: 12px; text-transform: uppercase;">Status</th>
+        </tr>
+      </thead>
+      <tbody>
+        ${crossBrowserRows}
+      </tbody>
+    </table>
+  </div>`;
+  let logClustersHtml = "";
+  if (semanticReport) {
+    const totalLogCount = semanticReport.clusters.reduce((sum, c) => sum + c.count, 0);
+    const uniquePatternsCount = semanticReport.clusters.length;
+    logClustersHtml = `
+    <div class="card" style="margin-top: 2rem; background: #131c2e; border: 1px solid #1e293b;">
+      <h3 style="border-bottom: none; padding-bottom: 0rem; margin-bottom: 0.25rem; display: flex; align-items: center; gap: 0.5rem; color: #ffffff; font-size: 1.2rem;">
+        \u{1F9E0} Semantic Log Clustering
+      </h3>
+      <div style="color: #94a3b8; font-size: 0.9rem; margin-bottom: 1.5rem;">
+        Captured <strong style="color: #f8fafc;">${totalLogCount}</strong> raw failures.
+      </div>
+      
+      <table style="width: 100%; border-collapse: collapse;">
+        <thead>
+          <tr style="border-bottom: 1px solid #1e293b;">
+            <th style="width: 8%; padding: 0.75rem; text-align: start; color: #64748b; font-size: 0.85rem; font-weight: bold; text-transform: none;">Count</th>
+            <th style="width: 22%; padding: 0.75rem; text-align: start; color: #64748b; font-size: 0.85rem; font-weight: bold; text-transform: none;">Category</th>
+            <th style="width: 10%; padding: 0.75rem; text-align: start; color: #64748b; font-size: 0.85rem; font-weight: bold; text-transform: none;">Severity</th>
+            <th style="width: 60%; padding: 0.75rem; text-align: start; color: #64748b; font-size: 0.85rem; font-weight: bold; text-transform: none;">Structural Blueprint</th>
+          </tr>
+        </thead>
+        <tbody>
+          ${semanticReport.clusters.map((c) => {
+      let catColor = "#fb923c";
+      if (c.category === "Authentication_Error")
+        catColor = "#c084fc";
+      if (c.category === "Product_Error")
+        catColor = "#f87171";
+      let sevBg = c.severity === "CRITICAL" ? "#dc2626" : "#ea580c";
+      const rawTemplate = c.template || "";
+      const cleanedTemplate = rawTemplate.replace(/\[\d{4}-\d{2}-\d{2}.*?\]\s*/, "");
+      return `
+              <tr style="border-bottom: 1px solid #1e293b; vertical-align: top;">
+                <td style="padding: 1.25rem 0.75rem; font-size: 1.2rem; font-weight: bold; color: #f8fafc;">${c.count}</td>
+                <td style="padding: 1.25rem 0.75rem; color: ${catColor}; font-weight: 600; font-size: 0.95rem;">${c.category}</td>
+                <td style="padding: 1.25rem 0.75rem;">
+                  <span style="background: ${sevBg}; color: #ffffff; padding: 0.2rem 0.5rem; border-radius: 4px; font-size: 0.7rem; font-weight: bold;">${c.severity}</span>
+                </td>
+                <td style="padding: 1.25rem 0.75rem;">
+                  <div style="background: #090d16; border-radius: 4px; padding: 0.6rem 0.8rem; border-inline-start: 3px solid #1e293b; margin-bottom: 0.5rem;">
+                    <code style="color: #cbd5e1; font-family: monospace; font-size: 0.9rem; white-space: pre-wrap; word-break: break-all;">${cleanedTemplate}</code>
+                  </div>
+                </td>
+              </tr>`;
+    }).join("")}
+        </tbody>
+      </table>
+    </div>`;
+  }
+  const breakdownRates = responseMatrix.breakdownRates || {};
+  const breakdownGridHtml = [400, 401, 403, 404, 429, 500, 502, 503, 504].map((code) => {
+    const rate = breakdownRates[code] || 0;
+    const displayColor = rate > 0 ? code >= 500 ? "#f87171" : "#fde047" : "#64748b";
+    return `
+      <div style="background: #090d16; border: 1px solid #1e293b; border-radius: 4px; padding: 0.4rem 0.2rem; text-align: center;">
+        <div style="font-size: 0.7rem; color: #64748b; font-weight: bold;">${dict.matrix.code} ${code}</div>
+        <div style="font-size: 0.85rem; font-weight: bold; color: ${displayColor};">${rate.toFixed(2)}%</div>
+      </div>
+    `;
+  }).join("");
+  const gaugeColor = cards.healthScore >= 90 ? "#10b981" : cards.healthScore >= 70 ? "#f59e0b" : "#ef4444";
   const htmlContent = `<!DOCTYPE html>
   <html lang="${config.locale}" dir="${dir}">
   <head>
@@ -6688,7 +6825,7 @@ function exportHtmlDashboard(history, config, verdictReason, semanticReport, res
     
     .cards-wrapper { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
     .metric-card { background: #131c2e; border: 1px solid #1e293b; border-radius: 6px; padding: 1.25rem; position: relative; }
-    .card-title { font-size: 0.75rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; display: flex; justify-content: space-between; }
+    .card-title { font-size: 0.75rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; }
     .card-value { font-size: 1.6rem; font-weight: 700; color: #ffffff; }
     .card-value .unit { font-size: 0.9rem; font-weight: 500; color: #94a3b8; margin-inline-start: 0.2rem; }
     .card-value.green { color: #10b981; }
@@ -6696,11 +6833,6 @@ function exportHtmlDashboard(history, config, verdictReason, semanticReport, res
     .card-value.purple { color: #a855f7; }
     .card-subtext { font-size: 0.8rem; color: #10b981; font-weight: 500; margin-inline-start: 0.4rem; display: inline-block; }
 
-    /* Export Styles */
-    .export-menu { position: absolute; top: 0.5rem; right: 0.5rem; }
-    .export-btn { background: #1e293b; border: 1px solid #334155; color: #94a3b8; padding: 2px 8px; border-radius: 4px; font-size: 0.7rem; cursor: pointer; }
-    .export-btn:hover { background: #334155; }
-
     .top-layout-grid { display: grid; grid-template-columns: 1fr 280px 380px; gap: 1.5rem; margin-bottom: 2rem; }
     .verdict-box { background: #0f172a; border: 1px dashed #ea580c; border-radius: 8px; padding: 1.25rem; }
     .verdict-title { text-transform: uppercase; font-size: 0.85rem; font-weight: 700; color: #f97316; margin-bottom: 0.5rem; }
@@ -6712,7 +6844,7 @@ function exportHtmlDashboard(history, config, verdictReason, semanticReport, res
     .gauge-title { font-size: 0.85rem; font-weight: bold; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1rem; }
 
     .matrix-box { background: #131c2e; border: 1px solid #1e293b; border-radius: 8px; padding: 1.25rem; }
-    .matrix-title { font-size: 1.1rem; font-weight: bold; color: #ffffff; margin-bottom: 1rem; display: flex; justify-content: space-between; align-items: center; }
+    .matrix-title { font-size: 1.1rem; font-weight: bold; color: #ffffff; margin-bottom: 1rem; }
     .matrix-box .matrix-row { display: flex; justify-content: space-between; align-items: center; padding: 0.6rem 0; border-bottom: 1px solid #1e293b; }
     .matrix-box .matrix-row:last-child { border-bottom: none; }
     .matrix-label { font-size: 0.9rem; color: #f8fafc; display: flex; align-items: center; gap: 0.5rem; }
@@ -6732,11 +6864,11 @@ function exportHtmlDashboard(history, config, verdictReason, semanticReport, res
     .status-warning { color: #ca8a04; font-weight: 600; }
 
     .charts-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-bottom: 2rem; }
-    .graph-card { background: #131c2e; border: 1px solid #1e293b; border-radius: 8px; padding: 1.5rem; position: relative; }
-    .graph-title { font-size: 1.1rem; font-weight: 700; color: #ffffff; margin-bottom: 1.2rem; display: flex; align-items: center; justify-content: space-between; }
+    .graph-card { background: #131c2e; border: 1px solid #1e293b; border-radius: 8px; padding: 1.5rem; }
+    .graph-title { font-size: 1.1rem; font-weight: 700; color: #ffffff; margin-bottom: 1.2rem; display: flex; align-items: center; gap: 0.5rem; }
     
-    .card { background: #131c2e; border: 1px solid #1e293b; border-radius: 8px; padding: 1.5rem; position: relative; }
-    h3 { margin-top: 0; color: #cbd5e1; border-bottom: 1px solid #1e293b; padding-bottom: 0.5rem; display: flex; justify-content: space-between; }
+    .card { background: #131c2e; border: 1px solid #1e293b; border-radius: 8px; padding: 1.5rem; }
+    h3 { margin-top: 0; color: #cbd5e1; border-bottom: 1px solid #1e293b; padding-bottom: 0.5rem; }
     table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
     th, td { padding: 0.75rem; text-align: start; border-bottom: 1px solid #1e293b; }
     th { color: #94a3b8; font-weight: 600; }
@@ -6767,8 +6899,27 @@ function exportHtmlDashboard(history, config, verdictReason, semanticReport, res
         <div class="card-title">${dict.metrics.ttfb}</div>
         <div class="card-value">${cards.ttfb.toFixed(1)}<span class="unit">ms</span></div>
       </div>
+      <div class="metric-card">
+        <div class="card-title">${dict.metrics.dns}</div>
+        <div class="card-value">${cards.dns.toFixed(2)}<span class="unit">ms</span></div>
+      </div>
+      <div class="metric-card">
+        <div class="card-title">${dict.metrics.tcp}</div>
+        <div class="card-value">${cards.tcp.toFixed(2)}<span class="unit">ms</span></div>
+      </div>
+      <div class="metric-card">
+        <div class="card-title">${dict.metrics.tls}</div>
+        <div class="card-value">${cards.tls.toFixed(2)}<span class="unit">ms</span></div>
+      </div>
+      <div class="metric-card">
+        <div class="card-title">${dict.metrics.stability}</div>
+        <div class="card-value">&plusmn;${cards.stdDev.toFixed(1)}<span class="unit">ms</span></div>
+      </div>
     </div>
 
+    ${baselineComparisonHtml}
+    ${crossBrowserMatrixSectionHtml}
+
     <div class="top-layout-grid" style="margin-top: 2rem;">
       <div class="verdict-box">
         <div class="verdict-title">${dict.verdict}</div>
@@ -6781,37 +6932,101 @@ function exportHtmlDashboard(history, config, verdictReason, semanticReport, res
         <div style="position: relative; width: 140px; height: 140px; display: flex; align-items: center; justify-content: center;">
           <svg width="140" height="140" viewBox="0 0 140 140" style="transform: rotate(-90deg);">
             <circle cx="70" cy="70" r="58" stroke="#1e293b" stroke-width="12" fill="transparent"/>
-            <circle cx="70" cy="70" r="58" stroke="#10b981" stroke-width="12" fill="transparent"
+            <circle cx="70" cy="70" r="58" stroke="${gaugeColor}" stroke-width="12" fill="transparent"
                     stroke-dasharray="364.4" stroke-dashoffset="${364.4 - 364.4 * cards.healthScore / 100}"
                     stroke-linecap="round" style="transition: stroke-dashoffset 1s ease-out;"/>
           </svg>
           <div style="position: absolute; text-align: center;">
             <div style="font-size: 2.2rem; font-weight: 800; color: #ffffff; line-height: 1;">${cards.healthScore}</div>
+            <div style="font-size: 0.75rem; color: #64748b; font-weight: bold; margin-top: 0.2rem; text-transform: uppercase;">/ 100</div>
           </div>
         </div>
+        <div style="margin-top: 0.75rem; font-size: 0.8rem; color: #94a3b8; font-weight: 500;">
+          ${dict.health.subtitle}
+        </div>
       </div>
 
       <div class="matrix-box">
-        <div class="matrix-title">${dict.matrix.title} <button onclick="window.print()" class="export-btn">PDF</button></div>
+        <div class="matrix-title">${dict.matrix.title}</div>
         <div class="matrix-row">
-          <div class="matrix-label">${dict.matrix.info}</div>
+          <div class="matrix-label">${dict.matrix.info} <span class="matrix-badge badge-1xx">1xx</span></div>
           <div class="matrix-value">${responseMatrix.total1xx}</div>
         </div>
         <div class="matrix-row">
-          <div class="matrix-label">${dict.matrix.success}</div>
+          <div class="matrix-label">${dict.matrix.success} <span class="matrix-badge badge-2xx">2xx</span></div>
           <div class="matrix-value">${responseMatrix.total2xx}</div>
         </div>
+        <div class="matrix-row">
+          <div class="matrix-label">${dict.matrix.redirects} <span class="matrix-badge badge-3xx">3xx</span></div>
+          <div class="matrix-value">${responseMatrix.total3xx}</div>
+        </div>
+        <div class="matrix-row">
+          <div class="matrix-label">${dict.matrix.clientErr} <span class="matrix-badge badge-4xx">4xx</span></div>
+          <div class="matrix-value">${responseMatrix.total4xx}</div>
+        </div>
+        <div class="matrix-row">
+          <div class="matrix-label">${dict.matrix.serverErr} <span class="matrix-badge badge-5xx">5xx</span></div>
+          <div class="matrix-value">${responseMatrix.total5xx}</div>
+        </div>
+
+        <div class="matrix-title" style="margin-top: 1.5rem; font-size: 0.85rem; border-top: 1px solid #1e293b; padding-top: 1rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.05em;">
+          ${dict.matrix.breakdown}
+        </div>
+        <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-top: 0.5rem;">
+          ${breakdownGridHtml}
+        </div>
       </div>
     </div>
 
+    <div class="card" style="margin-top: 2rem; background: #0c172b; border: 1px solid #7c3aed;">
+      <h3 style="color: #a78bfa; display: flex; align-items: center; gap: 0.6rem; font-size: 1.2rem; border-bottom: 1px solid #1e293b; padding-bottom: 0.5rem;">
+        ${dict.rca}
+      </h3>
+      <div style="font-size: 0.95rem; line-height: 1.6; color: #cbd5e1; padding: 0.5rem 0; white-space: pre-wrap; word-break: break-word;">
+        ${geminiAnalysisHtml}
+      </div>
+    </div>
+
+    <div class="charts-grid" style="margin-top: 2rem;">
+      <div class="graph-card">
+        <div class="graph-title">${dict.charts.volume}</div>
+        <div style="height: 280px; position: relative;">
+          <canvas id="volumeChart"></canvas>
+        </div>
+      </div>
+
+      <div class="graph-card">
+        <div class="graph-title">${dict.charts.concurrency}</div>
+        <div style="height: 280px; position: relative;">
+          <canvas id="concurrencyChart"></canvas>
+        </div>
+      </div>
+
+      <div class="graph-card">
+        <div class="graph-title">${dict.charts.status}</div>
+        <div style="height: 280px; position: relative;">
+          <canvas id="statusDonutChart"></canvas>
+        </div>
+      </div>
+
+      <div class="graph-card">
+        <div class="graph-title">${dict.charts.scatter}</div>
+        <div style="height: 280px; position: relative;">
+          <canvas id="ttfbScatterChart"></canvas>
+        </div>
+      </div>
+    </div>
+    
     <div class="card" style="margin-top: 2rem;">
-      <h3>${dict.telemetry.title} <span id="telemetry-export"></span></h3>
+      <h3>${dict.telemetry.title}</h3>
       <table>
         <thead>
           <tr>
             <th>${dict.telemetry.threads}</th>
             <th>${dict.telemetry.throughput}</th>
             <th>${dict.telemetry.avgLatency}</th>
+            <th>${dict.telemetry.p95}</th>
+            <th>${dict.telemetry.errors}</th>
             <th>${dict.telemetry.status}</th>
           </tr>
         </thead>
@@ -6819,51 +7034,149 @@ function exportHtmlDashboard(history, config, verdictReason, semanticReport, res
           ${history.map((h) => {
     const isPassed = h.apdex >= config.targetApdex && h.errorRate <= config.targetErrorRate;
     return `<tr>
-                <td>${h.threads}</td>
+                <td><strong>${h.threads}</strong></td>
                 <td>${h.throughput.toFixed(0)} /s</td>
                 <td>${h.avgLatency.toFixed(1)} ms</td>
+                <td>${h.p95Latency.toFixed(1)} ms</td>
+                <td>${(h.errorRate * 100).toFixed(2)}%</td>
                 <td><span class="badge ${isPassed ? "badge-success" : "badge-fail"}">${isPassed ? dict.telemetry.pass : dict.telemetry.fail}</span></td>
               </tr>`;
   }).join("")}
         </tbody>
       </table>
     </div>
+    ${logClustersHtml}
   </div>
-
+  
   <script>
-    // --- Export Data Logic ---
-    function downloadBlob(content, fileName, contentType) {
-        const a = document.createElement("a");
-        const file = new Blob([content], { type: contentType });
-        a.href = URL.createObjectURL(file);
-        a.download = fileName;
-        a.click();
-    }
-
-    function exportToCSV(data, filename) {
-        if (!data || data.length === 0) return;
-        const csvRows = [];
-        const headers = Object.keys(data[0]);
-        csvRows.push(headers.join(','));
-        for (const row of data) {
-            csvRows.push(headers.map(h => JSON.stringify(row[h] || '')).join(','));
+    const labels = ${JSON.stringify(labels)};
+    const successRequestsData = ${JSON.stringify(successRequestsData)};
+    const failedWorkloadsData = ${JSON.stringify(failedWorkloadsData)};
+    
+    new Chart(document.getElementById('volumeChart'), {
+      type: 'bar',
+      data: {
+        labels: labels,
+        datasets: [
+          {
+            label: '${dict.matrix.success}',
+            data: successRequestsData,
+            backgroundColor: '#10b981',
+            stack: 'requests',
+            barPercentage: 0.95,
+            categoryPercentage: 0.95
+          },
+          {
+            label: '${dict.matrix.serverErr}',
+            data: failedWorkloadsData,
+            backgroundColor: '#ef4444',
+            stack: 'requests',
+            barPercentage: 0.95,
+            categoryPercentage: 0.95
+          }
+        ]
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+          legend: { position: 'top', labels: { color: '#94a3b8', font: { size: 11 } } }
+        },
+        scales: {
+          x: { grid: { color: '#1e293b' }, ticks: { color: '#64748b' } },
+          y: { stacked: true, grid: { color: '#1e293b' }, ticks: { color: '#64748b' } }
         }
-        downloadBlob(csvRows.join('\\n'), filename + '.csv', 'text/csv');
-    }
+      }
+    });
 
-    function exportToJSON(data, filename) {
-        downloadBlob(JSON.stringify(data, null, 2), filename + '.json', 'application/json');
-    }
+    const baseActiveThreads = ${JSON.stringify(activeThreadsData)};
+    const baseTtfTrend = ${JSON.stringify(ttfTrendData)};
     
-    // Inject dynamic data for export
-    const dashboardHistoryData = ${JSON.stringify(history)};
-    
-    // Create export buttons for table
-    const tableExportContainer = document.getElementById('telemetry-export');
-    tableExportContainer.innerHTML = \`
-        <button onclick="exportToCSV(dashboardHistoryData, 'telemetry_data')" class="export-btn">CSV</button>
-        <button onclick="exportToJSON(dashboardHistoryData, 'telemetry_data')" class="export-btn">JSON</button>
-    \`;
+    new Chart(document.getElementById('concurrencyChart'), {
+      type: 'line',
+      data: {
+        labels: labels,
+        datasets: [
+          {
+            label: 'VUs',
+            data: baseActiveThreads,
+            borderColor: '#38bdf8',
+            backgroundColor: 'rgba(56, 189, 248, 0.1)',
+            borderWidth: 2.5,
+            pointRadius: 4,
+            fill: true,
+            yAxisID: 'yThreads'
+          },
+          {
+            label: 'TTF',
+            data: baseTtfTrend,
+            borderColor: '#f43f5e',
+            borderWidth: 2,
+            borderDash: [5, 5],
+            pointRadius: 3,
+            fill: false,
+            yAxisID: 'yTtf'
+          }
+        ]
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+          legend: { position: 'top', labels: { color: '#94a3b8', font: { size: 11 } } }
+        },
+        scales: {
+          x: { grid: { color: '#1e293b' }, ticks: { color: '#64748b' } },
+          yThreads: { position: 'left', grid: { color: '#1e293b' }, ticks: { color: '#38bdf8' } },
+          yTtf: { position: 'right', grid: { drawOnChartArea: false }, ticks: { color: '#f43f5e' } }
+        }
+      }
+    });
+
+    new Chart(document.getElementById('statusDonutChart'), {
+      type: 'doughnut',
+      data: {
+        labels: ['1xx', '2xx', '3xx', '4xx', '5xx'],
+        datasets: [{
+          data: [${responseMatrix.total1xx}, ${responseMatrix.total2xx}, ${responseMatrix.total3xx}, ${responseMatrix.total4xx}, ${responseMatrix.total5xx}],
+          backgroundColor: ['#38bdf8', '#4ade80', '#cbd5e1', '#fde047', '#f87171'],
+          borderWidth: 1,
+          borderColor: '#1e293b'
+        }]
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+          legend: { position: 'top', labels: { color: '#94a3b8', font: { size: 11 } } },
+          cutout: '65%'
+        }
+      }
+    });
+
+    new Chart(document.getElementById('ttfbScatterChart'), {
+      type: 'scatter',
+      data: {
+        datasets: [{
+          label: 'Delay',
+          data: ${JSON.stringify(scatterPoints)},
+          backgroundColor: '#a855f7',
+          pointRadius: 4,
+          pointHoverRadius: 6
+        }]
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+          legend: { position: 'top', labels: { color: '#94a3b8', font: { size: 11 } } }
+        },
+        scales: {
+          x: { grid: { color: '#1e293b' }, ticks: { color: '#64748b' } },
+          y: { grid: { color: '#1e293b' }, ticks: { color: '#64748b' } }
+        }
+      }
+    });
   </script></body></html>`;
   try {
     fs.writeFileSync(config.outputHtml, htmlContent, "utf-8");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "blaze-performance-tester",
-  "version": "3.2.30",
+  "version": "3.2.32",
   "description": "A high-performance, multi-threaded load testing engine built with Rust and QuickJS.",
   "type": "module",
   "main": "dist/index.js",