Refactor charts
This commit is contained in:
Thomas Nordquist
@@ -1,13 +1,17 @@
|
||||
import React from 'react'
|
||||
import DateFormatter from '../helper/DateFormatter'
|
||||
import NumberFormatter from '../helper/NumberFormatter'
|
||||
import Portal from '@material-ui/core/Portal'
|
||||
import React, { useRef, useCallback, useState } from 'react'
|
||||
import { default as ReactResizeDetector } from 'react-resize-detector'
|
||||
import { PlotCurveTypes } from '../../reducers/Charts'
|
||||
import { Theme, withTheme } from '@material-ui/core'
|
||||
import 'react-vis/dist/style.css'
|
||||
const { XYPlot, LineMarkSeries, Hint, XAxis, YAxis, HorizontalGridLines } = require('react-vis')
|
||||
const abbreviate = require('number-abbreviate')
|
||||
import Portal from '@material-ui/core/Portal'
|
||||
import { Theme, Typography, withTheme, Popper, Paper } from '@material-ui/core'
|
||||
import { useCustomXDomain } from './useCustomXDomain'
|
||||
import 'react-vis/dist/style.css'
|
||||
import { number } from 'prop-types'
|
||||
import { fade } from '@material-ui/core/styles'
|
||||
import { toggleAdvancedSettings } from '../../actions/ConnectionManager'
|
||||
const { XYPlot, LineMarkSeries, Hint, XAxis, YAxis, HorizontalGridLines, Highlight, MouseEvent } = require('react-vis')
|
||||
const abbreviate = require('number-abbreviate')
|
||||
|
||||
export interface Props {
|
||||
data: Array<{ x: number; y: number }>
|
||||
@@ -35,26 +39,57 @@ function mapCurveType(type: PlotCurveTypes | undefined) {
|
||||
}
|
||||
}
|
||||
|
||||
function useToggle(initialState: boolean): [boolean, () => void, (value: boolean) => void] {
|
||||
const [value, setValue] = useState(initialState)
|
||||
const toggle = useCallback(() => {
|
||||
setValue(!value)
|
||||
}, [value])
|
||||
|
||||
return [value, toggle, setValue]
|
||||
}
|
||||
|
||||
export default withTheme((props: Props) => {
|
||||
const [hintStaysOpen, toggleHintStaysOpen, setStaysOpen] = useToggle(false)
|
||||
const [width, setWidth] = React.useState(300)
|
||||
const [tooltip, setTooltip] = React.useState({ value: undefined })
|
||||
const [tooltip, setTooltip] = React.useState<{ value: any; element: any } | undefined>()
|
||||
const detectResize = React.useCallback(newWidth => setWidth(newWidth), [])
|
||||
|
||||
const hintFormatter = React.useCallback((point: any) => {
|
||||
return [
|
||||
{ title: <b>Time</b>, value: <DateFormatter date={new Date(point.x)} /> },
|
||||
{ title: <b>Value</b>, value: point.y },
|
||||
{ title: <b>Time</b>, value: <DateFormatter timeFirst={true} date={new Date(point.x)} /> },
|
||||
{ title: <b>Value</b>, value: <NumberFormatter value={point.y} /> },
|
||||
{ title: <b>Raw</b>, value: point.y },
|
||||
]
|
||||
}, [])
|
||||
|
||||
const hideTooltip = React.useCallback(() => {
|
||||
setTooltip({ value: undefined })
|
||||
if (!hintStaysOpen) {
|
||||
setTooltip(undefined)
|
||||
}
|
||||
}, [hintStaysOpen])
|
||||
|
||||
const onMouseLeave = React.useCallback(() => {
|
||||
setStaysOpen(false)
|
||||
setTooltip(undefined)
|
||||
}, [])
|
||||
|
||||
const showTooltip = React.useCallback((value: any) => {
|
||||
setTooltip({ value })
|
||||
const showTooltip = React.useCallback((value: any, something: { event: MouseEvent }) => {
|
||||
if (!something) {
|
||||
return
|
||||
}
|
||||
setTooltip({ value: hintFormatter(value), element: something.event.target })
|
||||
}, [])
|
||||
|
||||
const onValueClick = React.useCallback(
|
||||
(value: any, something: { event: MouseEvent }) => {
|
||||
toggleHintStaysOpen()
|
||||
console.log('onValueClick')
|
||||
|
||||
showTooltip(value, something)
|
||||
},
|
||||
[toggleHintStaysOpen]
|
||||
)
|
||||
|
||||
const xDomain = useCustomXDomain(props)
|
||||
|
||||
return React.useMemo(() => {
|
||||
@@ -70,28 +105,100 @@ export default withTheme((props: Props) => {
|
||||
color = props.color
|
||||
}
|
||||
|
||||
const hasData = data.length > 0
|
||||
const dummyDomain = [-1, 1]
|
||||
const dummyData = [{ x: -2, y: -2 }]
|
||||
return (
|
||||
<div style={{ height: '150px', overflow: 'hidden' }}>
|
||||
<XYPlot width={width} height={180} yDomain={yDomain} xDomain={xDomain}>
|
||||
<HorizontalGridLines />
|
||||
<XAxis />
|
||||
<YAxis width={45} tickFormat={(num: number) => abbreviate(num)} />
|
||||
<LineMarkSeries
|
||||
color={color}
|
||||
onValueMouseOver={showTooltip}
|
||||
onValueMouseOut={hideTooltip}
|
||||
size={3}
|
||||
data={data}
|
||||
curve={mapCurveType(props.interpolation)}
|
||||
/>
|
||||
{tooltip.value ? <Hint format={hintFormatter} value={tooltip.value} /> : null}
|
||||
</XYPlot>
|
||||
<ReactResizeDetector handleWidth={true} onResize={detectResize} />
|
||||
<div>
|
||||
<div style={{ height: '150px', width: '100%', position: 'relative' }}>
|
||||
{data.length === 0 ? <NoData /> : null}
|
||||
<XYPlot
|
||||
width={width}
|
||||
height={180}
|
||||
yDomain={hasData ? yDomain : dummyDomain}
|
||||
xDomain={hasData ? xDomain : dummyDomain}
|
||||
onMouseLeave={onMouseLeave}
|
||||
>
|
||||
<HorizontalGridLines />
|
||||
<YAxis width={45} tickFormat={(num: number) => abbreviate(num)} />
|
||||
<LineMarkSeries
|
||||
color={color}
|
||||
onValueMouseOver={showTooltip}
|
||||
onValueMouseOut={hideTooltip}
|
||||
onValueClick={onValueClick}
|
||||
size={3}
|
||||
data={hasData ? data : dummyData}
|
||||
curve={mapCurveType(props.interpolation)}
|
||||
/>
|
||||
<Hint value={{}}>
|
||||
<Popper open={Boolean(tooltip)} placement="top" anchorEl={tooltip && tooltip.element}>
|
||||
<div
|
||||
style={{
|
||||
paddingBottom: '8px',
|
||||
}}
|
||||
>
|
||||
<Paper
|
||||
style={{
|
||||
padding: '4px',
|
||||
marginTop: '-12px',
|
||||
backgroundColor: fade(
|
||||
props.theme.palette.type === 'light'
|
||||
? props.theme.palette.background.paper
|
||||
: props.theme.palette.background.default,
|
||||
0.7
|
||||
),
|
||||
}}
|
||||
>
|
||||
<table style={{ lineHeight: '1.25em' }}>
|
||||
<tbody>
|
||||
{tooltip &&
|
||||
tooltip.value.map((v: any, idx: number) => (
|
||||
<tr key={idx}>
|
||||
<td>
|
||||
<Typography style={{ lineHeight: '1.2' }}>{v.title}</Typography>
|
||||
</td>
|
||||
<td>
|
||||
<Typography style={{ lineHeight: '1.2' }}>{v.value}</Typography>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</Paper>
|
||||
</div>
|
||||
</Popper>
|
||||
</Hint>
|
||||
</XYPlot>
|
||||
<ReactResizeDetector handleWidth={true} onResize={detectResize} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}, [width, props.data, tooltip, props.interpolation, props.range, props.color, props.theme, xDomain])
|
||||
})
|
||||
|
||||
function NoData() {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
height: '100%',
|
||||
position: 'absolute',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
width: '100%',
|
||||
color: '#ccc',
|
||||
verticalAlign: 'middle',
|
||||
paddingLeft: '30px',
|
||||
zIndex: 10,
|
||||
}}
|
||||
>
|
||||
<Typography style={{ fontWeight: 'bold' }} variant="h5">
|
||||
No Data
|
||||
</Typography>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function domainForData(data: Array<{ x: number; y: number }>): [number, number] {
|
||||
if (!data[0]) {
|
||||
const defaultDomain: [number, number] = [-1, 1]
|
||||
|
||||
10
app/src/components/Sidebar/useCustomXDomain.tsx
Normal file
10
app/src/components/Sidebar/useCustomXDomain.tsx
Normal file
@@ -0,0 +1,10 @@
|
||||
import { useMemo } from 'react'
|
||||
import { Props } from './PlotHistory'
|
||||
|
||||
export function useCustomXDomain(props: Props): [number, number] | undefined {
|
||||
return useMemo(() => {
|
||||
const lastDataPoint = [...props.data].sort((a, b) => b.x - a.x)[0]
|
||||
const lastDataDate = lastDataPoint ? lastDataPoint.x : Date.now()
|
||||
return props.timeRangeStart ? [Date.now() - props.timeRangeStart, lastDataDate] : undefined
|
||||
}, [props.data, props.timeRangeStart])
|
||||
}
|
||||
Reference in New Issue
Block a user