From 76666d98a96d21ee3ee34b48f0c43535613272fd Mon Sep 17 00:00:00 2001 From: ebb-tide Date: Tue, 24 Apr 2018 23:22:48 -0700 Subject: [PATCH] Front end work for taking fieldOptions out of tableOptions on to cell --- .../dashboards/actions/cellEditorOverlay.js | 13 +- ui/src/dashboards/components/TableOptions.tsx | 90 ++++++------ .../dashboards/reducers/cellEditorOverlay.js | 20 ++- ui/src/dashboards/utils/tableGraph.ts | 52 ++++--- ui/src/shared/apis/index.js | 4 +- ui/src/shared/components/TableGraph.js | 82 ++++++----- ui/src/shared/constants/tableGraph.js | 3 + ui/src/types/dashboard.ts | 3 +- .../components/TableOptions.test.tsx | 4 +- ui/test/utils/timeSeriesTransformers.test.js | 139 ++++++++++-------- 10 files changed, 233 insertions(+), 177 deletions(-) diff --git a/ui/src/dashboards/actions/cellEditorOverlay.js b/ui/src/dashboards/actions/cellEditorOverlay.js index dae56aa31..8038ff6b9 100644 --- a/ui/src/dashboards/actions/cellEditorOverlay.js +++ b/ui/src/dashboards/actions/cellEditorOverlay.js @@ -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, }, }) diff --git a/ui/src/dashboards/components/TableOptions.tsx b/ui/src/dashboards/components/TableOptions.tsx index 2778ce79a..78f0d24be 100644 --- a/ui/src/dashboards/components/TableOptions.tsx +++ b/ui/src/dashboards/components/TableOptions.tsx @@ -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 { } 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 { 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) diff --git a/ui/src/dashboards/reducers/cellEditorOverlay.js b/ui/src/dashboards/reducers/cellEditorOverlay.js index cd23707e9..6cc605bac 100644 --- a/ui/src/dashboards/reducers/cellEditorOverlay.js +++ b/ui/src/dashboards/reducers/cellEditorOverlay.js @@ -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 diff --git a/ui/src/dashboards/utils/tableGraph.ts b/ui/src/dashboards/utils/tableGraph.ts index a31e3af9d..e7e966437 100644 --- a/ui/src/dashboards/utils/tableGraph.ts +++ b/ui/src/dashboards/utils/tableGraph.ts @@ -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 ) diff --git a/ui/src/shared/apis/index.js b/ui/src/shared/apis/index.js index f66aa35f5..3620097f8 100644 --- a/ui/src/shared/apis/index.js +++ b/ui/src/shared/apis/index.js @@ -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) diff --git a/ui/src/shared/components/TableGraph.js b/ui/src/shared/components/TableGraph.js index 942870e22..271d734d9 100644 --- a/ui/src/shared/components/TableGraph.js +++ b/ui/src/shared/components/TableGraph.js @@ -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) diff --git a/ui/src/shared/constants/tableGraph.js b/ui/src/shared/constants/tableGraph.js index 999c0149f..4b7d9e582 100644 --- a/ui/src/shared/constants/tableGraph.js +++ b/ui/src/shared/constants/tableGraph.js @@ -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' diff --git a/ui/src/types/dashboard.ts b/ui/src/types/dashboard.ts index 8bcdb6382..f033594c9 100644 --- a/ui/src/types/dashboard.ts +++ b/ui/src/types/dashboard.ts @@ -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 } diff --git a/ui/test/dashboards/components/TableOptions.test.tsx b/ui/test/dashboards/components/TableOptions.test.tsx index 0c05f815a..c6d4e3a8c 100644 --- a/ui/test/dashboards/components/TableOptions.test.tsx +++ b/ui/test/dashboards/components/TableOptions.test.tsx @@ -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: [], diff --git a/ui/test/utils/timeSeriesTransformers.test.js b/ui/test/utils/timeSeriesTransformers.test.js index f4d44e8e6..906f9253e 100644 --- a/ui/test/utils/timeSeriesTransformers.test.js +++ b/ui/test/utils/timeSeriesTransformers.test.js @@ -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]]