@bundle-stats/ui 4.12.0 → 4.13.0-beta.0

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

@@ -0,0 +1,119 @@
+import React, { forwardRef, useCallback, useMemo, useRef, useState } from 'react';
+import cx from 'classnames';
+import { useMeasure } from 'react-use';
+import { hierarchy, treemap, treemapSquarify } from 'd3';
+import { FloatingPortal, useClientPoint, useFloating, useHover, useInteractions, } from '@floating-ui/react';
+import { arrow, offset } from '@floating-ui/react-dom';
+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 resolveTileSizeDisplay(width, height) {
+    if (height > PADDING_TOP + PADDING_BOTTOM + VERTICAL_SPACING + LINE_HEIGHT * 2 &&
+        width > PADDING_LEFT + PADDING_RIGHT + 96) {
+        return 'default';
+    }
+    if (height > PADDING_TOP + PADDING_BOTTOM + LINE_HEIGHT_SMALL * 2 &&
+        width > PADDING_LEFT + PADDING_BOTTOM + 48) {
+        return 'small';
+    }
+    return 'minimal';
+}
+const TooltipContent = (props) => {
+    const { data } = props;
+    const currentRun = data.runs[0];
+    const baselineRun = data.runs[data.runs.length - 1];
+    return (React.createElement(Stack, { space: "small", className: css.tooltipContent },
+        React.createElement("h3", { className: css.tooltipContentTitle },
+            React.createElement(FileName, { as: "code", name: data.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 TileButton = forwardRef((props, ref) => (React.createElement("button", { type: "button", xmlns: "http://www.w3.org/1999/xhtml", ref: ref, ...props })));
+const Tile = (props) => {
+    var _a, _b;
+    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 [isOpen, setIsOpen] = useState(false);
+    const arrowRef = useRef(null);
+    const { refs, floatingStyles, context, middlewareData } = useFloating({
+        placement: 'top',
+        open: isOpen,
+        onOpenChange: setIsOpen,
+        middleware: [arrow({ element: arrowRef }), offset(16)],
+    });
+    const clientPoint = useClientPoint(context);
+    const hover = useHover(context);
+    const { getReferenceProps, getFloatingProps } = useInteractions([hover, clientPoint]);
+    const tileSizeDisplay = useMemo(() => resolveTileSizeDisplay(width, height), [width, height]);
+    const handleOnClick = useCallback(() => {
+        if (onClick) {
+            onClick(item.key);
+        }
+    }, [item.key]);
+    return (React.createElement("g", { className: cx(css.tile, !item.changed && css['tile-NO_CHANGE'], css[`tile-${runInfo.deltaType}`], tileSizeDisplay === 'small' && css.tileSmall) },
+        React.createElement("rect", { x: x, y: y, width: width, height: height, className: css.tileOverlay }),
+        React.createElement("foreignObject", { height: height, width: width, x: x, y: y },
+            React.createElement(TileButton, { onClick: handleOnClick, className: css.tileContent, ref: refs.setReference, ...getReferenceProps() }, tileSizeDisplay !== 'minimal' && (React.createElement("div", { className: css.tileContentWrapper },
+                React.createElement("p", { className: css.tileContentLabel }, item.label),
+                React.createElement("p", { className: css.tileContentValue },
+                    React.createElement("span", { className: css.tileContentMetric }, runInfo.displayValue),
+                    React.createElement(Delta, { className: css.tileContentDelta, displayValue: runInfo.displayDeltaPercentage, deltaType: runInfo.deltaType }))))),
+            isOpen && (React.createElement(FloatingPortal, null,
+                React.createElement("div", { ref: refs.setFloating, style: floatingStyles, ...getFloatingProps(), className: css.tooltip },
+                    React.createElement("div", { ref: arrowRef, style: { left: (_b = middlewareData.arrow) === null || _b === void 0 ? void 0 : _b.x }, className: css.tooltipArrow }),
+                    React.createElement(TooltipContent, { data: item })))))));
+};
+export const MetricsTreemap = (props) => {
+    const { className = '', items, onItemClick, emptyMessage = 'No data', ...restProps } = props;
+    const [containerRef, { width, height }] = useMeasure();
+    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 (React.createElement("div", { className: cx(css.root, className), ...restProps, ref: containerRef }, cells.length > 0 ? (React.createElement("svg", { width: width, height: height, viewBox: `0 0 ${width} ${height}`, className: css.canvas }, cells.map((leaf) => {
+        if (!leaf.parent) {
+            return null;
+        }
+        return (React.createElement(Tile, { x: leaf.x0, y: leaf.y0, width: leaf.x1 - leaf.x0, height: leaf.y1 - leaf.y0, data: leaf.data, key: leaf.id, onClick: onItemClick }));
+    }))) : (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,168 @@
+.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);
+}
+
+/** Tile overlay fill background transition */
+.root {
+  transition: var(--ui-transition-out);
+  transition-property: opacity;
+}
+
+.tileOverlay {
+  fill: var(--color-outline);
+  transition: var(--ui-transition-out);
+  transition-property: opacity;
+  opacity: 0.4;
+}
+
+.root .tile:hover .tileOverlay {
+  transition: var(--ui-transition-in);
+  opacity: 0.8;
+}
+
+/** Tile content */
+.tileContent {
+  appearance: none;
+  border: 0;
+  border-radius: none;
+  padding: 0;
+  background: none;
+
+  width: 100%;
+  height: 100%;
+  padding: var(--space-xxsmall) var(--space-small);
+  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;
+}
+
+.tileContentWrapper {
+  width: 100%;
+  max-height: 100%;
+  display: flex;
+  flex-flow: column;
+  gap: 4px;
+}
+
+.tileContentLabel {
+  margin-right: calc(0px - var(--space-xxsmall)); /* take more space if necessary */
+  margin-bottom: calc(0px - 2px);
+  flex: 1 1 auto;
+  max-width: calc(100% + var(--space-xxsmall));  /* take more space if necessary */
+  overflow: hidden;
+  word-break: break-word;
+}
+
+.tileContentValue {
+  flex: 0 0 auto;
+  max-width: calc(100% + var(--space-xxsmall));
+  margin-right: calc(0px - var(--space-xxsmall)); /* take more space if necessary */
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.tileContentMetric {
+  font-weight: bold;
+}
+
+.tileContentDelta {
+  margin-left: var(--space-xxxsmall);
+}
+
+/** Tile size variation */
+.tileSmall .tileContent {
+  font-size: var(--size-xsmall);
+}
+
+.tileSmall .tileContentLabel {
+  margin-top: 0;
+}
+
+/** Tile diff variation */
+.tile-NO_CHANGE .tileContent {
+  color: var(--color-text-light);
+}
+
+.tile-HIGH_NEGATIVE .tileOverlay {
+  fill: var(--color-red-100);
+}
+
+.tile-NEGATIVE .tileOverlay {
+  fill: var(--color-red-50);
+}
+
+.tile-LOW_NEGATIVE .tileOverlay {
+  fill: var(--color-red-25);
+}
+
+.tile-LOW_POSITIVE .tileOverlay {
+  fill: var(--color-green-25);
+}
+
+.tile-POSITIVE .tileOverlay {
+  fill: var(--color-green-50);
+}
+
+.tile-HIGH_POSITIVE .tileOverlay {
+  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 content */
+.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);
+}
+
+.tooltipArrow {
+  border: var(--space-xxsmall) solid var(--color-background);
+  border-width: var(--space-xxsmall) var(--space-xxsmall) 0;
+  border-left-color: transparent;
+  border-right-color: transparent;
+  position: absolute;
+  top: 100%;
+}
+
+.tooltipContentTitle {
+  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/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/hooks/show-entry.js

@@ -0,0 +1,9 @@
+import { useMemo } from 'react';
+export const useShowEntry = (params) => {
+    const { setState } = params;
+    return useMemo(() => ({
+        hideEntryInfo: () => setState({ entryId: '' }),
+        showEntryInfo: (entryId) => setState({ entryId }),
+    }), [setState]);
+};
+//# sourceMappingURL=show-entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"show-entry.js","sourceRoot":"","sources":["../../src/hooks/show-entry.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAMhC,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,MAAwB,EAAE,EAAE;IACvD,MAAM,EAAE,QAAQ,EAAE,GAAG,MAAM,CAAC;IAE5B,OAAO,OAAO,CACZ,GAAG,EAAE,CAAC,CAAC;QACL,aAAa,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC;QAC9C,aAAa,EAAE,CAAC,OAAe,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC;KAC1D,CAAC,EACF,CAAC,QAAQ,CAAC,CACX,CAAC;AACJ,CAAC,CAAC"}

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.0",
+  "version": "4.13.0-beta.0",
   "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"
@@ -36,13 +36,14 @@
   },
   "homepage": "https://github.com/relative-ci/bundle-stats/blob/master/packages/ui#readme",
   "devDependencies": {
-    "@babel/preset-env": "7.23.9",
+    "@babel/preset-env": "7.24.0",
     "@babel/preset-react": "7.23.3",
     "@babel/preset-typescript": "7.23.3",
     "@storybook/addon-essentials": "7.6.17",
     "@storybook/react": "7.6.17",
     "@storybook/react-webpack5": "7.6.17",
-    "@types/react": "18.2.60",
+    "@types/d3": "7.4.3",
+    "@types/react": "18.2.64",
     "@types/react-router-dom": "5.3.3",
     "babel-plugin-require-context-hook": "1.0.0",
     "classnames": "2.5.1",
@@ -72,10 +73,14 @@
     "react-router-dom": "^5.0.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^4.12.0",
+    "@bundle-stats/utils": "4.13.0-beta.0",
+    "@floating-ui/react": "0.26.9",
+    "@floating-ui/react-dom": "2.0.8",
     "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": "e5b069c804249e9b11295de52bed1893a419a10a"
+  "gitHead": "f8197677d480f9b0b2112456526c821f49ed5a7d"
 }

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>

package/src/assets/icons.svg

@@ -1,26 +1,26 @@
 <svg width="0" height="0" style="position:absolute">
-<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" id="arrow" xmlns="http://www.w3.org/2000/svg">
+<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-down" id="arrow" xmlns="http://www.w3.org/2000/svg">
 <path d="M12 5v14M19 12l-7 7-7-7"/>
 </symbol>
-<symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" id="arrow-right-circle" xmlns="http://www.w3.org/2000/svg">
+<symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right-circle" viewBox="0 0 24 24" id="arrow-right-circle" xmlns="http://www.w3.org/2000/svg">
 <circle cx="12" cy="12" r="10"/>
-<path d="M12 16l4-4-4-4M8 12h8"/>
+<path d="m12 16 4-4-4-4M8 12h8"/>
 </symbol>
-<symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" id="chevron-down" xmlns="http://www.w3.org/2000/svg">
-<path d="M6 9l6 6 6-6"/>
+<symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down" viewBox="0 0 24 24" id="chevron-down" xmlns="http://www.w3.org/2000/svg">
+<path d="m6 9 6 6 6-6"/>
 </symbol>
-<symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" id="chevron-up" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 15l-6-6-6 6"/>
+<symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-up" viewBox="0 0 24 24" id="chevron-up" xmlns="http://www.w3.org/2000/svg">
+<path d="m18 15-6-6-6 6"/>
 </symbol>
-<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" id="clock" xmlns="http://www.w3.org/2000/svg">
+<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock" id="clock" xmlns="http://www.w3.org/2000/svg">
 <circle cx="12" cy="12" r="10"/>
 <path d="M12 6v6l4 2"/>
 </symbol>
-<symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" id="close" xmlns="http://www.w3.org/2000/svg">
+<symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-circle" viewBox="0 0 24 24" id="close" xmlns="http://www.w3.org/2000/svg">
 <circle cx="12" cy="12" r="10"/>
-<path d="M15 9l-6 6M9 9l6 6"/>
+<path d="m15 9-6 6M9 9l6 6"/>
 </symbol>
-<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" id="commit" xmlns="http://www.w3.org/2000/svg">
+<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-git-commit" id="commit" xmlns="http://www.w3.org/2000/svg">
 <circle cx="12" cy="12" r="4"/>
 <path d="M1.05 12H7M17.01 12h5.95"/>
 </symbol>
@@ -28,24 +28,24 @@
 <circle cx="12" cy="12" r="10"/>
 <path d="M12 8v4M12 16h.01"/>
 </symbol>
-<symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" id="external-link" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3"/>
+<symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link" viewBox="0 0 24 24" id="external-link" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14 21 3"/>
 </symbol>
-<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" id="filter" xmlns="http://www.w3.org/2000/svg">
+<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bar-chart" id="filter" xmlns="http://www.w3.org/2000/svg">
 <path d="M12 20V10M18 20V4M6 20v-4"/>
 </symbol>
 <symbol viewBox="0 0 98 96" id="github" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0112.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="currentColor"/>
 </symbol>
-<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" id="help" xmlns="http://www.w3.org/2000/svg">
+<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-help-circle" id="help" xmlns="http://www.w3.org/2000/svg">
 <circle cx="12" cy="12" r="10"/>
-<path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3M12 17h.01"/>
+<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3M12 17h.01"/>
 </symbol>
 <symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" id="info" xmlns="http://www.w3.org/2000/svg">
 <circle cx="12" cy="12" r="10"/>
 <path d="M12 16v-4M12 8h.01"/>
 </symbol>
-<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" id="menu" xmlns="http://www.w3.org/2000/svg">
+<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu" id="menu" xmlns="http://www.w3.org/2000/svg">
 <path d="M3 12h18M3 6h18M3 18h18"/>
 </symbol>
 <symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" id="more-vertical" xmlns="http://www.w3.org/2000/svg">
@@ -57,7 +57,13 @@
 <path d="M3 18h6v-2H3v2zM3 6v2h18V6H3zm0 7h12v-2H3v2z"/>
 <path d="M0 0h24v24H0z" fill="none"/>
 </symbol>
-<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" id="warning" xmlns="http://www.w3.org/2000/svg">
-<path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0zM12 9v4M12 17h.01"/>
+<symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" id="table" xmlns="http://www.w3.org/2000/svg">
+<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"/>
+</symbol>
+<symbol fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" id="treemap" xmlns="http://www.w3.org/2000/svg">
+<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-2V9M12.025 3.422 12 20.652ZM12.85 9l7.347.025zm-.153 6 7.576.025zm4.334.764L17 20.326Z"/>
+</symbol>
+<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-triangle" id="warning" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0zM12 9v4M12 17h.01"/>
 </symbol>
 </svg>