microsoft / fluentui
File Size

The distribution of size of files (measured in lines of code).

Intro
  • File size measurements show the distribution of size of files.
  • Files are classified in four categories based on their size (lines of code): 1-100 (very small files), 101-200 (small files), 201-500 (medium size files), 501-1000 (long files), 1001+(very long files).
  • It is a good practice to keep files small. Long files may become "bloaters", code that have increased to such gargantuan proportions that they are hard to work with.
Learn more...
File Size Overall
  • There are 7,740 files with 323,012 lines of code.
    • 10 very long files (13,636 lines of code)
    • 31 long files (21,676 lines of code)
    • 256 medium size files (77,149 lines of codeclsfd_ftr_w_mp_ins)
    • 476 small files (65,416 lines of code)
    • 6,967 very small files (145,135 lines of code)
4% | 6% | 23% | 20% | 44%
Legend:
1001+
501-1000
201-500
101-200
1-100


explore: zoomable circles | sunburst | 3D view
File Size per Extension
1001+
501-1000
201-500
101-200
1-100
tsx4% | 7% | 25% | 19% | 43%
ts4% | 6% | 22% | 21% | 45%
html0% | 0% | 38% | 20% | 41%
scss0% | 0% | 26% | 25% | 47%
js0% | 0% | 0% | 18% | 81%
yml0% | 0% | 0% | 77% | 22%
hbs0% | 0% | 0% | 0% | 100%
css0% | 0% | 0% | 0% | 100%
jsx0% | 0% | 0% | 0% | 100%
File Size per Logical Decomposition
primary
1001+
501-1000
201-500
101-200
1-100
packages/react7% | 9% | 39% | 17% | 26%
packages/fluentui3% | 3% | 23% | 21% | 47%
packages/font-icons-mdl243% | 0% | 0% | 51% | 5%
packages/react-icons-mdl28% | 0% | 0% | 0% | 91%
apps/public-docsite8% | 7% | 28% | 18% | 36%
packages/azure-themes18% | 0% | 17% | 43% | 20%
packages/react-focus92% | 0% | 0% | 0% | 7%
packages/react-charting0% | 41% | 31% | 7% | 19%
packages/react-theme0% | 62% | 0% | 21% | 15%
packages/react-experiments0% | 11% | 31% | 21% | 35%
packages/web-components0% | 5% | 30% | 23% | 40%
scripts/gulp0% | 24% | 7% | 25% | 42%
packages/react-examples0% | 1% | 19% | 30% | 48%
tools/generators0% | 67% | 0% | 17% | 15%
apps/public-docsite-resources0% | 29% | 21% | 6% | 42%
packages/react-conformance0% | 35% | 44% | 0% | 19%
packages/react-file-type-icons0% | 71% | 0% | 16% | 12%
packages/react-docsite-components0% | 0% | 23% | 29% | 47%
packages/utilities0% | 0% | 36% | 17% | 45%
packages/merge-styles0% | 0% | 60% | 6% | 32%
packages/react-components0% | 0% | 50% | 0% | 49%
apps/theming-designer0% | 0% | 36% | 47% | 16%
packages/common-styles0% | 0% | 50% | 22% | 27%
packages/example-data0% | 0% | 60% | 23% | 16%
packages/react-avatar0% | 0% | 45% | 13% | 41%
packages/style-utilities0% | 0% | 29% | 25% | 45%
packages/react-positioning0% | 0% | 38% | 16% | 45%
packages/react-button0% | 0% | 10% | 15% | 73%
packages/keyboard-keys0% | 0% | 58% | 33% | 8%
packages/codemods0% | 0% | 17% | 45% | 37%
packages/react-utilities0% | 0% | 25% | 0% | 74%
packages/scheme-utilities0% | 0% | 91% | 0% | 8%
packages/keyboard-key0% | 0% | 65% | 30% | 4%
packages/react-icons-mdl2-branded0% | 0% | 8% | 0% | 91%
packages/react-badge0% | 0% | 25% | 10% | 64%
packages/foundation-legacy0% | 0% | 32% | 33% | 34%
packages/react-switch0% | 0% | 43% | 25% | 30%
packages/date-time-utilities0% | 0% | 38% | 0% | 61%
packages/react-input0% | 0% | 35% | 0% | 64%
scripts/tasks0% | 0% | 28% | 0% | 71%
packages/react-slider0% | 0% | 40% | 0% | 60%
scripts/create-package0% | 0% | 60% | 0% | 39%
packages/react-divider0% | 0% | 34% | 0% | 65%
packages/theme0% | 0% | 16% | 21% | 61%
packages/theme-samples0% | 0% | 41% | 26% | 31%
scripts0% | 0% | 0% | 51% | 48%
ROOT0% | 0% | 0% | 62% | 37%
packages/react-menu0% | 0% | 0% | 15% | 84%
packages/react-checkbox0% | 0% | 0% | 59% | 40%
packages/eslint-plugin0% | 0% | 0% | 46% | 53%
packages/react-monaco-editor0% | 0% | 0% | 24% | 75%
packages/api-docs0% | 0% | 0% | 49% | 50%
packages/bundle-size0% | 0% | 0% | 27% | 72%
packages/react-tabs0% | 0% | 0% | 27% | 72%
packages/react-radio0% | 0% | 0% | 44% | 55%
packages/react-tooltip0% | 0% | 0% | 31% | 68%
apps/perf-test0% | 0% | 0% | 15% | 84%
scripts/screener0% | 0% | 0% | 37% | 62%
scripts/fluentui-publish0% | 0% | 0% | 100% | 0%
packages/public-docsite-setup0% | 0% | 0% | 46% | 53%
apps/test-bundles0% | 0% | 0% | 95% | 4%
packages/react-text0% | 0% | 0% | 21% | 78%
scripts/create-component0% | 0% | 0% | 47% | 52%
packages/react-accordion0% | 0% | 0% | 11% | 88%
scripts/dependency-graph-generator0% | 0% | 0% | 100% | 0%
scripts/dangerjs0% | 0% | 0% | 26% | 73%
scripts/updateReleaseNotes0% | 0% | 0% | 31% | 68%
packages/a11y-testing0% | 0% | 0% | 18% | 81%
scripts/jest0% | 0% | 0% | 37% | 62%
packages/react-popover0% | 0% | 0% | 11% | 88%
packages/react-card0% | 0% | 0% | 0% | 100%
packages/react-provider0% | 0% | 0% | 0% | 100%
packages/react-hooks0% | 0% | 0% | 0% | 100%
packages/react-cards0% | 0% | 0% | 0% | 100%
packages/react-image0% | 0% | 0% | 0% | 100%
packages/react-link0% | 0% | 0% | 0% | 100%
packages/react-tabster0% | 0% | 0% | 0% | 100%
apps/pr-deploy-site0% | 0% | 0% | 0% | 100%
packages/react-portal0% | 0% | 0% | 0% | 100%
scripts/monorepo0% | 0% | 0% | 0% | 100%
packages/react-label0% | 0% | 0% | 0% | 100%
packages/cra-template0% | 0% | 0% | 0% | 100%
scripts/projects-test0% | 0% | 0% | 0% | 100%
packages/monaco-editor0% | 0% | 0% | 0% | 100%
packages/react-aria0% | 0% | 0% | 0% | 100%
packages/react-storybook-addon0% | 0% | 0% | 0% | 100%
packages/react-conformance-griffel0% | 0% | 0% | 0% | 100%
packages/react-context-selector0% | 0% | 0% | 0% | 100%
packages/react-make-styles0% | 0% | 0% | 0% | 100%
tools0% | 0% | 0% | 0% | 100%
packages/dom-utilities0% | 0% | 0% | 0% | 100%
apps/server-rendered-app0% | 0% | 0% | 0% | 100%
scripts/beachball0% | 0% | 0% | 0% | 100%
packages/react-date-time0% | 0% | 0% | 0% | 100%
packages/react-spinner0% | 0% | 0% | 0% | 100%
packages/react-dialog0% | 0% | 0% | 0% | 100%
packages/react-spinbutton0% | 0% | 0% | 0% | 100%
scripts/babel0% | 0% | 0% | 0% | 100%
packages/react-shared-contexts0% | 0% | 0% | 0% | 100%
scripts/lint-staged0% | 0% | 0% | 0% | 100%
packages/jest-serializer-merge-styles0% | 0% | 0% | 0% | 100%
packages/react-storybook0% | 0% | 0% | 0% | 100%
packages/storybook0% | 0% | 0% | 0% | 100%
scripts/github0% | 0% | 0% | 0% | 100%
scripts/prettier0% | 0% | 0% | 0% | 100%
packages/test-utilities0% | 0% | 0% | 0% | 100%
scripts/config0% | 0% | 0% | 0% | 100%
scripts/storybook0% | 0% | 0% | 0% | 100%
packages/webpack-utilities0% | 0% | 0% | 0% | 100%
scripts/typescript0% | 0% | 0% | 0% | 100%
packages/react-icon-provider0% | 0% | 0% | 0% | 100%
packages/react-window-provider0% | 0% | 0% | 0% | 100%
packages/set-version0% | 0% | 0% | 0% | 100%
scripts/puppeteer0% | 0% | 0% | 0% | 100%
scripts/cypress0% | 0% | 0% | 0% | 100%
Longest Files (Top 50)
File# lines# units
IconNames.ts
in packages/font-icons-mdl2/src
 1804 -
