microsoft / roosterjs-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 231 units with 2,549 lines of code in units (26.6% of code).
    • 1 very long units (149 lines of code)
    • 2 long units (130 lines of code)
    • 30 medium size units (853 lines of code)
    • 45 small units (654 lines of code)
    • 153 very small units (763 lines of code)
5% | 5% | 33% | 25% | 29%
Legend:
101+
51-100
21-50
11-20
1-10
Unit Size per Extension
101+
51-100
21-50
11-20
1-10
tsx10% | 0% | 37% | 22% | 29%
ts0% | 9% | 29% | 23% | 37%
js0% | 16% | 25% | 40% | 17%
Unit Size per Logical Component
primary logical decomposition
101+
51-100
21-50
11-20
1-10
sample/script81% | 0% | 0% | 0% | 18%
sample/fabric0% | 88% | 0% | 0% | 11%
tools0% | 16% | 25% | 40% | 17%
packages/roosterjs-react-emoji0% | 0% | 44% | 31% | 23%
packages/roosterjs-react-command-bar0% | 0% | 42% | 14% | 43%
packages/roosterjs-react-common0% | 0% | 36% | 25% | 38%
packages/roosterjs-react-editor0% | 0% | 31% | 36% | 31%
packages/roosterjs-react-ribbon0% | 0% | 36% | 19% | 43%
packages/roosterjs-react-pickers0% | 0% | 55% | 37% | 7%
Alternative Visuals
Longest Units
Top 20 longest units
Unit# linesMcCabe index# params
function createEditor()
in sample/script/FocusOutShellSample.tsx
149 8 2
export function initializeIcons()
in sample/fabric/src/fabric-icons.ts
69 1 2
function output()
in tools/dts.js
61 14 3
private handleShortcuts()
in packages/roosterjs-react-command-bar/lib/plugins/RoosterCommandBarPlugin.ts
50 15 1
render()
in packages/roosterjs-react-ribbon/lib/components/ConfirmDialog.tsx
44 1 0
private _initButtons()
in packages/roosterjs-react-command-bar/lib/components/RoosterCommandBar.tsx
43 13 1
private renderRibbonButton()
in packages/roosterjs-react-ribbon/lib/components/Ribbon.tsx
38 8 1
public upload()
in packages/roosterjs-react-common/lib/utils/ImageManager.ts
36 11 3
export function createLinkDialog()
in packages/roosterjs-react-command-bar/lib/components/LinkDialog.tsx
34 12 3
public onPluginEvent()
in packages/roosterjs-react-common/lib/plugins/PasteImagePlugin.ts
34 8 1
public render()
in packages/roosterjs-react-emoji/lib/components/EmojiStatusBar.tsx
34 4 0
private _onKeyDownSuggestingDomEvent()
in packages/roosterjs-react-emoji/lib/plugins/EmojiPlugin.tsx
34 14 1
private _renderFullPicker()
in packages/roosterjs-react-emoji/lib/components/EmojiPane.tsx
33 4 0
private _getCallout()
in packages/roosterjs-react-emoji/lib/plugins/EmojiPlugin.tsx
33 3 0
public render()
in packages/roosterjs-react-editor/lib/components/LeanRooster.tsx
27 1 0
function main()
in tools/dts.js
27 11 1
function normalizePackageJson()
in tools/normalize-packages.js
27 5 2
public render()
in packages/roosterjs-react-command-bar/lib/components/LinkDialog.tsx
24 2 0
public render()
in packages/roosterjs-react-command-bar/lib/components/RoosterCommandBar.tsx
24 1 0
public move()
in packages/roosterjs-react-common/lib/plugins/UndoWithImagePlugin.ts
24 7 1