blaze-performance-tester 3.0.22 → 3.0.23

package/dist/cli.js

@@ -438,11 +438,9 @@ function exportHtmlDashboard(history, config, verdictReason, semanticReport, res
                   <span style="background: ${sevBg}; color: #ffffff; padding: 0.2rem 0.5rem; border-radius: 4px; font-size: 0.7rem; font-weight: bold; letter-spacing: 0.05em;">${c.severity}</span>
                 </td>
                 <td style="padding: 1.25rem 0.75rem;">
-                  <!-- Abstract Template Blueprint Box -->
                   <div style="background: #090d16; border-radius: 4px; padding: 0.6rem 0.8rem; border-left: 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>
-                  <!-- Trace Example Line -->
                   <div style="color: #64748b; font-size: 0.8rem; font-family: monospace; padding-left: 0.2rem; line-height: 1.4;">
                     <span style="color: #475569;">Real Example Trace:</span> ${rawTemplate}
                   </div>
@@ -464,7 +462,6 @@ function exportHtmlDashboard(history, config, verdictReason, semanticReport, res
     h1 { color: #38bdf8; margin: 0; font-size: 2rem; }
     .meta { color: #94a3b8; font-size: 0.9rem; margin-top: 0.5rem; }
     
-    /* \u{1F3B4} CARDS DASHBOARD GRID SYSTEM */
     .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; }
@@ -494,8 +491,10 @@ function exportHtmlDashboard(history, config, verdictReason, semanticReport, res
     .badge-5xx { background: rgba(220, 38, 38, 0.2); color: #f87171; }
     .matrix-value { font-size: 1rem; font-weight: bold; color: #ffffff; }
 
-    .graph-card { background: #131c2e; border: 1px solid #1e293b; border-radius: 8px; padding: 1.5rem; margin-bottom: 2rem; }
-    .graph-title { font-size: 1.15rem; font-weight: 700; color: #ffffff; margin-bottom: 1.2rem; display: flex; align-items: center; gap: 0.5rem; }
+    /* \u{1F4CA} TWO-COLUMN CHART GRID */
+    .charts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 2rem; }
+    .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; }
     h3 { margin-top: 0; color: #cbd5e1; border-bottom: 1px solid #1e293b; padding-bottom: 0.5rem; }
@@ -512,7 +511,6 @@ function exportHtmlDashboard(history, config, verdictReason, semanticReport, res
       <div class="meta">Target Script: <code>${config.targetScript}</code></div>
     </div>
     
-    <!-- \u{1F3B4} METRICS CARDS GRID PANEL -->
     <div class="cards-wrapper">
       <div class="metric-card">
         <div class="card-title">Apdex Score (T: 50ms)</div>
@@ -576,11 +574,22 @@ function exportHtmlDashboard(history, config, verdictReason, semanticReport, res
       </div>
     </div>
 
-    <!-- \u{1F4C9} CORRELATION STREAM GRAPH CHART -->
-    <div class="graph-card">
-      <div class="graph-title">\u{1F504} Throughput, TTF Trend & Active Threads Concurrency Correlation</div>
-      <div style="height: 320px; position: relative;">
-        <canvas id="correlationChart"></canvas>
+    <!-- \u{1F4C9} SPLIT CHARTS SYSTEM -->
+    <div class="charts-grid">
+      <!-- Chart 1: Volume Streams -->
+      <div class="graph-card">
+        <div class="graph-title">\u{1F4CA} Throughput Velocity & Workload Volume</div>
+        <div style="height: 280px; position: relative;">
+          <canvas id="volumeChart"></canvas>
+        </div>
+      </div>
+
+      <!-- Chart 2: Concurrency & Health Trends -->
+      <div class="graph-card">
+        <div class="graph-title">\u{1F504} Active Concurrency (VUs) vs. Time-to-Failure (TTF) Trend</div>
+        <div style="height: 280px; position: relative;">
+          <canvas id="concurrencyChart"></canvas>
+        </div>
       </div>
     </div>
     
@@ -617,7 +626,9 @@ function exportHtmlDashboard(history, config, verdictReason, semanticReport, res
   
   <script>
     const labels = ${JSON.stringify(labels)};
-    new Chart(document.getElementById('correlationChart'), {
+    
+    // \u{1F6E0}\uFE0F Chart 1 Setup: Throughput Bar Streams
+    new Chart(document.getElementById('volumeChart'), {
       type: 'bar',
       data: {
         labels: labels,
@@ -637,25 +648,45 @@ function exportHtmlDashboard(history, config, verdictReason, semanticReport, res
             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' } }
+        }
+      }
+    });
+
+    // \u{1F6E0}\uFE0F Chart 2 Setup: Concurrency & TTF Correlated Slopes
+    new Chart(document.getElementById('concurrencyChart'), {
+      type: 'line',
+      data: {
+        labels: labels,
+        datasets: [
           {
             label: 'Active VU Threads',
             data: ${JSON.stringify(activeThreadsData)},
-            type: 'line',
             borderColor: '#38bdf8',
-            borderWidth: 2,
-            pointRadius: 3,
-            fill: false,
+            backgroundColor: 'rgba(56, 189, 248, 0.1)',
+            borderWidth: 2.5,
+            pointRadius: 4,
+            fill: true,
             yAxisID: 'yThreads'
           },
           {
             label: 'Time-to-Failure (TTF) Trend',
             data: ${JSON.stringify(ttfTrendData)},
-            type: 'line',
             borderColor: '#f43f5e',
-            borderWidth: 1.5,
-            borderDash: [4, 4],
-            pointRadius: 0,
+            borderWidth: 2,
+            borderDash: [5, 5],
+            pointRadius: 3,
             fill: false,
             yAxisID: 'yTtf'
           }
@@ -665,17 +696,13 @@ function exportHtmlDashboard(history, config, verdictReason, semanticReport, res
         responsive: true,
         maintainAspectRatio: false,
         plugins: {
-          legend: {
-            position: 'top',
-            labels: { color: '#94a3b8', boxWidth: 12, font: { size: 11 } }
-          }
+          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' }, title: { display: true, text: 'VUs / Threads', color: '#38bdf8' } },
+          yTtf: { position: 'right', grid: { drawOnChartArea: false }, ticks: { color: '#f43f5e' }, title: { display: true, text: 'TTF Index / Latency ms', color: '#f43f5e' } }
         }
-      },
-      scales: {
-        x: { grid: { color: '#1e293b' }, ticks: { color: '#64748b' } },
-        y: { stacked: true, grid: { color: '#1e293b' }, ticks: { color: '#64748b' }, title: { display: true, text: 'Requests Volume', color: '#64748b' } },
-        yThreads: { position: 'right', display: true, grid: { drawOnChartArea: false }, ticks: { color: '#38bdf8' }, title: { display: true, text: 'Active Threads', color: '#38bdf8' } },
-        yTtf: { position: 'right', display: false, grid: { drawOnChartArea: false } }
       }
     });
   </script></body></html>`;

package/package.json

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