You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Socket
Socket
Sign inDemoInstall

webtreemap-cdt

Package Overview
Dependencies
Maintainers
2
Versions
6
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

webtreemap-cdt

treemap visualization


Version published
Weekly downloads
366
increased by77.67%
Maintainers
2
Created
Weekly downloads
 

Readme

Source

webtreemap

Fork of https://github.com/evmar/webtreemap

Usage

Web

The data format is a tree of Node, where each node is an object in the shape described at the top of tree.ts.

Add the contents of [src/styles-to-add.css] to your stylesheets.

<script src='webtreemap.js'></script>
<script>
// Container must have its own width/height.
const container = document.getElementById('myContainer');
// See typings for full API definition.
webtreemap.render(container, data, options);
Options
OptionTypeDefault
padding[number, number, number, number][14, 3, 3, 3]
lowerBoundnumber0.1
applyMutations(node: Node) => void() => void
caption(node: Node) => string(node) => node.id
showNode(node: Node, width: number, height: number) => boolean(_, width, height) => (width > 20) && (height >= options.padding[0])
showChildren(node: Node, width: number, height: number) => boolean(_, width, height) => (width > 40) && (height > 40)
OptionDescription
paddingIn order: padding-top, padding-right, padding-bottom, padding-left of each node
lowerBoundLower bound of ratio that determines how many children can be displayed inside of a node. Example with a lower bound of 0.1: the total area taken up by displaying child nodes of any given node cannot be less than 10% of the area of its parent node.
applyMutationsA function that exposes a node as an argument after it's dom element has been assigned. Use this to add inline styles and classes. Example: (node) => { node.dom.style.color = 'blue' }
captionA function that takes a node as an argument and returns a string that is used to display as the caption for the node passed in.
showNodeA function that takes a node, its width, and its height, and returns a boolean that determines if that node should be displayed. Fires after showChildren.
showChildrenA function that takes a node, its width, and its height, and returns a boolean that determines if that node's children should be displayed. Fires before showNode.

Development

The modules of webtreemap can be used both from the web and from the command line, so the build has two layers. The command line app embeds the output of the build into its output so it's a bit confusing.

Run yarn run build to compile TS -> build/JS (as esm) and then run rollup to make the dist (iife).

Run yarn run build:demo to create a public/index.html demo page.

Run yarn watch to use entr to do build:demo on a watchloop.

License

webtreemap is licensed under the Apache License v2.0. See LICENSE.txt for the complete license text.

Also

Keywords

FAQs

Package last updated on 04 Jun 2021

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

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc