WIP: BundleAssetsTotalsTable - add budgets

packages/ui/src/components/budget-info/budget-info.module.css

@@ -1,3 +1,8 @@
+.root {
+  display: inline-block;
+  line-height: 1em;
+}
+
 /* Budget over */
 .over .icon {
   color: var(--color-danger-light);

packages/ui/src/components/bundle-assets-totals-table/bundle-assets-totals-table.jsx

@@ -1,27 +1,39 @@
 import React, { useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
+import { get } from 'lodash';
 import { getBundleAssetsFileTypeComponentLink } from '@bundle-stats/utils';
 import * as webpack from '@bundle-stats/utils/lib-esm/webpack';
 
 import { ASSETS_SIZES_FILE_TYPE_MAP } from '../../constants';
+import { FlexStack } from '../../layout/flex-stack';
 import { MetricsTable } from '../metrics-table';
 import { ComponentLink } from '../component-link';
+import { BudgetInfo } from '../budget-info';
+import css from './bundle-assets-totals-table.module.css';
 
 export const BundleAssetsTotalsTable = ({
   className,
   jobs,
   customComponentLink: CustomComponentLink,
 }) => {
   const items = useMemo(() => webpack.compareBySection.sizes(jobs), [jobs]);
+  const budgets = jobs[0].insights?.webpack?.budgets;
 
   const renderRowHeader = useCallback(
     (item) => {
       const fileType = ASSETS_SIZES_FILE_TYPE_MAP[item.key];
       const { section, title, params } = getBundleAssetsFileTypeComponentLink(fileType, item.label);
+      const [_, ...metricSlugs] = item.key.split('.');
+      const metricKey = metricSlugs.join('.');
+      const budget = get(budgets, metricKey);
+      const metric = webpack.getMetricType(metricKey);
 
       return (
         <CustomComponentLink section={section} title={title} params={params}>
-          {item.label}
+          <FlexStack space="xxsmall" className={css.itemTitleText}>
+            <span>{item.label}</span>
+            {budget && <BudgetInfo budget={budget} metric={metric} />}
+          </FlexStack>
         </CustomComponentLink>
       );
     },

packages/ui/src/components/bundle-assets-totals-table/bundle-assets-totals-table.module.css

@@ -1,3 +1,3 @@
-.title {
-  color: var(--color-text-light);
+.itemTitleText {
+  align-items: center;
 }

packages/ui/src/components/bundle-assets-totals-table/bundle-assets-totals-table.stories.jsx

@@ -31,3 +31,22 @@ export const EmptyBaseline = Template.bind();
 EmptyBaseline.args = {
   jobs: createJobs([{ webpack: currentStats }, null]),
 };
+
+export const WithBudgets = Template.bind();
+
+WithBudgets.args = {
+  jobs: createJobs([{ webpack: currentStats }, { webpack: baselineStats }], {
+    webpack: {
+      budgets: [
+        {
+          metric: 'sizes.totalSizeByTypeJS',
+          value: 2 * 1024 * 1024,
+        },
+        {
+          metric: 'sizes.totalSizeByTypeCSS',
+          value: 20 * 1024,
+        },
+      ],
+    },
+  }),
+};