@tanstack/react-location-jsurl
Version:
See https://react-location.tanstack.com/tools/jsurl
1,275 lines (1,129 loc) • 96.2 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>RollUp Visualizer</title>
<style>
:root {
--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--background-color: #f7eedf;
--text-color: #333;
}
@media (prefers-color-scheme: dark) {
:root {
--background-color: #2b2d42;
--text-color: #edf2f4;
}
}
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
html {
background-color: var(--background-color);
color: var(--text-color);
font-family: var(--font-family);
}
body {
padding: 0;
margin: 0;
}
html,
body {
height: 100%;
width: 100%;
overflow: hidden;
}
body {
display: flex;
flex-direction: column;
}
svg {
vertical-align: middle;
width: 100%;
height: 100%;
max-height: 100vh;
}
main {
flex-grow: 1;
height: 100vh;
padding: 20px;
}
.tooltip {
position: absolute;
z-index: 1070;
border: 2px solid;
border-radius: 5px;
padding: 5px;
white-space: nowrap;
font-size: 0.875rem;
background-color: var(--background-color);
color: var(--text-color);
}
.tooltip-hidden {
visibility: hidden;
opacity: 0;
}
.sidebar {
position: fixed;
top: 0;
left: 0;
right: 0;
display: flex;
flex-direction: row;
font-size: 0.7rem;
align-items: center;
margin: 0 50px;
height: 20px;
}
.size-selectors {
display: flex;
flex-direction: row;
align-items: center;
}
.size-selector {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-right: 1rem;
}
.size-selector input {
margin: 0 0.3rem 0 0;
}
.filters {
flex: 1;
display: flex;
flex-direction: row;
align-items: center;
}
.module-filters {
display: flex;
}
.module-filter {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
flex: 1;
}
.module-filter input {
flex: 1;
height: 1rem;
padding: 0.01rem;
font-size: 0.7rem;
margin-left: 0.3rem;
}
.module-filter + .module-filter {
margin-left: 0.5rem;
}
</style>
</head>
<body>
<main></main>
<script>
/*<!--*/
var drawChart = (function (exports) {
'use strict';
var n,l$1,u$1,t$1,r$1,o$2,f$1,e$2={},c$1=[],s$1=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;function a$1(n,l){for(var u in l)n[u]=l[u];return n}function h$1(n){var l=n.parentNode;l&&l.removeChild(n);}function v$1(l,u,i){var t,r,o,f={};for(o in u)"key"==o?t=u[o]:"ref"==o?r=u[o]:f[o]=u[o];if(arguments.length>2&&(f.children=arguments.length>3?n.call(arguments,2):i),"function"==typeof l&&null!=l.defaultProps)for(o in l.defaultProps)void 0===f[o]&&(f[o]=l.defaultProps[o]);return y$1(l,f,t,r,null)}function y$1(n,i,t,r,o){var f={type:n,props:i,key:t,ref:r,__k:null,__:null,__b:0,__e:null,__d:void 0,__c:null,__h:null,constructor:void 0,__v:null==o?++u$1:o};return null==o&&null!=l$1.vnode&&l$1.vnode(f),f}function d$1(n){return n.children}function _(n,l){this.props=n,this.context=l;}function k$1(n,l){if(null==l)return n.__?k$1(n.__,n.__.__k.indexOf(n)+1):null;for(var u;l<n.__k.length;l++)if(null!=(u=n.__k[l])&&null!=u.__e)return u.__e;return "function"==typeof n.type?k$1(n):null}function b$1(n){var l,u;if(null!=(n=n.__)&&null!=n.__c){for(n.__e=n.__c.base=null,l=0;l<n.__k.length;l++)if(null!=(u=n.__k[l])&&null!=u.__e){n.__e=n.__c.base=u.__e;break}return b$1(n)}}function m$1(n){(!n.__d&&(n.__d=!0)&&t$1.push(n)&&!g$1.__r++||o$2!==l$1.debounceRendering)&&((o$2=l$1.debounceRendering)||r$1)(g$1);}function g$1(){for(var n;g$1.__r=t$1.length;)n=t$1.sort(function(n,l){return n.__v.__b-l.__v.__b}),t$1=[],n.some(function(n){var l,u,i,t,r,o;n.__d&&(r=(t=(l=n).__v).__e,(o=l.__P)&&(u=[],(i=a$1({},t)).__v=t.__v+1,j$1(o,t,i,l.__n,void 0!==o.ownerSVGElement,null!=t.__h?[r]:null,u,null==r?k$1(t):r,t.__h),z(u,t),t.__e!=r&&b$1(t)));});}function w$1(n,l,u,i,t,r,o,f,s,a){var h,v,p,_,b,m,g,w=i&&i.__k||c$1,A=w.length;for(u.__k=[],h=0;h<l.length;h++)if(null!=(_=u.__k[h]=null==(_=l[h])||"boolean"==typeof _?null:"string"==typeof _||"number"==typeof _||"bigint"==typeof _?y$1(null,_,null,null,_):Array.isArray(_)?y$1(d$1,{children:_},null,null,null):_.__b>0?y$1(_.type,_.props,_.key,null,_.__v):_)){if(_.__=u,_.__b=u.__b+1,null===(p=w[h])||p&&_.key==p.key&&_.type===p.type)w[h]=void 0;else for(v=0;v<A;v++){if((p=w[v])&&_.key==p.key&&_.type===p.type){w[v]=void 0;break}p=null;}j$1(n,_,p=p||e$2,t,r,o,f,s,a),b=_.__e,(v=_.ref)&&p.ref!=v&&(g||(g=[]),p.ref&&g.push(p.ref,null,_),g.push(v,_.__c||b,_)),null!=b?(null==m&&(m=b),"function"==typeof _.type&&_.__k===p.__k?_.__d=s=x$1(_,s,n):s=P(n,_,p,w,b,s),"function"==typeof u.type&&(u.__d=s)):s&&p.__e==s&&s.parentNode!=n&&(s=k$1(p));}for(u.__e=m,h=A;h--;)null!=w[h]&&("function"==typeof u.type&&null!=w[h].__e&&w[h].__e==u.__d&&(u.__d=k$1(i,h+1)),N(w[h],w[h]));if(g)for(h=0;h<g.length;h++)M(g[h],g[++h],g[++h]);}function x$1(n,l,u){for(var i,t=n.__k,r=0;t&&r<t.length;r++)(i=t[r])&&(i.__=n,l="function"==typeof i.type?x$1(i,l,u):P(u,i,i,t,i.__e,l));return l}function P(n,l,u,i,t,r){var o,f,e;if(void 0!==l.__d)o=l.__d,l.__d=void 0;else if(null==u||t!=r||null==t.parentNode)n:if(null==r||r.parentNode!==n)n.appendChild(t),o=null;else {for(f=r,e=0;(f=f.nextSibling)&&e<i.length;e+=2)if(f==t)break n;n.insertBefore(t,r),o=r;}return void 0!==o?o:t.nextSibling}function C(n,l,u,i,t){var r;for(r in u)"children"===r||"key"===r||r in l||H(n,r,null,u[r],i);for(r in l)t&&"function"!=typeof l[r]||"children"===r||"key"===r||"value"===r||"checked"===r||u[r]===l[r]||H(n,r,l[r],u[r],i);}function $(n,l,u){"-"===l[0]?n.setProperty(l,u):n[l]=null==u?"":"number"!=typeof u||s$1.test(l)?u:u+"px";}function H(n,l,u,i,t){var r;n:if("style"===l)if("string"==typeof u)n.style.cssText=u;else {if("string"==typeof i&&(n.style.cssText=i=""),i)for(l in i)u&&l in u||$(n.style,l,"");if(u)for(l in u)i&&u[l]===i[l]||$(n.style,l,u[l]);}else if("o"===l[0]&&"n"===l[1])r=l!==(l=l.replace(/Capture$/,"")),l=l.toLowerCase()in n?l.toLowerCase().slice(2):l.slice(2),n.l||(n.l={}),n.l[l+r]=u,u?i||n.addEventListener(l,r?T:I,r):n.removeEventListener(l,r?T:I,r);else if("dangerouslySetInnerHTML"!==l){if(t)l=l.replace(/xlink[H:h]/,"h").replace(/sName$/,"s");else if("href"!==l&&"list"!==l&&"form"!==l&&"tabIndex"!==l&&"download"!==l&&l in n)try{n[l]=null==u?"":u;break n}catch(n){}"function"==typeof u||(null!=u&&(!1!==u||"a"===l[0]&&"r"===l[1])?n.setAttribute(l,u):n.removeAttribute(l));}}function I(n){this.l[n.type+!1](l$1.event?l$1.event(n):n);}function T(n){this.l[n.type+!0](l$1.event?l$1.event(n):n);}function j$1(n,u,i,t,r,o,f,e,c){var s,h,v,y,p,k,b,m,g,x,A,P=u.type;if(void 0!==u.constructor)return null;null!=i.__h&&(c=i.__h,e=u.__e=i.__e,u.__h=null,o=[e]),(s=l$1.__b)&&s(u);try{n:if("function"==typeof P){if(m=u.props,g=(s=P.contextType)&&t[s.__c],x=s?g?g.props.value:s.__:t,i.__c?b=(h=u.__c=i.__c).__=h.__E:("prototype"in P&&P.prototype.render?u.__c=h=new P(m,x):(u.__c=h=new _(m,x),h.constructor=P,h.render=O),g&&g.sub(h),h.props=m,h.state||(h.state={}),h.context=x,h.__n=t,v=h.__d=!0,h.__h=[]),null==h.__s&&(h.__s=h.state),null!=P.getDerivedStateFromProps&&(h.__s==h.state&&(h.__s=a$1({},h.__s)),a$1(h.__s,P.getDerivedStateFromProps(m,h.__s))),y=h.props,p=h.state,v)null==P.getDerivedStateFromProps&&null!=h.componentWillMount&&h.componentWillMount(),null!=h.componentDidMount&&h.__h.push(h.componentDidMount);else {if(null==P.getDerivedStateFromProps&&m!==y&&null!=h.componentWillReceiveProps&&h.componentWillReceiveProps(m,x),!h.__e&&null!=h.shouldComponentUpdate&&!1===h.shouldComponentUpdate(m,h.__s,x)||u.__v===i.__v){h.props=m,h.state=h.__s,u.__v!==i.__v&&(h.__d=!1),h.__v=u,u.__e=i.__e,u.__k=i.__k,u.__k.forEach(function(n){n&&(n.__=u);}),h.__h.length&&f.push(h);break n}null!=h.componentWillUpdate&&h.componentWillUpdate(m,h.__s,x),null!=h.componentDidUpdate&&h.__h.push(function(){h.componentDidUpdate(y,p,k);});}h.context=x,h.props=m,h.state=h.__s,(s=l$1.__r)&&s(u),h.__d=!1,h.__v=u,h.__P=n,s=h.render(h.props,h.state,h.context),h.state=h.__s,null!=h.getChildContext&&(t=a$1(a$1({},t),h.getChildContext())),v||null==h.getSnapshotBeforeUpdate||(k=h.getSnapshotBeforeUpdate(y,p)),A=null!=s&&s.type===d$1&&null==s.key?s.props.children:s,w$1(n,Array.isArray(A)?A:[A],u,i,t,r,o,f,e,c),h.base=u.__e,u.__h=null,h.__h.length&&f.push(h),b&&(h.__E=h.__=null),h.__e=!1;}else null==o&&u.__v===i.__v?(u.__k=i.__k,u.__e=i.__e):u.__e=L(i.__e,u,i,t,r,o,f,c);(s=l$1.diffed)&&s(u);}catch(n){u.__v=null,(c||null!=o)&&(u.__e=e,u.__h=!!c,o[o.indexOf(e)]=null),l$1.__e(n,u,i);}}function z(n,u){l$1.__c&&l$1.__c(u,n),n.some(function(u){try{n=u.__h,u.__h=[],n.some(function(n){n.call(u);});}catch(n){l$1.__e(n,u.__v);}});}function L(l,u,i,t,r,o,f,c){var s,a,v,y=i.props,p=u.props,d=u.type,_=0;if("svg"===d&&(r=!0),null!=o)for(;_<o.length;_++)if((s=o[_])&&"setAttribute"in s==!!d&&(d?s.localName===d:3===s.nodeType)){l=s,o[_]=null;break}if(null==l){if(null===d)return document.createTextNode(p);l=r?document.createElementNS("http://www.w3.org/2000/svg",d):document.createElement(d,p.is&&p),o=null,c=!1;}if(null===d)y===p||c&&l.data===p||(l.data=p);else {if(o=o&&n.call(l.childNodes),a=(y=i.props||e$2).dangerouslySetInnerHTML,v=p.dangerouslySetInnerHTML,!c){if(null!=o)for(y={},_=0;_<l.attributes.length;_++)y[l.attributes[_].name]=l.attributes[_].value;(v||a)&&(v&&(a&&v.__html==a.__html||v.__html===l.innerHTML)||(l.innerHTML=v&&v.__html||""));}if(C(l,p,y,r,c),v)u.__k=[];else if(_=u.props.children,w$1(l,Array.isArray(_)?_:[_],u,i,t,r&&"foreignObject"!==d,o,f,o?o[0]:i.__k&&k$1(i,0),c),null!=o)for(_=o.length;_--;)null!=o[_]&&h$1(o[_]);c||("value"in p&&void 0!==(_=p.value)&&(_!==y.value||_!==l.value||"progress"===d&&!_)&&H(l,"value",_,y.value,!1),"checked"in p&&void 0!==(_=p.checked)&&_!==l.checked&&H(l,"checked",_,y.checked,!1));}return l}function M(n,u,i){try{"function"==typeof n?n(u):n.current=u;}catch(n){l$1.__e(n,i);}}function N(n,u,i){var t,r;if(l$1.unmount&&l$1.unmount(n),(t=n.ref)&&(t.current&&t.current!==n.__e||M(t,null,u)),null!=(t=n.__c)){if(t.componentWillUnmount)try{t.componentWillUnmount();}catch(n){l$1.__e(n,u);}t.base=t.__P=null;}if(t=n.__k)for(r=0;r<t.length;r++)t[r]&&N(t[r],u,"function"!=typeof n.type);i||null==n.__e||h$1(n.__e),n.__e=n.__d=void 0;}function O(n,l,u){return this.constructor(n,u)}function S(u,i,t){var r,o,f;l$1.__&&l$1.__(u,i),o=(r="function"==typeof t)?null:t&&t.__k||i.__k,f=[],j$1(i,u=(!r&&t||i).__k=v$1(d$1,null,[u]),o||e$2,e$2,void 0!==i.ownerSVGElement,!r&&t?[t]:o?null:i.firstChild?n.call(i.childNodes):null,f,!r&&t?t:o?o.__e:i.firstChild,r),z(f,u);}function D(n,l){var u={__c:l="__cC"+f$1++,__:n,Consumer:function(n,l){return n.children(l)},Provider:function(n){var u,i;return this.getChildContext||(u=[],(i={})[l]=this,this.getChildContext=function(){return i},this.shouldComponentUpdate=function(n){this.props.value!==n.value&&u.some(m$1);},this.sub=function(n){u.push(n);var l=n.componentWillUnmount;n.componentWillUnmount=function(){u.splice(u.indexOf(n),1),l&&l.call(n);};}),n.children}};return u.Provider.__=u.Consumer.contextType=u}n=c$1.slice,l$1={__e:function(n,l){for(var u,i,t;l=l.__;)if((u=l.__c)&&!u.__)try{if((i=u.constructor)&&null!=i.getDerivedStateFromError&&(u.setState(i.getDerivedStateFromError(n)),t=u.__d),null!=u.componentDidCatch&&(u.componentDidCatch(n),t=u.__d),t)return u.__E=u}catch(l){n=l;}throw n}},u$1=0,_.prototype.setState=function(n,l){var u;u=null!=this.__s&&this.__s!==this.state?this.__s:this.__s=a$1({},this.state),"function"==typeof n&&(n=n(a$1({},u),this.props)),n&&a$1(u,n),null!=n&&this.__v&&(l&&this.__h.push(l),m$1(this));},_.prototype.forceUpdate=function(n){this.__v&&(this.__e=!0,n&&this.__h.push(n),m$1(this));},_.prototype.render=d$1,t$1=[],r$1="function"==typeof Promise?Promise.prototype.then.bind(Promise.resolve()):setTimeout,g$1.__r=0,f$1=0;
var o$1=0;function e$1(_,e,n,t,f){var l,s,u={};for(s in e)"ref"==s?l=e[s]:u[s]=e[s];var a={type:_,props:u,key:n,ref:l,__k:null,__:null,__b:0,__e:null,__d:void 0,__c:null,__h:null,constructor:void 0,__v:--o$1,__source:t,__self:f};if("function"==typeof _&&(l=_.defaultProps))for(s in l)void 0===u[s]&&(u[s]=l[s]);return l$1.vnode&&l$1.vnode(a),a}
function count$1(node) {
var sum = 0,
children = node.children,
i = children && children.length;
if (!i) sum = 1;
else while (--i >= 0) sum += children[i].value;
node.value = sum;
}
function node_count() {
return this.eachAfter(count$1);
}
function node_each(callback, that) {
let index = -1;
for (const node of this) {
callback.call(that, node, ++index, this);
}
return this;
}
function node_eachBefore(callback, that) {
var node = this, nodes = [node], children, i, index = -1;
while (node = nodes.pop()) {
callback.call(that, node, ++index, this);
if (children = node.children) {
for (i = children.length - 1; i >= 0; --i) {
nodes.push(children[i]);
}
}
}
return this;
}
function node_eachAfter(callback, that) {
var node = this, nodes = [node], next = [], children, i, n, index = -1;
while (node = nodes.pop()) {
next.push(node);
if (children = node.children) {
for (i = 0, n = children.length; i < n; ++i) {
nodes.push(children[i]);
}
}
}
while (node = next.pop()) {
callback.call(that, node, ++index, this);
}
return this;
}
function node_find(callback, that) {
let index = -1;
for (const node of this) {
if (callback.call(that, node, ++index, this)) {
return node;
}
}
}
function node_sum(value) {
return this.eachAfter(function(node) {
var sum = +value(node.data) || 0,
children = node.children,
i = children && children.length;
while (--i >= 0) sum += children[i].value;
node.value = sum;
});
}
function node_sort(compare) {
return this.eachBefore(function(node) {
if (node.children) {
node.children.sort(compare);
}
});
}
function node_path(end) {
var start = this,
ancestor = leastCommonAncestor(start, end),
nodes = [start];
while (start !== ancestor) {
start = start.parent;
nodes.push(start);
}
var k = nodes.length;
while (end !== ancestor) {
nodes.splice(k, 0, end);
end = end.parent;
}
return nodes;
}
function leastCommonAncestor(a, b) {
if (a === b) return a;
var aNodes = a.ancestors(),
bNodes = b.ancestors(),
c = null;
a = aNodes.pop();
b = bNodes.pop();
while (a === b) {
c = a;
a = aNodes.pop();
b = bNodes.pop();
}
return c;
}
function node_ancestors() {
var node = this, nodes = [node];
while (node = node.parent) {
nodes.push(node);
}
return nodes;
}
function node_descendants() {
return Array.from(this);
}
function node_leaves() {
var leaves = [];
this.eachBefore(function(node) {
if (!node.children) {
leaves.push(node);
}
});
return leaves;
}
function node_links() {
var root = this, links = [];
root.each(function(node) {
if (node !== root) { // Don’t include the root’s parent, if any.
links.push({source: node.parent, target: node});
}
});
return links;
}
function* node_iterator() {
var node = this, current, next = [node], children, i, n;
do {
current = next.reverse(), next = [];
while (node = current.pop()) {
yield node;
if (children = node.children) {
for (i = 0, n = children.length; i < n; ++i) {
next.push(children[i]);
}
}
}
} while (next.length);
}
function hierarchy(data, children) {
if (data instanceof Map) {
data = [undefined, data];
if (children === undefined) children = mapChildren;
} else if (children === undefined) {
children = objectChildren;
}
var root = new Node$1(data),
node,
nodes = [root],
child,
childs,
i,
n;
while (node = nodes.pop()) {
if ((childs = children(node.data)) && (n = (childs = Array.from(childs)).length)) {
node.children = childs;
for (i = n - 1; i >= 0; --i) {
nodes.push(child = childs[i] = new Node$1(childs[i]));
child.parent = node;
child.depth = node.depth + 1;
}
}
}
return root.eachBefore(computeHeight);
}
function node_copy() {
return hierarchy(this).eachBefore(copyData);
}
function objectChildren(d) {
return d.children;
}
function mapChildren(d) {
return Array.isArray(d) ? d[1] : null;
}
function copyData(node) {
if (node.data.value !== undefined) node.value = node.data.value;
node.data = node.data.data;
}
function computeHeight(node) {
var height = 0;
do node.height = height;
while ((node = node.parent) && (node.height < ++height));
}
function Node$1(data) {
this.data = data;
this.depth =
this.height = 0;
this.parent = null;
}
Node$1.prototype = hierarchy.prototype = {
constructor: Node$1,
count: node_count,
each: node_each,
eachAfter: node_eachAfter,
eachBefore: node_eachBefore,
find: node_find,
sum: node_sum,
sort: node_sort,
path: node_path,
ancestors: node_ancestors,
descendants: node_descendants,
leaves: node_leaves,
links: node_links,
copy: node_copy,
[Symbol.iterator]: node_iterator
};
function required(f) {
if (typeof f !== "function") throw new Error;
return f;
}
function constantZero() {
return 0;
}
function constant$1(x) {
return function() {
return x;
};
}
function roundNode(node) {
node.x0 = Math.round(node.x0);
node.y0 = Math.round(node.y0);
node.x1 = Math.round(node.x1);
node.y1 = Math.round(node.y1);
}
function treemapDice(parent, x0, y0, x1, y1) {
var nodes = parent.children,
node,
i = -1,
n = nodes.length,
k = parent.value && (x1 - x0) / parent.value;
while (++i < n) {
node = nodes[i], node.y0 = y0, node.y1 = y1;
node.x0 = x0, node.x1 = x0 += node.value * k;
}
}
function treemapSlice(parent, x0, y0, x1, y1) {
var nodes = parent.children,
node,
i = -1,
n = nodes.length,
k = parent.value && (y1 - y0) / parent.value;
while (++i < n) {
node = nodes[i], node.x0 = x0, node.x1 = x1;
node.y0 = y0, node.y1 = y0 += node.value * k;
}
}
var phi = (1 + Math.sqrt(5)) / 2;
function squarifyRatio(ratio, parent, x0, y0, x1, y1) {
var rows = [],
nodes = parent.children,
row,
nodeValue,
i0 = 0,
i1 = 0,
n = nodes.length,
dx, dy,
value = parent.value,
sumValue,
minValue,
maxValue,
newRatio,
minRatio,
alpha,
beta;
while (i0 < n) {
dx = x1 - x0, dy = y1 - y0;
// Find the next non-empty node.
do sumValue = nodes[i1++].value; while (!sumValue && i1 < n);
minValue = maxValue = sumValue;
alpha = Math.max(dy / dx, dx / dy) / (value * ratio);
beta = sumValue * sumValue * alpha;
minRatio = Math.max(maxValue / beta, beta / minValue);
// Keep adding nodes while the aspect ratio maintains or improves.
for (; i1 < n; ++i1) {
sumValue += nodeValue = nodes[i1].value;
if (nodeValue < minValue) minValue = nodeValue;
if (nodeValue > maxValue) maxValue = nodeValue;
beta = sumValue * sumValue * alpha;
newRatio = Math.max(maxValue / beta, beta / minValue);
if (newRatio > minRatio) { sumValue -= nodeValue; break; }
minRatio = newRatio;
}
// Position and record the row orientation.
rows.push(row = {value: sumValue, dice: dx < dy, children: nodes.slice(i0, i1)});
if (row.dice) treemapDice(row, x0, y0, x1, value ? y0 += dy * sumValue / value : y1);
else treemapSlice(row, x0, y0, value ? x0 += dx * sumValue / value : x1, y1);
value -= sumValue, i0 = i1;
}
return rows;
}
var squarify = (function custom(ratio) {
function squarify(parent, x0, y0, x1, y1) {
squarifyRatio(ratio, parent, x0, y0, x1, y1);
}
squarify.ratio = function(x) {
return custom((x = +x) > 1 ? x : 1);
};
return squarify;
})(phi);
function treemap() {
var tile = squarify,
round = false,
dx = 1,
dy = 1,
paddingStack = [0],
paddingInner = constantZero,
paddingTop = constantZero,
paddingRight = constantZero,
paddingBottom = constantZero,
paddingLeft = constantZero;
function treemap(root) {
root.x0 =
root.y0 = 0;
root.x1 = dx;
root.y1 = dy;
root.eachBefore(positionNode);
paddingStack = [0];
if (round) root.eachBefore(roundNode);
return root;
}
function positionNode(node) {
var p = paddingStack[node.depth],
x0 = node.x0 + p,
y0 = node.y0 + p,
x1 = node.x1 - p,
y1 = node.y1 - p;
if (x1 < x0) x0 = x1 = (x0 + x1) / 2;
if (y1 < y0) y0 = y1 = (y0 + y1) / 2;
node.x0 = x0;
node.y0 = y0;
node.x1 = x1;
node.y1 = y1;
if (node.children) {
p = paddingStack[node.depth + 1] = paddingInner(node) / 2;
x0 += paddingLeft(node) - p;
y0 += paddingTop(node) - p;
x1 -= paddingRight(node) - p;
y1 -= paddingBottom(node) - p;
if (x1 < x0) x0 = x1 = (x0 + x1) / 2;
if (y1 < y0) y0 = y1 = (y0 + y1) / 2;
tile(node, x0, y0, x1, y1);
}
}
treemap.round = function(x) {
return arguments.length ? (round = !!x, treemap) : round;
};
treemap.size = function(x) {
return arguments.length ? (dx = +x[0], dy = +x[1], treemap) : [dx, dy];
};
treemap.tile = function(x) {
return arguments.length ? (tile = required(x), treemap) : tile;
};
treemap.padding = function(x) {
return arguments.length ? treemap.paddingInner(x).paddingOuter(x) : treemap.paddingInner();
};
treemap.paddingInner = function(x) {
return arguments.length ? (paddingInner = typeof x === "function" ? x : constant$1(+x), treemap) : paddingInner;
};
treemap.paddingOuter = function(x) {
return arguments.length ? treemap.paddingTop(x).paddingRight(x).paddingBottom(x).paddingLeft(x) : treemap.paddingTop();
};
treemap.paddingTop = function(x) {
return arguments.length ? (paddingTop = typeof x === "function" ? x : constant$1(+x), treemap) : paddingTop;
};
treemap.paddingRight = function(x) {
return arguments.length ? (paddingRight = typeof x === "function" ? x : constant$1(+x), treemap) : paddingRight;
};
treemap.paddingBottom = function(x) {
return arguments.length ? (paddingBottom = typeof x === "function" ? x : constant$1(+x), treemap) : paddingBottom;
};
treemap.paddingLeft = function(x) {
return arguments.length ? (paddingLeft = typeof x === "function" ? x : constant$1(+x), treemap) : paddingLeft;
};
return treemap;
}
var treemapResquarify = (function custom(ratio) {
function resquarify(parent, x0, y0, x1, y1) {
if ((rows = parent._squarify) && (rows.ratio === ratio)) {
var rows,
row,
nodes,
i,
j = -1,
n,
m = rows.length,
value = parent.value;
while (++j < m) {
row = rows[j], nodes = row.children;
for (i = row.value = 0, n = nodes.length; i < n; ++i) row.value += nodes[i].value;
if (row.dice) treemapDice(row, x0, y0, x1, value ? y0 += (y1 - y0) * row.value / value : y1);
else treemapSlice(row, x0, y0, value ? x0 += (x1 - x0) * row.value / value : x1, y1);
value -= row.value;
}
} else {
parent._squarify = rows = squarifyRatio(ratio, parent, x0, y0, x1, y1);
rows.ratio = ratio;
}
}
resquarify.ratio = function(x) {
return custom((x = +x) > 1 ? x : 1);
};
return resquarify;
})(phi);
const isModuleTree = (mod) => "children" in mod;
let count = 0;
class Id {
constructor(id) {
this._id = id;
const url = new URL(window.location.href);
url.hash = id;
this._href = url.toString();
}
get id() {
return this._id;
}
get href() {
return this._href;
}
toString() {
return `url(${this.href})`;
}
}
function generateUniqueId(name) {
count += 1;
const id = ["O", name, count].filter(Boolean).join("-");
return new Id(id);
}
const LABELS = {
renderedLength: "Rendered",
gzipLength: "Gzip",
brotliLength: "Brotli",
};
const getAvailableSizeOptions = (options) => {
const availableSizeProperties = ["renderedLength"];
if (options.gzip) {
availableSizeProperties.push("gzipLength");
}
if (options.brotli) {
availableSizeProperties.push("brotliLength");
}
return availableSizeProperties;
};
var t,u,r,o=0,i=[],c=l$1.__b,f=l$1.__r,e=l$1.diffed,a=l$1.__c,v=l$1.unmount;function m(t,r){l$1.__h&&l$1.__h(u,t,o||r),o=0;var i=u.__H||(u.__H={__:[],__h:[]});return t>=i.__.length&&i.__.push({}),i.__[t]}function l(n){return o=1,p(w,n)}function p(n,r,o){var i=m(t++,2);return i.t=n,i.__c||(i.__=[o?o(r):w(void 0,r),function(n){var t=i.t(i.__[0],n);i.__[0]!==t&&(i.__=[t,i.__[1]],i.__c.setState({}));}],i.__c=u),i.__}function y(r,o){var i=m(t++,3);!l$1.__s&&k(i.__H,o)&&(i.__=r,i.__H=o,u.__H.__h.push(i));}function h(r,o){var i=m(t++,4);!l$1.__s&&k(i.__H,o)&&(i.__=r,i.__H=o,u.__h.push(i));}function s(n){return o=5,d(function(){return {current:n}},[])}function d(n,u){var r=m(t++,7);return k(r.__H,u)&&(r.__=n(),r.__H=u,r.__h=n),r.__}function F(n){var r=u.context[n.__c],o=m(t++,9);return o.c=n,r?(null==o.__&&(o.__=!0,r.sub(u)),r.props.value):n.__}function x(){var t;for(i.sort(function(n,t){return n.__v.__b-t.__v.__b});t=i.pop();)if(t.__P)try{t.__H.__h.forEach(g),t.__H.__h.forEach(j),t.__H.__h=[];}catch(u){t.__H.__h=[],l$1.__e(u,t.__v);}}l$1.__b=function(n){u=null,c&&c(n);},l$1.__r=function(n){f&&f(n),t=0;var r=(u=n.__c).__H;r&&(r.__h.forEach(g),r.__h.forEach(j),r.__h=[]);},l$1.diffed=function(t){e&&e(t);var o=t.__c;o&&o.__H&&o.__H.__h.length&&(1!==i.push(o)&&r===l$1.requestAnimationFrame||((r=l$1.requestAnimationFrame)||function(n){var t,u=function(){clearTimeout(r),b&&cancelAnimationFrame(t),setTimeout(n);},r=setTimeout(u,100);b&&(t=requestAnimationFrame(u));})(x)),u=null;},l$1.__c=function(t,u){u.some(function(t){try{t.__h.forEach(g),t.__h=t.__h.filter(function(n){return !n.__||j(n)});}catch(r){u.some(function(n){n.__h&&(n.__h=[]);}),u=[],l$1.__e(r,t.__v);}}),a&&a(t,u);},l$1.unmount=function(t){v&&v(t);var u,r=t.__c;r&&r.__H&&(r.__H.__.forEach(function(n){try{g(n);}catch(n){u=n;}}),u&&l$1.__e(u,r.__v));};var b="function"==typeof requestAnimationFrame;function g(n){var t=u,r=n.__c;"function"==typeof r&&(n.__c=void 0,r()),u=t;}function j(n){var t=u;n.__c=n.__(),u=t;}function k(n,t){return !n||n.length!==t.length||t.some(function(t,u){return t!==n[u]})}function w(n,t){return "function"==typeof t?t(n):t}
const SideBar = ({ availableSizeProperties, sizeProperty, setSizeProperty, onExcludeChange, onIncludeChange, }) => {
const [includeValue, setIncludeValue] = l("");
const [excludeValue, setExcludeValue] = l("");
const handleSizePropertyChange = (sizeProp) => () => {
if (sizeProp !== sizeProperty) {
setSizeProperty(sizeProp);
}
};
const handleIncludeChange = (event) => {
const value = event.currentTarget.value;
setIncludeValue(value);
onIncludeChange(value);
};
const handleExcludeChange = (event) => {
const value = event.currentTarget.value;
setExcludeValue(value);
onExcludeChange(value);
};
return (e$1("aside", Object.assign({ className: "sidebar" }, { children: [e$1("div", Object.assign({ className: "size-selectors" }, { children: availableSizeProperties.length > 1 &&
availableSizeProperties.map((sizeProp) => {
const id = `selector-${sizeProp}`;
return (e$1("div", Object.assign({ className: "size-selector" }, { children: [e$1("input", { type: "radio", id: id, checked: sizeProp === sizeProperty, onChange: handleSizePropertyChange(sizeProp) }, void 0), e$1("label", Object.assign({ htmlFor: id }, { children: LABELS[sizeProp] }), void 0)] }), sizeProp));
}) }), void 0), e$1("div", Object.assign({ className: "module-filters" }, { children: [e$1("div", Object.assign({ className: "module-filter" }, { children: [e$1("label", Object.assign({ htmlFor: "module-filter-exclude" }, { children: "Exclude" }), void 0), e$1("input", { type: "text", id: "module-filter-exclude", value: excludeValue, onInput: handleExcludeChange }, void 0)] }), void 0), e$1("div", Object.assign({ className: "module-filter" }, { children: [e$1("label", Object.assign({ htmlFor: "module-filter-include" }, { children: "Include" }), void 0), e$1("input", { type: "text", id: "module-filter-include", value: includeValue, onInput: handleIncludeChange }, void 0)] }), void 0)] }), void 0)] }), void 0));
};
const throttleFilter = (callback, limit) => {
let waiting = false;
return (val) => {
if (!waiting) {
callback(val);
waiting = true;
setTimeout(() => {
waiting = false;
}, limit);
}
};
};
const useFilter = () => {
const [includeFilter, setIncludeFilter] = l("");
const [excludeFilter, setExcludeFilter] = l("");
const setIncludeFilterTrottled = d(() => throttleFilter(setIncludeFilter, 200), []);
const setExcludeFilterTrottled = d(() => throttleFilter(setExcludeFilter, 200), []);
const isModuleIncluded = d(() => {
if (includeFilter === "") {
return () => true;
}
try {
const re = new RegExp(includeFilter);
return ({ id }) => re.test(id);
}
catch (err) {
return () => false;
}
}, [includeFilter]);
const isModuleExcluded = d(() => {
if (excludeFilter === "") {
return () => false;
}
try {
const re = new RegExp(excludeFilter);
return ({ id }) => re.test(id);
}
catch (err) {
return () => false;
}
}, [excludeFilter]);
const isDefaultInclude = includeFilter === "";
const getModuleFilterMultiplier = d(() => {
return (data) => {
if (isDefaultInclude) {
return isModuleExcluded(data) ? 0 : 1;
}
return isModuleExcluded(data) && !isModuleIncluded(data) ? 0 : 1;
};
}, [isDefaultInclude, isModuleExcluded, isModuleIncluded]);
return {
getModuleFilterMultiplier,
includeFilter,
excludeFilter,
setExcludeFilter: setExcludeFilterTrottled,
setIncludeFilter: setIncludeFilterTrottled,
};
};
function ascending(a, b) {
return a == null || b == null ? NaN : a < b ? -1 : a > b ? 1 : a >= b ? 0 : NaN;
}
function bisector(f) {
let delta = f;
let compare1 = f;
let compare2 = f;
if (f.length !== 2) {
delta = (d, x) => f(d) - x;
compare1 = ascending;
compare2 = (d, x) => ascending(f(d), x);
}
function left(a, x, lo = 0, hi = a.length) {
if (lo < hi) {
if (compare1(x, x) !== 0) return hi;
do {
const mid = (lo + hi) >>> 1;
if (compare2(a[mid], x) < 0) lo = mid + 1;
else hi = mid;
} while (lo < hi);
}
return lo;
}
function right(a, x, lo = 0, hi = a.length) {
if (lo < hi) {
if (compare1(x, x) !== 0) return hi;
do {
const mid = (lo + hi) >>> 1;
if (compare2(a[mid], x) <= 0) lo = mid + 1;
else hi = mid;
} while (lo < hi);
}
return lo;
}
function center(a, x, lo = 0, hi = a.length) {
const i = left(a, x, lo, hi - 1);
return i > lo && delta(a[i - 1], x) > -delta(a[i], x) ? i - 1 : i;
}
return {left, center, right};
}
function number$1(x) {
return x === null ? NaN : +x;
}
const ascendingBisect = bisector(ascending);
const bisectRight = ascendingBisect.right;
bisector(number$1).center;
var bisect = bisectRight;
class InternMap extends Map {
constructor(entries, key = keyof) {
super();
Object.defineProperties(this, {_intern: {value: new Map()}, _key: {value: key}});
if (entries != null) for (const [key, value] of entries) this.set(key, value);
}
get(key) {
return super.get(intern_get(this, key));
}
has(key) {
return super.has(intern_get(this, key));
}
set(key, value) {
return super.set(intern_set(this, key), value);
}
delete(key) {
return super.delete(intern_delete(this, key));
}
}
function intern_get({_intern, _key}, value) {
const key = _key(value);
return _intern.has(key) ? _intern.get(key) : value;
}
function intern_set({_intern, _key}, value) {
const key = _key(value);
if (_intern.has(key)) return _intern.get(key);
_intern.set(key, value);
return value;
}
function intern_delete({_intern, _key}, value) {
const key = _key(value);
if (_intern.has(key)) {
value = _intern.get(key);
_intern.delete(key);
}
return value;
}
function keyof(value) {
return value !== null && typeof value === "object" ? value.valueOf() : value;
}
function identity$2(x) {
return x;
}
function group(values, ...keys) {
return nest(values, identity$2, identity$2, keys);
}
function nest(values, map, reduce, keys) {
return (function regroup(values, i) {
if (i >= keys.length) return reduce(values);
const groups = new InternMap();
const keyof = keys[i++];
let index = -1;
for (const value of values) {
const key = keyof(value, ++index, values);
const group = groups.get(key);
if (group) group.push(value);
else groups.set(key, [value]);
}
for (const [key, values] of groups) {
groups.set(key, regroup(values, i));
}
return map(groups);
})(values, 0);
}
var e10 = Math.sqrt(50),
e5 = Math.sqrt(10),
e2 = Math.sqrt(2);
function ticks(start, stop, count) {
var reverse,
i = -1,
n,
ticks,
step;
stop = +stop, start = +start, count = +count;
if (start === stop && count > 0) return [start];
if (reverse = stop < start) n = start, start = stop, stop = n;
if ((step = tickIncrement(start, stop, count)) === 0 || !isFinite(step)) return [];
if (step > 0) {
let r0 = Math.round(start / step), r1 = Math.round(stop / step);
if (r0 * step < start) ++r0;
if (r1 * step > stop) --r1;
ticks = new Array(n = r1 - r0 + 1);
while (++i < n) ticks[i] = (r0 + i) * step;
} else {
step = -step;
let r0 = Math.round(start * step), r1 = Math.round(stop * step);
if (r0 / step < start) ++r0;
if (r1 / step > stop) --r1;
ticks = new Array(n = r1 - r0 + 1);
while (++i < n) ticks[i] = (r0 + i) / step;
}
if (reverse) ticks.reverse();
return ticks;
}
function tickIncrement(start, stop, count) {
var step = (stop - start) / Math.max(0, count),
power = Math.floor(Math.log(step) / Math.LN10),
error = step / Math.pow(10, power);
return power >= 0
? (error >= e10 ? 10 : error >= e5 ? 5 : error >= e2 ? 2 : 1) * Math.pow(10, power)
: -Math.pow(10, -power) / (error >= e10 ? 10 : error >= e5 ? 5 : error >= e2 ? 2 : 1);
}
function tickStep(start, stop, count) {
var step0 = Math.abs(stop - start) / Math.max(0, count),
step1 = Math.pow(10, Math.floor(Math.log(step0) / Math.LN10)),
error = step0 / step1;
if (error >= e10) step1 *= 10;
else if (error >= e5) step1 *= 5;
else if (error >= e2) step1 *= 2;
return stop < start ? -step1 : step1;
}
const TOP_PADDING = 20;
const PADDING = 2;
const Node = ({ node, onMouseOver, onClick, selected }) => {
const { getModuleColor } = F(StaticContext);
const { backgroundColor, fontColor } = getModuleColor(node);
const { x0, x1, y1, y0, data, children = null } = node;
const textRef = s(null);
const textRectRef = s();
const width = x1 - x0;
const height = y1 - y0;
const textProps = {
"font-size": "0.7em",
"dominant-baseline": "middle",
"text-anchor": "middle",
x: width / 2,
};
if (children != null) {
textProps.y = (TOP_PADDING + PADDING) / 2;
}
else {
textProps.y = height / 2;
}
h(() => {
if (width == 0 || height == 0 || !textRef.current) {
return;
}
if (textRectRef.current == null) {
textRectRef.current = textRef.current.getBoundingClientRect();
}
let scale = 1;
if (children != null) {
scale = Math.min((width * 0.9) / textRectRef.current.width, Math.min(height, TOP_PADDING + PADDING) / textRectRef.current.height);
scale = Math.min(1, scale);
textRef.current.setAttribute("y", String(Math.min(TOP_PADDING + PADDING, height) / 2 / scale));
textRef.current.setAttribute("x", String(width / 2 / scale));
}
else {
scale = Math.min((width * 0.9) / textRectRef.current.width, (height * 0.9) / textRectRef.current.height);
scale = Math.min(1, scale);
textRef.current.setAttribute("y", String(height / 2 / scale));
textRef.current.setAttribute("x", String(width / 2 / scale));
}
textRef.current.setAttribute("transform", `scale(${scale.toFixed(2)})`);
}, [children, height, width]);
if (width == 0 || height == 0) {
return null;
}
return (e$1("g", Object.assign({ className: "node", transform: `translate(${x0},${y0})`, onClick: (event) => {
event.stopPropagation();
onClick(node);
}, onMouseOver: (event) => {
event.stopPropagation();
onMouseOver(node);
} }, { children: [e$1("rect", { fill: backgroundColor, rx: 2, ry: 2, width: x1 - x0, height: y1 - y0, stroke: selected ? "#fff" : undefined, "stroke-width": selected ? 2 : undefined }, void 0), e$1("text", Object.assign({ ref: textRef, fill: fontColor, onClick: (event) => {
var _a;
if (((_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.toString()) !== "") {
event.stopPropagation();
}
} }, textProps, { children: data.name }), void 0)] }), void 0));
};
const TreeMap = ({ root, onNodeHover, selectedNode, onNodeClick }) => {
const { width, height, getModuleIds } = F(StaticContext);
console.time("layering");
// this will make groups by height
const nestedData = d(() => {
const nestedDataMap = group(root.descendants(), (d) => d.height);
const nestedData = Array.from(nestedDataMap, ([key, values]) => ({
key,
values,
}));
nestedData.sort((a, b) => b.key - a.key);
return nestedData;
}, [root]);
console.timeEnd("layering");
return (e$1("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: `0 0 ${width} ${height}` }, { children: nestedData.map(({ key, values }) => {
return (e$1("g", Object.assign({ className: "layer" }, { children: values.map((node) => {
return (e$1(Node, { node: node, onMouseOver: onNodeHover, selected: selectedNode === node, onClick: onNodeClick }, getModuleIds(node.data).nodeUid.id));
}) }), key));
}) }), void 0));
};
var bytes$1 = {exports: {}};
/*!
* bytes
* Copyright(c) 2012-2014 TJ Holowaychuk
* Copyright(c) 2015 Jed Watson
* MIT Licensed
*/
/**
* Module exports.
* @public
*/
bytes$1.exports = bytes;
var format_1 = bytes$1.exports.format = format$1;
bytes$1.exports.parse = parse;
/**
* Module variables.
* @private
*/
var formatThousandsRegExp = /\B(?=(\d{3})+(?!\d))/g;
var formatDecimalsRegExp = /(?:\.0*|(\.[^0]+)0+)$/;
var map$1 = {
b: 1,
kb: 1 << 10,
mb: 1 << 20,
gb: 1 << 30,
tb: Math.pow(1024, 4),
pb: Math.pow(1024, 5),
};
var parseRegExp = /^((-|\+)?(\d+(?:\.\d+)?)) *(kb|mb|gb|tb|pb)$/i;
/**
* Convert the given value in bytes into a string or parse to string to an integer in bytes.
*
* @param {string|number} value
* @param {{
* case: [string],
* decimalPlaces: [number]
* fixedDecimals: [boolean]
* thousandsSeparator: [string]
* unitSeparator: [string]
* }} [options] bytes options.
*
* @returns {string|number|null}
*/
function bytes(value, options) {
if (typeof value === 'string') {
return parse(value);
}
if (typeof value === 'number') {
return format$1(value, options);
}
return null;
}
/**
* Format the given value in bytes into a string.
*
* If the value is negative, it is kept as such. If it is a float,
* it is rounded.
*
* @param {number} value
* @param {object} [options]
* @param {number} [options.decimalPlaces=2]
* @param {number} [options.fixedDecimals=false]
* @param {string} [options.thousandsSeparator=]
* @param {string} [options.unit=]
* @param {string} [options.unitSeparator=]
*
* @returns {string|null}
* @public
*/
function format$1(value, options) {
if (!Number.isFinite(value)) {
return null;
}
var mag = Math.abs(value);
var thousandsSeparator = (options && options.thousandsSeparator) || '';
var unitSeparator = (options && options.unitSeparator) || '';
var decimalPlaces = (options && options.decimalPlaces !== undefined) ? options.decimalPlaces : 2;
var fixedDecimals = Boolean(options && options.fixedDecimals);
var unit = (options && options.unit) || '';
if (!unit || !map$1[unit.toLowerCase()]) {
if (mag >= map$1.pb) {
unit = 'PB';
} else if (mag >= map$1.tb) {
unit = 'TB';
} else if (mag >= map$1.gb) {
unit = 'GB';
} else if (mag >= map$1.mb) {
unit = 'MB';
} else if (mag >= map$1.kb) {
unit = 'KB';
} else {
unit = 'B';
}
}
var val = value / map$1[unit.toLowerCase()];
var str = val.toFixed(decimalPlaces);
if (!fixedDecimals) {
str = str.replace(formatDecimalsRegExp, '$1');
}
if (thousandsSeparator) {
str = str.split('.').map(function (s, i) {
return i === 0
? s.replace(formatThousandsRegExp, thousandsSeparator)
: s
}).join('.');
}
return str + unitSeparator + unit;
}
/**
* Parse the string value into an integer in bytes.
*
* If no unit is given, it is assumed the value is in bytes.
*
* @param {number|string} val
*
* @returns {number|null}
* @public
*/
function parse(val) {
if (typeof val === 'number' && !isNaN(val)) {
return val;
}
if (typeof val !== 'string') {
return null;
}
// Test if the string passed is valid
var results = parseRegExp.exec(val);
var floatValue;
var unit = 'b';
if (!results) {
// Nothing could be extracted from the given string
floatValue = parseInt(val, 10);
unit = 'b';
} else {
// Retrieve the value and the unit
floatValue = parseFloat(results[1]);
unit = results[4].toLowerCase();
}
return Math.floor(map$1[unit] * floatValue);
}
const Tooltip_marginX = 10;
const Tooltip_marginY = 30;
const SOURCEMAP_RENDERED = (e$1("span", { children: [" ", e$1("b", { children: LABELS.renderedLength }, void 0), " is a number of characters in the file after individual and ", e$1("br", {}, void 0), " whole bundle transformations according to sourcemap."] }, void 0));
const RENDRED = (e$1("span", { children: [e$1("b", { children: LABELS.renderedLength }, void 0), " is a byte size of individual file after transformations and treeshake."] }, void 0));
const COMPRESSED = (e$1("span", { children: [e$1("b", { children: LABELS.gzipLength }, void 0), " and ", e$1("b", { children: LABELS.brotliLength }, void 0), " is a byte size of individual file after individual", " ", "transformations,", e$1("br", {}, void 0), " treeshake and compression."] }, void 0));
const Tooltip = ({ node, visible, root, sizeProperty }) => {
const { availableSizeProperties, getModuleSize, data } = F(StaticContext);
const ref = s(null);
const [style, setStyle] = l({});
const content = d(() => {
if (!node)
return null;
const mainSize = getModuleSize(node.data, sizeProperty);
const percentageNum = (100 * mainSize) / getModuleSize(root.data, sizeProperty);
const percentage = percentageNum.toFixed(2);
const percentageString = percentage + "%";
const path = node
.ancestors()
.reverse()
.map((d) => d.data.name)
.join("/");
let dataNode = null;
if (!isModuleTree(node.data)) {
const mainUid = data.nodeParts[node.data.uid].mainUid;
dataNode = data.nodeMetas[mainUid];
}
return (e$1(d$1, { children: [e$1("div", { children: path }, void 0), availableSizeProperties.map((sizeProp) => {
if (sizeProp === sizeProperty) {
return (e$1("div", { children: [e$1("b", { children: [LABELS[sizeProp], ": ", format_1(mainSize)] }, void 0), " ", "(", percentageString, ")"] }, void 0));
}
else {
return (e$1("div", { children: [LABELS[sizeProp], ": ", format_1(getModuleSize(node.data, sizeProp))] }, void 0));
}
}), e$1("br", {}, void 0), dataNode && dataNode.importedBy.length > 0 && (e$1("div", { children: [e$1("div", { children: [e$1("b", { children: "Imported By" }, void 0), ":"] }, void 0), dataNode.importedBy.map(({ uid }) => {
const id = data.nodeMetas[uid].id;
return e$1("div", { children: id }, id);
})] }, void 0)), e$1("br", {}, void 0), e$1("small", { children: data.options.sourcemap ? SOURCEMAP_RENDERED : RENDRED }, void 0), (data.options.gzip || data.options.brotli) && (e$1(d$1, { children: [e$1("br", {}, void 0), e$1("small", { children: COMPRESSED }, void 0)] }, void 0))] }, void 0));
}, [availableSizeProperties, data, getModuleSize, node, root.data, sizeProperty]);
const updatePosition = (mouseCoords) => {
if (!ref.current)
return;
const pos = {
left: mouseCoords.x + Tooltip_marginX,
top: mouseCoords.y + Tooltip_marginY,
};
const boundingRect = ref.current.getBoundingClientRect();
if (pos.left + boundingRect.width > window.innerWidth) {
// Shifting horizontally
pos.left = window.innerWidth - boundingRect.width;
}
if (pos.top + boundingRect.height > window.innerHeight) {
// Flipping vertically
pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height;
}
setStyle(pos);
};
y(() => {
const handleMouseMove = (event) => {
updatePosition({
x: event.pageX,
y: event.pageY,
});
};
document.addEventListener("mousemove", handleMouseMove, true);
return () => {
document.removeEventListener("mousemove", handleMouseMove, true);
};
}, []);
return (e$1("div", Object.assign({ className: `tooltip ${visible ? "" : "tooltip-hidden"}`, ref: ref, style: style }, { children: content }), void 0));
};
const Chart = ({ root, sizeProperty, selectedNode, setSelectedNode }) => {
const [showTooltip, setShowTooltip] = l(false);
const [tooltipNode, setTooltipNode] = l(undefined);
y(() => {
const handleMouseOut = () => {
setShowTooltip(false);
};
document.addEventListener("mouseover", handleMouseOut);
return () => {
document.removeEventListener("mouseover", handleMouseOut);
};
}, []);
return (e$1(d$1, { children: [e$1(TreeMap, { root: root, onNodeHover: (node) => {
setTooltipNode(node);
setShowTooltip(true);
}, selectedNode: selectedNode, onNodeClick: (node) => {
setSelectedNode(selectedNode === node ? undefined : node);
} }, void 0), e$1(Tooltip, { visible: showTooltip, node: tooltipNode, root: r