@bundle-stats/ui 4.2.3-beta.0 → 4.2.3-beta.1

package/lib/components/metrics-table/metrics-table.js

@@ -15,179 +15,81 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MetricsTable = void 0;
-const react_1 = __importStar(require("react"));
-const prop_types_1 = __importDefault(require("prop-types"));
+const react_1 = __importDefault(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const isEmpty_1 = __importDefault(require("lodash/isEmpty"));
-const sum_1 = __importDefault(require("lodash/sum"));
-const utils_1 = require("@bundle-stats/utils");
+const button_1 = require("../../ui/button");
+const icon_1 = require("../../ui/icon");
 const table_1 = require("../../ui/table");
+const stack_1 = require("../../layout/stack");
 const metric_1 = require("../metric");
 const delta_1 = require("../delta");
-const job_name_1 = require("../job-name");
+const metrics_table_header_1 = require("../metrics-table-header");
+const I18N = __importStar(require("./metrics-table.i18n"));
 const metrics_table_module_css_1 = __importDefault(require("./metrics-table.module.css"));
-const METRIC_TYPE_DATA = (0, utils_1.getGlobalMetricType)(null, utils_1.METRIC_TYPE_FILE_SIZE);
 const VISIBLE_COUNT = 500;
-const getRowsRunTotal = (rows, runIndex) => (0, sum_1.default)(rows.map((row) => row?.runs?.[runIndex]?.value || 0));
-const getHeaderLabelCells = (rows) => (run, runIndex, runs) => {
-    const isBaseline = runIndex === runs.length - 1;
-    const className = (0, classnames_1.default)(metrics_table_module_css_1.default.value, isBaseline ? metrics_table_module_css_1.default.baseline : metrics_table_module_css_1.default.current);
-    if (!run) {
-        return [
-            { children: '-', className },
-            ...(!isBaseline ? [{ children: ' ', className: metrics_table_module_css_1.default.delta }] : []),
-        ];
-    }
-    const { label, internalBuildNumber } = run;
-    const jobName = (react_1.default.createElement(job_name_1.JobName, { title: runIndex === 0 ? 'Current' : 'Baseline', internalBuildNumber: internalBuildNumber, className: metrics_table_module_css_1.default.jobName }, label));
-    return [
-        { children: jobName, className },
-        ...(!isBaseline ? [{ children: ' ', className: (0, classnames_1.default)(metrics_table_module_css_1.default.delta) }] : []),
-    ];
-};
-const getHeaderTotalCells = (rows) => (run, runIndex, runs) => {
-    const isBaseline = runIndex === runs.length - 1;
-    const className = (0, classnames_1.default)(metrics_table_module_css_1.default.value, isBaseline ? metrics_table_module_css_1.default.baseline : metrics_table_module_css_1.default.current);
-    const currentRunTotal = getRowsRunTotal(rows, runIndex);
-    const baselineRunTotal = !isBaseline && getRowsRunTotal(rows, runIndex + 1);
-    const infoTotal = (0, utils_1.getMetricRunInfo)(METRIC_TYPE_DATA, currentRunTotal, baselineRunTotal);
-    return [
-        {
-            children: react_1.default.createElement(metric_1.Metric, { className: metrics_table_module_css_1.default.tableHeaderRunMetric, value: infoTotal.displayValue }),
-            className,
-        },
-        ...(!isBaseline
-            ? [
-                {
-                    children: (react_1.default.createElement(delta_1.Delta, { displayValue: infoTotal.displayDeltaPercentage, deltaType: infoTotal.deltaType })),
-                    className: metrics_table_module_css_1.default.delta,
-                },
-            ]
-            : []),
-    ];
-};
-const getHeaderRows = (runs, items, showHeaderSum, title) => [
-    {
-        className: metrics_table_module_css_1.default.headerRowColumns,
-        cells: [
-            {
-                children: title || ' ',
-                className: metrics_table_module_css_1.default.metricName,
-                rowSpan: showHeaderSum ? 2 : 1,
-            },
-            ...runs.map(getHeaderLabelCells(items)).flat(),
-        ],
-    },
-    ...(showHeaderSum
-        ? [
-            {
-                className: metrics_table_module_css_1.default.headerRowTotals,
-                cells: runs.map(getHeaderTotalCells(items)).flat(),
-            },
-        ]
-        : []),
-];
-const MetricsTableRow = ({ item, renderRowHeader }) => (react_1.default.createElement(table_1.Table.Tr, { className: (0, classnames_1.default)(!item.changed && metrics_table_module_css_1.default.unchanged) },
-    react_1.default.createElement(table_1.Table.Th, { className: metrics_table_module_css_1.default.metricName }, renderRowHeader(item)),
+const BASELINE_COLUMN_SPAN = 1;
+const CURRENT_COLUMN_SPAN = 3;
+const Row = ({ className = '', item, renderHeader, ...restProps }) => (react_1.default.createElement(table_1.Table.Tr, { className: (0, classnames_1.default)(!item.changed && metrics_table_module_css_1.default.unchanged, className), ...restProps },
+    react_1.default.createElement(table_1.Table.Th, { className: metrics_table_module_css_1.default.metricName }, renderHeader(item)),
     item.runs.map((run, index) => {
         const isBaseline = index === item.runs.length - 1;
         const valueClassName = (0, classnames_1.default)(metrics_table_module_css_1.default.value, !isBaseline && metrics_table_module_css_1.default.current);
         if (!run || typeof run.value === 'undefined') {
             return (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(table_1.Table.Td, { className: valueClassName }, "-"),
-                !isBaseline && react_1.default.createElement(table_1.Table.Td, { className: metrics_table_module_css_1.default.delta })));
+                !isBaseline && react_1.default.createElement(table_1.Table.Td, { className: metrics_table_module_css_1.default.delta }),
+                !isBaseline && react_1.default.createElement(table_1.Table.Td, { className: (0, classnames_1.default)(metrics_table_module_css_1.default.delta, metrics_table_module_css_1.default.deltaPercentage) })));
         }
-        const { displayValue, deltaPercentage, displayDeltaPercentage, deltaType } = run;
         return (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(table_1.Table.Td, { className: valueClassName },
-                react_1.default.createElement(metric_1.Metric, { value: displayValue })),
-            !isBaseline && typeof deltaPercentage === 'number' && (react_1.default.createElement(table_1.Table.Td, { className: metrics_table_module_css_1.default.delta },
-                react_1.default.createElement(delta_1.Delta, { displayValue: displayDeltaPercentage, deltaType: deltaType })))));
+                react_1.default.createElement(metric_1.Metric, { value: run.displayValue })),
+            !isBaseline && (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(table_1.Table.Td, { className: metrics_table_module_css_1.default.delta }, 'delta' in run && (react_1.default.createElement(delta_1.Delta, { displayValue: run.displayDelta, deltaType: run.deltaType }))),
+                react_1.default.createElement(table_1.Table.Td, { className: (0, classnames_1.default)(metrics_table_module_css_1.default.delta, metrics_table_module_css_1.default.deltaPercentage) }, 'delta' in run && (react_1.default.createElement(delta_1.Delta, { displayValue: run.displayDeltaPercentage, deltaType: run.deltaType })))))));
     })));
