Release version to master

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bfx-report-ui",
-  "version": "2.27.0",
+  "version": "2.27.1",
   "description": "Report page to overview the user actions in Bitfinex and download related csv files",
   "repository": {
     "type": "git",

public/locales/en/translations.json

@@ -148,6 +148,7 @@
     "customerInfo": "Customer Info",
     "date": "Date",
     "days": "Days",
+    "deselectionHint": "Cmd/Ctrl + click to deselect",
     "description": "Description",
     "destination": "Destination",
     "duration": "Duration",
@@ -219,7 +220,7 @@
     "webhook": "Webhook"
   },
   "columnsfilter": {
-    "title": "Filter Columns",
+    "title": "Filter",
     "clear": "Clear",
     "cancel": "Cancel",
     "apply": "Apply",
@@ -518,9 +519,11 @@
       "exact": "Exact"
     },
     "filter": {
-      "symbol": "Symbol Filter",
+      "symbol": "Symbol",
       "pair": "Pair Filter",
-      "category": "Category Filter"
+      "category": "Category Filter",
+      "columns": "Columns",
+      "date": "Date"
     },
     "report-type": {
       "title": "Select Report Type",

src/components/AccountBalance/AccountBalance.js

@@ -125,8 +125,13 @@ class AccountBalance extends PureComponent {
           <SectionHeaderTitle>
             {t('accountbalance.title')}
           </SectionHeaderTitle>
-          <TimeRange className='section-header-time-range' />
           <SectionHeaderRow>
+            <SectionHeaderItem>
+              <SectionHeaderItemLabel>
+                {t('selector.filter.date')}
+              </SectionHeaderItemLabel>
+              <TimeRange className='section-header-time-range' />
+            </SectionHeaderItem>
             <SectionHeaderItem>
               <SectionHeaderItemLabel>
                 {t('selector.select')}

src/components/AccountSummary/AccountSummary.derivFees.js

@@ -3,11 +3,12 @@ import PropTypes from 'prop-types'
 import { Cell } from '@blueprintjs/table'
 
 import DataTable from 'ui/DataTable'
+import { getTooltipContent } from 'utils/columns'
 import { formatAmount, formatFraction } from 'ui/utils'
 
 const getColor = val => (val > 0 ? 'red' : 'green')
 
-const getColumns = ({ makerFee, takerFee }) => {
+const getColumns = ({ makerFee, takerFee, t }) => {
   const formattedMakerFee = `${formatFraction(makerFee * 100, { minDigits: 2 })}%`
   const formattedTakerFee = `${formatFraction(takerFee * 100, { minDigits: 2 })}%`
 
@@ -17,7 +18,7 @@ const getColumns = ({ makerFee, takerFee }) => {
       name: makerFee > 0 ? 'column.maker_fees' : 'column.maker_rebate',
       width: 100,
       renderer: () => (
-        <Cell tooltip={formattedMakerFee}>
+        <Cell tooltip={getTooltipContent(formattedMakerFee, t)}>
           {formatAmount(makerFee * 100, { color: getColor(makerFee), minDigits: 2 })}
           %
         </Cell>
@@ -29,7 +30,7 @@ const getColumns = ({ makerFee, takerFee }) => {
       name: takerFee > 0 ? 'column.taker_fees' : 'column.taker_rebate',
       width: 100,
       renderer: () => (
-        <Cell tooltip={formattedTakerFee}>
+        <Cell tooltip={getTooltipContent(formattedTakerFee, t)}>
           {formatAmount(takerFee * 100, { color: getColor(takerFee), minDigits: 2 })}
           %
         </Cell>
@@ -45,7 +46,7 @@ const AccountSummaryDerivFees = ({
   makerFee,
   takerFee,
 }) => {
-  const columns = getColumns({ makerFee, takerFee })
+  const columns = getColumns({ makerFee, takerFee, t })
 
   return (
     <div className='section-account-summary-data-item'>

src/components/AccountSummary/AccountSummary.feeTierVolume.js

@@ -10,7 +10,7 @@ const AccountSummaryFeeTierVolume = ({ data, t }) => {
   const lastVolumeItem = _get(data, [data.length - 1], {})
   const { curr, vol_safe: amount } = lastVolumeItem
 
-  const columns = getColumns({ data: [{ curr, amount }] })
+  const columns = getColumns({ data: [{ curr, amount }], t })
 
   return (
     <div className='section-account-summary-data-item'>

src/components/AccountSummary/AccountSummary.fees.js

@@ -3,11 +3,13 @@ import PropTypes from 'prop-types'
 import { Cell } from '@blueprintjs/table'
 
 import DataTable from 'ui/DataTable'
+import { getTooltipContent } from 'utils/columns'
 import { formatAmount, formatFraction } from 'ui/utils'
 
 const getColor = val => (val > 0 ? 'red' : 'green')
 
 const getColumns = ({
+  t,
   makerFee,
   takerFeeToFiat,
   takerFeeToStable,
@@ -24,7 +26,7 @@ const getColumns = ({
       name: makerFee > 0 ? 'column.maker_fees' : 'column.maker_rebate',
       width: 100,
       renderer: () => (
-        <Cell tooltip={formattedMakerFee}>
+        <Cell tooltip={getTooltipContent(formattedMakerFee, t)}>
           {formatAmount(makerFee * 100, { color: getColor(makerFee), minDigits: 2 })}
           %
         </Cell>
@@ -36,7 +38,7 @@ const getColumns = ({
       name: takerFeeToCrypto > 0 ? 'column.taker_fees_crypto' : 'column.taker_rebate_crypto',
       width: 140,
       renderer: () => (
-        <Cell tooltip={formattedTakerFeeToCrypto}>
+        <Cell tooltip={getTooltipContent(formattedTakerFeeToCrypto, t)}>
           {formatAmount(takerFeeToCrypto * 100, { color: getColor(takerFeeToCrypto), minDigits: 2 })}
           %
         </Cell>
@@ -48,7 +50,7 @@ const getColumns = ({
       name: takerFeeToFiat > 0 ? 'column.taker_fees_fiat' : 'column.taker_rebate_fiat',
       width: 140,
       renderer: () => (
-        <Cell tooltip={formattedTakerFeeToFiat}>
+        <Cell tooltip={getTooltipContent(formattedTakerFeeToFiat, t)}>
           {formatAmount(takerFeeToFiat * 100, { color: getColor(takerFeeToFiat), minDigits: 2 })}
           %
         </Cell>
@@ -60,7 +62,7 @@ const getColumns = ({
       name: takerFeeToStable > 0 ? 'column.taker_fees_stable' : 'column.taker_rebate_stable',
       width: 140,
       renderer: () => (
-        <Cell tooltip={formattedTakerFeeToStable}>
+        <Cell tooltip={getTooltipContent(formattedTakerFeeToStable, t)}>
           {formatAmount(takerFeeToStable * 100, { color: getColor(takerFeeToStable), minDigits: 2 })}
           %
         </Cell>
@@ -87,6 +89,7 @@ const AccountSummaryFees = ({
   } = data
 
   const columns = getColumns({
+    t,
     makerFee: makerFee || makerRebate || 0,
     takerFeeToCrypto: takerFeeToCrypto || takerRebateToCrypto || 0,
     takerFeeToFiat: takerFeeToFiat || takerRebateToFiat || 0,

src/components/AccountSummary/AccountSummary.leo.js

@@ -3,9 +3,10 @@ import PropTypes from 'prop-types'
 import { Cell } from '@blueprintjs/table'
 
 import DataTable from 'ui/DataTable'
+import { getTooltipContent } from 'utils/columns'
 import { fixedFloat, formatAmount } from 'ui/utils'
 
-const getColumns = ({ leoLev, leoAmountAvg }) => {
+const getColumns = ({ leoLev, leoAmountAvg, t }) => {
   const formattedLeoAmountAvg = fixedFloat(leoAmountAvg)
 
   return [
@@ -14,7 +15,7 @@ const getColumns = ({ leoLev, leoAmountAvg }) => {
       name: 'accountsummary.leo_level',
       width: 100,
       renderer: () => (
-        <Cell tooltip={leoLev}>
+        <Cell tooltip={getTooltipContent(leoLev, t)}>
           {leoLev}
         </Cell>
       ),
@@ -25,7 +26,7 @@ const getColumns = ({ leoLev, leoAmountAvg }) => {
       name: 'accountsummary.average_amount',
       width: 120,
       renderer: () => (
-        <Cell tooltip={formattedLeoAmountAvg}>
+        <Cell tooltip={getTooltipContent(formattedLeoAmountAvg, t)}>
           {formatAmount(formattedLeoAmountAvg)}
         </Cell>
       ),
@@ -34,13 +35,14 @@ const getColumns = ({ leoLev, leoAmountAvg }) => {
   ]
 }
 
-const AccountSummaryLeo = ({ data }) => {
+const AccountSummaryLeo = ({ data, t }) => {
   const { leoLev, leoAmountAvg } = data
 
-  const columns = getColumns({ leoLev, leoAmountAvg })
+  const columns = getColumns({ leoLev, leoAmountAvg, t })
 
   return (
     <div className='section-account-summary-data-item'>
+      <div className='data-item--divider' />
       <DataTable
         numRows={1}
         tableColumns={columns}
@@ -54,6 +56,7 @@ AccountSummaryLeo.propTypes = {
     leoLev: PropTypes.number.isRequired,
     leoAmountAvg: PropTypes.number.isRequired,
   }).isRequired,
+  t: PropTypes.func.isRequired,
 }
 
 export default memo(AccountSummaryLeo)

src/components/AccountSummary/AccountSummary.paidFees.js

@@ -3,20 +3,21 @@ import PropTypes from 'prop-types'
 import { Cell } from '@blueprintjs/table'
 
 import DataTable from 'ui/DataTable'
-import { COLUMN_WIDTHS } from 'utils/columns'
 import { fixedFloat, formatAmount } from 'ui/utils'
+import { COLUMN_WIDTHS, getTooltipContent } from 'utils/columns'
 
-export const getColumns = ({ data }) => [
+export const getColumns = ({ data, t }) => [
   {
     id: 'currency',
     name: 'column.currency',
+    className: 'align-left',
     width: window.innerWidth > 390
       ? 250
       : COLUMN_WIDTHS.SYMBOL,
     renderer: (rowIndex) => {
       const { curr } = data[rowIndex]
       return (
-        <Cell tooltip={curr}>
+        <Cell tooltip={getTooltipContent(curr, t)}>
           {curr}
         </Cell>
       )
@@ -33,7 +34,7 @@ export const getColumns = ({ data }) => [
       return (
         <Cell
           className='bitfinex-text-align-right'
-          tooltip={fixedAmount}
+          tooltip={getTooltipContent(fixedAmount, t)}
         >
           {formatAmount(amount, {
             digits: 2,
@@ -62,7 +63,7 @@ const AccountSummaryPaidFees = ({
     amount: total,
   })
 
-  const columns = getColumns({ data: formattedData })
+  const columns = getColumns({ data: formattedData, t })
 
   return (
     <div className='section-account-summary-data-item'>

src/components/AccountSummary/AccountSummary.volume.js

@@ -4,17 +4,18 @@ import { Cell } from '@blueprintjs/table'
 
 import DataTable from 'ui/DataTable'
 import { fixedFloat, formatAmount } from 'ui/utils'
-import { COLUMN_WIDTHS } from 'utils/columns'
+import { COLUMN_WIDTHS, getTooltipContent } from 'utils/columns'
 
-const getColumns = ({ data }) => [
+const getColumns = ({ data, t }) => [
   {
     id: 'currency',
     name: 'column.currency',
+    className: 'align-left',
     width: COLUMN_WIDTHS.SYMBOL,
     renderer: (rowIndex) => {
       const { curr } = data[rowIndex]
       return (
-        <Cell tooltip={curr}>
+        <Cell tooltip={getTooltipContent(curr, t)}>
           {curr}
         </Cell>
       )
@@ -31,7 +32,7 @@ const getColumns = ({ data }) => [
       return (
         <Cell
           className='bitfinex-text-align-right'
-          tooltip={fixedVolume}
+          tooltip={getTooltipContent(fixedVolume, t)}
         >
           {formatAmount(vol, {
             digits: 2,
@@ -50,7 +51,7 @@ const AccountSummaryVolume = ({ data, t }) => {
     return null
   }
 
-  const columns = getColumns({ data })
+  const columns = getColumns({ data, t })
 
   return (
     <div className='section-account-summary-data-item'>

src/components/AccountSummary/_AccountSummary.scss

@@ -1,10 +1,14 @@
 .section-account-summary {
   &-data {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    justify-content: flex-start;
+
     &-item {
-      display: inline-block;
       width: fit-content;
       max-width: calc(100vw - 20px);
-      margin-right: 41px;
+      margin-right: 20px;
       margin-bottom: 35px;
 
       .collapsed-table {
@@ -45,10 +49,19 @@
   }
 }
 
-@media screen and (max-width: 431px) {
+@media screen and (max-width: 768px) {
+  .section-account-summary {
+    &-data {
+      align-items: flex-start;
+    }
+  }
+}
+
+@media screen and (max-width: 547px) {
   .section-account-summary {
     &-data {
       &-item {
+        width: 100%;
         margin-right: 0;
       }
     }

src/components/AffiliatesEarnings/AffiliatesEarnings.js

@@ -107,7 +107,7 @@ class AffiliatesEarnings extends PureComponent {
       showContent = <NoData />
     } else {
       showContent = (
-        <>
+        <div className='data-table-wrapper'>
           <DataTable
             section={TYPE}
             numRows={entries.length}
@@ -117,7 +117,7 @@ class AffiliatesEarnings extends PureComponent {
             target={TYPE}
             loading={pageLoading}
           />
-        </>
+        </div>
       )
     }
     return (

src/components/AverageWinLoss/AverageWinLoss.js

@@ -175,8 +175,13 @@ class AverageWinLoss extends PureComponent {
             {t('averagewinloss.title')}
           </SectionHeaderTitle>
           <SectionSwitch target={TYPE} />
-          <TimeRange className='section-header-time-range' />
           <SectionHeaderRow>
+            <SectionHeaderItem>
+              <SectionHeaderItemLabel>
+                {t('selector.filter.date')}
+              </SectionHeaderItemLabel>
+              <TimeRange className='section-header-time-range' />
+            </SectionHeaderItem>
             <SectionHeaderItem>
               <SectionHeaderItemLabel>
                 {t('selector.select')}

src/components/Candles/Candles.js

@@ -138,8 +138,13 @@ class Candles extends PureComponent {
           <SectionHeaderTitle>
             {t('candles.title')}
           </SectionHeaderTitle>
-          <TimeRange className='section-header-time-range' />
           <SectionHeaderRow>
+            <SectionHeaderItem>
+              <SectionHeaderItemLabel>
+                {t('selector.filter.date')}
+              </SectionHeaderItemLabel>
+              <TimeRange className='section-header-time-range' />
+            </SectionHeaderItem>
             <SectionHeaderItem>
               <SectionHeaderItemLabel>
                 {t('selector.filter.symbol')}