{
timeFormat = _.replace(timeFormat, 'dddd', 'Wednesday')
timeFormat = _.replace(timeFormat, 'A', 'AM')
timeFormat = _.replace(timeFormat, 'h', '00')
+ timeFormat = _.replace(timeFormat, 'X', '1522286058')
const {width} = calculateSize(timeFormat, {
font: '"RobotoMono", monospace',
diff --git a/ui/src/utils/timeSeriesToDygraph.js b/ui/src/utils/timeSeriesTransformers.js
similarity index 82%
rename from ui/src/utils/timeSeriesToDygraph.js
rename to ui/src/utils/timeSeriesTransformers.js
index 7426a79bc..0a5db50ba 100644
--- a/ui/src/utils/timeSeriesToDygraph.js
+++ b/ui/src/utils/timeSeriesTransformers.js
@@ -1,6 +1,6 @@
import _ from 'lodash'
import {shiftDate} from 'shared/query/helpers'
-import {map, reduce, forEach, concat, clone} from 'fast.js'
+import {map, reduce, filter, forEach, concat, clone} from 'fast.js'
/**
* Accepts an array of raw influxdb responses and returns a format
@@ -184,4 +184,37 @@ export const timeSeriesToTableGraph = raw => {
}
}
+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 processTableData = (
+ data,
+ sortFieldName,
+ direction,
+ verticalTimeAxis,
+ fieldNames
+) => {
+ 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 processedData = verticalTimeAxis ? filteredData : _.unzip(filteredData)
+
+ return {processedData, sortedTimeVals}
+}
+
export default timeSeriesToDygraph
diff --git a/ui/test/shared/components/TableGraph.test.tsx b/ui/test/shared/components/TableGraph.test.tsx
deleted file mode 100644
index f8547f85f..000000000
--- a/ui/test/shared/components/TableGraph.test.tsx
+++ /dev/null
@@ -1,223 +0,0 @@
-import React from 'react'
-
-import {shallow} from 'enzyme'
-
-import TableGraph, {
- filterInvisibleColumns,
- processData,
- DEFAULT_SORT,
-} from 'src/shared/components/TableGraph'
-
-const setup = (override = []) => {
- const props = {
- data: [],
- tableOptions: {
- timeFormat: '',
- verticalTimeAxis: true,
- sortBy: {
- internalName: '',
- displayName: '',
- visible: true,
- },
- wrapping: '',
- fieldNames: [],
- fixFirstColumn: true,
- },
- hoverTime: '',
- onSetHoverTime: () => {},
- colors: [],
- setDataLabels: () => {},
- ...override,
- }
-
- const data = [
- ['time', 'f1', 'f2'],
- [1000, 3000, 2000],
- [2000, 1000, 3000],
- [3000, 2000, 1000],
- ]
-
- const wrapper = shallow(
)
- const instance = wrapper.instance() as TableGraph
- return {wrapper, instance, props, data}
-}
-
-describe('Components.Shared.TableGraph', () => {
- describe('functions', () => {
- describe('filterInvisibleColumns', () => {
- it("returns a nested array of that only include columns whose corresponding fieldName's visibility is true", () => {
- const {data} = setup()
-
- const fieldNames = [
- {internalName: 'time', displayName: 'Time', visible: true},
- {internalName: 'f1', displayName: '', visible: false},
- {internalName: 'f2', displayName: 'F2', visible: false},
- ]
-
- const actual = filterInvisibleColumns(data, fieldNames)
- const expected = [['time'], [1000], [2000], [3000]]
- expect(actual).toEqual(expected)
- })
-
- it('returns an array of an empty array if all fieldNames are not visible', () => {
- const {data} = setup()
-
- const fieldNames = [
- {internalName: 'time', displayName: 'Time', visible: false},
- {internalName: 'f1', displayName: '', visible: false},
- {internalName: 'f2', displayName: 'F2', visible: false},
- ]
-
- const actual = filterInvisibleColumns(data, fieldNames)
- const expected = [[]]
- expect(actual).toEqual(expected)
- })
- })
-
- describe('processData', () => {
- it('sorts the data based on the provided sortFieldName', () => {
- const {data} = setup()
- const sortFieldName = 'f1'
- const direction = DEFAULT_SORT
- const verticalTimeAxis = true
-
- const fieldNames = [
- {internalName: 'time', displayName: 'Time', visible: true},
- {internalName: 'f1', displayName: '', visible: true},
- {internalName: 'f2', displayName: 'F2', visible: true},
- ]
-
- const actual = processData(
- data,
- sortFieldName,
- direction,
- verticalTimeAxis,
- fieldNames
- )
- const expected = [
- ['time', 'f1', 'f2'],
- [2000, 1000, 3000],
- [3000, 2000, 1000],
- [1000, 3000, 2000],
- ]
-
- expect(actual.processedData).toEqual(expected)
- })
-
- it('filters out invisible columns', () => {
- const {data} = setup()
- const sortFieldName = 'time'
- const direction = DEFAULT_SORT
- const verticalTimeAxis = true
-
- const fieldNames = [
- {internalName: 'time', displayName: 'Time', visible: true},
- {internalName: 'f1', displayName: '', visible: false},
- {internalName: 'f2', displayName: 'F2', visible: true},
- ]
-
- const actual = processData(
- data,
- sortFieldName,
- direction,
- verticalTimeAxis,
- fieldNames
- )
- const expected = [
- ['time', 'f2'],
- [1000, 2000],
- [2000, 3000],
- [3000, 1000],
- ]
-
- expect(actual.processedData).toEqual(expected)
- })
-
- it('filters out invisible columns after sorting', () => {
- const {data} = setup()
- const sortFieldName = 'f1'
- const direction = DEFAULT_SORT
- const verticalTimeAxis = true
-
- const fieldNames = [
- {internalName: 'time', displayName: 'Time', visible: true},
- {internalName: 'f1', displayName: '', visible: false},
- {internalName: 'f2', displayName: 'F2', visible: true},
- ]
-
- const actual = processData(
- data,
- sortFieldName,
- direction,
- verticalTimeAxis,
- fieldNames
- )
- const expected = [
- ['time', 'f2'],
- [2000, 3000],
- [3000, 1000],
- [1000, 2000],
- ]
-
- expect(actual.processedData).toEqual(expected)
- })
-
- describe('if verticalTimeAxis is false', () => {
- it('transforms data', () => {
- const {data} = setup()
- const sortFieldName = 'time'
- const direction = DEFAULT_SORT
- const verticalTimeAxis = false
-
- const fieldNames = [
- {internalName: 'time', displayName: 'Time', visible: true},
- {internalName: 'f1', displayName: '', visible: true},
- {internalName: 'f2', displayName: 'F2', visible: true},
- ]
-
- const actual = processData(
- data,
- sortFieldName,
- direction,
- verticalTimeAxis,
- fieldNames
- )
- const expected = [
- ['time', 1000, 2000, 3000],
- ['f1', 3000, 1000, 2000],
- ['f2', 2000, 3000, 1000],
- ]
-
- expect(actual.processedData).toEqual(expected)
- })
-
- it('transforms data after filtering out invisible columns', () => {
- const {data} = setup()
- const sortFieldName = 'f1'
- const direction = DEFAULT_SORT
- const verticalTimeAxis = false
-
- const fieldNames = [
- {internalName: 'time', displayName: 'Time', visible: true},
- {internalName: 'f1', displayName: '', visible: false},
- {internalName: 'f2', displayName: 'F2', visible: true},
- ]
-
- const actual = processData(
- data,
- sortFieldName,
- direction,
- verticalTimeAxis,
- fieldNames
- )
- const expected = [
- ['time', 2000, 3000, 1000],
- ['f2', 3000, 1000, 2000],
- ]
-
- expect(actual.processedData).toEqual(expected)
- })
- })
- })
- })
-})
diff --git a/ui/test/utils/timeSeriesToDygraph.test.js b/ui/test/utils/timeSeriesTransformers.test.js
similarity index 66%
rename from ui/test/utils/timeSeriesToDygraph.test.js
rename to ui/test/utils/timeSeriesTransformers.test.js
index c5df3a879..f55c75f7b 100644
--- a/ui/test/utils/timeSeriesToDygraph.test.js
+++ b/ui/test/utils/timeSeriesTransformers.test.js
@@ -1,6 +1,9 @@
import timeSeriesToDygraph, {
timeSeriesToTableGraph,
-} from 'src/utils/timeSeriesToDygraph'
+ filterTableColumns,
+ processTableData,
+} from 'src/utils/timeSeriesTransformers'
+import {DEFAULT_SORT} from 'src/shared/constants/tableGraph'
describe('timeSeriesToDygraph', () => {
it('parses a raw InfluxDB response into a dygraph friendly data format', () => {
@@ -461,3 +464,201 @@ describe('timeSeriesToTableGraph', () => {
expect(actual.data).toEqual(expected)
})
})
+
+describe('filterTableColumns', () => {
+ it("returns a nested array of fieldnamesthat only include columns whose corresponding fieldName's visibility is true", () => {
+ const data = [
+ ['time', 'f1', 'f2'],
+ [1000, 3000, 2000],
+ [2000, 1000, 3000],
+ [3000, 2000, 1000],
+ ]
+
+ const fieldNames = [
+ {internalName: 'time', displayName: 'Time', visible: true},
+ {internalName: 'f1', displayName: '', visible: false},
+ {internalName: 'f2', displayName: 'F2', visible: false},
+ ]
+
+ const actual = filterTableColumns(data, fieldNames)
+ const expected = [['time'], [1000], [2000], [3000]]
+ expect(actual).toEqual(expected)
+ })
+
+ it('returns an array of an empty array if all fieldNames are not visible', () => {
+ const data = [
+ ['time', 'f1', 'f2'],
+ [1000, 3000, 2000],
+ [2000, 1000, 3000],
+ [3000, 2000, 1000],
+ ]
+
+ const fieldNames = [
+ {internalName: 'time', displayName: 'Time', visible: false},
+ {internalName: 'f1', displayName: '', visible: false},
+ {internalName: 'f2', displayName: 'F2', visible: false},
+ ]
+
+ const actual = filterTableColumns(data, fieldNames)
+ const expected = [[]]
+ expect(actual).toEqual(expected)
+ })
+})
+
+describe('processTableData', () => {
+ it('sorts the data based on the provided sortFieldName', () => {
+ const data = [
+ ['time', 'f1', 'f2'],
+ [1000, 3000, 2000],
+ [2000, 1000, 3000],
+ [3000, 2000, 1000],
+ ]
+ const sortFieldName = 'f1'
+ const direction = DEFAULT_SORT
+ const verticalTimeAxis = true
+
+ const fieldNames = [
+ {internalName: 'time', displayName: 'Time', visible: true},
+ {internalName: 'f1', displayName: '', visible: true},
+ {internalName: 'f2', displayName: 'F2', visible: true},
+ ]
+
+ const actual = processTableData(
+ data,
+ sortFieldName,
+ direction,
+ verticalTimeAxis,
+ fieldNames
+ )
+ const expected = [
+ ['time', 'f1', 'f2'],
+ [2000, 1000, 3000],
+ [3000, 2000, 1000],
+ [1000, 3000, 2000],
+ ]
+
+ expect(actual.processedData).toEqual(expected)
+ })
+
+ it('filters out columns that should not be visible', () => {
+ const data = [
+ ['time', 'f1', 'f2'],
+ [1000, 3000, 2000],
+ [2000, 1000, 3000],
+ [3000, 2000, 1000],
+ ]
+ const sortFieldName = 'time'
+ const direction = DEFAULT_SORT
+ const verticalTimeAxis = true
+
+ const fieldNames = [
+ {internalName: 'time', displayName: 'Time', visible: true},
+ {internalName: 'f1', displayName: '', visible: false},
+ {internalName: 'f2', displayName: 'F2', visible: true},
+ ]
+
+ const actual = processTableData(
+ data,
+ sortFieldName,
+ direction,
+ verticalTimeAxis,
+ fieldNames
+ )
+ const expected = [['time', 'f2'], [1000, 2000], [2000, 3000], [3000, 1000]]
+
+ expect(actual.processedData).toEqual(expected)
+ })
+
+ it('filters out invisible columns after sorting', () => {
+ const data = [
+ ['time', 'f1', 'f2'],
+ [1000, 3000, 2000],
+ [2000, 1000, 3000],
+ [3000, 2000, 1000],
+ ]
+ const sortFieldName = 'f1'
+ const direction = DEFAULT_SORT
+ const verticalTimeAxis = true
+
+ const fieldNames = [
+ {internalName: 'time', displayName: 'Time', visible: true},
+ {internalName: 'f1', displayName: '', visible: false},
+ {internalName: 'f2', displayName: 'F2', visible: true},
+ ]
+
+ const actual = processTableData(
+ data,
+ sortFieldName,
+ direction,
+ verticalTimeAxis,
+ fieldNames
+ )
+ const expected = [['time', 'f2'], [2000, 3000], [3000, 1000], [1000, 2000]]
+
+ expect(actual.processedData).toEqual(expected)
+ })
+})
+
+describe('if verticalTimeAxis is false', () => {
+ it('transforms data', () => {
+ const data = [
+ ['time', 'f1', 'f2'],
+ [1000, 3000, 2000],
+ [2000, 1000, 3000],
+ [3000, 2000, 1000],
+ ]
+ const sortFieldName = 'time'
+ const direction = DEFAULT_SORT
+ const verticalTimeAxis = false
+
+ const fieldNames = [
+ {internalName: 'time', displayName: 'Time', visible: true},
+ {internalName: 'f1', displayName: '', visible: true},
+ {internalName: 'f2', displayName: 'F2', visible: true},
+ ]
+
+ const actual = processTableData(
+ data,
+ sortFieldName,
+ direction,
+ verticalTimeAxis,
+ fieldNames
+ )
+ const expected = [
+ ['time', 1000, 2000, 3000],
+ ['f1', 3000, 1000, 2000],
+ ['f2', 2000, 3000, 1000],
+ ]
+
+ expect(actual.processedData).toEqual(expected)
+ })
+
+ it('transforms data after filtering out invisible columns', () => {
+ const data = [
+ ['time', 'f1', 'f2'],
+ [1000, 3000, 2000],
+ [2000, 1000, 3000],
+ [3000, 2000, 1000],
+ ]
+ const sortFieldName = 'f1'
+ const direction = DEFAULT_SORT
+ const verticalTimeAxis = false
+
+ const fieldNames = [
+ {internalName: 'time', displayName: 'Time', visible: true},
+ {internalName: 'f1', displayName: '', visible: false},
+ {internalName: 'f2', displayName: 'F2', visible: true},
+ ]
+
+ const actual = processTableData(
+ data,
+ sortFieldName,
+ direction,
+ verticalTimeAxis,
+ fieldNames
+ )
+ const expected = [['time', 2000, 3000, 1000], ['f2', 3000, 1000, 2000]]
+
+ expect(actual.processedData).toEqual(expected)
+ })
+})