-MetricsTableRow.propTypes = {
-    item: prop_types_1.default.shape({
-        changed: prop_types_1.default.bool,
-        runs: prop_types_1.default.arrayOf(prop_types_1.default.shape({
-            value: prop_types_1.default.number,
-            displayValue: prop_types_1.default.string,
-            deltaPercentage: prop_types_1.default.number,
-            displayDeltaPercentage: prop_types_1.default.string,
-            deltaType: prop_types_1.default.string,
-        })),
-    }).isRequired,
-    renderRowHeader: prop_types_1.default.func.isRequired,
-};
-const MetricsTable = ({ className, renderRowHeader, runs, items, emptyMessage, showHeaderSum, headerRows, title, showAllItems, setShowAllItems, ...restProps }) => {
-    const { headers, columnClassNames } = (0, react_1.useMemo)(() => {
-        const headerColumns = getHeaderRows(runs, items, showHeaderSum, title);
-        return {
-            headers: [...headerRows, ...headerColumns],
-            columnClassNames: headerColumns[0].cells.map((headerColumn) => headerColumn.className),
-        };
-    }, [headerRows, runs, items, showHeaderSum, title]);
-    const rootClassName = (0, classnames_1.default)(metrics_table_module_css_1.default.root, className, runs.length > 1 && metrics_table_module_css_1.default.multipleRuns, showHeaderSum && metrics_table_module_css_1.default.showHeaderSum);
+const MetricsTable = ({ className = '', runs, items, showHeaderSum = false, title, sort, updateSort, renderRowHeader = (item) => item.label, emptyMessage = I18N.EMPTY_MESSAGE, showAllItems, setShowAllItems, ...restProps }) => {
+    const columnCount = (runs.length - 1) * CURRENT_COLUMN_SPAN + BASELINE_COLUMN_SPAN + 1;
+    const rootClassName = (0, classnames_1.default)(metrics_table_module_css_1.default.root, className, runs.length > 1 && metrics_table_module_css_1.default.multipleRuns);
     const showEmpty = (0, isEmpty_1.default)(items);
     const showItems = !showEmpty;
     const hasHiddenItems = items?.length > VISIBLE_COUNT;
     const visibleItems = !hasHiddenItems || showAllItems ? items : items?.slice(0, VISIBLE_COUNT);
     return (react_1.default.createElement(table_1.Table, { className: rootClassName, compact: true, ...restProps },
-        react_1.default.createElement(table_1.Table.THead, null, headers.map((headerRow) => {
-            const { cells, className: rowClassName } = headerRow.cells
-                ? headerRow
-                : { cells: headerRow };
-            return (react_1.default.createElement(table_1.Table.Tr, { className: rowClassName }, cells.map((header) => (react_1.default.createElement(table_1.Table.Th, { ...header })))));
-        })),
+        react_1.default.createElement(metrics_table_header_1.MetricsTableHeader, { metricTitle: title, showSum: showHeaderSum, jobs: runs, rows: items, sort: sort, updateSort: updateSort }),
         react_1.default.createElement(table_1.Table.TBody, null,
             showEmpty && (react_1.default.createElement(table_1.Table.Tr, null,
-                react_1.default.createElement(table_1.Table.Td, { className: metrics_table_module_css_1.default.empty, colSpan: columnClassNames?.length || 1 }, emptyMessage))),
+                react_1.default.createElement(table_1.Table.Td, { className: metrics_table_module_css_1.default.empty, colSpan: columnCount },
+                    react_1.default.createElement(stack_1.Stack, { space: "xxsmall" },
+                        react_1.default.createElement("div", null,
+                            react_1.default.createElement(icon_1.Icon, { glyph: icon_1.Icon.ICONS.INFO, className: metrics_table_module_css_1.default.emptyIcon, size: "large" })),
+                        emptyMessage)))),
             showItems && (react_1.default.createElement(react_1.default.Fragment, null,
-                visibleItems.map((item) => (react_1.default.createElement(MetricsTableRow, { key: item.key, item: item, renderRowHeader: renderRowHeader }))),
+                visibleItems.map((item) => (react_1.default.createElement(Row, { key: item.key, item: item, renderHeader: renderRowHeader }))),
                 hasHiddenItems && (react_1.default.createElement(table_1.Table.Tr, null,
-                    react_1.default.createElement(table_1.Table.Td, { className: metrics_table_module_css_1.default.showAllItems, colSpan: columnClassNames?.length || 1 }, showAllItems ? (react_1.default.createElement("button", { onClick: () => setShowAllItems(false), type: "button", className: metrics_table_module_css_1.default.showAllItemsButton }, "Show less")) : (react_1.default.createElement("button", { onClick: () => setShowAllItems(true), type: "button", className: metrics_table_module_css_1.default.showAllItemsButton }, "Show all"))))))))));
+                    react_1.default.createElement(table_1.Table.Td, { className: metrics_table_module_css_1.default.showAllItems, colSpan: columnCount }, showAllItems ? (react_1.default.createElement(button_1.Button, { padding: "small", kind: "primary", onClick: () => setShowAllItems(false), type: "button" }, I18N.SHOW_LESS)) : (react_1.default.createElement(button_1.Button, { padding: "small", kind: "primary", onClick: () => setShowAllItems(true), type: "button" }, I18N.SHOW_ALL))))))))));
 };
 exports.MetricsTable = MetricsTable;
