{"id":13559067,"url":"https://github.com/micmro/PerfCascade","last_synced_at":"2025-04-03T14:31:11.473Z","repository":{"id":3058254,"uuid":"48284446","full_name":"micmro/PerfCascade","owner":"micmro","description":"Responsive, SVG based HAR waterfall viewer","archived":false,"fork":false,"pushed_at":"2023-03-03T11:27:56.000Z","size":6163,"stargazers_count":279,"open_issues_count":10,"forks_count":51,"subscribers_count":11,"default_branch":"main","last_synced_at":"2025-03-28T04:13:32.718Z","etag":null,"topics":["client-side","diagram","har","performance","performance-metrics","svg","waterfall","webperf"],"latest_commit_sha":null,"homepage":"https://micmro.github.io/PerfCascade","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/micmro.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2015-12-19T14:14:51.000Z","updated_at":"2025-03-22T11:32:02.000Z","dependencies_parsed_at":"2023-07-06T17:01:27.367Z","dependency_job_id":null,"html_url":"https://github.com/micmro/PerfCascade","commit_stats":{"total_commits":667,"total_committers":16,"mean_commits":41.6875,"dds":0.4122938530734632,"last_synced_commit":"141951297cfdb13b9692066ba4e6f1c7eebf1248"},"previous_names":[],"tags_count":161,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/micmro%2FPerfCascade","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/micmro%2FPerfCascade/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/micmro%2FPerfCascade/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/micmro%2FPerfCascade/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/micmro","download_url":"https://codeload.github.com/micmro/PerfCascade/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247018351,"owners_count":20869998,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["client-side","diagram","har","performance","performance-metrics","svg","waterfall","webperf"],"created_at":"2024-08-01T12:05:19.517Z","updated_at":"2025-04-03T14:31:10.245Z","avatar_url":"https://github.com/micmro.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","others"],"sub_categories":[],"readme":"# PerfCascade\nResponsive, SVG based [HAR](http://www.softwareishard.com/blog/har-12-spec/) waterfall viewer .\n\n[![npm version](https://img.shields.io/npm/v/perf-cascade.svg?style=flat-square)](https://www.npmjs.com/package/perf-cascade)\n[![npm downloads](https://img.shields.io/npm/dt/perf-cascade.svg?style=flat-square)](https://www.npmjs.com/package/perf-cascade)\n[![Build status][travis-image]][travis-url]\n\nInstall via `npm install perf-cascade`\u003cbr/\u003e\nLive example: https://micmro.github.io/PerfCascade/\n\n\u003cimg src=\"https://raw.githubusercontent.com/micmro/PerfCascade/gh-pages/img/PerfCascade-sample2.png\" alt=\"example screenshot\" width=\"704\" height=\"707\"\u003e\n\n## Contents\n\n- [How to use PerfCascade](#how-to-use-perfcascade)\n  * [With ES6 Compatible Module Loader (Webpack, Babel, Typescript...)](#with-es6-compatible-module-loader--webpack--babel--typescript-)\n  * [As Global Object](#as-global-object)\n  * [Use via npm](#use-via-npm)\n- [Options](#options)\n- [`*.zhar` - zipped HAR files](#--zhar----zipped-har-files)\n- [Rendering other formats (than HAR)](#rendering-other-formats--than-har-)\n- [Dev](#dev)\n- [Specs and resources](#specs-and-resources)\n\n## How to use PerfCascade\nPerfCascade is exported with [UMD](https://github.com/umdjs/umd), so you can use it as global object, via AMD (e.g. requireJS) or commonJS (internally it uses ES6 modules).\n\n### With ES6 Compatible Module Loader (Webpack, Babel, Typescript...)\nInstall the package\n```\nnpm install perf-cascade --save\n````\n\n```javascript\nimport {fromHar} from 'perf-cascade'\n\n// `myHarDoc` represents your HAR doc\n\nconst perfCascadeSvg = fromHar(myHarDoc)\ndocument.appendChild(perfCascadeSvg)\n```\n\n_With TypeScript you can additionally import TypeDefinitions for `ChartOptions` (PerfCascade Options) and `harFormat` (namespace for HAR Typings)_\n\n### As Global Object\nWhen using PerfCascade without any module system it just exports as a global object `perfCascade`, you can use as following:\n```javascript\n/** pass HAR `perfCascade.fromHar` to generate the SVG element*/\nvar perfCascadeSvg =  perfCascade.fromHar(harData)\ndocument.appendChild(perfCascadeSvg)\n```\n\nOr with options:\n```javascript\n/** override selected options for PerfCascade (all have defaults) */\nvar options = {\n  showIndicatorIcons: false, //default: true\n  leftColumnWidth: 30 //default: 25\n}\n\nvar perfCascadeSvg =  perfCascade.fromHar(harData, options)\ndocument.appendChild(perfCascadeSvg)\n```\n\nYou can find the compiled (and minified) JS in the [releases tab](https://github.com/micmro/PerfCascade/releases). For the basic version without zHAR support you need [`perf-cascade.min.js`](https://github.com/micmro/PerfCascade/blob/release/perf-cascade.min.js) and some basic CSS styles [`perf-cascade.css`](https://github.com/micmro/PerfCascade/blob/release/perf-cascade.css).\n\n### Use via npm\nYou can install PerfCascade via NPM as well:\n```\nnpm install perf-cascade\n```\n\nDirectories:\n- `node_modules/perf-cascade/dist/`: bundled UMD modules and the css file in the directory.\n- `node_modules/perf-cascade/lib`: contains the full project exported as separate ES6 modules\n- `node_modules/perf-cascade/types`: Typescript typings\n\n## Options\nsee [options.d.ts](https://github.com/micmro/PerfCascade/blob/main/src/ts/typing/options.ts) for source\n\n| Option      | Type | Default Value | Description |\n| ----------- | ---- | ------- | ----------- |\n| `rowHeight` | `number` | `23` | Height of every request bar block plus spacer pixel (in px) default: 23 |\n| `showAlignmentHelpers` | `boolean` | `true` | Show vertical lines to easier spot potential dependencies/blocking between requests |\n| `showMimeTypeIcon` | `boolean` | `true` |  Show mime type icon on the left |\n| `showIndicatorIcons` | `boolean` | `true` |  Show warning icons for potential issues on the left |\n| `leftColumnWidth` | `number` | `25` | Relative width of the info column on the left (in percent) |\n| `pageSelector` | `HTMLSelectElement` | `undefined` | DOM `\u003cselect\u003e` element to use to select a run if the HAR contains multiple runs. |\n| `selectedPage` | `number` | `0` | Zero-based index of the page to initially render.\u003cbr/\u003eIf `selectedPage` is larger than the number of pages the last page will be selected. |\n| `legendHolder` | `HTMLElement`\u003cbr/\u003e(DOM element) | `undefined` \u003cbr/\u003e(not shown) | If set a legend explaining the waterfall colours is rendered in the `legendHolder` DOM element. |\n| `showUserTiming` | `boolean` | `false` | If enabled the [UserTiming](https://developer.mozilla.org/en-US/docs/Web/API/User_Timing_API) data in WebPageTest's format `_userTime.*` get parsed and rendered as well.\u003cbr/\u003eMatching `_userTime.startTimer-*` and `_userTime.endTimer-*` entries get combined into one block. |\n| `showUserTimingEndMarker` | `boolean` | `false` (requires `showUserTiming` to be `true`) | If `showUserTiming` is enabled all `_userTime.endTimer-*` marker are hidden by default, only the UserTiming's start and duration is shown. This option also adds an `_userTime.endTimer-*` marker.\n\n## `*.zhar` - zipped HAR files\nBy loading `/perf-cascade-file-reader.min.js` as in [this example](https://github.com/micmro/PerfCascade/blob/main/src/index.html#L78-L86) you can use `perfCascadeFileReader.readFile` to read a zip file and convert it to a JSON HAR object.\n\n```javascript\nperfCascadeFileReader.readFile(fileFromTheFileInput, fileName, function(error, data){\n  if(error){\n    // handle error\n    console.error(error)\n  }else{\n    // handle success\n    renderPerfCascadeChart(data)\n  }\n})\n```\n\nOptionally `perfCascadeFileReader.readFile` also takes a callback (`(progress:number) =\u003e void`) as a forth argument\nthat gets called whenever a new unzip progress status is available.\n\n## Rendering other formats (than HAR)\nPerfCascade is composed of a parser [`src/ts/transformers/har.ts`](https://github.com/micmro/PerfCascade/blob/main/src/ts/transformers/har.ts) that parsed HAR into PerfCascade's agnostic [`WaterfallDocs`](https://github.com/micmro/PerfCascade/blob/main/src/ts/typing/waterfall.ts) format and the renderer (see `PerfCascade()` in [`src/ts/main.ts`](https://github.com/micmro/PerfCascade/blob/main/src/ts/main.ts) that creates the chart SVG.\n\nIf you want to render another format, you could fork the repo and create a new parser in [`src/ts/transformers/`](https://github.com/micmro/PerfCascade/blob/main/src/ts/transformers/) and implement a new `fromMyNewFormat` function similar to `fromHar()`in [`src/ts/main.ts`](https://github.com/micmro/PerfCascade/blob/main/src/ts/main.ts) that takes your format, calls its parser and then calls the main `PerfCascade()` function with it and returns it.\n\nIt would also be possible to separate the renderer into a separate package, if there is enough interest to justify the effort (create an issue and we can discuss it).\n\n## Dev\n- Start live-reload server and Typescript compiler with watch: `npm run watch`\n- Create uglified version: `npm run build`\n\n_See `package.json` for other useful tasks like linting, release etc._\n\n## Specs and resources\n\n- [W3C HAR Spec](https://w3c.github.io/web-performance/specs/HAR/Overview.html)\n- [HAR 1.2 Spec](http://www.softwareishard.com/blog/har-12-spec)\n- [HAR Resources](https://github.com/ahmadnassri/har-resources)\n\n[travis-image]: https://img.shields.io/travis/micmro/PerfCascade.svg?style=flat-square\n[travis-url]: https://travis-ci.org/micmro/PerfCascade\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmicmro%2FPerfCascade","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmicmro%2FPerfCascade","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmicmro%2FPerfCascade/lists"}