autocannon-reporter - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

package.json

 {
   "name": "autocannon-reporter",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "A tool for creating html reports for autocannon",
@@ -5,0 +5,0 @@ "main": "index.js",

template/partials/report.js

@@ -28,4 +28,4 @@ 'use strict'
         <tr>
+          <th>Title</th>
           <th>Start time</th>
-          <th>Finish time</th>
           <th>Duration</th>
@@ -41,4 +41,4 @@ <th>Connections</th>
         <tr>
+          <td>${results.title}</td>
           <td>${datestuff(results.start)}</td>
-          <td>${datestuff(results.finish)}</td>
           <td>${results.duration + ' sec(s)'}</td>
@@ -56,4 +56,4 @@ <td>${results.connections}</td>
         <tr>
+          <td>${value.title}</td>
           <td>${datestuff(value.start)}</td>
-          <td>${datestuff(value.finish)}</td>
           <td>${value.duration + ' sec(s)'}</td>
@@ -82,6 +82,7 @@ <td>${value.connections}</td>
   <div class='standard-panels'>
-  ${responseBarPanel(results, hx)}
+  ${requestBarPanel(results, hx)}
+  ${latencyBarPanel(results, hx)}
+  ${throughputBarPanel(results, hx)}
   ${responsePiePanel(results, hx)}
-  ${results.errors === 0 && results.timeouts === 0 ? '' : errorPiePanel(results, hx)}
-  ${tablesPanel(results, hx)}
+  ${tablesPanel(results, compare, hx)}
   </div>
@@ -91,3 +92,3 @@ `
 
-function responseBarPanel (results, hx) {
+function latencyBarPanel (results, hx) {
   return hx `
@@ -97,7 +98,7 @@ <div class='object responseBar'>
       <h2 class='symbol'>-</h2>
-        <h2>Response Times Histogram</h2>
+        <h2>Latency Histogram</h2>
     </div>
     <div class='content graph'>
       <div class='measuringWrapper'>
-        <div class="ct-bar"></div>
+        <div class="ct-latency-bar"></div>
       </div>
@@ -109,12 +110,12 @@ </div>
 
-function responsePiePanel (results, hx) {
+function requestBarPanel (results, hx) {
   return hx `
-  <div class='object reponsePie'>
+  <div class='object requestBar'>
     <div class='heading' onclick="growDiv(this)">
       <h2 class='symbol'>-</h2>
-        <h2>Response Types Piechart (Overall)</h2>
+        <h2>Request Histogram</h2>
     </div>
     <div class='content graph'>
       <div class='measuringWrapper'>
-        <div class="ct-chart-responses ct-perfect-fourth"></div>
+        <div class="ct-request-bar"></div>
       </div>
@@ -126,12 +127,12 @@ </div>
 
-function errorPiePanel (results, hx) {
+function throughputBarPanel (results, hx) {
   return hx `
-  <div class='object errorPie'>
+  <div class='object throughputBar'>
     <div class='heading' onclick="growDiv(this)">
       <h2 class='symbol'>-</h2>
-        <h2>Error Piechart</h2>
+        <h2>Throughpout Histogram</h2>
     </div>
     <div class='content graph'>
       <div class='measuringWrapper'>
-        <div class="ct-error-pie ct-perfect-fourth"></div>
+        <div class="ct-throughput-bar"></div>
       </div>
@@ -143,3 +144,19 @@ </div>
 
-function tablesPanel (results, hx) {
+function responsePiePanel (results, hx) {
+  return hx `
+  <div class='object reponsePie'>
+    <div class='heading' onclick="growDiv(this)">
+      <h2 class='symbol'>-</h2>
+        <h2>Response Types Piechart (Overall)</h2>
+    </div>
+    <div class='content graph'>
+      <div class='measuringWrapper'>
+        <div class="ct-chart-responses ct-perfect-fourth"></div>
+      </div>
+    </div>
+  </div>
+  `
+}
+
+function tablesPanel (results, compare, hx) {
   return hx`
@@ -153,5 +170,5 @@ <div class='object'>
       <div class='measuringWrapper spaceout'>
-        ${makeTable('Requests', results.latency, key => hx`<tr><td>${key}</td><td>${results.latency[key]}</td></tr>`)}
-        ${makeTable('Latency', results.requests, key => hx`<tr><td>${key}</td><td>${results.requests[key]}</td></tr>`)}
-        ${makeTable('Throughput', results.throughput, key => hx`<tr><td>${key}</td><td>${prettyBytes(results.throughput[key])}</td></tr>`)}
+        ${makeTable('Requests [reqs/sec]', results.requests, key => hx`<tr><td>${key}</td><td class='value'>${toInt(results.requests[key])}</td>${addCompareRequestValues(compare, key, hx)}</tr>`)}
+        ${makeTable('Latency [ms]', results.latency, key => hx`<tr><td>${key}</td><td class='value'>${toInt(results.latency[key])}</td>${addCompareLatencyValues(compare, key, hx)}</tr>`)}
+        ${makeTable('Throughput [bytes/sec]', results.throughput, key => hx`<tr><td>${key}</td><td class='value'>${prettyBytes(results.throughput[key])}</td>${addCompareThroughputValues(compare, key, hx)}</tr>`)}
       </div>
@@ -176,2 +193,32 @@ </div>
 
+function addCompareRequestValues (compare, key, hx) {
+  return hx`
+    ${[...compare].reverse().map(function (value) {
+    return hx`
+      <td class='value'>${toInt(value.requests[key])}</td>
+    `
+  })}
+  `
+}
+
+function addCompareLatencyValues (compare, key, hx) {
+  return hx`
+    ${[...compare].reverse().map(function (value) {
+    return hx`
+      <td class='value'>${toInt(value.latency[key])}</td>
+    `
+  })}
+  `
+}
+
+function addCompareThroughputValues (compare, key, hx) {
+  return hx`
+    ${[...compare].reverse().map(function (value) {
+    return hx`
+      <td class='value'>${prettyBytes(value.throughput[key])}</td>
+    `
+  })}
+  `
+}
+
 function warnPanel (results, hx) {
@@ -198,2 +245,3 @@ return hx`
   ${latencyPanel(results, hx)}
+  ${throughputPanel(results, hx)}
   ${errorsPanel(results, hx)}
@@ -236,2 +284,18 @@ </div>
 
+function throughputPanel (results, hx) {
+  return hx`
+  <div class='object throughputBar'>
+    <div class='heading' onclick="growDiv(this)">
+      <h2 class='symbol'>-</h2>
+        <h2>Throughput Comparison Chart</h2>
+    </div>
+    <div class='content graph'>
+      <div class='measuringWrapper'>
+        <div class="chart-throughput-linechart ct-perfect-fourth"></div>
+      </div>
+    </div>
+  </div>
+  `
+}
+
 function errorsPanel (results, hx) {
@@ -253,1 +317,5 @@ return hx`
 }
+
+function toInt (num) {
+  return Number.parseInt(num)
+}

template/partials/scripts.js

@@ -15,2 +15,5 @@ 'use strict'
 function main (chartist, results, compare) {
+
+  // response types pie
+
   var labels = ['1xx', '2xx', '3xx', '4xx', '5xx', 'timeouts']
@@ -23,8 +26,10 @@ var nonZeros = []
   labels.forEach(function (label) {
-    compare.forEach(function (value) { compareValues.push(value[label]) })
-    compareResults[label] = compareValues.reduce(reducer)
+    if (compare.length) {
+      compare.forEach(function (value) { compareValues.push(value[label]) })
+      compareResults[label] = compareValues.reduce(reducer)
+    }
     if (results[label] !== 0 || compareResults[label] !== 0) {
       nonZeros.push(label)
       compareValues = []
-      seriesValues.push(compareResults[label] + results[label])
+      seriesValues.push(results[label] + (compare.length ? compareResults[label] : 0))
     }
@@ -45,21 +50,4 @@ })
 
-  var errorLabels = []
-  var errorValues = []
-  if (results.errors !== 0) {
-    errorLabels.push('Errors (non-timeouts)')
-    errorValues.push(results.errors)
-  }
-  if (results.timeouts !== 0) {
-    errorLabels.push('Timeouts')
-    errorValues.push(results.timeouts)
-  }
+  // latency histogram
 
-  chartist.Pie('.ct-error-pie', {
-    labels: errorLabels,
-    series: errorValues
-  }, {
-    fullWidth: true,
-    height: 450
-  })
-
   var lineOptions = {
@@ -76,2 +64,3 @@ fullWidth: true,
 
+  var compareValues = []
   var lineValues = [results.latency.min, results.latency.average,
@@ -81,3 +70,3 @@ results.latency.p50, results.latency.p75,
 
-  if (compare) {
+  if (compare.length) {
     compare.forEach(function (value) {
@@ -90,3 +79,3 @@ compareValues.push([value.latency.min, value.latency.average,
 
-    chartist.Bar('.ct-bar', {
+    chartist.Bar('.ct-latency-bar', {
       labels: ['min', 'average', '50%', '75%', '90%', '99%', '99.9%'],
@@ -96,10 +85,89 @@ series: compareValues.reverse()
   } else {
-    chartist.Bar('.ct-bar', {
+    chartist.Bar('.ct-latency-bar', {
       labels: ['min', 'average', '50%', '75%', '90%', '99%', '99.9%'],
       series: [lineValues]
     }, lineOptions)
-      // if compare array isn't used, return early
+  }
+
+  // request histogram 
+
+  var lineOptions = {
+    fullWidth: true,
+    height: 450,
+    axisY: {
+      offset: 70,
+      labelInterpolationFnc: function (value) {
+        return (value) + 'reqs/sec'
+      }
+    }
+  }
+
+  var compareValues = []
+  var lineValues = [results.requests.min, results.requests.average,
+     results.requests.p50, results.requests.p75,
+     results.requests.p90, results.requests.p99, results.requests.p99_9]
+
+  if (compare.length) {
+    compare.forEach(function (value) {
+      compareValues.push([value.requests.min, value.requests.average,
+         value.requests.p50, value.requests.p75,
+         value.requests.p90, value.requests.p99, value.requests.p99_9])
+    })
+    compareValues.push(lineValues)
+
+    chartist.Bar('.ct-request-bar', {
+      labels: ['min', 'average', '50%', '75%', '90%', '99%', '99.9%'],
+      series: compareValues.reverse()
+    }, lineOptions)
+  } else {
+    chartist.Bar('.ct-request-bar', {
+      labels: ['min', 'average', '50%', '75%', '90%', '99%', '99.9%'],
+      series: [lineValues]
+    }, lineOptions)
+  }
+
+  // throughput histogram 
+
+  var lineOptions = {
+    fullWidth: true,
+    height: 450,
+    axisY: {
+      offset: 70,
+      labelInterpolationFnc: function (value) {
+        return (value) + 'kB/sec'
+      }
+    }
+  }
+
+  var compareValues = []
+  var lineValues = [results.throughput.min, results.throughput.average,
+     results.throughput.p50, results.throughput.p75,
+     results.throughput.p90, results.throughput.p99, results.throughput.p99_9]
+
+  if (compare.length) {
+    compare.forEach(function (value) {
+      compareValues.push([value.throughput.min, value.throughput.average,
+         value.throughput.p50, value.throughput.p75,
+         value.throughput.p90, value.throughput.p99, value.throughput.p99_9])
+    })
+    compareValues.push(lineValues)
+
+    chartist.Bar('.ct-throughput-bar', {
+      labels: ['min', 'average', '50%', '75%', '90%', '99%', '99.9%'],
+      series: compareValues.reverse()
+    }, lineOptions)
+  } else {
+    chartist.Bar('.ct-throughput-bar', {
+      labels: ['min', 'average', '50%', '75%', '90%', '99%', '99.9%'],
+      series: [lineValues]
+    }, lineOptions)
+  }
+
+  if (!compare.length) {
+    // if compare array isn't used, return early
     return
   }
 
+  // request compare chart 
+
   var requestOptions = {
@@ -129,2 +197,4 @@ fullWidth: true,
 
+  // latency compare chart
+
   var latencyOptions = {
@@ -136,3 +206,3 @@ fullWidth: true,
       labelInterpolationFnc: function (value) {
-        return (Number(value).toPrecision(2) + ' ms')
+        return (value + ' ms')
       }
@@ -155,2 +225,30 @@ },
 
+  // throughput compare chart
+
+  var throughputOptions = {
+    fullWidth: true,
+    height: 450,
+    axisY: {
+      offset: 100,
+      labelInterpolationFnc: function (value) {
+        return (value + ' kB/sec')
+      }
+    },
+    low: 0
+  }
+  var compareThroughputValues = []
+  var compareThroughputLabels = []
+  compare.forEach(function (value) {
+    compareThroughputValues.push(value.throughput.average)
+    compareThroughputLabels.push(value.finish)
+  })
+  compareThroughputValues.push(results.throughput.average)
+  compareThroughputLabels.push(results.finish)
+  chartist.Line('.chart-throughput-linechart', {
+    labels: compareThroughputLabels.reverse(),
+    series: [compareThroughputValues.reverse()]
+  }, throughputOptions)
+
+  // error bar chart 
+
   var errorOptions = {
@@ -157,0 +255,0 @@ stackBars: true,

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

145272

increased by3.19%

Lines of code

1121

increased by14.86%

No dependency changes