Visualize the your company's official guidelines of different areas of software development.
Install the plugin into Backstage.
yarn add @backstage/plugin-tech-radar
Add plugin to the list of plugins.
// packages/app/src/plugins.ts
export { plugin as TechRadar } from '@backstage/plugin-tech-radar';
Modify your app routes to include the Router component exported from the tech radar, for example
// packages/app/src/App.tsx
import { Router as TechRadarRouter } from '@backstage/plugin-tech-radar';
<Routes>
{/* other routes ... */}
<Route
path="/tech-radar"
element={<TechRadarRouter width={1500} height={800} />}
/>
{/* other routes ... */}
</Routes>;
To pass own data to plugin use a getData
prop which expects a Promise<TechRadarLoaderResponse>
signature.
For example:
const getFireBaseData = () =>
Promise.resolve({
quadrants: [{ id: 'infrastructure', name: 'Infrastructure' }],
rings: [{ id: 'use', name: 'USE', color: '#91c49d' }],
entries: [
{
moved: 0,
ring: 'use',
url: '#',
key: 'firebase-function',
id: 'firebase-function',
title: 'FireBase Function',
quadrant: 'infrastructure',
},
],
});
<TechRadarComponent width={1500} height={900} getData={getFireBaseData} />;
To get the latest news, deep dives into Backstage features, and a roundup of recent open-source action, sign up for Roadie's Backstage Weekly. See recent editions.