@bundle-stats/ui 4.12.1 → 4.13.0-beta.2

package/lib-esm/components/metrics-treemap/metrics-treemap.js

@@ -0,0 +1,140 @@
+import React, { forwardRef, useCallback, useMemo, useRef } from 'react';
+import { useDebounce, useHoverDirty, useMeasure, useMouseHovered } from 'react-use';
+import cx from 'classnames';
+import { hierarchy, treemap, treemapSquarify } from 'd3';
+import { Tooltip, TooltipArrow, TooltipAnchor, useTooltipState } from 'ariakit/tooltip';
+import { Stack } from '../../layout/stack';
+import { FileName } from '../../ui/file-name';
+import { Delta } from '../delta';
+import { RunInfo } from '../run-info';
+import css from './metrics-treemap.module.css';
+const SQUARIFY_RATIO = 1.78;
+const PADDING_OUTER = 0;
+const PADDING_INNER = 1;
+const PADDING_TOP = 4;
+const PADDING_BOTTOM = 2;
+const PADDING_LEFT = 16;
+const PADDING_RIGHT = 4;
+const VERTICAL_SPACING = 4;
+const LINE_HEIGHT = 16;
+const LINE_HEIGHT_SMALL = 13.3;
+function resolveLeafSizeDisplay(width, height) {
+    if (height > PADDING_TOP + PADDING_BOTTOM + VERTICAL_SPACING + LINE_HEIGHT * 2 &&
+        width > PADDING_LEFT + PADDING_RIGHT + 128) {
+        return 'default';
+    }
+    if (height > PADDING_TOP + PADDING_BOTTOM + LINE_HEIGHT_SMALL * 2 &&
+        width > PADDING_LEFT + PADDING_BOTTOM + 48) {
+        return 'small';
+    }
+    return 'minimal';
+}
+const LeafTooltipContent = (props) => {
+    const { item } = props;
+    const currentRun = item.runs[0];
+    const baselineRun = item.runs[item.runs.length - 1];
+    return (React.createElement(Stack, { space: "small", className: css.leafTooltipContent },
+        React.createElement("h3", { className: css.leafTooltipContentTitle },
+            React.createElement(FileName, { as: "code", name: item.label })),
+        React.createElement(RunInfo, { current: currentRun.displayValue, delta: currentRun.displayDeltaPercentage, deltaType: currentRun.deltaType, baseline: (baselineRun === null || baselineRun === void 0 ? void 0 : baselineRun.displayValue) || '0B' })));
+};
+const LeafContent = forwardRef((props, ref) => {
+    const { sizeDisplay, item, runInfo } = props;
+    if (sizeDisplay === 'minimal') {
+        return React.createElement("div", { className: css.leafContent, ref: ref });
+    }
+    return (React.createElement("div", { className: css.leafContent, ref: ref },
+        React.createElement("p", { className: css.leadContentLabel }, item.label),
+        sizeDisplay !== 'small' && (React.createElement("p", { className: css.leadContentValue },
+            React.createElement("span", { className: css.leadContentMetric }, runInfo.displayValue),
+            React.createElement(Delta, { className: css.leadContentDelta, displayValue: runInfo.displayDeltaPercentage, deltaType: runInfo.deltaType })))));
+});
+const LeafContentWithTooltip = (props) => {
+    const { sizeDisplay, item, runInfo, parentRef } = props;
+    const pointer = useMouseHovered(parentRef, { whenHovered: true });
+    const getAnchorRect = useCallback(() => {
+        var _a, _b, _c, _d;
+        if (pointer.docX === 0 && pointer.docY === 0 && pointer.elW === 0 && pointer.elH === 0) {
+            return null;
+        }
+        const newRect = {
+            x: pointer.docX - ((_b = (_a = document === null || document === void 0 ? void 0 : document.defaultView) === null || _a === void 0 ? void 0 : _a.pageXOffset) !== null && _b !== void 0 ? _b : 0),
+            y: pointer.docY - ((_d = (_c = document === null || document === void 0 ? void 0 : document.defaultView) === null || _c === void 0 ? void 0 : _c.pageYOffset) !== null && _d !== void 0 ? _d : 0),
+            w: 1,
+            h: 1,
+        };
+        return newRect;
+    }, [pointer.docX, pointer.docY]);
+    const tooltipState = useTooltipState({ gutter: 8, getAnchorRect, timeout: 100 });
+    useDebounce(tooltipState.render, 10, [pointer.docX, pointer.docY]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(TooltipAnchor, { state: tooltipState, className: css.leafContentTooltipAnchor },
+            React.createElement(LeafContent, { sizeDisplay: sizeDisplay, item: item, runInfo: runInfo })),
+        React.createElement(Tooltip, { state: tooltipState, className: css.tooltip },
+            React.createElement(TooltipArrow, { state: tooltipState, size: 16, className: css.leafTooltipArrow }),
+            React.createElement(LeafTooltipContent, { item: item }))));
+};
+const LeafAction = forwardRef((props, ref) => (React.createElement("button", { type: "button", xmlns: "http://www.w3.org/1999/xhtml", ref: ref, ...props })));
+const Leaf = (props) => {
+    var _a;
+    const { x, y, width, height, data, onClick } = props;
+    const { item } = data;
+    const runInfo = (_a = item.runs) === null || _a === void 0 ? void 0 : _a[0];
+    const sizeDisplay = useMemo(() => resolveLeafSizeDisplay(width, height), [width, height]);
+    const handleOnClick = useCallback(() => onClick === null || onClick === void 0 ? void 0 : onClick(item.key), [item.key]);
+    const leafContentRef = useRef(null);
+    const hover = useHoverDirty(leafContentRef);
+    const leafClassName = cx(css.leaf, css[`leaf-${runInfo.deltaType}`], sizeDisplay === 'small' && css.leafSmall);
+    return (React.createElement("g", { className: leafClassName },
+        React.createElement("rect", { x: x, y: y, width: width, height: height, className: css.leafBackground }),
+        React.createElement("rect", { x: x, y: y, width: width, height: height, className: css.leafBackdrop }),
+        React.createElement("foreignObject", { height: height, width: width, x: x, y: y, className: css.leafWrapper },
+            React.createElement(LeafAction, { onClick: handleOnClick, ref: leafContentRef, className: css.leafAction }, hover ? (React.createElement(LeafContentWithTooltip, { sizeDisplay: sizeDisplay, item: item, runInfo: runInfo, parentRef: leafContentRef })) : (React.createElement(LeafContent, { sizeDisplay: sizeDisplay, item: item, runInfo: runInfo }))))));
+};
+function useMetricsTreemapHierarchy(params) {
+    const { items, width, height } = params;
+    const treemapHierarchy = useMemo(() => {
+        const children = items.map((item) => {
+            const values = item.runs.map((run) => (run === null || run === void 0 ? void 0 : run.value) || 0);
+            const value = Math.max(...values);
+            return {
+                id: item.key,
+                value,
+                item,
+            };
+        });
+        const treemapData = {
+            id: 'root',
+            name: 'root',
+            value: 0,
+            children,
+        };
+        const customHierarchy = hierarchy(treemapData);
+        customHierarchy.sum((node) => node.value);
+        customHierarchy.sort((a, b) => b.value - a.value);
+        return customHierarchy;
+    }, [items]);
+    const cells = useMemo(() => {
+        const createTremapLayout = treemap()
+            .size([width, height])
+            .tile(treemapSquarify.ratio(SQUARIFY_RATIO))
+            .paddingOuter(PADDING_OUTER)
+            .paddingInner(PADDING_INNER);
+        const tremapLayout = createTremapLayout(treemapHierarchy);
+        return tremapLayout.leaves().filter((leaf) => Boolean(leaf.parent));
+    }, [height, width, treemapHierarchy]);
+    return cells;
+}
+export const MetricsTreemap = (props) => {
+    const { className = '', items, onItemClick, emptyMessage = 'No data', ...restProps } = props;
+    const [containerRef, { width, height }] = useMeasure();
+    const cells = useMetricsTreemapHierarchy({ items, width, height });
+    return (React.createElement("div", { className: cx(css.root, className), ...restProps, ref: containerRef }, cells.length > 0 ? (React.createElement("svg", { viewBox: `0 0 ${width} ${height}`, className: css.canvas }, cells.map((leaf) => {
+        if (!leaf.parent) {
+            return null;
+        }
+        return (React.createElement(Leaf, { x: leaf.x0, y: leaf.y0, width: leaf.x1 - leaf.x0, height: leaf.y1 - leaf.y0, data: leaf.data, onClick: onItemClick, key: leaf.id }));
+    }))) : (React.createElement("div", { className: css.emptyMessage },
+        React.createElement("div", { className: css.emptyMessageWrapper }, emptyMessage)))));
+};
+//# sourceMappingURL=metrics-treemap.js.map

