angular / components
Unit Size

The distribution of size of units (measured in lines of code).

Intro
  • Unit size measurements show the distribution of size of units of code (methods, functions...).
  • Units are classified in four categories based on their size (lines of code): 1-20 (small units), 20-50 (medium size units), 51-100 (long units), 101+ (very long units).
  • You should aim at keeping units small (< 20 lines). Long units may become "bloaters", code that have increased to such gargantuan proportions that they are hard to work with.
Learn more...
Unit Size Overall
  • There are 5,075 units with 38,201 lines of code in units (28.3% of code).
    • 1 very long units (114 lines of code)
    • 24 long units (1,564 lines of code)
    • 265 medium size units (7,609 lines of code)
    • 693 small units (10,018 lines of code)
    • 4,092 very small units (18,896 lines of code)
<1% | 4% | 19% | 26% | 49%
Legend:
101+
51-100
21-50
11-20
1-10
Unit Size per Extension
101+
51-100
21-50
11-20
1-10
ts<1% | 4% | 19% | 26% | 49%
js0% | 0% | 47% | 23% | 29%
Unit Size per Logical Component
primary logical decomposition
101+
51-100
21-50
11-20
1-10
src/cdk-experimental3% | 3% | 17% | 28% | 46%
src/cdk0% | 5% | 24% | 29% | 39%
src/material0% | 2% | 19% | 24% | 53%
tools/stylelint0% | 71% | 13% | 6% | 7%
tools/example-module0% | 41% | 37% | 12% | 9%
src/google-maps0% | 4% | 12% | 39% | 44%
tools/region-parser0% | 64% | 0% | 11% | 23%
tools/tslint-rules0% | 10% | 36% | 41% | 11%
src/youtube-player0% | 13% | 43% | 3% | 39%
tools/dgeni0% | 8% | 26% | 33% | 31%
src/material-experimental0% | 0% | 6% | 22% | 71%
scripts0% | 0% | 36% | 23% | 40%
src/dev-app0% | 0% | 14% | 15% | 69%
tools/release-checks0% | 0% | 45% | 52% | 1%
src/components-examples0% | 0% | 7% | 15% | 77%
tools/postinstall0% | 0% | 65% | 19% | 15%
scripts/caretaking0% | 0% | 100% | 0% | 0%
src/material-moment-adapter0% | 0% | 33% | 40% | 25%
integration/ng-update-v130% | 0% | 52% | 47% | 0%
tools/server-test0% | 0% | 35% | 18% | 46%
tools/postcss0% | 0% | 77% | 0% | 22%
tools/markdown-to-html0% | 0% | 0% | 76% | 23%
src/material-luxon-adapter0% | 0% | 0% | 47% | 52%
src/material-date-fns-adapter0% | 0% | 0% | 52% | 47%
tools/axe-protractor0% | 0% | 0% | 54% | 45%
src/e2e-app0% | 0% | 0% | 0% | 100%
tools/highlight-files0% | 0% | 0% | 0% | 100%
src/universal-app0% | 0% | 0% | 0% | 100%
tools/package-docs-content0% | 0% | 0% | 0% | 100%
src0% | 0% | 0% | 0% | 100%
integration/size-test0% | 0% | 0% | 0% | 100%
Alternative Visuals
Longest Units
Top 20 longest units
Unit# linesMcCabe index# params
private _updateRenderedContentAfterScroll()
in src/cdk-experimental/scrolling/auto-size-virtual-scroll.ts
114 21 0
export function addSymbolToNgModuleMetadata()
in src/cdk/schematics/utils/vendored-ast-utils/index.ts
99 19 5
private _visitClassDeclaration()
in src/cdk/schematics/update-tool/component-resource-collector.ts
85 20 1
function analyzeExamples()
in tools/example-module/generate-example-module.ts
83 15 2
function validateThemeMixin()
in tools/stylelint/theme-mixin-api.ts
79 21 2
ngOnChanges()
in src/google-maps/map-marker-clusterer/map-marker-clusterer.ts
78 36 1
function regionParserImpl()
in tools/region-parser/region-parser.ts
74 12 2
private _validateDecorator()
in tools/tslint-rules/validateDecoratorsRule.ts
72 20 1
private _dragStarted()
in src/cdk-experimental/column-resize/overlay-handle.ts
72 11 1
recordChanges()
in src/material/schematics/ng-update/migrations/hammer-gestures-v9/import-manager.ts
70 11 0
override visitNode()
in src/material/schematics/ng-update/migrations/package-imports-v8/secondary-entry-points-migration.ts
69 15 1
private _setupNewGestureConfigInRootModule()
in src/material/schematics/ng-update/migrations/hammer-gestures-v9/hammer-gestures-migration.ts
65 9 1
ngOnInit()
in src/youtube-player/youtube-player.ts
62 11 0
$process()
in tools/dgeni/processors/entry-point-grouper.ts
60 16 1
export function insertImport()
in src/cdk/schematics/utils/vendored-ast-utils/index.ts
59 12 5
private _syncInputs()
in src/cdk/drag-drop/directives/drag.ts
57 12 1
function validateIndividualSystemMixins()
in tools/stylelint/theme-mixin-api.ts
56 17 3
_startScrollingIfNecessary()
in src/cdk/drag-drop/drop-list-ref.ts
55 17 2
private _listenForTableEvents()
in src/cdk-experimental/popover-edit/table-directives.ts
54 1 0
_onKeydown()
in src/material/slider/slider.ts
54 20 1