microsoft / dag-history-component
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 117 units with 1,249 lines of code in units (27.7% of code).
    • 0 very long units (0 lines of code)
    • 3 long units (215 lines of code)
    • 11 medium size units (342 lines of code)
    • 24 small units (342 lines of code)
    • 79 very small units (350 lines of code)
0% | 17% | 27% | 27% | 28%
Legend:
101+
51-100
21-50
11-20
1-10
Unit Size per Extension
101+
51-100
21-50
11-20
1-10
tsx0% | 22% | 13% | 31% | 32%
ts0% | 12% | 43% | 21% | 23%
js0% | 0% | 0% | 78% | 21%
Unit Size per Logical Component
primary logical decomposition
101+
51-100
21-50
11-20
1-10
src/components0% | 30% | 19% | 25% | 23%
src/state0% | 0% | 81% | 7% | 10%
example/persister0% | 0% | 47% | 41% | 11%
example/state0% | 0% | 35% | 41% | 22%
src/util0% | 0% | 13% | 23% | 62%
stories/components0% | 0% | 0% | 40% | 59%
example/components0% | 0% | 0% | 69% | 30%
scripts0% | 0% | 0% | 100% | 0%
ROOT0% | 0% | 0% | 0% | 100%
Alternative Visuals
Longest Units
Top 20 longest units
Unit# linesMcCabe index# params
getBranchList()
in src/components/History/HistoryView/BranchListContainer.tsx
 89 15 2
export default function makeActions()
in src/components/History/BookmarkActions.ts
 69 11 5
renderPlayback()
in src/components/History/index.tsx
 57 4 0
export default function calculateSpans()
in src/components/BranchProfile/calculateSpans.ts
 46 17 9
export default function reduce()
in src/state/reducers/bookmarks.ts
 41 10 2
render()
in src/components/OptionDropdown/index.tsx
 38 7 0
export default function simulate()
in example/persister/simulate.ts
 34 6 3
function getStateList()
in src/components/History/HistoryView/StateListContainer.tsx
 31 3 5
export default function makeReducer()
in src/state/reducers/views.ts
 31 6 1
export default function()
in src/state/reducers/playback.ts
 30 7 1
export default function makeReducer()
in src/state/reducers/dragDrop.ts
 25 7 1
public render()
in src/components/Bookmark/EditBookmark.tsx
 23 3 0
export default function reduce()
in example/state/reducers/app/metadata.ts
 22 4 2
export function insertSpan()
in src/util/spans.ts
 21 7 2
render()
in src/components/History/index.tsx
 20 2 0
export default function calculateSpans()
in src/components/DiscoveryTrail/calculateSpans.ts
 19 6 4
public render()
in src/components/Transport/index.tsx
 19 3 0
render()
in example/components/Application.tsx
 18 1 0
private onDoneEditing()
in src/components/Bookmark/EditBookmark.tsx
 18 3 0
private onLeadInSet()
in src/components/Bookmark/EditBookmark.tsx
 18 4 1