-exports.MetricsTable.defaultProps = {
-    className: '',
-    renderRowHeader: (item) => item.label,
-    emptyMessage: 'No entries found.',
-    showHeaderSum: false,
-    headerRows: [],
-    title: '',
-};
-exports.MetricsTable.propTypes = {
-    className: prop_types_1.default.string,
-    renderRowHeader: prop_types_1.default.func,
-    runs: prop_types_1.default.arrayOf(prop_types_1.default.shape({
-        internalBuildNumber: prop_types_1.default.number,
-    })).isRequired,
-    items: prop_types_1.default.arrayOf(prop_types_1.default.shape({
-        key: prop_types_1.default.string,
-        label: prop_types_1.default.string,
-        runs: prop_types_1.default.arrayOf(prop_types_1.default.shape({
-            displayValue: prop_types_1.default.oneOfType([prop_types_1.default.number, prop_types_1.default.string]),
-            displayDelta: prop_types_1.default.oneOfType([prop_types_1.default.number, prop_types_1.default.string]),
-        })),
-    })).isRequired,
-    emptyMessage: prop_types_1.default.element,
-    showHeaderSum: prop_types_1.default.bool,
-    headerRows: prop_types_1.default.arrayOf(prop_types_1.default.arrayOf(prop_types_1.default.oneOfType([
-        prop_types_1.default.element,
-        prop_types_1.default.shape({
-            children: prop_types_1.default.node,
-        }),
-    ]))),
-    title: prop_types_1.default.element,
-};
 //# sourceMappingURL=metrics-table.js.map

