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

WIP Stop crosshair flickering

pull/10616/head
Andrew Watkins 2018-04-19 13:11:18 -07:00
parent 1ee99a5d46
commit 4f00cfbba8
3 changed files with 8 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
ui/src/shared/components/Crosshair.tsx
View File

@ -1,10 +1,8 @@
import React, {PureComponent} from 'react' import React, {PureComponent} from 'react'
import Dygraph from 'dygraphs' import Dygraph from 'dygraphs'
import classnames from 'classnames'
import {connect} from 'react-redux' import {connect} from 'react-redux'
import {DYGRAPH_CONTAINER_XLABEL_MARGIN} from 'src/shared/constants' import {DYGRAPH_CONTAINER_XLABEL_MARGIN} from 'src/shared/constants'
import {NULL_HOVER_TIME} from 'src/shared/constants/tableGraph'
interface Props { interface Props {
hoverTime: number hoverTime: number
@ -17,13 +15,11 @@ class Crosshair extends PureComponent<Props> {
return ( return (
<div className="crosshair-container"> <div className="crosshair-container">
<div <div
className={classnames('crosshair', { className="crosshair"
hidden: this.isHidden,
})}
style={{ style={{
left: this.crosshairLeft, left: this.crosshairLeft,
height: this.crosshairHeight, height: this.crosshairHeight,
zIndex: 1999, width: '1px',
}} }}
/> />
</div> </div>
@ -32,20 +28,14 @@ class Crosshair extends PureComponent<Props> {
private get crosshairLeft(): number { private get crosshairLeft(): number {
const {dygraph, hoverTime} = this.props const {dygraph, hoverTime} = this.props
const cursorOffset = 16
return Math.round( return dygraph.toDomXCoord(hoverTime) + cursorOffset
Math.max(-1000, dygraph.toDomXCoord(hoverTime)) || -1000 + 1
)
} }
private get crosshairHeight(): string { private get crosshairHeight(): string {
return `calc(100% - ${this.props.staticLegendHeight + return `calc(100% - ${this.props.staticLegendHeight +
DYGRAPH_CONTAINER_XLABEL_MARGIN}px)` DYGRAPH_CONTAINER_XLABEL_MARGIN}px)`
} }
private get isHidden(): boolean {
return this.props.hoverTime === +NULL_HOVER_TIME
}
} }
const mapStateToProps = ({dashboardUI, annotations: {mode}}) => ({ const mapStateToProps = ({dashboardUI, annotations: {mode}}) => ({

4
ui/src/shared/components/DygraphLegend.js
View File

@ -42,10 +42,10 @@ class DygraphLegend extends Component {
} }
} }
highlightCallback = e => { highlightCallback = _.throttle(e => {
this.setState({pageX: e.pageX}) this.setState({pageX: e.pageX})
this.props.onShow(e) this.props.onShow(e)
} }, 60)
legendFormatter = legend => { legendFormatter = legend => {
if (!legend.x) { if (!legend.x) {

14
ui/src/style/components/crosshairs.scss
View File

@ -8,22 +8,12 @@
cursor: pointer; cursor: pointer;
} }
.crosshair-container {
@extend %crosshair-styles;
z-index: 0;
top: 8px;
width: calc(100% - 32px);
height: calc(100% - 16px);
}
.crosshair { .crosshair {
@extend %crosshair-styles; @extend %crosshair-styles;
top: 0; top: 0;
height: calc(100% - 20px); height: calc(100% - 20px);
width: 0.5px; width: 0.5px;
background-color: $g14-chromium; background-color: $g14-chromium;
} pointer-events: none;
z-index: 3;
.crosshair.hidden {
visibility: hidden;
} }