microsoft / fluentui
Conditional Complexity

The distribution of complexity of units (measured with McCabe index).

Intro
  • Conditional complexity (also called cyclomatic complexity) is a term used to measure the complexity of software. The term refers to the number of possible paths through a program function. A higher value ofter means higher maintenance and testing costs (infosecinstitute.com).
  • Conditional complexity is calculated by counting all conditions in the program that can affect the execution path (e.g. if statement, loops, switches, and/or operators, try and catch blocks...).
  • Conditional complexity is measured at the unit level (methods, functions...).
  • Units are classified in four categories based on the measured McCabe index: 1-5 (simple units), 6-10 (medium complex units), 11-25 (complex units), 26+ (very complex units).
Learn more...
Conditional Complexity Overall
  • There are 4,487 units with 69,437 lines of code in units (21.5% of code).
    • 2 very complex units (487 lines of code)
    • 22 complex units (2,456 lines of code)
    • 168 medium complex units (9,954 lines of code)
    • 361 simple units (10,014 lines of code)
    • 3,934 very simple units (46,526 lines of code)
<1% | 3% | 14% | 14% | 67%
Legend:
51+
26-50
11-25
6-10
1-5
Alternative Visuals
Conditional Complexity per Extension
51+
26-50
11-25
6-10
1-5
tsx1% | 5% | 14% | 15% | 64%
ts<1% | 1% | 15% | 13% | 69%
js0% | 0% | 2% | 24% | 73%
Conditional Complexity per Logical Component
primary logical decomposition
51+
26-50
11-25
6-10
1-5
packages/react2% | 8% | 18% | 19% | 51%
packages/fluentui<1% | <1% | 7% | 7% | 83%
packages/react-charting0% | 9% | 22% | 19% | 48%
packages/react-focus0% | 19% | 30% | 29% | 19%
packages/codemods0% | 13% | 6% | 21% | 58%
packages/react-experiments0% | 4% | 9% | 20% | 65%
packages/react-aria0% | 92% | 0% | 0% | 7%
scripts/tasks0% | 12% | 11% | 20% | 55%
packages/merge-styles0% | 0% | 62% | 12% | 25%
packages/utilities0% | 0% | 22% | 17% | 60%
packages/react-examples0% | 0% | 7% | 3% | 89%
packages/react-docsite-components0% | 0% | 19% | 25% | 55%
scripts/gulp0% | 0% | 27% | 19% | 53%
packages/scheme-utilities0% | 0% | 61% | 27% | 10%
packages/react-positioning0% | 0% | 37% | 0% | 62%
packages/api-docs0% | 0% | 35% | 17% | 47%
packages/public-docsite-setup0% | 0% | 66% | 0% | 33%
packages/react-monaco-editor0% | 0% | 22% | 27% | 49%
tools/generators0% | 0% | 12% | 14% | 72%
packages/react-file-type-icons0% | 0% | 80% | 0% | 19%
apps/perf-test0% | 0% | 35% | 19% | 45%
packages/web-components0% | 0% | 4% | 7% | 88%
apps/public-docsite0% | 0% | 2% | 8% | 88%
packages/react-conformance0% | 0% | 13% | 52% | 33%
scripts/updateReleaseNotes0% | 0% | 18% | 34% | 47%
scripts/create-package0% | 0% | 69% | 0% | 30%
scripts/dangerjs0% | 0% | 56% | 0% | 43%
scripts/jest0% | 0% | 68% | 0% | 31%
packages/react-cards0% | 0% | 91% | 0% | 8%
packages/style-utilities0% | 0% | 6% | 9% | 84%
packages/theme0% | 0% | 8% | 0% | 91%
packages/react-utilities0% | 0% | 10% | 19% | 70%
scripts/fluentui-publish0% | 0% | 0% | 90% | 10%
packages/bundle-size0% | 0% | 0% | 34% | 65%
scripts/monorepo0% | 0% | 0% | 60% | 39%
scripts/projects-test0% | 0% | 0% | 55% | 44%
packages/date-time-utilities0% | 0% | 0% | 33% | 66%
packages/monaco-editor0% | 0% | 0% | 60% | 39%
packages/react-hooks0% | 0% | 0% | 27% | 72%
packages/dom-utilities0% | 0% | 0% | 50% | 49%
packages/eslint-plugin0% | 0% | 0% | 50% | 50%
scripts0% | 0% | 0% | 5% | 94%
packages/react-popover0% | 0% | 0% | 37% | 62%
scripts/prettier0% | 0% | 0% | 65% | 34%
apps/theming-designer0% | 0% | 0% | 9% | 90%
scripts/github0% | 0% | 0% | 57% | 42%
apps/test-bundles0% | 0% | 0% | 14% | 85%
packages/foundation-legacy0% | 0% | 0% | 16% | 83%
scripts/beachball0% | 0% | 0% | 20% | 79%
packages/react-portal0% | 0% | 0% | 42% | 57%
packages/keyboard-key0% | 0% | 0% | 72% | 27%
packages/a11y-testing0% | 0% | 0% | 22% | 77%
packages/set-version0% | 0% | 0% | 100% | 0%
packages/font-icons-mdl20% | 0% | 0% | 0% | 100%
apps/public-docsite-resources0% | 0% | 0% | 0% | 100%
tools0% | 0% | 0% | 0% | 100%
packages/example-data0% | 0% | 0% | 0% | 100%
packages/react-menu0% | 0% | 0% | 0% | 100%
packages/react-accordion0% | 0% | 0% | 0% | 100%
scripts/dependency-graph-generator0% | 0% | 0% | 0% | 100%
packages/react-make-styles0% | 0% | 0% | 0% | 100%
packages/react-button0% | 0% | 0% | 0% | 100%
scripts/screener0% | 0% | 0% | 0% | 100%
packages/react-theme0% | 0% | 0% | 0% | 100%
apps/server-rendered-app0% | 0% | 0% | 0% | 100%
scripts/config0% | 0% | 0% | 0% | 100%
packages/cra-template0% | 0% | 0% | 0% | 100%
scripts/storybook0% | 0% | 0% | 0% | 100%
packages/react-storybook-addon0% | 0% | 0% | 0% | 100%
packages/react-tabs0% | 0% | 0% | 0% | 100%
scripts/typescript0% | 0% | 0% | 0% | 100%
packages/webpack-utilities0% | 0% | 0% | 0% | 100%
packages/react-tabster0% | 0% | 0% | 0% | 100%
packages/react-tooltip0% | 0% | 0% | 0% | 100%
packages/react-checkbox0% | 0% | 0% | 0% | 100%
packages/react-slider0% | 0% | 0% | 0% | 100%
packages/test-utilities0% | 0% | 0% | 0% | 100%
packages/react-card0% | 0% | 0% | 0% | 100%
packages/react-provider0% | 0% | 0% | 0% | 100%
packages/react-input0% | 0% | 0% | 0% | 100%
packages/react-text0% | 0% | 0% | 0% | 100%
packages/react-radio0% | 0% | 0% | 0% | 100%
packages/azure-themes0% | 0% | 0% | 0% | 100%
packages/jest-serializer-merge-styles0% | 0% | 0% | 0% | 100%
packages/react-switch0% | 0% | 0% | 0% | 100%
scripts/lint-staged0% | 0% | 0% | 0% | 100%
packages/react-divider0% | 0% | 0% | 0% | 100%
packages/react-avatar0% | 0% | 0% | 0% | 100%
packages/react-context-selector0% | 0% | 0% | 0% | 100%
packages/react-link0% | 0% | 0% | 0% | 100%
packages/react-badge0% | 0% | 0% | 0% | 100%
packages/react-conformance-griffel0% | 0% | 0% | 0% | 100%
packages/react-shared-contexts0% | 0% | 0% | 0% | 100%
packages/common-styles0% | 0% | 0% | 0% | 100%
packages/react-label0% | 0% | 0% | 0% | 100%
packages/react-dialog0% | 0% | 0% | 0% | 100%
packages/react-image0% | 0% | 0% | 0% | 100%
packages/react-spinbutton0% | 0% | 0% | 0% | 100%
packages/react-spinner0% | 0% | 0% | 0% | 100%
ROOT0% | 0% | 0% | 0% | 100%
Most Complex Units
Top 20 most complex units
Unit# linesMcCabe index# params
export function createShorthandInternal()
in packages/fluentui/react-northstar/src/utils/factories.ts
 99 55 7
