microsoft / angular-react
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 317 units with 1,886 lines of code in units (24.9% of code).
    • 0 very long units (0 lines of code)
    • 0 long units (0 lines of code)
    • 9 medium size units (234 lines of code)
    • 30 small units (439 lines of code)
    • 278 very small units (1,213 lines of code)
0% | 0% | 12% | 23% | 64%
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% | 12% | 23% | 64%
Unit Size per Logical Component
primary logical decomposition
101+
51-100
21-50
11-20
1-10
fabric/src/lib/components0% | 0% | 12% | 14% | 72%
core/src/lib/renderer0% | 0% | 10% | 41% | 48%
core/src/lib/components0% | 0% | 15% | 42% | 42%
fabric/src/lib/utils0% | 0% | 0% | 46% | 53%
core/src/lib/utils0% | 0% | 0% | 0% | 100%
semantic-ui/src/lib/button0% | 0% | 0% | 0% | 100%
Alternative Visuals
Longest Units
Top 20 longest units
Unit# linesMcCabe index# params
private _transformButtonOptionsToProps()
in libs/fabric/src/lib/components/search-box/search-box.component.ts
34 7 1
private _initDirective()
in libs/fabric/src/lib/components/command-bar/command-bar.component.ts
33 8 2
ngAfterContentInit()
in libs/fabric/src/lib/components/button/base-button.component.ts
30 5 0
export function createInputJsxRenderer()
in libs/core/src/lib/components/render-props.ts
24 5 3
private _renderRecursive()
in libs/core/src/lib/renderer/react-node.ts
24 6 1
private _transformBasePickerSuggestionsOptionsToProps()
in libs/fabric/src/lib/components/pickers/base-picker/base-picker.component.ts
24 4 1
private _renderReactContentChildren()
in libs/core/src/lib/renderer/components/Disguise.ts
22 2 0
private _directiveToContextualMenuItem()
in libs/fabric/src/lib/components/button/base-button.component.ts
22 2 1
ngOnChanges()
in libs/fabric/src/lib/components/command-bar/command-bar.component.ts
21 10 1
Element.prototype.removeEventListener = function()
in libs/core/src/lib/renderer/geteventlisteners.ts
20 8 3
private _initDirective()
in libs/fabric/src/lib/components/details-list/details-list.component.ts
20 2 2
private _transformExpandingCardOptionsToProps()
in libs/fabric/src/lib/components/hover-card/hover-card.component.ts
19 3 1
componentDidMount()
in libs/core/src/lib/renderer/react-template.ts
18 3 0
get strings()
in libs/fabric/src/lib/components/calendar/directives/calendar-strings-directive.component.ts
17 1 0
ngOnChanges()
in libs/fabric/src/lib/components/details-list/details-list.component.ts
17 7 1
private _passAttributesAsProps()
in libs/core/src/lib/components/wrapper-component.ts
16 4 0
export function createComponentRenderer()
in libs/core/src/lib/renderer/renderprop-helpers.ts
16 2 2
private _transformContextualMenuItemOptionsToProps()
in libs/fabric/src/lib/components/button/base-button.component.ts
16 3 1
ngAfterContentInit()
in libs/fabric/src/lib/components/contextual-menu/directives/contextual-menu-item.directive.ts
16 6 0
private _renderChildrenNaive()
in libs/core/src/lib/renderer/components/Disguise.ts
15 4 0