microsoft / fluentui
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 4,487 units with 69,437 lines of code in units (21.5% of code).
    • 77 very long units (11,509 lines of code)
    • 143 long units (9,891 lines of code)
    • 640 medium size units (19,662 lines of code)
    • 947 small units (13,934 lines of code)
    • 2,680 very small units (14,441 lines of code)
16% | 14% | 28% | 20% | 20%
Legend:
101+
51-100
21-50
11-20
1-10
Unit Size per Extension
101+
51-100
21-50
11-20
1-10
tsx20% | 14% | 27% | 17% | 20%
ts12% | 13% | 29% | 22% | 21%
js0% | 8% | 35% | 31% | 24%
Unit Size per Logical Component
primary logical decomposition
101+
51-100
21-50
11-20
1-10
packages/react18% | 13% | 27% | 19% | 20%
packages/react-examples35% | 12% | 18% | 12% | 21%
packages/font-icons-mdl292% | 6% | 1% | 0% | 0%
apps/public-docsite38% | 12% | 21% | 10% | 16%
packages/fluentui6% | 16% | 36% | 20% | 19%
packages/react-charting18% | 27% | 29% | 12% | 11%
packages/react-experiments18% | 10% | 32% | 16% | 22%
packages/merge-styles12% | 39% | 26% | 10% | 11%
packages/codemods13% | 6% | 31% | 25% | 23%
scripts/gulp7% | 18% | 39% | 20% | 13%
packages/react-positioning30% | 0% | 20% | 33% | 15%
packages/react-docsite-components4% | 19% | 32% | 24% | 19%
packages/utilities0% | 13% | 17% | 32% | 36%
packages/scheme-utilities0% | 89% | 0% | 4% | 6%
packages/react-focus0% | 29% | 45% | 18% | 7%
apps/perf-test0% | 55% | 19% | 16% | 8%
packages/web-components0% | 4% | 21% | 37% | 36%
packages/react-aria0% | 92% | 0% | 0% | 7%
scripts/tasks0% | 12% | 56% | 21% | 9%
packages/react-file-type-icons0% | 62% | 0% | 33% | 4%
scripts0% | 8% | 28% | 41% | 21%
packages/bundle-size0% | 18% | 36% | 21% | 23%
scripts/fluentui-publish0% | 46% | 43% | 10% | 0%
apps/test-bundles0% | 46% | 0% | 37% | 15%
packages/react-monaco-editor0% | 12% | 43% | 37% | 7%
packages/public-docsite-setup0% | 36% | 49% | 0% | 14%
tools/generators0% | 8% | 32% | 38% | 20%
packages/style-utilities0% | 0% | 50% | 21% | 28%
packages/react-conformance0% | 0% | 56% | 31% | 11%
scripts/updateReleaseNotes0% | 0% | 73% | 20% | 5%
packages/example-data0% | 0% | 84% | 7% | 8%
packages/api-docs0% | 0% | 47% | 27% | 25%
apps/theming-designer0% | 0% | 53% | 21% | 25%
packages/react-hooks0% | 0% | 62% | 21% | 15%
apps/public-docsite-resources0% | 0% | 11% | 13% | 74%
scripts/projects-test0% | 0% | 55% | 9% | 35%
scripts/monorepo0% | 0% | 48% | 35% | 16%
packages/date-time-utilities0% | 0% | 29% | 30% | 40%
packages/monaco-editor0% | 0% | 60% | 22% | 17%
scripts/dangerjs0% | 0% | 88% | 0% | 11%
packages/react-menu0% | 0% | 26% | 21% | 51%
packages/theme0% | 0% | 15% | 50% | 33%
packages/react-popover0% | 0% | 64% | 17% | 18%
packages/dom-utilities0% | 0% | 50% | 11% | 37%
packages/react-make-styles0% | 0% | 61% | 28% | 10%
tools0% | 0% | 19% | 60% | 20%
scripts/create-package0% | 0% | 69% | 19% | 11%
scripts/jest0% | 0% | 68% | 21% | 9%
packages/react-cards0% | 0% | 91% | 0% | 8%
packages/eslint-plugin0% | 0% | 30% | 31% | 37%
scripts/config0% | 0% | 66% | 0% | 33%
scripts/prettier0% | 0% | 65% | 0% | 34%
scripts/storybook0% | 0% | 66% | 0% | 33%
packages/react-utilities0% | 0% | 13% | 60% | 25%
scripts/github0% | 0% | 57% | 42% | 0%
packages/foundation-legacy0% | 0% | 0% | 97% | 2%
scripts/dependency-graph-generator0% | 0% | 0% | 82% | 17%
scripts/beachball0% | 0% | 0% | 45% | 54%
packages/react-theme0% | 0% | 0% | 81% | 18%
apps/server-rendered-app0% | 0% | 0% | 90% | 10%
packages/cra-template0% | 0% | 0% | 100% | 0%
packages/react-storybook-addon0% | 0% | 0% | 92% | 7%
scripts/screener0% | 0% | 0% | 52% | 47%
packages/webpack-utilities0% | 0% | 0% | 83% | 16%
scripts/typescript0% | 0% | 0% | 71% | 28%
packages/test-utilities0% | 0% | 0% | 84% | 15%
packages/react-accordion0% | 0% | 0% | 30% | 69%
packages/react-tabs0% | 0% | 0% | 55% | 45%
scripts/lint-staged0% | 0% | 0% | 100% | 0%
packages/react-portal0% | 0% | 0% | 42% | 57%
packages/react-tabster0% | 0% | 0% | 45% | 54%
packages/react-text0% | 0% | 0% | 69% | 30%
packages/keyboard-key0% | 0% | 0% | 72% | 27%
packages/jest-serializer-merge-styles0% | 0% | 0% | 66% | 33%
packages/a11y-testing0% | 0% | 0% | 26% | 73%
packages/react-provider0% | 0% | 0% | 41% | 58%
packages/react-button0% | 0% | 0% | 17% | 82%
packages/react-tooltip0% | 0% | 0% | 0% | 100%
packages/react-checkbox0% | 0% | 0% | 0% | 100%
packages/react-slider0% | 0% | 0% | 0% | 100%
packages/react-card0% | 0% | 0% | 0% | 100%
packages/react-input0% | 0% | 0% | 0% | 100%
packages/react-radio0% | 0% | 0% | 0% | 100%
packages/azure-themes0% | 0% | 0% | 0% | 100%
packages/react-switch0% | 0% | 0% | 0% | 100%
packages/react-divider0% | 0% | 0% | 0% | 100%
packages/react-avatar0% | 0% | 0% | 0% | 100%
packages/react-context-selector0% | 0% | 0% | 0% | 100%
packages/react-link0% | 0% | 0% | 0% | 100%
packages/react-badge0% | 0% | 0% | 0% | 100%
packages/react-conformance-griffel0% | 0% | 0% | 0% | 100%
packages/set-version0% | 0% | 0% | 0% | 100%
packages/react-shared-contexts0% | 0% | 0% | 0% | 100%
packages/common-styles0% | 0% | 0% | 0% | 100%
packages/react-label0% | 0% | 0% | 0% | 100%
packages/react-dialog0% | 0% | 0% | 0% | 100%
packages/react-image0% | 0% | 0% | 0% | 100%
packages/react-spinbutton0% | 0% | 0% | 0% | 100%
packages/react-spinner0% | 0% | 0% | 0% | 100%
ROOT0% | 0% | 0% | 0% | 100%
Alternative Visuals
Longest Units
Top 20 longest units
Unit# linesMcCabe index# params
function _otherSections()
in apps/public-docsite/src/pages/Controls/PersonaPage/PersonaPage.tsx
616 4 1
function _otherSections()
in apps/public-docsite/src/pages/Controls/TextPage/TextPage.tsx
474 2 1
export function getStyles()
in packages/react/src/components/TextField/TextField.styles.tsx
388 53 1
export function register()
in packages/fluentui/react-builder/src/narration/SRNC-StateRules-Win_JAWS.tsx
351 1 1
public render()
in packages/react-examples/src/react-cards/Card/Card.Configure.Example.tsx
261 15 0
private _createLines()
in packages/react-charting/src/components/LineChart/LineChart.base.tsx
224 36 1
private _gapsExample()
in packages/react-examples/src/react-charting/LineChart/LineChart.Gaps.Example.tsx
223 1 0
private _styledExample()
in packages/react-examples/src/react-charting/LineChart/LineChart.Multiple.Example.tsx
219 3 0
export function getStyles()
in packages/react/src/components/SearchBox/SearchBox.styles.tsx
207 22 1
public render()
in packages/react/src/components/DetailsList/DetailsRow.base.tsx
185 36 0
public render()
in packages/react/src/components/DetailsList/DetailsHeader.base.tsx
177 29 0
private _basicExample()
in packages/react-examples/src/react-charting/AreaChart/AreaChart.Multiple.Example.tsx
170 1 0
filteredItems: search()
in packages/fluentui/react-northstar/src/components/Dropdown/Dropdown.tsx
165 10 2
export function useTree()
in packages/fluentui/react-northstar/src/components/Tree/hooks/useTree.ts
161 19 1
export function getStyles()
in packages/react/src/components/pickers/PeoplePicker/PeoplePickerItems/PeoplePickerItem.styles.ts
160 26 1
public render()
in packages/react-examples/src/react-experiments/CollapsibleSection/CollapsibleSection.Styled.Example.tsx
159 1 0
public subscribe()
in packages/react/src/utilities/dragdrop/DragDropHelper.tsx
153 26 3
private _styledExample()
in packages/react-examples/src/react-charting/LineChart/LineChart.CustomAccessibility.Example.tsx
152 3 0
private _basicExample()
in packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Styled.Example.tsx
147 3 0
onClick: getOnClickWithOverrideTarget()
in packages/react/src/components/ContextualMenu/ContextualMenu.base.tsx
147 13 2