feat: number formats.

client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetActionsBar.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
   NavbarGroup,
   Button,
@@ -13,6 +13,7 @@ import classNames from 'classnames';
 
 import Icon from 'components/Icon';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+import NumberFormats from 'components/NumberFormats';
 
 import { compose } from 'utils';
 import withBalanceSheetDetail from './withBalanceSheetDetail';
@@ -49,7 +50,13 @@ function BalanceSheetActionsBar({
         <Button
           className={classNames(Classes.MINIMAL, 'button--table-views')}
           icon={<Icon icon="cog-16" iconSize={16} />}
-          text={!balanceSheetFilter ? <T id={'customize_report'} /> : <T id={'hide_customizer'} />}
+          text={
+            !balanceSheetFilter ? (
+              <T id={'customize_report'} />
+            ) : (
+              <T id={'hide_customizer'} />
+            )
+          }
           onClick={handleFilterToggleClick}
           active={balanceSheetFilter}
         />
@@ -66,6 +73,18 @@ function BalanceSheetActionsBar({
             icon={<Icon icon="filter-16" iconSize={16} />}
           />
         </Popover>
+        <Popover
+          content={<NumberFormats />}
+          minimal={true}
+          interactionKind={PopoverInteractionKind.CLICK}
+          position={Position.BOTTOM_LEFT}
+        >
+          <Button
+            className={classNames(Classes.MINIMAL, 'button--filter')}
+            text={<T id={'format'} />}
+            icon={<Icon icon="filter-16" iconSize={16} />}
+          />
+        </Popover>
 
         <NavbarDivider />