package/lib-esm/components/metrics-treemap/metrics-treemap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"metrics-treemap.js","sourceRoot":"","sources":["../../../src/components/metrics-treemap/metrics-treemap.tsx"],"names":[],"mappings":"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"}

package/lib-esm/components/metrics-treemap/metrics-treemap.module.css

@@ -0,0 +1,184 @@
+.root {
+  position: relative;
+  aspect-ratio: 16/9;
+  background: var(--color-background);
+}
+
+.canvas {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  fill: var(--color-text);
+  font-family: var(--font-family);
+  background: var(--color-outline);
+}
+
+/** Tile overlay fill background transition */
+.root {
+  transition: var(--ui-transition-out);
+  transition-property: opacity;
+}
+
+.leafBackground {
+  fill: var(--color-background);
+}
+
+.leafBackdrop {
+  fill: var(--color-background);
+  transition: var(--ui-transition-out);
+  transition-property: opacity;
+  opacity: 0.2;
+}
+
+.leaf:hover .leafBackdrop {
+  transition: var(--ui-transition-in);
+  opacity: 0.5;
+}
+
+/** Leaf wrapper button */
+.leafAction {
+  appearance: none;
+  border: 0;
+  border-radius: 0;
+  padding: 0;
+  background: none;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  font-family: var(--font-family-fixed);
+  font-size: var(--size-small);
+  line-height: var(--line-height-heading);
+  text-align: left;
+}
+
+.leafContent {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  padding: var(--space-xxsmall) var(--space-xxsmall);
+  gap: var(--space-xxsmall);
+  line-height: var(--line-height-heading);
+}
+
+/** Align label to other elements on the first column leafs */
+.leafWrapper[x="0"] .leafContent {
+  padding-left: var(--space-small);
+}
+
+.leadContentLabel {
+  flex: 0 1 auto;
+  width: 100%;
+  min-width: 0;
+  max-height: calc(2em * var(--line-height-heading));
+  overflow: hidden;
+  word-break: break-word;
+}
+
+.leadContentValue {
+  flex: 0 0 auto;
+  max-width: calc(100% + var(--space-xxsmall));
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.leadContentMetric {
+  font-weight: bold;
+}
+
+.leadContentDelta {
+  margin-left: var(--space-xxxsmall);
+}
+
+/** Tile size variation */
+.leafSmall .leafContent {
+  padding: var(--space-xxxsmall) var(--space-xxsmall);
+  gap: 0;
+  font-size: var(--size-xsmall);
+}
+
+.leafSmall .leadContentLabel {
+  margin-top: 0;
+}
+
+/** Tile diff variation */
+.leaf-NO_CHANGE .leafBackdrop {
+  fill: transparent;
+}
+
+.leaf-NO_CHANGE .leafAction {
+  color: var(--color-text-light);
+}
+
+.leaf-HIGH_NEGATIVE .leafBackdrop {
+  fill: var(--color-red-100);
+}
+
+.leaf-NEGATIVE .leafBackdrop {
+  fill: var(--color-red-50);
+}
+
+.leaf-LOW_NEGATIVE .leafBackdrop {
+  fill: var(--color-red-25);
+}
+
+.leaf-LOW_POSITIVE .leafBackdrop {
+  fill: var(--color-green-25);
+}
+
+.leaf-POSITIVE .leafBackdrop {
+  fill: var(--color-green-50);
+}
+
+.leaf-HIGH_POSITIVE .leafBackdrop {
+  fill: var(--color-green-100);
+}
+
+/** empty message */
+.emptyMessage {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.emptyMessageWrapper {
+  max-width: 100%;
+  text-align: center;
+}
+
+/** tooltip */
+.leafContentTooltipAnchor {
+  width: 100%;
+  height: 100%;
+}
+
+.tooltip {
+  z-index: var(--layer-xxhigh);
+  padding: var(--space-xsmall) var(--space-small);
+  border-radius: var(--radius-medium);
+  width: calc(100vw - 2 * var(--space-small));
+  max-width: 340px;
+  outline: none;
+  filter: drop-shadow(var(--shadow-layer-high));
+  will-change: filter;
+  background: var(--color-light);
+  font-size: var(--size-small);
+}
+
+.leafTooltipArrow svg {
+  display: block;
+  fill: var(--color-background) !important;
+}
+
+.leafTooltipContentTitle {
+  font-size: var(--size-medium);
+}

package/lib-esm/constants.js

@@ -32,4 +32,9 @@ export const SORT = {
     ASC: 'asc',
     DESC: 'desc',
 };
+export var MetricsDisplayType;
+(function (MetricsDisplayType) {
+    MetricsDisplayType["TABLE"] = "table";
+    MetricsDisplayType["TREEMAP"] = "treemap";
+})(MetricsDisplayType || (MetricsDisplayType = {}));
 //# sourceMappingURL=constants.js.map

package/lib-esm/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sourceRoot":"","sources":["../src/constants.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAE3D,MAAM,CAAC,MAAM,IAAI,GAAG;IAClB,QAAQ,EAAE,GAAG;IACb,MAAM,EAAE,SAAS;IACjB,OAAO,EAAE,UAAU;IACnB,QAAQ,EAAE,WAAW;CACtB,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,QAAQ;IAChC,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,MAAM;IAC9B,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,IAAI,CAAC,OAAO;IAChC,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,IAAI,CAAC,QAAQ;CACnC,CAAC;AAEF,MAAM,CAAC,MAAM,0BAA0B,GAAG,UAAU,CAAC,MAAM,CACzD,CAAC,GAAG,EAAE,QAAQ,EAAE,EAAE,CAAC,CAAC;IAClB,GAAG,GAAG;IACN,CAAC,gCAAgC,QAAQ,EAAE,CAAC,EAAE,QAAQ;CACvD,CAAC,EACF,EAAE,CACH,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG;IACrC,4BAA4B;IAC5B,4BAA4B;IAC5B,6BAA6B;IAC7B,2BAA2B;CAC5B,CAAC;AACF,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,oBAAoB,EAAE,oBAAoB,CAAC,CAAC;AACnF,MAAM,CAAC,MAAM,uBAAuB,GAAG;IACrC,qBAAqB;IACrB,+BAA+B;IAC/B,uBAAuB;CACxB,CAAC;AACF,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,sBAAsB,EAAE,gCAAgC,CAAC,CAAC;AAEnG,MAAM,CAAC,MAAM,IAAI,GAAG;IAClB,GAAG,EAAE,KAAK;IACV,IAAI,EAAE,MAAM;CACb,CAAC"}
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAE3D,MAAM,CAAC,MAAM,IAAI,GAAG;IAClB,QAAQ,EAAE,GAAG;IACb,MAAM,EAAE,SAAS;IACjB,OAAO,EAAE,UAAU;IACnB,QAAQ,EAAE,WAAW;CACtB,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,QAAQ;IAChC,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,MAAM;IAC9B,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,IAAI,CAAC,OAAO;IAChC,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,IAAI,CAAC,QAAQ;CACnC,CAAC;AAEF,MAAM,CAAC,MAAM,0BAA0B,GAAG,UAAU,CAAC,MAAM,CACzD,CAAC,GAAG,EAAE,QAAQ,EAAE,EAAE,CAAC,CAAC;IAClB,GAAG,GAAG;IACN,CAAC,gCAAgC,QAAQ,EAAE,CAAC,EAAE,QAAQ;CACvD,CAAC,EACF,EAAE,CACH,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG;IACrC,4BAA4B;IAC5B,4BAA4B;IAC5B,6BAA6B;IAC7B,2BAA2B;CAC5B,CAAC;AACF,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,oBAAoB,EAAE,oBAAoB,CAAC,CAAC;AACnF,MAAM,CAAC,MAAM,uBAAuB,GAAG;IACrC,qBAAqB;IACrB,+BAA+B;IAC/B,uBAAuB;CACxB,CAAC;AACF,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,sBAAsB,EAAE,gCAAgC,CAAC,CAAC;AAEnG,MAAM,CAAC,MAAM,IAAI,GAAG;IAClB,GAAG,EAAE,KAAK;IACV,IAAI,EAAE,MAAM;CACb,CAAC;AAEF,MAAM,CAAN,IAAY,kBAGX;AAHD,WAAY,kBAAkB;IAC5B,qCAAe,CAAA;IACf,yCAAmB,CAAA;AACrB,CAAC,EAHW,kBAAkB,KAAlB,kBAAkB,QAG7B"}

package/lib-esm/hooks/entry-info.js

@@ -0,0 +1,8 @@
+import { useCallback } from 'react';
+export function useEntryInfo(params) {
+    const { setState } = params;
+    const hideEntryInfo = useCallback(() => setState({ entryId: '' }), [setState]);
+    const showEntryInfo = useCallback((entryId) => setState({ entryId }), [setState]);
+    return [hideEntryInfo, showEntryInfo];
+}
+//# sourceMappingURL=entry-info.js.map

package/lib-esm/hooks/entry-info.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"entry-info.js","sourceRoot":"","sources":["../../src/hooks/entry-info.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAWpC,MAAM,UAAU,YAAY,CAAC,MAA0B;IACrD,MAAM,EAAE,QAAQ,EAAE,GAAG,MAAM,CAAC;IAE5B,MAAM,aAAa,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC/E,MAAM,aAAa,GAAG,WAAW,CAAC,CAAC,OAAe,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAE1F,OAAO,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC;AACxC,CAAC"}

package/lib-esm/hooks/metrics-display-type.js

@@ -0,0 +1,36 @@
+import { useCallback, useEffect, useMemo } from 'react';
+import { useLocalStorage } from 'react-use';
+import { StringParam, useQueryParams } from 'use-query-params';
+import { MetricsDisplayType } from '../constants';
+const DEFAULT_DISPLAY_TYPE = MetricsDisplayType.TABLE;
+const PARAM_NAME = 'dt';
+export const useMetricsDisplayType = () => {
+    const [{ [PARAM_NAME]: queryDisplayType }, setQueryParams] = useQueryParams({
+        [PARAM_NAME]: StringParam,
+    });
+    const [storageDisplayType, setStoreageDisplayType] = useLocalStorage(PARAM_NAME, MetricsDisplayType.TABLE);
+    const displayType = useMemo(() => {
+        const value = queryDisplayType || storageDisplayType;
+        if (!value) {
+            return DEFAULT_DISPLAY_TYPE;
+        }
+        if (!Object.values(MetricsDisplayType).includes(value)) {
+            return DEFAULT_DISPLAY_TYPE;
+        }
+        return value;
+    }, [queryDisplayType, storageDisplayType]);
+    useEffect(() => {
+        if (queryDisplayType !== displayType) {
+            setQueryParams({ [PARAM_NAME]: displayType });
+        }
+        if (storageDisplayType !== displayType) {
+            setStoreageDisplayType(queryDisplayType);
+        }
+    }, [displayType, queryDisplayType, storageDisplayType, setQueryParams, setStoreageDisplayType]);
+    const setDisplayType = useCallback((value) => {
+        setStoreageDisplayType(value);
+        setQueryParams({ [PARAM_NAME]: value });
+    }, [setStoreageDisplayType, setQueryParams]);
+    return [displayType, setDisplayType];
+};
+//# sourceMappingURL=metrics-display-type.js.map

package/lib-esm/hooks/metrics-display-type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"metrics-display-type.js","sourceRoot":"","sources":["../../src/hooks/metrics-display-type.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAE/D,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAElD,MAAM,oBAAoB,GAAG,kBAAkB,CAAC,KAAK,CAAC;AACtD,MAAM,UAAU,GAAG,IAAI,CAAC;AAIxB,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAA0B,EAAE;IAC/D,MAAM,CAAC,EAAE,CAAC,UAAU,CAAC,EAAE,gBAAgB,EAAE,EAAE,cAAc,CAAC,GAAG,cAAc,CAAC;QAC1E,CAAC,UAAU,CAAC,EAAE,WAAW;KAC1B,CAAC,CAAC;IACH,MAAM,CAAC,kBAAkB,EAAE,sBAAsB,CAAC,GAAG,eAAe,CAClE,UAAU,EACV,kBAAkB,CAAC,KAAK,CACzB,CAAC;IAEF,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE;QAC/B,MAAM,KAAK,GAAG,gBAAgB,IAAI,kBAAkB,CAAC;QAErD,IAAI,CAAC,KAAK,EAAE;YACV,OAAO,oBAAoB,CAAC;SAC7B;QAED,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC,QAAQ,CAAC,KAA2B,CAAC,EAAE;YAC5E,OAAO,oBAAoB,CAAC;SAC7B;QAED,OAAO,KAA2B,CAAC;IACrC,CAAC,EAAE,CAAC,gBAAgB,EAAE,kBAAkB,CAAC,CAAC,CAAC;IAE3C,SAAS,CAAC,GAAG,EAAE;QAEb,IAAI,gBAAgB,KAAK,WAAW,EAAE;YACpC,cAAc,CAAC,EAAE,CAAC,UAAU,CAAC,EAAE,WAAW,EAAE,CAAC,CAAC;SAC/C;QAGD,IAAI,kBAAkB,KAAK,WAAW,EAAE;YACtC,sBAAsB,CAAC,gBAAsC,CAAC,CAAC;SAChE;IACH,CAAC,EAAE,CAAC,WAAW,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,cAAc,EAAE,sBAAsB,CAAC,CAAC,CAAC;IAEhG,MAAM,cAAc,GAAG,WAAW,CAChC,CAAC,KAAyB,EAAE,EAAE;QAC5B,sBAAsB,CAAC,KAAK,CAAC,CAAC;QAC9B,cAAc,CAAC,EAAE,CAAC,UAAU,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;IAC1C,CAAC,EACD,CAAC,sBAAsB,EAAE,cAAc,CAAC,CACzC,CAAC;IAEF,OAAO,CAAC,WAAW,EAAE,cAAc,CAAC,CAAC;AACvC,CAAC,CAAC"}

package/lib-esm/query-state.js

@@ -15,7 +15,7 @@ export const useComponentQueryState = (componentName) => {
             return;
         }
         setQueryState({ [componentName]: newState });
-    }, [componentState]);
+    }, [componentState, setQueryState]);
     return [componentState, setState];
 };
 //# sourceMappingURL=query-state.js.map

