angular / components
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 3,302 files with 135,053 lines of code.
    • 1 very long files (1,021 lines of code)
    • 18 long files (12,068 lines of code)
    • 96 medium size files (27,866 lines of codeclsfd_ftr_w_mp_ins)
    • 197 small files (27,909 lines of code)
    • 2,990 very small files (66,189 lines of code)
<1% | 8% | 20% | 20% | 49%
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
ts1% | 10% | 24% | 20% | 43%
html0% | 7% | 15% | 15% | 61%
scss0% | 3% | 10% | 28% | 56%
bzl0% | 0% | 30% | 0% | 69%
js0% | 0% | 0% | 45% | 54%
css0% | 0% | 0% | 0% | 100%
mjs0% | 0% | 0% | 0% | 100%
yaml0% | 0% | 0% | 0% | 100%
File Size per Logical Decomposition
primary
1001+
501-1000
201-500
101-200
1-100
src/material2% | 12% | 28% | 22% | 34%
src/cdk0% | 16% | 26% | 19% | 37%
src/dev-app0% | 9% | 18% | 26% | 45%
src/material-experimental0% | 4% | 14% | 25% | 54%
src/google-maps0% | 20% | 28% | 34% | 16%
src/youtube-player0% | 84% | 0% | 0% | 15%
src/cdk-experimental0% | 0% | 53% | 16% | 29%
src/universal-app0% | 0% | 64% | 15% | 19%
tools0% | 0% | 92% | 0% | 7%
src/components-examples0% | 0% | 1% | 8% | 90%
tools/dgeni0% | 0% | 0% | 25% | 74%
scripts0% | 0% | 0% | 29% | 70%
tools/tslint-rules0% | 0% | 0% | 28% | 71%
tools/stylelint0% | 0% | 0% | 29% | 70%
src/material-luxon-adapter0% | 0% | 0% | 81% | 18%
src/material-moment-adapter0% | 0% | 0% | 83% | 16%
src/material-date-fns-adapter0% | 0% | 0% | 83% | 16%
tools/example-module0% | 0% | 0% | 64% | 35%
tools/postinstall0% | 0% | 0% | 100% | 0%
tools/release-checks0% | 0% | 0% | 31% | 68%
tools/region-parser0% | 0% | 0% | 89% | 10%
src/e2e-app0% | 0% | 0% | 0% | 100%
integration/size-test0% | 0% | 0% | 0% | 100%
ROOT0% | 0% | 0% | 0% | 100%
integration/ng-update-v130% | 0% | 0% | 0% | 100%
scripts/caretaking0% | 0% | 0% | 0% | 100%
tools/markdown-to-html0% | 0% | 0% | 0% | 100%
integration/ts-compat0% | 0% | 0% | 0% | 100%
tools/highlight-files0% | 0% | 0% | 0% | 100%
tools/package-docs-content0% | 0% | 0% | 0% | 100%
tools/server-test0% | 0% | 0% | 0% | 100%
integration/linker0% | 0% | 0% | 0% | 100%
tools/angular0% | 0% | 0% | 0% | 100%
scripts/circleci0% | 0% | 0% | 0% | 100%
integration/harness-e2e-cli0% | 0% | 0% | 0% | 100%
integration/ng-add0% | 0% | 0% | 0% | 100%
tools/axe-protractor0% | 0% | 0% | 0% | 100%
integration0% | 0% | 0% | 0% | 100%
tools/public_api_guard0% | 0% | 0% | 0% | 100%
scripts/github0% | 0% | 0% | 0% | 100%
tools/postcss0% | 0% | 0% | 0% | 100%
goldens0% | 0% | 0% | 0% | 100%
src0% | 0% | 0% | 0% | 100%
Longest Files (Top 50)
File# lines# units
select.ts
in src/material/select
 1021 59
drag-ref.ts
in src/cdk/drag-drop
 908 39
slider.ts
in src/material-experimental/mdc-slider
 819 48
mdc-input-demo.html
in src/dev-app/mdc-input
 789 -
table.ts
in src/cdk/table
 784 44
flexible-connected-position-strategy.ts
in src/cdk/overlay/position
 776 32
slider.ts
in src/material/slider
 754 54
_palette.scss
in src/material/core/theming
 695 -
drawer.ts
in src/material/sidenav
 679 45
hammer-gestures-migration.ts
in src/material/schematics/ng-update/migrations/hammer-gestures-v9
 670 35
tooltip.ts
in src/material/tooltip
 666 35
drop-list-ref.ts
in src/cdk/drag-drop
 632 22
input-demo.html
in src/dev-app/input
 628 -
fake-google-map-utils.ts
in src/google-maps/testing
 628 39
youtube-player.ts
in src/youtube-player
 575 36
chip-list.ts
in src/material/chips
 525 53
autocomplete-trigger.ts
in src/material/autocomplete
 521 32
datepicker-base.ts
in src/material/datepicker
 517 32
selection-list.ts
in src/material/list
 502 37
