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

Reworking legend positioning

pull/517/head
Alex P 2016-11-11 16:55:24 -08:00
parent 87096b847b
commit 03ac9fe84f
2 changed files with 20 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -82,21 +82,22 @@ export default React.createClass({
highlightCircleSize: 5,
},
highlightCallback(e, x, points) {
// Move the Legend on hover
const graphRect = graphContainerNode.getBoundingClientRect();
const legendHeight = legendContainerNode.offsetHeight;
if (graphRect.bottom + legendHeight > document.documentElement.clientHeight) {
// The legend would be at least partially beyond the bottom of the viewport,
// so try to place it at the top of the graph, but don't let it go above the top of the viewport.
const newTop = Math.max(0, selfNode.getBoundingClientRect().top - legendHeight);
legendContainerNode.style.top = `${newTop}px`;
} else {
legendContainerNode.style.top = `${graphRect.bottom}px`;
const legendRect = legendContainerNode.getBoundingClientRect();
const graphWidth = graphRect.width + 32; // Factoring in padding from parent
const legendWidth = legendRect.width;
const legendMaxLeft = graphWidth - (legendWidth / 2);
const trueGraphX = (e.pageX - graphRect.left);
let legendLeft = trueGraphX;
// Enforcing max & min legend offsets
if (trueGraphX < (legendWidth / 2)) {
legendLeft = legendWidth / 2;
} else if (trueGraphX > legendMaxLeft) {
legendLeft = legendMaxLeft;
}
const legendWidth = legendContainerNode.offsetWidth;
const leftOffset = Math.min(e.pageX, graphRect.right - legendWidth);
legendContainerNode.style.left = `${leftOffset}px`;
legendContainerNode.style.left = `${legendLeft}px`;
setMarker(points);
},
unhighlightCallback() {

9
ui/src/style/enterprise_style/kapacitor.scss
View File

@ -65,10 +65,15 @@ $kapacitor-font-sm: 13px;
width: calc(100% - #{$kapacitor-page-gutter});
background-color: $kapacitor-graphic-color;
border-radius: 0 0 $kap-radius-lg $kap-radius-lg;
padding: $kap-padding-sm ($kap-padding-lg + 2px) $kap-padding-sm $kap-padding-lg;
height: (320px + ($kap-padding-sm * 2));
padding: 0 $kap-padding-sm;
height: (300px + ($kap-padding-sm * 2));
position: relative;
> div {
padding: 8px 16px;
position: relative;
}
&:before {
content: '';
display: block;