angular / material.angular.io
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 115 units with 896 lines of code in units (11.7% of code).
    • 0 very long units (0 lines of code)
    • 0 long units (0 lines of code)
    • 4 medium size units (110 lines of code)
    • 21 small units (315 lines of code)
    • 90 very small units (471 lines of code)
0% | 0% | 12% | 35% | 52%
Legend:
101+
51-100
21-50
11-20
1-10
Unit Size per Extension
101+
51-100
21-50
11-20
1-10
js0% | 0% | 62% | 11% | 25%
ts0% | 0% | 3% | 39% | 57%
Unit Size per Logical Component
primary logical decomposition
101+
51-100
21-50
11-20
1-10
tools0% | 0% | 62% | 11% | 25%
src/app0% | 0% | 4% | 41% | 54%
scenes/src0% | 0% | 0% | 18% | 81%
src0% | 0% | 0% | 0% | 100%
Alternative Visuals
Longest Units
Top 20 longest units
Unit# linesMcCabe index# params
async function _main()
in tools/lighthouse-audit.js
35 6 1
private _replaceExamplePlaceholders()
in src/app/shared/stack-blitz/stack-blitz-writer.ts
30 8 4
async function processResults()
in tools/lighthouse-audit.js
23 5 3
function parseInput()
in tools/lighthouse-audit.js
22 7 1
private _generateExampleTabs()
in src/app/shared/example-viewer/example-viewer.ts
20 6 0
private _scrollToActiveItem()
in src/app/shared/carousel/carousel.ts
20 6 0
private async _buildInMemoryFileDictionary()
in src/app/shared/stack-blitz/stack-blitz-writer.ts
20 3 3
onKeydown()
in src/app/shared/carousel/carousel.ts
18 8 1
private _loadComponents()
in src/app/shared/doc-viewer/doc-viewer.ts
18 2 2
private onScroll()
in src/app/shared/table-of-contents/table-of-contents.ts
17 6 0
ngOnInit()
in src/app/pages/component-viewer/component-viewer.ts
17 3 0
private static initExampleViewer()
in src/app/shared/doc-viewer/doc-viewer.ts
16 3 4
selectTheme()
in src/app/shared/theme-picker/theme-picker.ts
16 4 1
function parseMinScores()
in tools/lighthouse-audit.js
15 4 1
selectCorrectTab()
in src/app/shared/example-viewer/example-viewer.ts
15 7 0
addHeaders()
in src/app/shared/table-of-contents/table-of-contents.ts
15 1 3
_getExampleTabNames()
in src/app/shared/example-viewer/example-viewer.ts
13 5 0
private updateDocument()
in src/app/shared/doc-viewer/doc-viewer.ts
13 1 1
ngAfterViewInit()
in scenes/src/app/scenes/ripples/ripples-scene.ts
12 1 0
private async _loadExampleComponent()
in src/app/shared/example-viewer/example-viewer.ts
12 4 0