@bundle-stats/ui 4.8.3 → 4.8.4

package/src/components/metrics-table/metrics-table.stories.tsx

@@ -0,0 +1,225 @@
+import React from 'react';
+
+import { MetricRunInfoDeltaType } from '@bundle-stats/utils';
+import { getWrapperDecorator } from '../../stories';
+import { MetricsTable } from '.';
+
+const RUNS = [
+  {
+    internalBuildNumber: 2,
+    label: 'Job #2',
+  },
+  {
+    internalBuildNumber: 1,
+    label: <a href="#noop">Job #1</a>,
+  },
+];
+
+const ITEMS_SINGLE_RUN = [
+  {
+    key: 'webpack.assets.totalSizeByTypeALL',
+    label: 'Total Size',
+    biggerIsBetter: false,
+    changed: false,
+    runs: [
+      {
+        value: 873421,
+        displayValue: '852.95KB',
+      },
+    ],
+  },
+  {
+    key: 'lighthouse.timeToFirstByte',
+    label: 'Time To First Byte',
+    biggerIsBetter: false,
+    changed: false,
+    runs: [
+      {
+        value: 1231,
+        displayValue: '1.231s',
+      },
+    ],
+  },
+  {
+    key: 'lighthouse.score',
+    label: 'Score',
+    biggerIsBetter: true,
+    changed: false,
+    runs: [
+      {
+        value: 80,
+        displayValue: '80',
+      },
+    ],
+  },
+  {
+    key: 'webpack.assets.totalSizeByTypeJS',
+    label: 'JS',
+    biggerIsBetter: false,
+    changed: false,
+    runs: [
+      {
+        value: 344232,
+        displayValue: '336.16KB',
+      },
+    ],
+  },
+  {
+    key: 'lighthouse.domSize',
+    label: 'DOM Size',
+    biggerIsBetter: false,
+    changed: false,
+    runs: [
+      {
+        value: 80,
+        displayValue: '80',
+      },
+    ],
+  },
+];
+
+const ITEMS_MULTIPLE_RUNS = [
+  {
+    key: 'webpack.assets.totalSizeByTypeALL',
+    label: 'Total Size',
+    biggerIsBetter: false,
+    changed: true,
+    runs: [
+      {
+        value: 873421,
+        displayValue: '852.95KB',
+        delta: 751090,
+        displayDelta: '+700KB',
+        deltaPercentage: 613.98,
+        displayDeltaPercentage: '+613.98%',
+        deltaType: 'HIGH_NEGATIVE' as MetricRunInfoDeltaType,
+      },
+      {
+        value: 122331,
+        displayValue: '119.46KB',
+      },
+    ],
+  },
+  {
+    key: 'lighthouse.timeToFirstByte',
+    label: 'Time To First Byte',
+    biggerIsBetter: false,
+    changed: true,
+    runs: [
+      {
+        value: 1000,
+        displayValue: '1s',
+        delta: 20,
+        displayDelta: '+20ms',
+        deltaPercentage: 2.0408163,
+        displayDeltaPercentage: '+2.04%',
+        deltaType: 'LOW_NEGATIVE' as MetricRunInfoDeltaType,
+      },
+      {
+        value: 980,
+        displayValue: '980ms',
+      },
+    ],
+  },
+  {
+    key: 'lighthouse.score',
+    label: 'Score',
+    biggerIsBetter: true,
+    changed: true,
+    runs: [
+      {
+        value: 80,
+        displayValue: '80',
+        delta: 10,
+        displayDelta: '+10',
+        deltaPercentage: 14.2857143,
+        displayDeltaPercentage: '+14.29%',
+        deltaType: 'POSITIVE' as MetricRunInfoDeltaType,
+      },
+      {
+        value: 70,
+        displayValue: '70',
+      },
+    ],
+  },
+  {
+    key: 'lighthouse.accessibilityScore',
+    label: 'Accessibility score',
+    biggerIsBetter: true,
+    changed: true,
+    runs: [
+      {
+        value: 80,
+        displayValue: '80',
+        delta: 2,
+        displayDelta: '+2',
+        deltaPercentage: 2.5641026,
+        displayDeltaPercentage: '+2.56%',
+        deltaType: 'LOW_POSITIVE' as MetricRunInfoDeltaType,
+      },
+      {
+        value: 78,
+        displayValue: '78',
+      },
+    ],
+  },
+  {
+    key: 'webpack.assets.totalSizeByTypeJS',
+    label: 'JS',
+    biggerIsBetter: false,
+    changed: true,
+    runs: [
+      {
+        value: 344232,
+        displayValue: '336.16KB',
+        delta: 344232,
+        displayDelta: '+100%',
+        deltaPercentage: 100,
+        displayDeltaPercentage: '+100%',
+        deltaType: 'HIGH_NEGATIVE' as MetricRunInfoDeltaType,
+      },
+      null,
+    ],
+  },
+  {
+    key: 'lighthouse.domSize',
+    label: 'DOM Size',
+    biggerIsBetter: false,
+    changed: false,
+    runs: [
+      {
+        value: 80,
+        displayValue: '80',
+        delta: 0,
+        displayDelta: '0',
+        deltaPercentage: 0,
+        displayDeltaPercentage: '0%',
+        deltaType: 'NO_CHANGE' as MetricRunInfoDeltaType,
+      },
+      {
+        value: 80,
+        displayValue: '80',
+      },
+    ],
+  },
+];
+
+export default {
+  title: 'Components/MetricsTable',
+  component: MetricsTable,
+  decorators: [getWrapperDecorator()],
+};
+
+export const Default = () => <MetricsTable runs={RUNS.slice(0, 1)} items={ITEMS_SINGLE_RUN} />;
+
+export const MultipleRuns = () => <MetricsTable runs={RUNS} items={ITEMS_MULTIPLE_RUNS} />;
+
+export const WithHeaderSum = () => (
+  <MetricsTable
+    runs={RUNS}
+    items={[ITEMS_MULTIPLE_RUNS[0], ITEMS_MULTIPLE_RUNS[4]]}
+    showHeaderSum
+  />
+);
+
+export const Empty = () => <MetricsTable runs={RUNS} items={[]} />;

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

