@bundle-stats/ui 3.3.0-alpha.1 → 3.3.1-beta.12

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

@@ -1,11 +1,11 @@
-.jobName a {
+.root a {
   color: inherit;
   text-decoration: none;
 }
 
-.jobName a:hover,
-.jobName a:active,
-.jobName a:focus {
+.root a:hover,
+.root a:active,
+.root a:focus {
   color: var(--color-primary);
   text-decoration: underline;
 }
@@ -15,21 +15,31 @@
   width: 100%;
 }
 
-.value {
+.root .value {
   padding-left: var(--space-large);
   text-align: right;
+  vertical-align: baseline;
 }
 
-.delta {
+.root .delta {
   padding-left: 0;
   text-align: left;
   font-size: var(--size-xsmall);
+  vertical-align: baseline;
 }
 
-.value.current {
+.root tbody .delta {
+  line-height: 1.6rem; /* baseline alignment with the value */
+}
+
+.root .value.current {
   padding-right: var(--space-xxsmall);
 }
 
+.jobName {
+  white-space: nowrap;
+}
+
 /* columns overrides for showHeaderSum */
 .showHeaderSum .headerRowColumns .value,
 .showHeaderSum .headerRowColumns .delta {
@@ -45,6 +55,7 @@
 }
 
 /** rows */
+.multipleRuns .unchanged th,
 .multipleRuns .unchanged td {
   color: var(--color-text-light);
 }

package/lib/components/metrics-table-search/metrics-table-search.module.css

@@ -5,6 +5,7 @@
 }
 
 .input {
+  border-radius: var(--radius-small);
   height: var(--space-large);
   border-color: var(--color-outline);
 }
@@ -21,12 +22,12 @@
   cursor: pointer;
   border-radius: 50%;
   position: absolute;
-  right: 0;
+  right: 2px;
   top: 50%;
   transform: translateY(-50%);
-  padding: var(--space-xxsmall);
-  width: var(--space-large);
-  height: var(--space-large);
+  padding: var(--space-xxxsmall);
+  width: var(--space-medium);
+  height: var(--space-medium);
   background: radial-gradient(var(--color-background) 50%, transparent);
   color: var(--color-text-ultra-light);
   transition: var(--transition-in);

package/lib/components/metrics-table-title/metrics-table-title.js

@@ -17,7 +17,9 @@ var _flexStack = require("../../layout/flex-stack");
 
 var _stack = require("../../layout/stack");
 
-var _popover = require("../../ui/popover");
+var _icon = require("../../ui/icon");
+
+var _hoverCard = require("../../ui/hover-card");
 
 var _metricsTableTitleModule = _interopRequireDefault(require("./metrics-table-title.module.css"));
 
@@ -30,22 +32,22 @@ var MetricsTableTitle = function MetricsTableTitle(props) {
       popoverInfo = props.popoverInfo,
       popoverHref = props.popoverHref;
   var rootClassName = (0, _classnames["default"])(_metricsTableTitleModule["default"].root, className);
-  return /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
+  return /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
     space: "xxxsmall",
     className: rootClassName
-  }, /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
-    space: "xxxsmall"
   }, /*#__PURE__*/_react["default"].createElement("span", null, title), info && /*#__PURE__*/_react["default"].createElement("span", {
     className: _metricsTableTitleModule["default"].info
-  }, info), (popoverInfo || popoverHref) && /*#__PURE__*/_react["default"].createElement(_popover.Popover, {
-    icon: "help"
+  }, info), (popoverInfo || popoverHref) && /*#__PURE__*/_react["default"].createElement(_hoverCard.HoverCard, {
+    label: /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
+      glyph: "help"
+    })
   }, /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
     space: "xxxsmall"
   }, popoverInfo && /*#__PURE__*/_react["default"].createElement("p", null, popoverInfo), popoverHref && /*#__PURE__*/_react["default"].createElement("p", null, /*#__PURE__*/_react["default"].createElement("a", {
     href: popoverHref,
     target: "_blank",
     rel: "noreferrer"
-  }, _i18n["default"].READ_MORE))))));
+  }, _i18n["default"].READ_MORE)))));
 };
 
 exports.MetricsTableTitle = MetricsTableTitle;

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

