add possibiltiy to use icons

README.md

@@ -16,6 +16,7 @@ libraries is its unique feature that allows users to customize the number of rin
 * integrate in your own code by only installing and using this library
 * variable number of rings
 * variable number of slices / quadrants
+* use [nerdfonts icons](https://www.nerdfonts.com/cheat-sheet)
 
 ## 📦 Getting started
 
@@ -84,6 +85,24 @@ libraries is its unique feature that allows users to customize the number of rin
 
 More examples are provided under the `src` folder in this repository.
 
+##  Icons
+
+You can also use icons instead of numbers for the blips. Go to [nerdfonts](https://www.nerdfonts.com/cheat-sheet) and choose
+an icon. Afterwards copy the hexcode to your config and add the `\u` as a prefix. So in this example the hexcode of the react logo is
+`e7ba`, add the prefix `\u` and paste it into the blips configuration. **Important: Only the 4 digit hexcodes are working**:
+
+```typescript
+...
+  slices: [
+    {
+      name: "Frameworks & Ecosystems",
+      blipsByRing: {
+        adopt: [{ name: "React", icon: "\ue7ba" }],
+      },
+    },
+...
+```
+
 ## ⚡️ Local Development
 
 1. Install dependencies with pnpm

lib/Techradar.tsx

@@ -1,4 +1,3 @@
-import "./radar.css";
 import { useEffect, useRef } from "react";
 import createTechradar from "./createTechradar";
 import { TechradarData, TechradarOptions } from "./types";

lib/createTechradar.ts

@@ -129,13 +129,14 @@ const createTechradar = (
     .append("text")
     .style("pointer-events", "none")
     .attr("dy", 4)
+    .attr("class", (blip) => blip.icon != null ? "nf" : "")
     .attr("font-family", "Arial, Helvetica")
-    .attr("font-size", "10px")
+    .attr("font-size", `${vizData.global.blipRadius}px`)
     .attr("pointer-events", "none")
     .attr("user-select", "none")
     .attr("text-anchor", "middle")
     .attr("fill", blip => vizData.rings[blip.ringIndex].textColor)
-    .text(blip => blip.blipIndex);
+    .text(blip => blip.icon ? blip.icon : blip.blipIndex);
 
   let tooltip: Tooltip;
   if (blipTooltipEnabled) {
@@ -169,7 +170,7 @@ const createTechradar = (
       .selectAll(`#slice-${sliceIndex}`)
       .append("text")
       .attr("font-family", "Arial, Helvetica")
-      .attr("font-size", "18px")
+      .style("font-size", `${vizData.global.blipRadius + 6}px`)
       .attr("font-weight", "bold")
       .attr("fill", vizData.global.mainColor)
       .text(vizData.slices[sliceIndex].name);
@@ -186,7 +187,7 @@ const createTechradar = (
         .selectAll(`#slice-${sliceIndex}`)
         .append("text")
         .attr("font-family", "Arial, Helvetica")
-        .attr("font-size", "12px")
+        .style("font-size", `${vizData.global.blipRadius + 1}px`)
         .attr("font-weight", "bold")
         .attr("fill", vizData.rings[ringIndex].color)
         .attr("dx", counter % 2 === 0 ? leftCoords.x : rightCoords.x)
@@ -204,19 +205,10 @@ const createTechradar = (
         .attr("href", blip => blip.url ? blip.url : "#")
         .attr("target", blip => blip.url && options?.linksInNewTabs ? "_blank" : null)
         .append("text")
-        .style("font-family", "Arial, Helvetica")
-        .style("font-size", "11px")
+        .attr("font-family", "Arial, Helvetica")
+        .style("font-size", `${vizData.global.blipRadius}px`)
         .attr("id", blip => `legendItem-${blip.blipIndex}`)
         .attr("fill", vizData.global.mainColor)
-        .attr("dx", counter % 2 === 0 ? leftCoords.x : rightCoords.x)
-        .attr("dy", () => {
-          const step = 15;
-          if (counter % 2 === 0) {
-            return leftCoords.y += step;
-          } else {
-            return rightCoords.y += step;
-          }
-        })
         .on("mouseover", (_, blip) => {
           highlightLegendItem(blip, vizData.rings[ringIndex].color)
 
@@ -230,7 +222,20 @@ const createTechradar = (
           unhighlightLegendItem(blip, vizData.global.mainColor)
           tooltip.hide();
         })
-        .text(blip => `${blip.blipIndex}. ${blip.name}`);
+        .attr("dx", counter % 2 === 0 ? leftCoords.x : rightCoords.x)
+        .attr("dy", () => {
+          const step = 15;
+          if (counter % 2 === 0) {
+            return leftCoords.y += step;
+          } else {
+            return rightCoords.y += step;
+          }
+        })
+        .attr("class", (blip) => blip.icon != null ? "nf" : "")
+        .text(blip => `${blip.icon ? blip.icon : blip.blipIndex}. `)
+        .append("tspan")
+        .style("font-family", "Arial, Helvetica")
+        .text(blip => blip.name)
 
       if (counter % 2 === 0) {
         leftCoords.y += 30;
@@ -258,7 +263,7 @@ const createTechradar = (
     .attr("xml:space", "preserve")
     .style("font-family", "Arial, Helvetica")
     .attr("fill", vizData.global.mainColor)
-    .style("font-size", "10px");
+    .attr("font-size", `${vizData.global.blipRadius}px`)
 
   // Position techradar and labels
   techradar

lib/generateTechradarVizData.ts

@@ -22,7 +22,7 @@ const generateTechradarVizData = (
   data: TechradarData,
   options?: TechradarVizOptions
 ): TechradarVizData => {
-  const { radarSize = 900, blipRadius = 10, colorScheme = 'white' } = options || {};
+  const { radarSize = 900, blipRadius = 12, colorScheme = 'white' } = options || {};
   const mainColor = colorScheme === 'white' ? 'black' : 'white';
 
   //setup base scales

lib/main.ts

@@ -1,4 +1,5 @@
 import { Techradar } from "./Techradar";
+import "./radar.css";
 
 import type {
   TechradarData,

lib/radar.css

@@ -0,0 +1 @@
+@import "https://www.nerdfonts.com/assets/css/webfont.css"

lib/types.ts

@@ -12,6 +12,7 @@ export type TechradarBlipData = {
   name: string,
   url?: string,
   state?: TechradarBlipState,
+  icon?: string,
 };
 
 export type TechradarSliceData = {
@@ -50,6 +51,7 @@ export type TechradarBlipVizData = TechradarBlipData & {
   ringIndex: number,
   x: number,
   y: number,
+  icon?: string,
 };
 
 export type Anchor = {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@chrishrb/techradar",
   "description": "Create your own technology radar, with flexibility to customize the radar, the quadrants and the rings.",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "private": false,
   "prepublishOnly": "pnpm run build",
   "type": "module",

src/App.tsx

@@ -10,6 +10,7 @@ function App() {
   return (
     <>
       <div style={{ paddingLeft: "20px" }}>
+        <i className="fa-brands fa-facebook"></i>
         <div style={{ paddingBottom: "10px" }}>
           <h2 style={{ fontFamily: "Arial, Helvetica", fontSize: "20px", fontWeight: "bold", marginBottom: "0px" }}>Choose an example:</h2>
           <button style={{ margin: "5px", marginLeft: "0px" }} onClick={() => setExample(example1)}>Example 1</button>

src/examples/example1.ts

@@ -12,15 +12,15 @@ const data: TechradarData = {
     {
       name: "Frameworks & Ecosystems",
       blipsByRing: {
-        adopt: [{ name: "React" }],
+        adopt: [{ name: "React", icon: "\ue7ba" }],
         trial: [{ name: "Vue" }, { name: "Angular (2+)" }],
         hold: [{ name: "AngularJS (1)" }, { name: "jQuery" }],
       },
     },
     {
       name: "Linting & Formatting",
       blipsByRing: {
-        adopt: [{ name: "ESLint" }, { name: "Prettier" }],
+        adopt: [{ name: "ESLint", icon: "\ue655" }, { name: "Prettier" }],
         assess: [{ name: "AirBNB Eslint Config" }],
       },
     },
@@ -34,7 +34,7 @@ const data: TechradarData = {
     {
       name: "Infrastucture",
       blipsByRing: {
-        adopt: [{ name: "AWS CodePipeline" }],
+        adopt: [{ name: "AWS CodePipeline", icon: "\uf0ef" }],
         trial: [{ name: "Jenkins" }],
         hold: [{ name: "Bamboo", state: 'down' }, { name: "TeamCity" }],
       },