angular / material2-docs-content
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 229 units with 1,267 lines of code in units (0.9% of code).
    • 0 very long units (0 lines of code)
    • 0 long units (0 lines of code)
    • 3 medium size units (76 lines of code)
    • 15 small units (195 lines of code)
    • 211 very small units (996 lines of code)
0% | 0% | 5% | 15% | 78%
Legend:
101+
51-100
21-50
11-20
1-10
Unit Size per Extension
101+
51-100
21-50
11-20
1-10
ts0% | 0% | 5% | 15% | 78%
Unit Size per Logical Component
primary logical decomposition
101+
51-100
21-50
11-20
1-10
docs-content/examples-source0% | 0% | 5% | 15% | 78%
Alternative Visuals
Longest Units
Top 20 longest units
Unit# linesMcCabe index# params
toggleNode()
in docs-content/examples-source/material/tree/tree-dynamic/tree-dynamic-example.ts
26 5 2
ngAfterViewInit()
in docs-content/examples-source/material/table/table-http/table-http-example.ts
26 2 0
sortData()
in docs-content/examples-source/material/sort/sort-overview/sort-overview-example.ts
24 8 1
constructor()
in docs-content/examples-source/cdk/layout/breakpoint-observer-overview/breakpoint-observer-overview-example.ts
18 3 1
loadMore()
in docs-content/examples-source/material/tree/tree-loadmore/tree-loadmore-example.ts
17 6 2
constructor()
in docs-content/examples-source/material/tree/tree-loadmore/tree-loadmore-example.ts
14 1 1
ngAfterViewInit()
in docs-content/examples-source/cdk/a11y/focus-monitor-overview/focus-monitor-overview-example.ts
14 1 0
constructor()
in docs-content/examples-source/material/tree/tree-checklist/tree-checklist-example.ts
13 1 1
constructor()
in docs-content/examples-source/material/datepicker/date-range-picker-comparison/date-range-picker-comparison-example.ts
13 1 0
function createNewUser()
in docs-content/examples-source/material/table/table-overview/table-overview-example.ts
13 1 1
sortData()
in docs-content/examples-source/material/sort/sort-harness/sort-harness-example.ts
12 5 1
drop()
in docs-content/examples-source/cdk/drag-drop/cdk-drag-drop-enter-predicate/cdk-drag-drop-enter-predicate-example.ts
12 2 1
drop()
in docs-content/examples-source/cdk/drag-drop/cdk-drag-drop-connected-sorting/cdk-drag-drop-connected-sorting-example.ts
12 2 1
drop()
in docs-content/examples-source/cdk/drag-drop/cdk-drag-drop-disabled-sorting/cdk-drag-drop-disabled-sorting-example.ts
12 2 1
drop()
in docs-content/examples-source/cdk/drag-drop/cdk-drag-drop-connected-sorting-group/cdk-drag-drop-connected-sorting-group-example.ts
12 2 1
handleTreeControl()
in docs-content/examples-source/material/tree/tree-dynamic/tree-dynamic-example.ts
11 3 1
onContainerClick()
in docs-content/examples-source/material/form-field/form-field-custom-control/form-field-custom-control-example.ts
11 4 0
constructor()
in docs-content/examples-source/material/tabs/tab-group-async/tab-group-async-example.ts
11 1 0
shuffle()
in docs-content/examples-source/material/table/table-dynamic-columns/table-dynamic-columns-example.ts
10 2 0
shouldRender()
in docs-content/examples-source/cdk/tree/cdk-tree-flat/cdk-tree-flat-example.ts
10 3 1