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.