microsoft / helium-ui
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 11 units with 321 lines of code in units (36.9% of code).
    • 1 very long units (128 lines of code)
    • 0 long units (0 lines of code)
    • 4 medium size units (121 lines of code)
    • 3 small units (50 lines of code)
    • 3 very small units (22 lines of code)
39% | 0% | 37% | 15% | 6%
Legend:
101+
51-100
21-50
11-20
1-10
Unit Size per Extension
101+
51-100
21-50
11-20
1-10
tsx54% | 0% | 17% | 21% | 6%
ts0% | 0% | 92% | 0% | 7%
Unit Size per Logical Component
primary logical decomposition
101+
51-100
21-50
11-20
1-10
src54% | 0% | 34% | 7% | 3%
src/components0% | 0% | 45% | 37% | 17%
Alternative Visuals
Longest Units
Top 11 longest units
Unit# linesMcCabe index# params
render()
in src/App.tsx
 128 3 0
render()
in src/components/movieComp.tsx
 40 2 0
function registerValidSW()
in src/serviceWorker.ts
 33 8 2
export function register()
in src/serviceWorker.ts
 25 5 1
function checkValidServiceWorker()
in src/serviceWorker.ts
 23 4 2
render()
in src/components/applicationBar.tsx
 19 1 0
componentDidMount()
in src/App.tsx
 17 1 0
constructor()
in src/components/movieComp.tsx
 14 1 1
backgroundColor: fade()
in src/components/applicationBar.tsx
 9 1 2
export function unregister()
in src/serviceWorker.ts
 7 2 0
constructor()
in src/components/applicationBar.tsx
 6 1 1