form-field.ts
in src/material-experimental/mdc-form-field
 462 34
defaults.bzl
in tools
 445 -
form-field.ts
in src/material/form-field
 441 28
radio.ts
in src/material/radio
 438 46
stepper.ts
in src/cdk/stepper
 438 34
index.ts
in src/cdk/schematics/utils/vendored-ast-utils
 430 16
listbox.ts
in src/cdk-experimental/listbox
 424 46
menu-trigger.ts
in src/material/menu
 422 22
map-marker-clusterer.ts
in src/google-maps/map-marker-clusterer
 406 29
select-demo.html
in src/dev-app/select
 400 -
icon-registry.ts
in src/material/icon
 395 23
slider.scss
in src/material/slider
 392 -
routes.ts
in src/dev-app
 385 -
paginated-tab-header.ts
in src/material/tabs
 385 21
drag.ts
in src/cdk/drag-drop/directives
 384 11
checkbox.scss
in src/material/checkbox
 377 -
button-toggle.ts
in src/material/button-toggle
 375 35
table-directives.ts
in src/cdk-experimental/popover-edit
 373 20
month-view.ts
in src/material/datepicker
 373 24
import-manager.ts
in src/material/schematics/ng-update/migrations/hammer-gestures-v9
 366 11
kitchen-sink.html
in src/universal-app/kitchen-sink
 357 -
checkbox.ts
in src/material/checkbox
 339 24
auto-size-virtual-scroll.ts
in src/cdk-experimental/scrolling
 337 21
chip.ts
in src/material-experimental/mdc-chips
 336 15
overlay-directives.ts
in src/cdk/overlay
 335 26
mdc-select-demo.html
in src/dev-app/mdc-select
 333 -
overlay-ref.ts
in src/cdk/overlay
 326 12
dialog.ts
in src/material/dialog
 325 14
menu.ts
in src/material/menu
 324 24
calendar.ts
in src/material/datepicker
 319 26
chip.ts
in src/material/chips
 316 17
Files With Most Units (Top 20)
File# lines# units
select.ts
in src/material/select
 1021 59
slider.ts
in src/material/slider
 754 54
chip-list.ts
in src/material/chips
 525 53
slider.ts
in src/material-experimental/mdc-slider
 819 48
listbox.ts
in src/cdk-experimental/listbox
 424 46
radio.ts
in src/material/radio
 438 46
drawer.ts
in src/material/sidenav
 679 45
table.ts
in src/cdk/table
 784 44
drag-ref.ts
in src/cdk/drag-drop
 908 39
fake-google-map-utils.ts
in src/google-maps/testing
 628 39
selection-list.ts
in src/material/list
 502 37
youtube-player.ts
in src/youtube-player
 575 36
hammer-gestures-migration.ts
in src/material/schematics/ng-update/migrations/hammer-gestures-v9
 670 35
tooltip.ts
in src/material/tooltip
 666 35
button-toggle.ts
in src/material/button-toggle
 375 35
form-field.ts
in src/material-experimental/mdc-form-field
 462 34
stepper.ts
in src/cdk/stepper
 438 34
autocomplete-trigger.ts
in src/material/autocomplete
 521 32
datepicker-base.ts
in src/material/datepicker
 517 32
flexible-connected-position-strategy.ts
in src/cdk/overlay/position
 776 32
Files With Long Lines (Top 20)

There are 34 files with lines longer than 120 characters. In total, there are 63 long lines.

File# lines# units# long lines
defaults.bzl
in tools
 445 - 7
index.ts
in src/components-examples/cdk/drag-drop
 65 - 6
index.ts
in src/components-examples/material-experimental/column-resize
 18 - 5
index.ts
in src/components-examples/cdk/scrolling
 39 - 5
cdk-selection-list-example.html
in src/components-examples/cdk-experimental/selection/cdk-selection-list
 41 - 4
mat-selection-list-example.html
in src/components-examples/material-experimental/selection/mat-selection-list
 41 - 4
index.ts
in src/components-examples/cdk-experimental/popover-edit
 32 - 3
mjs
esbuild.config.mjs
in integration/size-test
 82 - 2
index.ts
in src/components-examples/material-experimental/popover-edit
 44 - 2
index.bzl
in tools/package-docs-content
 83 - 1
theme-mixin-api.ts
in tools/stylelint
 184 5 1
generate-guard-tests.bzl
in tools/public_api_guard
 31 - 1
import-all-entry-points.bzl
in integration/ts-compat
 38 - 1
dialog-demo.html
in src/dev-app/dialog
 107 - 1
drag-drop-demo.html
in src/dev-app/drag-drop
 86 - 1
stepper-demo.html
in src/dev-app/stepper
 236 - 1
drawer-demo.html
in src/dev-app/drawer
 72 - 1
progress-bar.html
in src/material/progress-bar
 13 - 1
checkbox.html
in src/material/checkbox
 47 - 1
datepicker-toggle.html
in src/material/datepicker
 21 - 1