Reports show foamtree link about webpack-bundle-analyzer HOT 6 CLOSED

Neato, that should make things easier. Here's just about the worst possible implementation of a Treemap you can do in HTML (abusing the heck out of flexbox) I made just to play around with the concept: https://codepen.io/simonbuchan/pen/KZKzww?editors=0110

The performance is nightmarish as it's bouncing back and forward between layout: I think for N leafs it would run layout O(N^3) times :), and it doesn't help DOM operations are already slow.

I'll take some time later to move the layout to JS and render in SVG or whatever, which I expect to be fast enough to animate.

from webpack-bundle-analyzer.

Carrot Search doesn't allow to use unbranded version of FoamTree in opensource projects and I couldn't find any suitable alternative to it.

@jdalton Maybe you know some?

from webpack-bundle-analyzer.

I don't know but maybe @anvaka knows some.

from webpack-bundle-analyzer.

Well, if anybody is bored by FoamTree logo in analyzer report and knows any good OSS alternative it feel free to comment here and I'll reopen it.

from webpack-bundle-analyzer.

If this still interests anybody, the name of this type of graph is a "Treemap" (confusingly, also occasionally used by people implementing a Map<> type with a tree structure). Googling "treemap js" comes up with several options:

• https://github.com/d3/d3-hierarchy/blob/master/README.md#treemap
• https://developers.google.com/chart/interactive/docs/gallery/treemap
• http://jstreemap.com/
• https://plot.ly/javascript/treemaps/

etc....

And it's not too complex to implement the basics from scratch either, if none of those quite work for you:

• Convert your tree into a binary tree, probably with Huffman (this is just keep joining the two smallest)
• At each level, split the available area in proportion to the tree values either horizontally or vertically, preferring the one that has child aspect ratios closer to square (or golden ratio if you're into that)
• Then all the real details, of course: visually separating both siblings and levels of hierarchy (radial gradients and colors are popular), rendering labels, tooltips, etc.

I will say the current implementation is a bit misleading in the size of leafs with how it displays paths, but that seems like it might be solvable without throwing the whole thing out.

Not going to promise anything (my attention span is pretty short!) but I'm currently interested if you know what you're after.

from webpack-bundle-analyzer.

@simonbuchan if you'd like to tackle this, one way of trying out a new treemap renderer could be to start off from where #97 is currently at. See #102 on an example of how I allowed the customization of the reporter for that upcoming version.

Would you be interested? I'd be curious to see a new pull request against version-3 branch for anything you could whip up — if it turns out that we wouldn't want to replace the current treemap, we could provide your treemap visualization as an alternative still. Or you could even publish such a reporter yourself.

from webpack-bundle-analyzer.