# waterfall

> Create waterfall charts to show events in causal order

Latest version **3.0.1** (published 2020-06-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install waterfall
pnpm add waterfall
yarn add waterfall
bun add waterfall
```

Provides the command `waterfall`.

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.1 |
| Published | 2020-06-10 |
| First published | 2012-10-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 15.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 10 |
| Maintainers | jorandirkgreef |
| Keywords | causal order, chrome, network requests, waterfall chart |

## Links

- npm: https://www.npmjs.com/package/waterfall
- Repository: https://github.com/DonChangfoot/waterfall
- Homepage: https://github.com/DonChangfoot/waterfall#readme
- Issues: https://github.com/DonChangfoot/waterfall/issues
- npm.io page: https://npm.io/package/waterfall

## Alternatives

- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads

## Recent versions

- 3.0.1 (latest) — 2020-06-10
- 3.0.0 — 2020-06-10
- 1.0.0 — 2014-07-17
- 0.0.1 — 2012-10-15

## README

# waterfall

Create waterfall charts to show events in causal order.

![An example network waterfall](https://github.com/DonChangfoot/waterfall/blob/master/example.png?raw=true)

## Installation

You can make the `waterfall` CLI script accessible from anywhere in your path:

```
sudo npm install -g waterfall
```

## Usage

```bash
waterfall <data-file>
```

## Data file format

Getting your first waterfall chart up and running is a breeze:

`waterfall` accepts line-separated JSON events or a JSON array of events, where
each event has a start and end [timestamp](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/now) and a string label:

```json
{ "start": 1587645957644, "end": 1587645963195, "label": "DNS" }
{ "start": 1587645963195, "end": 1587645968900, "label": "TCP" }
{ "start": 1587645968910, "end": 1587646249816, "label": "TLS" }
```

**That's it!**

There are no dependencies except Chrome, which we use in headless mode to screenshot the HTML chart to a PNG.


### Command line options

You can customize bar colors by default and/or by label prefix:

```bash
waterfall --BAR-COLOR=blue --BAR-COLOR=dns:yellow <data-file>
````

You can also exclude events from the cumulative sum shown at the bottom of the
chart:

```bash
waterfall --EXCLUDE="dns lookup" <data-file>
````

## Acknowledgements

This script was created by [Joran Dirk Greef](https://github.com/jorangreef) and [Donovan Changfoot](https://github.com/DonChangfoot) as part of performance testing work on [Mojaloop](https://mojaloop.io) by [Coil](https://coil.com).

---
_Source: https://npm.io/package/waterfall · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._