{"id":44722968,"url":"https://github.com/lyonsv/react-levels-chart","last_synced_at":"2026-02-15T16:22:59.353Z","repository":{"id":270388237,"uuid":"910234321","full_name":"lyonsv/react-levels-chart","owner":"lyonsv","description":"A React component for visualizing engineering career progression using radar charts.","archived":false,"fork":false,"pushed_at":"2025-03-04T21:25:37.000Z","size":800,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-04T22:27:09.476Z","etag":null,"topics":["engineering-management","radar-chart","react"],"latest_commit_sha":null,"homepage":"https://radarz.built.ie","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lyonsv.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-12-30T18:45:58.000Z","updated_at":"2025-03-04T21:25:08.000Z","dependencies_parsed_at":"2024-12-30T19:35:54.025Z","dependency_job_id":"4f74a526-0a39-496a-895d-e0fd58ea08b2","html_url":"https://github.com/lyonsv/react-levels-chart","commit_stats":null,"previous_names":["lyonsv/react-levels-chart"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/lyonsv/react-levels-chart","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lyonsv%2Freact-levels-chart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lyonsv%2Freact-levels-chart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lyonsv%2Freact-levels-chart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lyonsv%2Freact-levels-chart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lyonsv","download_url":"https://codeload.github.com/lyonsv/react-levels-chart/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lyonsv%2Freact-levels-chart/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29484253,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-15T15:33:17.885Z","status":"ssl_error","status_checked_at":"2026-02-15T15:32:53.698Z","response_time":118,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["engineering-management","radar-chart","react"],"created_at":"2026-02-15T16:22:58.789Z","updated_at":"2026-02-15T16:22:59.347Z","avatar_url":"https://github.com/lyonsv.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![NPM version](https://img.shields.io/npm/v/react-levels-chart.svg)](https://www.npmjs.com/package/react-levels-chart)\n[![Downloads](https://img.shields.io/npm/dm/react-levels-chart.svg)](https://www.npmjs.com/package/react-levels-chart)\n[![License](https://img.shields.io/npm/l/react-levels-chart.svg)](https://github.com/lyonsv/react-levels-chart/blob/main/LICENSE)\n[![Tests](https://github.com/lyonsv/react-levels-chart/actions/workflows/test.yml/badge.svg)](https://github.com/username/repo/actions/workflows/test.yml)\n[![CodeQL](https://github.com/lyonsv/react-levels-chart/actions/workflows/codeql.yml/badge.svg)](https://github.com/username/repo/actions/workflows/codeql.yml)\n[![codecov](https://codecov.io/gh/lyonsv/react-levels-chart/branch/main/graph/badge.svg)](https://codecov.io/gh/lyonsv/react-levels-chart)\n[![Bugs](https://sonarcloud.io/api/project_badges/measure?project=lyonsv_react-levels-chart\u0026metric=bugs)](https://sonarcloud.io/summary/new_code?id=lyonsv_react-levels-chart)\n\n# React Levels Chart\n\nA 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). \n\nThe idea for these charts comes from the [engineering ladders](https://github.com/jorgef/engineeringladders) framework.\n\n\u003cimg width=\"546\" alt=\"image\" src=\"https://github.com/user-attachments/assets/e88dee25-132e-4b11-80a0-bd769a6e889f\" /\u003e\n\n## Features\n\n- 📊 Interactive radar chart visualization of engineering levels\n- 🎯 Five key dimensions: Technology, System, People, Process, and Influence\n- 📏 Customizable progression levels with built-in defaults\n- 🎨 Flexible styling system\n- 💾 Local storage sync for persistence\n- ♿ Accessible form controls\n- 📱 Responsive design with scrollable controls option\n\n## Installation\n\n```bash\nnpm install react-levels-chart\n# or\nyarn add react-levels-chart\n```\n\n## Quick Start\n\n```tsx\nimport { Radar } from 'react-levels-chart';\n\nconst MyComponent = () =\u003e {\n  return (\n    \u003cRadar \n      username=\"engineer.name\"\n      levels={{\n        Technology: 'Specializes',\n        System: 'Owns',\n        People: 'Mentors',\n        Process: 'Challenges',\n        Influence: 'Multiple Teams'\n      }}\n    /\u003e\n  );\n};\n```\n\n## API Reference\n\n### Radar Props\n\n```typescript\ninterface RadarProps {\n  username: string;\n  levels?: SelectedLevels;\n}\n\ntype Category = 'Technology' | 'System' | 'People' | 'Process' | 'Influence';\n\ntype SelectedLevels = {\n  [key in Category]: string;\n}\n```\n\n| Prop | Type | Required | Description |\n|------|------|----------|-------------|\n| username | string | Yes | Unique identifier for local storage sync |\n| levels | SelectedLevels | No | Initial levels for each category |\n\n### Default Levels\n\nThe component comes with predefined progression levels for each category:\n\n```typescript\nconst levelMap = {\n  Technology: ['Adopts', 'Specializes', 'Evangelizes', 'Masters', 'Creates'],\n  System: ['Enhances', 'Designs', 'Owns', 'Evolves', 'Leads'],\n  People: ['Learns', 'Supports', 'Mentors', 'Coordinates', 'Manages'],\n  Process: ['Follows', 'Enforces', 'Challenges', 'Adjusts', 'Defines'],\n  Influence: ['Subsystem', 'Team', 'Multiple Teams', 'Company', 'Community']\n}\n```\n\n## Styling\n\nThe component supports comprehensive style customization through the Controls component:\n\n```typescript\ninterface StyleConfig {\n  form?: React.CSSProperties;\n  fieldset?: React.CSSProperties;\n  controlsContainer?: React.CSSProperties;\n  controlWrapper?: React.CSSProperties;\n  label?: React.CSSProperties;\n  selectWrapper?: React.CSSProperties;\n  select?: React.CSSProperties;\n  customDropdownArrow?: {\n    url: string;\n    width?: number;\n    height?: number;\n    position?: {\n      right?: number | string;\n      top?: number | string;\n    };\n  };\n}\n```\n\n### Example Style Customization\n\n```tsx\nconst customStyles: StyleConfig = {\n  controlsContainer: {\n    gap: '24px',\n    marginTop: '32px'\n  },\n  select: {\n    borderColor: '#0066cc',\n    borderRadius: '8px',\n    padding: '12px'\n  },\n  customDropdownArrow: {\n    url: '/custom-arrow.svg',\n    width: 12,\n    height: 8\n  }\n};\n\n\u003cControls\n  categories={categories}\n  selectedLevels={selectedLevels}\n  handleLevelChange={handleLevelChange}\n  levelMap={levelMap}\n  styles={customStyles}\n  scrollable={true}\n/\u003e\n```\n\n## Development\n\n### Setup\n\n```bash\n# Install dependencies\nnpm install\n\n# Start development server\nnpm start\n\n# Build the package\nnpm run build\n\n# Run tests\nnpm test\n\n# Generate coverage report\nnpm run coverage\n```\n\n### Testing\n\nThe project uses Vitest for testing. Tests can be run with:\n\n```bash\nnpm test\n```\n\nFor coverage reports:\n\n```bash\nnpm run coverage\n```\n\n## Contributing\n\nWe welcome contributions! Please follow these steps:\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes (`git commit -m 'Add amazing feature'`)\n4. Push to the branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## Acknowledgments\n\n- Inspired by the [engineering ladders](https://github.com/jorgef/engineeringladders) framework.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flyonsv%2Freact-levels-chart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flyonsv%2Freact-levels-chart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flyonsv%2Freact-levels-chart/lists"}