@@ -1,5 +1,7 @@
 .root {
+  align-items: center;
   font-weight: bold;
+  line-height: var(--space-small);
   text-transform: uppercase;
   color: var(--color-text-light);
 }

package/lib/components/module-info/module-info.js

@@ -38,7 +38,7 @@ var ModuleInfo = function ModuleInfo(props) {
       CustomComponentLink = props.customComponentLink,
       onClick = props.onClick;
   return /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
-    space: "small",
+    space: "xsmall",
     className: className
   }, item.runs.map(function (run, index) {
     var TitleComponent = index !== 0 ? 'h4' : 'h3';
@@ -48,7 +48,7 @@ var ModuleInfo = function ModuleInfo(props) {
       key: key
     }, /*#__PURE__*/_react["default"].createElement(TitleComponent, null, labels[index]), index === 0 && !(0, _isEmpty2["default"])(run === null || run === void 0 ? void 0 : run.chunkIds) && /*#__PURE__*/_react["default"].createElement("div", {
       className: _moduleInfoModule["default"].chunks
-    }, /*#__PURE__*/_react["default"].createElement("strong", {
+    }, /*#__PURE__*/_react["default"].createElement("span", {
       className: _moduleInfoModule["default"].chunksTitle
     }, "Chunks:"), run.chunkIds.map(function (chunkId) {
       var chunk = (0, _find2["default"])(chunks, {

package/lib/components/module-info/module-info.module.css

@@ -15,6 +15,7 @@
 }
 
 .fileName {
+  max-width: 100%;
   padding: 2px;
   background: var(--color-highlight-warning);
 }

package/lib/components/summary/summary.js

@@ -31,6 +31,8 @@ var _summaryModule = _interopRequireDefault(require("./summary.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -45,16 +47,11 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-var getSourceMetricId = function getSourceMetricId(fullMetricId) {
-  return fullMetricId.split('.').slice(1).join('.');
-};
-
 var Summary = function Summary(_ref) {
   var className = _ref.className,
       size = _ref.size,
       keys = _ref.keys,
       data = _ref.data,
-      budgets = _ref.budgets,
       loading = _ref.loading,
       showSummaryItemDelta = _ref.showSummaryItemDelta,
       SummaryItemCustomLink = _ref.summaryItemLink;
@@ -67,7 +64,7 @@ var Summary = function Summary(_ref) {
     var _ref3 = _slicedToArray(_ref2, 1),
         metricId = _ref3[0];
 
-    return keys.includes(getSourceMetricId(metricId));
+    return keys.includes(metricId);
   }).map(function (_ref4) {
     var _ref5 = _slicedToArray(_ref4, 2),
         metricId = _ref5[0],
@@ -80,7 +77,6 @@ var Summary = function Summary(_ref) {
       size: size,
       id: metricId,
       data: (0, _get2["default"])(data, metricId),
-      budget: (0, _get2["default"])(budgets, metricId),
       loading: loading,
       showMetricDescription: true,
       showDelta: showSummaryItemDelta && metricOptions.showDelta !== false
@@ -97,7 +93,6 @@ exports.Summary = Summary;
 Summary.defaultProps = {
   className: '',
   data: null,
-  budgets: null,
   loading: false,
   size: '',
   keys: _constants.METRICS_WEBPACK_GENERAL,
@@ -108,10 +103,10 @@ Summary.propTypes = {
   className: _propTypes["default"].string,
   size: _propTypes["default"].string,
   keys: _propTypes["default"].arrayOf(_propTypes["default"].string),
-  data: _propTypes["default"].object,
-  // eslint-disable-line react/forbid-prop-types
-  budgets: _propTypes["default"].object,
-  // eslint-disable-line react/forbid-prop-types
+  data: _propTypes["default"].shape(_defineProperty({}, _propTypes["default"].string, _propTypes["default"].shape({
+    baseline: _propTypes["default"].number,
+    current: _propTypes["default"].number
+  }))),
   loading: _propTypes["default"].bool,
   showSummaryItemDelta: _propTypes["default"].bool,
   summaryItemLink: _propTypes["default"].elementType

package/lib/components/summary/summary.module.css

@@ -4,7 +4,7 @@
 }
 
 .item {
-  padding: var(--space-small);
+  padding: var(--space-small) var(--space-xxlarge) var(--space-small) var(--space-small);
   flex: 1 0 25%; /* force equal sizes */
   position: relative;
   z-index: 1;

package/lib/components/summary/summary.stories.js

@@ -41,35 +41,6 @@ stories.add('default', function () {
     data: MULTIPLE_JOBS[0].summary
   });
 });
-stories.add('budgets', function () {
-  return /*#__PURE__*/_react["default"].createElement(_.Summary, {
-    data: MULTIPLE_JOBS[0].summary,
-    budgets: {
-      webpack: {
-        totalSizeByTypeALL: {
-          currentValue: MULTIPLE_JOBS[0].summary.webpack.totalSizeByTypeALL.current,
-          budgetValue: 1024 * 1024,
-          failed: false
-        },
-        totalInitialSizeJS: {
-          currentValue: MULTIPLE_JOBS[0].summary.webpack.totalInitialSizeJS.current,
-          budgetValue: 512 * 1024,
-          failed: true
-        },
-        totalInitialSizeCSS: {
-          currentValue: MULTIPLE_JOBS[0].summary.webpack.totalInitialSizeCSS.current,
-          budgetValue: 50 * 1024,
-          failed: false
-        },
-        chunkCount: {
-          currentValue: MULTIPLE_JOBS[0].summary.webpack.chunkCount.current,
-          budgetValue: 50,
-          failed: false
-        }
-      }
-    }
-  });
-});
 stories.add('custom keys', function () {
   return /*#__PURE__*/_react["default"].createElement(_.Summary, {
     keys: _constants.METRICS_WEBPACK_ASSETS,

package/lib/components/summary-item/summary-item.js

@@ -13,7 +13,9 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _utils = require("@bundle-stats/utils");
 
-var _popover = require("../../ui/popover");
+var _hoverCard = require("../../ui/hover-card");
+
+var _icon = require("../../ui/icon");
 
 var _skeleton = require("../../ui/skeleton");
 
@@ -25,11 +27,9 @@ var _metric = require("../metric");
 
 var _delta = require("../delta");
 
-var _budgetInfo = require("../budget-info");
-
 var _summaryItemModule = _interopRequireDefault(require("./summary-item.module.css"));
 
-var _excluded = ["className", "as", "size", "id", "data", "loading", "showDelta", "showMetricDescription", "budget"];
+var _excluded = ["className", "as", "size", "id", "data", "loading", "showDelta", "showMetricDescription"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -39,29 +39,22 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-var MetricInfoPopover = function MetricInfoPopover(_ref) {
+var MetricInfo = function MetricInfo(_ref) {
   var description = _ref.description,
       url = _ref.url;
-
-  // Workaround cases where the parent is a link
-  var readMoreOnClick = function readMoreOnClick() {
-    window.open(url);
-  };
-
   return /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
     space: "xxxsmall"
-  }, /*#__PURE__*/_react["default"].createElement("p", null, description), url && /*#__PURE__*/_react["default"].createElement("p", null, /*#__PURE__*/_react["default"].createElement("button", {
-    type: "button",
-    className: _summaryItemModule["default"].readMoreBtn,
-    onClick: readMoreOnClick
+  }, /*#__PURE__*/_react["default"].createElement("p", null, description), url && /*#__PURE__*/_react["default"].createElement("p", null, /*#__PURE__*/_react["default"].createElement("a", {
+    href: url,
+    className: _summaryItemModule["default"].readMoreLink
   }, "Read more")));
 };
 
-MetricInfoPopover.propTypes = {
+MetricInfo.propTypes = {
   description: _propTypes["default"].string.isRequired,
   url: _propTypes["default"].string
 };
-MetricInfoPopover.defaultProps = {
+MetricInfo.defaultProps = {
   url: ''
 };
 
@@ -74,7 +67,6 @@ var SummaryItem = function SummaryItem(_ref2) {
       loading = _ref2.loading,
       showDelta = _ref2.showDelta,
       showMetricDescription = _ref2.showMetricDescription,
-      budget = _ref2.budget,
       props = _objectWithoutProperties(_ref2, _excluded);
 
   var _ref3 = data || {
@@ -89,23 +81,19 @@ var SummaryItem = function SummaryItem(_ref2) {
   var showMetricDescriptionTooltip = showMetricDescription && (metric === null || metric === void 0 ? void 0 : metric.description);
   var rootClassName = (0, _classnames["default"])(_summaryItemModule["default"].root, className, _summaryItemModule["default"][size], showDelta && _summaryItemModule["default"].showDelta);
   return /*#__PURE__*/_react["default"].createElement(_stack.Stack, _extends({
-    space: "xxsmall",
+    space: "xxxsmall",
     as: Component,
     className: rootClassName
   }, props), /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
     as: "h3",
     space: "xxxsmall",
     className: _summaryItemModule["default"].title
-  }, /*#__PURE__*/_react["default"].createElement("span", {
-    className: _summaryItemModule["default"].titleLabel
-  }, metric.label), showMetricDescriptionTooltip && /*#__PURE__*/_react["default"].createElement(_popover.Popover, {
+  }, /*#__PURE__*/_react["default"].createElement("span", null, metric.label), showMetricDescriptionTooltip && /*#__PURE__*/_react["default"].createElement(_hoverCard.HoverCard, {
     className: _summaryItemModule["default"].icon,
-    icon: "help"
-  }, /*#__PURE__*/_react["default"].createElement(MetricInfoPopover, metric)), budget && /*#__PURE__*/_react["default"].createElement(_budgetInfo.BudgetInfo, {
-    className: _summaryItemModule["default"].budgetInfo,
-    metricId: id,
-    budgetInsight: budget
-  })), !loading ? /*#__PURE__*/_react["default"].createElement(_stack.Stack, null, /*#__PURE__*/_react["default"].createElement(_metric.Metric, {
+    label: /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
+      glyph: "help"
+    })
+  }, /*#__PURE__*/_react["default"].createElement(MetricInfo, metric))), !loading ? /*#__PURE__*/_react["default"].createElement(_stack.Stack, null, /*#__PURE__*/_react["default"].createElement(_metric.Metric, {
     className: _summaryItemModule["default"].currentMetric,
     value: current,
     formatter: metric.formatter,
@@ -134,8 +122,7 @@ SummaryItem.defaultProps = {
   size: 'medium',
   loading: false,
   showMetricDescription: false,
-  showDelta: true,
-  budget: undefined
+  showDelta: true
 };
 SummaryItem.propTypes = {
   /** Adopted child class name */
@@ -161,12 +148,5 @@ SummaryItem.propTypes = {
   showMetricDescription: _propTypes["default"].bool,
 
   /** Show delta */
-  showDelta: _propTypes["default"].bool,
-
-  /** Budget insight data */
-  budget: _propTypes["default"].shape({
-    currentBalue: _propTypes["default"].number,
-    budgetValue: _propTypes["default"].number,
-    failed: _propTypes["default"].bool
-  })
+  showDelta: _propTypes["default"].bool
 };

package/lib/components/summary-item/summary-item.module.css

@@ -1,9 +1,5 @@
-.root {
-  position: relative;
-  padding-right: var(--space-xlarge);
-}
-
 .title {
+  align-items: center;
   color: var(--color-text-ultra-light);
   font-weight: bold;
   font-size: var(--size-xsmall);
@@ -12,35 +8,6 @@
   white-space: nowrap;
 }
 
-.titleLabel {
-  flex: 0 0 auto;
-}
-
-.readMoreBtn {
-  appearance: none;
-  padding: 0;
-  border: 0;
-  background: none;
-  cursor: pointer;
-  /* simulate link */
-  color: var(--color-primary);
-  text-decoration: underline;
-  line-height: var(--space-small);
-}
-
-.readMoreBtn:hover,
-.readMoreBtn:active,
-.readMoreBtn:focus {
-  color: var(--color-primary-dark);
-  text-decoration: none;
-}
-
-.budgetInfo {
-  position: absolute;
-  right: 0;
-  top: 0;
-}
-
 .currentMetric {
   display: block;
   color: var(--color-heading);

package/lib/components/summary-item/summary-item.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Standard = exports.SizeLarge = exports.ShowMetricDescription = exports.ShowDeltaFalse = exports.Loading = exports.BudgetSuccess = exports.BudgetError = void 0;
+exports["default"] = exports.Standard = exports.SizeLarge = exports.ShowMetricDescription = exports.ShowDeltaFalse = exports.Loading = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -13,68 +13,70 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 
 var _default = {
   title: 'Components/SummaryItem',
-  component: _summaryItem.SummaryItem,
-  decorators: [function (Story) {
-    return /*#__PURE__*/_react["default"].createElement("div", {
-      style: {
-        maxWidth: '320px'
-      }
-    }, /*#__PURE__*/_react["default"].createElement(Story, null));
-  }],
-  args: {
+  component: _summaryItem.SummaryItem
+};
+exports["default"] = _default;
+
+var Standard = function Standard() {
+  return /*#__PURE__*/_react["default"].createElement(_summaryItem.SummaryItem, {
     loading: false,
-    id: 'webpack.totalSizeByTypeALL',
+    id: "webpack.totalSizeByTypeALL",
     data: {
       current: 120 * 1000,
       baseline: 100 * 1000
     }
-  }
+  });
 };
-exports["default"] = _default;
 
-var Template = function Template(args) {
-  return /*#__PURE__*/_react["default"].createElement(_summaryItem.SummaryItem, args);
+exports.Standard = Standard;
+
+var SizeLarge = function SizeLarge() {
+  return /*#__PURE__*/_react["default"].createElement(_summaryItem.SummaryItem, {
+    size: "large",
+    loading: false,
+    id: "webpack.totalSizeByTypeALL",
+    data: {
+      current: 120 * 1000,
+      baseline: 100 * 1000
+    }
+  });
 };
 
-var Standard = Template.bind();
-exports.Standard = Standard;
-var SizeLarge = Template.bind();
 exports.SizeLarge = SizeLarge;
-SizeLarge.args = {
-  size: 'large'
+
+var ShowMetricDescription = function ShowMetricDescription() {
+  return /*#__PURE__*/_react["default"].createElement(_summaryItem.SummaryItem, {
+    loading: false,
+    id: "webpack.totalSizeByTypeALL",
+    data: {
+      current: 120 * 1000,
+      baseline: 100 * 1000
+    },
+    showMetricDescription: true
+  });
 };
-var ShowMetricDescription = Template.bind();
+
 exports.ShowMetricDescription = ShowMetricDescription;
-ShowMetricDescription.args = {
-  showMetricDescription: true
+
+var ShowDeltaFalse = function ShowDeltaFalse() {
+  return /*#__PURE__*/_react["default"].createElement(_summaryItem.SummaryItem, {
+    loading: false,
+    id: "webpack.totalSizeByTypeALL",
+    data: {
+      current: 120 * 1000,
+      baseline: 0
+    },
+    showDelta: false
+  });
 };
-var ShowDeltaFalse = Template.bind();
+
 exports.ShowDeltaFalse = ShowDeltaFalse;
-ShowDeltaFalse.args = {
-  showDelta: false
-};
-var BudgetError = Template.bind();
-exports.BudgetError = BudgetError;
-BudgetError.args = {
-  showMetricDescription: true,
-  budget: {
-    currentValue: 120 * 1000,
-    budgetValue: 100 * 1000,
-    failed: true
-  }
-};
-var BudgetSuccess = Template.bind();
-exports.BudgetSuccess = BudgetSuccess;
-BudgetSuccess.args = {
-  showMetricDescription: true,
-  budget: {
-    currentValue: 120 * 1000,
-    budgetValue: 120 * 1024,
-    failed: false
-  }
+
+var Loading = function Loading() {
+  return /*#__PURE__*/_react["default"].createElement(_summaryItem.SummaryItem, {
+    loading: true,
+    id: "webpack.totalSizeByTypeALL"
+  });
 };
-var Loading = Template.bind();
-exports.Loading = Loading;
-Loading.args = {
-  loading: true
-};
+
+exports.Loading = Loading;

package/lib/components/total-size-type-title/total-size-type-title.js

@@ -19,7 +19,9 @@ var _flexStack = require("../../layout/flex-stack");
 
 var _stack = require("../../layout/stack");
 
-var _popover = require("../../ui/popover");
+var _icon = require("../../ui/icon");
+
+var _hoverCard = require("../../ui/hover-card");
 
 var _totalSizeTypeTitleModule = _interopRequireDefault(require("./total-size-type-title.module.css"));
 
@@ -30,8 +32,10 @@ var TotalSizeTypeTitle = function TotalSizeTypeTitle(_ref) {
   return /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
     space: "xxxsmall",
     className: (0, _classnames["default"])(_totalSizeTypeTitleModule["default"].title, className)
-  }, /*#__PURE__*/_react["default"].createElement("span", null, _i18n["default"].ASSET_TOTALS), /*#__PURE__*/_react["default"].createElement(_popover.Popover, {
-    icon: "help"
+  }, /*#__PURE__*/_react["default"].createElement("span", null, _i18n["default"].ASSET_TOTALS), /*#__PURE__*/_react["default"].createElement(_hoverCard.HoverCard, {
+    label: /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
+      glyph: "help"
+    })
   }, /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
     space: "xxxsmall"
   }, /*#__PURE__*/_react["default"].createElement("p", null, _i18n["default"].ASSET_TOTALS_INFO), /*#__PURE__*/_react["default"].createElement("p", null, /*#__PURE__*/_react["default"].createElement("a", {

package/lib/constants.js

@@ -52,11 +52,11 @@ var ASSETS_SIZES_FILE_TYPE_MAP = _utils.FILE_TYPES.reduce(function (agg, fileTyp
 }, {});
 
 exports.ASSETS_SIZES_FILE_TYPE_MAP = ASSETS_SIZES_FILE_TYPE_MAP;
-var METRICS_WEBPACK_GENERAL = ['totalSizeByTypeALL', 'totalInitialSizeJS', 'totalInitialSizeCSS', 'cacheInvalidation'];
+var METRICS_WEBPACK_GENERAL = ['webpack.totalSizeByTypeALL', 'webpack.totalInitialSizeJS', 'webpack.totalInitialSizeCSS', 'webpack.cacheInvalidation'];
 exports.METRICS_WEBPACK_GENERAL = METRICS_WEBPACK_GENERAL;
-var METRICS_WEBPACK_ASSETS = ['assetCount', 'chunkCount'];
+var METRICS_WEBPACK_ASSETS = ['webpack.assetCount', 'webpack.chunkCount'];
 exports.METRICS_WEBPACK_ASSETS = METRICS_WEBPACK_ASSETS;
-var METRICS_WEBPACK_MODULES = ['moduleCount'];
+var METRICS_WEBPACK_MODULES = ['webpack.moduleCount', 'webpack.duplicateModulesCount', 'webpack.duplicateCode'];
 exports.METRICS_WEBPACK_MODULES = METRICS_WEBPACK_MODULES;
-var METRICS_WEBPACK_PACKAGES = ['packageCount', 'duplicatePackagesCount'];
+var METRICS_WEBPACK_PACKAGES = ['webpack.packageCount', 'webpack.duplicatePackagesCount'];
 exports.METRICS_WEBPACK_PACKAGES = METRICS_WEBPACK_PACKAGES;

package/lib/css/default.css

@@ -1,18 +1,29 @@
+@import url("~modern-css-reset/dist/reset.css");
+
 :root {
   --chart-height: 180px;
 }
 
+/** modern-css-reset updates */
+pre,
+ul,
+ol,
+button {
+  margin: 0;
+}
+
 html {
+  font-family: var(--font-family);
   font-size: 81.25%;
-  line-height: 1.8461;
+  line-height: 1.6;
 }
 
 body {
+  background: var(--color-background);
   color: var(--color-text);
 }
 
-h1, h2, h3, h4, h5 {
-  margin-bottom: var(--space-small);
+h1, h2, h3, h4, h5, h6 {
   color: var(--color-heading);
   font-weight: 500;
 }