(improvements) Columns width adjustments

public/locales/en/translations.json

@@ -152,6 +152,7 @@
     "customerInfo": "Customer Info",
     "date": "Date",
     "days": "Days",
+    "defaultWidth": "Reset Column Widths",
     "deselectionHint": "Cmd/Ctrl + click to deselect",
     "description": "Description",
     "destination": "Destination",

src/components/AccountSummary/AccountSummary.derivFees.js

@@ -75,6 +75,7 @@ const AccountSummaryDerivFees = ({
       <DataTable
         numRows={1}
         tableColumns={columns}
+        enableColumnResizing={false}
       />
     </div>
   )

src/components/AccountSummary/AccountSummary.feeTierVolume.js

@@ -25,6 +25,7 @@ const AccountSummaryFeeTierVolume = ({
       <DataTable
         numRows={1}
         tableColumns={columns}
+        enableColumnResizing={false}
       />
     </div>
   )

src/components/AccountSummary/AccountSummary.fees.js

@@ -127,6 +127,7 @@ const AccountSummaryFees = ({
       <DataTable
         numRows={1}
         tableColumns={columns}
+        enableColumnResizing={false}
       />
     </div>
   )

src/components/AccountSummary/AccountSummary.js

@@ -112,7 +112,6 @@ class AccountSummary extends PureComponent {
               />
             </>
           )}
-          <br />
           <PaidFees
             t={t}
             isNoData={isNoData}

src/components/AccountSummary/AccountSummary.leo.js

@@ -63,19 +63,27 @@ const AccountSummaryLeo = ({
       <DataTable
         numRows={1}
         tableColumns={columns}
+        enableColumnResizing={false}
       />
     </div>
   )
 }
 
 AccountSummaryLeo.propTypes = {
   data: PropTypes.shape({
-    leoLev: PropTypes.number.isRequired,
-    leoAmountAvg: PropTypes.number.isRequired,
-  }).isRequired,
+    leoLev: PropTypes.number,
+    leoAmountAvg: PropTypes.number,
+  }),
   t: PropTypes.func.isRequired,
   isNoData: PropTypes.bool.isRequired,
   isLoading: PropTypes.bool.isRequired,
 }
 
+AccountSummaryLeo.defaultProps = {
+  data: PropTypes.shape({
+    leoLev: 0,
+    leoAmountAvg: 0,
+  }),
+}
+
 export default memo(AccountSummaryLeo)

src/components/AccountSummary/AccountSummary.paidFees.js

