EG-Radar

eg-radar is a JavaScript library for creating interactive radars inspired by Thoughtworks and Zalando 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 built with eg-radar.

Installation

Tech radar module can simply be installed using npm:

$ npm install eg-radar

Usage

To use the module you need to import it in your project:

import { EgRadar } from 'eg-radar';

Then, create a radar configuration object and pass it to the radar constructor:

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:

<svg id="myRadar"></svg>

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 |

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

Contributions

Contributions are welcome. Please read CONTRIBUTING.md for more information.

Special thanks to all the people who have already contributed to this project!