angular / flex-layout
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 292 units with 2,514 lines of code in units (32.2% of code).
    • 1 very long units (108 lines of code)
    • 1 long units (64 lines of code)
    • 17 medium size units (485 lines of code)
    • 55 small units (810 lines of code)
    • 218 very small units (1,047 lines of code)
4% | 2% | 19% | 32% | 41%
Legend:
101+
51-100
21-50
11-20
1-10
Unit Size per Extension
101+
51-100
21-50
11-20
1-10
ts4% | 2% | 19% | 32% | 41%
Unit Size per Logical Component
primary logical decomposition
101+
51-100
21-50
11-20
1-10
projects/libs/flex-layout/flex22% | 13% | 14% | 22% | 26%
projects/libs/flex-layout/grid0% | 0% | 53% | 19% | 27%
projects/libs/flex-layout/core0% | 0% | 13% | 38% | 47%
projects/libs/flex-layout/_private-utils0% | 0% | 24% | 29% | 46%
projects/apps/demo-app/src0% | 0% | 26% | 24% | 49%
tools/package-tools0% | 0% | 20% | 42% | 36%
projects/libs/flex-layout/extended0% | 0% | 12% | 41% | 46%
tools/tslint-rules0% | 0% | 17% | 32% | 49%
projects/libs/flex-layout/server0% | 0% | 0% | 36% | 63%
projects/apps/universal-demo-app0% | 0% | 0% | 70% | 29%
projects/libs/flex-layout0% | 0% | 0% | 100% | 0%
projects/apps/universal-demo-app/src0% | 0% | 0% | 0% | 100%
Alternative Visuals
Longest Units
Top 20 longest units
Unit# linesMcCabe index# params
buildStyles()
in projects/libs/flex-layout/flex/flex/flex.ts
108 53 2
buildStyles()
in projects/libs/flex-layout/flex/layout-align/layout-align.ts
64 23 2
function buildCss()
in projects/libs/flex-layout/grid/align-columns/align-columns.ts
48 13 2
export function applyCssPrefixes()
in projects/libs/flex-layout/_private-utils/auto-prefixer.ts
43 20 1
function buildCss()
in projects/libs/flex-layout/grid/grid-align/grid-align.ts
38 9 1
get backgroundImage()
in projects/apps/demo-app/src/app/watermark.component.ts
35 1 0
private buildObservable()
in projects/libs/flex-layout/core/media-observer/media-observer.ts
32 3 1
function buildCss()
in projects/libs/flex-layout/grid/align-rows/align-rows.ts
30 13 2
protected updateWithValue()
in projects/libs/flex-layout/flex/layout-gap/layout-gap.ts
27 15 1
private async createRollupBundle()
in tools/package-tools/build-bundles.ts
26 3 1
function buildQueryCss()
in projects/libs/flex-layout/core/match-media/match-media.ts
24 5 2
registerBeforeAfterPrintHooks()
in projects/libs/flex-layout/core/media-marshaller/print-hook.ts
24 5 1
protected updateWithValue()
in projects/libs/flex-layout/flex/flex/flex.ts
24 11 1
private _validatedDecorator()
in tools/tslint-rules/validateDecoratorsRule.ts
23 4 1
function buildCompareStyleFunction()
in projects/libs/flex-layout/_private-utils/testing/custom-matchers.ts
23 4 1
ngAfterViewInit()
in projects/libs/flex-layout/extended/show-hide/show-hide.ts
23 6 0
function elementText()
in projects/libs/flex-layout/_private-utils/testing/custom-matchers.ts
22 8 1
protected updateWithValue()
in projects/libs/flex-layout/flex/layout-align/layout-align.ts
22 18 1
registerQuery()
in projects/libs/flex-layout/core/match-media/match-media.ts
21 4 1
export function generateStaticFlexLayoutStyles()
in projects/libs/flex-layout/server/server-provider.ts
20 2 4