package/lib/components/metrics-table/metrics-table.js.map

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

package/lib/components/metrics-table/metrics-table.module.css

@@ -10,52 +10,9 @@
   text-decoration: underline;
 }
 
-/* columns */
-.metricName {
-  width: 100%;
-}
-
-.tableHeaderRunMetric {
-  text-transform: none;
-}
-
-.root .value {
-  padding-left: var(--space-large);
-  text-align: right;
-  vertical-align: baseline;
-}
-
+.root .value,
 .root .delta {
-  padding-left: 0;
-  text-align: left;
-  font-size: var(--size-xsmall);
-  vertical-align: baseline;
-}
-
-.root tbody .delta {
-  line-height: 1.6rem; /* baseline alignment with the value */
-}
-
-.root .value.current {
-  padding-right: var(--space-xxsmall);
-}
-
-.jobName {
-  white-space: nowrap;
-}
-
-/* columns overrides for showHeaderSum */
-.showHeaderSum .headerRowColumns .value,
-.showHeaderSum .headerRowColumns .delta {
-  border-bottom: 0;
-  padding-bottom: 0;
-}
-
-.headerRowTotals th {
-  padding-top: 0 !important;
-  font-weight: normal;
-  font-size: var(--size-xsmall);
-  vertical-align: middle;
+  text-align: right;
 }
 
 /** rows */
@@ -66,34 +23,22 @@
 
 .root .empty {
   background: none !important;
-  padding-top: var(--space-xxxlarge);
-  padding-bottom: var(--space-xxxlarge);
+  padding-top: calc(var(--space-xxxlarge) * 2);
+  padding-bottom: calc(var(--space-xxxlarge) * 2);
   text-align: center;
 }
 
