"===t?(r=1,e=""):e=t+e[0]:u?t===u?u="":e+=t:'"'===t||"'"===t?u=t:">"===t?(p(),r=1):r&&("="===t?(r=5,s=e,e=""):"/"===t&&(r<5||">"===n[a][l+1])?(p(),3===r&&(h=h[0]),r=h,(h=h[0]).push(2,0,r),r=0):" "===t||"\t"===t||"\n"===t||"\r"===t?(p(),r=2):e+=t),3===r&&"!--"===e&&(r=4,h=h[0]);}return p(),h}(s)),r),arguments,[])).length>1?r:r[0]}
- 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);
- }
+ var m$1=e$1.bind(v);
- 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;
- }
+ var t$2,u$1,r$1,o$1=0,i$1=[],c$1=n.__r,f$1=n.diffed,e$2=n.__c,a$1=n.unmount;function v$1(t,r){n.__h&&n.__h(u$1,t,o$1||r),o$1=0;var i=u$1.__H||(u$1.__H={__:[],__h:[]});return t>=i.__.length&&i.__.push({}),i.__[t]}function m$2(n){return o$1=1,p$1(k$1,n)}function p$1(n,r,o){var i=v$1(t$2++,2);return i.t=n,i.__c||(i.__c=u$1,i.__=[o?o(r):k$1(void 0,r),function(n){var t=i.t(i.__[0],n);i.__[0]!==t&&(i.__=[t,i.__[1]],i.__c.setState({}));}]),i.__}function y(r,o){var i=v$1(t$2++,3);!n.__s&&j$1(i.__H,o)&&(i.__=r,i.__H=o,u$1.__H.__h.push(i));}function h$1(n){return o$1=5,_$1(function(){return {current:n}},[])}function _$1(n,u){var r=v$1(t$2++,7);return j$1(r.__H,u)?(r.__H=u,r.__h=n,r.__=n()):r.__}function q(){i$1.some(function(t){if(t.__P)try{t.__H.__h.forEach(b),t.__H.__h.forEach(g$1),t.__H.__h=[];}catch(u){return t.__H.__h=[],n.__e(u,t.__v),!0}}),i$1=[];}n.__r=function(n){c$1&&c$1(n),t$2=0;var r=(u$1=n.__c).__H;r&&(r.__h.forEach(b),r.__h.forEach(g$1),r.__h=[]);},n.diffed=function(t){f$1&&f$1(t);var u=t.__c;u&&u.__H&&u.__H.__h.length&&(1!==i$1.push(u)&&r$1===n.requestAnimationFrame||((r$1=n.requestAnimationFrame)||function(n){var t,u=function(){clearTimeout(r),x$1&&cancelAnimationFrame(t),setTimeout(n);},r=setTimeout(u,100);x$1&&(t=requestAnimationFrame(u));})(q));},n.__c=function(t,u){u.some(function(t){try{t.__h.forEach(b),t.__h=t.__h.filter(function(n){return !n.__||g$1(n)});}catch(r){u.some(function(n){n.__h&&(n.__h=[]);}),u=[],n.__e(r,t.__v);}}),e$2&&e$2(t,u);},n.unmount=function(t){a$1&&a$1(t);var u=t.__c;if(u&&u.__H)try{u.__H.__.forEach(b);}catch(t){n.__e(t,u.__v);}};var x$1="function"==typeof requestAnimationFrame;function b(n){"function"==typeof n.u&&n.u();}function g$1(n){n.u=n.__();}function j$1(n,t){return !n||t.some(function(t,u){return t!==n[u]})}function k$1(n,t){return "function"==typeof t?t(n):t}
function count(node) {
var sum = 0,
@@ -254,45 +165,52 @@
return this.eachAfter(count);
}
- function node_each(callback) {
- var node = this, current, next = [node], children, i, n;
- do {
- current = next.reverse(), next = [];
- while (node = current.pop()) {
- callback(node), children = node.children;
- if (children) for (i = 0, n = children.length; i < n; ++i) {
- next.push(children[i]);
- }
- }
- } while (next.length);
+ 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) {
- var node = this, nodes = [node], children, i;
+ function node_eachBefore(callback, that) {
+ var node = this, nodes = [node], children, i, index = -1;
while (node = nodes.pop()) {
- callback(node), children = node.children;
- if (children) for (i = children.length - 1; i >= 0; --i) {
- nodes.push(children[i]);
+ 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) {
- var node = this, nodes = [node], next = [], children, i, n;
+ function node_eachAfter(callback, that) {
+ var node = this, nodes = [node], next = [], children, i, n, index = -1;
while (node = nodes.pop()) {
- next.push(node), children = node.children;
- if (children) for (i = 0, n = children.length; i < n; ++i) {
- nodes.push(children[i]);
+ 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(node);
+ 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,
@@ -351,11 +269,7 @@
}
function node_descendants() {
- var nodes = [];
- this.each(function(node) {
- nodes.push(node);
- });
- return nodes;
+ return Array.from(this);
}
function node_leaves() {
@@ -378,9 +292,30 @@
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(data),
- valued = +data.value && (root.value = data.value),
node,
nodes = [root],
child,
@@ -388,14 +323,11 @@
i,
n;
- if (children == null) children = defaultChildren;
-
while (node = nodes.pop()) {
- if (valued) node.value = +node.data.value;
- if ((childs = children(node.data)) && (n = childs.length)) {
- node.children = new Array(n);
+ if ((childs = children(node.data)) && (n = (childs = Array.from(childs)).length)) {
+ node.children = childs;
for (i = n - 1; i >= 0; --i) {
- nodes.push(child = node.children[i] = new Node(childs[i]));
+ nodes.push(child = childs[i] = new Node(childs[i]));
child.parent = node;
child.depth = node.depth + 1;
}
@@ -409,11 +341,16 @@
return hierarchy(this).eachBefore(copyData);
}
- function defaultChildren(d) {
+ 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;
}
@@ -436,6 +373,7 @@
each: node_each,
eachAfter: node_eachAfter,
eachBefore: node_eachBefore,
+ find: node_find,
sum: node_sum,
sort: node_sort,
path: node_path,
@@ -443,7 +381,8 @@
descendants: node_descendants,
leaves: node_leaves,
links: node_links,
- copy: node_copy
+ copy: node_copy,
+ [Symbol.iterator]: node_iterator
};
function required(f) {
@@ -664,8 +603,8 @@
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, y0 += (y1 - y0) * row.value / value);
- else treemapSlice(row, x0, y0, x0 += (x1 - x0) * row.value / value, y1);
+ 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 {
@@ -681,69 +620,254 @@
return resquarify;
})(phi);
- /*!
- * bytes
- * Copyright(c) 2012-2014 TJ Holowaychuk
- * Copyright(c) 2015 Jed Watson
- * MIT Licensed
- */
- var format_1 = format;
-
- /**
- * Module variables.
- * @private
- */
+ const LABELS = {
+ renderedLength: "Rendered",
+ gzipLength: "Gzip",
+ brotliLength: "Brotli",
+ };
- var formatThousandsRegExp = /\B(?=(\d{3})+(?!\d))/g;
+ const getAvailableSizeOptions = (options = {}) => {
+ const availableSizeProperties = ["renderedLength"];
+ if (options.gzip) {
+ availableSizeProperties.push("gzipLength");
+ }
+ if (options.brotli) {
+ availableSizeProperties.push("brotliLength");
+ }
- var formatDecimalsRegExp = /(?:\.0*|(\.[^0]+)0+)$/;
+ return availableSizeProperties;
+ };
- var map = {
- b: 1,
- kb: 1 << 10,
- mb: 1 << 20,
- gb: 1 << 30,
- tb: Math.pow(1024, 4),
- pb: Math.pow(1024, 5),
+ const SideBar = ({
+ availableSizeProperties,
+ sizeProperty,
+ setSizeProperty,
+ }) => {
+ const handleChange = (sizeProp) => () => {
+ if (sizeProp !== sizeProperty) {
+ setSizeProperty(sizeProp);
+ }
+ };
+ return m$1`
+
+ `;
};
- /**
- * 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 ascending(a, b) {
+ return a < b ? -1 : a > b ? 1 : a >= b ? 0 : NaN;
+ }
- function format(value, options) {
- if (!Number.isFinite(value)) {
- return null;
+ function bisector(f) {
+ let delta = f;
+ let compare = f;
+
+ if (f.length === 1) {
+ delta = (d, x) => f(d) - x;
+ compare = ascendingComparator(f);
}
- 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) || '';
+ function left(a, x, lo, hi) {
+ if (lo == null) lo = 0;
+ if (hi == null) hi = a.length;
+ while (lo < hi) {
+ const mid = (lo + hi) >>> 1;
+ if (compare(a[mid], x) < 0) lo = mid + 1;
+ else hi = mid;
+ }
+ return lo;
+ }
- if (!unit || !map[unit.toLowerCase()]) {
- if (mag >= map.pb) {
- unit = 'PB';
- } else if (mag >= map.tb) {
- unit = 'TB';
- } else if (mag >= map.gb) {
- unit = 'GB';
+ function right(a, x, lo, hi) {
+ if (lo == null) lo = 0;
+ if (hi == null) hi = a.length;
+ while (lo < hi) {
+ const mid = (lo + hi) >>> 1;
+ if (compare(a[mid], x) > 0) hi = mid;
+ else lo = mid + 1;
+ }
+ return lo;
+ }
+
+ function center(a, x, lo, hi) {
+ if (lo == null) lo = 0;
+ if (hi == null) hi = a.length;
+ const i = left(a, x, lo, hi);
+ return i > lo && delta(a[i - 1], x) > -delta(a[i], x) ? i - 1 : i;
+ }
+
+ return {left, center, right};
+ }
+
+ function ascendingComparator(f) {
+ return (d, x) => ascending(f(d), x);
+ }
+
+ var ascendingBisect = bisector(ascending);
+ var bisectRight = ascendingBisect.right;
+
+ function identity(x) {
+ return x;
+ }
+
+ function group(values, ...keys) {
+ return nest(values, identity, identity, keys);
+ }
+
+ function nest(values, map, reduce, keys) {
+ return (function regroup(values, i) {
+ if (i >= keys.length) return reduce(values);
+ const groups = new Map();
+ 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) {
+ start = Math.ceil(start / step);
+ stop = Math.floor(stop / step);
+ ticks = new Array(n = Math.ceil(stop - start + 1));
+ while (++i < n) ticks[i] = (start + i) * step;
+ } else {
+ step = -step;
+ start = Math.ceil(start * step);
+ stop = Math.floor(stop * step);
+ ticks = new Array(n = Math.ceil(stop - start + 1));
+ while (++i < n) ticks[i] = (start + 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;
+ }
+
+ /*!
+ * bytes
+ * Copyright(c) 2012-2014 TJ Holowaychuk
+ * Copyright(c) 2015 Jed Watson
+ * MIT Licensed
+ */
+ var format_1 = format;
+
+ /**
+ * Module variables.
+ * @private
+ */
+
+ var formatThousandsRegExp = /\B(?=(\d{3})+(?!\d))/g;
+
+ var formatDecimalsRegExp = /(?:\.0*|(\.[^0]+)0+)$/;
+
+ var map = {
+ b: 1,
+ kb: 1 << 10,
+ mb: 1 << 20,
+ gb: 1 << 30,
+ tb: Math.pow(1024, 4),
+ pb: Math.pow(1024, 5),
+ };
+
+ /**
+ * 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(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[unit.toLowerCase()]) {
+ if (mag >= map.pb) {
+ unit = 'PB';
+ } else if (mag >= map.tb) {
+ unit = 'TB';
+ } else if (mag >= map.gb) {
+ unit = 'GB';
} else if (mag >= map.mb) {
unit = 'MB';
} else if (mag >= map.kb) {
@@ -767,6 +891,329 @@
return str + unitSeparator + unit;
}
+ const Node$1 = ({
+ node,
+ backgroundColor,
+ fontColor,
+ onClick,
+ isSelected,
+ onNodeHover,
+ sizeProperty,
+ }) => {
+ const {
+ nodeUid,
+ x0,
+ x1,
+ y1,
+ y0,
+ clipUid,
+ data,
+ originalValue,
+ children = null,
+ } = node;
+
+ const tspan1Props = {};
+ const tspan2Props = {};
+ if (children != null) {
+ tspan1Props.dx = 3;
+ tspan2Props.dx = 3;
+ tspan1Props.y = 13;
+ tspan2Props.y = 13;
+ } else {
+ tspan1Props.x = 3;
+ tspan2Props.x = 3;
+ tspan1Props.y = "1.1em";
+ tspan2Props.y = "2.3em";
+ }
+
+ const handleClickSelection = (event) => {
+ if (window.getSelection().toString() !== "") {
+ event.stopPropagation();
+ }
+ };
+
+ return m$1`
+ {
+ evt.stopPropagation();
+ onNodeHover(node);
+ }}
+ >
+
+
+
+
+
+
+ ${data.name}
+ ${format_1(originalValue[sizeProperty])}
+
+
+ `;
+ };
+
+ const TreeMap = ({
+ root,
+ layout,
+ color,
+ width,
+ height,
+ onNodeHover,
+ sizeProperty,
+ }) => {
+ const [selectedNode, setSelectedNode] = m$2(null);
+
+ const desiredValue = root.originalValue[sizeProperty] * 0.2;
+
+ //handle zoom of selected node
+ const selectedNodeMultiplier =
+ selectedNode != null
+ ? desiredValue > selectedNode.originalValue[sizeProperty]
+ ? desiredValue / selectedNode.originalValue[sizeProperty]
+ : 3
+ : 1;
+
+ // i only need to increase value of leaf nodes
+ // as folders will sum they up
+ const nodesToIncrease =
+ selectedNode != null
+ ? selectedNode.children != null
+ ? selectedNode.leaves()
+ : [selectedNode]
+ : [];
+
+ const nodesToIncreaseSet = new Set(nodesToIncrease);
+
+ // update value for nodes
+ root = root.eachAfter((node) => {
+ let sum = 0;
+ const children = node.children;
+ if (children != null) {
+ let i = children.length;
+ while (--i >= 0) sum += children[i].value;
+ } else {
+ sum = nodesToIncreaseSet.has(node)
+ ? node.originalValue[sizeProperty] * selectedNodeMultiplier
+ : node.originalValue[sizeProperty];
+ }
+
+ node.value = sum;
+ });
+
+ layout(root);
+
+ // this will make groups by height
+ 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 m$1`
+
+ `;
+ };
+
+ const Tooltip = ({
+ node,
+ visible,
+ root,
+ sizeProperty,
+ availableSizeProperties,
+ importedByCache,
+ }) => {
+ const ref = h$1();
+ const [style, setStyle] = m$2({});
+ const content = _$1(() => {
+ if (!node) return null;
+
+ const mainSize = node.originalValue[sizeProperty];
+
+ const percentageNum = (100 * mainSize) / root.originalValue[sizeProperty];
+ const percentage = percentageNum.toFixed(2);
+ const percentageString = percentage + "%";
+
+ const uid = node.data.uid;
+
+ const path = node
+ .ancestors()
+ .reverse()
+ .map((d) => d.data.name)
+ .join("/");
+
+ return m$1`
+ ${path}
+ ${availableSizeProperties.map((sizeProp) => {
+ if (sizeProp === sizeProperty) {
+ return m$1`
+
+ ${LABELS[sizeProp]}:${" "}${format_1(mainSize)}${" "}(${percentageString})
+
+ `;
+ } else {
+ return m$1`
+
+ ${LABELS[sizeProp]}:${" "}
+ ${format_1(node.originalValue[sizeProp])}
+
+ `;
+ }
+ })}
+ ${uid &&
+ importedByCache.has(uid) &&
+ m$1`
+
+
Imported By:
+ ${[...new Set(importedByCache.get(uid).map(({ id }) => id))].map(
+ (id) => m$1`
${id}
`
+ )}
+
+ ${content}
+
+ `;
+ };
+
+ Tooltip.marginX = 10;
+ Tooltip.marginY = 30;
+
+ const Chart = ({
+ layout,
+ root,
+ color,
+ width,
+ height,
+ sizeProperty,
+ availableSizeProperties,
+ importedCache,
+ importedByCache,
+ }) => {
+ const [showTooltip, setShowTooltip] = m$2(false);
+ const [tooltipNode, setTooltipNode] = m$2(null);
+
+ const handleMouseOut = () => {
+ setShowTooltip(false);
+ };
+
+ y(() => {
+ document.addEventListener("mouseover", handleMouseOut);
+ return () => {
+ document.removeEventListener("mouseover", handleMouseOut);
+ };
+ }, []);
+
+ return m$1`
+ <${TreeMap}
+ layout=${layout}
+ root=${root}
+ color=${color}
+ width=${width}
+ height=${height}
+ sizeProperty=${sizeProperty}
+ availableSizeProperties=${availableSizeProperties}
+ onNodeHover=${(node) => {
+ setTooltipNode(node);
+ setShowTooltip(true);
+ }}
+ />
+ <${Tooltip}
+ visible=${showTooltip}
+ node=${tooltipNode}
+ root=${root}
+ sizeProperty=${sizeProperty}
+ availableSizeProperties=${availableSizeProperties}
+ importedByCache=${importedByCache}
+ importedCache=${importedCache}
+ />
+ `;
+ };
+
let count$1 = 0;
class Id {
@@ -1035,8 +1482,8 @@
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 ? new Rgb(m >> 24 & 0xff, m >> 16 & 0xff, m >> 8 & 0xff, (m & 0xff) / 0xff) // #ff000000
- : l === 4 ? new Rgb((m >> 12 & 0xf) | (m >> 8 & 0xf0), (m >> 8 & 0xf) | (m >> 4 & 0xf0), (m >> 4 & 0xf) | (m & 0xf0), (((m & 0xf) << 4) | (m & 0xf)) / 0xff) // #f000
+ : 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%)
@@ -1207,31 +1654,7 @@
: m1) * 255;
}
- function basis(t1, v0, v1, v2, v3) {
- var t2 = t1 * t1, t3 = t2 * t1;
- return ((1 - 3 * t1 + 3 * t2 - t3) * v0
- + (4 - 6 * t2 + 3 * t3) * v1
- + (1 + 3 * t1 + 3 * t2 - 3 * t3) * v2
- + t3 * v3) / 6;
- }
-
- function basis$1(values) {
- var n = values.length - 1;
- return function(t) {
- var i = t <= 0 ? (t = 0) : t >= 1 ? (t = 1, n - 1) : Math.floor(t * n),
- v1 = values[i],
- v2 = values[i + 1],
- v0 = i > 0 ? values[i - 1] : 2 * v1 - v2,
- v3 = i < n - 1 ? values[i + 2] : 2 * v2 - v1;
- return basis((t - i / n) * n, v0, v1, v2, v3);
- };
- }
-
- function constant$1(x) {
- return function() {
- return x;
- };
- }
+ var constant$1 = x => () => x;
function linear(a, d) {
return function(t) {
@@ -1278,34 +1701,6 @@
return rgb$1;
})(1);
- function rgbSpline(spline) {
- return function(colors) {
- var n = colors.length,
- r = new Array(n),
- g = new Array(n),
- b = new Array(n),
- i, color;
- for (i = 0; i < n; ++i) {
- color = rgb(colors[i]);
- r[i] = color.r || 0;
- g[i] = color.g || 0;
- b[i] = color.b || 0;
- }
- r = spline(r);
- g = spline(g);
- b = spline(b);
- color.opacity = 1;
- return function(t) {
- color.r = r(t);
- color.g = g(t);
- color.b = b(t);
- return color + "";
- };
- };
- }
-
- var rgbBasis = rgbSpline(basis$1);
-
function numberArray(a, b) {
if (!b) b = [];
var n = a ? Math.min(b.length, a.length) : 0,
@@ -1585,10 +1980,16 @@
return transformer()(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, formatDecimal(1.23) returns ["123", 0].
- function formatDecimal(x, p) {
+ // 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);
@@ -1601,7 +2002,7 @@
}
function exponent(x) {
- return x = formatDecimal(Math.abs(x)), x ? x[1] : NaN;
+ return x = formatDecimalParts(Math.abs(x)), x ? x[1] : NaN;
}
function formatGroup(grouping, thousands) {
@@ -1694,7 +2095,7 @@
var prefixExponent;
function formatPrefixAuto(x, p) {
- var d = formatDecimal(x, p);
+ var d = formatDecimalParts(x, p);
if (!d) return x + "";
var coefficient = d[0],
exponent = d[1],
@@ -1703,11 +2104,11 @@
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") + formatDecimal(x, Math.max(0, p + i - 1))[0]; // less than 1y!
+ : "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 = formatDecimal(x, p);
+ var d = formatDecimalParts(x, p);
if (!d) return x + "";
var coefficient = d[0],
exponent = d[1];
@@ -1717,19 +2118,19 @@
}
var formatTypes = {
- "%": function(x, p) { return (x * 100).toFixed(p); },
- "b": function(x) { return Math.round(x).toString(2); },
- "c": function(x) { return x + ""; },
- "d": function(x) { return Math.round(x).toString(10); },
- "e": function(x, p) { return x.toExponential(p); },
- "f": function(x, p) { return x.toFixed(p); },
- "g": function(x, p) { return x.toPrecision(p); },
- "o": function(x) { return Math.round(x).toString(8); },
- "p": function(x, p) { return formatRounded(x * 100, p); },
+ "%": (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": function(x) { return Math.round(x).toString(16).toUpperCase(); },
- "x": function(x) { return Math.round(x).toString(16); }
+ "X": (x) => Math.round(x).toString(16).toUpperCase(),
+ "x": (x) => Math.round(x).toString(16)
};
function identity$2(x) {
@@ -1746,7 +2147,7 @@
decimal = locale.decimal === undefined ? "." : locale.decimal + "",
numerals = locale.numerals === undefined ? identity$2 : formatNumerals(map$1.call(locale.numerals, String)),
percent = locale.percent === undefined ? "%" : locale.percent + "",
- minus = locale.minus === undefined ? "-" : locale.minus + "",
+ minus = locale.minus === undefined ? "−" : locale.minus + "",
nan = locale.nan === undefined ? "NaN" : locale.nan + "";
function newFormat(specifier) {
@@ -1802,19 +2203,20 @@
} 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.
- var valueNegative = value < 0;
value = isNaN(value) ? nan : formatType(Math.abs(value), precision);
// Trim insignificant zeros.
if (trim) value = formatTrim(value);
- // If a negative value rounds to zero during formatting, treat as positive.
- if (valueNegative && +value === 0) valueNegative = false;
+ // 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
@@ -1880,11 +2282,9 @@
var formatPrefix;
defaultLocale({
- decimal: ".",
thousands: ",",
grouping: [3],
- currency: ["$", ""],
- minus: "-"
+ currency: ["$", ""]
});
function defaultLocale(definition) {
@@ -1950,38 +2350,36 @@
scale.nice = function(count) {
if (count == null) count = 10;
- var d = domain(),
- i0 = 0,
- i1 = d.length - 1,
- start = d[i0],
- stop = d[i1],
- step;
+ 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;
}
-
- step = tickIncrement(start, stop, count);
-
- if (step > 0) {
- start = Math.floor(start / step) * step;
- stop = Math.ceil(stop / step) * step;
+
+ while (maxIter-- > 0) {
step = tickIncrement(start, stop, count);
- } else if (step < 0) {
- start = Math.ceil(start * step) / step;
- stop = Math.floor(stop * step) / step;
- step = tickIncrement(start, stop, count);
- }
-
- if (step > 0) {
- d[i0] = Math.floor(start / step) * step;
- d[i1] = Math.ceil(stop / step) * step;
- domain(d);
- } else if (step < 0) {
- d[i0] = Math.ceil(start * step) / step;
- d[i1] = Math.floor(stop * step) / step;
- domain(d);
+ 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;
@@ -2040,500 +2438,99 @@
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$1(source, target) {
- return target
- .domain(source.domain())
- .interpolator(source.interpolator())
- .clamp(source.clamp())
- .unknown(source.unknown());
- }
-
- function sequential() {
- var scale = linearish(transformer$1()(identity$1));
-
- scale.copy = function() {
- return copy$1(scale, sequential());
- };
-
- return initInterpolator.apply(scale, arguments);
- }
-
- function colors(specifier) {
- var n = specifier.length / 6 | 0, colors = new Array(n), i = 0;
- while (i < n) colors[i] = "#" + specifier.slice(i * 6, ++i * 6);
- return colors;
- }
-
- function ramp(scheme) {
- return rgbBasis(scheme[scheme.length - 1]);
- }
-
- var scheme = new Array(3).concat(
- "fc8d59ffffbf99d594",
- "d7191cfdae61abdda42b83ba",
- "d7191cfdae61ffffbfabdda42b83ba",
- "d53e4ffc8d59fee08be6f59899d5943288bd",
- "d53e4ffc8d59fee08bffffbfe6f59899d5943288bd",
- "d53e4ff46d43fdae61fee08be6f598abdda466c2a53288bd",
- "d53e4ff46d43fdae61fee08bffffbfe6f598abdda466c2a53288bd",
- "9e0142d53e4ff46d43fdae61fee08be6f598abdda466c2a53288bd5e4fa2",
- "9e0142d53e4ff46d43fdae61fee08bffffbfe6f598abdda466c2a53288bd5e4fa2"
- ).map(colors);
-
- var colorRainbow = ramp(scheme);
-
- 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(_) {
- return Math.pow((_ + 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 - 1],
- colorRainbow
- );
- root.children.forEach((c, id) => {
- colorParentMap.set(c, colorScale(id));
- });
- }
-
- const colorMap = new Map();
-
- const lightScale = linear$1().domain([0, root.height]).range([0.8, 0.1]);
-
- 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.179 ? "#000" : "#fff";
- colorMap.set(node, { backgroundColor, fontColor });
- }
-
- return colorMap.get(node);
- };
- };
-
- 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;
- };
-
- const Tooltip = ({
- node,
- visible,
- root,
- sizeProperty,
- availableSizeProperties,
- importedByCache,
- }) => {
- const ref = y();
- const [style, setStyle] = v$1({});
- const content = s$1(() => {
- if (!node) return null;
-
- const mainSize = node.originalValue[sizeProperty];
-
- const percentageNum = (100 * mainSize) / root.originalValue[sizeProperty];
- const percentage = percentageNum.toFixed(2);
- const percentageString = percentage + "%";
-
- const uid = node.data.uid;
-
- const path = node
- .ancestors()
- .reverse()
- .map((d) => d.data.name)
- .join("/");
-
- return m$2`
- ${path}
- ${availableSizeProperties.map((sizeProp) => {
- if (sizeProp === sizeProperty) {
- return m$2`
-
- ${LABELS[sizeProp]}:${" "}${format_1(mainSize)}${" "}(${percentageString})
-
- `;
- } else {
- return m$2`
-
- ${LABELS[sizeProp]}:${" "}
- ${format_1(node.originalValue[sizeProp])}
-
- `;
- }
- })}
- ${uid &&
- importedByCache.has(uid) &&
- m$2`
-
-
Imported By:
- ${[...new Set(importedByCache.get(uid).map(({ id }) => id))].map(
- (id) => m$2`
${id}
`
- )}
-
- ${content}
-
- `;
- };
-
- Tooltip.marginX = 10;
- Tooltip.marginY = 30;
-
- const Node$1 = ({
- node,
- backgroundColor,
- fontColor,
- onClick,
- isSelected,
- onNodeHover,
- sizeProperty,
- }) => {
- const {
- nodeUid,
- x0,
- x1,
- y1,
- y0,
- clipUid,
- data,
- originalValue,
- children = null,
- } = node;
-
- const tspan1Props = {};
- const tspan2Props = {};
- if (children != null) {
- tspan1Props.dx = 3;
- tspan2Props.dx = 3;
- tspan1Props.y = 13;
- tspan2Props.y = 13;
- } else {
- tspan1Props.x = 3;
- tspan2Props.x = 3;
- tspan1Props.y = "1.1em";
- tspan2Props.y = "2.3em";
- }
-
- const handleClickSelection = (event) => {
- if (window.getSelection().toString() !== "") {
- event.stopPropagation();
- }
+ scale.unknown = function(_) {
+ return arguments.length ? (unknown = _, scale) : unknown;
};
- return m$2`
- {
- evt.stopPropagation();
- onNodeHover(node);
- }}
- >
-
-
-
-
-
-
- ${data.name}
- ${format_1(originalValue[sizeProperty])}
-
-
- `;
- };
+ return function(t) {
+ transform = t, t0 = t(x0), t1 = t(x1), k10 = t0 === t1 ? 0 : 1 / (t1 - t0);
+ return scale;
+ };
+ }
- const TreeMap = ({
- root,
- layout,
- color,
- width,
- height,
- onNodeHover,
- sizeProperty,
- }) => {
- const [selectedNode, setSelectedNode] = v$1(null);
+ function copy$1(source, target) {
+ return target
+ .domain(source.domain())
+ .interpolator(source.interpolator())
+ .clamp(source.clamp())
+ .unknown(source.unknown());
+ }
- const desiredValue = root.originalValue[sizeProperty] * 0.2;
+ function sequential() {
+ var scale = linearish(transformer$1()(identity$1));
- //handle zoom of selected node
- const selectedNodeMultiplier =
- selectedNode != null
- ? desiredValue > selectedNode.originalValue[sizeProperty]
- ? desiredValue / selectedNode.originalValue[sizeProperty]
- : 3
- : 1;
+ scale.copy = function() {
+ return copy$1(scale, sequential());
+ };
- // i only need to increase value of leaf nodes
- // as folders will sum they up
- const nodesToIncrease =
- selectedNode != null
- ? selectedNode.children != null
- ? selectedNode.leaves()
- : [selectedNode]
- : [];
+ return initInterpolator.apply(scale, arguments);
+ }
- const nodesToIncreaseSet = new Set(nodesToIncrease);
+ const COLOR_BASE = "#cecece";
- // update value for nodes
- root = root.eachAfter((node) => {
- let sum = 0;
- const children = node.children;
- if (children != null) {
- let i = children.length;
- while (--i >= 0) sum += children[i].value;
- } else {
- sum = nodesToIncreaseSet.has(node)
- ? node.originalValue[sizeProperty] * selectedNodeMultiplier
- : node.originalValue[sizeProperty];
- }
+ // 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;
- node.value = sum;
- });
+ function adjustGamma(_) {
+ return Math.pow((_ + 0.055) / 1.055, 2.4);
+ }
- layout(root);
+ function relativeLuminance(o) {
+ const rsrgb = o.r / 255;
+ const gsrgb = o.g / 255;
+ const bsrgb = o.b / 255;
- // this will make groups by height
- 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);
+ 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 m$2`
-
- `;
- };
+ return r * rc + g * gc + b * bc;
+ }
- const Chart = ({
- layout,
- root,
- color,
- width,
- height,
- sizeProperty,
- availableSizeProperties,
- importedCache,
- importedByCache,
- }) => {
- const [showTooltip, setShowTooltip] = v$1(false);
- const [tooltipNode, setTooltipNode] = v$1(null);
+ const createRainbowColor = (root) => {
+ const colorParentMap = new Map();
+ colorParentMap.set(root, COLOR_BASE);
- const handleMouseOut = () => {
- setShowTooltip(false);
- };
+ if (root.children != null) {
+ const colorScale = sequential([0, root.children.length - 1], (n) =>
+ hsl(360 * n, 0.6, 0.85)
+ );
+ root.children.forEach((c, id) => {
+ colorParentMap.set(c, colorScale(id));
+ });
+ }
- p$1(() => {
- document.addEventListener("mouseover", handleMouseOut);
- return () => {
- document.removeEventListener("mouseover", handleMouseOut);
- };
- }, []);
+ const colorMap = new Map();
- return m$2`
- <${TreeMap}
- layout=${layout}
- root=${root}
- color=${color}
- width=${width}
- height=${height}
- sizeProperty=${sizeProperty}
- availableSizeProperties=${availableSizeProperties}
- onNodeHover=${(node) => {
- setTooltipNode(node);
- setShowTooltip(true);
- }}
- />
- <${Tooltip}
- visible=${showTooltip}
- node=${tooltipNode}
- root=${root}
- sizeProperty=${sizeProperty}
- availableSizeProperties=${availableSizeProperties}
- importedByCache=${importedByCache}
- importedCache=${importedCache}
- />
- `;
- };
+ const lightScale = linear$1().domain([0, root.height]).range([0.9, 0.3]);
- const SideBar = ({
- availableSizeProperties,
- sizeProperty,
- setSizeProperty,
- }) => {
- const handleChange = (sizeProp) => () => {
- if (sizeProp !== sizeProperty) {
- setSizeProperty(sizeProp);
+ 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.179 ? "#000" : "#fff";
+ colorMap.set(node, { backgroundColor, fontColor });
}
+
+ return colorMap.get(node);
};
- return m$2`
-
- `;
};
const Main = ({
@@ -2543,7 +2540,7 @@
}) => {
const availableSizeProperties = getAvailableSizeOptions(options);
- const [sizeProperty, setSizeProperty] = v$1(availableSizeProperties[0]);
+ const [sizeProperty, setSizeProperty] = m$2(availableSizeProperties[0]);
const layout = d3treemap()
.size([width, height])
@@ -2563,17 +2560,22 @@
// use node.data.children because if it is empty d3 will skip this node
// and it will look like it is actually a leaf - which technically it is but not exactly
// it is just a chunk without deps - usually just with imports
- if (node.data.children != null) {
+ if (node.children == null && node.data.children != null) {
+ // this should be root withiout children
+ for (const prop of availableSizeProperties) {
+ value[prop] += node.data[prop] || 0;
+ }
+ } else if (node.data.children != null) {
const children = node.children;
let i = node.data.children.length;
while (--i >= 0) {
for (const prop of availableSizeProperties) {
- value[prop] += children[i].originalValue[prop];
+ value[prop] += children[i].originalValue[prop] || 0;
}
}
} else {
for (const prop of availableSizeProperties) {
- value[prop] = nodes[node.data.uid][prop];
+ value[prop] = nodes[node.data.uid][prop] || 0;
}
}
@@ -2604,7 +2606,7 @@
importedCache.get(source).push({ uid: target, ...nodes[target] });
}
- return m$2`
+ return m$1`
<${SideBar}
sizeProperty=${sizeProperty}
availableSizeProperties=${availableSizeProperties}
@@ -2625,8 +2627,8 @@
};
const drawChart = (parentNode, data, width, height) => {
- H(
- m$2` <${Main} data=${data} width=${width} height=${height} /> `,
+ M(
+ m$1` <${Main} data=${data} width=${width} height=${height} /> `,
parentNode
);
};
@@ -2637,12 +2639,11 @@