{"id":27555881,"url":"https://github.com/omerg/react-tech-radar","last_synced_at":"2025-04-19T17:55:34.968Z","repository":{"id":50601839,"uuid":"195574350","full_name":"omerg/react-tech-radar","owner":"omerg","description":"A React Component for Tech Radar inspired by ThoughtWorks' technology decision sharing project","archived":false,"fork":false,"pushed_at":"2023-07-20T10:20:55.000Z","size":1735,"stargazers_count":38,"open_issues_count":6,"forks_count":21,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-18T01:00:15.797Z","etag":null,"topics":["babel7","d3","es6","hooks","javascript","react","storybook","svg","tech-radar"],"latest_commit_sha":null,"homepage":"https://react-tech-radar.netlify.com","language":"JavaScript","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/omerg.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":"2019-07-06T19:07:30.000Z","updated_at":"2025-04-15T17:53:17.000Z","dependencies_parsed_at":"2024-06-21T19:07:55.915Z","dependency_job_id":"65b76876-f008-42bb-8737-b4348b66924d","html_url":"https://github.com/omerg/react-tech-radar","commit_stats":{"total_commits":67,"total_committers":5,"mean_commits":13.4,"dds":"0.20895522388059706","last_synced_commit":"95776c9ee6c240d3f7b9817499dcf035879f21f0"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/omerg%2Freact-tech-radar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/omerg%2Freact-tech-radar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/omerg%2Freact-tech-radar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/omerg%2Freact-tech-radar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/omerg","download_url":"https://codeload.github.com/omerg/react-tech-radar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249498638,"owners_count":21282007,"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","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":["babel7","d3","es6","hooks","javascript","react","storybook","svg","tech-radar"],"created_at":"2025-04-19T17:55:32.674Z","updated_at":"2025-04-19T17:55:34.950Z","avatar_url":"https://github.com/omerg.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n\u003cimg width=\"600px\" src=\"https://raw.githubusercontent.com/omerg/react-tech-radar/master/screenshots/Screenshot_1.png\"\u003e\n\n# React Tech Radar\n\nA react component that generates an interactive radar, inspired by [thoughtworks.com/radar](http://thoughtworks.com/radar).\n\n[Demo (Storybook)](https://react-tech-radar.netlify.app/?path=/docs/radar--docs)\n\n## Installation\n\nUsing [npm](https://www.npmjs.com/):\n\n    npm install --save react-tech-radar\n\n## Quick Start\n\n```jsx\nimport React from 'react';\nimport Radar from 'react-tech-radar';\n\nfunction App() {\n\n    const setup = {\n        rings: ['adopt', 'trial', 'assess', 'hold'],\n        quadrants: ['tools', 'techniques', 'platforms', 'languages'],\n        data: [\n            {\n                name: 'D3',\n                quadrant: 'tools',\n                ring: \"assess\"\n\n            },\n            {\n                name: 'TypeScript',\n                quadrant: 'languages',\n                ring: \"trial\"\n            },\n            {\n                name: 'Storybook',\n                quadrant: 'tools',\n                ring: \"adopt\"\n            }\n        ]\n    };\n\n    return (\n        \u003cdiv className=\"App\"\u003e\n            \u003cRadar {...setup} /\u003e\n        \u003c/div\u003e\n    );\n}\n\nexport default App;\n```\n\n## Props Setup\n\nThe following 3 props should be configured in order to setup the tech radar:\n\n - quadrants\n - rings\n - data\n\n### data\n\ndata prop is an array of JSON elements representing the description of technologies.\n\nElements in the array should be in the following form:\n\n__Example:__\n```json5\n{\ndata: [\n          {\n              name: 'D3',\n              quadrant: 'tools',\n              ring: \"assess\"\n          },\n          {\n              name: 'TypeScript',\n              quadrant: 'languages',\n              ring: \"trial\"\n          },\n          {\n              name: 'Storybook',\n              quadrant: 'tools',\n              ring: \"adopt\"\n          }\n      ]\n}\n```\n\n### quadrants\n\nquadrants prop is an array of strings which represent slices of the circular radar. \nAny data element with the matching quadrant value goes into this slice\n\nElements in the array should be in the following form:\n\n__Example:__\n```json5\n{\n  quadrants: ['tools', 'techniques', 'platforms', 'languages']\n}\n```\n\n### rings\n\nrings prop is an array of strings which represent at what level these technologies are adopted.\nFor each element in rings, every quadrant is divided into rings. Innermost ring is the first element of the rings array and \nit usually represents the place for the most adopted technologies.\n\n__Example:__\n```json5\n{\n  rings: ['adopt', 'trial', 'assess', 'hold'],\n}\n```\n\n## Configuration Options\n\n| Prop         | Description    | Default Value |\n| :---         |     :---      |          ---: |\n| width     | The overall width of the main DOM element       | 700px      |\n| fontSize     | Font size of elements       | 12px      |\n| itemFontSize     | Set this if you want the items to have a different size than titles of quadrants and rings. If not set, defaults to fontSize       | 12px      |\n| colorScaleIndex     | A value from 0 to 5 for different collections of colors. See [Storybook Color Schemes](https://react-tech-radar.netlify.com/?path=/story/color-schemes--with-1) section for colors of each option.      |5      |\n| radiusDiminish     | Radius of rings is not equal because of this constant. Each radius is x times greater than the outer one and x is this constant.      | 1.5      |\n\n#### Prop Types\n\n```jsx\nRadar.propTypes = {\n    quadrants: PropTypes.array.isRequired,\n    rings: PropTypes.array,\n    data: PropTypes.array,\n    width: PropTypes.number,\n    fontSize: PropTypes.number,\n    itemFontSize: PropTypes.number,\n    colorScaleIndex: PropTypes.number,\n    radiusDiminish: PropTypes.number\n};\n```\n\n## Storybook\n\nYou can see various states of the radar (such as color schemes, results of configurations, etc.) on the [Storybook Page](https://react-tech-radar.netlify.com).\n\n## Google SpreadSheets Integration\n\nIf you want a very quick data integration, you can check out the Google Spreadsheets example.\n\nThe source code for the example is in 'examples' folder and also there is a running example in [Storybook](https://react-tech-radar.netlify.com).\n\nIf you plug in [this data](https://docs.google.com/spreadsheets/d/1XkfUX8auztSkMoHwBEraDjHZgx7NEH59OyUZH-0IQGw/edit) you'll see [this visualization](https://react-tech-radar.netlify.com/?path=/story/basics--with-data-from-google-spreadsheet)\n\n#### Sharing the sheet\n\n - In Google sheets, go to 'File', choose 'Publish to the web...' and then click 'Publish'.\n - Close the 'Publish to the web' dialog.\n - Copy the URL of your editable sheet from the browser (Don't worry, this does not share the editable version).\n\nThe URL will be similar to https://docs.google.com/spreadsheets/d/1waDG0_W3-yNiAaUfxcZhTKvl7AUCgXwQw8mdPjCz86U/edit. In theory we are only interested in the part between '/d/' and '/edit' but you can use the whole URL if you want.\n## License\n\n[MIT](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fomerg%2Freact-tech-radar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fomerg%2Freact-tech-radar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fomerg%2Freact-tech-radar/lists"}