From c404db702d9a89e373f316dd19c215a6b2153eb1 Mon Sep 17 00:00:00 2001 From: Iris Scholten Date: Fri, 6 Apr 2018 17:42:57 -0700 Subject: [PATCH] Remove separate calculations of label and time column sizes and move sizing function to tableGraph.js --- ui/src/shared/components/TableGraph.js | 19 ----- ui/src/shared/constants/tableGraph.js | 98 +++++++++++++++++++------- ui/src/utils/timeSeriesTransformers.js | 85 +--------------------- 3 files changed, 73 insertions(+), 129 deletions(-) diff --git a/ui/src/shared/components/TableGraph.js b/ui/src/shared/components/TableGraph.js index f0303ed60..cd68a68ee 100644 --- a/ui/src/shared/components/TableGraph.js +++ b/ui/src/shared/components/TableGraph.js @@ -22,8 +22,6 @@ import { DEFAULT_SORT, FIX_FIRST_COLUMN_DEFAULT, VERTICAL_TIME_AXIS_DEFAULT, - calculateTimeColumnWidth, - calculateLabelsColumnWidth, } from 'src/shared/constants/tableGraph' import {generateThresholdsListHexs} from 'shared/constants/colorOperations' @@ -69,13 +67,6 @@ class TableGraph extends Component { setDataLabels, } = nextProps - if (timeFormat !== this.props.tableOptions.timeFormat) { - this.setState({ - timeColumnWidth: calculateTimeColumnWidth(timeFormat), - }) - this.multiGridRef.forceUpdateGrids() - } - if (setDataLabels) { setDataLabels(labels) } @@ -106,15 +97,6 @@ class TableGraph extends Component { timeFormat ) - const processedLabels = verticalTimeAxis - ? processedData[0] - : processedData.map(row => row[0]) - - const labelsColumnWidth = calculateLabelsColumnWidth( - processedLabels, - fieldNames - ) - this.setState({ data, labels, @@ -122,7 +104,6 @@ class TableGraph extends Component { sortedTimeVals, sortField: sortFieldName, sortDirection: direction, - labelsColumnWidth, columnWidths, totalColumnWidths: totalWidths, }) diff --git a/ui/src/shared/constants/tableGraph.js b/ui/src/shared/constants/tableGraph.js index ac6f5cb40..43b4abb12 100644 --- a/ui/src/shared/constants/tableGraph.js +++ b/ui/src/shared/constants/tableGraph.js @@ -63,34 +63,80 @@ export const calculateTimeColumnWidth = timeFormat => { return width + CELL_HORIZONTAL_PADDING } -export const calculateLabelsColumnWidth = (labels, fieldNames) => { - if (!labels) { - return - } - if (fieldNames.length === 1) { - const longestLabel = labels.reduce((a, b) => (a.length > b.length ? a : b)) - const {width} = calculateSize(longestLabel, { - font: '"RobotoMono", monospace', - fontSize: '13px', - fontWeight: 'bold', - }) +const updateMaxWidths = ( + row, + maxColumnWidths, + topRow, + isTopRow, + fieldNames, + timeFormatWidth, + verticalTimeAxis +) => { + return reduce( + row, + (acc, col, c) => { + const isLabel = + (verticalTimeAxis && isTopRow) || (!verticalTimeAxis && c === 0) - return width + CELL_HORIZONTAL_PADDING - } + const foundField = isLabel + ? fieldNames.find(field => field.internalName === col) + : undefined + const colValue = + foundField && foundField.displayName ? foundField.displayName : `${col}` + const columnLabel = topRow[c] - const longestFieldName = fieldNames - .map(fieldName => { - return fieldName.displayName - ? fieldName.displayName - : fieldName.internalName - }) - .reduce((a, b) => (a.length > b.length ? a : b)) + const useTimeWidth = + (columnLabel === TIME_FIELD_DEFAULT.internalName && + verticalTimeAxis && + !isTopRow) || + (!verticalTimeAxis && + isTopRow && + topRow[0] === TIME_FIELD_DEFAULT.internalName && + c !== 0) - const {width} = calculateSize(longestFieldName, { - font: '"RobotoMono", monospace', - fontSize: '13px', - fontWeight: 'bold', - }) + const currentWidth = useTimeWidth + ? timeFormatWidth + : calculateSize(colValue, { + font: isLabel ? '"Roboto"' : '"RobotoMono", monospace', + fontSize: '13px', + fontWeight: 'bold', + }).width + CELL_HORIZONTAL_PADDING - return width + CELL_HORIZONTAL_PADDING + const {widths: maxWidths} = maxColumnWidths + const maxWidth = _.get(maxWidths, `${columnLabel}`, 0) + + if (isTopRow || currentWidth > maxWidth) { + acc.widths[columnLabel] = currentWidth + acc.totalWidths += currentWidth - maxWidth + } + return acc + }, + {...maxColumnWidths} + ) +} + +export const calculateColumnWidths = ( + data, + fieldNames, + timeFormat, + verticalTimeAxis +) => { + const timeFormatWidth = calculateTimeColumnWidth( + timeFormat === '' ? new Date().toISOString() : timeFormat + ) + return reduce( + data, + (acc, row, r) => { + return updateMaxWidths( + row, + acc, + data[0], + r === 0, + fieldNames, + timeFormatWidth, + verticalTimeAxis + ) + }, + {widths: {}, totalWidths: 0} + ) } diff --git a/ui/src/utils/timeSeriesTransformers.js b/ui/src/utils/timeSeriesTransformers.js index eaad5be16..7861ab72c 100644 --- a/ui/src/utils/timeSeriesTransformers.js +++ b/ui/src/utils/timeSeriesTransformers.js @@ -1,12 +1,7 @@ import _ from 'lodash' import {shiftDate} from 'shared/query/helpers' import {map, reduce, filter, forEach, concat, clone} from 'fast.js' -import calculateSize from 'calculate-size' -import { - CELL_HORIZONTAL_PADDING, - calculateTimeColumnWidth, - TIME_FIELD_DEFAULT, -} from 'src/shared/constants/tableGraph' +import {calculateColumnWidths} from 'src/shared/constants/tableGraph' /** * Accepts an array of raw influxdb responses and returns a format @@ -204,84 +199,6 @@ export const filterTableColumns = (data, fieldNames) => { return filteredData[0].length ? filteredData : [[]] } -const updateMaxWidths = ( - row, - maxColumnWidths, - topRow, - isTopRow, - fieldNames, - timeFormatWidth, - verticalTimeAxis -) => { - return reduce( - row, - (acc, col, c) => { - const isLabel = - (verticalTimeAxis && isTopRow) || (!verticalTimeAxis && c === 0) - - const foundField = isLabel - ? fieldNames.find(field => field.internalName === col) - : undefined - const colValue = - foundField && foundField.displayName ? foundField.displayName : `${col}` - const columnLabel = topRow[c] - - const useTimeWidth = - (columnLabel === TIME_FIELD_DEFAULT.internalName && - verticalTimeAxis && - !isTopRow) || - (!verticalTimeAxis && - isTopRow && - topRow[0] === TIME_FIELD_DEFAULT.internalName && - c !== 0) - - const currentWidth = useTimeWidth - ? timeFormatWidth - : calculateSize(colValue, { - font: isLabel ? '"Roboto"' : '"RobotoMono", monospace', - fontSize: '13px', - fontWeight: 'bold', - }).width + CELL_HORIZONTAL_PADDING - - const {widths: maxWidths} = maxColumnWidths - const maxWidth = _.get(maxWidths, `${columnLabel}`, 0) - - if (isTopRow || currentWidth > maxWidth) { - acc.widths[columnLabel] = currentWidth - acc.totalWidths += currentWidth - maxWidth - } - return acc - }, - {...maxColumnWidths} - ) -} - -const calculateColumnWidths = ( - data, - fieldNames, - timeFormat, - verticalTimeAxis -) => { - const timeFormatWidth = calculateTimeColumnWidth( - timeFormat === '' ? new Date().toISOString() : timeFormat - ) - return reduce( - data, - (acc, row, r) => { - return updateMaxWidths( - row, - acc, - data[0], - r === 0, - fieldNames, - timeFormatWidth, - verticalTimeAxis - ) - }, - {widths: {}, totalWidths: 0} - ) -} - export const processTableData = ( data, sortFieldName,