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!