package/lib-esm/query-state.js.map

@@ -1 +1 @@
-{"version":3,"file":"query-state.js","sourceRoot":"","sources":["../src/query-state.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,OAAO,MAAM,gBAAgB,CAAC;AACrC,OAAO,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACtE,OAAO,EAAE,mBAAmB,EAAE,MAAM,0CAA0C,CAAC;AAC/E,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAM3D,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAA8B,EAAE,EAAE,CAAC,CACpE,oBAAC,kBAAkB,IAAC,OAAO,EAAE,mBAAmB,KAAM,KAAK,GAAI,CAChE,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,aAAqB,EAAE,EAAE;IAC9D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,cAAc,CAAC;QACjD,CAAC,aAAa,CAAC,EAAE,oBAAoB,CAAC,aAAa,CAAC;KACrD,CAAC,CAAC;IAEH,MAAM,cAAc,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;IAEjD,MAAM,QAAQ,GAAG,WAAW,CAC1B,CAAC,OAAgC,EAAE,EAAE;QACnC,MAAM,QAAQ,GAAG,EAAE,GAAG,cAAc,EAAE,GAAG,OAAO,EAAE,CAAC;QAGnD,IAAI,OAAO,CAAC,cAAc,EAAE,QAAQ,CAAC,EAAE;YACrC,OAAO;SACR;QAED,aAAa,CAAC,EAAE,CAAC,aAAa,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC;IAC/C,CAAC,EACD,CAAC,cAAc,CAAC,CACjB,CAAC;IAEF,OAAO,CAAC,cAAc,EAAE,QAAQ,CAAC,CAAC;AACpC,CAAC,CAAC"}
+{"version":3,"file":"query-state.js","sourceRoot":"","sources":["../src/query-state.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,OAAO,MAAM,gBAAgB,CAAC;AACrC,OAAO,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACtE,OAAO,EAAE,mBAAmB,EAAE,MAAM,0CAA0C,CAAC;AAC/E,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAM3D,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAA8B,EAAE,EAAE,CAAC,CACpE,oBAAC,kBAAkB,IAAC,OAAO,EAAE,mBAAmB,KAAM,KAAK,GAAI,CAChE,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,aAAqB,EAAE,EAAE;IAC9D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,cAAc,CAAC;QACjD,CAAC,aAAa,CAAC,EAAE,oBAAoB,CAAC,aAAa,CAAC;KACrD,CAAC,CAAC;IAEH,MAAM,cAAc,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;IAEjD,MAAM,QAAQ,GAAG,WAAW,CAC1B,CAAC,OAAgC,EAAE,EAAE;QACnC,MAAM,QAAQ,GAAG,EAAE,GAAG,cAAc,EAAE,GAAG,OAAO,EAAE,CAAC;QAGnD,IAAI,OAAO,CAAC,cAAc,EAAE,QAAQ,CAAC,EAAE;YACrC,OAAO;SACR;QAED,aAAa,CAAC,EAAE,CAAC,aAAa,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC;IAC/C,CAAC,EACD,CAAC,cAAc,EAAE,aAAa,CAAC,CAChC,CAAC;IAEF,OAAO,CAAC,cAAc,EAAE,QAAQ,CAAC,CAAC;AACpC,CAAC,CAAC"}

package/lib-esm/ui/button/button.module.css

@@ -256,6 +256,7 @@ a.root {
 .small .glyph {
   width: calc(var(--space-xsmall) + 2px);
   height: calc(var(--space-xsmall) + 2px);
+  margin: 1px; /* compensate to keep the same height when the text is not provided */
 }
 
 .medium {

package/lib-esm/ui/icon/icon.js

@@ -16,6 +16,8 @@ const ICONS = {
     GITHUB: 'github',
     INFO: 'info',
     HELP: 'help',
+    TABLE: 'table',
+    TREEMAP: 'treemap',
     MENU: 'menu',
     MORE_VERTICAL: 'more-vertical',
     SORT: 'sort',

package/lib-esm/ui/icon/icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../src/ui/icon/icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B,OAAO,GAAG,MAAM,mBAAmB,CAAC;AAEpC,MAAM,KAAK,GAAG;IACZ,KAAK,EAAE,OAAO;IACd,kBAAkB,EAAE,oBAAoB;IACxC,MAAM,EAAE,OAAO;IACf,YAAY,EAAE,cAAc;IAC5B,UAAU,EAAE,YAAY;IACxB,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;IACd,aAAa,EAAE,eAAe;IAC9B,MAAM,EAAE,QAAQ;IAChB,MAAM,EAAE,QAAQ;IAChB,IAAI,EAAE,MAAM;IACZ,IAAI,EAAE,MAAM;IACZ,IAAI,EAAE,MAAM;IACZ,aAAa,EAAE,eAAe;IAC9B,IAAI,EAAE,MAAM;IACZ,OAAO,EAAE,SAAS;CACV,CAAC;AAEX,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;CACN,CAAC;AAUX,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,KAA+C,EAAE,EAAE;IACtE,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,SAAS,GAAG,MAAM,EAAE,IAAI,GAAG,IAAI,CAAC,MAAM,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAElG,OAAO,CACL,oBAAC,SAAS,IAAC,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,EAAE,GAAG,CAAC,IAAI,CAAC,CAAC,KAAM,SAAS;QACrE,6BAAK,SAAS,EAAE,GAAG,CAAC,IAAI;YACtB,6BAAK,SAAS,EAAE,IAAI,KAAK,EAAE,GAAI,CAC3B,CACI,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;AAEnB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC;AAC7B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC;AAC/B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC;AAC7B,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC"}
+{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../src/ui/icon/icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B,OAAO,GAAG,MAAM,mBAAmB,CAAC;AAEpC,MAAM,KAAK,GAAG;IACZ,KAAK,EAAE,OAAO;IACd,kBAAkB,EAAE,oBAAoB;IACxC,MAAM,EAAE,OAAO;IACf,YAAY,EAAE,cAAc;IAC5B,UAAU,EAAE,YAAY;IACxB,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;IACd,aAAa,EAAE,eAAe;IAC9B,MAAM,EAAE,QAAQ;IAChB,MAAM,EAAE,QAAQ;IAChB,IAAI,EAAE,MAAM;IACZ,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,OAAO;IACd,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,MAAM;IACZ,aAAa,EAAE,eAAe;IAC9B,IAAI,EAAE,MAAM;IACZ,OAAO,EAAE,SAAS;CACV,CAAC;AAEX,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;CACN,CAAC;AAUX,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,KAA+C,EAAE,EAAE;IACtE,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,SAAS,GAAG,MAAM,EAAE,IAAI,GAAG,IAAI,CAAC,MAAM,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAElG,OAAO,CACL,oBAAC,SAAS,IAAC,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,EAAE,GAAG,CAAC,IAAI,CAAC,CAAC,KAAM,SAAS;QACrE,6BAAK,SAAS,EAAE,GAAG,CAAC,IAAI;YACtB,6BAAK,SAAS,EAAE,IAAI,KAAK,EAAE,GAAI,CAC3B,CACI,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;AAEnB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC;AAC7B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC;AAC/B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC;AAC7B,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC"}

package/lib-esm/ui/index.js

@@ -6,7 +6,6 @@ export { Dropdown } from './dropdown';
 export { EmptySet } from './empty-set';
 export { FileName } from './file-name';
 export { Filters } from './filters';
-export { HorizontalBarChart } from './horizontal-bar-chart';
 export { HoverCard } from './hover-card';
 export { Icon } from './icon';
 export { Input } from './input';

package/lib-esm/ui/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ui/index.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ui/index.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "4.12.1",
+  "version": "4.13.0-beta.2",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -15,7 +15,7 @@
     "build-assets-esm": "rsync -arm --include '*/' --include '*.json' --include '*.css' --include 'icons.svg' --exclude '*' src/ lib-esm",
     "build-storybook": "storybook build -c ./build/storybook",
     "generate-chart-colors": "node scripts/generate-chart-colors.js",
-    "generate-svg-sprite": "npx svg-sprite -s --si --no-svg-namespace-classnames src/assets/icons/*.svg && mv symbol/svg/sprite.symbol.svg src/assets/icons.svg",
+    "generate-svg-sprite": "npx svg-sprite -s --si --no-svg-namespace-classnames src/assets/icons/*.svg && mv symbol/svg/sprite.css.svg src/assets/icons.svg",
     "lint": "eslint",
     "start": "cross-env NODE_ENV=development storybook dev -c ./build/storybook -p 8080",
     "test": "jest src --passWithNoTests"
@@ -42,6 +42,7 @@
     "@storybook/addon-essentials": "7.6.17",
     "@storybook/react": "7.6.17",
     "@storybook/react-webpack5": "7.6.17",
+    "@types/d3": "7.4.3",
     "@types/react": "18.2.65",
     "@types/react-router-dom": "5.3.3",
     "babel-plugin-require-context-hook": "1.0.0",
@@ -72,10 +73,12 @@
     "react-router-dom": "^5.0.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^4.12.1",
+    "@bundle-stats/utils": "^4.13.0-beta.2",
     "ariakit": "2.0.0-next.44",
+    "d3": "^7.8.5",
     "modern-css-reset": "1.4.0",
+    "react-use": "^17.5.0",
     "use-query-params": "2.2.1"
   },
-  "gitHead": "a3438f09e118b90fbf9cb95c0055b9788207e9ef"
+  "gitHead": "0e3fba4a98fbbfe74186f3c02e054eea6a284e6c"
 }

package/src/app/app.jsx

@@ -6,14 +6,12 @@ import { COMPONENT } from '@bundle-stats/utils';
 
 import { URLS } from '../constants';
 import { BundleAssets } from '../components/bundle-assets';
-import { BundleAssetsTotalsChartBars } from '../components/bundle-assets-totals-chart-bars';
-import { BundleAssetsTotalsTable } from '../components/bundle-assets-totals-table';
+import { BundleAssetsTotals } from '../components/bundle-assets-totals';
 import { BundleModules } from '../components/bundle-modules';
 import { BundlePackages } from '../components/bundle-packages';
 import { Insights } from '../components/insights';
 import { MetricsTableTitle } from '../components';
 import { Summary } from '../components/summary';
-import { TotalSizeTypeTitle } from '../components/total-size-type-title';
 import { Box } from '../layout/box';
 import { Footer } from '../layout/footer';
 import { Stack } from '../layout/stack';
@@ -99,11 +97,9 @@ const OverviewContent = () => {
         </Container>
       )}
       <Container>
-        <Stack space="small">
-          <TotalSizeTypeTitle />
-          <BundleAssetsTotalsChartBars jobs={jobs} />
-          <BundleAssetsTotalsTable jobs={jobs} outline />
-        </Stack>
+        <Box outline>
+          <BundleAssetsTotals jobs={jobs} />
+        </Box>
       </Container>
     </Stack>
   );

package/src/assets/icons/table.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+<path d="M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 3v18m0 0h10a2 2 0 0 0 2-2V9M9 21H5a2 2 0 0 1-2-2V9m0 0h18"/>
+</svg>

package/src/assets/icons/treemap.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+<path d="M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 21h10a2 2 0 0 0 2-2V9M9 21H5a2 2 0 0 1-2-2V9" />
+<path d="M12.025 3.422 12 20.652ZM12.85 9l7.347.025zm-.153 6 7.576.025zm4.334.764L17 20.326Z" />
+</svg>