npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

nightingale-sunburst

v3.8.22

Published

A custom element that creates a sunburst visualization for a taxonomy tree.

Downloads

55

Readme

nightingale-sunburst

A custom element that creates a sunburst visualization for a taxonomy tree.

This comoponent inherits from LitElement and therefore all the methods and properties from LitElements are also available here.

Usage

<nightingale-sunburst side="600" show-label />

API reference

Attributes

side: Number

This will be use as width and height of the canvas and as the diameter of the biggest circle in the sunburst.

default: 100

weight-attribute: String

The attribute in the data nodes that will be use to calculate the proportions of the segments in the sunburst.

Note: All the nodes in the data parameter should have an attribute named as indicated in this attribute.

default: "value"

name-attribute: String

The attribute in the data nodes that will be use to for the labels of each segment.

Note: All the nodes in the data parameter should have an attribute named as indicated in this attribute.

default: "name"

id-attribute: String

The attribute in the data nodes that will be used as a unique ID for each node.

Note: All the nodes in the data parameter should have an attribute named as indicated in this attribute.

default: "id"

max-depth: Number

The number of levels that the sunburst tree will be displayed. If not Included the component will go through the whole hierarchy.

default: Infinity

font-size: Number

Font size for the labels drawn over the segments.

default: 10

show-label: Boolean

If true the canvas will include some labels on the top-left corner with the information of the current segment. The current segment is the last one the user clicked on, or if none, it would be the segment where the mouse is hovering.

default: false

weight-attribute-label: String

Label to show in the labels. Only relevant if show-label is true

default: "Value"

Properties

data: Object

The hierarchy that will be represented in the sunburst. It should be an object representing the root Node with an attribute children as an array of other Node objects.

  • Each Node should have a unique identifier in the property indicated in the attribute id-attribute.
  • Each Node should have a name tag in the property indicated in the attribute name-attribute, used to generate the labels.
  • Each Node should have a numerical value in the property indicated in the attribute weight-attribute representing the weight of that node in the tree.
activeSegment: Node [Read-Only]

The Node of the segment the is currrently hovered, or which has been clicked lastly.

holdSegment: Boolean [Read-Only]

Indicates if the activeSegment is been held from a recent click, and therefore is ignoring any other segment that has been currently hovered.

topOptions Array<String>

The list of options used on the first level of the sunburst, which define the color of its children segments.

default: ["bacteria", "viruses", "archaea", "eukaryota", null]

Methods

getColorBySuperKingdom(name: String): String

Returns a string representing the RGB color that is used for the given superkingdom string or any of its children.

renderCanvas(): void

You can use this method to manually trigger a render of the canvas.

Events

taxon-hover

Is dispatched when a segment is hovered or clicked onto. It includes the activeSegment data as its detail

Usage example:

sunburstElement.addEventListener("taxon-hover", (evt) => {
  console.log(evt.detail);
});