npm package: @nospt/backstage-plugin-tech-radar-ng
Description: Backstage frontend plugin for the NOS Technology Radar
Author: NOS SGPS, S.A.
Latest version: 0.9.7

<div align="center">

<img src="https://raw.githubusercontent.com/nosportugal/backstage-plugin-tech-radar-ng/main/images/logo-frontend.png" alt="Tech Radar NG — Frontend" width="50%" />

# @nospt/backstage-plugin-tech-radar-ng

**Frontend plugin for the Tech Radar NG suite.**

[![License](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](../../LICENSE) [![Backstage](https://img.shields.io/badge/Backstage-New%20Frontend%20System-blueviolet)](https://backstage.io) [![Beta](https://img.shields.io/badge/status-beta-orange)](#)

</div>

> [!WARNING] > **BETA** — This plugin is under active development. APIs, components, and configuration options may change between versions.

---

## Overview

This package provides the **frontend UI** for the Tech Radar NG Backstage plugin suite. It includes:

- **Radar Visualization** — Interactive SVG radar with rings, segments, color-coded blips, and hover tooltips.
- **Back Office UI** — Paginated, filterable candidate table with batch classify/promote workflow.
- **Navigation Items** — Auto-registered sidebar entries for both the Radar and Back Office pages.
- **API Client** — A `TechRadarClient` Utility API to communicate with the backend REST endpoints.

Built exclusively with the [New Frontend System](https://backstage.io/docs/frontend-system/) using `PageBlueprint`, `NavItemBlueprint`, and `ApiBlueprint`.

---

## Installation

From your Backstage root:

```bash
yarn --cwd packages/app add @nospt/backstage-plugin-tech-radar-ng
```

The plugin is **auto-discovered** via the New Frontend System — no manual route registration is needed.

### Peer Dependencies

Ensure your Backstage app provides:

- `react` ^16.13.1 || ^17.0.0 || ^18.0.0
- `react-dom` ^16.13.1 || ^17.0.0 || ^18.0.0
- `react-router-dom` ^6.0.0

---

## Pages & Routes

| Page            | Path                        | Description                             |
| --------------- | --------------------------- | --------------------------------------- |
| **Radar**       | `/tech-radar-ng/radar`      | Interactive radar visualization         |
| **Back Office** | `/tech-radar-ng/backoffice` | Candidate management and classification |

Both pages appear automatically in the sidebar navigation.

---

## API

The plugin registers a `TechRadarClient` Utility API (`techRadarApiRef`) that exposes:

| Method                      | Description                                   |
| --------------------------- | --------------------------------------------- |
| `getQuadrants()`            | Fetch all radar segments                      |
| `getRings()`                | Fetch all radar rings                         |
| `getCandidates(options)`    | List candidates with pagination and filtering |
| `classifyCandidates(patch)` | Batch-update candidate classifications        |
| `updateRings(patch)`        | Update ring definitions                       |

---

## Development

```bash
cd plugins/tech-radar-ng
yarn start       # Start dev server with hot reload
yarn test        # Run tests
yarn lint        # Lint
yarn build       # Build for production
```

---

## Related Packages

| Package                                                                     | Description                                   |
| --------------------------------------------------------------------------- | --------------------------------------------- |
| [`@nospt/backstage-plugin-tech-radar-ng-backend`](../tech-radar-ng-backend) | Backend — Discovery engine, metrics, REST API |
| [`@nospt/backstage-plugin-tech-radar-ng-common`](../tech-radar-ng-common)   | Shared types, Zod schemas, and enums          |

---

## License

[Apache License 2.0](../../LICENSE)