microsoft / PowerBI-visuals-HeatStreams
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 76 units with 971 lines of code in units (43.7% of code).
    • 1 very long units (123 lines of code)
    • 1 long units (52 lines of code)
    • 10 medium size units (306 lines of code)
    • 18 small units (254 lines of code)
    • 46 very small units (236 lines of code)
12% | 5% | 31% | 26% | 24%
Legend:
101+
51-100
21-50
11-20
1-10
Unit Size per Extension
101+
51-100
21-50
11-20
1-10
tsx26% | 0% | 47% | 16% | 9%
ts0% | 10% | 17% | 34% | 37%
Unit Size per Logical Component
primary logical decomposition
101+
51-100
21-50
11-20
1-10
packages/react-heat-streams/src/components33% | 0% | 43% | 17% | 5%
pbi-heat-streams/src/data0% | 21% | 36% | 26% | 15%
packages/react-heat-streams-stories/stories0% | 0% | 100% | 0% | 0%
pbi-heat-streams/src/chart0% | 0% | 24% | 23% | 52%
pbi-heat-streams/src0% | 0% | 0% | 50% | 50%
packages/react-heat-streams/src0% | 0% | 0% | 34% | 65%
packages/react-heat-streams/src/components/CategoryChart0% | 0% | 0% | 42% | 57%
Alternative Visuals
Longest Units
Top 20 longest units
Unit# linesMcCabe index# params
function HeatStreamsChart()
in packages/react-heat-streams/src/components/HeatStreamsChart.tsx
123 2 24
export function aggregateValueSlices()
in pbi-heat-streams/src/data/aggregateValueSlices.ts
52 11 4
function CategoryNameList()
in packages/react-heat-streams/src/components/CategoryNameList.tsx
43 1 9
function CategoryChartList()
in packages/react-heat-streams/src/components/CategoryChartList.tsx
35 1 14
public unpackDomainScrub()
in pbi-heat-streams/src/data/DataViewConverter.ts
34 6 1
function useOnClickHandler()
in packages/react-heat-streams/src/components/HeatStreamsChart.tsx
32 4 5
value: getRandomArbitrary()
in packages/react-heat-streams-stories/stories/InteractiveChart.tsx
31 2 2
public render()
in pbi-heat-streams/src/chart/Chart.tsx
29 1 0
export function convertCategoricalDataView()
in pbi-heat-streams/src/data/convertCategoricalDataView.ts
28 1 2
function useXScale()
in packages/react-heat-streams/src/components/HeatStreamsChart.tsx
26 3 5
function determineXDomain()
in pbi-heat-streams/src/data/convertCategoricalDataView.ts
25 1 2
function CategoryText()
in packages/react-heat-streams/src/components/CategoryNameList.tsx
23 2 7
function unpackCategoryData()
in pbi-heat-streams/src/data/convertCategoricalDataView.ts
19 2 2
function sliceStart()
in pbi-heat-streams/src/data/aggregateValueSlices.ts
17 4 2
function usePanScroll()
in packages/react-heat-streams/src/components/HeatStreamsChart.tsx
16 2 1
export function dateSliceEnd()
in packages/react-heat-streams/src/utils.ts
16 5 2
public async scrub()
in pbi-heat-streams/src/Interactions.ts
15 4 2
public constructor()
in pbi-heat-streams/src/chart/ChartColorizer.ts
15 2 2
function getCategories()
in pbi-heat-streams/src/data/convertCategoricalDataView.ts
15 1 2
function remeasure()
in packages/react-heat-streams/src/components/CategoryChart/ValueText.tsx
14 4 0