@@ -88,6 +88,7 @@ const AccountSummaryPaidFees = ({
       <div>{t(title)}</div>
       <DataTable
         tableColumns={columns}
+        enableColumnResizing={false}
         numRows={isLoading ? 1 : formattedData.length}
       />
     </div>

src/components/AccountSummary/AccountSummary.volume.js

@@ -75,6 +75,7 @@ const AccountSummaryVolume = ({
       <div>{t('accountsummary.30dVolume')}</div>
       <DataTable
         tableColumns={columns}
+        enableColumnResizing={false}
         numRows={isLoading ? 1 : data.length}
       />
     </div>

src/components/AccountSummary/_AccountSummary.scss

@@ -1,14 +1,15 @@
 .section-account-summary {
   &-data {
+    width: 100%;
     display: flex;
     flex-wrap: wrap;
+    flex-direction: row;
     align-items: flex-end;
-    justify-content: flex-start;
+    justify-content: space-between;
 
     &-item {
-      width: fit-content;
-      max-width: calc(100vw - 20px);
-      margin-right: 20px;
+      width: 49%;
+      min-width: 400px;
       margin-bottom: 35px;
 
       .collapsed-table {
@@ -49,6 +50,16 @@
   }
 }
 
+@media screen and (max-width: 1210px) {
+  .section-account-summary {
+    &-data {
+      &-item {
+        width: 100%;
+      }
+    }
+  }
+}
+
 @media screen and (max-width: 768px) {
   .section-account-summary {
     &-data {
@@ -63,8 +74,8 @@
       &-item {
         width: 100%;
         margin-right: 0;
+        min-width: inherit;
       }
     }
   }
 }
-

src/components/AppSummary/AppSummary.byAsset.js

@@ -16,13 +16,17 @@ import {
   getSummaryByAssetEntries,
 } from 'state/summaryByAsset/selectors'
 import { getTimezone } from 'state/base/selectors'
+import queryConstants from 'state/query/constants'
+import { getColumnsWidth } from 'state/columns/selectors'
 import { getTimeRange, getTimeFrame } from 'state/timeRange/selectors'
 import { getIsSyncRequired, getIsFirstSyncing } from 'state/sync/selectors'
 
 import SummaryFilters from './AppSummary.filters'
 import { getAssetColumns } from './AppSummary.columns'
 import { prepareSummaryByAssetData } from './AppSummary.helpers'
 
+const TYPE = queryConstants.SUMMARY_BY_ASSET
+
 const AppSummaryByAsset = () => {
   const { t } = useTranslation()
   const dispatch = useDispatch()
@@ -37,6 +41,7 @@ const AppSummaryByAsset = () => {
   const { start, end } = useSelector(getTimeFrame)
   const minimumBalance = useSelector(getMinimumBalance)
   const useMinimumBalance = useSelector(getUseMinBalance)
+  const columnsWidth = useSelector((state) => getColumnsWidth(state, TYPE))
   const isLoading = isFirstSync || (!dataReceived && pageLoading)
   const isNoData = dataReceived && isEmpty(entries)
   const tableClasses = classNames('summary-by-asset-table', {
@@ -60,9 +65,9 @@ const AppSummaryByAsset = () => {
 
   const columns = useMemo(
     () => getAssetColumns({
-      preparedData, t, isLoading, isNoData,
+      preparedData, t, isLoading, isNoData, columnsWidth,
     }),
-    [preparedData, t, isLoading, isNoData],
+    [preparedData, t, isLoading, isNoData, columnsWidth],
   )
 
   return (
@@ -80,6 +85,7 @@ const AppSummaryByAsset = () => {
         <SummaryFilters />
       </div>
       <DataTable
+        section={TYPE}
         defaultRowHeight={73}
         tableColumns={columns}
         className={tableClasses}

src/components/AppSummary/AppSummary.columns.js

@@ -3,7 +3,12 @@ import { Cell } from '@blueprintjs/table'
 
 import { fixedFloat } from 'ui/utils'
 import LoadingPlaceholder from 'ui/LoadingPlaceholder'
-import { getCellLoader, getCellNoData, getTooltipContent } from 'utils/columns'
+import {
+  getCellLoader,
+  getCellNoData,
+  getColumnWidth,
+  getTooltipContent,
+} from 'utils/columns'
 
 import {
   getIsTotal,
@@ -99,12 +104,13 @@ export const getAssetColumns = ({
   isNoData,
   isLoading,
   preparedData,
+  columnsWidth,
 }) => [
   {
     id: 'currency',
     className: 'align-left',
     name: 'summary.by_asset.currency',
-    width: 110,
+    width: getColumnWidth('currency', columnsWidth),
     renderer: (rowIndex) => {
       if (isLoading) return getCellLoader(22, 80)
       if (isNoData) return getCellNoData(t('column.noResults'))
@@ -137,7 +143,7 @@ export const getAssetColumns = ({
   {
     id: 'balance',
     name: 'summary.by_asset.balance',
-    width: 178,
+    width: getColumnWidth('balance', columnsWidth),
     renderer: (rowIndex) => {
       if (isLoading) return getCellLoader(22, 80)
       if (isNoData) return getCellNoData()
@@ -173,7 +179,7 @@ export const getAssetColumns = ({
   {
     id: 'balanceChange',
     name: 'summary.by_asset.balance_change',
-    width: 178,
+    width: getColumnWidth('balanceChange', columnsWidth),
     renderer: (rowIndex) => {
       if (isLoading) return getCellLoader(22, 80)
       if (isNoData) return getCellNoData()
@@ -213,7 +219,7 @@ export const getAssetColumns = ({
   {
     id: 'volume',
     name: 'summary.by_asset.volume',
-    width: 178,
+    width: getColumnWidth('volume', columnsWidth),
     renderer: (rowIndex) => {
       if (isLoading) return getCellLoader(22, 80)
       if (isNoData) return getCellNoData()
@@ -249,7 +255,7 @@ export const getAssetColumns = ({
   {
     id: 'tradingFees',
     name: 'summary.by_asset.trading_fees',
-    width: 178,
+    width: getColumnWidth('tradingFees', columnsWidth),
     renderer: (rowIndex) => {
       if (isLoading) return getCellLoader(22, 80)
       if (isNoData) return getCellNoData()
@@ -280,7 +286,7 @@ export const getAssetColumns = ({
   {
     id: 'marginFundingPayment',
     name: 'summary.by_asset.fund_earnings',
-    width: 178,
+    width: getColumnWidth('marginFundingPayment', columnsWidth),
     renderer: (rowIndex) => {
       if (isLoading) return getCellLoader(22, 80)
       if (isNoData) return getCellNoData()

src/components/AppSummary/AppSummary.value.js

@@ -86,7 +86,7 @@ const AccountSummaryValue = () => {
           </div>
         )}
         <Chart
-          aspect={1.5}
+          height={375}
           data={chartData}
           showLegend={false}
           dataKeys={presentCurrencies}

src/components/AppSummary/_AppSummary.scss

@@ -19,7 +19,7 @@
   &-data-row {
     display: flex;
     flex-wrap: wrap;
-    max-width: 1000px;
+    max-width: 100%;
     min-height: 441px;
     align-items: flex-start;
     justify-content: space-between;
@@ -29,14 +29,14 @@
   &-title-row {
     display: flex;
     min-height: 35px;
-    max-width: 1000px;
+    max-width: 100%;
     align-items: center;
     justify-content: space-between;
   }
 
   &-item {
     width: 48%;
-    max-width: 460px;
+    min-width: 300px;
     min-height: 270px;
 
     &-title {
@@ -150,7 +150,7 @@
 
   .app-summary-item-title--row {
     display: flex;
-    max-width: 1000px;
+    max-width: 100%;
     position: relative;
     align-items: center;
     justify-content: space-between;
@@ -348,15 +348,15 @@
   .loading-container {
     display: flex;
     min-height: 300px;
-    max-width: 1000px;
+    max-width: 100%;
 
     .loading {
       margin: auto;
     }
   }
 
   .no-data {
-    max-width: 1000px;
+    max-width: 100%;
     min-height: 300px;
 
     &-wrapper {
@@ -366,8 +366,8 @@
 }
 
 .chart-item {
-  width: 50%;
-  max-width: 500px;
+  width: 48%;
+  margin-right: 15px;
 
   .app-summary-item-sub-title {
     margin-bottom: 11px;
@@ -464,25 +464,41 @@
   }
 }
 
-@media screen and (max-width: 547px) {
+@media screen and (max-width: 1020px) {
   .app-summary {
     &-data-row {
       display: flex;
       flex-direction: column;
       margin-bottom: 0;
     }
+
     &-item {
       width: 100%;
       margin-bottom: 30px;
     }
+
+    .chart-item {
+      width: 100%;
+      margin-right: 0;
+    }
+  }
+}
+
+@media screen and (max-width: 855px) {
+  .app-summary {
+    &-item {
+      .line-chart {
+        width:107%;
+      }
+    }
   }
 }
 
-@media screen and (max-width: 400px) {
+@media screen and (max-width: 450px) {
   .app-summary {
     &-item {
       .line-chart {
-        width:120%;
+        width:115%;
       }
     }
   }

src/components/ConcentrationRisk/ConcentrationRisk.js

@@ -143,7 +143,7 @@ class ConcentrationRisk extends PureComponent {
     let showContent
     if (isNoData) {
       showContent = (
-        <div className='data-table-wrapper'>
+        <div className='concentration-risk-data-table'>
           <DataTable
             section={TYPE}
             isNoData={isNoData}
@@ -156,10 +156,13 @@ class ConcentrationRisk extends PureComponent {
     } else {
       showContent = (
         <div className='concentration-risk-data'>
-          <DataTable
-            tableColumns={tableColumns}
-            numRows={isLoading ? 5 : tableData.length}
-          />
+          <div className='concentration-risk-data-table'>
+            <DataTable
+              tableColumns={tableColumns}
+              enableColumnResizing={false}
+              numRows={isLoading ? 5 : tableData.length}
+            />
+          </div>
           <div className='concentration-risk-data-chart'>
             <PieChart data={chartData} />
           </div>