ComboBox.tsx
in packages/react/src/components/ComboBox
 1789 56
index.ts
in packages/react-icons-mdl2/src
 1738 -
Dropdown.tsx
in packages/fluentui/react-northstar/src/components/Dropdown
 1403 9
DetailsList.base.tsx
in packages/react/src/components/DetailsList
 1332 26
sharePointThemes.ts
in apps/public-docsite/src/pages/Styles/Colors/palettes
 1205 -
FocusZone.tsx
in packages/fluentui/react-bindings/src/FocusZone
 1109 10
AzureColors.ts
in packages/azure-themes/src/azure
 1090 -
ContextualMenu.base.tsx
in packages/react/src/components/ContextualMenu
 1088 25
FocusZone.tsx
in packages/react-focus/src/components/FocusZone
 1078 32
slide.ts
in packages/fluentui/react-northstar/src/themes/teams/animations
 956 -
List.tsx
in packages/react/src/components/List
 923 41
BasePicker.tsx
in packages/react/src/components/pickers
 914 35
types.ts
in packages/react-theme/src
 893 -
LineChart.base.tsx
in packages/react-charting/src/components/LineChart
 884 6
positioning.ts
in packages/react/src/utilities/positioning
 851 47
colors.ts
in packages/react-theme/src/global
 825 -
