microsoft / fuse-webui
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 257 units with 2,217 lines of code in units (46.0% of code).
    • 0 very long units (0 lines of code)
    • 1 long units (53 lines of code)
    • 19 medium size units (519 lines of code)
    • 44 small units (664 lines of code)
    • 193 very small units (981 lines of code)
0% | 2% | 23% | 29% | 44%
Legend:
101+
51-100
21-50
11-20
1-10
Unit Size per Extension
101+
51-100
21-50
11-20
1-10
ts0% | 4% | 23% | 23% | 48%
tsx0% | 0% | 23% | 37% | 39%
Unit Size per Logical Component
primary logical decomposition
101+
51-100
21-50
11-20
1-10
fuse-react-gen/commands0% | 70% | 29% | 0% | 0%
fuse-ui-fabric/tree0% | 0% | 35% | 31% | 33%
fuse-ui-shared/decorators0% | 0% | 44% | 6% | 49%
fuse-ui-shared0% | 0% | 19% | 39% | 40%
fuse-react-gen0% | 0% | 30% | 26% | 42%
fuse-ui-fabric/topNav0% | 0% | 34% | 25% | 39%
fuse-ui-fabric/timePicker0% | 0% | 28% | 28% | 42%
fuse-ui-shared/i18n0% | 0% | 63% | 0% | 36%
fuse-ui-fabric/mainNav0% | 0% | 0% | 67% | 32%
fuse-ui-fabric/splittable0% | 0% | 0% | 100% | 0%
fuse-cli0% | 0% | 0% | 54% | 45%
fuse-ui-fabric/notification0% | 0% | 0% | 83% | 16%
fuse-ui-fabric/annotationEditor0% | 0% | 0% | 34% | 65%
fuse-ui-fabric/userProfile0% | 0% | 0% | 69% | 30%
fuse-ui-fabric/dialogs0% | 0% | 0% | 31% | 68%
fuse-ui-fabric/themes0% | 0% | 0% | 22% | 77%
fuse-ui-adal0% | 0% | 0% | 46% | 53%
fuse-ui-fabric/utilities0% | 0% | 0% | 46% | 53%
fuse-ui-fabric/form0% | 0% | 0% | 38% | 61%
fuse-ui-fabric/decorators0% | 0% | 0% | 30% | 69%
fuse-ui-fabric/feedbackPanel0% | 0% | 0% | 100% | 0%
fuse-ui-fabric/actions0% | 0% | 0% | 0% | 100%
fuse-ui-fabric/datetimePicker0% | 0% | 0% | 0% | 100%
fuse-ui-adal/actions0% | 0% | 0% | 0% | 100%
fuse-ui-fabric/models0% | 0% | 0% | 0% | 100%
fuse-ui-fabric/reducers0% | 0% | 0% | 0% | 100%
fuse-ui-fabric/genericList0% | 0% | 0% | 0% | 100%
fuse-ui-fabric/login0% | 0% | 0% | 0% | 100%
fuse-ui-fabric/enumDropdown0% | 0% | 0% | 0% | 100%
fuse-ui-fabric/genericButton0% | 0% | 0% | 0% | 100%
Alternative Visuals
Longest Units
Top 20 longest units
Unit# linesMcCabe index# params
export async function handler()
in fuse-react-gen/commands/add.ts
53 10 2
private async handleKeyCommands()
in fuse-ui-fabric/tree/treeView.tsx
49 17 1
export async function parseAgainstConfig()
in fuse-react-gen/acquire-config.ts
39 6 3
export function toCase()
in fuse-ui-shared/stringCases.ts
37 14 2
export function createSequence()
in fuse-ui-shared/decorators/retry.ts
34 5 1
public render()
in fuse-ui-fabric/timePicker/timePicker.tsx
31 1 0
function rootStyles()
in fuse-ui-fabric/tree/tree.classNames.ts
28 5 2
export function detectCase()
in fuse-ui-shared/stringCases.ts
27 9 1
export function formatString()
in fuse-ui-shared/i18n/index.ts
26 6 2
public render()
in fuse-ui-fabric/tree/treeNode.tsx
24 2 0
public render()
in fuse-ui-fabric/tree/treeView.tsx
24 1 0
public render()
in fuse-ui-fabric/topNav/topNav.tsx
23 3 0
private async confirmThenDelete()
in fuse-ui-fabric/tree/treeView.tsx
23 5 0
private findNext()
in fuse-ui-fabric/tree/treeView.tsx
23 7 2
export async function handler()
in fuse-react-gen/commands/new.ts
22 1 1
private get panelProps()
in fuse-ui-fabric/topNav/topNav.tsx
22 1 0
public componentDidUpdate()
in fuse-ui-fabric/tree/treeView.tsx
22 8 2
export async function retryAction()
in fuse-ui-shared/decorators/retry.ts
22 6 1
export async function repeat()
in fuse-ui-shared/decorators/retry.ts
22 4 1
export async function transformFolder()
in fuse-react-gen/transform.ts
21 3 3