{"id":34842639,"url":"https://github.com/chrishrb/techradar","last_synced_at":"2025-12-25T17:16:09.595Z","repository":{"id":226229242,"uuid":"766898108","full_name":"chrishrb/techradar","owner":"chrishrb","description":null,"archived":false,"fork":false,"pushed_at":"2024-07-29T20:27:37.000Z","size":644,"stargazers_count":9,"open_issues_count":9,"forks_count":5,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-09-19T08:34:18.444Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/chrishrb.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-03-04T10:37:29.000Z","updated_at":"2025-03-28T10:05:29.000Z","dependencies_parsed_at":"2024-03-06T15:04:54.753Z","dependency_job_id":"962200b9-b9d4-4f66-8aed-3df743604dbe","html_url":"https://github.com/chrishrb/techradar","commit_stats":null,"previous_names":["chrishrb/techradar"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/chrishrb/techradar","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrishrb%2Ftechradar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrishrb%2Ftechradar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrishrb%2Ftechradar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrishrb%2Ftechradar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chrishrb","download_url":"https://codeload.github.com/chrishrb/techradar/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrishrb%2Ftechradar/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28033469,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-12-25T02:00:05.988Z","response_time":58,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":[],"created_at":"2025-12-25T17:16:06.726Z","updated_at":"2025-12-25T17:16:09.589Z","avatar_url":"https://github.com/chrishrb.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Techradar\n\nThis project, inspired by [Zalando's](https://github.com/zalando/tech-radar) and [Miguel Silva's](https://github.com/miguel-silva/techradar)\ntechradar, enables users to generate a visualization representing the key frameworks, libraries, tools, platforms, and techniques used in\norganizations. It also provides information regarding the adoption level of each of these elements. What sets this project apart from other \nlibraries is its unique feature that allows users to customize the number of rings and slices according to their specific needs \n\n![ui](./.github/docs/ui.png)\n\n\u003e [!TIP]\n\u003e You can see example techradars created with this library [here](https://chrishrb.github.io/techradar/)\n\n## ✨ Features\n\n* visualize your technology in rings and slices\n* integrate in your own code by only installing and using this library\n* variable number of rings\n* variable number of slices / quadrants\n* use [nerdfonts icons](https://www.nerdfonts.com/cheat-sheet)\n\n## 📦 Getting started\n\n1. Install package with your preferred node package manager\n\n  ```bash\n  # pnpm\n  pnpm add @chrishrb/techradar\n\n  # npm\n  npm install @chrishrb/techradar\n\n  # yarn\n  yarn add @chrishrb/techradar\n  ```\n\n2. Integrate the techradar in your project\n\n  ```ts\n  import Techradar, { TechradarData } from '@chrishrb/techradar'\n\n  function App() {\n    const data: TechradarData = {\n      id: \"example1\",\n      rings: [\n        { id: \"adopt\", name: \"ADOPT\" },\n        { id: \"trial\", name: \"TRIAL\" },\n        { id: \"assess\", name: \"ASSESS\" },\n        { id: \"hold\", name: \"HOLD\", color: \"#e09b96\" },\n      ],\n      slices: [\n        {\n          name: \"Frameworks \u0026 Ecosystems\",\n          blipsByRing: {\n            adopt: [{ name: \"React\" }],\n            trial: [{ name: \"Vue\" }, { name: \"Angular (2+)\" }],\n            hold: [{ name: \"AngularJS (1)\" }, { name: \"jQuery\" }],\n          },\n        },\n        {\n          name: \"Linting \u0026 Formatting\",\n          blipsByRing: {\n            adopt: [{ name: \"ESLint\" }, { name: \"Prettier\" }],\n            assess: [{ name: \"AirBNB Eslint Config\" }],\n          },\n        },\n        {\n          name: \"Languages\",\n          blipsByRing: {\n            adopt: [{ name: \"CRA (Create React App)\" }],\n            assess: [{ name: \"Next.js\" }, { name: \"React App Rewired\" }],\n          },\n        },\n      ],\n    };\n\n    return (\n      \u003c\u003e\n        \u003cTechradar data={example} options={{ radarSize: 600 }} /\u003e\n      \u003c/\u003e\n    )\n  }\n\n  export default App\n  ```\n\nMore examples are provided under the `src` folder in this repository.\n\n##  Icons\n\nYou can also use icons instead of numbers for the blips. Go to [nerdfonts](https://www.nerdfonts.com/cheat-sheet) and choose\nan icon. Afterwards copy the hexcode to your config and add the `\\u` as a prefix. So in this example the hexcode of the react logo is\n`e7ba`, add the prefix `\\u` and paste it into the blips configuration. **Important: Only the 4 digit hexcodes are working**:\n\n```typescript\n...\n  slices: [\n    {\n      name: \"Frameworks \u0026 Ecosystems\",\n      blipsByRing: {\n        adopt: [{ name: \"React\", icon: \"\\ue7ba\" }],\n      },\n    },\n...\n```\n\n## ⚡️ Local Development\n\n1. Install dependencies with pnpm\n\n```bash\npnpm install\n```\n\n2. Start local development server:\n\n```bash\npnpm dev\n```\n\n3. Build and publish package:\n\n```bash\npnpm build\npnpm publish\n```\n\n## 📄 Acknowledgements\n\n- https://github.com/miguel-silva/techradar\n- https://github.com/zalando/tech-radar\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchrishrb%2Ftechradar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchrishrb%2Ftechradar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchrishrb%2Ftechradar/lists"}