design-tokens.ts
in packages/web-components/src
 825 2
VerticalStackedBarChart.base.tsx
in packages/react-charting/src/components/VerticalStackedBarChart
 802 20
DetailsHeader.base.tsx
in packages/react/src/components/DetailsList
 789 21
Dropdown.base.tsx
in packages/react/src/components/Dropdown
 761 13
BaseButton.tsx
in packages/react/src/components/Button
 750 21
docgen.ts
in scripts/gulp/plugins/util
 703 29
utilities.ts
in packages/react-charting/src/utilities
 694 18
DetailsList.Advanced.Example.tsx
in packages/react-examples/src/react/DetailsList
 686 8
TilesList.tsx
in packages/react-experiments/src/components/TilesList
 663 8
index.ts
in tools/generators/migrate-converged-pkg
 662 33
VerticalBarChart.base.tsx
in packages/react-charting/src/components/VerticalBarChart
 643 10
PersonaPage.tsx
in apps/public-docsite/src/pages/Controls/PersonaPage
 635 1
tokens.ts
in packages/react-theme/src
 628 -
config.tsx
in packages/fluentui/react-builder/src
 627 3
UnifiedPicker.tsx
in packages/react-experiments/src/components/UnifiedPicker
 600 1
AppDefinition.tsx
in apps/public-docsite-resources/src
 595 84
defaultTests.tsx
in packages/react-conformance/src
 581 1
AreaChart.base.tsx
in packages/react-charting/src/components/AreaChart
 567 6
HeatMapChart.base.tsx
in packages/react-charting/src/components/HeatMapChart
 556 3
categoryColors.ts
in packages/fluentui/react-northstar/src/themes/teams
 552 26
SelectionZone.tsx
in packages/react/src/utilities/selection
 549 25
FileTypeIconMap.ts
in packages/react-file-type-icons/src
 544 -
Toolbar.tsx
in packages/fluentui/react-northstar/src/components/Toolbar
 514 1
TextPage.tsx
in apps/public-docsite/src/pages/Controls/TextPage
 504 3
MenuItem.tsx
in packages/fluentui/react-northstar/src/components/Menu
 498 1
Popup.tsx
in packages/fluentui/react-northstar/src/components/Popup
 498 1
