{"id":13452224,"url":"https://github.com/kentcdodds/ng-stats","last_synced_at":"2025-03-23T19:33:55.986Z","repository":{"id":17853821,"uuid":"20775775","full_name":"kentcdodds/ng-stats","owner":"kentcdodds","description":"Little utility to show stats about your page's angular digest/watches.","archived":true,"fork":false,"pushed_at":"2019-05-03T05:49:50.000Z","size":1534,"stargazers_count":654,"open_issues_count":11,"forks_count":77,"subscribers_count":20,"default_branch":"master","last_synced_at":"2024-10-11T03:08:58.569Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://kentcdodds.github.io/ng-stats/","language":"JavaScript","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/kentcdodds.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}},"created_at":"2014-06-12T17:04:05.000Z","updated_at":"2024-04-24T13:54:56.000Z","dependencies_parsed_at":"2022-09-13T19:50:45.610Z","dependency_job_id":null,"html_url":"https://github.com/kentcdodds/ng-stats","commit_stats":null,"previous_names":[],"tags_count":29,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kentcdodds%2Fng-stats","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kentcdodds%2Fng-stats/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kentcdodds%2Fng-stats/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kentcdodds%2Fng-stats/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kentcdodds","download_url":"https://codeload.github.com/kentcdodds/ng-stats/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221900758,"owners_count":16898987,"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":[],"created_at":"2024-07-31T07:01:17.385Z","updated_at":"2024-10-28T18:30:46.676Z","avatar_url":"https://github.com/kentcdodds.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# ng-stats\n\n![unmaintained](https://img.shields.io/badge/status-unmaintained-red.svg?style=flat-square)\n\n[![npm version](https://img.shields.io/npm/v/ng-stats.svg?style=flat-square)](https://www.npmjs.org/package/ng-stats)\n[![npm downloads](https://img.shields.io/npm/dm/ng-stats.svg?style=flat-square)](http://npm-stat.com/charts.html?package=ng-stats\u0026from=2015-01-01)\n\nLittle utility to show stats about your page's angular digest/watches. This library currently has a simple script to\nproduce a chart (see below). It also creates a module called `angularStats` which has a directive called `angular-stats`\nwhich can be used to put angular stats on a specific place on the page that you specify.\n\nExample Green (digests are running smoothly):\n\n![Example Green](http://cl.ly/image/2H1X2Q222i0F/ng-stats-good.png)\n\nExample Red (digests are taking a bit...):\n\n![Example Red](http://cl.ly/image/2f3L1B3b1q2V/ng-stats-bad.png)\n\n[Interactive Demo](https://kentcdodds.github.io/ng-stats/)\n\nThe first number is the number of watchers on the page (including `{{variables}}`, `$scope.$watch`, etc.). The second\nnumber is how long (in milliseconds) it takes angular to go through each digest cycle on average (bigger is worse). The\ngraph shows a trend of the digest cycle average time.\n\n## Thanks\n\n[Viper Bailey](https://github.com/jinxidoru) for writing the initial version (and most of the graph stuff).\n\n## Development\n\n1. `npm install`\n2. `bower install`\n3. `grunt` for server\n4. `grunt release` for release\n\n## Installation\n\n### Bookmarklet\n\nCopy the code below and create a bookmarklet for ng-stats to use it on any angular website (so long as the debug info is\nenabled, if not, you'll need to run `angular.reloadWithDebugInfo()` first).\n\n```javascript\njavascript: (function() {var a = document.createElement(\"script\");a.src = \"https://rawgit.com/kentcdodds/ng-stats/master/dist/ng-stats.js\";a.onload=function(){window.showAngularStats()};document.head.appendChild(a)})();\n```\n\nIf you just want the chart for development purposes, it's actually easiest to use as a\n[Chrome DevTools Snippet](https://developer.chrome.com/devtools/docs/authoring-development-workflow#snippets).\nJust copy/paste the `dist/ng-stats.js` file into a snippet.\n\nHowever, it uses UMD, so you can also include it in your app if you want via:\n\n`$ npm|bower install ng-stats`\n\nor download `dist/ng-stats.js` and\n\n`\u003cscript src=\"path-to/ng-stats.js\"\u003e\u003c/script\u003e`\n\nor\n\n```javascript\nvar showAngularStats = require('path-to-ng-stats');\n```\n\nYou now have a `angularStats` module and `showAngularStats` function you can call\n\n## Chart\n\n### Usage\n\nSimply invoke `showAngularStats( { options } )` and the chart will appear. It also returns an object with a few handy\nthings depending on your options. One of these things is `listeners` which is an object that has two objects:\n`digestLength` and `watchCount`. You can add a custom listener that is called when the digest cycles happen (though\nfor performance reasons when calculating the watchCount, the `watchCount` listeners are throttled). Here's an example\nof adding custom listeners:\n\n```javascript\nvar ngStats = showAngularStats();\n\nngStats.listeners.digestLength.nameOfYourListener = function(digestLength) {\n  console.log('Digest: ' + digestLength);\n};\n\nngStats.listeners.watchCount.nameOfYourListener = function(watchCount) {\n  console.log('Watches: ' + watchCount);\n};\n```\n\n### Options\n\nYou can pass the function one (optional) argument. If you pass `false` it will turn off \"autoload\" and do nothing. You can also pass an object with other options:\n\n#### position (object) - default: `'topleft'`\n\nControls the position of the graphic.\nPossible values: Any combination of `top`, `left`, `right`, `bottom`.\n\n#### digestTimeThreshold (number) - default: 16\n\nThe time (in milliseconds) where it goes from red to green.\n\n#### autoload (string or boolean) - default: false\n\nUses the [Storage API](https://developer.mozilla.org/en-US/docs/Web/API/Storage) to store whether the graphic should be automatically loaded every time the page is reloaded.  Pass in `'localStorage'` for persistent loading or `'sessionStorage'` to load ng-stats for only the current session.\n\nNote, if you pass `false` as options, it will simply remove the stats window and exit: `showAngularStats(false)`\n\n#### trackDigest (boolean) - default: false\n\n`showAngularStats` returns an object. Setting this to true will add an array to that object called `digest` that holds\nall of the digest lengths.\n\n#### trackWatches (boolean) - default: false\n\n`showAngularStats` returns an object. Setting this to true will add an array to that object called `watches` that holds\nall of the watch counts as they change.\n\n#### logDigest (boolean) - default: false\n\nSetting this to true will cause ng-stats to log out the digest lengths to the console. It will be colored green or red\nbased on the digestTimeThreshold.\n\n#### logWatches (boolean) - default: false\n\nSetting this to true will cause ng-stats to log out the watch count to the console as it changes.\n\n#### htmlId (string) - default: null\n\nSets an HTML ID attribute to the rendered stats element.\n\n#### rootScope (object) - default: undefined\n\nPasses the $rootScope to ng-stats. This parameter is only required for Ionic support where the ng-scope and ng-isolate-scope classes are removed. The only way of using the ng-stats with Ionic is invoking `showAngularStats( { options } )` in your code and passing the `$rootScope` manually.\n\n## Module\n\nSimply declare it as a dependency `angular.module('your-mod', ['angularStats']);`\n\nThen use the directive:\n\n```\n\u003cdiv angular-stats watch-count=\".watch-count\" digest-length=\".digest-length\"\n     on-watch-count-update=\"onWatchCountUpdate(watchCount)\"\n     on-digest-length-update=\"onDigestLengthUpdate(digestLength)\"\u003e\n  Watch Count: \u003cspan class=\"watch-count\"\u003e\u003c/span\u003e\u003cbr /\u003e\n  Digest Cycle Length: \u003cspan class=\"digest-length\"\u003e\u003c/span\u003e\n\u003c/div\u003e\n```\n\n### angular-stats attributes\n\n#### angular-stats\n\nThe directive itself. No value is expected\n\n#### watch-count\n\nHaving this attribute will keep track of the watch count and update the `text` of a specified element.\nPossible values are:\n\n1. Selector for a child element to update\n2. no value - refers to the current element (updates the text of the current element)\n\n#### watch-count-root\n\n`angular-stats` defaults to keeping track of the watch count for the whole page, however if you want to keep track of a\nspecific element (and its children), provide this with a element query selector. As a convenience, if `this` is provided\nthen the `watch-count-root` will be set to the element itself. Also, if you want to scope the query selector to the\nelement, add `watch-count-of-child` as an attribute (no value)\n\n#### on-watch-count-update\n\nBecause of the performance implications of calculating the watch count, this is not called every digest but a maximum\nof once every 300ms. Still avoid invoking another digest here though. The name of the variable passed is `watchCount`\n(like you see in the example).\n\n#### digest-length\n\nThis works similar to the `watch-count` attribute. It's presence will cause the directive to keep track of the\n`digest-length` and will update the `text` of a specified element (rounds to two decimal places). Possible values are:\n\n1. Selector for a child element to update\n2. no value - refers to the current element (updates the text of the current element)\n\n#### on-digest-length-update\n\nPass an expression to evaluate with every digest length update. This gets called on every digest (so be sure you don't\ninvoke another digest in this handler or you'll get an infinite loop of doom). The name of the variable passed is\n`digestLength` (as in the example).\n\n## Roadmap\n\n- Add analysis to highlight areas on the page that have highest watch counts.\n- Somehow find out which watches are taking the longest... Ideas on implementation are welcome...\n- See what could be done with the new scoped digest coming in Angular version 1.3.\n- Count the number of digests or provide some analytics for frequency?\n- Create a Chrome Extension for the chart or integrate with [batarang](https://github.com/angular/batarang)?\n- Other ideas?\n\n## Other notes\n\n### Performance impact\n\nThis will not impact the speed of your application at all until you actually use it. It also will hopefully only\nnegatively impact your app's performance minimally. This is intended to be used in development only for debugging\npurposes so it shouldn't matter much anyway. It should be noted that calculating the watch count can be pretty\nexpensive, so it's throttled to be calculated a minimum of 300ms.\n\n### Using in an iframe\n\nThanks to [this brilliant PR](https://github.com/kentcdodds/ng-stats/pull/25) from\n[@jinyangzhen](https://github.com/jinyangzhen), you can run ng-stats in an iframe (like plunker!). See the PR for\nan example of how to accomplish this.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkentcdodds%2Fng-stats","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkentcdodds%2Fng-stats","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkentcdodds%2Fng-stats/lists"}