@bundle-stats/ui 3.2.2 → 3.3.0-alpha.0

package/lib-esm/components/bundle-assets-totals-table/bundle-assets-totals-table.stories.js

@@ -31,4 +31,22 @@ 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
+      }]
+    }
+  })
 };

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

@@ -13,12 +13,16 @@ import { FlexStack } from '../../layout/flex-stack';
 import { ComponentLink } from '../component-link';
 import { SummaryItem } from '../summary-item';
 import css from './summary.module.css';
+
+const getSourceMetricId = fullMetricId => fullMetricId.split('.').slice(1).join('.');
+
 export const Summary = _ref => {
   let {
     className,
     size,
     keys,
     data,
+    budgets,
     loading,
     showSummaryItemDelta,
     summaryItemLink: SummaryItemCustomLink
@@ -30,7 +34,7 @@ export const Summary = _ref => {
     className: css.items
   }, Array.from(METRIC_COMPONENT_LINKS).filter(_ref2 => {
     let [metricId] = _ref2;
-    return keys.includes(metricId);
+    return keys.includes(getSourceMetricId(metricId));
   }).map(_ref3 => {
     let [metricId, metricOptions] = _ref3;
     return /*#__PURE__*/React.createElement("div", {
@@ -40,6 +44,7 @@ export const Summary = _ref => {
       size: size,
       id: metricId,
       data: _get(data, metricId),
+      budget: _get(budgets, getSourceMetricId(metricId)),
       loading: loading,
       showMetricDescription: true,
       showDelta: showSummaryItemDelta && metricOptions.showDelta !== false
@@ -54,6 +59,7 @@ export const Summary = _ref => {
 Summary.defaultProps = {
   className: '',
   data: null,
+  budgets: null,
   loading: false,
   size: '',
   keys: METRICS_WEBPACK_GENERAL,
@@ -64,12 +70,10 @@ Summary.propTypes = {
   className: PropTypes.string,
   size: PropTypes.string,
   keys: PropTypes.arrayOf(PropTypes.string),
-  data: PropTypes.shape({
-    [PropTypes.string]: PropTypes.shape({
-      baseline: PropTypes.number,
-      current: PropTypes.number
-    })
-  }),
+  data: PropTypes.object,
+  // eslint-disable-line react/forbid-prop-types
+  budgets: PropTypes.object,
+  // eslint-disable-line react/forbid-prop-types
   loading: PropTypes.bool,
   showSummaryItemDelta: PropTypes.bool,
   summaryItemLink: PropTypes.elementType

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

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

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

@@ -21,6 +21,33 @@ stories.addDecorator(getWrapperDecorator());
 stories.add('default', () => /*#__PURE__*/React.createElement(Summary, {
   data: MULTIPLE_JOBS[0].summary
 }));
+stories.add('budgets', () => /*#__PURE__*/React.createElement(Summary, {
+  data: MULTIPLE_JOBS[0].summary,
+  budgets: {
+    webpack: {
+      totalSizeByTypeALL: {
+        value: MULTIPLE_JOBS[0].summary.webpack.totalSizeByTypeALL,
+        budget: 1024 * 1024,
+        overBudget: false
+      },
+      totalInitialSizeJS: {
+        value: MULTIPLE_JOBS[0].summary.webpack.totalInitialSizeJS,
+        budget: 512 * 1024,
+        overBudget: true
+      },
+      totalInitialSizeCSS: {
+        value: MULTIPLE_JOBS[0].summary.webpack.totalInitialSizeCSS,
+        budget: 50 * 1024,
+        overBudget: false
+      },
+      chunkCount: {
+        value: MULTIPLE_JOBS[0].summary.webpack.chunkCount,
+        budget: 50,
+        overBudget: false
+      }
+    }
+  }
+}));
 stories.add('custom keys', () => /*#__PURE__*/React.createElement(Summary, {
   keys: METRICS_WEBPACK_ASSETS,
   data: MULTIPLE_JOBS[0].summary

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

@@ -10,6 +10,7 @@ import { Stack } from '../../layout/stack';
 import { FlexStack } from '../../layout/flex-stack';
 import { Metric } from '../metric';
 import { Delta } from '../delta';
+import { BudgetInfo } from '../budget-info';
 import css from './summary-item.module.css';
 
 const MetricInfoPopover = _ref => {
@@ -49,6 +50,7 @@ export const SummaryItem = _ref2 => {
     loading,
     showDelta,
     showMetricDescription,
+    budget,
     ...props
   } = _ref2;
   const {
@@ -70,10 +72,16 @@ export const SummaryItem = _ref2 => {
     as: "h3",
     space: "xxxsmall",
     className: css.title
-  }, /*#__PURE__*/React.createElement("span", null, metric.label), showMetricDescriptionTooltip && /*#__PURE__*/React.createElement(Popover, {
+  }, /*#__PURE__*/React.createElement("span", {
+    className: css.titleLabel
+  }, metric.label), showMetricDescriptionTooltip && /*#__PURE__*/React.createElement(Popover, {
     className: css.icon,
     icon: "help"
-  }, /*#__PURE__*/React.createElement(MetricInfoPopover, metric))), !loading ? /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Metric, {
+  }, /*#__PURE__*/React.createElement(MetricInfoPopover, metric)), budget && /*#__PURE__*/React.createElement(BudgetInfo, {
+    className: css.budgetInfo,
+    metric: metric,
+    budget: budget
+  })), !loading ? /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Metric, {
     className: css.currentMetric,
     value: current,
     formatter: metric.formatter,
@@ -100,7 +108,8 @@ SummaryItem.defaultProps = {
   size: 'medium',
   loading: false,
   showMetricDescription: false,
-  showDelta: true
+  showDelta: true,
+  budget: undefined
 };
 SummaryItem.propTypes = {
   /** Adopted child class name */
@@ -126,5 +135,12 @@ SummaryItem.propTypes = {
   showMetricDescription: PropTypes.bool,
 
   /** Show delta */
-  showDelta: PropTypes.bool
+  showDelta: PropTypes.bool,
+
+  /** Budget data */
+  budget: PropTypes.shape({
+    value: PropTypes.number,
+    budget: PropTypes.number,
+    overBudget: PropTypes.bool
+  })
 };

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

@@ -1,3 +1,8 @@
+.root {
+  position: relative;
+  padding-right: var(--space-xlarge);
+}
+
 .title {
   color: var(--color-text-ultra-light);
   font-weight: bold;
@@ -7,6 +12,10 @@
   white-space: nowrap;
 }
 
+.titleLabel {
+  flex: 0 0 auto;
+}
+
 .readMoreBtn {
   appearance: none;
   padding: 0;
@@ -26,6 +35,12 @@
   text-decoration: none;
 }
 
+.budgetInfo {
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
 .currentMetric {
   display: block;
   color: var(--color-heading);

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

@@ -2,44 +2,56 @@ import React from 'react';
 import { SummaryItem } from './summary-item';
 export default {
   title: 'Components/SummaryItem',
-  component: SummaryItem
-};
-export const Standard = () => /*#__PURE__*/React.createElement(SummaryItem, {
-  loading: false,
-  id: "webpack.totalSizeByTypeALL",
-  data: {
-    current: 120 * 1000,
-    baseline: 100 * 1000
-  }
-});
-export const SizeLarge = () => /*#__PURE__*/React.createElement(SummaryItem, {
-  size: "large",
-  loading: false,
-  id: "webpack.totalSizeByTypeALL",
-  data: {
-    current: 120 * 1000,
-    baseline: 100 * 1000
+  component: SummaryItem,
+  decorators: [Story => /*#__PURE__*/React.createElement("div", {
+    style: {
+      maxWidth: '320px'
+    }
+  }, /*#__PURE__*/React.createElement(Story, null))],
+  args: {
+    loading: false,
+    id: 'webpack.totalSizeByTypeALL',
+    data: {
+      current: 120 * 1000,
+      baseline: 100 * 1000
+    }
   }
-});
-export const ShowMetricDescription = () => /*#__PURE__*/React.createElement(SummaryItem, {
-  loading: false,
-  id: "webpack.totalSizeByTypeALL",
-  data: {
-    current: 120 * 1000,
-    baseline: 100 * 1000
-  },
+};
+
+const Template = args => /*#__PURE__*/React.createElement(SummaryItem, args);
+
+export const Standard = Template.bind();
+export const SizeLarge = Template.bind();
+SizeLarge.args = {
+  size: 'large'
+};
+export const ShowMetricDescription = Template.bind();
+ShowMetricDescription.args = {
   showMetricDescription: true
-});
-export const ShowDeltaFalse = () => /*#__PURE__*/React.createElement(SummaryItem, {
-  loading: false,
-  id: "webpack.totalSizeByTypeALL",
-  data: {
-    current: 120 * 1000,
-    baseline: 0
-  },
+};
+export const ShowDeltaFalse = Template.bind();
+ShowDeltaFalse.args = {
   showDelta: false
-});
-export const Loading = () => /*#__PURE__*/React.createElement(SummaryItem, {
-  loading: true,
-  id: "webpack.totalSizeByTypeALL"
-});
+};
+export const BudgetOver = Template.bind();
+BudgetOver.args = {
+  showMetricDescription: true,
+  budget: {
+    value: 120 * 1000,
+    budget: 100 * 1000,
+    overBudget: true
+  }
+};
+export const BudgetUnder = Template.bind();
+BudgetUnder.args = {
+  showMetricDescription: true,
+  budget: {
+    value: 120 * 1000,
+    budget: 120 * 1024,
+    overBudget: false
+  }
+};
+export const Loading = Template.bind();
+Loading.args = {
+  loading: true
+};

package/lib-esm/constants.js

@@ -25,7 +25,7 @@ export const SECTION_URLS = {
 export const ASSETS_SIZES_FILE_TYPE_MAP = FILE_TYPES.reduce((agg, fileType) => ({ ...agg,
   [`webpack.sizes.totalSizeByType${fileType}`]: fileType
 }), {});
-export const METRICS_WEBPACK_GENERAL = ['webpack.totalSizeByTypeALL', 'webpack.totalInitialSizeJS', 'webpack.totalInitialSizeCSS', 'webpack.cacheInvalidation'];
-export const METRICS_WEBPACK_ASSETS = ['webpack.assetCount', 'webpack.chunkCount'];
-export const METRICS_WEBPACK_MODULES = ['webpack.moduleCount'];
-export const METRICS_WEBPACK_PACKAGES = ['webpack.packageCount', 'webpack.duplicatePackagesCount'];
+export const METRICS_WEBPACK_GENERAL = ['totalSizeByTypeALL', 'totalInitialSizeJS', 'totalInitialSizeCSS', 'cacheInvalidation'];
+export const METRICS_WEBPACK_ASSETS = ['assetCount', 'chunkCount'];
+export const METRICS_WEBPACK_MODULES = ['moduleCount'];
+export const METRICS_WEBPACK_PACKAGES = ['packageCount', 'duplicatePackagesCount'];

package/lib-esm/ui/alert/alert.js

@@ -1,3 +1,5 @@
+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); }
+
 import React from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
@@ -7,13 +9,14 @@ export const Alert = props => {
   const {
     className,
     kind,
-    children
+    children,
+    ...restProps
   } = props;
-  return /*#__PURE__*/React.createElement(Box, {
+  return /*#__PURE__*/React.createElement(Box, _extends({
     padding: ['xsmall', 'small'],
     outline: true,
     className: cx(css.root, className, css[kind])
-  }, children);
+  }, restProps), children);
 };
 Alert.propTypes = {
   className: PropTypes.string,

package/lib-esm/ui/filters/filters.container.js

@@ -28,45 +28,6 @@ export const filtersDropdownContainer = BaseComponent => {
   class FiltersContainer extends React.Component {
     constructor(props) {
       super(props);
-
-      this.toggleFilter = (key, value) => this.setState(_ref2 => {
-        let {
-          values,
-          ...state
-        } = _ref2;
-        const newState = { ...state,
-          values: { ...values,
-            [key]: value
-          }
-        };
-        const {
-          onChange
-        } = this.props;
-
-        if (onChange) {
-          onChange(newState.values);
-        }
-
-        return newState;
-      });
-
-      this.toggleFilters = newFilters => this.setState(prevState => {
-        const newState = { ...prevState,
-          values: { ...prevState.values,
-            ...newFilters
-          }
-        };
-        const {
-          onChange
-        } = this.props;
-
-        if (onChange) {
-          onChange(newState.values);
-        }
-
-        return newState;
-      });
-
       const {
         filters
       } = this.props;
@@ -75,10 +36,10 @@ export const filtersDropdownContainer = BaseComponent => {
       };
     }
 
-    static getDerivedStateFromProps(_ref3, state) {
+    static getDerivedStateFromProps(_ref2, state) {
       let {
         filters
-      } = _ref3;
+      } = _ref2;
 
       if (_isEqual(filters, state.values)) {
         return null;
@@ -89,6 +50,43 @@ export const filtersDropdownContainer = BaseComponent => {
       };
     }
 
+    toggleFilter = (key, value) => this.setState(_ref3 => {
+      let {
+        values,
+        ...state
+      } = _ref3;
+      const newState = { ...state,
+        values: { ...values,
+          [key]: value
+        }
+      };
+      const {
+        onChange
+      } = this.props;
+
+      if (onChange) {
+        onChange(newState.values);
+      }
+
+      return newState;
+    });
+    toggleFilters = newFilters => this.setState(prevState => {
+      const newState = { ...prevState,
+        values: { ...prevState.values,
+          ...newFilters
+        }
+      };
+      const {
+        onChange
+      } = this.props;
+
+      if (onChange) {
+        onChange(newState.values);
+      }
+
+      return newState;
+    });
+
     render() {
       return /*#__PURE__*/React.createElement(BaseComponent, _extends({}, this.props, this.state, {
         toggleFilter: this.toggleFilter,

package/lib-esm/ui/icon/icon.js

@@ -5,11 +5,13 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import css from './icon.module.css';
 const ICONS = {
+  ALERT_CIRCLE: 'alert-circle',
   ARROW: 'arrow',
   ARROW_RIGHT_CIRLCE: 'arrow-right-circle',
   CANCEL: 'cancel',
   CLOSE: 'close',
   CLOCK: 'clock',
+  CHECK_CIRCLE: 'check-circle',
   COMMIT: 'commit',
   FILTER: 'filter',
   HELP: 'help',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "3.2.2",
+  "version": "3.3.0-alpha.0",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -84,11 +84,11 @@
     "react-router-dom": "^5.3.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^3.2.2",
+    "@bundle-stats/utils": "^3.3.0-alpha.0",
     "date-fns": "^2.6.0",
     "query-string": "^7.0.0",
     "reakit": "^1.3.6",
     "use-query-params": "^1.2.2"
   },
-  "gitHead": "e9caf650b9f5c2e4408011ccb302c2dfa3ccdb0f"
+  "gitHead": "7c7e664296ad7aed38a6972f4421d754098119eb"
 }

package/src/app/app.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { HashRouter, NavLink, Route, Switch, useLocation } from 'react-router-dom';
 import { COMPONENT } from '@bundle-stats/utils';
@@ -13,6 +13,7 @@ import {
 import { Box } from '../layout/box';
 import { Container } from '../ui/container';
 import { DuplicatePackagesWarning } from '../components/duplicate-packages-warning';
+import { BudgetInsights } from '../components/budget-insights';
 import { Summary } from '../components/summary';
 import { BundleAssets } from '../components/bundle-assets';
 import { BundleAssetsTotalsChartBars } from '../components/bundle-assets-totals-chart-bars';
@@ -58,8 +59,12 @@ Layout.defaultProps = {
 
 const AppComponent = ({ version, jobs }) => {
   const [bundleStatsState, bundleStatsSetState] = useComponentQueryState(COMPONENT.BUNDLE_ASSETS);
-  const [bundlePackagesState, bundlePackagesSetState] = useComponentQueryState(COMPONENT.BUNDLE_PACKAGES);
-  const [bundleModulesState, bundleModulesSetState] = useComponentQueryState(COMPONENT.BUNDLE_MODULES);
+  const [bundlePackagesState, bundlePackagesSetState] = useComponentQueryState(
+    COMPONENT.BUNDLE_PACKAGES,
+  );
+  const [bundleModulesState, bundleModulesSetState] = useComponentQueryState(
+    COMPONENT.BUNDLE_MODULES,
+  );
 
   if (jobs.length === 0) {
     return (
@@ -71,7 +76,9 @@ const AppComponent = ({ version, jobs }) => {
     );
   }
 
-  const { duplicatePackagesCount } = jobs[0].summary.webpack;
+  const { summary, insights } = useMemo(() => jobs[0], jobs);
+
+  const { duplicatePackagesCount } = summary.webpack;
   const duplicatePackagesInsights = Boolean(
     duplicatePackagesCount.current || duplicatePackagesCount.baseline,
   );
@@ -82,7 +89,8 @@ const AppComponent = ({ version, jobs }) => {
         <Summary
           size="large"
           keys={METRICS_WEBPACK_GENERAL}
-          data={jobs[0].summary}
+          data={summary}
+          budgets={insights?.webpack?.budgets}
           showSummaryItemDelta={jobs.length !== 1}
         />
       </Container>
@@ -114,7 +122,8 @@ const AppComponent = ({ version, jobs }) => {
                 <Stack space="medium">
                   <Summary
                     keys={METRICS_WEBPACK_ASSETS}
-                    data={jobs[0].summary}
+                    data={summary}
+                    budgets={insights?.webpack?.budgets}
                     showSummaryItemDelta={jobs.length !== 1}
                   />
                   <Box outline>
@@ -137,7 +146,8 @@ const AppComponent = ({ version, jobs }) => {
                 <Stack space="medium">
                   <Summary
                     keys={METRICS_WEBPACK_MODULES}
-                    data={jobs[0].summary}
+                    data={summary}
+                    budgets={insights?.webpack?.budgets}
                     showSummaryItemDelta={jobs.length !== 1}
                   />
                   <Box outline>
@@ -159,7 +169,8 @@ const AppComponent = ({ version, jobs }) => {
                 <Stack space="medium">
                   <Summary
                     keys={METRICS_WEBPACK_PACKAGES}
-                    data={jobs[0].summary}
+                    data={summary}
+                    budgets={insights?.webpack?.budgets}
                     showSummaryItemDelta={jobs.length !== 1}
                   />
                   <Box outline>
@@ -187,6 +198,11 @@ const AppComponent = ({ version, jobs }) => {
                     />
                   </Container>
                 )}
+                {insights?.webpack?.budgets && (
+                  <Container>
+                    <BudgetInsights source="webpack" budgets={insights.webpack.budgets} />
+                  </Container>
+                )}
                 <Container>
                   <Stack space="small">
                     <TotalSizeTypeTitle />

package/src/assets/icons/alert-circle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>

package/src/assets/icons/check-circle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check-circle"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>

package/src/assets/icons.svg

@@ -1,4 +1,8 @@
 <svg width="16" height="16">
+<symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-circle" viewBox="0 0 24 24" id="alert-circle" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="10"/>
+<path d="M12 8v4M12 16h.01"/>
+</symbol>
 <symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-down" id="arrow" xmlns="http://www.w3.org/2000/svg">
 <path d="M12 5v14M19 12l-7 7-7-7"/>
 </symbol>
@@ -10,6 +14,10 @@
 <circle cx="12" cy="12" r="10"/>
 <path d="M15 9l-6 6M9 9l6 6"/>
 </symbol>
+<symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check-circle" viewBox="0 0 24 24" id="check-circle" xmlns="http://www.w3.org/2000/svg">
+<path d="M22 11.08V12a10 10 0 11-5.93-9.14"/>
+<path d="M22 4L12 14.01l-3-3"/>
+</symbol>
 <symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock" id="clock" xmlns="http://www.w3.org/2000/svg">
 <circle cx="12" cy="12" r="10"/>
 <path d="M12 6v6l4 2"/>

package/src/components/budget-info/budget-info.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+
+import { Icon } from '../../ui/icon';
+import { Tooltip } from '../../ui/tooltip';
+
+import css from './budget-info.module.css';
+
+export const BudgetInfo = ({ className = '', budget, metric }) => {
+  const rootClassName = cx(css.root, budget.failed ? css.over : css.under, className);
+
+  return (
+    <Tooltip
+      className={rootClassName}
+      title={
+        <>
+          <strong>{metric.label}</strong>
+          {` is ${budget.failed ? 'over' : 'under'} `}
+          {metric.formatter(budget.budgetValue)}
+          {` budget`}
+        </>
+      }
+    >
+      <Icon
+        className={css.icon}
+        glyph={budget.failed ? Icon.ICONS.ALERT_CIRCLE : Icon.ICONS.CHECK_CIRCLE}
+        size="medium"
+      />
+    </Tooltip>
+  );
+};
+
+BudgetInfo.propTypes = {
+  budget: PropTypes.shape({
+    currentValue: PropTypes.number,
+    budgetValue: PropTypes.number,
+    failed: PropTypes.bool,
+  }).isRequired,
+  metric: PropTypes.shape({
+    label: PropTypes.string,
+    formatter: PropTypes.func,
+  }).isRequired,
+  className: PropTypes.string,
+};
+
+BudgetInfo.defaultProps = {
+  className: '',
+};