Techradar

This is a TypeScript React component for displaying a tech radar, with customizable quadrants, rings, and items.

Contribution

To contribute to techradar-component, report issues on GitHub with details and steps to reproduce. For pull requests, follow coding guidelines, describe your changes, and ensure tests pass. Your participation helps improve the project for the community.

Installation

To install, run:

npm install techradar-component

or:

yarn add techradar-component

Usage

To use, import the TechRadar component from techradar-component and provide the necessary props:

import React from 'react';
import { TechRadar } from 'techradar-component';


type RadarProps = {
  quadrants: string[];
  rings?: string[];
  data?: {
    id: number;
    name: string;
    quadrant: string;
    ring: string;
  }[]
  width?: number;
  fontSize?: number;
  itemFontSize?: number;
  colorScaleIndex?: number;
  radiusDiminish?: number;
}

const setup: RadarProps  = {
    rings: ['adopt', 'trial', 'assess', 'hold'],
    quadrants: ['tools', 'techniques', 'platforms', 'languages'],
    data: [
      {
        id: 1,
        name: 'D3',
        quadrant: 'tools',
        ring: 'assess',
      },
      {
        id: 2,
        name: 'TypeScript',
        quadrant: 'languages',
        ring: 'trial',
      },
      {
        id: 3,
        name: 'Storybook',
        quadrant: 'tools',
        ring: 'adopt',
      },
    ],
  }

const MyComponent = () => {
  return (
    <TechRadar
      {...setup}
    />
  );
};

Props

| Prop | Type | Required | Default value | Description | | --- | --- | --- | --- | --- | | quadrants | string[] | Yes | - | An array of strings representing the quadrants of the radar chart | | rings | string[] | No | - | An array of strings representing the rings of the radar chart | | data | DataType[] | No | - | An array of objects with the following properties: id, name, quadrant, ring | | width | number | No | 700px | The width of the TechRadar component | | fontSize | number | No | 12px | The radius of the radar chart | | itemFontSize | number | No | 12px | Item size differentiation than quadrant titles | | colorScaleIndex | number | No | 200 | The item fontSize | | radiusDiminish | number | No | 2 | The factor in which the rings are equal |

License

This component is licensed under the MIT License.