From 8f667354b285583ea49f655fb2986b987f6e52aa Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Fri, 5 Apr 2024 13:51:42 +0300 Subject: [PATCH 01/30] Revert "Revert "(improvements) Tables responsiveness"" This reverts commit 23703213463c7836c5a4fb39667576b9a2525f06. --- .../AccountSummary/AccountSummary.js | 1 - .../AccountSummary/AccountSummary.leo.js | 13 +- .../AccountSummary/_AccountSummary.scss | 21 +- src/components/AppSummary/AppSummary.value.js | 2 +- src/components/AppSummary/_AppSummary.scss | 38 ++- .../ConcentrationRisk/ConcentrationRisk.js | 10 +- .../ConcentrationRisk/_ConcentrationRisk.scss | 26 +- .../TickersSnapshot/TickersSnapshot.js | 4 +- src/components/Snapshots/_Snapshots.scss | 26 ++ src/components/Wallets/Wallets.data.js | 58 ++--- src/components/Wallets/_Wallets.scss | 24 ++ src/styles/index.scss | 4 +- src/ui/Charts/Chart/Chart.js | 8 +- src/ui/Charts/Chart/Chart.props.js | 6 +- src/ui/Charts/Chart/_Chart.scss | 14 +- src/ui/DataTable/DataTable.container.js | 24 -- src/ui/DataTable/DataTable.js | 236 ++++++++---------- src/ui/DataTable/_DataTable.scss | 6 + src/ui/DataTable/index.js | 4 +- src/utils/columns.js | 21 ++ 20 files changed, 326 insertions(+), 220 deletions(-) create mode 100644 src/components/Snapshots/_Snapshots.scss create mode 100644 src/components/Wallets/_Wallets.scss delete mode 100644 src/ui/DataTable/DataTable.container.js diff --git a/src/components/AccountSummary/AccountSummary.js b/src/components/AccountSummary/AccountSummary.js index 659759c77..af394e26a 100644 --- a/src/components/AccountSummary/AccountSummary.js +++ b/src/components/AccountSummary/AccountSummary.js @@ -112,7 +112,6 @@ class AccountSummary extends PureComponent { /> )} -
{ )} - +
+ +
diff --git a/src/components/ConcentrationRisk/_ConcentrationRisk.scss b/src/components/ConcentrationRisk/_ConcentrationRisk.scss index e13126d6c..a7f049456 100644 --- a/src/components/ConcentrationRisk/_ConcentrationRisk.scss +++ b/src/components/ConcentrationRisk/_ConcentrationRisk.scss @@ -1,13 +1,18 @@ .concentration-risk-data { + width: 100%; display: flex; - .bitfinex-table { - height: fit-content; - flex: 0 0 400px; + &-table { + width: 50%; + margin-right: 100px; + + .data-table-container { + flex: 0 0 400px; + height: fit-content; + } } &-chart { - width: 100%; margin-left: 15px; .recharts-wrapper { @@ -23,12 +28,19 @@ } } -@media screen and (max-width: 850px) { +@media screen and (max-width: 1020px) { .concentration-risk-data { flex-wrap: wrap; + flex-direction: column; + align-items: center; - .bitfinex-table { - margin: 0 auto 25px auto; + &-table { + width: 100%; + margin-right: 0; + + .bitfinex-table { + margin: 0 auto 25px auto; + } } &-chart { diff --git a/src/components/Snapshots/TickersSnapshot/TickersSnapshot.js b/src/components/Snapshots/TickersSnapshot/TickersSnapshot.js index 590cf51e4..7050f6f22 100644 --- a/src/components/Snapshots/TickersSnapshot/TickersSnapshot.js +++ b/src/components/Snapshots/TickersSnapshot/TickersSnapshot.js @@ -30,7 +30,7 @@ const TickersSnapshot = ({ }) return ( - <> +
{t('positions.title')}
@@ -47,7 +47,7 @@ const TickersSnapshot = ({ />
- +
) } diff --git a/src/components/Snapshots/_Snapshots.scss b/src/components/Snapshots/_Snapshots.scss new file mode 100644 index 000000000..8ad58bf62 --- /dev/null +++ b/src/components/Snapshots/_Snapshots.scss @@ -0,0 +1,26 @@ +.tickers { + .tables-row { + display: flex; + flex-wrap: wrap; + flex-direction: row; + justify-content: space-between; + + &-item { + width: 49%; + margin-right: 0; + min-width: 300px; + } + } +} + +@media screen and (max-width: 1020px) { + .tickers { + .tables-row { + flex-direction: column; + + &-item { + width: 100% + } + } + } +} diff --git a/src/components/Wallets/Wallets.data.js b/src/components/Wallets/Wallets.data.js index 6540b3f12..73b607919 100644 --- a/src/components/Wallets/Wallets.data.js +++ b/src/components/Wallets/Wallets.data.js @@ -40,34 +40,36 @@ const WalletsData = ({ }) return ( -
-
-
{t('wallets.header.exchange')}
- -
-
-
{t('wallets.header.margin')}
- -
-
-
{t('wallets.header.funding')}
- -
-
-
{t('wallets.header.capital-raise')}
- +
+
+
+
{t('wallets.header.exchange')}
+ +
+
+
{t('wallets.header.margin')}
+ +
+
+
{t('wallets.header.funding')}
+ +
+
+
{t('wallets.header.capital-raise')}
+ +
) diff --git a/src/components/Wallets/_Wallets.scss b/src/components/Wallets/_Wallets.scss new file mode 100644 index 000000000..c7df9bed8 --- /dev/null +++ b/src/components/Wallets/_Wallets.scss @@ -0,0 +1,24 @@ +.wallets { + .tables-row { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + + &-item { + width: 49%; + margin-right: 0; + } + } +} + +@media screen and (max-width: 1020px) { + .wallets { + .tables-row { + flex-direction: column; + + &-item { + width: 100% + } + } + } +} diff --git a/src/styles/index.scss b/src/styles/index.scss index 95bec7b5d..566dd8c67 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -20,7 +20,9 @@ @import "components/Status/_Status.scss"; @import "components/SubAccounts/_SubAccounts.scss"; @import "components/TaxReport/_TaxReport.scss"; +@import "components/Wallets/_Wallets.scss"; @import "components/WeightedAverages/_WeightedAverages.scss"; +@import "components/Snapshots/_Snapshots.scss"; @import "components/TimeFrameDialog/_TimeFrameDialog.scss"; @import "components/GoToRangeDialog/_GoToRangeDialog.scss"; @import "components/ExtraInfoDialog/_ExtraInfoDialog.scss"; @@ -123,7 +125,7 @@ input[type=number] { .data-table-wrapper { display: flex; flex-direction: column; - max-width: fit-content; + max-width: 100%; } @media screen and (max-width: 770px) { diff --git a/src/ui/Charts/Chart/Chart.js b/src/ui/Charts/Chart/Chart.js index ddfd0d1ad..4ae80fb66 100644 --- a/src/ui/Charts/Chart/Chart.js +++ b/src/ui/Charts/Chart/Chart.js @@ -110,7 +110,8 @@ class Chart extends React.PureComponent { const { t, data, - aspect, + width, + height, className, showLegend, isSumUpEnabled, @@ -131,7 +132,10 @@ class Chart extends React.PureComponent { return (
- + ({ - device: getDevice(state), - tableScroll: getTableScroll(state), -}) - -const mapDispatchToProps = { - showColumnsSum, - setColumnsWidth, -} - -export default compose( - connect(mapStateToProps, mapDispatchToProps), - withTranslation('translations'), -)(DataTable) diff --git a/src/ui/DataTable/DataTable.js b/src/ui/DataTable/DataTable.js index 664f07794..3d10a39a1 100644 --- a/src/ui/DataTable/DataTable.js +++ b/src/ui/DataTable/DataTable.js @@ -1,4 +1,12 @@ -import React, { PureComponent } from 'react' +import React, { + memo, + useRef, + useMemo, + useState, + useEffect, +} from 'react' +import { useTranslation } from 'react-i18next' +import { useDispatch, useSelector } from 'react-redux' import PropTypes from 'prop-types' import classNames from 'classnames' import { Menu } from '@blueprintjs/core' @@ -14,88 +22,106 @@ import { isEqual } from '@bitfinex/lib-js-util-base' import { getRowsConfig, getCellNoData, + DEFAULT_CONTAINER_WIDTH, + getCalculatedColumnWidths, singleColumnSelectedCheck, columnHasNumericValueCheck, } from 'utils/columns' import DEVICES from 'var/devices' +import { getDevice } from 'state/ui/selectors' import queryConstants from 'state/query/constants' +import { getTableScroll } from 'state/base/selectors' +import { showColumnsSum } from 'state/columns/actions' +import { updateErrorStatus } from 'state/status/actions' import CollapsedTable from 'ui/CollapsedTable/CollapsedTable' -class DataTable extends PureComponent { - state = { - sumValue: null, - } - - selectedColumns = {} - - componentDidUpdate() { - const { showColumnsSum } = this.props - const { sumValue } = this.state - +const DataTable = ({ + numRows, + section, + isNoData, + isLoading, + className, + tableColumns, + defaultRowHeight, +}) => { + const { t } = useTranslation() + const dispatch = useDispatch() + const containerRef = useRef(null) + const device = useSelector(getDevice) + const tableScroll = useSelector(getTableScroll) + const [sumValue, setSumValue] = useState(null) + const [containerWidth, setContainerWidth] = useState(0) + const [selectedColumns, setSelectedColumns] = useState({}) + + useEffect(() => { if (!_isNull(sumValue)) { - showColumnsSum(sumValue) - this.clearSumValue() + dispatch(showColumnsSum(sumValue)) + setSumValue(null) } - } + }, [dispatch, sumValue]) - getCellData = (rowIndex, columnIndex) => { - const { tableColumns } = this.props - - return tableColumns[columnIndex].copyText(rowIndex) - } - - getCellSum = (rowIndex, columnIndex) => { - const { tableColumns } = this.props - const { isNumericValue } = tableColumns[columnIndex] + useEffect(() => { + const onScreenSizeChanged = () => { + setContainerWidth(containerRef?.current?.offsetWidth ?? DEFAULT_CONTAINER_WIDTH) + } + onScreenSizeChanged() + window.addEventListener('resize', onScreenSizeChanged) - if (isNumericValue) { - const colValue = +tableColumns[columnIndex].copyText(rowIndex) - this.setState(state => ({ - sumValue: state.sumValue + colValue, - })) + return () => { + window.removeEventListener('resize', onScreenSizeChanged) } - } + }, []) - clearSumValue = () => { - this.setState({ sumValue: null }) - } + const columnWidths = useMemo( + () => getCalculatedColumnWidths(tableColumns, containerWidth), + [tableColumns, containerWidth], + ) + + const getCellData = (rowIndex, columnIndex) => tableColumns[columnIndex]?.copyText(rowIndex) - renderBodyContextMenu = (context) => { - const { t, tableColumns } = this.props + const renderBodyContextMenu = (context) => { const isSingleColumnSelected = singleColumnSelectedCheck(context) const hasNumericValue = columnHasNumericValueCheck(context, tableColumns) const shouldShowSum = isSingleColumnSelected && hasNumericValue + let sum = 0 + + const getCellSum = (rowIndex, columnIndex) => { + const { isNumericValue } = tableColumns[columnIndex] + if (isNumericValue) { + const colValue = +tableColumns[columnIndex].copyText(rowIndex) + sum += colValue + setSumValue(sum) + } + } return ( {shouldShowSum && ( )} ) } - onSelection = (selection) => { + const onSelection = (selection) => { const isWholeColumnSelected = selection.find(({ rows }) => !rows) - if (!isWholeColumnSelected) { - this.selectedColumns = {} + setSelectedColumns({}) return } - this.selectedColumns = selection.reduce((acc, sel) => { + const selectedCols = selection.reduce((acc, sel) => { const { cols } = sel const [start, end] = cols - let cur = start while (cur <= end) { @@ -105,26 +131,24 @@ class DataTable extends PureComponent { return acc }, {}) + setSelectedColumns(selectedCols) } - onCopy = () => { - const { tableColumns, t } = this.props - + const onCopy = () => { navigator.clipboard.readText().then((text) => { const columnHeaders = [] - const selectedColumns = _keys(this.selectedColumns).sort() - const start = +selectedColumns[0] - const end = +selectedColumns[selectedColumns.length - 1] + const selectedCols = _keys(selectedColumns).sort() + const start = +selectedCols[0] + const end = +selectedCols[selectedCols.length - 1] let cur = start while (cur <= end) { - if (this.selectedColumns[cur]) { + if (selectedColumns[cur]) { const columnName = t(tableColumns[cur].name) columnHeaders.push(columnName) } else { columnHeaders.push('') } - cur += 1 } @@ -134,107 +158,69 @@ class DataTable extends PureComponent { const headersText = `${columnHeaders.join('\t')}${newLineChar}` navigator.clipboard.writeText(`${headersText}${text}`).catch((err) => { - // eslint-disable-next-line no-console - console.error(err) + dispatch(updateErrorStatus(err)) }) }).catch((err) => { - // eslint-disable-next-line no-console - console.error(err) + dispatch(updateErrorStatus(err)) }) } - getCellClipboardData = (row, col) => { - const { tableColumns } = this.props + const getCellClipboardData = (row, col) => tableColumns[col].copyText(row) - return tableColumns[col].copyText(row) + const columns = tableColumns + if (isNoData && !isLoading) { + const noDataTitle = isEqual(section, queryConstants.MENU_TICKERS) + ? t('column.noHistory') + : t('column.noResults') + columns[0].renderer = () => getCellNoData(noDataTitle) } - onColumnWidthChanged = (index, width) => { - const { section, tableColumns, setColumnsWidth } = this.props - - if (section) { - const updatedColumn = { - ...tableColumns[index], - width, - } - tableColumns[index] = updatedColumn - setColumnsWidth({ section, tableColumns }) - } + if (device === DEVICES.PHONE && columns.length >= 2) { + return } - render() { - const { - t, - device, - numRows, - section, - isNoData, - isLoading, - className, - tableScroll, - tableColumns, - defaultRowHeight, - } = this.props - const columnWidths = tableColumns.map(column => column.width) - - if (isNoData && !isLoading) { - const noDataTitle = isEqual(section, queryConstants.MENU_TICKERS) - ? t('column.noHistory') - : t('column.noResults') - tableColumns[0].renderer = () => getCellNoData(noDataTitle) - } - - if (device === DEVICES.PHONE && tableColumns.length >= 2) { - return - } - - return ( + return ( +
- {tableColumns.map(column => ( + {columns.map(column => ( ))}
- ) - } +
+ ) } -const TABLE_COLUMNS_PROPS = PropTypes.shape({ - id: PropTypes.string.isRequired, - name: PropTypes.string, - nameStr: PropTypes.string, - renderer: PropTypes.func.isRequired, - copyText: PropTypes.func.isRequired, - width: PropTypes.number, - isNumericValue: PropTypes.bool, -}) - DataTable.propTypes = { className: PropTypes.string, section: PropTypes.string, numRows: PropTypes.number.isRequired, - tableColumns: PropTypes.arrayOf(TABLE_COLUMNS_PROPS).isRequired, - device: PropTypes.string.isRequired, - t: PropTypes.func.isRequired, - setColumnsWidth: PropTypes.func.isRequired, - showColumnsSum: PropTypes.func.isRequired, - tableScroll: PropTypes.bool.isRequired, + tableColumns: PropTypes.arrayOf(PropTypes.shape({ + id: PropTypes.string.isRequired, + name: PropTypes.string, + nameStr: PropTypes.string, + renderer: PropTypes.func.isRequired, + copyText: PropTypes.func.isRequired, + isNumericValue: PropTypes.bool, + })).isRequired, defaultRowHeight: PropTypes.number, isNoData: PropTypes.bool, isLoading: PropTypes.bool, @@ -248,4 +234,4 @@ DataTable.defaultProps = { defaultRowHeight: 26, } -export default DataTable +export default memo(DataTable) diff --git a/src/ui/DataTable/_DataTable.scss b/src/ui/DataTable/_DataTable.scss index 5eafff30a..bc08582b2 100644 --- a/src/ui/DataTable/_DataTable.scss +++ b/src/ui/DataTable/_DataTable.scss @@ -1,3 +1,9 @@ +.data-table-container { + width: 100%; + display: flex; + flex-direction: column; +} + .bitfinex-table { width: fit-content; min-height: unset; diff --git a/src/ui/DataTable/index.js b/src/ui/DataTable/index.js index ff496e83e..cefbf971f 100644 --- a/src/ui/DataTable/index.js +++ b/src/ui/DataTable/index.js @@ -1,3 +1 @@ -import DataTable from './DataTable.container' - -export default DataTable +export { default } from './DataTable' diff --git a/src/utils/columns.js b/src/utils/columns.js index 7ec81cbb8..b2dc65d1a 100644 --- a/src/utils/columns.js +++ b/src/utils/columns.js @@ -612,6 +612,26 @@ export const formatSumUpValue = value => { return parseFloat(value).toFixed(8).replace(/\d(?=(\d{3})+\.)/g, '$&,') } +export const MIN_COLUMN_WIDTH = 100 + +export const DEFAULT_CONTAINER_WIDTH = 1000 + +export const getCalculatedColumnWidths = (columns, containerWidth) => { + if (columns.length === 0) { + return [] + } + + const avgWidth = Math.floor(containerWidth / columns.length) + if (avgWidth < MIN_COLUMN_WIDTH) { + return _map(columns, () => MIN_COLUMN_WIDTH) + } + + const columnWidths = _map(columns, () => avgWidth) + columnWidths[0] = containerWidth - ((columns.length - 1) * avgWidth) + + return columnWidths +} + export default { COLUMN_WIDTHS, pickColumnsWidth, @@ -623,4 +643,5 @@ export default { columnHasNumericValueCheck, formatSumUpValue, getTooltipContent, + getCalculatedColumnWidths, } From f8ab01b951f0e977cc30ddb1e6ac6bca72db9b3a Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Fri, 5 Apr 2024 14:37:33 +0300 Subject: [PATCH 02/30] Implement onColumnWidthChanged handler --- src/ui/DataTable/DataTable.js | 27 ++++++++++++++++++++++++--- 1 file changed, 24 insertions(+), 3 deletions(-) diff --git a/src/ui/DataTable/DataTable.js b/src/ui/DataTable/DataTable.js index 3d10a39a1..5ee8cfc7f 100644 --- a/src/ui/DataTable/DataTable.js +++ b/src/ui/DataTable/DataTable.js @@ -31,9 +31,9 @@ import DEVICES from 'var/devices' import { getDevice } from 'state/ui/selectors' import queryConstants from 'state/query/constants' import { getTableScroll } from 'state/base/selectors' -import { showColumnsSum } from 'state/columns/actions' import { updateErrorStatus } from 'state/status/actions' import CollapsedTable from 'ui/CollapsedTable/CollapsedTable' +import { showColumnsSum, setColumnsWidth } from 'state/columns/actions' const DataTable = ({ numRows, @@ -51,6 +51,7 @@ const DataTable = ({ const tableScroll = useSelector(getTableScroll) const [sumValue, setSumValue] = useState(null) const [containerWidth, setContainerWidth] = useState(0) + const [useCustomColsWidth, setUseCustomColsWidth] = useState(false) const [selectedColumns, setSelectedColumns] = useState({}) useEffect(() => { @@ -63,6 +64,7 @@ const DataTable = ({ useEffect(() => { const onScreenSizeChanged = () => { setContainerWidth(containerRef?.current?.offsetWidth ?? DEFAULT_CONTAINER_WIDTH) + setUseCustomColsWidth(false) } onScreenSizeChanged() window.addEventListener('resize', onScreenSizeChanged) @@ -73,8 +75,11 @@ const DataTable = ({ }, []) const columnWidths = useMemo( - () => getCalculatedColumnWidths(tableColumns, containerWidth), - [tableColumns, containerWidth], + () => (useCustomColsWidth + ? tableColumns.map(column => column.width) + : getCalculatedColumnWidths(tableColumns, containerWidth)), + + [tableColumns, containerWidth, useCustomColsWidth], ) const getCellData = (rowIndex, columnIndex) => tableColumns[columnIndex]?.copyText(rowIndex) @@ -175,6 +180,21 @@ const DataTable = ({ columns[0].renderer = () => getCellNoData(noDataTitle) } + const onColumnWidthChanged = (index, width) => { + console.log('+++columns', columns) + console.log('+++index', index) + console.log('+++width', width) + if (section) { + const updatedColumn = { + ...columns[index], + width, + } + columns[index] = updatedColumn + dispatch(setColumnsWidth({ section, columns })) + } + setUseCustomColsWidth(true) + } + if (device === DEVICES.PHONE && columns.length >= 2) { return } @@ -191,6 +211,7 @@ const DataTable = ({ columnWidths={columnWidths} defaultRowHeight={defaultRowHeight} getCellClipboardData={getCellClipboardData} + onColumnWidthChanged={onColumnWidthChanged} bodyContextMenuRenderer={renderBodyContextMenu} numRows={getRowsConfig(isLoading, isNoData, numRows)} className={classNames('bitfinex-table', className, { 'bitfinex-table-full-height': !tableScroll })} From a3e90a172cb7d79304dceaf3125d460962e795fd Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Fri, 5 Apr 2024 14:38:00 +0300 Subject: [PATCH 03/30] Fix setColumnsWidth action payload handling --- src/state/columns/actions.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/state/columns/actions.js b/src/state/columns/actions.js index e1944a235..3916830bc 100644 --- a/src/state/columns/actions.js +++ b/src/state/columns/actions.js @@ -2,11 +2,11 @@ import { pickColumnsWidth } from 'utils/columns' import types from './constants' -export function setColumnsWidth({ section, tableColumns }) { - const columns = pickColumnsWidth(tableColumns) +export function setColumnsWidth({ section, columns }) { + const preparedColumns = pickColumnsWidth(columns) return { type: types.SET_COLUMNS_WIDTH, - payload: { section, columns }, + payload: { section, preparedColumns }, } } From bf780860f361aefa30379147093e9e2f3a94c259 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Sun, 7 Apr 2024 17:17:28 +0300 Subject: [PATCH 04/30] Update calculated widths with chnaged values --- src/ui/DataTable/DataTable.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/ui/DataTable/DataTable.js b/src/ui/DataTable/DataTable.js index 5ee8cfc7f..393dfbe81 100644 --- a/src/ui/DataTable/DataTable.js +++ b/src/ui/DataTable/DataTable.js @@ -184,15 +184,18 @@ const DataTable = ({ console.log('+++columns', columns) console.log('+++index', index) console.log('+++width', width) + console.log('+++section', section) + columnWidths[index] = width if (section) { const updatedColumn = { ...columns[index], width, } + console.log('+++updatedColumn', updatedColumn) columns[index] = updatedColumn dispatch(setColumnsWidth({ section, columns })) } - setUseCustomColsWidth(true) + // setUseCustomColsWidth(true) } if (device === DEVICES.PHONE && columns.length >= 2) { From 48f60d621badc04249d3e5845f361e393cfa4e36 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Sun, 7 Apr 2024 17:40:46 +0300 Subject: [PATCH 05/30] Update default widths with calculted ones --- src/ui/DataTable/DataTable.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/ui/DataTable/DataTable.js b/src/ui/DataTable/DataTable.js index 393dfbe81..f115834a1 100644 --- a/src/ui/DataTable/DataTable.js +++ b/src/ui/DataTable/DataTable.js @@ -82,6 +82,8 @@ const DataTable = ({ [tableColumns, containerWidth, useCustomColsWidth], ) + console.log('+++columnWidths', columnWidths) + const getCellData = (rowIndex, columnIndex) => tableColumns[columnIndex]?.copyText(rowIndex) const renderBodyContextMenu = (context) => { @@ -180,6 +182,10 @@ const DataTable = ({ columns[0].renderer = () => getCellNoData(noDataTitle) } + columnWidths.forEach((value, index) => { + columns[index].width = value + }) + const onColumnWidthChanged = (index, width) => { console.log('+++columns', columns) console.log('+++index', index) @@ -211,7 +217,7 @@ const DataTable = ({ onCopy={onCopy} enableRowHeader={false} onSelection={onSelection} - columnWidths={columnWidths} + columnWidths={columns.map(column => column.width)} defaultRowHeight={defaultRowHeight} getCellClipboardData={getCellClipboardData} onColumnWidthChanged={onColumnWidthChanged} From d1e8d1547f2b485bbb4b84639729d2f8161df91b Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Sun, 7 Apr 2024 17:43:07 +0300 Subject: [PATCH 06/30] Adjust min columns width --- src/utils/columns.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utils/columns.js b/src/utils/columns.js index b2dc65d1a..e0126472e 100644 --- a/src/utils/columns.js +++ b/src/utils/columns.js @@ -612,7 +612,7 @@ export const formatSumUpValue = value => { return parseFloat(value).toFixed(8).replace(/\d(?=(\d{3})+\.)/g, '$&,') } -export const MIN_COLUMN_WIDTH = 100 +export const MIN_COLUMN_WIDTH = 50 export const DEFAULT_CONTAINER_WIDTH = 1000 From 909db4acb84498eec50c544199aadd6891c89c98 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Mon, 8 Apr 2024 11:28:14 +0300 Subject: [PATCH 07/30] Lint fix --- src/ui/DataTable/DataTable.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ui/DataTable/DataTable.js b/src/ui/DataTable/DataTable.js index f115834a1..978d3aec5 100644 --- a/src/ui/DataTable/DataTable.js +++ b/src/ui/DataTable/DataTable.js @@ -51,8 +51,8 @@ const DataTable = ({ const tableScroll = useSelector(getTableScroll) const [sumValue, setSumValue] = useState(null) const [containerWidth, setContainerWidth] = useState(0) - const [useCustomColsWidth, setUseCustomColsWidth] = useState(false) const [selectedColumns, setSelectedColumns] = useState({}) + const [useCustomColsWidth, setUseCustomColsWidth] = useState(false) useEffect(() => { if (!_isNull(sumValue)) { From 0c00466143600ef24455d85d1ff40dfde6a19451 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Mon, 8 Apr 2024 11:51:52 +0300 Subject: [PATCH 08/30] Improve calculated withs handling, update constants --- src/ui/DataTable/DataTable.js | 24 +++++++----------------- src/utils/columns.js | 2 +- 2 files changed, 8 insertions(+), 18 deletions(-) diff --git a/src/ui/DataTable/DataTable.js b/src/ui/DataTable/DataTable.js index 978d3aec5..41f1121e5 100644 --- a/src/ui/DataTable/DataTable.js +++ b/src/ui/DataTable/DataTable.js @@ -74,16 +74,6 @@ const DataTable = ({ } }, []) - const columnWidths = useMemo( - () => (useCustomColsWidth - ? tableColumns.map(column => column.width) - : getCalculatedColumnWidths(tableColumns, containerWidth)), - - [tableColumns, containerWidth, useCustomColsWidth], - ) - - console.log('+++columnWidths', columnWidths) - const getCellData = (rowIndex, columnIndex) => tableColumns[columnIndex]?.copyText(rowIndex) const renderBodyContextMenu = (context) => { @@ -182,16 +172,17 @@ const DataTable = ({ columns[0].renderer = () => getCellNoData(noDataTitle) } - columnWidths.forEach((value, index) => { + const calculatedColsWidths = useMemo( + () => getCalculatedColumnWidths(tableColumns, containerWidth), + [tableColumns, containerWidth, useCustomColsWidth], + ) + + calculatedColsWidths.forEach((value, index) => { columns[index].width = value }) const onColumnWidthChanged = (index, width) => { - console.log('+++columns', columns) - console.log('+++index', index) - console.log('+++width', width) - console.log('+++section', section) - columnWidths[index] = width + calculatedColsWidths[index] = width if (section) { const updatedColumn = { ...columns[index], @@ -201,7 +192,6 @@ const DataTable = ({ columns[index] = updatedColumn dispatch(setColumnsWidth({ section, columns })) } - // setUseCustomColsWidth(true) } if (device === DEVICES.PHONE && columns.length >= 2) { diff --git a/src/utils/columns.js b/src/utils/columns.js index e0126472e..b2dc65d1a 100644 --- a/src/utils/columns.js +++ b/src/utils/columns.js @@ -612,7 +612,7 @@ export const formatSumUpValue = value => { return parseFloat(value).toFixed(8).replace(/\d(?=(\d{3})+\.)/g, '$&,') } -export const MIN_COLUMN_WIDTH = 50 +export const MIN_COLUMN_WIDTH = 100 export const DEFAULT_CONTAINER_WIDTH = 1000 From ee4baebc908f4493ec7b4e4d64341bc6b2e87e78 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Mon, 8 Apr 2024 12:39:59 +0300 Subject: [PATCH 09/30] Implement custom width handling flow --- src/ui/DataTable/DataTable.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/ui/DataTable/DataTable.js b/src/ui/DataTable/DataTable.js index 41f1121e5..bb665d5f5 100644 --- a/src/ui/DataTable/DataTable.js +++ b/src/ui/DataTable/DataTable.js @@ -198,6 +198,10 @@ const DataTable = ({ return } + const columnWidths = useCustomColsWidth + ? columns.map(column => column.width) + : calculatedColsWidths + return (
column.width)} + columnWidths={columnWidths} defaultRowHeight={defaultRowHeight} getCellClipboardData={getCellClipboardData} onColumnWidthChanged={onColumnWidthChanged} From 47c3065eed8555548002557c235a859061358bf5 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Mon, 8 Apr 2024 12:54:01 +0300 Subject: [PATCH 10/30] Add customCols width getter --- src/ui/DataTable/DataTable.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/ui/DataTable/DataTable.js b/src/ui/DataTable/DataTable.js index bb665d5f5..34a346b53 100644 --- a/src/ui/DataTable/DataTable.js +++ b/src/ui/DataTable/DataTable.js @@ -31,6 +31,7 @@ import DEVICES from 'var/devices' import { getDevice } from 'state/ui/selectors' import queryConstants from 'state/query/constants' import { getTableScroll } from 'state/base/selectors' +import { getColumnsWidth } from 'state/columns/selectors' import { updateErrorStatus } from 'state/status/actions' import CollapsedTable from 'ui/CollapsedTable/CollapsedTable' import { showColumnsSum, setColumnsWidth } from 'state/columns/actions' @@ -53,6 +54,9 @@ const DataTable = ({ const [containerWidth, setContainerWidth] = useState(0) const [selectedColumns, setSelectedColumns] = useState({}) const [useCustomColsWidth, setUseCustomColsWidth] = useState(false) + const customColsWidths = useSelector((state) => getColumnsWidth(state, section)) + + console.log('+++customColsWidths', customColsWidths) useEffect(() => { if (!_isNull(sumValue)) { From b16a84ed48f886fe11de943e08834e08f5941992 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Mon, 8 Apr 2024 13:24:22 +0300 Subject: [PATCH 11/30] Fix setColumnsWidth action payload providing --- src/state/columns/actions.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/state/columns/actions.js b/src/state/columns/actions.js index 3916830bc..18d0b43eb 100644 --- a/src/state/columns/actions.js +++ b/src/state/columns/actions.js @@ -6,7 +6,7 @@ export function setColumnsWidth({ section, columns }) { const preparedColumns = pickColumnsWidth(columns) return { type: types.SET_COLUMNS_WIDTH, - payload: { section, preparedColumns }, + payload: { section, columns: preparedColumns }, } } From d7067bb99518ce8872b459ec2ffcde93a19bfa97 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Mon, 8 Apr 2024 13:24:49 +0300 Subject: [PATCH 12/30] Implement customColsWidths availability check --- src/ui/DataTable/DataTable.js | 23 +++++++++++++++++------ 1 file changed, 17 insertions(+), 6 deletions(-) diff --git a/src/ui/DataTable/DataTable.js b/src/ui/DataTable/DataTable.js index 34a346b53..b02af5dff 100644 --- a/src/ui/DataTable/DataTable.js +++ b/src/ui/DataTable/DataTable.js @@ -57,6 +57,11 @@ const DataTable = ({ const customColsWidths = useSelector((state) => getColumnsWidth(state, section)) console.log('+++customColsWidths', customColsWidths) + useEffect(() => { + if (customColsWidths) { + setUseCustomColsWidth(true) + } + }, [dispatch, customColsWidths]) useEffect(() => { if (!_isNull(sumValue)) { @@ -68,7 +73,6 @@ const DataTable = ({ useEffect(() => { const onScreenSizeChanged = () => { setContainerWidth(containerRef?.current?.offsetWidth ?? DEFAULT_CONTAINER_WIDTH) - setUseCustomColsWidth(false) } onScreenSizeChanged() window.addEventListener('resize', onScreenSizeChanged) @@ -177,16 +181,21 @@ const DataTable = ({ } const calculatedColsWidths = useMemo( - () => getCalculatedColumnWidths(tableColumns, containerWidth), - [tableColumns, containerWidth, useCustomColsWidth], + () => getCalculatedColumnWidths(columns, containerWidth), + [columns, containerWidth, useCustomColsWidth], ) - calculatedColsWidths.forEach((value, index) => { - columns[index].width = value - }) + // const calculatedColsWidths = getCalculatedColumnWidths(columns, containerWidth) + + // calculatedColsWidths.forEach((value, index) => { + // columns[index].width = value + // }) const onColumnWidthChanged = (index, width) => { calculatedColsWidths[index] = width + console.log('+++index', index) + console.log('+++width', width) + console.log('+++calculatedColsWidths2', calculatedColsWidths) if (section) { const updatedColumn = { ...columns[index], @@ -206,6 +215,8 @@ const DataTable = ({ ? columns.map(column => column.width) : calculatedColsWidths + console.log('+++calculatedColsWidths', calculatedColsWidths) + return (
Date: Mon, 8 Apr 2024 14:10:50 +0300 Subject: [PATCH 13/30] Add cols width getter default --- src/state/columns/selectors.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/state/columns/selectors.js b/src/state/columns/selectors.js index d7d204e16..89e1e9147 100644 --- a/src/state/columns/selectors.js +++ b/src/state/columns/selectors.js @@ -1,6 +1,6 @@ import { get } from '@bitfinex/lib-js-util-base' -export const getColumnsWidth = (state, section) => get(state, ['columns', section]) +export const getColumnsWidth = (state, section) => get(state, ['columns', section], []) export default { getColumnsWidth, From 24ef9ea207967f112c16cb270de2abffdacb26cd Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Mon, 8 Apr 2024 14:22:24 +0300 Subject: [PATCH 14/30] Implement custom cols widths reset flow --- src/ui/DataTable/DataTable.js | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/src/ui/DataTable/DataTable.js b/src/ui/DataTable/DataTable.js index b02af5dff..928241228 100644 --- a/src/ui/DataTable/DataTable.js +++ b/src/ui/DataTable/DataTable.js @@ -17,7 +17,7 @@ import { } from '@blueprintjs/table' import _keys from 'lodash/keys' import _isNull from 'lodash/isNull' -import { isEqual } from '@bitfinex/lib-js-util-base' +import { isEqual, isEmpty } from '@bitfinex/lib-js-util-base' import { getRowsConfig, @@ -56,9 +56,8 @@ const DataTable = ({ const [useCustomColsWidth, setUseCustomColsWidth] = useState(false) const customColsWidths = useSelector((state) => getColumnsWidth(state, section)) - console.log('+++customColsWidths', customColsWidths) useEffect(() => { - if (customColsWidths) { + if (!isEmpty(customColsWidths)) { setUseCustomColsWidth(true) } }, [dispatch, customColsWidths]) @@ -99,6 +98,11 @@ const DataTable = ({ } } + const columnWidthReset = () => { + setUseCustomColsWidth(false) + dispatch(setColumnsWidth({ section })) + } + return ( )} + ) } @@ -182,26 +191,16 @@ const DataTable = ({ const calculatedColsWidths = useMemo( () => getCalculatedColumnWidths(columns, containerWidth), - [columns, containerWidth, useCustomColsWidth], + [columns, containerWidth], ) - // const calculatedColsWidths = getCalculatedColumnWidths(columns, containerWidth) - - // calculatedColsWidths.forEach((value, index) => { - // columns[index].width = value - // }) - const onColumnWidthChanged = (index, width) => { calculatedColsWidths[index] = width - console.log('+++index', index) - console.log('+++width', width) - console.log('+++calculatedColsWidths2', calculatedColsWidths) if (section) { const updatedColumn = { ...columns[index], width, } - console.log('+++updatedColumn', updatedColumn) columns[index] = updatedColumn dispatch(setColumnsWidth({ section, columns })) } @@ -216,6 +215,7 @@ const DataTable = ({ : calculatedColsWidths console.log('+++calculatedColsWidths', calculatedColsWidths) + console.log('+++useCustomColsWidth', useCustomColsWidth) return (
Date: Mon, 8 Apr 2024 14:31:49 +0300 Subject: [PATCH 15/30] Actualized keys&descriptions --- public/locales/en/translations.json | 1 + 1 file changed, 1 insertion(+) diff --git a/public/locales/en/translations.json b/public/locales/en/translations.json index bfc22f5cb..2be0a7879 100644 --- a/public/locales/en/translations.json +++ b/public/locales/en/translations.json @@ -152,6 +152,7 @@ "customerInfo": "Customer Info", "date": "Date", "days": "Days", + "defaultWidth": "Default columns width", "deselectionHint": "Cmd/Ctrl + click to deselect", "description": "Description", "destination": "Destination", From 7dc569b874db44b9d2154c93ca00e372513decae Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Mon, 8 Apr 2024 14:33:06 +0300 Subject: [PATCH 16/30] Update reset to defaults label --- src/ui/DataTable/DataTable.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ui/DataTable/DataTable.js b/src/ui/DataTable/DataTable.js index 928241228..ce4e3ff88 100644 --- a/src/ui/DataTable/DataTable.js +++ b/src/ui/DataTable/DataTable.js @@ -118,9 +118,9 @@ const DataTable = ({ /> )} ) From a25695f83b1338c8615f10fc81c0f5b2879d8e99 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Mon, 8 Apr 2024 14:35:49 +0300 Subject: [PATCH 17/30] Cleanup --- src/ui/DataTable/DataTable.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/ui/DataTable/DataTable.js b/src/ui/DataTable/DataTable.js index ce4e3ff88..84bbafc5b 100644 --- a/src/ui/DataTable/DataTable.js +++ b/src/ui/DataTable/DataTable.js @@ -214,9 +214,6 @@ const DataTable = ({ ? columns.map(column => column.width) : calculatedColsWidths - console.log('+++calculatedColsWidths', calculatedColsWidths) - console.log('+++useCustomColsWidth', useCustomColsWidth) - return (
Date: Mon, 8 Apr 2024 15:40:08 +0300 Subject: [PATCH 18/30] Update query constants --- src/state/query/constants.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/state/query/constants.js b/src/state/query/constants.js index 1825684c1..01b05f56c 100644 --- a/src/state/query/constants.js +++ b/src/state/query/constants.js @@ -33,6 +33,7 @@ export default { MENU_WALLETS: 'wallets', MENU_WIN_LOSS: 'averagewinloss', MENU_WEIGHTED_AVERAGES: 'weightedaverages', + SUMMARY_BY_ASSET: 'summarybyasset', TIME_TYPE_UTC: 'utc', TIME_TYPE_LOCALTIME: 'local', DEFAULT_QUERY_LIMIT: 500, From 1033afd0eccdcc34aa07a01fd8a7d6c7af34e40e Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Mon, 8 Apr 2024 15:40:30 +0300 Subject: [PATCH 19/30] Provide summary by asset query type --- src/components/AppSummary/AppSummary.byAsset.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/AppSummary/AppSummary.byAsset.js b/src/components/AppSummary/AppSummary.byAsset.js index 373558ffe..e4c96f902 100644 --- a/src/components/AppSummary/AppSummary.byAsset.js +++ b/src/components/AppSummary/AppSummary.byAsset.js @@ -16,6 +16,7 @@ import { getSummaryByAssetEntries, } from 'state/summaryByAsset/selectors' import { getTimezone } from 'state/base/selectors' +import queryConstants from 'state/query/constants' import { getTimeRange, getTimeFrame } from 'state/timeRange/selectors' import { getIsSyncRequired, getIsFirstSyncing } from 'state/sync/selectors' @@ -83,6 +84,7 @@ const AppSummaryByAsset = () => { defaultRowHeight={73} tableColumns={columns} className={tableClasses} + section={queryConstants.SUMMARY_BY_ASSET} numRows={isLoading ? 3 : preparedData.length} />
From 83b338cc756a069647196bff317a04f52a6a39a1 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Mon, 8 Apr 2024 15:58:39 +0300 Subject: [PATCH 20/30] Actualize columns constants --- src/utils/columns.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/utils/columns.js b/src/utils/columns.js index b2dc65d1a..0e4e3ad11 100644 --- a/src/utils/columns.js +++ b/src/utils/columns.js @@ -16,6 +16,7 @@ const COLUMN_WIDTH_STANDARD = { amountExecuted: 132, ask: 132, balance: 132, + balanceChange: 178, balanceUsd: 137, basePrice: 132, bid: 132, @@ -51,6 +52,7 @@ const COLUMN_WIDTH_STANDARD = { log: 200, marginFunding: 132, marginFundingType: 130, + marginFundingPayment: 178, moreDetails: 95, meta: 160, merchantName: 120, @@ -87,10 +89,12 @@ const COLUMN_WIDTH_STANDARD = { time: 150, timestamp: 150, transactionId: 135, + tradingFees: 178, type: 135, typePrev: 135, userAgent: 160, version: 120, + volume: 178, wallet: 80, webhook: 150, } @@ -103,6 +107,7 @@ const COLUMN_WIDTHS_BIG_SCREENS = { amountExecuted: 160, ask: 160, balance: 160, + balanceChange: 178, balanceUsd: 160, basePrice: 160, bid: 160, @@ -138,6 +143,7 @@ const COLUMN_WIDTHS_BIG_SCREENS = { log: 200, marginFunding: 160, marginFundingType: 130, + marginFundingPayment: 178, moreDetails: 140, meta: 160, merchantName: 140, @@ -174,10 +180,12 @@ const COLUMN_WIDTHS_BIG_SCREENS = { time: 170, timestamp: 170, transactionId: 165, + tradingFees: 178, type: 165, typePrev: 165, userAgent: 160, version: 120, + volume: 178, wallet: 120, webhook: 250, } From de17e4aaeec6029a704b31477f77b284022efd1d Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Mon, 8 Apr 2024 15:59:09 +0300 Subject: [PATCH 21/30] Update app summary cols getters --- .../AppSummary/AppSummary.columns.js | 20 ++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/src/components/AppSummary/AppSummary.columns.js b/src/components/AppSummary/AppSummary.columns.js index c94b76877..431b74814 100644 --- a/src/components/AppSummary/AppSummary.columns.js +++ b/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() From 510e841ae723b5025e0cccbad6abb9ce33a64e44 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Mon, 8 Apr 2024 15:59:39 +0300 Subject: [PATCH 22/30] Actualize summary by asset cols config --- src/components/AppSummary/AppSummary.byAsset.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/AppSummary/AppSummary.byAsset.js b/src/components/AppSummary/AppSummary.byAsset.js index e4c96f902..ffce049b8 100644 --- a/src/components/AppSummary/AppSummary.byAsset.js +++ b/src/components/AppSummary/AppSummary.byAsset.js @@ -17,6 +17,7 @@ import { } 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' @@ -24,6 +25,8 @@ 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() @@ -38,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', { @@ -61,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 ( @@ -81,10 +85,10 @@ const AppSummaryByAsset = () => {
From 12bb2f7b4688efcc53565f7a427f27dc7e246798 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Mon, 8 Apr 2024 16:11:31 +0300 Subject: [PATCH 23/30] Make columns resizing adjustable --- src/ui/DataTable/DataTable.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/ui/DataTable/DataTable.js b/src/ui/DataTable/DataTable.js index 84bbafc5b..490376d40 100644 --- a/src/ui/DataTable/DataTable.js +++ b/src/ui/DataTable/DataTable.js @@ -44,6 +44,7 @@ const DataTable = ({ className, tableColumns, defaultRowHeight, + enableColumnResizing, }) => { const { t } = useTranslation() const dispatch = useDispatch() @@ -225,6 +226,7 @@ const DataTable = ({ onSelection={onSelection} columnWidths={columnWidths} defaultRowHeight={defaultRowHeight} + enableColumnResizing={enableColumnResizing} getCellClipboardData={getCellClipboardData} onColumnWidthChanged={onColumnWidthChanged} bodyContextMenuRenderer={renderBodyContextMenu} @@ -260,6 +262,7 @@ DataTable.propTypes = { defaultRowHeight: PropTypes.number, isNoData: PropTypes.bool, isLoading: PropTypes.bool, + enableColumnResizing: PropTypes.bool, } DataTable.defaultProps = { @@ -268,6 +271,7 @@ DataTable.defaultProps = { isLoading: false, section: undefined, defaultRowHeight: 26, + enableColumnResizing: true, } export default memo(DataTable) From 47fbcd98ec5ff07ca76351d94040c09b2052381c Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Mon, 8 Apr 2024 16:12:21 +0300 Subject: [PATCH 24/30] Prevent resising for small acc summary sections --- src/components/AccountSummary/AccountSummary.derivFees.js | 1 + src/components/AccountSummary/AccountSummary.feeTierVolume.js | 1 + src/components/AccountSummary/AccountSummary.fees.js | 1 + src/components/AccountSummary/AccountSummary.leo.js | 1 + src/components/AccountSummary/AccountSummary.paidFees.js | 1 + src/components/AccountSummary/AccountSummary.volume.js | 1 + 6 files changed, 6 insertions(+) diff --git a/src/components/AccountSummary/AccountSummary.derivFees.js b/src/components/AccountSummary/AccountSummary.derivFees.js index d098bf32c..5411349e6 100644 --- a/src/components/AccountSummary/AccountSummary.derivFees.js +++ b/src/components/AccountSummary/AccountSummary.derivFees.js @@ -75,6 +75,7 @@ const AccountSummaryDerivFees = ({
) diff --git a/src/components/AccountSummary/AccountSummary.feeTierVolume.js b/src/components/AccountSummary/AccountSummary.feeTierVolume.js index d5e0f56ef..70ac160a6 100644 --- a/src/components/AccountSummary/AccountSummary.feeTierVolume.js +++ b/src/components/AccountSummary/AccountSummary.feeTierVolume.js @@ -25,6 +25,7 @@ const AccountSummaryFeeTierVolume = ({
) diff --git a/src/components/AccountSummary/AccountSummary.fees.js b/src/components/AccountSummary/AccountSummary.fees.js index 74d9e3557..67cd76e97 100644 --- a/src/components/AccountSummary/AccountSummary.fees.js +++ b/src/components/AccountSummary/AccountSummary.fees.js @@ -127,6 +127,7 @@ const AccountSummaryFees = ({
) diff --git a/src/components/AccountSummary/AccountSummary.leo.js b/src/components/AccountSummary/AccountSummary.leo.js index 0e00a5122..2b2dd6771 100644 --- a/src/components/AccountSummary/AccountSummary.leo.js +++ b/src/components/AccountSummary/AccountSummary.leo.js @@ -63,6 +63,7 @@ const AccountSummaryLeo = ({
) diff --git a/src/components/AccountSummary/AccountSummary.paidFees.js b/src/components/AccountSummary/AccountSummary.paidFees.js index 9fadc04cb..db8e2b5d4 100644 --- a/src/components/AccountSummary/AccountSummary.paidFees.js +++ b/src/components/AccountSummary/AccountSummary.paidFees.js @@ -88,6 +88,7 @@ const AccountSummaryPaidFees = ({
{t(title)}
diff --git a/src/components/AccountSummary/AccountSummary.volume.js b/src/components/AccountSummary/AccountSummary.volume.js index c774ed30b..942d54a19 100644 --- a/src/components/AccountSummary/AccountSummary.volume.js +++ b/src/components/AccountSummary/AccountSummary.volume.js @@ -75,6 +75,7 @@ const AccountSummaryVolume = ({
{t('accountsummary.30dVolume')}
From e749a27e4dc37b1c803724859a1b7fcfbfae2e24 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Mon, 8 Apr 2024 16:16:46 +0300 Subject: [PATCH 25/30] Show reset cols width only for resizable ones --- src/ui/DataTable/DataTable.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/ui/DataTable/DataTable.js b/src/ui/DataTable/DataTable.js index 490376d40..e6d3343b9 100644 --- a/src/ui/DataTable/DataTable.js +++ b/src/ui/DataTable/DataTable.js @@ -118,11 +118,13 @@ const DataTable = ({ getCellData={getCellSum} /> )} - + {enableColumnResizing && ( + + )} ) } From 631dd152de366cde5d0c2a7ad0ccbe56e8ddd634 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Mon, 8 Apr 2024 16:17:09 +0300 Subject: [PATCH 26/30] Actualize wallets tables configs --- src/components/Wallets/Wallets.data.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/Wallets/Wallets.data.js b/src/components/Wallets/Wallets.data.js index 73b607919..199a35bad 100644 --- a/src/components/Wallets/Wallets.data.js +++ b/src/components/Wallets/Wallets.data.js @@ -45,6 +45,7 @@ const WalletsData = ({
{t('wallets.header.exchange')}
@@ -52,6 +53,7 @@ const WalletsData = ({
{t('wallets.header.margin')}
@@ -59,6 +61,7 @@ const WalletsData = ({
{t('wallets.header.funding')}
@@ -66,6 +69,7 @@ const WalletsData = ({
{t('wallets.header.capital-raise')}
From b3f1a8f4438a48332c9cea864b9e2d03df008868 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Mon, 8 Apr 2024 16:22:58 +0300 Subject: [PATCH 27/30] Improve concentration risk data table configuration --- src/components/ConcentrationRisk/ConcentrationRisk.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/ConcentrationRisk/ConcentrationRisk.js b/src/components/ConcentrationRisk/ConcentrationRisk.js index 76ce04431..4a029f181 100644 --- a/src/components/ConcentrationRisk/ConcentrationRisk.js +++ b/src/components/ConcentrationRisk/ConcentrationRisk.js @@ -143,7 +143,7 @@ class ConcentrationRisk extends PureComponent { let showContent if (isNoData) { showContent = ( -
+
From 20f789ad7a1f0b2952f57e07a114a5cbbf2a21fe Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Wed, 10 Apr 2024 12:32:58 +0300 Subject: [PATCH 28/30] Enhance cilumns widthchnaging flow --- src/ui/DataTable/DataTable.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/ui/DataTable/DataTable.js b/src/ui/DataTable/DataTable.js index e6d3343b9..2e70b8344 100644 --- a/src/ui/DataTable/DataTable.js +++ b/src/ui/DataTable/DataTable.js @@ -199,13 +199,20 @@ const DataTable = ({ const onColumnWidthChanged = (index, width) => { calculatedColsWidths[index] = width - if (section) { + if (!section) return + if (useCustomColsWidth) { const updatedColumn = { ...columns[index], width, } columns[index] = updatedColumn dispatch(setColumnsWidth({ section, columns })) + } else { + const updatedColumns = calculatedColsWidths.map((value, ind) => ({ + ...columns[ind], + width: value, + })) + dispatch(setColumnsWidth({ section, columns: updatedColumns })) } } From 9d9315ed115788a5ec8442fe6c4ac3c103b38f28 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Wed, 10 Apr 2024 13:26:16 +0300 Subject: [PATCH 29/30] Lint fix --- src/ui/DataTable/DataTable.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/ui/DataTable/DataTable.js b/src/ui/DataTable/DataTable.js index 2e70b8344..f4754393b 100644 --- a/src/ui/DataTable/DataTable.js +++ b/src/ui/DataTable/DataTable.js @@ -197,19 +197,19 @@ const DataTable = ({ [columns, containerWidth], ) - const onColumnWidthChanged = (index, width) => { - calculatedColsWidths[index] = width + const onColumnWidthChanged = (colIndex, width) => { + calculatedColsWidths[colIndex] = width if (!section) return if (useCustomColsWidth) { const updatedColumn = { - ...columns[index], + ...columns[colIndex], width, } - columns[index] = updatedColumn + columns[colIndex] = updatedColumn dispatch(setColumnsWidth({ section, columns })) } else { - const updatedColumns = calculatedColsWidths.map((value, ind) => ({ - ...columns[ind], + const updatedColumns = calculatedColsWidths.map((value, index) => ({ + ...columns[index], width: value, })) dispatch(setColumnsWidth({ section, columns: updatedColumns })) From 4f87814530c898008e3c153bb82284b8d17e85ca Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Fri, 12 Apr 2024 13:09:00 +0300 Subject: [PATCH 30/30] Update reset width option description --- public/locales/en/translations.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/locales/en/translations.json b/public/locales/en/translations.json index 2be0a7879..c5e64dcf4 100644 --- a/public/locales/en/translations.json +++ b/public/locales/en/translations.json @@ -152,7 +152,7 @@ "customerInfo": "Customer Info", "date": "Date", "days": "Days", - "defaultWidth": "Default columns width", + "defaultWidth": "Reset Column Widths", "deselectionHint": "Cmd/Ctrl + click to deselect", "description": "Description", "destination": "Destination",