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

Move transformTableData to utils/tableGraph and rename it from processedTableData, Also combine sort field and direction

pull/10616/head
ebb-tide 2018-04-23 18:32:19 -07:00
parent 3b32ab98bc
commit 34323908b6
5 changed files with 105 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
ui/src/dashboards/utils/tableGraph.ts
View File

@ -1,6 +1,6 @@
import calculateSize from 'calculate-size'
import _ from 'lodash'
import {reduce} from 'fast.js'
import {map, reduce, filter} from 'fast.js'
import {
CELL_HORIZONTAL_PADDING,
@ -124,3 +124,50 @@ export const calculateColumnWidths = (
{widths: {}, totalWidths: 0}
)
}
export const filterTableColumns = (data, fieldNames) => {
const visibility = {}
const filteredData = map(data, (row, i) => {
return filter(row, (col, j) => {
if (i === 0) {
const foundField = fieldNames.find(field => field.internalName === col)
visibility[j] = foundField ? foundField.visible : true
}
return visibility[j]
})
})
return filteredData[0].length ? filteredData : [[]]
}
export const orderTableColumns = (data, fieldNames) => {
const fieldsSortOrder = fieldNames.map(fieldName => {
return _.findIndex(data[0], dataLabel => {
return dataLabel === fieldName.internalName
})
})
const filteredFieldSortOrder = filter(fieldsSortOrder, f => f !== -1)
const orderedData = map(data, row => {
return row.map((v, j, arr) => arr[filteredFieldSortOrder[j]] || v)
})
return orderedData[0].length ? orderedData : [[]]
}
export const transformTableData = (data, sort, fieldNames, tableOptions) => {
const {verticalTimeAxis, timeFormat} = tableOptions
const sortIndex = _.indexOf(data[0], sort.field)
const sortedData = [
data[0],
..._.orderBy(_.drop(data, 1), sortIndex, [sort.direction]),
]
const sortedTimeVals = map(sortedData, r => r[0])
const filteredData = filterTableColumns(sortedData, fieldNames)
const orderedData = orderTableColumns(filteredData, fieldNames)
const transformedData = verticalTimeAxis ? orderedData : _.unzip(orderedData)
const {widths: columnWidths, totalWidths} = calculateColumnWidths(
transformedData,
fieldNames,
timeFormat,
verticalTimeAxis
)
return {transformedData, sortedTimeVals, columnWidths, totalWidths}
}

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

