Influxdata
/
chronograf
mirror of https://github.com/influxdata/chronograf.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Remove separate calculations of label and time column sizes and move sizing function to tableGraph.js

pull/3151/head
Iris Scholten 2018-04-06 17:42:57 -07:00
parent 14fc97e2f5
commit c404db702d
3 changed files with 73 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
ui/src/shared/components/TableGraph.js
View File

@ -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,
})

98
ui/src/shared/constants/tableGraph.js
View File

@ -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}
)
}

85
ui/src/utils/timeSeriesTransformers.js
View File

@ -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,