From 066df2825709c189d33369b25ddbaad6f906bad1 Mon Sep 17 00:00:00 2001 From: "a.bouhuolia" Date: Sat, 29 Jan 2022 21:32:20 +0200 Subject: [PATCH] fix(BalanceSheet): columns width based in cells contents. --- .../FinancialStatements/BalanceSheet/utils.js | 43 ++++++++++---- .../ProfitLossSheet/utils.js | 57 ++++++++++++------- src/style/components/DataTable/DataTable.scss | 2 +- src/utils/index.js | 2 + 4 files changed, 69 insertions(+), 35 deletions(-) diff --git a/src/containers/FinancialStatements/BalanceSheet/utils.js b/src/containers/FinancialStatements/BalanceSheet/utils.js index d22ee2aec..33bb72e01 100644 --- a/src/containers/FinancialStatements/BalanceSheet/utils.js +++ b/src/containers/FinancialStatements/BalanceSheet/utils.js @@ -10,6 +10,15 @@ const getTableCellValueAccessor = (index) => `cells[${index}].value`; const Align = { Left: 'left', Right: 'right', Center: 'center' }; +const getReportColWidth = (data, accessor, headerText) => { + return getColumnWidth( + data, + accessor, + { magicSpacing: 10, minWidth: 100 }, + headerText, + ); +}; + /** * * @returns @@ -45,6 +54,7 @@ export const getBalanceSheetHeaderValidationSchema = () => */ const accountNameMapper = R.curry((data, column) => { const accessor = getTableCellValueAccessor(column.cell_index); + const width = getReportColWidth(data, accessor, column.label); return { key: column.key, @@ -52,7 +62,7 @@ const accountNameMapper = R.curry((data, column) => { accessor, className: column.key, textOverview: true, - width: getColumnWidth(data, accessor, { magicSpacing: 10, minWidth: 240 }), + width, }; }); @@ -82,7 +92,7 @@ const dateRangeSoloColumnAttrs = (data, column) => { return { accessor, - width: getColumnWidth(data, accessor, { magicSpacing: 10, minWidth: 100 }), + width: getReportColWidth(data, accessor), }; }; @@ -117,6 +127,7 @@ const dateRangeMapper = R.curry((data, column) => { const totalMapper = R.curry((data, column) => { const hasChildren = !isEmpty(column.children); const accessor = getTableCellValueAccessor(column.cell_index); + const width = getReportColWidth(data, accessor, column.label); const columnAccessor = { key: column.key, @@ -124,9 +135,9 @@ const totalMapper = R.curry((data, column) => { accessor, textOverview: true, Cell: CellTextSpan, - width: getColumnWidth(data, accessor, { magicSpacing: 10, minWidth: 200 }), + width, disableSortBy: true, - align: hasChildren ? 'center' : 'right', + align: hasChildren ? Align.Center : Align.Left, }; return R.compose( R.when(R.always(hasChildren), assocColumnsToTotalColumn(data, column)), @@ -138,12 +149,13 @@ const totalMapper = R.curry((data, column) => { */ const percentageOfColumnAccessor = R.curry((data, column) => { const accessor = getTableCellValueAccessor(column.cell_index); + const width = getReportColWidth(data, accessor, column.label); return { Header: column.label, key: column.key, accessor, - width: getColumnWidth(data, accessor, { magicSpacing: 10, minWidth: 100 }), + width, align: Align.Right, disableSortBy: true, textOverview: true, @@ -155,12 +167,13 @@ const percentageOfColumnAccessor = R.curry((data, column) => { */ const percentageOfRowAccessor = R.curry((data, column) => { const accessor = getTableCellValueAccessor(column.cell_index); + const width = getReportColWidth(data, accessor, column.label); return { Header: column.label, key: column.key, accessor, - width: getColumnWidth(data, accessor, { magicSpacing: 10, minWidth: 100 }), + width, align: Align.Right, disableSortBy: true, textOverview: true, @@ -172,12 +185,13 @@ const percentageOfRowAccessor = R.curry((data, column) => { */ const previousYearAccessor = R.curry((data, column) => { const accessor = getTableCellValueAccessor(column.cell_index); + const width = getReportColWidth(data, accessor, column.label); return { Header: column.label, key: column.key, accessor, - width: getColumnWidth(data, accessor, { magicSpacing: 10, minWidth: 100 }), + width, align: Align.Right, disableSortBy: true, textOverview: true, @@ -189,12 +203,13 @@ const previousYearAccessor = R.curry((data, column) => { */ const previousYearChangeAccessor = R.curry((data, column) => { const accessor = getTableCellValueAccessor(column.cell_index); + const width = getReportColWidth(data, accessor, column.label); return { Header: column.label, key: column.key, accessor, - width: getColumnWidth(data, accessor, { magicSpacing: 10, minWidth: 100 }), + width, align: Align.Right, disableSortBy: true, textOverview: true, @@ -206,12 +221,13 @@ const previousYearChangeAccessor = R.curry((data, column) => { */ const previousYearPercentageAccessor = R.curry((data, column) => { const accessor = getTableCellValueAccessor(column.cell_index); + const width = getReportColWidth(data, accessor, column.label); return { Header: column.label, key: column.key, accessor, - width: getColumnWidth(data, accessor, { magicSpacing: 10, minWidth: 100 }), + width, align: Align.Right, disableSortBy: true, textOverview: true, @@ -223,12 +239,13 @@ const previousYearPercentageAccessor = R.curry((data, column) => { */ const previousPeriodAccessor = R.curry((data, column) => { const accessor = getTableCellValueAccessor(column.cell_index); + const width = getReportColWidth(data, accessor, column.label); return { Header: column.label, key: column.key, accessor, - width: getColumnWidth(data, accessor, { magicSpacing: 10, minWidth: 100 }), + width, align: Align.Right, disableSortBy: true, textOverview: true, @@ -240,12 +257,13 @@ const previousPeriodAccessor = R.curry((data, column) => { */ const previousPeriodChangeAccessor = R.curry((data, column) => { const accessor = getTableCellValueAccessor(column.cell_index); + const width = getReportColWidth(data, accessor, column.label); return { Header: column.label, key: column.key, accessor, - width: getColumnWidth(data, accessor, { magicSpacing: 10, minWidth: 100 }), + width, align: Align.Right, disableSortBy: true, textOverview: true, @@ -257,12 +275,13 @@ const previousPeriodChangeAccessor = R.curry((data, column) => { */ const previousPeriodPercentageAccessor = R.curry((data, column) => { const accessor = getTableCellValueAccessor(column.cell_index); + const width = getReportColWidth(data, accessor, column.label); return { Header: column.label, key: column.key, accessor, - width: getColumnWidth(data, accessor, { magicSpacing: 10, minWidth: 100 }), + width, align: Align.Right, disableSortBy: true, textOverview: true, diff --git a/src/containers/FinancialStatements/ProfitLossSheet/utils.js b/src/containers/FinancialStatements/ProfitLossSheet/utils.js index b0d42cc5d..67644edca 100644 --- a/src/containers/FinancialStatements/ProfitLossSheet/utils.js +++ b/src/containers/FinancialStatements/ProfitLossSheet/utils.js @@ -6,8 +6,13 @@ import { getColumnWidth } from 'utils'; const Align = { Left: 'left', Right: 'right', Center: 'center' }; const getTableCellValueAccessor = (index) => `cells[${index}].value`; -const getReportColWidth = (data, accessor) => { - return getColumnWidth(data, accessor, { magicSpacing: 10, minWidth: 100 }); +const getReportColWidth = (data, accessor, labelText) => { + return getColumnWidth( + data, + accessor, + { magicSpacing: 10, minWidth: 100 }, + labelText, + ); }; const isNodeHasChildren = (node) => !isEmpty(node.children); @@ -17,12 +22,13 @@ const isNodeHasChildren = (node) => !isEmpty(node.children); */ const percentageOfIncomeAccessor = R.curry((data, column) => { const accessor = getTableCellValueAccessor(column.cell_index); + const width = getReportColWidth(data, accessor, column.label); return { Header: column.label, key: column.key, accessor, - width: getReportColWidth(data, accessor), + width, align: Align.Right, disableSortBy: true, textOverview: true, @@ -34,12 +40,13 @@ const percentageOfIncomeAccessor = R.curry((data, column) => { */ const percentageOfExpenseAccessor = R.curry((data, column) => { const accessor = getTableCellValueAccessor(column.cell_index); + const width = getReportColWidth(data, accessor, column.label); return { Header: column.label, key: column.key, accessor, - width: getReportColWidth(data, accessor), + width, align: Align.Right, disableSortBy: true, textOverview: true, @@ -51,12 +58,13 @@ const percentageOfExpenseAccessor = R.curry((data, column) => { */ const percentageOfColumnAccessor = R.curry((data, column) => { const accessor = getTableCellValueAccessor(column.cell_index); + const width = getReportColWidth(data, accessor, column.label); return { Header: column.label, key: column.key, accessor, - width: getReportColWidth(data, accessor), + width, align: Align.Right, disableSortBy: true, textOverview: true, @@ -68,12 +76,13 @@ const percentageOfColumnAccessor = R.curry((data, column) => { */ const percentageOfRowAccessor = R.curry((data, column) => { const accessor = getTableCellValueAccessor(column.cell_index); + const width = getReportColWidth(data, accessor, column.label); return { Header: column.label, key: column.key, accessor, - width: getReportColWidth(data, accessor), + width, align: Align.Right, disableSortBy: true, textOverview: true, @@ -85,12 +94,13 @@ const percentageOfRowAccessor = R.curry((data, column) => { */ const previousYearAccessor = R.curry((data, column) => { const accessor = getTableCellValueAccessor(column.cell_index); + const width = getReportColWidth(data, accessor, column.label); return { Header: column.label, key: column.key, accessor, - width: getReportColWidth(data, accessor), + width, align: Align.Right, disableSortBy: true, textOverview: true, @@ -102,12 +112,13 @@ const previousYearAccessor = R.curry((data, column) => { */ const previousYearChangeAccessor = R.curry((data, column) => { const accessor = getTableCellValueAccessor(column.cell_index); + const width = getReportColWidth(data, accessor, column.label); return { Header: column.label, key: column.key, accessor, - width: getReportColWidth(data, accessor), + width, align: Align.Right, disableSortBy: true, textOverview: true, @@ -119,12 +130,13 @@ const previousYearChangeAccessor = R.curry((data, column) => { */ const previousYearPercentageAccessor = R.curry((data, column) => { const accessor = getTableCellValueAccessor(column.cell_index); + const width = getReportColWidth(data, accessor, column.label); return { Header: column.label, key: column.key, accessor, - width: getReportColWidth(data, accessor), + width, align: Align.Right, disableSortBy: true, textOverview: true, @@ -136,12 +148,13 @@ const previousYearPercentageAccessor = R.curry((data, column) => { */ const previousPeriodAccessor = R.curry((data, column) => { const accessor = getTableCellValueAccessor(column.cell_index); + const width = getReportColWidth(data, accessor, column.label); return { Header: column.label, key: column.key, accessor, - width: getReportColWidth(data, accessor), + width, align: Align.Right, disableSortBy: true, textOverview: true, @@ -153,12 +166,13 @@ const previousPeriodAccessor = R.curry((data, column) => { */ const previousPeriodChangeAccessor = R.curry((data, column) => { const accessor = getTableCellValueAccessor(column.cell_index); + const width = getReportColWidth(data, accessor, column.label); return { Header: column.label, key: column.key, accessor, - width: getReportColWidth(data, accessor), + width, align: Align.Right, disableSortBy: true, textOverview: true, @@ -170,12 +184,13 @@ const previousPeriodChangeAccessor = R.curry((data, column) => { */ const previousPeriodPercentageAccessor = R.curry((data, column) => { const accessor = getTableCellValueAccessor(column.cell_index); + const width = getReportColWidth(data, accessor, column.label); return { Header: column.label, key: column.key, accessor, - width: getReportColWidth(data, accessor), + width, align: Align.Right, disableSortBy: true, textOverview: true, @@ -196,10 +211,7 @@ const totalColumnsMapper = R.curry((data, column) => { R.pathEq(['key'], 'percentage_column'), percentageOfColumnAccessor(data), ), - R.when( - R.pathEq(['key'], 'percentage_row'), - percentageOfRowAccessor(data), - ), + R.when(R.pathEq(['key'], 'percentage_row'), percentageOfRowAccessor(data)), R.when( R.pathEq(['key'], 'percentage_income'), percentageOfIncomeAccessor(data), @@ -253,6 +265,7 @@ const assocColumnsToTotalColumn = R.curry((data, column, columnAccessor) => { const totalColumn = R.curry((data, column) => { const hasChildren = isNodeHasChildren(column); const accessor = getTableCellValueAccessor(column.cell_index); + const width = getReportColWidth(data, accessor, column.label); return { key: column.key, @@ -260,7 +273,7 @@ const totalColumn = R.curry((data, column) => { accessor, textOverview: true, Cell: CellTextSpan, - width: getColumnWidth(data, accessor, { magicSpacing: 10, minWidth: 200 }), + width, disableSortBy: true, align: hasChildren ? 'center' : 'right', }; @@ -283,6 +296,7 @@ const totalColumnCompose = R.curry((data, column) => { */ const accountNameColumn = R.curry((data, column) => { const accessor = getTableCellValueAccessor(column.cell_index); + const width = getReportColWidth(data, accessor, column.label); return { key: column.key, @@ -290,18 +304,17 @@ const accountNameColumn = R.curry((data, column) => { accessor, className: column.key, textOverview: true, - width: getReportColWidth(data, accessor), + width, }; }); - /** * * @param {*} data * @param {*} column * @returns */ - const dateRangeSoloColumnAttrs = (data, column) => { +const dateRangeSoloColumnAttrs = (data, column) => { const accessor = getTableCellValueAccessor(column.cell_index); return { @@ -330,12 +343,12 @@ const dateRangeColumn = R.curry((data, column) => { R.mergeLeft(dateRangeSoloColumnAttrs(data, column)), ), )(columnAccessor); -}) +}); /** * Detarmines the given string starts with `date-range` string. */ - const isMatchesDateRange = (r) => R.match(/^date-range/g, r).length > 0; +const isMatchesDateRange = (r) => R.match(/^date-range/g, r).length > 0; /** * diff --git a/src/style/components/DataTable/DataTable.scss b/src/style/components/DataTable/DataTable.scss index a2c396075..0306567bb 100644 --- a/src/style/components/DataTable/DataTable.scss +++ b/src/style/components/DataTable/DataTable.scss @@ -364,7 +364,7 @@ .table--constrant { .table { .thead{ - .tr:first-of-type{ + .tr:first-of-type .th{ border-top: 1px solid #000000; } } diff --git a/src/utils/index.js b/src/utils/index.js index 945a41c09..d1957f2df 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -439,9 +439,11 @@ export const getColumnWidth = ( rows, accessor, { maxWidth, minWidth, magicSpacing = 14 }, + headerText = '' ) => { const cellLength = Math.max( ...rows.map((row) => (`${_.get(row, accessor)}` || '').length), + headerText.length ); let result = cellLength * magicSpacing;