export function getStyles()
in packages/react/src/components/TextField/TextField.styles.tsx
 388 53 1
private _createLines()
in packages/react-charting/src/components/LineChart/LineChart.base.tsx
 224 36 1
public render()
in packages/react/src/components/DetailsList/DetailsRow.base.tsx
 185 36 0
public render()
in packages/react/src/components/DetailsList/DetailsColumn.base.tsx
 128 35 0
export function renamePropInSpread()
in packages/codemods/src/codeMods/utilities/helpers/propHelpers.ts
 140 34 5
public render()
in packages/react-charting/src/components/StackedBarChart/StackedBarChart.base.tsx
 105 34 0
updateTabIndexes()
in packages/fluentui/react-bindings/src/FocusZone/FocusZone.tsx
 59 33 1
private _updateTabIndexes()
in packages/react-focus/src/components/FocusZone/FocusZone.tsx
 62 33 1
public render()
in packages/react/src/components/Button/BaseButton.tsx
 113 33 0
public render()
in packages/react-experiments/src/components/Tile/Tile.tsx
 126 31 0
private _setSelectedIndex()
in packages/react/src/components/ComboBox/ComboBox.tsx
 87 30 3
function useWeekCornerStyles()
in packages/react/src/components/CalendarDayGrid/CalendarDayGrid.base.tsx
 112 29 1
public render()
in packages/react/src/components/DetailsList/DetailsHeader.base.tsx
 177 29 0
public componentDidUpdate()
in packages/react/src/components/ComboBox/ComboBox.tsx
 47 28 2
export function useARIAButton()
in packages/react-aria/src/hooks/useARIAButton.ts
 77 27 2
private _moveFocusPaging()
in packages/react-focus/src/components/FocusZone/FocusZone.tsx
 78 27 2
function useMouseHandlers()
in packages/react/src/components/ContextualMenu/ContextualMenu.base.tsx
 145 27 9
private _buildPages()
in packages/react/src/components/List/List.tsx
 91 27 2
public render()
in packages/react/src/components/Icon/Icon.base.tsx
 63 26 0