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

Position legend on left or right side of crosshair when unable to position above or below graph

pull/2046/head
Alex P 2017-09-27 18:44:41 -07:00
parent 766926dfaf
commit ed6d5d2c32
2 changed files with 59 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
ui/src/shared/components/Dygraph.js
View File

@ -342,6 +342,8 @@ export default class Dygraph extends Component {
}
highlightCallback = e => {
const chronografChromeSize = 60 // Width & Height of navigation page elements
// Move the Legend on hover
const graphRect = this.graphRef.getBoundingClientRect()
const legendRect = this.legendRef.getBoundingClientRect()
@ -366,13 +368,45 @@ export default class Dygraph extends Component {
// Disallow screen overflow of legend
const isLegendBottomClipped = graphBottom + legendHeight > screenHeight
const isLegendTopClipped =
legendHeight > graphRect.top - chronografChromeSize
const willLegendFitLeft = e.pageX - chronografChromeSize > legendWidth
const legendTop = isLegendBottomClipped ? -legendHeight : graphHeight + 8
let legendTop = graphHeight + 8
if (!isLegendBottomClipped && !isLegendTopClipped) {
this.legendRef.classList.add('dygraph-legend--top')
this.legendRef.classList.remove('dygraph-legend--bottom')
this.legendRef.classList.remove('dygraph-legend--left')
this.legendRef.classList.remove('dygraph-legend--right')
}
if (isLegendBottomClipped) {
this.legendRef.classList.add('dygraph-legend--above')
// If legend is only clipped on the bottom, position above graph
if (isLegendBottomClipped && !isLegendTopClipped) {
this.legendRef.classList.add('dygraph-legend--bottom')
this.legendRef.classList.remove('dygraph-legend--top')
this.legendRef.classList.remove('dygraph-legend--left')
this.legendRef.classList.remove('dygraph-legend--right')
legendTop = -legendHeight
}
// If legend is clipped on top and bottom, posiition on either side of crosshair
if (isLegendBottomClipped && isLegendTopClipped) {
legendTop = 0
if (willLegendFitLeft) {
legendLeft = trueGraphX - legendWidth / 2
legendLeft -= 8
this.legendRef.classList.add('dygraph-legend--right')
this.legendRef.classList.remove('dygraph-legend--top')
this.legendRef.classList.remove('dygraph-legend--bottom')
this.legendRef.classList.remove('dygraph-legend--left')
} else {
this.legendRef.classList.remove('dygraph-legend--above')
legendLeft = trueGraphX + legendWidth / 2
legendLeft += 32
this.legendRef.classList.add('dygraph-legend--left')
this.legendRef.classList.remove('dygraph-legend--top')
this.legendRef.classList.remove('dygraph-legend--right')
this.legendRef.classList.remove('dygraph-legend--bottom')
}
}
this.legendRef.style.left = `${legendLeft}px`

26
ui/src/style/components/dygraphs.scss
View File

@ -148,23 +148,37 @@
display: none !important;
}
// Arrow
// Arrow (default is on top of legend aka below graph)
&:after {
content: '';
position: absolute;
border-width: 8px;
border-style: solid;
border-color: transparent;
}
&.dygraph-legend--top:after {
top: -16px;
border-bottom-color: $g0-obsidian;
left: 50%;
top: -16px;
transform: translateX(-50%);
}
&.dygraph-legend--above:after {
top: initial;
border-color: transparent;
border-top-color: $g0-obsidian;
&.dygraph-legend--bottom:after {
bottom: -16px;
border-top-color: $g0-obsidian;
left: 50%;
transform: translateX(-50%);
}
&.dygraph-legend--left:after {
left: -16px;
border-right-color: $g0-obsidian;
top: 50%;
transform: translateY(-50%);
}
&.dygraph-legend--right:after {
right: -16px;
border-left-color: $g0-obsidian;
top: 50%;
transform: translateY(-50%);
}
}
.dygraph-legend--header {