@ -11,11 +11,11 @@ import {reduce} from 'fast.js'
const {arrayOf, bool, shape, string, func} = PropTypes
import {timeSeriesToTableGraph} from 'src/utils/timeSeriesTransformers'
import {
timeSeriesToTableGraph,
processTableData,
} from 'src/utils/timeSeriesTransformers'
import {computeFieldNames} from 'src/dashboards/utils/tableGraph'
computeFieldNames,
transformTableData,
} from 'src/dashboards/utils/tableGraph'
import {updateTableOptions} from 'src/dashboards/actions/cellEditorOverlay'
import {
@ -25,7 +25,7 @@ import {
TIME_FIELD_DEFAULT,
ASCENDING,
DESCENDING,
DEFAULT_SORT,
DEFAULT_SORT_DIRECTION,
FIX_FIRST_COLUMN_DEFAULT,
VERTICAL_TIME_AXIS_DEFAULT,
} from 'src/shared/constants/tableGraph'
@ -44,15 +44,15 @@ class TableGraph extends Component {
['tableOptions', 'sortBy', 'internalName'],
TIME_FIELD_DEFAULT.internalName
)
this.state = {
data: [[]],
processedData: [[]],
transformedData: [[]],
sortedTimeVals: [],
sortedLabels: [],
hoveredColumnIndex: NULL_ARRAY_INDEX,
hoveredRowIndex: NULL_ARRAY_INDEX,
sortField,
sortDirection: DEFAULT_SORT,
sort: {field: sortField, direction: DEFAULT_SORT_DIRECTION},
columnWidths: {},
totalColumnWidths: 0,
}
@ -70,9 +70,7 @@ class TableGraph extends Component {
const updatedProps = _.keys(nextProps).filter(
k => !_.isEqual(this.props[k], nextProps[k])
)
const {sortField, sortDirection} = this.state
const {tableOptions} = nextProps
const {sortBy: {internalName}} = tableOptions
let result = {}
@ -92,16 +90,18 @@ class TableGraph extends Component {
return
}
let direction, sortFieldName
const {sort} = this.state
const internalName = _.get(
nextProps,
['tableOptions', 'sortBy', 'internalName'],
''
)
if (
_.get(this.props, ['tableOptions', 'sortBy', 'internalName'], '') ===
!_.get(this.props, ['tableOptions', 'sortBy', 'internalName'], '') ===
internalName
) {
direction = sortDirection
sortFieldName = sortField
} else {
direction = DEFAULT_SORT
sortFieldName = internalName
sort.direction = DEFAULT_SORT_DIRECTION
sort.field = internalName
}
if (
@ -109,25 +109,18 @@ class TableGraph extends Component {
_.includes(updatedProps, 'tableOptions')
) {
const {
processedData,
transformedData,
sortedTimeVals,
columnWidths,
totalWidths,
} = processTableData(
data,
sortFieldName,
direction,
fieldNames,
tableOptions
)
} = transformTableData(data, sort, fieldNames, tableOptions)
this.setState({
data,
sortedLabels,
processedData,
transformedData,
sortedTimeVals,
sortField: sortFieldName,
sortDirection: direction,
sort,
columnWidths,
totalColumnWidths: totalWidths,
})
@ -201,10 +194,10 @@ class TableGraph extends Component {
if (fieldName === sortField) {
direction = sortDirection === ASCENDING ? DESCENDING : ASCENDING
} else {
direction = DEFAULT_SORT
direction = DEFAULT_SORT_DIRECTION
}
const {processedData, sortedTimeVals} = processTableData(
const {transformedData, sortedTimeVals} = transformTableData(
data,
fieldName,
direction,
@ -214,7 +207,7 @@ class TableGraph extends Component {
)
this.setState({
processedData,
transformedData,
sortedTimeVals,
sortField: fieldName,
sortDirection: direction,
@ -224,9 +217,9 @@ class TableGraph extends Component {
calculateColumnWidth = columnSizerWidth => column => {
const {index} = column
const {tableOptions: {fixFirstColumn}} = this.props
const {processedData, columnWidths, totalColumnWidths} = this.state
const columnCount = _.get(processedData, ['0', 'length'], 0)
const columnLabel = processedData[0][index]
const {transformedData, columnWidths, totalColumnWidths} = this.state
const columnCount = _.get(transformedData, ['0', 'length'], 0)
const columnLabel = transformedData[0][index]
let adjustedColumnSizerWidth = columnWidths[columnLabel]
@ -252,7 +245,7 @@ class TableGraph extends Component {
const {
hoveredColumnIndex,
hoveredRowIndex,
processedData,
transformedData,
sortField,
sortDirection,
} = this.state
@ -265,7 +258,7 @@ class TableGraph extends Component {
fieldNames = [TIME_FIELD_DEFAULT],
} = tableOptions
const cellData = processedData[rowIndex][columnIndex]
const cellData = transformedData[rowIndex][columnIndex]
const timeFieldIndex = fieldNames.findIndex(
field => field.internalName === TIME_FIELD_DEFAULT.internalName
@ -357,12 +350,12 @@ class TableGraph extends Component {
timeColumnWidth,
sortField,
sortDirection,
processedData,
transformedData,
} = this.state
const {hoverTime, tableOptions, colors} = this.props
const {fixFirstColumn = FIX_FIRST_COLUMN_DEFAULT} = tableOptions
const columnCount = _.get(processedData, ['0', 'length'], 0)
const rowCount = columnCount === 0 ? 0 : processedData.length
const columnCount = _.get(transformedData, ['0', 'length'], 0)
const rowCount = columnCount === 0 ? 0 : transformedData.length
const COLUMN_MIN_WIDTH = 100
const COLUMN_MAX_WIDTH = 1000

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

@ -13,7 +13,7 @@ export const TIME_FIELD_DEFAULT = {
export const ASCENDING = 'asc'
export const DESCENDING = 'desc'
export const DEFAULT_SORT = ASCENDING
export const DEFAULT_SORT_DIRECTION = ASCENDING
export const FIX_FIRST_COLUMN_DEFAULT = true
export const VERTICAL_TIME_AXIS_DEFAULT = true

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

@ -1,7 +1,6 @@
import _ from 'lodash'
import {shiftDate} from 'shared/query/helpers'
import {map, reduce, filter, forEach, concat, clone} from 'fast.js'
import {calculateColumnWidths} from 'src/dashboards/utils/tableGraph'
import {map, reduce, forEach, concat, clone} from 'fast.js'
import {groupByTimeSeriesTransform} from 'src/utils/groupBy.js'
/**
@ -173,12 +172,6 @@ export const timeSeriesToDygraph = (raw = [], isInDataExplorer) => {
}
}
const hasGroupBy = queryASTs => {
return queryASTs.some(queryAST => {
return _.get(queryAST, ['groupBy', 'tags'], false)
})
}
const computeGroupBys = queryASTs => {
return queryASTs.map(queryAST => {
return _.get(queryAST, ['groupBy', 'tags'], false)
@ -201,57 +194,4 @@ export const timeSeriesToTableGraph = (raw, queryASTs) => {
}
}
export const filterTableColumns = (data, fieldNames) => {
const visibility = {}
const filteredData = map(data, (row, i) => {
return filter(row, (col, j) => {
if (i === 0) {
const foundField = fieldNames.find(field => field.internalName === col)
visibility[j] = foundField ? foundField.visible : true
}
return visibility[j]
})
})
return filteredData[0].length ? filteredData : [[]]
}
export const orderTableColumns = (data, fieldNames) => {
const fieldsSortOrder = fieldNames.map(fieldName => {
return _.findIndex(data[0], dataLabel => {
return dataLabel === fieldName.internalName
})
})
const filteredFieldSortOrder = filter(fieldsSortOrder, f => f !== -1)
const orderedData = map(data, row => {
return row.map((v, j, arr) => arr[filteredFieldSortOrder[j]])
})
return orderedData[0].length ? orderedData : [[]]
}
export const processTableData = (
data,
sortFieldName,
direction,
fieldNames,
tableOptions
) => {
const {verticalTimeAxis, timeFormat} = tableOptions
const sortIndex = _.indexOf(data[0], sortFieldName)
const sortedData = [
data[0],
..._.orderBy(_.drop(data, 1), sortIndex, [direction]),
]
const sortedTimeVals = map(sortedData, r => r[0])
const filteredData = filterTableColumns(sortedData, fieldNames)
const orderedData = orderTableColumns(filteredData, fieldNames)
const processedData = verticalTimeAxis ? orderedData : _.unzip(orderedData)
const {widths: columnWidths, totalWidths} = calculateColumnWidths(
processedData,
fieldNames,
timeFormat,
verticalTimeAxis
)
return {processedData, sortedTimeVals, columnWidths, totalWidths}
}
export default timeSeriesToDygraph

42
ui/test/utils/timeSeriesTransformers.test.js
View File

@ -1,9 +1,13 @@
import timeSeriesToDygraph, {
timeSeriesToTableGraph,
filterTableColumns,
processTableData,
} from 'src/utils/timeSeriesTransformers'
import {DEFAULT_SORT} from 'src/shared/constants/tableGraph'
import {
filterTableColumns,
transformTableData,
} from 'src/dashboards/utils/tableGraph'
import {DEFAULT_SORT_DIRECTION} from 'src/shared/constants/tableGraph'
describe('timeSeriesToDygraph', () => {
it('parses a raw InfluxDB response into a dygraph friendly data format', () => {
@ -518,7 +522,7 @@ describe('filterTableColumns', () => {
})
})
describe('processTableData', () => {
describe('transformTableData', () => {
it('sorts the data based on the provided sortFieldName', () => {
const data = [
['time', 'f1', 'f2'],
@ -527,7 +531,7 @@ describe('processTableData', () => {
[3000, 2000, 1000],
]
const sortFieldName = 'f1'
const direction = DEFAULT_SORT
const direction = DEFAULT_SORT_DIRECTION
const verticalTimeAxis = true
const fieldNames = [
@ -536,7 +540,7 @@ describe('processTableData', () => {
{internalName: 'f2', displayName: 'F2', visible: true},
]
const actual = processTableData(
const actual = transformTableData(
data,
sortFieldName,
direction,
@ -550,7 +554,7 @@ describe('processTableData', () => {
[1000, 3000, 2000],
]
expect(actual.processedData).toEqual(expected)
expect(actual.transformedData).toEqual(expected)
})
it('filters out columns that should not be visible', () => {
@ -561,7 +565,7 @@ describe('processTableData', () => {
[3000, 2000, 1000],
]
const sortFieldName = 'time'
const direction = DEFAULT_SORT
const direction = DEFAULT_SORT_DIRECTION
const verticalTimeAxis = true
const fieldNames = [
@ -570,7 +574,7 @@ describe('processTableData', () => {
{internalName: 'f2', displayName: 'F2', visible: true},
]
const actual = processTableData(
const actual = transformTableData(
data,
sortFieldName,
direction,
@ -579,7 +583,7 @@ describe('processTableData', () => {
)
const expected = [['time', 'f2'], [1000, 2000], [2000, 3000], [3000, 1000]]
expect(actual.processedData).toEqual(expected)
expect(actual.transformedData).toEqual(expected)
})
it('filters out invisible columns after sorting', () => {
@ -590,7 +594,7 @@ describe('processTableData', () => {
[3000, 2000, 1000],
]
const sortFieldName = 'f1'
const direction = DEFAULT_SORT
const direction = DEFAULT_SORT_DIRECTION
const verticalTimeAxis = true
const fieldNames = [
@ -599,7 +603,7 @@ describe('processTableData', () => {
{internalName: 'f2', displayName: 'F2', visible: true},
]
const actual = processTableData(
const actual = transformTableData(
data,
sortFieldName,
direction,
@ -608,7 +612,7 @@ describe('processTableData', () => {
)
const expected = [['time', 'f2'], [2000, 3000], [3000, 1000], [1000, 2000]]
expect(actual.processedData).toEqual(expected)
expect(actual.transformedData).toEqual(expected)
})
})
@ -621,7 +625,7 @@ describe('if verticalTimeAxis is false', () => {
[3000, 2000, 1000],
]
const sortFieldName = 'time'
const direction = DEFAULT_SORT
const direction = DEFAULT_SORT_DIRECTION
const verticalTimeAxis = false
const fieldNames = [
@ -630,7 +634,7 @@ describe('if verticalTimeAxis is false', () => {
{internalName: 'f2', displayName: 'F2', visible: true},
]
const actual = processTableData(
const actual = transformTableData(
data,
sortFieldName,
direction,
@ -643,7 +647,7 @@ describe('if verticalTimeAxis is false', () => {
['f2', 2000, 3000, 1000],
]
expect(actual.processedData).toEqual(expected)
expect(actual.transformedData).toEqual(expected)
})
it('transforms data after filtering out invisible columns', () => {
@ -654,7 +658,7 @@ describe('if verticalTimeAxis is false', () => {
[3000, 2000, 1000],
]
const sortFieldName = 'f1'
const direction = DEFAULT_SORT
const direction = DEFAULT_SORT_DIRECTION
const verticalTimeAxis = false
const fieldNames = [
@ -663,7 +667,7 @@ describe('if verticalTimeAxis is false', () => {
{internalName: 'f2', displayName: 'F2', visible: true},
]
const actual = processTableData(
const actual = transformTableData(
data,
sortFieldName,
direction,
@ -672,6 +676,6 @@ describe('if verticalTimeAxis is false', () => {
)
const expected = [['time', 2000, 3000, 1000], ['f2', 3000, 1000, 2000]]
expect(actual.processedData).toEqual(expected)
expect(actual.transformedData).toEqual(expected)
})
})