vasturiano / treemap-chart Goto Github PK

Hey, have you an react exemple implementation ?
thanks

I tried running the following commands:-

1. npm install @rollup/plugin-babel --save-dev
2. npm run build

Can you please tell us the step to run this project so that we can get a zip file that we can import into Thingworx.
It will great if you can add this in your README.md.

Is your feature request related to a problem? Please describe.
I would like to have the option to add padding around the entire block because now the name of the parent block is behind the child block, so I would like to move the name top left (which is possible with CSS only) and then add padding to the child block, so the parent's name is visible.

Describe the solution you'd like
Right now the padding is added only to the bottom side, I would like to have the option to add padding to all 4 sides.
(I could also try to modify this and submit a PR if that works)

Thank you!

Is your feature request related to a problem? Please describe.
Hi! Testing the demo quickly - a bit frustrated that there is no clear & easy way to zoom out to previous view.

Describe the solution you'd like
Implement back support to move to previous zoom.

Describe alternatives you've considered
Zoom out with mouse scroller, etc. works terrible - as treemap and web page competes for handling the scroll events and behavior is then as a result inconsistent and unreliable. Also, it is timeconsuming and not precise as I often quite specifically want to revert back to previous view, not actually do any free zooming out - there difference in intention and need.

Additional context
N/A

Maybe this is up to the consumer of the widget? Sorry if this has already been addressed.

Is your feature request related to a problem? Please describe.

I'd like to have a way to apply formatting to individual rendered elements.

Describe the solution you'd like

I'd like to have a .className(node) function that lets me apply classes to the SVG that is being rendered for each node.

Describe alternatives you've considered

I'm doing this now like this:

  setTimeout(() => {
    const rectElements = document.querySelectorAll('#chart rect')
    // Do stuff with rectElements
  }, 0)

However, it's tricky, since I can't easily introspect the DOM elements to determine which ones correspond to which nodes in the tree.

As an alternative to emitting class names, there could be a visitor function that receives both the rendered DOM node and the data node it came from.

The setTimeout is also a bit icky.

Additional context

If this makes sense to you, I might be able to contribute it at some point in the future.

Is your feature request related to a problem? Please describe.

I'd like to display some navigation elements on top of the chart, but only when it finishes rendering.

Describe the solution you'd like

An .animationFinished() callback.

Describe alternatives you've considered

I'm using setTimeout(() => {}, 800) right now, though it would be better encapsulation if I weren't pasting this number from the component's source code.

Additional context
N/A

Hi,

I am testing the time needed to visualize large sets of data using this code.
Is it correct measuring it as:

var t1 = performance.now();
    Treemap()
      .data(genNode())
      .color(d => color(d.name))
      .showLabels(false)
      .minBlockArea(8) 
      .excludeRoot(true)
      .tooltipContent((d, node) => `Size: <i>${node.value}</i>`)
      (document.getElementById('chart'));

 var t2 = performance.now();
 console.log(t2 - t1);

Does anything run asynchronously in this case, since I am not sure I receive rational times?

Thank you in advance.