+.emptyIcon {
+  color: var(--color-outline-dark);
+  width: var(--space-large);
+  height: var(--space-large);
+}
+
 .root .showAllItems {
   background: none !important;
   text-align: center;
 }
 
-/** show all */
-.showAllItemsButton {
-  appearance: none;
-  background: none;
-  margin: 0;
-  border: 0;
-  padding: var(--space-xxxsmall);
-  color: var(--color-primary);
-  text-decoration: underline;
-  cursor: pointer;
-}
-
-.showAllItemsButton:hover,
-.showAllItemsButton:focus,
-.showAllItemsButton:active {
-  color: var(--color-primary-dark);
-}
-
 /** Breakpoints */
 .root tr {
   display: flex;

package/lib/components/metrics-table-export/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./metrics-table-export"), exports);
+//# sourceMappingURL=index.js.map

package/lib/components/metrics-table-export/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/metrics-table-export/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,yDAAuC"}

package/lib/components/metrics-table-export/metrics-table-export.js

@@ -0,0 +1,98 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MetricsTableExport = void 0;
+const react_1 = __importStar(require("react"));
+const stack_1 = require("../../layout/stack");
+const tabs_1 = require("../../ui/tabs");
+const preview_source_1 = require("../preview-source");
+const metrics_table_export_module_css_1 = __importDefault(require("./metrics-table-export.module.css"));
+const generateSourceJSON = (items) => {
+    const output = items.map((item) => ({
+        name: item.label,
+        runs: item.runs?.map((itemRun) => ({
+            name: itemRun?.name || '',
+            size: itemRun?.value || 0,
+        })),
+    }));
+    return JSON.stringify(output, null, 2);
+};
+const CSV_SEPARATOR = ', ';
+const generateSourceCSV = (items) => {
+    const output = [];
+    output.push([
+        'Name',
+        ...(items?.[0]?.runs?.map((_, index) => {
+            if (index === 0) {
+                return `Run ${index + 1}(current)`;
+            }
+            return `Run ${index + 1}(baseline)`;
+        }) || []),
+    ].join(CSV_SEPARATOR));
+    items?.forEach((item) => {
+        const row = [item.label];
+        item.runs?.forEach((itemRun) => {
+            row.push(itemRun?.value || 0);
+        });
+        output.push(row.join(CSV_SEPARATOR));
+    });
+    return output.join('\r');
+};
+const SOURCES = {
+    csv: {
+        label: 'CSV',
+        transformFn: generateSourceCSV,
+        extension: '.csv',
+    },
+    json: {
+        label: 'JSON',
+        transformFn: generateSourceJSON,
+        extension: '.json',
+    },
+};
+const SOURCE_ENTRIES = Object.entries(SOURCES);
+const SOURCE_KEYS = Object.keys(SOURCES);
+const MetricsTableExport = (props) => {
+    const { initialSourceType = SOURCE_KEYS[0], items, download, ...restProps } = props;
+    const [selectedSourceType, setSelectedSourceType] = (0, react_1.useState)(initialSourceType);
+    return (react_1.default.createElement(stack_1.Stack, { space: "small", ...restProps },
+        react_1.default.createElement(tabs_1.Tabs, { className: metrics_table_export_module_css_1.default.tabs }, SOURCE_ENTRIES.map(([sourceId, source]) => (react_1.default.createElement(tabs_1.TabItem, { onClick: () => setSelectedSourceType(sourceId), isTabActive: selectedSourceType === sourceId, id: `metrics-table-export-tab-${sourceId}`, "aria-controls": `metrics-table-export-panel-${sourceId}`, key: sourceId }, source.label)))),
+        react_1.default.createElement("div", null, SOURCE_ENTRIES.map(([sourceId, source]) => selectedSourceType === sourceId && (react_1.default.createElement(preview_source_1.PreviewSource, { source: source.transformFn(items), rows: 20, download: `${download}${source.extension}`, role: "tabpanel", id: `metrics-table-export-panel-${sourceId}`, "aria-labelledby": `metrics-table-export-tab-${sourceId}`, key: source.label }))))));
+};
+exports.MetricsTableExport = MetricsTableExport;
+//# sourceMappingURL=metrics-table-export.js.map

package/lib/components/metrics-table-export/metrics-table-export.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"metrics-table-export.js","sourceRoot":"","sources":["../../../src/components/metrics-table-export/metrics-table-export.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,+CAAwC;AAGxC,8CAA2C;AAC3C,wCAA8C;AAC9C,sDAAkD;AAClD,wGAAoD;AAEpD,MAAM,kBAAkB,GAAG,CAAC,KAA6B,EAAU,EAAE;IACnE,MAAM,MAAM,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;QAClC,IAAI,EAAE,IAAI,CAAC,KAAK;QAChB,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;YACjC,IAAI,EAAE,OAAO,EAAE,IAAI,IAAI,EAAE;YACzB,IAAI,EAAE,OAAO,EAAE,KAAK,IAAI,CAAC;SAC1B,CAAC,CAAC;KACJ,CAAC,CAAC,CAAC;IAEJ,OAAO,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;AACzC,CAAC,CAAC;AAEF,MAAM,aAAa,GAAG,IAAI,CAAC;AAE3B,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAU,EAAE;IAClE,MAAM,MAAM,GAAG,EAAE,CAAC;IAElB,MAAM,CAAC,IAAI,CACT;QACE,MAAM;QACN,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE;YACrC,IAAI,KAAK,KAAK,CAAC,EAAE,CAAC;gBAChB,OAAO,OAAO,KAAK,GAAG,CAAC,WAAW,CAAC;YACrC,CAAC;YAED,OAAO,OAAO,KAAK,GAAG,CAAC,YAAY,CAAC;QACtC,CAAC,CAAC,IAAI,EAAE,CAAC;KACV,CAAC,IAAI,CAAC,aAAa,CAAC,CACtB,CAAC;IAEF,KAAK,EAAE,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;QACtB,MAAM,GAAG,GAA2B,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAEjD,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;YAC7B,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,KAAK,IAAI,CAAC,CAAC,CAAC;QAChC,CAAC,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC;IACvC,CAAC,CAAC,CAAC;IAEH,OAAO,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAC3B,CAAC,CAAC;AAEF,MAAM,OAAO,GAAG;IACd,GAAG,EAAE;QACH,KAAK,EAAE,KAAK;QACZ,WAAW,EAAE,iBAAiB;QAC9B,SAAS,EAAE,MAAM;KAClB;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;QACb,WAAW,EAAE,kBAAkB;QAC/B,SAAS,EAAE,OAAO;KACnB;CACF,CAAC;AAEF,MAAM,cAAc,GAAG,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;AAC/C,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;AAQlC,MAAM,kBAAkB,GAAG,CAAC,KAA8B,EAAE,EAAE;IACnE,MAAM,EAAE,iBAAiB,GAAG,WAAW,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAEpF,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,IAAA,gBAAQ,EAAC,iBAAiB,CAAC,CAAC;IAEhF,OAAO,CACL,8BAAC,aAAK,IAAC,KAAK,EAAC,OAAO,KAAK,SAAS;QAChC,8BAAC,WAAI,IAAC,SAAS,EAAE,yCAAG,CAAC,IAAI,IACtB,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,MAAM,CAAC,EAAE,EAAE,CAAC,CAC1C,8BAAC,cAAO,IACN,OAAO,EAAE,GAAG,EAAE,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EAC9C,WAAW,EAAE,kBAAkB,KAAK,QAAQ,EAC5C,EAAE,EAAE,4BAA4B,QAAQ,EAAE,mBAC3B,8BAA8B,QAAQ,EAAE,EACvD,GAAG,EAAE,QAAQ,IAEZ,MAAM,CAAC,KAAK,CACL,CACX,CAAC,CACG;QACP,2CACG,cAAc,CAAC,GAAG,CACjB,CAAC,CAAC,QAAQ,EAAE,MAAM,CAAC,EAAE,EAAE,CACrB,kBAAkB,KAAK,QAAQ,IAAI,CACjC,8BAAC,8BAAa,IACZ,MAAM,EAAE,MAAM,CAAC,WAAW,CAAC,KAAK,CAAC,EACjC,IAAI,EAAE,EAAE,EACR,QAAQ,EAAE,GAAG,QAAQ,GAAG,MAAM,CAAC,SAAS,EAAE,EAC1C,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,8BAA8B,QAAQ,EAAE,qBAC3B,4BAA4B,QAAQ,EAAE,EACvD,GAAG,EAAE,MAAM,CAAC,KAAK,GACjB,CACL,CACF,CACG,CACA,CACT,CAAC;AACJ,CAAC,CAAC;AAtCW,QAAA,kBAAkB,sBAsC7B"}

package/lib/components/metrics-table-export/metrics-table-export.module.css

@@ -0,0 +1,4 @@
+.tabs {
+  /* adjust verticals spacing with the tab top padding */
+  margin-top: calc(0px - var(--space-xsmall)) !important;
+}

package/lib/components/metrics-table-header/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./metrics-table-header"), exports);
+//# sourceMappingURL=index.js.map

package/lib/components/metrics-table-header/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/metrics-table-header/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,yDAAuC"}

package/lib/components/metrics-table-header/metrics-table-header.i18n.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SORT_PERCENTUAL_CHANGE = exports.SORT_CHANGE = exports.SORT_VALUE = exports.CURRENT_TITLE = exports.BASELINE_TITLE = void 0;
+exports.BASELINE_TITLE = 'Baseline';
+exports.CURRENT_TITLE = 'Current';
+exports.SORT_VALUE = 'value';
+exports.SORT_CHANGE = 'change';
+exports.SORT_PERCENTUAL_CHANGE = 'percentual change';
+//# sourceMappingURL=metrics-table-header.i18n.js.map

package/lib/components/metrics-table-header/metrics-table-header.i18n.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"metrics-table-header.i18n.js","sourceRoot":"","sources":["../../../src/components/metrics-table-header/metrics-table-header.i18n.ts"],"names":[],"mappings":";;;AAAa,QAAA,cAAc,GAAG,UAAU,CAAC;AAC5B,QAAA,aAAa,GAAG,SAAS,CAAC;AAE1B,QAAA,UAAU,GAAG,OAAO,CAAC;AACrB,QAAA,WAAW,GAAG,QAAQ,CAAC;AACvB,QAAA,sBAAsB,GAAG,mBAAmB,CAAC"}

