Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

technology-chart

Package Overview
Dependencies
Maintainers
1
Versions
5
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

technology-chart

Vanilla library for create technology radar chart using canvas API

  • 0.0.5
  • latest
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

Technology Chart

An technology radar chart implementation without any dependency inspired in Tought Works radar chart. Built-in with TypeScript. Important: Currently this library is in beta version.

Usage

This library is distributed by NPM (Node package manager). See the steps of installation and usage below.

Install

npm i technology-chart

Code implementation

The code implementation is simple and can be resumed in these steps:

  • HTML preparation
  • Configuration
  • Initialization
HTML Preparation

This library is created using Canvas HTML5 API, so you need an canvas element to initialize the chart.

<html>
    <head>
        [...]
        <!-- You can customize the canvas size with CSS -->
        <style>
            canvas#tech-radar {
                width: 400px;
                 /** By default, the canvas always be a square, using the maximum size [Math.max(width, height)]*/
            }
        </style>
    </head>
    <body>
        <!-- Add canvas element -->
        <canvas id="tech-radar"></canvas>
    </body>
</html>
Configuration

You should create an configuration object, used by TechnologyChart to create the chart inside canvas. All options provided by configuration object can be found in API Section.

const settings = {
    quadrants: ["Lang", "Data", "Frameworks", "Infra"], // Required
    rings: ["Adopt", "Trial", "Assess", "Hold"],
    data: [
        {
            quadrant: "Lang",
            ring: "Adopt",
            value: "TypeScript"
        }
    ]
}
Initialization

You prepare de canvas and de configuratio object, now we need pass they with argument of TechnologyChart.

const canvas = document.getElementById("tech-radar");
const settings = {/** The config object of step above */};

const chart = new TechnologyChart(canvas, settings);

FAQs

Package last updated on 21 May 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc