aws / aws-northstar
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 20 units with 360 lines of code in units (2.2% of code).
    • 1 very long units (112 lines of code)
    • 2 long units (125 lines of code)
    • 1 medium size units (25 lines of code)
    • 3 small units (44 lines of code)
    • 13 very small units (54 lines of code)
31% | 34% | 6% | 12% | 15%
Legend:
101+
51-100
21-50
11-20
1-10
Unit Size per Extension
101+
51-100
21-50
11-20
1-10
tsx32% | 36% | 7% | 12% | 10%
js0% | 0% | 0% | 0% | 100%
ts0% | 0% | 0% | 0% | 100%
Unit Size per Logical Component
primary logical decomposition
101+
51-100
21-50
11-20
1-10
src/components33% | 37% | 7% | 13% | 9%
ROOT0% | 0% | 0% | 0% | 100%
src/charts0% | 0% | 0% | 0% | 100%
src/layouts0% | 0% | 0% | 0% | 100%
Alternative Visuals
Longest Units
Top 20 longest units
Unit# linesMcCabe index# params
export default function SettingBar()
in src/components/Table/components/SettingsBar/index.tsx
112 10 20
name: getFieldKey()
in src/components/FormRenderer/components/FieldArray/components/FieldArrayItem/index.tsx
63 13 1
key: getFieldKey()
in src/components/FormRenderer/components/FieldArray/components/FieldArrayItem/index.tsx
62 13 1
function SelectColumnFilter()
in src/components/Table/data/filterColumnDefinitions.tsx
25 2 2
export default function BaseColumns()
in src/components/Table/components/BaseColumns/index.tsx
19 1 6
function TabPanel()
in src/components/Tabs/index.tsx
13 1 5
onChange: action()
in src/components/FormRenderer/index.stories.tsx
12 1 1
webpackConfig: require()
in styleguide.config.js
10 1 1
reactTableBodyProps: getTableBodyProps()
in src/components/Table/index.tsx
6 2 0
function sleep()
in src/components/Autosuggest/index.stories.tsx
5 1 1
onChange: action()
in src/components/FormRenderer/index.stories.tsx
5 1 1
function sleep()
in src/components/Multiselect/index.stories.tsx
5 1 1
onButtonClick: action()
in src/components/Flashbar/index.stories.tsx
4 1 1
onButtonClick: action()
in src/components/Flashbar/index.stories.tsx
4 1 1
onButtonClick: action()
in src/layouts/AppLayout/index.stories.tsx
4 1 1
export default function getFillColor()
in src/charts/utils/getFillColor/index.ts
3 2 1
export default function getStrokeColor()
in src/charts/utils/getStrokeColor/index.ts
3 2 1
propsParser: require()
in styleguide.config.js
3 1 1
root: clsx()
in src/components/Alert/index.tsx
1 1 1
className: clsx()
in src/components/Popover/index.tsx
1 1 2