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

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

@@ -0,0 +1,51 @@
+/* columns */
+.root .col {
+  padding-top: var(--space-xxsmall);
+  padding-bottom: var(--space-xxsmall);
+}
+
+.root .metric {
+  width: 55%;
+  vertical-align: middle;
+}
+
+.root .job {
+  padding-top: var(--space-xxsmall);
+  text-align: right;
+}
+
+.root .value {
+  text-align: right;
+  vertical-align: baseline;
+  width: 15%;
+}
+
+.root .delta {
+  text-align: right;
+  font-size: var(--size-xsmall);
+  vertical-align: baseline;
+  width: 10%;
+  color: pink;
+}
+
+.root .deltaPercentage {
+  width: 5%;
+}
+
+.jobName {
+  white-space: nowrap;
+}
+
+/* columns overrides for showHeaderSum */
+.showHeaderSum .job {
+  border-bottom: 0;
+  padding-bottom: 0;
+}
+
+.showHeaderSum .sum {
+  padding-top: 0;
+  font-size: var(--size-small);
+  vertical-align: middle;
+  text-transform: none;
+}
+

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

@@ -0,0 +1,172 @@
+import React from 'react';
+import cx from 'classnames';
+import sum from 'lodash/sum';
+import {
+  METRIC_TYPE_CONFIGS,
+  MetricTypes,
+  type ReportMetricRow,
+  getMetricRunInfo,
+} from '@bundle-stats/utils';
+
+import { Table } from '../../ui/table';
+import { Delta } from '../delta';
+import { JobName } from '../job-name';
+import { Metric } from '../metric';
+import { SortButton } from '../sort-button';
+import * as I18N from './metrics-table-header.i18n';
+import css from './metrics-table-header.module.css';
+
+const METRIC_TYPE = METRIC_TYPE_CONFIGS[MetricTypes.FileSize];
+const BASELINE_COLUMN_SPAN = 1;
+const CURRENT_COLUMN_SPAN = 3;
+
+interface JobColumnProps {
+  job: { label: string; internalBuildNumber: number };
+  isBaseline: boolean;
+}
+
+const JobColumn = ({ job, isBaseline }: JobColumnProps) => {
+  const colSpan = isBaseline ? BASELINE_COLUMN_SPAN : CURRENT_COLUMN_SPAN;
+  const { label, internalBuildNumber } = job;
+
+  if (!job) {
+    return <Table.Th colSpan={colSpan}>-</Table.Th>;
+  }
+
+  return (
+    <Table.Th className={cx(css.col, css.job)} colSpan={colSpan}>
+      <JobName
+        title={isBaseline ? I18N.BASELINE_TITLE : I18N.CURRENT_TITLE}
+        internalBuildNumber={internalBuildNumber}
+        className={css.jobName}
+      >
+        {label}
+      </JobName>
+    </Table.Th>
+  );
+};
+
+const getRowsRunTotal = (rows: Array<ReportMetricRow>, runIndex: number): number =>
+  sum(rows.map((row) => row?.runs?.[runIndex]?.value || 0));
+
+interface ColumnSumProps {
+  rows: Array<ReportMetricRow>;
+  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.col, 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.col, 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.col, 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 MetricsTableHeaderProps {
+  /**
+   * Metric column title
+   */
+  metricTitle?: React.ReactNode;
+  /**
+   * Show column sum flag
+   */
+  showSum?: boolean;
+  /**
+   * Array of jobs
+   */
+  jobs: Array<{ label: string; internalBuildNumber: number }>;
+  /**
+   * Report rows
+   */
+  rows: Array<ReportMetricRow>;
+  /**
+   * Sort field data
+   */
+  sort?: any;
+  /**
+   * Update sort field
+   */
+  updateSort?: (val: any) => void;
+}
+
+export const MetricsTableHeader = (
+  props: MetricsTableHeaderProps & React.ComponentProps<'thead'>,
+) => {
+  const { className = '', metricTitle = '', showSum = false, jobs, rows, sort, updateSort } = props;
+
+  const rootClassName = cx(css.root, showSum && css.showHeaderSum, className);
+
+  return (
+    <Table.THead className={rootClassName}>
+      <Table.Tr>
+        <Table.Th className={cx(css.col, css.metric)} rowSpan={showSum ? 2 : 1}>
+          {metricTitle || ' '}
+        </Table.Th>
+        {jobs.map((job, runIndex) => (
+          <JobColumn job={job} isBaseline={runIndex === jobs.length - 1} />
+        ))}
+      </Table.Tr>
+      {showSum && (
+        <Table.Tr>
+          {jobs.map((_, runIndex) => (
+            <SumColumn
+              rows={rows}
+              isBaseline={runIndex === jobs.length - 1}
+              runIndex={runIndex}
+              updateSort={updateSort}
+              sort={sort}
+            />
+          ))}
+        </Table.Tr>
+      )}
+    </Table.THead>
+  );
+};

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

@@ -2,23 +2,17 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import I18N from '../../i18n';
-import { Dropdown } from '../../ui/dropdown';
+import { Dropdown, DropdownItem } from '../../ui/dropdown';
 
 export const MetricsTableOptions = (props) => {
-  const { className,  handleViewAll, handleResetFilters, ...restProps } = props;
+  const { className, handleViewAll, handleResetFilters, ...restProps } = props;
 
   return (
     <Dropdown className={className} glyph="more-vertical" {...restProps}>
       {handleResetFilters && (
-        <Dropdown.Item onClick={handleResetFilters}>
-          {I18N.RESET_FILTERS}
-        </Dropdown.Item>
-      )}
-      {handleViewAll && (
-        <Dropdown.Item onClick={handleViewAll}>
-          {I18N.VIEW_ALL}
-        </Dropdown.Item>
+        <DropdownItem onClick={handleResetFilters}>{I18N.RESET_FILTERS}</DropdownItem>
       )}
+      {handleViewAll && <DropdownItem onClick={handleViewAll}>{I18N.VIEW_ALL}</DropdownItem>}
     </Dropdown>
   );
 };

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

@@ -15,7 +15,7 @@ export const MetricsTableTitle = (props) => {
   const rootClassName = cx(css.root, className);
 
   return (
-    <Stack space="xxsmall" className={rootClassName}>
+    <Stack space="none" 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

@@ -1,8 +1,9 @@
 .root {
+  color: var(--color-text-ultra-light);
 }
 
 .title {
-  color: var(--color-text-light);
+  color: inherit;
   font-size: 1em;
   font-weight: bold;
   text-transform: uppercase;
@@ -18,8 +19,7 @@
 }
 
 .info {
-  color: var(--color-text-light);
+  font-size: var(--size-small);
   font-family: var(--font-family-fixed);
-  font-size: var(--size-xsmall);
-  font-weight: bold;
+  font-weight: normal;
 }

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

@@ -12,6 +12,7 @@
   height: 100%;
   fill: var(--color-text);
   font-family: var(--font-family);
+  background: var(--color-background);
 }
 
 /** Tile overlay fill background transition */
@@ -20,29 +21,14 @@
   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 {
+/** Leaf wrapper button */
+.leaf {
+  position: absolute;
   appearance: none;
   border: 0;
-  border-radius: none;
+  border-radius: 0;
   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);
@@ -51,77 +37,116 @@
   text-align: left;
 }
 
-.tileContentWrapper {
+.leaf::before {
+  content: "";
+  display: block;
+  position: absolute;
+  z-index: 1;
+  left: 0;
+  top: 0;
   width: 100%;
-  max-height: 100%;
+  height: 100%;
+  background-color: currentColor;
+  color: var(--color-background);
+  transition: var(--ui-transition-out);
+  transition-property: opacity;
+  opacity: 0.6;
+}
+
+.leaf:hover::before {
+  transition: var(--ui-transition-in);
+  opacity: 0.4;
+}
+
+.leafContent {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
   display: flex;
   flex-flow: column;
-  gap: 4px;
+  justify-content: center;
+  padding: var(--space-xxsmall) var(--space-xxsmall);
+  gap: var(--space-xxxsmall);
+  line-height: var(--line-height-heading);
+}
+
+/** Align label to other elements on the first column leafs */
+.leafFirstCol .leafContent {
+  padding-left: var(--space-small);
 }
 
-.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 */
+.leadContentLabel {
+  flex: 0 1 auto;
+  width: 100%;
+  min-width: 0;
+  max-height: calc(2em * var(--line-height-heading));
   overflow: hidden;
-  word-break: break-word;
 }
 
-.tileContentValue {
+.leadContentValue {
   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 {
+.leadContentMetric {
   font-weight: bold;
 }
 
-.tileContentDelta {
+.leadContentDelta {
   margin-left: var(--space-xxxsmall);
 }
 
 /** Tile size variation */
-.tileSmall .tileContent {
+.leafSmall .leafContent {
+  padding: var(--space-xxxsmall) var(--space-xxsmall);
+  gap: 0;
   font-size: var(--size-xsmall);
 }
 
-.tileSmall .tileContentLabel {
+.leafSmall .leadContentLabel {
   margin-top: 0;
 }
 
 /** Tile diff variation */
-.tile-NO_CHANGE .tileContent {
+.leaf-NO_CHANGE {
   color: var(--color-text-light);
 }
 
-.tile-HIGH_NEGATIVE .tileOverlay {
-  fill: var(--color-red-100);
+.leaf-NO_CHANGE::before {
+  color: var(--color-gray-50);
+  opacity: 0.4;
+}
+
+.leaf-NO_CHANGE:hover::before {
+  opacity: 0.2;
 }
 
-.tile-NEGATIVE .tileOverlay {
-  fill: var(--color-red-50);
+.leaf-HIGH_NEGATIVE::before {
+  color: var(--color-red-100);
 }
 
-.tile-LOW_NEGATIVE .tileOverlay {
-  fill: var(--color-red-25);
+.leaf-NEGATIVE::before {
+  color: var(--color-red-50);
 }
 
-.tile-LOW_POSITIVE .tileOverlay {
-  fill: var(--color-green-25);
+.leaf-LOW_NEGATIVE::before {
+  color: var(--color-red-25);
 }
 
-.tile-POSITIVE .tileOverlay {
-  fill: var(--color-green-50);
+.leaf-LOW_POSITIVE::before {
+  color: var(--color-green-25);
 }
 
-.tile-HIGH_POSITIVE .tileOverlay {
-  fill: var(--color-green-100);
+.leaf-POSITIVE::before {
+  color: var(--color-green-50);
 }
 
+.leaf-HIGH_POSITIVE::before {
+  color: var(--color-green-100);
+}
 
 /** empty message */
 .emptyMessage {
@@ -140,7 +165,12 @@
   text-align: center;
 }
 
-/** tooltip content */
+/** tooltip */
+.leafContentTooltipAnchor {
+  width: 100%;
+  height: 100%;
+}
+
 .tooltip {
   z-index: var(--layer-xxhigh);
   padding: var(--space-xsmall) var(--space-small);
@@ -152,17 +182,20 @@
   will-change: filter;
   background: var(--color-light);
   font-size: var(--size-small);
+  pointer-events: none;
 }
 
-.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%;
+/* prevent tooltip portal wrapper from capturing events */
+div[role="presentation"]:has(.tooltip) {
+  pointer-events: none;
+}
+
+
+.leafTooltipArrow svg {
+  display: block;
+  fill: var(--color-background) !important;
 }
 
-.tooltipContentTitle {
+.leafTooltipContentTitle {
   font-size: var(--size-medium);
 }