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

Bump vis to 0.9.0 (#14017) 

* Change table getters implementation

* ingest fluxGroupKeyUnion as array

* Bump vis to 0.9.0

* Fix behavior of latestValues in tests
pull/14021/head
Deniz Kusefoglu 2019-05-29 16:20:06 -07:00 committed by GitHub
parent c560e27e1d
commit 8856312dde
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 110 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
ui/package-lock.json generated
View File

@ -1052,9 +1052,9 @@
}
},
"@influxdata/vis": {
"version": "0.8.0",
"resolved": "https://registry.npmjs.org/@influxdata/vis/-/vis-0.8.0.tgz",
"integrity": "sha512-4MxvX+HlKQl9+2uLAr1ueDkTqmrcvokDFfp9yYEuVkD7rszMOfs5tInMhqHng49E5FXBksqPndryx/t+s5XBgw==",
"version": "0.9.0",
"resolved": "https://registry.npmjs.org/@influxdata/vis/-/vis-0.9.0.tgz",
"integrity": "sha512-Fz49Gu7uG01gbmtDaJ0QuPYpo8XY6OWQyDjvCJIT30LlPdJ6R0QbKXyV/4ZTtTIMcfuhpFz5+9zNhN+nOzDpBQ==",
"requires": {
"d3-array": "^2.0.3",
"d3-color": "^1.2.3",
@ -1068,9 +1068,9 @@
},
"dependencies": {
"d3-array": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.0.3.tgz",
"integrity": "sha512-C7g4aCOoJa+/K5hPVqZLG8wjYHsTUROTk7Z1Ep9F4P5l+WVrvV0+6nAZ1wKTRLMhFWpGbozxUpyjIPZYAaLi+g=="
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.2.0.tgz",
"integrity": "sha512-eE0QmSh6xToqM3sxHiJYg/QFdNn52ZEgmFE8A8abU8GsHvsIOolqH8B70/8+VGAKm5MlwaExhqR3DLIjOJMLPA=="
},
"d3-scale": {
"version": "2.2.2",

2
ui/package.json
View File

@ -143,7 +143,7 @@
"@influxdata/influx": "0.3.4",
"@influxdata/influxdb-templates": "influxdata/influxdb-templates",
"@influxdata/react-custom-scrollbars": "4.3.8",
"@influxdata/vis": "^0.8.0",
"@influxdata/vis": "^0.9.0",
"axios": "^0.18.0",
"babel-polyfill": "^6.26.0",
"bignumber.js": "^4.0.2",

25
ui/src/shared/components/HeatmapContainer.tsx
View File

@ -1,7 +1,6 @@
// Libraries
import React, {FunctionComponent} from 'react'
import {Config, Table} from '@influxdata/vis'
import {get} from 'lodash'
// Components
import EmptyGraphMessage from 'src/shared/components/EmptyGraphMessage'
@ -45,18 +44,23 @@ const HeatmapContainer: FunctionComponent<Props> = ({
},
children,
}) => {
const columnKeys = table.columnKeys
const [xDomain, onSetXDomain, onResetXDomain] = useVisDomainSettings(
storedXDomain,
get(table, ['columns', xColumn, 'data'], [])
columnKeys.includes(xColumn) ? table.getColumn(xColumn, 'number') : []
)
const [yDomain, onSetYDomain, onResetYDomain] = useVisDomainSettings(
storedYDomain,
get(table, ['columns', yColumn, 'data'], [])
columnKeys.includes(yColumn) ? table.getColumn(yColumn, 'number') : []
)
const isValidView =
xColumn && yColumn && table.columns[xColumn] && table.columns[yColumn]
xColumn &&
yColumn &&
xColumn in table.columnKeys &&
yColumn in table.columnKeys
if (!isValidView) {
return <EmptyGraphMessage message={INVALID_DATA_COPY} />
@ -67,8 +71,17 @@ const HeatmapContainer: FunctionComponent<Props> = ({
? storedColors
: DEFAULT_LINE_COLORS.map(c => c.hex)
const xFormatter = getFormatter(table.columns[xColumn].type, xPrefix, xSuffix)
const yFormatter = getFormatter(table.columns[yColumn].type, yPrefix, ySuffix)
const xFormatter = getFormatter(
table.getColumnType(xColumn),
xPrefix,
xSuffix
)
const yFormatter = getFormatter(
table.getColumnType(yColumn),
yPrefix,
ySuffix
)
const config: Config = {
...VIS_THEME,

13
ui/src/shared/components/HistogramContainer.tsx
View File

@ -1,7 +1,6 @@
// Libraries
import React, {FunctionComponent} from 'react'
import {Config, Table} from '@influxdata/vis'
import {get} from 'lodash'
// Components
import EmptyGraphMessage from 'src/shared/components/EmptyGraphMessage'
@ -40,15 +39,15 @@ const HistogramContainer: FunctionComponent<Props> = ({
xDomain: storedXDomain,
},
}) => {
const columnKeys = table.columnKeys
const [xDomain, onSetXDomain, onResetXDomain] = useVisDomainSettings(
storedXDomain,
get(table, ['columns', xColumn, 'data'], [])
columnKeys.includes(xColumn) ? table.getColumn(xColumn, 'number') : []
)
const isValidView =
xColumn &&
table.columns[xColumn] &&
fillColumns.every(col => !!table.columns[col])
const isValidView = xColumn && columnKeys.includes(xColumn)
fillColumns.every(col => columnKeys.includes(col))
if (!isValidView) {
return <EmptyGraphMessage message={INVALID_DATA_COPY} />
@ -59,7 +58,7 @@ const HistogramContainer: FunctionComponent<Props> = ({
? colors.map(c => c.hex)
: DEFAULT_LINE_COLORS.map(c => c.hex)
const xFormatter = getFormatter(table.columns[xColumn].type)
const xFormatter = getFormatter(table.getColumnType(xColumn))
const config: Config = {
...VIS_THEME,

4
ui/src/shared/components/RefreshingViewSwitcher.tsx
View File

@ -138,10 +138,10 @@ const RefreshingViewSwitcher: FunctionComponent<Props> = ({
case ViewType.Scatter:
return (
<VisTableTransform files={files}>
{({table, groupKeyUnion}) => (
{({table, fluxGroupKeyUnion}) => (
<ScatterContainer
table={table}
groupKeyUnion={groupKeyUnion}
fluxGroupKeyUnion={fluxGroupKeyUnion}
loading={loading}
viewProperties={properties}
>

23
ui/src/shared/components/ScatterContainer.tsx
View File

@ -1,7 +1,6 @@
// Libraries
import React, {FunctionComponent} from 'react'
import {Config, Table} from '@influxdata/vis'
import {get} from 'lodash'
// Components
import EmptyGraphMessage from 'src/shared/components/EmptyGraphMessage'
@ -21,7 +20,7 @@ import {RemoteDataState, ScatterView} from 'src/types'
interface Props {
table: Table
groupKeyUnion?: Array<string>
fluxGroupKeyUnion?: string[]
loading: RemoteDataState
viewProperties: ScatterView
children: (config: Config) => JSX.Element
@ -50,23 +49,25 @@ const ScatterContainer: FunctionComponent<Props> = ({
const xColumn = chooseXColumn(table)
const yColumn = chooseYColumn(table)
const columnKeys = table.columnKeys
const [xDomain, onSetXDomain, onResetXDomain] = useVisDomainSettings(
storedXDomain,
get(table, ['columns', xColumn, 'data'], [])
columnKeys.includes(xColumn) ? table.getColumn(xColumn, 'number') : []
)
const [yDomain, onSetYDomain, onResetYDomain] = useVisDomainSettings(
storedYDomain,
get(table, ['columns', yColumn, 'data'], [])
columnKeys.includes(yColumn) ? table.getColumn(yColumn, 'number') : []
)
const isValidView =
xColumn &&
table.columns[xColumn] &&
columnKeys.includes(xColumn) &&
yColumn &&
table.columns[yColumn] &&
fillColumns.every(col => !!table.columns[col]) &&
symbolColumns.every(col => !!table.columns[col])
columnKeys.includes(yColumn) &&
fillColumns.every(col => columnKeys.includes(col)) &&
symbolColumns.every(col => columnKeys.includes(col))
if (!isValidView) {
return <EmptyGraphMessage message={INVALID_DATA_COPY} />
@ -75,7 +76,11 @@ const ScatterContainer: FunctionComponent<Props> = ({
const colorHexes =
colors && colors.length ? colors : DEFAULT_LINE_COLORS.map(c => c.hex)
const yFormatter = getFormatter(table.columns[yColumn].type, yPrefix, ySuffix)
const yFormatter = getFormatter(
table.getColumnType(yColumn),
yPrefix,
ySuffix
)
const config: Config = {
...VIS_THEME,

10
ui/src/shared/components/VisTableTransform.tsx
View File

@ -1,10 +1,10 @@
// Libraries
import {useMemo, FunctionComponent} from 'react'
import {fluxToTable, Table} from '@influxdata/vis'
import {fromFlux, Table} from '@influxdata/vis'
interface VisTableTransformResult {
table: Table
groupKeyUnion: Array<string>
fluxGroupKeyUnion: string[]
}
interface Props {
@ -14,13 +14,11 @@ interface Props {
const VisTableTransform: FunctionComponent<Props> = ({files, children}) => {
const {table, fluxGroupKeyUnion} = useMemo(
() => fluxToTable(files.join('\n\n')),
() => fromFlux(files.join('\n\n')),
[files]
)
const groupKeyUnion = Array.from(fluxGroupKeyUnion)
return children({table, groupKeyUnion})
return children({table, fluxGroupKeyUnion})
}
export default VisTableTransform

14
ui/src/shared/components/XYContainer.tsx
View File

@ -1,7 +1,6 @@
// Libraries
import {get} from 'lodash'
import React, {FunctionComponent, useMemo} from 'react'
import {Config, fluxToTable} from '@influxdata/vis'
import {Config, fromFlux} from '@influxdata/vis'
// Components
import EmptyGraphMessage from 'src/shared/components/EmptyGraphMessage'
@ -52,7 +51,7 @@ const XYContainer: FunctionComponent<Props> = ({
},
}) => {
const {table, fluxGroupKeyUnion} = useMemo(
() => fluxToTable(files.join('\n\n')),
() => fromFlux(files.join('\n\n')),
[files]
)
@ -63,16 +62,17 @@ const XYContainer: FunctionComponent<Props> = ({
const storedXDomain = useMemo(() => parseBounds(xBounds), [xBounds])
const storedYDomain = useMemo(() => parseBounds(yBounds), [yBounds])
const columnKeys = table.columnKeys
const [xDomain, onSetXDomain, onResetXDomain] = useVisDomainSettings(
storedXDomain,
get(table, ['columns', xColumn, 'data'], [])
columnKeys.includes(xColumn) ? table.getColumn(xColumn, 'number') : []
)
const [yDomain, onSetYDomain, onResetYDomain] = useVisDomainSettings(
storedYDomain,
get(table, ['columns', yColumn, 'data'], [])
columnKeys.includes(yColumn) ? table.getColumn(yColumn, 'number') : []
)
if (!xColumn || !yColumn) {
return <EmptyGraphMessage message={INVALID_DATA_COPY} />
}
@ -92,7 +92,7 @@ const XYContainer: FunctionComponent<Props> = ({
)
const yFormatter = getFormatter(
table.columns[yColumn].type,
table.getColumnType(yColumn),
yTickPrefix,
yTickSuffix
)

18
ui/src/shared/utils/latestValues.test.ts
View File

@ -1,4 +1,4 @@
import {fluxToTable} from '@influxdata/vis'
import {fromFlux} from '@influxdata/vis'
import {latestValues} from 'src/shared/utils/latestValues'
@ -32,8 +32,8 @@ describe('latestValues', () => {
,,1,2018-12-10T18:29:48Z,1
,,1,2018-12-10T18:54:18Z,2`
const latestValuesA = latestValues(fluxToTable(respA).table)
const latestValuesB = latestValues(fluxToTable(respB).table)
const latestValuesA = latestValues(fromFlux(respA).table)
const latestValuesB = latestValues(fromFlux(respB).table)
expect(latestValuesA).toEqual([2])
expect(latestValuesB).toEqual([2])
@ -54,7 +54,7 @@ describe('latestValues', () => {
,,1,2018-12-10T19:00:00Z,howdy
,,1,2018-12-10T20:00:00Z,howdy`
const result = latestValues(fluxToTable(resp).table)
const result = latestValues(fromFlux(resp).table)
expect(result).toEqual([4])
})
@ -67,7 +67,7 @@ describe('latestValues', () => {
,,0,2018-12-10T18:29:48Z,2018-12-10T18:29:48Z,3
,,0,2018-12-10T18:40:18Z,2018-12-10T18:40:18Z,4`
const result = latestValues(fluxToTable(resp).table)
const result = latestValues(fromFlux(resp).table)
expect(result).toEqual([4])
})
@ -80,7 +80,7 @@ describe('latestValues', () => {
,,0,3
,,0,4`
const result = latestValues(fluxToTable(resp).table)
const result = latestValues(fromFlux(resp).table)
expect(result).toEqual([])
})
@ -92,7 +92,7 @@ describe('latestValues', () => {
,result,table,_value,foo
,,0,3,4`
const result = latestValues(fluxToTable(resp).table)
const result = latestValues(fromFlux(resp).table)
expect(result).toEqual([3, 4])
})
@ -105,7 +105,7 @@ describe('latestValues', () => {
,,1,2018-12-10T19:00:00Z,howdy
,,1,2018-12-10T20:00:00Z,howdy`
const result = latestValues(fluxToTable(resp).table)
const result = latestValues(fromFlux(resp).table)
expect(result).toEqual([])
})
@ -124,7 +124,7 @@ describe('latestValues', () => {
,result,table,_time,_value,foo
,,0,2018-12-10T18:29:48Z,1,7.0
,,0,2018-12-10T18:40:18Z,2,8.0`
const table = fluxToTable(resp).table
const table = fromFlux(resp).table
const result = latestValues(table)
expect(result).toEqual([4, 6.0, 2.0, 8.0])

31
ui/src/shared/utils/latestValues.ts
View File

@ -1,5 +1,5 @@
import {get, range, flatMap} from 'lodash'
import {isNumeric, Table} from '@influxdata/vis'
import {range, flatMap} from 'lodash'
import {Table} from '@influxdata/vis'
/*
Return a list of the maximum elements in `xs`, where the magnitude of each
@ -36,9 +36,13 @@ const EXCLUDED_COLUMNS = new Set([
Determine if the values in a column should be considered in `latestValues`.
*/
const isValueCol = (table: Table, colKey: string): boolean => {
const {name, type} = table.columns[colKey]
const columnType = table.getColumnType(colKey)
const columnName = table.getColumnName(colKey)
return isNumeric(type) && !EXCLUDED_COLUMNS.has(name)
return (
(columnType === 'number' || columnType === 'time') &&
!EXCLUDED_COLUMNS.has(columnName)
)
}
/*
@ -66,26 +70,29 @@ const sortTableKeys = (keyA: string, keyB: string): number => {
If the table only has one row, then a time column is not needed.
*/
export const latestValues = (table: Table): number[] => {
const valueColsData = Object.keys(table.columns)
const valueColsData = table.columnKeys
.sort((a, b) => sortTableKeys(a, b))
.filter(k => isValueCol(table, k))
.map(k => table.columns[k].data) as number[][]
.map(k => table.getColumn(k)) as number[][]
if (!valueColsData.length) {
return []
}
const timeColData = get(
table,
'columns._time.data',
get(table, 'columns._stop.data') // Fallback to `_stop` column if `_time` column missing
)
const columnKeys = table.columnKeys
// Fallback to `_stop` column if `_time` column missing otherwise return empty array.
let timeColData = []
if (columnKeys.includes('_time')) {
timeColData = table.getColumn('_time', 'number')
} else if (columnKeys.includes('_stop')) {
timeColData = table.getColumn('_stop', 'number')
}
if (!timeColData && table.length !== 1) {
return []
}
const d = i => {
const d = (i: number) => {
const time = timeColData[i]
if (time && valueColsData.some(colData => !isNaN(colData[i]))) {

12
ui/src/shared/utils/vis.ts
View File

@ -1,6 +1,6 @@
// Libraries
import {format} from 'd3-format'
import {isNumeric, Table, ColumnType, LineInterpolation} from '@influxdata/vis'
import {Table, ColumnType, LineInterpolation} from '@influxdata/vis'
// Types
import {XYViewGeom, Axis} from 'src/types'
@ -68,7 +68,7 @@ export const filterNoisyColumns = (columns: string[], table: Table): string[] =>
return true
}
const keyData = table.columns[key].data
const keyData = table.getColumn(key)
return !keyData.every(d => d === keyData[0])
})
@ -111,7 +111,7 @@ export const extent = (xs: number[]): [number, number] | null => {
}
export const chooseXColumn = (table: Table): string | null => {
const columnKeys = new Set(Object.keys(table.columns))
const columnKeys = new Set(table.columnKeys)
if (columnKeys.has('_time')) {
return '_time'
@ -129,7 +129,9 @@ export const chooseXColumn = (table: Table): string | null => {
}
export const chooseYColumn = (table: Table): string | null => {
return Object.keys(table.columns).find(
k => k.startsWith('_value') && isNumeric(table.columns[k].type)
return table.columnKeys.find(
k =>
k.startsWith('_value') &&
(table.getColumnType(k) === 'number' || table.getColumnType(k) === 'time')
)
}

27
ui/src/timeMachine/selectors/index.ts
View File

@ -1,7 +1,7 @@
// Libraries
import memoizeOne from 'memoize-one'
import {get, flatMap} from 'lodash'
import {isNumeric, fluxToTable, Table} from '@influxdata/vis'
import {fromFlux, Table} from '@influxdata/vis'
// Utils
import {parseResponse} from 'src/shared/parsing/flux/response'
@ -35,7 +35,7 @@ const getTablesMemoized = memoizeOne(
export const getTables = (state: AppState): FluxTable[] =>
getTablesMemoized(getActiveTimeMachine(state).queryResults.files)
const getVisTableMemoized = memoizeOne(fluxToTable)
const getVisTableMemoized = memoizeOne(fromFlux)
export const getVisTable = (state: AppState): Table => {
const files = getActiveTimeMachine(state).queryResults.files || []
@ -46,14 +46,19 @@ export const getVisTable = (state: AppState): Table => {
const getNumericColumnsMemoized = memoizeOne(
(table: Table): string[] => {
const numericColumns = Object.entries(table.columns)
.filter(
([__, {name, type}]) =>
isNumeric(type) && name !== 'result' && name !== 'table'
)
.map(([name]) => name)
return numericColumns
const columnKeys = table.columnKeys
return columnKeys.reduce((numericColumns, key) => {
const columnType = table.getColumnType(key)
const columnName = table.getColumnName(key)
if (
(columnType === 'number' || columnType === 'time') &&
columnName !== 'result' &&
columnName !== 'table'
) {
numericColumns.push(columnName)
}
return numericColumns
}, [])
}
)
@ -66,7 +71,7 @@ export const getNumericColumns = (state: AppState): string[] => {
const getGroupableColumnsMemoized = memoizeOne(
(table: Table): string[] => {
const invalidGroupColumns = new Set(['_value', '_start', '_stop', '_time'])
const groupableColumns = Object.keys(table.columns).filter(
const groupableColumns = table.columnKeys.filter(
name => !invalidGroupColumns.has(name)
)