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

package/src/components/bundle-assets-totals/bundle-assets-totals.jsx

@@ -0,0 +1,125 @@
+import React, { useCallback, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { useHistory } from 'react-router-dom';
+import {
+  getBundleAssetsFileTypeComponentLink,
+  getComponentStateQueryString,
+} from '@bundle-stats/utils';
+import * as webpack from '@bundle-stats/utils/lib-esm/webpack';
+
+import config from '../../config.json';
+import { ASSETS_SIZES_FILE_TYPE_MAP, SECTION_URLS, MetricsDisplayType } from '../../constants';
+import { useMetricsDisplayType } from '../../hooks/metrics-display-type';
+import I18N from '../../i18n';
+import { Toolbar } from '../../ui/toolbar';
+import { Table } from '../../ui/table';
+import { Box } from '../../layout/box';
+import { Stack } from '../../layout/stack';
+import { MetricsDisplaySelector } from '../metrics-display-selector';
+import { MetricsTable } from '../metrics-table';
+import { MetricsTableTitle } from '../metrics-table-title';
+import { MetricsTableHeader } from '../metrics-table-header';
+import { MetricsTreemap } from '../metrics-treemap';
+import { ComponentLink } from '../component-link';
+
+export const BundleAssetsTotals = ({
+  className,
+  jobs,
+  customComponentLink: CustomComponentLink,
+  onTreemapItemClick,
+  ...restProps
+}) => {
+  const [displayType, setDisplayType] = useMetricsDisplayType();
+  const history = useHistory();
+
+  const items = webpack.compareBySection.sizes(jobs);
+
+  const renderRowHeader = (item) => {
+    const fileType = ASSETS_SIZES_FILE_TYPE_MAP[item.key];
+    const { section, title, params } = getBundleAssetsFileTypeComponentLink(fileType, item.label);
+
+    return (
+      <CustomComponentLink section={section} title={title} params={params}>
+        {item.label}
+      </CustomComponentLink>
+    );
+  };
+
+  const handleMetricsTreemapItemClick = useCallback(
+    (entryId) => {
+      const fileType = ASSETS_SIZES_FILE_TYPE_MAP[entryId];
+      const { section, params } = getBundleAssetsFileTypeComponentLink(fileType, '');
+      const queryParams = getComponentStateQueryString(params);
+
+      const nextUrl = `${SECTION_URLS[section]}?${queryParams}`;
+      history.push(nextUrl);
+    },
+    [history],
+  );
+
+  const metricsTableTitle = useMemo(
+    () => (
+      <MetricsTableTitle
+        title={I18N.ASSET_TOTALS}
+        popoverInfo={I18N.ASSET_TOTALS_INFO}
+        popoverHref={config.documentation.assets}
+      />
+    ),
+    [],
+  );
+
+  return (
+    <Stack space="xsmall" as="section" className={className}>
+      <Toolbar
+        renderActions={() => (
+          <MetricsDisplaySelector onSelect={setDisplayType} value={displayType} />
+        )}
+      />
+      <Box outline as="main">
+        {displayType === MetricsDisplayType.TABLE && (
+          <MetricsTable
+            title={metricsTableTitle}
+            runs={jobs}
+            items={items}
+            renderRowHeader={renderRowHeader}
+            showHeaderSum
+            {...restProps}
+          />
+        )}
+        {displayType === MetricsDisplayType.TREEMAP && (
+          <>
+            <Table compact>
+              <MetricsTableHeader metricTitle={metricsTableTitle} showSum jobs={jobs} rows={items} />
+            </Table>
+            <MetricsTreemap
+              items={items}
+              onItemClick={onTreemapItemClick || handleMetricsTreemapItemClick}
+            />
+          </>
+        )}
+      </Box>
+    </Stack>
+  );
+};
+
+BundleAssetsTotals.defaultProps = {
+  className: '',
+  jobs: [],
+  customComponentLink: ComponentLink,
+  onTreemapItemClick: undefined,
+};
+
+BundleAssetsTotals.propTypes = {
+  /** Addopted child class name */
+  className: PropTypes.string,
+
+  /** Jobs data */
+  jobs: PropTypes.array, // eslint-disable-line react/forbid-prop-types
+
+  customComponentLink: PropTypes.elementType,
+
+  /**
+   * Treemap item onClick
+   */
+  onTreemapItemClick: PropTypes.func,
+};

package/src/components/bundle-assets-totals/index.js

@@ -0,0 +1 @@
+export * from './bundle-assets-totals';

package/src/components/bundle-modules/bundle-modules.module.css

@@ -2,14 +2,9 @@
   color: var(--color-text-light);
 }
 
