microsoft / sonder-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 685 units with 7,676 lines of code in units (38.7% of code).
    • 0 very long units (0 lines of code)
    • 13 long units (891 lines of code)
    • 74 medium size units (2,127 lines of code)
    • 153 small units (2,264 lines of code)
    • 445 very small units (2,394 lines of code)
0% | 11% | 27% | 29% | 31%
Legend:
101+
51-100
21-50
11-20
1-10
Unit Size per Extension
101+
51-100
21-50
11-20
1-10
js0% | 14% | 22% | 33% | 29%
tsx0% | 8% | 32% | 24% | 33%
ts0% | 0% | 33% | 44% | 22%
Unit Size per Logical Component
primary logical decomposition
101+
51-100
21-50
11-20
1-10
src/studies/apg0% | 15% | 18% | 37% | 27%
src/draft-components/gridv20% | 26% | 17% | 32% | 23%
src/draft-components/grid0% | 16% | 26% | 27% | 29%
src/studies/tooltip0% | 12% | 36% | 16% | 34%
src/draft-components/multiselect-listbox0% | 32% | 16% | 30% | 21%
src/draft-components/tab-actions0% | 48% | 0% | 28% | 22%
src/draft-components/tree-actions0% | 0% | 65% | 11% | 23%
src/draft-components/combo-noinput0% | 0% | 72% | 0% | 28%
src/components/select0% | 0% | 67% | 15% | 17%
src/draft-components/multiselect-inline0% | 0% | 67% | 14% | 17%
src/draft-components/multiselect-buttons20% | 0% | 36% | 38% | 25%
src/draft-components/combo-autoselect0% | 0% | 46% | 10% | 42%
src/studies/forms0% | 0% | 73% | 0% | 26%
src/draft-components/multiselect-csv0% | 0% | 40% | 21% | 37%
src/draft-components/combo-readonly0% | 0% | 60% | 0% | 39%
src/draft-components/splitbutton0% | 0% | 41% | 24% | 33%
src/draft-components/listbox-expand0% | 0% | 60% | 0% | 39%
src/shared0% | 0% | 40% | 39% | 20%
src/draft-components/filter-list0% | 0% | 52% | 16% | 30%
src/draft-components/listbox-actions0% | 0% | 33% | 34% | 32%
src/draft-components/combo-twelve0% | 0% | 30% | 30% | 38%
src/components/combobox0% | 0% | 62% | 0% | 37%
src/draft-components/combo-autocomplete0% | 0% | 24% | 41% | 34%
src/draft-components/combo-eleven0% | 0% | 28% | 32% | 39%
src/draft-components/combo-filter0% | 0% | 28% | 32% | 39%
src/draft-components/combo-nofilter0% | 0% | 30% | 32% | 36%
src/draft-components/shared0% | 0% | 34% | 34% | 31%
src/draft-components/multiselect-buttons0% | 0% | 62% | 0% | 37%
src/studies/live-regions0% | 0% | 44% | 0% | 55%
src/components/multiselect0% | 0% | 61% | 0% | 38%
src/draft-components/combo-native0% | 0% | 84% | 0% | 16%
src/draft-components/toolbar0% | 0% | 0% | 81% | 18%
src/components/tooltip0% | 0% | 0% | 60% | 39%
src/draft-components/tooltip-corner0% | 0% | 0% | 60% | 39%
src/components/modal0% | 0% | 0% | 57% | 42%
src/draft-components/tooltip-arrow0% | 0% | 0% | 29% | 70%
src/draft-components/tooltip-control0% | 0% | 0% | 20% | 79%
src/draft-components/tooltip-escape0% | 0% | 0% | 25% | 75%
src/components/disclosure0% | 0% | 0% | 0% | 100%
src/draft-components/disclosure0% | 0% | 0% | 0% | 100%
src/draft-components/batch-announcer0% | 0% | 0% | 0% | 100%
src/components/tabs0% | 0% | 0% | 0% | 100%
src/draft-components/listbox-button0% | 0% | 0% | 0% | 100%
src/draft-components/textarea-charcount0% | 0% | 0% | 0% | 100%
src/studies/storefront0% | 0% | 0% | 0% | 100%
src/draft-components/multiselect-native0% | 0% | 0% | 0% | 100%
Alternative Visuals
Longest Units
Top 20 longest units
Unit# linesMcCabe index# params
TreeitemLink.prototype.handleKeydown = function()
in src/studies/apg/treeview/treeview-2/js/treeitemLinks.js
89 25 1
render()
in src/draft-components/gridv2/grid.tsx
86 9 0
MenuItem.prototype.handleKeydown = function()
in src/studies/apg/menu/menubar/js/PopupMenuItemLinks.js
84 19 1
Treeitem.prototype.handleKeydown = function()
in src/studies/apg/treeview/treeview-1/js/treeitem.js
84 23 1
render()
in src/draft-components/grid/grid.tsx
75 6 0
function onKeyDown()
in src/studies/apg/treegrid/js/treegrid-1.js
71 21 1
FontMenuItem.prototype.handleKeydown = function()
in src/studies/apg/toolbar/js/FontMenuItem.js
65 20 1
FormatToolbarItem.prototype.handleKeyDown = function()
in src/studies/tooltip/js/FormatToolbarItem.js
61 19 1
MenubarItem.prototype.handleKeydown = function()
in src/studies/apg/menu/menubar/js/MenubarItemLinks.js
58 17 1
render()
in src/draft-components/multiselect-listbox/multiselect-listbox.tsx
57 5 0
FormatToolbarItem.prototype.init = function()
in src/studies/apg/toolbar/js/FormatToolbarItem.js
57 14 0
render()
in src/draft-components/tab-actions/tab-actions.tsx
53 6 0
private onCellKeydown()
in src/draft-components/gridv2/grid.tsx
51 22 1
render()
in src/draft-components/combo-noinput/combo-noinput.tsx
50 3 0
FormatToolbarItem.prototype.init = function()
in src/studies/tooltip/js/FormatToolbarItem.js
50 13 0
renderTreeItem()
in src/draft-components/tree-actions/tree-actions.tsx
46 9 3
function getTreeActionFromKey()
in src/draft-components/tree-actions/tree-actions.tsx
42 13 4
42 25 2
var TreeitemLink = function()
in src/studies/apg/treeview/treeview-2/js/treeitemLinks.js
41 6 3
private onCellKeydown()
in src/draft-components/grid/grid.tsx
40 14 1