Skip to content

Commit

Permalink
Upgrade vis library
Browse files Browse the repository at this point in the history
  • Loading branch information
chnn committed Jun 7, 2019
1 parent 02c12a0 commit c2743fc
Show file tree
Hide file tree
Showing 25 changed files with 86 additions and 81 deletions.
2 changes: 2 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@

### Bug Fixes

1. [14085](https://github.com/influxdata/influxdb/pull/14085): Fix performance regression in graph tooltips

### UI Improvements

## v2.0.0-alpha.11 [2019-05-31]
Expand Down
96 changes: 48 additions & 48 deletions ui/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion ui/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@
"@influxdata/influx": "github:influxdata/influxdb2-js#dev",
"@influxdata/influxdb-templates": "influxdata/influxdb-templates",
"@influxdata/react-custom-scrollbars": "4.3.8",
"@influxdata/vis": "^0.9.0",
"@influxdata/giraffe": "0.11.0",
"axios": "^0.18.0",
"babel-polyfill": "^6.26.0",
"bignumber.js": "^4.0.2",
Expand Down
6 changes: 3 additions & 3 deletions ui/src/shared/components/HeatmapContainer.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// Libraries
import React, {FunctionComponent} from 'react'
import {Config, Table} from '@influxdata/vis'
import {Config, Table} from '@influxdata/giraffe'

// Components
import EmptyGraphMessage from 'src/shared/components/EmptyGraphMessage'
Expand Down Expand Up @@ -48,12 +48,12 @@ const HeatmapContainer: FunctionComponent<Props> = ({

const [xDomain, onSetXDomain, onResetXDomain] = useVisDomainSettings(
storedXDomain,
columnKeys.includes(xColumn) ? table.getColumn(xColumn, 'number') : []
table.getColumn(xColumn, 'number')
)

const [yDomain, onSetYDomain, onResetYDomain] = useVisDomainSettings(
storedYDomain,
columnKeys.includes(yColumn) ? table.getColumn(yColumn, 'number') : []
table.getColumn(yColumn, 'number')
)

const isValidView =
Expand Down
4 changes: 2 additions & 2 deletions ui/src/shared/components/HistogramContainer.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// Libraries
import React, {FunctionComponent} from 'react'
import {Config, Table} from '@influxdata/vis'
import {Config, Table} from '@influxdata/giraffe'

// Components
import EmptyGraphMessage from 'src/shared/components/EmptyGraphMessage'
Expand Down Expand Up @@ -43,7 +43,7 @@ const HistogramContainer: FunctionComponent<Props> = ({

const [xDomain, onSetXDomain, onResetXDomain] = useVisDomainSettings(
storedXDomain,
columnKeys.includes(xColumn) ? table.getColumn(xColumn, 'number') : []
table.getColumn(xColumn, 'number')
)

const isValidView =
Expand Down
2 changes: 1 addition & 1 deletion ui/src/shared/components/LatestValueTransform.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// Libraries
import React, {useMemo, FunctionComponent} from 'react'
import {Table} from '@influxdata/vis'
import {Table} from '@influxdata/giraffe'

// Components
import EmptyGraphMessage from 'src/shared/components/EmptyGraphMessage'
Expand Down
2 changes: 1 addition & 1 deletion ui/src/shared/components/RefreshingViewSwitcher.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// Libraries
import React, {FunctionComponent} from 'react'
import {Plot} from '@influxdata/vis'
import {Plot} from '@influxdata/giraffe'

// Components
import GaugeChart from 'src/shared/components/GaugeChart'
Expand Down
6 changes: 3 additions & 3 deletions ui/src/shared/components/ScatterContainer.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// Libraries
import React, {FunctionComponent} from 'react'
import {Config, Table} from '@influxdata/vis'
import {Config, Table} from '@influxdata/giraffe'

// Components
import EmptyGraphMessage from 'src/shared/components/EmptyGraphMessage'
Expand Down Expand Up @@ -54,12 +54,12 @@ const ScatterContainer: FunctionComponent<Props> = ({

const [xDomain, onSetXDomain, onResetXDomain] = useVisDomainSettings(
storedXDomain,
columnKeys.includes(xColumn) ? table.getColumn(xColumn, 'number') : []
table.getColumn(xColumn, 'number')
)

const [yDomain, onSetYDomain, onResetYDomain] = useVisDomainSettings(
storedYDomain,
columnKeys.includes(yColumn) ? table.getColumn(yColumn, 'number') : []
table.getColumn(yColumn, 'number')
)

const isValidView =
Expand Down
2 changes: 1 addition & 1 deletion ui/src/shared/components/VisTableTransform.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// Libraries
import {useMemo, FunctionComponent} from 'react'
import {fromFlux, Table} from '@influxdata/vis'
import {fromFlux, Table} from '@influxdata/giraffe'

interface VisTableTransformResult {
table: Table
Expand Down
6 changes: 3 additions & 3 deletions ui/src/shared/components/XYContainer.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// Libraries
import React, {FunctionComponent, useMemo} from 'react'
import {Config, Table} from '@influxdata/vis'
import {Config, Table} from '@influxdata/giraffe'

// Components
import EmptyGraphMessage from 'src/shared/components/EmptyGraphMessage'
Expand Down Expand Up @@ -65,12 +65,12 @@ const XYContainer: FunctionComponent<Props> = ({

const [xDomain, onSetXDomain, onResetXDomain] = useVisDomainSettings(
storedXDomain,
columnKeys.includes(xColumn) ? table.getColumn(xColumn, 'number') : []
table.getColumn(xColumn, 'number')
)

const [yDomain, onSetYDomain, onResetYDomain] = useVisDomainSettings(
storedYDomain,
columnKeys.includes(yColumn) ? table.getColumn(yColumn, 'number') : []
table.getColumn(yColumn, 'number')
)

const isValidView =
Expand Down
2 changes: 1 addition & 1 deletion ui/src/shared/components/cells/Cell.scss
Original file line number Diff line number Diff line change
Expand Up @@ -183,7 +183,7 @@ $cell--header-size: 36px;
padding: $ix-marg-c;
}

.vis-tooltip-container {
.giraffe-tooltip-container {
z-index: $z--dygraph-legend;
}

Expand Down
2 changes: 1 addition & 1 deletion ui/src/shared/constants/index.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import _ from 'lodash'
import {Config} from '@influxdata/vis'
import {Config} from '@influxdata/giraffe'
import {AutoRefreshStatus} from 'src/types'

export const DEFAULT_TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss'
Expand Down
2 changes: 1 addition & 1 deletion ui/src/shared/utils/latestValues.test.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import {fromFlux} from '@influxdata/vis'
import {fromFlux} from '@influxdata/giraffe'

import {latestValues} from 'src/shared/utils/latestValues'

Expand Down
6 changes: 4 additions & 2 deletions ui/src/shared/utils/latestValues.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import {range, flatMap} from 'lodash'
import {Table} from '@influxdata/vis'
import {Table, NumericColumnData} from '@influxdata/giraffe'

/*
Return a list of the maximum elements in `xs`, where the magnitude of each
Expand Down Expand Up @@ -80,8 +80,10 @@ export const latestValues = (table: Table): number[] => {
}

const columnKeys = table.columnKeys

// Fallback to `_stop` column if `_time` column missing otherwise return empty array.
let timeColData = []
let timeColData: NumericColumnData = []

if (columnKeys.includes('_time')) {
timeColData = table.getColumn('_time', 'number')
} else if (columnKeys.includes('_stop')) {
Expand Down
7 changes: 4 additions & 3 deletions ui/src/shared/utils/useVisDomainSettings.ts
Original file line number Diff line number Diff line change
@@ -1,24 +1,25 @@
// Libraries
import {useMemo} from 'react'
import {NumericColumnData} from '@influxdata/giraffe'

// Utils
import {useOneWayState} from 'src/shared/utils/useOneWayState'
import {extent} from 'src/shared/utils/vis'

/*
This hook helps map the domain setting stored for line graph to the
appropriate settings on a @influxdata/vis `Config` object.
appropriate settings on a @influxdata/giraffe `Config` object.
If the domain setting is present, it should be used. If the domain setting is
not present, then the min/max values shown should be derived from the data
passed to the plot.
*/
export const useVisDomainSettings = (
storedDomain: [number, number],
data: number[]
data: NumericColumnData = []
) => {
const initialDomain = useMemo(
() => (storedDomain ? storedDomain : extent(data)),
() => (storedDomain ? storedDomain : extent(data as number[])),
[storedDomain, data]
)

Expand Down
2 changes: 1 addition & 1 deletion ui/src/shared/utils/view.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
// Constants
import {INFERNO, NINETEEN_EIGHTY_FOUR} from '@influxdata/vis'
import {INFERNO, NINETEEN_EIGHTY_FOUR} from '@influxdata/giraffe'
import {DEFAULT_LINE_COLORS} from 'src/shared/constants/graphColorPalettes'
import {DEFAULT_CELL_NAME} from 'src/dashboards/constants/index'
import {
Expand Down
2 changes: 1 addition & 1 deletion ui/src/shared/utils/vis.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
// Libraries
import {Table, ColumnType, LineInterpolation} from '@influxdata/vis'
import {Table, ColumnType, LineInterpolation} from '@influxdata/giraffe'

// Utils
import {formatNumber} from 'src/shared/utils/formatNumber'
Expand Down
2 changes: 1 addition & 1 deletion ui/src/timeMachine/actions/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import {
AutoRefresh,
} from 'src/types'
import {Color} from 'src/types/colors'
import {HistogramPosition} from '@influxdata/vis'
import {HistogramPosition} from '@influxdata/giraffe'

export type Action =
| QueryBuilderAction
Expand Down
2 changes: 1 addition & 1 deletion ui/src/timeMachine/components/VisDataTransform.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// Libraries
import {FunctionComponent} from 'react'
import {connect} from 'react-redux'
import {Table} from '@influxdata/vis'
import {Table} from '@influxdata/giraffe'

// Utils
import {
Expand Down
2 changes: 1 addition & 1 deletion ui/src/timeMachine/components/VisSwitcher.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import React, {FunctionComponent} from 'react'
import {connect} from 'react-redux'
import {AutoSizer} from 'react-virtualized'
import {Plot} from '@influxdata/vis'
import {Plot} from '@influxdata/giraffe'

// Components
import RawFluxDataTable from 'src/timeMachine/components/RawFluxDataTable'
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// Libraries
import React, {FunctionComponent, ChangeEvent} from 'react'
import {connect} from 'react-redux'
import {VIRIDIS, MAGMA, INFERNO, PLASMA} from '@influxdata/vis'
import {VIRIDIS, MAGMA, INFERNO, PLASMA} from '@influxdata/giraffe'
import {Form, Grid, Input, Columns, InputType} from '@influxdata/clockface'

// Components
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ import {

// Types
import {ComponentStatus} from '@influxdata/clockface'
import {HistogramPosition} from '@influxdata/vis'
import {HistogramPosition} from '@influxdata/giraffe'
import {Color} from 'src/types/colors'
import {AppState} from 'src/types'
import ColumnSelector from 'src/shared/components/ColumnSelector'
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {
CTHULHU,
ECTOPLASM,
T_MAX_400_FILM,
} from '@influxdata/vis'
} from '@influxdata/giraffe'

// Components
import {Form, Input, Grid} from '@influxdata/clockface'
Expand Down
2 changes: 1 addition & 1 deletion ui/src/timeMachine/selectors/index.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// Libraries
import memoizeOne from 'memoize-one'
import {get, flatMap} from 'lodash'
import {fromFlux, Table} from '@influxdata/vis'
import {fromFlux, Table} from '@influxdata/giraffe'

// Utils
import {parseResponse} from 'src/shared/parsing/flux/response'
Expand Down
2 changes: 1 addition & 1 deletion ui/src/types/dashboards.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import {HistogramPosition} from '@influxdata/vis'
import {HistogramPosition} from '@influxdata/giraffe'
import {Color} from 'src/types/colors'

import {
Expand Down

0 comments on commit c2743fc

Please sign in to comment.