@@ -0,0 +1,301 @@
+import React from 'react';
+import cx from 'classnames';
+import isEmpty from 'lodash/isEmpty';
+import sum from 'lodash/sum';
+import {
+  METRIC_TYPE_CONFIGS,
+  type MetricRunInfo,
+  MetricTypes,
+  getMetricRunInfo,
+} from '@bundle-stats/utils';
+
+import { Icon } from '../../ui/icon';
+import { Table } from '../../ui/table';
+import { Stack } from '../../layout/stack';
+import { Metric } from '../metric';
+import { Delta } from '../delta';
+import { JobName } from '../job-name';
+import { SortButton } from '../sort-button';
+import * as I18N from './metrics-table.i18n';
+import css from './metrics-table.module.css';
+
+const METRIC_TYPE = METRIC_TYPE_CONFIGS[MetricTypes.FileSize];
+const VISIBLE_COUNT = 500;
+const BASELINE_COLUMN_SPAN = 1;
+const CURRENT_COLUMN_SPAN = 3;
+
+interface Run {
+  /**
+   * Run job label
+   */
+  label?: React.ReactNode;
+  /**
+   * Job internal build number
+   */
+  internalBuildNumber: number;
+}
+
+interface Item {
+  key: string;
+  label?: string;
+  changed: boolean;
+  biggerIsBetter: boolean;
+  runs: Array<MetricRunInfo | null>;
+}
+
+const getRowsRunTotal = (rows: Array<Item>, runIndex: number): number =>
+  sum(rows.map((row) => row?.runs?.[runIndex]?.value || 0));
+
+interface JobColumnProps {
+  run: Run;
+  isBaseline: boolean;
+}
+
+const JobColumn = ({ run, isBaseline }: JobColumnProps) => {
+  const colSpan = isBaseline ? BASELINE_COLUMN_SPAN : CURRENT_COLUMN_SPAN;
+  const { label, internalBuildNumber } = run;
+
+  if (!run) {
+    return <Table.Th colSpan={colSpan}>-</Table.Th>;
+  }
+
+  return (
+    <Table.Th className={css.jobCol} colSpan={colSpan}>
+      <JobName
+        title={isBaseline ? I18N.BASELINE_TITLE : I18N.CURRENT_TITLE}
+        internalBuildNumber={internalBuildNumber}
+        className={css.jobName}
+      >
+        {label}
+      </JobName>
+    </Table.Th>
+  );
+};
+
+interface ColumnSumProps {
+  rows: Array<Item>;
+  isBaseline: boolean;
+  runIndex: number;
+  sort?: any;
+  updateSort?: (val: any) => void;
+}
+
+const SumColumn = ({ rows, isBaseline, runIndex, updateSort, sort }: ColumnSumProps) => {
+  const currentRunTotal = getRowsRunTotal(rows, runIndex);
+  const baselineRunTotal = !isBaseline ? getRowsRunTotal(rows, runIndex + 1) : 0;
+  const total = getMetricRunInfo(METRIC_TYPE, currentRunTotal, baselineRunTotal);
+  const fieldPath = `runs[${runIndex}]`;
+
+  return (
+    <>
+      <Table.Th className={cx(css.value, css.sum)}>
+        <SortButton
+          fieldPath={fieldPath}
+          fieldName="value"
+          label={I18N.SORT_VALUE}
+          updateSort={updateSort}
+          sort={sort}
+        >
+          <Metric value={total.displayValue} />
+        </SortButton>
+      </Table.Th>
+      {!isBaseline && (
+        <>
+          <Table.Th className={cx(css.delta, css.sum)}>
+            <SortButton
+              fieldPath={fieldPath}
+              fieldName="delta"
+              label={I18N.SORT_CHANGE}
+              updateSort={updateSort}
+              sort={sort}
+            >
+              {'delta' in total && (
+                <Delta displayValue={total.displayDelta} deltaType={total.deltaType} />
+              )}
+            </SortButton>
+          </Table.Th>
+          <Table.Th className={cx(css.delta, css.deltaPercentage, css.sum)}>
+            <SortButton
+              fieldPath={fieldPath}
+              fieldName="deltaPercentage"
+              label={I18N.SORT_PERCENTUAL_CHANGE}
+              updateSort={updateSort}
+              sort={sort}
+            >
+              {'delta' in total && (
+                <Delta displayValue={total.displayDeltaPercentage} deltaType={total.deltaType} />
+              )}
+            </SortButton>
+          </Table.Th>
+        </>
+      )}
+    </>
+  );
+};
+
+interface RowProps extends React.ComponentProps<typeof Table.Tr> {
+  item: Item;
+  renderHeader: (item: Item) => React.ReactNode;
+}
+
+const Row = ({ className = '', item, renderHeader, ...restProps }: RowProps) => (
+  <Table.Tr className={cx(!item.changed && css.unchanged, className)} {...restProps}>
+    <Table.Th className={css.metricName}>{renderHeader(item)}</Table.Th>
+
+    {item.runs.map((run, index) => {
+      const isBaseline = index === item.runs.length - 1;
+      const valueClassName = cx(css.value, !isBaseline && css.current);
+
+      // Empty cells if no value
+      if (!run || typeof run.value === 'undefined') {
+        return (
+          <>
+            <Table.Td className={valueClassName}>-</Table.Td>
+            {!isBaseline && <Table.Td className={css.delta} />}
+            {!isBaseline && <Table.Td className={cx(css.delta, css.deltaPercentage)} />}
+          </>
+        );
+      }
+
+      return (
+        <>
+          <Table.Td className={valueClassName}>
+            <Metric value={run.displayValue} />
+          </Table.Td>
+          {!isBaseline && (
+            <>
+              <Table.Td className={css.delta}>
+                {'delta' in run && (
+                  <Delta displayValue={run.displayDelta} deltaType={run.deltaType} />
+                )}
+              </Table.Td>
+              <Table.Td className={cx(css.delta, css.deltaPercentage)}>
+                {'delta' in run && (
+                  <Delta displayValue={run.displayDeltaPercentage} deltaType={run.deltaType} />
+                )}
+              </Table.Td>
+            </>
+          )}
+        </>
+      );
+    })}
+  </Table.Tr>
+);
+
+interface MetricsTableProps extends Omit<React.ComponentProps<typeof Table>, 'title'> {
+  runs: Array<{
+    internalBuildNumber: number;
+  }>;
+  items: Array<Item>;
+  title?: React.ReactNode;
+  showHeaderSum?: boolean;
+  sort?: any;
+  updateSort?: (val: any) => void;
+  renderRowHeader?: (item: Item) => React.ReactNode;
+  emptyMessage?: React.ReactNode;
+  showAllItems: boolean;
+  setShowAllItems: (value: boolean) => void;
+}
+
+export const MetricsTable = ({
+  className = '',
+  runs,
+  items,
+  showHeaderSum = false,
+  title = '',
+  sort,
+  updateSort,
+  renderRowHeader = (item: any) => item.label,
+  emptyMessage = I18N.EMPTY_MESSAGE,
+  showAllItems,
+  setShowAllItems,
+  ...restProps
+}: MetricsTableProps) => {
+  const columnCount = (runs.length - 1) * CURRENT_COLUMN_SPAN + BASELINE_COLUMN_SPAN + 1;
+
+  const rootClassName = cx(
+    css.root,
+    className,
+    runs.length > 1 && css.multipleRuns,
+    showHeaderSum && css.showHeaderSum,
+  );
+
+  const showEmpty = isEmpty(items);
+  const showItems = !showEmpty;
+  const hasHiddenItems = items?.length > VISIBLE_COUNT;
+  const visibleItems = !hasHiddenItems || showAllItems ? items : items?.slice(0, VISIBLE_COUNT);
+
+  return (
+    <Table className={rootClassName} compact {...restProps}>
+      <Table.THead>
+        <Table.Tr className={css.headerRow}>
+          <Table.Th className={css.metricName} rowSpan={showHeaderSum ? 2 : 1}>
+            {title || ' '}
+          </Table.Th>
+          {runs.map((run, runIndex) => (
+            <JobColumn run={run} isBaseline={runIndex === runs.length - 1} />
+          ))}
+        </Table.Tr>
+        {showHeaderSum && (
+          <Table.Tr className={css.headerRow}>
+            {runs.map((_, runIndex) => (
+              <SumColumn
+                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={css.empty} colSpan={columnCount}>
+              <Stack space="xxsmall">
+                <div>
+                  <Icon glyph={Icon.ICONS.INFO} className={css.emptyIcon} size="large" />
+                </div>
+                {emptyMessage}
+              </Stack>
+            </Table.Td>
+          </Table.Tr>
+        )}
+
+        {showItems && (
+          <>
+            {visibleItems.map((item) => (
+              <Row key={item.key} item={item} renderHeader={renderRowHeader} />
+            ))}
+
+            {hasHiddenItems && (
+              <Table.Tr>
+                <Table.Td className={css.showAllItems} colSpan={columnCount}>
+                  {showAllItems ? (
+                    <button
+                      onClick={() => setShowAllItems(false)}
+                      type="button"
+                      className={css.showAllItemsButton}
+                    >
+                      {I18N.SHOW_LESS}
+                    </button>
+                  ) : (
+                    <button
+                      onClick={() => setShowAllItems(true)}
+                      type="button"
+                      className={css.showAllItemsButton}
+                    >
+                      {I18N.SHOW_ALL}
+                    </button>
+                  )}
+                </Table.Td>
+              </Table.Tr>
+            )}
+          </>
+        )}
+      </Table.TBody>
+    </Table>
+  );
+};

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

@@ -1,5 +1,5 @@
 .root {
-  --icon-dimension: 15px;
+  --icon-dimension: 13px;
   display: inline-block;
   margin: calc(0px - var(--space-xxxsmall));
   margin-right: calc(0px - 1px - var(--icon-dimension));
@@ -18,13 +18,13 @@
 }
 
 .toggle {
-  padding: var(--space-xxxsmall);
+  padding: 1px var(--space-xxxsmall);
   padding-right: calc(1px + var(--icon-dimension));
 }
 
 .direction {
   position: absolute;
-  padding: 2px;
+  padding: 1px;
   display: block;
   overflow: hidden;
   right: -2px; /* compensate for the button padding */
@@ -68,9 +68,9 @@
   transform: translateY(-5px);
 }
 
-.root:hover,
-.root:active,
-.root:focus {
+.interactive:hover,
+.interactive:active,
+.interactive:focus {
   background: var(--color-outline);
 }
 
@@ -80,9 +80,9 @@
 }
 
 .active .direction,
-.root:hover .direction,
-.root:active .direction,
-.root:focus .direction {
+.interactive:hover .direction,
+.interactive:hover:active .direction,
+.interactive:hover:focus .direction {
   pointer-events: auto;
   opacity: 1;
   transition: var(--transition-in);

package/src/components/sort-button/sort-button.tsx

@@ -12,7 +12,7 @@ interface SortInfo {
   title: string;
 }
 
-const getToggleAction = (sort: SortAction, field: string, label: string): SortInfo => {
+const getToggleAction = (field: string, label: string, sort?: SortAction): SortInfo => {
   // Sort the column desc if not currently sorted
   if (sort?.field !== field) {
     return { direction: SORT.DESC, title: `Order ${label} descending` };
@@ -39,21 +39,25 @@ interface SortButtonProps {
   fieldPath: string;
   fieldName: string;
   label: string;
-  sort: SortAction;
-  updateSort: (params: SortAction) => void;
+  sort?: SortAction;
+  updateSort?: (params: SortAction) => void;
 }
 
 export const SortButton = (props: SortButtonProps & React.ComponentProps<'div'>) => {
   const { className = '', children, fieldPath, fieldName, label, sort, updateSort } = props;
 
   const field = `${fieldPath}.${fieldName}`;
-  const toggleAction = getToggleAction(sort, field, label);
+  const toggleAction = getToggleAction(field, label, sort);
   const ascAction = getAscAction(label);
   const descAction = getDescAction(label);
-  const isSorted = sort.field === field;
+  const isSorted = sort?.field === field;
 
   const getOrderOnClick = useCallback(
     (action: SortInfo) => () => {
+      if (!updateSort) {
+        return;
+      }
+
       if (action.direction) {
         updateSort({ field, direction: action.direction as SortAction['direction'] });
         return;
@@ -64,8 +68,12 @@ export const SortButton = (props: SortButtonProps & React.ComponentProps<'div'>)
     [field, updateSort, toggleAction],
   );
 
+  if (!updateSort) {
+    return <div className={cx(css.root, className)}>{children}</div>;
+  }
+
   return (
-    <div className={cx(css.root, className, isSorted && css.active)}>
+    <div className={cx(css.root, css.interactive, className, isSorted && css.active)}>
       <Tooltip
         title={toggleAction.title}
         as="button"

package/src/hooks/rows-sort.ts

@@ -7,9 +7,9 @@ import { SORT } from '../constants';
 
 interface UseRowsSortParams {
   rows: Array<unknown>;
-  initialField: string;
-  initialDirection: SortAction['direction'];
-  getCustomSort: (item: unknown) => Array<string | number | boolean>;
+  initialField?: string;
+  initialDirection?: SortAction['direction'];
+  getCustomSort: (item: any) => Array<string | number | boolean>;
 }
 
 export const getSortFn =
@@ -18,7 +18,7 @@ export const getSortFn =
       return getCustomSort(item);
     }
 
-    return Math.abs(get(item, fieldPath) || 0);
+    return get(item, fieldPath) || 0;
   };
 
 export const useRowsSort = ({
@@ -32,11 +32,11 @@ export const useRowsSort = ({
   const orderedRows = useMemo(
     () =>
       orderBy(
-        rows,
-        getSortFn(sort.field, getCustomSort),
-        // if direction is empty (reset), sort asc
-        sort.direction !== '' ? sort.direction : (SORT.ASC as any),
-      ),
+      rows,
+      getSortFn(sort.field, getCustomSort),
+      // if direction is empty (reset), sort asc
+      sort.direction !== '' ? sort.direction : (SORT.ASC as any),
+    ),
     [rows, sort],
   );
 

package/src/types.d.ts

@@ -2,3 +2,14 @@ export interface SortAction {
   field: string;
   direction: 'asc' | 'desc' | '';
 }
+
+interface FilterFieldData {
+  label: string;
+  defaultValue: boolean;
+  disabled?: boolean;
+}
+type FilterGroupFieldData = {
+  label: string;
+  children: Array<{ key: string } & FilterFieldData>;
+};
+type FilterFieldsData = Record<string, FilterFieldData | FilterGroupFieldData>;