waterfall.draw
v1.0.3
Published
<p align="center"> <img src="https://firebasestorage.googleapis.com/v0/b/devesh-blog-3fbfc.appspot.com/o/Waterfall.Draw.Screenshot.png?alt=media&token=c5813b43-8f03-4afb-9b2b-4c3510846d33" title="Waterfall.Draw" style="border: 1px solid #efefef"> </p>
Downloads
10
Maintainers
Readme
A simple JavaScript library to draw a waterfall chart of network requests.
Installation
npm i waterfall.draw
or
<script type="text/javascript" src="https://unpkg.com/waterfall.draw"></script>
Add CSS:
import "waterfall.draw/styles.min.css";
<link rel="stylesheet" href="https://unpkg.com/waterfall.draw/styles.min.css"></link>
Get Started
import waterfall from "waterfall.draw";
const now = new Date().getTime();
const requests = [
{
url: "/api/v1/a",
startedAt: new Date(now),
endedAt: new Date(now + 5000),
method: 'GET'
},
{
url: "/api/v2/b",
startedAt: new Date(now + 5000),
endedAt: new Date(now + 10000),
method: 'POST'
},
{
url: "/api/v2/c",
startedAt: new Date(now + 2000),
endedAt: new Date(now + 5000),
method: 'PUT'
},
{
url: "/api/v2/d",
startedAt: new Date(now + 6500),
endedAt: new Date(now + 7000),
method: 'DELETE'
},
];
waterfall(
"#elementselector" or document.getElementById('elementselector'),
requests
);