@bundle-stats/ui 4.4.2 → 4.5.0-beta.1

package/src/components/metrics-table/metrics-table.jsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import isEmpty from 'lodash/isEmpty';
@@ -11,102 +11,109 @@ import { Stack } from '../../layout/stack';
 import { Metric } from '../metric';
 import { Delta } from '../delta';
 import { JobName } from '../job-name';
+import { SortButton } from '../sort-button';
 import styles from './metrics-table.module.css';
 
 const METRIC_TYPE_DATA = getGlobalMetricType(null, METRIC_TYPE_FILE_SIZE);
 const VISIBLE_COUNT = 500;
+const BASELINE_COLUMN_SPAN = 1;
+const CURRENT_COLUMN_SPAN = 3;
+const BASELINE_TITLE = 'Baseline';
+const CURRENT_TITLE = 'Current';
 
-const getRowsRunTotal = (rows, runIndex) => sum(rows.map((row) => row?.runs?.[runIndex]?.value || 0));
+const getRowsRunTotal = (rows, runIndex) =>
+  sum(rows.map((row) => row?.runs?.[runIndex]?.value || 0));
 
-const getHeaderLabelCells = (rows) => (run, runIndex, runs) => {
-  const isBaseline = runIndex === runs.length - 1;
-  const className = cx(styles.value, isBaseline ? styles.baseline : styles.current);
+const ColumnJob = ({ run, isBaseline }) => {
+  const colSpan = isBaseline ? BASELINE_COLUMN_SPAN : CURRENT_COLUMN_SPAN;
 
   if (!run) {
-    return [
-      { children: '-', className },
-      ...(!isBaseline ? [{ children: ' ', className: styles.delta }] : []),
-    ];
+    return <Table.Th colSpan={colSpan}>-</Table.Th>;
   }
 
   const { label, internalBuildNumber } = run;
 
-  const jobName = (
-    <JobName
-      title={runIndex === 0 ? 'Current' : 'Baseline'}
-      internalBuildNumber={internalBuildNumber}
-      className={styles.jobName}
-    >
-      {label}
-    </JobName>
+  return (
+    <Table.Th className={styles.job} colSpan={colSpan}>
+      <JobName
+        title={isBaseline ? BASELINE_TITLE : CURRENT_TITLE}
+        internalBuildNumber={internalBuildNumber}
+        className={styles.jobName}
+      >
+        {label}
+      </JobName>
+    </Table.Th>
   );
-
-  return [
-    // Value column
-    { children: jobName, className },
-    // Delta column
-    ...(!isBaseline ? [{ children: ' ', className: cx(styles.delta) }] : []),
-  ];
 };
 
-const getHeaderTotalCells = (rows) => (run, runIndex, runs) => {
-  const isBaseline = runIndex === runs.length - 1;
-  const className = cx(styles.value, isBaseline ? styles.baseline : styles.current);
-
+const ColumnSum = ({ rows, isBaseline, runIndex, updateSort, sort }) => {
   const currentRunTotal = getRowsRunTotal(rows, runIndex);
   const baselineRunTotal = !isBaseline && getRowsRunTotal(rows, runIndex + 1);
   const infoTotal = getMetricRunInfo(METRIC_TYPE_DATA, currentRunTotal, baselineRunTotal);
+  const fieldPath = `runs[${runIndex}]`;
 
-  return [
-    // Value column
-    {
-      children: <Metric className={styles.tableHeaderRunMetric} value={infoTotal.displayValue} />,
-      className,
-    },
-
-    // Delta column
-    ...(!isBaseline
-      ? [
-          {
-            children: (
+  return (
+    <>
+      <Table.Th className={cx(styles.value, styles.sum)}>
+        {(updateSort && sort) ? (
+          <SortButton
+            fieldPath={fieldPath}
+            fieldName="value"
+            label="absolute value"
+            updateSort={updateSort}
+            sort={sort}
+          >
+            <Metric value={infoTotal.displayValue} />
+          </SortButton>
+        ) : (
+          <Metric value={infoTotal.displayValue} />
+        )}
+      </Table.Th>
+      {!isBaseline && (
+        <>
+          <Table.Th className={cx(styles.delta, styles.sum)}>
+            {(updateSort && sort) ? (
+              <SortButton
+                fieldPath={fieldPath}
+                fieldName="delta"
+                label="absolute change"
+                updateSort={updateSort}
+                sort={sort}
+              >
+                <Delta displayValue={infoTotal.displayDelta} deltaType={infoTotal.deltaType} />
+              </SortButton>
+            ) : (
+              <Delta displayValue={infoTotal.displayDelta} deltaType={infoTotal.deltaType} />
+            )}
+          </Table.Th>
+          <Table.Th className={cx(styles.delta, styles.sum)}>
+            {(updateSort && sort) ? (
+              <SortButton
+                fieldPath={fieldPath}
+                fieldName="deltaPercentage"
+                label="absolute percentual change"
+                updateSort={updateSort}
+                sort={sort}
+              >
+                <Delta
+                  displayValue={infoTotal.displayDeltaPercentage}
+                  deltaType={infoTotal.deltaType}
+                />
+              </SortButton>
+            ) : (
               <Delta
                 displayValue={infoTotal.displayDeltaPercentage}
                 deltaType={infoTotal.deltaType}
               />
-            ),
-            className: styles.delta,
-          },
-        ]
-      : []),
-  ];
+            )}
+          </Table.Th>
+        </>
+      )}
+    </>
+  );
 };
 
-const getHeaderRows = (runs, items, showHeaderSum, title) => [
-  {
-    className: styles.headerRowColumns,
-    cells: [
-      // Metric name column - one empty strying to render the column
-      {
-        children: title || ' ',
-        className: styles.metricName,
-        rowSpan: showHeaderSum ? 2 : 1,
-      },
-
-      // Runs
-      ...runs.map(getHeaderLabelCells(items)).flat(),
-    ],
-  },
-  ...(showHeaderSum
-    ? [
-        {
-          className: styles.headerRowTotals,
-          cells: runs.map(getHeaderTotalCells(items)).flat(),
-        },
-      ]
-    : []),
-];
-
-const MetricsTableRow = ({ item, renderRowHeader }) => (
+const Row = ({ item, renderRowHeader }) => (
   <Table.Tr className={cx(!item.changed && styles.unchanged)}>
     <Table.Th className={styles.metricName}>{renderRowHeader(item)}</Table.Th>
 
@@ -120,11 +127,13 @@ const MetricsTableRow = ({ item, renderRowHeader }) => (
           <>
             <Table.Td className={valueClassName}>-</Table.Td>
             {!isBaseline && <Table.Td className={styles.delta} />}
+            {!isBaseline && <Table.Td className={cx(styles.delta, styles.deltaPercentage)} />}
           </>
         );
       }
 
-      const { displayValue, deltaPercentage, displayDeltaPercentage, deltaType } = run;
+      const { displayValue, deltaPercentage, displayDelta, displayDeltaPercentage, deltaType } =
+        run;
 
       return (
         <>
@@ -132,9 +141,14 @@ const MetricsTableRow = ({ item, renderRowHeader }) => (
             <Metric value={displayValue} />
           </Table.Td>
           {!isBaseline && typeof deltaPercentage === 'number' && (
-            <Table.Td className={styles.delta}>
-              <Delta displayValue={displayDeltaPercentage} deltaType={deltaType} />
-            </Table.Td>
+            <>
+              <Table.Td className={styles.delta}>
+                <Delta displayValue={displayDelta} deltaType={deltaType} />
+              </Table.Td>
+              <Table.Td className={cx(styles.delta, styles.deltaPercentage)}>
+                <Delta displayValue={displayDeltaPercentage} deltaType={deltaType} />
+              </Table.Td>
+            </>
           )}
         </>
       );
@@ -142,7 +156,7 @@ const MetricsTableRow = ({ item, renderRowHeader }) => (
   </Table.Tr>
 );
 
-MetricsTableRow.propTypes = {
+Row.propTypes = {
   item: PropTypes.shape({
     changed: PropTypes.bool,
     runs: PropTypes.arrayOf(
@@ -165,21 +179,14 @@ export const MetricsTable = ({
   items,
   emptyMessage,
   showHeaderSum,
-  headerRows,
   title,
   showAllItems,
   setShowAllItems,
+  sort,
+  updateSort,
   ...restProps
 }) => {
-  const { headers, columnClassNames } = useMemo(() => {
-    const headerColumns = getHeaderRows(runs, items, showHeaderSum, title);
-
-    return {
-      headers: [...headerRows, ...headerColumns],
-      // First header row has the column class names
-      columnClassNames: headerColumns[0].cells.map((headerColumn) => headerColumn.className),
-    };
-  }, [headerRows, runs, items, showHeaderSum, title]);
+  const columnCount = (runs.length - 1) * CURRENT_COLUMN_SPAN + BASELINE_COLUMN_SPAN + 1;
 
   const rootClassName = cx(
     styles.root,
@@ -196,24 +203,32 @@ export const MetricsTable = ({
   return (
     <Table className={rootClassName} compact {...restProps}>
       <Table.THead>
-        {headers.map((headerRow) => {
-          const { cells, className: rowClassName } = headerRow.cells
-            ? headerRow
-            : { cells: headerRow };
-
-          return (
-            <Table.Tr className={rowClassName}>
-              {cells.map((header) => (
-                <Table.Th {...header} />
-              ))}
-            </Table.Tr>
-          );
-        })}
+        <Table.Tr className={styles.headerRow}>
+          <Table.Th className={styles.metricName} rowSpan={showHeaderSum ? 2 : 1}>
+            {title || ' '}
+          </Table.Th>
+          {runs.map((run, runIndex) => (
+            <ColumnJob run={run} isBaseline={runIndex === runs.length - 1} />
+          ))}
+        </Table.Tr>
+        {showHeaderSum && (
+          <Table.Tr className={styles.headerRow}>
+            {runs.map((run, runIndex) => (
+              <ColumnSum
+                rows={items}
+                isBaseline={runIndex === runs.length - 1}
+                runIndex={runIndex}
+                updateSort={updateSort}
+                sort={sort}
+              />
+            ))}
+          </Table.Tr>
+        )}
       </Table.THead>
       <Table.TBody>
         {showEmpty && (
           <Table.Tr>
-            <Table.Td className={styles.empty} colSpan={columnClassNames?.length || 1}>
+            <Table.Td className={styles.empty} colSpan={columnCount}>
               <Stack space="xxsmall">
                 <div>
                   <Icon glyph={Icon.ICONS.INFO} className={styles.emptyIcon} size="large" />
@@ -227,30 +242,29 @@ export const MetricsTable = ({
         {showItems && (
           <>
             {visibleItems.map((item) => (
-              <MetricsTableRow key={item.key} item={item} renderRowHeader={renderRowHeader} />
+              <Row key={item.key} item={item} renderRowHeader={renderRowHeader} />
             ))}
 
             {hasHiddenItems && (
               <Table.Tr>
-                <Table.Td className={styles.showAllItems} colSpan={columnClassNames?.length || 1}>
+                <Table.Td className={styles.showAllItems} colSpan={columnCount}>
                   {showAllItems ? (
-                      <button
-                        onClick={() => setShowAllItems(false)}
-                        type="button"
-                        className={styles.showAllItemsButton}
-                      >
-                        Show less
-                      </button>
-                    ) : (
-                      <button
-                        onClick={() => setShowAllItems(true)}
-                        type="button"
-                        className={styles.showAllItemsButton}
-                      >
-                        Show all
-                      </button>
-                    )
-                  }
+                    <button
+                      onClick={() => setShowAllItems(false)}
+                      type="button"
+                      className={styles.showAllItemsButton}
+                    >
+                      Show less
+                    </button>
+                  ) : (
+                    <button
+                      onClick={() => setShowAllItems(true)}
+                      type="button"
+                      className={styles.showAllItemsButton}
+                    >
+                      Show all
+                    </button>
+                  )}
                 </Table.Td>
               </Table.Tr>
             )}
@@ -266,7 +280,6 @@ MetricsTable.defaultProps = {
   renderRowHeader: (item) => item.label,
   emptyMessage: 'No entries found.',
   showHeaderSum: false,
-  headerRows: [],
   title: '',
 };
 
@@ -292,15 +305,5 @@ MetricsTable.propTypes = {
   ).isRequired,
   emptyMessage: PropTypes.element,
   showHeaderSum: PropTypes.bool,
-  headerRows: PropTypes.arrayOf(
-    PropTypes.arrayOf(
-      PropTypes.oneOfType([
-        PropTypes.element,
-        PropTypes.shape({
-          children: PropTypes.node,
-        }),
-      ]),
-    ),
-  ),
   title: PropTypes.element,
 };

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

@@ -15,8 +15,9 @@
   width: 100%;
 }
 
-.tableHeaderRunMetric {
-  text-transform: none;
+.root .job {
+  padding-right: calc(var(--space-xxxsmall) + var(--space-small));
+  text-align: right;
 }
 
 .root .value {
@@ -26,18 +27,13 @@
 }
 
 .root .delta {
-  padding-left: 0;
-  text-align: left;
+  text-align: right;
   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);
+  line-height: 1.6rem; /* baseline alignment with the column value */
 }
 
 .jobName {
@@ -45,17 +41,16 @@
 }
 
 /* columns overrides for showHeaderSum */
-.showHeaderSum .headerRowColumns .value,
-.showHeaderSum .headerRowColumns .delta {
+.showHeaderSum .headerRow .job {
   border-bottom: 0;
   padding-bottom: 0;
 }
 
-.headerRowTotals th {
-  padding-top: 0 !important;
-  font-weight: normal;
-  font-size: var(--size-xsmall);
+.showHeaderSum .headerRow .sum {
+  padding-top: var(--space-xxxsmall);
+  font-size: var(--size-small);
   vertical-align: middle;
+  text-transform: none;
 }
 
 /** rows */

package/src/components/metrics-table-title/metrics-table-title.jsx

@@ -14,7 +14,7 @@ export const MetricsTableTitle = (props) => {
   const rootClassName = cx(css.root, className);
 
   return (
-    <Stack className={rootClassName}>
+    <Stack space="xxsmall" className={rootClassName}>
       <FlexStack space="xxxsmall" alignItems="center" as="h3" className={css.title}>
         <span>{title}</span>
 

package/src/components/metrics-table-title/metrics-table-title.module.css

@@ -18,8 +18,10 @@
 }
 
 .info {
+  color: var(--color-text-light);
+  font-family: var(--font-family-fixed);
   font-size: var(--size-xsmall);
-  font-weight: normal;
+  font-weight: bold;
 }
 
 .readMoreLink {

package/src/components/run-info/run-info.stories.tsx

@@ -29,6 +29,13 @@ Default.args = {
   deltaType: 'HIGH_NEGATIVE',
 };
 
+export const DeltaPercentage = Template.bind({});
+
+DeltaPercentage.args = {
+  ...Default.args,
+  deltaPercentage: '+20KiB',
+};
+
 export const SizeLarge = Template.bind({});
 
 SizeLarge.args = {

package/src/components/run-info/run-info.tsx

@@ -31,6 +31,7 @@ export interface RunInfoProps {
   current?: React.ReactNode;
   baseline?: string;
   delta?: string;
+  deltaPercentage?: string;
   deltaType?: string;
 
   as?: React.ElementType;
@@ -49,6 +50,7 @@ export const RunInfo = ({
   current = '',
   baseline = '',
   delta = '',
+  deltaPercentage = '',
   deltaType = '',
   as: Component = 'div',
   size = 'medium',
@@ -57,7 +59,7 @@ export const RunInfo = ({
   enhance = false,
   ...restProps
 }: RunInfoProps & React.ComponentProps<'div'>) => {
-  const rootClassName = cx(css.root, className, css[size], delta && css.showDelta);
+  const rootClassName = cx(css.root, className, css[size], (delta || deltaPercentage) && css.showDelta);
 
   const currentValueParams: [React.ReactNode, string?] = useMemo(() => {
     if (!enhance || typeof current !== 'string') {
@@ -96,7 +98,17 @@ export const RunInfo = ({
             unit={currentValueParams[1]}
             inline
           >
-            {delta && <Delta className={css.delta} displayValue={delta} deltaType={deltaType} />}
+            {(delta || deltaPercentage) && (
+              <FlexStack space="xxxsmall" alignItems="center">
+                {deltaPercentage && (
+                  <FlexStack space="xxxsmall" alignItems="center">
+                    <Delta className={css.delta} displayValue={deltaPercentage} deltaType={deltaType} />
+                    {' / '}
+                  </FlexStack>
+                )}
+                {delta && <Delta className={css.delta} displayValue={delta} deltaType={deltaType} />}
+              </FlexStack>
+            )}
           </Metric>
           {showBaseline && <Metric className={css.baselineMetric} value={baseline} />}
         </Stack>

package/src/components/sort-button/index.ts

@@ -0,0 +1 @@
+export * from './sort-button';

package/src/components/sort-button/sort-button.module.css

@@ -0,0 +1,89 @@
+.root {
+  --icon-dimension: 15px;
+  display: inline-block;
+  margin: calc(0px - var(--space-xxxsmall));
+  margin-right: calc(0px - 1px - var(--icon-dimension));
+  border-radius: var(--radius-small);
+  position: relative;
+}
+
+.button {
+  appearance: none;
+  cursor: pointer;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  transition: var(--transition-out);
+}
+
+.toggle {
+  padding: var(--space-xxxsmall);
+  padding-right: calc(1px + var(--icon-dimension));
+}
+
+.direction {
+  position: absolute;
+  padding: 2px;
+  display: block;
+  overflow: hidden;
+  right: -2px; /* compensate for the button padding */
+  color: var(--color-text-ultra-light);
+  transition: var(--transition-out);
+}
+
+.directionIcon {
+  display: block;
+  width: var(--icon-dimension);
+  height: var(--icon-dimension);
+}
+
+.directionActive {
+  color: var(--color-text);
+  transition: var(--transition-in);
+}
+
+.direction:hover,
+.direction:active,
+.direction:focus {
+  color: var(--color-text-dark);
+  transition: var(--transition-in);
+}
+
+.directionAsc {
+  padding-bottom: 0;
+  bottom: 50%;
+}
+
+.directionAsc .directionIcon {
+  transform: translateY(3px);
+}
+
+.directionDesc {
+  padding-top: 0;
+  top: 50%;
+}
+
+.directionDesc .directionIcon {
+  transform: translateY(-5px);
+}
+
+.root:hover,
+.root:active,
+.root:focus {
+  background: var(--color-outline);
+}
+
+.direction {
+  pointer-events: none;
+  opacity: 0;
+}
+
+.active .direction,
+.root:hover .direction,
+.root:active .direction,
+.root:focus .direction {
+  pointer-events: auto;
+  opacity: 1;
+  transition: var(--transition-in);
+}