2690 lines
291 KiB
HTML
2690 lines
291 KiB
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;brea
|
|||
|
|
|
|||
|
|
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: root, sizeProperty: sizeProperty }, void 0)] }, void 0));
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const Main = () => {
|
|||
|
|
const { availableSizeProperties, rawHierarchy, getModuleSize, layout, data } = F(StaticContext);
|
|||
|
|
const [sizeProperty, setSizeProperty] = l(availableSizeProperties[0]);
|
|||
|
|
const [selectedNode, setSelectedNode] = l(undefined);
|
|||
|
|
const { getModuleFilterMultiplier, setExcludeFilter, setIncludeFilter } = useFilter();
|
|||
|
|
console.time("getNodeSizeMultiplier");
|
|||
|
|
const getNodeSizeMultiplier = d(() => {
|
|||
|
|
const rootSize = getModuleSize(rawHierarchy.data, sizeProperty);
|
|||
|
|
const selectedSize = selectedNode ? getModuleSize(selectedNode.data, sizeProperty) : 1;
|
|||
|
|
const multiplier = rootSize * 0.2 > selectedSize ? (rootSize * 0.2) / selectedSize : 3;
|
|||
|
|
if (selectedNode === undefined) {
|
|||
|
|
return () => 1;
|
|||
|
|
}
|
|||
|
|
else if (isModuleTree(selectedNode.data)) {
|
|||
|
|
const leaves = new Set(selectedNode.leaves().map((d) => d.data));
|
|||
|
|
return (node) => {
|
|||
|
|
if (leaves.has(node)) {
|
|||
|
|
return multiplier;
|
|||
|
|
}
|
|||
|
|
return 1;
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
return (node) => {
|
|||
|
|
if (node === selectedNode.data) {
|
|||
|
|
return multiplier;
|
|||
|
|
}
|
|||
|
|
return 1;
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
}, [getModuleSize, rawHierarchy.data, selectedNode, sizeProperty]);
|
|||
|
|
console.timeEnd("getNodeSizeMultiplier");
|
|||
|
|
console.time("root hierarchy compute");
|
|||
|
|
// root here always be the same as rawHierarchy even after layouting
|
|||
|
|
const root = d(() => {
|
|||
|
|
const rootWithSizesAndSorted = rawHierarchy
|
|||
|
|
.sum((node) => {
|
|||
|
|
if (isModuleTree(node))
|
|||
|
|
return 0;
|
|||
|
|
const ownSize = getModuleSize(node, sizeProperty);
|
|||
|
|
const zoomMultiplier = getNodeSizeMultiplier(node);
|
|||
|
|
const filterMultiplier = getModuleFilterMultiplier(data.nodeMetas[data.nodeParts[node.uid].mainUid]);
|
|||
|
|
return ownSize * zoomMultiplier * filterMultiplier;
|
|||
|
|
})
|
|||
|
|
.sort((a, b) => getModuleSize(a.data, sizeProperty) - getModuleSize(b.data, sizeProperty));
|
|||
|
|
return layout(rootWithSizesAndSorted);
|
|||
|
|
}, [data, getModuleFilterMultiplier, getModuleSize, getNodeSizeMultiplier, layout, rawHierarchy, sizeProperty]);
|
|||
|
|
console.timeEnd("root hierarchy compute");
|
|||
|
|
return (e$1(d$1, { children: [e$1(SideBar, { sizeProperty: sizeProperty, availableSizeProperties: availableSizeProperties, setSizeProperty: setSizeProperty, onExcludeChange: setExcludeFilter, onIncludeChange: setIncludeFilter }, void 0), e$1(Chart, { root: root, sizeProperty: sizeProperty, selectedNode: selectedNode, setSelectedNode: setSelectedNode }, void 0)] }, void 0));
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
function initRange(domain, range) {
|
|||
|
|
switch (arguments.length) {
|
|||
|
|
case 0: break;
|
|||
|
|
case 1: this.range(domain); break;
|
|||
|
|
default: this.range(range).domain(domain); break;
|
|||
|
|
}
|
|||
|
|
return this;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function initInterpolator(domain, interpolator) {
|
|||
|
|
switch (arguments.length) {
|
|||
|
|
case 0: break;
|
|||
|
|
case 1: {
|
|||
|
|
if (typeof domain === "function") this.interpolator(domain);
|
|||
|
|
else this.range(domain);
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
default: {
|
|||
|
|
this.domain(domain);
|
|||
|
|
if (typeof interpolator === "function") this.interpolator(interpolator);
|
|||
|
|
else this.range(interpolator);
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return this;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function define(constructor, factory, prototype) {
|
|||
|
|
constructor.prototype = factory.prototype = prototype;
|
|||
|
|
prototype.constructor = constructor;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function extend(parent, definition) {
|
|||
|
|
var prototype = Object.create(parent.prototype);
|
|||
|
|
for (var key in definition) prototype[key] = definition[key];
|
|||
|
|
return prototype;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function Color() {}
|
|||
|
|
|
|||
|
|
var darker = 0.7;
|
|||
|
|
var brighter = 1 / darker;
|
|||
|
|
|
|||
|
|
var reI = "\\s*([+-]?\\d+)\\s*",
|
|||
|
|
reN = "\\s*([+-]?\\d*\\.?\\d+(?:[eE][+-]?\\d+)?)\\s*",
|
|||
|
|
reP = "\\s*([+-]?\\d*\\.?\\d+(?:[eE][+-]?\\d+)?)%\\s*",
|
|||
|
|
reHex = /^#([0-9a-f]{3,8})$/,
|
|||
|
|
reRgbInteger = new RegExp("^rgb\\(" + [reI, reI, reI] + "\\)$"),
|
|||
|
|
reRgbPercent = new RegExp("^rgb\\(" + [reP, reP, reP] + "\\)$"),
|
|||
|
|
reRgbaInteger = new RegExp("^rgba\\(" + [reI, reI, reI, reN] + "\\)$"),
|
|||
|
|
reRgbaPercent = new RegExp("^rgba\\(" + [reP, reP, reP, reN] + "\\)$"),
|
|||
|
|
reHslPercent = new RegExp("^hsl\\(" + [reN, reP, reP] + "\\)$"),
|
|||
|
|
reHslaPercent = new RegExp("^hsla\\(" + [reN, reP, reP, reN] + "\\)$");
|
|||
|
|
|
|||
|
|
var named = {
|
|||
|
|
aliceblue: 0xf0f8ff,
|
|||
|
|
antiquewhite: 0xfaebd7,
|
|||
|
|
aqua: 0x00ffff,
|
|||
|
|
aquamarine: 0x7fffd4,
|
|||
|
|
azure: 0xf0ffff,
|
|||
|
|
beige: 0xf5f5dc,
|
|||
|
|
bisque: 0xffe4c4,
|
|||
|
|
black: 0x000000,
|
|||
|
|
blanchedalmond: 0xffebcd,
|
|||
|
|
blue: 0x0000ff,
|
|||
|
|
blueviolet: 0x8a2be2,
|
|||
|
|
brown: 0xa52a2a,
|
|||
|
|
burlywood: 0xdeb887,
|
|||
|
|
cadetblue: 0x5f9ea0,
|
|||
|
|
chartreuse: 0x7fff00,
|
|||
|
|
chocolate: 0xd2691e,
|
|||
|
|
coral: 0xff7f50,
|
|||
|
|
cornflowerblue: 0x6495ed,
|
|||
|
|
cornsilk: 0xfff8dc,
|
|||
|
|
crimson: 0xdc143c,
|
|||
|
|
cyan: 0x00ffff,
|
|||
|
|
darkblue: 0x00008b,
|
|||
|
|
darkcyan: 0x008b8b,
|
|||
|
|
darkgoldenrod: 0xb8860b,
|
|||
|
|
darkgray: 0xa9a9a9,
|
|||
|
|
darkgreen: 0x006400,
|
|||
|
|
darkgrey: 0xa9a9a9,
|
|||
|
|
darkkhaki: 0xbdb76b,
|
|||
|
|
darkmagenta: 0x8b008b,
|
|||
|
|
darkolivegreen: 0x556b2f,
|
|||
|
|
darkorange: 0xff8c00,
|
|||
|
|
darkorchid: 0x9932cc,
|
|||
|
|
darkred: 0x8b0000,
|
|||
|
|
darksalmon: 0xe9967a,
|
|||
|
|
darkseagreen: 0x8fbc8f,
|
|||
|
|
darkslateblue: 0x483d8b,
|
|||
|
|
darkslategray: 0x2f4f4f,
|
|||
|
|
darkslategrey: 0x2f4f4f,
|
|||
|
|
darkturquoise: 0x00ced1,
|
|||
|
|
darkviolet: 0x9400d3,
|
|||
|
|
deeppink: 0xff1493,
|
|||
|
|
deepskyblue: 0x00bfff,
|
|||
|
|
dimgray: 0x696969,
|
|||
|
|
dimgrey: 0x696969,
|
|||
|
|
dodgerblue: 0x1e90ff,
|
|||
|
|
firebrick: 0xb22222,
|
|||
|
|
floralwhite: 0xfffaf0,
|
|||
|
|
forestgreen: 0x228b22,
|
|||
|
|
fuchsia: 0xff00ff,
|
|||
|
|
gainsboro: 0xdcdcdc,
|
|||
|
|
ghostwhite: 0xf8f8ff,
|
|||
|
|
gold: 0xffd700,
|
|||
|
|
goldenrod: 0xdaa520,
|
|||
|
|
gray: 0x808080,
|
|||
|
|
green: 0x008000,
|
|||
|
|
greenyellow: 0xadff2f,
|
|||
|
|
grey: 0x808080,
|
|||
|
|
honeydew: 0xf0fff0,
|
|||
|
|
hotpink: 0xff69b4,
|
|||
|
|
indianred: 0xcd5c5c,
|
|||
|
|
indigo: 0x4b0082,
|
|||
|
|
ivory: 0xfffff0,
|
|||
|
|
khaki: 0xf0e68c,
|
|||
|
|
lavender: 0xe6e6fa,
|
|||
|
|
lavenderblush: 0xfff0f5,
|
|||
|
|
lawngreen: 0x7cfc00,
|
|||
|
|
lemonchiffon: 0xfffacd,
|
|||
|
|
lightblue: 0xadd8e6,
|
|||
|
|
lightcoral: 0xf08080,
|
|||
|
|
lightcyan: 0xe0ffff,
|
|||
|
|
lightgoldenrodyellow: 0xfafad2,
|
|||
|
|
lightgray: 0xd3d3d3,
|
|||
|
|
lightgreen: 0x90ee90,
|
|||
|
|
lightgrey: 0xd3d3d3,
|
|||
|
|
lightpink: 0xffb6c1,
|
|||
|
|
lightsalmon: 0xffa07a,
|
|||
|
|
lightseagreen: 0x20b2aa,
|
|||
|
|
lightskyblue: 0x87cefa,
|
|||
|
|
lightslategray: 0x778899,
|
|||
|
|
lightslategrey: 0x778899,
|
|||
|
|
lightsteelblue: 0xb0c4de,
|
|||
|
|
lightyellow: 0xffffe0,
|
|||
|
|
lime: 0x00ff00,
|
|||
|
|
limegreen: 0x32cd32,
|
|||
|
|
linen: 0xfaf0e6,
|
|||
|
|
magenta: 0xff00ff,
|
|||
|
|
maroon: 0x800000,
|
|||
|
|
mediumaquamarine: 0x66cdaa,
|
|||
|
|
mediumblue: 0x0000cd,
|
|||
|
|
mediumorchid: 0xba55d3,
|
|||
|
|
mediumpurple: 0x9370db,
|
|||
|
|
mediumseagreen: 0x3cb371,
|
|||
|
|
mediumslateblue: 0x7b68ee,
|
|||
|
|
mediumspringgreen: 0x00fa9a,
|
|||
|
|
mediumturquoise: 0x48d1cc,
|
|||
|
|
mediumvioletred: 0xc71585,
|
|||
|
|
midnightblue: 0x191970,
|
|||
|
|
mintcream: 0xf5fffa,
|
|||
|
|
mistyrose: 0xffe4e1,
|
|||
|
|
moccasin: 0xffe4b5,
|
|||
|
|
navajowhite: 0xffdead,
|
|||
|
|
navy: 0x000080,
|
|||
|
|
oldlace: 0xfdf5e6,
|
|||
|
|
olive: 0x808000,
|
|||
|
|
olivedrab: 0x6b8e23,
|
|||
|
|
orange: 0xffa500,
|
|||
|
|
orangered: 0xff4500,
|
|||
|
|
orchid: 0xda70d6,
|
|||
|
|
palegoldenrod: 0xeee8aa,
|
|||
|
|
palegreen: 0x98fb98,
|
|||
|
|
paleturquoise: 0xafeeee,
|
|||
|
|
palevioletred: 0xdb7093,
|
|||
|
|
papayawhip: 0xffefd5,
|
|||
|
|
peachpuff: 0xffdab9,
|
|||
|
|
peru: 0xcd853f,
|
|||
|
|
pink: 0xffc0cb,
|
|||
|
|
plum: 0xdda0dd,
|
|||
|
|
powderblue: 0xb0e0e6,
|
|||
|
|
purple: 0x800080,
|
|||
|
|
rebeccapurple: 0x663399,
|
|||
|
|
red: 0xff0000,
|
|||
|
|
rosybrown: 0xbc8f8f,
|
|||
|
|
royalblue: 0x4169e1,
|
|||
|
|
saddlebrown: 0x8b4513,
|
|||
|
|
salmon: 0xfa8072,
|
|||
|
|
sandybrown: 0xf4a460,
|
|||
|
|
seagreen: 0x2e8b57,
|
|||
|
|
seashell: 0xfff5ee,
|
|||
|
|
sienna: 0xa0522d,
|
|||
|
|
silver: 0xc0c0c0,
|
|||
|
|
skyblue: 0x87ceeb,
|
|||
|
|
slateblue: 0x6a5acd,
|
|||
|
|
slategray: 0x708090,
|
|||
|
|
slategrey: 0x708090,
|
|||
|
|
snow: 0xfffafa,
|
|||
|
|
springgreen: 0x00ff7f,
|
|||
|
|
steelblue: 0x4682b4,
|
|||
|
|
tan: 0xd2b48c,
|
|||
|
|
teal: 0x008080,
|
|||
|
|
thistle: 0xd8bfd8,
|
|||
|
|
tomato: 0xff6347,
|
|||
|
|
turquoise: 0x40e0d0,
|
|||
|
|
violet: 0xee82ee,
|
|||
|
|
wheat: 0xf5deb3,
|
|||
|
|
white: 0xffffff,
|
|||
|
|
whitesmoke: 0xf5f5f5,
|
|||
|
|
yellow: 0xffff00,
|
|||
|
|
yellowgreen: 0x9acd32
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
define(Color, color, {
|
|||
|
|
copy: function(channels) {
|
|||
|
|
return Object.assign(new this.constructor, this, channels);
|
|||
|
|
},
|
|||
|
|
displayable: function() {
|
|||
|
|
return this.rgb().displayable();
|
|||
|
|
},
|
|||
|
|
hex: color_formatHex, // Deprecated! Use color.formatHex.
|
|||
|
|
formatHex: color_formatHex,
|
|||
|
|
formatHsl: color_formatHsl,
|
|||
|
|
formatRgb: color_formatRgb,
|
|||
|
|
toString: color_formatRgb
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
function color_formatHex() {
|
|||
|
|
return this.rgb().formatHex();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function color_formatHsl() {
|
|||
|
|
return hslConvert(this).formatHsl();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function color_formatRgb() {
|
|||
|
|
return this.rgb().formatRgb();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function color(format) {
|
|||
|
|
var m, l;
|
|||
|
|
format = (format + "").trim().toLowerCase();
|
|||
|
|
return (m = reHex.exec(format)) ? (l = m[1].length, m = parseInt(m[1], 16), l === 6 ? rgbn(m) // #ff0000
|
|||
|
|
: l === 3 ? new Rgb((m >> 8 & 0xf) | (m >> 4 & 0xf0), (m >> 4 & 0xf) | (m & 0xf0), ((m & 0xf) << 4) | (m & 0xf), 1) // #f00
|
|||
|
|
: l === 8 ? rgba(m >> 24 & 0xff, m >> 16 & 0xff, m >> 8 & 0xff, (m & 0xff) / 0xff) // #ff000000
|
|||
|
|
: l === 4 ? rgba((m >> 12 & 0xf) | (m >> 8 & 0xf0), (m >> 8 & 0xf) | (m >> 4 & 0xf0), (m >> 4 & 0xf) | (m & 0xf0), (((m & 0xf) << 4) | (m & 0xf)) / 0xff) // #f000
|
|||
|
|
: null) // invalid hex
|
|||
|
|
: (m = reRgbInteger.exec(format)) ? new Rgb(m[1], m[2], m[3], 1) // rgb(255, 0, 0)
|
|||
|
|
: (m = reRgbPercent.exec(format)) ? new Rgb(m[1] * 255 / 100, m[2] * 255 / 100, m[3] * 255 / 100, 1) // rgb(100%, 0%, 0%)
|
|||
|
|
: (m = reRgbaInteger.exec(format)) ? rgba(m[1], m[2], m[3], m[4]) // rgba(255, 0, 0, 1)
|
|||
|
|
: (m = reRgbaPercent.exec(format)) ? rgba(m[1] * 255 / 100, m[2] * 255 / 100, m[3] * 255 / 100, m[4]) // rgb(100%, 0%, 0%, 1)
|
|||
|
|
: (m = reHslPercent.exec(format)) ? hsla(m[1], m[2] / 100, m[3] / 100, 1) // hsl(120, 50%, 50%)
|
|||
|
|
: (m = reHslaPercent.exec(format)) ? hsla(m[1], m[2] / 100, m[3] / 100, m[4]) // hsla(120, 50%, 50%, 1)
|
|||
|
|
: named.hasOwnProperty(format) ? rgbn(named[format]) // eslint-disable-line no-prototype-builtins
|
|||
|
|
: format === "transparent" ? new Rgb(NaN, NaN, NaN, 0)
|
|||
|
|
: null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function rgbn(n) {
|
|||
|
|
return new Rgb(n >> 16 & 0xff, n >> 8 & 0xff, n & 0xff, 1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function rgba(r, g, b, a) {
|
|||
|
|
if (a <= 0) r = g = b = NaN;
|
|||
|
|
return new Rgb(r, g, b, a);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function rgbConvert(o) {
|
|||
|
|
if (!(o instanceof Color)) o = color(o);
|
|||
|
|
if (!o) return new Rgb;
|
|||
|
|
o = o.rgb();
|
|||
|
|
return new Rgb(o.r, o.g, o.b, o.opacity);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function rgb$1(r, g, b, opacity) {
|
|||
|
|
return arguments.length === 1 ? rgbConvert(r) : new Rgb(r, g, b, opacity == null ? 1 : opacity);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function Rgb(r, g, b, opacity) {
|
|||
|
|
this.r = +r;
|
|||
|
|
this.g = +g;
|
|||
|
|
this.b = +b;
|
|||
|
|
this.opacity = +opacity;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
define(Rgb, rgb$1, extend(Color, {
|
|||
|
|
brighter: function(k) {
|
|||
|
|
k = k == null ? brighter : Math.pow(brighter, k);
|
|||
|
|
return new Rgb(this.r * k, this.g * k, this.b * k, this.opacity);
|
|||
|
|
},
|
|||
|
|
darker: function(k) {
|
|||
|
|
k = k == null ? darker : Math.pow(darker, k);
|
|||
|
|
return new Rgb(this.r * k, this.g * k, this.b * k, this.opacity);
|
|||
|
|
},
|
|||
|
|
rgb: function() {
|
|||
|
|
return this;
|
|||
|
|
},
|
|||
|
|
displayable: function() {
|
|||
|
|
return (-0.5 <= this.r && this.r < 255.5)
|
|||
|
|
&& (-0.5 <= this.g && this.g < 255.5)
|
|||
|
|
&& (-0.5 <= this.b && this.b < 255.5)
|
|||
|
|
&& (0 <= this.opacity && this.opacity <= 1);
|
|||
|
|
},
|
|||
|
|
hex: rgb_formatHex, // Deprecated! Use color.formatHex.
|
|||
|
|
formatHex: rgb_formatHex,
|
|||
|
|
formatRgb: rgb_formatRgb,
|
|||
|
|
toString: rgb_formatRgb
|
|||
|
|
}));
|
|||
|
|
|
|||
|
|
function rgb_formatHex() {
|
|||
|
|
return "#" + hex(this.r) + hex(this.g) + hex(this.b);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function rgb_formatRgb() {
|
|||
|
|
var a = this.opacity; a = isNaN(a) ? 1 : Math.max(0, Math.min(1, a));
|
|||
|
|
return (a === 1 ? "rgb(" : "rgba(")
|
|||
|
|
+ Math.max(0, Math.min(255, Math.round(this.r) || 0)) + ", "
|
|||
|
|
+ Math.max(0, Math.min(255, Math.round(this.g) || 0)) + ", "
|
|||
|
|
+ Math.max(0, Math.min(255, Math.round(this.b) || 0))
|
|||
|
|
+ (a === 1 ? ")" : ", " + a + ")");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function hex(value) {
|
|||
|
|
value = Math.max(0, Math.min(255, Math.round(value) || 0));
|
|||
|
|
return (value < 16 ? "0" : "") + value.toString(16);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function hsla(h, s, l, a) {
|
|||
|
|
if (a <= 0) h = s = l = NaN;
|
|||
|
|
else if (l <= 0 || l >= 1) h = s = NaN;
|
|||
|
|
else if (s <= 0) h = NaN;
|
|||
|
|
return new Hsl(h, s, l, a);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function hslConvert(o) {
|
|||
|
|
if (o instanceof Hsl) return new Hsl(o.h, o.s, o.l, o.opacity);
|
|||
|
|
if (!(o instanceof Color)) o = color(o);
|
|||
|
|
if (!o) return new Hsl;
|
|||
|
|
if (o instanceof Hsl) return o;
|
|||
|
|
o = o.rgb();
|
|||
|
|
var r = o.r / 255,
|
|||
|
|
g = o.g / 255,
|
|||
|
|
b = o.b / 255,
|
|||
|
|
min = Math.min(r, g, b),
|
|||
|
|
max = Math.max(r, g, b),
|
|||
|
|
h = NaN,
|
|||
|
|
s = max - min,
|
|||
|
|
l = (max + min) / 2;
|
|||
|
|
if (s) {
|
|||
|
|
if (r === max) h = (g - b) / s + (g < b) * 6;
|
|||
|
|
else if (g === max) h = (b - r) / s + 2;
|
|||
|
|
else h = (r - g) / s + 4;
|
|||
|
|
s /= l < 0.5 ? max + min : 2 - max - min;
|
|||
|
|
h *= 60;
|
|||
|
|
} else {
|
|||
|
|
s = l > 0 && l < 1 ? 0 : h;
|
|||
|
|
}
|
|||
|
|
return new Hsl(h, s, l, o.opacity);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function hsl(h, s, l, opacity) {
|
|||
|
|
return arguments.length === 1 ? hslConvert(h) : new Hsl(h, s, l, opacity == null ? 1 : opacity);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function Hsl(h, s, l, opacity) {
|
|||
|
|
this.h = +h;
|
|||
|
|
this.s = +s;
|
|||
|
|
this.l = +l;
|
|||
|
|
this.opacity = +opacity;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
define(Hsl, hsl, extend(Color, {
|
|||
|
|
brighter: function(k) {
|
|||
|
|
k = k == null ? brighter : Math.pow(brighter, k);
|
|||
|
|
return new Hsl(this.h, this.s, this.l * k, this.opacity);
|
|||
|
|
},
|
|||
|
|
darker: function(k) {
|
|||
|
|
k = k == null ? darker : Math.pow(darker, k);
|
|||
|
|
return new Hsl(this.h, this.s, this.l * k, this.opacity);
|
|||
|
|
},
|
|||
|
|
rgb: function() {
|
|||
|
|
var h = this.h % 360 + (this.h < 0) * 360,
|
|||
|
|
s = isNaN(h) || isNaN(this.s) ? 0 : this.s,
|
|||
|
|
l = this.l,
|
|||
|
|
m2 = l + (l < 0.5 ? l : 1 - l) * s,
|
|||
|
|
m1 = 2 * l - m2;
|
|||
|
|
return new Rgb(
|
|||
|
|
hsl2rgb(h >= 240 ? h - 240 : h + 120, m1, m2),
|
|||
|
|
hsl2rgb(h, m1, m2),
|
|||
|
|
hsl2rgb(h < 120 ? h + 240 : h - 120, m1, m2),
|
|||
|
|
this.opacity
|
|||
|
|
);
|
|||
|
|
},
|
|||
|
|
displayable: function() {
|
|||
|
|
return (0 <= this.s && this.s <= 1 || isNaN(this.s))
|
|||
|
|
&& (0 <= this.l && this.l <= 1)
|
|||
|
|
&& (0 <= this.opacity && this.opacity <= 1);
|
|||
|
|
},
|
|||
|
|
formatHsl: function() {
|
|||
|
|
var a = this.opacity; a = isNaN(a) ? 1 : Math.max(0, Math.min(1, a));
|
|||
|
|
return (a === 1 ? "hsl(" : "hsla(")
|
|||
|
|
+ (this.h || 0) + ", "
|
|||
|
|
+ (this.s || 0) * 100 + "%, "
|
|||
|
|
+ (this.l || 0) * 100 + "%"
|
|||
|
|
+ (a === 1 ? ")" : ", " + a + ")");
|
|||
|
|
}
|
|||
|
|
}));
|
|||
|
|
|
|||
|
|
/* From FvD 13.37, CSS Color Module Level 3 */
|
|||
|
|
function hsl2rgb(h, m1, m2) {
|
|||
|
|
return (h < 60 ? m1 + (m2 - m1) * h / 60
|
|||
|
|
: h < 180 ? m2
|
|||
|
|
: h < 240 ? m1 + (m2 - m1) * (240 - h) / 60
|
|||
|
|
: m1) * 255;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var constant = x => () => x;
|
|||
|
|
|
|||
|
|
function linear$1(a, d) {
|
|||
|
|
return function(t) {
|
|||
|
|
return a + t * d;
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function exponential(a, b, y) {
|
|||
|
|
return a = Math.pow(a, y), b = Math.pow(b, y) - a, y = 1 / y, function(t) {
|
|||
|
|
return Math.pow(a + t * b, y);
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function gamma(y) {
|
|||
|
|
return (y = +y) === 1 ? nogamma : function(a, b) {
|
|||
|
|
return b - a ? exponential(a, b, y) : constant(isNaN(a) ? b : a);
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function nogamma(a, b) {
|
|||
|
|
var d = b - a;
|
|||
|
|
return d ? linear$1(a, d) : constant(isNaN(a) ? b : a);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var rgb = (function rgbGamma(y) {
|
|||
|
|
var color = gamma(y);
|
|||
|
|
|
|||
|
|
function rgb(start, end) {
|
|||
|
|
var r = color((start = rgb$1(start)).r, (end = rgb$1(end)).r),
|
|||
|
|
g = color(start.g, end.g),
|
|||
|
|
b = color(start.b, end.b),
|
|||
|
|
opacity = nogamma(start.opacity, end.opacity);
|
|||
|
|
return function(t) {
|
|||
|
|
start.r = r(t);
|
|||
|
|
start.g = g(t);
|
|||
|
|
start.b = b(t);
|
|||
|
|
start.opacity = opacity(t);
|
|||
|
|
return start + "";
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
rgb.gamma = rgbGamma;
|
|||
|
|
|
|||
|
|
return rgb;
|
|||
|
|
})(1);
|
|||
|
|
|
|||
|
|
function numberArray(a, b) {
|
|||
|
|
if (!b) b = [];
|
|||
|
|
var n = a ? Math.min(b.length, a.length) : 0,
|
|||
|
|
c = b.slice(),
|
|||
|
|
i;
|
|||
|
|
return function(t) {
|
|||
|
|
for (i = 0; i < n; ++i) c[i] = a[i] * (1 - t) + b[i] * t;
|
|||
|
|
return c;
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function isNumberArray(x) {
|
|||
|
|
return ArrayBuffer.isView(x) && !(x instanceof DataView);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function genericArray(a, b) {
|
|||
|
|
var nb = b ? b.length : 0,
|
|||
|
|
na = a ? Math.min(nb, a.length) : 0,
|
|||
|
|
x = new Array(na),
|
|||
|
|
c = new Array(nb),
|
|||
|
|
i;
|
|||
|
|
|
|||
|
|
for (i = 0; i < na; ++i) x[i] = interpolate(a[i], b[i]);
|
|||
|
|
for (; i < nb; ++i) c[i] = b[i];
|
|||
|
|
|
|||
|
|
return function(t) {
|
|||
|
|
for (i = 0; i < na; ++i) c[i] = x[i](t);
|
|||
|
|
return c;
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function date(a, b) {
|
|||
|
|
var d = new Date;
|
|||
|
|
return a = +a, b = +b, function(t) {
|
|||
|
|
return d.setTime(a * (1 - t) + b * t), d;
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function interpolateNumber(a, b) {
|
|||
|
|
return a = +a, b = +b, function(t) {
|
|||
|
|
return a * (1 - t) + b * t;
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function object(a, b) {
|
|||
|
|
var i = {},
|
|||
|
|
c = {},
|
|||
|
|
k;
|
|||
|
|
|
|||
|
|
if (a === null || typeof a !== "object") a = {};
|
|||
|
|
if (b === null || typeof b !== "object") b = {};
|
|||
|
|
|
|||
|
|
for (k in b) {
|
|||
|
|
if (k in a) {
|
|||
|
|
i[k] = interpolate(a[k], b[k]);
|
|||
|
|
} else {
|
|||
|
|
c[k] = b[k];
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return function(t) {
|
|||
|
|
for (k in i) c[k] = i[k](t);
|
|||
|
|
return c;
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var reA = /[-+]?(?:\d+\.?\d*|\.?\d+)(?:[eE][-+]?\d+)?/g,
|
|||
|
|
reB = new RegExp(reA.source, "g");
|
|||
|
|
|
|||
|
|
function zero(b) {
|
|||
|
|
return function() {
|
|||
|
|
return b;
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function one(b) {
|
|||
|
|
return function(t) {
|
|||
|
|
return b(t) + "";
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function string(a, b) {
|
|||
|
|
var bi = reA.lastIndex = reB.lastIndex = 0, // scan index for next number in b
|
|||
|
|
am, // current match in a
|
|||
|
|
bm, // current match in b
|
|||
|
|
bs, // string preceding current number in b, if any
|
|||
|
|
i = -1, // index in s
|
|||
|
|
s = [], // string constants and placeholders
|
|||
|
|
q = []; // number interpolators
|
|||
|
|
|
|||
|
|
// Coerce inputs to strings.
|
|||
|
|
a = a + "", b = b + "";
|
|||
|
|
|
|||
|
|
// Interpolate pairs of numbers in a & b.
|
|||
|
|
while ((am = reA.exec(a))
|
|||
|
|
&& (bm = reB.exec(b))) {
|
|||
|
|
if ((bs = bm.index) > bi) { // a string precedes the next number in b
|
|||
|
|
bs = b.slice(bi, bs);
|
|||
|
|
if (s[i]) s[i] += bs; // coalesce with previous string
|
|||
|
|
else s[++i] = bs;
|
|||
|
|
}
|
|||
|
|
if ((am = am[0]) === (bm = bm[0])) { // numbers in a & b match
|
|||
|
|
if (s[i]) s[i] += bm; // coalesce with previous string
|
|||
|
|
else s[++i] = bm;
|
|||
|
|
} else { // interpolate non-matching numbers
|
|||
|
|
s[++i] = null;
|
|||
|
|
q.push({i: i, x: interpolateNumber(am, bm)});
|
|||
|
|
}
|
|||
|
|
bi = reB.lastIndex;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Add remains of b.
|
|||
|
|
if (bi < b.length) {
|
|||
|
|
bs = b.slice(bi);
|
|||
|
|
if (s[i]) s[i] += bs; // coalesce with previous string
|
|||
|
|
else s[++i] = bs;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Special optimization for only a single match.
|
|||
|
|
// Otherwise, interpolate each of the numbers and rejoin the string.
|
|||
|
|
return s.length < 2 ? (q[0]
|
|||
|
|
? one(q[0].x)
|
|||
|
|
: zero(b))
|
|||
|
|
: (b = q.length, function(t) {
|
|||
|
|
for (var i = 0, o; i < b; ++i) s[(o = q[i]).i] = o.x(t);
|
|||
|
|
return s.join("");
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function interpolate(a, b) {
|
|||
|
|
var t = typeof b, c;
|
|||
|
|
return b == null || t === "boolean" ? constant(b)
|
|||
|
|
: (t === "number" ? interpolateNumber
|
|||
|
|
: t === "string" ? ((c = color(b)) ? (b = c, rgb) : string)
|
|||
|
|
: b instanceof color ? rgb
|
|||
|
|
: b instanceof Date ? date
|
|||
|
|
: isNumberArray(b) ? numberArray
|
|||
|
|
: Array.isArray(b) ? genericArray
|
|||
|
|
: typeof b.valueOf !== "function" && typeof b.toString !== "function" || isNaN(b) ? object
|
|||
|
|
: interpolateNumber)(a, b);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function interpolateRound(a, b) {
|
|||
|
|
return a = +a, b = +b, function(t) {
|
|||
|
|
return Math.round(a * (1 - t) + b * t);
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function constants(x) {
|
|||
|
|
return function() {
|
|||
|
|
return x;
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function number(x) {
|
|||
|
|
return +x;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var unit = [0, 1];
|
|||
|
|
|
|||
|
|
function identity$1(x) {
|
|||
|
|
return x;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function normalize(a, b) {
|
|||
|
|
return (b -= (a = +a))
|
|||
|
|
? function(x) { return (x - a) / b; }
|
|||
|
|
: constants(isNaN(b) ? NaN : 0.5);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function clamper(a, b) {
|
|||
|
|
var t;
|
|||
|
|
if (a > b) t = a, a = b, b = t;
|
|||
|
|
return function(x) { return Math.max(a, Math.min(b, x)); };
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// normalize(a, b)(x) takes a domain value x in [a,b] and returns the corresponding parameter t in [0,1].
|
|||
|
|
// interpolate(a, b)(t) takes a parameter t in [0,1] and returns the corresponding range value x in [a,b].
|
|||
|
|
function bimap(domain, range, interpolate) {
|
|||
|
|
var d0 = domain[0], d1 = domain[1], r0 = range[0], r1 = range[1];
|
|||
|
|
if (d1 < d0) d0 = normalize(d1, d0), r0 = interpolate(r1, r0);
|
|||
|
|
else d0 = normalize(d0, d1), r0 = interpolate(r0, r1);
|
|||
|
|
return function(x) { return r0(d0(x)); };
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function polymap(domain, range, interpolate) {
|
|||
|
|
var j = Math.min(domain.length, range.length) - 1,
|
|||
|
|
d = new Array(j),
|
|||
|
|
r = new Array(j),
|
|||
|
|
i = -1;
|
|||
|
|
|
|||
|
|
// Reverse descending domains.
|
|||
|
|
if (domain[j] < domain[0]) {
|
|||
|
|
domain = domain.slice().reverse();
|
|||
|
|
range = range.slice().reverse();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
while (++i < j) {
|
|||
|
|
d[i] = normalize(domain[i], domain[i + 1]);
|
|||
|
|
r[i] = interpolate(range[i], range[i + 1]);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return function(x) {
|
|||
|
|
var i = bisect(domain, x, 1, j) - 1;
|
|||
|
|
return r[i](d[i](x));
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function copy$1(source, target) {
|
|||
|
|
return target
|
|||
|
|
.domain(source.domain())
|
|||
|
|
.range(source.range())
|
|||
|
|
.interpolate(source.interpolate())
|
|||
|
|
.clamp(source.clamp())
|
|||
|
|
.unknown(source.unknown());
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function transformer$1() {
|
|||
|
|
var domain = unit,
|
|||
|
|
range = unit,
|
|||
|
|
interpolate$1 = interpolate,
|
|||
|
|
transform,
|
|||
|
|
untransform,
|
|||
|
|
unknown,
|
|||
|
|
clamp = identity$1,
|
|||
|
|
piecewise,
|
|||
|
|
output,
|
|||
|
|
input;
|
|||
|
|
|
|||
|
|
function rescale() {
|
|||
|
|
var n = Math.min(domain.length, range.length);
|
|||
|
|
if (clamp !== identity$1) clamp = clamper(domain[0], domain[n - 1]);
|
|||
|
|
piecewise = n > 2 ? polymap : bimap;
|
|||
|
|
output = input = null;
|
|||
|
|
return scale;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function scale(x) {
|
|||
|
|
return x == null || isNaN(x = +x) ? unknown : (output || (output = piecewise(domain.map(transform), range, interpolate$1)))(transform(clamp(x)));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
scale.invert = function(y) {
|
|||
|
|
return clamp(untransform((input || (input = piecewise(range, domain.map(transform), interpolateNumber)))(y)));
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
scale.domain = function(_) {
|
|||
|
|
return arguments.length ? (domain = Array.from(_, number), rescale()) : domain.slice();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
scale.range = function(_) {
|
|||
|
|
return arguments.length ? (range = Array.from(_), rescale()) : range.slice();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
scale.rangeRound = function(_) {
|
|||
|
|
return range = Array.from(_), interpolate$1 = interpolateRound, rescale();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
scale.clamp = function(_) {
|
|||
|
|
return arguments.length ? (clamp = _ ? true : identity$1, rescale()) : clamp !== identity$1;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
scale.interpolate = function(_) {
|
|||
|
|
return arguments.length ? (interpolate$1 = _, rescale()) : interpolate$1;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
scale.unknown = function(_) {
|
|||
|
|
return arguments.length ? (unknown = _, scale) : unknown;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return function(t, u) {
|
|||
|
|
transform = t, untransform = u;
|
|||
|
|
return rescale();
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function continuous() {
|
|||
|
|
return transformer$1()(identity$1, identity$1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function formatDecimal(x) {
|
|||
|
|
return Math.abs(x = Math.round(x)) >= 1e21
|
|||
|
|
? x.toLocaleString("en").replace(/,/g, "")
|
|||
|
|
: x.toString(10);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Computes the decimal coefficient and exponent of the specified number x with
|
|||
|
|
// significant digits p, where x is positive and p is in [1, 21] or undefined.
|
|||
|
|
// For example, formatDecimalParts(1.23) returns ["123", 0].
|
|||
|
|
function formatDecimalParts(x, p) {
|
|||
|
|
if ((i = (x = p ? x.toExponential(p - 1) : x.toExponential()).indexOf("e")) < 0) return null; // NaN, ±Infinity
|
|||
|
|
var i, coefficient = x.slice(0, i);
|
|||
|
|
|
|||
|
|
// The string returned by toExponential either has the form \d\.\d+e[-+]\d+
|
|||
|
|
// (e.g., 1.2e+3) or the form \de[-+]\d+ (e.g., 1e+3).
|
|||
|
|
return [
|
|||
|
|
coefficient.length > 1 ? coefficient[0] + coefficient.slice(2) : coefficient,
|
|||
|
|
+x.slice(i + 1)
|
|||
|
|
];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function exponent(x) {
|
|||
|
|
return x = formatDecimalParts(Math.abs(x)), x ? x[1] : NaN;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function formatGroup(grouping, thousands) {
|
|||
|
|
return function(value, width) {
|
|||
|
|
var i = value.length,
|
|||
|
|
t = [],
|
|||
|
|
j = 0,
|
|||
|
|
g = grouping[0],
|
|||
|
|
length = 0;
|
|||
|
|
|
|||
|
|
while (i > 0 && g > 0) {
|
|||
|
|
if (length + g + 1 > width) g = Math.max(1, width - length);
|
|||
|
|
t.push(value.substring(i -= g, i + g));
|
|||
|
|
if ((length += g + 1) > width) break;
|
|||
|
|
g = grouping[j = (j + 1) % grouping.length];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return t.reverse().join(thousands);
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function formatNumerals(numerals) {
|
|||
|
|
return function(value) {
|
|||
|
|
return value.replace(/[0-9]/g, function(i) {
|
|||
|
|
return numerals[+i];
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// [[fill]align][sign][symbol][0][width][,][.precision][~][type]
|
|||
|
|
var re = /^(?:(.)?([<>=^]))?([+\-( ])?([$#])?(0)?(\d+)?(,)?(\.\d+)?(~)?([a-z%])?$/i;
|
|||
|
|
|
|||
|
|
function formatSpecifier(specifier) {
|
|||
|
|
if (!(match = re.exec(specifier))) throw new Error("invalid format: " + specifier);
|
|||
|
|
var match;
|
|||
|
|
return new FormatSpecifier({
|
|||
|
|
fill: match[1],
|
|||
|
|
align: match[2],
|
|||
|
|
sign: match[3],
|
|||
|
|
symbol: match[4],
|
|||
|
|
zero: match[5],
|
|||
|
|
width: match[6],
|
|||
|
|
comma: match[7],
|
|||
|
|
precision: match[8] && match[8].slice(1),
|
|||
|
|
trim: match[9],
|
|||
|
|
type: match[10]
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
formatSpecifier.prototype = FormatSpecifier.prototype; // instanceof
|
|||
|
|
|
|||
|
|
function FormatSpecifier(specifier) {
|
|||
|
|
this.fill = specifier.fill === undefined ? " " : specifier.fill + "";
|
|||
|
|
this.align = specifier.align === undefined ? ">" : specifier.align + "";
|
|||
|
|
this.sign = specifier.sign === undefined ? "-" : specifier.sign + "";
|
|||
|
|
this.symbol = specifier.symbol === undefined ? "" : specifier.symbol + "";
|
|||
|
|
this.zero = !!specifier.zero;
|
|||
|
|
this.width = specifier.width === undefined ? undefined : +specifier.width;
|
|||
|
|
this.comma = !!specifier.comma;
|
|||
|
|
this.precision = specifier.precision === undefined ? undefined : +specifier.precision;
|
|||
|
|
this.trim = !!specifier.trim;
|
|||
|
|
this.type = specifier.type === undefined ? "" : specifier.type + "";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
FormatSpecifier.prototype.toString = function() {
|
|||
|
|
return this.fill
|
|||
|
|
+ this.align
|
|||
|
|
+ this.sign
|
|||
|
|
+ this.symbol
|
|||
|
|
+ (this.zero ? "0" : "")
|
|||
|
|
+ (this.width === undefined ? "" : Math.max(1, this.width | 0))
|
|||
|
|
+ (this.comma ? "," : "")
|
|||
|
|
+ (this.precision === undefined ? "" : "." + Math.max(0, this.precision | 0))
|
|||
|
|
+ (this.trim ? "~" : "")
|
|||
|
|
+ this.type;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// Trims insignificant zeros, e.g., replaces 1.2000k with 1.2k.
|
|||
|
|
function formatTrim(s) {
|
|||
|
|
out: for (var n = s.length, i = 1, i0 = -1, i1; i < n; ++i) {
|
|||
|
|
switch (s[i]) {
|
|||
|
|
case ".": i0 = i1 = i; break;
|
|||
|
|
case "0": if (i0 === 0) i0 = i; i1 = i; break;
|
|||
|
|
default: if (!+s[i]) break out; if (i0 > 0) i0 = 0; break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return i0 > 0 ? s.slice(0, i0) + s.slice(i1 + 1) : s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var prefixExponent;
|
|||
|
|
|
|||
|
|
function formatPrefixAuto(x, p) {
|
|||
|
|
var d = formatDecimalParts(x, p);
|
|||
|
|
if (!d) return x + "";
|
|||
|
|
var coefficient = d[0],
|
|||
|
|
exponent = d[1],
|
|||
|
|
i = exponent - (prefixExponent = Math.max(-8, Math.min(8, Math.floor(exponent / 3))) * 3) + 1,
|
|||
|
|
n = coefficient.length;
|
|||
|
|
return i === n ? coefficient
|
|||
|
|
: i > n ? coefficient + new Array(i - n + 1).join("0")
|
|||
|
|
: i > 0 ? coefficient.slice(0, i) + "." + coefficient.slice(i)
|
|||
|
|
: "0." + new Array(1 - i).join("0") + formatDecimalParts(x, Math.max(0, p + i - 1))[0]; // less than 1y!
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function formatRounded(x, p) {
|
|||
|
|
var d = formatDecimalParts(x, p);
|
|||
|
|
if (!d) return x + "";
|
|||
|
|
var coefficient = d[0],
|
|||
|
|
exponent = d[1];
|
|||
|
|
return exponent < 0 ? "0." + new Array(-exponent).join("0") + coefficient
|
|||
|
|
: coefficient.length > exponent + 1 ? coefficient.slice(0, exponent + 1) + "." + coefficient.slice(exponent + 1)
|
|||
|
|
: coefficient + new Array(exponent - coefficient.length + 2).join("0");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var formatTypes = {
|
|||
|
|
"%": (x, p) => (x * 100).toFixed(p),
|
|||
|
|
"b": (x) => Math.round(x).toString(2),
|
|||
|
|
"c": (x) => x + "",
|
|||
|
|
"d": formatDecimal,
|
|||
|
|
"e": (x, p) => x.toExponential(p),
|
|||
|
|
"f": (x, p) => x.toFixed(p),
|
|||
|
|
"g": (x, p) => x.toPrecision(p),
|
|||
|
|
"o": (x) => Math.round(x).toString(8),
|
|||
|
|
"p": (x, p) => formatRounded(x * 100, p),
|
|||
|
|
"r": formatRounded,
|
|||
|
|
"s": formatPrefixAuto,
|
|||
|
|
"X": (x) => Math.round(x).toString(16).toUpperCase(),
|
|||
|
|
"x": (x) => Math.round(x).toString(16)
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
function identity(x) {
|
|||
|
|
return x;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var map = Array.prototype.map,
|
|||
|
|
prefixes = ["y","z","a","f","p","n","µ","m","","k","M","G","T","P","E","Z","Y"];
|
|||
|
|
|
|||
|
|
function formatLocale(locale) {
|
|||
|
|
var group = locale.grouping === undefined || locale.thousands === undefined ? identity : formatGroup(map.call(locale.grouping, Number), locale.thousands + ""),
|
|||
|
|
currencyPrefix = locale.currency === undefined ? "" : locale.currency[0] + "",
|
|||
|
|
currencySuffix = locale.currency === undefined ? "" : locale.currency[1] + "",
|
|||
|
|
decimal = locale.decimal === undefined ? "." : locale.decimal + "",
|
|||
|
|
numerals = locale.numerals === undefined ? identity : formatNumerals(map.call(locale.numerals, String)),
|
|||
|
|
percent = locale.percent === undefined ? "%" : locale.percent + "",
|
|||
|
|
minus = locale.minus === undefined ? "−" : locale.minus + "",
|
|||
|
|
nan = locale.nan === undefined ? "NaN" : locale.nan + "";
|
|||
|
|
|
|||
|
|
function newFormat(specifier) {
|
|||
|
|
specifier = formatSpecifier(specifier);
|
|||
|
|
|
|||
|
|
var fill = specifier.fill,
|
|||
|
|
align = specifier.align,
|
|||
|
|
sign = specifier.sign,
|
|||
|
|
symbol = specifier.symbol,
|
|||
|
|
zero = specifier.zero,
|
|||
|
|
width = specifier.width,
|
|||
|
|
comma = specifier.comma,
|
|||
|
|
precision = specifier.precision,
|
|||
|
|
trim = specifier.trim,
|
|||
|
|
type = specifier.type;
|
|||
|
|
|
|||
|
|
// The "n" type is an alias for ",g".
|
|||
|
|
if (type === "n") comma = true, type = "g";
|
|||
|
|
|
|||
|
|
// The "" type, and any invalid type, is an alias for ".12~g".
|
|||
|
|
else if (!formatTypes[type]) precision === undefined && (precision = 12), trim = true, type = "g";
|
|||
|
|
|
|||
|
|
// If zero fill is specified, padding goes after sign and before digits.
|
|||
|
|
if (zero || (fill === "0" && align === "=")) zero = true, fill = "0", align = "=";
|
|||
|
|
|
|||
|
|
// Compute the prefix and suffix.
|
|||
|
|
// For SI-prefix, the suffix is lazily computed.
|
|||
|
|
var prefix = symbol === "$" ? currencyPrefix : symbol === "#" && /[boxX]/.test(type) ? "0" + type.toLowerCase() : "",
|
|||
|
|
suffix = symbol === "$" ? currencySuffix : /[%p]/.test(type) ? percent : "";
|
|||
|
|
|
|||
|
|
// What format function should we use?
|
|||
|
|
// Is this an integer type?
|
|||
|
|
// Can this type generate exponential notation?
|
|||
|
|
var formatType = formatTypes[type],
|
|||
|
|
maybeSuffix = /[defgprs%]/.test(type);
|
|||
|
|
|
|||
|
|
// Set the default precision if not specified,
|
|||
|
|
// or clamp the specified precision to the supported range.
|
|||
|
|
// For significant precision, it must be in [1, 21].
|
|||
|
|
// For fixed precision, it must be in [0, 20].
|
|||
|
|
precision = precision === undefined ? 6
|
|||
|
|
: /[gprs]/.test(type) ? Math.max(1, Math.min(21, precision))
|
|||
|
|
: Math.max(0, Math.min(20, precision));
|
|||
|
|
|
|||
|
|
function format(value) {
|
|||
|
|
var valuePrefix = prefix,
|
|||
|
|
valueSuffix = suffix,
|
|||
|
|
i, n, c;
|
|||
|
|
|
|||
|
|
if (type === "c") {
|
|||
|
|
valueSuffix = formatType(value) + valueSuffix;
|
|||
|
|
value = "";
|
|||
|
|
} else {
|
|||
|
|
value = +value;
|
|||
|
|
|
|||
|
|
// Determine the sign. -0 is not less than 0, but 1 / -0 is!
|
|||
|
|
var valueNegative = value < 0 || 1 / value < 0;
|
|||
|
|
|
|||
|
|
// Perform the initial formatting.
|
|||
|
|
value = isNaN(value) ? nan : formatType(Math.abs(value), precision);
|
|||
|
|
|
|||
|
|
// Trim insignificant zeros.
|
|||
|
|
if (trim) value = formatTrim(value);
|
|||
|
|
|
|||
|
|
// If a negative value rounds to zero after formatting, and no explicit positive sign is requested, hide the sign.
|
|||
|
|
if (valueNegative && +value === 0 && sign !== "+") valueNegative = false;
|
|||
|
|
|
|||
|
|
// Compute the prefix and suffix.
|
|||
|
|
valuePrefix = (valueNegative ? (sign === "(" ? sign : minus) : sign === "-" || sign === "(" ? "" : sign) + valuePrefix;
|
|||
|
|
valueSuffix = (type === "s" ? prefixes[8 + prefixExponent / 3] : "") + valueSuffix + (valueNegative && sign === "(" ? ")" : "");
|
|||
|
|
|
|||
|
|
// Break the formatted value into the integer “value” part that can be
|
|||
|
|
// grouped, and fractional or exponential “suffix” part that is not.
|
|||
|
|
if (maybeSuffix) {
|
|||
|
|
i = -1, n = value.length;
|
|||
|
|
while (++i < n) {
|
|||
|
|
if (c = value.charCodeAt(i), 48 > c || c > 57) {
|
|||
|
|
valueSuffix = (c === 46 ? decimal + value.slice(i + 1) : value.slice(i)) + valueSuffix;
|
|||
|
|
value = value.slice(0, i);
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// If the fill character is not "0", grouping is applied before padding.
|
|||
|
|
if (comma && !zero) value = group(value, Infinity);
|
|||
|
|
|
|||
|
|
// Compute the padding.
|
|||
|
|
var length = valuePrefix.length + value.length + valueSuffix.length,
|
|||
|
|
padding = length < width ? new Array(width - length + 1).join(fill) : "";
|
|||
|
|
|
|||
|
|
// If the fill character is "0", grouping is applied after padding.
|
|||
|
|
if (comma && zero) value = group(padding + value, padding.length ? width - valueSuffix.length : Infinity), padding = "";
|
|||
|
|
|
|||
|
|
// Reconstruct the final output based on the desired alignment.
|
|||
|
|
switch (align) {
|
|||
|
|
case "<": value = valuePrefix + value + valueSuffix + padding; break;
|
|||
|
|
case "=": value = valuePrefix + padding + value + valueSuffix; break;
|
|||
|
|
case "^": value = padding.slice(0, length = padding.length >> 1) + valuePrefix + value + valueSuffix + padding.slice(length); break;
|
|||
|
|
default: value = padding + valuePrefix + value + valueSuffix; break;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return numerals(value);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
format.toString = function() {
|
|||
|
|
return specifier + "";
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return format;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function formatPrefix(specifier, value) {
|
|||
|
|
var f = newFormat((specifier = formatSpecifier(specifier), specifier.type = "f", specifier)),
|
|||
|
|
e = Math.max(-8, Math.min(8, Math.floor(exponent(value) / 3))) * 3,
|
|||
|
|
k = Math.pow(10, -e),
|
|||
|
|
prefix = prefixes[8 + e / 3];
|
|||
|
|
return function(value) {
|
|||
|
|
return f(k * value) + prefix;
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
format: newFormat,
|
|||
|
|
formatPrefix: formatPrefix
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var locale;
|
|||
|
|
var format;
|
|||
|
|
var formatPrefix;
|
|||
|
|
|
|||
|
|
defaultLocale({
|
|||
|
|
thousands: ",",
|
|||
|
|
grouping: [3],
|
|||
|
|
currency: ["$", ""]
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
function defaultLocale(definition) {
|
|||
|
|
locale = formatLocale(definition);
|
|||
|
|
format = locale.format;
|
|||
|
|
formatPrefix = locale.formatPrefix;
|
|||
|
|
return locale;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function precisionFixed(step) {
|
|||
|
|
return Math.max(0, -exponent(Math.abs(step)));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function precisionPrefix(step, value) {
|
|||
|
|
return Math.max(0, Math.max(-8, Math.min(8, Math.floor(exponent(value) / 3))) * 3 - exponent(Math.abs(step)));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function precisionRound(step, max) {
|
|||
|
|
step = Math.abs(step), max = Math.abs(max) - step;
|
|||
|
|
return Math.max(0, exponent(max) - exponent(step)) + 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function tickFormat(start, stop, count, specifier) {
|
|||
|
|
var step = tickStep(start, stop, count),
|
|||
|
|
precision;
|
|||
|
|
specifier = formatSpecifier(specifier == null ? ",f" : specifier);
|
|||
|
|
switch (specifier.type) {
|
|||
|
|
case "s": {
|
|||
|
|
var value = Math.max(Math.abs(start), Math.abs(stop));
|
|||
|
|
if (specifier.precision == null && !isNaN(precision = precisionPrefix(step, value))) specifier.precision = precision;
|
|||
|
|
return formatPrefix(specifier, value);
|
|||
|
|
}
|
|||
|
|
case "":
|
|||
|
|
case "e":
|
|||
|
|
case "g":
|
|||
|
|
case "p":
|
|||
|
|
case "r": {
|
|||
|
|
if (specifier.precision == null && !isNaN(precision = precisionRound(step, Math.max(Math.abs(start), Math.abs(stop))))) specifier.precision = precision - (specifier.type === "e");
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
case "f":
|
|||
|
|
case "%": {
|
|||
|
|
if (specifier.precision == null && !isNaN(precision = precisionFixed(step))) specifier.precision = precision - (specifier.type === "%") * 2;
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return format(specifier);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function linearish(scale) {
|
|||
|
|
var domain = scale.domain;
|
|||
|
|
|
|||
|
|
scale.ticks = function(count) {
|
|||
|
|
var d = domain();
|
|||
|
|
return ticks(d[0], d[d.length - 1], count == null ? 10 : count);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
scale.tickFormat = function(count, specifier) {
|
|||
|
|
var d = domain();
|
|||
|
|
return tickFormat(d[0], d[d.length - 1], count == null ? 10 : count, specifier);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
scale.nice = function(count) {
|
|||
|
|
if (count == null) count = 10;
|
|||
|
|
|
|||
|
|
var d = domain();
|
|||
|
|
var i0 = 0;
|
|||
|
|
var i1 = d.length - 1;
|
|||
|
|
var start = d[i0];
|
|||
|
|
var stop = d[i1];
|
|||
|
|
var prestep;
|
|||
|
|
var step;
|
|||
|
|
var maxIter = 10;
|
|||
|
|
|
|||
|
|
if (stop < start) {
|
|||
|
|
step = start, start = stop, stop = step;
|
|||
|
|
step = i0, i0 = i1, i1 = step;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
while (maxIter-- > 0) {
|
|||
|
|
step = tickIncrement(start, stop, count);
|
|||
|
|
if (step === prestep) {
|
|||
|
|
d[i0] = start;
|
|||
|
|
d[i1] = stop;
|
|||
|
|
return domain(d);
|
|||
|
|
} else if (step > 0) {
|
|||
|
|
start = Math.floor(start / step) * step;
|
|||
|
|
stop = Math.ceil(stop / step) * step;
|
|||
|
|
} else if (step < 0) {
|
|||
|
|
start = Math.ceil(start * step) / step;
|
|||
|
|
stop = Math.floor(stop * step) / step;
|
|||
|
|
} else {
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
prestep = step;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return scale;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return scale;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function linear() {
|
|||
|
|
var scale = continuous();
|
|||
|
|
|
|||
|
|
scale.copy = function() {
|
|||
|
|
return copy$1(scale, linear());
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
initRange.apply(scale, arguments);
|
|||
|
|
|
|||
|
|
return linearish(scale);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function transformer() {
|
|||
|
|
var x0 = 0,
|
|||
|
|
x1 = 1,
|
|||
|
|
t0,
|
|||
|
|
t1,
|
|||
|
|
k10,
|
|||
|
|
transform,
|
|||
|
|
interpolator = identity$1,
|
|||
|
|
clamp = false,
|
|||
|
|
unknown;
|
|||
|
|
|
|||
|
|
function scale(x) {
|
|||
|
|
return x == null || isNaN(x = +x) ? unknown : interpolator(k10 === 0 ? 0.5 : (x = (transform(x) - t0) * k10, clamp ? Math.max(0, Math.min(1, x)) : x));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
scale.domain = function(_) {
|
|||
|
|
return arguments.length ? ([x0, x1] = _, t0 = transform(x0 = +x0), t1 = transform(x1 = +x1), k10 = t0 === t1 ? 0 : 1 / (t1 - t0), scale) : [x0, x1];
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
scale.clamp = function(_) {
|
|||
|
|
return arguments.length ? (clamp = !!_, scale) : clamp;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
scale.interpolator = function(_) {
|
|||
|
|
return arguments.length ? (interpolator = _, scale) : interpolator;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
function range(interpolate) {
|
|||
|
|
return function(_) {
|
|||
|
|
var r0, r1;
|
|||
|
|
return arguments.length ? ([r0, r1] = _, interpolator = interpolate(r0, r1), scale) : [interpolator(0), interpolator(1)];
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
scale.range = range(interpolate);
|
|||
|
|
|
|||
|
|
scale.rangeRound = range(interpolateRound);
|
|||
|
|
|
|||
|
|
scale.unknown = function(_) {
|
|||
|
|
return arguments.length ? (unknown = _, scale) : unknown;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return function(t) {
|
|||
|
|
transform = t, t0 = t(x0), t1 = t(x1), k10 = t0 === t1 ? 0 : 1 / (t1 - t0);
|
|||
|
|
return scale;
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function copy(source, target) {
|
|||
|
|
return target
|
|||
|
|
.domain(source.domain())
|
|||
|
|
.interpolator(source.interpolator())
|
|||
|
|
.clamp(source.clamp())
|
|||
|
|
.unknown(source.unknown());
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function sequential() {
|
|||
|
|
var scale = linearish(transformer()(identity$1));
|
|||
|
|
|
|||
|
|
scale.copy = function() {
|
|||
|
|
return copy(scale, sequential());
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return initInterpolator.apply(scale, arguments);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const COLOR_BASE = "#cecece";
|
|||
|
|
|
|||
|
|
// https://www.w3.org/TR/WCAG20/#relativeluminancedef
|
|||
|
|
const rc = 0.2126;
|
|||
|
|
const gc = 0.7152;
|
|||
|
|
const bc = 0.0722;
|
|||
|
|
// low-gamma adjust coefficient
|
|||
|
|
const lowc = 1 / 12.92;
|
|||
|
|
function adjustGamma(p) {
|
|||
|
|
return Math.pow((p + 0.055) / 1.055, 2.4);
|
|||
|
|
}
|
|||
|
|
function relativeLuminance(o) {
|
|||
|
|
const rsrgb = o.r / 255;
|
|||
|
|
const gsrgb = o.g / 255;
|
|||
|
|
const bsrgb = o.b / 255;
|
|||
|
|
const r = rsrgb <= 0.03928 ? rsrgb * lowc : adjustGamma(rsrgb);
|
|||
|
|
const g = gsrgb <= 0.03928 ? gsrgb * lowc : adjustGamma(gsrgb);
|
|||
|
|
const b = bsrgb <= 0.03928 ? bsrgb * lowc : adjustGamma(bsrgb);
|
|||
|
|
return r * rc + g * gc + b * bc;
|
|||
|
|
}
|
|||
|
|
const createRainbowColor = (root) => {
|
|||
|
|
const colorParentMap = new Map();
|
|||
|
|
colorParentMap.set(root, COLOR_BASE);
|
|||
|
|
if (root.children != null) {
|
|||
|
|
const colorScale = sequential([0, root.children.length], (n) => hsl(360 * n, 0.3, 0.85));
|
|||
|
|
root.children.forEach((c, id) => {
|
|||
|
|
colorParentMap.set(c, colorScale(id).toString());
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
const colorMap = new Map();
|
|||
|
|
const lightScale = linear().domain([0, root.height]).range([0.9, 0.3]);
|
|||
|
|
const getBackgroundColor = (node) => {
|
|||
|
|
const parents = node.ancestors();
|
|||
|
|
const colorStr = parents.length === 1 ? colorParentMap.get(parents[0]) : colorParentMap.get(parents[parents.length - 2]);
|
|||
|
|
const hslColor = hsl(colorStr);
|
|||
|
|
hslColor.l = lightScale(node.depth);
|
|||
|
|
return hslColor;
|
|||
|
|
};
|
|||
|
|
return (node) => {
|
|||
|
|
if (!colorMap.has(node)) {
|
|||
|
|
const backgroundColor = getBackgroundColor(node);
|
|||
|
|
const l = relativeLuminance(backgroundColor.rgb());
|
|||
|
|
const fontColor = l > 0.19 ? "#000" : "#fff";
|
|||
|
|
colorMap.set(node, {
|
|||
|
|
backgroundColor: backgroundColor.toString(),
|
|||
|
|
fontColor,
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
return colorMap.get(node);
|
|||
|
|
};
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const StaticContext = D({});
|
|||
|
|
const drawChart = (parentNode, data, width, height) => {
|
|||
|
|
const availableSizeProperties = getAvailableSizeOptions(data.options);
|
|||
|
|
console.time("layout create");
|
|||
|
|
const layout = treemap()
|
|||
|
|
.size([width, height])
|
|||
|
|
.paddingOuter(PADDING)
|
|||
|
|
.paddingTop(TOP_PADDING)
|
|||
|
|
.paddingInner(PADDING)
|
|||
|
|
.round(true)
|
|||
|
|
.tile(treemapResquarify);
|
|||
|
|
console.timeEnd("layout create");
|
|||
|
|
console.time("rawHierarchy create");
|
|||
|
|
const rawHierarchy = hierarchy(data.tree);
|
|||
|
|
console.timeEnd("rawHierarchy create");
|
|||
|
|
const nodeSizesCache = new Map();
|
|||
|
|
const nodeIdsCache = new Map();
|
|||
|
|
const getModuleSize = (node, sizeKey) => { var _a, _b; return (_b = (_a = nodeSizesCache.get(node)) === null || _a === void 0 ? void 0 : _a[sizeKey]) !== null && _b !== void 0 ? _b : 0; };
|
|||
|
|
console.time("rawHierarchy eachAfter cache");
|
|||
|
|
rawHierarchy.eachAfter((node) => {
|
|||
|
|
var _a;
|
|||
|
|
const nodeData = node.data;
|
|||
|
|
nodeIdsCache.set(nodeData, {
|
|||
|
|
nodeUid: generateUniqueId("node"),
|
|||
|
|
clipUid: generateUniqueId("clip"),
|
|||
|
|
});
|
|||
|
|
const sizes = { renderedLength: 0, gzipLength: 0, brotliLength: 0 };
|
|||
|
|
if (isModuleTree(nodeData)) {
|
|||
|
|
for (const sizeKey of availableSizeProperties) {
|
|||
|
|
sizes[sizeKey] = nodeData.children.reduce((acc, child) => getModuleSize(child, sizeKey) + acc, 0);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
for (const sizeKey of availableSizeProperties) {
|
|||
|
|
sizes[sizeKey] = (_a = data.nodeParts[nodeData.uid][sizeKey]) !== null && _a !== void 0 ? _a : 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
nodeSizesCache.set(nodeData, sizes);
|
|||
|
|
});
|
|||
|
|
console.timeEnd("rawHierarchy eachAfter cache");
|
|||
|
|
const getModuleIds = (node) => nodeIdsCache.get(node);
|
|||
|
|
console.time("color");
|
|||
|
|
const getModuleColor = createRainbowColor(rawHierarchy);
|
|||
|
|
console.timeEnd("color");
|
|||
|
|
S(e$1(StaticContext.Provider, Object.assign({ value: {
|
|||
|
|
data,
|
|||
|
|
availableSizeProperties,
|
|||
|
|
width,
|
|||
|
|
height,
|
|||
|
|
getModuleSize,
|
|||
|
|
getModuleIds,
|
|||
|
|
getModuleColor,
|
|||
|
|
rawHierarchy,
|
|||
|
|
layout,
|
|||
|
|
} }, { children: e$1(Main, {}, void 0) }), void 0), parentNode);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
exports.StaticContext = StaticContext;
|
|||
|
|
exports["default"] = drawChart;
|
|||
|
|
|
|||
|
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|||
|
|
|
|||
|
|
return exports;
|
|||
|
|
|
|||
|
|
})({});
|
|||
|
|
//# sourceMappingURL=treemap.js.map
|
|||
|
|
|
|||
|
|
/*-->*/
|
|||
|
|
</script>
|
|||
|
|
<script>
|
|||
|
|
/*<!--*/
|
|||
|
|
const data = {"version":2,"tree":{"name":"root","children":[{"name":"budibase-client.js","children":[{"name":"node_modules","children":[{"name":"svelte","children":[{"name":"internal/index.mjs","uid":"70ce-161115"},{"name":"store/index.mjs","uid":"70ce-161117"},{"name":"easing/index.mjs","uid":"70ce-161171"},{"name":"transition/index.mjs","uid":"70ce-161173"}]},{"name":"style-inject/dist/style-inject.es.js","uid":"70ce-161119"},{"name":"@spectrum-css","children":[{"name":"vars/dist","children":[{"uid":"70ce-161569","name":"spectrum-global.css"},{"uid":"70ce-161571","name":"spectrum-medium.css"},{"uid":"70ce-161573","name":"spectrum-large.css"},{"uid":"70ce-161575","name":"spectrum-lightest.css"},{"uid":"70ce-161577","name":"spectrum-light.css"},{"uid":"70ce-161579","name":"spectrum-dark.css"},{"uid":"70ce-161581","name":"spectrum-darkest.css"}]},{"name":"page/dist/index-vars.css","uid":"70ce-161583"},{"name":"divider/dist/index-vars.css","uid":"70ce-161601"},{"name":"button/dist/index-vars.css","uid":"70ce-161609"},{"name":"typography/dist/index-vars.css","uid":"70ce-161639"},{"name":"card/dist/index-vars.css","uid":"70ce-161671"},{"name":"tag/dist/index-vars.css","uid":"70ce-161677"}]},{"name":"svelte-spa-router","children":[{"name":"node_modules/regexparam/dist/index.mjs","uid":"70ce-161625"},{"uid":"70ce-161627","name":"Router.svelte"},{"uid":"70ce-161629","name":"active.js"}]},{"name":"dayjs","children":[{"uid":"70ce-161661","name":"dayjs.min.js"},{"name":"plugin/utc.js","uid":"70ce-161663"}]},{"name":"apexcharts/dist/apexcharts.common.js","uid":"70ce-161687"},{"name":"svelte-apexcharts/src/index.js","uid":"70ce-161689"},{"name":"flatpickr/dist/esm","children":[{"name":"types/options.js","uid":"70ce-161707"},{"name":"l10n/default.js","uid":"70ce-161709"},{"name":"utils","children":[{"uid":"70ce-161711","name":"index.js"},{"uid":"70ce-161713","name":"dom.js"},{"uid":"70ce-161715","name":"formatting.js"},{"uid":"70ce-161717","name":"dates.js"},{"uid":"70ce-161719","name":"polyfills.js"}]},{"uid":"70ce-161721","name":"index.js"}]},{"name":"shortid","children":[{"name":"lib","children":[{"name":"random","children":[{"uid":"70ce-161779","name":"random-from-seed.js"},{"uid":"70ce-161783","name":"random-byte-browser.js"}]},{"uid":"70ce-161781","name":"alphabet.js"},{"uid":"70ce-161789","name":"generate.js"},{"uid":"70ce-161791","name":"build.js"},{"uid":"70ce-161793","name":"is-valid.js"},{"uid":"70ce-161795","name":"index.js"}]},{"name":"node_modules/nanoid/format.browser.js","uid":"70ce-161785"},{"uid":"70ce-161797","name":"index.js"}]}]},{"name":"home/aptk/dev/budibase/packages","children":[{"name":"bbui","children":[{"name":"src","children":[{"uid":"70ce-161121","name":"bbui.css"},{"name":"Tooltip","children":[{"uid":"70ce-161129","name":"Tooltip.svelte"},{"uid":"70ce-161135","name":"TooltipWrapper.css"},{"uid":"70ce-161137","name":"TooltipWrapper.svelte"}]},{"name":"Icon","children":[{"uid":"70ce-161131","name":"Icon.css"},{"uid":"70ce-161133","name":"Icon.svelte"}]},{"name":"Form","children":[{"uid":"70ce-161139","name":"FieldLabel.css"},{"uid":"70ce-161141","name":"FieldLabel.svelte"},{"uid":"70ce-161143","name":"Field.css"},{"uid":"70ce-161145","name":"Field.svelte"},{"name":"Core","children":[{"uid":"70ce-161149","name":"TextField.css"},{"uid":"70ce-161151","name":"TextField.svelte"},{"uid":"70ce-161159","name":"Stepper.css"},{"uid":"70ce-161161","name":"TextArea.css"},{"uid":"70ce-161163","name":"TextArea.svelte"},{"uid":"70ce-161179","name":"Search.css"},{"uid":"70ce-161181","name":"Search.svelte"},{"uid":"70ce-161183","name":"Picker.css"},{"uid":"70ce-161185","name":"Picker.svelte"},{"uid":"70ce-161187","name":"Select.svelte"},{"uid":"70ce-161193","name":"Combobox.css"},{"uid":"70ce-161195","name":"Combobox.svelte"},{"uid":"70ce-161227","name":"Dropzone.css"},{"uid":"70ce-161229","name":"Dropzone.svelte"},{"uid":"70ce-161261","name":"Switch.css"},{"uid":"70ce-161267","name":"RadioGroup.css"},{"uid":"70ce-161269","name":"RadioGroup.svelte"},{"uid":"70ce-161273","name":"Checkbox.css"},{"uid":"70ce-161275","na
|
|||
|
|
|
|||
|
|
const run = () => {
|
|||
|
|
const width = window.innerWidth;
|
|||
|
|
const height = window.innerHeight;
|
|||
|
|
|
|||
|
|
const chartNode = document.querySelector("main");
|
|||
|
|
drawChart.default(chartNode, data, width, height);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
window.addEventListener('resize', run);
|
|||
|
|
|
|||
|
|
document.addEventListener('DOMContentLoaded', run);
|
|||
|
|
/*-->*/
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|
|||
|
|
|