From 17fdd1bb4d101470e2c4ea0474b1bd85abb07433 Mon Sep 17 00:00:00 2001
From: Joost Hofman <joost.hofman@ah.nl>
Date: Mon, 4 Jul 2022 12:18:10 +0200
Subject: [PATCH] Update tech radar docs on using an external datasource

Signed-off-by: Joost Hofman <joost.hofman@ah.nl>
---
 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<TechRadarLoaderResponse> {
@@ -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 `<svg>` 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