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

Prevent user from creating annotations outside the visible graph

pull/2829/head
Alex P 2018-02-26 14:40:45 -08:00
parent cb41f5acdd
commit fdb9e5389d
1 changed files with 10 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
ui/src/shared/components/NewAnnotation.js
View File

@ -14,12 +14,19 @@ class NewAnnotation extends Component {
gatherMode: 'startTime', gatherMode: 'startTime',
} }
enforceGraphBounds = newTime => {
const {dygraph} = this.props
const xRangeStart = dygraph.xAxisRange()[0]
return newTime < xRangeStart ? `${xRangeStart}` : `${newTime}`
}
handleMouseDown = e => { handleMouseDown = e => {
const {tempAnnotation, dygraph, onUpdateAnnotation} = this.props const {tempAnnotation, dygraph, onUpdateAnnotation} = this.props
const wrapperRect = this.wrapper.getBoundingClientRect() const wrapperRect = this.wrapper.getBoundingClientRect()
const trueGraphX = e.pageX - wrapperRect.left const trueGraphX = e.pageX - wrapperRect.left
const startTime = `${dygraph.toDataXCoord(trueGraphX)}` const startTime = this.enforceGraphBounds(dygraph.toDataXCoord(trueGraphX))
onUpdateAnnotation({...tempAnnotation, startTime}) onUpdateAnnotation({...tempAnnotation, startTime})
this.setState({gatherMode: 'endTime'}) this.setState({gatherMode: 'endTime'})
@ -33,8 +40,7 @@ class NewAnnotation extends Component {
const {dygraph, tempAnnotation, onUpdateAnnotation} = this.props const {dygraph, tempAnnotation, onUpdateAnnotation} = this.props
const wrapperRect = this.wrapper.getBoundingClientRect() const wrapperRect = this.wrapper.getBoundingClientRect()
const trueGraphX = e.pageX - wrapperRect.left const trueGraphX = e.pageX - wrapperRect.left
const newTime = this.enforceGraphBounds(dygraph.toDataXCoord(trueGraphX))
const newTime = `${dygraph.toDataXCoord(trueGraphX)}`
if (this.state.gatherMode === 'startTime') { if (this.state.gatherMode === 'startTime') {
onUpdateAnnotation({ onUpdateAnnotation({
@ -59,7 +65,7 @@ class NewAnnotation extends Component {
const {dygraph, tempAnnotation, onUpdateAnnotation} = this.props const {dygraph, tempAnnotation, onUpdateAnnotation} = this.props
const wrapperRect = this.wrapper.getBoundingClientRect() const wrapperRect = this.wrapper.getBoundingClientRect()
const trueGraphX = e.pageX - wrapperRect.left const trueGraphX = e.pageX - wrapperRect.left
const upTime = `${dygraph.toDataXCoord(trueGraphX)}` const upTime = this.enforceGraphBounds(dygraph.toDataXCoord(trueGraphX))
const downTime = tempAnnotation.startTime const downTime = tempAnnotation.startTime
const [startTime, endTime] = [downTime, upTime].sort() const [startTime, endTime] = [downTime, upTime].sort()