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

Front end work for taking fieldOptions out of tableOptions on to cell

table/field-options
ebb-tide 2018-04-24 23:22:48 -07:00
parent 6ecd527f01
commit 76666d98a9
10 changed files with 233 additions and 177 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
ui/src/dashboards/actions/cellEditorOverlay.js
View File

@ -65,9 +65,16 @@ export const updateLineColors = lineColors => ({
},
})
export const updateDisplayOptions = update => ({
type: 'UPDATE_DISPLAY_OPTIONS',
export const changeTimeFormat = timeFormat => ({
type: 'CHANGE_TIME_FORMAT',
payload: {
update,
timeFormat,
},
})
export const updateFieldOptions = fieldOptions => ({
type: 'UPDATE_FIELD_OPTIONS',
payload: {
fieldOptions,
},
})

90
ui/src/dashboards/components/TableOptions.tsx
View File

@ -16,13 +16,14 @@ import ThresholdsListTypeToggle from 'src/shared/components/ThresholdsListTypeTo
import {
updateTableOptions,
updateDisplayOptions,
updateFieldOptions,
changeTimeFormat,
} from 'src/dashboards/actions/cellEditorOverlay'
import {TIME_FIELD_DEFAULT} from 'src/shared/constants/tableGraph'
import {QueryConfig} from 'src/types/query'
import {ErrorHandling} from 'src/shared/decorators/errors'
interface Option {
interface DropdownOption {
text: string
key: string
}
@ -31,9 +32,10 @@ interface RenamableField {
internalName: string
displayName: string
visible: boolean
precision: number
}
interface Options {
interface TableOptionsInterface {
verticalTimeAxis: boolean
sortBy: RenamableField
fixFirstColumn: boolean
@ -41,9 +43,10 @@ interface Options {
interface Props {
queryConfigs: QueryConfig[]
handleUpdateTableOptions: (options: Options) => void
handleUpdateDisplayOptions: (displayOption: string | RenamableField[]) => void
tableOptions: Options
handleUpdateTableOptions: (options: TableOptionsInterface) => void
handleUpdateFieldOptions: (fieldOptions: RenamableField[]) => void
handleChangeTimeFormat: (timeFormat: string) => void
tableOptions: TableOptionsInterface
fieldOptions: RenamableField[]
timeFormat: string
onResetFocus: () => void
@ -111,37 +114,33 @@ export class TableOptions extends Component<Props, {}> {
}
private moveField(dragIndex, hoverIndex) {
const {handleUpdateTableOptions, tableOptions} = this.props
const {fieldNames} = tableOptions
const dragField = fieldNames[dragIndex]
const removedFields = _.concat(
_.slice(fieldNames, 0, dragIndex),
_.slice(fieldNames, dragIndex + 1)
const {handleUpdateFieldOptions, fieldOptions} = this.props
const draggedField = fieldOptions[dragIndex]
const fieldOptionsRemoved = _.concat(
_.slice(fieldOptions, 0, dragIndex),
_.slice(fieldOptions, dragIndex + 1)
)
const addedFields = _.concat(
_.slice(removedFields, 0, hoverIndex),
[dragField],
_.slice(removedFields, hoverIndex)
const fieldOptionsAdded = _.concat(
_.slice(fieldOptionsRemoved, 0, hoverIndex),
[draggedField],
_.slice(fieldOptionsRemoved, hoverIndex)
)
handleUpdateDisplayOptions({
fieldOptions: addedFields,
})
handleUpdateFieldOptions(fieldOptionsAdded)
}
private handleChooseSortBy = (option: Option) => {
const {tableOptions, handleUpdateTableOptions} = this.props
const sortBy = {
displayName: option.text === option.key ? '' : option.text,
internalName: option.key,
visible: true,
}
private handleChooseSortBy = (option: DropdownOption) => {
const {tableOptions, handleUpdateTableOptions, fieldOptions} = this.props
const sortBy = fieldOptions.find(f => f.internalName === option.key)
handleUpdateTableOptions({...tableOptions, sortBy})
}
private handleTimeFormatChange = timeFormat => {
const {handleUpdateDisplayOptions} = this.props
handleUpdateDisplayOptions({timeFormat})
const {handleChangeTimeFormat} = this.props
handleChangeTimeFormat(timeFormat)
}
private handleToggleVerticalTimeAxis = verticalTimeAxis => () => {
@ -158,32 +157,31 @@ export class TableOptions extends Component<Props, {}> {
private handleFieldUpdate = field => {
const {
handleUpdateTableOptions,
handleUpdateDisplayOptions,
handleUpdateFieldOptions,
tableOptions,
fieldOptions,
} = this.props
const {sortBy} = tableOptions
const updatedFields = fieldOptions.map(
const updatedFieldOptions = fieldOptions.map(
f => (f.internalName === field.internalName ? field : f)
)
const updatedSortBy =
sortBy.internalName === field.internalName
? {...sortBy, displayName: field.displayName}
: sortBy
handleUpdateTableOptions({
...tableOptions,
sortBy: updatedSortBy,
})
handleUpdateDisplayOptions({
fieldOptions: updatedFields,
})
if (sortBy.internalName === field.internalName) {
const updatedSortBy = {...sortBy, displayName: field.displayName}
handleUpdateTableOptions({
...tableOptions,
sortBy: updatedSortBy,
})
}
handleUpdateFieldOptions(updatedFieldOptions)
}
}
const mapStateToProps = ({
cellEditorOverlay: {
cell: {tableOptions},
cell: {tableOptions, timeFormat, fieldOptions},
},
}) => ({
tableOptions,
@ -193,10 +191,8 @@ const mapStateToProps = ({
const mapDispatchToProps = dispatch => ({
handleUpdateTableOptions: bindActionCreators(updateTableOptions, dispatch),
handleUpdateDisplayOptions: bindActionCreators(
updateDisplayOptions,
dispatch
),
handleUpdateFieldOptions: bindActionCreators(updateFieldOptions, dispatch),
handleChangeTimeFormat: bindActionCreators(changeTimeFormat, dispatch),
})
export default connect(mapStateToProps, mapDispatchToProps)(TableOptions)

20
ui/src/dashboards/reducers/cellEditorOverlay.js
View File

@ -114,17 +114,25 @@ export default function cellEditorOverlay(state = initialState, action) {
return {...state, cell}
}
case 'CHANGE_TIME_FORMAT': {
const {timeFormat} = action.payload
const cell = {...state.cell, timeFormat}
return {...state, cell}
}
case 'UPDATE_FIELD_OPTIONS': {
const {fieldOptions} = action.payload
const cell = {...state.cell, fieldOptions}
return {...state, cell}
}
case 'UPDATE_LINE_COLORS': {
const {lineColors} = action.payload
return {...state, lineColors}
}
case 'UPDATE_DISPLAY_OPTIONS': {
const {update} = action.payload
const cell = {...state.cell, ...update}
return {...state, cell}
}
}
return state

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

@ -6,6 +6,7 @@ import {
CELL_HORIZONTAL_PADDING,
TIME_FIELD_DEFAULT,
DEFAULT_TIME_FORMAT,
DEFAULT_PRECISION,
} from 'src/shared/constants/tableGraph'
const calculateTimeColumnWidth = timeFormat => {
@ -30,7 +31,7 @@ const updateMaxWidths = (
maxColumnWidths,
topRow,
isTopRow,
fieldNames,
fieldOptions,
timeFormatWidth,
verticalTimeAxis
) => {
@ -41,7 +42,7 @@ const updateMaxWidths = (
(verticalTimeAxis && isTopRow) || (!verticalTimeAxis && c === 0)
const foundField = isLabel
? fieldNames.find(field => field.internalName === col)
? fieldOptions.find(field => field.internalName === col)
: undefined
const colValue =
foundField && foundField.displayName ? foundField.displayName : `${col}`
@ -77,23 +78,28 @@ const updateMaxWidths = (
)
}
export const computeFieldNames = (existingFieldNames, sortedLabels) => {
export const computeFieldOptions = (existingFieldOptions, sortedLabels) => {
const timeField =
existingFieldNames.find(f => f.internalName === 'time') ||
existingFieldOptions.find(f => f.internalName === 'time') ||
TIME_FIELD_DEFAULT
let astNames = [timeField]
sortedLabels.forEach(({label}) => {
const field = {internalName: label, displayName: '', visible: true}
const field = {
internalName: label,
displayName: '',
visible: true,
precision: DEFAULT_PRECISION,
}
astNames = [...astNames, field]
})
const intersection = existingFieldNames.filter(f => {
const intersection = existingFieldOptions.filter(f => {
return astNames.find(a => a.internalName === f.internalName)
})
const newFields = astNames.filter(a => {
return !existingFieldNames.find(f => f.internalName === a.internalName)
return !existingFieldOptions.find(f => f.internalName === a.internalName)
})
return [...intersection, ...newFields]
@ -101,7 +107,7 @@ export const computeFieldNames = (existingFieldNames, sortedLabels) => {
export const calculateColumnWidths = (
data,
fieldNames,
fieldOptions,
timeFormat,
verticalTimeAxis
) => {
@ -116,7 +122,7 @@ export const calculateColumnWidths = (
acc,
data[0],
r === 0,
fieldNames,
fieldOptions,
timeFormatWidth,
verticalTimeAxis
)
@ -125,12 +131,14 @@ export const calculateColumnWidths = (
)
}
export const filterTableColumns = (data, fieldNames) => {
export const filterTableColumns = (data, fieldOptions) => {
const visibility = {}
const filteredData = map(data, (row, i) => {
return filter(row, (col, j) => {
if (i === 0) {
const foundField = fieldNames.find(field => field.internalName === col)
const foundField = fieldOptions.find(
field => field.internalName === col
)
visibility[j] = foundField ? foundField.visible : true
}
return visibility[j]
@ -139,10 +147,10 @@ export const filterTableColumns = (data, fieldNames) => {
return filteredData[0].length ? filteredData : [[]]
}
export const orderTableColumns = (data, fieldNames) => {
const fieldsSortOrder = fieldNames.map(fieldName => {
export const orderTableColumns = (data, fieldOptions) => {
const fieldsSortOrder = fieldOptions.map(fieldOption => {
return _.findIndex(data[0], dataLabel => {
return dataLabel === fieldName.internalName
return dataLabel === fieldOption.internalName
})
})
const filteredFieldSortOrder = filter(fieldsSortOrder, f => f !== -1)
@ -152,20 +160,26 @@ export const orderTableColumns = (data, fieldNames) => {
return orderedData[0].length ? orderedData : [[]]
}
export const transformTableData = (data, sort, fieldNames, tableOptions) => {
const {verticalTimeAxis, timeFormat} = tableOptions
export const transformTableData = (
data,
sort,
fieldOptions,
tableOptions,
timeFormat
) => {
const {verticalTimeAxis} = 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 filteredData = filterTableColumns(sortedData, fieldOptions)
const orderedData = orderTableColumns(filteredData, fieldOptions)
const transformedData = verticalTimeAxis ? orderedData : _.unzip(orderedData)
const {widths: columnWidths, totalWidths} = calculateColumnWidths(
transformedData,
fieldNames,
fieldOptions,
timeFormat,
verticalTimeAxis
)

4
ui/src/shared/apis/index.js
View File

@ -185,7 +185,9 @@ export const testAlertOutput = async (kapacitor, outputName) => {
export const getAllServices = async kapacitor => {
try {
const {data: {services}} = await kapacitorProxy(kapacitor, 'GET','/kapacitor/v1/service-tests')
const {
data: {services},
} = await kapacitorProxy(kapacitor, 'GET', '/kapacitor/v1/service-tests')
return services
} catch (error) {
console.error(error)

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

@ -13,10 +13,10 @@ const {arrayOf, bool, shape, string, func} = PropTypes
import {timeSeriesToTableGraph} from 'src/utils/timeSeriesTransformers'
import {
computeFieldNames,
computeFieldOptions,
transformTableData,
} from 'src/dashboards/utils/tableGraph'
import {updateTableOptions} from 'src/dashboards/actions/cellEditorOverlay'
import {updateFieldOptions} from 'src/dashboards/actions/cellEditorOverlay'
import {
NULL_ARRAY_INDEX,
@ -58,19 +58,19 @@ class TableGraph extends Component {
}
}
handleUpdateTableOptions = (fieldNames, tableOptions) => {
handleUpdateFieldOptions = fieldOptions => {
const {isInCEO} = this.props
if (!isInCEO) {
return
}
this.props.handleUpdateTableOptions({...tableOptions, fieldNames})
this.props.handleUpdateFieldOptions(fieldOptions)
}
componentWillReceiveProps(nextProps) {
const updatedProps = _.keys(nextProps).filter(
k => !_.isEqual(this.props[k], nextProps[k])
)
const {tableOptions} = nextProps
const {tableOptions, fieldOptions, timeFormat} = nextProps
let result = {}
@ -80,10 +80,11 @@ class TableGraph extends Component {
const data = _.get(result, 'data', this.state.data)
const sortedLabels = _.get(result, 'sortedLabels', this.state.sortedLabels)
const fieldNames = computeFieldNames(tableOptions.fieldNames, sortedLabels)
const computedFieldOptions = computeFieldOptions(fieldOptions, sortedLabels)
if (_.includes(updatedProps, 'data')) {
this.handleUpdateTableOptions(fieldNames, tableOptions)
this.handleUpdateFieldOptions(computedFieldOptions)
}
if (_.isEmpty(data[0])) {
@ -106,14 +107,22 @@ class TableGraph extends Component {
if (
_.includes(updatedProps, 'data') ||
_.includes(updatedProps, 'tableOptions')
_.includes(updatedProps, 'tableOptions') ||
_.includes(updatedProps, 'fieldOptions') ||
_.includes(updatedProps, 'timeFormat')
) {
const {
transformedData,
sortedTimeVals,
columnWidths,
totalWidths,
} = transformTableData(data, sort, fieldNames, tableOptions)
} = transformTableData(
data,
sort,
computedFieldOptions,
tableOptions,
timeFormat
)
this.setState({
data,
@ -187,33 +196,28 @@ class TableGraph extends Component {
}
handleClickFieldName = fieldName => () => {
const {tableOptions} = this.props
const {timeFormat} = tableOptions
const {data, sortField, sortDirection} = this.state
const verticalTimeAxis = _.get(tableOptions, 'verticalTimeAxis', true)
const fieldOptions = _.get(this.props, 'fieldOptions', [TIME_FIELD_DEFAULT])
const {data, sort} = this.state
const {tableOptions, timeFormat, fieldOptions} = this.props
let direction
if (fieldName === sortField) {
direction = sortDirection === ASCENDING ? DESCENDING : ASCENDING
if (fieldName === sort.field) {
sort.direction = sort.direction === ASCENDING ? DESCENDING : ASCENDING
} else {
direction = DEFAULT_SORT_DIRECTION
sort.field = fieldName
sort.direction = DEFAULT_SORT_DIRECTION
}
const {transformedData, sortedTimeVals} = transformTableData(
data,
fieldName,
direction,
verticalTimeAxis,
sort,
fieldOptions,
tableOptions,
timeFormat
)
this.setState({
transformedData,
sortedTimeVals,
sortField: fieldName,
sortDirection: direction,
sort,
})
}
@ -251,17 +255,17 @@ class TableGraph extends Component {
hoveredColumnIndex,
hoveredRowIndex,
transformedData,
sortField,
sortDirection,
sort,
} = this.state
const {
tableOptions,
fieldOptions = [TIME_FIELD_DEFAULT],
timeFormat = DEFAULT_TIME_FORMAT,
tableOptions,
colors,
} = parent.props
const {
timeFormat = DEFAULT_TIME_FORMAT,
verticalTimeAxis = VERTICAL_TIME_AXIS_DEFAULT,
fixFirstColumn = FIX_FIRST_COLUMN_DEFAULT,
} = tableOptions
@ -321,9 +325,9 @@ class TableGraph extends Component {
'table-graph-cell__numerical': dataIsNumerical,
'table-graph-cell__field-name': isFieldName,
'table-graph-cell__sort-asc':
isFieldName && sortField === cellData && sortDirection === ASCENDING,
isFieldName && sort.field === cellData && sort.direction === ASCENDING,
'table-graph-cell__sort-desc':
isFieldName && sortField === cellData && sortDirection === DESCENDING,
isFieldName && sort.field === cellData && sort.direction === DESCENDING,
})
const cellContents = isTimeData
@ -356,11 +360,16 @@ class TableGraph extends Component {
hoveredColumnIndex,
hoveredRowIndex,
timeColumnWidth,
sortField,
sortDirection,
sort,
transformedData,
} = this.state
const {hoverTime, tableOptions, colors} = this.props
const {
hoverTime,
tableOptions,
colors,
fieldOptions,
timeFormat,
} = this.props
const {fixFirstColumn = FIX_FIRST_COLUMN_DEFAULT} = tableOptions
const columnCount = _.get(transformedData, ['0', 'length'], 0)
const rowCount = columnCount === 0 ? 0 : transformedData.length
@ -402,14 +411,15 @@ class TableGraph extends Component {
enableFixedRowScroll={true}
scrollToRow={scrollToRow}
scrollToColumn={scrollToColumn}
sortField={sortField}
sortDirection={sortDirection}
cellRenderer={this.cellRenderer}
hoveredColumnIndex={hoveredColumnIndex}
hoveredRowIndex={hoveredRowIndex}
hoverTime={hoverTime}
colors={colors}
sort={sort}
fieldOptions={fieldOptions}
tableOptions={tableOptions}
timeFormat={timeFormat}
timeColumnWidth={timeColumnWidth}
classNameBottomRightGrid="table-graph--scroll-window"
/>
@ -442,7 +452,7 @@ TableGraph.propTypes = {
})
).isRequired,
hoverTime: string,
handleUpdateTableOptions: func,
handleUpdateFieldOptions: func,
handleSetHoverTime: func,
colors: colorsStringSchema,
queryASTs: arrayOf(shape()),
@ -450,7 +460,7 @@ TableGraph.propTypes = {
}
const mapDispatchToProps = dispatch => ({
handleUpdateTableOptions: bindActionCreators(updateTableOptions, dispatch),
handleUpdateFieldOptions: bindActionCreators(updateFieldOptions, dispatch),
})
export default connect(null, mapDispatchToProps)(TableGraph)

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

@ -5,10 +5,13 @@ export const NULL_HOVER_TIME = '0'
export const TIME_FORMAT_TOOLTIP_LINK =
'http://momentjs.com/docs/#/parsing/string-format/'
export const DEFAULT_PRECISION = 0
export const TIME_FIELD_DEFAULT = {
internalName: 'time',
displayName: '',
visible: true,
precision: DEFAULT_PRECISION,
}
export const ASCENDING = 'asc'

3
ui/src/types/dashboard.ts
View File

@ -18,6 +18,7 @@ interface FieldName {
internalName: string
displayName: string
visible: boolean
precision: number
}
interface TableOptions {
@ -26,7 +27,6 @@ interface TableOptions {
sortBy: FieldName
wrapping: string
fixFirstColumn: boolean
fieldNames: FieldName[]
}
interface CellLinks {
@ -55,6 +55,7 @@ export interface Cell {
axes: Axes
colors: ColorString[]
tableOptions: TableOptions
fieldOptions: FieldName[]
links: CellLinks
legend: Legend
}

4
ui/test/dashboards/components/TableOptions.test.tsx
View File

@ -12,12 +12,14 @@ import ThresholdsListTypeToggle from 'src/shared/components/ThresholdsListTypeTo
const defaultProps = {
handleUpdateTableOptions: () => {},
handleUpdateFieldOptions: () => {},
handleChangeTimeFormat: () => {},
onResetFocus: () => {},
queryConfigs: [],
tableOptions: {
columnNames: [],
fixFirstColumn: true,
sortBy: {displayName: '', internalName: '', visible: true},
sortBy: {displayName: '', internalName: '', visible: true, precision: 0},
verticalTimeAxis: true,
},
fieldOptions: [],

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

@ -494,18 +494,18 @@ describe('filterTableColumns', () => {
[3000, 2000, 1000],
]
const fieldNames = [
{internalName: 'time', displayName: 'Time', visible: true},
{internalName: 'f1', displayName: '', visible: false},
{internalName: 'f2', displayName: 'F2', visible: false},
const fieldOptions = [
{internalName: 'time', displayName: 'Time', visible: true, precision: 0},
{internalName: 'f1', displayName: '', visible: false, precision: 0},
{internalName: 'f2', displayName: 'F2', visible: false, precision: 0},
]
const actual = filterTableColumns(data, fieldNames)
const actual = filterTableColumns(data, fieldOptions)
const expected = [['time'], [1000], [2000], [3000]]
expect(actual).toEqual(expected)
})
it('returns an array of an empty array if all fieldNames are not visible', () => {
it('returns an array of an empty array if all fieldOptions are not visible', () => {
const data = [
['time', 'f1', 'f2'],
[1000, 3000, 2000],
@ -513,13 +513,13 @@ describe('filterTableColumns', () => {
[3000, 2000, 1000],
]
const fieldNames = [
{internalName: 'time', displayName: 'Time', visible: false},
{internalName: 'f1', displayName: '', visible: false},
{internalName: 'f2', displayName: 'F2', visible: false},
const fieldOptions = [
{internalName: 'time', displayName: 'Time', visible: false, precision: 0},
{internalName: 'f1', displayName: '', visible: false, precision: 0},
{internalName: 'f2', displayName: 'F2', visible: false, precision: 0},
]
const actual = filterTableColumns(data, fieldNames)
const actual = filterTableColumns(data, fieldOptions)
const expected = [[]]
expect(actual).toEqual(expected)
})
@ -534,18 +534,21 @@ describe('transformTableData', () => {
[3000, 2000, 1000],
]
const sort = {field: 'f1', direction: DEFAULT_SORT_DIRECTION}
const tableOptions = {
verticalTimeAxis: true,
timeFormat: DEFAULT_TIME_FORMAT,
}
const fieldNames = [
{internalName: 'time', displayName: 'Time', visible: true},
{internalName: 'f1', displayName: '', visible: true},
{internalName: 'f2', displayName: 'F2', visible: true},
const tableOptions = {verticalTimeAxis: true}
const timeFormat = DEFAULT_TIME_FORMAT
const fieldOptions = [
{internalName: 'time', displayName: 'Time', visible: true, precision: 0},
{internalName: 'f1', displayName: '', visible: true, precision: 0},
{internalName: 'f2', displayName: 'F2', visible: true, precision: 0},
]
const actual = transformTableData(data, sort, fieldNames, tableOptions)
const actual = transformTableData(
data,
sort,
fieldOptions,
tableOptions,
timeFormat
)
const expected = [
['time', 'f1', 'f2'],
[2000, 1000, 3000],
@ -563,21 +566,22 @@ describe('transformTableData', () => {
[2000, 1000, 3000],
[3000, 2000, 1000],
]
const sort = {field: 'time', direction: DEFAULT_SORT_DIRECTION}
const tableOptions = {
verticalTimeAxis: true,
timeFormat: DEFAULT_TIME_FORMAT,
}
const fieldNames = [
{internalName: 'time', displayName: 'Time', visible: true},
{internalName: 'f1', displayName: '', visible: false},
{internalName: 'f2', displayName: 'F2', visible: true},
const tableOptions = {verticalTimeAxis: true}
const timeFormat = DEFAULT_TIME_FORMAT
const fieldOptions = [
{internalName: 'time', displayName: 'Time', visible: true, precision: 0},
{internalName: 'f1', displayName: '', visible: false, precision: 0},
{internalName: 'f2', displayName: 'F2', visible: true, precision: 0},
]
const actual = transformTableData(data, sort, fieldNames, tableOptions)
const actual = transformTableData(
data,
sort,
fieldOptions,
tableOptions,
timeFormat
)
const expected = [['time', 'f2'], [1000, 2000], [2000, 3000], [3000, 1000]]
@ -593,19 +597,22 @@ describe('transformTableData', () => {
]
const sort = {field: 'f1', direction: DEFAULT_SORT_DIRECTION}
const tableOptions = {verticalTimeAxis: true}
const timeFormat = DEFAULT_TIME_FORMAT
const tableOptions = {
verticalTimeAxis: true,
timeFormat: DEFAULT_TIME_FORMAT,
}
const fieldNames = [
{internalName: 'time', displayName: 'Time', visible: true},
{internalName: 'f1', displayName: '', visible: false},
{internalName: 'f2', displayName: 'F2', visible: true},
const fieldOptions = [
{internalName: 'time', displayName: 'Time', visible: true, precision: 0},
{internalName: 'f1', displayName: '', visible: false, precision: 0},
{internalName: 'f2', displayName: 'F2', visible: true, precision: 0},
]
const actual = transformTableData(data, sort, fieldNames, tableOptions)
const actual = transformTableData(
data,
sort,
fieldOptions,
tableOptions,
timeFormat
)
const expected = [['time', 'f2'], [2000, 3000], [3000, 1000], [1000, 2000]]
@ -623,19 +630,22 @@ describe('if verticalTimeAxis is false', () => {
]
const sort = {field: 'time', direction: DEFAULT_SORT_DIRECTION}
const tableOptions = {verticalTimeAxis: false}
const timeFormat = DEFAULT_TIME_FORMAT
const tableOptions = {
verticalTimeAxis: false,
timeFormat: DEFAULT_TIME_FORMAT,
}
const fieldNames = [
{internalName: 'time', displayName: 'Time', visible: true},
{internalName: 'f1', displayName: '', visible: true},
{internalName: 'f2', displayName: 'F2', visible: true},
const fieldOptions = [
{internalName: 'time', displayName: 'Time', visible: true, precision: 0},
{internalName: 'f1', displayName: '', visible: true, precision: 0},
{internalName: 'f2', displayName: 'F2', visible: true, precision: 0},
]
const actual = transformTableData(data, sort, fieldNames, tableOptions)
const actual = transformTableData(
data,
sort,
fieldOptions,
tableOptions,
timeFormat
)
const expected = [
['time', 1000, 2000, 3000],
@ -655,19 +665,22 @@ describe('if verticalTimeAxis is false', () => {
]
const sort = {field: 'f1', direction: DEFAULT_SORT_DIRECTION}
const tableOptions = {verticalTimeAxis: false}
const timeFormat = DEFAULT_TIME_FORMAT
const tableOptions = {
verticalTimeAxis: false,
timeFormat: DEFAULT_TIME_FORMAT,
}
const fieldNames = [
{internalName: 'time', displayName: 'Time', visible: true},
{internalName: 'f1', displayName: '', visible: false},
{internalName: 'f2', displayName: 'F2', visible: true},
const fieldOptions = [
{internalName: 'time', displayName: 'Time', visible: true, precision: 0},
{internalName: 'f1', displayName: '', visible: false, precision: 0},
{internalName: 'f2', displayName: 'F2', visible: true, precision: 0},
]
const actual = transformTableData(data, sort, fieldNames, tableOptions)
const actual = transformTableData(
data,
sort,
fieldOptions,
tableOptions,
timeFormat
)
const expected = [['time', 2000, 3000, 1000], ['f2', 3000, 1000, 2000]]