From 6d35e9ea2afa27dcce2dc43e1cef28ad305de9ca Mon Sep 17 00:00:00 2001 From: Dominik Brugger Date: Fri, 1 Sep 2023 04:36:44 +0200 Subject: [PATCH] feat(tech-radar): ring descriptions Signed-off-by: Dominik Brugger --- .changeset/loud-apricots-destroy.md | 5 ++++ plugins/tech-radar/README.md | 11 +++---- plugins/tech-radar/api-report.md | 1 + plugins/tech-radar/src/api.ts | 4 +++ .../tech-radar/src/components/Radar/Radar.tsx | 5 +++- .../src/components/RadarComponent.tsx | 8 +++-- .../components/RadarFooter/RadarFooter.tsx | 11 +++++-- .../tech-radar/src/components/RadarPage.tsx | 2 +- .../src/components/RadarPlot/RadarPlot.tsx | 13 +++++++- plugins/tech-radar/src/sample.ts | 30 ++++++++++++++++--- plugins/tech-radar/src/utils/types.ts | 1 + 11 files changed, 75 insertions(+), 16 deletions(-) create mode 100644 .changeset/loud-apricots-destroy.md diff --git a/.changeset/loud-apricots-destroy.md b/.changeset/loud-apricots-destroy.md new file mode 100644 index 0000000000..e60be6dccf --- /dev/null +++ b/.changeset/loud-apricots-destroy.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-tech-radar': patch +--- + +Add description property for Rings which will be shown in the footer. diff --git a/plugins/tech-radar/README.md b/plugins/tech-radar/README.md index 1c64e4fc9e..31d90de938 100644 --- a/plugins/tech-radar/README.md +++ b/plugins/tech-radar/README.md @@ -85,11 +85,12 @@ When defining the radar entries you can see the available properties on the file ### ring -| Name | Type | Description | Required? | -| ------- | ------ | ------------------------------------------------- | --------- | -| `id` | string | The id of the ring | Yes | -| `name` | string | The name of the ring | Yes | -| `color` | string | The color of the ring and entries inside the ring | Yes | +| Name | Type | Description | Required? | +| ------------- | ------ | ------------------------------------------------- | --------- | +| `id` | string | The id of the ring | Yes | +| `name` | string | The name of the ring | Yes | +| `color` | string | The color of the ring and entries inside the ring | Yes | +| `description` | string | Description of the Ring | No | ### entry diff --git a/plugins/tech-radar/api-report.md b/plugins/tech-radar/api-report.md index a7e4b7458e..f55f0ee39e 100644 --- a/plugins/tech-radar/api-report.md +++ b/plugins/tech-radar/api-report.md @@ -54,6 +54,7 @@ export interface RadarQuadrant { // @public export interface RadarRing { color: string; + description?: string; id: string; name: string; } diff --git a/plugins/tech-radar/src/api.ts b/plugins/tech-radar/src/api.ts index c0b8fb8852..53fbb0bb15 100644 --- a/plugins/tech-radar/src/api.ts +++ b/plugins/tech-radar/src/api.ts @@ -71,6 +71,10 @@ export interface RadarRing { * Supports any value parseable by {@link https://www.npmjs.com/package/color-string | color-string} */ color: string; + /** + * Description of the Ring + */ + description?: string; } /** diff --git a/plugins/tech-radar/src/components/Radar/Radar.tsx b/plugins/tech-radar/src/components/Radar/Radar.tsx index 8ba5af9811..55b8a01784 100644 --- a/plugins/tech-radar/src/components/Radar/Radar.tsx +++ b/plugins/tech-radar/src/components/Radar/Radar.tsx @@ -36,7 +36,10 @@ const Radar = ({ entries, ...props }: Props): JSX.Element => { - const radius = Math.min(width, height) / 2; + // Radius with optional buffer for the footer if rings have descriptions + const radius = + Math.min(width, height) / 2 - + (rings.some(ring => ring.description) ? 16 : 0); // State const [activeEntry, setActiveEntry] = useState(); diff --git a/plugins/tech-radar/src/components/RadarComponent.tsx b/plugins/tech-radar/src/components/RadarComponent.tsx index 1f14e9d258..9437501405 100644 --- a/plugins/tech-radar/src/components/RadarComponent.tsx +++ b/plugins/tech-radar/src/components/RadarComponent.tsx @@ -18,9 +18,13 @@ import { Progress } from '@backstage/core-components'; import { errorApiRef, useApi } from '@backstage/core-plugin-api'; import React, { useEffect } from 'react'; import useAsync from 'react-use/lib/useAsync'; -import { RadarEntry, techRadarApiRef, TechRadarLoaderResponse } from '../api'; +import { + type RadarEntry, + techRadarApiRef, + type TechRadarLoaderResponse, +} from '../api'; import Radar from '../components/Radar'; -import { Entry } from '../utils/types'; +import type { Entry } from '../utils/types'; const useTechRadarLoader = (id: string | undefined) => { const errorApi = useApi(errorApiRef); diff --git a/plugins/tech-radar/src/components/RadarFooter/RadarFooter.tsx b/plugins/tech-radar/src/components/RadarFooter/RadarFooter.tsx index 63f10e8673..e20c07bb00 100644 --- a/plugins/tech-radar/src/components/RadarFooter/RadarFooter.tsx +++ b/plugins/tech-radar/src/components/RadarFooter/RadarFooter.tsx @@ -20,8 +20,12 @@ import { makeStyles } from '@material-ui/core'; export type Props = { x: number; y: number; + spaces?: number; + labels?: Array; }; +const onespace = '\u00a0'; + const useStyles = makeStyles(theme => ({ text: { pointerEvents: 'none', @@ -32,8 +36,9 @@ const useStyles = makeStyles(theme => ({ })); const RadarFooter = (props: Props): JSX.Element => { - const { x, y } = props; + const { x, y, spaces = 5, labels } = props; const classes = useStyles(props); + const space = onespace.repeat(spaces); return ( { transform={`translate(${x}, ${y})`} className={classes.text} > - {'▲ moved up\u00a0\u00a0\u00a0\u00a0\u00a0▼ moved down'} + {`▲ moved up${space}▼ moved down`} + {labels && space} + {labels?.join(space)} ); }; diff --git a/plugins/tech-radar/src/components/RadarPage.tsx b/plugins/tech-radar/src/components/RadarPage.tsx index 802acef2a8..a7ea538977 100644 --- a/plugins/tech-radar/src/components/RadarPage.tsx +++ b/plugins/tech-radar/src/components/RadarPage.tsx @@ -25,7 +25,7 @@ import { import { Grid, Input, makeStyles } from '@material-ui/core'; import Typography from '@material-ui/core/Typography'; import React from 'react'; -import { RadarComponent, TechRadarComponentProps } from './RadarComponent'; +import { RadarComponent, type TechRadarComponentProps } from './RadarComponent'; const useStyles = makeStyles(() => ({ overflowXScroll: { diff --git a/plugins/tech-radar/src/components/RadarPlot/RadarPlot.tsx b/plugins/tech-radar/src/components/RadarPlot/RadarPlot.tsx index 8869ff4a67..56fd029eee 100644 --- a/plugins/tech-radar/src/components/RadarPlot/RadarPlot.tsx +++ b/plugins/tech-radar/src/components/RadarPlot/RadarPlot.tsx @@ -64,7 +64,18 @@ const RadarPlot = (props: Props): JSX.Element => { /> - + ring.description) ? 2 : undefined} + labels={ + rings + .map( + ring => ring.description && `${ring.name}: ${ring.description}`, + ) + .filter(e => e) as string[] + } + /> {entries.map(entry => ( (); -rings.push({ id: 'adopt', name: 'ADOPT', color: '#5BA300' }); -rings.push({ id: 'trial', name: 'TRIAL', color: '#009EB0' }); -rings.push({ id: 'assess', name: 'ASSESS', color: '#C7BA00' }); -rings.push({ id: 'hold', name: 'HOLD', color: '#E09B96' }); +rings.push({ + id: 'adopt', + name: 'ADOPT', + color: '#5BA300', + description: + 'Commodi accusantium culpa sed itaque excepturi rem eum nulla possimus.', +}); +rings.push({ + id: 'trial', + name: 'TRIAL', + color: '#009EB0', + description: 'Recusandae possimus ipsum dolores.', +}); +rings.push({ + id: 'assess', + name: 'ASSESS', + color: '#C7BA00', + description: + 'In asperiores repellat error recusandae et adipisci laborum porro.', +}); +rings.push({ + id: 'hold', + name: 'HOLD', + color: '#E09B96', + description: 'Esse mollitia in.', +}); const quadrants = new Array(); quadrants.push({ id: 'infrastructure', name: 'Infrastructure' }); diff --git a/plugins/tech-radar/src/utils/types.ts b/plugins/tech-radar/src/utils/types.ts index 047319bd9e..4ab236765d 100644 --- a/plugins/tech-radar/src/utils/types.ts +++ b/plugins/tech-radar/src/utils/types.ts @@ -23,6 +23,7 @@ export type Ring = { color: string; outerRadius?: number; innerRadius?: number; + description?: string; }; // Parameters for a quadrant (there should be exactly 4 of course)