colors.ts
in packages/fluentui/react-northstar/src/themes/teams
 497 10
index.ts
in packages/web-components/src/design-system-provider
 496 5
IRawStyleBase.ts
in packages/merge-styles/src
 492 -
TextField.base.tsx
in packages/react/src/components/TextField
 483 31
people.ts
in packages/example-data/src
 480 1
ComboBox.styles.ts
in packages/react/src/components/ComboBox
 474 1
CalloutContent.base.tsx
in packages/react/src/components/Callout
 469 8
Files With Most Units (Top 20)
File# lines# units
AppDefinition.tsx
in apps/public-docsite-resources/src
 595 84
ComboBox.tsx
in packages/react/src/components/ComboBox
 1789 56
positioning.ts
in packages/react/src/utilities/positioning
 851 47
AnimationStyles.ts
in packages/theme/src/motion
 149 43
List.tsx
in packages/react/src/components/List
 923 41
colors.ts
in packages/fluentui/react-northstar/src/themes/teams-high-contrast
 332 39
colors.ts
in packages/fluentui/react-northstar/src/themes/teams-dark
 330 36
BasePicker.tsx
in packages/react/src/components/pickers
 914 35
index.ts
in tools/generators/migrate-converged-pkg
 662 33
FocusZone.tsx
in packages/react-focus/src/components/FocusZone
 1078 32
TextField.base.tsx
in packages/react/src/components/TextField
 483 31
SuggestionsControl.tsx
in packages/react-experiments/src/components/FloatingSuggestions/Suggestions
 379 30
docgen.ts
in scripts/gulp/plugins/util
 703 29
loaderVariables.ts
in packages/fluentui/react-northstar/src/themes/teams/components/Loader
 61 28
Selection.ts
in packages/utilities/src/selection
 349 27
categoryColors.ts
in packages/fluentui/react-northstar/src/themes/teams
 552 26
DetailsList.base.tsx
in packages/react/src/components/DetailsList
 1332 26
ContextualMenu.base.tsx
in packages/react/src/components/ContextualMenu
 1088 25
SuggestionsControl.tsx
in packages/react/src/components/FloatingPicker/Suggestions
 369 25
SelectionZone.tsx
in packages/react/src/utilities/selection
 549 25
Files With Long Lines (Top 20)

There are 2214 files with lines longer than 120 characters. In total, there are 3560 long lines.

File# lines# units# long lines
Stack.doc.tsx
in packages/react-examples/src/react/Stack
 170 - 24
DetailsList.doc.tsx
in packages/react-examples/src/react/DetailsList
 131 3 19
svgIconsColor.tsx
in apps/public-docsite/src/utilities
 421 - 18
ContextualMenu.doc.tsx
in packages/react-examples/src/react/ContextualMenu
 125 - 18
componentVariables.ts
in packages/fluentui/react-northstar/src/themes/teams
 131 - 17
Announced.doc.tsx
in packages/react-examples/src/react/Announced
 79 10 17
AttendeeIcon.tsx
in packages/fluentui/react-icons-northstar/src/components
 28 - 16
Button.doc.tsx
in packages/react-examples/src/react/Button
 107 - 14
Calendar.doc.tsx
in packages/react-examples/src/react/Calendar
 101 - 14
_themeVariables.scss
in packages/common-styles/src
 117 - 13
TextBulletListTreeIcon.tsx
in packages/fluentui/react-icons-northstar/src/components
 24 - 12
componentStyles.ts
in packages/fluentui/react-northstar/src/themes/teams
 142 - 12
Panel.doc.tsx
in packages/react-examples/src/react/Panel
 87 - 12
Pivot.doc.tsx
in packages/react-examples/src/react/Pivot
 87 - 12
TextField.doc.tsx
in packages/react-examples/src/react/TextField
 77 - 11
BroadcastIcon.tsx
in packages/fluentui/react-icons-northstar/src/components
 22 - 10
ComputerAudioOffIcon.tsx
in packages/fluentui/react-icons-northstar/src/components
 32 - 10
ContactGroupCallIcon.tsx
in packages/fluentui/react-icons-northstar/src/components
 32 - 10
ExcelColorIcon.tsx
in packages/fluentui/react-icons-northstar/src/components
 53 - 10
ShiftActivityIcon.tsx
in packages/fluentui/react-icons-northstar/src/components
 22 - 10