From 4e5891524ca57f0cb7a787e91aa7966a67f83782 Mon Sep 17 00:00:00 2001 From: Aramis Sennyey Date: Thu, 23 Feb 2023 12:37:09 -0500 Subject: [PATCH 1/6] Update to match Zalando. Signed-off-by: Aramis Sennyey --- plugins/tech-radar/src/components/RadarGrid/RadarGrid.tsx | 2 ++ .../tech-radar/src/components/RadarLegend/RadarLegend.tsx | 1 + .../src/components/RadarLegend/RadarLegendRing.tsx | 4 +++- plugins/tech-radar/src/sample.ts | 8 ++++---- 4 files changed, 10 insertions(+), 5 deletions(-) diff --git a/plugins/tech-radar/src/components/RadarGrid/RadarGrid.tsx b/plugins/tech-radar/src/components/RadarGrid/RadarGrid.tsx index ef62b8abd9..acf69e8cbb 100644 --- a/plugins/tech-radar/src/components/RadarGrid/RadarGrid.tsx +++ b/plugins/tech-radar/src/components/RadarGrid/RadarGrid.tsx @@ -40,6 +40,7 @@ const useStyles = makeStyles(theme => ({ fill: theme.palette.text.primary, fontSize: '25px', fontWeight: 800, + opacity: 0.35, }, })); @@ -62,6 +63,7 @@ const RadarGrid = (props: Props) => { y={ringRadius !== undefined ? -ringRadius + 42 : undefined} textAnchor="middle" className={classes.text} + style={{ fill: rings[ringIndex].color }} > {rings[ringIndex].name} , diff --git a/plugins/tech-radar/src/components/RadarLegend/RadarLegend.tsx b/plugins/tech-radar/src/components/RadarLegend/RadarLegend.tsx index 4ca0350e7b..38d3757ff8 100644 --- a/plugins/tech-radar/src/components/RadarLegend/RadarLegend.tsx +++ b/plugins/tech-radar/src/components/RadarLegend/RadarLegend.tsx @@ -45,6 +45,7 @@ const useStyles = makeStyles(theme => ({ }, ringEmpty: { color: theme.palette.text.secondary, + fontSize: '12px', }, ringHeading: { pointerEvents: 'none', diff --git a/plugins/tech-radar/src/components/RadarLegend/RadarLegendRing.tsx b/plugins/tech-radar/src/components/RadarLegend/RadarLegendRing.tsx index 68b42373f3..577e0bcab4 100644 --- a/plugins/tech-radar/src/components/RadarLegend/RadarLegendRing.tsx +++ b/plugins/tech-radar/src/components/RadarLegend/RadarLegendRing.tsx @@ -37,7 +37,9 @@ export const RadarLegendRing = ({ }: RadarLegendRingProps) => { return (
-

{ring.name}

+

+ {ring.name} +

{entries.length === 0 ? ( (empty) diff --git a/plugins/tech-radar/src/sample.ts b/plugins/tech-radar/src/sample.ts index 395b4f2ff5..a967d2cbe7 100644 --- a/plugins/tech-radar/src/sample.ts +++ b/plugins/tech-radar/src/sample.ts @@ -23,10 +23,10 @@ import { } from './api'; const rings = new Array(); -rings.push({ id: 'adopt', name: 'ADOPT', color: '#93c47d' }); -rings.push({ id: 'trial', name: 'TRIAL', color: '#93d2c2' }); -rings.push({ id: 'assess', name: 'ASSESS', color: '#fbdb84' }); -rings.push({ id: 'hold', name: 'HOLD', color: '#efafa9' }); +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' }); const quadrants = new Array(); quadrants.push({ id: 'infrastructure', name: 'Infrastructure' }); From 1a2fa2f4c7d16ee087922096fe3dda44d2240c11 Mon Sep 17 00:00:00 2001 From: Aramis Sennyey Date: Fri, 24 Feb 2023 12:56:30 -0500 Subject: [PATCH 2/6] Support new option getRingColor to determine text and legend color. Signed-off-by: Aramis Sennyey --- .../src/components/Radar/Radar.test.tsx | 5 ++-- .../tech-radar/src/components/Radar/Radar.tsx | 16 ++++------- .../tech-radar/src/components/Radar/types.ts | 27 +++++++++++++++++++ .../src/components/RadarComponent.tsx | 7 ++++- .../src/components/RadarGrid/RadarGrid.tsx | 8 ++++-- .../components/RadarLegend/RadarLegend.tsx | 2 ++ .../RadarLegend/RadarLegendQuadrant.tsx | 3 +++ .../RadarLegend/RadarLegendRing.tsx | 7 ++++- .../src/components/RadarLegend/types.ts | 3 +++ .../src/components/RadarPlot/RadarPlot.tsx | 7 ++++- 10 files changed, 67 insertions(+), 18 deletions(-) create mode 100644 plugins/tech-radar/src/components/Radar/types.ts diff --git a/plugins/tech-radar/src/components/Radar/Radar.test.tsx b/plugins/tech-radar/src/components/Radar/Radar.test.tsx index b76eb20a16..5260c298fa 100644 --- a/plugins/tech-radar/src/components/Radar/Radar.test.tsx +++ b/plugins/tech-radar/src/components/Radar/Radar.test.tsx @@ -18,9 +18,10 @@ import React from 'react'; import { renderInTestApp } from '@backstage/test-utils'; import GetBBoxPolyfill from '../../utils/polyfills/getBBox'; -import Radar, { Props } from './Radar'; +import Radar from './Radar'; +import type { RadarProps } from './types'; -const minProps: Props = { +const minProps: RadarProps = { width: 500, height: 200, quadrants: [{ id: 'languages', name: 'Languages' }], diff --git a/plugins/tech-radar/src/components/Radar/Radar.tsx b/plugins/tech-radar/src/components/Radar/Radar.tsx index 8ba5af9811..a6dc045325 100644 --- a/plugins/tech-radar/src/components/Radar/Radar.tsx +++ b/plugins/tech-radar/src/components/Radar/Radar.tsx @@ -15,27 +15,20 @@ */ import React, { useMemo, useRef, useState } from 'react'; -import type { Entry, Quadrant, Ring } from '../../utils/types'; +import type { Entry } from '../../utils/types'; import RadarPlot from '../RadarPlot'; +import { RadarProps } from './types'; import { adjustEntries, adjustQuadrants, adjustRings } from './utils'; -export type Props = { - width: number; - height: number; - quadrants: Quadrant[]; - rings: Ring[]; - entries: Entry[]; - svgProps?: object; -}; - const Radar = ({ width, height, quadrants, rings, entries, + getRingColor, ...props -}: Props): JSX.Element => { +}: RadarProps): JSX.Element => { const radius = Math.min(width, height) / 2; // State @@ -66,6 +59,7 @@ const Radar = ({ return ( Color; +}; diff --git a/plugins/tech-radar/src/components/RadarComponent.tsx b/plugins/tech-radar/src/components/RadarComponent.tsx index 1f14e9d258..bf8fdd85da 100644 --- a/plugins/tech-radar/src/components/RadarComponent.tsx +++ b/plugins/tech-radar/src/components/RadarComponent.tsx @@ -20,7 +20,8 @@ import React, { useEffect } from 'react'; import useAsync from 'react-use/lib/useAsync'; import { RadarEntry, techRadarApiRef, TechRadarLoaderResponse } from '../api'; import Radar from '../components/Radar'; -import { Entry } from '../utils/types'; +import { Entry, Ring } from '../utils/types'; +import { RadarProps } from './Radar/types'; const useTechRadarLoader = (id: string | undefined) => { const errorApi = useApi(errorApiRef); @@ -89,6 +90,8 @@ export interface TechRadarComponentProps { * Text to filter {@link RadarEntry} inside Tech Radar */ searchText?: string; + + getRingColor?: RadarProps['getRingColor']; } /** @@ -102,6 +105,7 @@ export interface TechRadarComponentProps { */ export function RadarComponent(props: TechRadarComponentProps) { const { loading, error, value: data } = useTechRadarLoader(props.id); + const { getRingColor = (ring: Ring) => ring.color } = props; const mapToEntries = ( loaderResponse: TechRadarLoaderResponse, @@ -136,6 +140,7 @@ export function RadarComponent(props: TechRadarComponentProps) { {!loading && !error && data && ( (theme => ({ @@ -47,7 +49,7 @@ const useStyles = makeStyles(theme => ({ // A component for the background grid of the radar, with axes, rings etc. It will render around the origin, i.e. // assume that (0, 0) is in the middle of the drawing. const RadarGrid = (props: Props) => { - const { radius, rings } = props; + const { radius, rings, getRingColor } = props; const classes = useStyles(props); const makeRingNode = (ringIndex: number, ringRadius?: number) => [ @@ -63,7 +65,9 @@ const RadarGrid = (props: Props) => { y={ringRadius !== undefined ? -ringRadius + 42 : undefined} textAnchor="middle" className={classes.text} - style={{ fill: rings[ringIndex].color }} + style={{ + fill: getRingColor ? getRingColor(rings[ringIndex]) : undefined, + }} > {rings[ringIndex].name} , diff --git a/plugins/tech-radar/src/components/RadarLegend/RadarLegend.tsx b/plugins/tech-radar/src/components/RadarLegend/RadarLegend.tsx index 38d3757ff8..1db6c52517 100644 --- a/plugins/tech-radar/src/components/RadarLegend/RadarLegend.tsx +++ b/plugins/tech-radar/src/components/RadarLegend/RadarLegend.tsx @@ -88,6 +88,7 @@ const RadarLegend = ({ entries, onEntryMouseEnter, onEntryMouseLeave, + getRingColor, ...props }: RadarLegendProps): JSX.Element => { const classes = useStyles(props); @@ -96,6 +97,7 @@ const RadarLegend = ({ {quadrants.map(quadrant => ( ; onEntryMouseEnter: RadarLegendProps['onEntryMouseEnter']; onEntryMouseLeave: RadarLegendProps['onEntryMouseLeave']; + getRingColor: RadarLegendProps['getRingColor']; }; export const RadarLegendQuadrant = ({ @@ -37,6 +38,7 @@ export const RadarLegendQuadrant = ({ classes, onEntryMouseEnter, onEntryMouseLeave, + getRingColor, }: RadarLegendQuadrantProps) => { return ( ; onEntryMouseEnter?: RadarLegendProps['onEntryMouseEnter']; onEntryMouseLeave?: RadarLegendProps['onEntryMouseEnter']; + getRingColor?: RadarLegendProps['getRingColor']; }; export const RadarLegendRing = ({ @@ -34,10 +35,14 @@ export const RadarLegendRing = ({ classes, onEntryMouseEnter, onEntryMouseLeave, + getRingColor, }: RadarLegendRingProps) => { return (
-

+

{ring.name}

{entries.length === 0 ? ( diff --git a/plugins/tech-radar/src/components/RadarLegend/types.ts b/plugins/tech-radar/src/components/RadarLegend/types.ts index cdac1bfe9d..9974a6592b 100644 --- a/plugins/tech-radar/src/components/RadarLegend/types.ts +++ b/plugins/tech-radar/src/components/RadarLegend/types.ts @@ -15,6 +15,7 @@ */ import { Entry, Quadrant, Ring } from '../../utils/types'; +import { RadarProps } from '../Radar/types'; export type Segments = { [k: number]: { [k: number]: Entry[] }; @@ -26,4 +27,6 @@ export type RadarLegendProps = { entries: Entry[]; onEntryMouseEnter?: (entry: Entry) => void; onEntryMouseLeave?: (entry: Entry) => void; + + getRingColor?: RadarProps['getRingColor']; }; diff --git a/plugins/tech-radar/src/components/RadarPlot/RadarPlot.tsx b/plugins/tech-radar/src/components/RadarPlot/RadarPlot.tsx index d9788be887..a51d1dacd9 100644 --- a/plugins/tech-radar/src/components/RadarPlot/RadarPlot.tsx +++ b/plugins/tech-radar/src/components/RadarPlot/RadarPlot.tsx @@ -22,6 +22,7 @@ import RadarEntry from '../RadarEntry'; import RadarBubble from '../RadarBubble'; import RadarFooter from '../RadarFooter'; import RadarLegend from '../RadarLegend'; +import { RadarProps } from '../Radar/types'; export type Props = { width: number; @@ -33,6 +34,8 @@ export type Props = { activeEntry?: Entry; onEntryMouseEnter?: (entry: Entry) => void; onEntryMouseLeave?: (entry: Entry) => void; + + getRingColor?: RadarProps['getRingColor']; }; // A component that draws the radar circle. @@ -47,6 +50,7 @@ const RadarPlot = (props: Props): JSX.Element => { activeEntry, onEntryMouseEnter, onEntryMouseLeave, + getRingColor, } = props; return ( @@ -61,9 +65,10 @@ const RadarPlot = (props: Props): JSX.Element => { onEntryMouseLeave={ onEntryMouseLeave && (entry => onEntryMouseLeave(entry)) } + getRingColor={getRingColor} /> - + {entries.map(entry => ( Date: Fri, 24 Feb 2023 12:58:19 -0500 Subject: [PATCH 3/6] Revert "Support new option getRingColor to determine text and legend color." This reverts commit 1a2fa2f4c7d16ee087922096fe3dda44d2240c11. Signed-off-by: Aramis Sennyey --- .../src/components/Radar/Radar.test.tsx | 5 ++-- .../tech-radar/src/components/Radar/Radar.tsx | 16 +++++++---- .../tech-radar/src/components/Radar/types.ts | 27 ------------------- .../src/components/RadarComponent.tsx | 7 +---- .../src/components/RadarGrid/RadarGrid.tsx | 8 ++---- .../components/RadarLegend/RadarLegend.tsx | 2 -- .../RadarLegend/RadarLegendQuadrant.tsx | 3 --- .../RadarLegend/RadarLegendRing.tsx | 7 +---- .../src/components/RadarLegend/types.ts | 3 --- .../src/components/RadarPlot/RadarPlot.tsx | 7 +---- 10 files changed, 18 insertions(+), 67 deletions(-) delete mode 100644 plugins/tech-radar/src/components/Radar/types.ts diff --git a/plugins/tech-radar/src/components/Radar/Radar.test.tsx b/plugins/tech-radar/src/components/Radar/Radar.test.tsx index 5260c298fa..b76eb20a16 100644 --- a/plugins/tech-radar/src/components/Radar/Radar.test.tsx +++ b/plugins/tech-radar/src/components/Radar/Radar.test.tsx @@ -18,10 +18,9 @@ import React from 'react'; import { renderInTestApp } from '@backstage/test-utils'; import GetBBoxPolyfill from '../../utils/polyfills/getBBox'; -import Radar from './Radar'; -import type { RadarProps } from './types'; +import Radar, { Props } from './Radar'; -const minProps: RadarProps = { +const minProps: Props = { width: 500, height: 200, quadrants: [{ id: 'languages', name: 'Languages' }], diff --git a/plugins/tech-radar/src/components/Radar/Radar.tsx b/plugins/tech-radar/src/components/Radar/Radar.tsx index a6dc045325..8ba5af9811 100644 --- a/plugins/tech-radar/src/components/Radar/Radar.tsx +++ b/plugins/tech-radar/src/components/Radar/Radar.tsx @@ -15,20 +15,27 @@ */ import React, { useMemo, useRef, useState } from 'react'; -import type { Entry } from '../../utils/types'; +import type { Entry, Quadrant, Ring } from '../../utils/types'; import RadarPlot from '../RadarPlot'; -import { RadarProps } from './types'; import { adjustEntries, adjustQuadrants, adjustRings } from './utils'; +export type Props = { + width: number; + height: number; + quadrants: Quadrant[]; + rings: Ring[]; + entries: Entry[]; + svgProps?: object; +}; + const Radar = ({ width, height, quadrants, rings, entries, - getRingColor, ...props -}: RadarProps): JSX.Element => { +}: Props): JSX.Element => { const radius = Math.min(width, height) / 2; // State @@ -59,7 +66,6 @@ const Radar = ({ return ( Color; -}; diff --git a/plugins/tech-radar/src/components/RadarComponent.tsx b/plugins/tech-radar/src/components/RadarComponent.tsx index bf8fdd85da..1f14e9d258 100644 --- a/plugins/tech-radar/src/components/RadarComponent.tsx +++ b/plugins/tech-radar/src/components/RadarComponent.tsx @@ -20,8 +20,7 @@ import React, { useEffect } from 'react'; import useAsync from 'react-use/lib/useAsync'; import { RadarEntry, techRadarApiRef, TechRadarLoaderResponse } from '../api'; import Radar from '../components/Radar'; -import { Entry, Ring } from '../utils/types'; -import { RadarProps } from './Radar/types'; +import { Entry } from '../utils/types'; const useTechRadarLoader = (id: string | undefined) => { const errorApi = useApi(errorApiRef); @@ -90,8 +89,6 @@ export interface TechRadarComponentProps { * Text to filter {@link RadarEntry} inside Tech Radar */ searchText?: string; - - getRingColor?: RadarProps['getRingColor']; } /** @@ -105,7 +102,6 @@ export interface TechRadarComponentProps { */ export function RadarComponent(props: TechRadarComponentProps) { const { loading, error, value: data } = useTechRadarLoader(props.id); - const { getRingColor = (ring: Ring) => ring.color } = props; const mapToEntries = ( loaderResponse: TechRadarLoaderResponse, @@ -140,7 +136,6 @@ export function RadarComponent(props: TechRadarComponentProps) { {!loading && !error && data && ( (theme => ({ @@ -49,7 +47,7 @@ const useStyles = makeStyles(theme => ({ // A component for the background grid of the radar, with axes, rings etc. It will render around the origin, i.e. // assume that (0, 0) is in the middle of the drawing. const RadarGrid = (props: Props) => { - const { radius, rings, getRingColor } = props; + const { radius, rings } = props; const classes = useStyles(props); const makeRingNode = (ringIndex: number, ringRadius?: number) => [ @@ -65,9 +63,7 @@ const RadarGrid = (props: Props) => { y={ringRadius !== undefined ? -ringRadius + 42 : undefined} textAnchor="middle" className={classes.text} - style={{ - fill: getRingColor ? getRingColor(rings[ringIndex]) : undefined, - }} + style={{ fill: rings[ringIndex].color }} > {rings[ringIndex].name} , diff --git a/plugins/tech-radar/src/components/RadarLegend/RadarLegend.tsx b/plugins/tech-radar/src/components/RadarLegend/RadarLegend.tsx index 1db6c52517..38d3757ff8 100644 --- a/plugins/tech-radar/src/components/RadarLegend/RadarLegend.tsx +++ b/plugins/tech-radar/src/components/RadarLegend/RadarLegend.tsx @@ -88,7 +88,6 @@ const RadarLegend = ({ entries, onEntryMouseEnter, onEntryMouseLeave, - getRingColor, ...props }: RadarLegendProps): JSX.Element => { const classes = useStyles(props); @@ -97,7 +96,6 @@ const RadarLegend = ({ {quadrants.map(quadrant => ( ; onEntryMouseEnter: RadarLegendProps['onEntryMouseEnter']; onEntryMouseLeave: RadarLegendProps['onEntryMouseLeave']; - getRingColor: RadarLegendProps['getRingColor']; }; export const RadarLegendQuadrant = ({ @@ -38,7 +37,6 @@ export const RadarLegendQuadrant = ({ classes, onEntryMouseEnter, onEntryMouseLeave, - getRingColor, }: RadarLegendQuadrantProps) => { return ( ; onEntryMouseEnter?: RadarLegendProps['onEntryMouseEnter']; onEntryMouseLeave?: RadarLegendProps['onEntryMouseEnter']; - getRingColor?: RadarLegendProps['getRingColor']; }; export const RadarLegendRing = ({ @@ -35,14 +34,10 @@ export const RadarLegendRing = ({ classes, onEntryMouseEnter, onEntryMouseLeave, - getRingColor, }: RadarLegendRingProps) => { return (
-

+

{ring.name}

{entries.length === 0 ? ( diff --git a/plugins/tech-radar/src/components/RadarLegend/types.ts b/plugins/tech-radar/src/components/RadarLegend/types.ts index 9974a6592b..cdac1bfe9d 100644 --- a/plugins/tech-radar/src/components/RadarLegend/types.ts +++ b/plugins/tech-radar/src/components/RadarLegend/types.ts @@ -15,7 +15,6 @@ */ import { Entry, Quadrant, Ring } from '../../utils/types'; -import { RadarProps } from '../Radar/types'; export type Segments = { [k: number]: { [k: number]: Entry[] }; @@ -27,6 +26,4 @@ export type RadarLegendProps = { entries: Entry[]; onEntryMouseEnter?: (entry: Entry) => void; onEntryMouseLeave?: (entry: Entry) => void; - - getRingColor?: RadarProps['getRingColor']; }; diff --git a/plugins/tech-radar/src/components/RadarPlot/RadarPlot.tsx b/plugins/tech-radar/src/components/RadarPlot/RadarPlot.tsx index a51d1dacd9..d9788be887 100644 --- a/plugins/tech-radar/src/components/RadarPlot/RadarPlot.tsx +++ b/plugins/tech-radar/src/components/RadarPlot/RadarPlot.tsx @@ -22,7 +22,6 @@ import RadarEntry from '../RadarEntry'; import RadarBubble from '../RadarBubble'; import RadarFooter from '../RadarFooter'; import RadarLegend from '../RadarLegend'; -import { RadarProps } from '../Radar/types'; export type Props = { width: number; @@ -34,8 +33,6 @@ export type Props = { activeEntry?: Entry; onEntryMouseEnter?: (entry: Entry) => void; onEntryMouseLeave?: (entry: Entry) => void; - - getRingColor?: RadarProps['getRingColor']; }; // A component that draws the radar circle. @@ -50,7 +47,6 @@ const RadarPlot = (props: Props): JSX.Element => { activeEntry, onEntryMouseEnter, onEntryMouseLeave, - getRingColor, } = props; return ( @@ -65,10 +61,9 @@ const RadarPlot = (props: Props): JSX.Element => { onEntryMouseLeave={ onEntryMouseLeave && (entry => onEntryMouseLeave(entry)) } - getRingColor={getRingColor} /> - + {entries.map(entry => ( Date: Fri, 24 Feb 2023 13:01:21 -0500 Subject: [PATCH 4/6] Add changeset. Signed-off-by: Aramis Sennyey --- .changeset/mighty-games-turn.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/mighty-games-turn.md diff --git a/.changeset/mighty-games-turn.md b/.changeset/mighty-games-turn.md new file mode 100644 index 0000000000..4e9461e341 --- /dev/null +++ b/.changeset/mighty-games-turn.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-tech-radar': minor +--- + +Update colors to match Zalando's tech radar, also add coloring on title and legend to match ring color. From 69002a336800559acb9943a8b227a0f1eccdef99 Mon Sep 17 00:00:00 2001 From: Aramis Sennyey Date: Fri, 24 Feb 2023 13:14:21 -0500 Subject: [PATCH 5/6] Add test cases. Signed-off-by: Aramis Sennyey --- .../src/components/RadarGrid/RadarGrid.test.tsx | 12 ++++++++++++ .../src/components/RadarGrid/RadarGrid.tsx | 1 + .../components/RadarLegend/RadarLegend.test.tsx | 15 +++++++++++++++ .../components/RadarLegend/RadarLegendRing.tsx | 6 +++++- 4 files changed, 33 insertions(+), 1 deletion(-) diff --git a/plugins/tech-radar/src/components/RadarGrid/RadarGrid.test.tsx b/plugins/tech-radar/src/components/RadarGrid/RadarGrid.test.tsx index 2e0a5a225c..e8896ec9e0 100644 --- a/plugins/tech-radar/src/components/RadarGrid/RadarGrid.test.tsx +++ b/plugins/tech-radar/src/components/RadarGrid/RadarGrid.test.tsx @@ -44,4 +44,16 @@ describe('RadarGrid', () => { expect(rendered.getByTestId('radar-grid-x-line')).toBeInTheDocument(); expect(rendered.getByTestId('radar-grid-y-line')).toBeInTheDocument(); }); + + it('should have the correct text color', async () => { + const rendered = await renderInTestApp( + + + , + ); + + expect(rendered.getByTestId('radar-ring-heading')).toHaveStyle({ + fill: '#93c47d', + }); + }); }); diff --git a/plugins/tech-radar/src/components/RadarGrid/RadarGrid.tsx b/plugins/tech-radar/src/components/RadarGrid/RadarGrid.tsx index acf69e8cbb..8dc1a62c56 100644 --- a/plugins/tech-radar/src/components/RadarGrid/RadarGrid.tsx +++ b/plugins/tech-radar/src/components/RadarGrid/RadarGrid.tsx @@ -64,6 +64,7 @@ const RadarGrid = (props: Props) => { textAnchor="middle" className={classes.text} style={{ fill: rings[ringIndex].color }} + data-testid="radar-ring-heading" > {rings[ringIndex].name} , diff --git a/plugins/tech-radar/src/components/RadarLegend/RadarLegend.test.tsx b/plugins/tech-radar/src/components/RadarLegend/RadarLegend.test.tsx index de8bfd15d7..70cd2d0244 100644 --- a/plugins/tech-radar/src/components/RadarLegend/RadarLegend.test.tsx +++ b/plugins/tech-radar/src/components/RadarLegend/RadarLegend.test.tsx @@ -56,4 +56,19 @@ describe('RadarLegend', () => { expect(rendered.getAllByTestId('radar-quadrant')).toHaveLength(1); expect(rendered.getAllByTestId('radar-ring')).toHaveLength(1); }); + + it('should have the correct ring text color', async () => { + const rendered = await renderInTestApp( + + + , + ); + + expect(rendered.getByTestId('radar-legend')).toBeInTheDocument(); + + const legend = rendered.getByTestId('radar-legend-heading'); + expect(legend).toHaveStyle({ + color: '#93c47d', + }); + }); }); diff --git a/plugins/tech-radar/src/components/RadarLegend/RadarLegendRing.tsx b/plugins/tech-radar/src/components/RadarLegend/RadarLegendRing.tsx index 577e0bcab4..da5c10831e 100644 --- a/plugins/tech-radar/src/components/RadarLegend/RadarLegendRing.tsx +++ b/plugins/tech-radar/src/components/RadarLegend/RadarLegendRing.tsx @@ -37,7 +37,11 @@ export const RadarLegendRing = ({ }: RadarLegendRingProps) => { return (
-

+

{ring.name}

{entries.length === 0 ? ( From cb79a10439a653dd4a4df5ce2c28b245e6afd0af Mon Sep 17 00:00:00 2001 From: Aramis Sennyey Date: Mon, 27 Feb 2023 11:25:39 -0500 Subject: [PATCH 6/6] Fix contract and update to patch. Signed-off-by: Aramis Sennyey --- .changeset/mighty-games-turn.md | 2 +- .../src/components/RadarGrid/RadarGrid.tsx | 43 ++++++++++--------- 2 files changed, 24 insertions(+), 21 deletions(-) diff --git a/.changeset/mighty-games-turn.md b/.changeset/mighty-games-turn.md index 4e9461e341..38c2487835 100644 --- a/.changeset/mighty-games-turn.md +++ b/.changeset/mighty-games-turn.md @@ -1,5 +1,5 @@ --- -'@backstage/plugin-tech-radar': minor +'@backstage/plugin-tech-radar': patch --- Update colors to match Zalando's tech radar, also add coloring on title and legend to match ring color. diff --git a/plugins/tech-radar/src/components/RadarGrid/RadarGrid.tsx b/plugins/tech-radar/src/components/RadarGrid/RadarGrid.tsx index 8dc1a62c56..8f796620e0 100644 --- a/plugins/tech-radar/src/components/RadarGrid/RadarGrid.tsx +++ b/plugins/tech-radar/src/components/RadarGrid/RadarGrid.tsx @@ -23,26 +23,29 @@ export type Props = { rings: Ring[]; }; -const useStyles = makeStyles(theme => ({ - ring: { - fill: 'none', - stroke: '#bbb', - strokeWidth: '1px', - }, - axis: { - fill: 'none', - stroke: '#bbb', - strokeWidth: '1px', - }, - text: { - pointerEvents: 'none', - userSelect: 'none', - fill: theme.palette.text.primary, - fontSize: '25px', - fontWeight: 800, - opacity: 0.35, - }, -})); +const useStyles = makeStyles( + theme => ({ + ring: { + fill: 'none', + stroke: '#bbb', + strokeWidth: '1px', + }, + axis: { + fill: 'none', + stroke: '#bbb', + strokeWidth: '1px', + }, + text: { + pointerEvents: 'none', + userSelect: 'none', + fill: theme.palette.text.primary, + fontSize: '25px', + fontWeight: 800, + opacity: 0.7, + }, + }), + { name: 'PluginTechRadarGrid' }, +); // A component for the background grid of the radar, with axes, rings etc. It will render around the origin, i.e. // assume that (0, 0) is in the middle of the drawing.