-.toolbar {
-  border-bottom: 1px solid var(--color-outline);
-}
-
 .toolbarSearch {
   width: 100%;
   max-width: 240px;
-  margin-right: -1px; /** collapse border */
 }
 
 .metricSelector {

package/src/components/bundle-modules/bundle-modules.tsx

@@ -2,22 +2,29 @@ import React, { useCallback, useMemo } from 'react';
 import cx from 'classnames';
 import { SECTIONS, COMPONENT } from '@bundle-stats/utils';
 
-import type { SortAction } from '../../types';
+import { SortAction } from '../../types';
 import config from '../../config.json';
 import I18N from '../../i18n';
+import { MetricsDisplayType } from '../../constants';
 import { Box } from '../../layout/box';
 import { FlexStack } from '../../layout/flex-stack';
+import { Stack } from '../../layout/stack';
 import { Button } from '../../ui/button';
+import { ControlGroup } from '../../ui/control-group';
 import { EmptySet } from '../../ui/empty-set';
 import { FileName } from '../../ui/file-name';
 import { Filters } from '../../ui/filters';
 import { InputSearch } from '../../ui/input-search';
 import { Tag } from '../../ui/tag';
+import { Table } from '../../ui/table';
 import { Toolbar } from '../../ui/toolbar';
 import { Tooltip } from '../../ui/tooltip';
 import { ComponentLink } from '../component-link';
 import { MetricsTable } from '../metrics-table';
+import { MetricsTableHeader } from '../metrics-table-header';
+import { MetricsTreemap } from '../metrics-treemap';
 import { MetricsTableOptions } from '../metrics-table-options';
+import { MetricsDisplaySelector } from '../metrics-display-selector';
 import { MetricsTableTitle } from '../metrics-table-title';
 import { ModuleInfo } from '../module-info';
 import { generateFilterFieldsData } from './bundle-modules.utils';
@@ -25,6 +32,7 @@ import { ModuleMetric } from './bundle-modules.constants';
 import type { Chunk, Job, ReportMetricModuleRow } from './bundle-modules.types';
 import * as I18N_MODULES from './bundle-modules.i18n';
 import css from './bundle-modules.module.css';
+import { useMetricsDisplayType } from '../../hooks/metrics-display-type';
 
 interface RowHeaderProps {
   row: ReportMetricModuleRow;
@@ -74,6 +82,7 @@ interface BundleModulesProps extends React.ComponentProps<'div'> {
 
   entryId?: string;
   hideEntryInfo: () => void;
+  showEntryInfo: (entryId: string) => void;
 
   moduleMetric: ModuleMetric;
   setModuleMetric: (newValue: ModuleMetric) => void;
@@ -101,12 +110,15 @@ export const BundleModules = (props: BundleModulesProps) => {
     hideEntryInfo,
     moduleMetric,
     setModuleMetric,
+    showEntryInfo,
     customComponentLink: CustomComponentLink = ComponentLink,
   } = props;
 
   const rootClassName = cx(css.root, className);
   const jobLabels = jobs?.map((job) => job?.label);
 
+  const [displayType, setDisplayType] = useMetricsDisplayType();
+
   const filterFieldsData = useMemo(
     () => generateFilterFieldsData({ filters, chunks, compareMode: jobs.length > 1 }),
     [jobs, filters, chunks],
@@ -159,11 +171,12 @@ export const BundleModules = (props: BundleModulesProps) => {
 
   return (
     <>
-      <div className={rootClassName}>
+      <Stack space="xsmall" as="section" className={rootClassName}>
         <Toolbar
           className={css.toolbar}
           renderActions={({ actionClassName }) => (
             <FlexStack space="xxsmall" className={cx(css.dropdown, actionClassName)}>
+              <MetricsDisplaySelector onSelect={setDisplayType} value={displayType} />
               <MetricsTableOptions
                 handleViewAll={resetAllFilters}
                 handleResetFilters={resetFilters}
@@ -185,40 +198,57 @@ export const BundleModules = (props: BundleModulesProps) => {
             />
           </FlexStack>
         </Toolbar>
-        <Box padding={['xsmall', 'small']} className={css.metricSelector}>
-          <FlexStack space="xxsmall" as="nav">
-            <Button
-              outline
-              active={moduleMetric === ModuleMetric.SIZE}
-              size="small"
-              type="button"
-              onClick={() => setModuleMetric(ModuleMetric.SIZE)}
-            >
-              <Tooltip title="Size (excluding duplicate modules)">Module size</Tooltip>
-            </Button>
-            <Button
-              outline
-              active={moduleMetric === ModuleMetric.TOTAL_SIZE}
-              size="small"
-              type="button"
-              onClick={() => setModuleMetric(ModuleMetric.TOTAL_SIZE)}
-            >
-              <Tooltip title="Size (including duplicate modules)">Module total size</Tooltip>
-            </Button>
-          </FlexStack>
+        <Box outline as="main">
+          <Box padding={['xsmall', 'small']} className={css.metricSelector}>
+            <ControlGroup as="nav">
+              <Button
+                outline
+                active={moduleMetric === ModuleMetric.SIZE}
+                size="small"
+                type="button"
+                onClick={() => setModuleMetric(ModuleMetric.SIZE)}
+              >
+                <Tooltip title="Size (excluding duplicate modules)">Module size</Tooltip>
+              </Button>
+              <Button
+                outline
+                active={moduleMetric === ModuleMetric.TOTAL_SIZE}
+                size="small"
+                type="button"
+                onClick={() => setModuleMetric(ModuleMetric.TOTAL_SIZE)}
+              >
+                <Tooltip title="Size (including duplicate modules)">Module total size</Tooltip>
+              </Button>
+            </ControlGroup>
+          </Box>
+          {displayType === MetricsDisplayType.TABLE && (
+            <MetricsTable
+              className={css.table}
+              items={items}
+              runs={jobs}
+              renderRowHeader={renderRowHeader}
+              emptyMessage={emptyMessage}
+              showHeaderSum
+              title={metricsTableTitle}
+              sort={sort}
+              updateSort={updateSort}
+            />
+          )}
+          {displayType === MetricsDisplayType.TREEMAP && (
+            <>
+              <Table compact>
+                <MetricsTableHeader
+                  metricTitle={metricsTableTitle}
+                  showSum
+                  jobs={jobs}
+                  rows={items}
+                />
+              </Table>
+              <MetricsTreemap emptyMessage={emptyMessage} items={items} onItemClick={showEntryInfo} />
+            </>
+          )}
         </Box>
-        <MetricsTable
-          className={css.table}
-          items={items}
-          runs={jobs}
-          renderRowHeader={renderRowHeader}
-          emptyMessage={emptyMessage}
-          showHeaderSum
-          title={metricsTableTitle}
-          sort={sort}
-          updateSort={updateSort}
-        />
-      </div>
+      </Stack>
       {entryItem && (
         <ModuleInfo
           className={css.moduleInfo}

package/src/components/bundle-modules/index.tsx

@@ -6,6 +6,7 @@ import type { SortAction } from '../../types';
 import { useRowsFilter } from '../../hooks/rows-filter';
 import { useRowsSort } from '../../hooks/rows-sort';
 import { useSearchParams } from '../../hooks/search-params';
+import { useEntryInfo } from '../../hooks/entry-info';
 import { BundleModules as BaseComponent } from './bundle-modules';
 import {
   addRowFlags,
@@ -61,6 +62,7 @@ interface BundleModulesProps
     | 'allItems'
     | 'totalRowCount'
     | 'hideEntryInfo'
+    | 'showEntryInfo'
   > {
   jobs: Array<types.Job>;
   filters: Record<string, boolean>;
@@ -118,9 +120,7 @@ export const BundleModules = (props: BundleModulesProps) => {
     getCustomSort,
   });
 
-  const hideEntryInfo = useCallback(() => {
-    setState({ entryId: '' });
-  }, [setState]);
+  const [hideEntryInfo, showEntryInfo] = useEntryInfo({ setState });
 
   return (
     <BaseComponent
@@ -134,6 +134,7 @@ export const BundleModules = (props: BundleModulesProps) => {
       hideEntryInfo={hideEntryInfo}
       moduleMetric={moduleMetric}
       setModuleMetric={setModuleMetric}
+      showEntryInfo={showEntryInfo}
     />
   );
 };

package/src/components/bundle-packages/bundle-packages.jsx

@@ -5,19 +5,27 @@ import { COMPONENT, PACKAGE_FILTERS, PACKAGES_SEPARATOR, SECTIONS } from '@bundl
 
 import config from '../../config.json';
 import I18N from '../../i18n';
+import { Box } from '../../layout/box';
 import { FlexStack } from '../../layout/flex-stack';
+import { Stack } from '../../layout/stack';
 import { InputSearch } from '../../ui/input-search';
 import { EmptySet } from '../../ui/empty-set';
 import { Filters } from '../../ui/filters';
 import { Tag } from '../../ui/tag';
+import { Table } from '../../ui/table';
 import { Toolbar } from '../../ui/toolbar';
 import { ComponentLink } from '../component-link';
 import { MetricsTable } from '../metrics-table';
+import { MetricsTableHeader } from '../metrics-table-header';
 import { MetricsTableOptions } from '../metrics-table-options';
 import { MetricsTableTitle } from '../metrics-table-title';
 import { PackageInfo } from '../package-info';
 import { SEARCH_PLACEHOLDER } from './bundle-packages.i18n';
 import css from './bundle-packages.module.css';
+import { MetricsDisplaySelector } from '../metrics-display-selector';
+import { MetricsDisplayType } from '../../constants';
+import { MetricsTreemap } from '../metrics-treemap';
+import { useMetricsDisplayType } from '../../hooks/metrics-display-type';
 
 const getDropdownFilters = ({ compareMode, filters }) => ({
   [PACKAGE_FILTERS.CHANGED]: {
@@ -126,10 +134,13 @@ export const BundlePackages = (props) => {
     entryId,
     allItems,
     hideEntryInfo,
+    showEntryInfo,
   } = props;
 
   const jobLabels = jobs?.map((job) => job?.label);
 
+  const [displayType, setDisplayType] = useMetricsDisplayType();
+
   const dropdownFilters = useMemo(
     () => getDropdownFilters({ compareMode: jobs?.length > 1, filters }),
     [jobs, filters],
@@ -182,11 +193,12 @@ export const BundlePackages = (props) => {
 
   return (
     <>
-      <section className={cx(css.root, className)}>
+      <Stack space="xsmall" as="section" className={cx(css.root, className)}>
         <Toolbar
           className={css.toolbar}
           renderActions={({ actionClassName }) => (
             <FlexStack space="xxsmall" className={cx(css.dropdown, actionClassName)}>
+              <MetricsDisplaySelector onSelect={setDisplayType} value={displayType} />
               <MetricsTableOptions
                 handleViewAll={resetAllFilters}
                 handleResetFilters={resetFilters}
@@ -209,19 +221,34 @@ export const BundlePackages = (props) => {
             />
           </FlexStack>
         </Toolbar>
-        <main>
-          <MetricsTable
-            runs={jobs}
-            items={items}
-            emptyMessage={emptyMessage}
-            renderRowHeader={renderRowHeader}
-            showHeaderSum
-            title={metricsTableTitle}
-            sort={sort}
-            updateSort={updateSort}
-          />
-        </main>
-      </section>
+        <Box outline as="main">
+          {displayType === MetricsDisplayType.TABLE && (
+            <MetricsTable
+              runs={jobs}
+              items={items}
+              emptyMessage={emptyMessage}
+              renderRowHeader={renderRowHeader}
+              showHeaderSum
+              title={metricsTableTitle}
+              sort={sort}
+              updateSort={updateSort}
+            />
+          )}
+          {displayType === MetricsDisplayType.TREEMAP && (
+            <>
+              <Table compact>
+                <MetricsTableHeader
+                  metricTitle={metricsTableTitle}
+                  showSum
+                  jobs={jobs}
+                  rows={items}
+                />
+              </Table>
+              <MetricsTreemap emptyMessage={emptyMessage} items={items} onItemClick={showEntryInfo} />
+            </>
+          )}
+        </Box>
+      </Stack>
       {entryItem && (
         <PackageInfo
           className={css.packageInfo}
@@ -283,4 +310,5 @@ BundlePackages.propTypes = {
   customComponentLink: PropTypes.elementType,
   entryId: PropTypes.string,
   hideEntryInfo: PropTypes.func.isRequired,
+  showEntryInfo: PropTypes.func.isRequired,
 };

package/src/components/bundle-packages/bundle-packages.module.css

@@ -2,14 +2,9 @@
   color: var(--color-text-light);
 }
 
-.toolbar {
-  border-bottom: 1px solid var(--color-outline);
-}
-
 .toolbarSearch {
   width: 100%;
   max-width: 240px;
-  margin-right: -1px; /** collapse border */
 }
 
 .hoverCard {

package/src/components/bundle-packages/index.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { PACKAGE_FILTERS } from '@bundle-stats/utils';
 import * as webpack from '@bundle-stats/utils/lib-esm/webpack/compare';
@@ -6,8 +6,14 @@ import * as webpack from '@bundle-stats/utils/lib-esm/webpack/compare';
 import { useRowsFilter } from '../../hooks/rows-filter';
 import { useRowsSort } from '../../hooks/rows-sort';
 import { useSearchParams } from '../../hooks/search-params';
+import { useEntryInfo } from '../../hooks/entry-info';
 import { BundlePackages as BundlePackagesComponent } from './bundle-packages';
-import { getDuplicatePackages, getAddRowDuplicateFlag, getRowFilter, getCustomSort } from './bundle-packages.utils';
+import {
+  getDuplicatePackages,
+  getAddRowDuplicateFlag,
+  getRowFilter,
+  getCustomSort,
+} from './bundle-packages.utils';
 
 export const BundlePackages = (props) => {
   const { jobs, search, filters, setState, sortBy, direction, ...restProps } = props;
@@ -54,9 +60,7 @@ export const BundlePackages = (props) => {
     getCustomSort,
   });
 
-  const hideEntryInfo = useCallback(() => {
-    setState({ entryId: '' });
-  }, [setState]);
+  const [hideEntryInfo, showEntryInfo] = useEntryInfo({ setState });
 
   return (
     <BundlePackagesComponent
@@ -67,6 +71,7 @@ export const BundlePackages = (props) => {
       allItems={rows}
       totalRowCount={totalRowCount}
       hideEntryInfo={hideEntryInfo}
+      showEntryInfo={showEntryInfo}
     />
   );
 };

package/src/components/index.js

@@ -1,7 +1,6 @@
 export { BrowsertimeTable } from './browsertime-table';
 export { BundleAssets } from './bundle-assets';
-export { BundleAssetsTotalsTable } from './bundle-assets-totals-table';
-export { BundleAssetsTotalsChartBars } from './bundle-assets-totals-chart-bars';
+export { BundleAssetsTotals } from './bundle-assets-totals';
 export { BundlePackages } from './bundle-packages';
 export { BundleModules } from './bundle-modules';
 export { ComponentLink } from './component-link';
@@ -19,4 +18,3 @@ export { MetricsTableTitle } from './metrics-table-title';
 export { ModuleInfo } from './module-info';
 export { RunInfo, RunInfoProps } from './run-info';
 export { Summary } from './summary';
-export { TotalSizeTypeTitle } from './total-size-type-title';

package/src/components/jobs-header/jobs-header.module.css

@@ -24,10 +24,6 @@
   background: linear-gradient(90deg, transparent, var(--color-background));
 }
 
-.item + .item {
-  margin-left: var(--space-small);
-}
-
 .item:first-child {
   border-left: 0;
   padding-left: 0;

package/src/components/metrics-display-selector/index.tsx

@@ -0,0 +1 @@
+export * from './metrics-display-selector';

package/src/components/metrics-display-selector/metrics-display-selector.module.css

@@ -0,0 +1,10 @@
+.button {
+  text-decoration: none;
+}
+
+.buttonActive,
+.buttonActive:active,
+.buttonActive:focus {
+  color: var(--color-primary);
+  border-color: var(--color-primary);
+}

package/src/components/metrics-display-selector/metrics-display-selector.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import cx from 'classnames';
+
+import { MetricsDisplayType } from '../../constants';
+import { Button } from '../../ui/button';
+import { ControlGroup } from '../../ui/control-group';
+import { Icon } from '../../ui/icon';
+import css from './metrics-display-selector.module.css';
+
+interface MetricsDisplaySelectorProps {
+  value: MetricsDisplayType;
+  onSelect: (newValue: MetricsDisplayType) => void;
+}
+
+export const MetricsDisplaySelector = (
+  props: MetricsDisplaySelectorProps &
+    Omit<React.ComponentProps<typeof ControlGroup>, 'onSelect' | 'value'>,
+) => {
+  const { className = '', value, onSelect, ...restProps } = props;
+
+  return (
+    <ControlGroup className={cx(css.root, className)} {...restProps}>
+      <Button
+        outline
+        active={value === MetricsDisplayType.TABLE}
+        size="small"
+        type="button"
+        glyph={Icon.ICONS.TABLE}
+        onClick={() => onSelect(MetricsDisplayType.TABLE)}
+        className={css.button}
+      >
+        Table
+      </Button>
+      <Button
+        outline
+        active={value === MetricsDisplayType.TREEMAP}
+        size="small"
+        type="button"
+        glyph={Icon.ICONS.TREEMAP}
+        onClick={() => onSelect(MetricsDisplayType.TREEMAP)}
+        className={cx(css.button)}
+      >
+        Treemap
+      </Button>
+    </ControlGroup>
+  );
+};

package/src/components/metrics-table/metrics-table.i18n.ts

@@ -1,10 +1,3 @@
-export const BASELINE_TITLE = 'Baseline';
-export const CURRENT_TITLE = 'Current';
-
-export const SORT_VALUE = 'value';
-export const SORT_CHANGE = 'change';
-export const SORT_PERCENTUAL_CHANGE = 'percentual change';
-
 export const EMPTY_MESSAGE = 'No items found.';
 export const SHOW_ALL = 'Show all';
 export const SHOW_LESS = 'Show less';

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

@@ -10,52 +10,9 @@
   text-decoration: underline;
 }
 
-/* columns */
-.metricName {
-  width: 55%;
-}
-
-.root .jobCol {
-  text-align: right;
-}
-
-.root .value {
-  text-align: right;
-  vertical-align: baseline;
-  width: 15%;
-}
-
+.root .value,
 .root .delta {
   text-align: right;
-  font-size: var(--size-xsmall);
-  vertical-align: baseline;
-  width: 10%;
-  color: pink;
-}
-
-.root .deltaPercentage {
-  width: 5%;
-}
-
-.root tbody .delta {
-  line-height: 1.6rem; /* baseline alignment with the column value */
-}
-
-.jobName {
-  white-space: nowrap;
-}
-
-/* columns overrides for showHeaderSum */
-.showHeaderSum .headerRow .jobCol {
-  border-bottom: 0;
-  padding-bottom: 0;
-}
-
-.showHeaderSum .headerRow .sum {
-  padding-top: var(--space-xxxsmall);
-  font-size: var(--size-small);
-  vertical-align: middle;
-  text-transform: none;
 }
 
 /** rows */