From eb4aa142d7f869504705e5e819940baa308463cf Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Mon, 15 Apr 2024 13:31:57 +0300 Subject: [PATCH 01/25] Implement columnHeaderCellRenderer --- src/ui/DataTable/DataTable.js | 22 +++++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/src/ui/DataTable/DataTable.js b/src/ui/DataTable/DataTable.js index f4754393b..ee9898334 100644 --- a/src/ui/DataTable/DataTable.js +++ b/src/ui/DataTable/DataTable.js @@ -9,9 +9,10 @@ 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' +import { Menu, MenuItem } from '@blueprintjs/core' import { Column, + ColumnHeaderCell, CopyCellsMenuItem, Table, } from '@blueprintjs/table' @@ -84,6 +85,24 @@ const DataTable = ({ const getCellData = (rowIndex, columnIndex) => tableColumns[columnIndex]?.copyText(rowIndex) + const columnHeaderCellRenderer = (name) => { + const columnWidthReset = () => { + setUseCustomColsWidth(false) + dispatch(setColumnsWidth({ section })) + } + + const menuRenderer = () => ( + + + + ) + + return + } + const renderBodyContextMenu = (context) => { const isSingleColumnSelected = singleColumnSelectedCheck(context) const hasNumericValue = columnHasNumericValueCheck(context, tableColumns) @@ -249,6 +268,7 @@ const DataTable = ({ cellRenderer={column.renderer} className={column?.className ?? 'align-right'} name={column.nameStr ? column.nameStr : t(column.name)} + columnHeaderCellRenderer={() => columnHeaderCellRenderer(column.name)} /> ))} From 7b14b9f2f68844db755292e5947d17aece20505a Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Mon, 15 Apr 2024 13:33:56 +0300 Subject: [PATCH 02/25] Fix columns header naming providing --- 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 ee9898334..310d1ed09 100644 --- a/src/ui/DataTable/DataTable.js +++ b/src/ui/DataTable/DataTable.js @@ -268,7 +268,7 @@ const DataTable = ({ cellRenderer={column.renderer} className={column?.className ?? 'align-right'} name={column.nameStr ? column.nameStr : t(column.name)} - columnHeaderCellRenderer={() => columnHeaderCellRenderer(column.name)} + columnHeaderCellRenderer={() => columnHeaderCellRenderer(t(column.name))} /> ))} From 2560abd7c98e75fc9d2b2c37854d2283c6f5afc1 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Mon, 15 Apr 2024 13:41:08 +0300 Subject: [PATCH 03/25] Fix table menu representation --- src/ui/DataTable/_DataTable.scss | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/ui/DataTable/_DataTable.scss b/src/ui/DataTable/_DataTable.scss index bc08582b2..56d42de2d 100644 --- a/src/ui/DataTable/_DataTable.scss +++ b/src/ui/DataTable/_DataTable.scss @@ -63,6 +63,16 @@ .cell-no-data { color: var(--color2); } + + .bp3-table-thead { + .bp3-table-header { + .bp3-table-column-name { + .bp3-table-th-menu-container{ + display: none; + } + } + } + } } .bp3-table { From 6c43d8c6f99074407d362ae64b964a64b8df5189 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Mon, 15 Apr 2024 13:54:48 +0300 Subject: [PATCH 04/25] Extract columnWidthReset handler for better reusability --- src/ui/DataTable/DataTable.js | 16 +++++----------- 1 file changed, 5 insertions(+), 11 deletions(-) diff --git a/src/ui/DataTable/DataTable.js b/src/ui/DataTable/DataTable.js index 310d1ed09..e13653384 100644 --- a/src/ui/DataTable/DataTable.js +++ b/src/ui/DataTable/DataTable.js @@ -85,12 +85,12 @@ const DataTable = ({ const getCellData = (rowIndex, columnIndex) => tableColumns[columnIndex]?.copyText(rowIndex) - const columnHeaderCellRenderer = (name) => { - const columnWidthReset = () => { - setUseCustomColsWidth(false) - dispatch(setColumnsWidth({ section })) - } + const columnWidthReset = () => { + setUseCustomColsWidth(false) + dispatch(setColumnsWidth({ section })) + } + const columnHeaderCellRenderer = (name) => { const menuRenderer = () => ( ) - return } @@ -118,11 +117,6 @@ const DataTable = ({ } } - const columnWidthReset = () => { - setUseCustomColsWidth(false) - dispatch(setColumnsWidth({ section })) - } - return ( Date: Mon, 15 Apr 2024 14:06:43 +0300 Subject: [PATCH 05/25] Optimize columnWidthReset handler --- src/ui/DataTable/DataTable.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/ui/DataTable/DataTable.js b/src/ui/DataTable/DataTable.js index e13653384..25e9f4e45 100644 --- a/src/ui/DataTable/DataTable.js +++ b/src/ui/DataTable/DataTable.js @@ -4,6 +4,7 @@ import React, { useMemo, useState, useEffect, + useCallback, } from 'react' import { useTranslation } from 'react-i18next' import { useDispatch, useSelector } from 'react-redux' @@ -85,10 +86,10 @@ const DataTable = ({ const getCellData = (rowIndex, columnIndex) => tableColumns[columnIndex]?.copyText(rowIndex) - const columnWidthReset = () => { + const columnWidthReset = useCallback(() => { setUseCustomColsWidth(false) dispatch(setColumnsWidth({ section })) - } + }, [dispatch]) const columnHeaderCellRenderer = (name) => { const menuRenderer = () => ( From ddcb0c65ff8dec445fb3f8a5100beb0b5e30b8c6 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Mon, 15 Apr 2024 14:08:26 +0300 Subject: [PATCH 06/25] Improve header cell name providing --- src/ui/DataTable/DataTable.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/ui/DataTable/DataTable.js b/src/ui/DataTable/DataTable.js index 25e9f4e45..9c3dba541 100644 --- a/src/ui/DataTable/DataTable.js +++ b/src/ui/DataTable/DataTable.js @@ -100,7 +100,7 @@ const DataTable = ({ /> ) - return + return } const renderBodyContextMenu = (context) => { @@ -263,7 +263,7 @@ const DataTable = ({ cellRenderer={column.renderer} className={column?.className ?? 'align-right'} name={column.nameStr ? column.nameStr : t(column.name)} - columnHeaderCellRenderer={() => columnHeaderCellRenderer(t(column.name))} + columnHeaderCellRenderer={() => columnHeaderCellRenderer(column.name)} /> ))} From c324afb96f271d38d92f4dece8bf5e8a05b5def5 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Mon, 15 Apr 2024 15:46:28 +0300 Subject: [PATCH 07/25] Adjust menu availability only for resizable tables --- src/ui/DataTable/DataTable.js | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/src/ui/DataTable/DataTable.js b/src/ui/DataTable/DataTable.js index 9c3dba541..d43f725fa 100644 --- a/src/ui/DataTable/DataTable.js +++ b/src/ui/DataTable/DataTable.js @@ -93,12 +93,16 @@ const DataTable = ({ const columnHeaderCellRenderer = (name) => { const menuRenderer = () => ( - - - + <> + {enableColumnResizing && ( + + + + )} + ) return } From 5b40051f45ec5b31831a92e1fa430c11a0279313 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Fri, 19 Apr 2024 10:39:22 +0300 Subject: [PATCH 08/25] Minor fix --- src/ui/DataTable/DataTable.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/ui/DataTable/DataTable.js b/src/ui/DataTable/DataTable.js index d43f725fa..a44ea6ed2 100644 --- a/src/ui/DataTable/DataTable.js +++ b/src/ui/DataTable/DataTable.js @@ -104,7 +104,7 @@ const DataTable = ({ )} ) - return + return } const renderBodyContextMenu = (context) => { @@ -267,7 +267,7 @@ const DataTable = ({ cellRenderer={column.renderer} className={column?.className ?? 'align-right'} name={column.nameStr ? column.nameStr : t(column.name)} - columnHeaderCellRenderer={() => columnHeaderCellRenderer(column.name)} + columnHeaderCellRenderer={() => columnHeaderCellRenderer(column?.nameStr ?? t(column.name))} /> ))} From 5845207d2ad83e2249ce7d920d27503fc7e02505 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Tue, 23 Apr 2024 13:53:37 +0300 Subject: [PATCH 09/25] Fix headers names alignment --- src/ui/DataTable/DataTable.js | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/src/ui/DataTable/DataTable.js b/src/ui/DataTable/DataTable.js index a44ea6ed2..a9633f4d7 100644 --- a/src/ui/DataTable/DataTable.js +++ b/src/ui/DataTable/DataTable.js @@ -91,7 +91,7 @@ const DataTable = ({ dispatch(setColumnsWidth({ section })) }, [dispatch]) - const columnHeaderCellRenderer = (name) => { + const columnHeaderCellRenderer = (name, headerClassName) => { const menuRenderer = () => ( <> {enableColumnResizing && ( @@ -104,7 +104,14 @@ const DataTable = ({ )} ) - return + return ( + + ) } const renderBodyContextMenu = (context) => { @@ -267,7 +274,12 @@ const DataTable = ({ cellRenderer={column.renderer} className={column?.className ?? 'align-right'} name={column.nameStr ? column.nameStr : t(column.name)} - columnHeaderCellRenderer={() => columnHeaderCellRenderer(column?.nameStr ?? t(column.name))} + columnHeaderCellRenderer={ + () => columnHeaderCellRenderer( + column?.nameStr ?? t(column.name), + column?.className ?? 'align-right', + ) + } /> ))} From 568c7312f0144e2b811c0b4ca317dc43ad20eee3 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Tue, 23 Apr 2024 13:57:10 +0300 Subject: [PATCH 10/25] Lint fix --- src/ui/DataTable/DataTable.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/ui/DataTable/DataTable.js b/src/ui/DataTable/DataTable.js index a9633f4d7..5f55e02f9 100644 --- a/src/ui/DataTable/DataTable.js +++ b/src/ui/DataTable/DataTable.js @@ -109,7 +109,6 @@ const DataTable = ({ name={name} className={headerClassName} menuRenderer={menuRenderer} - /> ) } From 037e80b5df209632b54deb68a9a949c0a655fde1 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Fri, 19 Apr 2024 11:55:08 +0300 Subject: [PATCH 11/25] Implement getColumnsMinWidths helper --- src/utils/columns.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/utils/columns.js b/src/utils/columns.js index 0e4e3ad11..e342b3887 100644 --- a/src/utils/columns.js +++ b/src/utils/columns.js @@ -624,11 +624,17 @@ export const MIN_COLUMN_WIDTH = 100 export const DEFAULT_CONTAINER_WIDTH = 1000 +const getColumnsMinWidths = (columns) => _map(columns, + (column) => COLUMN_WIDTHS?.[column.id] ?? MIN_COLUMN_WIDTH) + export const getCalculatedColumnWidths = (columns, containerWidth) => { if (columns.length === 0) { return [] } + console.log('++columns', columns) + console.log('+++MIN_WIDTH', getColumnsMinWidths(columns)) + const avgWidth = Math.floor(containerWidth / columns.length) if (avgWidth < MIN_COLUMN_WIDTH) { return _map(columns, () => MIN_COLUMN_WIDTH) From 39bcf48a27de9388164126109c95f2ea3fead6be Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Mon, 22 Apr 2024 13:20:48 +0300 Subject: [PATCH 12/25] Fix columns util export --- src/utils/columns.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/utils/columns.js b/src/utils/columns.js index e342b3887..da029c2ee 100644 --- a/src/utils/columns.js +++ b/src/utils/columns.js @@ -624,7 +624,7 @@ export const MIN_COLUMN_WIDTH = 100 export const DEFAULT_CONTAINER_WIDTH = 1000 -const getColumnsMinWidths = (columns) => _map(columns, +export const getColumnsMinWidths = (columns) => _map(columns, (column) => COLUMN_WIDTHS?.[column.id] ?? MIN_COLUMN_WIDTH) export const getCalculatedColumnWidths = (columns, containerWidth) => { @@ -632,7 +632,7 @@ export const getCalculatedColumnWidths = (columns, containerWidth) => { return [] } - console.log('++columns', columns) + console.log('++containerWidth', containerWidth) console.log('+++MIN_WIDTH', getColumnsMinWidths(columns)) const avgWidth = Math.floor(containerWidth / columns.length) From d8df55904e66caf343e69022c631a3f64c439c61 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Mon, 22 Apr 2024 13:36:22 +0300 Subject: [PATCH 13/25] Update first cols defult calculations --- src/utils/columns.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/utils/columns.js b/src/utils/columns.js index da029c2ee..5b87a827c 100644 --- a/src/utils/columns.js +++ b/src/utils/columns.js @@ -641,7 +641,6 @@ export const getCalculatedColumnWidths = (columns, containerWidth) => { } const columnWidths = _map(columns, () => avgWidth) - columnWidths[0] = containerWidth - ((columns.length - 1) * avgWidth) return columnWidths } From 0f5bd28028dd3eb0c8ddaac5fc307009c8f904ba Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Mon, 22 Apr 2024 13:48:15 +0300 Subject: [PATCH 14/25] Implement getIsDefaultsWiderThanContainer checker utility --- src/utils/columns.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/utils/columns.js b/src/utils/columns.js index 5b87a827c..67a230335 100644 --- a/src/utils/columns.js +++ b/src/utils/columns.js @@ -1,5 +1,6 @@ import React from 'react' import _map from 'lodash/map' +import _sum from 'lodash/sum' import _head from 'lodash/head' import _filter from 'lodash/filter' import { Cell } from '@blueprintjs/table' @@ -627,11 +628,17 @@ export const DEFAULT_CONTAINER_WIDTH = 1000 export const getColumnsMinWidths = (columns) => _map(columns, (column) => COLUMN_WIDTHS?.[column.id] ?? MIN_COLUMN_WIDTH) +const getIsDefaultsWiderThanContainer = (columns, container) => _sum(getColumnsMinWidths(columns)) > container + + export const getCalculatedColumnWidths = (columns, containerWidth) => { if (columns.length === 0) { return [] } + const isDefaultsWiderThanContainer = getIsDefaultsWiderThanContainer(columns, containerWidth) + + console.log('++isDefaultsWiderThanContainer', isDefaultsWiderThanContainer) console.log('++containerWidth', containerWidth) console.log('+++MIN_WIDTH', getColumnsMinWidths(columns)) From 2e7b6eec019d0c5ac095baa7d9d3bc5d60eef550 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Mon, 22 Apr 2024 13:55:01 +0300 Subject: [PATCH 15/25] Cleanup --- src/utils/columns.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/utils/columns.js b/src/utils/columns.js index 67a230335..54908cf5b 100644 --- a/src/utils/columns.js +++ b/src/utils/columns.js @@ -639,8 +639,6 @@ export const getCalculatedColumnWidths = (columns, containerWidth) => { const isDefaultsWiderThanContainer = getIsDefaultsWiderThanContainer(columns, containerWidth) console.log('++isDefaultsWiderThanContainer', isDefaultsWiderThanContainer) - console.log('++containerWidth', containerWidth) - console.log('+++MIN_WIDTH', getColumnsMinWidths(columns)) const avgWidth = Math.floor(containerWidth / columns.length) if (avgWidth < MIN_COLUMN_WIDTH) { From babacc16b12d68ad69b9d75419704f5aff102d84 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Mon, 22 Apr 2024 14:50:26 +0300 Subject: [PATCH 16/25] Implement wide/small columns checking flow --- src/utils/columns.js | 20 +++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/src/utils/columns.js b/src/utils/columns.js index 54908cf5b..dd3942b86 100644 --- a/src/utils/columns.js +++ b/src/utils/columns.js @@ -3,6 +3,7 @@ import _map from 'lodash/map' import _sum from 'lodash/sum' import _head from 'lodash/head' import _filter from 'lodash/filter' +import _forEach from 'lodash/forEach' import { Cell } from '@blueprintjs/table' import { get, pick, isEqual } from '@bitfinex/lib-js-util-base' @@ -622,7 +623,7 @@ export const formatSumUpValue = value => { } export const MIN_COLUMN_WIDTH = 100 - +export const WIDE_COLUMN_DEFAULT_WIDTH = 400 export const DEFAULT_CONTAINER_WIDTH = 1000 export const getColumnsMinWidths = (columns) => _map(columns, @@ -638,6 +639,23 @@ export const getCalculatedColumnWidths = (columns, containerWidth) => { const isDefaultsWiderThanContainer = getIsDefaultsWiderThanContainer(columns, containerWidth) + if (isDefaultsWiderThanContainer) { + const colsDefaults = getColumnsMinWidths(columns) + const smallColsIndexes = [] + const wideColsIndexes = [] + + _forEach(colsDefaults, (value, index) => { + if (value < MIN_COLUMN_WIDTH) smallColsIndexes.push(index) + if (value > WIDE_COLUMN_DEFAULT_WIDTH) wideColsIndexes.push(index) + }) + + + console.log('+++smallColsIndexes', smallColsIndexes) + console.log('+++wideColsIndexes', wideColsIndexes) + } + + + console.log('++def', getColumnsMinWidths(columns)) console.log('++isDefaultsWiderThanContainer', isDefaultsWiderThanContainer) const avgWidth = Math.floor(containerWidth / columns.length) From 7fee0170dc357efd7fd0826039776b85d09d3cc0 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Tue, 23 Apr 2024 12:05:34 +0300 Subject: [PATCH 17/25] Update average width calc flow --- src/utils/columns.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/utils/columns.js b/src/utils/columns.js index dd3942b86..d1844e418 100644 --- a/src/utils/columns.js +++ b/src/utils/columns.js @@ -1,6 +1,7 @@ import React from 'react' import _map from 'lodash/map' import _sum from 'lodash/sum' +import _size from 'lodash/size' import _head from 'lodash/head' import _filter from 'lodash/filter' import _forEach from 'lodash/forEach' @@ -633,14 +634,15 @@ const getIsDefaultsWiderThanContainer = (columns, container) => _sum(getColumnsM export const getCalculatedColumnWidths = (columns, containerWidth) => { - if (columns.length === 0) { + if (_size(columns) === 0) { return [] } + const colsDefaults = getColumnsMinWidths(columns) + let avgWidth = Math.floor(containerWidth / _size(columns)) const isDefaultsWiderThanContainer = getIsDefaultsWiderThanContainer(columns, containerWidth) if (isDefaultsWiderThanContainer) { - const colsDefaults = getColumnsMinWidths(columns) const smallColsIndexes = [] const wideColsIndexes = [] @@ -649,7 +651,6 @@ export const getCalculatedColumnWidths = (columns, containerWidth) => { if (value > WIDE_COLUMN_DEFAULT_WIDTH) wideColsIndexes.push(index) }) - console.log('+++smallColsIndexes', smallColsIndexes) console.log('+++wideColsIndexes', wideColsIndexes) } @@ -658,7 +659,6 @@ export const getCalculatedColumnWidths = (columns, containerWidth) => { console.log('++def', getColumnsMinWidths(columns)) console.log('++isDefaultsWiderThanContainer', isDefaultsWiderThanContainer) - const avgWidth = Math.floor(containerWidth / columns.length) if (avgWidth < MIN_COLUMN_WIDTH) { return _map(columns, () => MIN_COLUMN_WIDTH) } From a5d81d97a8c00c7d0efa25fcc1639873d009d8c3 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Tue, 23 Apr 2024 12:19:52 +0300 Subject: [PATCH 18/25] Add small/wide cols precalculation flow --- src/utils/columns.js | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/src/utils/columns.js b/src/utils/columns.js index d1844e418..d1fe6d9a5 100644 --- a/src/utils/columns.js +++ b/src/utils/columns.js @@ -3,6 +3,7 @@ import _map from 'lodash/map' import _sum from 'lodash/sum' import _size from 'lodash/size' import _head from 'lodash/head' +import _fill from 'lodash/fill' import _filter from 'lodash/filter' import _forEach from 'lodash/forEach' import { Cell } from '@blueprintjs/table' @@ -641,6 +642,8 @@ export const getCalculatedColumnWidths = (columns, containerWidth) => { const colsDefaults = getColumnsMinWidths(columns) let avgWidth = Math.floor(containerWidth / _size(columns)) const isDefaultsWiderThanContainer = getIsDefaultsWiderThanContainer(columns, containerWidth) + const preparedColsWidths = _fill(Array(_size(columns)), 0) + if (isDefaultsWiderThanContainer) { const smallColsIndexes = [] @@ -651,13 +654,19 @@ export const getCalculatedColumnWidths = (columns, containerWidth) => { if (value > WIDE_COLUMN_DEFAULT_WIDTH) wideColsIndexes.push(index) }) - console.log('+++smallColsIndexes', smallColsIndexes) - console.log('+++wideColsIndexes', wideColsIndexes) + _forEach(smallColsIndexes, (colIndex) => { preparedColsWidths[colIndex] = avgWidth * 0.5 }) + _forEach(wideColsIndexes, (colIndex) => { preparedColsWidths[colIndex] = avgWidth * 3 }) + + console.log('++avgWidth', avgWidth) + console.log('++preparedColsWidths', preparedColsWidths) + + // console.log('+++smallColsIndexes', smallColsIndexes) + // console.log('+++wideColsIndexes', wideColsIndexes) } - console.log('++def', getColumnsMinWidths(columns)) - console.log('++isDefaultsWiderThanContainer', isDefaultsWiderThanContainer) + // console.log('++def', getColumnsMinWidths(columns)) + // console.log('++isDefaultsWiderThanContainer', isDefaultsWiderThanContainer) if (avgWidth < MIN_COLUMN_WIDTH) { return _map(columns, () => MIN_COLUMN_WIDTH) From cab700e400f3154ac2eab8110a374363dcc482cb Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Tue, 23 Apr 2024 12:41:57 +0300 Subject: [PATCH 19/25] Implement columns widths adjustments flow --- src/utils/columns.js | 29 +++++++++++++++++------------ 1 file changed, 17 insertions(+), 12 deletions(-) diff --git a/src/utils/columns.js b/src/utils/columns.js index d1fe6d9a5..4b8297674 100644 --- a/src/utils/columns.js +++ b/src/utils/columns.js @@ -641,8 +641,10 @@ export const getCalculatedColumnWidths = (columns, containerWidth) => { const colsDefaults = getColumnsMinWidths(columns) let avgWidth = Math.floor(containerWidth / _size(columns)) + if (avgWidth < MIN_COLUMN_WIDTH) return _map(columns, () => MIN_COLUMN_WIDTH) + console.log('++avgWidth1', avgWidth) const isDefaultsWiderThanContainer = getIsDefaultsWiderThanContainer(columns, containerWidth) - const preparedColsWidths = _fill(Array(_size(columns)), 0) + let preparedColsWidths = _fill(Array(_size(columns)), 0) if (isDefaultsWiderThanContainer) { @@ -654,27 +656,30 @@ export const getCalculatedColumnWidths = (columns, containerWidth) => { if (value > WIDE_COLUMN_DEFAULT_WIDTH) wideColsIndexes.push(index) }) - _forEach(smallColsIndexes, (colIndex) => { preparedColsWidths[colIndex] = avgWidth * 0.5 }) - _forEach(wideColsIndexes, (colIndex) => { preparedColsWidths[colIndex] = avgWidth * 3 }) + _forEach(smallColsIndexes, (colIndex) => { preparedColsWidths[colIndex] = avgWidth * 0.7 }) + _forEach(wideColsIndexes, (colIndex) => { preparedColsWidths[colIndex] = avgWidth * 2 }) - console.log('++avgWidth', avgWidth) + const calculatedCols = _size(smallColsIndexes) + _size(wideColsIndexes) + + avgWidth = Math.floor((containerWidth - _sum(preparedColsWidths)) / (_size(columns) - calculatedCols)) + + _forEach(preparedColsWidths, (value, index) => { + if (isEqual(value, 0)) preparedColsWidths[index] = avgWidth + }) + + console.log('++avgWidth2', avgWidth) console.log('++preparedColsWidths', preparedColsWidths) // console.log('+++smallColsIndexes', smallColsIndexes) // console.log('+++wideColsIndexes', wideColsIndexes) - } - + } else preparedColsWidths = _map(columns, () => avgWidth) // console.log('++def', getColumnsMinWidths(columns)) // console.log('++isDefaultsWiderThanContainer', isDefaultsWiderThanContainer) - if (avgWidth < MIN_COLUMN_WIDTH) { - return _map(columns, () => MIN_COLUMN_WIDTH) - } - - const columnWidths = _map(columns, () => avgWidth) + // const columnWidths = _map(columns, () => avgWidth) - return columnWidths + return preparedColsWidths } export default { From 44faf5718b5cf4067456b8f7d0c7efbfa074689d Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Tue, 23 Apr 2024 12:49:11 +0300 Subject: [PATCH 20/25] Adjust small multiplier --- 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 4b8297674..671016a04 100644 --- a/src/utils/columns.js +++ b/src/utils/columns.js @@ -656,7 +656,7 @@ export const getCalculatedColumnWidths = (columns, containerWidth) => { if (value > WIDE_COLUMN_DEFAULT_WIDTH) wideColsIndexes.push(index) }) - _forEach(smallColsIndexes, (colIndex) => { preparedColsWidths[colIndex] = avgWidth * 0.7 }) + _forEach(smallColsIndexes, (colIndex) => { preparedColsWidths[colIndex] = avgWidth * 0.8 }) _forEach(wideColsIndexes, (colIndex) => { preparedColsWidths[colIndex] = avgWidth * 2 }) const calculatedCols = _size(smallColsIndexes) + _size(wideColsIndexes) From 24fc56223d6c673ad4f4253b7729f7ea8a071c7d Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Tue, 23 Apr 2024 13:15:37 +0300 Subject: [PATCH 21/25] Enhance average width calcs flow --- src/utils/columns.js | 64 +++++++++++++++----------------------------- 1 file changed, 22 insertions(+), 42 deletions(-) diff --git a/src/utils/columns.js b/src/utils/columns.js index 671016a04..1cb1aaceb 100644 --- a/src/utils/columns.js +++ b/src/utils/columns.js @@ -4,6 +4,7 @@ import _sum from 'lodash/sum' import _size from 'lodash/size' import _head from 'lodash/head' import _fill from 'lodash/fill' +import _floor from 'lodash/floor' import _filter from 'lodash/filter' import _forEach from 'lodash/forEach' import { Cell } from '@blueprintjs/table' @@ -624,60 +625,39 @@ 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 = 125 export const WIDE_COLUMN_DEFAULT_WIDTH = 400 export const DEFAULT_CONTAINER_WIDTH = 1000 export const getColumnsMinWidths = (columns) => _map(columns, (column) => COLUMN_WIDTHS?.[column.id] ?? MIN_COLUMN_WIDTH) -const getIsDefaultsWiderThanContainer = (columns, container) => _sum(getColumnsMinWidths(columns)) > container - - export const getCalculatedColumnWidths = (columns, containerWidth) => { if (_size(columns) === 0) { return [] } const colsDefaults = getColumnsMinWidths(columns) - let avgWidth = Math.floor(containerWidth / _size(columns)) - if (avgWidth < MIN_COLUMN_WIDTH) return _map(columns, () => MIN_COLUMN_WIDTH) - console.log('++avgWidth1', avgWidth) - const isDefaultsWiderThanContainer = getIsDefaultsWiderThanContainer(columns, containerWidth) - let preparedColsWidths = _fill(Array(_size(columns)), 0) - - - if (isDefaultsWiderThanContainer) { - const smallColsIndexes = [] - const wideColsIndexes = [] - - _forEach(colsDefaults, (value, index) => { - if (value < MIN_COLUMN_WIDTH) smallColsIndexes.push(index) - if (value > WIDE_COLUMN_DEFAULT_WIDTH) wideColsIndexes.push(index) - }) - - _forEach(smallColsIndexes, (colIndex) => { preparedColsWidths[colIndex] = avgWidth * 0.8 }) - _forEach(wideColsIndexes, (colIndex) => { preparedColsWidths[colIndex] = avgWidth * 2 }) - - const calculatedCols = _size(smallColsIndexes) + _size(wideColsIndexes) - - avgWidth = Math.floor((containerWidth - _sum(preparedColsWidths)) / (_size(columns) - calculatedCols)) - - _forEach(preparedColsWidths, (value, index) => { - if (isEqual(value, 0)) preparedColsWidths[index] = avgWidth - }) - - console.log('++avgWidth2', avgWidth) - console.log('++preparedColsWidths', preparedColsWidths) - - // console.log('+++smallColsIndexes', smallColsIndexes) - // console.log('+++wideColsIndexes', wideColsIndexes) - } else preparedColsWidths = _map(columns, () => avgWidth) - - // console.log('++def', getColumnsMinWidths(columns)) - // console.log('++isDefaultsWiderThanContainer', isDefaultsWiderThanContainer) - - // const columnWidths = _map(columns, () => avgWidth) + let avgWidth = _floor(containerWidth / _size(columns)) + if (avgWidth < MIN_COLUMN_WIDTH) avgWidth = MIN_COLUMN_WIDTH + const preparedColsWidths = _fill(Array(_size(columns)), 0) + const wideColsIndexes = [] + const smallColsIndexes = [] + + _forEach(colsDefaults, (value, index) => { + if (value < MIN_COLUMN_WIDTH) smallColsIndexes.push(index) + if (value > WIDE_COLUMN_DEFAULT_WIDTH) wideColsIndexes.push(index) + }) + _forEach(wideColsIndexes, (colIndex) => { preparedColsWidths[colIndex] = _floor(avgWidth * 2) }) + _forEach(smallColsIndexes, (colIndex) => { preparedColsWidths[colIndex] = _floor(avgWidth * 0.7) }) + + const calculatedCols = _size(smallColsIndexes) + _size(wideColsIndexes) + avgWidth = _floor((containerWidth - _sum(preparedColsWidths)) / (_size(columns) - calculatedCols)) + if (avgWidth < MIN_COLUMN_WIDTH) avgWidth = MIN_COLUMN_WIDTH + _forEach(preparedColsWidths, (value, index) => { if (isEqual(value, 0)) preparedColsWidths[index] = avgWidth }) + + console.log('++avgWidth2', avgWidth) + console.log('++preparedColsWidths', preparedColsWidths) return preparedColsWidths } From 000298019a0320debbcfbb2f6a31346b7c7e5447 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Tue, 23 Apr 2024 13:33:19 +0300 Subject: [PATCH 22/25] Cleanup --- src/utils/columns.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/utils/columns.js b/src/utils/columns.js index 1cb1aaceb..3a3b6e317 100644 --- a/src/utils/columns.js +++ b/src/utils/columns.js @@ -656,9 +656,6 @@ export const getCalculatedColumnWidths = (columns, containerWidth) => { if (avgWidth < MIN_COLUMN_WIDTH) avgWidth = MIN_COLUMN_WIDTH _forEach(preparedColsWidths, (value, index) => { if (isEqual(value, 0)) preparedColsWidths[index] = avgWidth }) - console.log('++avgWidth2', avgWidth) - console.log('++preparedColsWidths', preparedColsWidths) - return preparedColsWidths } From bb47b52bb60f37b985aac451d48c676d4c197143 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Wed, 24 Apr 2024 12:39:27 +0300 Subject: [PATCH 23/25] Optimize avg width calculation flow --- src/utils/columns.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/utils/columns.js b/src/utils/columns.js index 3a3b6e317..ecf341ad9 100644 --- a/src/utils/columns.js +++ b/src/utils/columns.js @@ -632,14 +632,17 @@ export const DEFAULT_CONTAINER_WIDTH = 1000 export const getColumnsMinWidths = (columns) => _map(columns, (column) => COLUMN_WIDTHS?.[column.id] ?? MIN_COLUMN_WIDTH) +export const getAverageWidth = (avgWidth) => (avgWidth < MIN_COLUMN_WIDTH + ? MIN_COLUMN_WIDTH + : avgWidth) + export const getCalculatedColumnWidths = (columns, containerWidth) => { if (_size(columns) === 0) { return [] } const colsDefaults = getColumnsMinWidths(columns) - let avgWidth = _floor(containerWidth / _size(columns)) - if (avgWidth < MIN_COLUMN_WIDTH) avgWidth = MIN_COLUMN_WIDTH + let avgWidth = getAverageWidth(_floor(containerWidth / _size(columns))) const preparedColsWidths = _fill(Array(_size(columns)), 0) const wideColsIndexes = [] const smallColsIndexes = [] @@ -652,8 +655,9 @@ export const getCalculatedColumnWidths = (columns, containerWidth) => { _forEach(smallColsIndexes, (colIndex) => { preparedColsWidths[colIndex] = _floor(avgWidth * 0.7) }) const calculatedCols = _size(smallColsIndexes) + _size(wideColsIndexes) - avgWidth = _floor((containerWidth - _sum(preparedColsWidths)) / (_size(columns) - calculatedCols)) - if (avgWidth < MIN_COLUMN_WIDTH) avgWidth = MIN_COLUMN_WIDTH + avgWidth = getAverageWidth( + _floor((containerWidth - _sum(preparedColsWidths)) / (_size(columns) - calculatedCols)), + ) _forEach(preparedColsWidths, (value, index) => { if (isEqual(value, 0)) preparedColsWidths[index] = avgWidth }) return preparedColsWidths From efb18bc9288e7f5ee675e29aed506f03099689c7 Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Wed, 24 Apr 2024 12:49:18 +0300 Subject: [PATCH 24/25] Adjust defaults --- src/utils/columns.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/utils/columns.js b/src/utils/columns.js index ecf341ad9..bfa534a26 100644 --- a/src/utils/columns.js +++ b/src/utils/columns.js @@ -58,7 +58,7 @@ const COLUMN_WIDTH_STANDARD = { marginFunding: 132, marginFundingType: 130, marginFundingPayment: 178, - moreDetails: 95, + moreDetails: 130, meta: 160, merchantName: 120, mobile: 90, @@ -88,7 +88,7 @@ const COLUMN_WIDTH_STANDARD = { side: 100, sellingAmount: 132, sellingWeightedPrice: 160, - status: 105, + status: 135, symbol: 92, swap: 132, time: 150, @@ -625,8 +625,8 @@ export const formatSumUpValue = value => { return parseFloat(value).toFixed(8).replace(/\d(?=(\d{3})+\.)/g, '$&,') } -export const MIN_COLUMN_WIDTH = 125 -export const WIDE_COLUMN_DEFAULT_WIDTH = 400 +export const MIN_COLUMN_WIDTH = 127 +export const WIDE_COLUMN_DEFAULT_WIDTH = 300 export const DEFAULT_CONTAINER_WIDTH = 1000 export const getColumnsMinWidths = (columns) => _map(columns, From 4046d1516c7c776f7b0920b25f14f81b9a0fc1be Mon Sep 17 00:00:00 2001 From: alexstotsky Date: Wed, 24 Apr 2024 15:59:38 +0300 Subject: [PATCH 25/25] Minor tweak --- src/utils/columns.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/utils/columns.js b/src/utils/columns.js index bfa534a26..55b990761 100644 --- a/src/utils/columns.js +++ b/src/utils/columns.js @@ -82,7 +82,7 @@ const COLUMN_WIDTH_STANDARD = { priceLiq: 132, priceSpot: 132, priceTrailing: 132, - rate: 120, + rate: 130, redirectUrl: 300, sale: 152, side: 100, @@ -625,7 +625,7 @@ export const formatSumUpValue = value => { return parseFloat(value).toFixed(8).replace(/\d(?=(\d{3})+\.)/g, '$&,') } -export const MIN_COLUMN_WIDTH = 127 +export const MIN_COLUMN_WIDTH = 125 export const WIDE_COLUMN_DEFAULT_WIDTH = 300 export const DEFAULT_CONTAINER_WIDTH = 1000