React Levels Chart

A React component for visualizing engineering career progression using radar charts. This tool helps engineering managers facilitate meaningful discussions about career development and expectations across different engineering levels. You can see the chart in use on the Radarz site.

The idea for these charts comes from the engineering ladders framework.

Features

• 📊 Interactive radar chart visualization of engineering levels
• 🎯 Five key dimensions: Technology, System, People, Process, and Influence
• 📏 Customizable progression levels with built-in defaults
• 🎨 Flexible styling system
• 💾 Local storage sync for persistence
• ♿ Accessible form controls
• 📱 Responsive design with scrollable controls option

Installation

npm install react-levels-chart
# or
yarn add react-levels-chart

Quick Start

import { Radar } from 'react-levels-chart';

const MyComponent = () => {
  return (
    <Radar 
      username="engineer.name"
      levels={{
        Technology: 'Specializes',
        System: 'Owns',
        People: 'Mentors',
        Process: 'Challenges',
        Influence: 'Multiple Teams'
      }}
    />
  );
};

API Reference

Radar Props

interface RadarProps {
  username: string;
  levels?: SelectedLevels;
}

type Category = 'Technology' | 'System' | 'People' | 'Process' | 'Influence';

type SelectedLevels = {
  [key in Category]: string;
}

Prop	Type	Required	Description
username	string	Yes	Unique identifier for local storage sync
levels	SelectedLevels	No	Initial levels for each category

Default Levels

The component comes with predefined progression levels for each category:

const levelMap = {
  Technology: ['Adopts', 'Specializes', 'Evangelizes', 'Masters', 'Creates'],
  System: ['Enhances', 'Designs', 'Owns', 'Evolves', 'Leads'],
  People: ['Learns', 'Supports', 'Mentors', 'Coordinates', 'Manages'],
  Process: ['Follows', 'Enforces', 'Challenges', 'Adjusts', 'Defines'],
  Influence: ['Subsystem', 'Team', 'Multiple Teams', 'Company', 'Community']
}

Styling

The component supports comprehensive style customization through the Controls component:

interface StyleConfig {
  form?: React.CSSProperties;
  fieldset?: React.CSSProperties;
  controlsContainer?: React.CSSProperties;
  controlWrapper?: React.CSSProperties;
  label?: React.CSSProperties;
  selectWrapper?: React.CSSProperties;
  select?: React.CSSProperties;
  customDropdownArrow?: {
    url: string;
    width?: number;
    height?: number;
    position?: {
      right?: number | string;
      top?: number | string;
    };
  };
}

Example Style Customization

const customStyles: StyleConfig = {
  controlsContainer: {
    gap: '24px',
    marginTop: '32px'
  },
  select: {
    borderColor: '#0066cc',
    borderRadius: '8px',
    padding: '12px'
  },
  customDropdownArrow: {
    url: '/custom-arrow.svg',
    width: 12,
    height: 8
  }
};

<Controls
  categories={categories}
  selectedLevels={selectedLevels}
  handleLevelChange={handleLevelChange}
  levelMap={levelMap}
  styles={customStyles}
  scrollable={true}
/>

Development

Setup

# Install dependencies
npm install

# Start development server
npm start

# Build the package
npm run build

# Run tests
npm test

# Generate coverage report
npm run coverage

Testing

The project uses Vitest for testing. Tests can be run with:

npm test

For coverage reports:

npm run coverage

Contributing

We welcome contributions! Please follow these steps:

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• Inspired by the engineering ladders framework.