package/lib/components/metrics-table-header/metrics-table-header.js

@@ -0,0 +1,89 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MetricsTableHeader = void 0;
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const sum_1 = __importDefault(require("lodash/sum"));
+const utils_1 = require("@bundle-stats/utils");
+const table_1 = require("../../ui/table");
+const delta_1 = require("../delta");
+const job_name_1 = require("../job-name");
+const metric_1 = require("../metric");
+const sort_button_1 = require("../sort-button");
+const I18N = __importStar(require("./metrics-table-header.i18n"));
+const metrics_table_header_module_css_1 = __importDefault(require("./metrics-table-header.module.css"));
+const METRIC_TYPE = utils_1.METRIC_TYPE_CONFIGS[utils_1.MetricTypes.FileSize];
+const BASELINE_COLUMN_SPAN = 1;
+const CURRENT_COLUMN_SPAN = 3;
+const JobColumn = ({ job, isBaseline }) => {
+    const colSpan = isBaseline ? BASELINE_COLUMN_SPAN : CURRENT_COLUMN_SPAN;
+    const { label, internalBuildNumber } = job;
+    if (!job) {
+        return react_1.default.createElement(table_1.Table.Th, { colSpan: colSpan }, "-");
+    }
+    return (react_1.default.createElement(table_1.Table.Th, { className: (0, classnames_1.default)(metrics_table_header_module_css_1.default.col, metrics_table_header_module_css_1.default.job), colSpan: colSpan },
+        react_1.default.createElement(job_name_1.JobName, { title: isBaseline ? I18N.BASELINE_TITLE : I18N.CURRENT_TITLE, internalBuildNumber: internalBuildNumber, className: metrics_table_header_module_css_1.default.jobName }, label)));
+};
+const getRowsRunTotal = (rows, runIndex) => (0, sum_1.default)(rows.map((row) => row?.runs?.[runIndex]?.value || 0));
+const SumColumn = ({ rows, isBaseline, runIndex, updateSort, sort }) => {
+    const currentRunTotal = getRowsRunTotal(rows, runIndex);
+    const baselineRunTotal = !isBaseline ? getRowsRunTotal(rows, runIndex + 1) : 0;
+    const total = (0, utils_1.getMetricRunInfo)(METRIC_TYPE, currentRunTotal, baselineRunTotal);
+    const fieldPath = `runs[${runIndex}]`;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(table_1.Table.Th, { className: (0, classnames_1.default)(metrics_table_header_module_css_1.default.col, metrics_table_header_module_css_1.default.value, metrics_table_header_module_css_1.default.sum) },
+            react_1.default.createElement(sort_button_1.SortButton, { fieldPath: fieldPath, fieldName: "value", label: I18N.SORT_VALUE, updateSort: updateSort, sort: sort },
+                react_1.default.createElement(metric_1.Metric, { value: total.displayValue }))),
+        !isBaseline && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(table_1.Table.Th, { className: (0, classnames_1.default)(metrics_table_header_module_css_1.default.col, metrics_table_header_module_css_1.default.delta, metrics_table_header_module_css_1.default.sum) },
+                react_1.default.createElement(sort_button_1.SortButton, { fieldPath: fieldPath, fieldName: "delta", label: I18N.SORT_CHANGE, updateSort: updateSort, sort: sort }, 'delta' in total && (react_1.default.createElement(delta_1.Delta, { displayValue: total.displayDelta, deltaType: total.deltaType })))),
+            react_1.default.createElement(table_1.Table.Th, { className: (0, classnames_1.default)(metrics_table_header_module_css_1.default.col, metrics_table_header_module_css_1.default.delta, metrics_table_header_module_css_1.default.deltaPercentage, metrics_table_header_module_css_1.default.sum) },
+                react_1.default.createElement(sort_button_1.SortButton, { fieldPath: fieldPath, fieldName: "deltaPercentage", label: I18N.SORT_PERCENTUAL_CHANGE, updateSort: updateSort, sort: sort }, 'delta' in total && (react_1.default.createElement(delta_1.Delta, { displayValue: total.displayDeltaPercentage, deltaType: total.deltaType }))))))));
+};
+const MetricsTableHeader = (props) => {
+    const { className = '', metricTitle = '', showSum = false, jobs, rows, sort, updateSort } = props;
+    const rootClassName = (0, classnames_1.default)(metrics_table_header_module_css_1.default.root, showSum && metrics_table_header_module_css_1.default.showHeaderSum, className);
+    return (react_1.default.createElement(table_1.Table.THead, { className: rootClassName },
+        react_1.default.createElement(table_1.Table.Tr, null,
+            react_1.default.createElement(table_1.Table.Th, { className: (0, classnames_1.default)(metrics_table_header_module_css_1.default.col, metrics_table_header_module_css_1.default.metric), rowSpan: showSum ? 2 : 1 }, metricTitle || ' '),
+            jobs.map((job, runIndex) => (react_1.default.createElement(JobColumn, { job: job, isBaseline: runIndex === jobs.length - 1 })))),
+        showSum && (react_1.default.createElement(table_1.Table.Tr, null, jobs.map((_, runIndex) => (react_1.default.createElement(SumColumn, { rows: rows, isBaseline: runIndex === jobs.length - 1, runIndex: runIndex, updateSort: updateSort, sort: sort })))))));
+};
+exports.MetricsTableHeader = MetricsTableHeader;
+//# sourceMappingURL=metrics-table-header.js.map