Merge pull request #19710 from dbrugger/tech-radar-ring-descriptions

feat(tech-radar): ring descriptions

.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.

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
 

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;
 }

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;
 }
 
 /**

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<Entry>();

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);

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<string>;
 };
 
+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 (
     <text
@@ -41,7 +46,9 @@ const RadarFooter = (props: Props): JSX.Element => {
       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)}
     </text>
   );
 };

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: {

plugins/tech-radar/src/components/RadarPlot/RadarPlot.tsx

@@ -64,7 +64,18 @@ const RadarPlot = (props: Props): JSX.Element => {
       />
       <g transform={`translate(${width / 2}, ${height / 2})`}>
         <RadarGrid radius={radius} rings={rings} />
-        <RadarFooter x={-0.5 * width} y={0.5 * height} />
+        <RadarFooter
+          x={-0.5 * width}
+          y={0.5 * height}
+          spaces={rings.some(ring => ring.description) ? 2 : undefined}
+          labels={
+            rings
+              .map(
+                ring => ring.description && `${ring.name}: ${ring.description}`,
+              )
+              .filter(e => e) as string[]
+          }
+        />
         {entries.map(entry => (
           <RadarEntry
             key={entry.id}

plugins/tech-radar/src/sample.ts

@@ -23,10 +23,32 @@ import {
 } from './api';
 
 const rings = new Array<RadarRing>();
-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<RadarQuadrant>();
 quadrants.push({ id: 'infrastructure', name: 'Infrastructure' });

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)