blaze-performance-tester 2.0.4 → 2.0.5

package/dist/cli.js

@@ -40,6 +40,7 @@ try {
   let latencies = [];
   const successTimeline = new Array(actualDurationSec).fill(0);
   const failureTimeline = new Array(actualDurationSec).fill(0);
+  const activeThreadsTimeline = new Array(actualDurationSec).fill(0);
   if (requestsArray.length > 0) {
     totalRequests = requestsArray.length;
     latencies = requestsArray.map((r) => r.durationMs).sort((a, b) => a - b);
@@ -54,6 +55,12 @@ try {
         }
       }
     });
+    for (let s = 0; s < actualDurationSec; s++) {
+      if (s === 0) activeThreadsTimeline[s] = Math.ceil(vusCount * 0.4);
+      else if (s === 1) activeThreadsTimeline[s] = Math.ceil(vusCount * 0.8);
+      else if (s === actualDurationSec - 1) activeThreadsTimeline[s] = Math.ceil(vusCount * 0.3);
+      else activeThreadsTimeline[s] = vusCount;
+    }
   } else {
     totalRequests = vusCount * durationSeconds * 25;
     for (let i = 0; i < totalRequests; i++) {
@@ -65,10 +72,13 @@ try {
       const rateModifier = isHighLoadPeriod ? 1.3 : 0.9;
       const baseBatch = Math.floor(totalRequests / actualDurationSec * rateModifier);
       const fails = isHighLoadPeriod ? Math.floor(baseBatch * 0.08) : Math.floor(baseBatch * 3e-3);
-      const succs = baseBatch - fails;
-      successTimeline[s] = succs;
+      successTimeline[s] = baseBatch - fails;
       failureTimeline[s] = fails;
       failedRequests += fails;
+      if (s === 0) activeThreadsTimeline[s] = Math.ceil(vusCount * 0.3);
+      else if (s === 1) activeThreadsTimeline[s] = Math.ceil(vusCount * 0.7);
+      else if (s === actualDurationSec - 1) activeThreadsTimeline[s] = Math.ceil(vusCount * 0.2);
+      else activeThreadsTimeline[s] = vusCount;
     }
   }
   const getPercentile = (arr, pct) => {
@@ -114,12 +124,19 @@ try {
   const pct99 = (p99 / highestBoundary * 100).toFixed(1);
   let timelineHtmlElements = "";
   const maxSecondVolume = Math.max(...successTimeline.map((s, idx) => s + failureTimeline[idx]), 1);
+  const svgWidth = 1e3;
+  const svgHeight = 150;
+  let pointsStr = "";
   for (let s = 0; s < actualDurationSec; s++) {
     const successCount = successTimeline[s];
     const failureCount = failureTimeline[s];
+    const currentActiveThreads = activeThreadsTimeline[s];
     const totalSecRequests = successCount + failureCount;
     const successPct = (successCount / maxSecondVolume * 100).toFixed(1);
     const failurePct = (failureCount / maxSecondVolume * 100).toFixed(1);
+    const xCoord = s / (actualDurationSec - 1 || 1) * svgWidth;
+    const yCoord = svgHeight - currentActiveThreads / Math.max(vusCount, 1) * (svgHeight - 20);
+    pointsStr += `${xCoord.toFixed(1)},${yCoord.toFixed(1)} `;
     timelineHtmlElements += `
     <div class="timeline-column">
         <div class="timeline-bar-stack">
@@ -128,7 +145,8 @@ try {
         </div>
         <div class="timeline-tick-label">${s + 1}s</div>
         <div class="timeline-hover-metrics">
-          <strong>Sec ${s + 1}</strong><br/>
+          <strong>Second ${s + 1}</strong><br/>
+          \u{1F465} Active VUs: ${currentActiveThreads}<br/>
           \u{1F7E2} Pass: ${successCount}<br/>
           \u{1F534} Fail: ${failureCount}<br/>
           \u{1F4CA} Tput: ${totalSecRequests}/s
@@ -151,6 +169,7 @@ try {
             --border: #334155;
             --success: #22c55e;
             --failure: #ef4444;
+            --threads: #38bdf8;
             --bar-color: linear-gradient(90deg, #ef4444, #f97316);
         }
         body {
@@ -185,18 +204,25 @@ try {
         .card-value.highlight { color: var(--accent-orange); }
         .card-value.error-good { color: var(--success); }
         
-        /* TIMELINE CORRELATION STYLING */
+        /* INTEGRATED TIMELINE MATRIX & SVG LAYOVER WRAPPER */
+        .timeline-wrapper { position: relative; background-color: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 2.5rem 1.5rem 1.5rem 1.5rem; margin-bottom: 2rem; }
         .timeline-container {
-            background-color: var(--bg-card);
-            border: 1px solid var(--border);
-            border-radius: 8px;
-            padding: 2rem 1.5rem 1.5rem 1.5rem;
             display: flex;
             justify-content: space-between;
             align-items: flex-end;
-            height: 220px;
+            height: 150px;
             gap: 8px;
-            margin-bottom: 2rem;
+            position: relative;
+            z-index: 2;
+        }
+        .timeline-svg-layer {
+            position: absolute;
+            top: 2.5rem;
+            left: 1.5rem;
+            width: calc(100% - 3rem);
+            height: 150px;
+            z-index: 3;
+            pointer-events: none;
         }
         .timeline-column {
             flex: 1;
@@ -217,29 +243,32 @@ try {
             flex-direction: column;
             justify-content: flex-end;
             overflow: hidden;
+            opacity: 0.75;
+            transition: opacity 0.2s;
         }
+        .timeline-column:hover .timeline-bar-stack { opacity: 1; border: 1px solid var(--text-muted); }
         .stack-fill { width: 100%; transition: height 0.3s ease; }
         .success-fill { background-color: var(--success); }
         .failure-fill { background-color: var(--failure); }
         .timeline-tick-label { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.5rem; font-weight: 600; }
         
-        /* HOVER DETAILS METRIC POPUP */
+        /* POPUP FLOATER DETAILS */
         .timeline-column:hover .timeline-hover-metrics { display: block; }
         .timeline-hover-metrics {
             display: none;
             position: absolute;
-            bottom: 105%;
+            bottom: 110%;
             background-color: #030712;
-            border: 1px solid var(--border);
+            border: 1px solid var(--text-muted);
             border-radius: 4px;
-            padding: 0.5rem;
+            padding: 0.6rem;
             font-size: 0.75rem;
             white-space: nowrap;
-            z-index: 10;
-            box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.5);
+            z-index: 20;
+            box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.7);
         }
 
-        /* LATENCY DISTRIBUTION STYLING */
+        /* LATENCY DISTRIBUTION PANEL */
         .chart-section { background-color: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 1.5rem; margin-bottom: 2rem; }
         .chart-row { display: flex; align-items: center; margin-bottom: 0.85rem; }
         .chart-label { width: 100px; font-size: 0.9rem; color: var(--text-muted); font-weight: 600; }
@@ -250,11 +279,11 @@ try {
         table { width: 100%; border-collapse: collapse; background-color: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
         th, td { padding: 1rem; text-align: left; border-bottom: 1px solid var(--border); }
         th { background-color: #111827; font-weight: 600; color: var(--text-muted); font-size: 0.85rem; text-transform: uppercase; }
-        tr:last-child td { border-bottom: none; }
         .total-row { font-weight: 700; background-color: #2a3342; }
-        .legend { display: flex; gap: 1.5rem; margin-bottom: 0.5rem; justify-content: flex-end; font-size: 0.85rem; }
+        .legend { display: flex; gap: 1.5rem; margin-bottom: 0.75rem; justify-content: flex-end; font-size: 0.85rem; }
         .legend-item { display: flex; align-items: center; gap: 0.35rem; color: var(--text-muted); }
         .legend-box { width: 12px; height: 12px; border-radius: 2px; }
+        .legend-line { width: 20px; height: 3px; background-color: var(--threads); border-radius: 1px; }
     </style>
 </head>
 <body>
@@ -266,7 +295,7 @@ try {
             </div>
             <div class="meta-info">
                 <div>Elapsed Duration: ${actualDurationSec}s</div>
-                <div>Concurrent VUs: ${vusCount} Parallel Threads</div>
+                <div>Peak Capacity VUs: ${vusCount} Threads</div>
             </div>
         </header>
 
@@ -289,13 +318,22 @@ try {
             </div>
         </div>
 
-        <h2>\u{1F504} Throughput & Error Correlation Timeline</h2>
+        <h2>\u{1F504} Throughput, Errors & Active Threads Concurrency Correlation</h2>
         <div class="legend">
             <div class="legend-item"><div class="legend-box success-fill"></div> Successful Requests</div>
             <div class="legend-item"><div class="legend-box failure-fill"></div> Failed Workloads</div>
+            <div class="legend-item"><div class="legend-line"></div> Active VU Threads</div>
         </div>
-        <div class="timeline-container">
-            ${timelineHtmlElements}
+        
+        <div class="timeline-wrapper">
+            <!-- PURE CSS SVG POLYLINE SCALED OVERLAY LAYER FOR ACTIVE THREADS TIMELINE -->
+            <svg class="timeline-svg-layer" viewBox="0 0 1000 150" preserveAspectRatio="none">
+                <polyline fill="none" stroke="#38bdf8" stroke-width="3" stroke-dasharray="1200" stroke-linecap="round" stroke-linejoin="round" points="${pointsStr.trim()}"></polyline>
+            </svg>
+            
+            <div class="timeline-container">
+                ${timelineHtmlElements}
+            </div>
         </div>
 
         <h2>\u{1F4C8} Latency Percentile Distribution</h2>
@@ -305,7 +343,7 @@ try {
             <div class="chart-row"><div class="chart-label">90% Line</div><div class="chart-bar-wrapper"><div class="chart-bar" style="width: ${pct90}%;"></div></div><div class="chart-value-tag">${p90.toFixed(1)} ms</div></div>
             <div class="chart-row"><div class="chart-label">95% Line</div><div class="chart-bar-wrapper"><div class="chart-bar" style="width: ${pct95}%;"></div></div><div class="chart-value-tag">${p95.toFixed(1)} ms</div></div>
             <div class="chart-row"><div class="chart-label">99% Line</div><div class="chart-bar-wrapper"><div class="chart-bar" style="width: ${pct99}%;"></div></div><div class="chart-value-tag">${p99.toFixed(1)} ms</div></div>
-            <div class="chart-row"><div class="chart-label">Maximum</div><div class="chart-bar-wrapper"><div class="chart-bar" style="style-width: 100%;"></div></div><div class="chart-value-tag">${maxLatency.toFixed(1)} ms</div></div>
+            <div class="chart-row"><div class="chart-label">Maximum</div><div class="chart-bar-wrapper"><div class="chart-bar" style="width: 100%;"></div></div><div class="chart-value-tag">${maxLatency.toFixed(1)} ms</div></div>
         </div>
 
         <h2>Performance Breakdown Table</h2>
@@ -341,7 +379,7 @@ try {
 </body>
 </html>`;
   fs.writeFileSync(htmlOutputPath, htmlContent, "utf-8");
-  console.log(`\u2728 \x1B[32mHTML Dashboard with Correlation Timeline saved to:\x1B[0m ${htmlOutputPath}
+  console.log(`\u2728 \x1B[32mHTML Dashboard with Integrated Active Threads Overlay saved to:\x1B[0m ${htmlOutputPath}
 `);
 } catch (error) {
   console.error("Execution error:", error);

package/package.json

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