https://github.com/lyonsv/react-levels-chart
A React component for visualizing engineering career progression using radar charts.
https://github.com/lyonsv/react-levels-chart
engineering-management radar-chart react
Last synced: 4 months ago
JSON representation
A React component for visualizing engineering career progression using radar charts.
- Host: GitHub
- URL: https://github.com/lyonsv/react-levels-chart
- Owner: lyonsv
- License: mit
- Created: 2024-12-30T18:45:58.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-04T21:25:37.000Z (over 1 year ago)
- Last Synced: 2025-03-04T22:27:09.476Z (over 1 year ago)
- Topics: engineering-management, radar-chart, react
- Language: TypeScript
- Homepage: https://radarz.built.ie
- Size: 781 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/react-levels-chart)
[](https://www.npmjs.com/package/react-levels-chart)
[](https://github.com/lyonsv/react-levels-chart/blob/main/LICENSE)
[](https://github.com/username/repo/actions/workflows/test.yml)
[](https://github.com/username/repo/actions/workflows/codeql.yml)
[](https://codecov.io/gh/lyonsv/react-levels-chart)
[](https://sonarcloud.io/summary/new_code?id=lyonsv_react-levels-chart)
# 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](https://radarz.built.ie).
The idea for these charts comes from the [engineering ladders](https://github.com/jorgef/engineeringladders) 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
```bash
npm install react-levels-chart
# or
yarn add react-levels-chart
```
## Quick Start
```tsx
import { Radar } from 'react-levels-chart';
const MyComponent = () => {
return (
);
};
```
## API Reference
### Radar Props
```typescript
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:
```typescript
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:
```typescript
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
```tsx
const customStyles: StyleConfig = {
controlsContainer: {
gap: '24px',
marginTop: '32px'
},
select: {
borderColor: '#0066cc',
borderRadius: '8px',
padding: '12px'
},
customDropdownArrow: {
url: '/custom-arrow.svg',
width: 12,
height: 8
}
};
```
## Development
### Setup
```bash
# 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:
```bash
npm test
```
For coverage reports:
```bash
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](LICENSE) file for details.
## Acknowledgments
- Inspired by the [engineering ladders](https://github.com/jorgef/engineeringladders) framework.