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.
File Size Overall
- There are 267 files with 7,646 lines of code.
- 0 very long files (0 lines of code)
- 1 long files (554 lines of code)
- 1 medium size files (207 lines of codeclsfd_ftr_w_mp_ins)
- 9 small files (1,279 lines of code)
- 256 very small files (5,606 lines of code)
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
File Size per Logical Decomposition
primary
Longest Files (Top 50)
| File | # lines | # units |
|---|---|---|
 documentation-items.ts in src/app/shared/documentation-items |
554 | 1 |
 homepage.scss in src/app/pages/homepage |
207 | - |
component-viewer.ts in src/app/pages/component-viewer |
177 | 5 |
example-viewer.ts in src/app/shared/example-viewer |
163 | 10 |
component-sidenav.ts in src/app/pages/component-sidenav |
160 | 2 |
 lighthouse-audit.js in tools |
140 | 7 |
table-of-contents.ts in src/app/shared/table-of-contents |
134 | 5 |
stack-blitz-writer.ts in src/app/shared/stack-blitz |
133 | 5 |
doc-viewer.ts in src/app/shared/doc-viewer |
127 | 8 |
theme-picker.ts in src/app/shared/theme-picker |
123 | 3 |
carousel.ts in src/app/shared/carousel |
122 | 7 |
app-routing.module.ts in scenes/src/app |
99 | - |
material-dark.scss in src/highlightjs |
95 | - |
material.module.ts in src/assets/stack-blitz/src |
95 | - |
component-sidenav.scss in src/app/pages/component-sidenav |
94 | - |
_api.scss in src/styles |
88 | - |
 index.html in src |
84 | - |
guide-items.ts in src/app/shared/guide-items |
84 | - |
homepage.html in src/app/pages/homepage |
84 | - |
material-light.scss in src/highlightjs |
75 | - |
footer.scss in src/app/shared/footer |
70 | - |
example-viewer.html in src/app/shared/example-viewer |
68 | - |
tree-scene.ts in scenes/src/app/scenes/tree |
65 | 2 |
_markdown.scss in src/styles |
64 | - |
_app-theme.scss in src |
64 | - |
app.module.ts in scenes/src/app |
62 | - |
navbar.scss in src/app/shared/navbar |
61 | - |
navigation-focus.service.ts in src/app/shared/navigation-focus |
61 | 8 |
scene-viewer.ts in scenes/src/app/scene-viewer |
59 | 3 |
component-category-list.scss in src/app/pages/component-category-list |
58 | - |
theme-picker.scss in src/app/shared/theme-picker |
56 | - |
component-viewer.scss in src/app/pages/component-viewer |
54 | - |
navbar.ts in src/app/shared/navbar |
52 | 4 |
support.scss in src/app/shared/support |
52 | - |
homepage.ts in src/app/pages/homepage |
52 | - |
stack-blitz-button.ts in src/app/shared/stack-blitz |
51 | 2 |
component-category-list.ts in src/app/pages/component-category-list |
50 | 2 |
_tables.scss in src/styles |
49 | - |
_homepage-theme.scss in src/app/pages/homepage |
49 | - |
_component-sidenav-theme.scss in src/app/pages/component-sidenav |
49 | - |
_general.scss in src/styles |
48 | - |
guide-viewer.ts in src/app/pages/guide-viewer |
48 | - |
dialog-scene.ts in scenes/src/app/scenes/dialog |
47 | 2 |
guide-viewer.scss in src/app/pages/guide-viewer |
43 | - |
component-api.scss in src/app/pages/component-viewer |
42 | - |
navbar.html in src/app/shared/navbar |
41 | - |
support.html in src/app/shared/support |
41 | - |
autocomplete-scene.ts in scenes/src/app/scenes/autocomplete |
40 | 1 |
audit-docs.js in tools |
39 | 2 |
svg-viewer.ts in src/app/shared/svg-viewer |
39 | 4 |
Files With Most Units (Top 20)
| File | # lines | # units |
|---|---|---|
example-viewer.ts in src/app/shared/example-viewer |
163 | 10 |
doc-viewer.ts in src/app/shared/doc-viewer |
127 | 8 |
navigation-focus.service.ts in src/app/shared/navigation-focus |
61 | 8 |
lighthouse-audit.js in tools |
140 | 7 |
carousel.ts in src/app/shared/carousel |
122 | 7 |
style-manager.ts in src/app/shared/style-manager |
29 | 6 |
table-of-contents.ts in src/app/shared/table-of-contents |
134 | 5 |
stack-blitz-writer.ts in src/app/shared/stack-blitz |
133 | 5 |
component-viewer.ts in src/app/pages/component-viewer |
177 | 5 |
navbar.ts in src/app/shared/navbar |
52 | 4 |
ga.ts in src/app/shared/ga |
29 | 4 |
svg-viewer.ts in src/app/shared/svg-viewer |
39 | 4 |
scene-viewer.ts in scenes/src/app/scene-viewer |
59 | 3 |
theme-picker.ts in src/app/shared/theme-picker |
123 | 3 |
material-docs-app.ts in src/app |
37 | 3 |
tree-scene.ts in scenes/src/app/scenes/tree |
65 | 2 |
dialog-scene.ts in scenes/src/app/scenes/dialog |
47 | 2 |
audit-docs.js in tools |
39 | 2 |
cookie-popup.ts in src/app/shared/cookie-popup |
24 | 2 |
stack-blitz-button.ts in src/app/shared/stack-blitz |
51 | 2 |
Files With Long Lines (Top 6)
There are 6 files with lines longer than 120 characters. In total, there are 13 long lines.
| File | # lines | # units | # long lines |
|---|---|---|---|
index.html in src |
84 | - | 6 |
navbar.html in src/app/shared/navbar |
41 | - | 2 |
homepage.html in src/app/pages/homepage |
84 | - | 2 |
menu-scene.html in scenes/src/app/scenes/menu |
17 | - | 1 |
lighthouse-audit.js in tools |
140 | 7 | 1 |
footer.html in src/app/shared/footer |
25 | - | 1 |