microsoft / satcheljs-todomvc
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 20 units with 126 lines of code in units (31.4% of code).
    • 0 very long units (0 lines of code)
    • 0 long units (0 lines of code)
    • 0 medium size units (0 lines of code)
    • 3 small units (44 lines of code)
    • 17 very small units (82 lines of code)
0% | 0% | 0% | 34% | 65%
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% | 0% | 37% | 62%
tsx0% | 0% | 0% | 30% | 69%
Unit Size per Logical Component
primary logical decomposition
101+
51-100
21-50
11-20
1-10
src/actions0% | 0% | 0% | 37% | 62%
src/components/footer0% | 0% | 0% | 68% | 31%
src/components0% | 0% | 0% | 0% | 100%
Alternative Visuals
Longest Units
Top 20 longest units
Unit# linesMcCabe index# params
function removeAllCompleted()
in src/actions/removeAllCompleted.ts
 17 4 0
function removeItem()
in src/actions/removeItem.ts
 14 3 1
function FilterButton()
in src/components/footer/FilterButton.tsx
 13 2 1
function addItem()
in src/actions/addItem.ts
 9 1 1
function toggleEditItem()
in src/actions/toggleEditItem.ts
 9 3 1
export default function App()
in src/components/App.tsx
 9 1 0
function toggleAllCompleted()
in src/actions/toggleAllCompleted.ts
 7 4 0
function updateItem()
in src/actions/updateItem.ts
 7 2 2
componentDidUpdate()
in src/components/Main.tsx
 6 2 0
function toggleCompleted()
in src/actions/toggleCompleted.ts
 5 2 1
function guid()
in src/actions/addItem.ts
 3 1 0
function s4()
in src/actions/addItem.ts
 3 1 0
function setFilter()
in src/actions/setFilter.ts
 3 1 1
function updateEditItemValue()
in src/actions/updateEditItemValue.ts
 3 1 1
function updateTextboxValue()
in src/actions/updateTextboxValue.ts
 3 1 1
onToggleCompleted()
in src/components/Main.tsx
 3 1 1
onDestroy()
in src/components/Main.tsx
 3 1 1
onToggleAllCompleted()
in src/components/Main.tsx
 3 1 0
export default reactive()
in src/components/footer/FilterButton.tsx
 3 1 1
export default reactive()
in src/components/footer/ItemsLeftCount.tsx
 3 1 1