# eg-radar

> eg-radar is a JavaScript library for creating interactive radars

Latest version **0.1.0** (published 2024-01-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install eg-radar
pnpm add eg-radar
yarn add eg-radar
bun add eg-radar
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2024-01-27 |
| First published | 2024-01-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 123.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Edgars Garšneks |
| Maintainers | edgars.garsneks |
| Keywords | tech-radar, radar, d3 |

## Links

- npm: https://www.npmjs.com/package/eg-radar
- Repository: https://github.com/EdgarsGarsneks/eg-radar
- Homepage: https://github.com/EdgarsGarsneks/eg-radar#readme
- Issues: https://github.com/EdgarsGarsneks/eg-radar/issues
- npm.io page: https://npm.io/package/eg-radar

## Dependencies (3)

- [d3](https://npm.io/package/d3.md) ^7.8.5
- [lodash.merge](https://npm.io/package/lodash.merge.md) ^4.6.2
- [@types/lodash](https://npm.io/package/@types/lodash.md) ^4.14.202

## Alternatives

- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads

## Recent versions

- 0.1.0 (latest) — 2024-01-27

## README

# EG-Radar

<img src="radars.PNG" width="888">

eg-radar is a JavaScript library for creating interactive radars inspired by [Thoughtworks](https://www.thoughtworks.com/radar) and [Zalando Tech Radar](https://opensource.zalando.com/tech-radar/) technology radars. It provides many customization options to create radar that fits your needs and style preferences. You can look at [demo technology radar](https://github.com/EdgarsGarsneks/eg-tech-radar) built with eg-radar.

## Installation
Tech radar module can simply be installed using npm:
```sh
$ npm install eg-radar
```

## Usage
To use the module you need to import it in your project:
```javascript
import { EgRadar } from 'eg-radar';
```
Then, create a radar configuration object and pass it to the radar constructor:
```javascript
var radarConfig = {
    width: 700,
    sectors = [
        { "label": "Techniques"              },
        { "label": "Tools"                   },
        { "label": "Platforms"               },
        { "label": "Languages & Frameworks"  },
    ],
    rings = [
        { "label": "ADOPT" , "color": "green" },
        { "label": "TRIAL" , "color": "blue"  },
        { "label": "ASSESS", "color": "orange"},
        { "label": "HOLD"  , "color": "red"   }
    ],
    entries = [
         { "label": "Java",   "sector": 3, "ring": 1, "moved": 0 },
         { "label": "Angular","sector": 3, "ring": 2, "moved": 1 },
         { "label": "React",  "sector": 3, "ring": 2, "moved": -1},
         { "label": "AWS",    "sector": 2, "ring": 0, "moved": 0 }
    ],
    style: {
      showSectorLabels: true
    }
};

let radar = new EgRadar(radarConfig);
```

Finally to render the radar create `<svg>` element and pass element id to the render function:

```html
<svg id="myRadar"></svg>
```
```javascript
radar.render("myRadar")
```

## Radar Configuration
Radar configuration object has following properties:
| Property         | Type   | Description                                         |
| ---------------- | ------ | --------------------------------------------------- |
| width            | number | Width and Height of the radar                       |
| sectors          | array  | Array of sector configurations                      |
| sectors[].label  | string | Sector label                                        |
| sectors[].data   | any    | Custom sector data                                  |
| rings            | array  | Array of ring configurations objects                |
| rings[].label    | string | Ring label                                          |
| rings[].color    | string | Ring color                                          |
| entries          | array  | List of entries to display in radar                 |
| entries[].label  | string | Data label                                          |
| entries[].sector | number | Sector index                                        |
| entries[].ring   | number | Ring index                                          |
| entries[].moved  | number | Movement direction (1 - up, -1 down, 0 - no change) |
| entries[].data   | any    | Custom data for your needs                          |


## Style
Radar configuration object has following style properties:
| Property                     | Type    | Default                 | Description                                                                                    |
| ---------------------------- | ------- | ----------------------- | ---------------------------------------------------------------------------------------------- |
| style.seed                   | number  | Random value            | Seed for random number generator to have consistant generations, leave empty for random result |
| style.background             | string  | Transparent (#00000000) | Radar background color                                                                         |
| style.lineColor              | string  | gray                    | Radar line color                                                                               |
| style.font                   | string  | Arial, Helvetica        | Text font used across radar                                                                    |
| style.blips                  | object  |                         | Blip style configuration                                                                       |
| style.blips.r                | number  | 12                      | Blip radius                                                                                    |
| style.blips.offset           | number  | 15                      | Spacing between blips. Ignored if all blips cannot be spread out                               |
| style.blips.textColor        | string  | white                   | Blip text color                                                                                |
| style.blips.fontSize         | number  | 12                      | Blip text font size                                                                            |
| style.rings                  | object  |                         | Ring style configuration                                                                       |
| style.rings.fontSize         | number  | 30                      | Ring text font size                                                                            |
| style.rings.showLabels       | boolean | true                    | Show ring labels                                                                               |
| style.rings.showCurvedLabels | boolean | true                    | Renders ring label in arc. Long text may not be rendered                                       |
| style.rings.showBackground   | boolean | false                   | If enabled fills ring's background                                                             |
| style.sectors                | object  |                         | Sector style configuration                                                                     |
| style.sectors.fontSize       | number  | 30                      | Sector text font size                                                                          |
| style.sectors.textColor      | string  | black                   | Sector text color                                                                              |
| style.sectors.showLabels     | boolean | true                    | Show sector labels                                                                             |
| style.sectors.highlight      | boolean | true                    | Highlight sector on entry selection                                                            |
| style.tooltip                | object  |                         | Tooltip style configuration                                                                    |
| style.tooltip.enabled        | boolean | true                    | Enable tooltip on hover                                                                        |
| style.tooltip.background     | string  | black                   | Tooltip background color                                                                       |
| style.tooltip.textColor      | string  | white                   | Tooltip text color                                                                             |
| style.tooltip.fontSize       | number  | 15                      | Tooltip text font size                                                                         |


## Callbacks
Radar has following callback properties that can be registered using addEventListener function:

| Event         | Type                        | Description                                     |
| ------------- | --------------------------- | ----------------------------------------------- |
| selectEntry   | function(entry: RadarEntry) | Callback function called when entry is clicked  |
| selectSector  | function(sector: Sector)    | Callback function called when sector is clicked |
| hoverEntry    | function(entry: RadarEntry) | Callback function called when entry is hovered  |
| hoverEntryOut | function(entry: RadarEntry) | Callback function called when hover has ended   |

```js
this.radar.addEventListener('entrySelect', (entry: RadarEntry) => /* do something */); 
```

### Contributions

Contributions are welcome. Please read [CONTRIBUTING.md](https://github.com/EdgarsGarsneks/eg-radar/blob/main/CONTRIBUTING.md) for more information. <br><br>

Special thanks to all the people who have already contributed to this project! 
<a href="https://github.com/EdgarsGarsneks/eg-radar/graphs/contributors">
  <img src="https://contrib.rocks/image?repo=EdgarsGarsneks/eg-radar" />
</a>

---
_Source: https://npm.io/package/eg-radar · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._