From 17fdd1bb4d101470e2c4ea0474b1bd85abb07433 Mon Sep 17 00:00:00 2001 From: Joost Hofman Date: Mon, 4 Jul 2022 12:18:10 +0200 Subject: [PATCH 1/6] Update tech radar docs on using an external datasource Signed-off-by: Joost Hofman --- plugins/tech-radar/README.md | 37 +++++++++++++++++++++++++++++++++--- 1 file changed, 34 insertions(+), 3 deletions(-) diff --git a/plugins/tech-radar/README.md b/plugins/tech-radar/README.md index 10c7a104c1..fb860ac4d8 100644 --- a/plugins/tech-radar/README.md +++ b/plugins/tech-radar/README.md @@ -77,12 +77,43 @@ When defining the radar entries you can see the available properties on the file The `TechRadar` plugin uses the `techRadarApiRef` to get a client which implements the `TechRadarApi` interface. The default sample one is located [here](https://github.com/backstage/backstage/blob/master/plugins/tech-radar/src/sample.ts). To load your own data, you'll need to provide a class that implements the `TechRadarApi` and override the `techRadarApiRef` in the `app/src/apis.ts`. +```ts +// app/src/lib/DataConverter.ts +import { TechRadarLoaderResponse } from '@backstage/plugin-tech-radar'; + +export function convertTechRadarData(json: any): TechRadarLoaderResponse { + const { entries, rings, quadrants } = json; + + const normalizedEntries = entries.map(entry => { + // convert date of timeline + const timelineEntries = entry.timeline.map(timeline => { + return { + ...timeline, + date: new Date(timeline.date), + }; + }); + + return { + ...entry, + timeline: timelineEntries, + }; + }); + + return { + entries: normalizedEntries, + rings, + quadrants, + }; +} +``` + ```ts // app/src/lib/MyClient.ts import { TechRadarApi, TechRadarLoaderResponse, } from '@backstage/plugin-tech-radar'; +import { convertTechRadarData } from './DataConverter'; export class MyOwnClient implements TechRadarApi { async load(id: string | undefined): Promise { @@ -91,8 +122,8 @@ export class MyOwnClient implements TechRadarApi { const data = await fetch('https://mydata.json').then(res => res.json()); // maybe you'll need to do some data transformation here to make it look like TechRadarLoaderResponse - - return data; + // Need a converter for the Date object + return convertTechRadarData(data); } } @@ -128,4 +159,4 @@ You can use the `svgProps` option to pass custom React props to the `` elem ### How do I support multiple radars -The `TechRadarPage` and `TechRadarComponent` components both take an optional `id` prop which is subsequently passed to the `load` method of the API to distinguish which radar's data to load. +The `TechRadarPage` and `TechRadarComponent` components both take an optional `id` prop which is subsequently passed to the `load` method of the API to distinguish which radar's data to load. \ No newline at end of file From b8f608f1ecde01bb7ed3fb5eda5275d553e3e09a Mon Sep 17 00:00:00 2001 From: Joost Hofman Date: Mon, 4 Jul 2022 12:39:43 +0200 Subject: [PATCH 2/6] Add changeset for documentation update tech-radar Signed-off-by: Joost Hofman --- .changeset/fifty-vans-drum.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/fifty-vans-drum.md diff --git a/.changeset/fifty-vans-drum.md b/.changeset/fifty-vans-drum.md new file mode 100644 index 0000000000..76ad2fa8df --- /dev/null +++ b/.changeset/fifty-vans-drum.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-tech-radar': patch +--- + +Update tech-radar documentation on how to use an external json datasource with dates. From 7b304929ec7160e9619851ddc20cd96780b8e956 Mon Sep 17 00:00:00 2001 From: Joost Hofman Date: Mon, 4 Jul 2022 13:05:27 +0200 Subject: [PATCH 3/6] Fix prettier warning on tech-radar readme Signed-off-by: Joost Hofman --- plugins/tech-radar/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/tech-radar/README.md b/plugins/tech-radar/README.md index fb860ac4d8..824f098104 100644 --- a/plugins/tech-radar/README.md +++ b/plugins/tech-radar/README.md @@ -159,4 +159,4 @@ You can use the `svgProps` option to pass custom React props to the `` elem ### How do I support multiple radars -The `TechRadarPage` and `TechRadarComponent` components both take an optional `id` prop which is subsequently passed to the `load` method of the API to distinguish which radar's data to load. \ No newline at end of file +The `TechRadarPage` and `TechRadarComponent` components both take an optional `id` prop which is subsequently passed to the `load` method of the API to distinguish which radar's data to load. From 50c4540ccab6d48d84141c88e1003820ba7511bf Mon Sep 17 00:00:00 2001 From: Joost Hofman Date: Mon, 4 Jul 2022 15:11:25 +0200 Subject: [PATCH 4/6] Fix reviewdog spelling in changeset Signed-off-by: Joost Hofman --- .changeset/fifty-vans-drum.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/fifty-vans-drum.md b/.changeset/fifty-vans-drum.md index 76ad2fa8df..6b1b920bb9 100644 --- a/.changeset/fifty-vans-drum.md +++ b/.changeset/fifty-vans-drum.md @@ -2,4 +2,4 @@ '@backstage/plugin-tech-radar': patch --- -Update tech-radar documentation on how to use an external json datasource with dates. +Update tech-radar documentation on how to use an external json data source with dates. From 17bb338c2ccfbcef1b721ec98f902f9a033c3f19 Mon Sep 17 00:00:00 2001 From: Joost Hofman Date: Wed, 6 Jul 2022 11:39:02 +0200 Subject: [PATCH 5/6] Simplify the return statement Signed-off-by: Joost Hofman --- plugins/tech-radar/README.md | 45 +++++++++--------------------------- 1 file changed, 11 insertions(+), 34 deletions(-) diff --git a/plugins/tech-radar/README.md b/plugins/tech-radar/README.md index 824f098104..d2d5e99486 100644 --- a/plugins/tech-radar/README.md +++ b/plugins/tech-radar/README.md @@ -77,43 +77,12 @@ When defining the radar entries you can see the available properties on the file The `TechRadar` plugin uses the `techRadarApiRef` to get a client which implements the `TechRadarApi` interface. The default sample one is located [here](https://github.com/backstage/backstage/blob/master/plugins/tech-radar/src/sample.ts). To load your own data, you'll need to provide a class that implements the `TechRadarApi` and override the `techRadarApiRef` in the `app/src/apis.ts`. -```ts -// app/src/lib/DataConverter.ts -import { TechRadarLoaderResponse } from '@backstage/plugin-tech-radar'; - -export function convertTechRadarData(json: any): TechRadarLoaderResponse { - const { entries, rings, quadrants } = json; - - const normalizedEntries = entries.map(entry => { - // convert date of timeline - const timelineEntries = entry.timeline.map(timeline => { - return { - ...timeline, - date: new Date(timeline.date), - }; - }); - - return { - ...entry, - timeline: timelineEntries, - }; - }); - - return { - entries: normalizedEntries, - rings, - quadrants, - }; -} -``` - ```ts // app/src/lib/MyClient.ts import { TechRadarApi, TechRadarLoaderResponse, } from '@backstage/plugin-tech-radar'; -import { convertTechRadarData } from './DataConverter'; export class MyOwnClient implements TechRadarApi { async load(id: string | undefined): Promise { @@ -121,9 +90,17 @@ export class MyOwnClient implements TechRadarApi { const data = await fetch('https://mydata.json').then(res => res.json()); - // maybe you'll need to do some data transformation here to make it look like TechRadarLoaderResponse - // Need a converter for the Date object - return convertTechRadarData(data); + // For example, this converts the timeline dates into date objects + return { + ...data, + entries: data.entries.map(entry => ({ + ...entry, + timeline: entry.timeline.map(timeline => ({ + ...timeline, + date: new Date(timeline.date), + })) + })) + } } } From e7d66249bd89a2862d9a279a507fb5381d59f627 Mon Sep 17 00:00:00 2001 From: Joost Hofman Date: Wed, 6 Jul 2022 11:40:56 +0200 Subject: [PATCH 6/6] Simplify the return statement Signed-off-by: Joost Hofman --- plugins/tech-radar/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/plugins/tech-radar/README.md b/plugins/tech-radar/README.md index d2d5e99486..5c99541c2a 100644 --- a/plugins/tech-radar/README.md +++ b/plugins/tech-radar/README.md @@ -98,9 +98,9 @@ export class MyOwnClient implements TechRadarApi { timeline: entry.timeline.map(timeline => ({ ...timeline, date: new Date(timeline.date), - })) - })) - } + })), + })), + }; } }