techradar-component v0.2.5

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

License

This component is licensed under the MIT License.